/* 02 · PAGE STYLES — Soffit rev11 -> child theme.
   Scoped to .bnl-page--products-soffit and section ids, except the
   #bnl-chrome-v20 block which is the site header/footer reproduction —
   omit that block if the theme already supplies the header. */

/* ---------- page ---------- */
/* [WP HAND-OFF] delete this block once the theme enqueues tokens.css — the stand-ins below will otherwise override it silently.
   =====================================================================
  RENDERED-PREVIEW TOKEN STAND-INS — for visualization only.
  Real values live in tokens.css v1.1 (Mateo's file, source of truth).
  Palette/spacing here mirrors the compare-tool + Field Report styling.
  Delete this whole block when previewing inside the real preview folder.
===================================================================== */
:root{
 --color-primary:#00A9B5; --color-pink:#E3056B; --color-orange:#FA6A1E;
 --color-white:#FFFFFF; --color-black-true:#000000;
 --color-bg:#0A0A0A; --color-bg-elevated:#161616; --color-bg-section:#101014;
 --color-text:#F5F5F5; --color-text-muted:#B8B8B8;
 --color-border:#3A3A3A; --color-fill-subtle:#1E1E1E; --color-error:#FF4D5E;
 --gradient-brand:linear-gradient(135deg,#00A9B5 0%,#E3056B 100%);
 --font-heading:'Chakra Petch','Rajdhani',sans-serif;
 --font-body:'Inter','Helvetica Neue',sans-serif;
 --font-weight-semibold:600; --font-weight-bold:700;
 --text-small:13px; --text-body:16px;
 --text-h1:clamp(32px,5vw,48px); --text-h2:clamp(24px,3.6vw,34px); --text-h3:19px;
 --line-height-body:1.6; --line-height-heading:1.18; --letter-spacing-heading:.05em;
 --space-xs:4px; --space-sm:8px; --space-md:16px; --space-ml:24px;
 --space-lg:32px; --space-xl:64px; --space-2xl:96px;
 --radius-sm:6px; --radius-md:12px; --radius-pill:999px;
 --width-content:1100px;
 --shadow-sm:0 10px 30px rgba(0,0,0,.4);
 --shadow-glow-teal:0 0 28px rgba(0,169,181,.45);
 --shadow-glow-pink:0 0 28px rgba(227,5,107,.45);
 --focus-ring:2px solid #E3056B; --focus-ring-offset:2px;
}

  /* ---- rev2 media slots (temporary, replaced when soffit media lands) ---- */
  .bnl-page--products-soffit .bnl-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;width:100%;min-height:180px;aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#1b1e21,#1b1e21 12px,#212528 12px,#212528 24px);border:1px dashed rgba(255,255,255,.28);border-radius:12px;padding:1rem;text-align:center}
  .bnl-page--products-soffit .bnl-slot__n{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#ff4d9d;font-weight:700}
  .bnl-page--products-soffit .bnl-slot__d{font-size:.82rem;line-height:1.35;color:rgba(255,255,255,.82);max-width:46ch}
  .bnl-page--products-soffit .bnl-slot__s{font-size:.66rem;color:rgba(255,255,255,.45);font-style:italic}
 
  /* rev2 only: soffit kit/pack configurations are not published in the 2026 collateral.
    The size selector is hidden rather than shipped with pool-enclosure numbers.
    Restore by deleting this block once BRI kit-size question is answered. */
  .bnl-page--products-soffit #specs .bnl-sp__strip,
  .bnl-page--products-soffit #specs .bnl-sp__kit-cur,
  .bnl-page--products-soffit #specs .bnl-sp__kitinfo{display:none !important}

/* ---------- page ---------- */
/* Stand-ins for what the theme provides — NOT part of any page's output */
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { background: var(--color-bg, #0A0A0A); }
 body {
  overflow-x: clip;
 }
 body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
 }
 
 

 
 
 .preview-note__todo { display: block; margin-top: var(--space-xs); }

/* ---------- page ---------- */
/* =====================================================================
  TOKENS v1.2 PROPOSAL — heading font + tracking. Scoped to this page for
  preview. If approved, these become token changes and this block goes away.
===================================================================== */


.bnl-page--products-soffit {
 background: var(--color-bg);
 color: var(--color-text);
 font-family: var(--font-body);
 font-size: var(--text-body);
 line-height: var(--line-height-body);
 overflow-x: clip;
}
.bnl-page--products-soffit img {
 max-width: 100%;
}
/* ---- Breadcrumbs ---- */
.bnl-page--products-soffit .bnl-crumbs {
 padding: var(--space-md) var(--space-md) 0;
 max-width: var(--width-content);
 margin: 0 auto;
}
.bnl-page--products-soffit .bnl-crumbs ol {
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-xs);
 font-size: var(--text-small);
 color: var(--color-text-muted);
}
.bnl-page--products-soffit .bnl-crumbs li + li::before {
 content: "/";
 margin: 0 var(--space-xs);
 color: var(--color-border);
}
.bnl-page--products-soffit .bnl-crumbs a {
 color: var(--color-text-muted);
 text-decoration: none;
}
.bnl-page--products-soffit .bnl-crumbs a:hover { color: var(--color-primary); }
.bnl-page--products-soffit .bnl-crumbs [aria-current] { color: var(--color-text); }

/* anchor targets clear the sticky header when deep-linked */
.bnl-page--products-soffit section[id] { scroll-margin-top: 90px; }

/* ---- Ecosystem text links (crawlable, descriptive anchors) ---- */
.bnl-page--products-soffit .bnl-eco-links {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-sm);
 justify-content: center;
 margin-top: var(--space-lg);
}
.bnl-page--products-soffit .bnl-eco-links a {
 font-family: var(--font-heading-proposed);
 font-weight: var(--font-weight-semibold);
 font-size: var(--text-small);
 letter-spacing: .02em;
 color: var(--color-text);
 text-decoration: none;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill);
 padding: 9px 16px;
 min-height: 40px;
 display: inline-flex;
 align-items: center;
 transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.bnl-page--products-soffit .bnl-eco-links a:hover {
 border-color: var(--color-primary);
 color: var(--color-primary);
 box-shadow: var(--shadow-glow-teal);
}

/* ---- Sticky mobile quote bar (CSS only) ---- */
.bnl-page--products-soffit .bnl-sticky-cta {
 display: none;
}
@media (max-width: 767px) {
 .bnl-page--products-soffit { padding-bottom: 76px; }
 .bnl-page--products-soffit .bnl-sticky-cta {
  display: block;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: var(--space-sm) var(--space-md);
  padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
 }
 .bnl-page--products-soffit .bnl-sticky-cta .bnl-btn { display: block; }
}

.bnl-page--products-soffit .bnl-wide-img {
 width: 100%;
 height: auto;
 border-radius: var(--radius-md);
 display: block;
 margin-top: var(--space-lg);
}
.bnl-page--products-soffit .bnl-section {
 padding: var(--space-lg) var(--space-md);
}
.bnl-page--products-soffit .bnl-section--alt {
 /* Rev 24: seamless bands — fade to page bg at both edges (no hard seams),
   with off-axis teal/pink pools so the tint breathes instead of sitting flat */
 padding-top: var(--space-xl);
 padding-bottom: var(--space-xl);
 background:
  radial-gradient(90% 52% at 12% 26%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 62%),
  radial-gradient(85% 48% at 88% 74%, color-mix(in srgb, var(--color-pink) 9%, transparent), transparent 62%),
  linear-gradient(180deg,
   transparent 0%,
   color-mix(in srgb, var(--color-bg-section) 55%, transparent) 9%,
   color-mix(in srgb, var(--color-bg-section) 82%, transparent) 22%,
   color-mix(in srgb, var(--color-bg-section) 82%, transparent) 78%,
   color-mix(in srgb, var(--color-bg-section) 55%, transparent) 91%,
   transparent 100%);
}
.bnl-page--products-soffit .bnl-gradient-text {
 background: var(--gradient-brand);
 -webkit-background-clip: text;
 background-clip: text;
 color: var(--color-pink); /* fallback */
 -webkit-text-fill-color: transparent;
}
.bnl-page--products-soffit .bnl-section__inner {
 max-width: var(--width-content);
 margin: 0 auto;
}
.bnl-page--products-soffit .bnl-heading {
 font-family: var(--font-heading-proposed);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-heading);
 letter-spacing: -0.015em;
 margin: 0 0 var(--space-ml);
}
.bnl-page--products-soffit .bnl-heading--section {
 font-size: var(--text-h2);
}
.bnl-page--products-soffit .bnl-lede {
 color: var(--color-text-muted);
 margin: 0 0 var(--space-lg);
}

/* ---- Buttons ---- */
.bnl-page--products-soffit .bnl-btn {
 display: inline-block;
 min-height: 44px;
 padding: var(--space-md) var(--space-lg);
 border-radius: var(--radius-pill);
 font-family: var(--font-heading-proposed);
 font-weight: var(--font-weight-semibold);
 letter-spacing: var(--letter-spacing-heading);
 text-decoration: none;
 text-align: center;
 transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.bnl-page--products-soffit .bnl-btn--primary {
 background: transparent;
 color: var(--color-white);
 border: 1.5px solid var(--color-pink);
 box-shadow: var(--glow-ambient-pink);
}
.bnl-page--products-soffit .bnl-btn--primary:hover {
 box-shadow: var(--shadow-glow-pink);
 background: color-mix(in srgb, var(--color-pink) 12%, transparent);
}
.bnl-page--products-soffit .bnl-btn--secondary {
 background: transparent;
 color: var(--color-primary);
 border: 1px solid var(--color-primary);
}
.bnl-page--products-soffit .bnl-btn--secondary:hover {
 box-shadow: var(--shadow-glow-teal);
}
.bnl-page--products-soffit .bnl-btn--ghost {
 background: transparent;
 color: var(--color-white);
 border: 1.5px solid var(--color-pink);
 box-shadow: var(--glow-ambient-pink);
}
.bnl-page--products-soffit .bnl-btn--ghost:hover {
 box-shadow: var(--shadow-glow-pink);
}
/* PROPOSAL (tokens v1.2): larger section headings, less gradient */
.bnl-page--products-soffit .bnl-heading--section {
 font-size: clamp(30px, 4.6vw, 46px);
}
/* shared glow frame */
.bnl-page--products-soffit .bnl-glow-frame {
 border: 1px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
 border-radius: var(--radius-md);
 box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
}
/* photo hairline guards (color-wash + temperature stages tint per selection below) */
.bnl-page--products-soffit .bnl-temp__stage,
.bnl-page--products-soffit .bnl-cw__stage {
 border: 1.5px solid var(--color-border);
 transition: border-color .45s ease, box-shadow .45s ease;
}
/* By Day / By Night — framed with the brand glow */
.bnl-page--products-soffit .bnl-ba img {
 border: 1.5px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
 box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
}
/* Rev 25: day/night compare slider */
.bnl-page--products-soffit .bnl-ba-slider {
 position: relative;
 aspect-ratio: 4 / 3;
 border-radius: var(--radius-md);
 overflow: hidden;
 border: 1.5px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
 box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
 touch-action: pan-y;
}
.bnl-page--products-soffit .bnl-ba-slider img {
 position: absolute; inset: 0;
 width: 100%; height: 100%;
 object-fit: cover;
 display: block;
 border: 0;
 box-shadow: none;
}
.bnl-page--products-soffit .bnl-ba-slider__top {
 position: absolute; inset: 0;
 clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.bnl-page--products-soffit .bnl-ba-slider__divider {
 position: absolute; top: 0; bottom: 0;
 left: var(--pos, 50%);
 width: 3px;
 transform: translateX(-50%);
 background: var(--color-white);
 box-shadow: 0 0 14px rgba(0,0,0,.85);
 pointer-events: none;
 z-index: 2;
}
.bnl-page--products-soffit .bnl-ba-slider__knob {
 position: absolute; top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 width: 46px; height: 46px;
 display: grid; place-items: center;
 border-radius: var(--radius-pill);
 background: color-mix(in srgb, var(--color-bg) 55%, transparent);
 border: 1.5px solid var(--color-white);
 backdrop-filter: blur(6px);
 color: var(--color-white);
 font-size: 14px;
 white-space: nowrap;
}
.bnl-page--products-soffit .bnl-ba-slider__range {
 position: absolute; inset: 0;
 width: 100%; height: 100%;
 margin: 0;
 opacity: 0;
 cursor: ew-resize;
 -webkit-appearance: none;
 appearance: none;
 background: transparent;
 z-index: 3;
}
.bnl-page--products-soffit .bnl-ba-slider__range::-webkit-slider-thumb {
 -webkit-appearance: none; appearance: none;
 width: 64px; height: 480px;
 background: transparent;
}
.bnl-page--products-soffit .bnl-ba-slider__range::-moz-range-thumb {
 width: 64px; height: 480px; border: 0; background: transparent;
}
.bnl-page--products-soffit .bnl-ba-slider__tag {
 position: absolute; top: var(--space-md);
 padding: 6px 14px;
 border-radius: var(--radius-pill);
 background: color-mix(in srgb, var(--color-bg) 62%, transparent);
 border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
 backdrop-filter: blur(8px);
 font-family: var(--font-heading-proposed);
 font-size: var(--text-small);
 font-weight: var(--font-weight-semibold);
 letter-spacing: .08em;
 text-transform: uppercase;
 z-index: 2;
 pointer-events: none;
}
.bnl-page--products-soffit .bnl-ba-slider__tag--day { left: var(--space-md); }
.bnl-page--products-soffit .bnl-ba-slider__tag--night { right: var(--space-md); }
.bnl-page--products-soffit .bnl-ba-slider__hint {
 text-align: center;
 color: var(--color-text-muted);
 font-size: var(--text-small);
 margin-top: var(--space-md);
}
/* relocated feature grid + stats, inside the premium card */
.bnl-page--products-soffit .bnl-frame-card .bnl-stats {
 margin-top: var(--space-lg);
 padding-top: var(--space-lg);
 border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
/* Rev 26: icon bullet list (relocated color-wash features) */
.bnl-page--products-soffit .bnl-featlist {
 list-style: none;
 margin: var(--space-lg) 0 0;
 padding: var(--space-lg) 0 0;
 border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-md);
 text-align: left;
}
@media (min-width: 760px) {
 .bnl-page--products-soffit .bnl-featlist { grid-template-columns: 1fr 1fr; }
}
.bnl-page--products-soffit .bnl-featlist li {
 display: flex;
 align-items: flex-start;
 gap: var(--space-md);
}
.bnl-page--products-soffit .bnl-featlist__ic {
 flex-shrink: 0;
 width: 44px; height: 44px;
 display: grid; place-items: center;
 border-radius: var(--radius-pill);
 color: var(--color-primary);
 background: color-mix(in srgb, var(--color-primary) 12%, transparent);
 border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
 box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.bnl-page--products-soffit .bnl-featlist b {
 display: block;
 font-family: var(--font-heading-proposed);
 letter-spacing: -0.01em;
 margin-bottom: 2px;
}
.bnl-page--products-soffit .bnl-featlist p {
 margin: 0;
 color: var(--color-text-muted);
 font-size: var(--text-small);
}
/* boxed statement card (Premium Lighting Without Compromise) */
.bnl-page--products-soffit .bnl-frame-card {
 border: 1px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
 border-radius: var(--radius-md);
 background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
 box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
 padding: var(--space-lg);
}
.bnl-page--products-soffit .bnl-frame-card > :last-child { margin-bottom: 0; }
/* framed More-Than split */
.bnl-page--products-soffit #why .bnl-split {
 border: 1px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
 border-radius: var(--radius-md);
 background: var(--color-bg-elevated);
 box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
 padding: var(--space-lg);
}
/* spec table redesign */
.bnl-page--products-soffit #specs .bnl-table-scroll {
 border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
 border-radius: var(--radius-md);
 background: var(--color-bg-elevated);
 box-shadow: var(--glow-ambient-teal);
}
.bnl-page--products-soffit #specs .bnl-table__head {
 font-size: var(--text-h3);
}
.bnl-page--products-soffit #specs .bnl-table__cell--label {
 color: var(--color-primary);
 font-family: var(--font-heading-proposed);
 font-size: var(--text-h3);
 letter-spacing: -0.01em;
}
.bnl-page--products-soffit #specs tbody tr:nth-child(odd) {
 background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.bnl-page--products-soffit #specs tbody tr:nth-child(even) {
 background: color-mix(in srgb, var(--color-pink) 5%, transparent);
}
/* comparison table: keep brand column visually centered on phones */
@media (max-width: 640px) {
 .bnl-page--products-soffit .bnl-compare .bnl-table__cell--label,
 .bnl-page--products-soffit .bnl-compare .bnl-table__head:first-child {
  width: 36%;
  white-space: normal;
 }
}
/* stats extras */
.bnl-page--products-soffit .bnl-stats__note {
 display: block;
 margin-top: 6px;
 font-size: var(--text-small);
 color: var(--color-text-muted);
 text-decoration: underline;
}
.bnl-page--products-soffit .bnl-stats__note:hover { color: var(--color-primary); }
/* animated tap hint on the ecosystem map */
.bnl-page--products-soffit .bnl-eco__hint {
 position: absolute;
 top: var(--space-md);
 left: 4%;
 z-index: 4;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 18px;
 border-radius: var(--radius-pill);
 background: color-mix(in srgb, var(--color-bg) 70%, transparent);
 border: 1px solid var(--color-primary);
 backdrop-filter: blur(8px);
 font-family: var(--font-heading-proposed);
 font-size: var(--text-small);
 font-weight: var(--font-weight-semibold);
 pointer-events: none;
 box-shadow: var(--shadow-glow-teal);
 animation: bnl-hint-slide 6s ease-in-out infinite alternate;
}
.bnl-page--products-soffit .bnl-eco__hint span { font-size: 20px; animation: bnl-hint-bob 1.2s ease-in-out infinite alternate; }
@keyframes bnl-hint-slide { from { left: 4%; } to { left: calc(96% - 170px); } }
@keyframes bnl-hint-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
 .bnl-page--products-soffit .bnl-eco__hint { animation: none; left: 50%; transform: translateX(-50%); }
 .bnl-page--products-soffit .bnl-eco__hint span { animation: none; }
}
.bnl-page--products-soffit .bnl-btn:focus-visible,
.bnl-page--products-soffit .bnl-link:focus-visible,
.bnl-page--products-soffit .bnl-faq__q:focus-visible {
 outline: var(--focus-ring);
 outline-offset: var(--focus-ring-offset);
}
.bnl-page--products-soffit .bnl-link {
 color: var(--color-primary);
}
.bnl-page--products-soffit .bnl-btn-row {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-md);
}

/* ---- Hero (video band on top; content below; title slightly overlaps the video's bottom edge) ---- */
.bnl-page--products-soffit .bnl-hero {
 padding: 0;
}
.bnl-page--products-soffit .bnl-hero__media-frame {
 position: relative;
 height: min(64vh, 600px);
 overflow: hidden;
}
.bnl-page--products-soffit .bnl-hero__bg--video { object-position: center 42%; }
.bnl-hero__bg {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 30%;
}
@media (prefers-reduced-motion: reduce) {
 .bnl-page--products-soffit .bnl-hero__bg--video { display: none; }
}
.bnl-page--products-soffit .bnl-hero__media-frame::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(0deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 55%, transparent) 18%, transparent 42%);
 pointer-events: none;
}
.bnl-page--products-soffit .bnl-hero__content {
 position: relative;
 z-index: 2;
 max-width: var(--width-content);
 margin: -44px auto 0;
 padding: 0 var(--space-md) var(--space-lg);
}
@media (min-width: 768px) {
 .bnl-page--products-soffit .bnl-hero__content {
  margin-top: -76px;
  padding: 0 var(--space-lg) var(--space-xl);
 }
}
.bnl-page--products-soffit .bnl-hero__inner { max-width: 720px; }
.bnl-page--products-soffit .bnl-hero .bnl-btn-row { justify-content: center; }
.bnl-page--products-soffit .bnl-hero__eyebrow {
 font-family: var(--font-heading-proposed);
 font-size: var(--text-small);
 font-weight: var(--font-weight-semibold);
 letter-spacing: var(--letter-spacing-heading);
 text-transform: uppercase;
 color: var(--color-primary);
 margin: 0 0 var(--space-sm);
 text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.bnl-page--products-soffit .bnl-hero__title {
 font-family: var(--font-heading-proposed);
 font-size: var(--text-h1);
 font-weight: 800;
 line-height: var(--line-height-heading);
 letter-spacing: -0.02em;
 margin: 0 0 var(--space-md);
 text-shadow: 0 2px 16px rgba(0,0,0,.75);
}

/* ---- Checkmark lists ---- */
.bnl-page--products-soffit .bnl-checks {
 list-style: none;
 margin: var(--space-md) 0 var(--space-lg);
 padding: 0;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
 gap: var(--space-sm) var(--space-lg);
}
.bnl-page--products-soffit .bnl-checks li {
 position: relative;
 padding-left: 30px;
 font-family: var(--font-heading-proposed);
 font-weight: var(--font-weight-semibold);
 letter-spacing: -0.01em;
}
.bnl-page--products-soffit .bnl-checks li::before {
 content: "\2713";
 position: absolute;
 left: 0;
 color: var(--color-primary);
 font-weight: var(--font-weight-bold);
}

/* ---- Split (text + image) ---- */
.bnl-page--products-soffit .bnl-split {
 display: grid;
 gap: var(--space-lg);
 align-items: center;
}
@media (min-width: 900px) {
 .bnl-page--products-soffit .bnl-split { grid-template-columns: 1fr 1fr; }
}
.bnl-page--products-soffit .bnl-split__img {
 width: 100%;
 height: auto;
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
}

/* ---- Occasion chips ---- */
.bnl-page--products-soffit .bnl-chips {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-sm);
 margin: var(--space-md) 0 var(--space-lg);
}
.bnl-page--products-soffit .bnl-chips span {
 font-family: var(--font-heading-proposed);
 font-weight: var(--font-weight-semibold);
 font-size: var(--text-small);
 color: var(--color-text);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill);
 padding: 9px 16px;
 box-shadow: var(--glow-ambient-teal);
}

/* ---- Punch lines ---- */
.bnl-page--products-soffit .bnl-punch p {
 font-family: var(--font-heading-proposed);
 font-weight: var(--font-weight-semibold);
 margin: 0 0 var(--space-xs);
}
.bnl-page--products-soffit .bnl-punch p:last-child {
 color: var(--color-text-muted);
 font-family: var(--font-body);
 font-weight: 400;
 margin-top: var(--space-sm);
}

/* ---- Statistics band ---- */
.bnl-page--products-soffit .bnl-stats {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: var(--space-lg) var(--space-md);
 text-align: center;
}
.bnl-page--products-soffit .bnl-stats__num {
 display: block;
 font-family: var(--font-heading-proposed);
 font-weight: 800;
 font-size: clamp(34px, 5vw, 58px);
 letter-spacing: -0.02em;
 line-height: 1.05;
}
.bnl-page--products-soffit .bnl-stats__label {
 display: block;
 margin-top: var(--space-xs);
 color: var(--color-text-muted);
 font-family: var(--font-heading-proposed);
 font-size: var(--text-small);
 font-weight: var(--font-weight-semibold);
 letter-spacing: var(--letter-spacing-heading);
 text-transform: uppercase;
}

/* ---- Interactive stat counters (pure CSS: @property + counter; on hover/tap the
  number replays from 0. Browsers without @property simply show the final number.) ---- */
@property --bnl-statn { syntax: '<integer>'; inherits: false; initial-value: 0; }
.bnl-page--products-soffit .bnl-sr {
 position: absolute;
 width: 1px; height: 1px;
 clip-path: inset(50%);
 overflow: hidden;
}
.bnl-page--products-soffit .bnl-stats__item { cursor: default; outline: none; }
.bnl-page--products-soffit .bnl-stats__num {
 counter-reset: bnlstat var(--bnl-statn);
}
.bnl-page--products-soffit .bnl-stats__digits::before {
 content: counter(bnlstat);
}
.bnl-page--products-soffit .bnl-stats__item:hover .bnl-stats__num,
.bnl-page--products-soffit .bnl-stats__item:focus-visible .bnl-stats__num {
 animation: bnl-count-up 0.9s ease-out;
}
@keyframes bnl-count-up { from { --bnl-statn: 0; } }
@media (prefers-reduced-motion: reduce) {
 .bnl-page--products-soffit .bnl-stats__item:hover .bnl-stats__num,
 .bnl-page--products-soffit .bnl-stats__item:focus-visible .bnl-stats__num { animation: none; }
}

/* ---- Compare tool feature band ---- */
.bnl-page--products-soffit .bnl-compare-cta {
 margin-top: var(--space-xl);
 border: 1px solid color-mix(in srgb, var(--color-pink) 45%, var(--color-border));
 border-radius: var(--radius-md);
 padding: var(--space-xl) var(--space-lg);
 text-align: center;
 background: var(--color-bg-elevated);
 box-shadow: var(--glow-ambient-pink);
}
.bnl-page--products-soffit button.bnl-compare-cta__chip {
 font: inherit;
 cursor: pointer;
}
.bnl-page--products-soffit button.bnl-compare-cta__chip:hover {
 box-shadow: var(--shadow-glow-teal);
}
.bnl-page--products-soffit .bnl-compare-cta__vs {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 gap: var(--space-md);
 margin: var(--space-lg) 0;
 font-family: var(--font-heading-proposed);
 font-weight: var(--font-weight-bold);
}
.bnl-page--products-soffit .bnl-compare-cta__chip {
 border: 1px solid var(--color-border);
 border-radius: var(--radius-pill);
 padding: 12px 22px;
 font-size: var(--text-h3);
}
.bnl-page--products-soffit .bnl-compare-cta__chip--us {
 color: var(--color-primary);
 border-color: var(--color-primary);
 box-shadow: var(--shadow-glow-teal);
}
.bnl-page--products-soffit .bnl-compare-cta__chip--them {
 color: var(--color-text-muted);
 border-style: dashed;
}
.bnl-page--products-soffit .bnl-compare-cta__x {
 font-size: clamp(26px, 4vw, 40px);
 font-weight: 800;
}
.bnl-page--products-soffit .bnl-compare-cta__fine {
 margin-top: var(--space-md);
 font-size: var(--text-small);
 color: var(--color-text-muted);
}

/* ---- Apple-style closer ---- */
.bnl-page--products-soffit .bnl-closer {
 position: relative;
 min-height: min(64vh, 560px);
 display: flex;
 align-items: flex-end;
 justify-content: center;
 padding-bottom: var(--space-2xl);
 text-align: center;
 overflow: hidden;
 padding: var(--space-2xl) var(--space-md);
}
.bnl-page--products-soffit .bnl-closer__bg {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 z-index: 0;
}
.bnl-page--products-soffit .bnl-closer::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: 1;
 background:
  linear-gradient(0deg, var(--color-bg) 0%, transparent 35%),
  linear-gradient(180deg, var(--color-bg) 0%, transparent 35%),
  color-mix(in srgb, var(--color-bg) 45%, transparent);
}
.bnl-page--products-soffit .bnl-closer__content {
 position: relative;
 z-index: 2;
}
.bnl-page--products-soffit .bnl-closer__title {
 font-family: var(--font-heading-proposed);
 font-weight: 800;
 font-size: clamp(34px, 6vw, 64px);
 letter-spacing: -0.02em;
 line-height: 1.1;
 margin: 0 0 var(--space-lg);
}

/* ---- Premium motion: CSS-only scroll reveal (progressive enhancement) ---- */
@supports (animation-timeline: view()) {
 @media (prefers-reduced-motion: no-preference) {
  .bnl-page--products-soffit .bnl-card,
  .bnl-page--products-soffit .bnl-gallery__figure,
  .bnl-page--products-soffit .bnl-split__img,
  .bnl-page--products-soffit .bnl-stats > div,
  .bnl-page--products-soffit .bnl-ba figure {
   animation: bnl-rise-in both;
   animation-timeline: view();
   animation-range: entry 0% entry 55%;
  }
 }
}
@keyframes bnl-rise-in {
 from { opacity: 0.15; transform: translateY(18px); }
 to  { opacity: 1;  transform: none; }
}

/* ---- Interactive Color Wash slider (pure CSS radio carousel) ---- */
.bnl-page--products-soffit .bnl-cw__radio {
 position: absolute;
 width: 1px; height: 1px;
 clip-path: inset(50%);
 overflow: hidden;
}
.bnl-page--products-soffit .bnl-cw__stage {
 position: relative;
 aspect-ratio: 459 / 246;
 border-radius: var(--radius-md);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 margin-top: var(--space-lg);
}
.bnl-page--products-soffit .bnl-cw__img {
 position: absolute;
 inset: 0;
 width: 100%; height: 100%;
 object-fit: cover;
 opacity: 0;
 transition: opacity .45s ease;
}
.bnl-page--products-soffit .bnl-cw__nav {
 display: none;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 46px; height: 46px;
 place-items: center;
 border-radius: var(--radius-pill);
 background: color-mix(in srgb, var(--color-bg) 55%, transparent);
 border: 1px solid var(--color-border);
 color: var(--color-text);
 font-size: 26px;
 cursor: pointer;
 z-index: 3;
 transition: box-shadow .2s ease, border-color .2s ease;
}
.bnl-page--products-soffit .bnl-cw__nav:hover { border-color: var(--color-primary); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-soffit .bnl-cw__nav--prev { left: var(--space-md); }
.bnl-page--products-soffit .bnl-cw__nav--next { right: var(--space-md); }
.bnl-page--products-soffit .bnl-cw__swatches {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: var(--space-md) var(--space-ml);
 margin-top: var(--space-lg);
}
.bnl-page--products-soffit .bnl-cw__sw {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 cursor: pointer;
 font-family: var(--font-heading-proposed);
 font-size: var(--text-small);
 font-weight: var(--font-weight-semibold);
 color: var(--color-text-muted);
 min-width: 44px;
}
.bnl-page--products-soffit .bnl-cw__dot {
 width: 34px; height: 34px;
 border-radius: var(--radius-pill);
 background: var(--sw);
 transition: box-shadow .2s ease, transform .2s ease;
}
.bnl-page--products-soffit .bnl-cw__sw:hover .bnl-cw__dot { transform: scale(1.12); }

/* ---- Season cards (hover to zoom ~35%) ---- */
.bnl-page--products-soffit .bnl-season {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-md);
}
@media (min-width: 900px) {
 .bnl-page--products-soffit .bnl-season { grid-template-columns: repeat(4, 1fr); }
}
.bnl-page--products-soffit .bnl-season__card {
 margin: 0;
 position: relative;
 transition: transform .3s ease;
 outline: none;
}
.bnl-page--products-soffit .bnl-season__card img {
 width: 100%; height: auto;
 border-radius: var(--radius-md);
 display: block;
 box-shadow: var(--shadow-sm);
}
.bnl-page--products-soffit .bnl-season__card figcaption {
 position: absolute; width: 1px; height: 1px; overflow: hidden;
 clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.bnl-page--products-soffit .bnl-season__card figcaption b {
 display: block;
 font-family: var(--font-heading-proposed);
 letter-spacing: -0.01em;
}
.bnl-page--products-soffit .bnl-season__card figcaption span {
 color: var(--color-text-muted);
 font-size: var(--text-small);
}
@media (prefers-reduced-motion: no-preference) {
 .bnl-page--products-soffit .bnl-season__card:hover,
 .bnl-page--products-soffit .bnl-season__card:focus-visible {
  transform: scale(1.35);
  z-index: 6;
 }
 .bnl-page--products-soffit .bnl-season__card:hover img,
 .bnl-page--products-soffit .bnl-season__card:focus-visible img {
  box-shadow: var(--shadow-glow-teal), 0 18px 50px rgba(0,0,0,.6);
 }
}

/* ---- Temperature preset cards (real photos, pure CSS) ---- */
.bnl-page--products-soffit .bnl-temp__body {
 max-width: 860px;
 margin: var(--space-lg) auto 0;
}
.bnl-page--products-soffit .bnl-temp__stage {
 position: relative;
 aspect-ratio: 460 / 406;
 border-radius: var(--radius-md);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
}
.bnl-page--products-soffit .bnl-temp__img {
 position: absolute;
 inset: 0;
 width: 100%; height: 100%;
 object-fit: cover;
 opacity: 0;
 transition: opacity .4s ease;
}
.bnl-page--products-soffit .bnl-temp__info {
 display: none;
 position: absolute;
 inset: 0;
 pointer-events: none;
}
.bnl-page--products-soffit .bnl-temp__badge {
 position: absolute;
 top: var(--space-md);
 left: var(--space-md);
 padding: 8px 16px;
 border-radius: var(--radius-pill);
 background: color-mix(in srgb, var(--color-bg) 62%, transparent);
 border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
 backdrop-filter: blur(8px);
 font-family: var(--font-heading-proposed);
 font-size: var(--text-small);
 font-weight: var(--font-weight-semibold);
 color: var(--color-text);
}
.bnl-page--products-soffit .bnl-temp__cap {
 position: absolute;
 left: 0; right: 0; bottom: 0;
 padding: var(--space-xl) var(--space-md) var(--space-md);
 background: linear-gradient(0deg, color-mix(in srgb, var(--color-bg) 88%, transparent) 0%, transparent 100%);
}
.bnl-page--products-soffit .bnl-temp__cap b {
 display: block;
 font-family: var(--font-heading-proposed);
 font-size: var(--text-h3);
 letter-spacing: -0.01em;
 margin-bottom: 4px;
}
.bnl-page--products-soffit .bnl-temp__cap span {
 color: var(--color-text-muted);
 font-size: var(--text-small);
}
.bnl-page--products-soffit .bnl-temp__picker {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: var(--space-sm);
 margin-top: var(--space-md);
}
.bnl-page--products-soffit .bnl-temp__opt {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 min-width: 82px;
 padding: 14px 16px;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-md);
 cursor: pointer;
 font-family: var(--font-heading-proposed);
 font-size: var(--text-small);
 font-weight: var(--font-weight-semibold);
 color: var(--color-text-muted);
 transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.bnl-page--products-soffit .bnl-temp__opt:hover { border-color: var(--color-primary); color: var(--color-text); }
.bnl-page--products-soffit .bnl-temp__dot {
 width: 18px; height: 18px;
 border-radius: var(--radius-pill);
 background: var(--dot);
 box-shadow: 0 0 10px color-mix(in srgb, var(--dot) 70%, transparent);
}

/* Rev 24: the temperature stage frame glows in the selected kelvin tone */
.bnl-page--products-soffit #t-2000:checked ~ .bnl-temp__body .bnl-temp__stage { border-color: color-mix(in srgb, #E8951D 80%, var(--color-border)); box-shadow: 0 0 24px color-mix(in srgb, #E8951D 34%, transparent), 0 0 70px color-mix(in srgb, #E8951D 15%, transparent); }
.bnl-page--products-soffit #t-3000:checked ~ .bnl-temp__body .bnl-temp__stage { border-color: color-mix(in srgb, #F2C57F 80%, var(--color-border)); box-shadow: 0 0 24px color-mix(in srgb, #F2C57F 34%, transparent), 0 0 70px color-mix(in srgb, #F2C57F 15%, transparent); }
.bnl-page--products-soffit #t-4000:checked ~ .bnl-temp__body .bnl-temp__stage { border-color: color-mix(in srgb, #F6E7C8 80%, var(--color-border)); box-shadow: 0 0 24px color-mix(in srgb, #F6E7C8 34%, transparent), 0 0 70px color-mix(in srgb, #F6E7C8 15%, transparent); }
.bnl-page--products-soffit #t-5000:checked ~ .bnl-temp__body .bnl-temp__stage { border-color: color-mix(in srgb, #DCE8F5 80%, var(--color-border)); box-shadow: 0 0 24px color-mix(in srgb, #DCE8F5 34%, transparent), 0 0 70px color-mix(in srgb, #DCE8F5 15%, transparent); }
.bnl-page--products-soffit #t-7000:checked ~ .bnl-temp__body .bnl-temp__stage { border-color: color-mix(in srgb, #9CC4EE 80%, var(--color-border)); box-shadow: 0 0 24px color-mix(in srgb, #9CC4EE 34%, transparent), 0 0 70px color-mix(in srgb, #9CC4EE 15%, transparent); }
.bnl-page--products-soffit #t-2000:checked ~ .bnl-temp__body .bnl-temp__img--2000 { opacity: 1; }
.bnl-page--products-soffit #t-2000:checked ~ .bnl-temp__body .bnl-temp__info--2000 { display: block; }
.bnl-page--products-soffit #t-2000:checked ~ .bnl-temp__body .bnl-temp__picker label[for="t-2000"] { border-color: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-soffit #t-2000:focus-visible ~ .bnl-temp__body .bnl-temp__picker label[for="t-2000"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #t-3000:checked ~ .bnl-temp__body .bnl-temp__img--3000 { opacity: 1; }
.bnl-page--products-soffit #t-3000:checked ~ .bnl-temp__body .bnl-temp__info--3000 { display: block; }
.bnl-page--products-soffit #t-3000:checked ~ .bnl-temp__body .bnl-temp__picker label[for="t-3000"] { border-color: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-soffit #t-3000:focus-visible ~ .bnl-temp__body .bnl-temp__picker label[for="t-3000"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #t-4000:checked ~ .bnl-temp__body .bnl-temp__img--4000 { opacity: 1; }
.bnl-page--products-soffit #t-4000:checked ~ .bnl-temp__body .bnl-temp__info--4000 { display: block; }
.bnl-page--products-soffit #t-4000:checked ~ .bnl-temp__body .bnl-temp__picker label[for="t-4000"] { border-color: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-soffit #t-4000:focus-visible ~ .bnl-temp__body .bnl-temp__picker label[for="t-4000"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #t-5000:checked ~ .bnl-temp__body .bnl-temp__img--5000 { opacity: 1; }
.bnl-page--products-soffit #t-5000:checked ~ .bnl-temp__body .bnl-temp__info--5000 { display: block; }
.bnl-page--products-soffit #t-5000:checked ~ .bnl-temp__body .bnl-temp__picker label[for="t-5000"] { border-color: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-soffit #t-5000:focus-visible ~ .bnl-temp__body .bnl-temp__picker label[for="t-5000"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #t-7000:checked ~ .bnl-temp__body .bnl-temp__img--7000 { opacity: 1; }
.bnl-page--products-soffit #t-7000:checked ~ .bnl-temp__body .bnl-temp__info--7000 { display: block; }
.bnl-page--products-soffit #t-7000:checked ~ .bnl-temp__body .bnl-temp__picker label[for="t-7000"] { border-color: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-soffit #t-7000:focus-visible ~ .bnl-temp__body .bnl-temp__picker label[for="t-7000"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }


/* Rev 24: the stage frame glows in the selected wash color */
.bnl-page--products-soffit #cwc-red:checked ~ .bnl-cw__stage { border-color: #E23B3B; box-shadow: 0 0 0 1px color-mix(in srgb, #E23B3B 30%, transparent), 0 0 26px color-mix(in srgb, #E23B3B 45%, transparent), 0 0 78px color-mix(in srgb, #E23B3B 20%, transparent); }
.bnl-page--products-soffit #cwc-orange:checked ~ .bnl-cw__stage { border-color: #F5761A; box-shadow: 0 0 0 1px color-mix(in srgb, #F5761A 30%, transparent), 0 0 26px color-mix(in srgb, #F5761A 45%, transparent), 0 0 78px color-mix(in srgb, #F5761A 20%, transparent); }
.bnl-page--products-soffit #cwc-yellow:checked ~ .bnl-cw__stage { border-color: #F0C41B; box-shadow: 0 0 0 1px color-mix(in srgb, #F0C41B 30%, transparent), 0 0 26px color-mix(in srgb, #F0C41B 45%, transparent), 0 0 78px color-mix(in srgb, #F0C41B 20%, transparent); }
.bnl-page--products-soffit #cwc-green:checked ~ .bnl-cw__stage { border-color: #3FBF3F; box-shadow: 0 0 0 1px color-mix(in srgb, #3FBF3F 30%, transparent), 0 0 26px color-mix(in srgb, #3FBF3F 45%, transparent), 0 0 78px color-mix(in srgb, #3FBF3F 20%, transparent); }
.bnl-page--products-soffit #cwc-teal:checked ~ .bnl-cw__stage { border-color: #14B8A6; box-shadow: 0 0 0 1px color-mix(in srgb, #14B8A6 30%, transparent), 0 0 26px color-mix(in srgb, #14B8A6 45%, transparent), 0 0 78px color-mix(in srgb, #14B8A6 20%, transparent); }
.bnl-page--products-soffit #cwc-cyan:checked ~ .bnl-cw__stage { border-color: #22C7EE; box-shadow: 0 0 0 1px color-mix(in srgb, #22C7EE 30%, transparent), 0 0 26px color-mix(in srgb, #22C7EE 45%, transparent), 0 0 78px color-mix(in srgb, #22C7EE 20%, transparent); }
.bnl-page--products-soffit #cwc-blue:checked ~ .bnl-cw__stage { border-color: #2E5BFF; box-shadow: 0 0 0 1px color-mix(in srgb, #2E5BFF 30%, transparent), 0 0 26px color-mix(in srgb, #2E5BFF 45%, transparent), 0 0 78px color-mix(in srgb, #2E5BFF 20%, transparent); }
.bnl-page--products-soffit #cwc-indigo:checked ~ .bnl-cw__stage { border-color: #5B3FD4; box-shadow: 0 0 0 1px color-mix(in srgb, #5B3FD4 30%, transparent), 0 0 26px color-mix(in srgb, #5B3FD4 45%, transparent), 0 0 78px color-mix(in srgb, #5B3FD4 20%, transparent); }
.bnl-page--products-soffit #cwc-purple:checked ~ .bnl-cw__stage { border-color: #9A3FD4; box-shadow: 0 0 0 1px color-mix(in srgb, #9A3FD4 30%, transparent), 0 0 26px color-mix(in srgb, #9A3FD4 45%, transparent), 0 0 78px color-mix(in srgb, #9A3FD4 20%, transparent); }
.bnl-page--products-soffit #cwc-pink:checked ~ .bnl-cw__stage { border-color: #E23B8E; box-shadow: 0 0 0 1px color-mix(in srgb, #E23B8E 30%, transparent), 0 0 26px color-mix(in srgb, #E23B8E 45%, transparent), 0 0 78px color-mix(in srgb, #E23B8E 20%, transparent); }
.bnl-page--products-soffit #cwc-red:checked ~ .bnl-cw__stage .bnl-cw__img--red { opacity: 1; }
.bnl-page--products-soffit #cwc-red:checked ~ .bnl-cw__stage .bnl-cw__nav--for-red { display: grid; }
.bnl-page--products-soffit #cwc-red:checked ~ .bnl-cw__swatches label[for="cwc-red"] { color: var(--color-text); }
.bnl-page--products-soffit #cwc-red:checked ~ .bnl-cw__swatches label[for="cwc-red"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-soffit #cwc-red:focus-visible ~ .bnl-cw__swatches label[for="cwc-red"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #cwc-orange:checked ~ .bnl-cw__stage .bnl-cw__img--orange { opacity: 1; }
.bnl-page--products-soffit #cwc-orange:checked ~ .bnl-cw__stage .bnl-cw__nav--for-orange { display: grid; }
.bnl-page--products-soffit #cwc-orange:checked ~ .bnl-cw__swatches label[for="cwc-orange"] { color: var(--color-text); }
.bnl-page--products-soffit #cwc-orange:checked ~ .bnl-cw__swatches label[for="cwc-orange"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-soffit #cwc-orange:focus-visible ~ .bnl-cw__swatches label[for="cwc-orange"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #cwc-yellow:checked ~ .bnl-cw__stage .bnl-cw__img--yellow { opacity: 1; }
.bnl-page--products-soffit #cwc-yellow:checked ~ .bnl-cw__stage .bnl-cw__nav--for-yellow { display: grid; }
.bnl-page--products-soffit #cwc-yellow:checked ~ .bnl-cw__swatches label[for="cwc-yellow"] { color: var(--color-text); }
.bnl-page--products-soffit #cwc-yellow:checked ~ .bnl-cw__swatches label[for="cwc-yellow"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-soffit #cwc-yellow:focus-visible ~ .bnl-cw__swatches label[for="cwc-yellow"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #cwc-green:checked ~ .bnl-cw__stage .bnl-cw__img--green { opacity: 1; }
.bnl-page--products-soffit #cwc-green:checked ~ .bnl-cw__stage .bnl-cw__nav--for-green { display: grid; }
.bnl-page--products-soffit #cwc-green:checked ~ .bnl-cw__swatches label[for="cwc-green"] { color: var(--color-text); }
.bnl-page--products-soffit #cwc-green:checked ~ .bnl-cw__swatches label[for="cwc-green"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-soffit #cwc-green:focus-visible ~ .bnl-cw__swatches label[for="cwc-green"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #cwc-teal:checked ~ .bnl-cw__stage .bnl-cw__img--teal { opacity: 1; }
.bnl-page--products-soffit #cwc-teal:checked ~ .bnl-cw__stage .bnl-cw__nav--for-teal { display: grid; }
.bnl-page--products-soffit #cwc-teal:checked ~ .bnl-cw__swatches label[for="cwc-teal"] { color: var(--color-text); }
.bnl-page--products-soffit #cwc-teal:checked ~ .bnl-cw__swatches label[for="cwc-teal"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-soffit #cwc-teal:focus-visible ~ .bnl-cw__swatches label[for="cwc-teal"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #cwc-cyan:checked ~ .bnl-cw__stage .bnl-cw__img--cyan { opacity: 1; }
.bnl-page--products-soffit #cwc-cyan:checked ~ .bnl-cw__stage .bnl-cw__nav--for-cyan { display: grid; }
.bnl-page--products-soffit #cwc-cyan:checked ~ .bnl-cw__swatches label[for="cwc-cyan"] { color: var(--color-text); }
.bnl-page--products-soffit #cwc-cyan:checked ~ .bnl-cw__swatches label[for="cwc-cyan"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-soffit #cwc-cyan:focus-visible ~ .bnl-cw__swatches label[for="cwc-cyan"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #cwc-blue:checked ~ .bnl-cw__stage .bnl-cw__img--blue { opacity: 1; }
.bnl-page--products-soffit #cwc-blue:checked ~ .bnl-cw__stage .bnl-cw__nav--for-blue { display: grid; }
.bnl-page--products-soffit #cwc-blue:checked ~ .bnl-cw__swatches label[for="cwc-blue"] { color: var(--color-text); }
.bnl-page--products-soffit #cwc-blue:checked ~ .bnl-cw__swatches label[for="cwc-blue"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-soffit #cwc-blue:focus-visible ~ .bnl-cw__swatches label[for="cwc-blue"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #cwc-indigo:checked ~ .bnl-cw__stage .bnl-cw__img--indigo { opacity: 1; }
.bnl-page--products-soffit #cwc-indigo:checked ~ .bnl-cw__stage .bnl-cw__nav--for-indigo { display: grid; }
.bnl-page--products-soffit #cwc-indigo:checked ~ .bnl-cw__swatches label[for="cwc-indigo"] { color: var(--color-text); }
.bnl-page--products-soffit #cwc-indigo:checked ~ .bnl-cw__swatches label[for="cwc-indigo"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-soffit #cwc-indigo:focus-visible ~ .bnl-cw__swatches label[for="cwc-indigo"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #cwc-purple:checked ~ .bnl-cw__stage .bnl-cw__img--purple { opacity: 1; }
.bnl-page--products-soffit #cwc-purple:checked ~ .bnl-cw__stage .bnl-cw__nav--for-purple { display: grid; }
.bnl-page--products-soffit #cwc-purple:checked ~ .bnl-cw__swatches label[for="cwc-purple"] { color: var(--color-text); }
.bnl-page--products-soffit #cwc-purple:checked ~ .bnl-cw__swatches label[for="cwc-purple"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-soffit #cwc-purple:focus-visible ~ .bnl-cw__swatches label[for="cwc-purple"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-soffit #cwc-pink:checked ~ .bnl-cw__stage .bnl-cw__img--pink { opacity: 1; }
.bnl-page--products-soffit #cwc-pink:checked ~ .bnl-cw__stage .bnl-cw__nav--for-pink { display: grid; }
.bnl-page--products-soffit #cwc-pink:checked ~ .bnl-cw__swatches label[for="cwc-pink"] { color: var(--color-text); }
.bnl-page--products-soffit #cwc-pink:checked ~ .bnl-cw__swatches label[for="cwc-pink"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-soffit #cwc-pink:focus-visible ~ .bnl-cw__swatches label[for="cwc-pink"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* ---- Testimonials ---- */
.bnl-page--products-soffit .bnl-quote {
 display: flex;
 flex-direction: column;
 gap: var(--space-sm);
}
.bnl-page--products-soffit .bnl-quote__stars {
 color: var(--color-orange);
 letter-spacing: .15em;
 font-size: var(--text-small);
}
.bnl-page--products-soffit .bnl-quote blockquote {
 margin: 0;
 font-style: italic;
 color: var(--color-text);
}
.bnl-page--products-soffit .bnl-quote figcaption {
 color: var(--color-text-muted);
 font-size: var(--text-small);
 font-family: var(--font-heading-proposed);
 font-weight: var(--font-weight-semibold);
}

/* ---- Before & After ---- */
.bnl-page--products-soffit .bnl-ba {
 display: grid;
 gap: var(--space-md);
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.bnl-page--products-soffit .bnl-ba figure { margin: 0; }
.bnl-page--products-soffit .bnl-ba img {
 width: 100%;
 height: auto;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 border-radius: var(--radius-md);
 display: block;
}
.bnl-page--products-soffit .bnl-ba figcaption {
 font-family: var(--font-heading-proposed);
 font-size: var(--text-small);
 font-weight: var(--font-weight-semibold);
 letter-spacing: var(--letter-spacing-heading);
 text-transform: uppercase;
 color: var(--color-text-muted);
 margin-top: var(--space-sm);
 text-align: center;
}

/* ---- Benefits grid ---- */
.bnl-page--products-soffit .bnl-grid {
 display: grid;
 gap: var(--space-ml);
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bnl-page--products-soffit .bnl-card {
 position: relative;
 background: var(--color-bg-elevated);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-md);
 padding: var(--space-ml);
 box-shadow: var(--shadow-sm);
 box-shadow: var(--glow-ambient-teal);
 transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.bnl-page--products-soffit .bnl-card:hover {
 box-shadow: var(--shadow-glow-teal);
 transform: translateY(-2px);
}
.bnl-page--products-soffit .bnl-card__title {
 font-family: var(--font-heading-proposed);
 font-size: var(--text-h3);
 font-weight: var(--font-weight-semibold);
 line-height: var(--line-height-heading);
 letter-spacing: -0.01em;
 margin: 0 0 var(--space-sm);
 color: var(--color-primary);
}
.bnl-page--products-soffit .bnl-card__body {
 margin: 0;
 color: var(--color-text-muted);
}

/* ---- Spec + comparison tables ---- */
.bnl-page--products-soffit .bnl-table-scroll {
 overflow-x: auto;
}
.bnl-page--products-soffit .bnl-table {
 width: 100%;
 border-collapse: collapse;
 text-align: left;
}
.bnl-page--products-soffit .bnl-table__cell,
.bnl-page--products-soffit .bnl-table__head {
 padding: var(--space-md);
 border-bottom: 1px solid var(--color-border);
}
.bnl-page--products-soffit .bnl-table__head {
 font-family: var(--font-heading-proposed);
 font-weight: var(--font-weight-semibold);
 letter-spacing: -0.01em;
 color: var(--color-orange);
 white-space: nowrap;
}
.bnl-page--products-soffit .bnl-table__cell--label {
 color: var(--color-text);
 font-weight: var(--font-weight-semibold);
 white-space: nowrap;
}
.bnl-page--products-soffit .bnl-table__cell {
 color: var(--color-text-muted);
}
.bnl-page--products-soffit .bnl-compare {
 border: 1px solid var(--color-border);
 border-radius: var(--radius-md);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 box-shadow: var(--glow-ambient-teal);
}
.bnl-page--products-soffit .bnl-compare .bnl-table__head {
 white-space: normal;
 text-align: center;
 vertical-align: middle;
 min-width: 170px;
}
.bnl-page--products-soffit .bnl-compare .bnl-table__head--brand {
 color: var(--color-primary);
 text-align: center;
 font-size: clamp(17px, 2.3vw, 22px);
 line-height: 1.25;
 min-width: 230px;
}
.bnl-page--products-soffit .bnl-compare .bnl-table__cell--brand {
 text-align: center;
}
.bnl-page--products-soffit .bnl-compare .bnl-table__cell--brand {
 color: var(--color-text);
 background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.bnl-page--products-soffit .bnl-compare__foot {
 font-size: var(--text-small);
 color: var(--color-text-muted);
 margin-top: var(--space-md);
}

/* ---- Process steps ---- */
.bnl-page--products-soffit .bnl-steps {
 list-style: none;
 counter-reset: bnl-step;
 margin: 0;
 padding: 0;
 display: grid;
 gap: var(--space-ml);
}
.bnl-page--products-soffit .bnl-steps__item {
 counter-increment: bnl-step;
 position: relative;
 padding-left: var(--space-xl);
 color: var(--color-text-muted);
}
.bnl-page--products-soffit .bnl-steps__item::before {
 content: counter(bnl-step);
 position: absolute;
 left: 0;
 top: 0;
 width: 40px;
 height: 40px;
 display: grid;
 place-items: center;
 border-radius: var(--radius-pill);
 background: var(--gradient-brand);
 color: var(--color-white);
 font-family: var(--font-heading-proposed);
 font-weight: var(--font-weight-bold);
 box-shadow: var(--glow-ambient-pink);
}
.bnl-page--products-soffit .bnl-steps__title {
 display: block;
 color: var(--color-text);
 font-weight: var(--font-weight-semibold);
 margin-bottom: var(--space-xs);
}

/* ---- Contractor band ---- */
.bnl-page--products-soffit .bnl-pro-band {
 border: 1px solid var(--color-border);
 border-radius: var(--radius-md);
 padding: var(--space-lg);
 background: var(--color-bg-elevated);
 box-shadow: var(--shadow-sm);
 box-shadow: var(--glow-ambient-pink);
 display: grid;
 gap: var(--space-md);
}
.bnl-page--products-soffit .bnl-pro-band__title {
 font-family: var(--font-heading-proposed);
 font-size: var(--text-h3);
 font-weight: var(--font-weight-semibold);
 margin: 0;
}
.bnl-page--products-soffit .bnl-pro-band__body {
 margin: 0;
 color: var(--color-text-muted);
}

/* ---- Gallery ---- */
.bnl-page--products-soffit .bnl-gallery {
 display: grid;
 gap: var(--space-md);
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 margin: 0;
}
.bnl-page--products-soffit .bnl-gallery__figure {
 margin: 0;
}
.bnl-page--products-soffit .bnl-gallery__img {
 width: 100%;
 height: auto;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 border-radius: var(--radius-md);
 display: block;
}


/* ---- Tech panel (controller) ---- */
.bnl-page--products-soffit .bnl-tech {
 display: grid;
 justify-items: center;
}
.bnl-page--products-soffit .bnl-tech__media-wrap {
 position: relative;
 max-width: 820px;
 width: 100%;
}
.bnl-page--products-soffit .bnl-tech__media-wrap::before {
 content: "";
 position: absolute;
 inset: 6% 8%;
 background: var(--gradient-brand);
 filter: blur(70px);
 opacity: 0.22;
}
.bnl-page--products-soffit .bnl-tech__media {
 position: relative;
 width: 100%;
 height: auto;
 border-radius: var(--radius-md);
 border: 1px solid var(--color-border);
 box-shadow: var(--shadow-sm);
}

/* ---- Ecosystem map (clickable systems) ---- */
.bnl-page--products-soffit .bnl-eco {
 position: relative;
 max-width: 860px;
 margin: 0 auto;
 padding: var(--space-sm);
 background: var(--color-bg-elevated);
 border: 1px solid color-mix(in srgb, var(--color-pink) 45%, var(--color-border));
 border-radius: var(--radius-md);
 box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
}
.bnl-page--products-soffit .bnl-eco__img {
 width: 100%;
 height: auto;
 border-radius: var(--radius-md);
 border: 1px solid var(--color-border);
 display: block;
}
.bnl-page--products-soffit .bnl-eco__hot {
 position: absolute;
 display: block;
 border-radius: var(--radius-sm);
 border: 1px solid transparent;
 transition: border-color .2s ease, box-shadow .2s ease;
}
.bnl-page--products-soffit .bnl-eco__hot:hover,
.bnl-page--products-soffit .bnl-eco__hot:focus-visible {
 border-color: var(--color-primary);
 box-shadow: var(--shadow-glow-teal);
}

/* ---- FAQ ---- */
.bnl-page--products-soffit .bnl-faq__item {
 border-bottom: 1px solid var(--color-border);
 padding: var(--space-md) 0;
}
.bnl-page--products-soffit .bnl-faq__q {
 cursor: pointer;
 min-height: 44px;
 display: flex;
 align-items: center;
}
.bnl-page--products-soffit .bnl-faq__q-text {
 font-family: var(--font-heading-proposed);
 font-size: var(--text-h3);
 font-weight: var(--font-weight-semibold);
 line-height: var(--line-height-heading);
 letter-spacing: -0.01em;
 margin: 0;
 display: inline;
}
.bnl-page--products-soffit .bnl-faq__a {
 color: var(--color-text-muted);
 margin: var(--space-sm) 0 0;
}

/* ---- CTA band ---- */
.bnl-page--products-soffit .bnl-cta-band {
 position: relative;
 background:
  radial-gradient(70% 42% at 36% 30%, color-mix(in srgb, var(--color-pink) 10%, transparent), transparent 60%),
  radial-gradient(70% 42% at 66% 44%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 60%),
  linear-gradient(180deg,
   transparent 0%,
   color-mix(in srgb, var(--color-bg-elevated) 55%, transparent) 16%,
   color-mix(in srgb, var(--color-bg-elevated) 90%, transparent) 42%,
   color-mix(in srgb, var(--color-bg-elevated) 90%, transparent) 70%,
   color-mix(in srgb, var(--color-bg-elevated) 45%, transparent) 88%,
   transparent 100%);
 text-align: center;
 overflow: hidden;
}
/* Rev 24: blurred blob retired — its hard clip line at the band's top edge was
  the last visible seam. The glow now lives in contained radial pools below. */
.bnl-page--products-soffit .bnl-cta-band::before { content: none; }
.bnl-page--products-soffit .bnl-cta-band .bnl-section__inner {
 position: relative;
}
.bnl-page--products-soffit .bnl-cta-band .bnl-btn-row {
 justify-content: center;
}
.bnl-page--products-soffit .bnl-cta-band .bnl-lede {
 margin-left: auto;
 margin-right: auto;
 max-width: 760px;
}

@media (min-width: 768px) {
 .bnl-page--products-soffit .bnl-section {
  padding: var(--space-xl) var(--space-lg);
 }
 .bnl-page--products-soffit .bnl-steps__item {
  padding-left: var(--space-2xl);
 }
 .bnl-page--products-soffit .bnl-pro-band {
  grid-template-columns: 1fr auto;
  align-items: center;
 }
}
@media (prefers-reduced-motion: reduce) {
 .bnl-page--products-soffit .bnl-btn,
 .bnl-page--products-soffit .bnl-card {
  transition: none;
 }
 .bnl-page--products-soffit .bnl-card:hover {
  transform: none;
 }
}

/* ---------- page ---------- */
/* ===== Interactive spec panel (CSS-only port of PoolEnclosureSpecs.jsx) ===== */
#specs .bnl-sp{color:#EDEFEF}
#specs .bnl-sp__r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#specs .bnl-sp__ic{flex:none;stroke:#35CFC9}
#specs .bnl-heading--section{text-align:center}
#specs .bnl-sp__feat{cursor:pointer;transition:background .2s ease}
#specs .bnl-sp__feat:hover{background:rgba(53,207,201,0.06)}
#specs .bnl-sp__feat:hover .bnl-sp__feat-t{color:#35CFC9}
#specs .bnl-sp__hint{text-align:center;font-size:.82rem;color:rgba(237,239,239,0.38);margin:-8px 0 14px}
@media (max-width:899px){#specs .bnl-sp__feat:last-of-type{grid-column:1 / -1;justify-content:center}}
#specs .bnl-sp__strip{display:grid;grid-template-columns:repeat(5,1fr);background:#101314;border:1px solid rgba(255,255,255,0.07);border-radius:18px;margin:26px 0 18px;overflow:hidden}
#specs .bnl-sp__feat{display:flex;align-items:center;gap:13px;padding:18px 20px}
#specs .bnl-sp__feat+.bnl-sp__feat{border-left:1px solid rgba(255,255,255,0.07)}
#specs .bnl-sp__feat-t{font-size:.92rem;font-weight:600;line-height:1.25}
#specs .bnl-sp__feat-b{font-size:.82rem;color:rgba(237,239,239,0.6);line-height:1.3;margin-top:2px}
#specs .bnl-sp__layout{display:grid;grid-template-columns:252px 1fr;gap:18px;align-items:start}
#specs .bnl-sp__nav{background:#101314;border:1px solid rgba(255,255,255,0.07);border-radius:18px;padding:8px;position:sticky;top:20px}
#specs .bnl-sp__nav-item{display:flex;align-items:center;gap:13px;width:100%;padding:13px 16px;border-radius:12px;border-left:2.5px solid transparent;color:rgba(237,239,239,0.6);font-size:.94rem;font-weight:500;cursor:pointer;transition:color .2s ease,background .2s ease}
#specs .bnl-sp__nav-item:hover{color:#EDEFEF;background:rgba(255,255,255,0.03)}
#specs .bnl-sp__nav-item .bnl-sp__ic{stroke:currentColor}
#specs .bnl-sp__panel{background:#101314;border:1px solid rgba(255,255,255,0.07);border-radius:18px;padding:26px 28px 30px;min-width:0}
#specs .bnl-sp__view{display:none;animation:bnlSpFade .28s ease}
@keyframes bnlSpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#specs .bnl-sp__ptitle{color:#35CFC9;font-size:1.18rem;font-weight:700;margin:0 0 10px}
#specs .bnl-sp__body{font-size:.97rem;line-height:1.7;margin:0 0 14px;max-width:640px}
#specs .bnl-sp__rows{margin-top:18px}
#specs .bnl-sp__row{display:grid;grid-template-columns:56px 1fr 300px;gap:18px;align-items:center;padding:20px 6px;border-top:1px solid rgba(255,255,255,0.07);border-radius:12px;cursor:pointer;transition:background .2s ease}
#specs .bnl-sp__row:hover{background:rgba(53,207,201,0.045)}
#specs .bnl-sp__row:hover .bnl-sp__row-title{color:#35CFC9}
#specs .bnl-sp__row-ic{align-self:start;margin-top:4px}
#specs .bnl-sp__row-title{display:block;font-size:1.06rem;font-weight:700;margin-bottom:5px;transition:color .2s ease}
#specs .bnl-sp__row-desc{display:block;font-size:.91rem;color:rgba(237,239,239,0.6);line-height:1.6}
#specs .bnl-sp__row-vis{min-height:74px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center}
#specs .bnl-sp__row-vis--photo{height:96px;background:#0B0F10;border:1px solid rgba(255,255,255,0.07)}
#specs .bnl-sp__row-chev{display:none}
#specs .bnl-sp__vsvg{width:100%;height:100%;display:block;font-family:inherit}
#specs .bnl-sp__badge{display:flex;align-items:center;justify-content:center;gap:12px;border-radius:14px;border:1px solid rgba(53,207,201,0.28);background:rgba(53,207,201,0.07);padding:16px 20px;width:100%;min-height:74px}
#specs .bnl-sp__badge-big{color:#35CFC9;font-size:1.19rem;font-weight:700;line-height:1.2;letter-spacing:-0.01em}
#specs .bnl-sp__badge-sm{font-size:.85rem;font-weight:500;opacity:.85;margin-top:2px}
#specs .bnl-sp__wheel{border-radius:50%;flex:none;position:relative;display:inline-block;background:conic-gradient(#ff3b30,#ff9500,#ffe234,#8be32f,#2fd0c9,#2f8fe3,#7a4de3,#e34dd0,#ff3b30)}
#specs .bnl-sp__wheel-in{position:absolute;inset:24%;border-radius:50%;background:#0B0F10}
#specs .bnl-sp__wheel-core{position:absolute;inset:36%;border-radius:50%;background:#fff}
#specs .bnl-sp__back{display:inline-flex;align-items:center;gap:7px;color:rgba(237,239,239,0.6);font-size:.88rem;font-weight:600;cursor:pointer;padding:4px 0;margin-bottom:16px}
#specs .bnl-sp__back:hover{color:#EDEFEF}
#specs .bnl-sp__back .bnl-sp__ic{stroke:currentColor}
#specs .bnl-sp__dhead{display:flex;align-items:center;gap:14px;margin-bottom:16px}
#specs .bnl-sp__dhead h3{font-size:1.5rem;font-weight:700;margin:0}
#specs .bnl-sp__dvis{border-radius:16px;overflow:hidden;margin-bottom:20px}
#specs .bnl-sp__dvis--photo{background:#0B0F10;border:1px solid rgba(255,255,255,0.07);height:150px;display:flex;align-items:center;justify-content:center}
#specs .bnl-sp__dvis--badge{max-width:380px}
#specs .bnl-sp__bullets{margin:0;padding:0;list-style:none}
#specs .bnl-sp__bullets li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:.94rem;color:rgba(237,239,239,0.6);line-height:1.55}
#specs .bnl-sp__bullets .bnl-sp__ic{margin-top:4px}
#specs .bnl-sp__kit{margin-top:20px}
#specs .bnl-sp__kit-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,239,239,0.38);font-weight:600;margin:0 0 10px}
#specs .bnl-sp__kit-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
#specs .bnl-sp__kit-chip{padding:11px 16px;border-radius:12px;font-size:.94rem;font-weight:700;cursor:pointer;min-width:74px;text-align:center;color:rgba(237,239,239,0.6);border:1px solid rgba(255,255,255,0.07);transition:all .2s ease}
#specs .bnl-sp__kitbar{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,0.06);margin-bottom:6px;overflow:hidden}
#specs .bnl-sp__kitfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#35CFC9,rgba(53,207,201,0.55));box-shadow:0 0 14px rgba(53,207,201,0.35);transition:width .35s ease}
#specs .bnl-sp__kit-scale{display:flex;justify-content:space-between;font-size:.75rem;color:rgba(237,239,239,0.38);margin-bottom:12px}
#specs .bnl-sp__kitinfo{display:none;border-radius:14px;border:1px solid rgba(53,207,201,0.28);background:rgba(53,207,201,0.07);padding:14px 16px;font-size:.91rem;line-height:1.6}
#specs .bnl-sp__kitinfo strong{color:#35CFC9}
#specs .bnl-sp__dls{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
#specs .bnl-sp__dl{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;font-size:.88rem;font-weight:600;text-decoration:none;color:#35CFC9;background:rgba(53,207,201,0.07);border:1px solid rgba(53,207,201,0.28)}
#specs .bnl-sp__dl-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:14px 18px;border-radius:12px;background:#35CFC9;color:#06201f;font-size:.94rem;font-weight:700;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
#specs .bnl-sp__dl-cta:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(53,207,201,0.3)}
#specs .bnl-sp__dl-cta .bnl-sp__ic{stroke:currentColor}
#specs #sp-v-overview:checked ~ .bnl-sp__layout .bnl-sp__view--overview{display:block}
#specs #sp-v-overview:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-overview"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-overview:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-overview"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-architecture:checked ~ .bnl-sp__layout .bnl-sp__view--architecture{display:block}
#specs #sp-v-architecture:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-architecture"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-architecture:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-architecture"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-sizes:checked ~ .bnl-sp__layout .bnl-sp__view--sizes{display:block}
#specs #sp-v-sizes:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-sizes"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-sizes:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-sizes"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-power:checked ~ .bnl-sp__layout .bnl-sp__view--power{display:block}
#specs #sp-v-power:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-power"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-power:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-power"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-connectors:checked ~ .bnl-sp__layout .bnl-sp__view--connectors{display:block}
#specs #sp-v-connectors:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-connectors"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-connectors:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-connectors"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-wiring:checked ~ .bnl-sp__layout .bnl-sp__view--wiring{display:block}
#specs #sp-v-wiring:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-wiring"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-wiring:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-wiring"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-mounting:checked ~ .bnl-sp__layout .bnl-sp__view--mounting{display:block}
#specs #sp-v-mounting:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-mounting"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-mounting:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-mounting"]{outline:2px solid #35CFC9;outline-offset:2px}



#specs #sp-v-led:checked ~ .bnl-sp__layout .bnl-sp__view--led{display:block}
#specs #sp-v-led:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-led"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-led:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-led"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-environmental:checked ~ .bnl-sp__layout .bnl-sp__view--environmental{display:block}
#specs #sp-v-environmental:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-environmental"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-environmental:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-environmental"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-control:checked ~ .bnl-sp__layout .bnl-sp__view--control{display:block}
#specs #sp-v-control:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-control"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-control:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-control"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-compatibility:checked ~ .bnl-sp__layout .bnl-sp__view--compatibility{display:block}
#specs #sp-v-compatibility:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-compatibility"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-compatibility:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-compatibility"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-warranty:checked ~ .bnl-sp__layout .bnl-sp__view--warranty{display:block}
#specs #sp-v-warranty:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-warranty"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-warranty:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-warranty"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-downloads:checked ~ .bnl-sp__layout .bnl-sp__view--downloads{display:block}
#specs #sp-v-downloads:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-downloads"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-downloads:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-downloads"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-k-100:checked ~ .bnl-sp__layout .bnl-sp__kitfill{width:10.0%}
#specs #sp-k-100:checked ~ .bnl-sp__layout .bnl-sp__kitinfo--100{display:block}
#specs #sp-k-100:checked ~ .bnl-sp__layout .bnl-sp__kit-chips label[for="sp-k-100"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-k-100:checked ~ .bnl-sp__layout .bnl-sp__kit-cur::after{content:"pending"}
#specs #sp-k-150:checked ~ .bnl-sp__layout .bnl-sp__kitfill{width:15.0%}
#specs #sp-k-150:checked ~ .bnl-sp__layout .bnl-sp__kitinfo--150{display:block}
#specs #sp-k-150:checked ~ .bnl-sp__layout .bnl-sp__kit-chips label[for="sp-k-150"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-k-150:checked ~ .bnl-sp__layout .bnl-sp__kit-cur::after{content:"pending"}
#specs #sp-k-200:checked ~ .bnl-sp__layout .bnl-sp__kitfill{width:20.0%}
#specs #sp-k-200:checked ~ .bnl-sp__layout .bnl-sp__kitinfo--200{display:block}
#specs #sp-k-200:checked ~ .bnl-sp__layout .bnl-sp__kit-chips label[for="sp-k-200"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-k-200:checked ~ .bnl-sp__layout .bnl-sp__kit-cur::after{content:"pending"}
#specs #sp-k-250:checked ~ .bnl-sp__layout .bnl-sp__kitfill{width:25.0%}
#specs #sp-k-250:checked ~ .bnl-sp__layout .bnl-sp__kitinfo--250{display:block}
#specs #sp-k-250:checked ~ .bnl-sp__layout .bnl-sp__kit-chips label[for="sp-k-250"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-k-250:checked ~ .bnl-sp__layout .bnl-sp__kit-cur::after{content:"pending"}
#specs #sp-k-300:checked ~ .bnl-sp__layout .bnl-sp__kitfill{width:30.0%}
#specs #sp-k-300:checked ~ .bnl-sp__layout .bnl-sp__kitinfo--300{display:block}
#specs #sp-k-300:checked ~ .bnl-sp__layout .bnl-sp__kit-chips label[for="sp-k-300"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-k-300:checked ~ .bnl-sp__layout .bnl-sp__kit-cur::after{content:"pending"}
@media (max-width:899px){
#specs .bnl-sp__strip{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#specs .bnl-sp__feat+.bnl-sp__feat{border-left:none}
#specs .bnl-sp__layout{display:block}
#specs .bnl-sp__nav{position:sticky;top:0;z-index:20;display:flex;gap:8px;overflow-x:auto;padding:10px 2px;margin-bottom:12px;background:rgba(10,10,10,0.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:none;border-radius:0;scrollbar-width:none}
#specs .bnl-sp__nav::-webkit-scrollbar{display:none}
#specs .bnl-sp__nav-item{flex:none;width:auto;padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,0.07);border-left-width:1px;background:#101314;font-size:.86rem;font-weight:600}
#specs .bnl-sp__nav-item .bnl-sp__ic{display:none}
#specs .bnl-sp__panel{padding:20px 16px 24px}
#specs .bnl-sp__row{grid-template-columns:44px 1fr auto;gap:12px;padding:16px 4px}
#specs .bnl-sp__row-vis{display:none}
#specs .bnl-sp__row-chev{display:block;color:rgba(237,239,239,0.38)}
#specs .bnl-sp__row-chev .bnl-sp__ic{stroke:currentColor}
#specs .bnl-sp__dvis--photo{height:110px}
#specs .bnl-sp__dhead h3{font-size:1.3rem}
}
@media (max-width:899px){
#specs #sp-v-overview:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-overview"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-architecture:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-architecture"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-sizes:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-sizes"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-power:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-power"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-connectors:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-connectors"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-wiring:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-wiring"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-mounting:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-mounting"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}

#specs #sp-v-led:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-led"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-environmental:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-environmental"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-control:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-control"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-compatibility:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-compatibility"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-warranty:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-warranty"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-downloads:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-downloads"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
}
@media (prefers-reduced-motion:reduce){
#specs .bnl-sp__view{animation:none}
#specs .bnl-sp__kitfill,#specs .bnl-sp__row,#specs .bnl-sp__nav-item,#specs .bnl-sp__kit-chip,#specs .bnl-sp__dl-cta{transition:none}
}

/* ---------- page ---------- */
#compare-cta .bnl-vs__stack{text-align:center;max-width:900px;margin:0 auto;}
  #compare-cta .bnl-vs__brand{font-family:var(--font-heading-proposed);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:-0.01em;}
  #compare-cta .bnl-vs__badge{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
   margin:18px auto;font-weight:800;font-size:1.25rem;color:#fff;border:1.5px solid var(--color-pink);
   box-shadow:var(--hglow-pink);background:color-mix(in srgb, var(--color-pink) 14%, transparent);}
  #compare-cta .bnl-vs__viewport{overflow:hidden;margin-top:6px;
   -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
   mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
  #compare-cta .bnl-vs__track{display:flex;gap:14px;width:max-content;animation:bnlVsScroll 26s linear infinite;will-change:transform;padding:10px 0 14px;}
  #compare-cta .bnl-vs__viewport:hover .bnl-vs__track,
  #compare-cta .bnl-vs__viewport:focus-within .bnl-vs__track{animation-play-state:paused;}
  @keyframes bnlVsScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
  #compare-cta .bnl-vs__chip{flex:0 0 auto;display:inline-block;padding:14px 26px;border-radius:999px;text-decoration:none;
   color:var(--color-primary);border:1.5px solid var(--color-primary);font-weight:700;font-size:1.02rem;
   box-shadow:var(--hglow-teal);background:transparent;transition:box-shadow .2s ease,background .2s ease,transform .18s ease;}
  #compare-cta .bnl-vs__chip:hover{box-shadow:var(--hglow-teal-hi);background:color-mix(in srgb, var(--color-primary) 12%, transparent);transform:translateY(-2px) scale(1.05);}
  #compare-cta .bnl-vs__hint{font-size:.85rem;opacity:.55;margin-top:10px;}
  @media (prefers-reduced-motion:reduce){
   #compare-cta .bnl-vs__track{animation:none;}
   #compare-cta .bnl-vs__viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;mask-image:none;-webkit-mask-image:none;}
   #compare-cta .bnl-vs__chip{transition:none;}
  }

/* ---------- page ---------- */
#contractors .bnl-pro2{max-width:980px;margin:0 auto;text-align:center;}
  #contractors .bnl-pro2 h2{margin-bottom:14px;}
  #contractors .bnl-pro2 .bnl-lede{max-width:760px;margin:0 auto 30px;}
  #contractors .bnl-pro2__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:0 0 32px;}
  #contractors .bnl-pro2__tile{display:flex;align-items:center;gap:12px;text-align:left;
   padding:16px 18px;border-radius:14px;border:1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
   background:color-mix(in srgb, var(--color-primary) 6%, transparent);font-weight:600;font-size:.95rem;line-height:1.35;}
  #contractors .bnl-pro2__tile svg{flex:none;width:20px;height:20px;stroke:var(--color-primary);}
  #contractors .bnl-pro2__cta{display:inline-block;}
  @media (max-width:640px){#contractors .bnl-pro2__grid{grid-template-columns:1fr 1fr;} #contractors .bnl-pro2__tile{font-size:.88rem;padding:13px 14px;}}

/* ---------- bnl-heavy-glow-layer ---------- */
/* ===== Interactive Glow Layer (Austen 07-27: everything clickable glows, heavy) ===== */
:root{
 --hglow-pink: 0 0 14px rgba(227,5,107,.55), 0 0 44px rgba(227,5,107,.38);
 --hglow-pink-hi: 0 0 18px rgba(227,5,107,.75), 0 0 60px rgba(227,5,107,.5);
 --hglow-teal: 0 0 14px rgba(0,169,181,.5), 0 0 40px rgba(0,169,181,.32);
 --hglow-teal-hi: 0 0 18px rgba(0,169,181,.7), 0 0 56px rgba(0,169,181,.45);
 --hglow-teal-soft: 0 0 10px rgba(53,207,201,.28), 0 0 26px rgba(53,207,201,.18);
}
/* Hover lift + grow on all buttons */
.bnl-page--products-soffit .bnl-btn{transition:box-shadow .2s ease,background-color .2s ease,transform .18s ease;will-change:transform}
.bnl-page--products-soffit .bnl-btn:hover{transform:translateY(-2px) scale(1.05)}
.bnl-page--products-soffit .bnl-btn:active{transform:translateY(0) scale(0.98)}
@media (prefers-reduced-motion:reduce){.bnl-page--products-soffit .bnl-btn,.bnl-page--products-soffit .bnl-btn:hover{transform:none;transition:box-shadow .2s ease,background-color .2s ease}}
/* Hero title: larger + deeper overlap onto the video */
.bnl-page--products-soffit .bnl-hero__title{font-size:clamp(2.7rem,6.2vw,4.8rem);text-shadow:0 3px 22px rgba(0,0,0,.85),0 0 40px rgba(0,0,0,.5)}
.bnl-page--products-soffit .bnl-hero__content{margin-top:-96px}
@media (min-width:900px){.bnl-page--products-soffit .bnl-hero__content{margin-top:-170px}}
/* Buttons */
.bnl-page--products-soffit .bnl-btn--primary{box-shadow:var(--hglow-pink)}
.bnl-page--products-soffit .bnl-btn--primary:hover{box-shadow:var(--hglow-pink-hi);background:color-mix(in srgb, var(--color-pink) 14%, transparent)}
.bnl-page--products-soffit .bnl-btn--secondary{box-shadow:var(--hglow-teal)}
.bnl-page--products-soffit .bnl-btn--secondary:hover{box-shadow:var(--hglow-teal-hi)}
.bnl-page--products-soffit .bnl-btn--ghost{box-shadow:var(--hglow-pink)}
.bnl-page--products-soffit .bnl-btn--ghost:hover{box-shadow:var(--hglow-pink-hi)}
/* Text links */
.bnl-page--products-soffit .bnl-link{text-shadow:0 0 12px rgba(0,169,181,.75)}
.bnl-page--products-soffit .bnl-link:hover{text-shadow:0 0 16px rgba(0,169,181,1)}
/* FAQ questions */
.bnl-page--products-soffit .bnl-faq__q{text-shadow:0 0 10px rgba(255,255,255,.22);transition:text-shadow .2s ease,color .2s ease}
.bnl-page--products-soffit .bnl-faq__q:hover{color:var(--color-primary);text-shadow:0 0 14px rgba(0,169,181,.8)}
/* Before/after slider handle (range thumb) */
.bnl-page--products-soffit .bnl-ba-slider__range::-webkit-slider-thumb{box-shadow:var(--hglow-teal)}
.bnl-page--products-soffit .bnl-ba-slider__range::-moz-range-thumb{box-shadow:var(--hglow-teal)}
/* Holiday season cards (hover-zoom targets) */
.bnl-page--products-soffit .bnl-season__card{box-shadow:var(--hglow-teal-soft);border-radius:14px}
/* Spec panel interactives */
#specs .bnl-sp__nav-item, #specs .bnl-sp__feat, #specs .bnl-sp__kit-chip,
#specs .bnl-sp__dl, #specs .bnl-sp__dl-cta, #specs .bnl-sp__back{box-shadow:var(--hglow-teal-soft)}
#specs .bnl-sp__row{box-shadow:inset 0 0 0 1px rgba(53,207,201,.10), var(--hglow-teal-soft)}
#specs .bnl-sp__nav-item:hover, #specs .bnl-sp__feat:hover, #specs .bnl-sp__kit-chip:hover,
#specs .bnl-sp__dl:hover, #specs .bnl-sp__row:hover{box-shadow:var(--hglow-teal)}
#specs .bnl-sp__dl-cta:hover{box-shadow:var(--hglow-teal-hi)}
@media (prefers-reduced-motion:reduce){
 .bnl-page--products-soffit .bnl-faq__q{transition:none}
}

/* ==== unified pill (canonical, from home) ==== */
.bnl-pill,
.bnl-k__chip,.bnl-k__tag,.bnl-vs__chip,.bnl-vibe__chip,.bnl-wash__chip,
.bnl-cs__chip,.bnl-rv__chip,.bnl-sp__kit-chip,.bnl-val__tag,.bnl-rot__tag,
.bnl-sc__tag,.bnl-compare-cta__chip{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-pill);
  font-family:var(--font-heading-proposed);font-weight:700;line-height:1.15;
  letter-spacing:.02em;
  background:color-mix(in srgb,var(--color-bg-elevated) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--color-primary) 34%,var(--color-border));
  color:var(--color-text);
  -webkit-appearance:none;appearance:none;
}
.bnl-k__chip,.bnl-k__tag,.bnl-vs__chip,.bnl-vibe__chip,.bnl-wash__chip,
.bnl-cs__chip,.bnl-rv__chip,.bnl-sp__kit-chip,.bnl-val__tag,.bnl-rot__tag,
.bnl-sc__tag{ padding:7px 14px;font-size:var(--text-small); }
/* eyebrows: one treatment everywhere */
.bnl-hero__eyebrow,.bnl-eyebrow,.bnl-sc__kicker,.bnl-acc__kicker,.bnl-kicker__t{
  font-family:var(--font-heading-proposed);
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}

/* ==== coverflow cards, ported from home rev34 ==== */
/* ---- the card ---- */
.bnl-page--products-soffit .bnl-dcard{transform-style:preserve-3d;}
.bnl-page--products-soffit .bnl-dcard__inner{
  position:relative;display:flex;flex-direction:column;height:100%;
  border-radius:var(--radius-md);
  background:#141414;border:1px solid var(--color-border);
  transform-style:preserve-3d;
}
/* rim light — a tilted surface should catch an edge */
.bnl-page--products-soffit .bnl-dcard__inner::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(158deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 34%, transparent 58%);
}
.bnl-page--products-soffit .bnl-dcard__body{
  padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;
  transform-style:preserve-3d;position:relative;z-index:1;
}
.bnl-page--products-soffit .bnl-dcard__head{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.bnl-page--products-soffit .bnl-dcard__ic{
  flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-pill);
  border:1px solid currentColor;box-shadow:0 0 16px -4px currentColor;
}
.bnl-page--products-soffit .bnl-dcard__ic svg{width:15px;height:15px;}
.bnl-page--products-soffit .bnl-dcard__who{
  margin:0;font-family:var(--font-heading-proposed);font-size:10px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;
}
.bnl-page--products-soffit .bnl-dcard__verb{
  font-family:var(--font-heading-proposed);font-weight:800;
  font-size:clamp(22px,5.6vw,30px);line-height:.96;letter-spacing:-.05em;margin:0 0 7px;
}
.bnl-page--products-soffit .bnl-dcard__verb span{display:inline;}
.bnl-page--products-soffit .bnl-dcard__rule{height:2px;width:52px;border-radius:2px;margin:0 0 9px;background:linear-gradient(90deg,currentColor,transparent);}
.bnl-page--products-soffit .bnl-dcard__hook{
  font-family:var(--font-heading-proposed);font-weight:700;
  font-size:14px;line-height:1.28;letter-spacing:-.015em;color:#fff;margin:0 0 10px;
}
.bnl-page--products-soffit .bnl-dcard__list{display:none;}
.bnl-page--products-soffit .bnl-dcard__cta{
  margin-top:auto;align-self:stretch;padding:11px var(--space-md);min-height:40px;font-size:12.5px;
}
.bnl-page--products-soffit .bnl-dcard__login{display:none;}
@media (min-width:860px){
  .bnl-page--products-soffit .bnl-dcard__body{padding:18px 20px 20px;}
.bnl-page--products-soffit .bnl-dcard__ic{width:36px;height:36px;}
.bnl-page--products-soffit .bnl-dcard__ic svg{width:17px;height:17px;}
.bnl-page--products-soffit .bnl-dcard__who{font-size:11px;}
.bnl-page--products-soffit .bnl-dcard__verb{font-size:34px;margin-bottom:9px;letter-spacing:-.052em;}
.bnl-page--products-soffit .bnl-dcard__rule{width:62px;margin-bottom:11px;}
.bnl-page--products-soffit .bnl-dcard__hook{font-size:16px;margin-bottom:12px;}
.bnl-page--products-soffit .bnl-dcard__list{
    display:block;list-style:none;padding:0;margin:0 0 14px;
    font-size:12.5px;color:var(--color-text-muted);
  }
.bnl-page--products-soffit .bnl-dcard__list li{padding:5px 0;border-top:1px solid color-mix(in srgb, var(--color-border) 45%, transparent);}
.bnl-page--products-soffit .bnl-dcard__list li:nth-child(n+3){display:none;}
.bnl-page--products-soffit .bnl-dcard__cta{font-size:13px;}
.bnl-page--products-soffit .bnl-dcard--design .bnl-dcard__login{
    display:block;margin-top:10px;text-align:center;
    font-family:var(--font-heading-proposed);font-size:11.5px;font-weight:600;
    color:var(--color-primary);text-decoration:none;
  }
.bnl-page--products-soffit .bnl-dcard--design .bnl-dcard__login:hover{text-decoration:underline;}
}

/* each path card carries its own distinctly tinted gradient ground */
.bnl-page--products-soffit .bnl-dcard--live .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#0d1a1d 46%,#101010 100%);
}
.bnl-page--products-soffit .bnl-dcard--install .bnl-dcard__inner{
  background:linear-gradient(158deg,#2e0620 0%,#1d0d16 46%,#101010 100%);
}
.bnl-page--products-soffit .bnl-dcard--sell .bnl-dcard__inner{
  background:linear-gradient(158deg,#331904 0%,#1f1409 46%,#101010 100%);
}
.bnl-page--products-soffit .bnl-dcard--design .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#1a0d28 42%,#2b0722 72%,#101010 100%);
}
/* ---- per-path accents ---- */
.bnl-page--products-soffit .bnl-dcard--live .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-primary) 48%, var(--color-border));}
.bnl-page--products-soffit .bnl-dcard--live .bnl-dcard__verb,
.bnl-page--products-soffit .bnl-dcard--live .bnl-dcard__who,
.bnl-page--products-soffit .bnl-dcard--live .bnl-dcard__ic,
.bnl-page--products-soffit .bnl-dcard--live .bnl-dcard__rule{color:var(--color-primary);}
.bnl-page--products-soffit .bnl-dcard--install .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 48%, var(--color-border));}
.bnl-page--products-soffit .bnl-dcard--install .bnl-dcard__verb,
.bnl-page--products-soffit .bnl-dcard--install .bnl-dcard__who,
.bnl-page--products-soffit .bnl-dcard--install .bnl-dcard__ic,
.bnl-page--products-soffit .bnl-dcard--install .bnl-dcard__rule{color:var(--color-pink);}
.bnl-page--products-soffit .bnl-dcard--sell .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-orange) 48%, var(--color-border));}
.bnl-page--products-soffit .bnl-dcard--sell .bnl-dcard__verb,
.bnl-page--products-soffit .bnl-dcard--sell .bnl-dcard__who,
.bnl-page--products-soffit .bnl-dcard--sell .bnl-dcard__ic,
.bnl-page--products-soffit .bnl-dcard--sell .bnl-dcard__rule{color:var(--color-orange);}
.bnl-page--products-soffit .bnl-dcard--design .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 52%, var(--color-primary));}
.bnl-page--products-soffit .bnl-dcard--design .bnl-dcard__verb{
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;
  color:var(--color-pink);-webkit-text-fill-color:transparent;
}
.bnl-page--products-soffit .bnl-dcard--design .bnl-dcard__who,
.bnl-page--products-soffit .bnl-dcard--design .bnl-dcard__ic{color:var(--color-primary);}
.bnl-page--products-soffit .bnl-dcard--design .bnl-dcard__rule{background:var(--gradient-brand);}
/* ---- the stage ---- */
#perf .bnl-rot{margin:var(--space-ml) 0 0;}
#perf .bnl-rot__stage{
  /* rev18: card is 274px; the stage was 326px, leaving ~50px of dead air
     between the card and the controls once the photo slots came out */
  position:relative;height:296px;
  perspective:1100px;perspective-origin:50% 46%;
  transform-style:preserve-3d;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
}
#perf .bnl-rot__stage.is-drag{cursor:grabbing;}
#perf .bnl-rot__glow{
  position:absolute;left:50%;top:8px;width:min(760px,94vw);height:250px;
  margin-left:max(-380px,-47vw);pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--color-primary) 13%, transparent) 0%, transparent 68%);
}
#perf .bnl-rot__item{
  --w:64vw;
  position:absolute;left:50%;top:0;width:var(--w);height:274px;
  margin-left:calc(var(--w) / -2);
  transform-style:preserve-3d;
  transition:transform .66s cubic-bezier(.22,.61,.36,1), opacity .66s ease, filter .66s ease;
  will-change:transform;
}
#perf .bnl-rot__stage.is-drag .bnl-rot__item{transition:none;}
/* ---- coverflow geometry — EVERY card tilted on two axes ---- */
#perf .bnl-rot__item[data-pos="0"]{
  transform:translateX(0) translateZ(0)
            rotateY(calc(-9deg + var(--bnl-ry))) rotateX(calc(3.5deg + var(--bnl-rx)))
            scale(1);
  opacity:1;filter:none;z-index:5;
}
#perf .bnl-rot__item[data-pos="1"]{
  transform:translateX(70%) translateZ(-140px) rotateY(-46deg) rotateX(5deg) scale(.9);
  opacity:.6;filter:blur(.8px);z-index:3;
}
#perf .bnl-rot__item[data-pos="-1"]{
  transform:translateX(-70%) translateZ(-140px) rotateY(32deg) rotateX(5deg) scale(.9);
  opacity:.6;filter:blur(.8px);z-index:3;
}
#perf .bnl-rot__item[data-pos="2"],
#perf .bnl-rot__item[data-pos="-2"]{
  transform:translateX(0) translateZ(-360px) rotateY(-9deg) rotateX(3.5deg) scale(.82);
  opacity:.14;filter:blur(2.5px);z-index:1;
}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner{pointer-events:auto;}
#perf .bnl-rot__item:not([data-pos="0"]) .bnl-dcard__inner{pointer-events:none;}
/* pointer tracking wants a short transition, not the 660ms travel curve */
#perf .bnl-rot__item.is-tracking{transition:transform .12s linear;}
/* ---- directional shadow separation on the front card ---- */
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner{
  box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), 0 2px 0 rgba(255,255,255,.04) inset;
}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--live  .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-teal);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--install .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-pink);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--sell    .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), 0 0 48px -12px color-mix(in srgb, var(--color-orange) 55%, transparent);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--design  .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-teal), var(--glow-ambient-pink);}
/* ---- internal translateZ parallax — content floats above the surface ---- */
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__head{transform:translateZ(30px);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__verb{transform:translateZ(24px);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__rule{transform:translateZ(18px);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__hook{transform:translateZ(13px);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__list{transform:translateZ(8px);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__cta{transform:translateZ(20px);}
/* ---- cursor-tracked specular glare ---- */
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(240px circle at var(--bnl-mx,50%) var(--bnl-my,26%),
             rgba(255,255,255,.16), rgba(255,255,255,.05) 38%, transparent 64%);
  opacity:0;transition:opacity .32s ease;mix-blend-mode:screen;
}
#perf .bnl-rot__item[data-pos="0"].is-tracking .bnl-dcard__inner::after{opacity:1;}
/* BRI-324: the opener for this block was lost in the coverflow port. Restored. */
@media (prefers-reduced-motion: no-preference){
  #perf .bnl-rot__item[data-pos="0"]{animation:bnl-card-float 7s ease-in-out infinite;}
}

/* the shadow the front card floats above — offset to match the tilt */
#perf .bnl-rot__shadow{
  position:absolute;left:50%;top:274px;width:min(340px,50vw);height:24px;
  margin-left:max(-178px,-26vw);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.82) 0%, rgba(0,0,0,.34) 46%, transparent 74%);
  filter:blur(9px);
  transition:transform .66s cubic-bezier(.22,.61,.36,1), opacity .66s ease;
}
#perf .bnl-rot__stage.is-drag .bnl-rot__shadow{transition:none;}
/* ---- nav ---- */
#perf .bnl-rot__nav{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;}
#perf .bnl-rot__arrows{display:flex;align-items:center;justify-content:center;gap:10px;}
#perf .bnl-rot__arrow{
  width:38px;height:38px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#EDEFEF;font-size:16px;line-height:1;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#perf .bnl-rot__arrow--prev{
  border-color:color-mix(in srgb, var(--color-pink) 70%, transparent);
  color:#fff;box-shadow:var(--glow-ambient-pink);
}
#perf .bnl-rot__arrow--prev:hover{box-shadow:var(--hglow-pink-hi);background:color-mix(in srgb, var(--color-pink) 14%, transparent);}
#perf .bnl-rot__arrow--next{
  border-color:color-mix(in srgb, var(--color-primary) 70%, transparent);
  color:#fff;box-shadow:var(--glow-ambient-teal);
}
#perf .bnl-rot__arrow--next:hover{box-shadow:var(--hglow-teal-hi);background:color-mix(in srgb, var(--color-primary) 14%, transparent);}
#perf .bnl-rot__dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
#perf .bnl-rot__dot{
  cursor:pointer;font:inherit;font-family:var(--font-heading-proposed);font-weight:700;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--radius-pill);
  background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted);
  transition:color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
#perf .bnl-rot__dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;}
#perf .bnl-rot__dot:hover{color:#fff;border-color:var(--color-text-muted);}
#perf .bnl-rot__dot[aria-selected="true"]{color:var(--dot,#fff);border-color:var(--dot,#fff);box-shadow:0 0 14px -2px var(--dot,#fff);}
#perf .bnl-rot__dot[aria-selected="true"]::before{opacity:1;}
#perf .bnl-rot__hint{text-align:center;color:var(--color-text-muted);font-size:11px;margin-top:7px;}
#perf .bnl-rot.is-manual .bnl-rot__hint{opacity:.4;}
@media (min-width:560px){ #perf .bnl-rot__item{--w:300px;}
}
@media (min-width:860px){
  #perf .bnl-rot__stage{height:452px;perspective:1500px;}
#perf .bnl-rot__item{--w:352px;height:424px;}
#perf .bnl-rot__item[data-pos="1"]{transform:translateX(76%) translateZ(-170px) rotateY(-44deg) rotateX(4deg) scale(.9);}
#perf .bnl-rot__item[data-pos="-1"]{transform:translateX(-76%) translateZ(-170px) rotateY(30deg) rotateX(4deg) scale(.9);}
#perf .bnl-rot__item[data-pos="2"],#perf .bnl-rot__item[data-pos="-2"]{transform:translateX(0) translateZ(-440px) rotateY(-9deg) rotateX(3deg) scale(.82);}
#perf .bnl-rot__shadow{top:428px;width:300px;margin-left:-150px;height:30px;}
#perf .bnl-rot__glow{height:360px;}
#perf .bnl-rot__dot{font-size:12px;padding:9px 15px;}
#perf .bnl-rot__arrow{width:42px;height:42px;}
#perf .bnl-rot__stage{perspective:none;}
#perf .bnl-rot__item{animation:none!important;filter:none!important;}
#perf .bnl-rot__item[data-pos="1"],#perf .bnl-rot__item[data-pos="-1"],
  #perf .bnl-rot__item[data-pos="2"],#perf .bnl-rot__item[data-pos="-2"]{transform:none;opacity:0;pointer-events:none;}
#perf .bnl-rot__item[data-pos="0"]{transform:none;}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__head,
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__verb,
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__rule,
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__hook,
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__list,
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__cta{transform:none;}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner::after{display:none;}
/* rules and dividers that carry the brand gradient can drift too */
  .bnl-page--products-soffit .bnl-dcard--design .bnl-dcard__rule{
    background-size:230% 100%;
    animation:bnl-grad-drift 9s ease-in-out infinite;
  }
}

/* ============================================================================
   rev18 · CARD POLISH
   Drop shadows do almost nothing on a near-black page, so elevation has to come
   from edges and gradient light instead. Three additions: a lit top bevel, a
   soft floor-glow inside the card face, and a slightly hotter accent edge on
   whichever card is actually front-and-centre.
============================================================================ */
/* 1 · lit top bevel — a 1px highlight that fades toward the sides, the way a
   real extruded edge catches light from above */
.bnl-page--products-soffit .bnl-dcard__inner{
  background-clip:padding-box;
  isolation:isolate;
}
.bnl-page--products-soffit .bnl-dcard__inner > .bnl-dcard__bevel{
  position:absolute;left:9%;right:9%;top:0;height:1px;z-index:4;
  pointer-events:none;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  opacity:.5;
}
/* 2 · the accent edge gets hotter on the front card only, so the coverflow has
   a clear focal point rather than four equally-lit cards */
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--live    .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-primary) 72%, var(--color-border));}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--install .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 72%, var(--color-border));}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--sell    .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-orange) 72%, var(--color-border));}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--design  .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 62%, var(--color-primary));}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__bevel{opacity:.95;}
/* 3 · floor glow inside the card face — the accent colour pooling at the base,
   which is what actually sells these as lit objects */
.bnl-page--products-soffit .bnl-dcard__inner::before{
  background:
    linear-gradient(158deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 34%, transparent 58%),
    radial-gradient(120% 46% at 50% 104%, var(--bnl-cardfloor, transparent) 0%, transparent 72%);
}
.bnl-page--products-soffit .bnl-dcard--live   {--bnl-cardfloor:color-mix(in srgb, var(--color-primary) 22%, transparent);}
.bnl-page--products-soffit .bnl-dcard--install{--bnl-cardfloor:color-mix(in srgb, var(--color-pink) 22%, transparent);}
.bnl-page--products-soffit .bnl-dcard--sell   {--bnl-cardfloor:color-mix(in srgb, var(--color-orange) 20%, transparent);}
.bnl-page--products-soffit .bnl-dcard--design {--bnl-cardfloor:color-mix(in srgb, var(--color-pink) 20%, transparent);}
/* the back cards should not compete: kill their floor glow entirely */
#perf .bnl-rot__item:not([data-pos="0"]) .bnl-dcard{--bnl-cardfloor:transparent;}
/* --- carousel and rail arrows --- */
  #perf .bnl-rot__arrow,
  .bnl-page--products-soffit .bnl-sysrail__arrow{width:44px;height:44px;}
/* --- path pills under the carousel --- */
  #perf .bnl-rot__dot{min-height:42px;}
/* ============================================================================
   rev31 · THE CAROUSEL EARNS ITS SPACE
   Cards were 64vw x 274px, which left the front card floating in a lot of
   room. Sized up to 74vw x 348px, the stage follows, and the controls move up
   to sit directly beneath the card instead of across a gap — so the thing that
   tells you which way you can go is attached to the thing that moves.
============================================================================ */
#perf .bnl-rot__item{--w:74vw;height:348px;}
#perf .bnl-rot__stage{height:372px;perspective-origin:50% 44%;}
#perf .bnl-rot__shadow{top:348px;}
#perf .bnl-rot__nav{margin-top:2px;gap:8px;}
#perf .bnl-rot__hint{margin-top:5px;}
@media (min-width:560px){ #perf .bnl-rot__item{--w:352px;}
}
@media (min-width:820px){
  #perf .bnl-rot__stage{height:534px;}
#perf .bnl-rot__item{--w:412px;height:506px;}
#perf .bnl-rot__shadow{top:510px;width:352px;margin-left:-176px;}
}
/* BRI-324: two openers lost here in the same port. Restored. */
@media (prefers-reduced-motion: no-preference){
  #perf .bnl-rot__item[data-pos="0"]{animation:bnl-card-float 9s ease-in-out infinite;}
}
#perf .bnl-rot__item[data-pos="0"]{
  transform:translateX(0) translateY(var(--bnl-fy,0px)) translateZ(0)
            rotateY(calc(-9deg + var(--bnl-ry))) rotateX(calc(3.5deg + var(--bnl-rx)))
            scale(1);
}
@media (prefers-reduced-motion: no-preference){
  #perf .bnl-rot__shadow{animation:bnl-card-shadow 9s ease-in-out infinite;}
}

/* ============================================================================
   rev32 · THE CARD NEVER ACTUALLY GREW
   `.bnl-dcard__inner` carries height:100%, but its parent `.bnl-dcard` had no
   height of its own, so the percentage resolved against an auto-height box and
   collapsed straight back to content height. The item container grew to 349px
   in rev31; the visible card stayed at 178px, and the 171px left over is the
   gap. Giving the card a height makes the chain resolve, so the card fills the
   space instead of leaving it below itself.
============================================================================ */
#perf .bnl-rot__item .bnl-dcard{height:100%;}
#perf .bnl-rot__item{height:330px;}
#perf .bnl-rot__stage{height:352px;}
#perf .bnl-rot__shadow{top:330px;}
#perf .bnl-rot__nav{margin-top:0;}
/* the extra room is spent on the content, not left as air inside the card */
#perf .bnl-rot__item .bnl-dcard__body{padding:20px 20px 20px;gap:2px;}
#perf .bnl-rot__item .bnl-dcard__hook{margin-bottom:14px;}
#perf .bnl-rot__item .bnl-dcard__cta{margin-top:auto;min-height:46px;}
@media (min-width:820px){
  #perf .bnl-rot__item{height:430px;}
#perf .bnl-rot__stage{height:456px;}
#perf .bnl-rot__shadow{top:430px;}
#perf .bnl-rot__item .bnl-dcard__body{padding:26px 26px 24px;}
}
/* BRI-324: this @media was never closed — it swallowed every rule that followed
   to the end of the block, and only on >=820px. Closed here. */
/* ============================================================================
   rev34 · THE BULLETS WERE ALREADY WRITTEN
   Three to four points per card exist in the markup and have been hidden on
   anything under 860px since the cards were too short to hold them. They are
   331px now, so they come back — the first two on a phone, all of them on
   desktop, with the CTA still pinned to the bottom edge.
============================================================================ */
#perf .bnl-rot__item .bnl-dcard__list{
  display:block;list-style:none;padding:0;margin:8px 0 12px;
  font-size:11.6px;line-height:1.32;color:#B9C0C4;
}
#perf .bnl-rot__item .bnl-dcard__list li{
  position:relative;padding:6px 0 6px 15px;
  border-top:1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}
#perf .bnl-rot__item .bnl-dcard__list li:first-child{border-top:0;padding-top:2px;}
/* the marker takes the path's own accent, so each card is keyed by its light */
#perf .bnl-rot__item .bnl-dcard__list li::before{
  content:"";position:absolute;left:2px;top:calc(0.66em + 6px);
  width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.9;
  box-shadow:0 0 8px -1px currentColor;
}
#perf .bnl-rot__item .bnl-dcard__list li:first-child::before{top:calc(0.66em + 2px);}
#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+3){display:none;}
@media (min-width:820px){
  #perf .bnl-rot__item .bnl-dcard__list{font-size:12.8px;margin:10px 0 14px;}
#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+3){display:list-item;}
#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+5){display:none;}
}
/* the bullet text stays neutral; only the marker carries the accent */
#perf .bnl-rot__item .bnl-dcard__list li{color:#B9C0C4;}
/* ============================================================================
   rev34 · THE VERB STOPS BLENDING IN
   Each verb was a flat fill of the path's own accent sitting on a card tinted
   with that same accent — teal on teal, pink on pink. Value and hue both too
   close, so the headline sank into its own background.

   Two changes. The verb now runs a gradient from near-white through the accent,
   so the first word reads at full contrast and the colour arrives underneath
   it. And the second word is set in the display face at a heavier weight with
   tighter tracking, so the two halves separate by form as well as by tone.
============================================================================ */
#perf .bnl-rot__item .bnl-dcard__verb{
  font-size:clamp(25px,6.6vw,34px);
  letter-spacing:-.055em;
  line-height:.94;
  -webkit-text-fill-color:transparent;
  background-clip:text;-webkit-background-clip:text;
  background-image:linear-gradient(96deg,
    #FFFFFF 0%, #FFFFFF 26%,
    color-mix(in srgb, currentColor 62%, #FFFFFF) 48%,
    currentColor 76%,
    color-mix(in srgb, currentColor 78%, #000000) 100%);
  background-size:190% 100%;
  filter:drop-shadow(0 1px 10px color-mix(in srgb, currentColor 34%, transparent));
}
@media (prefers-reduced-motion:no-preference){
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__verb{
    animation:bnl-grad-drift 11s ease-in-out infinite;
  }
}
/* the two words get different weight so the lockup has an internal rhythm */
#perf .bnl-rot__item .bnl-dcard__verb span:first-child{font-weight:500;letter-spacing:-.03em;}
#perf .bnl-rot__item .bnl-dcard__verb span:last-child{font-weight:800;}
/* the rule under it becomes a lit bar rather than a fade */
#perf .bnl-rot__item .bnl-dcard__rule{
  height:2.5px;width:64px;
  background:linear-gradient(90deg, currentColor 0%, currentColor 42%, transparent 100%);
  box-shadow:0 0 12px -2px currentColor;
}
/* and the hook line lifts off the accent wash */
#perf .bnl-rot__item .bnl-dcard__hook{
  color:#FFFFFF;font-size:13.2px;line-height:1.26;margin-bottom:4px;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
/* card ground cools slightly so an accent headline has something to sit on */
#perf .bnl-rot__item .bnl-dcard__inner{background:#101214;}
.bnl-dcard--app .bnl-dcard__login{
    display:block;margin-top:10px;text-align:center;
    font-family:var(--font-heading-proposed);font-size:11.5px;font-weight:600;
    color:var(--color-primary);text-decoration:none;
  }
.bnl-dcard--app .bnl-dcard__login:hover{text-decoration:underline;}
.bnl-dcard--invisible .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#0d1a1d 46%,#101010 100%);
}
.bnl-dcard--build .bnl-dcard__inner{
  background:linear-gradient(158deg,#2e0620 0%,#1d0d16 46%,#101010 100%);
}
.bnl-dcard--sealed .bnl-dcard__inner{
  background:linear-gradient(158deg,#331904 0%,#1f1409 46%,#101010 100%);
}
.bnl-dcard--app .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#1a0d28 42%,#2b0722 72%,#101010 100%);
}
.bnl-dcard--invisible .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-primary) 48%, var(--color-border));}
.bnl-dcard--invisible .bnl-dcard__verb,
.bnl-page--products-soffit .bnl-dcard--invisible .bnl-dcard__who,
.bnl-page--products-soffit .bnl-dcard--invisible .bnl-dcard__ic,
.bnl-page--products-soffit .bnl-dcard--invisible .bnl-dcard__rule{color:var(--color-primary);}
.bnl-dcard--build .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 48%, var(--color-border));}
.bnl-dcard--build .bnl-dcard__verb,
.bnl-page--products-soffit .bnl-dcard--build .bnl-dcard__who,
.bnl-page--products-soffit .bnl-dcard--build .bnl-dcard__ic,
.bnl-page--products-soffit .bnl-dcard--build .bnl-dcard__rule{color:var(--color-pink);}
.bnl-dcard--sealed .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-orange) 48%, var(--color-border));}
.bnl-dcard--sealed .bnl-dcard__verb,
.bnl-page--products-soffit .bnl-dcard--sealed .bnl-dcard__who,
.bnl-page--products-soffit .bnl-dcard--sealed .bnl-dcard__ic,
.bnl-page--products-soffit .bnl-dcard--sealed .bnl-dcard__rule{color:var(--color-orange);}
.bnl-dcard--app .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 52%, var(--color-primary));}
.bnl-dcard--app .bnl-dcard__verb{
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;
  color:var(--color-pink);-webkit-text-fill-color:transparent;
}
.bnl-dcard--app .bnl-dcard__who,
.bnl-page--products-soffit .bnl-dcard--app .bnl-dcard__ic{color:var(--color-primary);}
.bnl-dcard--app .bnl-dcard__rule{background:var(--gradient-brand);}
.bnl-dcard--invisible  .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-teal);}
.bnl-dcard--build .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-pink);}
.bnl-dcard--sealed    .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), 0 0 48px -12px color-mix(in srgb, var(--color-orange) 55%, transparent);}
.bnl-dcard--app  .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-teal), var(--glow-ambient-pink);}
.bnl-dcard--app .bnl-dcard__rule{
    background-size:230% 100%;
    animation:bnl-grad-drift 9s ease-in-out infinite;
  }
.bnl-dcard--invisible    .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-primary) 72%, var(--color-border));}
.bnl-dcard--build .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 72%, var(--color-border));}
.bnl-dcard--sealed    .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-orange) 72%, var(--color-border));}
.bnl-dcard--app  .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 62%, var(--color-primary));}
.bnl-dcard--invisible   {--bnl-cardfloor:color-mix(in srgb, var(--color-primary) 22%, transparent);}
.bnl-dcard--build{--bnl-cardfloor:color-mix(in srgb, var(--color-pink) 22%, transparent);}
.bnl-dcard--sealed   {--bnl-cardfloor:color-mix(in srgb, var(--color-orange) 20%, transparent);}
.bnl-dcard--app {--bnl-cardfloor:color-mix(in srgb, var(--color-pink) 20%, transparent);}
#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+3){display:list-item;}
#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+4){display:none;}
@media (min-width:820px){#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+4){display:list-item;}}
#perf .bnl-rot__item .bnl-dcard__body{padding-bottom:18px;}

/* ---------- bnl-ds-align-v20 ---------- */
/* =====================================================================
   DESIGN-SYSTEM ALIGNMENT — soffit -> home (rev20/rev34 system)
   Loaded last on purpose: the homepage treatment wins wherever this and
   the page's own CSS disagree. Mateo: this block belongs in the shared
   stylesheet (bnl-ds-v20.css / tokens.css), not on the page.
   ===================================================================== */

/* 1 · Optical sizing --------------------------------------------------
   Bricolage Grotesque is a variable face with an opsz axis (12..96).
   Without font-optical-sizing the axis never engages and the entire
   reason for choosing this face over Sora is lost. The homepage sets
   this on its page root; this page did not. */
.bnl-page--products-soffit {
  font-optical-sizing: auto;
  --tap-min: 44px;              /* BRI-281 touch floor */
}

/* 2 · Tracking ---------------------------------------------------------
   Bricolage sets wider than Sora at equal size, so the display tiers are
   retuned to the values signed off on the homepage (BRI-272).
   Small text (<=19px) is deliberately left alone — tightening it there
   costs legibility and the opsz axis already compensates. */
.bnl-page--products-soffit .bnl-hero__title      { letter-spacing: -0.05em; }   /* hero            */
.bnl-page--products-soffit .bnl-heading          { letter-spacing: -0.048em; }  /* section heads   */
.bnl-page--products-soffit .bnl-heading--section { letter-spacing: -0.048em; }
.bnl-page--products-soffit .bnl-closer__title    { letter-spacing: -0.052em; }  /* XL statements   */
.bnl-page--products-soffit .bnl-dcard__verb      { letter-spacing: -0.05em; }   /* card verbs      */
#compare-cta .bnl-vs__brand { letter-spacing: -0.036em; }/* brand lockup    */

/* 3 · Tap targets (BRI-281) -------------------------------------------
   Mobile is ~70% of traffic. Every fix below grows the *touch area only*
   via an overlay pseudo-element, so no ink moves and no layout shifts. */
.bnl-page--products-soffit .bnl-crumbs a,
.bnl-page--products-soffit .bnl-stats__note { position: relative; }
/* .bnl-eco__hot is already position:absolute — it is its own containing block,
   so its ::after overlay works without any position change. Setting
   position:relative here collapsed the hotspots to 14px. Do not re-add it. */

.bnl-page--products-soffit .bnl-crumbs a::after {            /* was 15px */
  content:""; position:absolute; inset:-15px -6px; }
.bnl-page--products-soffit .bnl-stats__note::after {         /* was 20.8px */
  content:""; position:absolute; inset:-12px 0; }
.bnl-page--products-soffit .bnl-eco__hot::after {            /* was 33-35px */
  content:""; position:absolute; inset:-6px 0; }

#perf .bnl-rot__dot {                   /* was 42px — #perf ID needed to win */
  min-height: var(--tap-min, 44px); }
#perf .bnl-rot__arrow {
  min-height: var(--tap-min, 44px); min-width: var(--tap-min, 44px); }

/* --- ecosystem legend links: 40.8px. ID selector so nothing upstream wins. --- */
#ecosystem .bnl-eco-links a {
  display: inline-flex; align-items: center; min-height: var(--tap-min, 44px); }

/* 4 · Focus visibility -------------------------------------------------
   WCAG 2.4.7. The spec tabs are CSS-only radios sized 1x1 at opacity 0,
   so keyboard focus was completely invisible. */
#specs .bnl-sp__layout:has(#sp-v-overview:focus-visible) .bnl-sp__nav-item[for="sp-v-overview"],
#specs .bnl-sp__layout:has(#sp-v-architecture:focus-visible) .bnl-sp__nav-item[for="sp-v-architecture"],
#specs .bnl-sp__layout:has(#sp-v-sizes:focus-visible) .bnl-sp__nav-item[for="sp-v-sizes"],
#specs .bnl-sp__layout:has(#sp-v-power:focus-visible) .bnl-sp__nav-item[for="sp-v-power"],
#specs .bnl-sp__layout:has(#sp-v-connectors:focus-visible) .bnl-sp__nav-item[for="sp-v-connectors"],
#specs .bnl-sp__layout:has(#sp-v-wiring:focus-visible) .bnl-sp__nav-item[for="sp-v-wiring"],
#specs .bnl-sp__layout:has(#sp-v-mounting:focus-visible) .bnl-sp__nav-item[for="sp-v-mounting"],
#specs .bnl-sp__layout:has(#sp-v-led:focus-visible) .bnl-sp__nav-item[for="sp-v-led"],
#specs .bnl-sp__layout:has(#sp-v-environmental:focus-visible) .bnl-sp__nav-item[for="sp-v-environmental"],
#specs .bnl-sp__layout:has(#sp-v-control:focus-visible) .bnl-sp__nav-item[for="sp-v-control"],
#specs .bnl-sp__layout:has(#sp-v-compatibility:focus-visible) .bnl-sp__nav-item[for="sp-v-compatibility"],
#specs .bnl-sp__layout:has(#sp-v-warranty:focus-visible) .bnl-sp__nav-item[for="sp-v-warranty"],
#specs .bnl-sp__layout:has(#sp-v-downloads:focus-visible) .bnl-sp__nav-item[for="sp-v-downloads"] {
  outline: var(--focus-ring, 2px solid #E3056B);
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--radius-sm, 6px);
}

/* 5 · Motion guard repair (pre-existing, inherited with the rev34 carousel port)
   ------------------------------------------------------------------------
   The ported #perf carousel CSS has 3 unmatched closing braces (lines ~4842,
   4988, 4990 of the bnl-heavy-glow-layer block). Two
   `@media (prefers-reduced-motion:no-preference)` openers were lost in the port,
   which had two measured consequences:
     a) bnl-card-float ran at 9s regardless of the user's motion preference;
     b) bnl-card-shadow never ran at all — the rule was orphaned.
   Repairing the damaged block in place would mean guessing at the original
   authorship, so the guard is restated here instead, where it is provably
   balanced. Mateo: fix at source in the shared carousel component — this same
   damage was ported to ALL SIX product pages, not just soffit. */
@media (prefers-reduced-motion: reduce){
  #perf .bnl-rot__item[data-pos="0"],
  #perf .bnl-rot__shadow { animation: none !important; }
}
@media (prefers-reduced-motion: no-preference){
  #perf .bnl-rot__shadow { animation: bnl-card-shadow 9s ease-in-out infinite; }
}

/* 6 · Missing @keyframes (pre-existing port defect)
   ------------------------------------------------------------------------
   Three animations are referenced by the ported carousel/gradient CSS but
   their @keyframes were never included, so they have been silently inert:
     bnl-grad-drift   (3 references)  bnl-card-float   (2)  bnl-card-shadow (1)
   Verified with getAnimations() -> [] before this block was added.
   Reconstructed from how each is used. bnl-card-float animates the custom
   property the transform already reads (translateY(var(--bnl-fy,0px))), which
   requires @property registration — the file already uses that pattern for
   --bnl-statn. Mateo: replace with the canonical keyframes from the shared
   stylesheet if they differ; the same three are missing on every product page. */
@property --bnl-fy { syntax: '<length>'; inherits: false; initial-value: 0px; }

@keyframes bnl-grad-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes bnl-card-float {
  0%, 100% { --bnl-fy: 0px; }
  50%      { --bnl-fy: -10px; }
}
@keyframes bnl-card-shadow {
  0%, 100% { opacity: .55; transform: scaleX(1); }
  50%      { opacity: .34; transform: scaleX(.90); }
}

/* 7 · Animated gradient headings — homepage parity
   The homepage animates its gradient headings (rev20). This page carried the
   .bnl-gradient-text markup on every heading but rendered a static fill,
   because no background-size was set for the position drift to move against. */
@media (prefers-reduced-motion: no-preference) {
  .bnl-page--products-soffit .bnl-gradient-text {
    background-size: 230% 100%;
    animation: bnl-grad-drift 9s ease-in-out infinite;
  }
}

/* ---------- bnl-scene-v1 ---------- */
/* =====================================================================
   bnl-scene — "One House. Every Holiday." holiday scene switcher
   Replaces the four-up .bnl-season grid in #holidays.
   Why a switcher and not a grid: all four frames are the same house from
   the same camera, so the only thing that changes is the light. Crossfading
   them in place demonstrates the product ("one tap, any occasion") in a way
   four separate thumbnails cannot — the transition IS the demo.
   Base state is CSS-only (radios + labels), the same pattern the spec tabs
   in #specs already use, so it works with JS disabled. JS only adds the
   auto-cycle, the progress hairline and swipe.
   ===================================================================== */
.bnl-page--products-soffit .bnl-scene { position:relative; margin-top:var(--space-lg,32px); }
.bnl-page--products-soffit .bnl-scene__r { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.bnl-page--products-soffit .bnl-scene__glow {
  position:absolute; inset:-8% -5% 18%; z-index:0; filter:blur(64px);
  opacity:.5; transition:background .9s ease, opacity .9s ease;
  pointer-events:none; }

.bnl-page--products-soffit .bnl-scene__stage {
  position:relative; z-index:1; aspect-ratio:714/469; overflow:hidden;
  border-radius:var(--radius-md,12px); border:1px solid rgba(255,255,255,.10);
  background:#05070A; box-shadow:0 34px 90px -34px rgba(0,0,0,.92);
  touch-action:pan-y; }
.bnl-page--products-soffit .bnl-scene__layer {
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity .85s cubic-bezier(.4,0,.2,1); }
.bnl-page--products-soffit .bnl-scene__layer img { width:100%; height:100%; object-fit:cover; display:block; }
.bnl-page--products-soffit .bnl-scene__vig {
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(125% 95% at 50% 38%, transparent 52%, rgba(0,0,0,.42) 100%); }
.bnl-page--products-soffit .bnl-scene__bar { transition:opacity .4s ease;
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:rgba(255,255,255,.12); }
.bnl-page--products-soffit .bnl-scene__bar i { display:block; height:100%; width:0; }

.bnl-page--products-soffit .bnl-scene__caps { position:relative; min-height:76px; margin-top:var(--space-md,16px); }
.bnl-page--products-soffit .bnl-scene__cap {
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity .5s ease; }
.bnl-page--products-soffit .bnl-scene__cap b {
  display:block; font-family:var(--font-heading-proposed); font-weight:800;
  font-size:clamp(19px,2.6vw,24px); letter-spacing:-.03em; margin-bottom:4px; }
.bnl-page--products-soffit .bnl-scene__cap span {
  display:block; color:var(--color-text-muted,#B8B8B8);
  font-size:15px; line-height:1.55; max-width:62ch; }

.bnl-page--products-soffit .bnl-scene__picker {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--space-md,16px); }
.bnl-page--products-soffit .bnl-scene__chip {
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  min-height:var(--tap-min,44px); padding:0 16px;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-pill,999px);
  background:rgba(255,255,255,.03); color:var(--color-text-muted,#B8B8B8);
  font-family:var(--font-body); font-size:14.5px; font-weight:600; line-height:1.2;
  transition:color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.bnl-page--products-soffit .bnl-scene__chip:hover { color:#fff; border-color:rgba(255,255,255,.34); }
.bnl-page--products-soffit .bnl-scene__sw {
  width:13px; height:13px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg, var(--a), var(--b));
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset; }
.bnl-page--products-soffit .bnl-scene__foot {
  margin-top:var(--space-md,16px); font-size:14px; line-height:1.6;
  color:var(--color-text-muted,#B8B8B8); max-width:70ch; }

/* keyboard focus — the radio is offscreen, so the chip has to show it */
.bnl-page--products-soffit .bnl-scene__r:focus-visible ~ .bnl-scene__picker .bnl-scene__chip { outline:none; }
#sc-july:focus-visible ~ .bnl-scene__picker .bnl-scene__chip[data-scene="july"],
#sc-halloween:focus-visible ~ .bnl-scene__picker .bnl-scene__chip[data-scene="halloween"],
#sc-easter:focus-visible ~ .bnl-scene__picker .bnl-scene__chip[data-scene="easter"],
#sc-christmas:focus-visible ~ .bnl-scene__picker .bnl-scene__chip[data-scene="christmas"] {
  outline:var(--focus-ring,2px solid #E3056B); outline-offset:3px; }

#sc-july:checked ~ .bnl-scene__stage .bnl-scene__layer[data-scene="july"],
#sc-july:checked ~ .bnl-scene__caps .bnl-scene__cap[data-scene="july"] { opacity:1; }
#sc-july:checked ~ .bnl-scene__picker .bnl-scene__chip[data-scene="july"] {
  color:#fff; border-color:color-mix(in srgb, var(--a) 70%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--a) 26%, transparent),
                                     color-mix(in srgb, var(--b) 26%, transparent));
  box-shadow:0 0 22px -4px color-mix(in srgb, var(--a) 65%, transparent); }
#sc-july:checked ~ .bnl-scene__glow {
  background:radial-gradient(58% 62% at 26% 42%, #344FFA 0%, transparent 70%),
             radial-gradient(58% 62% at 76% 52%, #C82833 0%, transparent 70%); }
#sc-july:checked ~ .bnl-scene__stage .bnl-scene__bar i {
  background:linear-gradient(90deg, #344FFA, #C82833); }
#sc-halloween:checked ~ .bnl-scene__stage .bnl-scene__layer[data-scene="halloween"],
#sc-halloween:checked ~ .bnl-scene__caps .bnl-scene__cap[data-scene="halloween"] { opacity:1; }
#sc-halloween:checked ~ .bnl-scene__picker .bnl-scene__chip[data-scene="halloween"] {
  color:#fff; border-color:color-mix(in srgb, var(--a) 70%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--a) 26%, transparent),
                                     color-mix(in srgb, var(--b) 26%, transparent));
  box-shadow:0 0 22px -4px color-mix(in srgb, var(--a) 65%, transparent); }
#sc-halloween:checked ~ .bnl-scene__glow {
  background:radial-gradient(58% 62% at 26% 42%, #750BC2 0%, transparent 70%),
             radial-gradient(58% 62% at 76% 52%, #EE491D 0%, transparent 70%); }
#sc-halloween:checked ~ .bnl-scene__stage .bnl-scene__bar i {
  background:linear-gradient(90deg, #750BC2, #EE491D); }
#sc-easter:checked ~ .bnl-scene__stage .bnl-scene__layer[data-scene="easter"],
#sc-easter:checked ~ .bnl-scene__caps .bnl-scene__cap[data-scene="easter"] { opacity:1; }
#sc-easter:checked ~ .bnl-scene__picker .bnl-scene__chip[data-scene="easter"] {
  color:#fff; border-color:color-mix(in srgb, var(--a) 70%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--a) 26%, transparent),
                                     color-mix(in srgb, var(--b) 26%, transparent));
  box-shadow:0 0 22px -4px color-mix(in srgb, var(--a) 65%, transparent); }
#sc-easter:checked ~ .bnl-scene__glow {
  background:radial-gradient(58% 62% at 26% 42%, #C04FE4 0%, transparent 70%),
             radial-gradient(58% 62% at 76% 52%, #33A6E3 0%, transparent 70%); }
#sc-easter:checked ~ .bnl-scene__stage .bnl-scene__bar i {
  background:linear-gradient(90deg, #C04FE4, #33A6E3); }
#sc-christmas:checked ~ .bnl-scene__stage .bnl-scene__layer[data-scene="christmas"],
#sc-christmas:checked ~ .bnl-scene__caps .bnl-scene__cap[data-scene="christmas"] { opacity:1; }
#sc-christmas:checked ~ .bnl-scene__picker .bnl-scene__chip[data-scene="christmas"] {
  color:#fff; border-color:color-mix(in srgb, var(--a) 70%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--a) 26%, transparent),
                                     color-mix(in srgb, var(--b) 26%, transparent));
  box-shadow:0 0 22px -4px color-mix(in srgb, var(--a) 65%, transparent); }
#sc-christmas:checked ~ .bnl-scene__glow {
  background:radial-gradient(58% 62% at 26% 42%, #DD2400 0%, transparent 70%),
             radial-gradient(58% 62% at 76% 52%, #70B53B 0%, transparent 70%); }
#sc-christmas:checked ~ .bnl-scene__stage .bnl-scene__bar i {
  background:linear-gradient(90deg, #DD2400, #70B53B); }

@media (min-width:760px){
  .bnl-page--products-soffit .bnl-scene__caps { min-height:64px; }
}
@media (prefers-reduced-motion: reduce){
  .bnl-page--products-soffit .bnl-scene__layer, .bnl-page--products-soffit .bnl-scene__cap, .bnl-page--products-soffit .bnl-scene__glow { transition:none; }
  .bnl-page--products-soffit .bnl-scene__bar { display:none; }
}

/* 9 · Hero ambient video ------------------------------------------------
   Seamless ping-pong loop (7.3s) of the soffit elevation. Decorative, so it
   is aria-hidden and out of the tab order — the hero's meaning lives in the
   h1 and lede, not the footage. The poster is inlined so the hero paints
   instantly and still reads correctly if the mp4 is missing or blocked, and
   it is what reduced-motion users get instead of playback. */
.bnl-page--products-soffit .bnl-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; display: block;
  background: #05070A; }
.bnl-page--products-soffit .bnl-hero__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.06) 34%, rgba(10,10,10,.72) 100%),
    radial-gradient(120% 78% at 50% 34%, transparent 52%, rgba(0,0,0,.42) 100%); }
@media (prefers-reduced-motion: reduce){
  .bnl-page--products-soffit .bnl-hero__video { display: none; }
  .bnl-page--products-soffit .bnl-hero__media-frame {
    background-image: var(--hero-poster); background-size: cover;
    background-position: center 42%; }
}

/* 10 · Compare-all CTA — the wheel surfaces one brand at a time and the section
   had no route through to the full table. */
.bnl-page--products-soffit .bnl-vs__all { display:flex; justify-content:center; margin-top:22px; }
.bnl-page--products-soffit .bnl-vs__allbtn { min-height:var(--tap-min,44px); }

/* 11 · Carousel cards were rendering half-empty ------------------------------
   .bnl-dcard__list was display:none and a second rule hid every bullet past the
   second, so each card showed a kicker, a verb and one line over a large void.
   Home rev34 restored these; that fix never reached this page. All three
   bullets now show, and the card body is branded rather than flat grey. */
#perf .bnl-dcard__list { display:block; margin:12px 0 0; padding:0; list-style:none; }
#perf .bnl-dcard__list li:nth-child(n+3) { display:list-item; }
#perf .bnl-dcard__list li {
  position:relative; padding:7px 0 7px 18px; font-size:13.5px; line-height:1.45;
  color:var(--color-text-muted,#B8B8B8);
  border-top:1px solid color-mix(in srgb, var(--color-border) 45%, transparent); }
#perf .bnl-dcard__list li::before {
  content:""; position:absolute; left:2px; top:calc(0.72em + 3px);
  width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg, var(--color-primary,#00A9B5), var(--color-pink,#E3056B));
  box-shadow:0 0 8px -1px color-mix(in srgb, var(--color-primary) 70%, transparent); }

/* brand the card itself — kicker, rule and edge pick up the house gradient */
#perf .bnl-dcard__who {
  color:var(--color-primary,#00A9B5); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; font-size:11px; }
#perf .bnl-dcard__ic { color:var(--color-primary,#00A9B5); }
#perf .bnl-dcard__rule {
  height:2px; border-radius:2px; background-size:230% 100%;
  background-image:linear-gradient(90deg, var(--color-primary,#00A9B5), var(--color-pink,#E3056B)); }
#perf .bnl-dcard__hook { color:var(--color-text,#F5F5F5); font-weight:600; }
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner {
  border-color:color-mix(in srgb, var(--color-primary) 34%, transparent); }
@media (prefers-reduced-motion: no-preference){
  #perf .bnl-dcard__rule { animation:bnl-grad-drift 9s ease-in-out infinite; }
}

/* 12 · Seven-system block — replaces the SLOT 8 diagram placeholder, the seven
   hotspots floating over it, and the duplicate pill list underneath. That
   arrangement needed an image that does not exist, so hotspots sat over a
   dashed box and the pills repeated the same seven links. This is one
   self-contained grid with no media dependency — drop it into any product page
   and move the --cur modifier to whichever system that page is. */
.bnl-page--products-soffit .bnl-sys { display:grid; gap:10px; margin-top:var(--space-lg,32px);
  grid-template-columns:repeat(auto-fit, minmax(158px, 1fr)); }
.bnl-page--products-soffit .bnl-sys__card { display:flex; align-items:center; gap:11px; text-decoration:none;
  min-height:64px; padding:12px 14px; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md,12px); color:var(--color-text,#F5F5F5);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease; }
.bnl-page--products-soffit a.bnl-sys__card:hover { border-color:color-mix(in srgb, var(--color-primary) 58%, transparent);
  box-shadow:var(--glow-ambient-teal); transform:translateY(-2px); }
.bnl-page--products-soffit .bnl-sys__card:focus-visible { outline:var(--focus-ring,2px solid #E3056B); outline-offset:3px; }
.bnl-page--products-soffit .bnl-sys__ic { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  border-radius:9px; color:var(--color-primary,#00A9B5);
  background:color-mix(in srgb, var(--color-primary) 13%, transparent); }
.bnl-page--products-soffit .bnl-sys__ic svg { width:18px; height:18px; }
.bnl-page--products-soffit .bnl-sys__nm { font-family:var(--font-body); font-size:14.5px; font-weight:600;
  line-height:1.25; flex:1 1 auto; }
.bnl-page--products-soffit .bnl-sys__go { color:var(--color-text-muted,#B8B8B8); font-size:17px; }
.bnl-page--products-soffit .bnl-sys__tag { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-text-muted,#B8B8B8); white-space:nowrap; }
.bnl-page--products-soffit .bnl-sys__card--cur { border-color:color-mix(in srgb, var(--color-primary) 52%, transparent);
  background:linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 14%, transparent), rgba(255,255,255,.02)); }
.bnl-page--products-soffit .bnl-sys__card--cur .bnl-sys__tag { color:var(--color-primary,#00A9B5); }
.bnl-page--products-soffit .bnl-sys__card--soon { opacity:.62; cursor:default; }
@media (prefers-reduced-motion: reduce){ .bnl-page--products-soffit a.bnl-sys__card:hover { transform:none; } }

/* 14 · Fixture explorer — the page argued "flush-mounted", "sealed" and "zero
   splices" without ever showing the fixture. All three are visible in one
   photograph, so the claims are now annotated on the object itself. Radios +
   labels, so it works with JS off, same as #specs and the holiday switcher. */
.bnl-page--products-soffit .bnl-why__shot { width:100%; height:auto; display:block; border-radius:var(--radius-md,12px);
  border:1px solid rgba(255,255,255,.10); }
.bnl-page--products-soffit .bnl-fx { margin-top:var(--space-xl,64px); }
.bnl-page--products-soffit .bnl-fx__r { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.bnl-page--products-soffit .bnl-fx__lede { color:var(--color-text-muted,#B8B8B8); font-size:15px; margin:0 0 16px; }
.bnl-page--products-soffit .bnl-fx__grid { display:grid; gap:20px; grid-template-columns:1fr; align-items:start; }
.bnl-page--products-soffit .bnl-fx__stage { position:relative; border-radius:var(--radius-md,12px); overflow:hidden;
  border:1px solid rgba(255,255,255,.10); background:#0B0D10; }
.bnl-page--products-soffit .bnl-fx__stage img { width:100%; height:auto; display:block; }
.bnl-page--products-soffit .bnl-fx__pin { position:absolute; transform:translate(-50%,-50%); cursor:pointer;
  width:var(--tap-min,44px); height:var(--tap-min,44px); display:grid; place-items:center; }
.bnl-page--products-soffit .bnl-fx__dot { width:15px; height:15px; border-radius:50%;
  background:var(--color-primary,#00A9B5); border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--color-primary) 26%, transparent), 0 2px 8px rgba(0,0,0,.6);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease; }
.bnl-page--products-soffit .bnl-fx__pin:hover .bnl-fx__dot { transform:scale(1.22); }
.bnl-page--products-soffit .bnl-fx__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.bnl-page--products-soffit .bnl-fx__tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.bnl-page--products-soffit .bnl-fx__tab { cursor:pointer; display:inline-flex; align-items:center; min-height:var(--tap-min,44px);
  padding:0 14px; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-pill,999px);
  font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--color-text-muted,#B8B8B8);
  transition:color .2s ease, border-color .2s ease, background .2s ease; }
.bnl-page--products-soffit .bnl-fx__tab:hover { color:#fff; border-color:rgba(255,255,255,.34); }
.bnl-page--products-soffit .bnl-fx__pane { display:none; }
.bnl-page--products-soffit .bnl-fx__h { font-family:var(--font-heading-proposed); font-weight:800;
  font-size:clamp(19px,2.5vw,23px); letter-spacing:-.03em; margin:0 0 8px;
  color:var(--color-text,#F5F5F5); }
.bnl-page--products-soffit .bnl-fx__pane p { margin:0; color:var(--color-text-muted,#B8B8B8); font-size:15px;
  line-height:1.6; max-width:56ch; }
@media (min-width:820px){ .bnl-page--products-soffit .bnl-fx__grid { grid-template-columns:1.15fr 1fr; gap:28px; } }
@media (prefers-reduced-motion: reduce){ .bnl-page--products-soffit .bnl-fx__dot { transition:none; } }

#fx-lens:checked ~ .bnl-fx__grid .bnl-fx__pane[data-k="lens"] { display:block; }
#fx-lens:checked ~ .bnl-fx__grid .bnl-fx__pin[data-k="lens"] .bnl-fx__dot {
  background:var(--color-pink,#E3056B); transform:scale(1.3);
  box-shadow:0 0 0 8px color-mix(in srgb, var(--color-pink) 30%, transparent), 0 2px 10px rgba(0,0,0,.6); }
#fx-lens:checked ~ .bnl-fx__grid .bnl-fx__tab[data-k="lens"] {
  color:#fff; border-color:color-mix(in srgb, var(--color-pink) 62%, transparent);
  background:color-mix(in srgb, var(--color-pink) 16%, transparent); }
#fx-lens:focus-visible ~ .bnl-fx__grid .bnl-fx__pin[data-k="lens"],
#fx-lens:focus-visible ~ .bnl-fx__grid .bnl-fx__tab[data-k="lens"] {
  outline:var(--focus-ring,2px solid #E3056B); outline-offset:3px; }
#fx-ring:checked ~ .bnl-fx__grid .bnl-fx__pane[data-k="ring"] { display:block; }
#fx-ring:checked ~ .bnl-fx__grid .bnl-fx__pin[data-k="ring"] .bnl-fx__dot {
  background:var(--color-pink,#E3056B); transform:scale(1.3);
  box-shadow:0 0 0 8px color-mix(in srgb, var(--color-pink) 30%, transparent), 0 2px 10px rgba(0,0,0,.6); }
#fx-ring:checked ~ .bnl-fx__grid .bnl-fx__tab[data-k="ring"] {
  color:#fff; border-color:color-mix(in srgb, var(--color-pink) 62%, transparent);
  background:color-mix(in srgb, var(--color-pink) 16%, transparent); }
#fx-ring:focus-visible ~ .bnl-fx__grid .bnl-fx__pin[data-k="ring"],
#fx-ring:focus-visible ~ .bnl-fx__grid .bnl-fx__tab[data-k="ring"] {
  outline:var(--focus-ring,2px solid #E3056B); outline-offset:3px; }
#fx-plug:checked ~ .bnl-fx__grid .bnl-fx__pane[data-k="plug"] { display:block; }
#fx-plug:checked ~ .bnl-fx__grid .bnl-fx__pin[data-k="plug"] .bnl-fx__dot {
  background:var(--color-pink,#E3056B); transform:scale(1.3);
  box-shadow:0 0 0 8px color-mix(in srgb, var(--color-pink) 30%, transparent), 0 2px 10px rgba(0,0,0,.6); }
#fx-plug:checked ~ .bnl-fx__grid .bnl-fx__tab[data-k="plug"] {
  color:#fff; border-color:color-mix(in srgb, var(--color-pink) 62%, transparent);
  background:color-mix(in srgb, var(--color-pink) 16%, transparent); }
#fx-plug:focus-visible ~ .bnl-fx__grid .bnl-fx__pin[data-k="plug"],
#fx-plug:focus-visible ~ .bnl-fx__grid .bnl-fx__tab[data-k="plug"] {
  outline:var(--focus-ring,2px solid #E3056B); outline-offset:3px; }
/* 15 · Spec directory — the Overview pane opened with a long paragraph and
   full-height rows, so the landing state was a wall of text. The rows already
   open the complete spec; they only needed to read as a compact index. */
#specs .bnl-sp__body { font-size:15px; line-height:1.55; margin-bottom:14px; }
#specs .bnl-sp__rows { display:grid; gap:8px; }
#specs .bnl-sp__row {
  grid-template-columns:38px 1fr 22px; gap:12px; padding:11px 12px;
  border:1px solid rgba(255,255,255,.09); border-top:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-md,12px); min-height:var(--tap-min,44px); align-items:center; }
#specs .bnl-sp__row:hover { background:rgba(53,207,201,.06);
  border-color:color-mix(in srgb, var(--color-primary) 42%, transparent); }
#specs .bnl-sp__row-ic svg { width:22px !important; height:22px !important; }
#specs .bnl-sp__row-ic { color:var(--color-primary,#00A9B5); }
/* two-line clamp keeps every box the same small height */
#specs .bnl-sp__row .bnl-sp__row-vis,
#specs .bnl-sp__row p, #specs .bnl-sp__row-d {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:13px; line-height:1.42; margin:2px 0 0; }
#specs .bnl-sp__row strong, #specs .bnl-sp__row b, #specs .bnl-sp__row-t {
  font-size:14.5px; font-weight:700; letter-spacing:-.01em; }

/* 15b · real selectors — the height was coming from .bnl-sp__row-vis, a 340x102
   decorative SVG in a 300px column. Hidden in the index; the full illustration
   still shows once you open the spec itself. */
#specs .bnl-sp__row { grid-template-columns:34px 1fr !important; }
#specs .bnl-sp__row-vis { display:none !important; }
#specs .bnl-sp__row-title { font-size:14.5px; font-weight:700; letter-spacing:-.01em;
  display:block; margin-bottom:2px; }
#specs .bnl-sp__row-desc { display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; font-size:12.8px; line-height:1.4;
  color:var(--color-text-muted,#B8B8B8); }
#specs .bnl-sp__row-mid { min-width:0; }

/* 18 · Holiday picker — ported from products-deck-dock rev11 (.bnl-hp): one
   large stage plus a thumbnail row, replacing my chip-based switcher so the
   pattern matches the rest of the catalogue. Real ARIA tablist with roving
   tabindex and arrow-key nav, as in the source. Autoplay added on top. */
.bnl-page--products-soffit .bnl-hp { max-width:940px; margin:var(--space-lg,32px) auto 0; }
.bnl-page--products-soffit .bnl-hp__stage { position:relative; aspect-ratio:714/467; border-radius:20px;
  overflow:hidden; background:#05070a; border:1px solid rgba(255,255,255,.09); }
.bnl-page--products-soffit .bnl-hp__panel { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .55s ease; }
.bnl-page--products-soffit .bnl-hp__panel.is-active { opacity:1; }
.bnl-page--products-soffit .bnl-hp__panel img { width:100%; height:100%; object-fit:cover; display:block; }
.bnl-page--products-soffit .bnl-hp__scrim { position:absolute; inset:auto 0 0 0; height:42%; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.80), transparent); }
.bnl-page--products-soffit .bnl-hp__cap { position:absolute; left:22px; bottom:18px; display:grid; gap:1px; }
.bnl-page--products-soffit .bnl-hp__cap b { font-family:var(--font-heading-proposed); font-size:1.35rem; font-weight:800;
  color:#fff; letter-spacing:-.03em; }
.bnl-page--products-soffit .bnl-hp__cap i { font-style:normal; font-size:.8rem; color:rgba(255,255,255,.62); }
.bnl-page--products-soffit .bnl-hp__bar { position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.12); transition:opacity .4s ease; }
.bnl-page--products-soffit .bnl-hp__bar i { display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--color-primary,#00A9B5), var(--color-pink,#E3056B)); }
.bnl-page--products-soffit .bnl-hp__row { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px; }
.bnl-page--products-soffit .bnl-hp__thumb { position:relative; padding:0; background:none; cursor:pointer;
  border-radius:12px; overflow:hidden; display:grid; text-align:left;
  border:1px solid rgba(255,255,255,.09);
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.bnl-page--products-soffit .bnl-hp__thumb img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  opacity:.5; transition:opacity .3s ease; }
.bnl-page--products-soffit .bnl-hp__thumb:hover img { opacity:.82; }
.bnl-page--products-soffit .bnl-hp__thumb:hover { transform:translateY(-2px); }
.bnl-page--products-soffit .bnl-hp__thumb[aria-selected="true"] {
  border-color:color-mix(in srgb, var(--color-primary) 62%, transparent);
  box-shadow:var(--glow-ambient-teal); }
.bnl-page--products-soffit .bnl-hp__thumb[aria-selected="true"] img { opacity:1; }
.bnl-page--products-soffit .bnl-hp__tname { font-family:var(--font-body); font-size:.78rem; font-weight:700; padding:8px 10px 0; }
.bnl-page--products-soffit .bnl-hp__tdate { font-size:.69rem; opacity:.55; padding:0 10px 9px; }
.bnl-page--products-soffit .bnl-hp__thumb:focus-visible { outline:var(--focus-ring,2px solid #E3056B); outline-offset:2px; }
.bnl-page--products-soffit .bnl-hp__live { position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important;
  white-space:nowrap!important; border:0!important; }
@media (min-width:640px){ .bnl-page--products-soffit .bnl-hp__row { grid-template-columns:repeat(4,1fr); } }
@media (prefers-reduced-motion: reduce){
  .bnl-page--products-soffit .bnl-hp__panel { transition:none; }
  .bnl-page--products-soffit .bnl-hp__thumb:hover { transform:none; }
  .bnl-page--products-soffit .bnl-hp__bar { display:none; }
}

/* 19 · Color scrubber — replaces the static soffit still. The clip cycles the
   whole spectrum (measured: 340 degrees of hue, amber -> blue -> violet ->
   magenta), so the range input scrubs currentTime rather than playing: the
   visitor drives the color themselves. Encoded with a keyframe every 12 frames
   so seeking is responsive. Autoplays gently until first touch, then the
   slider owns it. */
.bnl-page--products-soffit .bnl-cs { margin:0; }

/* 20 · Carousel cards now flex to a common height (home rev39/rev40 behaviour).
   Each card was shrink-wrapping its own content, so the deck measured
   220 / 286 / 297 / 336px and the stack looked ragged as it rotated. The stage
   sets one height; every card fills it and the bullet list pushes to the
   bottom, so the rule and verb stay on a consistent baseline card to card. */
#perf .bnl-rot__item { display:flex; }
#perf .bnl-dcard, #perf .bnl-dcard__inner { display:flex; flex-direction:column; width:100%; }
#perf .bnl-dcard__inner { min-height:var(--rot-card-h, 340px); height:auto; }
#perf .bnl-dcard__body { display:flex; flex-direction:column; flex:1 1 auto; }
#perf .bnl-dcard__list { margin-top:auto; }
@media (min-width:760px){ #perf { --rot-card-h:326px; } }
@media (max-width:759px){ #perf { --rot-card-h:340px; } }

/* 21 · Kelvin slider — replaces the color-cycle scrubber and the two stacked
   overlay badges that were colliding there (one was mine, one an orphaned
   <figcaption> left from the original build).
   Five real CCT photographs of the same home, 2700K to 6500K. Stepped rather
   than continuous: these are five discrete photos, so a continuous control
   would imply values that do not exist. Verified warm-to-cool by measuring the
   red-minus-blue mean of the lit pixels: +117, +73, +57, +43, -8. */
.bnl-page--products-soffit .bnl-kv { margin:0; }
.bnl-page--products-soffit .bnl-kv__stage { position:relative; aspect-ratio:4/3; border-radius:var(--radius-md,12px);
  overflow:hidden; border:1px solid rgba(255,255,255,.10); background:#05070A; }
.bnl-page--products-soffit .bnl-kv__panel { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .45s ease; }
.bnl-page--products-soffit .bnl-kv__panel.is-active { opacity:1; }
.bnl-page--products-soffit .bnl-kv__panel img { width:100%; height:100%; object-fit:cover; display:block; }
.bnl-page--products-soffit .bnl-kv__scrim { position:absolute; inset:auto 0 0 0; height:34%; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.74), transparent); }
.bnl-page--products-soffit .bnl-kv__cap { position:absolute; left:18px; bottom:14px; display:grid; gap:1px; }
.bnl-page--products-soffit .bnl-kv__cap b { font-family:var(--font-heading-proposed); font-size:1.5rem; font-weight:800;
  color:#fff; letter-spacing:-.03em; line-height:1; }
.bnl-page--products-soffit .bnl-kv__cap i { font-style:normal; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); }
.bnl-page--products-soffit .bnl-kv__desc { margin:14px 0 0; min-height:3.2em; font-size:14.5px; line-height:1.55;
  color:var(--color-text-muted,#B8B8B8); }
.bnl-page--products-soffit .bnl-kv__ctl { margin-top:8px; }
.bnl-page--products-soffit .bnl-kv__lbl { display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--color-text-muted,#B8B8B8); margin-bottom:4px; }
.bnl-page--products-soffit .bnl-kv__range { -webkit-appearance:none; appearance:none; width:100%;
  height:var(--tap-min,44px); background:transparent; display:block; cursor:pointer; }
.bnl-page--products-soffit .bnl-kv__range::-webkit-slider-runnable-track { height:6px; border-radius:999px;
  background:linear-gradient(90deg,#FFB25E 0%,#FFD3A1 25%,#FFF3E4 50%,#EAF1FF 75%,#BFD4FF 100%); }
.bnl-page--products-soffit .bnl-kv__range::-moz-range-track { height:6px; border-radius:999px;
  background:linear-gradient(90deg,#FFB25E 0%,#FFD3A1 25%,#FFF3E4 50%,#EAF1FF 75%,#BFD4FF 100%); }
.bnl-page--products-soffit .bnl-kv__range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
  width:26px; height:26px; margin-top:-10px; border-radius:50%; background:#fff;
  border:3px solid var(--color-primary,#00A9B5); box-shadow:0 2px 10px rgba(0,0,0,.65); }
.bnl-page--products-soffit .bnl-kv__range::-moz-range-thumb { width:26px; height:26px; border-radius:50%; background:#fff;
  border:3px solid var(--color-primary,#00A9B5); box-shadow:0 2px 10px rgba(0,0,0,.65); }
.bnl-page--products-soffit .bnl-kv__range:focus-visible { outline:var(--focus-ring,2px solid #E3056B); outline-offset:4px;
  border-radius:999px; }
.bnl-page--products-soffit .bnl-kv__ticks { display:flex; justify-content:space-between; margin-top:-4px; }
.bnl-page--products-soffit .bnl-kv__tick { font-size:11px; font-weight:600; color:var(--color-text-muted,#B8B8B8);
  opacity:.55; transition:opacity .2s ease, color .2s ease; }
.bnl-page--products-soffit .bnl-kv__tick.is-on { opacity:1; color:var(--color-primary,#00A9B5); }
.bnl-page--products-soffit .bnl-kv__live { position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important;
  white-space:nowrap!important; border:0!important; }
@media (prefers-reduced-motion: reduce){ .bnl-page--products-soffit .bnl-kv__panel { transition:none; } }

/* 23 · Carousel swipe on touch ------------------------------------------------
   touch-action is NOT inherited. It was set on .bnl-rot__stage, but a thumb
   lands on the CARD, whose computed touch-action was `auto` — so the browser
   claimed the horizontal gesture for scrolling and the drag never reached JS.
   Measured on a 390px touch context before the fix. Applying pan-y to the whole
   subtree means vertical still scrolls the page, horizontal reaches the drag. */
#perf .bnl-rot__stage,
#perf .bnl-rot__stage * { touch-action: pan-y; }
/* the front card must receive the gesture; the ones behind must not block it */
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner { pointer-events: auto; }

/* 25 · Spec tab rows were 42px. They are <label> elements, and my earlier tap
   audit only measured a/button/summary/input — so labels-as-controls slipped
   through for 13 tabs. Caught by re-auditing label[for] during hand-off. */
#specs .bnl-sp__nav-item { min-height: var(--tap-min,44px); }

/* ---------- bnl-chrome-v20 ---------- */
<style id="bnl-chrome-v20">
/* ==== SITE CHROME — near-monochrome on #0A0A0A per design grammar §3.
   Every interactive element is >=44px (BRI-281). Unscoped on purpose:
   this is shared chrome, not page-scoped product CSS. ==== */














.bnl-foot{background:var(--color-bg-section,#101014);border-top:1px solid rgba(255,255,255,.08);
 color:var(--color-text,#F5F5F5);font-family:var(--font-body,'Inter',sans-serif);margin-top:0}
.bnl-foot__inner{max-width:var(--width-content,1100px);margin:0 auto;padding:56px 20px 32px;
 display:grid;gap:36px;grid-template-columns:1fr}
.bnl-foot__brand img{height:38px;width:auto;display:block;margin-bottom:16px}
.bnl-foot__tag{margin:0 0 18px;max-width:44ch;font-size:15px;line-height:1.6;color:var(--color-text-muted,#B8B8B8)}
.bnl-foot__contact{list-style:none;margin:0;padding:0}
.bnl-foot__h{font-family:var(--font-heading-proposed,'Bricolage Grotesque',sans-serif);
 font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
 color:var(--color-text-muted,#B8B8B8);margin:0 0 6px}
.bnl-foot__col ul,.bnl-foot__legal ul{list-style:none;margin:0;padding:0}
.bnl-foot a{color:var(--color-text,#F5F5F5);text-decoration:none;
 display:inline-flex;align-items:center;min-height:44px;font-size:15px;line-height:1.3;
 transition:color .18s ease}
.bnl-foot__contact a{font-size:17px;font-weight:600}
.bnl-foot a:hover{color:var(--color-primary,#00A9B5)}
.bnl-foot a:focus-visible{outline:var(--focus-ring,2px solid #E3056B);outline-offset:3px;border-radius:4px}
.bnl-foot__legal{max-width:var(--width-content,1100px);margin:0 auto;padding:0 20px 40px;
 border-top:1px solid rgba(255,255,255,.07);padding-top:20px;
 display:flex;flex-wrap:wrap;gap:4px 24px;align-items:center;justify-content:space-between}
.bnl-foot__legal p{margin:0;font-size:13px;color:var(--color-text-muted,#B8B8B8)}
.bnl-foot__legal ul{display:flex;flex-wrap:wrap;gap:0 20px}
.bnl-foot__legal a{font-size:13px;color:var(--color-text-muted,#B8B8B8)}
@media(min-width:760px){.bnl-foot__inner{grid-template-columns:2fr 1fr 1fr;gap:48px}}


/* 24 · Header now mirrors the homepage (Bricks) nav: same item order — Home,
   About, Products, Projects, Registration Form, Contact — and a real mobile
   menu. Previously the nav simply vanished under 960px, leaving only the CTA,
   so on the ~70% of traffic that is mobile the site had no navigation at all. */















/* ===== SITE HEADER — reproduces the live homepage header (#brx-header).
   Items, order, logo asset, CTA label and the Products mega-menu with its
   hover image swap are all taken from the production markup, not approximated.
   Menu: About · Products (mega) · Projects · Registration Form, CTA "CONTACT US".
   Header/footer are the theme's in production; this exists so the preview
   matches the live page. ===== */
.bnl-hdr{position:sticky;top:0;z-index:90;width:100%;
 background:rgba(17,15,19,.96);
 -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
 border-bottom:1px solid rgba(255,255,255,.07)}
.bnl-hdr__skip{position:absolute;left:-9999px;top:0;background:var(--color-pink,#E3056B);color:#fff;
 padding:12px 18px;min-height:44px;display:inline-flex;align-items:center;border-radius:0 0 8px 0}
.bnl-hdr__skip:focus{left:0;z-index:100}
.bnl-hdr__inner{max-width:1280px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:20px}
.bnl-hdr__brand{display:inline-flex;align-items:center;min-height:44px;flex:0 0 auto}
.bnl-hdr__brand img{height:34px;width:auto;display:block}
.bnl-hdr__nav{display:none;margin-left:auto}
.bnl-hdr__menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.bnl-hdr__menu>li{position:relative;margin-left:0}
.bnl-hdr__toggle{display:flex;align-items:center;gap:2px}
.bnl-hdr__link{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
 font-family:var(--font-body,'Inter',sans-serif);font-size:15px;font-weight:500;line-height:1.2;
 color:#fff;text-decoration:none;border-radius:var(--radius-sm,6px);transition:color .18s ease,background .18s ease}
.bnl-hdr__link:hover{color:var(--color-primary,#00A9B5);background:rgba(255,255,255,.05)}
.bnl-hdr__link:focus-visible{outline:var(--focus-ring,2px solid #E3056B);outline-offset:2px}
.bnl-hdr__chev{display:inline-flex;align-items:center;justify-content:center;width:34px;min-height:44px;
 background:none;border:0;color:#fff;cursor:pointer;padding:0}
.bnl-hdr__chev svg{transition:transform .25s ease}
.bnl-hdr__chev[aria-expanded="true"] svg{transform:rotate(180deg)}
.bnl-hdr__chev:focus-visible{outline:var(--focus-ring,2px solid #E3056B);outline-offset:2px;border-radius:6px}
.bnl-hdr__mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
 width:min(880px,92vw);background:rgba(17,15,19,.96);border:1px solid rgba(255,255,255,.09);
 border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.45);padding:18px;z-index:95;
 -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.bnl-hdr__mega-inner{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:stretch}
.bnl-hdr__mega-img{border-radius:12px;overflow:hidden;background:#0B0D10;aspect-ratio:4/3}
.bnl-hdr__mega-img img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s ease}
.bnl-hdr__mega-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.bnl-hdr__mi{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;
 font-family:var(--font-body,'Inter',sans-serif);font-size:15.5px;font-weight:500;color:rgba(255,255,255,.86);
 text-decoration:none;transition:color .18s ease,background .18s ease}
.bnl-hdr__mi:hover{color:#fff;background:rgba(255,255,255,.06)}
.bnl-hdr__mi[aria-current="page"]{color:var(--color-primary,#00A9B5);background:rgba(0,169,181,.10)}
.bnl-hdr__mi:focus-visible{outline:var(--focus-ring,2px solid #E3056B);outline-offset:-2px}
.bnl-hdr__cta{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;
 padding:0 22px;border-radius:var(--radius-pill,999px);font-family:var(--font-body,'Inter',sans-serif);
 font-size:14px;font-weight:700;letter-spacing:.06em;line-height:1.2;white-space:nowrap;text-decoration:none;
 color:#fff;background:var(--color-pink,#E3056B);box-shadow:var(--hglow-pink,0 0 14px rgba(227,5,107,.55));
 transition:box-shadow .2s ease,transform .2s ease}
.bnl-hdr__cta:hover{box-shadow:var(--hglow-pink-hi,0 0 18px rgba(227,5,107,.75));transform:translateY(-1px)}
.bnl-hdr__cta:focus-visible{outline:var(--focus-ring,2px solid #E3056B);outline-offset:3px}
.bnl-hdr__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
 padding:0 10px;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.18);border-radius:10px;cursor:pointer}
.bnl-hdr__burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;
 transition:transform .25s ease,opacity .25s ease}
.bnl-hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bnl-hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bnl-hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.bnl-hdr__burger:focus-visible{outline:var(--focus-ring,2px solid #E3056B);outline-offset:3px}
.bnl-hdr__panel{border-top:1px solid rgba(255,255,255,.08);background:rgba(17,15,19,.98);
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:8px 22px 20px;
 max-height:calc(100vh - 70px);overflow-y:auto}
.bnl-hdr__panel ul{list-style:none;margin:0 0 12px;padding:0}
.bnl-hdr__panel a{display:flex;align-items:center;min-height:48px;font-family:var(--font-body,'Inter',sans-serif);
 font-size:16px;font-weight:500;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06)}
.bnl-hdr__panel a[aria-current="page"]{color:var(--color-primary,#00A9B5)}
.bnl-hdr__panel a:hover{color:var(--color-primary,#00A9B5)}
.bnl-hdr__panel a:focus-visible{outline:var(--focus-ring,2px solid #E3056B);outline-offset:-2px}
.bnl-hdr__cta--block{justify-content:center;width:100%;border-bottom:0;margin-left:0}
@media(min-width:1000px){
 .bnl-hdr__nav{display:block}
 .bnl-hdr__burger,.bnl-hdr__panel{display:none!important}
 .bnl-hdr__cta{margin-left:14px}
 .bnl-hdr__brand img{height:40px}
}
@media(max-width:999px){ .bnl-hdr__inner>.bnl-hdr__cta{display:none} }
@media(prefers-reduced-motion:reduce){
 .bnl-hdr__cta:hover{transform:none}
 .bnl-hdr__chev svg,.bnl-hdr__mega-img img{transition:none}
}