/* DSA site styles. One file for every page. Look: the home concept of 11 Sept 2026.
   Tokens first; components after; responsive last. No framework. */
:root{
  --ink:#060D1A; --navy:#0A1B33; --paper:#FFFFFF; --mist:#F4F6F9; --hair:#E3E8EF;
  --text:#0B1626; --slate:#5A6A7F; --soft:#5F6E82;
  --mag:#FF2D8E; --vio:#A044FF; --blu:#2E7BFF; --cya:#12C8E8;
  --g:linear-gradient(100deg,#FF2D8E 0%,#A044FF 35%,#2E7BFF 65%,#12C8E8 100%);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.7 17.2-5-5 1.8-1.8 3.2 3.2 6.6-6.6 1.8 1.8z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--cya);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:28px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;z-index:100;border-radius:0 0 10px 0}
.skip:focus{left:0}
.label{display:inline-block;font:600 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.gtext{background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.preview-bar{background:#FFF7D6;color:#5A4600;font-size:13px;text-align:center;padding:8px 16px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:var(--ink);font:700 16px/1.2 var(--sans);padding:17px 26px;border-radius:999px;border:0;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;box-shadow:0 10px 40px rgba(0,0,0,.22);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .2s}.btn:hover .ar{transform:translateX(3px)}
.btn.solid{background:var(--ink);color:#fff;box-shadow:0 14px 40px rgba(6,13,26,.2)}
.btn.grad{background:var(--g);color:#fff;box-shadow:0 14px 40px rgba(160,68,255,.3)}
.btn.ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.24);box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn.line{background:#fff;color:var(--ink);border:1px solid var(--hair);box-shadow:none}
.btn.line:hover{border-color:var(--ink)}
.btn.sm{padding:10px 16px;font-size:14px}
.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none}
.tlink{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;text-decoration:none}
.tlink span{transition:transform .2s}.tlink:hover span{transform:translateX(4px)}
.cta{display:flex;align-items:center;gap:22px;margin-top:38px;flex-wrap:wrap}

/* reveal on scroll: only when JS runs, so crawlers and no JS see everything */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------------- header and hero (dark) ---------------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
/* The hero lets a search suggestion box out of its box, and nothing else. shop.js adds .sg-open to
   the hero the input sits in while the box is showing and removes it when it closes, so the canvas
   field and the gradient overlay are still contained every other moment. Found 16 September 2026:
   the box was 630px tall and the hero cut it at 589px, taking the Machines and Products groups with
   it. The box also needs to sit above the section below, and the z-index on .sg is NOT enough on its
   own: .hero carries isolation:isolate, which it needs because .field, .fallback and ::after all sit
   at negative z-index inside it, so .sg's z-index:60 is scoped to the hero's own stacking context and
   loses to every section painted after it. Stuart, 16 September 2026, with a screenshot: "when I use
   the search box now, it comes down into the lower part and sort of combines the words behind it."
   Measured: elementFromPoint inside the lower half of the panel returned the filter sidebar, not the
   panel. The fix is to lift the WHOLE hero context while the box is open rather than to remove the
   isolation, which would drop the hero's own background out the back. */
.hero.sg-open{overflow:visible;z-index:70}
.hero .field{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero .fallback{position:absolute;inset:0;z-index:-3;background:radial-gradient(40% 55% at 78% 40%,rgba(160,68,255,.55),transparent 70%),radial-gradient(35% 45% at 88% 70%,rgba(18,200,232,.45),transparent 70%),radial-gradient(30% 40% at 65% 75%,rgba(255,45,142,.4),transparent 70%),var(--ink)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,13,26,.93) 0%,rgba(6,13,26,.6) 45%,rgba(6,13,26,.08) 100%),linear-gradient(0deg,rgba(6,13,26,.7),transparent 30%)}
.hero.inner::after{background:linear-gradient(90deg,rgba(6,13,26,.95) 0%,rgba(6,13,26,.72) 50%,rgba(6,13,26,.3) 100%),linear-gradient(0deg,rgba(6,13,26,.6),transparent 40%)}
.site-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:24px;white-space:nowrap;position:relative;z-index:5}
/* The logo is not allowed to shrink. Adding Contact to the menu on 15 September 2026 pushed it
   from its natural 174px to 45px and the wordmark became unreadable. Stuart: making the logo
   smaller is not the answer, so the nav gives way instead. */
.site-head .logo{flex:0 0 auto}
.site-head .logo img{height:48px;width:auto;max-width:none}
.site-head .links{display:flex;gap:22px;font-weight:500;font-size:15px;flex:0 1 auto;min-width:0}
.site-head .links a{text-decoration:none;color:rgba(255,255,255,.74);transition:color .2s;position:relative}
.site-head .links a:hover,.site-head .links a[aria-current="page"]{color:#fff}
.site-head .links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--g)}
.site-head .right{display:flex;align-items:center;gap:16px;font-size:15px;flex:0 0 auto}
.site-head .phone{font-weight:700;color:#fff;text-decoration:none;letter-spacing:.01em}
/* The portal is the one thing an existing customer comes here to do, so it is the only coloured
   thing in the bar. Stuart, 15 September 2026: "it needs a bit of colour there." */
.site-head .portal{text-decoration:none;color:#fff;font-weight:700;padding:10px 18px;border-radius:999px;
  border:0;background:var(--g);box-shadow:0 8px 22px -10px rgba(255,45,142,.65);transition:transform .2s,box-shadow .2s}
.site-head .portal:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(255,45,142,.8)}
.menu-btn{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;font:600 14px var(--sans);padding:10px 14px;border-radius:999px;cursor:pointer}
.eyeline{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.eyeline i{width:34px;height:2px;background:var(--g);flex:none}
.eyeline span{font:600 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.crumbs{font:600 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:26px}
.crumbs a{text-decoration:none;color:rgba(255,255,255,.72)}.crumbs a:hover{color:#fff}
.crumbs span{margin-inline:8px;opacity:.5}

/* home hero */
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:70px 120px}
.hero-home h1{font-size:clamp(46px,5.8vw,86px);color:#fff}
.hero .sub{font-size:20px;color:rgba(255,255,255,.72);max-width:30em;margin-top:26px}
/* inner page hero */
.phero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:center;padding-block:46px 100px}
.phero.solo{grid-template-columns:minmax(0,1fr)}
.phero.top{align-items:start}
.phero h1{font-size:clamp(38px,4.6vw,66px);color:#fff}
.phero h1.long{font-size:clamp(34px,3.8vw,54px)}
.phero .sub{font-size:19px;margin-top:22px}
.hero-aside{position:relative}
.hero-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;color:rgba(255,255,255,.8)}
.hero-list li{display:flex;gap:12px;align-items:flex-start}
.hero-list li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--g);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.hero-note{margin-top:22px;color:rgba(255,255,255,.6);font-size:15px}
.hero-note a{color:#fff}

/* glass cards (hero asides) */
.stage{position:relative;height:520px;perspective:1400px}
.glass{border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);color:#fff}
.stage .glass{position:absolute}
.g1{right:0;top:30px;width:380px;padding:26px;transform:rotateY(-10deg) rotateX(4deg);animation:float 9s ease-in-out infinite}
.g2{left:0;bottom:30px;width:260px;padding:20px;transform:rotateY(-10deg) rotateX(4deg) translateZ(60px);animation:float 9s ease-in-out -4.5s infinite}
.glass.solo{padding:28px;animation:float 10s ease-in-out infinite;max-width:440px;margin-left:auto}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.gh{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:14px;color:rgba(255,255,255,.7)}
.ok{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7CF2A4;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ok::before{content:"";width:7px;height:7px;border-radius:50%;background:#34D876;box-shadow:0 0 12px #34D876}
.mach{margin:18px 0 20px;display:flex;align-items:center;gap:16px}
.stk,.sticker{font:600 24px var(--mono);letter-spacing:.08em;padding:8px 12px;border:1.5px dashed currentColor;border-radius:10px;display:inline-block;line-height:1.2}
.mach b{display:block;font-size:17px}.mach small{color:rgba(255,255,255,.6);font-size:14px}
.tl{display:grid;gap:14px;position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:linear-gradient(#34D876,#A044FF 50%,rgba(255,255,255,.2))}
.tl div{position:relative;font-size:15px}.tl div::before{content:"";position:absolute;left:-22px;top:6px;width:11px;height:11px;border-radius:50%;background:#34D876;border:2px solid var(--ink)}
.tl div:nth-child(2)::before{background:#A044FF}.tl div:nth-child(n+3)::before{background:rgba(255,255,255,.3)}
.tl small{display:block;color:rgba(255,255,255,.55);font-size:13px}
.toner{display:flex;gap:8px;margin-top:12px}.toner i{flex:1;height:38px;border-radius:8px;position:relative;overflow:hidden;background:rgba(255,255,255,.08)}
.toner i::after{content:"";position:absolute;left:0;right:0;bottom:0;background:var(--c);height:var(--h);border-radius:0 0 8px 8px}
.g2 b{font-size:15px}.g2 small{display:block;color:rgba(255,255,255,.6);font-size:13px;margin-top:2px}
.gbig{font-size:clamp(44px,5vw,70px);font-weight:800;letter-spacing:-.045em;line-height:1;margin-top:18px}
.gsub{color:rgba(255,255,255,.62);font-size:15px;margin-top:10px}
.gmeta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.gmeta b{display:block;font-size:15px}.gmeta span{font-size:13.5px;color:rgba(255,255,255,.6)}
.cart{display:grid;grid-template-columns:auto 1fr auto;gap:12px 14px;align-items:center;margin-top:18px}
.cart .sw{width:28px;height:36px;border-radius:7px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.cart b{font-size:15px}.cart small{display:block;color:rgba(255,255,255,.55);font-size:12.5px}
.cart code{font:600 12.5px var(--mono);color:rgba(255,255,255,.8)}

/* brand ticker */
/* overflow:hidden here and min-width:0 on the track, 14 September 2026. Correcting a note written a
   few minutes earlier in this file: the ticker was NOT the cause of the home page's 13px of sideways
   scroll at 390px. Measured properly afterwards, the offender was the shop band search row (see
   .shopband .sb-head below), and the ticker was already being clipped by .hero's own overflow:hidden.
   These two declarations stay because a flex item with overflow:hidden and the default min-width:auto
   is a real hazard and this one holds a 4,438px marquee, but they fixed nothing on the day. */
.ticker{display:flex;align-items:center;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);background:rgba(6,13,26,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ticker .tlabel{flex:none;padding:0 34px 0 max(28px,calc((100vw - 1240px)/2 + 28px));font:600 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.08);align-self:stretch;display:flex;align-items:center}
.ticker .track{flex:1;min-width:0;overflow:hidden;white-space:nowrap;padding-block:30px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .row{display:inline-flex;align-items:center;gap:64px;padding-left:64px;animation:tick 55s linear infinite}
.ticker:hover .row{animation-play-state:paused}
.bm{font-weight:800;font-size:22px;letter-spacing:-.02em;color:rgba(255,255,255,.55);transition:color .3s;text-decoration:none}
.bm:hover{color:#fff}
.bl{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.6;transition:opacity .3s}.bl:hover{opacity:1}
@keyframes tick{to{transform:translateX(-50%)}}

/* THE MOVING RANGE BAND on the sales pages (sales.html), 16 September 2026. Stuart asked for a
   section showing small machines through to big ones, and then asked for it to move: "I just think
   it needs a bit of wow factor on this page. It's a little bit bland."
   Same marquee mechanism as .ticker above: the row is rendered twice and translated by half its own
   width, so the seam never shows. Three things it does that .ticker does not, and each is here for
   a reason rather than for polish:
     .mimg is a FIXED HEIGHT box with object-fit:contain, because the band draws on two photograph
       libraries with different shapes, 1024x683 cut outs and 640 square supplier product shots. A
       fixed box is what puts every machine on one baseline at one scale;
     the cards pause on hover AND on keyboard focus, because a row that only stops for a mouse is a
       row a keyboard user can never read;
     the whole thing stops under prefers-reduced-motion. A continuously moving band of twelve
       machines is exactly the kind of motion that setting exists for. */
.mrange{overflow:hidden}
.mrange .head{margin-bottom:44px}
.mtrack{overflow:hidden;white-space:nowrap;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mrow{display:inline-flex;align-items:flex-end;gap:26px;padding-left:26px;animation:mroll 64s linear infinite}
.mtrack:hover .mrow,.mrow:focus-within{animation-play-state:paused}
@keyframes mroll{to{transform:translateX(-50%)}}
.mcard{flex:none;width:190px;text-decoration:none;color:#fff;text-align:center;white-space:normal;
  padding:18px 14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  transition:border-color .3s,background .3s,transform .3s}
.mcard:hover,.mcard:focus-visible{border-color:rgba(255,255,255,.26);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));transform:translateY(-4px)}
/* A WHITE TILE, not a bare image on the ink. Both photograph libraries are shot on white and neither
   is cut out to transparency, so a bare <img> here rendered as a white rectangle floating on a dark
   card, which reads as a mistake. The white tile is the site's own treatment for a machine
   photograph (.machine-shot on the model pages), so this matches rather than invents. */
.mimg{display:flex;align-items:flex-end;justify-content:center;height:132px;margin-bottom:14px;
  background:#fff;border-radius:14px;padding:10px;box-shadow:inset 0 0 0 1px rgba(6,13,26,.06)}
.mimg img{max-width:100%;max-height:112px;width:auto;height:auto;object-fit:contain}
.mcard b{display:block;font-size:14px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.mcard .mmeta{display:block;margin-top:5px;font:500 11px/1.45 var(--mono);letter-spacing:.04em;
  color:rgba(255,255,255,.55)}
@media (prefers-reduced-motion:reduce){
  /* both marquees, not just the new one: .ticker has been animating unconditionally since it was
     written and that was an oversight, not a decision. */
  .mrow,.ticker .row{animation:none}
  .mtrack,.ticker .track{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:600px){.mcard{width:152px}.mimg{height:104px}.mimg img{max-height:104px}}

/* ---------------- sections ---------------- */
.sec{padding-block:120px}
.sec.tight{padding-block:80px}
.sec.flush{padding-top:0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.head h2{font-size:clamp(38px,4.4vw,64px);margin-top:16px}
.head p{color:var(--slate);font-size:19px;max-width:30em;justify-self:end}
.lead{font-size:19px;color:var(--slate);margin-top:22px}
.dark .lead,.cover .lead{color:rgba(255,255,255,.66)}

/* the four doors, colour at rest */
.help{position:relative;overflow:hidden}
.help::before{content:"";position:absolute;right:-240px;top:-260px;width:760px;height:620px;background:radial-gradient(closest-side,rgba(160,68,255,.10),transparent),radial-gradient(closest-side at 30% 70%,rgba(18,200,232,.10),transparent);pointer-events:none}
.rows{display:grid;gap:14px;position:relative}
.rowlink{--t:255,45,142;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.05fr) 54px;gap:34px;align-items:center;padding:26px 28px 26px 26px;border-radius:22px;text-decoration:none;position:relative;overflow:hidden;background:linear-gradient(100deg,rgba(var(--t),.075),rgba(var(--t),.02) 55%,rgba(255,255,255,0));border:1px solid rgba(var(--t),.16);transition:transform .35s var(--ease),box-shadow .35s,background .35s,border-color .35s}
.rowlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--g);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.rowlink:hover{transform:translateX(6px);background:linear-gradient(100deg,rgba(var(--t),.14),rgba(var(--t),.04) 60%,rgba(255,255,255,0));border-color:rgba(var(--t),.35);box-shadow:0 24px 60px -24px rgba(var(--t),.45)}
.rowlink:hover::after{transform:scaleX(1)}
.ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c),var(--c2));box-shadow:0 12px 30px -8px rgba(var(--t),.6);transition:transform .35s;flex:none}
.ico svg,.ic svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rowlink:hover .ico{transform:rotate(-6deg) scale(1.05)}
.rowlink .who{display:block;font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.rowlink h3{font-size:clamp(26px,2.6vw,36px)}
.rowlink p{color:var(--slate)}
.rowlink .arr{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--c);background:#fff;border:1px solid rgba(var(--t),.3);transition:all .3s;justify-self:end}
.rowlink:hover .arr{background:var(--c);color:#fff;border-color:var(--c)}
/* compact doors for sidebars */
.minidoors{display:grid;gap:10px}
.minidoor{--t:255,45,142;display:grid;grid-template-columns:44px 1fr 18px;gap:14px;align-items:center;padding:14px 16px 14px 14px;border-radius:16px;text-decoration:none;background:linear-gradient(100deg,rgba(var(--t),.08),rgba(var(--t),.02));border:1px solid rgba(var(--t),.18);transition:transform .3s var(--ease),border-color .3s}
.minidoor:hover{transform:translateX(4px);border-color:rgba(var(--t),.45)}
.minidoor .ico{width:44px;height:44px;border-radius:13px}
.minidoor .ico svg{width:21px;height:21px}
.minidoor small{display:block;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.minidoor b{font-size:16.5px;letter-spacing:-.015em}
.minidoor .arr{color:var(--c);font-weight:700}

/* photo feature */
.feature{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center}
.photo{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/5;max-width:100%;background:radial-gradient(60% 50% at 30% 20%,rgba(46,123,255,.35),transparent 60%),radial-gradient(50% 50% at 80% 80%,rgba(255,45,142,.25),transparent 60%),linear-gradient(160deg,#16294A,#0A1B33)}
.photo.wide{aspect-ratio:16/10}
.photo .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:rgba(255,255,255,.55);font-size:14px;padding:30px}
.photo .ph svg{width:46px;height:46px;margin:0 auto 12px;opacity:.6}
.photo .cap{position:absolute;left:22px;bottom:22px;right:22px;display:flex;justify-content:space-between;align-items:end;color:#fff}
.photo .cap b{font-size:18px}.photo .cap span{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pchip{position:absolute;top:22px;left:22px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;color:#fff;font-size:13.5px;font-weight:600;background:rgba(6,13,26,.44);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pchip i{width:8px;height:8px;border-radius:50%;background:#34D876;box-shadow:0 0 10px #34D876}

/* WHITE TEXT ON A PHOTOGRAPH NEEDS ITS OWN GROUND. Stuart, 15 September 2026: "the picture that is
   on site every major brand, it's got some words at the top, they can't be read now on this image
   because it's white at the top." Measured on that photograph: the top 18 per cent of the frame
   averages luminance 199 of 255, because the window light is behind the technician, and the chip was
   white text on a 10 per cent WHITE glass. The caption at the bottom was legible only because that
   strip happens to average 105, which is luck, not design, and the next photograph swap would have
   broken it in the same way.

   So the fix is here and not on the home page: a scrim that belongs to .photo, drawn only where an
   overlay actually sits on the image. :has() is what keeps it off the photoband figures, whose
   captions sit BELOW the frame and which would otherwise be darkened for nothing. Five live
   templates carry an overlay and all five get it: home, toner, managed, sales, displays. */
.photo:has(.cap, .pchip)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,10,22,.58) 0%,rgba(4,10,22,.16) 22%,rgba(4,10,22,0) 42%,
    rgba(4,10,22,0) 56%,rgba(4,10,22,.34) 80%,rgba(4,10,22,.68) 100%)}
.feature h2{font-size:clamp(38px,4vw,58px)}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px;border-top:1px solid var(--hair);padding-top:30px}
.nums b{display:block;font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:1.05;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:300% 100%}
.nums div:nth-child(2) b{background-position:50% 0}.nums div:nth-child(3) b{background-position:100% 0}
.nums span{color:var(--slate);font-size:15px}

/* dark bands */
.dark{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;width:900px;height:900px;left:-300px;bottom:-500px;background:radial-gradient(closest-side,rgba(160,68,255,.35),transparent);pointer-events:none}
.dark .label,.cover .label,.trade .label{color:rgba(255,255,255,.55)}
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;position:relative}
.dark h2{font-size:clamp(40px,4.6vw,68px)}
.steps3{display:grid;margin-top:44px;border-top:1px solid rgba(255,255,255,.1)}
.steps3 div{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:20px;padding-block:22px;border-bottom:1px solid rgba(255,255,255,.1)}
/* Was a hard 120px against 22px type, so any word wider than 120px spilled out of its column
   ("Supported", "Photocopiers"). minmax keeps the rhythm and lets the track grow. Store 7.5K. */
.steps3 b{font-size:22px;letter-spacing:-.02em}.steps3 span{color:rgba(255,255,255,.62)}
.handset{width:320px;margin-inline:auto;border-radius:48px;padding:12px;background:#1A2436;box-shadow:0 50px 120px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.screen{border-radius:38px;background:#fff;color:var(--text);overflow:hidden}
.scr-top{background:var(--navy);color:#fff;padding:40px 22px 26px}
.scr-top small{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.scr-top b{display:block;font-size:22px;letter-spacing:-.02em;margin-top:6px}
.scr-body{padding:20px 22px 26px;display:grid;gap:12px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--mist);border-radius:12px;padding:4px;font-size:13px;font-weight:600;text-align:center}
.seg span{padding:8px 0;border-radius:9px;color:var(--slate)}.seg span.on{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.fld{border:1.5px solid var(--hair);border-radius:12px;padding:10px 12px;font-size:14px;color:var(--slate)}.fld b{display:block;color:var(--text);font-size:15px}
.chk{display:flex;gap:8px}.chk i{flex:1;height:34px;border-radius:10px;border:1.5px solid var(--hair);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.chk i.on{border-color:#5B5CF0;background:#EFEFFE;color:#3B3CC8}
.send{background:var(--g);color:#fff;text-align:center;font-weight:700;padding:13px;border-radius:12px}

/* bento cards */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.bento.b3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bento.b2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bx{--t:46,123,255;--c:#2E7BFF;--c2:#12A6F0;position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 28px 26px;border-radius:26px;background:#fff;border:1px solid var(--hair);text-decoration:none;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.bx::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 100% 0%,rgba(var(--t),.09),transparent 60%);pointer-events:none}
a.bx:hover{transform:translateY(-6px);border-color:rgba(var(--t),.4);box-shadow:0 36px 70px -30px rgba(var(--t),.5)}
.bx .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c),var(--c2));box-shadow:0 12px 28px -8px rgba(var(--t),.6);margin-bottom:8px}
.bx .ic svg{width:25px;height:25px}
.bx h3{font-size:22px;letter-spacing:-.025em;line-height:1.14}
.bx p{color:var(--slate);font-size:15.5px;line-height:1.6}
.bx .go{margin-top:auto;padding-top:10px;font-weight:700;font-size:15px;color:var(--c);display:inline-flex;gap:8px}
.bx .go span{transition:transform .25s}.bx:hover .go span{transform:translateX(4px)}
.bx .tag{align-self:flex-start;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c);background:rgba(var(--t),.1);padding:6px 10px;border-radius:999px}
.bx.big{grid-column:span 2;grid-row:span 2;background:var(--ink);color:#fff;border:0;padding:48px 46px 44px;gap:18px}
.bx.big::before{background:radial-gradient(60% 55% at 100% 100%,rgba(160,68,255,.55),transparent 70%),radial-gradient(50% 45% at 75% 110%,rgba(255,45,142,.45),transparent 70%),radial-gradient(45% 40% at 105% 55%,rgba(18,200,232,.35),transparent 70%)}
.bx.big::after{content:"";position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.02);pointer-events:none}
.bx.big > *{position:relative;z-index:1}
.bx.big h3{font-size:clamp(34px,3.1vw,46px)}
.bx.big p{color:rgba(255,255,255,.7);font-size:18px;max-width:28em}
.bx.big .label{color:rgba(255,255,255,.55)}
.faults{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;max-width:34em}
.faults span{padding:9px 15px;border-radius:999px;font-size:14px;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.brandline{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:15px;line-height:1.8;color:rgba(255,255,255,.55);max-width:34em}
.brandline b{display:block;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:6px}
.bx.big .foot{margin-top:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:16px}
.bx.big .foot .btn{box-shadow:none}
.bx.big .foot small{color:rgba(255,255,255,.6);font-size:15px}.bx.big .foot small b{color:#fff}

/* coverage (dark, live map) */
.cover{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cover::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 60% at 72% 50%,rgba(46,123,255,.20),transparent 70%),radial-gradient(30% 40% at 85% 40%,rgba(18,200,232,.14),transparent 70%),radial-gradient(35% 50% at 20% 100%,rgba(160,68,255,.18),transparent 70%);pointer-events:none}
.cover::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(60% 70% at 70% 50%,#000,transparent);-webkit-mask-image:radial-gradient(60% 70% at 70% 50%,#000,transparent);pointer-events:none}
.cov{display:grid;grid-template-columns:.92fr 1.4fr;gap:40px;align-items:center;position:relative;z-index:1}
/* .rev puts the map on the left. Added 15 September 2026 for the service page, which carries the
   same coverage band as the home page on Stuart's instruction. He left the treatment open ("if you
   want to make it look slightly different, fair enough"), and flipping it is the cheapest honest
   difference: same components, so nothing can drift out of step with the coverage page, but the
   two pages do not read as the same section pasted twice. */
.cov.rev{grid-template-columns:1.4fr .92fr}
.cov.rev .mapwrap{margin-right:0;margin-left:-40px}
.cover h2{font-size:clamp(38px,3.7vw,56px);margin-top:16px}
.cities{list-style:none;margin:40px 0 0;padding:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;border-top:1px solid rgba(255,255,255,.1)}
.cities a{display:flex;align-items:center;gap:12px;white-space:nowrap;padding:8px 10px;margin-inline:-10px;border-radius:10px;text-decoration:none;font-weight:600;color:rgba(255,255,255,.78);transition:background .25s,color .25s}
.cities a i{width:8px;height:8px;border-radius:50%;background:var(--c);transition:box-shadow .3s;flex:none}
.cities a small{margin-left:auto;font:600 10.5px var(--mono);letter-spacing:.1em;color:rgba(255,255,255,.35)}
.cities a:hover,.cities a.on{background:rgba(255,255,255,.07);color:#fff}
.cities a.on i,.cities a:hover i{box-shadow:0 0 0 4px rgba(255,255,255,.08),0 0 14px var(--c)}
.mapwrap{position:relative;margin-right:-40px}
.hero-aside .mapwrap{margin-right:-20px}
.ausmap{width:100%;height:auto;display:block;overflow:visible}
.ausmap .lab{font:600 9.6px var(--sans);fill:rgba(255,255,255,.72);paint-order:stroke;stroke:#060D1A;stroke-width:3px;stroke-linejoin:round;transition:fill .3s}
.ausmap .lead-l{stroke:rgba(255,255,255,.22);stroke-width:.6;fill:none;transition:stroke .3s}
.ausmap .core{fill:#fff;transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease)}
.ausmap .halo{transform-box:fill-box;transform-origin:center;transition:opacity .35s,transform .35s;opacity:.55}
.ausmap .ring{fill:none;stroke-width:.9;transform-box:fill-box;transform-origin:center;opacity:0;animation:ring 3.6s cubic-bezier(.15,.6,.3,1) infinite;animation-delay:var(--d)}
.ausmap .ring.r2{animation-delay:calc(var(--d) + 1.8s)}
@keyframes ring{0%{transform:scale(.5);opacity:.95}100%{transform:scale(4.6);opacity:0}}
.ausmap .burst{fill:none;stroke:#fff;stroke-width:.8;opacity:0;transform-box:fill-box;transform-origin:center}
.ausmap .c.on .burst{animation:burst 1.3s cubic-bezier(.1,.6,.3,1)}
@keyframes burst{0%{transform:scale(.4);opacity:1}100%{transform:scale(6);opacity:0}}
.ausmap .c.on .core{transform:scale(1.7)}
.ausmap .c.on .halo{opacity:1;transform:scale(1.5)}
.ausmap .c.on .lab{fill:#fff}
.ausmap .c.on .lead-l{stroke:rgba(255,255,255,.7)}
.ausmap .c{cursor:pointer}
.ausmap .c.dim .ring{display:none}.ausmap .c.dim .core{opacity:.5}.ausmap .c.dim .halo{opacity:.2}
.ausmap .c.focus .core{transform:scale(1.9)}.ausmap .c.focus .halo{opacity:1;transform:scale(1.9)}
.ausmap .c.focus .lab{font-size:13px;fill:#fff;font-weight:700}

/* why DSA */
.why{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}
.why h2{font-size:clamp(38px,4.2vw,60px);margin-top:16px}
.why .lead + .lead{margin-top:16px}
.whyl{position:sticky;top:40px}
.wi{display:grid;grid-template-columns:76px 1fr;gap:20px;padding-block:34px;border-top:1px solid var(--hair)}
.wi:last-child{border-bottom:1px solid var(--hair)}
.wi .n{font:600 13px var(--mono);letter-spacing:.1em;color:var(--c);padding-top:8px;display:flex;align-items:center;gap:10px;align-self:start}
.wi .n::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--c),transparent)}
.wi b{display:block;font-size:24px;letter-spacing:-.025em;line-height:1.2}
.wi p{color:var(--slate);margin-top:10px}

/* trade band */
.trade{background:var(--navy);color:#fff;border-radius:36px;padding:100px 80px;position:relative;overflow:hidden}
.trade::before{content:"";position:absolute;right:-200px;top:-200px;width:700px;height:700px;background:radial-gradient(closest-side,rgba(255,45,142,.35),rgba(46,123,255,.2),transparent);pointer-events:none}
.trade h2{font-size:clamp(40px,5vw,76px);max-width:14em;position:relative}
.trade .row2{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:40px;flex-wrap:wrap;position:relative}
.trade p{color:rgba(255,255,255,.7);font-size:19px;max-width:32em}
.trade .row2 p + p{margin-top:20px}          /* two paragraphs ran together without this */
.trade .row2 > div:first-child{flex:1 1 32em;min-width:0}
.trade.slim{padding:64px 60px}.trade.slim h2{font-size:clamp(32px,3.6vw,50px)}

/* The picture in the buying, rental and lease band, and the one under the phone number in Good to
   know. Both added 15 September 2026 on Stuart's instruction, by picture number, and the brief for the
   rental one was his: "some sort of container that looks poppy, professional and maybe has the
   slightest bit of movement so it has that expensive feel."

   What makes it read expensive rather than busy is that the movement is almost not there: a 9 second
   float of four pixels, and nothing else. It shipped with a sheen crossing the frame on the same 9
   second cycle and Stuart had it removed within the hour; see the note under .rp-frame img. The frame
   is a one pixel line of the site gradient, which is the house device already used on the photo bands,
   over a dark inner edge so the picture does not bleed into the navy. The float honours
   prefers-reduced-motion, where it simply stops. */
.rent-side{display:grid;gap:22px;justify-items:start;flex:0 1 400px;max-width:400px}
.rent-pic{margin:0;animation:rentfloat 9s ease-in-out infinite}
.rp-frame{position:relative;padding:1px;border-radius:22px;background:var(--g);overflow:hidden;
  box-shadow:0 26px 50px -22px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06),
             0 0 60px -20px rgba(120,170,255,.35)}
.rp-frame img{display:block;width:100%;height:auto;border-radius:21px}
/* THE SHEEN IS GONE. Stuart, 15 September 2026: "that shimmer that goes across, don't really love
   it." It was a translucent gradient crossing the frame once every nine seconds. The four pixel float
   stays, because that is the part that gives the box the movement he asked for without drawing the eye
   to itself; a sweep across a photograph is a web banner device and he spotted it as one. */
@keyframes rentfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.rent-pic{animation:none}}
@media (max-width:900px){.rent-side{max-width:none;width:100%}}

/* .tallpic narrows the picture half of a .portal-grid so a PORTRAIT photograph in it lands at roughly
   the height of the text beside it. The service page's on site section carries the van portrait, which
   is 2:3, and in the default 1fr 1fr the picture column is about 575px, so the picture would stand
   862px tall against roughly 650px of text. Shrinking the picture inside a wide column is the wrong
   fix, because a tall picture with air either side of it reads as a mistake; narrowing the column is
   the right one. Added 15 September 2026. */
.portal-grid.tallpic{grid-template-columns:1.3fr .7fr;gap:70px}
@media (max-width:900px){.portal-grid.tallpic{grid-template-columns:minmax(0,1fr);gap:34px}
  .portal-grid.tallpic .photo{max-width:380px}}

/* The one portrait photograph on the site, in the service page FAQ. Capped so it cannot dominate the
   column it sits in, and the caption is the same treatment as the home page Good to know picture. */
.faq-portrait{margin:30px 0 0;max-width:330px}
.faq-portrait figcaption{margin-top:12px;font-size:14px;color:#5A6474;line-height:1.5}
@media (max-width:900px){.faq-portrait{max-width:280px}}

/* The shop's service upsell band. Two columns at desktop, stacked on a phone, and the picture keeps
   its 3:2 so it matches every other photograph in a .photo frame on the site. Added 15 September 2026
   for Stuart's "from the store upselling to service" instruction. */
.svcband{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.svcband .photo{margin:0}
@media (max-width:900px){.svcband{grid-template-columns:minmax(0,1fr);gap:32px}}

/* The alternatives to filling the form in, sitting inside the form card under the button. Moved here
   from the hero column on Stuart's instruction, 15 September 2026. Quiet on purpose: it is the line
   somebody reads after deciding not to type, so it must be findable and must not compete with the
   button above it. */
.form-alt{margin:16px 0 0;font-size:14px;line-height:1.55;color:#5A6474;text-align:center}
.form-alt a{color:var(--ink);font-weight:600}

/* The picture in the blank space under the service page headline. Stuart asked for it there by
   picture number on 15 September 2026, and the space was measured before it was built: the hero's
   left column ran to 515px against a 896px form card beside it, so there were 381 blank pixels in a
   632px column. That is why the source was remade in landscape and why this is capped at 355px tall:
   a portrait picture there would have pushed the form card's own height and reflowed the hero.
   It uses .rp-frame, the same gradient frame as the home page rental picture, because both sit on
   navy. It does NOT float. Movement on a card in the middle of a page reads as craft; movement beside
   a form somebody is typing into reads as a distraction. */
.hero-pic{margin:34px 0 0;max-width:100%}
.hero-pic .rp-frame{max-height:424px}
.hero-pic img{display:block;width:100%;height:auto;object-fit:cover;max-height:422px;border-radius:21px}
@media (max-width:900px){.hero-pic{margin-top:26px}.hero-pic .rp-frame,.hero-pic img{max-height:none}}

/* The Good to know picture sits on white, so it is quieter: a hairline, a soft shadow and a gradient
   rule across the top, and it lifts on hover rather than moving on its own. */
.faq-pic{margin:34px 0 0;max-width:100%}
.fp-frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--hair);
  box-shadow:0 18px 40px -26px rgba(6,13,26,.4);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.fp-frame::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--g);z-index:2}
.fp-frame img{display:block;width:100%;height:auto}
.faq-pic:hover .fp-frame{transform:translateY(-3px);box-shadow:0 26px 52px -26px rgba(6,13,26,.5)}
.faq-pic figcaption{margin-top:14px;color:var(--slate);font-size:14.5px;line-height:1.55;max-width:34ch}
@media (prefers-reduced-motion:reduce){.fp-frame{transition:none}.faq-pic:hover .fp-frame{transform:none}}

/* FAQ */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:start}
.faq h2{font-size:clamp(38px,4.2vw,60px);margin-top:16px}
.faq .lead{margin-bottom:34px}
.qs{border-top:1px solid var(--hair)}
.qs details{border-bottom:1px solid var(--hair)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:24px;font-size:19px;font-weight:700;letter-spacing:-.015em}
.qs summary::-webkit-details-marker{display:none}
.qs summary .pm{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--hair);position:relative;transition:all .3s}
.qs summary .pm::before,.qs summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:currentColor;translate:-50% -50%;transition:transform .3s}
.qs summary .pm::after{transform:rotate(90deg)}
.qs details[open] .pm{background:var(--ink);color:#fff;border-color:var(--ink)}
.qs details[open] .pm::after{transform:rotate(0)}
.qs summary:hover .pm{border-color:var(--vio)}
.qs .a{color:var(--slate);padding-bottom:26px;max-width:42em}

/* ---------------- inner page content ---------------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:80px;align-items:start}
.sidebar{position:sticky;top:30px;display:grid;gap:20px}
.side-card{border:1px solid var(--hair);border-radius:24px;padding:26px;background:#fff;display:grid;gap:14px}
.side-card h3{font-size:20px;letter-spacing:-.02em}
.side-card p{color:var(--slate);font-size:15.5px}
.side-card.dark-card{background:var(--ink);color:#fff;border:0;position:relative;overflow:hidden}
.side-card.dark-card::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;background:radial-gradient(closest-side,rgba(160,68,255,.45),transparent);pointer-events:none}
.side-card.dark-card > *{position:relative}
.side-card.dark-card p{color:rgba(255,255,255,.66)}
.side-card .label{font-size:11px}
.side-phone{font-size:30px;font-weight:800;letter-spacing:-.03em;text-decoration:none;color:#fff}
.prose{font-size:17.5px}
.prose > * + *{margin-top:18px}
.prose h2{font-size:clamp(28px,2.8vw,40px);margin-top:64px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;letter-spacing:-.02em;margin-top:34px}
.prose p,.prose li{color:#3C4A5C}
.prose p a,.prose li a{color:var(--text);text-decoration:none;background:linear-gradient(90deg,var(--mag),var(--blu)) 0 100%/100% 1.5px no-repeat;padding-bottom:1px;font-weight:600}
.prose p a:hover,.prose li a:hover{color:var(--blu)}
.lede-big{font-size:21px !important;line-height:1.6;color:var(--text) !important;letter-spacing:-.005em}
.tick{list-style:none;padding:0;display:grid;gap:14px}
.tick li{position:relative;padding-left:34px}
.tick li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--g);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.tick li b{color:var(--text)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.prose .chips{margin-top:20px}
.chips li a,.chips li span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--hair);background:#fff;font-weight:600;font-size:15px;text-decoration:none;color:var(--text);transition:transform .25s,box-shadow .25s}
.chips li a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g)}
.chips li a:hover{background:linear-gradient(#fff,#fff) padding-box,var(--g) border-box;border-color:transparent;transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(46,123,255,.5)}
.note{color:var(--slate);font-size:15px}
.callout{border-radius:16px;padding:16px 18px;background:linear-gradient(100deg,rgba(46,123,255,.08),rgba(160,68,255,.06));border:1px solid rgba(46,123,255,.18);font-size:15.5px;color:#23324A}
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s;list-style:none;padding:0}
.steps4 li{position:relative;padding:22px 20px;border-radius:20px;border:1px solid var(--hair);background:#fff;font-size:15px;color:#3C4A5C;line-height:1.55}
.steps4 li::before{counter-increment:s;content:"0" counter(s);display:block;font:600 12px var(--mono);letter-spacing:.12em;margin-bottom:12px;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps4 li b{display:block;color:var(--text);font-size:17px;letter-spacing:-.015em;margin-bottom:6px;line-height:1.3}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* .four keeps four boxes on one row where the section is full width rather than inside .prose.
   Added 15 September 2026 for the service page sales band. */
.svc-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.svc-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.svc-grid.four{grid-template-columns:minmax(0,1fr)}}
.prose .svc-grid{margin-top:26px}
.svc-grid .bx{padding:24px}
.svc-grid .bx h3{font-size:19px}
.svc-grid .bx .ic{width:44px;height:44px;border-radius:13px;margin-bottom:4px}
.svc-grid .bx .ic svg{width:22px;height:22px}
.svc-grid .bx .go{font-size:14.5px}
.model-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.table-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:20px}
.parts-table{width:100%;border-collapse:collapse;font-size:15.5px}
.parts-table th{text-align:left;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);padding:16px 20px;background:var(--mist)}
.parts-table td{padding:16px 20px;border-top:1px solid var(--hair);vertical-align:middle}
.parts-table td.act{text-align:right;white-space:nowrap}
.parts-table td.act .btn + .btn{margin-left:8px}
.code{font:600 14px var(--mono);letter-spacing:.04em;color:var(--slate)}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:10px;vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.search-box{display:grid;gap:10px;max-width:600px;margin-top:30px}
.search-box span{font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.search-box input{font:500 18px var(--sans);padding:18px 20px;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.search-box input::placeholder{color:rgba(255,255,255,.45)}

/* forms */
.form-card{background:#fff;color:var(--text);border-radius:28px;padding:30px;box-shadow:0 50px 120px rgba(0,0,0,.45);position:relative}
.form-card h3{font-size:22px;letter-spacing:-.02em;margin-bottom:6px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--mist);border-radius:14px;padding:4px;margin-bottom:22px}
.tabs button{font:600 14px var(--sans);border:0;background:none;padding:11px 6px;border-radius:11px;color:var(--slate);cursor:pointer;transition:background .2s,color .2s}
.tabs button[aria-selected="true"]{background:#fff;color:var(--text);box-shadow:0 2px 10px rgba(6,13,26,.1)}
.f{display:grid;gap:16px}
.f .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f label{display:grid;gap:7px;font-weight:600;font-size:14.5px}
.f .hint{font-weight:400;color:var(--soft);font-size:13px}
.f input:not([type="checkbox"]),.f select,.f textarea{font:500 16px var(--sans);color:var(--text);padding:13px 14px;border:1.5px solid var(--hair);border-radius:12px;background:#fff;width:100%;transition:border-color .2s,box-shadow .2s}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 4px rgba(46,123,255,.14)}
.f fieldset{border:1.5px solid var(--hair);border-radius:14px;padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:10px 18px;margin:0}
.f legend{font-weight:600;font-size:14.5px;padding:0 6px}
.f fieldset label{display:flex;align-items:center;gap:8px;font-weight:500}
.f button[type="submit"]{justify-self:start}
.form-status{border-radius:12px;padding:12px 14px;font-size:14.5px}
.form-status.ok{background:#E8FBF0;color:#115C33}
.form-status.warn{background:#FFF4E0;color:#6B4200}
.machine-found{display:flex;align-items:center;gap:14px;margin-top:22px;color:rgba(255,255,255,.8)}
.machine-found .sticker{font-size:18px}
.form-card .prose h3{margin-top:0}

/* ---------------- footer ---------------- */
.site-foot{background:var(--ink);color:rgba(255,255,255,.62);font-size:14.5px;position:relative;overflow:hidden}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--g);opacity:.9}
.site-foot::after{content:"";position:absolute;right:-300px;top:-300px;width:800px;height:600px;background:radial-gradient(closest-side,rgba(46,123,255,.14),transparent);pointer-events:none}
.site-foot .wrap{position:relative;z-index:1}
.fcta{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;padding-block:84px 70px;border-bottom:1px solid rgba(255,255,255,.08)}
.fcta .label{color:rgba(255,255,255,.5)}
.fcta h2{color:#fff;font-size:clamp(34px,3.8vw,56px);margin-top:16px;max-width:11em}
.fcta-r{display:grid;justify-items:end;gap:20px;text-align:right}
.fphone{font-size:clamp(30px,3vw,42px);font-weight:800;letter-spacing:-.03em;color:#fff;text-decoration:none;white-space:nowrap}
.fphone small{display:block;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:6px}
.fbtns{display:flex;gap:12px;flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.9fr)) minmax(0,1.45fr);gap:40px;padding-block:70px 56px}
.site-foot h4{color:#fff;font:600 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 20px}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
/* white-space:nowrap KEPT so short link labels never break mid phrase, but min-width:0 and the wrap
   below mean a label longer than its column wraps to a second line instead of running into the next
   column. Stuart, 17 September 2026, on "Document management and workflow" in the Service column:
   "they mostly should be on two lines because it goes over into machines. It looks whack." He is
   right, and the label was also longer than it needed to be, so both were fixed: the label is now
   "Document management" and the column can no longer be overflowed by any future one. */
.site-foot li{white-space:normal;overflow-wrap:break-word}
.site-foot ul{min-width:0}
.site-foot ul.two{grid-template-columns:1fr 1fr;column-gap:18px}
.site-foot a{text-decoration:none;transition:color .2s}
/* :not(.btn) MATTERS. Stuart found this on 15 September 2026: "in the footer, under the phone
   number on the right-hand side, when you hover over book a repair, the word book a repair is
   white, so you can't actually see it." The footer's own links sit at 62 per cent white and
   brighten to full white on hover, which is right for them. The rule was unscoped, so it also hit
   the .btn in .fbtns, and a .btn has a WHITE background: white text on white. It affected only
   "Book a repair", because the button next to it is .btn.ghost and is white text on transparent
   already. Any white surfaced button dropped into a dark container with a blanket a:hover would
   do the same, so the exclusion is on .btn and not on that one instance. */
.site-foot a:not(.btn):hover{color:#fff}
.fbrand img{height:40px;width:auto}
.fbrand p{margin-top:22px;max-width:22em;line-height:1.6}
.fcontact{margin:28px 0 0;display:grid;gap:2px;font-size:14.5px}
.fcontact dt{font:600 10.5px/2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.fcontact dd{margin:0 0 12px;color:rgba(255,255,255,.82)}
.fbrands{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:baseline;padding-block:30px;border-top:1px solid rgba(255,255,255,.08)}
.fbrands h4{margin:0}
/* One line where it fits. Stuart, 15 September 2026: "the brands we service in the footer, I know
   this goes across the whole website. I'm not sure if those brands could be smaller, so they fitted on
   one line potentially." Measured at 1440: fifteen names came to 755 px of text and 364 px of gaps
   against a 980 px track, so it needed 139 px saving and was running to two lines. 13 px type and an
   18 px gap brings it to 941 in a 980 px track, so 39 px spare. Measured, not estimated. That is one
   brand of headroom: a sixteenth name will push it back to two lines, and the answer then is 12 px
   type, not a smaller gap, because the gap is already what separates the names.
   It still wraps below 1180, where the footer relays anyway and one line is not possible. */
.fbrands ul{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;letter-spacing:.01em}
/* The footer trust row (Stuart, 15 September 2026: "whatever we can add to the footer to add trust
   in us and our store"). Four facts, not four badges: each one is a sentence the shop terms or the
   checkout already say, so nothing here is a claim that is not made elsewhere on the site. Note the
   white-space override: .site-foot li is nowrap for the link columns, which would push these four
   sentences straight through the right edge of the page. */
.ftrust{display:grid;gap:26px;padding-block:32px;border-top:1px solid rgba(255,255,255,.08)}
.ftrust > ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 34px}
.ftrust li{white-space:normal;display:grid;gap:5px;align-content:start}
.ftrust b{color:#fff;font-size:14px;font-weight:650;letter-spacing:-.01em}
.ftrust li > span:last-child{font-size:13px;line-height:1.55;color:rgba(255,255,255,.55)}
.ftrust .ti{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-bottom:5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ftrust .ti svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
/* Card marks. Renders only when data/site.yaml payments is filled, which is Stuart's call. */
.fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fpay > span{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.fpay ul{display:flex;gap:8px;flex-wrap:wrap}
.fpay li{white-space:nowrap;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.8);
  padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
@media (max-width:1020px){.ftrust > ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ftrust > ul{grid-template-columns:1fr}}
.fbase{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-block:26px;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px}
.fbase nav{display:flex;gap:26px;flex-wrap:wrap}
.ftm{font-size:12.5px;color:rgba(255,255,255,.38);padding-bottom:34px;max-width:70em}

/* ---------------- responsive ---------------- */
@media (max-width:1180px){
  .site-head .links{gap:20px}
  .fgrid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:50px}
  .fgrid .fbrand{grid-column:1/-1}
  .layout{grid-template-columns:minmax(0,1fr) 320px;gap:50px}
  .model-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1020px){
  .hero-inner,.phero,.feature,.portal-grid,.cov,.head,.why,.faq,.layout{grid-template-columns:minmax(0,1fr)}
  .phero{gap:40px;padding-block:30px 80px}
  .why,.faq{gap:50px}
  .whyl,.sidebar{position:static}
  .head p{justify-self:start}
  .stage{height:460px;max-width:520px}
  .glass.solo{margin-left:0}
  .site-head .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:rgba(10,20,38,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.4)}
  .site-head .links.open{display:flex}
  .site-head .links a{padding:14px 16px;border-radius:12px;font-size:17px}
  .site-head .links a:hover{background:rgba(255,255,255,.06)}
  .site-head .links a[aria-current="page"]::after{display:none}
  .menu-btn{display:inline-flex}
  .rowlink{grid-template-columns:56px minmax(0,1fr) 48px;gap:22px}
  .rowlink p{grid-column:2}
  .rowlink .arr{grid-column:3;grid-row:1/span 2;width:48px;height:48px}
  .rowlink .ico{width:56px;height:56px;grid-row:1/span 2;align-self:start}
  .bento,.bento.b3{grid-template-columns:1fr 1fr}
  .bx.big{grid-column:1/-1;grid-row:auto}
  .ticker .tlabel{display:none}
  .mapwrap,.hero-aside .mapwrap{margin-right:0}
  .trade{padding:60px 36px}
  .fcta{grid-template-columns:1fr}.fcta-r{justify-items:start;text-align:left}
  .fbrands{grid-template-columns:1fr;gap:14px}
  .steps4{grid-template-columns:1fr 1fr}
  .model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .wrap{padding-inline:18px}
  .sec{padding-block:80px}.sec.tight{padding-block:56px}
  .site-head .phone{display:none}
  .site-head .portal{padding:9px 13px;font-size:14px}
  .g1{width:88%;right:0}.g2{width:66%}
  .stage{height:500px}.g1{top:0}.g2{bottom:0}
  .nums{grid-template-columns:1fr 1fr 1fr;gap:12px}.nums b{font-size:34px}
  .handset{width:100%;max-width:320px}
  .steps3 div{grid-template-columns:1fr;gap:4px}
  .rowlink{grid-template-columns:1fr 44px;padding:22px}
  .rowlink .ico{display:none}
  .rowlink p{grid-column:1}
  .rowlink .arr{grid-column:2;width:44px;height:44px}
  .bento,.bento.b3,.bento.b2,.svc-grid,.steps4,.model-grid{grid-template-columns:1fr}
  .bx.big{padding:36px 28px}
  .cities{grid-template-columns:1fr 1fr;gap:2px 10px}.cities a small{display:none}.cities a{font-size:15px}
  .wi{grid-template-columns:1fr;gap:10px}.wi .n{padding-top:0;max-width:120px}
  .fgrid{grid-template-columns:1fr 1fr}.fgrid ul.two{grid-template-columns:1fr}.site-foot li{white-space:normal}
  .fcta{padding-block:60px 50px}
  .qs summary{font-size:17.5px}
  .f .row{grid-template-columns:1fr}
  .tabs{grid-template-columns:1fr 1fr}
  .form-card{padding:22px;border-radius:22px}
  .parts-table td.act .btn + .btn{margin:8px 0 0}
  .parts-table td.act{white-space:normal}
  .gmeta{grid-template-columns:1fr}
}
@media (max-width:600px){.layout .steps4{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}
.layout .steps4{grid-template-columns:1fr 1fr}
.hero .cov h1{font-size:clamp(38px,4.6vw,66px)}
.also{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;margin-top:20px;padding:22px 28px;border-radius:22px;border:1px solid var(--hair);background:linear-gradient(100deg,rgba(255,45,142,.05),rgba(46,123,255,.05) 60%,rgba(18,200,232,.05))}
.also p{color:var(--slate);font-size:15.5px}
.also-l{display:flex;gap:22px;flex-wrap:wrap}
.also-l a{font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.also-l a span{display:inline-block;transition:transform .2s}.also-l a:hover span{transform:translateX(3px)}
@media (max-width:1020px){.also{grid-template-columns:1fr;gap:10px}}
.faults-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prose .faults-grid{margin-top:24px}
.fault{padding:20px 22px;border-radius:18px;border:1px solid var(--hair);background:linear-gradient(180deg,#fff,var(--mist))}
.fault b{display:block;font-size:17px;letter-spacing:-.015em;line-height:1.3;color:var(--text);margin-bottom:6px}
.prose .fault p{font-size:15px;line-height:1.6;color:var(--slate);margin:0}
@media (max-width:600px){.faults-grid{grid-template-columns:1fr}}

/* new machine catalogue and model pages */
.nw{white-space:nowrap}
.gbig{display:flex;align-items:flex-end;gap:14px;margin-top:22px;letter-spacing:normal;font-size:15px}
.gbig b{font-size:64px;line-height:.9;letter-spacing:-.04em;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.gbig span{font-size:15px;font-weight:600;padding-bottom:4px;letter-spacing:0}.gbig small{display:block;font-weight:500;color:rgba(255,255,255,.55);font-size:13px}
.gmeta{grid-template-columns:1fr 1fr}
.cat-sec{padding-top:0}
.cat-jump{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 10px}
.cat-jump a{display:inline-flex;align-items:baseline;gap:10px;padding:12px 20px;border-radius:999px;background:#fff;border:1px solid var(--hair);font-weight:700;font-size:16px;color:var(--text);text-decoration:none;box-shadow:inset 0 -3px 0 var(--c)}
.cat-jump a small{font:500 12px var(--mono);color:var(--soft)}
.cat-brand{padding-top:44px;scroll-margin-top:90px}
.cat-brand>h3{font-size:30px;letter-spacing:-.03em;margin:0 0 6px}
.cat-class{margin-top:22px}.cat-class .label{display:inline-block;margin-bottom:12px}
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.prose .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px}
.cat{display:grid;gap:4px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--hair);text-decoration:none;color:var(--text);transition:transform .25s,box-shadow .25s,border-color .25s}
.cat b{font-size:16.5px;letter-spacing:-.01em}.cat span{font-size:14px;color:var(--soft)}
.cat em{font:600 11px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;margin-top:8px;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.cat:hover{background:linear-gradient(#fff,#fff) padding-box,var(--g) border-box;border-color:transparent;transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(46,123,255,.55)}
@media (max-width:980px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cat-grid,.prose .cat-grid{grid-template-columns:minmax(0,1fr)}.gbig b{font-size:52px}}
/* spec table and spec sheet buttons on new model pages (Website SYSTEM doc 7.9) */
.spec-table th[scope=row]{background:none;font:700 15px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--text);width:30%;vertical-align:top;border-top:1px solid var(--hair)}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:0}
.spec-table td{vertical-align:top}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 8px}
@media (max-width:640px){.spec-table th[scope=row]{width:auto;display:block;padding-bottom:0}.spec-table td{display:block;border-top:0;padding-top:4px}}
/* toner store (Website SYSTEM doc 7.5) */
.shop-table td.price{font-weight:800;white-space:nowrap}
.shop-table td.price small{display:block;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-top:4px}
.shop-table td.price.muted{color:var(--soft);font-weight:600}
.shop-table td small.code,.parts-table td small.code{display:block;font:600 12px var(--mono);color:var(--soft);margin-top:2px}
/* Spare parts tables (Store SYSTEM doc 7.6). The cross reference and the fitment list are
   secondary lines under the part name, and the rule above was scoped to .shop-table only, so on
   the first build they ran straight into the name: "Fuser Bushingalso 6LH07393000". Same class of
   fault as the "Add" button breaking mid word, and Stuart's ruling there was: fix it everywhere
   it looks like that. */
.parts-table td.code{white-space:nowrap}
.parts-table td.act{white-space:normal}
.shop-table th[scope=row]{background:none;font:700 15px var(--sans);letter-spacing:0;text-transform:none;color:var(--text);width:32%}
.shop-table a{color:inherit}
.cart-table input.qty{width:64px;padding:8px 10px;border:1px solid var(--hair);border-radius:10px;font:600 15px var(--sans)}
.cart-total{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:flex-end;margin:22px 0 6px}
.cart-total b{font-size:30px;letter-spacing:-.02em}.cart-total small{flex-basis:100%;text-align:right;color:var(--slate)}
.cart-fab{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--ink);color:#fff;text-decoration:none;font:700 15px var(--sans);padding:13px 18px;border-radius:999px;box-shadow:0 14px 40px rgba(6,13,26,.35)}
.cart-fab b{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:8px;border-radius:999px;background:var(--g);font-size:13px}
.cart-hero{display:flex;gap:16px;align-items:center;margin:18px 0 6px}
.cart-hero .big-sw{width:56px;height:56px;border-radius:16px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.cart-hero b{display:block;font-size:34px;letter-spacing:-.03em;color:#fff}.cart-hero span{color:rgba(255,255,255,.65);font-size:14px}
/* photos in frames (Website SYSTEM doc 7.10): one finish everywhere, a hairline in the logo gradient */
.photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo:has(> img)::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--g);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.75;pointer-events:none}
.photo:has(> img)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(6,13,26,.55))}
.photo .pchip,.photo .cap{z-index:2}
/* A real photograph is landscape (the Gemini set is 3:2), so a slot holding one drops the tall
   portrait crop it uses for the placeholder. .wide keeps its own ratio. */
.photo:not(.wide):has(> img){aspect-ratio:3/2}
/* DSA's own record by area (Website doc 7A item 19) */
.record{display:grid;grid-template-columns:220px 1fr;gap:28px;border:1px solid var(--hair);border-radius:24px;padding:28px;margin:18px 0 8px;background:linear-gradient(180deg,#fff, var(--mist))}
.rec-num b{display:block;font-size:64px;line-height:1;letter-spacing:-.04em;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.rec-num span{display:block;margin-top:10px;font:600 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.rec-body p{margin-top:0}
.rec-subs{margin:6px 0 18px}
.rec-bars{display:grid;gap:8px}
.rbar{display:grid;grid-template-columns:120px 1fr 44px;gap:12px;align-items:center;font-size:14.5px}
.rbar i{display:block;height:10px;border-radius:99px;background:var(--g);width:var(--w)}
.rbar em{font-style:normal;font-weight:700;text-align:right}
@media (max-width:760px){.record{grid-template-columns:1fr;padding:22px}.rec-num b{font-size:52px}.rbar{grid-template-columns:96px 1fr 40px}}
/* home: new machines band (Stuart's ruling: new machines first) */
.newband .nb-head{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;margin-bottom:40px}
.newband .lead{color:rgba(255,255,255,.72);margin:0}
.nb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.nb{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;transition:transform .25s,border-color .25s}
.nb:hover{transform:translateY(-4px);border-color:var(--c,rgba(255,255,255,.35))}
.nb h3{font-size:30px}.nb ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;color:rgba(255,255,255,.75);font-size:15px}.nb ul b{color:#fff}
.nb .tag{align-self:flex-start;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.1)}
.nb .go{margin-top:auto;font-weight:700}
.nb-cta{background:linear-gradient(160deg,rgba(160,68,255,.25),rgba(46,123,255,.15));}
.nb-cta p{color:rgba(255,255,255,.75);margin:0}.nb-cta .btn{align-self:flex-start}
@media (max-width:980px){.nb-grid{grid-template-columns:1fr 1fr}.newband .nb-head{grid-template-columns:1fr}}
@media (max-width:560px){.nb-grid{grid-template-columns:1fr}}
/* mobile call bar */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(6,13,26,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.12)}
  .callbar a{flex:1;text-align:center;text-decoration:none;font:700 15px var(--sans);padding:13px 10px;border-radius:999px}
  .callbar .cb-call{background:var(--g);color:#fff}.callbar .cb-book{background:#fff;color:var(--ink)}
  body{padding-bottom:76px}.cart-fab{bottom:88px}
}
/* ---------------- store front /shop and home shop band (Website doc 7.5). 11 Sept 2026 */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hcart{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font:600 15px var(--sans);padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06)}
.hcart svg{width:18px;height:18px}
.hcart b{background:var(--g);min-width:22px;height:22px;border-radius:11px;font-size:12px;display:inline-grid;place-items:center;padding:0 6px}
.hcart b:empty,.hcart b[data-zero]{display:none}
.shop-hero{padding-block:30px 70px}

/* THE SHOP HERO PICTURE, 16 September 2026. Stuart, going through the shop page: "at the very top on
   the right hand side of the hero area, there is nothing in there at all and it looks extremely
   bland." The hero was .phero.solo, one full width column, so the right hand third of the opening
   screen was empty navy. It is now two columns with a photograph on the right.
   The split is 1.24 / 0.76 rather than the site default 1.12 / 0.88 because the SEARCH BOX is the
   point of this page and it must not be cramped: at 1240 wrap that leaves the left column 699px, so
   the search input still renders below its own 760px maximum and the placeholder text is not
   truncated. Measured, not guessed.
   The column rule is inside a min-width query on purpose. The site's stacking rule for .phero lives
   at max-width:900px EARLIER in this file, so a bare .shop-hero rule down here would win against it
   and the hero would stay two columns on a phone. */
@media (min-width:901px){.shop-hero{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr)}}
.shop-pic{margin:0;position:relative}
.sp-frame{position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.72)}
/* The wash is what lets the chip sit on the photograph whatever the picture does at the bottom. */
.sp-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,13,26,0) 48%,rgba(6,13,26,.62) 100%)}
.sp-frame::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--g);z-index:3}
.sp-frame img,.sp-frame .ph{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.sp-cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff;font-size:14.5px;
  font-weight:600;line-height:1.45;text-shadow:0 2px 14px rgba(0,0,0,.55)}
/* Kept on phones rather than hidden. It stacks under the search box, where it is the first thing
   below the fold and the page is at its blandest; a wider crop stops it eating the screen. */
@media (max-width:900px){.shop-pic{margin-top:6px}.sp-frame img{aspect-ratio:16/10}}
.shop-search{display:flex;gap:10px;max-width:760px;margin-top:30px}
.shop-search input{flex:1;min-width:0;font:500 18px var(--sans);padding:18px 22px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.shop-search input::placeholder{color:rgba(255,255,255,.5)}
.shop-search .btn{padding-inline:30px}
.shop-pop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;color:rgba(255,255,255,.6);font-size:14px}
.shop-pop .pop{font:600 13px var(--sans);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 13px;cursor:pointer}
.shop-pop .pop:hover{border-color:#fff}
.shop-trust{background:var(--mist);border-bottom:1px solid var(--hair)}
.shop-trust .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:24px}
.shop-trust .wrap>div{display:grid;gap:2px;font-size:14px;color:var(--slate);padding-left:16px;border-left:2px solid transparent;border-image:var(--g) 1}
.shop-trust b{color:var(--text);font-size:15px}
.shop{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
.shop-side{position:sticky;top:20px;display:grid;gap:18px;font-size:15px}
.sf summary{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);cursor:pointer;padding-bottom:8px;border-bottom:1px solid var(--hair);list-style:none}
.sf summary::-webkit-details-marker{display:none}
.sf summary{display:flex;justify-content:space-between;align-items:center}
.sf summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(45deg);margin:0 4px 4px 0;transition:transform .2s}
.sf[open] summary::after{transform:rotate(225deg);margin-bottom:0}
.nw{white-space:nowrap}
.sf-list{display:grid;gap:2px;padding-top:8px;max-height:340px;overflow:auto}
/* The one line under the Machine format filter. It carries the escape route: an A3 machine the
   classifier has not reached would otherwise look like a machine we have no supplies for. */
.sf-note{margin:10px 2px 2px;font-size:12.5px;line-height:1.5;color:var(--slate)}
.sf-list label{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer}
.sf-list i{margin-left:auto;font:500 12px var(--mono);font-style:normal;color:var(--soft)}
.sf-list input,.sf-stock input,.sf-sw input{accent-color:#2E7BFF;width:16px;height:16px}
.sf-sw{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:10px}
.sf-sw label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.sf-sw input{position:absolute;opacity:0}
.sf-sw span{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--hair)}
.sf-sw input:checked+span{box-shadow:0 0 0 2px #fff,0 0 0 4px #2E7BFF}
.sf-sw input:focus-visible+span{outline:2px solid var(--cya);outline-offset:3px}
.sf-stock{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.sf-help{background:var(--mist);border-radius:18px;padding:18px;display:grid;gap:8px;font-size:14px;color:var(--slate)}
.sf-help b{color:var(--text);font-size:15px}.sf-help .btn{justify-self:start}
.shop-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.shop-bar p{font-weight:700}
.shop-bar-r{display:flex;align-items:center;gap:12px}
.shop-bar select{font:500 15px var(--sans);padding:9px 12px;border:1px solid var(--hair);border-radius:12px;background:#fff;margin-left:6px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.pc{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:22px;background:#fff;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.pc:hover{transform:translateY(-3px);box-shadow:0 22px 50px -28px rgba(6,13,26,.35);border-color:#CBD3DD}
.pc-img{all:unset;cursor:pointer;display:block;padding:10px 10px 0}
.pc-img:focus-visible{outline:2px solid var(--cya);outline-offset:-4px;border-radius:18px}
.pc-b{display:flex;flex-direction:column;gap:6px;padding:12px 18px 18px;flex:1}
.pc-b small{font-size:12.5px;color:var(--soft)}
.pc-b h3{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.pc-b h3 button{all:unset;cursor:pointer}
.pc-b h3 button:hover{text-decoration:underline}
.pc-fits{font-size:13.5px;color:var(--slate);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-f{margin-top:auto;display:grid;gap:4px;padding-top:12px}
.pc-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.pc-p b{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pc-p span{font-size:12.5px;color:var(--soft)}
/* THE RRP STRIKE THROUGH, 16 September 2026. Stuart asked for it because the competitors do it and
   we did not. Two rules only, and they are shared by the product cards, the list rows, the quick
   view, the product page and both machine templates, so the comparison looks the same everywhere.
   The RRP is quieter than the price on purpose: the thing being sold is our number, and a struck
   through figure shouted as loudly as the price reads as a discount store. */
.rrp-line{flex-basis:100%;display:flex;align-items:baseline;gap:6px;margin-top:3px;
  font-size:12.5px;font-weight:600;color:var(--soft);letter-spacing:.01em}
.rrp{color:var(--soft);text-decoration:line-through;font-weight:600}
.save{font-weight:700;color:#0F7A45}
.mprice .rrp-line{margin-top:6px;font-size:13.5px}
/* The state list runs to 34 characters and was being cut off mid word on a card. It wraps now;
   min-height keeps a one line card the same height as before. 16 September 2026. */
.pc-s{min-height:18px;overflow-wrap:anywhere;line-height:1.45}
.pc-f .btn{margin-top:8px;width:100%}
.pc-f em,.qv-price em{font-style:normal;font-size:12.5px;color:var(--slate);white-space:nowrap}
.pc-f em.in,.qv-price em{color:#0E7A55}
.pc-f em.in::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#16A36F;margin-right:5px;vertical-align:1px}
.tl{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/3;border-radius:16px;padding:14px 16px;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--h) 16%,transparent),transparent 60%),linear-gradient(180deg,#F7F9FB,#EDF1F5)}
.tl::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--g);opacity:.8}
.tl-b{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.tl-cart{position:relative;align-self:center;width:78%;height:30%;border-radius:12px;background:linear-gradient(180deg,#34405A 0%,#1A2336 55%,#0C1322 100%);box-shadow:0 14px 22px -12px rgba(6,13,26,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.tl-cart::after{content:"";position:absolute;top:0;bottom:0;right:0;width:22%;border-radius:0 12px 12px 0;background:var(--c);box-shadow:inset 2px 0 0 rgba(255,255,255,.25)}
.tl-cart i{position:absolute;left:10%;top:28%;width:34%;height:44%;border-radius:4px;background:rgba(255,255,255,.9)}
.tl-cart i::after{content:"";position:absolute;left:12%;right:30%;top:30%;height:2px;background:var(--h);box-shadow:0 5px 0 #C9D1DC}
.tl-o{font:600 19px var(--mono);color:var(--ink);letter-spacing:-.01em;line-height:1.1;word-break:break-all}
.tl-k{position:absolute;right:16px;bottom:16px;font-size:11.5px;color:var(--soft)}
.tl.k-drum .tl-cart{height:22%;width:74%;border-radius:999px;background:linear-gradient(180deg,#5C6B80 0%,#26324A 45%,#0C1322 100%)}
.tl.k-drum .tl-cart::after{border-radius:0 999px 999px 0;width:14%}
.tl.k-drum .tl-cart i{top:32%;height:36%;width:40%;left:14%;border-radius:999px;background:linear-gradient(90deg,#1F8F5F,#35C488)}
.tl.k-drum .tl-cart i::after{display:none}
.tl.k-waste .tl-cart{width:50%;height:46%;border-radius:10px}
.tl.k-waste .tl-cart::after{width:100%;height:22%;top:auto;border-radius:0 0 10px 10px;background:#8795A8}
.tl.k-waste .tl-cart i{top:18%;left:14%;width:56%;height:30%}
.tl.k-parts .tl-cart{width:82%;height:20%;border-radius:8px;background:linear-gradient(180deg,#8A96A8,#3B4A5E 50%,#1A2336)}
.tl.k-parts .tl-cart::after{width:10%;border-radius:0 8px 8px 0;background:#C58A2B}
.tl.k-parts .tl-cart i{height:40%;top:30%;width:50%;left:20%;background:rgba(255,255,255,.35)}
.tl.k-parts .tl-cart i::after{display:none}
.tl.k-staples .tl-cart{width:40%;height:40%;border-radius:8px}
.tl.k-staples .tl-cart::after{width:100%;height:18%;border-radius:0 0 8px 8px;top:auto;background:#B8C2CF}
.tl.big{aspect-ratio:1/1;border-radius:22px;padding:22px}
.tl.big .tl-o{font-size:30px}.tl.big .tl-b{font-size:12px}.tl.big .tl-k{font-size:13px;right:22px;bottom:22px}
.shop-empty{border:1px dashed #CBD3DD;border-radius:22px;padding:34px;display:grid;gap:10px;color:var(--slate)}
.shop-empty h3{color:var(--text);font-size:20px}
.shop-more{display:flex;justify-content:center;margin-top:30px}
.qv{border:0;border-radius:26px;padding:0;max-width:900px;width:calc(100% - 32px);max-height:calc(100vh - 40px);box-shadow:0 40px 120px -30px rgba(6,13,26,.6);color:var(--text)}
.qv::backdrop{background:rgba(6,13,26,.55);backdrop-filter:blur(4px)}
.qv[open]:not(:modal){position:fixed;inset:20px;margin:auto;z-index:80;height:max-content}
.qv-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;padding:32px}
.qv-in small{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.qv-in h2{font-size:28px;margin:8px 0 12px}
.qv-in h3{font-size:15px;margin:22px 0 8px}
.qv-price b{font-size:30px;font-weight:800;letter-spacing:-.02em}.qv-price span{color:var(--soft);font-size:14px;margin-right:10px}
.qv-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:18px 0}
.qv-meta div{border-top:1px solid var(--hair);padding-top:8px}
.qv-meta dt{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.qv-meta dd{margin:2px 0 0;font-weight:600;font-size:15px}
.qv-act{display:flex;gap:10px;flex-wrap:wrap}
.qv-page{margin-top:14px;font-weight:600}
.qv-fits{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;max-height:190px;overflow:auto}
.qv-fits li{font-size:13px;background:var(--mist);border-radius:999px;padding:5px 11px}
.qv-x{position:absolute;right:14px;top:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);background:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:2}
/* The home page scrolled sideways by 13px at 390px and this was why, found and fixed 14 September 2026.
   A grid item keeps min-width:auto, so the left column could not shrink below the min-content width of
   the search row inside it: input plus 10px gap plus a 114px nowrap Search button came to 385px against
   a 354px track. min-width:0 lets the track win, and below 640px the button drops under the field
   instead of fighting it for the line, which is better at that width anyway. Measured after the change:
   scrollWidth equals clientWidth on the home page. */
.shopband .sb-head{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;margin-bottom:34px}
.shopband .sb-head > *{min-width:0}
@media (max-width:640px){
  .shopband .sb-search{flex-wrap:wrap}
  .shopband .sb-search input{flex:1 1 100%}
  .shopband .sb-search .btn{flex:1 1 100%}
}
.shopband .sb-search{display:flex;gap:10px;margin-top:22px;max-width:620px}
.shopband .sb-search input{flex:1;min-width:0;font:500 17px var(--sans);padding:16px 20px;border:1px solid var(--hair);border-radius:999px;background:#fff}
.shopband .sb-brands{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.shopband .sb-brands a{font:600 14px var(--sans);text-decoration:none;border:1px solid var(--hair);border-radius:999px;padding:8px 14px;background:#fff}
.shopband .sb-brands a:hover{border-color:var(--ink)}
.shopband .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.shopband .sb-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}
@media (max-width:980px){.shop{grid-template-columns:1fr}.shop-side{position:static;grid-template-columns:1fr 1fr}.shop-trust .wrap{grid-template-columns:1fr 1fr}
  .shopband .sb-head{grid-template-columns:1fr}.shopband .pgrid{grid-template-columns:1fr 1fr}.qv-in{grid-template-columns:1fr;padding:24px}.qv-in .tl.big{aspect-ratio:16/9}}
@media (max-width:640px){.shop-side{grid-template-columns:1fr}.shop-search{flex-direction:column}.shop-trust .wrap{grid-template-columns:1fr;gap:12px}
  .pgrid{grid-template-columns:1fr 1fr;gap:12px}.pc-b{padding:10px 12px 14px}.sf-help{display:none}.pgrid .tl-k{display:none}.pgrid .tl-o{font-size:16px}.pc-p{flex-wrap:wrap;gap:2px 8px}.pc-p b{font-size:20px}
  .shopband .pgrid{grid-template-columns:1fr 1fr}.hcart span{display:none}.sf-list{max-height:220px}}
/* ---------------- store, second pass (11 Sept 2026): header search, finder, printer view, list view, cart drawer, checkout */
.hsearch{display:inline-flex;align-items:center;gap:8px;color:#fff;font:600 15px var(--sans);padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);cursor:pointer}
.hsearch svg{width:17px;height:17px}
html.so-open{overflow:hidden}
.so{position:fixed;inset:0;z-index:90;background:rgba(6,13,26,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:8vh 16px 16px}
.so-in{width:min(760px,100%);max-height:84vh;display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 40px 120px -30px rgba(6,13,26,.7);overflow:hidden;color:var(--text)}
.so-f{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.so-f svg{width:22px;height:22px;color:var(--soft);flex:none}
.so-f input{flex:1;min-width:0;border:0;font:500 19px var(--sans);outline:none;color:var(--text)}
.so-x{font:600 12px var(--mono);border:1px solid var(--hair);border-radius:8px;background:#fff;padding:5px 8px;cursor:pointer;color:var(--soft)}
.so-r{overflow:auto;padding:8px 18px 18px}
.so-r h4,.sg h4{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:14px 0 6px}
.so-r ul,.sg ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.so-pr a,.so-try a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none}
.so-pr a span{color:var(--soft);font-size:13.5px;white-space:nowrap}
.so-try{display:flex!important;flex-wrap:wrap;gap:6px!important}.so-try a{border:1px solid var(--hair);border-radius:999px;padding:6px 12px;font-size:14px}
.so-p a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:12px;text-decoration:none}
.so-p .tl{aspect-ratio:1/1;border-radius:10px;padding:6px}.so-p .tl-b,.so-p .tl-k,.so-p .tl-o,.so-p .tl-t{display:none}.so-p .tl-cart{width:86%;height:34%}
.so-p b{display:block;font-size:15px;line-height:1.3}.so-p small{font-size:12.5px;color:var(--soft)}.so-p small em{font-style:normal}
.so-p .pr{font-style:normal;font-weight:800}
.so-r a:hover,.so-r a.sel,.sg a:hover{background:var(--mist)}
.so-all{display:block;margin-top:12px;padding:12px;border-radius:12px;background:var(--ink);color:#fff;text-decoration:none;text-align:center;font-weight:700}
.so-all:hover{background:#15233a!important}
.so-none{margin:14px 0 6px;font-weight:600}.so-help{color:var(--slate);font-size:14px;margin-top:12px}
.sg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;background:#fff;color:var(--text);border-radius:18px;box-shadow:0 30px 80px -20px rgba(6,13,26,.45);padding:6px 14px 14px;max-height:70vh;overflow:auto;text-align:left}
.sg .so-all{font-size:14px}
.shop-search{position:relative}
.my-pr{margin-top:10px}.my-pr a,.shop-printers a{font:600 13px var(--sans);color:#fff;text-decoration:none;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) padding-box,var(--g) border-box;border:1px solid transparent;border-radius:999px;padding:7px 13px}
.shop-printers{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px;font-size:14px;color:var(--slate)}
.shop-printers:empty{display:none}
.shop-printers a{color:var(--text);background:var(--mist);border:1px solid var(--hair)}
.shop-printers a small,.pchips a small{color:var(--soft);font-weight:500;margin-left:4px}
.finder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 40px;padding:30px;border-radius:28px;background:linear-gradient(#fff,#fff) padding-box,var(--g) border-box;border:1.5px solid transparent;box-shadow:0 30px 70px -40px rgba(46,123,255,.45)}
.fd-h h2{font-size:clamp(26px,2.6vw,34px);margin:10px 0 8px}.fd-h p{color:var(--slate)}
.fd-f{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;align-content:start}
.fd-f label{display:grid;gap:6px}.fd-f span{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.fd-f select,.fd-f input{font:500 16px var(--sans);padding:14px 16px;border:1px solid var(--hair);border-radius:14px;background:#fff;min-width:0}
.fd-l{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.fd-l a{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border:1px solid var(--hair);border-radius:14px;text-decoration:none;background:#fff;transition:border-color .2s,transform .2s}
.fd-l a:hover{border-color:var(--ink);transform:translateY(-2px)}
.fd-l span{color:var(--soft);font-size:13px;white-space:nowrap}.fd-l .none{color:var(--slate);grid-column:1/-1}
.sb-t{font-size:22px;margin:44px 0 16px}
/* Six across since 16 September 2026, when accessories became the sixth type. It was five, and
   a sixth tile on its own second row beside a full row of six machine tiles underneath read as
   a mistake. Both rows are now the same shape. */
.tgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.tcard{display:grid;gap:10px;text-decoration:none;padding:12px 12px 16px;border:1px solid var(--hair);border-radius:20px;background:#fff;transition:transform .25s,box-shadow .25s}
.tcard:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(6,13,26,.35)}
.tcard .tl{aspect-ratio:16/10}.tcard b{font-size:15px;padding-left:4px}
.bgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.bgrid a{display:grid;gap:4px;padding:18px;border:1px solid var(--hair);border-radius:18px;text-decoration:none;background:#fff;transition:border-color .2s}
.bgrid a:hover{border-color:var(--ink)}.bgrid b{font-size:18px;letter-spacing:-.02em}.bgrid span{font-size:13px;color:var(--soft)}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchips a{font:600 14px var(--sans);text-decoration:none;border:1px solid var(--hair);border-radius:999px;padding:9px 15px;background:#fff}
.pchips a:hover{border-color:var(--ink)}
.bstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.bstats div{padding:18px 20px;border-radius:18px;background:var(--mist)}.bstats b{display:block;font-size:30px;letter-spacing:-.03em}.bstats span{font-size:14px;color:var(--slate)}
.gst-switch{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.gst-switch input{appearance:none;-webkit-appearance:none;width:36px;height:20px;border-radius:999px;background:#CBD3DD;position:relative;cursor:pointer;transition:background .2s;margin:0}
.gst-switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.gst-switch input:checked{background:#2E7BFF}.gst-switch input:checked::after{transform:translateX(16px)}
.vts{display:inline-flex;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.vt{border:0;background:#fff;padding:8px 10px;cursor:pointer;display:grid;place-items:center}.vt svg{width:17px;height:17px;fill:#8795A8}
.vt[aria-pressed="true"]{background:var(--ink)}.vt[aria-pressed="true"] svg{fill:#fff}
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 16px}.fchips:empty{display:none}
.fchip{font:600 13px var(--sans);border:1px solid var(--hair);background:var(--mist);border-radius:999px;padding:6px 10px;cursor:pointer}
#f-clear{margin:-8px 0 16px}
.sf-price{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px}
.sf-price label{display:grid;gap:4px;font-size:12px;color:var(--soft)}
.sf-price input{font:500 15px var(--sans);padding:9px 10px;border:1px solid var(--hair);border-radius:10px;width:100%}
.badge{display:inline-block;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--mist);color:var(--slate);justify-self:start;align-self:flex-start}
.badge.hi{background:#E8F1FF;color:#1D5FD1}
.cpp{color:var(--soft);font-size:12px;margin-left:6px;white-space:nowrap}
.tl-t{position:absolute;right:12px;top:12px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:#1D5FD1;color:#fff;border-radius:6px;padding:3px 7px}
.list-t td{vertical-align:middle}.list-t td small{display:block;color:var(--soft);font-size:12.5px}
.list-t .fitcol{font-size:13.5px;color:var(--slate);max-width:320px}
.list-t .act{white-space:nowrap}.list-t .act .qty-in{width:56px;margin-right:6px}
.qty-in{font:600 15px var(--sans);padding:8px 6px;border:1px solid var(--hair);border-radius:10px;text-align:center;width:56px}
.qty-step{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:999px;overflow:hidden;background:#fff}
.qty-step button{border:0;background:transparent;width:38px;height:40px;font-size:18px;cursor:pointer;color:var(--ink)}
.qty-step input{border:0;width:44px;text-align:center;font:700 16px var(--sans);-moz-appearance:textfield;padding:0}
.qty-step input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty-step.dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}.qty-step.dark button,.qty-step.dark input{color:#fff;background:transparent}
.buy-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.pv-back{display:inline-block;margin-bottom:18px;font-weight:600;text-decoration:none}
.pv-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--hair);margin-bottom:24px}
.pv-h h2{font-size:clamp(28px,3vw,40px);margin:8px 0 6px}.pv-h p{color:var(--slate)}
.pv-a{display:flex;flex-wrap:wrap;gap:8px}
.pv h3{font-size:20px;margin:30px 0 14px}.pv h3 small{font:500 13px var(--mono);color:var(--soft);margin-left:6px}
.pv-set{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;border-radius:18px;background:linear-gradient(#F7F9FB,#F7F9FB) padding-box,var(--g) border-box;border:1px solid transparent;margin:10px 0}
.pv-set div{display:grid;gap:2px}.pv-set span{color:var(--slate);font-size:14px}
.pv-set.sm{padding:12px 14px;margin-top:16px}
.pv-note{margin-top:28px;color:var(--slate)}
.tier-t .save,.save{color:#0E7A55}
.tier-t tr.me td{background:#F4F8FF}
.pgrid.mini{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.qv-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.qv-sec{padding:0 32px 24px}.qv-sec h3{font-size:16px;margin:4px 0 12px}
.qv .qv-page{padding:0 32px 30px;margin:0}
.qv-fits a{text-decoration:none}.qv-fits li:hover{background:#E8EEF6}
.alt-l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.alt-l li{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.8fr)) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--hair);border-radius:12px;font-size:14px}
.alt-l li.me{background:#F4F8FF;border-color:#C9DAF6}.alt-l em{font-style:normal;color:var(--soft);font-size:13px}
.qv-dsa{margin-top:14px;font-size:14px;color:var(--slate)}
.qv-act{align-items:center}
.cdr{position:fixed;right:20px;bottom:20px;z-index:85;width:min(380px,calc(100vw - 32px));background:#fff;border-radius:22px;box-shadow:0 30px 90px -20px rgba(6,13,26,.5);padding:18px;transform:translateY(130%);transition:transform .35s var(--ease);color:var(--text)}
.cdr.open{transform:none}
.cdr-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.cdr-h b{font-size:16px}
.cdr-h .cdr-x{border:0;background:var(--mist);width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer}
.cdr ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}.cdr li{display:flex;justify-content:space-between;gap:12px}
.cdr-t{display:flex;justify-content:space-between;border-top:1px solid var(--hair);margin-top:12px;padding-top:10px;font-size:14px;color:var(--slate)}.cdr-t b{color:var(--text)}
.cdr-a{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.cart-sum{display:grid;gap:6px;max-width:420px;margin:20px 0 0 auto}
.cart-sum div{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--slate)}.cart-sum b{color:var(--text)}
.cart-sum .tot{border-top:1px solid var(--hair);padding-top:8px;font-size:18px;color:var(--text)}.cart-sum .tot b{font-size:24px}
.cart-sum.sm{margin:14px 0}.cart-sum.sm .tot b{font-size:19px}
.cart-table td small.code{display:block;color:var(--soft);font-size:12px}
.side-search{display:flex;gap:8px;position:relative}.side-search input{flex:1;min-width:0;font:500 15px var(--sans);padding:10px 12px;border:1px solid var(--hair);border-radius:12px}
.side-search.wide{max-width:560px;margin-top:10px}
.co fieldset{border:1px solid var(--hair);border-radius:20px;padding:20px 22px;margin:0 0 18px}
.co legend{font-weight:800;padding:0 8px;font-size:17px}
.co .row.three{grid-template-columns:1.4fr 1fr 1fr}
.co .pay{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--hair);border-radius:14px;margin-bottom:8px;cursor:pointer}
.co .pay b{display:block}.co .pay small{color:var(--slate);font-size:13.5px}
.co-lines{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}.co-lines li{display:flex;justify-content:space-between;gap:10px}
.tbc{background:#FFF7D6;border-left:3px solid #E0B400;padding:10px 14px;border-radius:0 10px 10px 0;color:#5A4600;font-size:15px}
.pglass .tl{margin-bottom:16px}.pg-p{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}.pg-p b{font-size:32px;font-weight:800;letter-spacing:-.02em}.pg-p span{color:rgba(255,255,255,.7);font-size:14px}.pg-p em{font-style:normal;color:#7BE0B5;font-size:14px}
.fits-chips a{text-decoration:none}
.shop-faq{margin-top:64px}
@media (max-width:980px){.finder{grid-template-columns:1fr;padding:22px}.tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.bstats{grid-template-columns:1fr 1fr}
  .alt-l li{grid-template-columns:1fr 1fr;}.qv-sec{padding:0 24px 20px}.qv .qv-page{padding:0 24px 24px}}
@media (max-width:640px){.fd-f{grid-template-columns:1fr}.tgrid{grid-template-columns:1fr 1fr}.hsearch span{display:none}.hsearch{padding:9px 11px}
  .co .row.three{grid-template-columns:1fr 1fr}.shop-bar-r{flex-wrap:wrap;gap:8px}.list-t .fitcol{display:none}.so{padding:0}.so-in{max-height:100vh;height:100%;border-radius:0}}
.co .f fieldset label{display:grid;gap:7px;font-weight:600;align-items:stretch}
.co .f fieldset label.pay{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.co .f .pay input{width:18px!important;height:18px;margin-top:3px;flex:none;accent-color:#2E7BFF}
.co .f fieldset{display:grid;gap:14px}
.pc-b h3 a{text-decoration:none}.pc-b h3 a:hover{text-decoration:underline}
.pglass .pg-p b{font-size:34px;color:#fff}
@media (max-width:640px){.site-head .portal{display:none}.site-head .right{gap:10px}.site-head{gap:12px}.hcart{padding:9px 11px}.hcart span{display:none}}
.site-head .links .nav-portal{display:none}
@media (max-width:640px){.site-head .links .nav-portal{display:block}}
.askp{font-size:15px;font-weight:800;letter-spacing:-.01em}
.list-t .askp,.tier-t .askp{font-weight:600;font-size:13.5px;color:var(--slate)}

/* Product photographs from the supplier's library, in the same frame as the drawn tile so a grid of
   mixed lines still lines up (Website doc 7.5, photos). */
.tl.ph{background:#fff;border:1px solid var(--line,#E3E8EE);padding:10px 12px;justify-content:flex-start}
.tl.ph::before{background:var(--g);opacity:.55}
.tl.ph img{position:absolute;inset:6px 8px 8px;margin:auto;width:calc(100% - 16px);height:calc(100% - 24px);object-fit:contain;mix-blend-mode:multiply}
.tl.ph .tl-b{position:relative;z-index:1}
.tl.ph .tl-t{position:absolute;right:12px;bottom:10px;z-index:1}
.tl.ph.big img{inset:18px}
.pglass .tl.ph{aspect-ratio:1/1}

/* Lines we will not put a number on. Rather than a dead end, the page says why and offers the two
   things that are actually better for the customer: a hand quote, or the agreement. */
.qbox{background:linear-gradient(180deg,#F7F9FB,#EEF2F6);border:1px solid var(--line,#E3E8EE);border-radius:20px;padding:22px 24px;margin:0 0 30px}
.qbox h2{margin:0 0 10px;font-size:21px}
.qbox p{margin:0 0 12px;color:var(--soft)}
.qbox p:last-of-type{margin-bottom:16px}
.qbox-a{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
@media (max-width:560px){.qbox{padding:18px 16px}.qbox-a .btn{width:100%;text-align:center}}

/* The shop's type tiles, now a photograph of a real part rather than a drawn shape (Website doc 7.5). */
/* Shop type tiles: drawn generic parts, not photographs (templates/_art.html, Stuart 13 Sept 2026). */
.tcard .tl.tl-art{aspect-ratio:4/3;padding:10px 12px;display:block}
.tl-art .tart{display:block;width:100%;height:100%;object-fit:contain}
.tcard:hover .tl-art .tart{transform:translateY(-2px) scale(1.02)}
.tl-art .tart{transition:transform .25s ease}
@media (prefers-reduced-motion:reduce){.tl-art .tart{transition:none}.tcard:hover .tl-art .tart{transform:none}}

/* Social proof band, home page, 14 September 2026. Stuart asked for a way to show who DSA works for
   without putting customer logos on the site and without chasing permission for them. This is the
   booking record instead: six regions, real counts, the suburbs most booked into. Sized to read as
   evidence rather than as a stat wall, so the figures are smaller than .nums and the suburb line
   carries as much weight as the number. */
.proofband .head p{max-width:62ch}
/* The stat row that replaced the region grid on 15 September 2026, Stuart's fourth pass. Four round
   figures in a competitor's idiom, no geography. .proof-grid and .pf below are KEPT because the
   coverage and city pages still use the card shape for suburb and brand lists; only the home page
   stopped publishing a volume per region. */
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px;
  border-top:1px solid var(--hair);padding-top:34px}
.statrow > div{display:grid;gap:8px;align-content:start}
.statrow b{font-size:clamp(34px,3.4vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;background:var(--g);-webkit-background-clip:text;background-clip:text;
  color:transparent;background-size:400% 100%}
.statrow > div:nth-child(2) b{background-position:33% 0}
.statrow > div:nth-child(3) b{background-position:66% 0}
.statrow > div:nth-child(4) b{background-position:100% 0}
.statrow span{color:var(--slate);font-size:14.5px;line-height:1.5;max-width:20ch}
@media (max-width:900px){.statrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}}
@media (max-width:480px){.statrow{grid-template-columns:1fr}.statrow span{max-width:none}}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.pf{border:1px solid var(--hair);border-radius:18px;padding:20px 20px 18px;background:var(--card,#fff)}
.pf b{display:block;font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:300% 100%}
.pf:nth-child(2) b,.pf:nth-child(5) b{background-position:50% 0}
.pf:nth-child(3) b,.pf:nth-child(6) b{background-position:100% 0}
.pf span{display:block;margin-top:6px;font-weight:600;font-size:15px}
.pf small{display:block;margin-top:4px;color:var(--slate);font-size:13px;line-height:1.5}
.proofband .note{margin-top:26px;max-width:80ch}
.proofband .note a{white-space:nowrap}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr 1fr;gap:10px}.pf{padding:16px}.pf b{font-size:28px}}
@media (max-width:560px){.proof-grid{grid-template-columns:1fr}}

/* Job photographs under the proof band (home). Real photographs from DSA jobs, added 14 September
   2026. Three across on a desktop, one across on a phone. The caption sits under the picture rather
   than over it, because these are evidence and a caption over a photograph reads as advertising. */
.jobshots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:36px 0 0}
.jobshots figure{margin:0;display:grid;gap:12px}
.jobshots img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;background:var(--mist);box-shadow:0 18px 40px -30px rgba(6,13,26,.55)}
.jobshots figcaption{font-size:14.5px;line-height:1.55;color:var(--soft,#5A6880);padding:0 2px}
@media (max-width:980px){.jobshots{grid-template-columns:1fr 1fr;gap:18px}}
@media (max-width:640px){.jobshots{grid-template-columns:1fr}}

/* Real machine photographs on model and brand pages (Website SYSTEM 7.10G).
   The source images are manufacturer product shots on white, so the frame is a light
   card rather than the dark gradient the .photo slots use: a cut out machine on a dark
   panel reads as a mistake. */
.machine-shot{margin:0 0 18px;border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid var(--hair);box-shadow:0 1px 2px rgba(6,13,26,.05),0 18px 40px rgba(6,13,26,.07)}
.machine-shot img{display:block;width:100%;height:auto}
.machine-shot figcaption{padding:10px 16px 13px;font:500 12px/1.45 var(--mono);color:var(--slate);
  background:#fff;border-top:1px solid var(--hair);text-align:center}

/* Logo sizing (Stuart, 15 September 2026: too small in the header and in the footer).
   Header went 38px to 48px. The footer mark had no rule at all, so it was taking whatever
   the grid column gave it; it now has an explicit size. */
.fbrand img{width:auto;height:54px;max-width:100%;display:block;margin-bottom:16px}
@media (max-width:700px){.site-head .logo img{height:40px}.fbrand img{height:46px}}

/* Photo band (Stuart, 15 September 2026: the site is short on pictures, and pictures of
   copiers are what tell people we are a copier dealer). Three across, stacking on a
   phone. The frames keep the same hairline finish as every other photo on the site. */
.photoband .pb-head{margin-bottom:26px}
.photoband .pb-head h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em;margin:10px 0 0;text-wrap:balance}
.pb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Column count follows the number of pictures, so a band never leaves one item stranded on a
   row of its own. Four across at four, two by two at four on a narrower screen, five across at
   five. Set 15 September 2026 after the toner page band put one picture alone under three. */
.pb-grid.n2{grid-template-columns:repeat(2,1fr)}
.pb-grid.n4{grid-template-columns:repeat(4,1fr)}
.pb-grid.n5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){.pb-grid.n4,.pb-grid.n5{grid-template-columns:repeat(2,1fr)}}
.pb-item{margin:0}
.pb-item .photo{aspect-ratio:3/2;border-radius:20px}
.pb-item figcaption{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--slate)}
@media (max-width:900px){.pb-grid{grid-template-columns:1fr 1fr;gap:18px}}
@media (max-width:620px){.pb-grid{grid-template-columns:1fr}}

/* A real machine at the top of the page (Stuart, 15 September 2026: "that gets my solution
   of a copier being right at the very top"). Decorative, so it carries an empty alt and is
   hidden where it would crowd the cards.

   CHANGED 15 September 2026, same day, on Stuart's third pass: "The HP copier you've used has a
   jagged edge to it because of the way you put the box around it... let's not have a logo on that."
   It is now the unbranded house studio A3, matted by assets/hero/cut_hero_machine.py, which is
   where the whole reasoning lives. Two CSS consequences of that swap, both deliberate:
     - the old machine was charcoal and needed a blue glow behind it to separate from the navy.
       This one is near white and separates on its own, so the glow is down from .40 to .16 and
       the blue rim shadow is gone. Left as they were, a white machine sat in a blue halo.
     - brightness(1.04) went with it. Lifting a near white body clipped the highlights on the
       scanner lid; the grade that body needs is a small pull DOWN, and that is done in the image
       so the shadow filter does not have to fight it. */
.stage{position:relative}
.stage .glass{position:relative;z-index:2}
.hero-machine{position:absolute;right:-5%;bottom:-13%;width:74%;height:auto;z-index:1;
  filter:contrast(1.03) drop-shadow(0 36px 64px rgba(0,0,0,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.35));
  opacity:.95;pointer-events:none}
/* NO MASK ON .hero-machine, and that is deliberate. Both fades this element needs, left and foot,
   are baked into the asset's alpha by assets/hero/prep_stuart_machine.py, which is where the reasons
   for each are written down. A CSS mask on this image rendered a pale rectangle the size of the image
   box over the hero in Chromium on 15 September 2026, with two intersected layers and again with one.
   Proved by A/B against the live page at 2x: mask on, rectangle; mask off, clean; filter off,
   rectangle still there; mask and filter off, clean. The same file composited in PIL is clean, so it
   is the mask and not the file. If a fade needs changing, change the script and rebuild the asset. */
.stage::before{content:"";position:absolute;right:4%;bottom:-4%;width:56%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(closest-side,rgba(130,175,255,.16),transparent 72%);
  filter:blur(8px);z-index:0;pointer-events:none}
@media (max-width:1180px){.hero-machine,.stage::before{display:none}}

/* A product line with no photograph of its own now shows the photograph for its TYPE
   (Stuart, 15 September 2026). The code sits on the tile so the customer still knows
   exactly what they are looking at. */
.tl.tl-type{background:#fff}
.tl.tl-type img{mix-blend-mode:normal}
.tl-code{position:absolute;left:10px;bottom:9px;font:600 11px/1 var(--mono);letter-spacing:.06em;
  color:var(--ink);background:rgba(255,255,255,.86);border:1px solid var(--hair);
  padding:5px 8px;border-radius:7px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tl.big .tl-code{font-size:13px;padding:7px 11px;left:14px;bottom:13px}

/* ---------------------------------------------------------------- machines in the shop
   Added 15 September 2026 with the machine price rule. The tile row reuses .tgrid and .tcard
   exactly, so the machine row and the consumables row above it are the same object; only the
   column count differs, because there are six machine groups and five consumable ones. */
/* Seven since 16 September 2026, when the A3 tile split into A3 copiers and A3 inkjet. */
.tgrid.mgrid{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:1180px){.tgrid.mgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tcard small{font-size:12.5px;color:var(--soft);padding-left:4px;margin-top:-6px}
@media (max-width:1180px){.tgrid.mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.tgrid,.tgrid.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The machine page. One picture, the facts, the price or the reason there is not one. */
.mprod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;
  margin:0 0 34px;padding:24px;border:1px solid var(--hair);border-radius:24px;background:#fff}
.mprod-img{border-radius:18px;overflow:hidden;background:var(--mist);display:grid;place-items:center}
.mprod-img img{width:100%;height:auto;display:block}
.mprod-img .mtile{width:100%;aspect-ratio:16/10}
.mspec{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 20px;font-size:15px}
.mspec dt{color:var(--soft)}.mspec dd{margin:0;font-weight:600}
.mprice{margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.mprice b{font-size:34px;letter-spacing:-.03em}
.mprice span{font-size:13px;color:var(--soft)}
.mprice.askp{font-size:24px;font-weight:700}
.mnote{font-size:13.5px;line-height:1.55;color:var(--soft);margin:14px 0 0}
.side-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.side-list li{display:flex;justify-content:space-between;gap:10px;font-size:14px;
  padding-bottom:8px;border-bottom:1px solid var(--hair)}
.side-list li:last-child{border-bottom:0;padding-bottom:0}
.side-list small{color:var(--soft);white-space:nowrap}
.pgrid.mprods{margin-top:24px}
.pgrid.mprods .tl-art{aspect-ratio:1/1}
@media (max-width:860px){.mprod{grid-template-columns:1fr;gap:22px;padding:18px}}


/* The range badge on a shop card and a shop row, 16 September 2026. Genuine and compatible were
   indistinguishable in the results grid; Stuart was reading it off the photograph. Three states,
   and the genuine one is deliberately the quietest: it is the default expectation, so it confirms
   rather than announces. Premium compatible carries the brand gradient because it is the tier DSA
   actually wants to sell and the one Stuart asked about by name. */
.pc-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 0}
.rb{display:inline-block;font:700 10px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.rb-g{background:var(--mist);color:var(--slate);box-shadow:inset 0 0 0 1px var(--hair)}
.rb-c{background:#FFF4E6;color:#8A5200;box-shadow:inset 0 0 0 1px #F4D9B0}
.rb-p{background:var(--g);color:#fff;box-shadow:none}
/* a machine badge: it is neither genuine nor compatible, it is the thing the cartridges go in. */
.rb-m{background:var(--navy);color:#fff;box-shadow:none}
/* The toner only qualifier under the quick view figures, 16 September 2026. */
.cpp-note{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--slate)}
.cpp-note b{color:var(--ink)}
/* THE PREMIUM COMPATIBLE TILE, 16 September 2026, replacing 488 supplier branded photographs. The
   gradient sits as a hairline inside the frame rather than a border, so the tile keeps the same
   footprint as every other one in the grid and the row still lines up. */
.tl-prem{box-shadow:inset 0 0 0 2px transparent;position:relative}
.tl-prem::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:var(--g);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* BOTTOM RIGHT, not bottom left: tl-code sits bottom left and the two overlapped on the first
   build, printing PREMIUM straight through the cartridge code. Caught in a screenshot. */
.tl-prem-chip{position:absolute;right:10px;bottom:10px;z-index:2;background:var(--g);color:#fff;
  font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:7px}
.tl-prem.big .tl-prem-chip{right:14px;bottom:14px;font-size:11px;padding:6px 10px}
.shop-table .rb{font-size:9px;padding:2px 7px;vertical-align:middle}

/* TILE LABEL OVERFLOW, 16 September 2026. Stuart, on the Lexmark accessories: "the Lexmark word in
   the picture comes off the side, so that's horrific." .tl-b is uppercase mono at .16em tracking and
   .tl-code is absolutely positioned from the left, so on a narrow card in a four column grid a long
   brand or a long part code ran into or past the frame. Both are now bounded by the tile and ellipsis
   rather than escaping it, and the tracking eases off on the longer ones. Nothing about the layout
   changes for a short brand, which is why this was not caught earlier. */
.tl-b{max-width:calc(100% - 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl.ph .tl-b{max-width:calc(100% - 24px)}
.tl-code{max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-sizing:border-box}
.tl-o{max-width:100%;overflow-wrap:anywhere}
@media (max-width:520px){.tl-b{letter-spacing:.10em}}

/* THE ACCESSORY DRAWN TILE, 16 September 2026, and this is the SECOND wrong picture on these cards.
   The type tile was a photograph of a paper cabinet on every accessory, which made a keyboard shelf
   look like a paper bank. Gating that to tray-like kinds sent the rest to the drawn tile, which draws
   a TONER CARTRIDGE, so the keyboard shelf then looked like a cartridge instead. Both are false
   statements about the product. An accessory now draws a neutral module: a plain plate with a seam,
   no coloured end cap and no label window, which asserts nothing and lets the kind word do the work. */
.tl.k-accessory .tl-cart{width:70%;height:34%;border-radius:10px;
  background:linear-gradient(180deg,#48546B 0%,#2B3548 60%,#151D2C 100%)}
.tl.k-accessory .tl-cart::after{content:"";position:absolute;left:0;right:0;top:38%;height:1px;
  width:auto;border-radius:0;background:rgba(255,255,255,.22);box-shadow:none}
.tl.k-accessory .tl-cart i{left:50%;top:62%;width:26%;height:10%;transform:translateX(-50%);
  border-radius:3px;background:rgba(255,255,255,.55)}
.tl.k-accessory .tl-cart i::after{display:none}

/* The running cost block on a machine page. Deliberately quiet: it sits under the price and above the
   agreement offer, and its job is to hand the reader to the agreement, not to shout a number. */
.runcost{margin:18px 0 0;padding:14px 16px;border:1px solid var(--line,#E3E8EE);border-radius:14px;
  background:linear-gradient(180deg,#F7F9FB,#EEF2F6)}
.runcost h3{margin:0 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.rc-f{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 8px}
.rc-f span{font-size:14.5px;color:var(--slate)}
.rc-f b{font:600 21px/1 var(--mono);color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ TEXT STAYING INSIDE ITS BOX
   Stuart, 16 September 2026: "the Lexmark thing was going outside the picture and you fixed it, but
   we didn't fix it for everything else, which seems diabolical."

   He was right, and the earlier fix was the fourth time on this site that a correction landed only on
   the surface that prompted it. Swept properly instead: 11 page types at 1440, 1024 and 390 wide,
   every child of every card measured against its own box. 28 findings at 1440, 2 at 1024 and
   520 AT 390, which is where most of the traffic is.

   THE CAUSES WERE THREE white-space:nowrap RULES AND A BUTTON, not the tile labels at all. At 390px
   the grid is two columns, so a card is about 173px wide and its inner box about 151px. Into that:
     .cpp          nowrap, holding "0.8c a page, this cartridge"          about 150px+, cannot fit
     .pc-f em      nowrap, holding "In stock, QLD, NSW, VIC, SA and WA"   far over
     .rrp-line     "RRP $4,856.78" and "save $1,365.83" on one line       over
     .btn          no wrapping, holding "Ask to order this machine"       over at 1024 as well
   nowrap is right on a price and wrong on a sentence. Each is now allowed to wrap, and the two that
   are genuinely short keep their nowrap at desktop width where it looks better.

   The rule earned, and it is in DSA_OPEN_ITEMS.md as well: WHEN A FIX IS ABOUT LAYOUT OR WORDING,
   SWEEP EVERY PAGE TYPE AND EVERY WIDTH, not the one that prompted it. */
.cpp{white-space:normal;overflow-wrap:anywhere}
.pc-f em,.qv-price em{white-space:normal;overflow-wrap:anywhere}
.rrp-line{flex-wrap:wrap}
.pc-p,.mprice{min-width:0;max-width:100%}
.pc-p b,.mprice b{overflow-wrap:anywhere;min-width:0}
.btn{white-space:normal;overflow-wrap:break-word;max-width:100%}
/* break-word and NOT `anywhere`: `anywhere` breaks between ANY two characters, which made the
   parts table's action column one character wide and rendered "Add" as "Ad" over "d". The other
   `overflow-wrap:anywhere` rules in this file stay: they sit on part codes with no space to break
   at. Full working in DSA_SYSTEM_Store.md 7.5K. */
.pc-b,.pc-f,.pc-s,.pc-fits{min-width:0;max-width:100%}
.pc > *{min-width:0}
/* Nothing on any page may push the document sideways. A wide table, a code block or a spec list
   scrolls inside its own container instead; /toner/lexmark-20l8807-shelf was scrolling the whole
   page by 22px at 1024 before this. */
/* overflow-x:CLIP, not hidden, 16 September 2026, and this is the fix for a bug that had been live on
   every page with a sidebar. Stuart, reading the rental page: "underneath the phone number, it says
   talk to a person. There's a big blank area like we sometimes have." The blank was not a missing
   picture. `.sidebar` is `position:sticky;top:30px` and was DESIGNED to follow the reader down the
   page; measured on the built page, the first card's top sat at -1544 at a scroll of 4600, so it was
   not sticking at all and 1,710px of the right column was empty below it.
   THE CAUSE: `overflow-x:hidden` on html and body. Per the CSS spec, if one axis is not `visible` the
   other computes to `auto`, so html and body became scroll containers and every descendant sticky
   stuck to THEM rather than to the viewport, which in practice means not at all. `overflow-x:clip`
   does the same job of stopping sideways scroll and does NOT create a scroll container.
   The guard is belt and braces anyway: the 16 September layout sweep measured 0 sideways scroll on
   all 76 page and width combinations, so nothing relies on it. Re-measured after this change. */
html,body{overflow-x:clip}
table{max-width:100%}

/* ------------------------------------------------------- REFURBISHED MACHINES, /refurbished-copiers
   The bar of four facts at the top carries what is in the price, where DSA delivers, the rental terms
   and the stairs note. It is at the top rather than in fine print because "delivered, installed and
   trained" is the difference between DSA and a marketplace listing, and it is the reason there is no
   price on the card (data/refurbished.yaml). */
.rf-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:0 0 20px}
.rf-bar>div{border-left:3px solid var(--h,#FF2D8E);padding:2px 0 2px 14px;min-width:0}
.rf-bar>div:nth-child(2){--h:#A044FF}.rf-bar>div:nth-child(3){--h:#2E7BFF}.rf-bar>div:nth-child(4){--h:#12C8E8}
.rf-bar b{display:block;font-size:15px;margin-bottom:3px}
.rf-bar span{display:block;font-size:13.5px;color:var(--slate);line-height:1.5}
.rf-note{background:linear-gradient(180deg,#F7F9FB,#EEF2F6);border:1px solid var(--line,#E3E8EE);
  border-radius:16px;padding:16px 18px;margin:0 0 26px;font-size:14.5px;color:var(--slate);line-height:1.6}
.rf-note b{color:var(--ink)}
.rf-fin{display:inline-block;margin-top:8px;font-size:13px;color:var(--slate);text-decoration:underline}
.rf-fin:hover{color:var(--ink)}

/* RENTAL FINANCE on a machine page, 16 September 2026. Same frame as .runcost directly above it, on
   purpose: what it costs to run and what it costs to rent are the two monthly numbers a buyer is
   weighing, and they should read as a pair. data/finance.yaml holds the chart and the caveats. */
.rf-fin-box{margin-top:18px;padding:18px 20px;border:1px solid rgba(var(--t,11,31,58),.14);border-radius:16px;background:rgba(var(--t,11,31,58),.03)}
.rf-fin-box h3{font-size:17px;margin:0 0 10px}
.rf-terms{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 10px}
.rf-terms span{font-size:14px;color:var(--ink);white-space:normal}
.rf-fin-box .btn{margin-top:4px}

/* The sidebar photograph (Website SYSTEM doc 7.23). Rounded to match .side-card, and it is the last
   thing in a sticky column, so it must not be tall enough to push the cards out of view on a laptop. */
.side-photo{margin:0}
.side-photo img{width:100%;height:auto;display:block;border-radius:24px;max-height:320px;object-fit:cover}
.side-photo figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--slate)}

/* THE DARK PANEL (Website SYSTEM doc 7.24). Stuart, 16 September 2026, on the contact page's coverage
   block: "it just looks nowhere near as good as it does on a darker background." The map is a GLOW,
   and a glow needs something to glow against; everywhere else on the site it sits on the dark hero.
   This is the same ink as the hero so the two read as one system, and it is a block inside .prose, so
   the headings, paragraphs and chips inside it have to be lifted off the light-page colours. */
.dark-panel{margin:40px 0 0;padding:38px 40px 34px;border-radius:28px;background:var(--ink);color:#fff;
  box-shadow:0 40px 90px -40px rgba(6,13,26,.55)}
.dark-panel h2{color:#fff;margin-top:0}
.dark-panel p{color:rgba(255,255,255,.76)}
.dark-panel .mapwrap{margin:22px 0 4px}
.dark-panel .chips{margin-top:20px}
.dark-panel .chips a{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff}
.dark-panel .chips a:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)}
@media (max-width:620px){.dark-panel{padding:26px 20px 24px;border-radius:22px}}

/* The unlabelled hero map (page.hero_map). Smaller than the coverage hero's, because here it is a
   picture of the reach rather than a list to read: "just have it as a little image at the top". */
.hero-mapwrap{max-width:440px;margin-left:auto}
@media (max-width:900px){.hero-mapwrap{max-width:360px;margin:0 auto}}

/* THE HERO MAP IS BRIGHTER THAN THE ONE IN A DARK BAND, and it has to be. Stuart, 17 September 2026,
   on the contact hero: "the Australian map at the top, it needs to be quite a bit brighter. It doesn't
   stand out on that background." He is right, and the cause is that `ausmap` was drawn for the home
   page and the coverage band, where it sits on a near black panel with nothing else competing. The
   contact hero is the same ink but carries a headline, a lede and a list beside it, so the map has to
   hold its own against type rather than against empty space.
   Done with filter and opacity rather than by changing the SVG, so every other use of the map on the
   site is untouched: the land dots come up, the city glow comes up more, and the whole thing gains a
   little brightness and saturation. */
.hero-mapwrap .ausmap{filter:brightness(1.28) saturate(1.18)}
.hero-mapwrap .ausmap .land circle{opacity:1 !important}
.hero-mapwrap .ausmap .halo{opacity:.85}
.hero-mapwrap .ausmap .core{r:2.9}
.hero-mapwrap .ausmap .ring{stroke-width:1.15}