/* HOMESTAT — the product pages, the Products page and the brand pages' cards: redesign A (Walid approved the mockup on
   16 Oct 2026; pp2/mock/redesign/). Experiment A's dot display carried into the product pages: an ink panel that is one
   dot display (assets/dotdisplay.js draws it), the name as a dot headline on the panel's grid, the brand's pictures on a
   paper plate inside the panel ("the light box"), the tools drawn in dots, the facts as mono figures with thin rules, the
   specifications as a mono readout. Loaded after site.css on these pages only. */

:root{--dx-field:#1C1C1C;--dx-wall:#626262;--dx-grey:#8A8A8A;--dx-dim:#3A3A3A;--plate:#F4F4F4;--mute-ink:#A3A3A3;--dxp:8px}

/* ---------- the review banner and the "to confirm" tag ---------- */
.pv-review{background:#FFF4EE;border-bottom:1px solid #F6D3C2;font-size:12px;line-height:1.5;color:#7A3A1E;padding:9px 0}
.pv-tc{display:inline-block;font-size:10.5px;line-height:1.5;letter-spacing:.3px;color:var(--acc);border:1px dashed var(--acc);border-radius:5px;padding:0 6px;white-space:nowrap;vertical-align:1px}
.on-ink .pv-tc{color:var(--acc-ink);border-color:var(--acc-ink)}
.rd-crumbs .crumbs{margin:14px 0 12px;flex-wrap:wrap}

/* ---------- the dots drawn in SVG: one path per kind (rd_art.py) ---------- */
.dg{display:block;overflow:visible}
.dg path{fill:none;stroke-linecap:round}

/* ---------- the dot display: an ink panel whose dots dotdisplay.js draws (Experiment A) ---------- */
.dx-sec{padding:0 0 28px}
/* overflow: clip, not hidden, so that a sticky child (the demo room on a phone) still sticks to the window */
.dx{position:relative;margin:0 clamp(8px,1vw,14px);background:var(--ink);color:var(--paper);border-radius:26px;overflow:hidden;overflow:clip;isolation:isolate}
.dx-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.dx-in{position:relative;z-index:1;max-width:1444px;margin:0 auto;padding:clamp(26px,4vw,56px) clamp(20px,4.2vw,62px) clamp(30px,3.4vw,46px)}
/* without JS, or before the canvas draws: the dot texture of the site's ink panels, so the panel never looks bare */
.dx::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(244,244,244,.07) 1px,transparent 1.3px);background-size:var(--dxp) var(--dxp);pointer-events:none;transition:opacity .3s}
.dx.live::before{opacity:0}
.dx-quiet::before{opacity:1!important}
.dx-pause{position:absolute;z-index:4;right:16px;bottom:12px;font-family:var(--mono);font-size:11px;color:var(--herosub);background:transparent;border:1px solid var(--line-ink);border-radius:14px;padding:0 12px;cursor:pointer;min-height:30px}
.dx-pause::before{content:"";position:absolute;inset:-7px -2px}   /* a 44 px target around the small pill */
.dx-pause:hover{color:var(--acc-ink);border-color:var(--acc-ink)}
.dx-pause:focus-visible{outline:2px solid var(--acc-ink);outline-offset:3px}
.dx-pause[hidden]{display:none}
@media(max-width:600px){.dx{border-radius:20px}.dx-pause{position:relative;display:block;right:auto;bottom:auto;margin:0 auto 18px;min-height:44px;border-radius:22px;padding:0 18px}}

/* the dot headline: the site's dot letters; once the canvas runs it draws the same dots on the panel's grid */
.dx-head{margin:0;line-height:0;color:var(--paper)}
.dx-hv{display:block;width:min(100%,calc(var(--cols) * var(--dxp)))}
.dx-hv svg{display:block;width:100%;height:auto;color:var(--paper);overflow:visible}
.dx-hv svg .a{stroke:var(--acc-ink)}
.dx-hv-narrow{display:none}
@media(max-width:600px){.dx-hv-wide{display:none}.dx-hv-narrow{display:block}}
.dx.live .dx-hv svg{visibility:hidden}

/* ---------- the product hero ---------- */
.ph-grid{display:grid;gap:26px 56px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.ph-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.ph-eyebrow{font-size:12.5px;color:var(--herosub);margin:0 0 18px}
.ph-eyebrow a{color:var(--herostory)}
.ph-code{font-size:12px;color:#8C8C8C;margin:16px 0 0}
.ph-lead{font-family:var(--serif);font-size:clamp(21px,1.85vw,26px);line-height:1.32;color:var(--paper);max-width:34ch;margin:18px 0 26px}
.ph-pick{margin:0 0 22px;padding-top:16px;border-top:1px solid var(--line-ink);max-width:520px}
.ph-pick-h{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:10px}
.ph-pick .picker-h{margin:0;color:var(--herosub)}
.ph-pick .picker-h span{color:var(--paper);font-weight:600;margin-inline-start:8px}
.ph-pick .picker-h .ph-optsize{color:var(--herosub);font-weight:400}
/* swatches: the brand's material in a 38 px circle, a 44 px target */
.ph-sw{gap:4px 6px}
.ph-sw .sw{width:44px;height:44px;border:0;border-radius:50%;background:none;padding:3px;position:relative;cursor:pointer;box-shadow:none}
.ph-sw .sw i{display:block;width:38px;height:38px;border-radius:50%;background:var(--sw);overflow:hidden;position:relative;box-shadow:0 0 0 1px #3A3A3A;transition:box-shadow var(--t)}
.ph-sw .sw i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-sw .sw:hover i{box-shadow:0 0 0 2px var(--ink),0 0 0 3px #6A6A6A}
.ph-sw .sw.on{box-shadow:none}
.ph-sw .sw.on i{box-shadow:0 0 0 2.5px var(--ink),0 0 0 4px var(--paper)}
.ph-sw .sw:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px}
.ph-fnote{font-size:12px;line-height:1.6;color:#8C8C8C;margin:10px 0 0;max-width:62ch}
/* the way into "Compare side by side" (templates/_compare.html opens) */
.cmp-entry{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 14px 0 12px;border:1px solid #3A3A3A;border-radius:20px;background:transparent;color:var(--paper);font-family:var(--mono);font-size:12px;font-weight:600;cursor:pointer;transition:border-color var(--t),color var(--t)}
.cmp-entry:hover{border-color:var(--acc-ink);color:var(--acc-ink)}
.cmp-entry:focus-visible{outline:2px solid var(--acc-ink);outline-offset:3px}
.cmp-entry .dg .gb{stroke:#8A8A8A}.cmp-entry .dg .gs{stroke:#3A3A3A}.cmp-entry .dg .gl{stroke:var(--paper)}
/* the option picker: each value drawn in dots (rd_art.opt_glyph) */
.ph-optpick{border-top:0;padding-top:0}
.ph-opts{display:flex;flex-wrap:wrap;gap:8px}
.ph-opts .opt{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;min-width:64px;min-height:96px;padding:10px 10px 9px;border:1px solid #2E2E2E;border-radius:12px;background:#111;color:var(--herosub);font-size:12px;cursor:pointer;transition:border-color var(--t),color var(--t),background var(--t)}
.ph-opts .opt:hover{border-color:#5A5A5A;color:var(--paper)}
.ph-opts .opt.on{background:#161616;border-color:var(--paper);color:var(--paper)}
.ph-opts .opt:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px}
.kg{height:auto}
.kg path{transition:stroke .2s}
.kg .gk{stroke:#4A4A4A}.kg .gl{stroke:#A3A3A3}.kg .gp{stroke:#262626}
.opt:hover .kg .gk{stroke:#6A6A6A}.opt:hover .kg .gp{stroke:#303030}
.opt.on .kg .gk{stroke:#8E8E8E}.opt.on .kg .gl{stroke:var(--paper)}.opt.on .kg .gp{stroke:#3A3A3A}
.ph-btns{gap:10px;margin:4px 0 12px}
.ph-note{font-size:12px;line-height:1.6;color:#8C8C8C;margin:0;max-width:52ch}

/* the media: the rail of views, the stage (a paper plate for pictures and the 3D, the dot display itself for In scale) */
.ph-media{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:start}
.ph-rail,.rb-tabs{display:flex;flex-direction:column;gap:8px}
.rb{display:block;width:100%;padding:0;border:0;background:none;color:var(--herosub);font-family:var(--mono);cursor:pointer;text-align:center;border-radius:11px}
.rb[hidden]{display:none}
a.rb{border:0}
.rb-box{position:relative;display:flex;align-items:center;justify-content:center;width:100%;border-radius:10px;overflow:hidden;transition:box-shadow var(--t)}
.rb-photo{height:66px;background:var(--plate);isolation:isolate}
.rb-photo img{width:100%;height:100%;object-fit:contain;padding:5px;mix-blend-mode:multiply}
.rb-noph{display:none}
.rb-photo.none img{display:none}
.rb-photo.none .rb-noph{display:block}
.rb-tool{flex-direction:column;gap:7px;height:76px;background:#111;box-shadow:inset 0 0 0 1px #262626}
.rb-tool b{font-size:10.5px;font-weight:400;line-height:1.15;letter-spacing:.01em;color:var(--herosub);transition:color var(--t)}
.rb-tool .dg .gb{stroke:#8A8A8A}.rb-tool .dg .gs{stroke:#2E2E2E}.rb-tool .dg .gl{stroke:#D6D6D6}
.rb:hover .rb-tool b{color:var(--acc-ink)}
.rb:hover .rb-photo{box-shadow:0 0 0 1px #6A6A6A}
.rb[aria-selected="true"] .rb-box{box-shadow:0 0 0 1.5px var(--paper)}
.rb[aria-selected="true"] .rb-tool b{color:var(--paper)}
.rb[aria-selected="true"] .rb-tool .dg .gb,.rb[aria-selected="true"] .rb-tool .dg .gl{stroke:var(--paper)}.rb[aria-selected="true"] .rb-tool .dg .gs{stroke:#4A4A4A}
.rb:focus-visible{outline:2px solid var(--acc-ink);outline-offset:3px}
.rb-rule{display:block;height:1px;background:var(--line-ink);margin:4px 10px}
.stage{position:relative;aspect-ratio:13/10}
.plate{position:absolute;inset:0;background:var(--plate);border-radius:18px;overflow:hidden;isolation:isolate;transition:opacity .28s ease}
.dx.live .stage.drawn .plate{opacity:0;pointer-events:none}
.pv-view{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease}
.pv-view[hidden]{display:none}
.pv-view img{width:100%;height:100%;object-fit:contain;padding:3.5%}
.pv-view.pv-cover img{object-fit:cover;padding:0}
.pv-view img.mul{mix-blend-mode:multiply}
.pv-view.fading{opacity:0}
/* a finish or an option with no brand photo yet: its drawing in dots, and the words */
.pv-noph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--soft);font-size:12px}
.pv-noph[hidden]{display:none}
.pv-noph p{margin:0}
.pv-ng .gb,.rb-ng .gb,.pv-ng .gk,.rb-ng .gk{stroke:#BDBDBD}.pv-ng .gs,.rb-ng .gs,.pv-ng .gp,.rb-ng .gp{stroke:#E0E0E0}.pv-ng .gl,.rb-ng .gl,.pv-ng .ga,.rb-ng .ga{stroke:#8A8A8A}
.pv-3d .p3d{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;background:var(--plate)}
.pv-hint{position:absolute;left:0;right:0;bottom:12px;margin:0 auto;text-align:center;font-size:11.5px;color:#5C5C5C;max-width:none;pointer-events:none}
.pv-hint [hidden]{display:none}
/* the light control on the 3D (14 Oct 2026): a room, the light's direction, a sweep; solid paper, no blur */
.pv-light[hidden]{display:none}
.pv-light{position:absolute;top:12px;left:12px;right:12px;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;line-height:1;pointer-events:none;color:var(--ink)}
.pv-light>*{pointer-events:auto}
.pv-light-set,.pv-light-turn,.pv-light-sweep{background:#fff;border:1px solid var(--line);border-radius:999px}
.pv-light-set{display:flex;padding:3px}
.pv-light button{font:inherit;color:var(--soft);background:none;border:0;border-radius:999px;padding:0 12px;min-height:34px;cursor:pointer;transition:background var(--t),color var(--t)}
.pv-light button:hover{color:var(--ink)}
.pv-light button[aria-pressed="true"]{background:var(--ink);color:#fff}
.pv-light-turn{display:flex;align-items:center;gap:10px;padding:0 14px;min-height:40px;color:var(--soft)}
.pv-light-turn input{width:110px;height:32px;margin:0;accent-color:var(--ink);cursor:pointer}
.pv-light .pv-light-sweep{min-height:40px;padding:0 14px;border:1px solid var(--line);background:#fff}
.pv-light .pv-light-sweep[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pv-light .pv-light-sweep[hidden]{display:none}
.pv-light button:focus-visible,.pv-light-turn input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* In scale: the dot display draws it; the SVG drawing shows only where the panel cannot draw */
.scale-view{position:absolute;inset:0}
.scale-view[hidden]{display:none}
.scale-svg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#F7F5F1;border-radius:18px;padding:4%}
.scale-svg[hidden]{display:none}
.scale-svg .pv-wall{width:100%;height:auto;max-height:100%;display:block}
.dx.live .scale-svg{display:none}
.scale-labels{position:absolute;inset:0;pointer-events:none}
.scale-labels span{position:absolute;font-size:9.5px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:#8A8A8A;white-space:nowrap;transform:translate(-50%,0)}
.scale-labels span.l{transform:none}
.scale-labels span.r{transform:translate(-100%,0)}
.scale-labels span.hi{color:var(--paper)}
.stage-cap{font-size:11.5px;line-height:1.55;color:#8C8C8C;margin:12px 0 0;min-height:3.1em;max-width:none}
.ph-figs{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;max-width:none}
@media(min-width:760px){.ph-figs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ph-figs li{margin:0;padding:11px 0 4px;border-top:1px solid var(--line-ink)}
.ph-figs .k{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7C7C7C;margin-bottom:5px}
.ph-figs .v{display:block;font-size:13px;line-height:1.5;color:#E6E6E6}
/* a phone: the name and the line, then the pictures, then the choices (Experiment A's order) */
@media(max-width:999px){
  .ph-copy{display:contents}
  .ph-eyebrow,.ph-copy .dx-head,.ph-code,.ph-lead{order:0}
  .ph-media{order:1}
  .ph-pick{order:2}.ph-btns{order:3}.ph-note{order:4}.ph-figs{order:5}
  .ph-grid{gap:0}
  .ph-media{margin:4px 0 24px;grid-template-columns:minmax(0,1fr)}
  .ph-rail{order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .rb-tabs{display:contents}
  .ph-rail .rb{width:auto}
  .rb-rule{display:none}
  .ph-stagecol{order:1}
  .ph-btns{margin-top:0}
  .ph-note{margin-bottom:24px}
  .ph-figs{margin-top:0}
  .ph-lead{margin-bottom:22px}
}
@media(max-width:600px){
  .stage{aspect-ratio:1/1}
  .ph-btns .btn{flex:1 1 100%}
  .pv-hint{font-size:10.5px;bottom:8px}.pv-hint-x{display:none}
  .pv-light{top:8px;left:8px;right:8px;gap:6px;font-size:10.5px;flex-wrap:nowrap}   /* one row, so it never covers the device */
  .pv-light-turn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* the slider keeps its name */
  .pv-light button{padding:0 9px}
  .pv-light-turn{padding:0 8px;min-width:0;flex:0 1 auto}.pv-light-turn input{width:64px;min-width:40px}
  .pv-light .pv-light-sweep{padding:0 10px}
  .ph-pick{max-width:none;display:flex;flex-direction:column}
  .ph-pick-h{display:contents}
  .ph-pick .picker-h{order:0;margin-bottom:10px}
  .ph-sw,.ph-opts{order:1}.ph-fnote{order:2}
  .ph-pick .cmp-entry{order:3;margin-top:14px;align-self:flex-start;min-height:44px}
  .ph-opts{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px}
  .ph-opts .opt{min-width:0;padding:10px 4px 9px}
  .ph-opts .opt .kg{max-width:100%}
}

/* ---------- the in-page navigation: solid paper, no blur ---------- */
.rd-nav{position:sticky;top:0;z-index:20;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:6px}
.rd-nav .wrap{display:flex;gap:30px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.rd-nav .wrap::-webkit-scrollbar{display:none}
.rd-nav a{display:inline-flex;align-items:center;gap:9px;min-height:48px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);border:0}
.rd-nav a i{width:6px;height:6px;border-radius:50%;background:#BDBDBD;transition:background var(--t)}
.rd-nav a:hover{color:var(--acc)}
.rd-nav a.on{color:var(--ink)}.rd-nav a.on i{background:var(--ink)}

/* ---------- reading sections on paper ---------- */
.rs{padding:clamp(56px,7.5vw,104px) 0 0;scroll-margin-top:52px}
.rs-last{padding-bottom:clamp(56px,7vw,96px)}
.rs-head{display:grid;gap:10px 56px;margin-bottom:clamp(26px,3.4vw,40px);align-items:start}
.rs-head .rs-text{padding-top:4px}
@media(min-width:960px){.rs-head{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.rs-head h2{margin:0}
.rs-head .eyebrow{margin-bottom:12px;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.rs-text{font-size:14px;line-height:1.75;color:#333;margin:0;max-width:68ch}
.rs-text-s{font-family:var(--serif);font-size:clamp(19px,1.7vw,22px);line-height:1.35;color:#2A2A2A}
.rs-small{font-size:12px;color:var(--soft);max-width:78ch;margin:18px 0 0}
/* design and materials: the brand's close-up of the chosen finish, then the notes */
.dm{display:grid;gap:28px 56px;align-items:start}
@media(min-width:960px){.dm{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.dm.dm-solo{grid-template-columns:minmax(0,1fr)}.dm-solo .dm-side{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px 56px;align-items:start}}
.dm-photo{margin:0}
.dm-plate{position:relative;background:var(--plate);border:1px solid var(--line);border-radius:26px;overflow:hidden;aspect-ratio:1400/927;isolation:isolate}
.dm-plate img{display:block;width:100%;height:100%;object-fit:cover}
.dm-plate.dm-contain img{object-fit:contain;padding:5%}
.dm-plate img[hidden],.mt-glass img[hidden]{display:none}
.dm-plate img.mul{mix-blend-mode:multiply}
.dm-photo figcaption{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--soft);margin-top:12px}
.dm-dot{width:8px;height:8px;border-radius:50%;background:#BDBDBD;flex:none}
.dm-notes{list-style:none;margin:0;padding:0;max-width:none}
.dm-notes li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start;margin:0;padding:18px 0;border-top:1px solid var(--line)}
.dm-notes li:first-child{border-top:0;padding-top:4px}
.dm-notes h3{font-size:22px;margin:0 0 6px}
.dm-notes p{font-size:13px;line-height:1.65;margin:0;color:#333}
.mt-sw{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);display:block}
.mt-glass{position:relative;display:block;width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.mt-glass img{width:100%;height:100%;object-fit:cover;display:block}
.mt-glass i{position:absolute;inset:9px;border-radius:50%;background:#111;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.mt-dg{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--card);border:1px solid var(--line)}
.mt-dg .dg{width:auto;height:auto;max-width:30px;max-height:30px}
.mt-dg .gb{stroke:#5C5C5C}.mt-dg .gs{stroke:#D6D6D6}.mt-dg .gl,.mt-dg .ga{stroke:#0A0A0A}
.dm-where{margin-top:8px;padding:20px 22px;background:var(--card);border:1px solid var(--line);border-radius:18px}
.dm-where h3{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:0 0 8px}
.dm-where p{font-size:13px;line-height:1.7;margin:0;color:#222}

/* ---------- try the screen: the second dot display; the screen beside the demo room (agent C) ---------- */
.ts-sec{padding-top:clamp(40px,5vw,72px);scroll-margin-top:52px}
.tr .dx-in{padding-top:clamp(30px,4.4vw,62px)}
.tr h2{color:var(--paper);margin:0 0 12px}
.tr .eyebrow{color:var(--herosub);margin-bottom:12px}
.tr-head{margin-bottom:34px;max-width:64ch}
.tr-lead{font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);line-height:1.38;color:var(--herostory);max-width:44ch;margin:0}
/* the screen at the left and the demo room at the right; a wide screen above its demo; without a demo, the screen alone */
.ts-stage{display:grid;gap:28px;align-items:start;margin-bottom:40px}
@media(min-width:1000px){.ts-has-demo:not(.ts-wide){grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:40px}}
.ts-screen{min-width:0}
.ts-demo{min-width:0}
.ts-screen .hsx-core-rc{margin:0 auto;max-width:min(520px,calc(100vh - 120px));max-width:min(520px,calc(100dvh - 120px))}
.ts-screen .hsx:not(.full),.ts-screen .hpx:not(.full){margin-top:0;margin-bottom:0}
.ts-screen .hpx:not(.full){max-width:min(1040px,calc((100vh - 120px) * 2061 / 1307));max-width:min(1040px,calc((100dvh - 120px) * 2061 / 1307))}
.ts-poster{display:none}
html:not(.js) .ts-poster{display:block;width:100%;max-width:520px;margin:0 auto;border-radius:14px}
html:not(.js) .ts-screen .hsx,html:not(.js) .ts-screen .hpx{display:none}
@media(max-width:999px){.ts-has-demo .ts-demo{order:-1}}
/* the demo beside a tall or square screen sits in the middle of its column; a wide screen gets smaller so that the
   screen and the villa under it fit in one window (lead, 16 Oct 2026, from agent C's note) */
@media(min-width:1000px){
  .ts-has-demo:not(.ts-wide) .ts-demo{align-self:center}
  .ts-wide.ts-has-demo .ts-screen .hsx:not(.full){margin-left:auto;margin-right:auto;max-width:min(1040px,calc((100vh - 470px) * 1.6));max-width:min(1040px,calc((100dvh - 470px) * 1.6))}
}
/* no script: no screen and no demo; the screen's poster stays */
html:not(.js) .ts-has-demo .ts-demo{display:none}
@media(min-width:1000px){html:not(.js) .ts-has-demo:not(.ts-wide){grid-template-columns:minmax(0,520px)}}
.pv-ui-bar{display:none;margin:16px 0 0;text-align:center;max-width:none}
@media(max-width:700px){.pv-ui-bar{display:block}}
.tr-tour{display:grid;gap:26px 56px;align-items:start}
@media(min-width:1000px){.tr-tour{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.tr-tour h3{color:var(--paper);margin:0 0 8px}
.tr .hpx-tour li{border-bottom-color:var(--line-ink);color:#E6E6E6;font-size:13.5px;padding-left:46px}
.tr .hpx-tour li::before{content:counter(hpstep,decimal-leading-zero);border:1px solid #3A3A3A;color:#9A9A9A;font-size:11px;width:28px;height:28px;top:9px}
.tr .hpx-tour li.done{color:#8F8F8F}
.tr .hpx-tour li.done::before{content:"✓";background:var(--paper);border-color:var(--paper);color:var(--ink)}
.tr .hpx-progress{color:#BDBDBD;font-size:12px}
.tr-side .btns{margin:0 0 14px}
.tr-side .cmp-try{margin:0 0 16px}
.tr-small{font-size:12px;line-height:1.6;color:#8C8C8C;max-width:56ch;margin:0}
/* the links to the screen land with the whole screen below the in-page menu (an offset box: WebKit lands it the same) */
.pv-anchor{display:block;position:relative;top:-64px;height:0;visibility:hidden}

/* ---------- specifications: a mono readout, as a spec sheet: each group's name on the left, its rows on the right ---------- */
.readout{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:clamp(8px,1.6vw,16px) clamp(18px,3.4vw,44px)}
.ro-g{display:grid;gap:4px 40px;padding:22px 0 20px;border-top:1px solid var(--line)}
.ro-g:first-child{border-top:0}
@media(min-width:900px){.ro-g{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.ro-g h3{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:0;padding:10px 0}
.ro-n{color:#9C9C9C;font-weight:400}
.ro-g dl{margin:0}
.ro-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.ro-row:last-child{border-bottom:0}
.ro-row dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);padding-top:2px}
.ro-row dd{margin:0;font-size:13px;line-height:1.6;color:#111;overflow-wrap:anywhere}
.ro-fins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
@media(min-width:1100px){.ro-fins{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ro-fin{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.ro-fin dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);min-width:66px}
.ro-fin dd{margin:0;display:flex;align-items:center;gap:9px;font-size:13px;color:#111}
.ro-fin img,.ro-fin i{width:18px;height:18px;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);flex:none;display:block}
@media(max-width:520px){.ro-row{grid-template-columns:104px minmax(0,1fr);gap:12px}.ro-fins{grid-template-columns:minmax(0,1fr)}}
/* works with: the rest of the range, as rows of the same readout */
.ww{list-style:none;margin:0;padding:clamp(8px,1.4vw,14px) clamp(14px,2.6vw,30px);background:var(--card);border:1px solid var(--line);border-radius:26px;display:grid;gap:0 48px;max-width:none}
@media(min-width:900px){.ww{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ww li{margin:0;border-bottom:1px solid var(--line)}
@media(min-width:900px){.ww li:nth-last-child(-n+2):nth-child(odd),.ww li:last-child{border-bottom:0}}
@media(max-width:899px){.ww li:last-child{border-bottom:0}}
.ww a{display:grid;grid-template-columns:26px 64px minmax(0,1fr) 20px;gap:16px;align-items:center;padding:14px 0;border:0}
.ww-n{font-size:11px;color:#9C9C9C}
.ww-img{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:12px;background:var(--plate);overflow:hidden;isolation:isolate}
.ww-img img{width:100%;height:100%;object-fit:contain;padding:6px;mix-blend-mode:multiply}
.ww-none{font-size:9px;line-height:1.3;text-align:center;color:var(--soft);padding:4px}
.ww-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ww-fam{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.ww-t b{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;transition:color var(--t)}
.ww-line{font-size:12px;line-height:1.5;color:#555}
.ww-go{color:#9C9C9C;transition:color var(--t),transform var(--t)}
.ww a:hover b,.ww a:hover .ww-go{color:var(--acc)}
.ww a:hover .ww-go{transform:translateX(3px)}
@media(max-width:420px){.ww a{grid-template-columns:52px minmax(0,1fr) 16px;gap:12px}.ww-n{display:none}.ww-img{width:52px;height:52px}}

/* ---------- the Products page ---------- */
.pi-grid{display:grid;gap:30px 56px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.pi-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.pi-lead{max-width:36ch}
.pi .notice.draft{max-width:56ch;font-size:12px;margin-top:0}
.pi-h{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7C7C7C;margin:0 0 12px}
.pi-cats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;max-width:none}
.pi-cats li{margin:0}
.cat{display:flex;flex-direction:column;border:0;color:var(--herosub);padding:0;border-radius:12px}
.cat-art{display:flex;align-items:center;justify-content:center;height:132px;border-radius:14px;box-shadow:inset 0 0 0 1px #1E1E1E;transition:box-shadow var(--t)}
.cat-art .dg{max-width:80%;max-height:80%;width:auto;height:auto}
.cat-g .gb{stroke:#505050}.cat-g .gs{stroke:#1F1F1F}.cat-g .gl,.cat-g .ga{stroke:#5C5C5C}
.dx.live .cat-art .dg{visibility:hidden}
.cat b{display:block;font-size:12.5px;font-weight:600;color:var(--herostory);margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line-ink);transition:color var(--t),border-color var(--t)}
.cat span:last-child{font-size:11px;line-height:1.5;color:#7C7C7C}
.cat:hover,.cat:focus-visible{color:var(--herosub)}
.cat:hover b,.cat:focus-visible b,.cat.wake b{color:var(--paper);border-color:#6A6A6A}
.cat:hover .cat-art,.cat.wake .cat-art{box-shadow:inset 0 0 0 1px #343434}
.cat[aria-current="true"] b{color:var(--paper);border-color:var(--paper)}
.cat:focus-visible{outline:2px solid var(--acc-ink);outline-offset:4px}
.dx-foot{position:relative;z-index:1;max-width:1444px;margin:0 auto;padding:0 clamp(20px,4.2vw,62px) clamp(34px,3.6vw,52px)}
.pi-brands ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 22px;max-width:none}
.pi-brands li{margin:0}
.pi-brands a{display:flex;flex-direction:column;gap:4px;border:0;border-top:1px solid var(--line-ink);padding-top:12px;height:100%}
.pi-brands b{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.9vw,26px);line-height:1.1;color:var(--paper);transition:color var(--t)}
.bl-n{font-size:11px;color:var(--herosub)}
.bl-line{font-size:11.5px;line-height:1.55;color:#8A8A8A;margin-top:4px}
.pi-brands a:hover b{color:var(--acc-ink)}
.pi-brands a:hover{border-color:#6A6A6A}
.pi-brands a:focus-visible{outline:2px solid var(--acc-ink);outline-offset:4px}
@media(max-width:999px){.pi-cats ul{grid-template-columns:repeat(3,minmax(0,1fr))}.pi-brands ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.pi-brands li{margin-bottom:14px}}
@media(max-width:600px){.pi-cats ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.cat-art{height:104px}.pi-brands ul{grid-template-columns:minmax(0,1fr)}.pi-brands a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline}.bl-line{grid-column:1/-1}}
.rs-types{padding-top:clamp(40px,5vw,72px)}
.rs-types .rs-head{margin-bottom:18px}
.rd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.rd-chips .chip{min-height:44px;font-size:12.5px}
.fam{padding:clamp(34px,4.4vw,56px) 0 0}
.fam[hidden]{display:none}
.fam-head{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:14px 0 18px;border-top:1px solid var(--line);margin-bottom:6px}
.fam-head h3{font-size:clamp(24px,2.3vw,30px);margin:0}
.fam-head p{font-size:12.5px;color:var(--soft);margin:0}
.fam-n{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.fam-art{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--ink)}
.fam-g .gb{stroke:#7A7A7A}.fam-g .gs{stroke:#2A2A2A}.fam-g .gl,.fam-g .ga{stroke:var(--paper)}
.fam-art .dg{width:auto;height:auto;max-width:36px;max-height:36px}
@media(max-width:700px){.fam-head{grid-template-columns:auto minmax(0,1fr) auto}.fam-head .fam-n{grid-row:1;grid-column:3}.fam-head p{grid-row:2;grid-column:1/-1}}
/* the cards (the Products page and the brand pages): the whole card is the link */
.pcs{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
@media(min-width:720px){.pcs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1040px){.pcs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pc{position:relative;margin:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.pc:hover{box-shadow:0 0 0 1.5px var(--acc),0 8px 22px rgba(0,0,0,.06);border-color:var(--acc);transform:translateY(-1px)}
.pc-img{position:relative;display:block;aspect-ratio:1/1;margin:8px 8px 0;border-radius:12px;background:var(--plate);overflow:hidden;isolation:isolate}
.pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12%;mix-blend-mode:multiply;transition:opacity .2s}
.pc-img img[hidden]{display:none}
.pc-img.nophoto img{opacity:.35}
.pc-none{position:absolute;left:10px;right:10px;bottom:10px;font-size:10.5px;line-height:1.4;color:var(--soft);text-align:center}
.pc-none[hidden]{display:none}
.pc-drawn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--ink);color:#8A8A8A;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:10px}
.pc-drawn .dg{max-width:60%;max-height:60%;width:auto;height:auto}
.pc-g .gb,.pc-g .gk{stroke:#5A5A5A}.pc-g .gs,.pc-g .gp{stroke:#242424}.pc-g .gl,.pc-g .ga{stroke:var(--paper)}
.pc-meta{padding:12px 16px 16px;display:flex;flex-direction:column;gap:2px;flex:1}
.pc-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:0}
.pc-demo{display:inline-flex;align-items:center;gap:6px;letter-spacing:.04em;text-transform:none;color:#3A3A3A;white-space:nowrap}
.pc-demo .dg{width:13px;height:13px;flex:none}
.pc-demo .gb{stroke:#5C5C5C}.pc-demo .gs{stroke:#CFCFCF}.pc-demo .gl{stroke:#0A0A0A}
@media(max-width:600px){.pc-demo-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
.pc h3,.pc h4{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;margin:0 0 8px}
.pc h3 a,.pc h4 a{border:0}
.pc h3 a::after,.pc h4 a::after{content:"";position:absolute;inset:0;border-radius:18px;z-index:1}   /* the whole card opens the product */
.pc h3 a:focus-visible,.pc h4 a:focus-visible{outline:0}
.pc h3 a:focus-visible::after,.pc h4 a:focus-visible::after{outline:2px solid var(--acc);outline-offset:3px}
.pc:hover h3 a,.pc:hover h4 a{color:var(--acc)}
.pc-sw{position:relative;z-index:2;gap:2px 4px;margin-top:auto}
@media(hover:none){.pc-sw .sw{pointer-events:none}}   /* on a touch screen the dots show the finishes; the product page picks one */
.pc-sw .sw{width:30px;height:30px;border:0;border-radius:50%;padding:4px;background:none;box-shadow:none;position:relative;cursor:pointer}
.pc-sw .sw::after{content:"";position:absolute;inset:-7px -1px}   /* a 44 px target */
.pc-sw .sw i{display:block;width:22px;height:22px;border-radius:50%;background:var(--sw);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.pc-sw .sw i img{width:100%;height:100%;object-fit:cover;display:block}
.pc-sw .sw.on{box-shadow:none}
.pc-sw .sw.on i{box-shadow:0 0 0 2px var(--card),0 0 0 3.2px var(--ink)}
.pc-sw .swname{font-size:11.5px;color:var(--soft);margin-inline-start:6px}
@media(max-width:600px){.pcs{gap:10px}.pc-meta{padding:10px 12px 12px}.pc h3,.pc h4{font-size:18px}.pc-sw .swname{display:block;width:100%;margin:2px 0 0}.pc-img img{padding:10%}}
.rd-closing{margin-top:clamp(56px,7vw,96px)}
.rd-closing .closing-in{text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.rd-closing .dh{margin-inline:auto}
.rd-closing .lead{margin-inline:auto;max-width:36ch;text-align:center;color:var(--herostory)}
.rd-closing .btns{justify-content:center}
#samples .samplesband{margin-top:0}

@media(prefers-reduced-motion:reduce){.plate,.pv-view,.pc,.pc-img img,.kg path,.rb-box{transition:none!important}.pc:hover{transform:none}}