@font-face{font-family:"ABC Oracle";src:url("fonts/ABCOracle-Regular.woff2") format("woff2"),url("fonts/ABCOracle-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
:root{--font:"ABC Oracle",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--h-blue:#3A5BFF;--h-yellow:#F3FF51;--h-purple:#CCAED0;--h-red:#F9423A;--h-green:#00AB84;--bg:#f5f3ee;--paper:#fff;--ink:#141414;--mute:#6f6c66;--line:#e3dfd6;--acc:#3A5BFF;--accs:#E6EBFF;--sage:#9fb3a3;--warm:#ece7dc;--side:212px;--det:420px;--hdr:64px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2{font-family:var(--font);font-weight:400;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(26px,3vw,40px);line-height:1.12}
h2{font-size:26px}
h3{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin:26px 0 10px;font-weight:600}
code{background:var(--warm);padding:1px 5px;border-radius:4px;font-size:13px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:600;color:var(--acc);margin:0 0 8px}
.lede{color:var(--mute);font-size:16px;max-width:620px;margin:12px 0 0}.lede.sm{font-size:15px}
.note{font-size:12.5px;color:var(--mute)}

/* header */
.top{position:sticky;top:0;z-index:30;height:var(--hdr);display:flex;align-items:center;gap:20px;padding:0 28px;background:rgba(245,243,238,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{text-decoration:none;display:flex;align-items:center}
.logo img{height:20px;width:auto;display:block}
.logo span{font-weight:400;letter-spacing:.04em;font-size:12px;color:var(--mute);margin-left:14px;padding-left:14px;border-left:1px solid var(--line)}
.top .right{margin-left:auto;display:flex;gap:8px}
.menu{display:none;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:6px 11px}
.btn{display:inline-block;text-decoration:none;font-size:13px;font-weight:500;border:1px solid var(--line);background:var(--paper);padding:8px 15px;border-radius:99px;white-space:nowrap;color:var(--ink)}
.btn:hover{border-color:var(--ink)}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}.btn.dark:hover{background:var(--acc);border-color:var(--acc)}
.dummy{text-align:center;font-size:12px;padding:6px;background:var(--warm);color:#5d574b}

/* three-column frame */
.frame{display:grid;grid-template-columns:var(--side) minmax(0,1fr) var(--det);min-height:calc(100vh - var(--hdr))}

/* left sidebar */
.side{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));overflow-y:auto;padding:18px 14px 28px;border-right:1px solid var(--line);background:#faf8f4}
.side .sec{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#9a958b;margin:22px 12px 8px}
.side .sec:first-child{margin-top:6px}
.nav{white-space:nowrap;display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border:0;background:transparent;border-radius:10px;text-align:left;text-decoration:none;font-size:14px;font-weight:500;color:var(--mute)}
.nav i{font-style:normal;width:20px;text-align:center;font-size:15px}
.nav:hover{color:var(--ink);background:var(--warm)}
.nav.on{color:var(--acc);background:var(--accs)}
.nav.int{border:1px dashed var(--line)}
.count{margin-left:auto;font-size:11px;background:var(--warm);color:var(--mute);border-radius:99px;padding:0 8px}
.nav.on .count{background:#fff}
.side-card{margin:26px 4px 0;background:var(--accs);border-radius:16px;padding:16px;color:#2c4a3d}
.side-card b{font-family:var(--font);font-weight:400;font-size:19px;display:block;line-height:1.2}
.side-card p{font-size:12.5px;margin:6px 0 0;color:#46614f}
.side-foot{margin:20px 12px 0;font-size:11.5px;color:#9a958b}

/* centre workspace */
.work{min-width:0;padding:0 32px 40px}
.work>section{display:none}.work>section.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero{padding:36px 0 18px}.hero.sm{padding:32px 0 12px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 20px}
.metrics div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:13px 16px}
.metrics b{display:block;font-family:var(--font);font-weight:600;font-size:22px}
.metrics span{font-size:11.5px;color:var(--mute)}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:var(--paper);color:var(--mute)}
.search input{border:0;outline:0;background:transparent;width:100%;padding:10px 0;font:inherit;font-size:14px;color:var(--ink)}
.filters{display:flex;gap:6px}
.famsel{font:inherit;font-size:13.5px;border:1px solid var(--line);background:var(--paper);padding:9px 14px;border-radius:99px;color:var(--ink);min-width:170px}
.primary:disabled{opacity:.4;cursor:not-allowed}
.filters button{font-size:13px;font-weight:500;border:1px solid var(--line);background:var(--paper);padding:7px 15px;border-radius:99px}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:var(--paper);border-radius:18px;overflow:hidden;text-decoration:none;border:1px solid var(--line);transition:transform .25s,box-shadow .25s,border-color .2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(0,0,0,.28)}
.card.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.card .img{aspect-ratio:4/3;background:radial-gradient(circle at 50% 35%,#fff 0%,#efebe3 75%);display:flex;align-items:center;justify-content:center;position:relative}
.card .img img{width:100%;height:100%;object-fit:contain}
.card .tag{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:600;background:#fff;padding:3px 9px;border-radius:99px;border:1px solid var(--line)}
.card .body{padding:13px 15px 15px}
.card .name{font-family:var(--font);font-size:18px;line-height:1.25}
.card .meta{color:var(--mute);font-size:12.5px;margin-top:2px}
.card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;color:var(--mute)}
.card .foot b{font-size:15px;color:var(--ink)}
.empty{display:none;padding:40px;text-align:center;color:var(--mute);background:var(--paper);border:1px solid var(--line);border-radius:18px}

/* quote basket */
.quote{margin-top:28px;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.quote-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 20px}
.quote-head h2{font-size:22px}
.qbtns{display:flex;gap:8px}
.qt{width:100%;border-collapse:collapse;font-size:13px}
.qt th,.qt td{padding:10px 14px;border-top:1px solid var(--line);text-align:left}
.qt th{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-weight:600;background:#faf9f6}
.qt td.r,.qt th.r{text-align:right}
.qt .rm{border:0;background:none;color:var(--mute);font-size:15px}
.qtotal{display:flex;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--line);font-weight:600}
.qempty{padding:4px 20px 20px;color:var(--mute);font-size:13px}

/* right detail panel */
.detail{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));overflow-y:auto;background:var(--paper);border-left:1px solid var(--line);padding:22px 22px 32px;min-width:0}
.dtop{display:flex;justify-content:space-between;align-items:center}
.dtop .eyebrow{margin:0}
.x{border:1px solid var(--line);background:var(--paper);border-radius:99px;width:32px;height:32px;display:none}
.detail h2{font-size:28px;margin:6px 0 4px;line-height:1.15}
.detail .desc{color:var(--mute);font-size:14px;margin:0 0 14px}
.stage{position:relative;height:300px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#ffffff 0%,#f0ece4 60%,#e6e0d4 100%);border:1px solid var(--line);cursor:grab}
.stage:active{cursor:grabbing}
.stage.sm{height:420px}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.stage canvas{display:block;width:100%!important;height:100%!important}
.stage-badge{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:600;background:rgba(255,255,255,.9);padding:4px 10px;border-radius:99px;border:1px solid var(--line)}
.stage-hint{position:absolute;bottom:10px;right:14px;font-size:11px;color:var(--mute);z-index:2}
.dimlabels{position:absolute;inset:0;pointer-events:none;z-index:3}
.dimlabels span{position:absolute;transform:translate(-50%,-50%);background:var(--ink);color:#fff;font-size:11px;font-weight:600;padding:3px 7px;border-radius:6px;white-space:nowrap}
.toolbar{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;align-items:center}
.toolbar button{font-size:12px;font-weight:500;border:1px solid var(--line);background:var(--paper);padding:6px 10px;border-radius:99px}
.toolbar button:hover{border-color:var(--ink)}.toolbar button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.toolbar .sep{width:1px;height:18px;background:var(--line);margin:0 2px}
.colourbar{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.lbl{font-size:12px;color:var(--mute)}
.sw{display:flex;gap:6px;flex-wrap:wrap}
.sw i{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);transition:transform .15s}
.sw i:hover{transform:scale(1.12)}.sw i.on{box-shadow:0 0 0 2px var(--ink)}
.sw i.orig{background:conic-gradient(#ddd 0 25%,#fff 0 50%,#ddd 0 75%,#fff 0);background-size:8px 8px}
.pricebox{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:18px}
.pricebox div{background:var(--paper);padding:11px 12px}
.pricebox b{display:block;font-size:19px;font-family:var(--font);font-weight:600}
.pricebox span{font-size:11px;color:var(--mute)}
.flabel{display:block;font-size:11px;color:var(--mute);margin:10px 0 6px}
.qtybar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.qtybar button,.opts button{font-size:12px;font-weight:500;border:1px solid var(--line);background:var(--paper);padding:7px 0;border-radius:10px}
.qtybar button.on,.opts button.on{background:var(--accs);border-color:var(--acc);color:var(--acc)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.opts button{padding:7px 4px;line-height:1.25}
.costcard{margin:14px 0 0;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 15px}
.costcard .flabel{margin-top:0}
.costcard .figure{font-family:var(--font);font-size:30px;font-weight:600;line-height:1.1}
.costcard .rows{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mute);margin-top:6px}
.costcard .rows.tot{border-top:1px solid var(--line);padding-top:9px;margin-top:9px;color:var(--ink)}
.costcard .rows.tot b{color:var(--acc);font-size:15px}
.costcard small{display:block;font-size:11px;color:var(--mute);margin-top:6px}
.dactions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.dactions .primary{padding:10px 12px}.dactions .btn{text-align:center;padding:10px 12px}
.spec{width:100%;border-collapse:collapse;font-size:13px}
.spec td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child{color:var(--mute);width:40%;padding-right:8px}
.ind{font-size:10px;font-weight:600;color:#9a7b2c;background:#f7efd9;padding:1px 6px;border-radius:99px;margin-left:6px;vertical-align:middle}
.deco{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:11px 13px;margin-bottom:8px}
.deco b{display:block}.deco span{font-size:13px;color:var(--mute)}.deco em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--acc)}
.impact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.impact div{background:var(--accs);border-radius:12px;padding:12px}
.impact b{display:block;font-family:var(--font);font-size:22px;font-weight:600;color:var(--acc)}
.impact span{font-size:12px;color:#3d5a4d}

/* request */
.request{display:grid;grid-template-columns:1fr 1.4fr;gap:36px;padding:30px;background:var(--paper);border:1px solid var(--line);border-radius:22px}
.reqsum{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:13.5px}
.reqsum b{font-family:var(--font);font-weight:400;font-size:20px;display:block;margin-bottom:4px}
.reqsum .note{display:block;margin-top:6px}
form label{display:block;font-size:12.5px;color:var(--mute);margin-bottom:12px}
form input,form select,form textarea{display:block;width:100%;margin-top:5px;font:inherit;font-size:14px;color:var(--ink);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fcfbf8}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp{display:none}
.primary{font:inherit;font-weight:600;font-size:14px;background:var(--ink);color:#fff;border:0;border-radius:99px;padding:12px 26px;cursor:pointer}
.primary:hover{background:var(--acc)}
.formmsg{font-size:13px;margin:10px 0 0}
.logo-prev{margin-top:16px;height:140px;border:1px dashed var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:13px;background:#fcfbf8}
.logo-prev img{max-height:100px;max-width:80%}

/* compare */
.tablewrap{overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:18px;margin-top:12px}
.cmp{border-collapse:collapse;width:100%;font-size:13.5px;min-width:900px}
.cmp th,.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.cmp thead th{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-weight:600;background:#faf9f6}
.cmp td a{font-weight:600;text-decoration:none}.cmp td a:hover{color:var(--acc)}
.cmp tr:hover td{background:#faf9f6}

/* options */
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.palette div{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:13px}
.palette div i{display:block;height:72px}.palette div span{display:block;padding:8px 10px}
.decos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.decos .deco{padding:16px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.facts div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px}
.facts b{display:block;font-family:var(--font);font-size:20px;font-weight:600}.facts span{font-size:12.5px;color:var(--mute)}

/* studio */
.studio{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:22px;border:2px dashed var(--line);border-radius:16px;background:var(--paper);cursor:pointer;margin-bottom:12px;text-align:center}
.drop.over{border-color:var(--acc);background:var(--accs)}
.drop input{display:none}.drop span{font-size:12.5px;color:var(--mute)}
.studio label{display:block;font-size:12.5px;color:var(--mute)}
.studio select{display:block;width:100%;margin-top:5px;font:inherit;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.measure{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.measure div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px}
.measure b{display:block;font-size:18px}.measure span{font-size:11.5px;color:var(--mute)}
pre{background:#1b1b1b;color:#e9e6dd;padding:14px;border-radius:12px;font-size:12px;overflow:auto;white-space:pre-wrap}
.howto{padding-left:18px;font-size:14px;color:#3b3934}.howto li{margin-bottom:8px}

footer{font-size:12px;color:var(--mute);padding:28px 0 0;margin-top:36px;border-top:1px solid var(--line)}

/* modal + toast */
.modalBg{position:fixed;inset:0;background:rgba(20,20,20,.4);z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
.modalBg.open{display:flex}
.modal{width:min(720px,100%);max-height:92vh;overflow:auto;background:var(--paper);border-radius:22px;padding:26px 28px}
.mhead{display:flex;justify-content:space-between;align-items:center}.mhead .x{display:block}
.modal h2{margin:4px 0}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.mbox{border:1px dashed var(--sage);background:#faf9f6;border-radius:14px;padding:16px}
.mbox h3{margin:0 0 4px;color:var(--ink)}.mbox p{font-size:12.5px;color:var(--mute);margin:0 0 12px}
.mbox .primary{padding:9px 18px;font-size:13px}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;font-size:13px;opacity:0;transition:.3s;pointer-events:none;z-index:80}
#toast.on{opacity:1;transform:translateX(-50%)}
.scrim{display:none}

/* ---------- responsive ---------- */
@media(max-width:1340px){:root{--side:196px;--det:370px}.work{padding:0 22px 40px}.stage{height:270px}}

/* tablet: right panel becomes a slide-over */
@media(max-width:1100px){
  .frame{grid-template-columns:var(--side) minmax(0,1fr)}
  .detail{position:fixed;top:var(--hdr);right:0;bottom:0;height:auto;width:min(440px,100%);z-index:40;transform:translateX(100%);transition:transform .3s ease;box-shadow:-20px 0 40px -20px rgba(0,0,0,.25)}
  body.detail-open .detail{transform:none}
  .x{display:block}
  .scrim{position:fixed;inset:var(--hdr) 0 0 0;background:rgba(20,20,20,.25);z-index:35}
  body.detail-open .scrim{display:block}
  .request,.studio{grid-template-columns:1fr}
  .decos,.facts{grid-template-columns:1fr 1fr}
}

/* mobile: sidebar becomes a drawer */
@media(max-width:720px){
  :root{--hdr:56px}
  .top{padding:0 14px;gap:10px}
  .menu{display:block}
  .logo span{display:none}
  
  .frame{display:block}
  .side{position:fixed;top:var(--hdr);left:0;bottom:0;height:auto;width:250px;z-index:45;transform:translateX(-100%);transition:transform .3s ease;background:#faf8f4}
  body.side-open .side{transform:none}
  body.side-open .scrim{display:block;position:fixed;inset:var(--hdr) 0 0 0;background:rgba(20,20,20,.25);z-index:42}
  .work{padding:0 15px 30px}
  .hero{padding:22px 0 10px}
  .metrics{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card .name{font-size:15px}.card .meta{display:none}
  .detail{width:100%;padding:18px 16px 28px}
  .row2,.mgrid{grid-template-columns:1fr}
  .request{padding:18px}
  .qt th:nth-child(3),.qt td:nth-child(3){display:none}
}

/* print = catalogue export */
@media print{
  .top,.side,.detail,.dummy,.scrim,.modalBg,#toast,footer{display:none!important}
  .frame{display:block}.work{padding:0}
  .work>section{display:none!important}#v-compare{display:block!important}
  .cmp{min-width:0;font-size:10px}.tablewrap{border:0;overflow:visible}
  body.print-deck .frame{display:none!important}
  body.print-deck #deckPrint{display:block!important}
}
#deckPrint{display:none}
@page{margin:0}
body.print-deck{background:#fff}

/* client login / price gating */
body:not(.priced) .pr{display:none!important}
body.priced .pub{display:none!important}
body:not(.internal) .int-only{display:none!important}
.lockp{font-size:12px;color:var(--acc);font-weight:600}
.pubprice{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px!important}
.pubprice b{font-family:var(--font);font-weight:400!important;font-size:19px!important}
.pubprice span{font-size:13px!important}
.modal.sm{width:min(440px,100%)}
.loginf{display:flex;gap:8px;margin-top:14px}
.loginf input{flex:1;font:inherit;font-size:15px;letter-spacing:.08em;text-transform:uppercase;padding:11px 14px;border:1px solid var(--line);border-radius:99px;background:#fcfbf8}
.pricelock{margin-top:24px;padding:16px;border:1px dashed var(--sage);border-radius:14px;background:#faf9f6}
.pricelock h3{margin-top:0}
.pricelock textarea{display:block;width:100%;margin:5px 0 12px;font:12px/1.4 ui-monospace,Menlo,monospace;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}
@media(max-width:720px){.hide-sm{display:none!important}}

/* range builder */
.builder{display:grid;grid-template-columns:minmax(260px,1fr) 1.4fr;gap:24px;align-items:start}
.bset{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px}
.bset label{display:block;font-size:12.5px;color:var(--mute);margin-bottom:12px}
.bset input:not([type=checkbox]){display:block;width:100%;margin-top:5px;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fcfbf8}
.bset .chk{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:13.5px}
.logo-prev.sm{height:90px;margin:0 0 14px}
.bbtns{display:flex;flex-direction:column;gap:8px;margin-top:6px}.bbtns .btn{text-align:center;padding:10px}
.dlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dlist .di{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px 10px 10px;font-size:12.5px}
.dlist .di img{width:100%;aspect-ratio:4/3;object-fit:contain;background:radial-gradient(circle,#fff,#efebe3);border-radius:10px}
.dlist .di b{display:block;font-family:var(--font);font-weight:400;font-size:15px;margin-top:6px}
.dlist .di button{position:absolute;top:6px;right:6px;border:1px solid var(--line);background:#fff;border-radius:99px;width:26px;height:26px}
.dempty{color:var(--mute);font-size:13px;padding:20px;border:1px dashed var(--line);border-radius:14px}
.dactions.two{margin-top:8px}.dactions.two .btn{text-align:center}

/* deck slides (print) */
.slide{width:297mm;height:167mm;page-break-after:always;break-after:page;position:relative;overflow:hidden;background:#f5f3ee;color:#141414;font-family:var(--font);-webkit-print-color-adjust:exact;print-color-adjust:exact;padding:16mm 18mm}
.slide .brand{position:absolute;left:18mm;bottom:10mm;height:4.2mm;width:auto}
.slide .clogo{position:absolute;right:18mm;bottom:8mm;max-height:12mm;max-width:40mm;object-fit:contain}
.slide .pg{position:absolute;right:18mm;top:10mm;font-size:8pt;color:#6f6c66;letter-spacing:.14em;text-transform:uppercase}
.slide h1{font-family:var(--font);font-weight:400;font-size:34pt;line-height:1.08;margin:0}
.slide h2{font-family:var(--font);font-weight:400;font-size:26pt;margin:0 0 3mm}
.slide .ey{text-transform:uppercase;letter-spacing:.2em;font-size:8pt;font-weight:600;color:#3A5BFF;margin-bottom:4mm}
.slide p{font-size:11pt;line-height:1.5;color:#3b3934;margin:0 0 3mm}
.s-cover{background:#3A5BFF;color:#fff;display:flex;flex-direction:column;justify-content:center}
.s-cover .ey{color:#cfe0d4}.s-cover h1{color:#fff;font-size:42pt;max-width:200mm}.s-cover p{color:#dfe9e2;font-size:13pt}

.s-cover .cobrand{display:flex;align-items:center;gap:8mm;margin-bottom:10mm}
.s-cover .cobrand .w{font-weight:700;letter-spacing:.08em;font-size:22pt}
.s-cover .cobrand .wl{height:11mm;width:auto}
.s-cover .cobrand .x{font-size:16pt;opacity:.7}
.s-cover .cobrand img:not(.wl){max-height:20mm;max-width:70mm;background:#fff;padding:3mm 5mm;border-radius:3mm}
.s-intro .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;margin-top:5mm}
.s-intro h2{font-size:22pt}.s-intro p{font-size:10pt}
.slide:last-child{page-break-after:auto;break-after:auto}
.s-intro .cols div{background:#fff;border-radius:4mm;padding:4mm 5mm}
.s-intro .cols b{display:block;font-family:var(--font);font-weight:600;font-size:16pt;color:#3A5BFF}
.s-intro .cols span{font-size:9.5pt;color:#3b3934}
.s-prod{display:grid;grid-template-columns:1.1fr 1fr;gap:12mm;align-items:center}
.s-prod .pi{height:125mm;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#fff 0%,#ece7dc 80%);border-radius:6mm}
.s-prod .pi img{max-width:92%;max-height:92%;object-fit:contain}
.s-prod table{width:100%;border-collapse:collapse;font-size:9.5pt;margin-top:4mm}
.s-prod td{padding:1.8mm 0;border-bottom:.3mm solid #e3dfd6;vertical-align:top}
.s-prod td:first-child{color:#6f6c66;width:38%}
.s-prod .price{display:inline-block;margin-top:5mm;background:#e4ece7;color:#3A5BFF;border-radius:3mm;padding:3mm 5mm;font-size:10.5pt;font-weight:600}
.s-opts .sws{display:flex;flex-wrap:wrap;gap:3mm;margin:4mm 0 8mm}
.s-opts .sws span{display:flex;flex-direction:column;align-items:center;gap:1.5mm;font-size:7.5pt;width:20mm;text-align:center}
.s-opts .sws i{width:12mm;height:12mm;border-radius:50%;border:.3mm solid #e3dfd6}
.s-opts .dg{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm}
.s-opts .dg div{background:#fff;border-radius:4mm;padding:5mm;font-size:9.5pt}
.s-opts .dg b{display:block;font-size:11pt;margin-bottom:1mm}
@media(max-width:1100px){.builder{grid-template-columns:1fr}}

.mlogo{height:18px;width:auto;display:block;margin-bottom:14px}
.sidelogo{height:12px;width:auto;margin-bottom:4px;opacity:.8}
.printlogo{display:none}
@media print{.printlogo{display:block;height:22px;margin:0 0 6px}}
@media(max-width:720px){.logo img{height:16px}}

.hide{display:none!important}
#photoNote{margin:8px 0 0}

/* ranges */
.rangepill{display:inline-block;background:var(--acc);color:#fff;letter-spacing:.12em;padding:4px 10px;border-radius:99px;margin-right:10px;font-size:10.5px}
.rangepill:empty{display:none}
.card .rtag{position:absolute;top:10px;right:10px;font-size:10.5px;font-weight:600;background:var(--acc);color:#fff;padding:3px 9px;border-radius:99px}
#rangesel{min-width:190px}

/* quick wins (PORTAL8) */
.dummy{display:none}
.metrics{display:none}
.steps{list-style:none;padding:0;margin:6px 0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:st}
.steps li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 16px 12px 52px;position:relative;counter-increment:st}
.steps li:before{content:counter(st);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--accs);color:var(--acc);font-weight:700;font-size:13px;display:grid;place-items:center}
.steps b{display:block;font-family:var(--font);font-weight:400;font-size:17px}.steps span{font-size:12.5px;color:var(--mute)}
.lockbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--accs);color:#2c4a3d;border-radius:14px;padding:10px 12px 10px 18px;margin:0 0 16px;font-size:13.5px}
.clearf{border:0;background:none;color:var(--acc);font-weight:600;font-size:13px;text-decoration:underline;padding:6px}
.card .tag{background:var(--ink);color:#fff;border-color:var(--ink)}
.irow td{background:#faf6ec}
.itag{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9a7b2c;background:#f7efd9;border-radius:99px;padding:1px 6px;margin-left:4px}
@media(min-width:721px){.filters{display:none}}
@media(max-width:720px){.steps{grid-template-columns:1fr}.lockbar{flex-direction:column;align-items:flex-start}}

/* ---------- PORTAL9: selection + range builder ---------- */
.card .pick{position:absolute;bottom:10px;left:10px;z-index:2;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:rgba(255,255,255,.92);color:transparent;font-weight:700;font-size:14px;line-height:1}
.card .pick:hover{border-color:var(--acc);color:var(--sage)}
.card .pick.on{background:var(--acc);border-color:var(--acc);color:#fff}
.selbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:#fff;border-radius:14px;padding:8px 10px 8px 18px;margin:0 0 14px;font-size:13.5px;position:sticky;top:calc(var(--hdr) + 8px);z-index:5}
.selbar .btn.dark{background:#fff;color:var(--ink);border-color:#fff}.selbar .clearf{color:#fff}
.fmt{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.fmt label{display:grid;grid-template-columns:18px 1fr;column-gap:8px;align-items:start;border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin:0;cursor:pointer;color:var(--ink)}
.fmt label input{margin-top:3px}.fmt b{font-weight:600;font-size:13.5px}.fmt span{grid-column:2;font-size:12px;color:var(--mute)}
.fmt label:has(input:checked){border-color:var(--acc);background:var(--accs)}
.pvtabs{display:flex;gap:6px;margin-bottom:10px}
.pvtabs button{font-size:13px;border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:7px 14px}
.pvtabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pvbox{position:relative;width:100%;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#fff;margin-bottom:14px}
.pvbox .dempty{margin:0;border:0}
.pvwrap .slide{transform-origin:0 0;position:absolute;left:0;top:0}
/* product image with optional client logo */
.lp{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:100%}
.lp>img:first-child{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lp .plogo{position:absolute;transform:translate(-50%,-50%);height:auto;max-height:22%;object-fit:contain;mix-blend-mode:multiply;opacity:.88;pointer-events:none}
/* range overview slide (green panel left) */
.s-ov{padding:0!important;display:grid;grid-template-columns:30% 1fr;background:#f3f0ea}
.ov-side{position:relative;color:#fff;padding:13mm 11mm 10mm;background:radial-gradient(120% 80% at 20% 15%,#a7b98c 0%,#6f8b55 38%,#3f5f33 100%);display:flex;flex-direction:column;overflow:hidden}
.ov-side:after{content:"";position:absolute;inset:-20% -30% auto auto;width:90%;height:70%;background:radial-gradient(closest-side,rgba(35,60,30,.35),transparent);transform:rotate(-25deg)}
.ov-logo{height:7mm;width:auto;align-self:flex-start;position:relative;z-index:1}
.ov-x{position:absolute;top:13mm;left:52mm;font-size:12pt;opacity:.7;z-index:1}.ov-clogo{position:absolute;top:10.5mm;left:58mm;max-height:12mm;max-width:28mm;background:#fff;padding:1.5mm 2.5mm;border-radius:2mm;z-index:1}
.ov-side h1{font-family:var(--font)!important;font-weight:600;color:#fff;font-size:30pt;line-height:1.02;letter-spacing:-.02em;margin:auto 0 5mm;position:relative;z-index:1}
.ov-side p{color:#eef3e8!important;font-size:11pt!important;line-height:1.4;margin:0 0 7mm!important;position:relative;z-index:1}
.ov-sw{display:flex;gap:3mm;flex-wrap:wrap;position:relative;z-index:1}.ov-sw span{display:flex;flex-direction:column;align-items:center;gap:1mm;font-size:6.5pt;width:13mm;text-align:center}
.ov-sw i{width:9mm;height:9mm;border-radius:50%;border:.4mm solid rgba(255,255,255,.6)}
.ov-foot{display:flex;justify-content:space-between;border-top:.3mm solid rgba(255,255,255,.5);margin-top:6mm;padding-top:2.5mm;font-size:7pt;position:relative;z-index:1}
.ov-main{display:flex;flex-direction:column;padding:6mm 9mm 4mm;min-height:0}
.ov-row{flex:1;display:grid;grid-template-columns:28mm 1fr;align-items:center;border-bottom:.3mm solid #dcd7cc;min-height:0}
.ov-row:last-of-type{border-bottom:0}
.ov-lab{font-family:var(--font);font-size:17pt;line-height:1.05;color:#141414;align-self:start;padding-top:4mm}
.ov-its{display:flex;justify-content:space-around;align-items:flex-end;gap:2mm;height:100%;padding:3mm 0}
.ov-it{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;text-align:center}
.ov-it .lp{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0;max-height:70%}
.ov-it .lp>img:first-child{max-height:100%;max-width:100%;filter:drop-shadow(0 1.5mm 1.5mm rgba(0,0,0,.12))}
.ov-it b{font-size:7.5pt;font-weight:600;margin-top:1.5mm;line-height:1.2}.ov-it span{font-size:7pt;color:#555}
.ov-note{font-size:6.5pt;color:#777;text-align:right;padding-top:1.5mm}
/* range shot (products on a stand) */
.s-shot{padding:0!important;background:linear-gradient(180deg,#ece6dc 0%,#e4ddd1 62%,#d6cebf 62.2%,#cfc6b6 100%)}
.sh-wall{position:absolute;inset:0 0 38% 0;background:radial-gradient(70% 90% at 30% 20%,rgba(255,255,255,.55),transparent 70%)}
.sh-row{position:absolute;left:8%;right:8%;display:flex;justify-content:center;align-items:flex-end;gap:2%}
.sh-row.back{bottom:46%;opacity:.96}.sh-row.front{bottom:30%}
.sh-it{height:var(--h);display:flex;align-items:flex-end}
.sh-it .lp{height:100%}.sh-it .lp>img:first-child{height:100%;width:auto;max-width:none;filter:drop-shadow(0 3mm 3mm rgba(60,45,30,.22))}
.sh-plinth{position:absolute;left:14%;right:14%;bottom:12%;height:18%;background:linear-gradient(180deg,#f4f0e8,#e6dfd3);border-radius:2mm;box-shadow:0 4mm 8mm rgba(70,55,35,.18);display:flex;align-items:center;justify-content:center}
.sh-plinth:before{content:"";position:absolute;left:0;right:0;top:0;height:2.2mm;background:#fbf9f4;border-radius:2mm 2mm 0 0}
.sh-clogo{max-height:55%;max-width:45%;object-fit:contain;mix-blend-mode:multiply}.sh-clogo.hl{max-height:28%}
.sh-cap{position:absolute;left:8mm;top:7mm;display:flex;align-items:center;gap:4mm;font-size:9pt;color:#5a5348}.sh-cap img{height:4.5mm}
.sh-more{position:absolute;right:8mm;bottom:4mm;font-size:7.5pt;color:#6f675b}
/* spec sheets (10 per page) */
.s-spec{padding:5mm 6mm 0!important;background:#efede8;display:flex;flex-direction:column}
.sp-grid{flex:1;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:2.5mm;min-height:0}
.sp-card{background:#fff;border-radius:2mm;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.sp-img{height:42%;display:flex;align-items:center;justify-content:center;background:#f6f5f2;padding:2mm}
.sp-img .lp{height:100%;display:flex;align-items:center;justify-content:center}.sp-img .lp>img:first-child{max-height:100%}
.sp-h{display:flex;justify-content:space-between;align-items:baseline;padding:2mm 2.5mm 0}.sp-h b{font-size:8.5pt;text-transform:uppercase;letter-spacing:.02em}.sp-h span{font-size:4.8pt;text-transform:uppercase;letter-spacing:.06em;color:#777}
.sp-b{padding:1mm 2.5mm 2mm;display:grid;grid-template-columns:30% 1fr;gap:2mm;min-height:0}
.sp-b p{font-size:6pt!important;line-height:1.3;margin:0!important;color:#333!important}
.sp-b table{border-collapse:collapse;font-size:5.6pt;width:100%}.sp-b td{border-bottom:.2mm solid #e5e2dc;padding:.7mm .5mm;vertical-align:top}.sp-b td:first-child{color:#666;width:42%}
.sp-bar{display:flex;align-items:center;gap:5mm;height:12mm;font-size:8pt;color:#333}.sp-bar img{height:4.5mm}.sp-ic{margin-left:auto;font-size:6.5pt;color:#666}.sp-bar .sp-cl{height:7mm;max-width:25mm;object-fit:contain}

/* PORTAL9 layout refinements */
.lp.crop{position:relative;display:block;overflow:hidden;flex:none}
.lp.crop>img:first-child{position:absolute;max-width:none;max-height:none;height:auto}
.ov-brand{display:flex;align-items:center;gap:3mm;position:relative;z-index:1}
.ov-x,.ov-clogo{position:static!important}.ov-clogo{max-height:10mm!important}
.ov-sw span{width:10.5mm!important}.ov-sw i{width:7.5mm!important;height:7.5mm!important}
.ov-row{flex:none!important}
.ov-its{align-items:stretch}
.ov-pic{display:flex;align-items:flex-end;justify-content:center;width:100%}
.ov-it .lp{filter:drop-shadow(0 1.2mm 1.2mm rgba(0,0,0,.12))}
.ov-main{justify-content:flex-start}
.s-shot{background:linear-gradient(180deg,#efe9df 0%,#e6dfd3 100%)!important}
.sh-wall{inset:0 0 30% 0!important}
.sh-top{position:absolute;left:12%;right:12%;bottom:30%;height:9%;background:linear-gradient(180deg,#e9e2d6,#f6f2ea);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%)}
.sh-plinth{left:12%!important;right:12%!important;bottom:9%!important;height:21%!important;border-radius:0 0 2mm 2mm!important;background:linear-gradient(180deg,#f7f3ec,#e3dbcd)!important}
.sh-plinth:before{display:none}
.sh-row{left:10%!important;right:10%!important;gap:0!important}
.sh-row.front{bottom:30.5%!important;z-index:3}.sh-row.back{bottom:36.5%!important;z-index:2}
.sh-it{position:relative;height:auto!important;margin:0 -1.2mm;display:flex;flex-direction:column;align-items:center}
.sh-it .lp{filter:drop-shadow(0 1.5mm 2mm rgba(60,45,30,.18))}
.sh-shadow{display:block;width:80%;height:2.2mm;margin-top:-1.2mm;background:radial-gradient(closest-side,rgba(60,45,30,.28),transparent);position:relative;z-index:-1}
.sh-clogo{max-height:45%!important;max-width:40%!important}
.ov-brand{flex-wrap:wrap;row-gap:2mm}.ov-logo{height:6mm!important}

/* ===== PORTAL11 · HANDLE 2.0 brand layer ===== */
h1,h2,h3,b,strong{font-weight:400!important}
h1{letter-spacing:-.02em}
.eyebrow{color:var(--h-blue)}
.btn.dark:hover{background:var(--h-blue);border-color:var(--h-blue)}
.caps{text-transform:uppercase;font-style:normal}
/* main range hero: art-directed photo banner */
#v-range>.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:28px;align-items:end;padding:0;margin:20px 0 22px;background:#fff;border-radius:4px;overflow:hidden;min-height:360px}
#v-range>.hero>*{grid-column:1;padding-left:32px;padding-right:12px}
#v-range>.hero .eyebrow{padding-top:32px;align-self:start}
#v-range>.hero .lede{padding-bottom:32px}
#v-range>.hero h1{font-size:clamp(28px,3vw,42px);line-height:1.04}
#v-range>.hero::after{content:"";grid-column:2;grid-row:1/span 3;align-self:stretch;min-height:360px;background:url("images/brand/inuse-profile.webp") center 30%/cover}
@media(max-width:900px){#v-range>.hero{grid-template-columns:1fr}#v-range>.hero::after{grid-column:1;grid-row:auto;min-height:260px;order:-1}}
/* sub-page heroes: texture strip */
.hero.sm{position:relative;padding:32px 28px 20px;margin:20px 0 14px;border-radius:4px;background:url("images/brand/texture-blue-sm.webp") center/cover}
#v-request .hero.sm,#v-options .hero.sm{background-image:url("images/brand/texture-pink-sm.webp")}
.hero.sm h1{color:#141414}
.hero.sm .eyebrow{color:#141414}