/* ============================================================
   dubbll pages: dubbll.html (landing, below the approved cinematic
   hero) and dubbll-products.html (models and specifications).
   Loaded only on those two pages (see kit.page). The landing hero
   keeps its own rules in site.css and is not touched here.
   Navy / graphite with dubbll orange; light specification bands
   alternate with dark visual moments.
   ============================================================ */
:root {
  --dbl-navy: #07121e;
  --dbl-graphite: #0b131c;
  --dbl-panel: #101c29;
  --dbl-orange: #f37035;        /* fills, marks and large type on dark */
  --dbl-orange-btn: #c4511b;    /* button fill, white label 4.6:1 */
  --dbl-orange-btn-hover: #a8431a;
  --dbl-orange-ink: #b4461a;    /* orange text on light grounds */
  --dbl-cool: #eef3f6;
  --dbl-warm: #f7f4f1;
  --dbl-line: #dbe3e9;
  --dbl-ink: #0b1622;
  --dbl-text: #3a4757;
  --dbl-on-dark: #c3cfda;
}

/* ---- shared rhythm ---------------------------------------------------- */
.dbl-intro, .dbl-compare, .dbl-anatomy, .dbl-models, .dbl-range,
.dbl-why, .dbl-install, .dbl-warranty, .dbl-docs,
.dbl-gallery, .dbl-mono, .dbl-canada, .dbl-teaser { position: relative; padding-block: clamp(72px, 8vw, 120px); }
.dbl-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 4.5vw, 60px); }
.dbl-split .d2 { max-width: 18ch; text-wrap: balance; }
.dbl-split .lede { max-width: 52ch; }
[class^="dbl-"] .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--dbl-orange-ink); }
[class^="dbl-"] .eyebrow::before { content: ""; width: 23px; height: 1px; flex: none; background: currentColor; }
.dbl-anatomy .eyebrow, .dbl-range .eyebrow, .dbl-install .eyebrow, .dbl-gallery .eyebrow, .dbl-canada .eyebrow { color: var(--dbl-orange); }
.dbl-anatomy .d2, .dbl-range .d2, .dbl-install .d2, .dbl-gallery .d2, .dbl-canada .d2 { color: #fff; }
.dbl-anatomy .lede, .dbl-range .lede, .dbl-install .lede, .dbl-gallery .lede, .dbl-canada .lede { color: var(--dbl-on-dark); }

/* Primary actions below the hero use the dubbll orange (hero keeps its own rules). */
main section:not(.dubbll-cinematic) .btn--primary { border-color: var(--dbl-orange-btn); background: var(--dbl-orange-btn); color: #fff; }
main section:not(.dubbll-cinematic) .btn--primary:hover { border-color: var(--dbl-orange-btn-hover); background: var(--dbl-orange-btn-hover); color: #fff; }
main section:not(.dubbll-cinematic) .btn--primary:focus-visible { outline: 2px solid var(--dbl-orange); outline-offset: 3px; }

/* ---- 01 intro + key facts --------------------------------------------- */
.dbl-intro { background: #fff; }
.dbl-intro__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.dbl-intro .d2 { max-width: 14ch; }
.dbl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(48px, 6vw, 80px) 0 0; border-top: 1px solid var(--dbl-ink); }
.dbl-facts > div { display: grid; align-content: start; gap: 10px; padding: 22px 24px 0 0; }
.dbl-facts > div + div { padding-left: 24px; border-left: 1px solid var(--dbl-line); }
.dbl-facts dt { color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.dbl-facts dd { display: grid; align-content: start; gap: 6px; margin: 0; }
.dbl-facts b { color: var(--dbl-ink); font-family: var(--ff-display); font-size: clamp(24px, 2.2vw, 34px); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.dbl-facts span { color: var(--dbl-text); font-size: 14.5px; line-height: 1.45; }

/* ---- 02 why monoblock: comparison ------------------------------------- */
.dbl-compare { background: var(--dbl-cool); border-top: 1px solid var(--dbl-line); border-bottom: 1px solid var(--dbl-line);
  --dg-ink: #0f2436; --dg-muted: #56687a; --dg-outside: #e9f0ec; --dg-inside: #f8fafb; --dg-wall: #dde5eb; --dg-hatch: #aebdca;
  --dg-unit: #fff; --dg-duct: #fff; --dg-warm: #c4511b; --dg-cool: #2a72b5; --dg-ref: #3d4a57; --dg-dim: #7a8b9a; }
.dbl-compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.dbl-panel { display: grid; grid-template-rows: auto auto 1fr; margin: 0; overflow: hidden; border: 1px solid #d3dde5; border-radius: 14px; background: #fff; box-shadow: 0 14px 40px rgba(16, 44, 67, .07); }
.dbl-panel--mono { border-color: color-mix(in oklch, var(--dbl-orange) 38%, #d3dde5); box-shadow: 0 0 0 1px color-mix(in oklch, var(--dbl-orange) 22%, transparent), 0 18px 46px rgba(120, 52, 18, .1); }
.dbl-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 24px 18px; border-bottom: 1px solid var(--dbl-line); }
.dbl-panel__head > span { order: 2; color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.dbl-panel--mono .dbl-panel__head > span { color: var(--dbl-orange-ink); }
.dbl-panel__head strong { color: var(--dbl-ink); font-size: clamp(19px, 1.5vw, 23px); font-weight: 500; letter-spacing: -.015em; }
.dbl-panel__art svg, .dbl-view__art svg { display: block; width: 100%; height: auto; }
.dbl-tally { margin: 0; border-top: 1px solid var(--dbl-line); }
.dbl-tally > div { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); gap: 16px; padding: 14px 24px; }
.dbl-tally > div + div { border-top: 1px solid var(--dbl-line); }
.dbl-tally dt { color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.dbl-tally dd { margin: 0; color: var(--dbl-ink); font-size: 15px; line-height: 1.45; }
.dbl-note { max-width: 78ch; margin: 24px 0 0; color: var(--dbl-text); font-size: 14.5px; line-height: 1.55; }

/* ---- 03 the unit: annotated product ---------------------------------- */
.dbl-anatomy { overflow: hidden; background: radial-gradient(ellipse 60% 70% at 30% 58%, #18283a 0%, var(--dbl-graphite) 62%) , var(--dbl-graphite); }
.dbl-anatomy__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dbl-anatomy__stage { margin: 0; padding: clamp(28px, 4vw, 56px) clamp(18px, 3vw, 44px) clamp(20px, 3vw, 36px); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(195, 214, 230, .16), transparent 70%), rgba(255,255,255,.02); }
.dbl-anatomy__frame { position: relative; }
.dbl-anatomy__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.dbl-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dbl-orange); color: #160904; font-family: var(--ff-mono); font-size: 13px; font-weight: 700; box-shadow: 0 0 0 5px rgba(243, 112, 53, .22), 0 6px 16px rgba(0, 0, 0, .35); }
.dbl-pin--inline { position: static; transform: none; width: 24px; height: 24px; font-size: 11px; box-shadow: 0 0 0 4px rgba(243, 112, 53, .2); }
.dbl-anatomy__dim { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 6.5% 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.28); color: var(--dbl-on-dark); font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; position: relative; }
.dbl-anatomy__dim::before, .dbl-anatomy__dim::after { content: ""; position: absolute; top: -7px; width: 1px; height: 13px; background: rgba(255,255,255,.4); }
.dbl-anatomy__dim::before { left: 0; } .dbl-anatomy__dim::after { right: 0; }
.dbl-anatomy__list { counter-reset: pin; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.dbl-anatomy__list li { counter-increment: pin; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12); }
.dbl-anatomy__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.dbl-anatomy__list li::before { content: counter(pin); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--dbl-orange); color: var(--dbl-orange); font-family: var(--ff-mono); font-size: 13px; font-weight: 700; }
.dbl-anatomy__list b { color: #fff; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.dbl-anatomy__list span { color: var(--dbl-on-dark); font-size: 15px; line-height: 1.5; }

/* ---- 04 models --------------------------------------------------------- */
.dbl-models { background: var(--dbl-warm); }
.dbl-models__intro { display: grid; gap: 22px; }
.dbl-models__intro .dubbll-download { max-width: 420px; }
.dbl-models__list { display: grid; gap: 16px; }
body .dbl-model { border: 1px solid #e6ded6; border-left: 1px solid #e6ded6; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(60, 36, 20, .05); overflow: clip; transform: none; transition: box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out); }
body .dbl-model:hover { transform: none; border-color: color-mix(in oklch, var(--dbl-orange) 40%, #e6ded6); box-shadow: 0 16px 40px rgba(60, 36, 20, .1); }
body .dbl-model[open] { border-color: color-mix(in oklch, var(--dbl-orange) 45%, #e6ded6); }
body .dbl-model summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 36px); align-items: center; min-height: 0; padding: 16px clamp(18px, 2.4vw, 32px) 16px 16px; }
body .dbl-model summary::-webkit-details-marker { display: none; }
body .dbl-model summary:focus-visible { outline: 2px solid var(--dbl-orange); outline-offset: -3px; border-radius: 16px; }
body .dbl-model__image { height: 132px; padding: 8px; border-radius: 10px; background: #f6f1ec; }
.dbl-model__identity { display: grid; gap: 8px; min-width: 0; }
.dbl-model__code { color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.dbl-model__identity strong { color: var(--dbl-ink); font-size: clamp(19px, 1.5vw, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.dbl-model__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dbl-model__chips span { padding: 5px 9px; border: 1px solid #e3dbd3; border-radius: 4px; background: #fbf8f5; color: var(--dbl-text); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .04em; }
.dbl-model__open { display: inline-flex; align-items: center; gap: 12px; color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.dbl-model__chev { position: relative; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; transition: transform var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out); }
.dbl-model__chev::before { content: ""; position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.dbl-model[open] .dbl-model__chev { transform: rotate(180deg); background: #fff3ec; }
.dbl-model__panel { border-top: 1px solid #eee6de; background: linear-gradient(180deg, #fffaf6, #fff 220px); }
.dbl-model__content { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, .55fr); gap: clamp(28px, 4.5vw, 64px); padding: clamp(24px, 3vw, 40px); }
.dbl-model__content h3 { max-width: 42ch; margin: 0 0 6px; color: var(--dbl-ink); font-size: clamp(19px, 1.4vw, 22px); font-weight: 500; letter-spacing: -.015em; line-height: 1.35; }
.dbl-model .specs { margin-top: 18px; }
.dbl-model .specs > div { min-height: 0; padding: 13px 14px 13px 0; }
.dbl-model .specs dt { color: var(--dbl-orange-ink); font-size: 11px; }
.dbl-model .specs dd { font-size: 14.5px; line-height: 1.45; color: var(--dbl-ink); }
.dbl-model__docs { display: grid; align-self: start; gap: 4px; padding: 20px 22px 8px; border: 1px solid #ece3da; border-radius: 12px; background: #fff; }
.dbl-model__docs > p { margin: 0 0 6px; color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dbl-model__docs .dubbll-download:last-child { border-bottom: 0; }
.dbl-model__docs .dubbll-download { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: center; padding: 12px 0; }
.dbl-model__docs .dubbll-download > span { grid-column: 1; }
.dbl-model__docs .dubbll-download > small { grid-column: 1; grid-row: 2; font-weight: 500; }
.dbl-model__docs .dubbll-download > svg { grid-column: 2; grid-row: 1 / span 2; }
body .dubbll-download { color: var(--dbl-orange-ink); }
body .dubbll-download:hover { color: #8f3811; }

/* ---- 05 built for Canada: operating range ---------------------------- */
.dbl-range { background: radial-gradient(ellipse 50% 80% at 92% 10%, rgba(42, 114, 181, .22), transparent 70%), var(--dbl-navy); color: #fff; }
.dbl-range__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.dbl-range__grid .lede { margin-top: 22px; max-width: 46ch; }
.dbl-range__chart { display: grid; gap: 22px; padding: clamp(22px, 3vw, 36px); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.035); }
.dbl-range__cap { margin: 0; color: var(--dbl-on-dark); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.dbl-range__plot { display: grid; gap: 14px; }
.dbl-range__row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 14px; }
.dbl-range__lbl { color: #fff; font-size: 15px; font-weight: 500; }
.dbl-range__track { position: relative; height: 40px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px calc(100% / 7)), rgba(255,255,255,.04); }
.dbl-range__bar { position: absolute; top: 6px; bottom: 6px; left: calc((var(--a) + 20) / 70 * 100%); width: calc((var(--b) - var(--a)) / 70 * 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-radius: 4px; font-style: normal; }
.dbl-range__bar i { font-style: normal; font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #120802; }
.dbl-range__bar--heat { background: var(--dbl-orange); }
.dbl-range__bar--cool { background: #79bdf3; }
.dbl-range__bar--cool i { color: #06182a; }
.dbl-range__axis { position: relative; height: 18px; margin-left: 96px; }
.dbl-range__axis span { position: absolute; left: calc((var(--t) + 20) / 70 * 100%); transform: translateX(-50%); color: #8fa3b5; font-family: var(--ff-mono); font-size: 11px; }
.dbl-range__axis span:first-child { transform: none; }
.dbl-range__axis span:last-child { transform: translateX(-100%); }
.dbl-range__cap-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(255,255,255,.12); }
.dbl-range__cap-table > div { display: grid; gap: 4px; padding: 14px 12px 0 0; }
.dbl-range__cap-table > div + div { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.12); }
.dbl-range__cap-table dt { color: #9fb2c3; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.dbl-range__cap-table dd { margin: 0; color: #fff; font-size: 18px; font-weight: 500; }
body .dbl-boundary { padding: 18px 20px; border: 1px solid rgba(243, 112, 53, .5); border-left: 1px solid rgba(243, 112, 53, .5); border-radius: 10px; background: rgba(243, 112, 53, .08); color: #e8eef3; }
body .dbl-boundary strong { display: block; margin-bottom: 6px; color: var(--dbl-orange); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
body .dbl-boundary p { margin: 0; color: #dfe7ee; font-size: 15px; line-height: 1.55; }
body .dbl-boundary p b { color: #fff; }

/* ---- 06 why dubbll ---------------------------------------------------- */
.dbl-why { background: #fff; }
.dbl-why .dbl-split { margin-bottom: clamp(28px, 3.5vw, 48px); }
.dbl-why .d2 { max-width: 22ch; }
.dbl-why__list { counter-reset: why; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dbl-ink); }
.dbl-why__list li { counter-increment: why; display: grid; align-content: start; gap: 10px; padding: 22px 22px 6px 0; }
.dbl-why__list li + li { padding-left: 22px; border-left: 1px solid var(--dbl-line); }
.dbl-why__list li::before { content: counter(why, decimal-leading-zero); color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.dbl-why__list b { color: var(--dbl-ink); font-size: 19px; font-weight: 500; letter-spacing: -.015em; }
.dbl-why__list p { margin: 0; color: var(--dbl-text); font-size: 15px; line-height: 1.55; }

/* ---- 07 install: three views + video ---------------------------------- */
.dbl-install { background: var(--dbl-graphite);
  --dg-ink: #e6edf3; --dg-muted: #9db0c1; --dg-outside: #0e2032; --dg-inside: #0b1724; --dg-wall: #172f47; --dg-hatch: #2d4862;
  --dg-unit: #12283c; --dg-duct: #1b3650; --dg-warm: #ff7d45; --dg-cool: #72b9f2; --dg-ref: #c9d5df; --dg-dim: #8ea3b5; }
.dbl-install__views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.dbl-view { display: grid; grid-template-rows: auto 1fr; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: var(--dbl-panel); }
.dbl-view figcaption { display: grid; gap: 6px; padding: 16px 20px 20px; color: var(--dbl-on-dark); font-size: 14.5px; line-height: 1.5; border-top: 1px solid rgba(255,255,255,.08); }
.dbl-view figcaption b { color: var(--dbl-orange); font-family: var(--ff-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dbl-install__lower { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.dbl-steps { counter-reset: st; display: grid; margin: 0; padding: 0; list-style: none; }
.dbl-steps li { counter-increment: st; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.12); color: #dbe4ec; font-size: 15px; line-height: 1.55; }
.dbl-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.dbl-steps li::before { content: counter(st, decimal-leading-zero); padding-top: 2px; color: var(--dbl-orange); font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.dbl-video .dubbll-video__frame { min-height: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }

/* ---- 08 warranty ------------------------------------------------------- */
.dbl-warranty { background: #fff; border-top: 1px solid var(--dbl-line); }
.dbl-warranty__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.dbl-warranty .d2 span { color: var(--dbl-orange-ink); }
.dbl-warranty .lede { margin-top: 22px; }
.dbl-warranty .fine { margin-top: 16px; color: var(--fg-muted); }
.dbl-warranty__panel { display: grid; gap: 0; overflow: hidden; border: 1px solid #e6ded6; border-radius: 16px; background: #fff; box-shadow: 0 16px 44px rgba(60, 36, 20, .07); }
.dbl-warranty__panel > img { justify-self: center; width: min(78%, 360px); height: auto; padding: clamp(24px, 3vw, 36px) 0; }
.dbl-warranty__numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #ece4dc; }
.dbl-warranty__numbers > div { display: grid; gap: 6px; padding: 20px 24px; }
.dbl-warranty__numbers > div + div { border-left: 1px solid #ece4dc; }
.dbl-warranty__numbers b { color: var(--dbl-orange-ink); font-family: var(--ff-display); font-size: clamp(34px, 3.4vw, 50px); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.dbl-warranty__numbers span { color: var(--dbl-ink); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }

/* ---- 09 downloads ------------------------------------------------------ */
.dbl-docs { background: #fff; }
.dbl-docs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dbl-doc { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; min-height: 196px; padding: 22px; border: 1px solid var(--dbl-line); border-radius: 12px; background: #fbfcfd; color: inherit; text-decoration: none; transition: border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); }
.dbl-doc:hover { border-color: var(--dbl-orange-btn); background: #fffaf6; transform: translateY(-2px); }
.dbl-doc:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: 3px; }
.dbl-doc__kind { color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dbl-doc strong { color: var(--dbl-ink); font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.dbl-doc__sub { color: var(--dbl-text); font-size: 14px; }
.dbl-doc__meta { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--dbl-line); color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .08em; }
.dbl-doc__meta svg { width: 18px; height: 18px; color: var(--dbl-orange-ink); }

/* ---- FAQ + closing ----------------------------------------------------- */
body:has(.dbl-docs) [data-od-id="faq"] { padding-block: clamp(72px, 8vw, 112px); }
body:has(.dbl-docs) [data-od-id="faq"] .eyebrow { color: var(--dbl-orange-ink); }
body:has(.dbl-docs) [data-od-id="faq"] details summary:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: 3px; }

/* ---- shared: dark ink button, text links on dark, menu parent ---------- */
.btn--dark { border-color: var(--dbl-ink); background: var(--dbl-ink); color: #fff; }
.btn--dark:hover { border-color: #22303f; background: #22303f; color: #fff; }
.btn--dark:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: 3px; }
.dbl-canada .btn--text, .dbl-gallery .btn--text { color: #ffb48f; }
.dbl-canada .btn--text:focus-visible { outline: 2px solid var(--dbl-orange); outline-offset: 3px; }
.nav__drop a[aria-current="true"] b, .mnav a.mlink[aria-current="true"] { color: var(--ce-blue-300); }
.dbl-more { margin: 22px 0 0; }
.dbl-more .btn--text, .dbl-teaser .btn--text { color: var(--dbl-orange-ink); }

/* ======================= LANDING (dubbll.html) ========================== */
/* ---- gallery: official imagery on graphite ---------------------------- */
.dbl-gallery { background: radial-gradient(ellipse 55% 70% at 85% 20%, rgba(243, 112, 53, .1), transparent 70%), var(--dbl-graphite); }
.dbl-gal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.dbl-gal__item { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: #16212d; }
.dbl-gal__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 1 = the living-room loop at its own 1600:730 frame, full width; 2 + 3 share a row at 4:3 */
.dbl-gal__a { grid-column: 1 / -1; }
.dbl-gal__a img { aspect-ratio: 1160 / 530; }
.dbl-gal__b, .dbl-gal__c { grid-column: 1 / -1; } /* up close runs full width, zoomed on the unit */
.dbl-gal__b img { aspect-ratio: 16 / 9; object-position: 50% 50%; }
.dbl-gal__c img { aspect-ratio: 2 / 1; object-position: 50% 62%; }
.dbl-gal__item figcaption { position: absolute; left: 14px; bottom: 14px; display: grid; gap: 2px; max-width: calc(100% - 28px); padding: 9px 12px 10px; border-radius: 8px; background: rgba(6, 14, 24, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); color: #fff; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.dbl-gal__item figcaption span { color: #ffb48f; font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* ---- why monoblock, at a glance ---------------------------------------- */
.dbl-mono { background: var(--dbl-cool); border-bottom: 1px solid var(--dbl-line); }
.dbl-vs { display: grid; overflow: hidden; border: 1px solid #d3dde5; border-radius: 14px; background: #fff; box-shadow: 0 14px 40px rgba(16, 44, 67, .06); }
.dbl-vs__row { display: grid; grid-template-columns: minmax(150px, .62fr) minmax(0, 1fr) minmax(0, 1fr); }
.dbl-vs__row + .dbl-vs__row { border-top: 1px solid var(--dbl-line); }
.dbl-vs__row > span { padding: 18px 24px; color: var(--dbl-ink); font-size: 16px; line-height: 1.45; }
.dbl-vs__row > span:last-child { background: #fff8f3; border-left: 1px solid color-mix(in oklch, var(--dbl-orange) 25%, var(--dbl-line)); }
.dbl-vs__row > span:nth-child(2) { color: var(--dbl-text); }
.dbl-vs__row [role="rowheader"] { color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; padding-top: 21px; }
.dbl-vs__row--head > span { padding-block: 20px; font-size: clamp(19px, 1.5vw, 23px); font-weight: 500; letter-spacing: -.015em; }
.dbl-vs__row--head small { display: block; margin-bottom: 4px; color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dbl-vs__row--head .dbl-vs__mb small { color: var(--dbl-orange-ink); }

/* ---- built for Canada, the short version ------------------------------ */
.dbl-canada { background: radial-gradient(ellipse 50% 80% at 92% 10%, rgba(42, 114, 181, .22), transparent 70%), var(--dbl-navy); color: #fff; }
.dbl-canada__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.dbl-canada__grid .lede { margin-top: 22px; max-width: 46ch; }
.dbl-canada__panel { display: grid; gap: 20px; padding: clamp(22px, 3vw, 36px); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.035); }
.dbl-canada__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.dbl-canada__figs > div { display: grid; gap: 8px; padding-right: 16px; }
.dbl-canada__figs > div + div { padding: 0 0 0 20px; border-left: 1px solid rgba(255,255,255,.14); }
.dbl-canada__figs dt { color: #9fb2c3; font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.dbl-canada__figs dd { display: grid; gap: 4px; margin: 0; }
.dbl-canada__figs b { color: var(--dbl-orange); font-family: var(--ff-display); font-size: clamp(30px, 3vw, 44px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; }
.dbl-canada__figs .is-cool b { color: #79bdf3; }
.dbl-canada__figs span { color: var(--dbl-on-dark); font-size: 14.5px; }

/* ---- model teaser ------------------------------------------------------ */
.dbl-teaser { background: var(--dbl-warm); }
.dbl-teaser__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.dbl-pick { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid #e6ded6; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(60, 36, 20, .05); transition: border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
.dbl-pick:hover { border-color: color-mix(in oklch, var(--dbl-orange) 40%, #e6ded6); box-shadow: 0 16px 40px rgba(60, 36, 20, .1); }
.dbl-pick__media { display: block; background: #f6f6f6; border-bottom: 1px solid #eee6de; }
.dbl-pick__media img { display: block; width: 100%; height: auto; aspect-ratio: 920 / 514; }
.dbl-pick__body { display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.4vw, 30px); }
.dbl-pick__code { margin: 0; color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.dbl-pick h3 { margin: 0; color: var(--dbl-ink); font-size: clamp(24px, 2vw, 30px); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.dbl-pick h3 span { color: var(--dbl-text); font-size: .62em; font-weight: 500; letter-spacing: -.01em; }
.dbl-pick p { margin: 0; color: var(--dbl-text); font-size: 16px; line-height: 1.55; }
.dbl-pick__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.dbl-pick__link:hover { color: #8f3811; text-decoration: underline; text-underline-offset: 4px; }
.dbl-pick__link:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: 3px; }
.dbl-pick__link .ic { width: 16px; height: 16px; }
.dbl-teaser__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: clamp(24px, 3vw, 36px); }
.dbl-faq-more { margin: 0; padding: 0 0 clamp(56px, 6vw, 88px); background: var(--bg-warm); }
.dbl-faq-more .wrap { display: block; color: var(--dbl-text); font-size: 15.5px; line-height: 1.55; }
.dbl-faq-more a { color: var(--dbl-orange-ink); text-underline-offset: 3px; }
.dbl-faq-more a:hover { color: #8f3811; }
.dbl-faq-more a:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: 2px; }
body:has(.dbl-faq-more) [data-od-id="faq"] { padding-bottom: clamp(28px, 3vw, 40px); }

/* ================ PRODUCT PAGE (dubbll-products.html) ================== */
/* ---- compact technical header ------------------------------------------ */
.dbl-tech { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(ellipse 45% 90% at 88% 0%, rgba(243, 112, 53, .16), transparent 70%), radial-gradient(ellipse 60% 80% at 10% 100%, rgba(42, 114, 181, .18), transparent 70%), #07101a; }
.dbl-tech__texture { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .18; background-image: linear-gradient(116deg, transparent 0 48.9%, rgba(192,215,229,.25) 49%, transparent 49.12%); background-size: 46px 46px; mix-blend-mode: screen; }
.dbl-tech__inner { padding-block: 128px 0; }
.dbl-tech__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.dbl-tech .crumb { margin: 0; color: #b9c9d7; }
.dbl-tech .crumb a { color: #e4e9ee; }
.dbl-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; font-family: var(--ff-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out); }
.dbl-back:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.dbl-back:focus-visible { outline: 2px solid var(--dbl-orange); outline-offset: 3px; }
.dbl-back .ic { width: 16px; height: 16px; }
.dbl-tech__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 6vw, 96px); align-items: end; padding-block: clamp(36px, 4.5vw, 64px) clamp(32px, 4vw, 52px); }
.dbl-tech__copy { display: grid; gap: 18px; }
.dbl-tech__title { max-width: 15ch; margin: 0; color: #fff; font-family: var(--ff-display); font-size: clamp(40px, 4.4vw, 68px); font-weight: 700; letter-spacing: -.05em; line-height: .98; text-wrap: balance; }
.dbl-tech__title em { color: #fff; font-style: normal; }
.dbl-tech__title .lockup-dubbll { color: #f37035; }
.dbl-tech__lede { max-width: 48ch; margin: 0; color: #e0e5e9; font-size: clamp(17px, 1.25vw, 19px); font-weight: 500; line-height: 1.45; }
.dbl-tech__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(255,255,255,.22); }
.dbl-tech__rail > div { display: grid; gap: 6px; padding: 16px 16px 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.dbl-tech__rail > div:nth-child(even) { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.12); }
.dbl-tech__rail dt { color: #9fb2c3; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.dbl-tech__rail dd { margin: 0; color: #fff; font-family: var(--ff-display); font-size: clamp(21px, 1.8vw, 27px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.dbl-tech__rail small { color: var(--dbl-on-dark); font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.dbl-jump { display: flex; gap: 4px 28px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.14); }
.dbl-jump::-webkit-scrollbar { display: none; }
.dbl-jump a { flex: none; display: inline-flex; align-items: center; min-height: 52px; color: #dfe7ee; font-family: var(--ff-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; }
.dbl-jump a:hover { color: #fff; border-bottom-color: var(--dbl-orange); }
.dbl-jump a:focus-visible { outline: 2px solid var(--dbl-orange); outline-offset: -2px; }

/* ---- model comparison table ------------------------------------------- */
.dbl-glance { margin-bottom: clamp(24px, 3vw, 36px); overflow: hidden; border: 1px solid #e6ded6; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(60, 36, 20, .05); }
.dbl-glance table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dbl-glance th, .dbl-glance td { padding: 16px 24px; text-align: left; vertical-align: top; color: var(--dbl-ink); font-size: 15.5px; font-weight: 400; line-height: 1.5; }
.dbl-glance thead th { padding-block: 22px 18px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.02em; border-bottom: 1px solid var(--dbl-ink); }
.dbl-glance thead th:first-child { width: 22%; vertical-align: bottom; }
.dbl-glance__k, .dbl-glance tbody th { color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.dbl-glance__code { display: block; margin-bottom: 6px; color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.dbl-glance tbody tr + tr > * { border-top: 1px solid var(--dbl-line); }
.dbl-glance tbody th { padding-top: 19px; }
.dbl-glance td + td, .dbl-glance th + th { border-left: 1px solid var(--dbl-line); }
.dbl-glance__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-underline-offset: 4px; }
.dbl-glance__links a:hover { color: #8f3811; }
.dbl-glance__links a:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: 2px; }
.dbl-glance__same { margin: 0; padding: 14px 24px; border-top: 1px solid #eee6de; background: #fbf8f5; color: var(--dbl-text); font-size: 14.5px; }

/* ---- enlarge a diagram ------------------------------------------------- */
.dbl-panel__head { align-items: center; }
.dbl-panel__head strong { margin-right: auto; }
.dbl-panel__head > span { order: 0; }
.dbl-zoom-btn { order: 3; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 1px solid #c9d5df; border-radius: 6px; background: #fff; color: var(--dbl-ink); font-family: var(--ff-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out); }
.dbl-zoom-btn:hover { border-color: var(--dbl-ink); background: #f3f6f8; }
.dbl-zoom-btn:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: 2px; }
.dbl-zoom-btn .ic { width: 15px; height: 15px; }
.dbl-view .dbl-zoom-btn { border-color: rgba(255,255,255,.24); background: transparent; color: #fff; }
.dbl-view .dbl-zoom-btn:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.dbl-view .dbl-zoom-btn:focus-visible { outline-color: var(--dbl-orange); }
.dbl-view__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dbl-zoom { width: min(1180px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: #0b131c; color: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.dbl-zoom[open] { display: flex; flex-direction: column; }
.dbl-zoom::backdrop { background: rgba(3, 8, 14, .78); }
.dbl-zoom__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.dbl-zoom__head p { margin: 0; font-size: 17px; font-weight: 500; }
.dbl-zoom__close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.dbl-zoom__close:hover { background: rgba(255,255,255,.1); }
.dbl-zoom__close:focus-visible { outline: 2px solid var(--dbl-orange); outline-offset: 2px; }
.dbl-zoom__close .ic { width: 20px; height: 20px; }
.dbl-zoom__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; }
.dbl-zoom__art { width: max(640px, min(100%, calc((100dvh - 240px) * 1.14))); margin: 0 auto; }
.dbl-zoom__art svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.dbl-zoom__note { margin: 0; padding: 12px 22px 4px; color: #dfe7ee; font-size: 15px; line-height: 1.5; }
.dbl-zoom__note:empty { display: none; }
.dbl-zoom__fine { margin: 0; padding: 4px 22px 16px; color: #9fb2c3; font-size: 13px; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .dbl-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dbl-why__list li:nth-child(4) { padding-left: 0; border-left: 0; }
  .dbl-why__list li:nth-child(n+4) { margin-top: 18px; border-top: 1px solid var(--dbl-line); }
  .dbl-install__views { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbl-install__views .dbl-view:nth-child(3) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .dbl-install__views .dbl-view:nth-child(3) figcaption { align-content: center; padding: 24px clamp(20px, 3vw, 40px); border-top: 0; border-left: 1px solid rgba(255,255,255,.08); font-size: 16px; }
  .dbl-docs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .dbl-split, .dbl-intro__grid, .dbl-anatomy__grid, .dbl-range__grid, .dbl-install__lower, .dbl-warranty__grid { grid-template-columns: minmax(0, 1fr); }
  .dbl-split { align-items: start; gap: 18px; }
  .dbl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbl-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .dbl-facts > div:nth-child(n+3) { margin-top: 22px; border-top: 1px solid var(--dbl-line); }
  .dbl-model__content { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dbl-compare__grid, .dbl-install__views { grid-template-columns: minmax(0, 1fr); }
  .dbl-install__views .dbl-view:nth-child(3) { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .dbl-install__views .dbl-view:nth-child(3) figcaption { padding: 16px 20px 20px; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 14.5px; }
  .dbl-why__list { grid-template-columns: minmax(0, 1fr); }
  .dbl-why__list li, .dbl-why__list li + li { padding: 18px 0 16px; border-left: 0; }
  .dbl-why__list li + li { border-top: 1px solid var(--dbl-line); margin-top: 0; }
  .dbl-docs__grid { grid-template-columns: minmax(0, 1fr); }
  .dbl-doc { min-height: 0; }
  body .dbl-model summary { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px; }
  body .dbl-model__image { height: 92px; padding: 4px; }
  .dbl-model__open { grid-column: 1 / -1; justify-content: space-between; padding: 10px 4px 2px; border-top: 1px solid #eee6de; }
  .dbl-model__chev { width: 28px; height: 28px; }
  .dbl-tally > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 18px; }
  .dbl-panel__head { padding: 16px 18px 14px; }
  .dbl-range__row { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .dbl-range__axis { margin-left: 74px; }
  .dbl-range__axis span:nth-child(even) { display: none; }
  .dbl-range__bar i { font-size: 11px; }
  .dbl-range__cap-table dd { font-size: 16px; }
  .dbl-warranty__numbers > div { padding: 18px; }
}
@media (max-width: 420px) {
  .dbl-facts { grid-template-columns: minmax(0, 1fr); }
  .dbl-facts > div, .dbl-facts > div + div { padding-left: 0; border-left: 0; }
  .dbl-facts > div + div { margin-top: 18px; border-top: 1px solid var(--dbl-line); }
  .dbl-range__cap-table { grid-template-columns: minmax(0, 1fr); }
  .dbl-range__cap-table > div + div { padding-left: 0; border-left: 0; }
  .dbl-model__chips span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .dbl-doc, body .dbl-model, .dbl-model__chev { transition: none; }
  .dbl-doc:hover { transform: none; }
}

/* ---- responsive: landing + product page additions --------------------- */
@media (max-width: 1180px) {
  .dbl-tech__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .dbl-tech__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dbl-tech__rail > div + div { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 960px) {
  .dbl-canada__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dbl-tech__inner { padding-top: 104px; }
  .dbl-tech__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbl-tech__rail > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .dbl-teaser__grid { grid-template-columns: minmax(0, 1fr); }
  .dbl-gal { grid-template-columns: minmax(0, 1fr); }
  .dbl-gal__item figcaption { left: 10px; bottom: 10px; max-width: calc(100% - 20px); font-size: 14px; }
  .dbl-vs__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dbl-vs__row > [role="rowheader"] { grid-column: 1 / -1; padding: 14px 18px 0; }
  .dbl-vs__row--head > span:first-child { display: none; }
  .dbl-vs__row > span { padding: 10px 18px 16px; font-size: 15px; }
  .dbl-vs__row--head > span { padding-block: 16px; font-size: 18px; }
  .dbl-vs__row > span:last-child { border-left: 1px solid color-mix(in oklch, var(--dbl-orange) 25%, var(--dbl-line)); }
  .dbl-vs__row:not(.dbl-vs__row--head) > [role="rowheader"] { background: linear-gradient(90deg, #fff 50%, #fff8f3 50%); }
  .dbl-glance table, .dbl-glance tbody, .dbl-glance tr { display: block; }
  .dbl-glance thead { display: block; }
  .dbl-glance thead tr, .dbl-glance tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dbl-glance thead th:first-child { display: none; }
  .dbl-glance tbody th { grid-column: 1 / -1; padding: 14px 16px 0; }
  .dbl-glance tbody tr.dbl-glance__links th { display: none; }
  .dbl-glance th, .dbl-glance td { padding: 8px 16px 14px; font-size: 14.5px; }
  .dbl-glance thead th { padding: 16px; font-size: 19px; }
  .dbl-glance tbody tr + tr > * { border-top: 0; }
  .dbl-glance tbody tr + tr { border-top: 1px solid var(--dbl-line); }
  .dbl-glance td + td, .dbl-glance th + th { border-left: 1px solid var(--dbl-line); }
  .dbl-glance__same { padding: 12px 16px; }
  .dbl-panel__head { flex-wrap: wrap; row-gap: 4px; }
  .dbl-panel__head > span { flex-basis: 100%; }
  .dbl-panel__head .dbl-zoom-btn { order: 3; }
  .dbl-compare .wrap, .dbl-install .wrap { padding-inline: 16px; }
  .dbl-zoom__note { font-size: 14px; }
}
@media (max-width: 420px) {
  .dbl-canada__figs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dbl-canada__figs > div + div { padding: 16px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .dbl-back { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dbl-pick, .dbl-back, .dbl-zoom-btn { transition: none; }
}
/* teaser footer: the flyer link sits inline beside the button, not as a full-width row */
.dbl-teaser__foot .dubbll-download { width: auto; min-height: 44px; gap: 12px; padding: 0; border-bottom: 0; }
.dbl-teaser__foot .dubbll-download small { letter-spacing: .06em; }
.dbl-teaser__foot .dubbll-download:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: 3px; }
.dubbll-cinematic__eyebrow b.lockup-dubbll { font-weight: inherit; letter-spacing: .06em; }
.dbl-steps li a { color: var(--dbl-orange); text-underline-offset: 3px; }
.dbl-steps li a:focus-visible { outline: 2px solid var(--dbl-orange); outline-offset: 2px; }
.dbl-nw { white-space: nowrap; }
.dbl-tech__rail small { display: block; margin-top: 4px; }
.dbl-more .btn--text, .dbl-canada .btn--text { text-align: left; }
.dbl-pick__link, .dbl-glance__links a { flex-wrap: wrap; column-gap: .45em; }
.dbl-glance__links a { gap: 0 .45em; }
@media (max-width: 900px) {
  .dbl-compare__grid, .dbl-install__views { grid-template-columns: minmax(0, 1fr); }
  .dbl-install__views .dbl-view:nth-child(3) { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .dbl-install__views .dbl-view:nth-child(3) figcaption { padding: 16px 20px 20px; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 14.5px; }
  .dbl-compare__grid, .dbl-install__views { max-width: 720px; }
}
@media (max-width: 760px) {
  .dbl-jump { flex-wrap: wrap; overflow: visible; gap: 0 20px; padding: 6px 0 10px; }
  .dbl-jump a { min-height: 44px; }
}
.dbl-zoom__hint { display: none; margin: 0; padding: 10px 22px 0; color: #ffb48f; font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .06em; line-height: 1.5; }
.dbl-zoom__scroll:focus-visible { outline: 2px solid var(--dbl-orange); outline-offset: -4px; }
@media (max-width: 700px) { .dbl-zoom__hint { display: block; } }

/* ======================================================================
   v5 refinements (2026-10-08): landing model chooser, compact tech
   opening on small screens, closed model accordions, ambient gallery
   loops, compact footer after the dubbll closing CTA.
   ====================================================================== */

/* ---- landing: choose a model, straight after the hero ------------------ */
.dbl-choose { position: relative; padding-block: clamp(56px, 6.5vw, 96px); background: radial-gradient(ellipse 50% 70% at 92% 0%, rgba(243, 112, 53, .14), transparent 70%), var(--dbl-navy); color: #fff; }
.dbl-choose .eyebrow { color: var(--dbl-orange); }
.dbl-choose .d2 { color: #fff; max-width: 16ch; }
.dbl-choose .lede { color: var(--dbl-on-dark); max-width: 46ch; }
.dbl-choose__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 3.5vw, 44px); }
.dbl-choose__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.dbl-choose__card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: var(--dbl-panel); }
.dbl-choose__stage { position: relative; display: grid; place-items: center; padding: clamp(22px, 3vw, 40px) clamp(28px, 5vw, 64px) clamp(18px, 2.4vw, 30px); background: radial-gradient(ellipse 70% 80% at 50% 62%, rgba(255,255,255,.16), transparent 72%), linear-gradient(180deg, #1a2836, #111c28); }
.dbl-choose__stage img { display: block; width: min(100%, 420px); height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.dbl-choose__volt { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 6px; background: var(--dbl-orange-btn); color: #fff; font-family: var(--ff-mono); font-size: 13px; font-weight: 600; letter-spacing: .1em; }
.dbl-choose__body { display: grid; align-content: start; gap: 12px; padding: clamp(18px, 2.2vw, 28px); }
.dbl-choose__code { margin: 0; color: #ffb48f; font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.dbl-choose h3 { margin: 0; color: #fff; font-size: clamp(26px, 2.2vw, 34px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.dbl-choose h3 span { display: block; margin-top: 4px; color: var(--dbl-on-dark); font-size: .55em; letter-spacing: -.005em; }
.dbl-choose__diff { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid rgba(255,255,255,.16); }
.dbl-choose__diff > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.dbl-choose__diff > div + div { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.12); }
.dbl-choose__diff dt { color: #9fb2c3; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.dbl-choose__diff dd { margin: 0; color: #fff; font-family: var(--ff-display); font-size: 21px; font-weight: 500; }
.dbl-choose__intro { margin: 0; color: var(--dbl-on-dark); font-size: 15.5px; line-height: 1.55; }
.dbl-choose__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 4px; }
.dbl-choose__spec, .dbl-choose__price { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--ff-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.dbl-choose__spec { padding: 0 16px; border-radius: 4px; background: #fff; color: var(--dbl-ink); }
.dbl-choose__spec:hover { background: #ffe4d6; }
.dbl-choose__spec .ic { width: 16px; height: 16px; }
.dbl-choose__price { color: #ffb48f; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,180,143,.5); }
.dbl-choose__price:hover { color: #fff; text-decoration-color: #fff; }
.dbl-choose__spec:focus-visible, .dbl-choose__price:focus-visible { outline: 2px solid var(--dbl-orange); outline-offset: 3px; }
.dbl-choose__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: clamp(20px, 2.6vw, 30px); }
.dbl-choose__same { margin: 0; color: var(--dbl-on-dark); font-size: 15px; line-height: 1.5; }
.dbl-choose__same b { display: inline-block; margin-right: 10px; color: #fff; font-family: var(--ff-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dbl-choose .btn--text { color: #ffb48f; }

/* landing: the two remaining "living with it" points sit under the comparison */
.dbl-why__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(28px, 3.5vw, 44px); background: transparent; }
.dbl-why__list--two li:nth-child(n) { margin-top: 0; border-top: 0; }
.dbl-why__list--two li + li { padding-left: 22px; border-left: 1px solid var(--dbl-line); }
.dbl-why__list--two li { padding: 22px; } /* equal inset on every side of both boxes */

/* ---- gallery ambient loops: the still is the base layer ---------------- */
.dbl-gal__item .dbl-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease-out); pointer-events: none; }
.dbl-gal__a .dbl-loop { object-position: 50% 50%; }
.dbl-gal__item.is-playing .dbl-loop { opacity: 1; }
/* Motion switch: no visible control over the imagery during normal pointer viewing. The button is
   clipped out of view until it takes keyboard focus, then appears as a solid chip. */
.dbl-motion-toggle { position: absolute; z-index: 3; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }
.dbl-motion-toggle:focus, .dbl-motion-toggle:focus-visible { width: auto; height: auto; min-height: 44px; overflow: visible; clip-path: none; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid #fff; border-radius: 999px; background: rgba(6, 14, 24, .92); color: #fff; font-family: var(--ff-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; outline: 2px solid var(--dbl-orange); outline-offset: 3px; }
.dbl-motion-toggle--tile { top: 12px; right: 12px; }
.dbl-motion-toggle--hero { left: clamp(20px, 4vw, 56px); bottom: 18px; }
/* hero motion candidate: sits on the still with the same crop and grade */
.dubbll-cinematic__media .dbl-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 53%; filter: saturate(.84) contrast(1.05) brightness(.94); opacity: 0; transition: opacity .8s var(--ease-out); pointer-events: none; }
.dubbll-cinematic.is-playing .dubbll-cinematic__media .dbl-loop { opacity: 1; }
@media (max-width: 960px) { .dubbll-cinematic__media .dbl-loop { object-position: 58% 50%; } }
@media (max-width: 640px) { .dubbll-cinematic__media .dbl-loop { object-position: 58% 47%; filter: saturate(.88) contrast(1.08) brightness(1.08); } }

/* ---- tech page: closed accordions, compact model summary, jump priority ---- */
.dbl-model { scroll-margin-top: 96px; }
.dbl-model__identity strong span { color: var(--dbl-text); font-size: .72em; font-weight: 500; }
.dbl-model__fine { margin: 10px 0 0; }
.dbl-jump a.is-minor { color: #9fb2c3; }
.dbl-jump a.is-minor:hover { color: #fff; }
.dbl-tech__rail--models { display: none; }

@media (max-width: 960px) {
  .dbl-choose__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  .dbl-choose { padding-block: 44px 52px; }
  .dbl-choose__head { gap: 10px; margin-bottom: 20px; }
  .dbl-choose__head .lede { font-size: 16px; }
  .dbl-choose__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .dbl-choose__stage { padding: 30px 12px 14px; }
  .dbl-choose__volt { top: 8px; left: 8px; padding: 4px 7px; font-size: 11.5px; }
  .dbl-choose__body { gap: 8px; padding: 14px 12px 16px; }
  .dbl-choose__code { font-size: 10.5px; letter-spacing: .06em; }
  .dbl-choose h3 { font-size: 22px; }
  .dbl-choose h3 span { font-size: 13px; }
  .dbl-choose__diff { grid-template-columns: minmax(0, 1fr); }
  .dbl-choose__diff > div { display: grid; gap: 4px; padding: 8px 0; }
  .dbl-choose__diff > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .dbl-choose__diff dd { font-size: 17px; }
  .dbl-choose__intro { display: none; }
  .dbl-choose__actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .dbl-choose__spec { justify-content: space-between; padding: 0 12px; font-size: 11.5px; }
  .dbl-choose__price { justify-content: center; font-size: 11.5px; }
  .dbl-why__list--two { grid-template-columns: minmax(0, 1fr); }
  .dbl-why__list--two li + li { padding-left: 22px; border-left: 0; border-top: 1px solid var(--dbl-line); }
  /* gallery stacks: the room loop leads; on phones it crops in on the unit and window */
  .dbl-gal__a img { aspect-ratio: 4 / 3; object-position: 85% 50%; }
  .dbl-gal__a .dbl-loop { object-position: 85% 50%; }
  /* phones: the up-close caption sits under the photo so it never covers the unit */
  .dbl-gal__b figcaption { position: static; max-width: none; margin: 0; border-radius: 0 0 12px 12px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: #16212d; }
  .dbl-gal__c img { aspect-ratio: 4 / 3; object-position: 50% 45%; }
  /* tech opening: quiet back link, compact description, metrics move into Models */
  .dbl-tech__inner { padding-top: 92px; }
  .dbl-back { min-height: 44px; padding: 0; border: 0; border-radius: 0; color: #dfe7ee; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
  .dbl-back:hover { background: none; color: #fff; }
  .dbl-tech__grid { gap: 14px; padding-block: 18px 22px; }
  .dbl-tech__title { font-size: 38px; }
  .dbl-tech__lede { font-size: 16px; }
  .dbl-tech__rail:not(.dbl-tech__rail--models) { display: none; }
  .dbl-tech__rail--models { display: grid; margin: 0 0 18px; border-top-color: var(--dbl-line); }
  .dbl-tech__rail--models > div { border-bottom-color: var(--dbl-line); }
  .dbl-tech__rail--models > div:nth-child(even) { border-left-color: var(--dbl-line); }
  .dbl-tech__rail--models dt { color: var(--dbl-orange-ink); }
  .dbl-tech__rail--models dd { color: var(--dbl-ink); font-size: 20px; }
  .dbl-tech__rail--models small { color: var(--dbl-text); }
  .dbl-jump a.is-minor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dbl-gal__item .dbl-loop, .dubbll-cinematic__media .dbl-loop { display: none; }
}

/* ---- compact footer variant (dubbll pages only) ------------------------- */
.site-footer--compact .site-footer__main { min-height: 0; padding-top: clamp(48px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 56px); }

/* =====================================================================
   Technical page refinement (Oct 2026): one model comparison, the
   branded monoblock panel, and restrained motion. Products page only.
   ===================================================================== */

/* ---- model comparison ------------------------------------------------- */
.dbl-cmp { --dbl-stick: 72px; margin-bottom: clamp(24px, 3vw, 36px); border: 1px solid #e6ded6; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(60, 36, 20, .05); overflow: clip; }
.dbl-cmp__scroll { position: relative; }
.dbl-cmp__scroll.is-overflow { overflow-x: auto; overscroll-behavior-x: contain; }
.dbl-cmp__scroll.is-overflow:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: -2px; }
.dbl-cmp__cue { margin: 0; padding: 10px 18px; border-bottom: 1px solid #eee6de; background: #fff7f1; color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dbl-cmp__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.dbl-cmp__table td { text-wrap: pretty; }
.dbl-cmp__table th, .dbl-cmp__table td { padding: 16px 24px; text-align: left; vertical-align: top; color: var(--dbl-ink); font-size: 15.5px; font-weight: 400; line-height: 1.5; }
.dbl-cmp__table td + td, .dbl-cmp__table th + td, .dbl-cmp__table th + th, .dbl-cmp__table td + th { border-left: 1px solid var(--dbl-line); }
.dbl-cmp__table tbody tr > *, .dbl-cmp__table tfoot tr > * { border-top: 1px solid var(--dbl-line); }
.dbl-cmp__table tbody th, .dbl-cmp__table tfoot th { width: 22%; padding-top: 19px; color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.dbl-cmp__corner { width: 22%; vertical-align: bottom !important; }
/* model headers: the official cutout first, then the exact code, voltage and boost */
.dbl-cmp__model { padding: 22px 24px 18px !important; border-bottom: 1px solid var(--dbl-ink); background: #fff; transition: background var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
.dbl-cmp__corner { border-bottom: 1px solid var(--dbl-ink); }
.dbl-cmp__stage { display: grid; place-items: center; margin-bottom: 16px; padding: 18px 12% 14px; border-radius: 10px; background: radial-gradient(ellipse 70% 60% at 50% 55%, #fff 0 40%, transparent 72%), linear-gradient(180deg, #f6f1ec, #efe8e1); }
.dbl-cmp__img { display: block; width: 100%; max-width: 300px; height: auto; filter: drop-shadow(0 10px 14px rgba(40, 24, 12, .14)); }
.dbl-cmp__code { display: block; margin-bottom: 6px; color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.dbl-cmp__name { display: block; font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.dbl-cmp__name span { color: var(--dbl-text); font-size: .62em; letter-spacing: 0; white-space: nowrap; }
.dbl-cmp__model:focus { outline: none; }
.dbl-cmp__model:focus-visible { outline: none; } /* not in the tab order; the target column carries its own marker */
.dbl-cmp__diff { display: block; width: max-content; margin-top: 8px; padding: 2px 7px; border-radius: 3px; background: #fff1e8; color: var(--dbl-orange-ink); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; }
/* rows that are identical for both models are written once, across both columns */
.dbl-cmp__both { display: block; margin-bottom: 4px; color: var(--fg-muted); font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.dbl-cmp__fine { display: block; margin-top: 6px; color: var(--dbl-text); font-size: 13px; line-height: 1.45; }
/* the expanded block opens with the two codes again, pinned under the site header while reading */
.dbl-cmp__sub > * { position: sticky; top: var(--dbl-stick); z-index: 2; padding-block: 12px !important; border-top: 1px solid var(--dbl-ink) !important; border-bottom: 1px solid var(--dbl-line); background: #fbf8f5 !important; color: var(--dbl-orange-ink) !important; font-family: var(--ff-mono); font-size: 12px !important; font-weight: 600 !important; letter-spacing: .12em; }
.dbl-cmp__sub th { color: var(--dbl-ink) !important; }
.dbl-cmp__sub small { margin-left: 8px; color: var(--dbl-text); font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.dbl-cmp__sub + tr > * { border-top: 0; }
/* pricing and documents stay in each model's own column */
.dbl-cmp__table tfoot tr > * { background: #fbf8f5; vertical-align: top; }
.dbl-cmp__act { display: grid; gap: 14px; }
.dbl-cmp__act .btn { justify-content: space-between; width: 100%; min-height: 48px; border-color: var(--dbl-orange-btn); color: var(--dbl-orange-ink); text-align: left; }
.dbl-cmp__act .btn:hover { background: var(--dbl-orange-btn); border-color: var(--dbl-orange-btn); color: #fff; }
.dbl-cmp__act .btn:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: 2px; }
.dbl-cmp__docs { display: grid; }
.dbl-cmp__docs > p { margin: 0 0 2px; color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dbl-cmp__docs .dubbll-download { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; min-height: 44px; padding: 10px 0; }
.dbl-cmp__docs .dubbll-download > span { grid-column: 1; }
.dbl-cmp__docs .dubbll-download > small { grid-column: 1; grid-row: 2; font-weight: 500; }
.dbl-cmp__docs .dubbll-download > svg { grid-column: 2; grid-row: 1 / span 2; }
.dbl-cmp__docs .dubbll-download:last-child { border-bottom: 0; }
/* the column a model link points at: a restrained tint and an orange rule on its header */
.dbl-cmp__table[data-target="a"] [data-col="a"], .dbl-cmp__table[data-target="b"] [data-col="b"] { background-color: #fff8f3; }
.dbl-cmp__table[data-target="a"] .dbl-cmp__model[data-col="a"], .dbl-cmp__table[data-target="b"] .dbl-cmp__model[data-col="b"] { box-shadow: inset 0 3px 0 var(--dbl-orange); }
.dbl-cmp__table[data-target] tfoot [data-col] { background-color: #fbf8f5; }
.dbl-cmp__table[data-target="a"] tfoot [data-col="a"], .dbl-cmp__table[data-target="b"] tfoot [data-col="b"] { background-color: #fff3ea; }
/* the full-width control below the rows */
.dbl-cmp__toggle { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 56px; padding: 12px 20px; border: 0; border-top: 1px solid #e6ded6; background: #fff; color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background var(--d-base) var(--ease-out); }
.dbl-cmp__toggle:hover { background: #fff6f0; }
.dbl-cmp__toggle:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: -4px; }
.dbl-cmp__toggle[hidden] { display: none; }
.dbl-cmp__chev { position: relative; flex: none; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; transition: transform var(--d-base) var(--ease-out); }
.dbl-cmp__chev::before { content: ""; position: absolute; left: 50%; top: 44%; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.dbl-cmp.is-open .dbl-cmp__chev { transform: rotate(180deg); }
.dbl-cmp .dbl-glance__same { margin: 0; padding: 14px 24px; border-top: 1px solid #eee6de; background: #fbf8f5; color: var(--dbl-text); font-size: 14.5px; }
.dbl-cmp__detail.is-opening > tr:not(.dbl-cmp__sub) > * { animation: dbl-cmp-in 240ms var(--ease-out) both; }
@keyframes dbl-cmp-in { from { opacity: 0; } to { opacity: 1; } }

/* phones and small tablets: the label sits above each row, the two model columns stay side by side */
@media (max-width: 700px) {
  .dbl-cmp__table, .dbl-cmp__table thead, .dbl-cmp__table tbody, .dbl-cmp__table tfoot { display: block; }
  .dbl-cmp__table tbody[hidden] { display: none; }
  .dbl-cmp__table { min-width: 300px; }
  .dbl-cmp__table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dbl-cmp__table th, .dbl-cmp__table td { padding: 12px 14px; font-size: 14.5px; }
  .dbl-cmp__table tbody th[scope="row"], .dbl-cmp__table tfoot th[scope="row"], .dbl-cmp__shared { grid-column: 1 / -1; }
  .dbl-cmp__table tbody th[scope="row"] { width: auto; padding: 14px 14px 0; border-left: 0; }
  .dbl-cmp__table tbody th[scope="row"] + td { border-left: 0; }
  .dbl-cmp__table tbody th[scope="row"] ~ td { border-top: 0; }
  .dbl-cmp__table tbody th[scope="row"] + td.dbl-cmp__shared { padding-top: 6px; }
  .dbl-cmp__diff { display: inline-block; margin: 0 0 0 8px; vertical-align: 1px; }
  .dbl-cmp__corner { position: absolute !important; width: 1px !important; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0 !important; border: 0 !important; }
  .dbl-cmp__model { padding: 14px 12px 14px !important; }
  .dbl-cmp__model + .dbl-cmp__model { border-left: 1px solid var(--dbl-line); }
  .dbl-cmp__stage { margin-bottom: 10px; padding: 12px 8% 10px; }
  .dbl-cmp__code { font-size: 11px; letter-spacing: .06em; }
  .dbl-cmp__name { font-size: 20px; }
  .dbl-cmp__name span { display: block; margin-top: 2px; font-size: 13px; white-space: normal; text-wrap: balance; }
  .dbl-cmp__sub > th { display: none; }
  .dbl-cmp__sub > td:first-of-type { border-left: 0; }
  .dbl-cmp__sub > * { font-size: 11px !important; letter-spacing: .06em; }
  .dbl-cmp__sub small { display: block; margin: 2px 0 0; }
  .dbl-cmp__table tfoot th[scope="row"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0; }
  .dbl-cmp__table tfoot td:first-of-type { border-left: 0; }
  .dbl-cmp__act .btn { padding: 10px 12px; font-size: 11px; letter-spacing: .03em; line-height: 1.4; }
  .dbl-cmp__act .btn .ic { display: none; }
  .dbl-cmp__docs .dubbll-download { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
  .dbl-cmp__docs .dubbll-download > span { grid-column: 1 / -1; font-size: 11px; letter-spacing: .03em; }
  .dbl-cmp__docs .dubbll-download > small { grid-column: 1; grid-row: 2; }
  .dbl-cmp__docs .dubbll-download > svg { grid-column: 2; grid-row: 2; justify-self: start; width: 14px; height: 14px; }
  .dbl-cmp__docs > p { font-size: 10.5px; letter-spacing: .06em; }
  .dbl-cmp__toggle { font-size: 11.5px; letter-spacing: .06em; text-wrap: balance; text-align: center; }
  .dbl-cmp .dbl-glance__same { padding: 12px 14px; font-size: 13.5px; }
}

/* ---- Why monoblock: the dubbll panel carries the official logo -------- */
.dbl-panel__head { min-height: 82px; }
.dbl-panel__brand { display: inline-flex; align-items: center; gap: 10px; }
.dbl-panel__logo { display: block; width: auto; height: 36px; }
.dbl-panel__brand > span { color: var(--dbl-ink); }
.dbl-panel--mono .dbl-panel__head { background: linear-gradient(180deg, #fff7f1, #fff); border-bottom-color: color-mix(in oklch, var(--dbl-orange) 30%, var(--dbl-line)); }
.dbl-zoom__head p { display: flex; align-items: center; gap: 10px; }
.dbl-zoom__head p > span { text-wrap: balance; }
/* the logo keeps its own orange and black, so in the dark dialog it sits on a light plate */
.dbl-zoom__logo { display: block; width: auto; height: 34px; padding: 6px 10px; border-radius: 6px; background: #fff; box-sizing: content-box; }
.dbl-zoom__logo[hidden] { display: none; }
@media (max-width: 760px) {
  .dbl-panel__head { min-height: 0; }
  .dbl-panel__logo { height: 26px; }
  .dbl-zoom__logo { height: 26px; }
}

/* ---- motion: operating range draw-in and a light reveal stagger -------- */
.dbl-range__chart.is-armed .dbl-range__bar { clip-path: inset(0 100% 0 0 round 4px); }
.dbl-range__chart.is-armed.is-drawn .dbl-range__bar { clip-path: inset(0 0 0 0 round 4px); transition: clip-path 620ms cubic-bezier(.22, .7, .2, 1) 140ms; }
.dbl-range__chart.is-armed.is-drawn .dbl-range__bar--cool { transition-delay: 260ms; }
.dbl-range__chart.is-armed .dbl-range__cap-table { opacity: 0; }
.dbl-range__chart.is-armed.is-drawn .dbl-range__cap-table { opacity: 1; transition: opacity 400ms var(--ease-out) 420ms; }
.dbl-compare__grid > .rise:nth-child(2).is-in, .dbl-install__views > .rise:nth-child(2).is-in { transition-delay: 90ms; }
.dbl-install__views > .rise:nth-child(3).is-in { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .dbl-range__chart .dbl-range__bar, .dbl-range__chart .dbl-range__cap-table { clip-path: none !important; opacity: 1 !important; transition: none !important; }
  .dbl-cmp__detail.is-opening > tr > * { animation: none; }
  .dbl-cmp__chev, .dbl-cmp__model, .dbl-cmp__toggle { transition: none; }
}
@media print {
  .dbl-cmp__table tbody[hidden] { display: table-row-group !important; }
  .dbl-cmp__toggle, .dbl-cmp__cue { display: none !important; }
  .dbl-cmp__sub > * { position: static; }
  .dbl-range__bar, .dbl-range__cap-table { clip-path: none !important; opacity: 1 !important; }
  .rise { opacity: 1 !important; transform: none !important; }
}

/* ==== Three models (2026-10-18): one 115V model and two 230V models under one bracket ==== */
/* landing chooser */
.dbl-choose__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; }
.dbl-choose__family { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.dbl-choose__fam { display: flex; align-items: center; gap: 12px; margin: 0; color: #ffb48f; font-family: var(--ff-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dbl-choose__fam::after { content: ""; flex: 1; height: 9px; border: 1px solid rgba(255, 180, 143, .5); border-bottom: 0; border-radius: 4px 4px 0 0; }
.dbl-choose__family--115 .dbl-choose__fam { color: #9fb2c3; }
.dbl-choose__family--115 .dbl-choose__fam::after { border-color: rgba(255, 255, 255, .2); }
.dbl-choose__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.dbl-choose__family--115 .dbl-choose__cards { grid-template-columns: minmax(0, 1fr); }
.dbl-choose__diff { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dbl-choose__diff > div { display: grid; align-content: start; gap: 4px; }
.dbl-choose__diff dd { font-size: 19px; }
.dbl-choose__sames { display: grid; gap: 4px; }
@media (max-width: 760px) {
  /* phones: three tall cards would bury the page, so each model becomes one compact row */
  .dbl-choose__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dbl-choose__cards, .dbl-choose__family--115 .dbl-choose__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dbl-choose__card { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto; }
  .dbl-choose__stage { padding: 14px 8px; }
  .dbl-choose__volt { display: none; }
  .dbl-choose__diff { display: none; }
  .dbl-choose__body { padding: 12px 12px 14px 4px; }
  .dbl-choose__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
}

/* comparison table: three columns, a group row, and spans that name who shares a value */
.dbl-cmp__groups > * { padding: 16px 24px 0 !important; border: 0 !important; background: #fff; }
.dbl-cmp__grp { display: flex; align-items: center; gap: 10px; color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dbl-cmp__grp::after { content: ""; flex: 1; height: 9px; border: 1px solid #f0c6ab; border-bottom: 0; border-radius: 4px 4px 0 0; }
.dbl-cmp__grp--115 { color: var(--fg-muted); }
.dbl-cmp__grp--115::after { border-color: var(--dbl-line); }
.dbl-cmp__shared--230 { background: #fffaf6; }
.dbl-cmp__shared--230 .dbl-cmp__both { color: var(--dbl-orange-ink); }
.dbl-cmp__table[data-target="c"] [data-col="c"] { background-color: #fff8f3; }
.dbl-cmp__table[data-target="c"] .dbl-cmp__model[data-col="c"] { box-shadow: inset 0 3px 0 var(--dbl-orange); }
.dbl-cmp__table[data-target="c"] tfoot [data-col="c"] { background-color: #fff3ea; }
.dbl-cmp__docs .dubbll-download--soon { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; min-height: 44px; margin: 0; padding: 10px 0; color: var(--dbl-text); }
.dbl-cmp__docs .dubbll-download--soon > small { color: var(--dbl-orange-ink); font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dbl-glance__same a { color: var(--dbl-orange-ink); text-underline-offset: 3px; }
.dbl-glance__same a:hover { color: #8f3811; }
.dbl-glance__same a:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: 2px; }
.dbl-cmp__pick { display: none; }
@media (max-width: 700px) {
  .dbl-cmp__groups { display: none !important; }
  .dbl-cmp__pick:not([hidden]) { display: grid; gap: 8px; padding: 14px; border-bottom: 1px solid #eee6de; background: #fbf8f5; }
  .dbl-cmp__pick > p { margin: 0; color: var(--fg-muted); font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .dbl-cmp__pick > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--dbl-line); border-radius: 8px; overflow: hidden; background: #fff; }
  .dbl-cmp__pick button { min-height: 48px; padding: 6px 4px; border: 0; background: #fff; color: var(--dbl-ink); font-family: var(--ff-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; line-height: 1.3; cursor: pointer; }
  .dbl-cmp__pick button + button { border-left: 1px solid var(--dbl-line); }
  .dbl-cmp__pick button:hover { background: #fff3ea; }
  .dbl-cmp__pick button[aria-pressed="true"] { background: var(--dbl-ink); color: #fff; }
  .dbl-cmp__pick button:focus-visible { outline: 2px solid var(--dbl-orange-btn); outline-offset: -3px; }
  /* two of the three model columns at a time */
  .dbl-cmp__table--3[data-pair="ab"] [data-col="c"], .dbl-cmp__table--3[data-pair="ac"] [data-col="b"], .dbl-cmp__table--3[data-pair="bc"] [data-col="a"] { display: none !important; }
  .dbl-cmp__table--3 .dbl-cmp__shared--230 { grid-column: auto; }
  .dbl-cmp__table--3[data-pair="bc"] .dbl-cmp__shared--230 { grid-column: 1 / -1; }
  .dbl-cmp__table--3[data-pair="bc"] [data-col="b"], .dbl-cmp__table--3[data-pair="bc"] [data-span="bc"] { border-left: 0 !important; }
  /* without JS there is no picker: all three columns stay side by side */
  .dbl-cmp__table--3:not([data-pair]) tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dbl-cmp__table--3:not([data-pair]) .dbl-cmp__shared--230 { grid-column: span 2; }
}
/* downloads: flyer for all three, then the manuals by model */
.dbl-docs__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dbl-doc--soon { border-style: dashed; background: transparent; }
.dbl-doc--soon:hover { border-color: var(--dbl-line); background: transparent; transform: none; }
.dbl-doc--soon .dbl-doc__meta { color: var(--dbl-orange-ink); font-weight: 600; }
@media (max-width: 1180px) {
  .dbl-docs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbl-docs__grid > :first-child { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 760px) { .dbl-docs__grid { grid-template-columns: minmax(0, 1fr); } }
.dbl-choose h3 span { text-wrap: balance; }
@media (max-width: 1100px) and (min-width: 761px) {
  .dbl-choose__diff { grid-template-columns: minmax(0, 1fr); }
  .dbl-choose__diff > div { display: flex; justify-content: space-between; align-items: baseline; }
  .dbl-choose__diff > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
}