/* Montserrat (SIL Open Font License), served from this site so no visitor data goes to a font service */
@font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:100 900;src:url("/fonts/montserrat-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:100 900;src:url("/fonts/montserrat-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:100 900;src:url("/fonts/montserrat-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:100 900;src:url("/fonts/montserrat-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
:root{
  --paper:#FFFFFF; --bone:#F5F1EC; --bone-deep:#ECE6DF; --graphite:#171310; --ash:#6E635A; --ash-soft:#A2978C;
  --copper:#B87333; --copper-deep:#8C5523; --copper-light:#D9A06B; --hair:#E6DED5;
  --display:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Montserrat","Avenir Next","Segoe UI",sans-serif;
  --gutter:clamp(20px,4.4vw,72px); --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--graphite);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-0.015em}
p{margin:0} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ash)}
.eyebrow.copper{color:var(--copper);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em}
.lede{font-size:17px;line-height:1.7;color:var(--ash);max-width:62ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-family:var(--display);font-size:13.5px;font-weight:500;letter-spacing:.04em;border:1px solid var(--graphite);padding:12px 22px;cursor:pointer;background:none;color:var(--graphite);transition:background .18s,color .18s,border-color .18s;white-space:nowrap}
.btn:hover{background:var(--graphite);color:#fff}
.btn.primary{background:var(--graphite);color:#fff}
.btn.primary:hover{background:var(--copper-deep);border-color:var(--copper-deep)}
.btn.copper{background:var(--copper);border-color:var(--copper);color:#fff}
.btn.copper:hover,.btn.copper:focus-visible{background:var(--copper-deep);border-color:var(--copper-deep);color:#fff}
.btn.sm{padding:9px 16px;font-size:12.5px}
.btn svg{width:14px;height:14px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.pill{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--hair);color:var(--ash);vertical-align:middle}
.pill.ok{border-color:#B7D3B0;color:#3E7A3A;background:#F1F8EF}
.pill.pend{border-color:var(--hair);color:var(--ash)}
.pill.copper{border-color:var(--copper-light);color:var(--copper-deep)}
.sec{padding:clamp(48px,6vw,88px) 0}
.sec.tight{padding:clamp(34px,4vw,56px) 0}
.sec.bone{background:var(--bone);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 32px;margin-bottom:clamp(24px,3vw,40px)}
.sec-head h2{font-size:clamp(24px,2.8vw,34px);font-weight:600;letter-spacing:-.02em;margin-top:8px}
.sec-head .lede{margin-top:10px;font-size:15.5px}
.hairline{height:1px;background:var(--hair)}

/* ================= header */
.site{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--hair)}
.bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3vw,40px);min-height:76px}
.mark img{height:40px;width:auto}
.nav{display:flex;justify-content:center;align-items:center;gap:clamp(10px,2vw,30px);min-width:0}
.nav-item{position:relative;font-family:var(--display);font-size:14.5px;letter-spacing:.02em;padding:27px 0 25px;border:0;background:none;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;color:var(--graphite);transition:color .16s}
.nav-item:hover{color:var(--copper-deep)}
.nav-item.is-active{border-bottom-color:var(--copper);font-weight:500}
.nav-item .caret{display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.3px solid var(--copper);border-bottom:1.3px solid var(--copper);transform:translateY(-2px) rotate(45deg)}
.util{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-size:13.5px;background:none;border:0;cursor:pointer;color:var(--graphite)}
.lang .caret{display:inline-block;width:6px;height:6px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.menu-btn{display:none;min-width:74px;font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.04em;background:none;border:1px solid var(--hair);padding:9px 14px;cursor:pointer}
.menu-btn[aria-expanded="true"]{border-color:var(--graphite)}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--hair);box-shadow:0 30px 50px -36px rgba(23,19,16,.35);display:none}
.mega.is-open{display:block}
.mega-inner{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.6fr) 300px}
.mega-cats{padding:26px 28px 28px 0;border-right:1px solid var(--hair)}
.mega-cat{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;padding:9px 10px 9px 13px;cursor:pointer;font-family:var(--display);font-size:15px;color:var(--ash);transition:background .15s,color .15s}
.mega-cat{text-decoration:none}
.mega-cat:hover{color:var(--graphite)}
.mega-cat:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.mega-cat.is-active{border-left-color:var(--copper);background:var(--bone);color:var(--graphite);font-weight:500}
.mega-cat small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-top:3px}
.mega-detail{padding:28px 40px 32px;border-right:1px solid var(--hair)}
.mega-detail h2{font-size:22px;line-height:1.2}
.mega-detail h2 a{color:inherit;text-decoration:none}
.mega-detail h2 a:hover{color:var(--copper-deep)}
.mega-detail .lede{font-size:14px;margin-top:6px;max-width:60ch}
.mega-detail .view-all{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--display);font-size:13px;font-weight:500;color:var(--copper-deep);white-space:nowrap}
.view-all svg,.quick svg,.cards3 svg{width:15px;height:7px;flex:none}
.mega-cols{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px 28px;padding-top:18px;border-top:1px solid var(--hair)}
.mega-cols h3{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--copper);margin-bottom:8px}
.mega-cols a{display:block;padding:5px 0;font-size:14px;border-bottom:1px solid transparent}
.mega-cols a:hover{color:var(--copper-deep)}
.mega-plate{padding:28px 0 28px 36px;display:flex;flex-direction:column}
.mega-plate .frame{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:20px;min-height:250px}
.mega-plate img{max-height:280px;width:auto;mix-blend-mode:multiply}
.mega-plate p{font-size:12.5px;color:var(--ash);margin-top:10px}
.mega-plate .plate-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.mega-plate .plate-link:hover p{color:var(--copper-deep)}
.mega-plate .plate-link:hover img{transform:scale(1.03)}
.mega-plate img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mega-empty{font-size:14px;color:var(--ash);margin-top:20px;max-width:46ch;line-height:1.65}

/* phone menu: a panel fixed under the header bar, scrolling on its own (rework 2026-09-21). Full width on phones,
   a 420px sheet with a scrim from tablet width up. Opened and closed by setDrawer() in app.js, which also sets --bar-h. */
.drawer{position:fixed;top:var(--bar-h,76px);right:0;bottom:0;width:min(100%,420px);z-index:45;background:var(--paper);border-left:1px solid var(--hair);border-top:1px solid var(--hair);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;visibility:hidden;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s;outline:none}
.drawer.is-open{visibility:visible;transform:none;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.drawer-scrim{position:fixed;left:0;right:0;top:var(--bar-h,76px);bottom:0;z-index:44;background:rgba(23,19,16,.28);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.drawer-scrim.is-open{opacity:1;visibility:visible;transition:opacity .3s}
html.nav-open{overflow:hidden}
.dr-search{padding:14px var(--gutter) 0}
.drawer .site-search{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;width:100%;height:auto;min-height:44px;padding:0 12px}
.drawer .site-search input{min-height:42px;font-size:16px}
.drawer .search-drop{grid-column:1 / -1;position:static;min-width:0;max-height:none;margin:0 -12px;border:0;border-top:1px solid var(--hair);box-shadow:none}
.dr-nav{padding:8px 0 4px}
.dr-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:12px var(--gutter);margin:0;text-align:left;background:none;border:0;border-bottom:1px solid var(--hair);font-family:var(--display);font-size:17px;font-weight:400;line-height:1.3;color:var(--graphite);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:rgba(184,115,51,.12)}
.dr-nav>.dr-row:first-child{border-top:1px solid var(--hair)}
.dr-row:active{background:var(--bone)}
.dr-row:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.dr-row[aria-current]{color:var(--copper-deep);font-weight:500}
.dr-row small{font-family:var(--body);font-size:12px;color:var(--ash);margin-left:2px}
.dr-row .ext{font-style:normal;font-size:13px;color:var(--copper)}
.dr-row svg{width:15px;height:7px;flex:none}
.dr-group .chev{margin-left:auto;flex:none;width:8px;height:8px;border-right:1.3px solid var(--copper);border-bottom:1.3px solid var(--copper);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.dr-group[aria-expanded="true"]{color:var(--copper-deep)}
.dr-group[aria-expanded="true"] .chev{transform:translateY(2px) rotate(225deg)}
.dr-sub{background:var(--bone);border-bottom:1px solid var(--hair)}
.dr-sub .dr-row{font-family:var(--body);font-size:15.5px;min-height:46px;padding-top:9px;padding-bottom:9px;padding-left:calc(var(--gutter) + 18px);border-bottom-color:var(--bone-deep);color:var(--graphite)}
.dr-sub .dr-row:active{background:var(--bone-deep)}
.dr-sub .dr-cat{font-family:var(--display);font-size:16px;font-weight:500}
.dr-sub .dr-sub{background:var(--paper);border-bottom:0}
.dr-sub .dr-sub .dr-row{padding-left:calc(var(--gutter) + 36px);color:var(--ash);border-bottom-color:var(--hair)}
.dr-sub .dr-sub .dr-row[aria-current]{color:var(--copper-deep)}
.dr-sub .dr-all{font-family:var(--display);font-weight:500;color:var(--copper-deep)}
.dr-sub .dr-sub .dr-all{color:var(--copper-deep)}
.dr-foot{padding:6px 0 max(24px,env(safe-area-inset-bottom))}
.dr-foot .dr-lang{border-top:1px solid var(--hair);font-size:15px}
.dr-lang .dr-lang-label{color:var(--ash)}
.dr-lang .dr-lang-cur{font-weight:500}
.dr-lang-opt[aria-current]{color:var(--copper-deep);font-weight:500}
.dr-lang-opt[aria-current]::after{content:"";width:6px;height:6px;margin-left:auto;background:var(--copper)}

/* ================= home */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;padding-top:clamp(48px,6.5vw,92px);padding-bottom:clamp(40px,5vw,72px)}
.hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.06;font-weight:600;letter-spacing:-.025em;margin-top:14px}
.hero h1 em{font-style:normal;color:var(--copper)}
.hero .lede{margin-top:20px;font-size:18px}
.hero .actions{margin-top:30px}
.hero-img{background:#fff}
.hero-img img{width:100%;height:auto}
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.figure{background:var(--paper);padding:22px 20px}
.figure b{display:block;font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:300;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.figure span{display:block;margin-top:9px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ash)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.intro-grid h2{font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:-.02em;margin-top:8px}
.intro-grid .lede{margin-top:18px}
.quote{margin-top:26px;padding-left:18px;border-left:2px solid var(--copper)}
.quote p{font-family:var(--display);font-size:17px;font-weight:300;line-height:1.5}
.quote footer{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ash)}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.cat-card{background:var(--paper);display:flex;flex-direction:column;transition:background .18s}
.cat-card:hover{background:var(--bone)}
.cat-card .shot{aspect-ratio:4/3;overflow:hidden;background:#fff}
.cat-card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat-card:hover .shot img{transform:scale(1.03)}
.cat-card .body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;gap:6px}
.cat-card h3{font-size:18px;font-weight:500}
.cat-card p{font-size:13.5px;color:var(--ash);line-height:1.55}
.cat-card .meta{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper)}

.hq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.hq .map{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hq .map-frame{position:relative;width:100%;flex:1;min-height:280px;border:1px solid var(--hair);background:var(--bone-deep);overflow:hidden}
/* map: greyscale still, then a live greyscale street map (Leaflet, loaded on demand) with the MPF-tagged pin */
.map-live{position:absolute;inset:0;background:#f2f2f2}
.map-frame.is-live .map-static{display:none}
.map-live .leaflet-tile-pane{filter:grayscale(1) contrast(1.08)}
.map-live .leaflet-control-zoom a{border-radius:0;color:var(--graphite);font-family:var(--display)}
.map-live .leaflet-control-attribution{font-family:var(--body);font-size:9.5px;line-height:1.6;color:var(--ash);background:rgba(255,255,255,.85);padding:1px 7px}
.map-live .leaflet-control-attribution a{color:var(--ash)}
.mpf-marker{background:none;border:0}
.map-static{position:absolute;inset:0;display:block}
.map-static img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.map-tag{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%);pointer-events:none;z-index:5}
.map-tag b{order:-1;display:block;margin-bottom:8px;background:var(--graphite);color:#fff;font-family:var(--display);font-size:12.5px;font-weight:500;letter-spacing:.01em;padding:5px 10px;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(23,19,16,.55)}
.map-tag b::after{content:"";position:absolute;left:50%;top:26px;width:8px;height:8px;background:var(--graphite);transform:translateX(-50%) rotate(45deg)}
.map-pin{position:relative;width:20px;height:20px;border-radius:50% 50% 50% 0;background:var(--copper);transform:rotate(-45deg);box-shadow:0 8px 18px -8px rgba(23,19,16,.55)}
.map-pin::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.mpf-marker .map-tag{transform:translate(-50%,-100%)}
.map-frame .map-link{position:absolute;right:10px;top:10px;z-index:500;background:rgba(255,255,255,.88);padding:3px 8px}
.map-credit{position:absolute;right:0;bottom:0;font-family:var(--body);font-size:9.5px;line-height:1.6;color:var(--ash);background:rgba(255,255,255,.8);padding:1px 7px}
.map-link{font-weight:500;display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:13.5px;color:var(--copper-deep);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .18s,color .18s}
.map-link svg{width:9px;height:9px}
.map-link:hover{color:var(--graphite);border-bottom-color:currentColor}
.map-link:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
@media (max-width:560px){.hq .map-frame{min-height:230px}}
.hq .photo img{width:100%;height:100%;object-fit:cover;min-height:280px}
.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:1px}
.detail{background:var(--paper);padding:18px 20px}
.detail .eyebrow{margin-bottom:8px}
.detail p{font-size:15px;line-height:1.55}
.detail .pending{font-size:12.5px;color:var(--ash);font-style:italic}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.social{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--hair);padding:10px 14px;font-family:var(--display);font-size:13.5px}
.social:hover{border-color:var(--copper)}
.social i{width:8px;height:8px;border-radius:50%;background:var(--copper);display:inline-block}
.social small{font-family:var(--mono);font-size:11px;color:var(--ash);letter-spacing:.06em}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.quick a{background:var(--paper);padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px}
.quick a:hover{background:var(--bone)}
.quick h3{font-size:19px;font-weight:500}
.quick p{font-size:14px;color:var(--ash)}
.quick span{margin-top:6px;font-family:var(--display);font-size:13px;font-weight:500;color:var(--copper-deep)}

/* ================= page head */
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);padding-top:22px}
.crumb a:hover{color:var(--copper-deep)} .crumb b{color:var(--graphite);font-weight:500} .crumb span{margin:0 8px}
.page-head{padding:clamp(28px,4vw,56px) 0 clamp(24px,3vw,40px)}
.page-head h1{font-size:clamp(30px,4vw,50px);line-height:1.08;font-weight:600;letter-spacing:-.025em;margin-top:12px}
.page-head .lede{margin-top:16px}

/* ================= category page */
.subcat-block{padding:clamp(28px,3.4vw,46px) 0;border-top:1px solid var(--hair)}
.subcat-block:first-of-type{border-top:0}
.subcat-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 30px;margin-bottom:20px}
.subcat-head h2{font-size:clamp(20px,2.2vw,26px);font-weight:500}
.subcat-head p{font-size:14.5px;color:var(--ash);max-width:60ch}
.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.series-card{background:var(--paper);display:flex;flex-direction:column;transition:background .18s}
.series-card:hover{background:var(--bone)}
.series-card .shot{height:210px;background:#fff;display:flex;align-items:center;justify-content:center;padding:18px}
.series-card .shot img{max-height:100%;max-width:100%;width:auto;height:auto;mix-blend-mode:multiply}
.series-card .shot.photo{padding:0}
.series-card .shot.photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.series-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.series-card h3{font-size:17px;font-weight:500;line-height:1.3}
.series-card p{font-size:13.5px;color:var(--ash);line-height:1.5}
.series-card .meta{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.expected{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.expected div{background:var(--paper);padding:18px 20px;font-family:var(--display);font-size:15.5px;color:var(--ash)}
.notice{border:1px dashed var(--copper-light);background:#FBF6F0;padding:16px 20px;font-size:14.5px;color:var(--ash);max-width:70ch;line-height:1.6}
.notice b{color:var(--copper-deep);font-weight:500}

/* ================= series page: see series-page.css, item-viewer.css and item-select.css; the item photo button is shared with the lightbox below */
.item-shot{background:#fff;height:170px;width:100%;display:flex;align-items:center;justify-content:center;padding:14px;position:relative;overflow:hidden;border:0;font:inherit;color:inherit}
button.item-shot{cursor:zoom-in}
.item-shot img{transition:transform .35s ease}
@media (hover:hover) and (pointer:fine){button.item-shot:hover img,button.item-shot:focus-visible img{transform:scale(1.8)}}
button.item-shot:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.item-shot img{max-height:142px;max-width:100%;width:auto;height:auto;mix-blend-mode:multiply}
.item-shot .noimg{font-size:13px;color:var(--ash)}
.item-sku{margin-top:13px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--copper);font-variant-numeric:tabular-nums}
.cta-band{background:var(--graphite);color:#fff;padding:clamp(34px,4vw,52px) 0}
.cta-band .inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px}
.cta-band h2{font-size:clamp(22px,2.6vw,30px);font-weight:600}
.cta-band p{margin-top:8px;color:rgba(255,255,255,.7);font-size:15px}
.cta-band .btn{border-color:rgba(255,255,255,.5);color:#fff}
.cta-band .btn:hover{background:#fff;color:var(--graphite);border-color:#fff}
.cta-band .btn.copper{background:var(--copper);border-color:var(--copper)}
.cta-band .btn.copper:hover{background:var(--copper-deep);border-color:var(--copper-deep);color:#fff}

/* ================= company */
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}.timeline::before{content:'';position:absolute;top:6px;left:0;right:0;height:1px;background:var(--hair)}
.tl{position:relative;padding:22px 0 0 0}.tl::before{content:'';position:absolute;top:1px;left:-5px;width:10px;height:10px;background:var(--copper);border-radius:50%}
.tl b{display:block;font-family:var(--display);font-size:13px;font-weight:500;color:var(--copper-deep)}
.tl h3{font-size:17px;font-weight:500;margin-top:8px}
.tl p{margin-top:8px;font-size:14px;color:var(--ash);line-height:1.6}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,60px)}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.value{background:var(--paper);padding:20px 22px}
.value b{display:block;font-family:var(--display);font-size:16px;font-weight:500}
.value span{display:block;margin-top:6px;font-size:14px;color:var(--ash);line-height:1.55}
.list{display:flex;flex-direction:column}
.list li{padding:12px 0;border-bottom:1px solid var(--hair);font-size:15.5px;display:flex;justify-content:space-between;gap:16px}
.list li span{color:var(--ash);font-size:14px}
.list li:last-child{border-bottom:0}

/* ================= distribution */
.search{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:10px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ash)}
.field input,.field select,.field textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--hair);background:var(--paper);color:var(--graphite);border-radius:0;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--copper);outline-offset:0;border-color:var(--copper)}
.field textarea{min-height:140px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{border:1px solid var(--hair);padding:7px 12px;font-family:var(--display);font-size:13px;background:none;cursor:pointer}
.chip.is-on,.chip:hover{border-color:var(--copper);color:var(--copper-deep)}
.results{margin-top:22px;border:1px solid var(--hair)}
.result{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:16px;padding:16px 18px;border-bottom:1px solid var(--hair);font-size:14.5px}
.result:last-child{border-bottom:0}
.empty{padding:34px 24px;text-align:center;color:var(--ash)}
.empty b{display:block;font-family:var(--display);font-size:18px;font-weight:500;color:var(--graphite)}
.empty p{margin-top:8px;font-size:14.5px;max-width:52ch;margin-left:auto;margin-right:auto}
.worldmap{margin-top:22px;background:var(--bone-deep);border:1px solid var(--hair);min-height:340px;position:relative;display:flex;align-items:center;justify-content:center}
.worldmap span{position:absolute;bottom:14px;left:16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.worldmap .dots{display:grid;grid-template-columns:repeat(12,14px);gap:14px;opacity:.55}
.worldmap .dots i{width:14px;height:14px;border-radius:50%;background:var(--hair)}
.worldmap .dots i:nth-child(3n){background:var(--copper-light)}

/* ================= support / contact */
.faq{border:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)} .faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:16px 18px;font-family:var(--display);font-size:16px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--copper);font-size:18px}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 18px 18px;font-size:15px;color:var(--ash);line-height:1.68;max-width:70ch}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.form .full{grid-column:1/-1}
.form .actions{grid-column:1/-1;align-items:center;gap:16px}
.form .ok{font-size:14px;color:#3E7A3A}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.cards3 a,.cards3 div{background:var(--paper);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.cards3 a:hover{background:var(--bone)}
.cards3 h3{font-size:18px;font-weight:500} .cards3 p{font-size:14px;color:var(--ash);line-height:1.55}
.cards3 span{margin-top:auto;padding-top:8px;font-family:var(--display);font-size:13px;font-weight:500;color:var(--copper-deep)}
.doc-table{width:100%;border-collapse:collapse;border:1px solid var(--hair);font-size:14.5px}
.doc-table th{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ash);text-align:left;padding:12px 16px;background:var(--bone);border-bottom:1px solid var(--hair)}
.doc-table td{padding:12px 16px;border-bottom:1px solid var(--hair);vertical-align:middle}
.doc-table tr:last-child td{border-bottom:0}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}

/* ================= footer */
.foot{background:var(--graphite);color:rgba(255,255,255,.82);padding:clamp(40px,5vw,64px) 0 28px;margin-top:clamp(40px,5vw,72px)}
.foot-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.foot-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:clamp(14px,2vw,28px)}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--copper-light);margin-bottom:14px}
.foot a{display:block;padding:3px 0;font-size:13.5px;color:rgba(255,255,255,.82)}
.foot a:hover{color:#fff}
.foot p{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.72)}
.foot .logo{height:36px;width:auto;margin-bottom:16px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.55)}
.foot-bottom a{display:inline;padding:0;font-size:13px;color:rgba(255,255,255,.7)}

/* hairline grids: draw the rule around each tile, so a short last row leaves clean ground instead of a beige block */
.figures,.cat-grid,.series-grid,.expected,.details,.quick,.values,.cards3{background:transparent;border:0;padding:1px;gap:1px}
.figures>*,.cat-grid>*,.series-grid>*,.expected>*,.details>*,.quick>*,.values>*,.cards3>*{box-shadow:0 0 0 1px var(--hair)}

@media (max-width:900px){
  .timeline{grid-template-columns:1fr;gap:28px}
  .timeline::before{top:0;bottom:0;left:0;right:auto;width:1px;height:100%}
  .tl{padding:0 0 0 26px}
  .tl::before{top:4px;left:-5px}
}

@media (max-width:1100px){
  .nav{gap:14px} .nav-item{font-size:13.5px}
  .mega-inner{grid-template-columns:minmax(200px,.8fr) minmax(0,1.6fr)} .mega-plate{display:none}
}
@media (max-width:960px){
  .bar{grid-template-columns:auto auto;justify-content:space-between}
  .nav,.lang{display:none} .menu-btn{display:inline-block}
  .hero,.intro-grid,.hq,.contact-grid{grid-template-columns:1fr}
  .search{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .result{grid-template-columns:1fr}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* online store — BUY NOW */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn.buy{background:var(--copper);border-color:var(--copper);color:#fff;letter-spacing:.14em;font-size:12.5px;padding:13px 22px}
.btn.buy svg{width:11px;height:11px}
.btn.buy:hover{background:var(--copper-deep);border-color:var(--copper-deep);color:#fff}
.cta-band .btn.buy{background:var(--copper);border-color:var(--copper);color:#fff}
.cta-band .btn.buy:hover{background:var(--copper-deep);border-color:var(--copper-deep);color:#fff}
.btn:focus-visible,.buy-link:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.buy-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .18s,color .18s}
.buy-link svg{width:9px;height:9px}
.buy-link:hover{color:var(--graphite);border-bottom-color:currentColor}
.expected div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cat-card{position:relative}
.cat-link{color:inherit;text-decoration:none}
.cat-link::after{content:"";position:absolute;inset:0;z-index:1}
.cat-link:focus-visible{outline:none}
.cat-link:focus-visible::after{outline:2px solid var(--copper);outline-offset:-2px}
.cat-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cat-card .cat-foot .meta{margin-top:0;padding-top:0}
.cat-card .buy-link{position:relative;z-index:2}


/* item lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(255,255,255,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.lb[hidden]{display:none}
.lb-stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.lb-img{max-width:90vw;max-height:82vh;width:auto;height:auto;cursor:zoom-in;user-select:none;-webkit-user-drag:none;transition:transform .2s ease;will-change:transform}
.lb-cap{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);text-align:center}
.lb-close{position:absolute;top:14px;right:16px;width:44px;height:44px;font-size:26px;line-height:1;background:var(--paper);border:1px solid var(--hair);cursor:pointer;color:var(--graphite);transition:background .18s,color .18s}
.lb-nav{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;font-size:30px;line-height:1;background:var(--paper);border:1px solid var(--hair);border-radius:50%;cursor:pointer;color:var(--graphite);transition:background .18s,color .18s}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-close:hover,.lb-nav:hover{background:var(--copper);border-color:var(--copper);color:#fff}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
@media (max-width:560px){.lb-nav{width:44px;height:44px;margin-top:-22px;font-size:24px}.lb-prev{left:8px}.lb-next{right:8px}.lb-img{max-width:94vw}}
@media (prefers-reduced-motion:reduce){.item-shot img,.lb-img{transition:none}}
/* skip link */
.skip-link{position:fixed;left:12px;top:-60px;z-index:100;background:var(--graphite);color:#fff;padding:10px 16px;font-family:var(--display);font-size:14px;transition:top .15s}
.skip-link:focus{top:12px}
#main:focus{outline:none}
/* downloads table: stacked rows on small screens, at the end of this file with the rest of the support page */

/* distribution: directory mount (globe + list from dist/) */
.dist-mount{margin-top:8px;min-height:320px}
.dist-loading{padding:48px 0;color:var(--ash);text-align:center}
.dist-mount{--dist-sticky:78px}
.dist-mount .d-tools{top:var(--dist-sticky,0px)}
.dist-mount .d-country h3{top:calc(var(--dist-sticky) + 66px)}
.dist-mount .d-region,.dist-mount .d-country{scroll-margin-top:calc(var(--dist-sticky) + 72px)}

/* online store links: header utility, hero line, category head, drawer */
.store-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--copper-deep);text-decoration:none;white-space:nowrap}
.store-link:hover{color:var(--graphite)}
.store-link .ext{font-style:normal;font-size:12px}
@media (max-width:1100px){.util .store-link{display:none}}
.hero-store{margin-top:16px;font-size:14px;color:var(--ash)}
.hero-store a{color:var(--copper-deep);font-weight:500}
.page-store{margin-top:12px;font-size:14px}
.page-store a{font-family:var(--display);font-weight:500;color:var(--copper-deep)}
.page-store a:hover{color:var(--graphite)}

/* products index: card footer on one line, plain type; CTA band on bone instead of black */
.cat-card .cat-foot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;white-space:nowrap}
.cat-card .meta{margin-top:0;padding-top:0;font-family:var(--display);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ash)}
.cat-card .buy-link{font-family:var(--display);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--copper-deep);white-space:nowrap}
.cat-card .buy-link:hover{color:var(--graphite)}
.cta-band{background:var(--bone);color:var(--graphite);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.cta-band p{color:var(--ash)}
.cta-band .btn{border-color:var(--graphite);color:var(--graphite)}
.cta-band .btn:hover{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.cta-band .btn.copper,.cta-band .btn.buy{background:var(--copper);border-color:var(--copper);color:#fff}
.cta-band .btn.copper:hover,.cta-band .btn.buy:hover{background:var(--copper-deep);border-color:var(--copper-deep);color:#fff}


/* page head with a photo on the right (Company) */
.page-head-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.page-head-art{aspect-ratio:4/3;overflow:hidden;background:#fff}
.page-head-art img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.page-head-photo{grid-template-columns:1fr}.page-head-art{aspect-ratio:16/10}}

/* ---- home hero: one still, full bleed, with the page's headline and actions beneath it */
.home-hero{--hero-ground:#dbd9d6;background:var(--hero-ground);color:var(--graphite);overflow:hidden}
.home-hero-art{position:relative;background:var(--hero-ground)}
.home-hero-art picture{display:block;
  /* fill the screen under the bar, but never trim more than 10% of the 16:9 frame */
  height:max(min(56.25vw, calc(100svh - var(--bar-h,76px))), 50.6vw)}
.home-hero-art picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* the copy: centred on the empty middle of the 16:9 picture (47% down), corrected for any vertical trim */
.home-hero-copy{position:absolute;left:50%;top:calc(50% - 1.7vw);transform:translate(-50%,-50%);width:min(30vw,520px);padding:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  animation:hero-copy-in .9s cubic-bezier(.22,1,.36,1) .15s both}
@keyframes hero-copy-in{from{opacity:0;transform:translate(-50%,calc(-50% + 10px))}to{opacity:1;transform:translate(-50%,-50%)}}
.home-hero h1{font-size:clamp(28px,2.6vw,54px);line-height:1.06;font-weight:600;letter-spacing:-.02em;color:var(--graphite);max-width:none;text-wrap:balance}
.home-hero .lede,.home-hero .hero-store{display:none}
.home-hero .actions{margin-top:clamp(14px,1.4vw,24px);justify-content:center}
@media (prefers-reduced-motion:reduce){.home-hero-copy{animation:none}}
/* scroll cue: a copper button pinned to the foot of the screen, shown a second after the page has loaded, gone once it scrolls */
.hero-scroll{position:fixed;left:50%;bottom:calc(clamp(20px,3.2vh,40px) + env(safe-area-inset-bottom,0px));z-index:30;
  width:62px;height:62px;margin-left:-31px;border:0;border-radius:50%;display:grid;place-items:center;
  background:var(--copper);color:#fff;cursor:pointer;box-shadow:0 4px 8px rgba(140,85,35,.3);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1),background .2s}
.hero-scroll::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--copper);opacity:0}
.hero-scroll.is-ready{opacity:1;transform:none;pointer-events:auto}
.hero-scroll.is-ready::after{animation:hero-scroll-ring 2.4s ease-out .4s infinite}
.hero-scroll.is-ready svg{animation:hero-scroll-bob 1.6s cubic-bezier(.45,0,.55,1) infinite}
.hero-scroll.is-ready.is-gone{opacity:0;transform:translateY(14px);pointer-events:none}
.hero-scroll:hover{background:var(--copper-deep)}
.hero-scroll:hover::after{border-color:var(--copper-deep)}
.hero-scroll:focus-visible{outline:3px solid var(--graphite);outline-offset:3px}
@keyframes hero-scroll-bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@keyframes hero-scroll-ring{0%{opacity:.55;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.55)}}
@media (prefers-reduced-motion:reduce){.hero-scroll{transition:opacity .3s}.hero-scroll.is-ready::after,.hero-scroll.is-ready svg{animation:none}}
@media (max-width:900px){.hero-scroll{display:none}}
@media (max-width:900px){
  .home-hero-copy{position:static;transform:none;width:auto;max-width:none;align-items:flex-start;text-align:left;animation:none;
    padding:24px var(--gutter) 44px}
  .home-hero h1{font-size:clamp(32px,7vw,44px);max-width:none}
  .home-hero .lede{display:block;margin-top:14px;font-size:17px;max-width:52ch;color:var(--ash)}
  .home-hero .hero-store{display:block}
  .home-hero .actions{justify-content:flex-start}
}
@media (max-width:700px){
  .home-hero-art picture{height:auto;aspect-ratio:4/5}
}

/* ---- family pages: one grid, sub-group chips, cards that show the product large */
.series-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;background:none;border:0;padding:0}
.series-grid>*{box-shadow:none}
.series-card{border:1px solid var(--hair)}
.series-card .shot{height:250px;padding:20px}
.series-card .shot img{max-height:100%;max-width:100%}
.series-card .shot.lay{flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;padding:20px 0 20px 22px;overflow:hidden}
.series-card .shot.lay img{width:150%;max-width:none;max-height:74px;height:auto;object-fit:contain;object-position:left center;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.series-card .shot.lay img:nth-child(2){margin-left:9%}
.series-card .shot.lay img:nth-child(3){margin-left:18%}
.series-card .shot.lay[data-n="1"] img{width:185%}
.series-card .shot.lay[data-n="2"] img{width:165%}
.series-card:hover .shot.lay img{transform:translateX(-4%)}
.series-card .meta{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ash)}
@media (prefers-reduced-motion:reduce){.series-card .shot.lay img{transition:none}.series-card:hover .shot.lay img{transform:none}}
@media (max-width:560px){.series-card .shot{height:210px}.series-card .shot.lay img{width:170%}}

/* comparison pill on family pages (temporary) */
.fam-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.fam-head>div{min-width:0;max-width:64ch}
.view-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--hair);background:var(--paper);font-family:var(--display);font-size:13px;flex:none;margin-bottom:4px}
.view-switch span{padding:0 10px 0 9px;color:var(--ash);font-weight:500}
.view-switch button{border:0;background:none;padding:8px 14px;font:inherit;font-weight:500;color:var(--graphite);cursor:pointer;transition:background .18s,color .18s}
.view-switch button:hover{background:var(--bone)}
.view-switch button.is-on{background:var(--graphite);color:#fff}
.view-switch button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

/* products index: six families as three by two (two across on tablets, one on phones), no orphan card */
.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0}
.cat-grid>*{box-shadow:none;border:1px solid var(--hair)}
.cat-card .shot{aspect-ratio:16/10}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cat-grid{grid-template-columns:1fr}}

/* ---- products index: expanding photo panels */
.wide-panels{padding-top:8px;padding-bottom:clamp(36px,5vw,72px)}
.fam-panels{display:flex;gap:6px;height:min(70vh,620px);min-height:440px}
.fam-panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--bone);color:#fff;text-decoration:none;transition:flex-grow .7s cubic-bezier(.16,1,.3,1)}
.fam-panel.is-open{flex-grow:4.2}
.fam-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .5s}
.fam-panel:not(.is-open) img{filter:saturate(.75) brightness(.92)}
.fam-panel.is-open img{transform:scale(1.04)}
.fam-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,9,0) 38%,rgba(11,10,9,.78));pointer-events:none}
.fp-label{position:absolute;left:50%;bottom:22px;z-index:2;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-family:var(--display);font-size:17px;font-weight:500;white-space:nowrap;transition:opacity .3s}
.fp-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 28px 26px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(10px);transition:opacity .35s .15s,transform .5s .15s cubic-bezier(.16,1,.3,1);pointer-events:none}
.fp-name{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.015em;line-height:1.1}
.fp-lede{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.86);max-width:44ch}
.fp-meta{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--copper-light);margin-top:2px}
.fp-meta svg{width:14px;height:14px}
.fam-panel.is-open .fp-label{opacity:0}
.fam-panel.is-open .fp-body{opacity:1;transform:none}
.fam-panel:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fam-panel,.fam-panel img,.fp-body,.fp-label{transition:none}}
@media (max-width:900px){
  .fam-panels{flex-direction:column;height:auto;min-height:0}
  .fam-panel,.fam-panel.is-open{flex:none;height:190px}
  .fam-panel:not(.is-open) img{filter:none}
  .fp-label{display:none}
  .fp-body{opacity:1;transform:none;padding:0 20px 18px}
  .fp-lede{display:none}
}

/* family pages (viewer 1): balanced rows, short last row centred */

/* ---- viewer 3: catalogue section (index + reference entries) */
.cat3{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start;margin-top:8px}
.cat-index{position:sticky;top:104px;max-height:calc(100vh - 130px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--hair) transparent;padding-right:6px;font-family:var(--display)}
.ci-title{font-size:13px;font-weight:500;color:var(--ash);margin:0 0 12px}
.ci-group{padding:10px 0;border-top:1px solid var(--hair)}
.cat-index button{display:block;width:100%;text-align:left;background:none;border:0;padding:4px 0;font:inherit;cursor:pointer;color:var(--ash);font-size:13.5px;line-height:1.35}
.cat-index .ci-sub{color:var(--graphite);font-weight:500;font-size:14.5px;padding-bottom:6px}
.cat-index button:hover{color:var(--copper-deep)}
.cat-index .is-here{color:var(--copper-deep)}
.cat-index button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.cat-chapter{scroll-margin-top:100px}
.cat-chapter + .cat-chapter{margin-top:clamp(40px,5vw,72px)}
.cc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 40px;align-items:end;padding-bottom:18px;border-bottom:2px solid var(--graphite)}
.cc-head h2{font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.cc-head p{font-size:15px;color:var(--ash);max-width:52ch;margin:0}
.ce{display:grid;grid-template-columns:54px minmax(180px,.9fr) minmax(0,1.1fr) minmax(200px,.8fr);gap:0 clamp(16px,2.2vw,32px);align-items:center;padding:22px 0;border-bottom:1px solid var(--hair);scroll-margin-top:100px}
.ce-ref{align-self:start;padding-top:6px;font-family:var(--display);font-size:20px;font-weight:300;line-height:1.25;color:var(--copper-deep);font-variant-numeric:tabular-nums}
.ce-pic{display:block;text-decoration:none}
.ce-shot{height:132px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ce-shot img{max-height:100%;max-width:100%;width:auto;height:auto;mix-blend-mode:multiply}
.ce-shot.photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.ce-shot.lay{flex-direction:column;align-items:flex-start;gap:10px}
.ce-shot.lay img{width:135%;max-width:none;max-height:44px;object-fit:contain;object-position:left center}
.ce-shot.lay img:nth-child(2){margin-left:7%}
.ce-shot.lay img:nth-child(3){margin-left:14%}
.ce-text h3{font-size:19px;font-weight:500;line-height:1.25}
.ce-text h3 a{color:inherit;text-decoration:none}
.ce-text h3 a:hover{color:var(--copper-deep)}
.ce-text p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--ash);max-width:46ch}
.ce-text .ce-by{font-size:13px;color:var(--graphite)}
.ce-items{align-self:start;font-family:var(--display)}
.ce-count{margin:4px 0 8px;font-size:13px;font-weight:500;color:var(--graphite)}
.ce-items ul{list-style:none;margin:0;padding:0;columns:2;column-gap:18px;font-size:13px;line-height:1.7;color:var(--ash);font-variant-numeric:tabular-nums}
.ce-items .ce-more{color:var(--ash-soft)}
.ce-link{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:13px;font-weight:500;color:var(--copper-deep);text-decoration:none}
.ce-link svg{width:13px;height:13px}
.ce-link:hover{color:var(--graphite)}
.cat-note{margin:28px 0 0;font-size:14px;color:var(--ash)}
.cat-note a{color:var(--copper-deep)}
@media (max-width:1100px){.ce{grid-template-columns:44px minmax(150px,.8fr) minmax(0,1.2fr)}.ce-items{grid-column:2 / -1;margin-top:12px}.ce-items ul{columns:4}}
@media (max-width:900px){.cat3{grid-template-columns:1fr}.cat-index{position:static;max-height:none;display:none}.cc-head{grid-template-columns:1fr}}
@media (max-width:600px){.ce{grid-template-columns:36px minmax(0,1fr)}.ce-pic{grid-column:2}.ce-text{grid-column:2;margin-top:10px}.ce-items{grid-column:2}.ce-items ul{columns:2}.ce-ref{font-size:17px}}
@media print{
  header.site,.foot,.view-switch,.cta-band,.cat-index,.crumb{display:none !important}
  .cat3{display:block}
  .ce{break-inside:avoid;padding:14px 0}
  .cat-chapter{break-before:page}
  .cat-chapter:first-child{break-before:auto}
  body{font-size:11pt}
}

/* ---- family pages, viewer 4: showcase spreads with a catalogue reference line */
.sh-nav{position:sticky;top:78px;z-index:30;display:flex;flex-wrap:wrap;gap:2px 26px;margin-top:6px;padding:12px 0 0;background:rgba(255,255,255,.97);border-bottom:1px solid var(--hair);font-family:var(--display)}
.sh-nav button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:6px 0 12px;font:inherit;font-size:14.5px;font-weight:500;color:var(--ash);cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.sh-nav button:hover{color:var(--graphite)}
.sh-nav .is-here{color:var(--graphite);border-bottom-color:var(--copper)}
.sh-nav button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.sh-chapter{padding-top:clamp(44px,5vw,80px);scroll-margin-top:118px}
.sh-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 40px;margin-bottom:clamp(18px,2vw,28px)}
.sh-head h2{font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.08}
.sh-head p{margin:0;font-size:15px;color:var(--ash);max-width:52ch}
.sh-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3.4vw,56px) clamp(16px,2vw,28px)}
.sh-line{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none}
.sh-line.wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(22px,3.4vw,64px);align-items:center}
.sh-line.wide.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.sh-line.wide.flip .sh-shot{order:2}
.sh-shot{height:clamp(240px,24vw,330px);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:clamp(20px,2.4vw,36px);background:#fff}
.sh-line.wide .sh-shot{height:clamp(230px,25vw,340px);padding:clamp(16px,2.2vw,32px)}
.sh-line.wide:has(.sh-shot:not(.lay)){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sh-line.wide.flip:has(.sh-shot:not(.lay)){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sh-line.wide .sh-shot:not(.lay){height:auto;aspect-ratio:3/2;padding:0}  /* a whole composed picture fills its box, the white ground multiplies into the bone */
.sh-shot img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;mix-blend-mode:multiply;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.sh-shot.photo{padding:0}
.sh-shot.photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.sh-shot.lay,.sh-line.wide .sh-shot.lay{flex-direction:column;align-items:flex-start;gap:clamp(14px,2vw,30px);padding-right:0;padding-left:7%}
.sh-shot.lay img{width:155%;max-width:none;max-height:84px;object-fit:contain;object-position:left center}
.sh-line.wide .sh-shot.lay img{width:170%;max-height:122px}
.sh-shot.lay[data-n="1"] img{width:160%;max-height:110px}
.sh-line.wide .sh-shot.lay[data-n="1"] img{width:150%;max-height:150px}
.sh-text sup{font-size:.42em;vertical-align:super;line-height:0}
.sh-shot.lay img:nth-child(2){margin-left:7%}
.sh-shot.lay img:nth-child(3){margin-left:14%}
.sh-line:hover .sh-shot img{transform:scale(1.035)}
.sh-line:hover .sh-shot.lay img{transform:translateX(-3%)}
.sh-text{padding-top:16px;min-width:0}
.sh-line.wide .sh-text{padding-top:0}
.sh-text h3{font-size:21px;font-weight:500;line-height:1.22;transition:color .15s}
.sh-line.wide .sh-text h3{font-size:clamp(26px,2.7vw,38px);font-weight:600;letter-spacing:-.018em;line-height:1.1;text-wrap:balance}
.sh-line:hover h3{color:var(--copper-deep)}
.sh-tag{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--graphite);max-width:48ch}
.sh-line.wide .sh-tag{margin-top:12px;font-size:17px}
.sh-intro{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--ash);max-width:52ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.sh-by{margin:10px 0 0;font-size:13.5px;color:var(--ash)}
.sh-ref{display:flex;flex-wrap:wrap;gap:2px 0;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--hair);font-family:var(--display);font-size:13.5px;color:var(--ash);font-variant-numeric:tabular-nums}
.sh-ref b{font-weight:500;color:var(--copper-deep)}
.sh-ref>*+*::before{content:"\00b7";margin:0 9px;color:var(--ash-soft)}
.sh-open{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--copper-deep)}
.sh-open svg{width:13px;height:13px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sh-line:hover .sh-open svg{transform:translateX(4px)}
.sh-line:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.sh-shot img,.sh-open svg{transition:none}.sh-line:hover .sh-shot img,.sh-line:hover .sh-shot.lay img{transform:none}}
@media (max-width:900px){
  .sh-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0 22px}
  .sh-line.wide,.sh-line.wide.flip{display:flex;flex-direction:column;gap:0}
  .sh-line.wide.flip .sh-shot{order:0}
  .sh-line.wide .sh-text{padding-top:16px}
  .sh-line.wide .sh-shot{height:clamp(170px,36vw,250px)}
}
@media (max-width:600px){.sh-lines{grid-template-columns:1fr}.sh-shot.lay img,.sh-line.wide .sh-shot.lay img{width:150%;max-height:64px}}

/* ---- footer newsletter sign-up, kept quiet */
.foot-news{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.foot-news label{font-size:14.5px;color:rgba(255,255,255,.72)}
.fn-row{display:flex;flex:0 1 360px;min-width:240px;border-bottom:1px solid rgba(255,255,255,.35)}
.fn-row:focus-within{border-bottom-color:var(--copper-light)}
.fn-row input{flex:1;min-width:0;background:none;border:0;padding:8px 0;font:inherit;font-size:14.5px;color:#fff;outline:none}
.fn-row input::placeholder{color:rgba(255,255,255,.5)}
.fn-row button{background:none;border:0;padding:8px 0 8px 14px;font-family:var(--display);font-size:14px;font-weight:500;color:var(--copper-light);cursor:pointer}
.fn-row button:hover{color:#fff}
.foot .foot-cat{display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding:8px 0 8px clamp(0px,3vw,40px);border-left:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none}
.foot-cat img{width:clamp(150px,16vw,230px);height:auto;flex:none;display:block;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 40px -22px rgba(0,0,0,.95);transform:rotate(-4deg);transition:transform .3s}
.foot-cat:hover img{transform:rotate(0deg) translateY(-3px)}
.foot-cat .fc-text{display:flex;flex-direction:column;gap:10px;min-width:0}
.foot-cat h4{margin-bottom:0}
.foot-cat b{font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:400;line-height:1.25;color:#fff;text-wrap:balance}
.foot-cat .fc-cta{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;margin-top:4px;padding:11px 18px;border:1px solid var(--copper);border-radius:999px;background:var(--copper);font-family:var(--display);font-size:13.5px;font-weight:500;letter-spacing:.04em;color:#fff;transition:background .18s,color .18s}
.foot-cat:hover .fc-cta{background:var(--copper-deep);border-color:var(--copper-deep);color:#fff}
.foot-cat:focus-visible{outline:2px solid var(--copper-light);outline-offset:4px}
@media (max-width:900px){.foot-top{grid-template-columns:1fr}.foot .foot-cat{padding:26px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.12)}}
@media (max-width:480px){.foot-cat img{width:120px}}
@media (prefers-reduced-motion:reduce){.foot-cat img{transition:none}.foot-cat:hover img{transform:rotate(-4deg)}}
.cat-dl{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;padding:20px 24px;margin-bottom:clamp(22px,3vw,34px);background:var(--paper);border:1px solid var(--hair);color:inherit;text-decoration:none;transition:border-color .18s}
.cat-dl:hover{border-color:var(--copper)}
.cat-dl-cover{width:76px;height:auto;flex:none;border:1px solid var(--hair);box-shadow:0 10px 18px -12px rgba(23,19,16,.6);transform:rotate(-3deg);transition:transform .25s}
.cat-dl:hover .cat-dl-cover{transform:rotate(0deg)}
.cat-dl-text{display:flex;flex-direction:column;gap:3px;flex:1 1 280px;min-width:0}
.cat-dl-text b{font-family:var(--display);font-size:17px;font-weight:500}
.cat-dl-text span{font-size:14px;color:var(--ash)}
.cat-dl-cta{font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--copper-deep);white-space:nowrap}
.cat-dl:hover .cat-dl-cta{color:var(--graphite)}
@media (prefers-reduced-motion:reduce){.cat-dl-cover{transition:none}.cat-dl:hover .cat-dl-cover{transform:rotate(-3deg)}}
.fn-row button:focus-visible{outline:2px solid var(--copper-light);outline-offset:2px}
.fn-msg{flex-basis:100%;font-size:13.5px;color:rgba(255,255,255,.82)}
.foot-news+.foot-bottom{margin-top:22px}
/* ---- local distributors line in the call-to-action band */
.cta-band .inner{flex-wrap:wrap}
.cta-local{flex-basis:100%;margin:6px 0 0;padding-top:16px;border-top:1px solid var(--hair);font-size:14.5px;line-height:1.6;color:var(--ash)}
.cta-local b{font-weight:500;color:var(--graphite)}
.cta-local a{color:var(--copper-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(140,85,35,.35)}
.cta-local a:hover{text-decoration-color:currentColor}
.cta-local .cl-all{display:inline-flex;align-items:center;gap:6px;margin-left:6px;text-decoration:none;font-family:var(--display);font-weight:500;white-space:nowrap}
.cta-local .cl-all svg{width:13px;height:13px}
/* ---- 404 */
.nf .page-head .actions{margin-top:24px}
.nf-fams{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 32px;border-top:1px solid var(--hair)}
.nf-fams a{display:flex;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--hair);color:var(--graphite);text-decoration:none;font-family:var(--display)}
.nf-fams span{font-size:18px;font-weight:500}
.nf-fams small{margin-left:auto;font-size:13px;color:var(--ash)}
.nf-fams svg{width:14px;height:14px;flex:none;align-self:center;color:var(--copper-deep);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nf-fams a:hover span{color:var(--copper-deep)}
.nf-fams a:hover svg{transform:translateX(4px)}
.nf-more{margin:26px 0 clamp(48px,6vw,88px);font-size:14.5px;color:var(--ash)}
.nf-more a{color:var(--copper-deep)}
@media (prefers-reduced-motion:reduce){.nf-fams svg{transition:none}}

/* ---- key opinion leaders */
.kol-wall{list-style:none;margin:8px 0 clamp(48px,6vw,88px);padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(14px,1.6vw,24px)}
.kol img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#fff}
.kol h2{margin-top:12px;font-size:16.5px;font-weight:500;line-height:1.25}
.kol h2 span{font-weight:400;color:var(--ash);font-size:13.5px;white-space:nowrap}
.kol p{margin:4px 0 0;font-size:14px;color:var(--ash)}
.kol-line{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--copper-deep);text-decoration:none}
.kol-line svg{width:13px;height:13px;flex:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.kol-line:hover{color:var(--graphite)}
.kol-line:hover svg{transform:translateX(3px)}
.kol-join>div{aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;border:1px solid var(--hair)}
.kol-join h2{margin-top:0;font-size:19px;font-weight:600}
.kol-join p{font-size:13.5px;line-height:1.5}
.kol-collab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,72px);align-items:start}
.kol-collab h2{font-size:clamp(24px,2.8vw,34px);font-weight:600;letter-spacing:-.015em;line-height:1.12}
.kol-collab .lede{margin-top:12px;max-width:40ch}
.kol-collab ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.kol-collab li a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:16px 0;border-bottom:1px solid var(--hair);color:var(--graphite);text-decoration:none;font-family:var(--display)}
.kol-collab b{font-size:17.5px;font-weight:500}
.kol-collab li span{font-size:14px;color:var(--ash)}
.kol-collab li svg{width:14px;height:14px;margin-left:auto;align-self:center;color:var(--copper-deep);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.kol-collab li a:hover b{color:var(--copper-deep)}
.kol-collab li a:hover svg{transform:translateX(4px)}
.text-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--copper-deep);text-decoration:none}
.text-link svg{width:14px;height:14px}
.text-link:hover{color:var(--graphite)}
@media (prefers-reduced-motion:reduce){.kol-line svg,.kol-collab li svg{transition:none}}
@media (max-width:1100px){.kol-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:820px){.kol-wall{grid-template-columns:repeat(3,minmax(0,1fr))}.kol-collab{grid-template-columns:1fr}}
@media (max-width:520px){.kol-wall{grid-template-columns:repeat(2,minmax(0,1fr))}.kol h2{font-size:15px}}

/* ---- distribution page: a compact top. Head, then the globe beside its title, then the search and regions */
.dist-page .page-head{padding-top:clamp(20px,3vw,36px);padding-bottom:18px}
.dist-page .page-head .lede{margin-top:10px}
.dist-mount .d-topline{display:none}
.dist-mount .d-map{margin-top:0;padding:clamp(16px,2vw,28px);grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:12px clamp(20px,4vw,56px);align-items:center}
.dist-mount .d-map-head{grid-column:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding-bottom:0;border-bottom:0}
.dist-mount .d-map-title{font-size:clamp(22px,2.4vw,30px);line-height:1.15;font-weight:600;letter-spacing:-.015em}
.dist-mount .d-legend{flex-direction:column;align-items:flex-start;gap:8px;font-size:13.5px}
.dist-mount .m-globe-wrap{grid-column:2;max-width:400px;padding:0}
.dist-mount .m-hint{margin-top:6px}
@media (max-width:760px){
  .dist-mount .d-map{grid-template-columns:1fr}
  .dist-mount .d-map-head,.dist-mount .m-globe-wrap{grid-column:1}
  .dist-mount .m-globe-wrap{max-width:340px}
}

/* ---- language switch */
.lang-drop{position:relative;display:flex;align-items:center}
.lang-drop .lang-menu{left:auto;right:0;transform:none;min-width:170px}
.lang-drop .lang-menu a{padding:9px 14px}
.lang-drop .lang-menu a[aria-current]{color:var(--copper-deep);border-left-color:var(--copper)}

.kol-links{display:flex;flex-wrap:wrap;gap:2px 12px;margin:8px 0 0;font-family:var(--display);font-size:12.5px}
.kol-links a{color:var(--ash);text-decoration:none;border-bottom:1px solid var(--hair)}
.kol-links a:hover{color:var(--copper-deep);border-bottom-color:currentColor}
.kol-collab li{position:relative}
.kol-collab .kol-ig{display:block;margin:-8px 0 12px;font-family:var(--display);font-size:12.5px;color:var(--ash);text-decoration:none}
.kol-collab .kol-ig:hover{color:var(--copper-deep)}
/* ---- phones: tap targets, readable labels, shorter pages (mobile pass, 2026-09-19) */
@media (max-width:760px){
  .foot a{padding:8px 0}
  .foot-bottom a{padding:6px 0}
  .map-credit{font-size:11px}
  .hq .photo{display:none}
  .kol-line,.text-link,.kol-links a,.cta-local .cl-all,.sc-link{padding:6px 0}
  .kol-links{gap:0 16px}
  /* the downloads list has its own rules at the end of this file (support page) */
}
.doc-note-m{display:none;margin:0 0 12px;font-size:13.5px;color:var(--ash)}

/* ---- shared controls on touch screens: breadcrumb and the comparison pill reach 44 px (phone pass) */
@media (hover:none),(pointer:coarse){
  .crumb{font-size:12.5px;line-height:1.4}
  .crumb a{display:inline-block;padding:11px 0}
  .crumb span{margin:0 6px}
  .view-switch button{padding:11px 14px;min-height:44px}
  .menu-btn{min-height:44px}
}

/* margin-free cut-outs carry real transparency, so they are drawn plainly: multiply blending would darken their whole box on
   bone (the browser multiplies the transparent area too). Multiply stays for the raw SKU photos on white. */
#main img[src^="sku/trim"]{mix-blend-mode:normal}
/* ---- support page (redesigned 2026-09-20): a desk of destinations, then documents, then one place to ask.
   Section ids are deep-linked from the header menu and the 404 page, so they stay: #faq, #downloads, #support-form. */
#faq,#downloads,#support-form{scroll-margin-top:86px}
.sup-top{padding-bottom:clamp(30px,4vw,48px)}
.sup-desk{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1px;padding:1px;margin-top:clamp(22px,3vw,34px)}
.sup-tile{display:flex;flex-direction:column;gap:7px;padding:20px 20px 22px;background:var(--paper);box-shadow:0 0 0 1px var(--hair);color:inherit;text-decoration:none;transition:background .18s}
.sup-tile:hover{background:var(--bone)}
.sup-tile h3{font-size:17px;font-weight:500;line-height:1.25}
.sup-tile p{font-size:13.5px;line-height:1.55;color:var(--ash)}
.sup-tile>span{margin-top:auto;padding-top:12px;font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--copper-deep)}
.ar{display:inline-block;font-style:normal;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sup-tile:hover .ar,.doc-card:hover .ar{transform:translateX(4px)}
.doc-card:hover .ar.dn{transform:translateY(3px)}

/* FAQ: the questions sit beside their heading instead of under it, so the page starts shorter */
.faq-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(22px,4vw,64px);align-items:start}
.faq-aside{position:sticky;top:96px}
.faq-aside h2{font-size:clamp(24px,2.8vw,34px);font-weight:600;letter-spacing:-.02em}
.faq-aside .lede{margin-top:12px;font-size:15.5px;max-width:36ch}
.faq-aside .text-link{margin-top:18px}

/* downloads: first the three documents that cover the whole range, then what is published per line */
.doc-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;padding:1px;margin-bottom:clamp(30px,4vw,48px)}
.doc-card{display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--paper);box-shadow:0 0 0 1px var(--hair);color:inherit;text-decoration:none;transition:box-shadow .18s}
.doc-card:hover{box-shadow:0 0 0 1px var(--copper)}
.doc-card .tag{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;background:var(--copper);color:#fff}
.doc-card .tag.quiet{background:var(--bone-deep);color:var(--ash)}
.doc-card b{font-family:var(--display);font-size:17.5px;font-weight:500;margin-top:4px}
.doc-card p{font-size:14px;line-height:1.55;color:var(--ash)}
.doc-card .go{margin-top:auto;padding-top:12px;font-family:var(--display);font-size:14px;font-weight:500;color:var(--copper-deep)}
.doc-find h3{font-size:19px;font-weight:500}
.doc-hint{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--ash);max-width:72ch}
.doc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:18px 0 20px}
.doc-tools input{font:inherit;font-size:15px;padding:11px 14px;min-height:44px;border:1px solid var(--hair);background:var(--paper);color:var(--graphite);border-radius:0;flex:0 1 300px;min-width:210px}
.doc-tools input:focus{outline:2px solid var(--copper);outline-offset:0;border-color:var(--copper)}
.doc-tools .chips{margin-top:0}
.doc-tools .chip{background:var(--paper)}
#downloads .doc-table{background:var(--paper)}
.doc-table td[data-label="Documents"]{line-height:2.2}
.doc-table a.pill{text-decoration:none;margin:0 6px 0 0;transition:border-color .18s,color .18s}
.doc-table a.pill:hover{border-color:var(--copper);color:var(--copper-deep);background:var(--paper)}
.doc-ask{text-align:right;white-space:nowrap}
/* one plain action per row: 57 copper links would read as noise, so it stays quiet until it is pointed at */
.doc-req{background:none;border:0;padding:8px 0;font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--ash);cursor:pointer;text-underline-offset:3px;transition:color .18s}
.doc-req:hover{color:var(--copper-deep);text-decoration:underline}
#downloads .doc-table .pill.pend{border-color:transparent;padding-left:0;color:var(--ash-soft)}
.doc-empty{margin-top:20px;font-size:14.5px;color:var(--ash)}
.doc-more{margin-top:22px}
.doc-more .btn{background:var(--paper)}

/* the form, with warranty, ordering and the direct line beside it */
.sup-h2{font-size:clamp(24px,2.8vw,32px);font-weight:600;margin:8px 0 10px}
.sup-lede{font-size:15.5px;margin-bottom:26px}
.sup-aside{display:flex;flex-direction:column;gap:1px;padding:1px;margin-top:8px}
.sup-note{background:var(--paper);box-shadow:0 0 0 1px var(--hair);padding:20px 22px}
.sup-note h3{font-size:16.5px;font-weight:500;margin-bottom:10px}
.sup-note p{font-size:14.5px;line-height:1.65;color:var(--ash)}
.sup-note p+p{margin-top:10px}
.sup-note .text-link{margin-top:14px}
.sup-contact{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sup-contact li{display:flex;flex-direction:column;gap:3px;font-size:15px}
.sup-contact a{color:var(--copper-deep)}
.sup-contact a:hover{color:var(--graphite)}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr}
  .faq-aside{position:static}
  .faq-aside .lede{max-width:62ch}
}

/* downloads list on small screens: one block per product line, no sideways scrolling */
@media (max-width:860px){
  .doc-table,.doc-table tbody,.doc-table tr,.doc-table td{display:block;width:100%}
  .doc-table thead{display:none}
  /* name on its own line, then the family, then the documents and the request action side by side */
  .doc-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 14px;padding:10px 14px;border-bottom:1px solid var(--hair)}
  .doc-table tr:last-child{border-bottom:0}
  .doc-table td{padding:0;border:0}
  .doc-table td::before{content:none}
  .doc-table td[data-label="Product line"]{grid-area:1/1/2/3}
  .doc-table td[data-label="Product line"] a{display:block;padding:4px 0;font-family:var(--display);font-size:16px;line-height:1.3}
  .doc-table td[data-label="Category"]{grid-area:2/1/3/2;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ash)}
  .doc-ask{grid-area:2/2/3/3;justify-self:end;text-align:right;white-space:nowrap}
  .doc-table td[data-label="Documents"]{grid-area:3/1/4/3;margin-top:2px;line-height:1.6}
  .doc-table a.pill{margin:2px 6px 2px 0}
  .doc-note-m{display:block}
}

/* touch: every link in the documents list reaches 44 px */
@media (hover:none),(pointer:coarse){
  .doc-table a.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
  .doc-table .pill.pend{display:inline-flex;align-items:center;min-height:36px}
  .doc-req{min-height:44px;padding:12px 0}
  .doc-tools .chip{min-height:44px;padding:10px 15px}
  .doc-more .btn{min-height:44px}
  .doc-table td[data-label="Product line"] a{min-height:44px;display:flex;align-items:center}
  .faq summary{min-height:44px}
  .sup-contact a{display:inline-flex;align-items:center;min-height:44px}
}

/* the catalogue card carries the printed cover (#80), tilted until it is pointed at */
.doc-cover{align-self:flex-start;width:72px;height:auto;border:1px solid var(--hair);box-shadow:0 10px 18px -12px rgba(23,19,16,.6);transform:rotate(-3deg);transition:transform .25s}
.doc-card:hover .doc-cover{transform:rotate(0deg)}
@media (prefers-reduced-motion:reduce){.doc-cover{transition:none}.doc-card:hover .doc-cover{transform:rotate(-3deg)}}

/* ---- privacy policy: one readable column */
.legal{max-width:760px;padding-bottom:clamp(48px,6vw,96px)}
.legal-date{margin-top:10px;font-size:14px;color:var(--ash)}
.legal-sec{margin-top:clamp(28px,3vw,40px)}
.legal-sec h2{font-size:clamp(20px,2vw,24px);line-height:1.25}
.legal-sec p,.legal-sec li{font-size:16px;line-height:1.7;color:var(--graphite);max-width:68ch}
.legal-sec p{margin:12px 0 0}
.legal-sec ul{margin:12px 0 0;padding-left:1.2em;display:grid;gap:6px}

/* ---- phone pass (owner feedback 2026-09-22) */
/* headings: h1 and h2 in bold (Montserrat 600) */
h1,h2{font-weight:600}
/* view switch: a raised control that nudges left and right once on arrival, so the eye finds it */
.view-switch{box-shadow:0 1px 0 rgba(23,19,16,.06),0 6px 8px -4px rgba(23,19,16,.28);border-color:rgba(23,19,16,.16)}
.view-switch button.is-on{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(23,19,16,.35)}
.view-switch{animation:view-nudge 1s cubic-bezier(.36,.07,.19,.97) .9s 1 both}
@keyframes view-nudge{0%,100%{transform:none}18%{transform:translateX(-8px)}36%{transform:translateX(7px)}54%{transform:translateX(-5px)}72%{transform:translateX(3px)}88%{transform:translateX(-1px)}}
@media (prefers-reduced-motion:reduce){.view-switch{animation:none}}
@media (max-width:700px){
  /* breadcrumb: one line on phones, just the way back up ("‹ Ceramic Brushes") */
  .crumb>a,.crumb>span,.crumb>b{display:none}
  .crumb>a:last-of-type{display:inline-block;padding:8px 0}
  .crumb>a:last-of-type::before{content:"\2039";margin-right:8px;font-size:1.25em;line-height:0;position:relative;top:1px}
  /* family pages: the intro paragraph gives way to the products on phones */
  .fam-head .lede{display:none}
}

/* ---- visitor statistics consent: a quiet bar at the foot of the screen, equal-weight choices */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;max-width:760px;margin:0 auto;
  display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:16px 20px;background:var(--paper);border:1px solid var(--hair);
  box-shadow:0 8px 8px -6px rgba(23,19,16,.25);font-size:15px;line-height:1.5;color:var(--graphite)}
.cookie-bar p{flex:1 1 320px;margin:0}
.cookie-bar p a{color:var(--copper-deep);text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex:none}
.cookie-actions .btn{min-height:44px;justify-content:center;min-width:104px}
.cookie-link{border:0;background:none;padding:0;margin-left:18px;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cookie-link:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
body:has(.cookie-bar) .hero-scroll{bottom:calc(clamp(20px,3.2vh,40px) + 110px)}
@media (max-width:560px){.cookie-bar{bottom:calc(10px + env(safe-area-inset-bottom,0px));left:10px;right:10px}.cookie-actions{width:100%}.cookie-actions .btn{flex:1}}

/* ---- home: where to find us, one line under Support and contact (replaces the headquarters block) */
.home-where{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:22px;font-size:15px;color:var(--ash)}
.home-where b{font-family:var(--display);font-weight:600;color:var(--graphite)}
.home-where a{display:inline-flex;align-items:center;gap:8px;color:var(--copper-deep);font-family:var(--display);font-weight:500}
.home-where a svg{width:15px;height:7px}

/* ---- distributors: regions fold; the visitor's region opens, a search opens every region with a match */
.dist-mount .d-region h2{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;padding-top:6px;padding-bottom:14px}
.dist-mount .d-region h2 .d-rc{font-family:var(--body);font-size:15px;font-weight:400;color:var(--ash);letter-spacing:0;text-transform:none}
.dist-mount .d-region h2::after{content:"";margin-left:auto;width:11px;height:11px;border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.dist-mount .d-region.is-shut h2::after{transform:rotate(-45deg)}
.dist-mount .d-region h2:hover{color:var(--copper-deep)}
.dist-mount .d-region h2:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
.dist-mount .d-region.is-shut{padding-top:18px}
.dist-mount .d-region.is-shut>*:not(h2){display:none}
@media (prefers-reduced-motion:reduce){.dist-mount .d-region h2::after{transition:none}}

/* ============================================================================
   Header search, Support dropdown, category bar, product finder, category tiles,
   workflow tiles.
   ============================================================================ */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:290px;background:var(--paper);border:1px solid var(--hair);box-shadow:0 30px 50px -30px rgba(23,19,16,.4);padding:8px;display:none;z-index:50}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu,.nav-drop.is-open .nav-drop-menu{display:block}
.nav-drop-menu a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;color:var(--graphite);border-left:2px solid transparent}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:var(--bone);border-left-color:var(--copper)}
.nav-drop-menu b{font-family:var(--display);font-size:14.5px;font-weight:500}
.nav-drop-menu .ext{font-style:normal;color:var(--copper);margin-left:4px}
.nav-drop-menu small{font-size:12.5px;color:var(--ash);line-height:1.45}
section[id]{scroll-margin-top:140px}
.site-search{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--hair);background:var(--paper);padding:0 10px;height:36px;width:clamp(150px,15vw,210px)}
.site-search svg{width:16px;height:16px;color:var(--ash);flex:none}
.site-search input{border:0;background:none;font:inherit;font-size:14px;color:var(--graphite);width:100%;outline:none;padding:0}
.site-search input::placeholder{color:var(--ash)}
.search-drop{position:absolute;top:calc(100% + 6px);right:0;left:0;min-width:340px;background:var(--paper);border:1px solid var(--hair);box-shadow:0 24px 50px -24px rgba(23,19,16,.45);z-index:60;max-height:380px;overflow:auto}
.search-drop a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-bottom:1px solid var(--hair);font-size:14px}
.search-drop a:last-child{border-bottom:0} .search-drop a:hover{background:var(--bone)}
.search-drop b{font-weight:500} .search-drop small{color:var(--ash);font-size:12px}
.search-drop p{padding:12px 14px;font-size:13.5px;color:var(--ash)}
.catbar{display:none;border-top:1px solid var(--hair);background:var(--paper)}
.catbar-in{display:flex;align-items:center;gap:clamp(14px,2vw,30px);min-height:46px;overflow-x:auto;scrollbar-width:none}
.catbar-in::-webkit-scrollbar{display:none}
.catbar-label{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ash);flex:none}
.catbar-link{font-family:var(--display);font-size:14px;font-weight:500;white-space:nowrap;padding:12px 0;border-bottom:2px solid transparent;color:var(--graphite)}
.catbar-link:hover{color:var(--copper-deep)} .catbar-link.is-active{border-bottom-color:var(--copper);color:var(--copper-deep)}
.catbar-all{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:13px;font-weight:500;color:var(--copper-deep);white-space:nowrap}
.catbar-all svg{width:15px;height:7px}
.finder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:26px;padding:16px;border:1px solid var(--hair);background:var(--bone)}
.finder .btn{height:46px}
.hero .actions{margin-top:18px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;min-height:400px;background:#fff;border:1px solid var(--hair);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 30px 50px -34px rgba(23,19,16,.4)}
.tile-body{padding:22px 22px 0;position:relative;z-index:2}
.tile h3{font-size:22px;font-weight:600}
.tile ul{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.tile li{font-size:13.5px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .btn{margin-top:16px}
.tile-img{margin-top:auto;height:200px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.tile-img.cut img{max-height:190px;width:auto;transform:rotate(28deg) translateY(20px);transform-origin:center;mix-blend-mode:multiply}
.tile-img.photo img{width:100%;height:100%;object-fit:cover}
/* featured card picture: the same picture as the family cards (cardMedia): slim brushes lie across the card with the tips in
   view and the handles running off the edge; everything else is its margin-free cut-out filling the box */
.workflows{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.wf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:18px;align-items:center;background:var(--paper);border:1px solid var(--hair);padding:26px;transition:transform .3s ease,box-shadow .3s ease}
.wf:hover{transform:translateY(-3px);box-shadow:0 30px 50px -34px rgba(23,19,16,.4)}
.wf h3{font-size:22px;font-weight:600;line-height:1.2}
.wf p{margin-top:8px;font-size:14px;color:var(--ash)}
.wf-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--display);font-size:13px;font-weight:500;color:var(--copper-deep)}
.wf-link svg{width:15px;height:7px}
.wf-img{aspect-ratio:1/1;overflow:hidden;background:#fff}
.wf-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:960px){
  .site-search{display:none}
  .finder{grid-template-columns:1fr}
  .wf{grid-template-columns:1fr}
}

/* header fit: tighten, then collapse to the Menu button before nav, search and language switch run out of room */
@media (min-width:961px) and (max-width:1240px){ .site-search{width:150px} .nav{gap:16px} }
@media (max-width:1120px){ .bar{grid-template-columns:auto auto;justify-content:space-between} .nav,.lang{display:none} .menu-btn{display:inline-block} }

/* ---- home: family strip (five families, one bench) */
.fam-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;padding:1px}
.fam{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;box-shadow:0 0 0 1px var(--hair);background:#fff}
.fam img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fam:hover img{transform:scale(1.04)}
.fam-body{position:absolute;left:0;right:0;bottom:0;padding:42px 18px 16px;background:linear-gradient(180deg,rgba(11,10,9,0),rgba(11,10,9,.86));color:#fff;display:flex;flex-direction:column;gap:3px}
.fam-name{font-family:var(--display);font-size:19px;font-weight:500;line-height:1.2}
.fam-meta{font-weight:500;font-family:var(--display);font-size:13.5px;color:var(--copper-light)}
.fam:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
@media (max-width:960px){
  .fam-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){.fam-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.fam{aspect-ratio:4/5}.fam-name{font-size:16px}}

/* ---- home: bench section (photo cropped to the height of the text column) */
.bench{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--bone);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.bench-art{position:relative;min-height:0}
.bench-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bench-copy{padding:clamp(40px,6vw,88px) clamp(24px,5vw,80px)}
.bench-copy h2{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.02em;max-width:18ch}
.bench-intro{margin-top:18px;font-size:16px;line-height:1.7;color:var(--ash);max-width:56ch}
.figures-line{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14px;color:var(--ash)}
.figures-line b{font-family:var(--display);font-weight:500;color:var(--graphite);font-size:17px;font-variant-numeric:tabular-nums}
.bench-copy .btn{margin-top:26px}
@media (max-width:900px){.bench{grid-template-columns:1fr}.bench-art{aspect-ratio:4/3}}

/* ================= series page: one catalogue sheet (pageSeries in app.js)
   Head > key features beside specifications > item numbers (item-select.css, item-viewer.css) > media strip > related lines > CTA.
   Nothing is pinned, snapped or revealed on scroll. */
.sp-h{font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.02em}
.sp-h3{margin-top:26px;font-size:16px;font-weight:500}
.sp .sec.tight{padding:clamp(32px,3.6vw,52px) 0}

/* ---------- head text (shared by the hero) */
.sp-title h1{font-size:clamp(30px,3.8vw,50px);font-weight:600;line-height:1.08;letter-spacing:-.025em}
.sp-title h1 sup{font-size:.42em;vertical-align:super;color:var(--copper);margin-left:2px}
.byline{margin-top:10px;font-family:var(--display);font-size:15.5px;color:var(--copper-deep)}
.sp-title .lede{margin-top:12px;color:var(--graphite)}
.series-intro{display:flex;flex-direction:column;gap:12px}
.series-intro p{font-size:16px;line-height:1.7;color:var(--ash);max-width:60ch}
.sp-more summary{width:max-content;cursor:pointer;font-family:var(--display);font-size:14px;font-weight:500;color:var(--copper-deep);list-style:none}
.sp-more summary::-webkit-details-marker{display:none}
.sp-more summary::after{content:" +"}
.sp-more[open] summary{display:none}
.sp-more summary:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.sp-more p{margin-top:12px}
.sp-more p:first-of-type{margin-top:0}

/* ---------- hero: the product large on a bone stage, key features pinned to the part they describe (seriesHero in app.js,
   positions in hero-callouts.js). Entrance motion runs once on load, never on scroll, and is off with prefers-reduced-motion. */
@keyframes heroIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes heroUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@keyframes heroGrow{from{height:0}to{height:var(--len)}} /* height, not a transform: a transformed 1px line on a fractional pixel is not painted */
@keyframes heroGrowX{from{width:0}to{width:100%}}
.sp-hero{position:relative;background:#fff;border-bottom:1px solid var(--hair);overflow:hidden}
.sp-hero .crumb{padding-top:22px}
.sp-hero .wrap{display:flex;flex-direction:column;padding-bottom:clamp(28px,3.4vw,48px)}
.sp-hero.is-lay .wrap{min-height:min(78vh,720px)}
.sp-hero .sp-title h1{font-size:clamp(34px,4.6vw,64px);line-height:1.04}
.sp-hero .sp-title>*{animation:heroUp .5s ease-out forwards}   /* forwards, not both: the title stays visible if the fade never starts (2026-11-01) */
.sp-hero .sp-title>:nth-child(2){animation-delay:.06s}.sp-hero .sp-title>:nth-child(3){animation-delay:.12s}
.hero-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 40px;margin-top:clamp(18px,2.4vw,34px)}
.hero-sw{display:flex;gap:6px;padding-bottom:6px}
.hero-sw button{width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.hero-sw i{display:block;width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(23,19,16,.16);transition:box-shadow .2s}
.hero-sw button:hover i{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ash-soft)}
.hero-sw button[aria-pressed="true"] i{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--copper)}
.hero-sw button:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
/* the stage and the figure the pins are measured against */
.hero-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;margin:clamp(70px,8vw,104px) 0}
.hero-fig{position:relative;display:block;width:100%}
.hero-img{display:block;width:100%;height:auto;animation:heroIn .7s cubic-bezier(.16,1,.3,1) forwards}
.sp-hero.is-cut .hero-stage,.sp-hero.is-photo .hero-stage{margin:clamp(30px,3.6vw,48px) 0;padding:0 clamp(150px,17vw,260px)}
.sp-hero.is-cut .hero-fig,.sp-hero.is-photo .hero-fig{width:auto;max-width:100%}
.sp-hero.is-cut .hero-img{width:auto;max-width:100%;max-height:min(52vh,460px);object-fit:contain;mix-blend-mode:multiply}
.sp-hero.is-photo .hero-img{width:auto;max-width:100%;max-height:min(52vh,480px);animation-name:heroFade}
.sp-hero.no-pins .hero-stage{margin-top:clamp(26px,3vw,40px);margin-bottom:0}
/* side layout (series.side): the cut-out on the left, the features and the introduction beside it */
.sp-hero.is-side .hero-stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center;margin:clamp(26px,3vw,40px) 0 0;padding:0}
.sp-hero.is-side .hero-fig{width:auto;max-width:100%;justify-self:center}
.sp-hero.is-side .hero-img{width:auto;max-width:100%;max-height:min(52vh,460px);object-fit:contain}
.sp-hero.is-side .hero-rest{flex-direction:column;gap:10px;margin:0 0 clamp(18px,2.4vw,28px)}
.sp-hero.is-side .series-intro{display:block}
.sp-hero.is-side .series-intro p+p{margin-top:12px}
.sp-hero.is-side .hero-foot{display:flex;justify-content:flex-end}
.hero-pins{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.hero-pin{--len:calc(clamp(34px,4vw,54px) + min(3.6vw,52px));position:absolute;display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap}
.hero-pin b{font-family:var(--display);font-size:clamp(13.5px,1.1vw,15.5px);font-weight:500;color:var(--graphite);padding:6px 0;animation:heroFade .4s ease-out both;animation-delay:calc(.8s + var(--i) * .12s)}
.hero-pin::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--copper);animation:heroFade .3s ease-out both;animation-delay:calc(.5s + var(--i) * .12s)}
.hero-line{display:block;background:var(--copper)}
/* lay: pins stand above or below a point along the brush */
.hero-pin.is-up,.hero-pin.is-down{left:var(--at)}
.hero-pin.is-up{bottom:50%;flex-direction:column-reverse}
.hero-pin.is-down{top:50%}
.hero-pin.is-end{align-items:flex-end;transform:translateX(-100%)}
.hero-pin.is-up .hero-line,.hero-pin.is-down .hero-line{width:1px;height:var(--len);animation:heroGrow .4s ease-out both;animation-delay:calc(.55s + var(--i) * .12s)}
.hero-pin.is-up::before,.hero-pin.is-down::before{left:-3px}
.hero-pin.is-end::before{left:auto;right:-3px}
.hero-pin.is-up::before{bottom:-3px}.hero-pin.is-down::before{top:-3px}
/* cut and photo: the pin box runs from the point to the edge of the picture; the line fills it and the label sits just
   past the edge, on the bone, so it never lies over the product */
.hero-pin.is-left,.hero-pin.is-right{--gap:clamp(14px,1.8vw,26px);top:var(--y);height:0;display:block;transform:none}
.hero-pin.is-left{left:0;width:var(--x)}
.hero-pin.is-right{left:var(--x);right:0}
.hero-pin.is-left .hero-line,.hero-pin.is-right .hero-line{position:absolute;top:0;height:1px;width:100%;animation:heroGrowX .4s ease-out both;animation-delay:calc(.55s + var(--i) * .12s)}
.hero-pin.is-left .hero-line{right:0}.hero-pin.is-right .hero-line{left:0}
.hero-pin.is-left b,.hero-pin.is-right b{position:absolute;top:0;transform:translateY(-50%);padding:0}
.hero-pin.is-left b{right:calc(100% + var(--gap));text-align:right}.hero-pin.is-right b{left:calc(100% + var(--gap))}
.hero-pin.is-left::before,.hero-pin.is-right::before{top:-3px}
.hero-pin.is-left::before{right:-3px}.hero-pin.is-right::before{left:-3px}
/* features without a pin (or all of them when the series has none) run as a row under the picture */
.hero-rest{display:flex;flex-wrap:wrap;gap:8px 28px;margin:clamp(20px,2.6vw,34px) 0 0;padding:0;list-style:none}
.hero-rest li{position:relative;padding-left:14px;font-family:var(--display);font-size:15px;font-weight:500;color:var(--graphite)}
.hero-rest li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--copper)}
.hero-foot{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:20px clamp(28px,5vw,72px);align-items:end;margin-top:clamp(24px,3vw,40px)}
.hero-foot .series-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.hero-foot .series-intro p{font-size:15px;line-height:1.65;max-width:58ch}
.hero-foot .series-intro:has(> p:only-child),.hero-foot .series-intro:has(> details){grid-template-columns:minmax(0,1fr)}
.hero-foot .actions{margin-top:0;align-items:center;gap:12px 14px}
.hero-foot .actions .store-link{margin-left:6px}
@media (max-width:960px){
  .sp-hero.is-lay .wrap{min-height:0}
  .sp-hero.is-cut .hero-stage,.sp-hero.is-photo .hero-stage{padding:0 clamp(90px,14vw,150px)}
  .hero-foot{grid-template-columns:minmax(0,1fr)}
}
/* phones: a slim item runs off the right edge so the tip reads large; every pin becomes a list entry */
@media (max-width:760px){
  .hero-stage,.sp-hero.is-cut .hero-stage,.sp-hero.is-photo .hero-stage{display:block;margin:28px 0 22px;padding:0}
  .sp-hero.is-side .hero-stage{display:block}
  .sp-hero.is-side .hero-fig{margin:0 auto 22px;width:fit-content}
  .sp-hero.is-side .hero-img{max-height:min(56vw,360px)}
  .sp-hero.is-side .hero-rest{flex-direction:row}
  .sp-hero.is-side .hero-foot{justify-content:flex-start}
  .sp-hero.is-lay .hero-img{width:100%;max-width:100%}  /* the whole instrument, not a zoomed crop */
  .sp-hero.is-cut .hero-fig,.sp-hero.is-photo .hero-fig{margin:0 auto;width:fit-content}
  .sp-hero.is-cut .hero-img,.sp-hero.is-photo .hero-img{max-height:min(56vw,360px)!important}  /* beats the desktop cap set inline */
  .hero-pins{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin-top:22px}
  .hero-pin,.hero-pin.is-end,.hero-pin.is-up,.hero-pin.is-down,.hero-pin.is-left,.hero-pin.is-right{display:flex;flex-direction:column;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:auto;transform:none;padding:0 0 0 14px;white-space:normal;align-items:flex-start}
  .hero-pin.is-left b,.hero-pin.is-right b{position:static;transform:none;text-align:left}
  .hero-line{display:none}
  .hero-pin::before,.hero-pin.is-end::before,.hero-pin.is-up::before,.hero-pin.is-down::before,.hero-pin.is-left::before,.hero-pin.is-right::before{left:0;right:auto;top:.75em;bottom:auto;margin:0}
  .hero-pin b{padding:0;font-size:14px}
  .hero-rest{gap:8px 18px}
  .hero-foot .series-intro{grid-template-columns:minmax(0,1fr);gap:12px}
  .hero-foot .actions .btn{flex:1 1 auto;justify-content:center}
  .hero-foot .actions .store-link{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.sp-hero *,.sp-hero *::before{animation:none!important}}

/* ---------- key features beside specifications */
.sp-facts-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:start}
.sp-facts-grid>div:only-child{grid-column:1/-1}
.sp-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,40px);margin:18px 0 0}
.sp-feats>div{padding:14px 0 16px;border-top:1px solid var(--hair)}
.sp-feats dt{font-family:var(--display);font-size:16px;font-weight:500}
.sp-feats dd{margin:5px 0 0;font-size:14.5px;line-height:1.55;color:var(--ash)}
.benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;margin:12px 0 0;padding:0;list-style:none}
.benefits li{padding-left:16px;position:relative;font-size:14.5px;color:var(--ash)}
.benefits li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--copper)}
.specs{width:100%;margin-top:18px;border-collapse:collapse;font-size:14.5px}
.specs th,.specs td{text-align:left;padding:10px 0;border-top:1px solid var(--hair);vertical-align:top;line-height:1.5}
.specs th{width:36%;padding-right:16px;font-family:var(--display);font-weight:500}
.specs td{color:var(--ash)}
.sp-docs{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);font-size:14.5px;color:var(--ash)}
.sp-docs a{color:var(--copper-deep);border-bottom:1px solid transparent}
.sp-docs a:hover{border-bottom-color:currentColor}

/* ---------- item numbers: heading row, tabs */
.sp-items-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-bottom:20px}
.sp-items-head p{font-size:15px;color:var(--ash)}
.tabs{display:flex;flex-wrap:wrap;gap:4px clamp(14px,2.4vw,34px);border-bottom:1px solid var(--hair)}
.tabs[hidden]{display:none}
.tab{background:none;border:0;cursor:pointer;font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:.01em;color:var(--ash);padding:0 0 12px;border-bottom:2px solid transparent;display:flex;align-items:baseline;gap:8px;transition:color .16s}
.tab:hover{color:var(--graphite)} .tab.is-active{color:var(--graphite);border-bottom-color:var(--copper)}
.tab:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.tab i{font-style:normal;font-size:13px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--ash)} .tab.is-active i{color:var(--copper-deep)}
.panel-note{margin-top:18px;font-size:14.5px;color:var(--ash);max-width:72ch}
.panel-note:empty{display:none}

/* ---------- media strip: film, photographs and infographics in one row */
.sp-media .carousel{position:relative;margin-top:18px}
.car-viewport{position:relative}
.car-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
.car-slide{flex:0 0 auto;height:clamp(240px,27vw,380px);max-width:100%;margin:0;scroll-snap-align:start;background:#fff;overflow:hidden}
.car-slide a{display:block;width:100%;height:100%;cursor:zoom-in}
.car-slide a:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.car-slide img{display:block;height:100%;width:auto;max-width:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.car-slide.is-capped a{display:flex;align-items:center;justify-content:center}
.car-slide.is-video{aspect-ratio:16/9;background:var(--graphite)}
.car-slide video{display:block;width:100%;height:100%}
.car-btn{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;background:var(--paper);color:var(--graphite);border:1px solid var(--hair);box-shadow:0 8px 24px rgba(23,19,16,.12);cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .25s}
.car-btn.prev{left:14px}
.car-btn.next{right:14px}
.car-btn:hover{background:var(--graphite);border-color:var(--graphite);color:#fff}
.car-btn:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.car-btn:disabled{opacity:0;pointer-events:none}
.car-meta{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:12px;font-size:14px;color:var(--ash)}
.car-count{font-variant-numeric:tabular-nums;white-space:nowrap}
.car-count b{font-weight:500;color:var(--graphite)}
@media (hover:none),(pointer:coarse){.car-btn{display:none}}

/* ---------- related lines: a short row of smaller cards */
.sp-related .series-grid,html:not(.cards-v2) .sp-related .series-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.sp-related .series-card .shot,html:not(.cards-v2) .sp-related .series-card .shot{height:170px}
.sp-related .series-card .shot.lay{gap:12px}
.sp-related .series-card .shot.lay img{max-height:48px}
.sp-related .series-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:960px){
  .sp-facts-grid{grid-template-columns:minmax(0,1fr)}
  .sp-related .series-grid,html:not(.cards-v2) .sp-related .series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .sp-feats,.benefits{grid-template-columns:minmax(0,1fr)}
  .specs th{width:42%}
  .car-track{gap:8px}
  .car-slide{height:clamp(200px,62vw,300px)}
  .sp-related .series-card .shot,html:not(.cards-v2) .sp-related .series-card .shot{height:130px}
}


/* phones: rotary instruments get a compact head, the picture in a column beside the title */
@media (max-width:700px){
  .sp-hero.is-compact .wrap{display:grid;grid-template-columns:minmax(0,1fr) 36%;column-gap:18px;align-items:center}
  .sp-hero.is-compact .wrap>*{grid-column:1/-1}
  .sp-hero.is-compact .hero-top{grid-column:1;grid-row:2}
  .sp-hero.is-compact .hero-stage{grid-column:2;grid-row:2;margin:18px 0 0}
  .sp-hero.is-compact .hero-fig{width:100%}
  .sp-hero.is-compact .hero-img{width:100%;max-height:34vw!important;object-fit:contain}
  .sp-hero.is-compact .hero-pins{display:none}
  .sp-hero.is-compact .sp-title h1{font-size:clamp(28px,8vw,36px)}
}

/* phones: the pinned features and the rest read as one list */
@media (max-width:760px){
  .sp-hero .hero-rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin-top:10px}
  .hero-rest li{font-size:14px}
}
/* phones: related lines as full-width rows, picture left and text right, so nothing is cut off */
@media (max-width:560px){
  .sp-related .series-grid,html:not(.cards-v2) .sp-related .series-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .sp-related .series-card{flex-direction:row;align-items:stretch}
  .sp-related .series-card .shot,html:not(.cards-v2) .sp-related .series-card .shot{flex:0 0 118px;height:auto;min-height:108px;padding:10px;overflow:hidden}
  .sp-related .series-card .body{padding:12px 14px}
  .sp-related .series-card p{-webkit-line-clamp:3}
}

/* ------------------------------------------------------------ UniSystem product pages (series.brand)
   The look of the UniSystem flyers (DESIGN.md "UniSystem product pages"): Montserrat bold, the product's own accent
   (--acc: UniPrime red, UniBond green, UniCem amber) in place of copper, so every section below follows it, and the
   flyer's soft rounded cards for the key figures and charts. Light pages, like the White flyers. */
.sp-brand{--copper:var(--acc);--copper-deep:color-mix(in srgb,var(--acc) 72%,#000);--copper-light:color-mix(in srgb,var(--acc) 50%,#fff);--bone:#F8F6F2}
.sp-brand .new-tag{background:#B87333}
.sp-brand :is(h1,h2,h3,h4){font-weight:700;letter-spacing:-.015em;color:#1D1D1B}
.sp-brand .sp-h::after{content:"";display:block;width:44px;height:2px;background:var(--acc);margin-top:14px}
.sp-brand .specs th{font-weight:600;color:#1D1D1B}
.sp-brand .sx-chart figcaption{font-weight:700}
.sp-brand .sx-chart{padding:18px 20px 16px;border-radius:12px;background:#fff;box-shadow:0 10px 26px rgba(29,29,27,.1),0 2px 6px rgba(29,29,27,.05)}
.sp-brand i.s0.n2,.sp-brand i.s0.n3{background:#BDB8B1}
.sp-brand i.s1.n2,.sp-brand i.s2.n3{background:var(--acc)}
.sp-brand i.s1.n3{background:var(--copper-light)}
.sp-facts.is-specs .sp-facts-grid{grid-template-columns:minmax(0,1fr)}.sp-facts.is-specs .sp-facts-grid>div{max-width:900px}
/* hero: label, name, UniSystem logo; the product centred with its size badge, the features numbered around it */
.sp-bh{background:#fff}
.bh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:clamp(18px,2.4vw,30px)}
.bh-kick{margin:0 0 10px;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.sp-bh .sp-title h1{font-size:clamp(34px,4.4vw,60px);line-height:1.05;letter-spacing:-.025em}
.sp-bh .sp-title .lede{max-width:36ch;margin-top:14px;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.7vw,24px);line-height:1.3;color:#1D1D1B}
.bh-mark{flex:none;width:clamp(110px,11vw,150px);height:auto;margin-top:34px}
.bh-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;margin-top:clamp(26px,3vw,44px)}
.bh-feats{list-style:none;margin:0;padding:0;display:grid;gap:clamp(24px,3vw,40px)}
.bh-feats li{position:relative;padding-top:12px;border-top:1px solid var(--hair)}
.bh-feats li::before{content:"";position:absolute;top:-1px;width:56px;height:1px;background:var(--acc)}
.bh-feats li::after{content:"";position:absolute;top:-3px;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.bh-feats:first-child li::before{right:0}.bh-feats:first-child li::after{right:-2px}
.bh-feats:last-child li::before{left:0}.bh-feats:last-child li::after{left:-2px}
.bh-n{display:block;margin-bottom:6px;font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--acc)}
.bh-feats b{display:block;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25;color:#1D1D1B}
.bh-feats p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ash)}
.bh-fig{position:relative;display:flex;justify-content:center;margin:0}
.bh-fig::after{content:"";position:absolute;left:18%;right:18%;bottom:-8px;height:22px;background:radial-gradient(closest-side,rgba(0,0,0,.16),rgba(0,0,0,0))}
.bh-fig img{position:relative;z-index:1;display:block;width:auto;max-width:100%;height:auto;max-height:min(56vh,480px)}
.bh-badge{position:absolute;z-index:2;right:0;top:46%;width:88px;height:88px;border-radius:50%;background:var(--acc);color:var(--acc-text);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.bh-badge small{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.bh-badge b{margin-top:3px;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.1}
.bh-badge i{display:block;width:22px;height:2px;margin-top:5px;background:currentColor;opacity:.6}
/* key figures: the flyer's soft cards */
.bh-figs{margin-top:clamp(32px,4vw,56px);padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--hair)}
.bh-figs ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bh-figs li{padding:16px 20px 18px;border-radius:12px;background:#fff;box-shadow:0 10px 26px rgba(29,29,27,.12),0 2px 6px rgba(29,29,27,.06)}
.bh-figs b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.02em;color:#1D1D1B}
.bh-figs span{display:block;margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--ash)}
@media (max-width:860px){
  .bh-stage{grid-template-columns:minmax(0,1fr)}
  .bh-fig{order:-1}
  .bh-fig img{max-height:min(44vh,360px)}
  .bh-feats li::before,.bh-feats li::after{display:none}
  .bh-figs ul{grid-template-columns:minmax(0,1fr)}
  .bh-top{flex-direction:column-reverse;gap:14px}
  .bh-mark{width:110px;margin-top:0}
}

/* product page films (series-extras.js films) and folded sections ("show more"), 2026-10-31 */
.sx-filmrow{display:grid;gap:clamp(16px,2.4vw,32px);margin-top:clamp(18px,2vw,28px)}
.sx-filmrow.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-filmrow.n1{grid-template-columns:minmax(0,560px)}
.sx-filmitem{margin:0}
.sx-filmitem .ln-film{width:100%}
.sx-filmitem figcaption{margin-top:12px;font-family:var(--display);font-size:15px;font-weight:500;color:var(--graphite)}
.sx-more{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:clamp(18px,2vw,28px)}
.sx-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-family:var(--display);font-size:clamp(18px,1.6vw,22px);font-weight:500;color:var(--graphite)}
.sx-more>summary::-webkit-details-marker{display:none}
.sx-more>summary::after{content:"+";font-size:24px;font-weight:300;color:var(--copper-deep);transition:transform .2s}
.sx-more[open]>summary::after{transform:rotate(45deg)}
.sx-more>summary span{color:var(--ash);font-size:.8em;margin-right:auto;margin-left:6px}
.sx-more>summary:hover{color:var(--copper-deep)}
.sx-more-text{color:var(--ash);margin:0 0 16px;max-width:70ch}
.sx-more>.sx-finds,.sx-more>.sx-scroll{margin-bottom:20px}
.sx-table.is-folded{padding-top:0}
@media (max-width:760px){.sx-filmrow.n2{grid-template-columns:1fr}}

/* bond strength as ring gauges (series-extras.js data style 'rings'), 2026-10-31 */
.sx-rings{display:grid;gap:clamp(18px,3vw,48px);margin-top:clamp(14px,1.6vw,22px)}
.sx-rings.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}
.sx-ring{margin:0;display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);padding:clamp(18px,2vw,26px);background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(23,19,16,.08)}
.sx-ring-pic{position:relative;flex:none;width:clamp(120px,13vw,170px);aspect-ratio:1}
.sx-ring-pic svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.sx-rt{fill:none;stroke:var(--bone-deep);stroke-width:9}
.sx-rv{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--len) var(--c);transition:stroke-dasharray 1.2s cubic-bezier(.16,1,.3,1)}
.sx-rv.g0,.sx-legend .g0,.sx-ring figcaption .g0 i{stroke:var(--acc,var(--copper));background:var(--acc,var(--copper))}
.sx-rv.g1,.sx-legend .g1,.sx-ring figcaption .g1 i{stroke:var(--ash-soft);background:var(--ash-soft)}
.sx-ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.sx-ring-num b{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,32px);color:var(--graphite);font-variant-numeric:tabular-nums}
.sx-ring-num span{font-size:12px;color:var(--ash);margin-top:4px}
.sx-ring figcaption{display:flex;flex-direction:column;gap:10px}
.sx-ring figcaption>b{font-family:var(--display);font-weight:600;font-size:18px;color:var(--graphite)}
.sx-ring figcaption>span{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ash)}
.sx-ring figcaption>span>span{display:flex;align-items:center;gap:8px}
.sx-ring figcaption i{display:inline-block;width:10px;height:10px;border-radius:50%}
.sx-ring figcaption strong{color:var(--graphite);font-weight:600;font-variant-numeric:tabular-nums;margin-left:auto;padding-left:10px}
.sx-legend i.g0,.sx-legend i.g1{display:inline-block;width:10px;height:10px;border-radius:50%}
@media (max-width:760px){.sx-rings.n2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sx-rv{transition:none}}

/* repaired graphics (2026-10-31): anchors without stretching, steps in one row, research bars with room for the labels */
.sx-anchor{grid-template-columns:minmax(130px,200px) minmax(0,1fr) minmax(130px,200px);gap:0 18px}
.sx-anchors{max-width:980px}
.sx-link{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 0}
.sx-wire{position:relative;display:block;width:100%;height:2px;background:var(--acc,var(--copper));margin-top:12px}
.sx-wire i{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--acc,var(--copper));transform:translateY(-50%)}
.sx-wire i:first-child{left:-2px}.sx-wire i:last-child{right:-2px}
.sx-chip{position:absolute;top:2px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:999px;background:#fff;border:2px solid var(--acc,var(--copper));font-family:var(--display);font-size:13px;font-weight:600;color:var(--graphite);white-space:nowrap}
.sx-link p{margin:14px 0 0;text-align:center;font-size:13.5px;line-height:1.45;color:var(--ash)}
.sx-how-in{margin:clamp(6px,1vw,12px) 0 clamp(26px,3vw,40px)}
.sx-subh{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.6vw,22px);margin:0 0 6px}
.sx-subp{margin:0 0 16px;color:var(--ash)}
.sx-steplist.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-steplist.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-find-fig .sx-row{grid-template-columns:minmax(120px,42%) minmax(0,1fr)}
.sx-find-fig .sx-axis{margin-left:calc(42% + 14px)}
.sx-chart.is-data .sx-axis{margin-left:calc(32% + 14px)}
@media (max-width:900px){.sx-steplist.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .sx-anchor{grid-template-columns:1fr 1fr;gap:10px}
  .sx-anchor .sx-link{grid-column:1/-1;order:3}
  .sx-steplist.n4,.sx-steplist.n3{grid-template-columns:1fr}
  .sx-find-fig .sx-axis,.sx-chart.is-data .sx-axis{margin-left:0}
}
.sx-how-in .sx-mat.is-end{background:#fff}

/* Readable accent text (2026-11-11): on the line pages, small text in the line colour uses a darker shade of it (--acc-ink,
   at least 4.5:1 on white and bone), and a copper button follows the line's own text colour (dark on UniCem DC amber, as above). */
.sp-brand .bh-kick,.sp-brand .bh-n,.sp-brand .item-sku,.sp-brand .eyebrow.copper,.sp-brand .sp-title h1 sup,.sp-brand .is3-table td sup,.sp-brand .buy-link{color:var(--acc-ink,var(--acc))}
.sp-brand{--copper-deep:color-mix(in srgb,var(--acc) 68%,#000)}
.sp-brand .btn.copper{color:var(--acc-text,#fff)}
/* Specifications and Item numbers as drop-downs, closed until opened, on every product page (Panagiotis, 2026-11-11) */
.sp-fold{margin-top:0}
.sp-fold>summary{padding:18px 0}
.sp-fold>summary .sp-h{margin:0}
.sp-fold>summary .sp-h::after{display:none}
.sp-fold>summary::after{font-size:30px}
.sp-fold[open]>summary{margin-bottom:10px}
.sp-fold>.specs,.sp-fold>.iv-grid{margin-bottom:24px}

/* ================= Item pictures: tip close-up + upright photo + caption row (see item-viewer.js) */
.iv-grid{margin-top:22px}
.iv-dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(23,19,16,.14);margin-right:7px}
.iv-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-height:28px;margin-top:0;padding:12px 16px 14px;background:var(--paper);border:1px solid var(--hair);border-top:0}
.iv-cap .item-sku{margin:0;font-size:17px}
.iv-cname{font-family:var(--display);font-size:16px;font-weight:500}
.iv-cname sup{font-size:.55em;color:var(--copper)}
.iv-cmeta{display:inline-flex;align-items:center;font-size:14px;color:var(--ash)}
.iv-cap .pill{margin:0}
/* the pair: tip close-up left, upright photo right (10:13), one caption row under both */
.iv-pics{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1px;align-items:stretch;background:var(--hair);border:1px solid var(--hair)}
.iv-pics.is-single{grid-template-columns:1fr}
.iv-tip,.iv-grid .iv-photo{position:relative;height:auto;width:100%;padding:0;overflow:hidden;background:#fff;border:0}
.iv-grid .iv-photo{aspect-ratio:10/13}
.iv-pics.is-single .iv-photo{aspect-ratio:4/3;max-height:calc(100vh - 230px)}
.iv-tip img,.iv-grid .iv-photo img{position:absolute;max-width:none;max-height:none;transition:transform .35s ease}
/* tip close-up: pre-cut file, shown full-box and never above its pixel size (box <= 290x566) */
.iv-tip img{inset:0;width:100%;height:100%;object-fit:cover}
/* upright photo: fills the box height */
.iv-grid .iv-photo img{top:4%;left:0;right:0;margin:auto;height:92%;width:auto}
/* hover zoom limited to the file's real resolution (--z set by item-viewer.js) */
@media (hover:hover) and (pointer:fine){
  .iv-grid .iv-photo:hover img,.iv-grid .iv-photo:focus-visible img{transform:scale(var(--z,1))}
  .iv-grid .iv-photo.no-zoom{cursor:pointer}
}
.iv-pics.is-single .iv-photo img{left:4%;right:4%;width:92%;height:92%;object-fit:scale-down} /* never above the file's own size (★ image quality) */
.iv-grid .iv-photo .noimg{position:absolute;inset:0;display:grid;place-items:center}
.iv-still .iv-photo img{transition:none}
@media (prefers-reduced-motion:reduce){.iv-grid .iv-photo img{transition:none}}

/* ================= Item numbers: catalogue table + colour swatches + size chips + swipe carousel (see item-select.js) */
.is-label{display:block;margin:0 0 8px;font-family:var(--display);font-size:14px;font-weight:500;color:var(--ash)}
.is-arrow{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--hair);background:var(--paper);color:var(--graphite);cursor:pointer;transition:background .2s,border-color .2s}
.is-arrow:hover:not(:disabled){background:var(--bone);border-color:var(--ash-soft)}
.is-arrow:disabled{opacity:.35;cursor:default}
.is-copy{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--hair);background:var(--paper);color:var(--graphite);font-family:var(--display);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .2s,color .2s}
.is-copy:hover{border-color:var(--graphite)}
.is-copy.is-done{border-color:var(--copper);color:var(--copper-deep)}
.is-copy span{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);padding:3px 8px;background:var(--graphite);color:#fff;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.is-copy:hover span,.is-copy:focus-visible span,.is-copy.is-done span{opacity:1}
.is-arrow:focus-visible,.is-copy:focus-visible,.is3-opts button:focus-visible,.is3-dots button:focus-visible,.is3-track:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

.is3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,4vw,64px);align-items:start}
.is3.is-solo{grid-template-columns:minmax(0,1fr)}
.is3.is-solo .is3-table{max-width:820px}
.is3-controls{display:flex;flex-direction:column;gap:20px;min-width:0}
.is3-dim{margin:0}
.is3-val{margin-left:6px;font-family:var(--display);font-size:13.5px;font-weight:500;letter-spacing:0;color:var(--graphite)}
.is3-opts{display:flex;flex-wrap:wrap;gap:8px}
.is3-opts button{font:inherit;cursor:pointer}
/* size / item: chips */
.is3-chip .is3-opts button{min-width:56px;height:42px;padding:0 16px;border:1px solid var(--hair);background:var(--paper);color:var(--graphite);font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s}
.is3-chip .is3-opts button:hover{border-color:var(--ash-soft)}
.is3-chip .is3-opts button[aria-checked="true"]{border-color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper);color:var(--copper-deep)}
/* colour: one swatch per item colour, with its name (and the handle number when a colour is on both handles) */
.is3-sw .is3-opts{gap:12px 14px}
.is3-sw .is3-opts button{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:56px;padding:4px 2px;border:0;background:none;color:var(--ash);transition:color .2s}
.is3-sw .is3-opts i{display:block;width:32px;height:32px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(23,19,16,.14);transition:box-shadow .2s}
.is3-swname{display:flex;flex-direction:column;align-items:center;max-width:76px;font-size:13px;line-height:1.2;text-align:center}
.is3-swname small{margin-top:3px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--ash-soft)}
.is3-sw .is3-opts button:hover{color:var(--graphite)}
.is3-sw .is3-opts button[aria-checked="true"]{color:var(--graphite)}
.is3-sw .is3-opts button[aria-checked="true"] small{color:var(--copper-deep)}
.is3-sw .is3-opts button[aria-checked="true"] i{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--copper)}
.is3-sum{--num:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.is3-dim~.is3-sum{padding-top:18px;border-top:1px solid var(--hair)}
.is3-sum .is-label{margin:0}
/* number, copy button and the quiet store link on one line, flush left */
.is3-numrow{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:12px 28px}
.is3-num{display:inline-flex;align-items:center;gap:12px}
.is3-buy{display:inline-flex}
.is3-buy:empty{display:none}
.is3-numrow .is-copy{width:30px;height:30px}
.is3-sku{font-family:var(--mono);font-weight:600;font-size:var(--num);line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--copper-deep)}
/* catalogue table of the tab: hair rules between rows, the picked row marked in copper */
.is3-table{width:100%;border-collapse:collapse;font-size:14.5px}
.is3-table th,.is3-table td{text-align:left;padding:9px 14px 9px 0;border-bottom:1px solid var(--hair);vertical-align:baseline;line-height:1.45}
.is3-table thead th{padding-top:0;font-family:var(--display);font-size:14px;font-weight:500;color:var(--ash)}
.is3-table td:last-child,.is3-table th:last-child{padding-right:0}
.is3-table td:last-child{color:var(--ash)}
.is3-table td sup{font-size:.6em;color:var(--copper)}
.is3-table .pill{margin-left:6px}
.is3-grp th{padding-top:18px;font-family:var(--display);font-size:14px;font-weight:500;color:var(--graphite)}
.is3-table tr[data-i]{cursor:pointer;transition:background .15s}
.is3-table tr[data-i]:hover{background:var(--bone)}
.is3-table tr[data-i] td:first-child{padding-left:10px;box-shadow:inset 2px 0 0 transparent;white-space:nowrap}
.is3-table tr.is-on td:first-child{box-shadow:inset 2px 0 0 var(--copper)}
.is3-row{padding:0;border:0;background:none;cursor:pointer;font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--graphite)}
.is3-table tr.is-on .is3-row{color:var(--copper-deep)}
.is3-row:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
/* carousel: stays in view while a long table scrolls past */
.is3-car{position:sticky;top:96px;width:100%;justify-self:end;max-width:min(var(--iv-max,600px),calc((100vh - 200px) / 0.78))}
.is3-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.is3-track::-webkit-scrollbar{display:none}
.is3-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.is3-slide div.item-shot{display:grid;place-items:center;aspect-ratio:10/13;background:#fff}
.is3-group{margin-left:auto;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--ash)}
.is3-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.is3-dots{display:flex;flex-wrap:wrap;justify-content:center}
.is3-dots button{position:relative;width:26px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.is3-dots button::before{content:"";position:absolute;left:5px;right:5px;top:13px;height:2px;background:var(--hair);transition:background .2s}
.is3-dots button:hover::before{background:var(--ash-soft)}
.is3-dots button.is-on::before{background:var(--copper);top:12px;height:4px}

/* phones: chips above the photos, item number below */
@media (max-width:760px){
  .is3{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .is3-controls{display:contents}
  .is3-dim{order:0}
  .is3-car{position:static;order:1;max-width:var(--iv-max,none);justify-self:center}
  .is3-sum{--num:19px;order:2;flex-direction:row;flex-wrap:wrap;align-items:center;padding-top:14px}
  .is3-sum .is-label{width:100%}
  .is3-numrow{width:100%;row-gap:12px}
  .is3-table{order:3}
  .is3-table th:nth-child(3),.is3-table tr[data-i] td:nth-child(3){display:none}
  /* swatches in even rows (6 colours: 3 + 3) */
  .is3-sw .is3-opts{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px 4px;max-width:calc(var(--cols,4) * 76px)}
  .is3-sw .is3-opts button{min-width:0}
  .is3-swname{max-width:60px}
}
.iv-still .is3-opts button,.iv-still .is3-opts i,.iv-still .is3-dots button::before,.iv-still .is3-table tr{transition:none}
@media (prefers-reduced-motion:reduce){.is3-opts button,.is3-opts i,.is3-dots button::before,.is3-table tr{transition:none}}

/* touch: every control at least 44 px tall (the drawing stays the same size) */
@media (hover:none),(pointer:coarse){
  .is-arrow{width:44px;height:44px}
  .is-copy,.is3-numrow .is-copy{width:44px;height:44px}
  .is3-chip .is3-opts button{height:44px}
  .is3-sw .is3-opts button{min-height:44px}
  .is3-dots button{width:44px;height:44px}
  .is3-dots button::before{top:21px}
  .is3-dots button.is-on::before{top:20px}
  .is3-table tr[data-i] td{padding-top:11px;padding-bottom:11px}
  .is3-row{display:block;padding:11px 0;margin:-11px 0} /* the number fills the row height */
  .is3-sum .store-link,.is3-buy .store-link{padding:11px 0}
}

/* ================= Make your own tool (see item-config.js): Build 1 columns · Build 2 steps · Build 3 bench */
.dc-sec .sec-head{align-items:flex-start}
.dc-lines{margin-top:8px;font-size:14px;color:var(--ash)}
.dc-hint{margin:12px 0 0;font-size:13px;color:var(--ash)}
.dc-hint-touch{display:none}
@media (hover:none),(pointer:coarse){.dc-hint-hover{display:none}.dc-hint-touch{display:inline}}
.dc-pic{display:grid;place-items:center;background:var(--paper)}
.dc-pic img{max-width:100%;max-height:100%;object-fit:scale-down} /* only ever shrinks: never above the file's pixels (★) */
.dc-pic.is-sil{background:none}
.dc-sil{width:100%;height:100%;fill:var(--bone-deep)}
.dc-cap{display:flex;flex-direction:column;gap:1px;font-family:var(--display);font-size:13px;line-height:1.2;color:var(--ash)}
.dc-cap b{font-weight:500}
.dc-cap em{font-style:normal;font-size:12px;color:var(--ash)}
.dc-cap small{font-family:var(--mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ash-soft)}
.is-on .dc-cap small,.dc-cell.is-on .dc-cap small{color:var(--copper-deep)}

/* ---------- Build 1 · three columns you scroll up and down; the middle band is the tool */
.dc-b1{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr) minmax(0,1fr);gap:0 0;align-items:start;margin-top:8px}
.dc-mid-h{grid-column:1 / -1;margin-bottom:18px}
.dc-mid-h{grid-column:1 / -1}
.dc-mid-h .dc-stage{overflow:hidden}

.dc-col{position:relative;z-index:1;min-width:0;padding:0 clamp(4px,1vw,14px)}
.dc-col .is-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-bottom:10px}
.dc-val{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--graphite)}
.dc-reel{height:clamp(360px,56vh,540px);overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior-y:contain}
.dc-reel::-webkit-scrollbar{display:none}
.dc-reel:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.dc-pad{height:calc(50% - 59px)}
.dc-cell{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:6px 4px;border:0;background:none;color:var(--graphite);font:inherit;cursor:pointer;scroll-snap-align:center;opacity:.55;transition:opacity .25s}
.dc-cell:hover{opacity:.85}
.dc-cell.is-on{opacity:1}
.dc-cell:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.dc-b1 .dc-cell{height:124px;justify-content:flex-start}
.dc-b1 .dc-pic{position:relative;width:100%;height:92px;background:none;overflow:visible}
/* the photos lie down so the three columns read as one tool: tip · handle · tip */
.dc-b1 .dc-pic img{position:absolute;left:50%;top:50%;max-height:min(230px,var(--len,230px));max-width:64px;transform:translate(-50%,-50%) rotate(-90deg)}
.dc-b1 .dc-h .dc-pic img{max-height:250px;transform:translate(-50%,-50%) rotate(90deg)}
.dc-b1 .dc-b .dc-pic img{transform:translate(-50%,-50%) rotate(90deg)}
.dc-b1 .dc-pic.is-pending{width:150px;height:56px;display:grid;place-items:center}
.dc-b1 .dc-cap{align-items:center;text-align:center;max-width:190px}
.dc-b1 .dc-cell:not(.is-on) .dc-cap{opacity:.85}
.dc-a .dc-cell{align-items:flex-end}.dc-a .dc-cap{align-items:flex-end;text-align:right}
.dc-b .dc-cell{align-items:flex-start}.dc-b .dc-cap{align-items:flex-start;text-align:left}

/* ---------- the assembled tool (builds 2 and 3) */
.dc-mid{display:flex;flex-direction:column;gap:14px}
.dc-stage{position:relative;display:grid;place-items:center;height:clamp(210px,30vh,320px);padding:8px 4px;background:#fff}
.dc-stage.is-over{box-shadow:inset 0 0 0 1px var(--copper)}
.dc-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.dc-slot{position:relative;display:grid;place-items:center}
.dc-slot img{display:block;object-fit:scale-down}
.dc-slot-b img{transform:rotate(180deg)}
.dc-slot[data-empty]{min-height:64px;min-width:52px}
.dc-drop{display:none}
.dc-slot[data-empty] .dc-drop{display:block;position:absolute;inset:6px;border:1px dashed var(--ash-soft);background:var(--bone)}
.dc-slot.is-open .dc-drop{border-color:var(--copper)}
.dc-slot.is-over .dc-drop{border-color:var(--copper);background:var(--bone-deep)}
/* a part whose photo is missing or too small: neutral shape with its name, never a dashed box */
.dc-slot.is-sil{background:var(--bone-deep);border-radius:2px}
.dc-slot.is-sil img{display:none}
.dc-slot.is-sil::after{content:attr(data-name);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);white-space:nowrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;color:var(--ash)}
.dc-slot.is-in{animation:dc-in .34s cubic-bezier(.2,.7,.2,1)}
@keyframes dc-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.dc-slot-b.is-in{animation-name:dc-in-b}
@keyframes dc-in-b{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- the three item numbers */
.dc-out{margin-top:12px;padding-top:10px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.dc-nums{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.dc-num{display:inline-flex;align-items:baseline;gap:6px}
.dc-sku{font-family:var(--mono);font-weight:600;font-size:14px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--copper-deep)}
.dc-pname{font-family:var(--display);font-size:13px;color:var(--ash-soft)}
.dc-kit{font-size:13px;color:var(--copper-deep)}
.dc-kit:not(.is-on){display:none}
.dc-order{flex:1 1 100%;margin:0;font-size:13px;line-height:1.4;color:var(--ash-soft)}
.is-copy{position:relative;display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid var(--hair);background:var(--paper);color:var(--graphite);font-family:var(--display);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .2s,color .2s}
.is-copy:hover{border-color:var(--graphite)}
.is-copy:disabled{opacity:.4;cursor:default}
.is-copy.is-done{border-color:var(--copper);color:var(--copper-deep)}
.is-copy span{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);padding:3px 8px;background:var(--graphite);color:#fff;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.is-copy:hover span,.is-copy:focus-visible span,.is-copy.is-done span{opacity:1}
.is-copy:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.dc-copyall{width:auto;padding:0 14px;gap:8px;display:inline-flex;align-items:center}
.dc-copyall span{position:static;transform:none;padding:0;background:none;color:inherit;font-size:13.5px;opacity:1}
.dc-buy .buy-link{gap:.45em;padding:.4em .7em .36em;border:1px solid var(--copper);font-size:13px;font-weight:600;line-height:1;letter-spacing:.06em;color:var(--copper-deep);transition:background .18s,color .18s,border-color .18s}
.dc-buy .buy-link svg{width:.5em;height:.5em}
.dc-buy .buy-link:hover{background:var(--copper);border-color:var(--copper);color:#fff}

/* ---------- the plain list under the assembly */
.dc-all{border-top:1px solid var(--hair)}
.dc-all summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;list-style:none;cursor:pointer;font-family:var(--display);font-size:15px;font-weight:500}
.dc-all summary::-webkit-details-marker{display:none}
.dc-all summary span{margin-right:auto;color:var(--ash);font-weight:400}
.dc-all summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--copper)}
.dc-all[open] summary::after{content:"\2212"}
.dc-all summary:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.dc-group{padding:4px 0 10px}
.dc-glabel{margin:0 0 6px;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ash)}
.dc-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:14px}
.dc-list .item-sku{margin:0;min-width:92px;font-size:13px}
.dc-list i{font-style:normal;color:var(--ash)}

/* ---------- tablet */
/* ---------- phones: the columns and trays become swipeable strips */
@media (max-width:760px){
  .dc-b1{grid-template-columns:minmax(0,1fr);gap:16px}
  .dc-band{display:none}
  .dc-reel{height:auto;max-height:none;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-bottom:6px;background:var(--bone);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .dc-pad{display:none}
  .dc-cell{flex:0 0 auto;width:132px;opacity:1}
  .dc-b1 .dc-pic{height:66px}
  .dc-b1 .dc-pic img{max-height:120px;max-width:52px}
  .dc-b1 .dc-h .dc-pic img{max-height:118px}
  .dc-b1 .dc-pic{overflow:hidden}
  .dc-b1 .dc-cell{height:auto}
  .dc-b1 .dc-cap,.dc-a .dc-cap,.dc-b .dc-cap{align-items:center;text-align:center;max-width:none}
  .dc-a .dc-cell,.dc-b .dc-cell{align-items:center}
  .dc-cell.is-on{background:var(--paper);box-shadow:inset 0 0 0 1px var(--copper)}
  .dc-nums{gap:14px 24px}
  .dc-sku{font-size:19px}
  .dc-buy .buy-link{font-size:18px}
}
.dc-still .dc-slot.is-in{animation:none}

/* ---------- column arrows, selection band, edge fades (usability pass) */
.dc-reel-wrap{position:relative}
.dc-band{position:absolute;left:0;right:0;top:50%;height:124px;transform:translateY(-50%);background:var(--bone);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);pointer-events:none}
.dc-reel-wrap .dc-reel{position:relative;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
.dc-step{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin:0;padding:0;border:0;background:none;color:var(--ash);cursor:pointer;transition:color .15s}
.dc-step:hover{color:var(--copper-deep)}
.dc-step:disabled{color:var(--hair);cursor:default}
.dc-step:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.dc-b1 .dc-cell.is-on .dc-cap b{color:var(--copper-deep)}
@media (max-width:760px){.dc-step{display:none}.dc-reel-wrap .dc-reel{-webkit-mask-image:none;mask-image:none}}

/* touch: the copy buttons, "Save this tool" and the cells at least 44 px tall */
@media (hover:none),(pointer:coarse){
  .dc-num .is-copy{width:44px;min-width:44px;height:44px}
  .dc-copyall,.dc-actions .btn.sm{min-height:44px}
  .dc-cell{min-height:44px}
  .dc-actions .store-link{padding:11px 0}
}

/* ---- controls pass: arrows, copy buttons and faint labels easier to see and hit */
.dc-step{height:44px;color:var(--graphite)}
.dc-step svg{width:22px;height:22px}
.dc-step:disabled{color:var(--hair)}
.dc-cell{opacity:.72}
.dc-b1 .dc-cell:not(.is-on) .dc-cap{opacity:1}
.dc-cap,.dc-cap em{color:var(--graphite)}
.dc-cap small{color:var(--ash)}
.dc-pname,.dc-order{color:var(--ash)}
.is-copy:not(.dc-copyall){width:36px;height:36px}
.dc-copyall{height:36px;width:auto}
.dc-hint{color:var(--graphite)}
/* My tools and All item numbers read as one block: no section padding between them */
.dc-sec{padding-bottom:0}
.dc-sec+.sec{padding-top:0}

/* ================= My tools: saved configurations, print sheet, distributor request (see direct-list.js) */
.dt{margin-top:26px}
.dt-box{border-top:1px solid var(--hair)}
.dt-box summary{display:flex;align-items:center;gap:10px;padding:14px 0;list-style:none;cursor:pointer;font-family:var(--display);font-size:15px;font-weight:500}
.dt-box summary::-webkit-details-marker{display:none}
.dt-box summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:18px;color:var(--copper)}
.dt-box[open] summary::after{content:"\2212"}
.dt-box summary:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.dt-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;background:var(--copper);color:#fff;font-family:var(--mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.dt-in{padding-bottom:18px}
.dt-list{display:flex;flex-direction:column;gap:2px}
.dt-row{display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--hair)}
.dt-pic{flex:none;display:grid;place-items:center;width:270px;height:52px;background:#fff}
.dt-mini{position:relative;display:block}
.dt-mini.is-empty{width:100%;height:100%;background:#fff}
/* the mini tool is built upright like the stage, then turned a quarter turn */
.dc-mini{position:relative;display:block}
.dc-mini-in{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.dc-mini img{display:block;object-fit:scale-down}
.dc-mini-sil{position:absolute;background:var(--bone-deep)}
.dt-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.dt-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dt-name input{width:min(280px,100%);height:30px;padding:0 8px;border:1px solid transparent;background:none;font-family:var(--display);font-size:14px;font-weight:500;color:var(--graphite)}
.dt-name input:hover{border-color:var(--hair)}
.dt-name input:focus{outline:none;border-color:var(--copper);background:var(--paper)}
.dt-skus{display:flex;flex-wrap:wrap;gap:4px 12px}
.dt-sku{font-family:var(--mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--copper-deep)}
.dt-kit{font-size:11.5px;color:var(--ash-soft)}
.dt-tools{flex:none;display:flex;gap:4px}
.dt-ico{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--hair);background:var(--paper);color:var(--graphite);font-size:14px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.dt-ico:hover{border-color:var(--graphite)}
.dt-ico:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.dt-empty{margin:12px 0;font-size:14px;color:var(--ash)}
.dt-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:14px}
.dt-said{font-size:12.5px;color:var(--copper-deep)}
.dt-send{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair)}
.dt-send-h{margin:0 0 12px;font-family:var(--display);font-size:15px;font-weight:500}
.dt-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;max-width:680px}
.dt-field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ash)}
.dt-field.is-full{grid-column:1 / -1}
.dt-field input,.dt-field textarea{height:40px;padding:0 12px;border:1px solid var(--hair);border-radius:0;background:var(--paper);font-family:var(--body);font-size:14.5px;color:var(--graphite)}
.dt-field textarea{height:auto;padding:10px 12px;resize:vertical}
.dt-field input:focus,.dt-field textarea:focus{outline:none;border-color:var(--copper)}
.dt-form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.dt-note{font-size:12px;color:var(--ash-soft);max-width:44ch}
.dt-ok{grid-column:1 / -1;margin:0;font-size:13.5px;color:var(--copper-deep)}
.dt-find{border-bottom:1px solid currentColor}

/* the printed sheet: hidden on screen, the only thing printed */
.dt-sheet{display:none}
.dt-sheet-head{display:flex;align-items:center;gap:14px;padding-bottom:10px;border-bottom:1px solid #000}
.dt-sheet-head img{height:34px;width:auto}
.dt-sheet-head b{display:block;font-family:var(--display);font-size:16px}
.dt-sheet-head small{font-family:var(--mono);font-size:11px;color:#555}
.dt-sheet-tbl{width:100%;border-collapse:collapse;margin-top:10px}
.dt-sheet-tbl th{text-align:left;font-family:var(--display);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#555;border-bottom:1px solid #999;padding:6px 8px 6px 0}
.dt-sheet-tbl td{vertical-align:middle;border-bottom:1px solid #ddd;padding:10px 8px 10px 0}
.dt-sheet-pic{width:230px}
.dt-sheet-pic span{display:block;margin-top:4px;font-family:var(--display);font-size:11px;color:#333}
.dt-sheet-sku{display:block;font-size:11.5px;color:#111}
.dt-sheet-sku b{font-family:var(--mono);font-size:12px}
.dt-sheet-qty{width:70px;border-left:1px solid #ddd}
.dt-sheet-foot{margin-top:14px;font-size:11.5px;color:#333}
@media print{
  html.dt-printing body>*{display:none !important}
  html.dt-printing body>.dt-sheet{display:block !important}
  @page{size:A4;margin:14mm}
  .dt-sheet-qty::after{content:"";display:block;width:52px;height:20px;border:1px solid #999}
}

@media (max-width:760px){
  .dt-row{flex-wrap:wrap;gap:10px}
  .dt-pic{width:100%;height:46px}
  .dt-form{grid-template-columns:minmax(0,1fr)}
  /* the tray sits at the bottom of the phone screen, out of the way until it is opened */
  .dt-box{position:sticky;bottom:0;z-index:20;background:var(--paper);border-top:1px solid var(--hair);box-shadow:0 -8px 20px -16px rgba(23,19,16,.5)}
  .dt-box[open]{position:static;box-shadow:none}
}

/* ---- controls pass: row buttons easier to hit */
.dt-ico{width:36px;height:36px}
.dt-kit{color:var(--ash)}

/* Product launches (launch.js). Launch pages may use dark sections and longer, staged motion; everything else follows
   DESIGN.md. Motion stops entirely under prefers-reduced-motion. */
/* ink is pure black so the campaign films and renders (rendered on #000) sit in it without a visible frame (review S3-01) */
:root{--ink:#000;--ink-2:#000;--ink-line:rgba(255,255,255,.12);--ink-text:rgba(255,255,255,.78);--ease-out:cubic-bezier(.16,1,.3,1)}

/* ------------------------------------------------------------ the "New" label */
.new-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1;color:#fff;background:var(--copper);padding:4px 8px 4px 7px;border-radius:999px;vertical-align:middle;white-space:nowrap}
.new-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:new-pulse 2.4s ease-out infinite}
.new-tag.is-lg{font-size:12.5px;padding:6px 11px 6px 9px}
@keyframes new-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}70%{box-shadow:0 0 0 6px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.series-card .body h3 .new-tag,.sh-line .new-tag,.mega-detail a .new-tag,.mega-cat .new-tag,.catbar-link .new-tag,.dr-row .new-tag,.foot .new-tag,.fam-name .new-tag,.cat-card h3 .new-tag,.tile h3 .new-tag{margin-left:8px;transform:translateY(-1px)}
.catbar-link .new-tag{font-size:10px;padding:3px 7px 3px 6px}
.fam .new-tag.is-corner,.cat-card .new-tag.is-corner,.series-card .new-tag.is-corner{position:absolute;top:12px;left:12px;z-index:2;margin:0}
.series-card{position:relative}
.series-card .body h3 .new-tag{position:absolute;top:12px;left:12px;z-index:2;margin:0;transform:none}
.sp-title .new-tag{margin-bottom:12px}

/* ------------------------------------------------------------ header bar and home band */
.ln-bar{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:#fff;font-family:var(--display);font-size:13.5px;padding:9px var(--gutter);text-decoration:none;border:0}
.ln-bar:hover{color:#fff}.ln-bar:hover .ln-bar-go{color:var(--copper-light)}
.ln-bar-go{display:inline-flex;align-items:center;gap:6px;color:var(--copper-light);transition:color .2s}
.ln-bar-go svg{width:15px}
@media (max-width:640px){.ln-bar{font-size:12.5px;gap:8px;justify-content:flex-start}.ln-bar-go{display:none}}

.ln-band{background:#fff;color:var(--graphite);overflow:hidden}   /* white (Panagiotis, 2026-11-07) */
.ln-band-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4.5vw,72px);padding-block:clamp(34px,5vw,64px)}
.ln-band-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ln-band-copy .ln-kicker{margin:0}
.ln-band-copy h2{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.02em;color:var(--graphite);margin:0}
.ln-band-text{color:var(--ash);max-width:48ch;font-size:16px;line-height:1.6;margin:0}
.ln-band-copy .btn{margin-top:6px}
/* one tile per family: hairline grid, the mark on top, a line of copy, a quiet link */
/* the home Materials rows, as on the webstore's new home (2026-11-07): logo and copy, then the line's products */
.ln-band-in{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.ln-band-text.is-mob{display:none}
.ln-rows{padding-bottom:clamp(28px,4vw,56px)}
.ln-lrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);padding:clamp(24px,2.6vw,36px) 0;border-top:1px solid var(--hair)}
.ln-row-photo{display:none}
.ln-row-intro{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-right:12px;color:var(--graphite);text-decoration:none;border:0}
.ln-row-intro .lg{height:44px;width:auto;max-width:85%;object-fit:contain;object-position:left;margin-bottom:8px}
.ln-row-title{font-family:var(--display);font-size:clamp(19px,1.6vw,23px);font-weight:500;line-height:1.2}
.ln-row-text{color:var(--ash);font-size:14.5px;line-height:1.55}
.ln-row-intro:hover{color:var(--graphite)}.ln-row-intro:hover .ln-row-title{color:var(--copper-deep)}
.ln-row-cards{display:contents}
.ln-row-cards.n1>*{grid-column:2 / -1}
/* Cerano LC (2026-11-07): Cerano Stains across like CeraGum, DuraSeal Glaze and Modeling Liquid HV side by side under it */
.is-finishing .ln-row-cards{display:grid;grid-column:2 / -1;grid-template-columns:1fr 1fr;gap:inherit}
.is-finishing .ln-row-cards>:first-child{grid-column:1 / -1}
.is-finishing .ln-pick,.is-ceragum .ln-pick{grid-template-columns:1fr 1fr;column-gap:clamp(16px,2vw,28px)}   /* the bottle centred over DuraSeal Glaze below */
.is-finishing .ln-row-cards>:not(:first-child) .ln-card-pic{aspect-ratio:2/1;padding:10px}
.ln-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);color:var(--graphite);text-decoration:none;min-width:0;transition:border-color .2s}
a.ln-card:hover{border-color:var(--copper);color:var(--graphite)}
.ln-card-pic{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;overflow:hidden;background:#fff;border:0}
.ln-card-pic img{max-width:100%;max-height:100%;object-fit:contain}
.ln-card-body{display:flex;flex-direction:column;gap:6px;padding:14px 18px 18px;flex:1}
.ln-card-name{font-family:var(--display);font-size:16px;font-weight:500}
.ln-card-name a{color:var(--graphite);text-decoration:none;border:0}
.ln-card-tag{color:var(--ash);font-size:13.5px;line-height:1.5}
.ln-card-go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:13px;font-weight:500;color:var(--copper-deep);text-decoration:none;border:0}
.ln-card-go svg{width:15px;transition:transform .25s var(--ease-out)}
.ln-card:hover .ln-card-go svg,.ln-card-go:hover svg{transform:translateX(3px)}
/* the line's kit (2026-11-07): under its products, picture and text side by side */
.ln-kitcard{grid-column:2 / -1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;background:none;border:0;padding:clamp(20px,3vw,48px) 0;color:var(--graphite);text-decoration:none}
.ln-kitcard:hover{color:var(--graphite)}.ln-kitcard:hover .ln-card-name{color:var(--copper-deep)}
.ln-kitcard .ln-card-pic{aspect-ratio:auto;background:none;border:0;padding:0;display:block;overflow:visible}
.ln-kitcard .ln-card-pic img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.ln-kitcard .ln-card-body{padding:0;background:none}
.ln-kitcard.is-dark,.ln-kitcard.is-dark:hover{color:#fff}.ln-kitcard.is-dark .ln-card-tag{color:var(--ink-text)}.ln-kitcard.is-dark .ln-kit-tag,.ln-kitcard.is-dark .ln-card-go{color:var(--copper-light)}.ln-kitcard.is-dark:hover .ln-card-name{color:var(--copper-light)}
.ln-kit-tag{display:inline-flex;align-self:flex-start;font-family:var(--display);font-size:13px;font-weight:500;color:var(--copper-deep)}
.ln-kitcard .ln-card-name{font-size:clamp(19px,1.7vw,24px)}
.ln-kitcard:hover .ln-card-go svg{transform:translateX(3px)}
@media (min-width:901px){.ln-lrow.has-kit .ln-row-intro{grid-row:span 2}}
.ln-chkit{margin:clamp(36px,4vw,64px) 0 clamp(28px,3vw,48px)}.ln-chkit .ln-kitcard{max-width:1120px;margin:0 auto}.ln-chkit .ln-card-pic img{width:100%;max-height:min(62vh,540px);object-fit:contain}
/* shade picker: the syringe or bottle beside the colour circles */
.ln-pick{display:grid;grid-template-columns:minmax(140px,.7fr) minmax(0,1.3fr)}
.ln-pick .ln-card-pic{aspect-ratio:auto;height:clamp(220px,22vw,300px);padding:18px}
.ln-pick-name{color:var(--ash);font-size:14px}
.ln-pick-dots{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.ln-pick-dots button{width:30px;height:30px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1px var(--hair);cursor:pointer;padding:0}
.ln-pick-dots button[aria-checked="true"]{box-shadow:0 0 0 2px var(--copper)}
.ln-pick-dots button:focus-visible{outline:2px solid var(--copper-deep);outline-offset:3px}
/* io.Cryl mould sets to swipe */
.ln-hmoulds{padding:16px 18px 18px;gap:12px}
.ln-hmoulds-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.ln-hmoulds-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.ln-hmoulds-tabs button{display:flex;flex-direction:column;align-items:center;padding:6px 12px;border:1px solid var(--hair);border-radius:999px;background:none;color:var(--ash);font:inherit;font-size:11.5px;cursor:pointer;line-height:1.2}
.ln-hmoulds-tabs button b{font-family:var(--display);font-size:14px;color:var(--graphite)}
.ln-hmoulds-tabs button[aria-selected="true"]{border-color:var(--copper-deep);background:var(--bone)}
.ln-hmoulds-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ln-hmoulds-track::-webkit-scrollbar,.ln-hmoulds-tabs::-webkit-scrollbar{display:none}
.ln-hmoulds-slide{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ash);text-decoration:none;border:0;font-size:13px}
.ln-hmoulds-slide img{background:#fff;width:100%;max-width:760px;height:auto;aspect-ratio:2400/868;object-fit:contain}
.ln-hmoulds-slide b{color:var(--graphite)}
@media (max-width:900px){.ln-lrow{grid-template-columns:1fr 1fr}.ln-row-intro{grid-column:1 / -1}.ln-row-cards.n1>*,.ln-kitcard,.is-finishing .ln-row-cards{grid-column:1 / -1}}
@media (max-width:749px){
  .ln-band-in{grid-template-columns:1fr;align-items:start}
  .ln-band-in .btn{justify-content:center}
  .ln-band-text.is-desk{display:none}.ln-band-text.is-mob{display:block}
  .ln-lrow{grid-template-columns:1fr 1fr;gap:14px}
  .ln-row-photo{display:block;grid-column:1 / -1;aspect-ratio:16/9;overflow:hidden;background:#000;border:0}
  .ln-row-photo img{width:100%;height:100%;object-fit:cover}
  .ln-row-photo.is-fit{background:#fff}.ln-row-photo.is-fit img{object-fit:contain}
  .ln-row-intro .lg{height:34px}
  .is-unisystem .ln-row-cards>:first-child{grid-column:1 / -1}
  .ln-pick{grid-column:1 / -1;grid-template-columns:110px minmax(0,1fr)}
  .ln-pick.is-many .ln-pick-dots{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px}
  .ln-pick.is-many .ln-pick-dots button{flex:none}
  .is-finishing .ln-row-cards>:first-child{grid-column:1 / -1}
  .is-finishing .ln-pick,.is-ceragum .ln-pick{grid-template-columns:110px minmax(0,1fr)}   /* the phone layout, over the desktop centring rule */
  .ln-card-body{padding:12px 14px 14px}
  .ln-kitcard{grid-template-columns:1fr;gap:20px;padding:16px 0 8px}.ln-kitcard .ln-card-body{padding:0 4px}
}
/* the logos (campaign artwork): one row height so the copy below lines up; each logo sized to look the same weight */
.lg{display:block;width:auto;max-width:100%;height:var(--lg-h,44px);margin-block:calc((56px - var(--lg-h,44px)) / 2);max-height:56px}
.lg-unisystem{--lg-h:46px}.lg-iocryl{--lg-h:42px}.lg-ceragum{--lg-h:56px}.lg-cerano{--lg-h:52px}
/* the line panels close the page, above the call to action */
.ln-lines{background:var(--paper);padding:clamp(48px,6vw,88px) 0}
.ln-lines .ln-panels{margin-top:clamp(18px,2vw,26px)}

/* ------------------------------------------------------------ launch page */
.ln{--rv-y:26px}
.ln-kicker{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:14px;font-weight:500;color:var(--copper-deep);margin:0 0 18px}
.tone-dark .ln-kicker,.ln-cta .ln-kicker{color:var(--copper-light)}
.ln-h{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.02;font-size:clamp(36px,5vw,72px);margin:0 0 18px;text-wrap:balance}
.ln-text{font-size:17px;line-height:1.7;color:var(--ash);max-width:56ch;margin:0 0 22px}
.tone-dark .ln-text,.ln-cta .ln-text{color:var(--ink-text)}
.ln-more{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:500;font-size:15px;color:var(--copper-deep);border-bottom:1px solid transparent}
.ln-more svg{width:15px;transition:transform .25s var(--ease-out)}
.ln-more:hover svg{transform:translateX(4px)}
.tone-dark .ln-more{color:var(--copper-light)}
.ln-cta .btn.copper,.ln-band .btn.copper,.ln-stage .btn.copper{background:var(--copper);border-color:var(--copper);color:#fff}
.ln-cta .btn.copper:hover,.ln-band-link:hover .btn.copper,.ln-stage .btn.copper:hover,.ln-stage .btn.copper:focus-visible{background:var(--copper-deep);border-color:var(--copper-deep);color:#fff}
.ln-ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.ln-ghost:hover{background:#fff;border-color:#fff;color:var(--graphite)}

/* reveal */
.ln .rv{opacity:0;transform:translateY(var(--rv-y));transition:opacity .9s var(--ease-out) var(--d,0s),transform 1.1s var(--ease-out) var(--d,0s)}
.ln .rv.is-in{opacity:1;transform:none}
[data-depth]{transform:translate3d(0,var(--drift,0px),0);will-change:transform}

/* hero: heading and intro, then the product-line panels (the Products page component, review S1-01) */
.ln-hero.is-panels{background:var(--paper);color:var(--graphite);padding:clamp(18px,2vw,28px) 0 clamp(48px,6vw,84px)}
.ln-hero-head{margin-top:clamp(18px,2.4vw,34px)}
.ln-title{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.05;font-size:clamp(40px,4.8vw,66px);margin:0 0 14px}
.ln-lede{font-size:17px;line-height:1.7;color:var(--ash);max-width:62ch;margin:0}
.ln-panels{margin-top:clamp(26px,3vw,42px)}
.ln-panels .fam-panel{background:#000}
.ln-panels .fp-name{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.ln-panels .fp-name .new-tag{font-size:11px}

/* films */
.ln-film{position:relative;overflow:hidden;background:var(--ink-2)}
.ln-film video{display:block;width:100%;height:100%;object-fit:cover}
.ln-film.is-45{aspect-ratio:4/5}
.ln-film.is-916{aspect-ratio:9/16;max-width:360px}
.ln-film.is-169{aspect-ratio:16/9}
.ln-map{margin:clamp(60px,8vw,110px) 0 0}
.ln-map-h{font-family:var(--display);font-size:clamp(26px,3vw,40px);font-weight:500;margin:0 0 clamp(18px,2vw,28px);color:#fff}
.ln-map img{display:block;width:100%;height:auto}
.ln-map figcaption{margin-top:14px;font-size:15px;color:rgba(255,255,255,.65);max-width:60ch}
.ln-chfilm .ln-film.is-45{max-width:480px}

/* chapter bar */
.ln-nav{position:sticky;top:var(--hdr,76px);z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--hair);transition:background .4s,border-color .4s}
.ln-nav.is-dark{background:rgba(0,0,0,.86);border-color:var(--ink-line)}
.ln-nav-in{display:flex;gap:clamp(16px,3vw,40px);overflow-x:auto;scrollbar-width:none}
.ln-nav-in::-webkit-scrollbar{display:none}
.ln-nav a{flex:none;font-family:var(--display);font-size:14px;font-weight:500;color:var(--ash);padding:14px 0 12px;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.ln-nav a:hover{color:var(--graphite)}
.ln-nav a.is-on{color:var(--graphite);border-bottom-color:var(--copper)}
.ln-nav.is-dark a{color:rgba(255,255,255,.55)}
.ln-nav.is-dark a:hover,.ln-nav.is-dark a.is-on{color:#fff}

/* chapters */
.ln-ch{position:relative;padding:clamp(80px,11vw,170px) 0;overflow:hidden}
.ln-ch.tone-dark{background:var(--ink);color:#fff}
.ln-ch.tone-bone{background:var(--bone)}
.ln-ch.tone-paper{background:var(--paper)}
.ln-ch.tone-dark::before{content:"";position:absolute;left:50%;top:0;width:1px;height:clamp(50px,7vw,110px);background:linear-gradient(var(--copper),transparent);opacity:.7}
.ln-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:center}
.ln-split.is-flip .ln-head{order:2}
.ln-split-media{position:relative;justify-self:center;width:100%;max-width:560px}
.ln-pic{display:block;width:100%;height:auto}
/* the floating box stays inside its own column, and the text column sits above it, so it never covers the link (review S6-03) */
.ln-pic.is-float{position:absolute;right:0;bottom:-6%;width:62%;max-width:100%;filter:drop-shadow(0 30px 40px rgba(23,19,16,.25));pointer-events:none}
.ln-head{position:relative;z-index:2}
.is-feature .ln-split-media{display:flex;justify-content:flex-start}
/* the CeraGum still sits on black with no frame (review S4-01/02) */
.ln-ch.is-shades .ln-pic{background:#000}

/* io.Cryl shades (review S6-02) */
/* io.Cryl mould rail: one full set per slide, the current one sharp in the middle, its neighbours small and faded */
.ln-moulds{margin-top:clamp(64px,8vw,120px)}
.ln-moulds-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.ln-moulds-head h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,2vw,28px);margin:0 0 6px}
.ln-moulds-head p{margin:0;color:var(--ash);font-size:15px;max-width:52ch}
.ln-mtabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--hair)}
.ln-mtabs button{appearance:none;background:none;border:0;cursor:pointer;padding:8px 12px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;color:var(--ash);font:inherit;transition:color .2s}
.ln-mtabs button b{font-family:var(--display);font-weight:500;font-size:18px;color:inherit}
.ln-mtabs button span{font-size:11.5px}
.ln-mtabs button:hover,.ln-mtabs button.is-on{color:var(--graphite)}
.ln-mtabs-bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--copper);transition:transform .45s var(--ease-out),width .45s var(--ease-out)}
.ln-mtrack{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:clamp(24px,3vw,40px) calc(-1 * var(--gutter)) 0;outline:none;cursor:grab;-webkit-user-select:none;user-select:none}
.ln-mtrack::before,.ln-mtrack::after{content:"";flex:0 0 11%}
.ln-mtrack::-webkit-scrollbar{display:none}
.ln-mtrack.is-drag{cursor:grabbing;scroll-snap-type:none}
.ln-mtrack:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.ln-mslide{--off:1;position:relative;flex:0 0 78%;margin:0;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;
  transform:scale(calc(1 - .16 * abs(var(--off)))) translateX(calc(var(--off) * -6%));opacity:calc(1 - .72 * abs(var(--off)));transition:opacity .2s}
@supports not (opacity:abs(-1)){.ln-mslide{transform:none;opacity:.3}.ln-mslide.is-on{opacity:1}}
.ln-mcode{position:absolute;top:50%;left:50%;transform:translate(calc(-50% + var(--off) * 30%),-62%);font-family:var(--display);font-weight:600;font-size:clamp(140px,22vw,320px);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--hair);pointer-events:none;z-index:0}
.ln-mslide img{position:relative;z-index:1;display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 18px 22px rgba(23,19,16,.10))}
.ln-mslide figcaption{position:relative;z-index:1;margin-top:clamp(14px,2vw,26px);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:10px 28px;text-align:center;transition:opacity .3s}
.ln-mslide:not(.is-on) figcaption{opacity:0}
.ln-mname{font-family:var(--display);font-size:20px;font-weight:500}
.ln-mname b{font-weight:600;color:var(--copper-deep)}
.ln-mset{font-size:13.5px;color:var(--ash);display:flex;gap:6px;align-items:baseline}
.ln-mset b{font-family:var(--display);font-weight:500;color:var(--graphite);margin-right:8px}
.ln-mfig{display:flex;gap:22px;font-size:12.5px;color:var(--ash)}
.ln-mfig span{display:flex;flex-direction:column;align-items:center}
.ln-mfig b{font-family:var(--display);font-weight:500;font-size:15px;color:var(--graphite);font-variant-numeric:tabular-nums}
.ln-mfig b small{font-size:11.5px;font-weight:400;color:var(--ash)}
.ln-mctrl{display:flex;align-items:center;gap:16px;margin-top:clamp(20px,2.6vw,32px)}
.ln-mcount{font-family:var(--display);font-size:14px;color:var(--ash);font-variant-numeric:tabular-nums;min-width:58px}
.ln-mcount b{color:var(--graphite);font-weight:500}
.ln-mprog{flex:1;height:1px;background:var(--hair);position:relative;overflow:hidden}
.ln-mprog i{position:absolute;inset:0;background:var(--graphite);transform-origin:left;transform:scaleX(0)}
.ln-marrow{appearance:none;width:44px;height:44px;border:1px solid var(--graphite);background:none;color:var(--graphite);font-size:18px;cursor:pointer;transition:background .2s,color .2s}
.ln-marrow:hover{background:var(--graphite);color:#fff}
.ln-moulds+.ln-teeth{margin-top:clamp(48px,6vw,80px)}
/* io.Cryl 3D viewer: the button in the rail controls and the full-screen view (launch.js M3D) */
.ln-m3d-btn{appearance:none;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:1px solid var(--graphite);background:var(--graphite);color:#fff;font-family:var(--display);font-size:13.5px;font-weight:500;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s}
.ln-m3d-btn span{font-weight:600;font-size:11px;letter-spacing:.04em;padding:3px 5px;border:1px solid rgba(255,255,255,.55)}
.ln-m3d-btn:hover{background:var(--copper-deep);border-color:var(--copper-deep)}
.ln-m3d-btn:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.ln-m3d-lock,.ln-m3d-lock body{overflow:hidden}
.ln-m3d{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(0px,3vw,40px);background:rgba(23,19,16,.62);backdrop-filter:blur(4px)}
.ln-m3d-box{position:relative;display:flex;flex-direction:column;width:min(1180px,100%);height:min(820px,100%);background:var(--paper);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ln-m3d-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(14px,2vw,24px) 0;border-bottom:1px solid var(--hair)}
.ln-m3d-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.ln-m3d-tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;padding:6px 12px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;color:var(--ash);font:inherit;transition:color .2s,border-color .2s}
.ln-m3d-tabs button b{font-family:var(--display);font-weight:500;font-size:18px;color:inherit}
.ln-m3d-tabs button span{font-size:11.5px}
.ln-m3d-tabs button:hover,.ln-m3d-tabs button.is-on{color:var(--graphite)}
.ln-m3d-tabs button.is-on{border-bottom-color:var(--copper)}
.ln-m3d-x{appearance:none;flex:none;width:44px;height:44px;margin-bottom:8px;border:1px solid var(--graphite);background:none;color:var(--graphite);font-size:24px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.ln-m3d-x:hover{background:var(--graphite);color:#fff}
.ln-m3d-stage{position:relative;flex:1;min-height:0;background:radial-gradient(ellipse at 50% 45%,#fff 0%,#fff 35%,var(--bone) 100%)}
.ln-m3d-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;outline:none}
.ln-m3d-stage canvas.is-drag{cursor:grabbing}
.ln-m3d-stage canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--copper)}
.ln-m3d-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font-family:var(--display);font-size:14px;color:var(--ash);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}
.ln-m3d.is-loading .ln-m3d-wait{opacity:1}
.ln-m3d-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;padding:12px clamp(14px,2vw,24px);border-top:1px solid var(--hair)}
.ln-m3d-set{font-size:13.5px;color:var(--ash);display:flex;gap:6px;align-items:baseline}
.ln-m3d-set b{font-family:var(--display);font-weight:500;color:var(--graphite);margin-right:8px}
.ln-m3d-hint{flex:1;font-size:13px;color:var(--ash)}
.ln-m3d-reset{appearance:none;height:40px;padding:0 16px;border:1px solid var(--graphite);background:none;color:var(--graphite);font-family:var(--display);font-size:13.5px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
.ln-m3d-reset:hover{background:var(--graphite);color:#fff}
@media (max-width:760px){.ln-m3d{padding:0}.ln-m3d-box{height:100%}.ln-m3d-hint{flex-basis:100%;order:3}.ln-mctrl{flex-wrap:wrap}.ln-m3d-btn{order:5;width:100%;justify-content:center}}

.ln-teeth{margin-top:clamp(56px,7vw,100px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px clamp(24px,4vw,60px);align-items:end}
.ln-teeth-head h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,2vw,28px);margin:0 0 6px}
.ln-teeth-head p{margin:0;color:var(--ash);font-size:15px}
.ln-teeth-row{list-style:none;margin:0;padding:0;display:flex;gap:clamp(12px,1.6vw,22px)}
.ln-teeth-row li{display:flex;flex-direction:column;align-items:center;gap:10px}
.ln-teeth-row i{display:block;width:clamp(46px,4.4vw,62px);aspect-ratio:3/4;border-radius:40% 40% 46% 46%/34% 34% 62% 62%;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 88%,#b8a07a) 100%);box-shadow:inset 0 0 0 1px rgba(23,19,16,.08),0 10px 18px -12px rgba(23,19,16,.45)}
.ln-teeth-row b{font-family:var(--display);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums}
.ln-teeth-note{grid-column:1/-1;margin:0;font-size:13px;color:var(--ash)}

/* UniSystem steps */
.ln-steps{position:relative;list-style:none;margin:clamp(60px,8vw,120px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
.ln-rail{position:absolute;left:16.6%;right:16.6%;top:clamp(110px,13vw,190px);height:1px;background:var(--ink-line)}
.ln-rail i{position:absolute;inset:0;background:linear-gradient(90deg,var(--copper),var(--copper-light));transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease-out) .35s}
.ln-steps.is-in .ln-rail i{transform:none}
.ln-step a{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;text-decoration:none;border:0}
.ln-num{font-family:var(--display);font-size:13px;letter-spacing:.08em;color:var(--copper-light);margin-bottom:14px}
.ln-bottle{display:flex;align-items:flex-end;justify-content:center;height:clamp(200px,24vw,340px);margin-bottom:22px}
.ln-bottle img{max-height:100%;width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));transition:transform .6s var(--ease-out)}
.ln-step a:hover .ln-bottle img{transform:translateY(-10px) scale(1.03)}
.ln-step b{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.8vw,26px)}
.ln-step small{margin-top:6px;color:var(--ink-text);font-size:15px}

/* shade walls */
.ln-shades{display:grid;gap:clamp(4px,.8vw,12px);margin-top:clamp(50px,7vw,100px);align-items:end}
.ln-shades.is-syringes{grid-template-columns:repeat(13,minmax(0,1fr))}
.ln-shades.is-bottles{grid-template-columns:repeat(14,minmax(0,1fr));margin-top:24px}
.ln-shade{position:relative;margin:0;display:flex;flex-direction:column;align-items:center}
.ln .ln-shade.rv{--rv-y:70px}
.ln-shade img{width:100%;height:auto;max-height:340px;object-fit:contain;transition:transform .5s var(--ease-out)}
.ln-shades.is-syringes .ln-shade img{max-height:380px}
.ln-shade figcaption{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,6px);opacity:0;pointer-events:none;white-space:nowrap;background:var(--graphite);color:#fff;font-size:12px;padding:6px 9px;transition:opacity .2s,transform .25s var(--ease-out);z-index:3}
.ln-shade figcaption b{font-weight:500;font-family:var(--display)}
.ln-shade figcaption span{margin-left:6px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.ln-shade:hover img{transform:translateY(-14px)}
.ln-shade:hover figcaption{opacity:1;transform:translate(-50%,0)}
/* the shade's colour as a round swatch under the syringe, on hover (CeraGum; colours from the campaign film's palette) */
.ln-shades.has-dots{padding-bottom:clamp(44px,4vw,60px)}
.ln-dot{position:absolute;left:50%;top:calc(100% + 14px);width:clamp(26px,2.4vw,36px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 60%,color-mix(in srgb,var(--c) 80%,#000) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 8px 18px rgba(0,0,0,.5);transform:translate(-50%,-8px) scale(.6);opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease-out),transform .35s var(--ease-out)}
.ln-shade:hover .ln-dot{opacity:1;transform:translate(-50%,0) scale(1)}
.tone-dark .ln-shade figcaption{background:#fff;color:var(--graphite)}
.tone-dark .ln-shade figcaption span{color:var(--ash)}
.ln-shades.is-bottles .ln-shade img{filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
.ln-sub{font-family:var(--display);font-size:14px;color:rgba(255,255,255,.55);margin:clamp(60px,8vw,110px) 0 0}

/* a chapter of several products (Cerano LC Stain & Glaze): one block per product, hairline between them */
.ln-prod{margin-top:clamp(70px,9vw,130px);padding-top:clamp(56px,7vw,100px);border-top:1px solid var(--ink-line)}
.ln-prod-h{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-family:var(--display);font-weight:500;font-size:clamp(28px,3vw,44px);letter-spacing:-.02em;line-height:1.1;margin:12px 0 16px}
.ln-chlogo{margin:0 0 clamp(14px,1.6vw,22px)}.ln-chlogo .lg{--lg-h:clamp(56px,5.6vw,84px);max-height:none;margin:0}
.ln-prod-h .lg{--lg-h:clamp(64px,6.4vw,96px);margin:4px 0;max-height:none}
.ln-prod-top{max-width:62ch}
.ln-prod-sec{margin-top:clamp(22px,2.6vw,34px)}
.ln-prod-sec h4{font-family:var(--display);font-weight:500;font-size:14px;color:rgba(255,255,255,.55);margin:0 0 12px}
.ln-prod-feats{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--ink-line)}
.ln-prod-feats li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid var(--ink-line)}
.ln-prod-feats b{font-family:var(--display);font-weight:500;font-size:17px;color:var(--copper-light)}
.ln-prod-feats span{color:var(--ink-text);font-size:14.5px;line-height:1.55}
.ln-prod-sec.is-row .ln-prod-feats{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:0}
.ln-prod-sec.is-row .ln-prod-feats li{padding:18px 18px 0 0;border-bottom:0}
.ln-prod-sec.is-row .ln-prod-feats li+li{padding-left:18px;border-left:1px solid var(--ink-line)}
.ln-prod.is-shades .ln-shades{margin-top:clamp(40px,5vw,70px)}
.ln-prod-props{width:100%;border-collapse:collapse;font-size:14.5px}
.ln-prod-props th,.ln-prod-props td{text-align:left;vertical-align:top;padding:10px 0;border-bottom:1px solid var(--ink-line)}
.ln-prod-props tr:first-child th,.ln-prod-props tr:first-child td{border-top:1px solid var(--ink-line)}
.ln-prod-props th{font-family:var(--display);font-weight:500;color:#fff;width:32%;padding-right:16px}
.ln-prod-props td{color:var(--ink-text);line-height:1.55}
.ln-confirm{font-style:normal;color:var(--copper-light)}
.ln-prod.is-pic{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);align-items:center}
.ln-prod.is-pic .ln-prod-sec + p{margin-top:24px}
.ln-prod.is-flip .ln-prod-pic{order:2}
.ln-prod-pic{display:flex;align-items:center;justify-content:center}
.ln-prod-pic img{display:block;width:auto;height:auto;max-width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.ln-prod-pic.is-tall img{max-height:clamp(240px,24vw,360px)}
.ln-prod-pic.is-wide img{width:min(100%,420px)}
.ln-prod-pic.is-fade img{width:min(100%,330px)}
@media (max-width:980px){.ln-prod.is-pic{grid-template-columns:1fr}.ln-prod.is-flip .ln-prod-pic{order:0}.ln-prod-sec.is-row .ln-prod-feats{grid-template-columns:1fr 1fr}.ln-prod-sec.is-row .ln-prod-feats li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:560px){.ln-prod-sec.is-row .ln-prod-feats{grid-template-columns:1fr}.ln-prod-sec.is-row .ln-prod-feats li+li{padding-left:0;border-left:0;border-top:1px solid var(--ink-line);margin-top:16px}}

/* finishing line trio */
.ln-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,44px);margin-top:clamp(40px,6vw,80px)}
.ln-trio.is-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
.ln-trio-item{position:relative;display:flex;flex-direction:column;color:#fff;text-decoration:none;border:0;padding:26px 24px 24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));box-shadow:inset 0 0 0 1px var(--ink-line);transition:box-shadow .3s}
.ln-trio-item:hover{box-shadow:inset 0 0 0 1px rgba(217,160,107,.6)}
.ln-word{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.4vw,52px);letter-spacing:-.02em;line-height:1;color:var(--copper-light)}
.ln-trio-pic{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;margin:16px 0}
.ln-trio-pic img{max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));transition:scale .6s var(--ease-out)}
.ln-trio-item:hover .ln-trio-pic img{scale:1.04}
.ln-trio-pic.is-group{gap:4%}
.ln-trio-pic.is-group img{width:27%;height:auto;max-height:none}
.ln-trio-item b{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:500;font-size:17px}
.ln-trio-item b svg{width:15px}

/* io.Cryl facts */
.ln-facts{list-style:none;margin:clamp(60px,8vw,110px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair)}
.ln-facts li{display:flex;flex-direction:column;gap:6px;padding:26px 24px 0 0}
.ln-facts li+li{padding-left:24px;border-left:1px solid var(--hair)}
.ln-facts b{font-family:var(--display);font-weight:500;font-size:clamp(46px,5vw,80px);line-height:1;letter-spacing:-.03em;color:var(--copper-deep);font-variant-numeric:tabular-nums}
.ln-facts b.is-word{font-size:clamp(30px,3vw,46px);line-height:1.2}
.ln-facts span{font-family:var(--display);font-weight:500;font-size:17px}
.ln-facts small{color:var(--ash);font-size:15px;line-height:1.55}

/* full range and closing call */
.ln-range{padding:clamp(80px,10vw,150px) 0 clamp(60px,8vw,110px);background:var(--paper)}
.ln-range-head{max-width:760px;margin-bottom:clamp(30px,4vw,56px)}
.ln-group{margin-top:clamp(40px,5vw,70px)}
.ln-group h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,2vw,28px);margin:0 0 6px}
.ln-group>p{color:var(--ash);margin:0 0 22px;max-width:70ch}
.ln-group .series-grid>div{display:flex}
.ln-group .series-grid>div>.series-card{flex:1}
.ln-cta{background:var(--ink);color:#fff;padding:clamp(70px,9vw,130px) 0;position:relative;overflow:hidden}
.ln-cta::after{content:"";position:absolute;right:-20%;bottom:-60%;width:70vw;height:70vw;background:radial-gradient(closest-side,rgba(184,115,51,.28),transparent 70%);pointer-events:none}
.ln-cta-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:40px;align-items:end}
.ln-cta .actions{display:flex;flex-wrap:wrap;gap:12px}

/* ------------------------------------------------------------ phones and tablets */
@media (max-width:980px){
  .ln-split{grid-template-columns:1fr}
  .ln-split.is-flip .ln-head{order:0}
  .ln-cta-in{grid-template-columns:1fr;align-items:start}
}
@media (max-width:760px){
  .ln-steps{grid-template-columns:1fr;gap:56px}
  .ln-rail{display:none}
  .ln-trio{grid-template-columns:1fr}
  .ln-shades.is-syringes{grid-template-columns:repeat(7,minmax(0,1fr));row-gap:26px}
  .ln-shades.is-bottles{grid-template-columns:repeat(7,minmax(0,1fr));row-gap:22px}
  .ln-facts{grid-template-columns:1fr}
  .ln-facts li+li{padding-left:0;border-left:0;border-top:1px solid var(--hair);margin-top:22px}
  .ln-pic.is-float{right:0;width:58%}
  .ln-teeth{grid-template-columns:1fr}
  .ln-mtrack::before,.ln-mtrack::after{flex-basis:6%}
  .ln-mslide{flex-basis:88%}
  .ln-mtabs{width:100%;overflow-x:auto;scrollbar-width:none}
  .ln-mtabs button{padding:8px 10px 10px}
  .ln-mfig{gap:16px}
}

@media (prefers-reduced-motion:reduce){
  .ln .rv,.ln-rail i{transition:none!important;opacity:1!important;transform:none!important}
  .new-tag::before{animation:none}
  [data-depth]{transform:none;will-change:auto}
  .ln-mtabs-bar{transition:none}
  .ln-dot{transition:none}
}
/* UniSystem trio (2026-11-01): each product backlit in its own colour, with a lit floor, as in the UniBond LC campaign visual */
.ln-step a[href*="uniprime"]{--glow:#E0403A}
.ln-step a[href*="unibond"]{--glow:#2FA35E}
.ln-step a[href*="unicem"]{--glow:#E2A91C}
.ln-step a[style*="--glow"],.ln-step a[href*="uniprime"],.ln-step a[href*="unibond"],.ln-step a[href*="unicem"]{isolation:isolate}
.ln-step a .ln-bottle{position:relative}
.ln-step a[href*="uni"] .ln-bottle::before{content:"";position:absolute;z-index:-1;left:50%;top:52%;width:clamp(260px,30vw,460px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 46%,transparent) 0%,color-mix(in srgb,var(--glow) 18%,transparent) 55%,transparent 100%);pointer-events:none;transition:opacity .5s}
.ln-step a[href*="uni"] .ln-bottle::after{content:"";position:absolute;z-index:-1;left:50%;bottom:-14px;width:clamp(180px,18vw,280px);height:34px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 70%,transparent),transparent);pointer-events:none}
.ln-step a[href*="uni"]:hover .ln-bottle::before{opacity:1.0;filter:brightness(1.25)}
/* home band: the eight new lines as product cards (2026-11-01) */

/* home page showcase (2026-11-01): dark stage, one family at a time, products backlit and floating */
.ln-stage{position:relative;background:#000;color:#fff;overflow:hidden;min-height:clamp(560px,78vh,720px);display:grid;grid-template-rows:1fr auto}
.ln-st-slide{grid-area:1/1;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .8s var(--ease-out),visibility 0s linear .8s}
.ln-st-slide.is-on{opacity:1;visibility:visible;transition:opacity .8s var(--ease-out),visibility 0s}
.ln-st-slide::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 72% 52%,color-mix(in srgb,var(--glow) 30%,transparent),transparent 70%);pointer-events:none}
.ln-st-in{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center;width:100%;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(24px,3vw,40px)}
.ln-st-copy{transform:translateY(18px);transition:transform .9s var(--ease-out)}
.ln-st-slide.is-on .ln-st-copy{transform:none}
.ln-st-logo{display:block;height:clamp(40px,4vw,56px);width:auto;margin:18px 0 22px}
.ln-st-copy h1,.ln-st-copy h2{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(30px,3.6vw,52px);line-height:1.08;letter-spacing:-.01em}
.ln-st-text{margin:16px 0 28px;color:var(--ink-text);font-size:16.5px;line-height:1.6;max-width:44ch}
.ln-st-art{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,1.6vw,28px);min-height:clamp(260px,32vw,420px)}
.ln-st-p{position:relative;display:block;transform:translateY(40px);opacity:.001;transition:transform 1s var(--ease-out),opacity .8s var(--ease-out);transition-delay:calc(var(--j) * .09s + .15s)}
.ln-st-slide.is-on .ln-st-p{transform:none;opacity:1}
.ln-st-p img{display:block;height:min(var(--h),30vw);width:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55));animation:ln-float 6s ease-in-out infinite alternate;animation-delay:calc(var(--j) * -.9s)}
.ln-st-p::before{content:"";position:absolute;z-index:-1;left:50%;top:55%;width:260%;max-width:420px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--g,var(--glow)) 40%,transparent),transparent);pointer-events:none}
.ln-st-p::after{content:"";position:absolute;z-index:-1;left:50%;bottom:-12px;width:110%;height:24px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--g,var(--glow)) 60%,transparent),transparent);pointer-events:none}
.ln-st-p.is-wide img{height:auto;width:min(560px,40vw)}
.ln-st-p.is-box img{height:auto;width:min(300px,22vw)}
@keyframes ln-float{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.ln-st-nav{position:relative;display:flex;gap:clamp(10px,2vw,28px);padding-bottom:clamp(22px,3vw,36px)}
.ln-st-dot{appearance:none;background:none;border:0;padding:10px 0;color:rgba(255,255,255,.55);font:inherit;font-family:var(--display);font-size:13.5px;cursor:pointer;text-align:left;flex:1;max-width:200px}
.ln-st-dot i{display:block;height:2px;margin-top:8px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.ln-st-dot i::after{content:"";position:absolute;inset:0;background:var(--copper);transform:scaleX(0);transform-origin:left}
.ln-st-dot.is-on{color:#fff}
.ln-st-dot.is-on i::after{transform:scaleX(1)}
.ln-stage.is-ticking .ln-st-dot.is-on i::after{animation:ln-tick var(--dur,6000ms) linear forwards}
@keyframes ln-tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ln-st-dot:hover{color:#fff}
.ln-st-dot:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
@media (max-width:860px){
  .ln-stage{min-height:0}
  .ln-st-in{grid-template-columns:1fr;gap:18px;padding-top:36px}
  .ln-st-art{order:-1;min-height:220px}
  .ln-st-p img{height:min(var(--h),40vw)}
  .ln-st-p.is-wide img{width:min(420px,62vw)}.ln-st-p.is-box img{width:min(220px,30vw)}
  .ln-st-dot span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.ln-st-p img{animation:none}.ln-st-slide,.ln-st-p,.ln-st-copy{transition:none}}
.ln-st-art{isolation:isolate}.ln-st-slide{position:relative}
.ln-st-nav{width:100%;box-sizing:border-box;justify-content:flex-start}
/* showcase v2 (2026-11-01): a real lab photo behind the renders; every render of a slide at one height, its own proportions */
.ln-st-art{flex-direction:column;align-items:stretch;justify-content:flex-end}
.ln-st-row{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,1.4vw,24px);z-index:1}
.ln-st-p img{height:min(var(--h),26vw)}
.ln-st-art.has-photo{min-height:clamp(320px,36vw,480px)}
.ln-st-photo{position:absolute;top:0;right:0;width:84%;aspect-ratio:16/9;margin:0;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.ln-st-photo img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 7s linear}
.ln-st-slide.is-on .ln-st-photo img{transform:scale(1.08)}
.ln-st-art.has-photo .ln-st-row{justify-content:flex-start;padding-left:2%;margin-top:auto}
@media (max-width:860px){
  .ln-st-art.has-photo{min-height:0}
  .ln-st-photo{position:relative;width:100%}
  .ln-st-art.has-photo .ln-st-row{justify-content:center;padding-left:0;margin-top:-18%}
  .ln-st-p img{height:min(var(--h),34vw)}
}
@media (prefers-reduced-motion:reduce){.ln-st-photo img{transition:none;transform:none}}
/* showcase v3 (2026-11-01): the lab photo fills the stage; text left, products standing on the right over the photo */
.ln-st-slide.has-photo .ln-st-photo{position:absolute;inset:0;width:auto;aspect-ratio:auto;border-radius:0;box-shadow:none;z-index:0}
.ln-st-slide.has-photo .ln-st-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.ln-st-slide.has-photo::before{z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.18) 100%),linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 30%)}
.ln-st-slide.has-photo .ln-st-in{z-index:2}
.ln-st-art.has-photo{min-height:clamp(300px,34vw,460px)}
.ln-st-slide.has-photo .ln-st-art .ln-st-row{justify-content:flex-end;padding-left:0;margin-top:auto}
.ln-stage{min-height:clamp(600px,86vh,800px)}
.ln-st-nav{z-index:3}
@media (max-width:860px){
  .ln-st-slide.has-photo::before{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 48%,rgba(0,0,0,.25) 78%,rgba(0,0,0,.35) 100%)}
  .ln-st-slide.has-photo .ln-st-photo img{object-position:65% 30%}
  .ln-st-slide.has-photo .ln-st-art .ln-st-row{justify-content:center;margin-top:0}
  .ln-st-art.has-photo{min-height:240px}
}
.ln-st-slide{grid-row:1/3;grid-column:1}
.ln-st-nav{grid-row:2;grid-column:1;align-self:end}
.ln-st-in{padding-bottom:clamp(84px,9vw,110px)}
#main:has(.ln-stage) #heroScroll{display:none}   /* the old hero scroll cue would sit on the showcase tabs (2026-11-01) */
.ln-st-p::after{content:none}   /* no floor glow under the products (Panagiotis, 2026-11-01) */
.ln-st-p::before{content:none}   /* no backlight behind the products either (Panagiotis, 2026-11-01) */
/* showcase v4 (2026-11-01): three zones on photo slides. Text left, the photo's subject free in the middle,
   the products together at the right edge (one height per slide, wrapping to a second row if needed) */
@media (min-width:861px){
  .ln-st-slide.has-photo .ln-st-in{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,.8fr);gap:clamp(16px,2vw,32px)}
  .ln-st-slide.has-photo .ln-st-copy{grid-column:1}
  .ln-st-slide.has-photo .ln-st-art{grid-column:3;min-height:0;align-self:end}
  .ln-st-slide.has-photo .ln-st-art .ln-st-row{flex-wrap:wrap;justify-content:flex-end;align-content:flex-end;row-gap:14px;gap:12px}
}
@media (max-width:860px){
  .ln-st-slide.has-photo .ln-st-art .ln-st-row{justify-content:flex-end}
  .ln-st-slide.has-photo .ln-st-p img{height:min(var(--h),30vw)}
}
@media (min-width:861px){.ln-st-slide.has-photo .ln-st-copy h1,.ln-st-slide.has-photo .ln-st-copy h2{font-size:clamp(28px,3vw,44px)}}
@media (max-width:860px){.ln-st-slide.has-photo .ln-st-in{padding-top:min(56vw,250px)}.ln-st-slide.has-photo .ln-st-art{order:2;min-height:0}.ln-st-slide.has-photo .ln-st-art .ln-st-row{justify-content:flex-start;flex-wrap:wrap;gap:10px}.ln-st-slide.has-photo .ln-st-p img{height:min(var(--h),24vw)}}
@media (max-width:860px){.ln-st-art{display:none}.ln-stage{min-height:clamp(520px,80vh,700px)}.ln-st-slide:not(.has-photo) .ln-st-in{padding-top:48px}}   /* phones: photo and text only, no products (Panagiotis, 2026-11-01) */
/* bigger products on desktop (2026-11-01): a wider product zone, the middle of the photo still clear */
@media (min-width:861px){
  .ln-st-slide.has-photo .ln-st-in{grid-template-columns:minmax(0,.85fr) minmax(0,.5fr) minmax(0,1.25fr)}
  .ln-st-slide.has-photo .ln-st-p img{height:min(var(--h),30vw)}
}
/* home cards on the black band (2026-11-01): dark tiles, the products as cut-outs, no white */
/* true relative sizes (2026-11-01): each render's height (--h) or width (--w) comes from its real size in mm; --s scales
   the whole slide down on smaller screens so the proportions between products never change */
.ln-stage{--s:1}
.ln-st-p img,.ln-st-slide.has-photo .ln-st-p img{height:auto;width:auto;max-width:none}
.ln-st-p[style*="--h"] img{height:calc(var(--h) * var(--s))}
.ln-st-p[style*="--w"] img{width:calc(var(--w) * var(--s))}
@media (max-width:1300px){.ln-stage{--s:.85}}
@media (max-width:1100px){.ln-stage{--s:.72}}
@media (max-width:960px){.ln-stage{--s:.62}}
.ln-stage .ln-st-slide .ln-st-p[style*="--h"] img{height:calc(var(--h) * var(--s));width:auto}
.ln-stage .ln-st-slide .ln-st-p[style*="--w"] img{width:calc(var(--w) * var(--s));height:auto}
/* products held in a narrow zone at the right edge (2026-11-01): one row, scaled as a group (--fit, set by launch.js) */
@media (min-width:861px){
  .ln-st-slide.has-photo .ln-st-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,.62fr)}
  .ln-st-slide.has-photo .ln-st-art .ln-st-row{flex-wrap:nowrap;transform:scale(var(--fit,1));transform-origin:right bottom}
}
@media (min-width:861px){
  .ln-st-slide.has-photo .ln-st-in{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,.72fr)}
  .ln-st-slide.has-photo .ln-st-art .ln-st-row.is-col{flex-direction:column;align-items:flex-end;justify-content:flex-end;row-gap:18px}
}

/* the brushes slide (2026-11-01): no logo, so the heading sits under the kicker; the light flat-lay needs a darker left side */
.ln-st-slide.has-photo .ln-st-copy .ln-kicker+h2{margin-top:22px}
.ln-st-slide.has-photo:nth-child(5)::before{background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.78) 36%,rgba(0,0,0,.25) 66%,rgba(0,0,0,.05) 100%),linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 32%)}
.ln-kit{margin:clamp(28px,3vw,44px) 0 0;text-align:center}

/* Home hero as the webstore's video hero (Panagiotis, 2026-11-09): each line's lab film fills the screen behind its text,
   a dark scrim keeps the text readable, the lines are tabs along the bottom (the active one underlined in copper), a pause button. */
.ln-stage{min-height:max(600px,calc(100svh - 112px))}
.ln-st-photo.is-film video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;background:#000}
.ln-st-slide.has-film::before{background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.6) 32%,rgba(0,0,0,.18) 62%,rgba(0,0,0,.08) 100%),linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 34%)}
.ln-st-nav{align-items:flex-end}
.ln-st-dot{font-size:14.5px;min-height:44px}
.ln-st-dot i{height:3px}
.ln-st-play{appearance:none;flex:0 0 auto;margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:grid;place-items:center;align-self:center}
.ln-st-play span{display:block;width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box}
.ln-stage.is-held .ln-st-play span{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.ln-st-play:hover{border-color:#fff}
.ln-st-play:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
@media (max-width:860px){
  .ln-stage{min-height:max(560px,calc(100svh - 100px))}
  .ln-st-slide.has-film .ln-st-in{padding-top:0;align-self:end;padding-bottom:96px}
  .ln-st-slide.has-film{align-items:flex-end}
  .ln-st-slide.has-film::before{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.15) 68%,rgba(0,0,0,.25) 100%)}
  .ln-st-nav{overflow-x:auto;scrollbar-width:none;gap:18px;padding-right:16px}
  .ln-st-nav::-webkit-scrollbar{display:none}
  .ln-st-dot{flex:0 0 auto;max-width:none;white-space:nowrap}
  .ln-st-dot span{font-size:13.5px}
  .ln-st-copy .btn{min-height:48px}
  .ln-st-play{position:sticky;right:0;margin-left:auto;background:rgba(0,0,0,.6)}
}
.ln-stage.is-ticking .ln-st-dot.is-on i::after{animation-delay:calc(var(--el,0ms) * -1)}   /* the copper line picks up where the film is (2026-11-09) */
/* crossfade without a dip: the new slide fades in on top while the old one stays fully visible underneath, then goes (2026-11-09) */
.ln-stage .ln-st-slide{z-index:1;transition:opacity 0s linear .8s,visibility 0s linear .8s}
.ln-stage .ln-st-slide.is-on{z-index:2;transition:opacity .8s ease-in-out,visibility 0s}
.ln-stage .ln-st-nav{z-index:4}
/* io.Cryl tooth shades as natural incisors (2026-11-11) */
.ln-teeth-row .ln-tooth{display:block;width:clamp(50px,4.8vw,68px);height:auto;filter:drop-shadow(0 6px 8px rgba(80,60,30,.14))}
.ln-teeth-row .ln-tooth{width:clamp(64px,6.2vw,92px)}

/* Optional product page sections (series-extras.js). House style: square corners, hair rules, bone alternation. */
.sx-head{max-width:760px;margin-bottom:clamp(18px,2.4vw,28px)}
.sx-head p{color:var(--ash);font-size:16px;line-height:1.65;margin:8px 0 0;max-width:68ch}
.sx-note{color:var(--ash);font-size:13.5px;margin:16px 0 0;max-width:80ch}

/* how it works */
.sx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.sx-card{background:var(--paper);padding:20px 22px;min-width:0}
.sx-card h3{font-family:var(--display);font-weight:500;font-size:17px;margin:0 0 6px}
.sx-card h3::before{content:"";display:block;width:22px;height:2px;background:var(--copper);margin-bottom:12px}
.sx-card p{margin:0;font-size:15px;line-height:1.6;color:var(--graphite)}

/* how to use it */
.sx-steplist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,2vw,24px)}
.sx-steplist li{display:flex;gap:14px;align-items:flex-start;border-top:2px solid var(--copper);padding-top:14px;min-width:0}
.sx-n{font-family:var(--display);font-weight:500;font-size:28px;line-height:1;color:var(--copper-deep);font-variant-numeric:tabular-nums}
.sx-steplist h3{font-family:var(--display);font-weight:500;font-size:17px;margin:0 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sx-steplist p{margin:0;font-size:15px;line-height:1.6}
.sx-time{font-family:var(--display);font-size:12px;font-weight:500;color:var(--copper-deep);border:1px solid var(--copper);padding:2px 8px;border-radius:999px;font-variant-numeric:tabular-nums}

/* tables */
.sx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sx-tbl{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;min-width:560px}
.sx-tbl th,.sx-tbl td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--hair)}
.sx-tbl thead th{font-family:var(--display);font-weight:500;font-size:13px;color:var(--ash);border-bottom:1px solid var(--graphite)}
.sx-tbl tbody th{font-family:var(--display);font-weight:500;width:26%}

/* research findings */
.sx-finds{--g:clamp(12px,1.6vw,20px);display:flex;flex-wrap:wrap;gap:var(--g)}
.sx-find{background:var(--paper);border:1px solid var(--hair);padding:20px 22px;display:flex;flex-direction:column;gap:6px;flex:1 1 calc((100% - 2 * var(--g)) / 3);min-width:min(100%,260px)}
.sx-type{margin:0;font-family:var(--display);font-size:12.5px;font-weight:500;color:var(--copper-deep)}
.sx-find h3{font-family:var(--display);font-weight:500;font-size:17px;margin:0;line-height:1.3}
.sx-find p{margin:0;font-size:15px;line-height:1.6}
.sx-find .sx-cite{margin-top:auto;padding-top:8px;font-size:13px;color:var(--ash)}

/* the products used together */
.sx-parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.sx-parts li{background:var(--paper);min-width:0}
.sx-parts a,.sx-parts div{display:flex;flex-direction:column;gap:4px;padding:18px 20px;height:100%;color:inherit;text-decoration:none;border:0}
.sx-parts a:hover{background:var(--bone)}
.sx-parts li.is-me{background:var(--bone)}
.sx-me{font-family:var(--body);font-weight:400;color:var(--ash);font-size:13px}
.sx-me::before{content:" \00b7 "}
.sx-pn{font-family:var(--display);font-size:13px;color:var(--copper-deep);font-variant-numeric:tabular-nums}
.sx-parts b{font-family:var(--display);font-weight:500;font-size:18px}
.sx-role{font-size:15px}
.sx-parts small{font-size:13px;color:var(--ash)}
.sx-mistakes{margin-top:18px;border-top:1px solid var(--hair);padding-top:12px}
.sx-mistakes summary,.sx-refs summary{cursor:pointer;font-family:var(--display);font-weight:500;font-size:16px;padding:6px 0}
.sx-mistakes .sx-scroll{margin-top:10px}

/* sources */
.sx-refs summary span{color:var(--ash);font-weight:400}
.sx-refs ol{margin:10px 0 0;padding-left:22px;font-size:13.5px;line-height:1.55;color:var(--graphite);columns:2 420px;column-gap:40px}
.sx-refs li{break-inside:avoid;margin-bottom:6px}
.sx-disclaimer{font-size:13px;color:var(--ash);margin:14px 0 0;max-width:90ch}
.sx-disclaimer+.sx-disclaimer{margin-top:4px}

/* a schematic with its labels as text and leader lines (figure() in series-extras.js) */
.sx-fig{margin:clamp(22px,3vw,34px) 0 0}
.sx-fig-body{display:grid;grid-template-columns:minmax(0,1.15fr) clamp(36px,5vw,72px) minmax(0,1fr);align-items:stretch}
.sx-fig-pic{position:relative;align-self:start}
.sx-fig-pic img{display:block;width:100%;height:auto;border:1px solid var(--hair)}
.sx-dot{position:absolute;right:-9px;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:var(--paper);border:1px solid var(--graphite);font:500 10.5px/16px var(--display);text-align:center;font-variant-numeric:tabular-nums}
.sx-lead{width:100%;height:100%;overflow:visible}
.sx-lead path{fill:none;stroke:var(--ash-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.sx-labels{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr}
.sx-labels li{display:flex;gap:10px;align-items:center;min-width:0}
.sx-labels li>a,.sx-labels li>div{display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none;border:0;padding:4px 0}
.sx-labels a b{text-decoration:underline;text-decoration-color:var(--copper-light);text-underline-offset:3px}
.sx-labels a:hover b{text-decoration-color:var(--copper)}
.sx-labels b{font-family:var(--display);font-weight:500;font-size:15.5px}
.sx-labels li>a>span,.sx-labels li>div>span{font-size:13.5px;color:var(--ash);line-height:1.45}
.sx-labels li.is-me b{color:var(--copper-deep)}
.sx-ln{flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--graphite);font:500 10.5px/16px var(--display);text-align:center;font-variant-numeric:tabular-nums}
.sx-labels li.is-me .sx-ln{background:var(--copper);border-color:var(--copper);color:#fff}
.sx-fig figcaption{margin-top:12px;font-size:13px;color:var(--ash);max-width:80ch}

/* material, chemical link, cement (UniPrime SA) */
.sx-anchors{display:grid;gap:14px;margin-bottom:clamp(18px,2.4vw,28px)}
.sx-anchor{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) minmax(120px,190px);align-items:center;gap:0 14px}
.sx-mat{background:var(--bone-deep);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.sx-mat.is-end{background:var(--bone)}
.sx-mat b{font-family:var(--display);font-weight:500;font-size:15px}
.sx-mat span{font-size:12.5px;color:var(--ash)}
.sx-link svg{display:block;width:100%;height:20px}
.sx-link circle{fill:var(--copper)}
.sx-link path{fill:none;stroke:var(--copper);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.sx-link p{margin:6px 0 0;text-align:center;font-size:13.5px;color:var(--graphite)}
.sx-link p b{font-family:var(--display);font-weight:500;color:var(--copper-deep)}

/* wide product picture */
.sx-band{background:#fff;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden}
.sx-band img{display:block;width:100%;max-width:1600px;height:auto;margin:0 auto}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sx-band img{animation:sx-settle linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}
@keyframes sx-settle{from{transform:scale(1.06);opacity:.4}to{transform:none;opacity:1}}

/* shades */
.sx-shadelist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.sx-shadelist li{background:var(--paper);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:22px 12px 18px;min-width:0}
.sx-shadelist img{height:clamp(170px,22vw,260px);width:auto;margin-bottom:10px}
.sx-shadelist b{font-family:var(--display);font-weight:500;font-size:20px}
.sx-shadelist span{font-size:13.5px;color:var(--graphite)}
.sx-shadelist small{font-size:12px;color:var(--ash);font-variant-numeric:tabular-nums}

/* bar charts: values written out, copper steps for several series */
.sx-chart{margin:0}
.sx-chart figcaption{font-family:var(--display);font-weight:500;font-size:15px;margin-bottom:12px}
.sx-chart.is-data{max-width:860px}
.sx-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;font-size:13.5px;color:var(--graphite)}
.sx-legend span{display:inline-flex;align-items:center;gap:7px}
.sx-legend i{width:12px;height:12px;border-radius:2px;display:inline-block}
.sx-bars{display:grid;gap:12px}
.sx-row{display:grid;grid-template-columns:minmax(110px,32%) minmax(0,1fr);gap:4px 14px;align-items:center}
.sx-bl{font-size:14px;line-height:1.35}
.sx-row.is-hi .sx-bl{font-family:var(--display);font-weight:500}
.sx-set{display:grid;gap:2px}
.sx-bar{display:block;padding-right:3.8em}
.sx-track{position:relative;display:block;height:14px}
.is-grouped .sx-track{height:11px}
.sx-track i{display:block;height:100%;width:var(--w);border-radius:0 4px 4px 0;background:var(--ash-soft)}
.sx-track b{position:absolute;left:calc(var(--w) + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;line-height:1}
.sx-row.is-hi .sx-track i,.is-plain .sx-track i{background:var(--copper)}
.sx-bar b{font-family:var(--display);font-weight:400;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--graphite)}
.sx-row.is-hi .sx-bar b,.is-grouped .sx-bar b{font-weight:500}
i.s0.n2,i.s0.n3{background:var(--copper-light)}
i.s1.n2,i.s2.n3{background:var(--copper-deep)}
i.s1.n3{background:var(--copper)}
.sx-axis{margin:10px 0 0;font-size:12px;color:var(--ash);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
  .sx-track i{transform-origin:left;animation:sx-grow .9s cubic-bezier(.2,.7,.2,1) both}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){ .sx-track i{animation-timeline:view();animation-range:entry 10% cover 40%} }
}
@keyframes sx-grow{from{transform:scaleX(0)}to{transform:none}}

/* wide research findings with a chart or micrographs */
/* a row that is not full stretches its findings, so no finding sits alone */
.sx-find.is-wide{flex-basis:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,3vw,40px);align-items:start}
.sx-find-text{display:flex;flex-direction:column;gap:6px}
.sx-find-fig{display:grid;gap:24px;min-width:0}
.sx-photos{margin:0}
.sx-photos>p{margin:0 0 10px;font-size:14.5px}
.sx-ph{display:grid;gap:10px}
.sx-ph.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-ph.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-ph figure{margin:0}
.sx-ph img{display:block;width:100%;height:auto;background:var(--graphite)}
.sx-ph figcaption{margin-top:6px;font-size:13px;line-height:1.45}
.sx-ph figcaption b{font-family:var(--display);font-weight:500}
.sx-credit{margin:10px 0 0;font-size:12px;color:var(--ash);line-height:1.5}

/* film beside the layer figure */
.sx-sys-grid{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:clamp(22px,3.4vw,48px);align-items:center;margin-bottom:clamp(24px,3vw,36px)}
.sx-sys-grid.no-film{grid-template-columns:minmax(0,1fr)}
.sx-sys-grid .sx-fig{margin:0}

@media (max-width:760px){
  .sx-fig-body{grid-template-columns:1fr}
  .sx-lead{display:none}
  .sx-labels{grid-auto-rows:auto;margin-top:14px;gap:8px}
  .sx-anchor{grid-template-columns:1fr 1fr;gap:8px}
  .sx-anchor .sx-link{grid-column:1/-1;order:3}
  .sx-shadelist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-row{grid-template-columns:1fr}
  .sx-find.is-wide{grid-template-columns:1fr}
  .sx-ph.n3{gap:6px}
  .sx-sys-grid{grid-template-columns:1fr}
  .sx-sys-grid .sx-film{max-width:340px}
  .sx-parts{grid-template-columns:1fr}
}

/* UniSystem layer figure, cleaned up (2026-10-31): numbered markers on the picture and a matching numbered legend,
   no crossing leader lines */
.sx-fig-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,2.6vw,36px);align-items:center}
.sx-lead{display:none}
.sx-dot{right:12px;width:24px;height:24px;border:0;background:var(--graphite);color:#fff;font:600 12px/24px var(--display);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sx-labels{grid-auto-rows:auto;gap:clamp(8px,1.2vw,14px)}
.sx-labels li{align-items:flex-start}
.sx-ln{width:24px;height:24px;border:0;background:var(--graphite);color:#fff;font:600 12px/24px var(--display);margin-top:2px}
.sx-labels li>a,.sx-labels li>div{padding:0}
.sp-brand .sx-labels li.is-me .sx-ln,.sp-brand .sx-labels li.is-me~.x{background:var(--acc)}
.sx-labels li.is-me{background:#fff;margin:0 -12px;padding:10px 12px;border-left:3px solid var(--acc,var(--copper))}
.sx-sys-grid{align-items:start}
.sx-dot.is-me,.sx-labels li.is-me .sx-ln{background:var(--acc,var(--copper))}
.sx-dot{width:20px;height:20px;font-size:11px;line-height:20px}

/* UniSystem cross-section drawn as vector layers (series-extras.js layers), 2026-10-31 */
.sx-layers{margin:0;max-width:1000px}
.sx-layers svg{display:block;width:100%;height:auto;overflow:visible}
.sx-layers text{font-family:var(--body);font-size:15px;fill:var(--ash)}
.sx-layers .sx-ln-n{font-family:var(--display);font-weight:600;font-size:19px;fill:var(--graphite)}
.sx-layers .sx-ln-me{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.08em;fill:var(--ash)}
.sx-layers .sx-ln-hi{filter:drop-shadow(0 6px 14px rgba(23,19,16,.10))}
.sx-layers a text{cursor:pointer}
.sx-layers a:hover .sx-ln-n{text-decoration:underline}
.sx-layers figcaption{margin-top:12px;font-size:13px;color:var(--ash)}
.sx-layers-list{display:none;list-style:none;margin:16px 0 0;padding:0;gap:12px}
.sx-layers-list li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:2px 12px;align-items:start}
.sx-layers-list i{grid-row:1/3;width:14px;height:14px;border-radius:3px;margin-top:4px}
.sx-layers-list b{font-family:var(--display);font-weight:600;font-size:15.5px}
.sx-layers-list b span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);margin-left:6px}
.sx-layers-list li>span{font-size:13.5px;color:var(--ash)}
.sx-layers-list li.is-me{background:#fff;padding:10px 12px;margin:0 -12px}
.sx-layers svg.sx-layers-m{display:none}
@media (max-width:760px){
  .sx-layers svg.sx-layers-d{display:none}
  .sx-layers svg.sx-layers-m{display:block;width:100%;max-width:360px;height:auto}
  .sx-layers-list{display:grid}
}
/* specifications and item numbers side by side (app.js itemsAfterSpecs, playground 2026-10-31) */
.sp-duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0 clamp(28px,4vw,64px);background:var(--bone);padding:0 var(--gutter);max-width:none}
.sp-duo>section{background:none;padding-left:0;padding-right:0;min-width:0}
.sp-duo>section>.wrap{padding-left:0;padding-right:0;max-width:none;width:auto}
.sp-duo .sp-items-head{flex-direction:column;align-items:flex-start;gap:4px}
@media (min-width:1441px){.sp-duo{padding-inline:calc((100vw - var(--max)) / 2 + var(--gutter))}}
@media (max-width:980px){.sp-duo{grid-template-columns:1fr}}
/* inside the narrow column: the item table above, the bottle below it */
.sp-duo .is3{display:flex;flex-direction:column;gap:18px}
.sp-duo .is3-controls,.sp-duo .is3-table{width:100%;max-width:none}
.sp-duo .is3-car{width:100%;max-width:340px}
.sp-duo .sp-facts .wrap>div{border-top:0}

/* ring gauges: a third series and six rows (UniBond LC, UniCem DC), 2026-10-31 */
.sx-rv{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--len) var(--c)}
.sx-rt{fill:none;stroke:var(--bone-deep);stroke-width:9}
.sx-rv.g2,.sx-legend i.g2,.sx-ring figcaption .g2 i{stroke:color-mix(in srgb,var(--acc,var(--copper)) 45%,#fff);background:color-mix(in srgb,var(--acc,var(--copper)) 45%,#fff)}
.sx-legend i.g2{display:inline-block;width:10px;height:10px;border-radius:50%}
.sx-rings.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-rings.n6 .sx-ring{flex-direction:column;align-items:flex-start}
.sx-rings.n6 .sx-ring-pic{width:clamp(110px,10vw,140px)}
.sx-how-in .sx-cards{margin-top:6px}
.sx-how-in .sx-card{background:#fff}
@media (max-width:980px){.sx-rings.n6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sx-rings.n6{grid-template-columns:1fr}}
.sx-dot.is-shift{right:38px}
.sx-ring figcaption strong{white-space:nowrap}

/* shades for any product, colour swatch on hover; five steps; the io.Cryl rail on a product page (2026-10-31) */
.sx-shadelist.is-many{display:grid;gap:clamp(4px,.8vw,10px);grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
.sx-shadelist.is-many li{position:relative;padding:8px 2px 30px;text-align:center}
.sx-shadelist.is-many img{max-height:220px;width:auto;max-width:100%;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.sx-shadelist.is-many b{font-size:11.5px;line-height:1.25;display:block;margin-top:6px}
.sx-shadelist.is-many small{font-size:10px}
.sx-shadelist.is-many li>span{display:none}
.sx-swatch{position:absolute;left:50%;bottom:2px;width:22px;height:22px;border-radius:50%;transform:translate(-50%,6px) scale(.6);opacity:0;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 60%,color-mix(in srgb,var(--c) 80%,#000) 100%);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 6px 14px rgba(0,0,0,.18);transition:opacity .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.sx-shadelist li:hover .sx-swatch{opacity:1;transform:translate(-50%,0) scale(1)}
.sx-shadelist.is-many li:hover img{transform:translateY(-8px)}
@media (hover:none){.sx-swatch{opacity:1;transform:translate(-50%,0) scale(1)}}
.sx-steplist.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:960px){.sx-steplist.n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.sx-steplist.n5{grid-template-columns:1fr}.sx-shadelist.is-many{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sx-moulds .ln-moulds{margin-top:0}
.sx-moulds .ln-mtrack{margin-left:0;margin-right:0}
/* standard product pages in the side-by-side band: key features above the specifications */
.sp-duo .sp-facts-grid{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px)}
.sp-duo>section.sp-facts>.wrap>div{min-width:0}
.sx-shadelist.is-many li{border:0;background:none;padding:6px 2px 4px}
.sx-shadelist.is-many .sx-swatch{position:static;display:block;margin:8px auto 0;transform:scale(.6)}
.sx-shadelist.is-many li:hover .sx-swatch{transform:scale(1)}
@media (hover:none){.sx-shadelist.is-many .sx-swatch{transform:none}}
.sx-shadelist.is-many{background:none;border:0;padding:0}
.sx-shadelist.is-many img{height:auto;margin-bottom:0}
.sx-shadelist.is-many b{font-size:12px}
.sx-shadelist.is-many img{width:100%;height:auto;max-width:90px;aspect-ratio:213/420;object-fit:contain}
.sx-shadelist.is-many.n13 img{aspect-ratio:auto}

/* product heroes (2026-10-31): family logo top right, shades in the hero */
.sp-hero .hero-top:has(.hero-mark){display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.hero-mark{flex:none;height:clamp(40px,4.4vw,64px);width:auto;max-width:42%;margin-top:6px}
.sx-hero-shades{margin:clamp(20px,2.6vw,36px) 0 clamp(8px,1vw,14px);padding:clamp(18px,2.4vw,30px) clamp(10px,1.6vw,24px) 12px;background:#fff}
.sx-hero-shades .sx-shadelist.is-many img{max-width:110px}
.sx-hero-note{margin:10px 0 0;font-size:12.5px;color:var(--ash)}
.sp-hero.is-shades .hero-stage.is-under{display:block}
.sp-hero.is-shades .hero-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px clamp(24px,4vw,64px);align-items:start;max-width:none}
.sp-hero.is-shades .hero-rest{margin:0}
@media (max-width:760px){.sp-hero.is-shades .hero-side{grid-template-columns:1fr}.hero-mark{height:34px}}

/* flyer hero for the other new lines (2026-10-31): own logo, wide stage with shades or a wide picture, features in a row */
.bh-mark.is-own{height:clamp(44px,4.6vw,68px);width:auto;max-width:44%}
.bh-wide{position:relative;margin:clamp(18px,2.4vw,32px) 0 clamp(14px,1.8vw,24px)}
.bh-wide .sx-hero-shades{margin:0;padding:clamp(22px,2.8vw,36px) clamp(12px,1.8vw,26px) 14px;border-radius:12px;box-shadow:0 10px 30px rgba(23,19,16,.08)}
.bh-wide .bh-badge{top:14px;right:14px;left:auto;bottom:auto}
.bh-widefig{position:relative;margin:0;display:flex;justify-content:center}
.bh-widefig img{display:block;width:100%;max-width:1100px;height:auto}
.bh-feats.is-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(14px,2vw,28px);margin:clamp(10px,1.4vw,18px) 0 clamp(18px,2.4vw,30px)}
.bh-feats.is-row li{text-align:left;align-items:flex-start}
@media (max-width:760px){.bh-feats.is-row{grid-template-columns:1fr 1fr}.bh-mark.is-own{height:36px}}
.sp-brand .sx-hero-shades .sx-swatch{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 6px 14px rgba(0,0,0,.18)}
/* one row for 13 or 14 shades; the size badge on the card's top edge */
.sx-shadelist.is-many.n13{grid-template-columns:repeat(13,minmax(0,1fr))}
.sx-shadelist.is-many.n14{grid-template-columns:repeat(14,minmax(0,1fr))}
.bh-wide.is-shades{padding-top:26px}
.bh-wide.is-shades .bh-badge{top:-8px;right:22px;transform:scale(.82);transform-origin:top right}
.bh-wide .sx-hero-shades{padding-top:clamp(30px,3.4vw,44px)}
@media (max-width:760px){.sx-shadelist.is-many.n13,.sx-shadelist.is-many.n14{grid-template-columns:repeat(7,minmax(0,1fr))}}
.bh-widefig img{max-width:min(100%,820px)}
.bh-widefig .bh-badge{right:max(14px,calc(50% - 430px))}
.bh-feats.is-row.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bh-feats.is-row.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bh-feats.is-row.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.bh-feats.is-row.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.bh-feats.is-row.n4,.bh-feats.is-row.n5,.bh-feats.is-row.n6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sx-hero-shades .sx-shadelist.is-many.n13 img{max-height:205px}
.sx-hero-shades .sx-shadelist.is-many.n14 img{max-height:205px}
/* long item lists beside the specifications fold into a dropdown (item-select.js, 2026-10-31); the photo sits beside it */
.is3-drop{position:relative}
.is3-dropbtn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:#fff;border:1px solid var(--hair);border-radius:8px;font:inherit;color:var(--graphite);cursor:pointer;text-align:left;transition:border-color .15s}
.is3-dropbtn:hover,.is3-dropbtn[aria-expanded="true"]{border-color:var(--copper)}
.is3-dropval{flex:1;min-width:0;display:flex;gap:12px;align-items:baseline;overflow:hidden;white-space:nowrap}
.is3-dropval b{font-family:var(--display);font-weight:600;font-size:15px}
.is3-dropval span{font-size:14px;color:var(--ash);overflow:hidden;text-overflow:ellipsis}
.is3-dropn{font-size:12.5px;color:var(--ash);white-space:nowrap}
.is3-dropbtn svg{flex:none;transition:transform .15s}
.is3-dropbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.is3-droplist{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);max-height:320px;overflow:auto;background:#fff;border:1px solid var(--hair);border-radius:8px;box-shadow:0 14px 34px rgba(23,19,16,.14);padding:4px 12px}
.is3-droplist[hidden]{display:none}
.is3-droplist .is3-table thead th{position:sticky;top:0;background:#fff;padding-top:8px;z-index:1}
.is3-droplist .is3-table tr[data-i] td{padding-top:7px;padding-bottom:7px}
.sp-duo .is3:has(.is3-drop){display:flex;flex-direction:column;align-items:stretch;gap:18px}   /* photo under the dropdown, full column width (2026-11-01) */
.is3-dropn{display:none}
@media (max-width:760px){.is3-drop{order:3}.sp-duo .is3:has(.is3-drop){grid-template-columns:1fr}}
.is3-droplist .is3-table th:nth-child(2),.is3-droplist .is3-table tr[data-i] td:nth-child(2){display:none}
.is3-droplist .is3-table td,.is3-droplist .is3-table th{white-space:nowrap}
.is3-droplist .is3-table td:last-child,.is3-droplist .is3-table th:last-child{display:table-cell!important;width:100%}
.sp-duo .is3:has(.is3-drop) .is3-dots{display:none}
.sp-duo .is3:has(.is3-drop) .is3-nav{justify-content:center;gap:10px}

/* films centred in the page (films.center / films.switch), 2026-10-31 */
.sx-films.is-center .sx-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-inline:auto;max-width:none}
.sx-films.is-center .sx-head .sp-h::after{margin-inline:auto}
.sx-films.is-center .sx-filmrow.n1{justify-content:center}
.sx-films.is-center .sx-filmitem figcaption{text-align:center}
.sx-fsw{display:flex;justify-content:center;gap:4px;width:max-content;margin:clamp(14px,1.8vw,22px) auto 0;padding:4px;background:var(--bone);border-radius:999px}
.sx-fsw button{font:inherit;font-family:var(--display);font-size:14.5px;font-weight:500;padding:9px 20px;border:0;border-radius:999px;background:none;color:var(--ash);cursor:pointer;transition:background .15s,color .15s}
.sx-fsw button[aria-selected="true"]{background:#fff;color:var(--graphite);box-shadow:0 2px 8px rgba(23,19,16,.10)}
.sx-ftrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:min(100%,560px);margin:clamp(14px,1.8vw,22px) auto 0;outline-offset:4px}
.sx-ftrack::-webkit-scrollbar{display:none}
.sx-ftrack>.sx-filmitem{flex:0 0 100%;scroll-snap-align:center}
/* the size badge sits above the product, never on it (2026-10-31 layout pass) */
.bh-widefig{padding-top:94px}
.bh-widefig .bh-badge{top:0}
.bh-fig{padding-top:94px}
.bh-fig .bh-badge{top:0;right:0}
@media (max-width:760px){.bh-widefig{padding-top:78px}.bh-widefig .bh-badge{right:6px;transform:scale(.82);transform-origin:top right}.bh-fig{padding-top:78px}.bh-fig .bh-badge{transform:scale(.82);transform-origin:top right}}
/* phones (2026-10-31 layout pass): the size badge sits clear of the product, shade names never run together */
@media (max-width:760px){
  .bh-wide.is-shades .sx-hero-shades{padding-top:62px}
  .bh-wide.is-shades .bh-badge{top:6px;right:10px}
  .sx-hero-shades .sx-shadelist.is-many{column-gap:6px}
  .bh-wide .sx-shadelist.is-many{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -8px;padding:0 8px}
  .bh-wide .sx-shadelist.is-many::-webkit-scrollbar{display:none}
  .bh-wide .sx-shadelist.is-many li{flex:0 0 68px;scroll-snap-align:start}
  .bh-wide .sx-shadelist.is-many b{font-size:10.5px}
  .bh-wide .sx-hero-shades .sx-shadelist.is-many img{max-height:190px}
}
/* UniSystem pages, manufacturer's data only (2026-10-31): the graphics carry the page. The how-it-works graphic sits in
   a framed card, the bond-strength rings on a tinted band, so the sections alternate white / tint */
.sp-brand .sx-how .wrap>.sx-anchors,.sp-brand .sx-how .wrap>.sx-fig,.sp-brand .sx-how .wrap>figure{max-width:none;background:#fff;border:1px solid var(--hair);border-top:3px solid var(--acc);border-radius:12px;padding:clamp(20px,3vw,40px);box-shadow:0 14px 36px rgba(23,19,16,.07)}
.sp-brand .sx-how .wrap>.sx-cards{gap:clamp(12px,1.6vw,20px);background:none;border:0}
.sp-brand .sx-how .wrap>.sx-cards .sx-card{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--acc);border-radius:12px;padding:clamp(18px,2.2vw,28px);box-shadow:0 14px 36px rgba(23,19,16,.07)}
.sp-brand .sx-how .wrap>.sx-cards .sx-card h3{font-size:clamp(17px,1.5vw,20px);margin:0 0 8px}
.sp-brand .sx-how .sx-note{display:block;width:fit-content;max-width:100%;margin-top:14px;padding:8px 14px;border-radius:8px;background:var(--bone);font-size:12.5px;color:var(--ash)}
.sp-brand .sx-data.is-rings{background:var(--bone)}
.sp-brand .sx-data.is-rings .sx-rings{max-width:none}
.sp-brand .sx-data.is-rings .sx-rings.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-brand .sx-data.is-rings .sx-rings.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-brand .sx-data.is-rings .sx-ring{border-top:3px solid var(--acc)}
.sp-brand .sx-data.is-rings .sx-axis,.sp-brand .sx-data.is-rings .sx-note{display:inline;margin:0;font-size:12.5px;color:var(--ash)}
.sp-brand .sx-data.is-rings .sx-axis{margin-right:10px}
.sp-brand .sx-data.is-rings .sx-rings+.sx-axis{display:inline-block;margin-top:16px}
@media (max-width:980px){.sp-brand .sx-data.is-rings .sx-rings.n6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.sp-brand .sx-data.is-rings .sx-rings.n2,.sp-brand .sx-data.is-rings .sx-rings.n6{grid-template-columns:1fr}}
.sp-brand .sx-how .wrap>.sx-cards .sx-card:nth-child(1){border-top-color:#D32F2F}
.sp-brand .sx-how .wrap>.sx-cards .sx-card:nth-child(2){border-top-color:#2E7D4F}
.sp-brand .sx-how .wrap>.sx-cards .sx-card:nth-child(3){border-top-color:#C9960C}
.sp-brand .sx-how .wrap>.sx-cards .sx-card h3{font-weight:600}
.sp-brand .sx-steps.bone+.sx-data.is-rings{background:var(--paper,#fff)}   /* two tinted bands never touch */

/* four rings in a row (UniBond LC, bond to restorative materials, 2026-10-31) */
.sp-brand .sx-data.is-rings .sx-rings.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-rings.n4 .sx-ring{flex-direction:column;align-items:flex-start}
.sx-rings.n4 .sx-ring-pic{width:clamp(110px,10vw,140px)}
@media (max-width:980px){.sp-brand .sx-data.is-rings .sx-rings.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sx-rings.is-one figcaption>span{display:none}
/* io.Cryl hero (2026-11-01): the full-mouth set and its box side by side */
.bh-wide.has-box{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,48px)}
.bh-wide.has-box .bh-widefig img{max-width:100%}
.bh-boxfig{margin:0;display:flex;justify-content:center}
.bh-boxfig img{display:block;width:100%;max-width:460px;height:auto;filter:drop-shadow(0 18px 24px rgba(23,19,16,.14))}
@media (max-width:760px){.bh-wide.has-box{grid-template-columns:1fr}.bh-boxfig img{max-width:300px}}
.sp-duo .is3:has(.is3-drop) .is3-car{width:100%;max-width:560px}
.sp-duo .is3:has(.is3-drop) .is3-nav{justify-content:flex-start}
/* product-page films in a wide 16:9 frame (Panagiotis, 2026-11-03): the 4:5 film whole in the middle on black, so the
   step titles burned in at the top stay; phones keep the 4:5 frame so the film is not shrunk */
.ln-film.is-wide{aspect-ratio:16/9;background:#000}
.ln-film.is-wide video{object-fit:contain}
.sx-filmrow.n1{grid-template-columns:minmax(0,960px)}
.sx-ftrack{width:min(100%,960px)}
@media (max-width:760px){.ln-film.is-wide{aspect-ratio:4/5}}
/* documents under the key features and specifications (Panagiotis, 2026-11-03) */
.sp-docbtns{margin-top:clamp(26px,3vw,40px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--hair)}
.sp-docbtns .sp-h3{margin:0 0 12px}
.sp-docbtns .actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
/* Pictures grid (Panagiotis, 2026-11-03): shaped by the number of photos; each tile is the photo with its caption under it */
.pg{display:grid;gap:12px;margin-top:clamp(16px,2vw,24px)}
.pg.n1{grid-template-columns:1fr;height:clamp(300px,38vw,520px)}
.pg.n2{grid-template-columns:1fr 1fr;height:clamp(280px,32vw,460px)}
.pg.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;height:clamp(400px,46vw,640px)}
.pg.n4,.pg.n5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;height:clamp(400px,46vw,640px)}
.pg.n3>:first-child,.pg.n4>:first-child,.pg.n5>:first-child{grid-row:span 2}
.pg.n4>:nth-child(4){grid-column:span 2}
.pg-shot{display:flex;flex-direction:column;min-width:0;min-height:0;margin:0;padding:0;border:0;background:none;font:inherit;text-align:left;color:inherit;cursor:zoom-in}
.pg-shot[hidden]{display:none}
.pg-img{position:relative;flex:1;min-height:0;overflow:hidden;background:#fff}
.pg-img img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s ease-out}
.pg-shot:hover .pg-img img{opacity:.88}
.pg-shot:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.pg-cap{flex:none;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(23,19,16,.55);color:#fff;font:500 clamp(22px,2.4vw,32px) var(--display)}
.pg-film{aspect-ratio:16/9;background:#000;margin-top:clamp(16px,2vw,24px)}
.pg-film video{display:block;width:100%;height:100%}
@media (max-width:700px){
  .pg,.pg.n1,.pg.n2,.pg.n3,.pg.n4,.pg.n5{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:8px}
  .pg>.pg-shot{grid-row:auto}
  .pg .pg-img{flex:none;aspect-ratio:1}
  .pg>:first-child,.pg.n4>:nth-child(4){grid-column:span 2}
  .pg>:first-child .pg-img{aspect-ratio:4/3}
  .pg.n2>.pg-shot{grid-column:auto}.pg.n2 .pg-img{aspect-ratio:4/5}
}
.pg.n1 .pg-img img{object-fit:contain}   /* one photo: whole and centred, never cropped */
.pg.n1 .pg-cap{text-align:center}
.pg-img.is-fit img{object-fit:contain}   /* plain studio background: the photo whole, the tile filled with its edge colour */

/* Cerano LC lab panels under "See it in the lab" (the brochure's lab pages as page content, 2026-11-11) */
.sx-labs{display:flex;flex-direction:column;gap:clamp(44px,6vw,80px);margin-top:clamp(44px,6vw,80px);text-align:left}
.sx-lab{min-width:0}
.sx-labkick{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-ink,var(--copper-deep))}
.sx-labh{margin:0 0 10px;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.sx-labp{margin:0 0 22px;max-width:62ch;color:var(--ash);font-size:16px;line-height:1.65}
.sx-labnote{margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--ash);max-width:80ch}
.sx-labpic{margin:0}
.sx-labpic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--bone)}
.sx-labpic figcaption{margin-top:8px;font-size:13px;color:var(--ash)}
/* text beside a photo */
.sx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,60px);align-items:center}
.sx-split.is-flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media (max-width:860px){.sx-split,.sx-split.is-flip{grid-template-columns:1fr}.sx-split.is-flip .sx-labpic{order:2}}
.sx-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.sx-pts li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--hair)}
.sx-pts li:last-child{border-bottom:1px solid var(--hair)}
.sx-pts li>span{font-family:var(--display);font-weight:700;font-size:13px;color:var(--acc-ink,var(--copper-deep));padding-top:2px}
.sx-pts li p{margin:0;font-size:16px;line-height:1.5}
/* the workflow */
.sx-flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sx-flow li>a,.sx-flow li>div{display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;padding:20px 22px;background:#fff;border:1px solid var(--hair);border-top:3px solid var(--hair);color:inherit;text-decoration:none;transition:border-color .2s ease-out}
.sx-flow li>a:hover{border-color:var(--ash-soft)}
.sx-flow li.is-me>div{border-top-color:var(--acc,var(--copper))}
.sx-flow-n{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.sx-flow li.is-me .sx-flow-n{color:var(--acc-ink,var(--copper-deep))}
.sx-flow b{font-family:var(--display);font-weight:600;font-size:18px}
.sx-flow-t{font-size:15px;line-height:1.5;color:var(--ash)}
@media (max-width:760px){.sx-flow ol{grid-template-columns:1fr}}
/* colour dots: a stain, and a stain mixed with the glaze (a see-through tint) */
.sx-dot2{flex:none;display:block;width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(23,19,16,.12)}
.sx-dot2.is-mix{background:radial-gradient(circle at 40% 38%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),color-mix(in srgb,var(--c) 45%,#fff);box-shadow:inset 0 0 0 1px rgba(23,19,16,.12),0 0 0 3px #fff,0 0 0 4px var(--acc,var(--copper))}
/* the shade guide */
.sx-guide-g{padding:22px 0;border-top:1px solid var(--hair)}
.sx-guide-g h4{margin:0 0 16px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.sx-guide-g h4 span{margin-right:10px;color:var(--acc-ink,var(--copper-deep))}
.sx-guide-g ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px}
.sx-guide-g li{display:flex;gap:14px;align-items:flex-start;min-width:0}
.sx-guide-g li>div{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.sx-guide-g b{font-family:var(--display);font-weight:600;font-size:16px}
.sx-guide-g small{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ash)}
.sx-use{font-size:14px;line-height:1.45;color:var(--graphite)}
.sx-chroma{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;max-width:180px}
.sx-chroma i{display:block;height:8px;border-radius:2px}
.sx-chroma i:nth-child(1){background:color-mix(in srgb,var(--c) 40%,#F3EBDF)}
.sx-chroma i:nth-child(2){background:color-mix(in srgb,var(--c) 70%,#F3EBDF)}
.sx-chroma i:nth-child(3){background:var(--c)}
.sx-chroma-key{display:inline-grid;grid-template-columns:repeat(3,22px);gap:3px;margin-right:10px;vertical-align:middle}
.sx-chroma-key i{font-style:normal;font-family:var(--mono);font-size:11px;text-align:center;border-top:2px solid var(--ash-soft);padding-top:2px;color:var(--ash)}
@media (max-width:980px){.sx-guide-g ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sx-guide-g ul{grid-template-columns:1fr}}
/* one shade as a gradient */
.sx-grad{display:grid;grid-template-columns:18px 1fr;gap:16px;margin-top:4px}
.sx-grad-bar{display:block;min-height:180px;border-radius:9px;background:linear-gradient(to bottom,var(--c),color-mix(in srgb,var(--c) 10%,#F7F2EA))}
.sx-grad-ls{display:flex;flex-direction:column;justify-content:space-between}
.sx-grad-ls span{font-size:15px;line-height:1.45;color:var(--ash)}
.sx-grad-ls b{display:block;font-family:var(--display);font-weight:600;color:var(--graphite)}
/* the case chroma map */
.sx-map ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.sx-map li{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--hair);min-width:0}
.sx-map li>div{display:flex;flex-direction:column;min-width:0}
.sx-map-n{flex:none;width:22px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--acc-ink,var(--copper-deep))}
.sx-map .sx-dot2{width:34px;height:34px}
.sx-map b{font-family:var(--display);font-weight:600;font-size:15px}
.sx-map li span{font-size:14px;color:var(--graphite)}
.sx-map small{font-size:12.5px;color:var(--ash)}
@media (max-width:980px){.sx-map ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sx-map ol{grid-template-columns:1fr}}
/* a stain pure and with the glaze */
.sx-blends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sx-blend{margin:0;padding:22px;background:#fff;border:1px solid var(--hair)}
.sx-blend-pair{display:flex;align-items:flex-start;justify-content:center;gap:10px}
.sx-blend-pair>span{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;flex:1;min-width:0}
.sx-blend-pair .sx-dot2{width:72px;height:72px;margin-bottom:4px}
.sx-blend-pair b{font-family:var(--display);font-weight:600;font-size:15px}
.sx-blend-pair small{font-size:13px;color:var(--ash)}
.sx-arrow{flex:none;width:18px;height:72px;position:relative}
.sx-arrow::before{content:"";position:absolute;top:50%;left:2px;width:9px;height:9px;border-top:1.5px solid var(--ash-soft);border-right:1.5px solid var(--ash-soft);transform:translateY(-50%) rotate(45deg)}
.sx-blend figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);font-size:15px;line-height:1.5;text-align:center}
.sx-blendp .sx-labpic{margin-top:22px}
@media (max-width:760px){.sx-blends{grid-template-columns:1fr}}
.sx-chroma i{box-shadow:inset 0 0 0 1px rgba(23,19,16,.08)}
.sx-dot2.is-mix{background:radial-gradient(circle at 38% 34%,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),color-mix(in srgb,var(--c) 62%,#fff)}
.sx-blendp .sx-labpic{max-width:880px;margin-inline:auto}
.sx-guide .sx-labnote{display:flex;gap:12px;align-items:flex-start}
.sx-chroma-key{flex:none;margin:2px 0 0}
.sx-labs{margin-top:clamp(20px,3vw,36px)}
.sx-filmrow.is-after{margin-top:clamp(44px,6vw,80px)}
/* How to use it: folded, closed until opened (2026-11-11) */
.sx-stepfold{margin-top:0}
.sx-stepfold>summary{padding:18px 0}
.sx-stepfold>summary .sp-h{margin:0}
.sx-stepfold>summary .sp-h::after{display:none}
.sx-stepfold>summary::after{font-size:30px}
.sx-stepfold[open]>summary{margin-bottom:8px}
.sx-stepfold>.sx-steplist{margin-bottom:24px}
.sx-stepfold>.sx-note{margin-bottom:24px}
/* CeraGum syringes in the hero: bigger and easier to see (Panagiotis, 2026-11-11); the strips are 840 px tall, so sharp at 2x */
.sx-hero-shades .sx-shadelist.is-many.n13 img{max-height:clamp(260px,25vw,400px);max-width:none;width:auto;height:clamp(260px,25vw,400px)}
.sx-hero-shades .sx-shadelist.is-many.n13 b{font-size:13.5px;margin-top:10px}
.sx-hero-shades .sx-shadelist.is-many.n13 small{font-size:11.5px}
@media (max-width:760px){
  .bh-wide .sx-hero-shades .sx-shadelist.is-many.n13 img{height:300px;max-height:300px}
  .bh-wide .sx-shadelist.is-many.n13 li{flex-basis:82px}
  .bh-wide .sx-shadelist.is-many.n13 b{font-size:12px}
}
/* CeraGum lab panels (2026-11-11): group lines, the case figure */
.sx-guide-sub{margin:-8px 0 16px;font-family:var(--display);font-weight:600;font-size:16px}
.sx-fsw.is-after{margin-top:clamp(44px,6vw,80px)}
.sx-case-pic{margin:0;background:#000;padding:clamp(14px,2.4vw,32px) clamp(10px,2vw,28px) clamp(12px,1.6vw,20px)}
.sx-case-fig{display:block;width:100%;height:auto;overflow:visible}
.sx-cl{stroke:#B5AFA7;stroke-width:2.4}
.sx-ce{stroke:#fff;stroke-width:2.25}
.sx-ct{fill:#fff;font-family:var(--mono);font-weight:700;font-size:27px}
.sx-cn{display:none;fill:#fff;font-family:var(--mono);font-weight:700;font-size:15px;text-anchor:middle;dominant-baseline:middle}
.sx-case-key{display:none;list-style:none;margin:14px 0 0;padding:0;color:#fff}
.sx-case-key li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.14);font-family:var(--display);font-weight:600;font-size:15px}
.sx-case-key li>span{width:18px;font-size:13px;color:rgba(255,255,255,.7)}
.sx-case-key .sx-dot2{width:22px;height:22px;box-shadow:0 0 0 1.5px #fff}
.sx-case-pic figcaption{margin-top:12px;font-size:13px;color:rgba(255,255,255,.82)}
/* phones: the arch close up with numbered dots, and the key below it */
.sx-case-zoom{display:none;width:100%;height:auto}
.sx-case-zoom text{fill:#fff;font-family:var(--mono);font-weight:700;font-size:13px;text-anchor:middle;dominant-baseline:middle}
@media (max-width:700px){
  .sx-case-fig{display:none}
  .sx-case-zoom{display:block}
  .sx-case-key{display:block}
}
.sx-films .wrap>.sx-labs:first-child{margin-top:0}
/* the two kit pages: the kit picture fits the screen, so the whole kit shows without scrolling (Panagiotis, 2026-11-11) */
.bh-widefig:has(img[src*="/kit-"]) img{width:auto;max-width:min(100%,820px);max-height:max(320px,calc(100svh - 360px));object-fit:contain}
.bh-widefig:has(img[src*="/kit-"]){padding-top:clamp(40px,5vw,72px)}
.sp-bh:has(.bh-widefig img[src*="/kit-"]) .bh-top{margin-bottom:0}
.bh-widefig:has(img[src*="/kit-"]){padding-top:12px}
.bh-widefig:has(img[src*="/kit-"]) img{max-height:max(300px,calc(100svh - 420px))}
.bh-wide:has(.bh-widefig img[src*="/kit-"]){padding-top:0;margin-top:0}
/* UniCem DC: the four shades as a card under the page top, colour circle under each syringe (2026-11-11) */
.sx-shades.is-cardrow{padding-top:clamp(8px,1.5vw,20px)}
.sx-shadecard{border-radius:12px;box-shadow:0 10px 30px rgba(23,19,16,.08);padding:clamp(26px,3vw,40px) clamp(16px,3vw,40px) 16px}
.sx-shadelist.is-dots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2vw,28px);background:none;border:0}
.sx-shadelist.is-dots li{background:none;padding:0 4px 8px;gap:6px}
.sx-shadelist.is-dots img{height:clamp(260px,28vw,420px);width:auto;max-width:100%;margin:0 0 10px}
.sx-shadelist.is-dots .sx-dot2{width:30px;height:30px;margin-bottom:6px}
.sx-shadelist.is-dots b{font-size:16px}
.sx-shadelist.is-dots span{font-size:13px;color:var(--ash)}
.sx-shadecard .sx-note{margin-top:14px}
@media (max-width:560px){.sx-shadelist.is-dots img{height:240px}.sx-shadelist.is-dots b{font-size:14px}}