/* Focus Gaming Solutions — shared styles. Look follows the Focus flyers: black field, gold rules,
   gold-framed photos, centred gold section titles, bilingual EN/ES. */
:root{
  --black:#0d0d0d; --ink:#0d0d0d; --panel:#151515; --line:#312a15;
  --gold:#d4af37; --gold-hi:#e4c25a; --gold-lo:#8f7522;
  --cream:#ffffff; --mute:#a6a6a6; --green:#25d366;
  --display:'Montserrat',Arial,sans-serif; --body:'Montserrat',Arial,sans-serif; --cond:'Montserrat',Arial,sans-serif;
  /* a gold line that fades in at the start and out at the end (John 10/21: every gold line) */
  --gold-line:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent);
  --r:18px; --r-lg:26px;
  /* fixed header: full height at the top of the page, mini once scrolled (site.js toggles html.is-scrolled) */
  /* --head-* = banner + nav + category row (--cats-h, Anthony 10/25); plain px, because finder.js parses them */
  --top-full:122px; --top-mini:66px; --logo-full:100px; --logo-mini:54px; --nav-h:46px; --cats-h:48px;
  --head-full:216px; --head-mini:160px; --tab-h:0px;
  /* soft edges: photos fade into the black page instead of sitting in a frame */
  --fade:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  --panel-bg:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  --panel-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 22px 50px rgba(0,0,0,.38);
  /* a cabinet cut-out stands in warm showroom light on the dark card, with a soft glow on the floor: no box behind it */
  --spot:radial-gradient(ellipse 46% 7% at 50% 93%,rgba(228,194,90,.30),rgba(228,194,90,0)),radial-gradient(ellipse 72% 62% at 50% 50%,rgba(228,194,90,.27),rgba(212,175,55,.09) 48%,rgba(212,175,55,0) 78%);
  --spot-dark:var(--spot);
}
@media (max-width:1023px){:root{--top-full:82px;--top-mini:64px;--logo-full:62px;--logo-mini:50px;--nav-h:0px;--cats-h:56px;--head-full:138px;--head-mini:120px}}
@media (max-width:767px){:root{--tab-h:62px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-mini) + 14px)}
body{background:var(--black);color:var(--cream);font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.55;padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));margin-inline:auto}
.gold{color:var(--gold)}
.rule{height:1px;background:var(--gold-line);border:0}

/* ---------- header: the Focus flyer banner + nav, fixed on every page (chrome.py writes the same markup everywhere) ---------- */
.skip{position:fixed;left:12px;top:-64px;z-index:200;background:var(--gold);color:#000;padding:10px 16px;border-radius:999px;font:800 12px var(--display);letter-spacing:.08em;transition:top .2s}
.skip:focus{top:12px}
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:env(safe-area-inset-top);background:rgba(13,13,13,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold-hi) 50%,var(--gold) 82%,transparent);opacity:.75;pointer-events:none}
.head-space{height:calc(var(--head-full) + env(safe-area-inset-top))}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:var(--top-full);transition:height .35s cubic-bezier(.2,.8,.2,1)}
.topbar .logo{flex:none;display:block}
.topbar .logo img{height:var(--logo-full);width:auto;transition:height .35s cubic-bezier(.2,.8,.2,1)}
.topbar .claim{margin-left:auto;text-align:right;font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:clamp(13px,1.6vw,20px);line-height:1.2;transition:font-size .35s}
.topbar .claim small{display:block;font-family:var(--body);font-weight:500;text-transform:none;letter-spacing:.02em;color:var(--gold);font-size:14px;margin-top:4px}
.is-scrolled .topbar .wrap{height:var(--top-mini)}
.is-scrolled .topbar .logo img{height:var(--logo-mini)}
.is-scrolled .topbar .claim{font-size:12.5px}
.is-scrolled .topbar .claim small{font-size:12px;margin-top:1px}
.head-call{display:none;align-items:center;gap:8px;flex:none;height:42px;padding:0 16px;border-radius:999px;background:rgba(212,175,55,.12);color:var(--gold-hi);font:800 12px var(--display);letter-spacing:.06em}
.head-call svg{width:17px;height:17px}
.menu-btn{display:none;flex:none;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(212,175,55,.45);background:rgba(0,0,0,.4);color:var(--cream);font:800 11px var(--display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.menu-btn svg{width:20px;height:20px;color:var(--gold-hi)}
/* machine search in the banner (chrome.py search_box; Anthony 10/20: it sat in the middle of the homepage hero) */
.head-search{display:flex;align-items:center;flex:1 1 360px;min-width:220px;max-width:520px;margin-inline:auto;height:48px;padding:3px;border:1px solid rgba(212,175,55,.7);border-radius:999px;background:rgba(0,0,0,.55);transition:height .35s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.head-search:focus-within{border-color:var(--gold-hi);box-shadow:0 0 0 3px rgba(228,194,90,.18)}
.head-search input{flex:1;min-width:0;height:100%;background:none;border:0;color:var(--cream);padding:0 16px;font:15px var(--body);outline:none;text-overflow:ellipsis}   /* a narrow box ends the hint with "…", not mid-word */
.head-search input::placeholder{color:var(--mute);opacity:1}
.head-search button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:100%;padding:0 18px;border:0;border-radius:999px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#0d0d0d;font:800 11.5px var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.head-search button svg{width:16px;height:16px;flex:none}
.is-scrolled .head-search{height:44px}

/* ---------- nav (desktop row under the banner) ---------- */
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h)}
.nav ul{display:flex;gap:clamp(14px,1.9vw,26px);list-style:none;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;overflow-x:auto;scrollbar-width:none}
.nav ul::-webkit-scrollbar{display:none}
.nav ul a{display:block;white-space:nowrap;padding:8px 0;border-bottom:2px solid transparent;transition:border-color .25s,color .25s}
.nav ul a:hover,.nav ul a.on{border-color:var(--gold);color:var(--gold-hi)}
@media (max-width:1023px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .topbar .wrap{gap:12px}
  .topbar .claim{font-size:11px;letter-spacing:.03em}
  .topbar .claim small{font-size:11px;margin-top:2px}
  .is-scrolled .topbar .claim{font-size:10.5px}
}
@media (min-width:1024px) and (max-width:1180px){.nav ul{gap:12px;font-size:11px;letter-spacing:.07em}}   /* all ten links (Gallery added 10/19) fit on a 1024 px laptop in English */
@media (min-width:1024px){html.nav-tight{--nav-h:0px;--head-full:170px;--head-mini:114px}html.nav-tight .nav{display:none}html.nav-tight .menu-btn{display:inline-flex}}   /* site.js: labels too long for one row */
@media (min-width:768px) and (max-width:1023px){.head-call{display:inline-flex}}
@media (max-width:767px){.menu-btn{display:none}.topbar .claim{font-size:11.5px}}   /* phones open the menu from the tab bar, so the banner keeps its claim */
@media (max-width:360px){.topbar .claim{display:none}}
/* Phones and tablets: no search box in the banner; a search button ends the category row instead (Anthony 10/25:
   "shrink to lower right hand side"), which opens the Finder and its search bar. */
@media (max-width:1023px){.topbar .head-search{display:none}}

/* ---------- category row: the equipment categories (nine) under the nav on every page, fixed with the header (Anthony 10/25:
   they moved up from the homepage hero and replace the Equipment menu). Centred when they fit, a sideways scroll when not. */
.cat-bar{border-top:1px solid rgba(212,175,55,.16)}
.cat-bar .wrap{display:flex;align-items:center;gap:8px;height:calc(var(--cats-h) - 1px)}   /* + its 1 px top line = --cats-h */
.cat-bar ul{flex:1;min-width:0;display:flex;gap:5px;list-style:none;overflow-x:auto;scrollbar-width:none;padding:0 2px}
.cat-bar ul::-webkit-scrollbar{display:none}
.cat-bar li:first-child{margin-left:auto}
.cat-bar li:last-child{margin-right:auto}
/* Nine categories need about 1,270 px at this size: the row takes up to 1,440 px instead of the page's 1,180, so they fit
   on a 1,320 px screen and up. Narrower (or a longer language), it scrolls sideways: the mouse wheel moves it, arrow
   buttons appear at the ends on a computer, and a fade marks the side with more (site.js, "category row"). */
.cat-bar .wrap{width:min(1440px,100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))}
.cat-bar ul{position:relative;scroll-behavior:smooth}
.cat-bar.more-r ul{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.cat-bar.more-l ul{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.cat-bar.more-l.more-r ul{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.cat-arrow{display:none;flex:none;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid rgba(212,175,55,.55);background:rgba(212,175,55,.1);color:var(--gold-hi);cursor:pointer;transition:opacity .2s,border-color .2s}
.cat-arrow:hover{border-color:var(--gold)}
.cat-arrow:disabled{opacity:.25;cursor:default}
.cat-arrow svg{width:16px;height:16px}
.cat-prev svg{transform:scaleX(-1)}
[dir=rtl] .cat-prev svg{transform:none}
[dir=rtl] .cat-next svg{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){.cat-bar.over .cat-arrow{display:inline-flex}}
.cat-bar ul a{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:999px;border:1px solid rgba(212,175,55,.32);background:rgba(255,255,255,.05);color:#e9e9e9;font:600 11.5px var(--body);letter-spacing:0;white-space:nowrap;transition:border-color .25s,color .25s,background .25s}
.cat-bar ul a:hover,.cat-bar ul a.on{border-color:var(--gold);color:var(--gold-hi);background:rgba(212,175,55,.1)}
.cat-find{display:none;flex:none;align-items:center;justify-content:center;width:40px;height:36px;border-radius:999px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#0d0d0d}
.cat-find svg{width:18px;height:18px}
@media (min-width:1024px) and (max-width:1279px){.cat-bar ul{gap:5px}.cat-bar ul a{padding:0 10px;font-size:11.5px}}
@media (max-width:1023px){.cat-find{display:inline-flex;width:44px;height:42px}.cat-bar ul a{height:42px;padding:0 15px;font-size:13px}}   /* finger-sized */
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-family:var(--display);font-size:11px;font-weight:800;flex:none}
.nav .lang:empty,.menu .lang:empty{display:none}
.lang button{background:none;border:0;color:var(--mute);padding:7px 11px;letter-spacing:.1em;cursor:pointer}
.lang button.on{background:var(--gold);color:var(--black)}
@media (max-width:760px){.nav ul{gap:18px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:15px 24px;border-radius:999px;border:1px solid var(--gold);transition:all .25s;cursor:pointer;white-space:nowrap}
.btn-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#0d0d0d;border-color:var(--gold-hi)}
.btn-gold:hover{box-shadow:0 0 36px 2px rgba(212,175,55,.45);transform:translateY(-2px)}
.btn-ghost{color:var(--cream);background:rgba(0,0,0,.35)}
.btn-ghost:hover{background:var(--gold);color:var(--black)}
.btn svg{width:16px;height:16px;flex:none}

/* ---------- section titles (flyer style) ---------- */
section{padding:clamp(56px,8vw,96px) 0;position:relative}
.sec-title{text-align:center;margin-bottom:26px}
.sec-title h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);font-size:clamp(24px,3.4vw,38px);line-height:1.1}
.sec-title p{color:var(--cream);margin-top:12px;font-size:clamp(15px,1.4vw,17px)}
.lead-title{text-align:center}
.lead-title h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(30px,5.4vw,64px);line-height:1.05}
.lead-title .sub{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);font-size:clamp(14px,1.8vw,22px);margin-top:12px}
.lead-title hr{max-width:760px;margin:22px auto}
.lead-title p{max-width:760px;margin:0 auto;font-size:clamp(16px,1.5vw,19px);color:#ffffff}

/* ---------- gold-framed photo strips ---------- */
.strip{display:grid;gap:14px;grid-template-columns:repeat(var(--n,3),1fr)}
.strip figure{background:transparent;overflow:hidden;aspect-ratio:16/9;position:relative;border-radius:var(--r);-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.strip figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,filter .8s}
.strip figure:hover img{transform:scale(1.08);filter:brightness(1.12)}
.strip figure::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(228,194,90,.18) 50%,transparent 60%);background-size:250% 100%;background-position:150% 0;transition:background-position 1s}
.strip figure:hover::after{background-position:-60% 0}
.caption{text-align:center;color:var(--cream);margin-top:14px;font-size:15px}
@media (max-width:640px){.strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- interactive demo frames ---------- */
.demo{position:relative;background:#000;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(212,175,55,.08)}
.demo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.demo .poster{position:absolute;inset:0;background:#000 center/cover no-repeat;display:grid;place-items:center;cursor:pointer}
.demo .poster::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.demo .poster .btn{position:relative;z-index:1}
.demo-tag{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:.2em;text-transform:uppercase;background:rgba(0,0,0,.6);color:var(--gold-hi);padding:7px 12px;border-radius:999px;pointer-events:none}
@media (max-width:700px){.demo{aspect-ratio:4/5}}
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start;margin-top:26px}   /* start, not stretch: a stretched aspect-ratio box widens past its column */
.split>*{min-width:0}
.split .side{background:var(--panel-bg);box-shadow:var(--panel-shadow);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:14px}
.split .side h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.04em;color:var(--gold-hi)}
.split .side p{color:var(--mute);font-size:15px}
.split video{width:100%;background:#000;border-radius:var(--r);-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- brand chips + logo wall ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.chip{border:1px solid rgba(212,175,55,.35);background:rgba(212,175,55,.06);color:var(--gold-hi);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border-radius:999px;transition:all .2s}
.chip:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}
.logo-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}   /* flex, not grid, so a short last row centres */
.logo-wall a{flex:0 0 calc((100% - 56px)/5);grid-template-rows:100%}   /* definite row height so the img max-height % resolves (square logos overflowed) */
.logo-wall a.wordmark b{font-family:var(--cond);font-weight:700;font-size:clamp(18px,1.8vw,26px);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hi);text-align:center}   /* no verified logo file: name only */
.logo-wall a{aspect-ratio:2/1;border:0;border-radius:var(--r);box-shadow:0 14px 34px rgba(0,0,0,.4);display:grid;place-items:center;padding:16px 20px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;background:linear-gradient(180deg,#fff,#ffffff)}
.logo-wall a.dark{background:linear-gradient(180deg,#1a1a1a,#0d0d0d)}
.logo-wall a img{max-height:62%;max-width:82%;object-fit:contain;transition:transform .4s}
.logo-wall a span{position:absolute;left:0;right:0;bottom:0;font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:6px;background:var(--gold);color:var(--black);transform:translateY(100%);transition:transform .3s}
.logo-wall a:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(0,0,0,.6),0 0 34px rgba(212,175,55,.3)}
.logo-wall a:hover img{transform:scale(1.06)}
.logo-wall a:hover span{transform:none}
.logo-wall a.text{font-family:var(--display);font-weight:800;color:#0d0d0d;letter-spacing:.06em;text-transform:uppercase;text-align:center}
@media (max-width:760px){.logo-wall a{flex-basis:calc((100% - 14px)/2)}}

/* ---------- featured offer strip ---------- */
.offer{display:grid;grid-template-columns:1.2fr 1fr;background:radial-gradient(ellipse at 80% 30%,#1f1a0b,#0d0d0d 70%);overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--panel-shadow)}
.offer .ph{position:relative;min-height:260px;background:#000 center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
[dir="rtl"] .offer .ph{-webkit-mask-image:linear-gradient(270deg,#000 62%,transparent);mask-image:linear-gradient(270deg,#000 62%,transparent)}
.offer .bd{padding:28px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.offer .kick{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.offer h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(26px,3vw,40px);line-height:1.02;color:#fff}
.offer h3 em{font-style:normal;color:inherit}
.offer .price{font-family:var(--cond);font-weight:700;color:var(--gold-hi);font-size:clamp(34px,4vw,52px);line-height:1}
.offer .price small{font-size:.4em;color:var(--cream);margin-left:6px}
.offer p{color:var(--mute)}
@media (max-width:760px){.slider .nav-arrow{top:130px}.offer{grid-template-columns:1fr}.offer .ph,[dir="rtl"] .offer .ph{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}}

/* ---------- product slideshow (homepage) ---------- */
.slider{position:relative;overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--panel-shadow)}
.slider .track{display:flex;transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform}
.slider .slide{flex:0 0 100%;border:0;border-radius:0;box-shadow:none;min-height:330px}
.slider .slide .ph{background-size:cover;background-position:center}
.slider .nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:var(--gold-hi);font-size:28px;line-height:36px;cursor:pointer;z-index:2}
.slider .prev{left:10px}.slider .next{right:10px}
.slider .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px;z-index:2}
.slider .dots button{width:9px;height:9px;border-radius:50%;border:1px solid var(--gold);background:transparent;padding:0;cursor:pointer}
.slider .dots button.on{background:var(--gold-hi)}
[dir="rtl"] .slider .track{flex-direction:row-reverse}

/* ---------- carpet design center ---------- */
.designs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.designs button{border:0;padding:0;background:#000;aspect-ratio:1;overflow:hidden;cursor:pointer;position:relative;border-radius:var(--r);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.designs button img{width:100%;height:100%;object-fit:cover;transition:filter .6s,transform .8s}
.designs button:hover img{transform:scale(1.05)}
.designs button.on{box-shadow:0 0 0 3px var(--gold-hi),0 0 40px rgba(212,175,55,.35)}
.palette{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0 8px}
.palette button{width:42px;height:42px;border-radius:50%;border:2px solid transparent;outline:1px solid var(--line);cursor:pointer;transition:transform .2s}
.palette button.on,.palette button:hover{border-color:var(--cream);transform:scale(1.12)}
@media (max-width:640px){.designs{grid-template-columns:1fr 1fr 1fr;gap:8px}}

/* ---------- 2D featured-unit spinner (kept from the first concept) ---------- */
.cabinet{max-width:720px;margin:26px auto 0;border-radius:22px;padding:22px;background:linear-gradient(180deg,#262626,#0d0d0d);border:1px solid #4a3d12;box-shadow:0 40px 120px rgba(212,175,55,.12),inset 0 1px 0 rgba(228,194,90,.25);position:relative}
.bulbs{position:absolute;inset:8px;border-radius:16px;pointer-events:none;background:radial-gradient(circle,var(--gold-hi) 0 2.5px,transparent 3.5px) 0 0/22px 22px;-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:6px;animation:chase 1s steps(2) infinite;opacity:.9}
@keyframes chase{50%{background-position:11px 11px}}
.marquee{text-align:center;padding:12px 0 16px;font-family:var(--display);font-weight:900;letter-spacing:.3em;font-size:14px;color:var(--gold-hi);text-shadow:0 0 18px rgba(228,194,90,.7)}
.window{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#000;border-radius:12px;padding:10px;position:relative;box-shadow:inset 0 0 40px #000}
.reel{height:140px;overflow:hidden;background:linear-gradient(180deg,#d9d9d9,#ffffff 30%,#ffffff 70%,#c9c9c9);border-radius:6px;position:relative}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:30px;z-index:2}
.reel::before{top:0;background:linear-gradient(#000a,transparent)}
.reel::after{bottom:0;background:linear-gradient(transparent,#000a)}
.rstrip{will-change:transform}
.sym{height:140px;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:56px;color:#0d0d0d}
.sym.seven{color:#c8243a;font-size:80px;text-shadow:2px 2px 0 #500}
.sym.bar{font-size:28px;color:#ffffff;background:#0d0d0d;margin:44px 18px;height:52px;border-radius:6px;letter-spacing:.1em}
.sym.cherry{color:#b0122d}.sym.star{color:#c88b00}.sym svg{width:88px;height:88px}
.payline{position:absolute;left:4px;right:4px;top:50%;height:2px;background:rgba(200,36,58,.75);z-index:3;box-shadow:0 0 10px #c8243a}
.cab-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 6px 4px;flex-wrap:wrap}
.credit{font-family:'Courier New',monospace;color:#ff4d5e;background:#120406;border:1px solid #3a0d12;padding:10px 14px;border-radius:4px;font-size:14px;letter-spacing:.1em;text-shadow:0 0 8px #ff2238;min-width:240px}
.spin-btn{width:92px;height:92px;border-radius:50%;border:4px solid #6a5a1c;background:radial-gradient(circle at 35% 30%,#ffffff,#d4af37 55%,#7a6420);color:#0d0d0d;font-family:var(--display);font-weight:900;letter-spacing:.12em;font-size:15px;box-shadow:0 6px 0 #4a3d12,0 0 30px rgba(212,175,55,.6);transition:transform .1s;cursor:pointer}
.spin-btn:active{transform:translateY(5px);box-shadow:0 1px 0 #4a3d12,0 0 30px rgba(212,175,55,.6)}
.win{max-width:720px;margin:22px auto 0;display:none;grid-template-columns:190px 1fr;gap:20px;align-items:center;padding:18px;border-radius:var(--r-lg);background:var(--panel-bg);box-shadow:var(--panel-shadow)}
.win.show{display:grid;animation:winIn .6s ease}
@keyframes winIn{from{opacity:0;transform:translateY(16px)}}
.win img{border-radius:6px}
.win h3{font-family:var(--display);font-weight:800;font-size:20px;margin:6px 0 8px;text-transform:uppercase}
.win p{color:var(--mute);font-size:14px;margin-bottom:12px}
.win .mk{font-family:var(--display);font-size:11px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;font-weight:700}
@media (max-width:600px){.reel,.sym{height:100px}.sym{font-size:38px}.sym.seven{font-size:56px}.sym.bar{margin:28px 8px;height:44px;font-size:20px}.sym svg{width:60px;height:60px}.win{grid-template-columns:1fr}}

/* ---------- project box + contact footer (flyer) ---------- */
.project{padding:clamp(24px,4vw,40px);text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.14),transparent 70%),linear-gradient(180deg,#0d0d0d,#0d0d0d);border-radius:var(--r-lg);box-shadow:var(--panel-shadow)}
.project h2{font-family:var(--display);font-weight:800;text-transform:uppercase;color:var(--gold);letter-spacing:.05em;font-size:clamp(20px,2.6vw,30px)}
.project p{max-width:720px;margin:14px auto 18px;color:#ffffff}
.project .tags{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.contact{border-top:2px solid var(--gold);border-image:var(--gold-line) 1;background:#0d0d0d;padding:34px 0 40px}
.contact .name{font-family:var(--display);font-weight:800;color:var(--gold);font-size:clamp(26px,3vw,36px)}
.contact .role{color:var(--mute);font-family:var(--display);font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin-top:2px}
.contact hr{margin:16px 0 22px;background:var(--line);height:1px;border:0}
.tiles{display:grid;grid-template-columns:repeat(4,1fr)}
.tiles a{min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 10px;text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(13px,1.5vw,18px);transition:transform .2s}
.tiles a:hover{transform:translateY(-3px)}
.tiles .ic{width:58px;height:58px;border-radius:18px;background:rgba(212,175,55,.12);display:grid;place-items:center;color:var(--gold-hi)}
.tiles .ic.wa{background:var(--green);color:#fff}
.tiles .ic svg{width:30px;height:30px}
.tiles .t-mail,.tiles .t-web{color:var(--gold-hi);font-size:clamp(11px,1.15vw,15px)}
@media (max-width:760px){.tiles{grid-template-columns:1fr 1fr;row-gap:24px}}
.concept{color:#6d6d6d;font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-align:center;margin-top:28px;font-family:var(--display)}
.concept a{color:inherit;text-decoration:none}.concept a:hover{color:var(--gold,#c9a54a);text-decoration:underline}

/* ---------- WhatsApp chat bubble with desktop QR (required feature) ---------- */
.wa-btn{position:fixed;right:20px;bottom:20px;z-index:80;width:62px;height:62px;border-radius:50%;background:var(--green);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5);border:0;cursor:pointer;transition:transform .2s}
.wa-btn:hover{transform:scale(1.08)}
.wa-btn svg{width:32px;height:32px;fill:#fff}
.wa-btn .dot{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#e0242f;border:2px solid #fff;display:none}
.wa-btn.nudge .dot{display:block}
.wa-panel{position:fixed;right:20px;bottom:94px;z-index:80;width:min(340px,calc(100vw - 32px));background:#fff;color:#0d0d0d;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden;transform:translateY(16px) scale(.96);opacity:0;pointer-events:none;transition:all .25s;font-family:var(--body)}
.wa-panel.open{transform:none;opacity:1;pointer-events:auto}
.wa-panel:not(.open){visibility:hidden;transition:transform .25s,opacity .25s,visibility 0s .25s}   /* closed: out of the Tab order too */
.wa-head{background:#075e54;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.wa-head img{width:38px;height:38px;border-radius:50%;background:#000;object-fit:contain}
.wa-head b{display:block;font-size:15px}.wa-head small{opacity:.85;font-size:12px}
.wa-head button{margin-left:auto;background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.wa-body{background:#ece5dd;padding:16px;display:flex;flex-direction:column;gap:12px}
.wa-msg{background:#fff;border-radius:0 10px 10px 10px;padding:10px 12px;font-size:14px;max-width:88%;box-shadow:0 1px 1px rgba(0,0,0,.1)}
.wa-qr{display:flex;align-items:center;gap:12px;background:#fff;border-radius:10px;padding:10px}
.wa-qr #waQr{width:112px;height:112px;flex:none}
.wa-qr #waQr img,.wa-qr #waQr canvas{width:112px!important;height:112px!important}
.wa-qr p{font-size:13px;color:#333}
.wa-open{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;font-weight:700;padding:12px;border-radius:999px;font-size:15px}
@media (pointer:coarse),(max-width:767px){.wa-qr{display:none}}

/* ---------- chatbot additions ---------- */
.wa-body{max-height:min(460px,62vh);overflow-y:auto}
.wa-msg.me{align-self:flex-end;background:#dcf8c6;border-radius:10px 0 10px 10px}
.wa-msg.typing{display:flex;gap:4px;width:auto}
.wa-msg.typing i{width:7px;height:7px;border-radius:50%;background:#999;animation:blink 1s infinite}
.wa-msg.typing i:nth-child(2){animation-delay:.15s}.wa-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.wa-chips{display:flex;flex-wrap:wrap;gap:6px}
.wa-chips button{border:1px solid #128c7e;background:#fff;color:#075e54;border-radius:999px;padding:7px 11px;font:600 13px var(--body);cursor:pointer}
.wa-chips button:hover{background:#128c7e;color:#fff}
.wa-input textarea{width:100%;border:1px solid #c9c9c9;border-radius:8px;padding:8px;font:14px var(--body);resize:vertical;margin-bottom:6px}
.wa-sum{background:#fff;border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.6}
.wa-sum b{color:#075e54;margin-right:4px}
.wa-links{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.wa-links a{color:#075e54;text-decoration:underline}
.wa-links button{background:none;border:0;color:#666;text-decoration:underline;cursor:pointer;font:13px var(--body)}

/* ---------- language picker ---------- */
.lang{border-color:var(--gold-lo)}

/* ---------- crosshair cursor + gold dust ---------- */
.reticle-on, .reticle-on body, .reticle-on a, .reticle-on button, .reticle-on select, .reticle-on .poster{cursor:none}
.reticle-on textarea, .reticle-on input{cursor:text}
#reticle{position:fixed;left:0;top:0;width:44px;height:44px;pointer-events:none;z-index:9999;opacity:0;transition:opacity .2s}
#reticle.on{opacity:1}
#reticle circle,#reticle path{transition:transform .18s ease;transform-origin:22px 22px}
#reticle.hot path{transform:rotate(45deg) scale(1.15)}
#dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30;mix-blend-mode:screen}

/* ---------- right-to-left (Arabic) ---------- */
[dir="rtl"] .topbar .claim{text-align:left}
[dir="rtl"] .timeline{border-left:0;border-right:2px solid var(--gold-lo);padding-left:0;padding-right:22px;margin-left:0;margin-right:8px}
[dir="rtl"] .timeline li::before{left:auto;right:-30px}
[dir="rtl"] .specs th,[dir="rtl"] .specs td{text-align:right}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
/* a heading a link jumps to (#reconditioned, #photos) drops its 32 px slide-in at once: with the .9 s transition the
   browser aimed at the heading's starting spot, and it came to rest 32 px under the fixed header (10/30) */
.reveal:target{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---------- brand + offer pages ---------- */
.crumbs{font-size:13px;color:var(--mute);padding:18px 0 0}.crumbs a{color:var(--gold-hi)}
.b-hero{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:30px 0 10px}
.b-hero .plate{width:220px;aspect-ratio:2/1;border:0;border-radius:var(--r);box-shadow:0 18px 40px rgba(0,0,0,.45);display:grid;place-items:center;padding:16px;background:linear-gradient(180deg,#fff,#ffffff)}
.b-hero .plate.dark{background:linear-gradient(180deg,#1a1a1a,#0d0d0d)}
.b-hero .plate img{max-height:80%;max-width:90%;object-fit:contain}
.b-hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,4.6vw,54px);line-height:1}
.b-hero .tagline{color:var(--gold);font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:14px;margin-top:10px}
@media (max-width:640px){.b-hero{grid-template-columns:1fr}.b-hero .plate{width:180px}}
.prose{max-width:780px}.prose p{margin:0 0 14px;color:#ffffff;font-size:16.5px}
.facts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:22px 0}
.facts-row div{padding:16px;background:var(--panel-bg);box-shadow:var(--panel-shadow);border-radius:var(--r);min-width:0}   /* a long one-word fact (Gumpoldskirchen) must not widen the grid past the phone */
.facts-row b{overflow-wrap:anywhere}
.facts-row b{display:block;font-family:var(--cond);font-size:26px;color:var(--gold-hi);line-height:1.1}
.facts-row small{color:var(--mute);font-size:12.5px;letter-spacing:.04em}
.timeline{list-style:none;border-left:2px solid var(--gold-lo);margin:10px 0 0 8px;padding-left:22px}
.timeline li{position:relative;margin-bottom:16px;color:#ffffff}
.timeline li::before{content:"";position:absolute;left:-30px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.timeline b{font-family:var(--cond);color:var(--gold-hi);font-size:18px;margin-right:8px}
.model{display:grid;grid-template-columns:320px 1fr;gap:26px;background:var(--panel-bg);box-shadow:var(--panel-shadow);border-radius:var(--r-lg);padding:22px;margin-top:22px}
.model .ph{background:transparent;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r)}
.model .ph:not(.cab):not(.gen) img{-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.model .ph img{width:100%;height:100%;object-fit:cover}
/* brand-page moving banner: the flyer photos cross-fade with a slow push; reduced motion keeps photo 1 */
.floor{position:relative;height:clamp(170px,26vw,330px);overflow:hidden;margin:18px 0 4px;background:#000;border-radius:var(--r-lg);-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.floor .s{position:absolute;inset:-2%;background:center/cover no-repeat;opacity:0;animation:floorfade 24s linear infinite both}
.floor .s:first-child{opacity:1}
.floor .s:nth-child(2){animation-delay:6s}.floor .s:nth-child(3){animation-delay:12s}.floor .s:nth-child(4){animation-delay:18s}
.floor::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,transparent 40%,rgba(228,194,90,.22) 50%,transparent 60%) no-repeat;background-size:250% 100%;animation:floorsheen 8s ease-in-out infinite;pointer-events:none}
.floor::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45));box-shadow:inset 0 0 60px rgba(0,0,0,.7)}
@keyframes floorfade{0%{opacity:0;transform:scale(1.02)}5%{opacity:1}25%{opacity:1}30%{opacity:0;transform:scale(1.13) translateX(-1.5%)}100%{opacity:0;transform:scale(1.13) translateX(-1.5%)}}
@keyframes floorsheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.model .ph.cab{aspect-ratio:4/5;background:var(--spot)}
@media (max-width:760px){.model .ph.cab{aspect-ratio:1/1}}
.model .ph.cab.dark{background:var(--spot-dark)}
.model .ph.cab img{object-fit:contain;padding:8px}
.model .ph.gen{position:relative;background:#000 center/cover no-repeat;display:grid;place-items:center}
.model .ph.gen::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.model .ph.gen .gen-logo{position:relative;width:62%;aspect-ratio:2/1;display:grid;place-items:center;padding:10px;border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.6)}
.model .ph.gen .gen-logo img{width:100%;height:100%;object-fit:contain}
.model .ph.cab{position:relative}
.model .ph .gen-tag,.model .ph.gen .gen-tag{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;background:rgba(0,0,0,.72);color:var(--mute);font-size:11px;letter-spacing:.06em;text-align:center}
.model h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:22px}
.model .stock{display:inline-block;margin:8px 0 12px;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--black);padding:6px 12px;border-radius:999px}
.model p{color:#ffffff;margin-bottom:12px}
.specs{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:14px}
.specs th,.specs td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
.specs th{color:var(--gold);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;width:38%}
.specs td.na{color:var(--mute);font-style:italic}
@media (max-width:760px){.model{grid-template-columns:1fr}}
.sources{font-size:12.5px;color:var(--mute)}.sources li{margin:4px 0 4px 18px}.sources a{color:var(--gold-hi);word-break:break-all}
h2.h{font-family:var(--display);font-weight:800;text-transform:uppercase;color:var(--gold);letter-spacing:.04em;font-size:clamp(20px,2.4vw,28px);margin:34px 0 14px}

/* ---------- action buttons on model cards and finder cards ---------- */
.btn-add,.btn-cmp,.btn-print{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold-lo);background:rgba(0,0,0,.35);color:var(--gold-hi);font:800 11px var(--display);letter-spacing:.14em;text-transform:uppercase;padding:11px 16px;border-radius:999px;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-add:hover,.btn-cmp:hover,.btn-print:hover{background:var(--gold);color:var(--black)}
.btn-cmp.on{background:var(--gold-hi);color:var(--black);border-color:var(--gold-hi)}
.btn-cmp.on::before{content:"✓ "}
.act-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}

/* ---------- quote list: the B2B cart (units + quantities), sent to us as one message ---------- */
.ql-btn{position:fixed;right:96px;bottom:29px;z-index:80;display:none;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--gold);background:rgba(13,13,13,.92);color:var(--gold-hi);font:800 11px var(--display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.5);backdrop-filter:blur(8px);transition:transform .2s}
.ql-btn.show{display:inline-flex}
.ql-btn:hover{transform:translateY(-2px)}
.ql-btn svg{width:20px;height:20px}
.ql-btn .n{min-width:22px;height:22px;border-radius:999px;background:var(--line);color:var(--cream);display:grid;place-items:center;font-size:11px;padding:0 6px}
.ql-btn.has .n{background:var(--gold);color:var(--black)}
.ql-btn.pulse{animation:qlpulse .5s ease}
@keyframes qlpulse{40%{transform:scale(1.1)}}
@media (max-width:640px){.ql-btn .lbl{display:none}.ql-btn{right:94px;padding:0 12px}}
.ql-panel{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(420px,100vw);background:#0d0d0d;color:var(--cream);border-left:0;border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:-20px 0 60px rgba(0,0,0,.6);transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.ql-panel.open{transform:none}
.ql-panel:not(.open){visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}   /* closed: out of the Tab order too */
[dir="rtl"] .ql-panel{right:auto;left:0;border-radius:0 var(--r-lg) var(--r-lg) 0;transform:translateX(-105%)}
[dir="rtl"] .ql-panel.open{transform:none}
.ql-head,.cmp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--gold)}
.ql-head .x,.cmp-head .x{background:none;border:0;color:var(--cream);font-size:26px;line-height:1;cursor:pointer}
.ql-body{padding:16px 20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.ql-empty{color:var(--mute);font-size:15px;line-height:1.6}
.ql-items{list-style:none}
.ql-items li{display:grid;grid-template-columns:56px 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.ql-items .th{width:56px;height:56px;border-radius:14px;background:var(--spot);display:grid;place-items:center;overflow:hidden}
.ql-items .th img{max-width:100%;max-height:100%;object-fit:contain}
.ql-items .nm{min-width:0}
.ql-items .nm small{display:block;color:var(--gold);font-family:var(--display);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.ql-items .nm a{font-weight:700;font-size:14px;line-height:1.3;display:block}
.ql-items .qty{display:flex;align-items:center;gap:6px}
.ql-items .qty button{width:26px;height:26px;border-radius:50%;border:1px solid var(--gold-lo);background:none;color:var(--gold-hi);cursor:pointer;font-size:16px;line-height:1}
.ql-items .qty b{min-width:24px;text-align:center;font-family:var(--cond);font-size:18px}
.ql-items .rm{background:none;border:0;color:var(--mute);font-size:20px;cursor:pointer}
.ql-cond{font-size:14px;line-height:1.5}
.ql-cond b{display:block;font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.cmp-bar button{border:1px solid var(--gold-lo);background:none;color:var(--cream);border-radius:999px;padding:7px 11px;font:600 12.5px var(--body);cursor:pointer;text-align:left}
.ql-body textarea{width:100%;background:#000;border:1px solid var(--gold-lo);color:var(--cream);padding:12px;font:16px var(--body);border-radius:14px;resize:vertical}
.ql-send{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;font-weight:700;padding:13px;border-radius:999px;font-size:15px}
.ql-send svg{width:18px;height:18px;fill:#fff}
.ql-qr{display:flex;align-items:center;gap:12px;background:#fff;color:#222;border-radius:10px;padding:10px}
.ql-qr #qlQr{width:112px;height:112px;flex:none}
.ql-qr #qlQr img,.ql-qr #qlQr canvas{width:112px!important;height:112px!important}
.ql-qr p{font-size:13px}
.ql-qr:has(#qlQr:empty){display:none}
@media (pointer:coarse),(max-width:767px){.ql-qr{display:none}}
.ql-links{display:flex;flex-wrap:wrap;gap:14px;font-size:13px}
.ql-links a,.ql-links button{background:none;border:0;color:var(--gold-hi);text-decoration:underline;cursor:pointer;font:13px var(--body);padding:0}
.ql-toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);z-index:95;background:#fff;color:#0d0d0d;padding:12px 16px;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.5);font-size:14px;opacity:0;pointer-events:none;transition:all .25s;max-width:calc(100vw - 32px);display:flex;gap:14px;align-items:center}
.ql-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ql-toast a{color:#075e54;font-weight:700;text-decoration:underline;white-space:nowrap}

/* ---------- compare: up to three machines side by side, same fields on every page ---------- */
.cmp-bar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,calc(100% + 40px));z-index:85;display:flex;align-items:center;gap:10px;background:#0d0d0d;border:1px solid rgba(212,175,55,.55);border-radius:999px;padding:8px 10px 8px 18px;box-shadow:0 20px 50px rgba(0,0,0,.6);font-size:14px;transition:transform .3s,opacity .3s,visibility .3s;white-space:nowrap;max-width:calc(100vw - 32px)}
.cmp-bar:not(.on){visibility:hidden;opacity:0;pointer-events:none}   /* parked off-screen is not enough at phone width (bottom:92px) */
.cmp-bar.on{transform:translate(-50%,0)}
.cmp-bar .go{background:var(--gold);color:var(--black);border-color:var(--gold);font-weight:700}
.cmp-bar .go[disabled]{opacity:.45;cursor:default}
@media (max-width:640px){.cmp-bar{bottom:92px;font-size:13px;padding-left:12px}}
.cmp-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:16px}
.cmp-modal.open{display:flex}
.cmp-box{background:#0d0d0d;border-radius:var(--r-lg);overflow:hidden;width:min(1100px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.cmp-scroll{overflow:auto;padding:0 8px 16px}
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;min-width:600px}
.cmp th,.cmp td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.cmp thead th{position:sticky;top:0;background:#0d0d0d;z-index:1}
.cmp th:first-child,.cmp td:first-child{color:var(--gold);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;width:140px;position:sticky;left:0;background:#0d0d0d}
.cmp th.cm{font-weight:400}
.cmp th.cm small{display:block;color:var(--gold);font-family:var(--display);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.cmp th.cm b{display:block;font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;margin:2px 0 6px}
.cmp th.cm .ph{width:100%;max-width:220px;aspect-ratio:4/5;background:var(--spot);border-radius:var(--r);display:grid;place-items:center;overflow:hidden;margin-bottom:8px}
.cmp th.cm .ph.dark,.cmp th.cm .ph.gen{background:var(--spot-dark)}
.cmp th.cm .ph img{width:100%;height:100%;object-fit:contain;padding:6px}
.cmp th.cm .ph img.lg{padding:22%}
.cmp th.cm .stock{display:inline-block;font:800 9.5px var(--display);letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:var(--black);padding:4px 7px;margin-bottom:6px}
.cmp th.cm .lst{color:var(--mute);font-size:12px;margin-bottom:8px}
.cmp .cm-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px}
.cmp .cm-act a{color:var(--gold-hi);text-decoration:underline}
.cmp .cm-act .rmc{background:none;border:0;color:var(--mute);font-size:18px;cursor:pointer}
.cmp td .src,.specs .src{display:inline-block;margin-left:6px;font:700 9px var(--display);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--gold-lo);border-radius:3px;padding:1px 4px;color:var(--gold);font-style:normal;vertical-align:middle}
.cmp td .src.trade,.cmp td .src.dealer,.cmp td .src.none,.specs .src.trade,.specs .src.dealer,.specs .src.none{color:var(--mute);border-color:var(--line)}
.cmp td.na{color:var(--mute)}
[dir="rtl"] .cmp th,[dir="rtl"] .cmp td{text-align:right}

/* ---------- spec-sheet print: one model, dated header, our contact ---------- */
.print-head,.print-foot{display:none}
@media print{
  .site-head,.head-space,.skip,.menu,.tabbar,.foot-map,.vc-save,.nav,.topbar,.floor,.wa-btn,.wa-panel,#dust,#reticle,.demo,.crumbs,.btn,.btn-add,.btn-cmp,.btn-print,.act-row,.ql-btn,.ql-panel,.cmp-bar,.cmp-modal,.ql-toast,.strip,.slider,.concept,.gen-tag,.hero-floor{display:none!important}
  body{background:#fff;color:#000}
  .reveal{opacity:1;transform:none}
  .print-head{display:flex;align-items:center;gap:16px;padding:0 0 12px;border-bottom:2px solid #b3922a;margin-bottom:14px}
  .print-head img{height:60px;width:auto}
  .print-head b{display:block;font:800 16px var(--display);text-transform:uppercase;color:#000}
  .print-head span{color:#555;font-size:12px}
  .print-foot{display:block;margin-top:18px;padding-top:10px;border-top:1px solid #ccc;color:#555;font-size:11px}
  body.print-one .model:not(.print-target),body.print-one .models-intro,body.print-one .facts-row,body.print-one .prose,body.print-one .timeline,body.print-one h2.h,body.print-one .sources,body.print-one .b-hero,body.print-one .fine{display:none!important}
  body.print-one .model.print-target{display:grid;border-color:#b3922a;background:#fff;color:#000;break-inside:avoid;margin-top:0}
  .model .ph.cab,.model .ph.cab.dark{background:#fff}
  .model h3,.model p{color:#000}
  .specs th{color:#7a6420}.specs th,.specs td{border-color:#ddd;color:#000}
  .site-foot{background:#fff;color:#000;margin:0;padding:16px 0 0}.site-foot::before{background:#b3922a}.vcard{box-shadow:none;background:#fff;padding:0}.vcard .name{color:#7a6420}.vcard .role,.vc-scan{color:#333}.tiles .ic{border-color:#b3922a;color:#7a6420}.tiles a{color:#000}
}

/* ---------- Machine Finder (inventory.html) ---------- */
.fd-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;align-items:center;padding:30px 0 10px}
.fd-hero .txt{font-family:var(--cond);font-size:clamp(20px,2.2vw,30px);line-height:1.35}
.fd-hero .txt p+p{margin-top:18px}
.fd-hero .txt em{font-style:normal;color:var(--gold-hi)}
.fd-hero .floor{margin:0;height:clamp(200px,24vw,320px)}
@media (max-width:860px){.fd-hero{grid-template-columns:1fr}}
.banner{margin:26px 0 18px;padding:14px 18px;text-align:center;border-radius:999px;background:linear-gradient(180deg,#e4c25a,#b3922a);color:#0d0d0d;font-family:var(--display);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(15px,1.8vw,22px)}
/* the Finder's sort menu, small, beside the count (Anthony 10/30: no search bar or filter bubbles on the page) */
.fd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 16px}
.fd-bar .fd-count{flex:1 1 300px;margin:0;align-items:center}
.fd-sort{flex:0 1 auto;min-width:0;max-width:100%;text-overflow:ellipsis;height:36px;padding:0 32px 0 14px;border:1px solid var(--gold-lo);border-radius:999px;background:#0d0d0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4c25a' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/12px;color:var(--gold-hi);font:700 10.5px var(--display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;appearance:none}
.fd-sort:hover,.fd-sort:focus-visible{border-color:var(--gold)}
.fd-sort option{background:#0d0d0d;color:var(--cream)}
[dir=rtl] .fd-sort{padding:0 14px 0 32px;background-position:left 12px center}
@media (pointer:coarse){.fd-sort{height:44px}}
.fd-count{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--mute);font-size:14px;margin:4px 0 16px}
.fd-count button{background:none;border:0;color:var(--gold-hi);text-decoration:underline;cursor:pointer;font:14px var(--body)}
.fd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.fd-card{background:linear-gradient(180deg,#151515,#0d0d0d);box-shadow:var(--panel-shadow);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.fd-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(212,175,55,.28) inset,0 26px 60px rgba(0,0,0,.55),0 0 44px rgba(212,175,55,.1)}
.fd-card.hide{display:none}
.fd-card .ph{display:block;aspect-ratio:4/5;background:var(--spot);overflow:hidden;position:relative}
.fd-card .ph img{width:100%;height:100%;object-fit:contain;padding:14px 12px 12px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}
.fd-card .ph.cover img{object-fit:cover;padding:0;filter:none}
.fd-card .ph.dark{background:var(--spot-dark)}
.fd-card .ph.gen{background:#000 center/cover no-repeat;display:grid;place-items:center}
.fd-card .ph.gen::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.fd-card .ph.gen .gen-logo{position:relative;width:60%;aspect-ratio:2/1;display:grid;place-items:center;padding:10px;border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.6)}
.fd-card .ph.gen .gen-logo img{width:100%;height:100%;object-fit:contain;padding:0}
.fd-card .ph .gen-tag{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;background:rgba(0,0,0,.72);color:var(--mute);font-size:11px;letter-spacing:.06em;text-align:center}
.fd-card .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.fd-card .mk{font-family:var(--display);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.fd-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:17px;line-height:1.2}
.fd-card .stock{align-self:flex-start;font:800 9.5px var(--display);letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:var(--black);padding:5px 10px;border-radius:999px}
.fd-card .facts{list-style:none;font-size:13px;color:#ffffff;display:flex;flex-direction:column;gap:3px;margin-top:2px}
.fd-card .facts li{padding-left:14px;position:relative}
.fd-card .facts li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.fd-card .act-row{margin-top:auto;padding-top:8px}
.fd-card .act-row .more{color:var(--gold-hi);text-decoration:underline;font-size:12.5px;margin-left:auto}
.fd-empty{display:none;padding:28px;text-align:center;background:var(--panel-bg);box-shadow:var(--panel-shadow);border-radius:var(--r-lg)}
.fd-empty.on{display:block}
.fd-empty h3{font-family:var(--cond);font-size:28px;color:var(--gold-hi);margin-bottom:8px}
.fd-ask{display:flex;gap:8px;max-width:600px;margin:14px auto 0;flex-wrap:wrap;justify-content:center}
.fd-ask input{flex:1 1 240px;background:#000;border:1px solid var(--gold-lo);color:var(--cream);padding:11px 18px;font:16px var(--body);border-radius:999px;min-height:44px}
.fd-alerts{margin:40px 0 50px;padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:radial-gradient(ellipse at 20% 0%,rgba(212,175,55,.14),transparent 70%),linear-gradient(180deg,#0d0d0d,#0d0d0d);border-radius:var(--r-lg);box-shadow:var(--panel-shadow)}
.fd-alerts h3{font-family:var(--display);font-weight:800;text-transform:uppercase;color:var(--gold);font-size:clamp(18px,2.2vw,24px)}
.fd-alerts p{color:#ffffff;margin-top:6px}
@media (max-width:760px){.fd-alerts{grid-template-columns:1fr}}
[dir="rtl"] .fd-card .facts li{padding-left:0;padding-right:14px}
[dir="rtl"] .fd-card .facts li::before{left:auto;right:0}
[dir="rtl"] .fd-card .act-row .more{margin-left:0;margin-right:auto}

/* ---------- homepage: motion hero, in-stock strip ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,8vw,110px) 0 40px}
.hero-floor{position:absolute;inset:0;z-index:0;margin:0;border:0;height:auto}
.hero-floor .s{opacity:0}
.hero-floor::after{background:linear-gradient(180deg,rgba(13,13,13,.55),rgba(13,13,13,.82) 70%,var(--black))}
.hero .wrap{position:relative;z-index:1}
.hero-quick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}   /* the search box that sat above moved into the banner (10/20) */
.hero-quick a{color:var(--mute);font-size:13px;border-bottom:1px solid transparent}
.hero-quick a:hover{color:var(--gold-hi);border-color:var(--gold)}
.hero-quick a b{color:var(--gold-hi);font-weight:700}
.strip-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.strip-h h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);font-size:clamp(20px,2.6vw,30px)}
.strip-h a{color:var(--gold-hi);text-decoration:underline;font-size:14px}
.stock-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin}
.stock-strip .fd-card{scroll-snap-align:start}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:26px}
.why div{background:var(--panel-bg);box-shadow:var(--panel-shadow);border-radius:var(--r-lg);padding:22px}
.why b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-hi);font-size:14px;margin-bottom:8px}
.why p{color:#ffffff;font-size:14.5px}
.why p+p{margin-top:8px}
.why .q{color:var(--mute);font-size:12px;margin-top:10px}

/* ---------- clickable photo strips (homepage): each photo opens its destination page ---------- */
.strip figure::after{pointer-events:none}   /* the sheen overlay must not swallow the click */
.strip figure a{display:block;width:100%;height:100%;position:relative}
.strip figure .go{position:absolute;left:11%;bottom:14%;z-index:2;font:800 10.5px var(--display);letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.74);border:1px solid var(--gold);color:var(--gold-hi);padding:7px 11px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none}
.strip figure:hover .go,.strip figure a:focus-visible .go{opacity:1;transform:none}
@media (hover:none){.strip figure .go{opacity:1;transform:none}}
[dir="rtl"] .strip figure .go{left:auto;right:11%}

/* ---------- category destination pages (roulette.html, table-games.html) ---------- */
.cat-jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 8px}
.model-jump{justify-content:flex-start;margin:4px 0 6px}   /* brand pages: one tap to any model */
.tg-group{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;align-items:start;background:var(--panel-bg);box-shadow:var(--panel-shadow);border-radius:var(--r-lg);padding:22px;margin-top:26px}
.tg-group h2.h{margin-top:0}
.tg-photos{display:grid;gap:10px}
.tg-photos.n2,.tg-photos.n3{grid-template-columns:1fr 1fr}
.tg-photos.n3 figure:first-child{grid-column:1 / -1}
.tg-photos figure{background:#fff;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center;border-radius:var(--r);-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.tg-photos figure img{width:100%;height:100%;object-fit:cover}
.tg-photos figure.cut{background:var(--spot);-webkit-mask-image:none;mask-image:none}   /* the white-background shots, cut out */
.tg-photos figure.cut img{object-fit:contain;padding:7%;filter:drop-shadow(0 14px 20px rgba(0,0,0,.6))}
.tg-item{padding:14px 0;border-top:1px solid var(--line)}
.tg-item:first-of-type{border-top:0;padding-top:0}
.tg-item h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:17px;letter-spacing:.03em}
.tg-item h3 b{color:var(--gold-hi);margin-right:6px}
.tg-item ul{list-style:none;margin:8px 0 10px;color:#ffffff;font-size:15px}
.tg-item li{padding-left:14px;position:relative;margin:4px 0}
.tg-item li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.tg-note{color:var(--gold-hi);font-weight:700;margin-top:6px}
.btn-wa{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--green);color:#7ee2a3;font:800 11px var(--display);letter-spacing:.14em;text-transform:uppercase;padding:11px 16px;border-radius:999px;transition:all .2s}
.btn-wa:hover{background:var(--green);color:#fff}
@media (max-width:860px){.tg-group{grid-template-columns:1fr}}
[dir="rtl"] .tg-item li{padding-left:0;padding-right:14px}
[dir="rtl"] .tg-item li::before{left:auto;right:0}
[dir="rtl"] .tg-item h3 b{margin-right:0;margin-left:6px}

/* ---------- soft photos: dark product shots and scene photos fade at the edges instead of showing a rectangle ---------- */
.fd-card .ph.dark img,.model .ph.cab.dark img,.cmp th.cm .ph.dark img{-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.fd-card .ph.cover::after,.fd-card .ph.gen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(rgba(21,21,21,0),#151515);pointer-events:none;z-index:1}
.fd-card .ph .gen-tag,.model .ph .gen-tag{z-index:2;left:50%;right:auto;bottom:8px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 16px);padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.7);color:#d9d9d9;font-size:10.5px;line-height:1.35;text-align:center}

/* ---------- homepage bands: fade in and out instead of sitting between two border lines ---------- */
.band{background:linear-gradient(180deg,rgba(13,13,13,0),var(--ink) 14%,var(--ink) 86%,rgba(13,13,13,0))}
html.sheet-open,html.sheet-open body{overflow:hidden}

/* ---------- phone + tablet menu (opened from the header Menu button or the tab bar) ---------- */
.menu{position:fixed;inset:0;z-index:120;background:#0d0d0d;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));opacity:0;transform:translateY(-10px);transition:opacity .22s,transform .22s}
.menu[hidden]{display:none}
.menu.open{opacity:1;transform:none}
.menu-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;min-height:64px;background:linear-gradient(#0d0d0d 80%,rgba(13,13,13,0))}
.menu-head img{height:42px;width:auto}
.menu-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.menu-x{margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(212,175,55,.45);background:none;color:var(--cream);font-size:28px;line-height:1;cursor:pointer}
.menu-links{list-style:none;margin:6px 0 20px}
.menu-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 6px;border-bottom:1px solid rgba(255,255,255,.07);font:800 15px var(--display);letter-spacing:.07em;text-transform:uppercase}
.menu-links a.on{color:var(--gold-hi)}
.menu-links svg{width:18px;height:18px;color:var(--gold);flex:none}
[dir="rtl"] .menu-links svg{transform:scaleX(-1)}
.menu-brands b,.foot-map b{display:block;font:800 11px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:4px 0 12px}
.menu-brands p{display:flex;flex-wrap:wrap;gap:8px}
.menu-brands a{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.06);font-size:14.5px}
.menu-contact{display:grid;gap:10px;margin:24px 0 18px}
.menu-contact a{display:flex;align-items:center;gap:14px;min-height:54px;padding:0 18px;border-radius:18px;background:rgba(255,255,255,.06);font-weight:700;font-size:15.5px;overflow-wrap:anywhere}
.menu-contact a svg{width:22px;height:22px;flex:none;color:var(--gold-hi)}
.menu-contact .mc-wa{background:var(--green);color:#fff}
.menu-contact .mc-wa svg{color:#fff}
.menu-contact .mc-call{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#0d0d0d}
.menu-contact .mc-call svg{color:#0d0d0d}
.menu .lang{align-self:flex-start;margin-top:4px}
html.menu-open,html.menu-open body{overflow:hidden}

/* ---------- phone tab bar: Home, Search, Quote list, WhatsApp, Menu (thumb reach, always visible) ---------- */
.tabbar{display:none}
@media (max-width:767px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:85;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:rgba(13,13,13,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -12px 30px rgba(0,0,0,.45)}
  .tabbar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.6),transparent)}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;background:none;border:0;color:#bdbdbd;font:800 9.5px var(--display);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tabbar span{max-width:100%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar svg{width:23px;height:23px}
  .tabbar .on{color:var(--gold-hi)}
  .tabbar .on::after{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:2px;background:var(--gold-hi)}
  .tabbar .tb-wa svg{color:var(--green)}
  .tabbar .ql-count{position:absolute;top:7px;left:calc(50% + 5px);min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--gold);color:#000;font:800 10.5px var(--display);display:grid;place-items:center}
  .tabbar .ql-count[hidden]{display:none}
  .wa-btn,.ql-btn,.ql-btn.show{display:none!important}
  .wa-panel{left:12px;right:12px;width:auto;bottom:calc(var(--tab-h) + 10px + env(safe-area-inset-bottom))}
  .ql-toast{bottom:calc(var(--tab-h) + 14px + env(safe-area-inset-bottom))}
  .cmp-bar{bottom:calc(var(--tab-h) + 12px + env(safe-area-inset-bottom))}
  .ql-panel{border-radius:0}
}

/* ---------- footer: contact tiles + the company's digital business card + site map ---------- */
.site-foot{position:relative;background:radial-gradient(ellipse at 20% 0%,rgba(212,175,55,.1),transparent 60%),linear-gradient(180deg,#0d0d0d,#0d0d0d);padding:52px 0 40px;margin-top:30px}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-hi) 50%,var(--gold) 80%,transparent);opacity:.8}
.foot-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;align-items:center}
.vcard{display:flex;gap:22px;align-items:center;padding:22px;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(212,175,55,.03) 60%);box-shadow:0 30px 70px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.1) inset}
.vc-qr{width:156px;height:156px;flex:none;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.vc-body{min-width:0}
.vc-kick{display:block;font:800 10.5px var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.vcard .name{font-family:var(--display);font-weight:800;color:var(--gold-hi);font-size:clamp(24px,2.6vw,32px);line-height:1.1;margin-top:6px}
.vcard .role{color:var(--mute);font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:6px}
.vc-scan{color:#ffffff;font-size:14.5px;line-height:1.45;margin:12px 0 14px}
.vc-scan b{color:var(--cream)}
.vc-save{padding:13px 20px;font-size:11.5px}
.vc-save svg{width:18px;height:18px}
.site-foot .tiles{grid-template-columns:1fr 1fr;row-gap:22px}
.foot-map{display:grid;grid-template-columns:1fr 2fr;gap:26px;margin-top:38px;padding-top:26px;position:relative}
.foot-map::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.35),transparent)}
.foot-map p{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-map a{color:#d9d9d9;font-size:14.5px;padding:6px 0;transition:color .2s}
.foot-map a:hover{color:var(--gold-hi)}
@media (max-width:900px){.foot-top{grid-template-columns:1fr}.foot-map{grid-template-columns:1fr}}
@media (max-width:560px){
  .vcard{flex-direction:column;text-align:center;gap:14px}
  .vc-qr{width:132px;height:132px}
  .vc-save{width:100%}
}

/* ---------- homepage: browse by category (big tap targets, soft photos) ---------- */
/* Category tiles (v5, client notes 2026-10-19): photos fade into the page at the edges instead of sitting in boxes; 8 tiles
   with Slot machines and Custom casino carpeting wide; the carpet room render pans slowly so the tile invites a click.
   Desktop 5 columns (2 full rows), tablet 4 (carpet becomes a full-width band), phone 2 (wide tiles full width). */
.cat-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:18px 16px;margin-top:20px}
.cat-tiles a{position:relative;display:block;color:var(--cream)}
.cat-tiles a.wide{grid-column:span 2}
.cat-tiles .ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.cat-tiles a.wide .ph{aspect-ratio:auto;height:100%}
.cat-tiles .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.cat-tiles .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.74))}
.cat-tiles .lb{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;font:800 13px var(--display);letter-spacing:.08em;text-transform:uppercase;line-height:1.25;text-shadow:0 2px 12px rgba(0,0,0,.85);transition:color .3s}
.cat-tiles a:hover .ph img,.cat-tiles a:focus-visible .ph img{transform:scale(1.06)}
.cat-tiles a:hover .lb,.cat-tiles a:focus-visible .lb{color:var(--gold-hi)}
.cat-tiles a.cat-carpet .ph img{animation:carpetpan 28s ease-in-out infinite alternate}
.cat-tiles a.cat-carpet .lb{font-size:15px}
@keyframes carpetpan{from{transform:scale(1.1) translate(-3%,1%)}to{transform:scale(1.18) translate(3%,-2%)}}
@media (max-width:1023px){.cat-tiles{grid-template-columns:repeat(4,1fr)}.cat-tiles a.cat-carpet{grid-column:1/-1}.cat-tiles a.cat-carpet .ph{aspect-ratio:16/6;height:auto}}
@media (max-width:560px){.cat-tiles{grid-template-columns:repeat(2,1fr);gap:12px 10px}.cat-tiles a.wide{grid-column:1/-1}.cat-tiles a.wide .ph{aspect-ratio:16/9;height:auto}.cat-tiles .ph{aspect-ratio:1/1}.cat-tiles .lb{font-size:12px;left:12px;right:12px;bottom:12px}.cat-tiles a.cat-carpet .lb{font-size:13px}}

/* ---------- phones and tablets: the banner's search box is hidden below 1,024 px; the gold search button at the end of
   the category row opens it under the header (site.js "phone search"; Anthony 10/30 took the Finder's own box away) ---------- */
@media (max-width:1023px){
  .site-head.search-open .topbar .head-search{display:flex;position:fixed;left:12px;right:12px;top:var(--search-top,120px);z-index:120;max-width:none;min-width:0;margin:0;height:50px;background:#0d0d0d;box-shadow:0 14px 34px rgba(0,0,0,.65)}
  .site-head.search-open .cat-find{box-shadow:inset 0 0 0 2px #0d0d0d}
}

/* ---------- touch: bigger targets, readable type ---------- */
@media (pointer:coarse){
  /* Touch screens: every control is at least 44 x 44 px (client notes 2026-10-19: "as cell phone friendly as possible").
     The slideshow dots are the one exception, 35 x 44: nine 44 px dots do not fit a 360 px phone (arrows and swipe also work). */
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .btn-add,.btn-cmp,.btn-print,.btn-wa{min-height:44px}
  .ql-items li{grid-template-columns:56px 1fr 44px;grid-template-areas:"th nm rm" "th qty rm";row-gap:4px}
  .ql-items .th{grid-area:th}
  .ql-items .nm{grid-area:nm}
  .ql-items .nm a{display:flex;align-items:center;min-height:44px}
  .ql-items .qty{grid-area:qty}
  .ql-items .qty button{width:44px;height:44px}
  .ql-items .rm{grid-area:rm;width:44px;height:44px}
  .ql-head .x,.cmp-head .x{width:44px;height:44px;margin:-10px -12px -10px 0}
  .wa-head button{width:44px;height:44px;margin:-10px -12px -10px auto}
  .wa-chips button,.cmp-bar button{min-height:44px}
  .ql-links a,.ql-links button{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-block;padding:13px 9px;margin:0 -9px}
  .ql-toast a{display:inline-block;padding:11px 0;margin:-11px 0}
  .hero-quick{gap:8px}
  .hero-quick a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.07);border-bottom:0}
  .slider .dots{gap:26px}
  .slider .dots button{position:relative}
  .slider .dots button::after{content:"";position:absolute;inset:-17.5px -13px}
  .palette button{width:44px;height:44px}
  .fd-card a.mk{display:flex;align-items:center;min-height:44px}
  .fd-card h3 a{display:flex;align-items:center;min-height:44px}
  .act-row .more{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  .fd-count button{min-height:44px}
  .strip-h a{display:inline-flex;align-items:center;min-height:44px}
  .foot-map p{gap:4px 22px}
  .foot-map a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;margin:0 -11px}   /* wider tap box, same look */
  .pg-cell figcaption .sheet{display:flex;align-items:center;min-height:44px;margin-top:0}
  .lb-cap .lb-sheet{display:inline-flex;align-items:center;min-height:44px}
  /* source tags in spec tables: a 44 px tap box around the same small badge (drawn by ::before) */
  .cmp td .src,.specs .src{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-width:0;margin-left:0}
  .cmp td .src::before,.specs .src::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:17px;transform:translateY(-50%);border:1px solid;border-color:inherit;border-radius:3px}
}
@media (max-width:767px){
  .fd-card .facts{font-size:14px}
  .fd-card h3{font-size:16.5px}
  .crumbs{font-size:14px}
  .prose p{font-size:16px}
  .tg-item ul{font-size:16px}
  .strip figure .go{font-size:10px;padding:7px 10px}
  section{padding:clamp(40px,10vw,56px) 0}
}

/* ---------- v5: the real photos and clips — full-screen viewer, Gallery page, photo strips on model cards ---------- */
html.lb-open{overflow:hidden}
dialog.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(13,13,13,.97);color:var(--cream);overflow:hidden}
dialog.lb[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
dialog.lb::backdrop{background:rgba(0,0,0,.8)}
.lb-stage{display:grid;place-items:center;min-height:0;padding:60px 72px 6px}
.lb-stage img,.lb-stage video{max-width:100%;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);width:auto;height:auto;object-fit:contain;border-radius:var(--r);box-shadow:0 30px 90px rgba(0,0,0,.7);background:#000}   /* a % height doesn't resolve inside the grid row, so size against the viewport */
.lb-cap{margin:0;padding:10px 76px calc(18px + env(safe-area-inset-bottom));text-align:center;font-size:15px;line-height:1.4;min-height:1.4em}
.lb-n{position:absolute;top:22px;left:22px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;color:var(--mute);direction:ltr;unicode-bidi:isolate}   /* "13 / 122" must not flip to "122 / 13" in Arabic */
.lb-x,.lb-prev,.lb-next{position:absolute;border:0;padding:0;background:rgba(255,255,255,.09);color:var(--cream);border-radius:999px;width:50px;height:50px;display:grid;place-items:center;font:400 32px/1 var(--body);cursor:pointer;transition:background .2s,color .2s}
.lb-x:hover,.lb-prev:hover,.lb-next:hover,.lb-x:focus-visible,.lb-prev:focus-visible,.lb-next:focus-visible{background:var(--gold);color:var(--black)}
.lb-x{top:10px;right:12px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}
dialog.lb.single .lb-prev,dialog.lb.single .lb-next{display:none}
[dir="rtl"] .lb-x{right:auto;left:12px}[dir="rtl"] .lb-n{left:auto;right:22px}
[dir="rtl"] .lb-prev{left:auto;right:12px}[dir="rtl"] .lb-next{right:auto;left:12px}
@media (max-width:767px){
  .lb-stage{padding:64px 4px 4px}
  .lb-stage img,.lb-stage video{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
  .lb-prev,.lb-next{top:auto;bottom:calc(10px + env(safe-area-inset-bottom));transform:none;width:46px;height:46px}
  .lb-cap{padding:12px 64px calc(20px + env(safe-area-inset-bottom));font-size:14px}
}
/* Gallery page: filter chips + a soft, frameless masonry of photos and clips */
.g-intro{color:var(--mute);max-width:760px;margin:-4px 0 14px}
.g-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.g-filter .chip{cursor:pointer;min-height:44px}
.g-filter .chip[aria-pressed="true"]{background:var(--gold);color:var(--black);border-color:var(--gold)}
.g-filter .chip b{opacity:.7;margin-left:6px;font-weight:700}
.g-tile[hidden],.g-empty[hidden]{display:none}
.g-empty{color:var(--mute)}
/* real photos on a model card: a swipeable row under the specs; the main photo can be a real one too */
.unit-ph{margin:16px 0 4px}
.unit-ph h4{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);margin:0 0 8px}
.unit-ph .row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 6px;scrollbar-width:thin}
.unit-ph .row a{flex:0 0 auto;position:relative;width:104px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;scroll-snap-align:start}
.unit-ph .row a img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.unit-ph .row a:hover img{transform:scale(1.07)}
.unit-ph .row a .lb-cap{display:none}
.unit-ph .row a[data-more]::after{content:attr(data-more);position:absolute;inset:0;display:grid;place-items:center;background:rgba(13,13,13,.58);font-family:var(--display);font-weight:800;font-size:18px;color:var(--cream)}
.unit-ph .row a.vid::before{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(13,13,13,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2cf7c' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50%/16px no-repeat;z-index:1}
.m-media{min-width:0}
.model .ph.real{position:relative;display:block}
.model .ph.real img{object-position:50% 40%}
/* homepage: "Real photos, real units" — one silent clip beside six of our photos */
.real-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:14px;align-items:stretch}
.real-band.no-clip{grid-template-columns:1fr}
.real-clip{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;background:#000;min-height:260px;-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.real-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.real-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.real-grid a{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;color:var(--cream)}
.real-grid a img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect;transition:transform .7s ease,filter .7s}
.real-grid a:hover img,.real-grid a:focus-visible img{transform:scale(1.05);filter:brightness(1.12)}
.real-grid a .lb-cap{position:absolute;left:8%;right:8%;bottom:9%;padding:5px 9px;border-radius:9px;background:rgba(13,13,13,.72);font-size:12px;line-height:1.3;text-align:center;opacity:0;transition:opacity .3s;pointer-events:none}
.real-grid a:hover .lb-cap,.real-grid a:focus-visible .lb-cap{opacity:1}
@media (hover:none){.real-grid a .lb-cap{opacity:1}}
@media (max-width:767px){.real-band{grid-template-columns:1fr}.real-clip{min-height:0;aspect-ratio:16/10}.real-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* Finder card: how many real photos a model has */
.fd-real{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--gold-hi);font-weight:700;letter-spacing:.02em}
.fd-real svg{width:15px;height:15px}
.fd-card .ph .fd-real{position:absolute;top:10px;left:10px;padding:5px 9px;border-radius:999px;background:rgba(13,13,13,.72)}
[dir="rtl"] .fd-card .ph .fd-real{left:auto;right:10px}

/* ---------- print (v3 chrome): last in the file so it wins over the screen rules above ---------- */
/* v6:start (client round-1 notes, 2026-10-19) */
/* Real photos in one consistent grid everywhere (gallery + category pages): every cell the same 4:5 shape, landscape
   row shots across two cells, the machine placed by a focal point, faded edges instead of frames, caption under it. */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-flow:dense;gap:22px 14px;margin:14px 0 34px}
.pg-cell{margin:0;display:flex;flex-direction:column;gap:9px;min-width:0}
.pg-cell.wide{grid-column:span 2}
.pg-cell .ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.pg-cell.wide .ph{aspect-ratio:33/20;flex:1 0 auto}
.pg-cell .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .7s ease,filter .7s}
.pg-cell .ph:hover img,.pg-cell .ph:focus-visible img{transform:scale(1.04);filter:brightness(1.1)}
.pg-cell .lb-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pg-cell figcaption{font-size:13px;line-height:1.35;color:var(--cream);min-height:2.7em;padding:0 2px}
.pg-cell figcaption .mute,.pg-cell figcaption:empty{color:var(--mute)}
.pg-cell figcaption a{color:inherit;text-decoration:none}
.pg-cell figcaption a:hover{color:var(--gold-hi)}
.pg-cell figcaption .sheet{display:inline-block;margin-top:2px;color:var(--gold-hi);font:700 11px var(--display);letter-spacing:.06em;text-transform:uppercase}
.pg-cell.vid .ph::after{content:"";position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(13,13,13,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2cf7c' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50%/26px no-repeat;pointer-events:none}
.pg-cell[hidden]{display:none}
@media (max-width:767px){.pg{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}.pg-cell.wide{grid-column:1/-1}.pg-cell.wide .ph{aspect-ratio:16/10}.pg-cell figcaption{font-size:12.5px}}
/* the viewer's "Spec sheet" link (site.js adds it for photos of a catalog model) */
.lb-cap .lb-sheet{margin-inline-start:10px;color:var(--gold-hi);font:700 12px var(--display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* a maker's logo on a cream plate, linking to its brand page (SHFL / Shuffle Master, Patir) */
.maker{display:inline-flex;align-items:center;gap:16px;margin:6px 0 14px;color:var(--cream);font-weight:700}
.maker .plate{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:14px;background:linear-gradient(180deg,#fff,#ffffff)}
.maker .plate img{height:44px;width:auto}
a.maker:hover{color:var(--gold-hi)}
/* Patir Seating: official product shots, faded edges */
.patir{margin:30px 0}
.patir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin:14px 0}
.patir-grid figure{margin:0}
.patir-grid img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;background:var(--spot)}
.patir-grid figcaption{margin-top:6px;font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi)}
.patir .fine{color:var(--mute);font-size:12.5px}
/* Blue Ox (air filtration): the unit on the dark page with the showroom glow, specs beside it */
.ox{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;margin:26px 0}
.ox-ph{background:var(--spot);padding:20px}
.ox-ph img{display:block;width:100%;height:auto}
.ox-bd .mk{color:var(--gold-hi);font:700 12px var(--display);letter-spacing:.12em;text-transform:uppercase}
.ox-bd h2{font:800 clamp(26px,3vw,36px) var(--display);margin:2px 0 6px}
.ox-finishes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:10px 0 4px}
.ox-finishes figure{margin:0;text-align:center}
.ox-finishes img{display:block;width:100%;height:auto;background:var(--spot)}
.ox-finishes figcaption{margin-top:6px;font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)}
/* manufacturer dimension drawings are shown as published: white sheet, never faded or cropped */
.drawing{margin:12px 0 30px;color:var(--mute);font-size:13px}
.drawing img{display:block;max-width:100%;height:auto;background:#fff;border-radius:6px;margin-bottom:8px}
.drawing a{color:var(--gold-hi)}
/* carpet page: the room render as a full-width hero, the Design Center patterns as swatches */
.carpet-hero{position:relative;margin:18px 0 6px;-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.carpet-hero img{display:block;width:100%;height:clamp(260px,46vw,560px);object-fit:cover;object-position:50% 70%}
.carpet-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.78))}
.carpet-hero-txt{position:absolute;left:6%;right:6%;bottom:12%;z-index:1;text-align:center}
.carpet-hero-txt h1{font:900 clamp(28px,5vw,58px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 4px 24px rgba(0,0,0,.8)}
.carpet-hero-txt p{margin-top:10px;color:#ffffff;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.patterns{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:12px 0 4px}
.patterns a{display:block;color:var(--cream);text-align:center}
.patterns img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect;transition:transform .5s}
.patterns a:hover img{transform:scale(1.05)}
.patterns span{display:block;margin-top:6px;font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:767px){.ox{grid-template-columns:1fr}.ox-finishes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.patterns{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* header Equipment menu: a button in the nav row opens a panel with the 8 categories (outside the nav's scrolling <ul>) */
.nav{position:relative}
.eq-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 0;border:0;border-bottom:2px solid transparent;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;white-space:nowrap;transition:border-color .25s,color .25s}
.eq-btn svg{width:14px;height:14px;transition:transform .25s}
.eq-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.eq-btn:hover,.eq-btn.on,.eq-btn[aria-expanded="true"]{border-color:var(--gold);color:var(--gold-hi)}
.eq-panel{position:absolute;left:0;right:0;top:100%;z-index:60;background:linear-gradient(180deg,rgba(13,13,13,.985),rgba(13,13,13,.975));border-top:1px solid rgba(212,175,55,.22);border-image:var(--gold-line) 1;box-shadow:0 30px 60px rgba(0,0,0,.6);padding:18px 0 22px}
.eq-panel[hidden]{display:none}
/* the panel sits inside .nav, so the nav's own .wrap / ul / a rules (one 50 px row of links) must not reach it: without
   these the 8 tiles were squeezed into one row that spilled over the nav and the hero (live since v5) */
.nav .eq-panel .wrap{display:block;height:auto}
.nav .eq-panel .eq-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px;overflow:visible;font:inherit;letter-spacing:normal;text-transform:none}
.nav .eq-panel .eq-grid a{display:flex;flex-direction:column;gap:8px;padding:0;border-bottom:0;white-space:normal;color:var(--cream);font:800 12px var(--display);letter-spacing:.08em;text-transform:uppercase}
.eq-grid .ph{display:block;aspect-ratio:16/10;overflow:hidden;-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.eq-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.nav .eq-panel .eq-grid a:hover,.nav .eq-panel .eq-grid a:focus-visible{color:var(--gold-hi)}
.eq-grid a:hover img,.eq-grid a:focus-visible img{transform:scale(1.05)}
/* phone menu: Equipment is a heading over its 8 categories */
.menu-eq-h{display:block;margin:16px 6px 0;font:800 11px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.menu-eq{list-style:none;margin:0 0 6px;padding-inline-start:12px}
.menu-links .menu-eq a{min-height:50px;font-size:14px}
/* spec sheets (machines/<id>.html): photo + key facts, the maker's drawing, the full spec table; prints as one sheet */
.print-head{display:none}
.sheet-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:34px;align-items:center;margin:22px 0 8px}
.sheet-ph .ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden}
.sheet-ph .ph img{width:100%;height:100%;object-fit:cover}
.sheet-ph .ph:not(.cab):not(.gen) img,.sheet-ph .ph.cab.dark img{-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.sheet-ph .ph.cab{background:var(--spot)}
.sheet-ph .ph.cab.dark{background:var(--spot-dark)}
.sheet-ph .ph.cab img{object-fit:contain;padding:10px}
.sheet-ph .ph.gen{background:#000 center/cover no-repeat;display:grid;place-items:center}
.sheet-ph .ph.gen::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.sheet-ph .ph.gen .gen-logo{position:relative;width:62%;aspect-ratio:2/1;display:grid;place-items:center;padding:10px;border-radius:14px}
.sheet-ph .ph.gen .gen-logo img{width:100%;height:100%;object-fit:contain}
.sheet-ph .ph .gen-tag{position:absolute;z-index:2;left:50%;bottom:8px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 16px);padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.7);color:#d9d9d9;font-size:10.5px;line-height:1.35;text-align:center}
.sheet-bd .mk{color:var(--gold-hi);font:700 12px var(--display);letter-spacing:.12em;text-transform:uppercase}
.sheet-bd h1{font:900 clamp(28px,4vw,46px)/1.05 var(--display);text-transform:uppercase;margin:4px 0 10px}
.sheet-bd .stock{display:inline-block;margin:2px 0 6px;font:800 11px var(--display);letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--black);padding:6px 12px;border-radius:999px}
.sheet-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px 18px;margin:14px 0 18px}
.sheet-facts div{border-top:1px solid rgba(212,175,55,.3);border-image:var(--gold-line) 1;padding-top:8px;min-width:0}
.sheet-facts small{display:block;color:var(--mute);font:700 10.5px var(--display);letter-spacing:.14em;text-transform:uppercase}
.sheet-facts b{display:block;margin-top:3px;font-weight:600;font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.sheet-print svg{width:16px;height:16px;margin-inline-end:6px;vertical-align:-3px}
.sheet-desc{color:#ffffff;max-width:820px;margin:8px 0 6px}
.sheet-drawing img{width:auto;max-width:100%;max-height:80vh}
.sheet-specs{max-width:900px}
@media (max-width:767px){.sheet-hero{grid-template-columns:1fr;gap:16px}.sheet-ph .ph.cab{aspect-ratio:1/1}}
@media print{
  @page{size:letter;margin:12mm}
  body.sheet-page{background:#fff!important;color:#000}
  body.sheet-page .reveal{opacity:1!important;transform:none!important}
  body.sheet-page .print-head{display:flex;align-items:center;gap:16px;border-bottom:2px solid #b3922a;padding-bottom:8px;margin-bottom:12px}
  body.sheet-page .print-head img{height:52px;width:auto}
  body.sheet-page .print-head b{display:block;font:800 11px var(--display);letter-spacing:.16em;text-transform:uppercase;color:#7a6420}
  body.sheet-page .print-head span{display:block;font:800 18px var(--display);text-transform:uppercase;color:#000}
  body.sheet-page .print-head small{margin-inline-start:auto;font-size:10px;color:#333;text-align:end}
  body.sheet-page .sheet-hero{grid-template-columns:36% 1fr;gap:18px;margin:0}
  body.sheet-page .sheet-ph .ph,body.sheet-page .sheet-ph .ph.cab{background:#fff!important}
  body.sheet-page .sheet-bd h1{font-size:26px;color:#000}
  body.sheet-page .sheet-bd .mk{color:#7a6420}
  body.sheet-page .sheet-facts small{color:#555}
  body.sheet-page .sheet-facts b,body.sheet-page .sheet-desc,body.sheet-page .h{color:#000}
  body.sheet-page .specs th,body.sheet-page .specs td,body.sheet-page .specs td span{color:#000!important}
  body.sheet-page .sheet-drawing{break-inside:avoid}
  body.sheet-page .sheet-drawing img{max-height:118mm}
  body.sheet-page #photos,body.sheet-page .sheet-photos,body.sheet-page .site-foot,body.sheet-page .fine{display:none!important}
}
/* News & offers (the Constant Contact emails): cards with a still of each email's lead image; the email itself in a
   frame sized to its content; a swipe row of the same cards on the homepage */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px 18px;margin:18px 0 34px}
.news-card{display:flex;flex-direction:column;gap:8px;color:var(--cream)}
.news-card .ph{display:block;aspect-ratio:16/9;overflow:hidden;-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.news-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.news-card b{font:800 14px/1.3 var(--display);letter-spacing:.04em;text-transform:uppercase}
.news-card .pre{color:var(--mute);font-size:13.5px;line-height:1.45}
.news-card:hover b,.news-card:focus-visible b{color:var(--gold-hi)}
.news-card:hover .ph img{transform:scale(1.04)}
.news-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,290px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 10px;scrollbar-width:thin}
.news-strip .news-card{scroll-snap-align:start}
.email-frame{max-width:800px;margin:12px auto 0}
.email-frame iframe{display:block;width:100%;min-height:900px;border:0;background:#0d0d0d}
/* frameless (client notes 10/19: "I like pictures to fade at the edges vs being framed throughout the site whenever possible"):
   the boxes, shadows and rounded frames around pictures come off; the pictures already fade (--fade). Content cards
   (model, Finder) keep their quiet panel, logos keep their plates, the viewer shows the whole photo. */
.demo{background:transparent;border-radius:0;box-shadow:none}
.demo .poster{-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.split .side{background:none;box-shadow:none;border-radius:0;padding:0}
.offer{background:radial-gradient(ellipse at 80% 30%,rgba(36,30,12,.85),rgba(13,13,13,0) 72%);border-radius:0;box-shadow:none}
.slider{border-radius:0;box-shadow:none}
.unit-ph .row a{border-radius:0;-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
.real-grid a,.real-clip,.model .ph,.strip figure,.g-tile{border-radius:0}
/* v6:end */
/* v7:start (research round, 2026-10-19: Patir series, the roulette-wheel makers) */
.maker .plate.dark{background:linear-gradient(180deg,#1a1a1a,#0d0d0d);box-shadow:inset 0 0 0 1px rgba(212,175,55,.3)}
.patir .maker .plate img{height:52px}
.patir-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.patir-grid img{aspect-ratio:520/402;height:auto}
.wheel-makers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 28px;margin:26px 0 10px}
.wheel-makers .wm{display:flex;flex-direction:column;gap:12px}
.wheel-makers .plate{display:flex;align-items:center;justify-content:center;height:84px;padding:14px 22px;border-radius:14px;background:linear-gradient(180deg,#fff,#ffffff)}
.wheel-makers .plate img{max-height:40px;width:auto;max-width:72%}
.wheel-makers p{color:#ffffff;font-size:15px;line-height:1.6}
@media (max-width:767px){.patir-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.wheel-makers p{font-size:16px}}
/* phones get 1000 px copies of the two big photos at the top of the homepage and the Finder (optimize_images.py);
   with !important the browser fetches only this image, never the 1600 px original */
@media (max-width:767px){
  .floor .s[style*="inventory-hero.jpg"]{background-image:url(../img/flyer/inventory-hero-1000.jpg)!important}
  .ph[style*="lumina8-hero.jpg"]{background-image:url(../img/flyer/lumina8-hero-1000.jpg)!important}
}
/* long translations on phones (German, Russian at 360 px): grid columns may shrink, buttons wrap to two lines,
   long words and addresses break instead of pushing the page sideways */
@media (max-width:767px){
  .sheet-hero{grid-template-columns:minmax(0,1fr)}
  .site-foot .tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .site-foot .tiles a,.vcard,.act-row>*{min-width:0}
  .site-foot .tiles a,.vcard{overflow-wrap:anywhere}
  .btn,.btn-add,.btn-cmp,.btn-print,.btn-wa{white-space:normal;text-align:center;max-width:100%}
  h1,h2,h3,.lb,.chip{overflow-wrap:break-word}
}
/* the drawing's caption for the full-screen viewer: read by the viewer, never shown on the page (it repeated the credit) */
.drawing .lb-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media print{
  body{padding-bottom:0!important}                 /* the phone tab bar's clearance printed as an empty last page */
  body.sheet-page h2#drawing{break-after:avoid}    /* the heading stays with its drawing */
  body.sheet-page .sheet-drawing{break-before:avoid}
  body.sheet-page .sheet-drawing img{max-height:190mm}   /* after the table it has a page to itself: print it large enough to read */
}
/* v7:end */
/* v8:start (Anthony 10/20: the gold availability badges) */
/* centred text with even padding, and a 14px radius: a pill on one line that still fits the text when it wraps to two
   or three (the 999px radius squeezed wrapped lines into the round ends) */
.stock{text-align:center;line-height:1.45;text-wrap:balance}
.fd-card .stock{align-self:stretch;display:flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:14px}
.fd-card .mk,.fd-card h3{text-align:center}         /* maker and model name centred over the centred badge */
.model .stock,.sheet-bd .stock{padding:7px 16px;border-radius:14px}
.cmp th.cm .stock{padding:5px 8px;border-radius:8px}
/* cards side by side (Finder, homepage strip, category pages): the cards in one row share their row heights (photo,
   maker, title, badge, facts, buttons), so the badges line up however long a title is; each badge fills its row */
@supports (grid-template-rows:subgrid){
  /* :not(.hide): the Finder's filters hide cards with .fd-card.hide{display:none}, which this rule must not override */
  .fd-grid>.fd-card:not(.hide),.stock-strip>.fd-card:not(.hide){display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  .fd-grid>.fd-card>.bd,.stock-strip>.fd-card>.bd{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:8px}
}
@supports not (grid-template-rows:subgrid){.fd-card h3{min-height:2.4em}}
/* v8:end */
/* v9:start (John's answers 10/21) */
.lead-title p+p{margin-top:12px}   /* category pages and News & offers with more than one lead paragraph */
.cat-note{max-width:760px;margin:-4px auto 22px;text-align:center;color:#ffffff;font-size:16px;line-height:1.55}   /* seating: his note on seat height and quantity */
.ox-more{margin-top:12px;color:var(--gold-hi);font-weight:600}
/* carpet page: the three landscape installation photos in one even row (one per row on phones), no empty caption slot */
.pg.install{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg.install .pg-cell.wide{grid-column:auto}
.pg.install .pg-cell figcaption:empty{display:none}
@media (max-width:767px){.pg.install{grid-template-columns:1fr}}
/* v9:end */
/* v10:start (John's 10/21 product-page design: sheet hero, overview, key features, benefits, contact band) */
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 12px;color:var(--gold);font:800 12px var(--display);letter-spacing:.28em;text-transform:uppercase}
.eyebrow::after{content:"";flex:1;max-width:420px;height:1px;background:var(--gold-line)}
.sheet-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;margin:26px 0 6px}
.sheet-mk{display:inline-block;margin-bottom:14px}
.sheet-logo{display:inline-flex;align-items:center;height:52px;padding:8px 14px;border-radius:12px;background:linear-gradient(180deg,#fff,#ffffff)}
.sheet-logo.dark{background:#0d0d0d;border:1px solid var(--line)}
.sheet-logo img{height:100%;width:auto;max-width:180px;object-fit:contain}
.sheet-bd h1{font-size:clamp(34px,5.2vw,62px);margin:0 0 8px}
.sheet-bd .kicker{margin:0 0 14px;color:var(--cream);font:700 13px var(--display);letter-spacing:.3em;text-transform:uppercase}
.sheet-lead{color:#ffffff;font-size:17px;line-height:1.6;margin:12px 0 20px;max-width:620px}
.sheet-bd .act-row.small{margin-top:12px}
.sheet-bd .act-row.small .btn{padding:10px 16px;font-size:11px}
.sheet-ph .ph.row{aspect-ratio:auto}
.sheet-ph .ph.row img{height:auto;object-fit:contain}
.sheet-facts{margin:6px 0 10px}
.m-about{margin:30px 0 6px;padding-top:28px;border-top:1px solid rgba(212,175,55,.25);border-image:var(--gold-line) 1}
.m-about .ov{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:center;margin-bottom:34px}
.m-about .ov.solo{grid-template-columns:minmax(0,1fr);max-width:860px}
.m-about h2,.cta-band h2{font-family:var(--display);font-weight:400;color:var(--cream);text-transform:none;letter-spacing:0}
.m-about h2{font-size:clamp(26px,3.4vw,40px);line-height:1.15;margin:0 0 14px}
.m-about .ov p{color:#ffffff;font-size:16px;line-height:1.65;margin:0 0 12px}
.ov-ph{position:relative;display:block}
.ov-ph img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.ov-ph .gen-tag{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 16px);padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.7);color:#d9d9d9;font-size:10.5px;line-height:1.35}
.feat{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 22px;margin:6px 0 34px;padding:0}
.feat.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.feat.n6{grid-template-columns:repeat(3,minmax(0,1fr))}   /* 3 + 3, never 5 + 1 */
@media (max-width:1023px){.feat.n4,.feat.n5,.feat.n6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feat li{display:flex;flex-direction:column;gap:12px;padding-inline-start:16px;border-inline-start:1px solid rgba(212,175,55,.25);color:#ffffff;font-size:14.5px;line-height:1.45}
.feat svg{width:54px;height:54px;padding:12px;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold-hi)}
.ben{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 30px;margin:6px 0 8px;padding:0}
.ben li{display:flex;gap:12px;align-items:flex-start;color:#ffffff;font-size:15.5px;line-height:1.45}
.ben svg{flex:none;width:24px;height:24px;margin-top:-1px}
.ben svg circle{fill:var(--gold);stroke:var(--gold)}
.ben svg path{stroke:#0d0d0d}
.sheet-fgs{max-width:860px;margin:30px 0 0;color:#ffffff;font-size:15.5px}
.cta-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;margin:30px 0 8px;padding:24px 28px;border-block:1px solid rgba(212,175,55,.4);background:radial-gradient(120% 140% at 0% 50%,rgba(212,175,55,.12),transparent 60%)}
.cta-band>svg{width:62px;height:62px;color:var(--gold)}
.cta-band h2{font-size:clamp(22px,2.6vw,32px);line-height:1.2;margin:0}
.cta-band p{margin:4px 0 0;color:#ffffff;font-size:16px}
@media (max-width:767px){
  .sheet-hero{grid-template-columns:minmax(0,1fr);gap:18px}   /* restated: the two-column rule above comes later than the v7 phone rule */
  .sheet-hero .sheet-ph{order:-1}
  .m-about .ov{grid-template-columns:minmax(0,1fr);gap:18px}
  .feat,.feat.n4,.feat.n5,.feat.n6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ben{grid-template-columns:minmax(0,1fr)}
  .cta-band{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:22px 16px}
  .cta-band .act-row{justify-content:center}
}
/* shufflers: "Every unit includes" (John's flyer); seating and carpet: his service and benefit lists */
.boxes{margin:30px 0 8px;padding:22px 24px;border:1px solid rgba(212,175,55,.45);border-radius:var(--r)}
.boxes h3{margin:0 0 16px;text-align:center;color:var(--gold);font:800 clamp(16px,2vw,20px) var(--display);letter-spacing:.06em;text-transform:uppercase}
.boxes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 24px}
.boxes.chairs-now{margin-bottom:6px}
.boxes.chairs-now+.cat-note{margin:10px auto 0}
.boxes li{display:grid;gap:3px;padding-inline-start:18px;position:relative}
.boxes li::before{content:"";position:absolute;inset-inline-start:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.boxes b{font:800 13px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--cream)}
.boxes span{color:var(--mute);font-size:14px}
.two-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px;margin:26px 0 8px}
.two-lists b{display:block;margin:0 0 10px;color:var(--gold);font:800 12px var(--display);letter-spacing:.2em;text-transform:uppercase}
.two-lists ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.two-lists li{position:relative;padding-inline-start:20px;color:#ffffff;font-size:15.5px;line-height:1.45}
.two-lists li::before{content:"";position:absolute;inset-inline-start:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.carpet-more p{color:#ffffff;max-width:860px}
/* About page */
.about-mission p{color:#ffffff;font-size:16.5px;line-height:1.7;max-width:860px}
.about-mission p:last-child{color:var(--gold-hi);font-weight:600}
.services{list-style:none;margin:8px 0 10px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.services li{display:grid;justify-items:center;gap:8px;text-align:center;padding:18px 12px;border-inline-start:1px solid rgba(212,175,55,.22)}
.services li:first-child{border-inline-start:0}
.services svg{width:50px;height:50px;padding:11px;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold-hi)}
.services b{font:800 13px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.services span{color:var(--mute);font-size:14px;line-height:1.45}
.ben.values{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:10px}
@media (max-width:1023px){.services{grid-template-columns:repeat(3,minmax(0,1fr))}.services li:nth-child(4){border-inline-start:0}}
@media (max-width:767px){
  .boxes ul,.two-lists{grid-template-columns:minmax(0,1fr)}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}.services li{border-inline-start:0}
  .ben.values{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* homepage: John's short mission under the hero. Anthony 11/04 ("i want these to match in formatting"): the heading looks
   like the hero's "Complete Casino Solutions" (white, 800, capitals) one size down, "Our mission" takes the hero sub's gold
   (it was white: .mission p outranked .eyebrow), and the hero's gold rule sits under the heading */
.mission{text-align:center}
.mission .eyebrow{justify-content:center;color:var(--gold);font:800 clamp(14px,1.8vw,22px)/1.3 var(--display);letter-spacing:.06em;margin:0 auto 12px}
.mission .eyebrow::after{display:none}
.mission h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(24px,4.2vw,48px);line-height:1.05;color:var(--cream);margin:0;text-wrap:balance}
.mission hr{max-width:760px;margin:22px auto}
.mission p{color:#ffffff;font-size:17px;line-height:1.65;margin:0 auto 14px;max-width:780px}
.mission .more{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--gold-hi);font:800 12px var(--display);letter-spacing:.14em;text-transform:uppercase}
@media (max-width:767px){.sheet-bd .act-row.small>*{min-height:44px}}
/* makers wall in the three rows of John's approved homepage (makers.py); makers without a brand page are plain tiles */
.makers .lw-h{margin:28px 0 14px;text-align:center;color:var(--gold);font:800 12px var(--display);letter-spacing:.24em;text-transform:uppercase}
.makers .lw-h:first-child{margin-top:6px}
.logo-wall>div{flex:0 0 calc((100% - 56px)/5);aspect-ratio:2/1;border-radius:var(--r);box-shadow:0 14px 34px rgba(0,0,0,.4);display:grid;grid-template-rows:100%;place-items:center;padding:16px 20px;overflow:hidden;background:linear-gradient(180deg,#fff,#ffffff)}
.logo-wall>div.dark{background:linear-gradient(180deg,#1a1a1a,#0d0d0d)}
.logo-wall>div img{max-height:62%;max-width:82%;object-fit:contain}
.logo-wall>div.wordmark b{font-family:var(--cond);font-weight:700;font-size:clamp(18px,1.8vw,26px);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hi);text-align:center}
@media (max-width:760px){.logo-wall>div{flex-basis:calc((100% - 14px)/2)}}
/* footer: John's "Our commitment" and "Global reach" as a third site-map column, with the mailing-list sign-up */
.foot-map{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr)}
.foot-map .fm-txt{display:block;color:#d9d9d9;font-size:14.5px;line-height:1.55;margin:0 0 18px}
.foot-map .fm-txt a{color:var(--gold-hi);font-weight:600;white-space:nowrap}
.fm-reach{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px;color:#d9d9d9;font-size:14.5px}
.fm-reach li::before{content:"";display:inline-block;width:6px;height:6px;margin-inline-end:10px;border-radius:50%;background:var(--gold);vertical-align:2px}
.foot-map a.fm-sub{color:var(--cream);padding:12px 18px;font-size:11px;margin:0}
.fm-sub svg{width:16px;height:16px}
@media (max-width:900px){.foot-map{grid-template-columns:minmax(0,1fr)}}
@media print{
  body.sheet-page .sheet-hero{grid-template-columns:1fr 36%}
  body.sheet-page .sheet-bd .act-row,body.sheet-page .m-about,body.sheet-page .cta-band,body.sheet-page .sheet-fgs{display:none!important}
  body.sheet-page .sheet-lead,body.sheet-page .sheet-bd .kicker{color:#000}
}
/* v10:end */
@media print{
  .model-jump,.cat-jump,.tabbar,.menu,.site-head,.head-space,.skip,dialog.lb,.unit-ph,.g-filter,.fd-real{display:none!important}
  .site-foot{background:#fff!important;color:#000;margin:0;padding:14px 0 0}
  .site-foot::before{background:#b3922a;opacity:1}
  .vcard{background:#fff!important;box-shadow:none!important;padding:0}
  .vcard .name{color:#7a6420}.vcard .role,.vc-kick{color:#555}.vc-scan,.vc-scan b{color:#222}
  .site-foot .tiles a{color:#000}.site-foot .tiles .ic{background:#ffffff;color:#7a6420}.site-foot .tiles .ic.wa{background:#25d366;color:#fff}
  .model{box-shadow:none!important;background:#fff!important}
  .model .ph.cab,.model .ph.cab.dark{background:#fff!important}
}

/* ---------- v11 (John's call 10/21): brand sheet (matte black, white, metallic gold; one typeface), the 5 most popular
   machines, his 3-5 day freight in the hero, and the refurbishment made to stand out ---------- */
@media (min-width:1024px){.stock-strip{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}}
.lead-title .hero-ship{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px 10px;max-width:none;margin:20px auto 0;
  padding:10px 20px;border:1px solid rgba(212,175,55,.55);border-radius:999px;background:rgba(13,13,13,.62);font-size:15px;color:#fff;line-height:1.35}
.hero-ship svg{width:22px;height:22px;color:var(--gold);flex:none}
.hero-ship b{font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-size:12.5px}
.refurb{position:relative;text-align:center;padding:42px clamp(18px,4vw,44px) 36px;border-radius:var(--r-lg);background:var(--panel-bg);box-shadow:var(--panel-shadow)}
.refurb::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:var(--gold-line)}
.refurb .eyebrow{justify-content:center}
.refurb .eyebrow::before{content:"";flex:1;max-width:160px;height:1px;background:var(--gold-line)}
.refurb .eyebrow::after{max-width:160px}
.refurb h2{font-family:var(--display);font-weight:700;color:#fff;font-size:clamp(24px,3.2vw,38px);line-height:1.15;margin:0 0 14px}
.refurb .lead{max-width:780px;margin:0 auto;color:#fff;font-size:clamp(15px,1.4vw,17.5px)}
.promise{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:30px 0 26px;text-align:left}
.promise li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:4px;align-items:start;padding:18px;border-radius:var(--r);background:rgba(255,255,255,.025);box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.promise svg{grid-row:span 2;width:44px;height:44px;padding:10px;border:1px solid rgba(212,175,55,.5);border-radius:50%;color:var(--gold)}
.promise b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:#fff}
.promise span{color:var(--mute);font-size:14px;line-height:1.5}
.refurb .chips{justify-content:center;margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* email pages (News & offers): the email starts at once, with a clear way back and to the next one (John 10/21) */
.offer-nav{max-width:680px;margin:18px auto 8px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.offer-nav.bottom{margin:8px auto 46px}
.offer-nav .back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--gold);border-radius:999px;
  font:700 12.5px var(--display);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.offer-nav .back:hover,.offer-nav .back:focus-visible{background:var(--gold);color:var(--black)}
.offer-nav .pn{display:flex;gap:6px}
.offer-nav .pn a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;font:600 13px var(--display);color:var(--mute)}
.offer-nav .pn a:hover,.offer-nav .pn a:focus-visible{color:var(--gold-hi)}
.promise-strip{list-style:none;max-width:680px;margin:22px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.promise-strip li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid rgba(212,175,55,.45);border-radius:999px;font:600 13.5px var(--display);color:#fff}
.promise-strip svg{width:20px;height:20px;color:var(--gold);flex:none}
/* News & offers: the emails as a slideshow, each slide opening its page, and every email as a small picture below */
.news-show{margin:22px 0 34px}
@media (min-width:761px){.news-slider .offer{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}   /* phones stack it (.offer, 760 px) */
.news-slider .offer .ph{min-height:330px}
.news-slider .offer h3{font-size:clamp(22px,2.4vw,30px);line-height:1.15}
.news-slider .offer .kick{color:var(--mute);letter-spacing:.2em}
.news-slider .offer:hover h3,.news-slider .offer:focus-visible h3{color:var(--gold-hi)}
.news-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px 14px;margin-top:22px}
.news-thumbs a{display:flex;flex-direction:column;gap:7px;color:#fff}
.news-thumbs .ph{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px}
.news-thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.news-thumbs b{font:700 11.5px/1.3 var(--display);letter-spacing:.04em;text-transform:uppercase}
.news-thumbs a:hover b,.news-thumbs a:focus-visible b{color:var(--gold-hi)}
.news-thumbs a:hover img{transform:scale(1.05)}
@media (max-width:760px){.news-slider .offer .ph{min-height:220px}.news-slider .nav-arrow{top:110px}.news-thumbs{grid-auto-flow:column;grid-auto-columns:150px;grid-template-columns:none;overflow-x:auto;padding-bottom:8px}}

/* ---------- v12 (John's review notes, 2026-10-22) ---------- */
/* WhatsApp buttons wear WhatsApp's own green and logo, whatever shape the button takes ("WhatsApp tile should always
   follow their branded image and logo"). Any button that opens wa.me gets it, so every page builder is covered. */
:root{--wa-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6.5-.1 1.5-.6 1.7-1.2s.2-1.1.2-1.2-.2-.2-.5-.3z'/%3E%3C/svg%3E")}
a.btn[href^="https://wa.me"],.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--green)!important;color:#fff!important;border:1px solid var(--green)!important}
a.btn[href^="https://wa.me"]:hover,.btn-wa:hover{background:#1ebe5a!important;border-color:#1ebe5a!important;color:#fff!important}
a.btn[href^="https://wa.me"]:not(:has(svg))::before,.btn-wa:not(:has(svg))::before{content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--wa-glyph) center/contain no-repeat;mask:var(--wa-glyph) center/contain no-repeat}
a.btn[href^="https://wa.me"] svg,.btn-wa svg{width:18px;height:18px;flex:none}
/* the featured slideshows: the picture fades out on its inner side and the words overlap it ("JCM pic should fade on
   right – maybe all should fade that way and possibly let the copy overlap"); a cabinet that faces left (the J43) sits on
   the right of its slide, facing the words (.flip) */
@media (min-width:761px){
  .slider .offer{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .slider .offer .ph{-webkit-mask-image:linear-gradient(90deg,#000 48%,transparent 97%);mask-image:linear-gradient(90deg,#000 48%,transparent 97%)}
  .slider .offer .bd{position:relative;z-index:1;margin-inline-start:-12%}
  .slider .offer.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .slider .offer.flip .ph{order:2;-webkit-mask-image:linear-gradient(270deg,#000 48%,transparent 97%);mask-image:linear-gradient(270deg,#000 48%,transparent 97%)}
  .slider .offer.flip .bd{order:1;margin-inline-start:0;margin-inline-end:-12%;padding-inline-start:44px}
  [dir="rtl"] .slider .offer .ph{-webkit-mask-image:linear-gradient(270deg,#000 48%,transparent 97%);mask-image:linear-gradient(270deg,#000 48%,transparent 97%)}
  [dir="rtl"] .slider .offer.flip .ph{-webkit-mask-image:linear-gradient(90deg,#000 48%,transparent 97%);mask-image:linear-gradient(90deg,#000 48%,transparent 97%)}
}
/* brands: a thin gold edge on every logo tile, and the logos as large as the tile allows ("increase logo sizes") */
.logo-wall a,.logo-wall>div{box-shadow:inset 0 0 0 1px rgba(212,175,55,.65),0 14px 34px rgba(0,0,0,.4)}
.logo-wall a img,.logo-wall>div img{max-height:76%;max-width:90%}
.logo-wall a.wordmark b,.logo-wall>div.wordmark b{font-size:clamp(20px,2.1vw,30px)}
/* homepage roulette wheels: whole wheels in square frames, no faded edge cutting the rim */
.strip.wheels figure{aspect-ratio:1/1;-webkit-mask-image:none;mask-image:none;background:#0d0d0d}
.strip.wheels figure img{object-fit:contain}
/* carpet colorways: crisp edges, no soft shadow or glow ("No blurred edges needed for this") */
.designs button{box-shadow:none}
.designs button.on{box-shadow:0 0 0 2px var(--gold-hi)}
/* "Latest offers": the four newest emails in one row on a computer; phones keep the sideways swipe */
@media (min-width:761px){.news-strip.latest{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}}
/* pictures: no dragging them off the page, no long-press "save image" on phones (site.js also blocks the right-click
   menu on pictures). A deterrent only: anyone determined can still take a screenshot. */
img,video{-webkit-user-drag:none;-webkit-touch-callout:none}
/* footer: a business card shaped like the ones John's AI drew (3.5 x 2 in, matte black, gold edge) with the QR code, a
   contact directory beside it, and the mission statement under both */
.foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:34px}
.bcard-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.bcard{width:min(100%,470px);aspect-ratio:3.5/2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 24px 26px;
  border-radius:12px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 15% 0%,#202020,#0d0d0d 70%);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.6),0 26px 60px rgba(0,0,0,.55)}
.bcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi) 50%,var(--gold-lo))}
.bc-main{min-width:0}
.bc-logo{display:block;width:min(180px,100%);height:auto}
.bc-who{margin:12px 0 8px;line-height:1.25}
.bc-who b{display:block;font:700 15px var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.bc-who span{font:700 10.5px var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.bc-lines{display:grid;gap:5px;font-size:12.5px;color:#d9d9d9}
.bc-lines span{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.bc-lines svg{width:13px;height:13px;flex:none;color:var(--gold)}
.bc-qr{display:grid;justify-items:center;gap:7px}
.bc-qr img{width:118px;height:118px;border-radius:8px;background:#fff;padding:5px}
.bc-qr small{font:700 9.5px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.foot-dir .fd-h,.foot-mission .fd-h{display:block;font:800 11px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:4px 0 14px}
.foot-dir ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.foot-dir li{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;align-items:center}
.foot-dir .ic{grid-row:1 / span 2;width:42px;height:42px;border-radius:12px;background:rgba(212,175,55,.12);display:grid;place-items:center;color:var(--gold-hi)}
.foot-dir .ic svg{width:21px;height:21px}
.foot-dir li.wa .ic{background:var(--green);color:#fff}
.foot-dir .dl{font:700 10.5px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.foot-dir a,.foot-dir .dv{font:700 15px var(--display);color:#fff;overflow-wrap:anywhere}
.foot-dir a:hover{color:var(--gold-hi)}
.foot-mission{display:flex;align-items:center;justify-content:space-between;gap:18px 34px;flex-wrap:wrap;margin-top:34px;padding-top:26px;position:relative}
.foot-mission::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.45),transparent)}
.foot-mission p{color:#d9d9d9;font-size:14.5px;line-height:1.55;max-width:720px}
.foot-mission p a{color:var(--gold-hi);font-weight:600;white-space:nowrap}
.foot-mission .fm-sub{flex:none;color:var(--cream);padding:12px 18px;font-size:11px}
.foot-mission .fm-sub svg{width:16px;height:16px}
@media (max-width:900px){.foot-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .bcard{aspect-ratio:auto;grid-template-columns:minmax(0,1fr)}
  .bc-qr{display:none}                        /* a phone can't scan its own screen: the Save button does that job */
  .bcard-wrap .vc-save{width:100%}
  .foot-dir a,.foot-dir .dv{display:inline-flex;align-items:center;min-height:44px}
}
@media print{
  .bcard{background:#fff!important;box-shadow:inset 0 0 0 1px #b3922a!important}
  .bc-who b,.bc-lines,.foot-dir a,.foot-dir .dv{color:#000!important}
  .foot-dir .ic{background:#fff;color:#7a6420}.foot-dir li.wa .ic{background:#25d366;color:#fff}
  .foot-mission{display:none!important}
}
/* pre-existing, found in the v12 phone check: a long German compound in a sheet's Key features list
   ("LED-Gehäusebeleuchtung") pushed the PeakSlant32 sheet 6 px wider than a 360 px phone */
.feat li,.feat li span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
/* v12:end */
/* v13: John's review notes, part 2 (2026-10-23) */
/* 128.5 the Finder's "Current inventory available for immediate delivery" read as a button (a gold pill): now a heading
   between two fading gold lines */
.banner{padding:12px 0;border-radius:0;background:none;color:var(--gold-hi);letter-spacing:.16em;font-size:clamp(13px,1.5vw,17px);position:relative}
.banner::before,.banner::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--gold-line)}
.banner::before{top:0}.banner::after{bottom:0}
/* 13.2 footer: "Sign up for new arrivals, special offers and product updates" above its button */
.fm-signup{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:340px}
.fm-signup p{color:#fff;font-weight:600;font-size:14.5px;line-height:1.45}
/* About, What we do: John's six services (10/23) in two rows of three */
@media (min-width:768px){.services{grid-template-columns:repeat(3,minmax(0,1fr))}}
.services li:nth-child(3n+1){border-inline-start:0}
/* a portrait photo of a whole unit is shown whole in a tall box, not cut to a landscape slice */
.model .ph.real.tall{aspect-ratio:4/5;background:#000}
.model .ph.real.tall img{object-fit:contain}
/* homepage hero: every category is a chip at every width (John 10/23, 128.1) */
.hero .hero-quick{gap:8px;max-width:860px;margin-inline:auto}
.hero .hero-quick a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(212,175,55,.35);color:#e9e9e9;font-size:13px}
.hero .hero-quick a:hover{border-color:var(--gold);color:var(--gold-hi)}
/* long German words (Wiederaufbereitung, Branchenexperten) wrap inside the two-column phone grids and spec cards */
.services li,.services b,.services span,.ben.values li,.ben.values li span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.model>div{min-width:0}
.model .specs td{overflow-wrap:anywhere}
@media (max-width:480px){.model .act-row .btn{white-space:normal;text-align:center}}
/* v13:end */
/* v14: Anthony's changes 3 (2026-10-25) */
/* brands wall, smaller still (Anthony 10/25, second note: "fit more on the screen, less scrolling"): slot makers 14 a row,
   roulette and seating side by side on one row; makers.py sets each wall's --per and each group's flex-grow */
.makers{display:flex;flex-wrap:wrap;column-gap:28px}
.makers .lw-g{flex-basis:0;min-width:0}
.makers .lw-g:first-child{flex-basis:100%}
.logo-wall{gap:8px}
.logo-wall a,.logo-wall>div{flex:0 0 calc((100% - (var(--per,10) - 1) * 8px) / var(--per,10));padding:5px 6px;border-radius:10px}
.logo-wall a img,.logo-wall>div img{max-height:80%;max-width:92%}
.logo-wall a.wordmark b,.logo-wall>div.wordmark b{font-size:clamp(10px,.85vw,12.5px);letter-spacing:.03em;line-height:1.1}
.logo-wall a span{font-size:7.5px;letter-spacing:.08em;padding:2px}
.makers .lw-h{margin:16px 0 8px}
@media (max-width:1099px){.makers .lw-g{flex-basis:100%}.logo-wall a,.logo-wall>div{flex-basis:calc((100% - 48px)/7)}}
@media (max-width:760px){.logo-wall a,.logo-wall>div{flex-basis:calc((100% - 24px)/4)}}
@media (max-width:480px){.logo-wall a,.logo-wall>div{flex-basis:calc((100% - 24px)/4)}}   /* 4 a row on phones too: less scrolling */
/* Our Machines: the warehouse photo band sits under the five machines; its Gallery link under it */
#stock .real-band{margin-top:26px}
.band-more{display:flex;justify-content:flex-end;margin:10px 0 0;font-size:13px}
.band-more a{color:var(--gold-hi);border-bottom:1px solid transparent}
.band-more a:hover{border-color:var(--gold)}
/* the demo label is longer now ("Spin for a discount"): on a phone it wraps short of the demo's Sound button */
@media (max-width:560px){.demo-tag{max-width:calc(100% - 140px);letter-spacing:.12em;line-height:1.35}}
/* v14:end */
/* v15: final check of John's review (10/25) */
/* 1.1 "gold delineation lines should be consistent and narrow and fade at the ends": the category row's hairline, the
   business card's edge and the printed sheet's rule were the last full-width ones */
.cat-bar{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(212,175,55,.38) 15%,rgba(212,175,55,.38) 85%,transparent) 1}
.bcard::after{height:2px;background:var(--gold-line)}
@media print{.print-head{border-bottom:2px solid #b3922a;border-image:linear-gradient(90deg,transparent,#b3922a 15%,#b3922a 85%,transparent) 1}}
/* 1.1 only black, white and gold: the quote-list toast's link was WhatsApp teal */
.ql-toast a{color:#0d0d0d}
/* 9.5 / 10.7 / 11.6: John's "Don't see what you're looking for?" ends the Machine Finder too, not only an empty search */
.fd-empty{display:block;margin-top:28px}
/* v15:end */
/* v16: makers wall (10/26) */
/* Anthony: "put casino seating below roulette and table games and center them". Each group gets its own full-width row;
   makers.wall() sizes every row for the same tile count, and .logo-wall's justify-content:center centres the short rows */
.makers .lw-g{flex-basis:100%}
/* v16:end */
/* v17: bigger makers logos (10/26) */
/* Anthony: the logos "seem just a tad too small". makers.PER_ROW goes from 14 to 12 a row on a computer; the name-only
   tiles (MEI, Epic, FutureLogic, Gold Club) grow with them */
.logo-wall a.wordmark b,.logo-wall>div.wordmark b{font-size:clamp(10px,1vw,14.5px)}
/* v17:end */
/* v18: John's answers in review v5 (10/29) */
/* the language menu with a flag beside each name (1.2): a button and a list in place of the native select, which can't
   show pictures. .lang had overflow:hidden for the old pill buttons; the list has to hang out of it. */
.lang{position:relative;overflow:visible;border:0;border-radius:0}
.lang-btn{display:inline-flex;align-items:center;gap:8px;background:#000;color:var(--cream);border:1px solid var(--gold-lo);border-radius:999px;font:800 11px var(--display);letter-spacing:.08em;padding:6px 10px 6px 8px;cursor:pointer;white-space:nowrap}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--gold)}
.lang-btn svg{width:13px;height:13px;color:var(--gold);flex:none}
.lang-cur{display:inline-flex;align-items:center;gap:8px}
.lang img{width:20px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.2);flex:none}
/* .lang .lang-list outranks ".nav ul" (the header menu's own row of links) */
.lang .lang-list{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:70;display:block;margin:0;padding:6px;list-style:none;min-width:190px;overflow:visible;background:#0d0d0d;border:1px solid var(--gold-lo);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.6);font:inherit;letter-spacing:normal;text-transform:none}
.lang .lang-list[hidden]{display:none}
.lang-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--cream);font:600 13px var(--body);cursor:pointer;white-space:nowrap}
.lang-list li:hover,.lang-list li:focus{background:rgba(212,175,55,.14);outline:none}
.lang-list li:focus-visible{box-shadow:inset 0 0 0 1px var(--gold)}
.lang-list li[aria-selected="true"]{color:var(--gold-hi);font-weight:800}
.menu .lang-btn{font-size:14px;padding:11px 16px 11px 14px;min-height:46px}
.menu .lang{flex-direction:column;align-items:flex-start}   /* in the phone menu the list opens under the button, in the flow */
.menu .lang .lang-list{position:static;margin-top:8px}
@media (max-width:1023px){.lang-btn{min-height:44px}.lang-list li{min-height:44px}}
/* "Professionally reconditioned" (1.6): John's list of the work, on the slot sheets, the homepage and About */
.recon{margin:6px 0 22px;padding:0}   /* a <section>: no default section padding */
.recon .ben{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px}
.recon .ben li{font-size:14.5px}
.home-recon{margin:0 auto 26px;max-width:1040px;text-align:left}
@media (max-width:1023px){.recon .ben{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.recon .ben{grid-template-columns:minmax(0,1fr)}}
@media print{body.sheet-page .recon{display:none!important}}
.about-warranty p+p{margin-top:12px}
/* auto roulette wheels (5.7): a note and a button before a couple of photos */
.auto-note{margin:6px 0 14px}
/* Table Game Accessories (1.2): the ninth homepage tile. Six columns with three wide tiles fill two rows on a computer;
   on tablets and phones it takes a full row like the carpet tile, and "dense" lets the air tile move up into the gap */
.cat-tiles{grid-template-columns:repeat(6,1fr);grid-auto-flow:dense}
@media (max-width:1023px){.cat-tiles{grid-template-columns:repeat(4,1fr)}.cat-tiles a.cat-table-accessories{grid-column:1/-1}.cat-tiles a.cat-table-accessories .ph{aspect-ratio:16/6;height:auto}}
@media (max-width:560px){.cat-tiles{grid-template-columns:repeat(2,1fr)}.cat-tiles a.cat-table-accessories .ph{aspect-ratio:16/9}}
.acc-ph{margin:18px auto 0;max-width:760px}
.acc-ph img{display:block;width:100%;height:auto;border-radius:var(--r);-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
/* v18:end */
/* v19: photo pass (10/29) */
/* John 10/29 (review v5, 120.1, MD3): "Top of the unit is cut off". A tall photo of a whole unit was cut to the sheet's 4:5
   frame (object-fit: cover), which trimmed the lid or the topper (MD3, V22/22, TwinStar). On the brand pages tall photos were
   already shown whole (.model .ph.real.tall); now the sheets do the same. */
.sheet-ph .ph.real.tall img{object-fit:contain}
/* the Blue Ox picture is John's OX3000 render (10/29), captioned under it; a maker's brochure link on two sheets */
figure.ox-ph{margin:0}
.ox-ph figcaption{margin-top:8px;color:var(--mute);font-size:12.5px;line-height:1.4;text-align:center}
.brochure{margin:14px 0 0}
@media print{.brochure{display:none!important}}
/* v19:end */
/* v20: straighten, manual links, card designs (10/29) */
.wheel-makers .brochure{margin:0}
/* card-back artwork shows whole: no 4:5 crop, no edge fade */
.pg.designs .pg-cell .ph{-webkit-mask-image:none;mask-image:none}
.pg.designs .pg-cell .ph img{object-fit:contain}
/* a last "What we do" tile alone on its row spans the row (7 tiles since 10/29: Protecting your investment) */
.services li:last-child:nth-child(3n+1){grid-column:1/-1;border-inline-start:0;max-width:820px;justify-self:center}
@media (max-width:767px){.services li:last-child:nth-child(3n+1){grid-column:auto;max-width:none}.services li:last-child:nth-child(odd){grid-column:1/-1}}
/* "What we do" on narrow phones: one tile per row, so a long title (REMANUFACTURING, REACONDICIONAMIENTO, WIEDERAUFBEREITUNG)
   never breaks mid-word (Anthony 10/29: "fix the Remanufacturing & refurbishment tile") */
@media (max-width:559px){.services{grid-template-columns:minmax(0,1fr);gap:6px}.services li{padding:14px 8px}}
/* v20:end */
/* v21: John's "Our Reconditioning Process" page (reconditioning.html, 10/30) and the subheadings in his warranty rewrite */
.lead-title .recon-tag{color:var(--gold);font-family:var(--display);font-weight:700;letter-spacing:.02em;margin-bottom:12px}
.recon-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:860px}
.recon-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;background:var(--panel-bg);box-shadow:var(--panel-shadow);border-radius:var(--r);padding:18px 20px}
.recon-steps .rs-n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--gold);color:var(--gold);font:800 18px var(--display)}
.recon-steps h3{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.6vw,18px);color:#ffffff;margin:8px 0 6px;overflow-wrap:anywhere}
.recon-steps p{margin:0;color:#ffffff;font-size:16px}
.recon-close{text-align:center;color:var(--gold);font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(14px,1.6vw,17px);margin:30px auto 10px;max-width:760px}
.about-warranty h3{font-family:var(--display);font-weight:800;color:var(--gold);font-size:17px;margin:22px 0 8px}
@media (max-width:559px){.recon-steps li{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:16px 14px}.recon-steps .rs-n{width:36px;height:36px;font-size:16px}.recon-steps h3{margin-top:5px}}
/* v21:end */
/* v22: John 10/30 (76.1/74.1): the line on every machine sheet that its pictures are examples */
.sheet-note{max-width:860px;margin:26px 0 0;color:#d9d9d9;font-size:14.5px;line-height:1.55}
/* Anthony 10/31: the business card's lines and the contact directory stay on one line ("keeping it on one line is cleaner"),
   as in the emails' copy of the card; the smallest phones get slightly smaller type instead */
.bc-lines span,.foot-dir a,.foot-dir .dv{white-space:nowrap;overflow-wrap:normal}
@media (max-width:360px){.foot-dir a,.foot-dir .dv{font-size:12.5px}.bc-lines{font-size:12px}}
/* Anthony 10/31 ("fix the german igt g23 page"): a spec table's two columns can't shrink past their longest word, and German
   puts long compounds in both ("Stromversorgung" beside a "...Sicherungsautomat" value), so 19 German sheets ran up to 42 px
   past a 320 px screen. On phones each row is its label over its value, both full width: no word is ever broken */
@media (max-width:480px){
  .sheet-specs,.sheet-specs tbody,.sheet-specs tr,.sheet-specs th,.sheet-specs td{display:block;width:auto}
  .sheet-specs th{border-bottom:0;padding:10px 0 3px}
  .sheet-specs td{padding:0 0 10px}
}
/* Anthony 10/31: John's "Don't see what you're looking for?" band is now only at the end of the homepage, under the
   project box ("drop it on the end of the scroll down below this"): no extra gap above it there */
#ask .fd-alerts{margin-top:0}
/* v22:end */
/* v23: Anthony 10/31: on the Reconditioning page the gold tag line ("Attention to detail. Commitment to quality. Confidence in
   every purchase.") sits on one line right under the title, then the faded gold line; phones too narrow for one line get
   two even lines */
.lead-title .recon-tag{max-width:none;margin:14px auto 0;white-space:nowrap;font-size:clamp(13px,1.6vw,19px)}
@media (max-width:700px){.lead-title .recon-tag{white-space:normal;text-wrap:balance;font-size:16px}}
/* the Gallery's link bubble after the Packaging photos (to "Protecting your investment"), centred */
.chips.g-link{justify-content:center;margin:-14px 0 34px}
/* Anthony 10/31: the Gallery has no filter chips; each category is a heading over its own grid */
.g-sec{margin-top:34px}
/* a portrait photo in a moving banner (Seating: the four-legged chair): whole, at the banner's height, on the dark ground */
.floor .s.whole{background-size:contain}
/* v23:end */
/* v24: Anthony 10/31, from John's ChatGPT review. The homepage gets the About page's six services in one slim row under the
   mission, each a link to them; the Card Shufflers "90-day warranty" box links to the warranty terms; the Air Filtration
   page's OX3000 picture sits under its own heading, away from the OX1100's specifications */
/* Titles in sentence case: the longest single word in the 12 languages (Spanish "reacondicionamiento") is 154 px at this
   size, so a box is never narrower than that: 6 across from 1,140 px, 3 across from 600 px, and one list on phones */
.svc-row{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.svc-row a{display:grid;justify-items:center;align-content:start;gap:9px;height:100%;padding:14px 6px;text-align:center;text-decoration:none;
  border:1px solid rgba(212,175,55,.28);border-radius:var(--r);transition:border-color .2s,background-color .2s}
.svc-row a:hover,.svc-row a:focus-visible{border-color:var(--gold);background-color:rgba(212,175,55,.06)}
.svc-row svg{width:40px;height:40px;padding:9px;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold-hi)}
.svc-row b{font:700 13.5px/1.3 var(--display);letter-spacing:.01em;color:var(--cream);overflow-wrap:break-word}
@media (max-width:1139px){.svc-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:599px){
  .svc-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .svc-row a{grid-template-columns:34px minmax(0,1fr);justify-items:start;align-items:center;gap:12px;padding:8px 12px;text-align:start}
  .svc-row svg{width:34px;height:34px;padding:7px}
}
.boxes li a{display:grid;gap:3px;color:inherit;text-decoration:none}
.boxes li a b{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.boxes li a:hover b,.boxes li a:focus-visible b{color:var(--gold-hi)}
figure.ox-ph.ox-big{max-width:560px;margin:0 auto 40px}
/* v24:end */
/* v25: long words ran out of their boxes (measured 10/31, 320-1920 px, 12 languages). The business card's QR caption
   now wraps under the code: unwrapped, a long one (Russian, French) squeezed the left column until the email line ran
   under it, on every page. Narrow labels get soft hyphens in site.js. No break-word fallback: a tile label may run into
   its 18 px inset (English "ELECTRONIC" does at 561 px) and still sit inside the tile; break-word split those mid-word. */
.bc-qr small{max-width:128px;text-align:center;line-height:1.35}
/* 901-960 px: the footer's two columns make the card narrower than 470 px, so a smaller QR leaves the email line room */
@media (min-width:901px) and (max-width:960px){.bc-qr img{width:96px;height:96px}.bc-qr small{max-width:106px}}
@media (max-width:340px){.foot-dir a,.foot-dir .dv{font-size:11.5px}}   /* sales@ fits one line at 320 px */
/* 561-767 px: four tiles to a row leave an 80-110 px label, and the break-word rule below 768 px split even English
   mid-word ("ELECTRONI-C", "COMMERCI-AL"). A slightly smaller label fits every word, the longest with its soft hyphen. */
@media (min-width:561px) and (max-width:767px){.cat-tiles a:not(.wide) .lb{font-size:11.5px;left:10px;right:10px;bottom:12px}}
/* v25:end */
/* v26: the spec sheets' "Contact Focus Gaming Solutions today" band. Its three-column grid gave the buttons (they never
   wrap) all the room they asked for, so in German at 768 px the heading got a 16 px column and Russian got none up to
   800 px. Now a wrapping row: the text keeps at least 320 px and the buttons drop under it, right-aligned, when they
   don't fit beside it, in any language (measured 10/31: Russian buttons 594 px, English 359 px). */
.cta-band{display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;row-gap:14px}
.cta-band>svg{flex:none}
.cta-band>div:not(.act-row){flex:1 1 320px;min-width:0}
.cta-band>.act-row{flex:none;margin:0;margin-inline-start:auto}
@media (max-width:767px){
  .cta-band{flex-direction:column}
  .cta-band>div:not(.act-row){flex:none}
  .cta-band>.act-row{margin-inline-start:0}
}
/* v26:end */
/* v27 (v7.15, Anthony 11/01): Blue Ox range cards + comparison table, accessories buttons, offer side arrows, site search */
.ox-range{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.ox-card .ph{aspect-ratio:16/10;background:var(--spot)}
.ox-card .ph img{padding:12px 14px}
.ox-card .ox-best{margin:0;color:var(--gold-hi);font-size:13.5px;line-height:1.4}
.ox-card .act-row{flex-wrap:wrap;gap:8px}
.ox-table{overflow-x:auto;margin:6px 0 0;-webkit-overflow-scrolling:touch}
.ox-table table{min-width:860px;margin:0}
.ox-table th[scope=col]{width:auto;white-space:nowrap}
.ox-table th[scope=row]{width:auto;white-space:nowrap;font-size:12px}
.ox-table th[scope=row] a{color:var(--gold-hi)}
.ox-table td{font-size:13px}
/* v7.32 (John 11/05): "Compare the models" is a button under the eight models that opens the table; one drawing per cabinet */
.ox-compare{margin:28px 0 10px}
.ox-compare>summary{list-style:none;display:flex;justify-content:center;cursor:pointer}
.ox-compare>summary::-webkit-details-marker{display:none}
.ox-compare>summary:focus-visible{outline:none}
.ox-compare>summary:focus-visible .btn{outline:2px solid var(--gold-hi);outline-offset:3px}
.ox-compare>summary .btn::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.ox-compare[open]>summary{margin-bottom:16px}
.ox-compare[open]>summary .btn::after{transform:translateY(2px) rotate(-135deg)}
.ox-drawings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:8px 0 30px}
.ox-drawings .drawing{margin:0}
.ox-drawings .drawing img{width:100%}
.ox-dwg-m{display:block;color:var(--cream);font-weight:700;margin-bottom:2px}
@media (max-width:700px){.ox-drawings{grid-template-columns:minmax(0,1fr)}}
.acc-act{justify-content:center;margin:18px 0 6px}
.offer-side{position:fixed;top:50%;z-index:30;width:56px;height:56px;margin-top:-28px;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.62);border:1px solid rgba(212,175,55,.55);color:var(--gold-hi);font:400 38px/1 var(--display);text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:opacity .3s,background .2s,color .2s}
.offer-side span[aria-hidden]{margin-top:-4px}
.offer-side.prev{inset-inline-start:max(10px,calc(50% - 400px - 84px))}
.offer-side.next{inset-inline-end:max(10px,calc(50% - 400px - 84px))}
[dir="rtl"] .offer-side span[aria-hidden]{transform:scaleX(-1)}
.offer-side:hover,.offer-side:focus-visible{background:var(--gold);color:var(--black)}
.offer-side.away{opacity:0;pointer-events:none}
@media (max-width:980px){.offer-side{width:44px;height:44px;margin-top:-22px;font-size:30px;background:rgba(0,0,0,.5)}
  .offer-side.prev{inset-inline-start:6px}.offer-side.next{inset-inline-end:6px}}
@media print{.offer-side{display:none!important}}
.head-search{position:relative}
.search-pop{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:130;max-height:min(70vh,520px);display:flex;flex-direction:column;overflow:hidden;padding:6px;border:1px solid rgba(212,175,55,.55);
  border-radius:18px;background:#0d0d0d;box-shadow:0 18px 44px rgba(0,0,0,.7)}
.search-pop[hidden]{display:none}
/* every match, in a box seven rows tall that scrolls (Anthony 11/02: "do not make the drop down larger just add a scroll
   wheel"); the "Search all machines" line stays under it. On a short window the box gives way first. */
.search-pop .sr-list{flex:0 1 auto;min-height:0;max-height:336px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.search-pop .sr-list::-webkit-scrollbar{width:8px}
.search-pop .sr-list::-webkit-scrollbar-thumb{background:var(--gold);border-radius:8px}
.search-pop .sr-list::-webkit-scrollbar-track{background:transparent}
.search-pop a.all{flex:none}
.search-pop a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border-radius:12px;color:var(--cream);text-decoration:none}
.search-pop a:hover,.search-pop a.on{background:rgba(212,175,55,.14)}
.search-pop .th{flex:none;width:52px;height:36px;border-radius:8px;overflow:hidden;background:#1a1a1a;display:grid;place-items:center}
.search-pop .th img{width:100%;height:100%;object-fit:cover}
.search-pop .th.b{background:#fff}
.search-pop .th.b.dark{background:linear-gradient(180deg,#2a2a2a,#161616);box-shadow:inset 0 0 0 1px rgba(212,175,55,.3)}
.search-pop .th.b img,.search-pop .th.m img{object-fit:contain;padding:3px 5px}
.search-pop .th.none{background:radial-gradient(circle,rgba(212,175,55,.35) 0 3px,transparent 4px),#1a1a1a}
.search-pop .tx{display:flex;flex-direction:column;min-width:0}
.search-pop .tx b{font:600 14px/1.3 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-pop .tx small{font:700 10px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.search-pop a.all{justify-content:center;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;color:var(--gold-hi);font:600 13px var(--body);text-align:center}
/* the 3D demos fit the screen under the header (Anthony 11/01: the roulette "doesn't seem to fit ... within the screen
   you're viewing"): never taller than the window minus the header, so the whole wheel and the slot's base stay in view */
.demo{max-height:max(340px,calc(100svh - 200px))}
.boxes.acc-rel{margin:36px 0 50px}
.wheel-makers .wm-ph{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wheel-makers .wm-ph a{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:10px;background:#111}
.wheel-makers .wm-ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.wheel-makers .wm-ph a:hover img,.wheel-makers .wm-ph a:focus-visible img{transform:scale(1.05)}
/* The questions buyers ask (FAQ sections, Anthony 11/02): two to a row on a computer and one on a phone */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:4px 0 26px}
.faq .qa{background:linear-gradient(180deg,#151515,#0d0d0d);box-shadow:var(--panel-shadow);border-radius:var(--r);padding:18px 20px;min-width:0}
.faq h3{font:800 16px/1.3 var(--display);color:var(--gold);margin:0 0 10px}
.faq p{color:#ffffff;line-height:1.55;margin:0}
.faq .ben{grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.faq .qa-more{display:inline-block;margin-top:6px;padding:6px 0;color:var(--gold-hi);font-weight:700;font-size:14px}
.faq .qa-more:hover{text-decoration:underline}
@media (max-width:767px){.faq{grid-template-columns:minmax(0,1fr)}}
/* its two buttons stay one line on a phone in every language (German, French and Portuguese wrapped at the usual spacing) */
@media (max-width:480px){.sm-cta .btn{letter-spacing:.05em;padding:15px 16px}}
@media (max-width:360px){.sm-cta .btn{font-size:11.5px;letter-spacing:.03em;padding:15px 12px}}
/* Anthony 11/02 (audit): the homepage's carpet title is an h2 now (one h1 per page) and keeps the h1's look */
.lead-title .h1-look{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
/* v7.34, John's notes 11/06 ------------------------------------------------------------------------------------------- */
/* "make sure [the] roulette wheel is and stays centered on the page" / "for black jack game make sure this is center": on a
   short screen the demo frame shrinks to fit (max-height above) and sat at the left of its column; it stays centred now */
.demo{margin-inline:auto}
/* homepage roulette wheels, "have the images edges fade like the rest": each wheel photo keeps its own shape inside the
   square (P343 is portrait) and its own edges fade, like every other strip photo */
.strip.wheels figure{background:transparent}
.strip.wheels figure a{display:flex;align-items:center;justify-content:center}
.strip.wheels figure img{width:auto;height:auto;max-width:100%;max-height:100%;-webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
/* homepage Electronic Roulettes: three photos since the Lumina 8 joined them (John 11/06); on a phone the first two share a
   row and the Lumina takes the full width under them */
@media (max-width:640px){.strip.eroul figure:last-child{grid-column:1/-1}}
/* FAQ "Warranty?": John's "90-Day Warranty" line heads the answer (11/06) */
.faq .qa-h{margin:0 0 4px}
.faq .qa-h b{color:var(--gold-hi);font-weight:700}
/* Slot Machines: the Finder's sort menu over the machine cards, at the right (John 11/06) */
.sm-sort{justify-content:flex-end}
/* footer business card: the QR a little larger (John 11/06: "make sure the QR code works"); with the shorter card it encodes
   (build_emails.QR_VCARD) each square is about 2.5 screen pixels, which phone cameras read */
.bc-qr img{width:140px;height:140px}
/* v7.37: a faint Focus logo on every printed or PDF-saved page, spec sheets included (Anthony 11/09: "the watermark on every
   page of a manual, technical sheet"). Fixed, so the browser repeats it on each page; print-color-adjust prints it even with
   "background graphics" off. img/wm-print.png is written by site-build/watermark.py. */
@media print{
  body::after{content:"";position:fixed;right:9mm;bottom:7mm;width:46mm;height:14mm;pointer-events:none;z-index:2147483647;
    background:url(../img/wm-print.png) right bottom/contain no-repeat;opacity:.2;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Email-link menu (site.js, Anthony 11/11): Open in Gmail / Open in my email app / Copy email address. Computers only;
   styled like the language list. */
.mail-menu{position:fixed;z-index:300;min-width:240px;max-width:calc(100vw - 16px);padding:6px;background:#0d0d0d;border:1px solid var(--gold-lo);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.mail-menu[hidden]{display:none}
.mail-menu .mail-to{margin:0;padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;color:var(--gold-hi);font:700 12.5px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:none;color:var(--cream);font:600 13.5px var(--body);text-align:start;cursor:pointer;white-space:nowrap}
.mail-menu button svg{width:18px;height:18px;flex:none;color:var(--gold)}
.mail-menu button:hover,.mail-menu button:focus{background:rgba(212,175,55,.14);outline:none}
.mail-menu button:focus-visible{box-shadow:inset 0 0 0 1px var(--gold)}
@media print{.mail-menu{display:none!important}}
/* Wider Air Filtration tile (Anthony 11/11): on a computer the second row was Seating 1 + Carpet 2 + Air 1 + Table
   Accessories 2 of 6 columns. Now 24 columns: the carpet gives up a sliver (8 -> 7) and the air tile gets it (4 -> 5), so
   the cigar-lounge picture shows as a square (tiles.py TILE_RATIO). Every other tile keeps its size. Tablets and phones
   are unchanged; there the square picture is cut back to the old 4:5 / 1:1 frame at the old spot (25%). */
.cat-tiles a.cat-air-filtration .ph img{object-position:25% 50%}
@media (min-width:1024px){
  .cat-tiles{grid-template-columns:repeat(24,1fr)}
  .cat-tiles a{grid-column:span 4}
  .cat-tiles a.wide{grid-column:span 8}
  .cat-tiles a.cat-carpet{grid-column:span 7}
  .cat-tiles a.cat-air-filtration{grid-column:span 5}
  .cat-tiles a.cat-air-filtration .ph{aspect-ratio:auto;height:100%}
}
/* Business card email is a link (Anthony 11/11): same look as the card's other lines; on computers it opens the email menu
   (Open in Gmail / my email app / Copy) like every other email link (site.js, PR #167). */
.bc-lines a{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;color:inherit;text-decoration:none;transition:color .2s}
.bc-lines a:hover,.bc-lines a:focus-visible{color:var(--gold-hi)}