/* ═══════════════════════════════════════════════════════════════════
   ZALI INDUSTRIES — DESIGN SYSTEM v2
   Direction: Sport Bold, at the existing site's density.

   Density is expressed as tokens, not as a patch layer. Flip with
   <html data-density="compact"> or <html data-density="roomy">.
   Deliberately contains zero !important compaction overrides.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonts, served from this site ───────────────────────────────────
   Big Shoulders Display and Inter Tight (SIL Open Font License), from
   Google Fonts. Variable weight files, Latin and Latin Extended. The two
   Latin files are preloaded in each page head. */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:600 900;font-display:swap;src:url('../fonts/big-shoulders-display-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:600 900;font-display:swap;src:url('../fonts/big-shoulders-display-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-tight-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-tight-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── Palette ─────────────────────────────────────────────────────── */
:root{
  --ink:#0A0A0A;
  --ink-2:#151515;
  --ink-3:#232322;
  --paper:#FFFFFF;
  --concrete:#F1F1EE;
  --concrete-2:#E5E5E0;

  --blaze:#FF3B18;
  --blaze-deep:#CF2C0F;   /* small orange text and white-on-orange: 5.2:1 on white, 4.6:1 on concrete */
  --accent-text:var(--blaze-deep);
  --navy:#0B1F3F;

  /* On light. Both clear WCAG AA against --paper and --concrete. */
  --t-strong:#0A0A0A;
  --t-body:#44443F;
  --t-mute:#6E6E67;

  /* On dark. */
  --d-strong:#FFFFFF;
  --d-body:#C4C4BE;
  --d-mute:#8C8C85;

  --line-l:rgba(10,10,10,.12);
  --line-l-soft:rgba(10,10,10,.07);
  --line-d:rgba(255,255,255,.15);
  --line-d-soft:rgba(255,255,255,.08);

  --wa:#25D366;

  --disp:'Big Shoulders Display','Archivo Narrow','Arial Narrow',system-ui,sans-serif;
  --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --t-fast:.22s;
  --t-base:.38s;

  /* Shape. One rule for the whole site: buttons, chips and tags are
     pills; cards and media 12px; large blocks 16-20px; inputs 8px.
     Section backgrounds stay full width and square. */
  --r-xs:6px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-pill:999px;
  --shadow-lift:0 24px 48px -24px rgba(10,10,10,.34),0 2px 8px rgba(10,10,10,.05);

  /* Height of the sticky header, used to keep anchor targets clear of it. */
  --nav-h:96px;

  --z-nav:100;
  --z-drop:200;
  --z-drawer:999;
  --z-dev:1000;

  /* Icons: Tabler's outline set (MIT), 24px grid, 2px line, drawn as CSS
     masks in the text colour, so every arrow, chevron, plus and cross on
     the site matches. */
  --i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E");
  --i-arrow-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M18 13l-6 6M6 13l6 6'/%3E%3C/svg%3E");
  --i-arrow-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M5 12l6 6M5 12l6-6'/%3E%3C/svg%3E");
  --i-chev-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --i-chev-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-chev-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-upload:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5 5 5M12 4v12'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  --i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* ── Density: COMPACT (default — matches the current live site) ──── */
:root,
:root[data-density='compact']{
  --shell:1380px;
  --gut:clamp(16px,3vw,24px);

  --fs-d1:clamp(46px,5.2vw,76px);   /* hero            */
  --fs-d2:clamp(34px,3.6vw,48px);   /* section heading */
  --fs-d3:clamp(24px,2.4vw,30px);   /* tile heading    */
  --fs-d4:clamp(21px,1.7vw,23px);   /* product name    */
  --fs-body:16px;
  --fs-lead:17px;
  --fs-sm:14.5px;
  --fs-xs:12px;

  /* Three tiers, not one flat value — this is what gives the page
     rhythm while also making it shorter. */
  --sp-sec:clamp(40px,4.4vw,64px);
  --sp-sec-tight:clamp(28px,3vw,40px);
  --sp-head:18px;
  --sp-gap:10px;
  --sp-card:15px 16px 17px;
  --sp-foot:38px;

  --hero-pad:clamp(20px,2.4vw,34px);
  --btn-y:13px;
  --btn-x:22px;
}

/* ── Density: ROOMY (a measured step up) ─────────────────────────── */
:root[data-density='roomy']{
  --shell:1400px;
  --gut:clamp(18px,3.4vw,32px);

  --fs-d1:clamp(44px,6.4vw,96px);
  --fs-d2:clamp(32px,4.4vw,60px);
  --fs-d3:clamp(24px,2.8vw,36px);
  --fs-d4:clamp(23px,1.9vw,26px);
  --fs-body:16.5px;
  --fs-lead:17.5px;
  --fs-sm:14px;
  --fs-xs:11.5px;

  --sp-sec:clamp(46px,5.4vw,76px);
  --sp-sec-tight:clamp(30px,3.4vw,48px);
  --sp-head:28px;
  --sp-gap:14px;
  --sp-card:20px 22px 22px;
  --sp-foot:64px;

  --hero-pad:clamp(44px,5vw,72px);
  --btn-y:16px;
  --btn-x:28px;
}

/* ── Phones: larger type, more air ───────────────────────────────────
   Body copy goes to 17px and labels never drop below 12px, so every
   page stays easy to read on a small screen. */
@media(max-width:900px){:root{--nav-h:65px}}
@media(max-width:640px){
  :root,
  :root[data-density='compact']{
    --gut:20px;
    --fs-body:17px;
    --fs-lead:18px;
    --fs-sm:15.5px;
    --fs-xs:12.5px;
    --sp-sec:52px;
    --sp-sec-tight:40px;
    --sp-head:22px;
    --sp-gap:12px;
    --sp-card:16px 16px 18px;
    --hero-pad:26px;
    --btn-y:15px;
  }
}

/* ── Reset ───────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 18px);scroll-padding-bottom:88px}
@media(max-width:900px){html:has(body.has-pbar){scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}}
html:has(.mnav){scroll-padding-top:calc(var(--nav-h) + 86px)}
body{
  background:var(--paper);
  color:var(--t-body);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--blaze);color:#fff}
:focus-visible{outline:3px solid var(--blaze);outline-offset:2px}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Display type ────────────────────────────────────────────────────
   Big Shoulders is condensed, so it occupies far less width than a
   normal face at the same px. These sizes match the old site's optical
   weight rather than its raw numbers. */
.d1,.d2,.d3,.d4{
  font-family:var(--disp);
  text-transform:uppercase;
  font-weight:800;
  line-height:1;
  letter-spacing:-.004em;
  color:var(--t-strong);
  text-wrap:balance;
}
.d1{font-size:var(--fs-d1);font-weight:900;line-height:.92}
.d2{font-size:var(--fs-d2)}
.d3{font-size:var(--fs-d3);line-height:1}
.d4{font-size:var(--fs-d4);line-height:1;font-weight:700}
/* In Big Shoulders a comma drops 0.15em below the line and capitals rise
   0.8em above it, so stacked lines need a full 1.0 to keep a comma off the
   letter beneath. The hero size stays tighter: its lines carry no commas
   over letters. Phones and tablets get a little more air on top. */
@media(max-width:900px){
  .d1{line-height:.95}
  .d2{line-height:1.02}
  .d3{line-height:1}
  .d4{line-height:1.04}
}
p,.lead,li{text-wrap:pretty}
.on-dark .d1,.on-dark .d2,.on-dark .d3,.on-dark .d4{color:var(--d-strong)}
.blz{color:var(--blaze)}
/* Dark sections: the bright orange passes contrast there (5.1:1 on ink), so text accents switch back to it. */
.on-dark,.sec-dark,.sec-navy,.foot,.quote,.path.feat,.bignum,.price-card,.callout.on-ink{--accent-text:var(--blaze)}
/* Eyebrow. No triangle glyph, no invented coordinates. */
.kick{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--t-strong);
  display:inline-flex;align-items:center;gap:9px;
}
.kick::before{content:'';width:22px;height:2px;background:var(--blaze);flex-shrink:0}
.on-dark .kick{color:var(--d-strong)}
.kick .n{color:var(--t-mute);font-weight:600}
.on-dark .kick .n{color:var(--d-mute)}

.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--t-body);max-width:52ch}
.on-dark .lead{color:var(--d-body)}
.muted{color:var(--t-mute)}
.on-dark .muted{color:var(--d-mute)}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--btn-y) calc(var(--btn-x) + 4px);min-height:50px;
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border:2px solid transparent;border-radius:var(--r-pill);position:relative;overflow:hidden;
  isolation:isolate;-webkit-tap-highlight-color:transparent;
  transition:color .3s,border-color .3s,transform var(--t-fast) var(--e-out),box-shadow var(--t-base) var(--e-out);
  white-space:nowrap;
}
.btn:hover{box-shadow:0 14px 30px -16px rgba(10,10,10,.5)}
.btn:active{transform:scale(.97)}
.btn>*{position:relative;z-index:2}
.btn::after{
  content:'';position:absolute;inset:0;z-index:1;
  transform:translateY(101%);transition:transform .42s var(--e-out);
}
.btn:hover::after{transform:translateY(0)}
.btn .ar{transition:transform .32s var(--e-out)}
.btn:hover .ar{transform:translateX(5px)}
.btn:hover .ar-down{transform:translateY(3px)}

.btn-blaze{background:var(--blaze-deep);color:#fff;border-color:var(--blaze-deep)}
.btn-blaze::after{background:var(--ink)}
.btn-blaze:hover{border-color:var(--ink)}

.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ink::after{background:var(--blaze-deep)}
.btn-ink:hover{border-color:var(--blaze-deep)}

.btn-line{border-color:var(--line-l);color:var(--t-strong)}
.btn-line::after{background:var(--ink)}
.btn-line:hover{color:#fff;border-color:var(--ink)}

.on-dark .btn-line{border-color:rgba(255,255,255,.3);color:#fff}
.on-dark .btn-line::after{background:#fff}
.on-dark .btn-line:hover{color:var(--ink);border-color:#fff}

.btn-sm{min-height:42px;padding:10px 18px;font-size:12px}

/* ── Icons ─────────────────────────────────────────────────────────── */
.ar,.ic,.bb-arr,.bb-md-arr,.bb-md-back-arr,.srch-go,.card-add-i{
  display:inline-block;flex-shrink:0;width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--icon,var(--i-arrow)) center/contain no-repeat;mask:var(--icon,var(--i-arrow)) center/contain no-repeat;
}
.ar-down{--icon:var(--i-arrow-down)}
.ar-left{--icon:var(--i-arrow-left)}
.ic-x{--icon:var(--i-x)}
.btn-block{width:100%}

/* ── Section mark ──────────────────────────────────────────────────
   Every section opens with a thin rule and a short label, so each one
   reads as its own chapter whether backgrounds change, blend or match. */
.sec-mark{
  display:flex;align-items:center;gap:12px;
  margin:0 0 clamp(22px,2.6vw,36px);padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--line-l);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;
  color:var(--t-strong);
}
.sec-mark::before{content:'';width:22px;height:2px;background:var(--blaze);flex-shrink:0}
.on-dark .sec-mark{border-top-color:var(--line-d);color:var(--d-strong)}

/* ── Section shell ───────────────────────────────────────────────── */
.sec{padding-block:var(--sp-sec)}
.sec-dark{background:var(--ink);color:var(--d-body)}
.sec-navy{background:var(--navy);color:var(--d-body)}
.sec-soft{background:var(--concrete)}


/* ── Homepage colour story ───────────────────────────────────────────
   On the homepage, sections carry data-theme and zali-ui.js turns on
   .canvas: sections drop their own backgrounds and the page background
   eases between white, concrete, black and navy as each section reaches
   the middle of the screen. Text in every themed section switches
   between light and dark with it, so whatever is on screen stays
   readable. Without the script, or with reduced motion, sections simply
   keep their own colours. */
.canvas .sec-soft,.canvas .sec-dark,.canvas .sec-navy{background:transparent}
.canvas [data-theme]{color:var(--t-body)}
.canvas [data-theme].on-dark{color:var(--d-body)}
.canvas [data-theme] :is(.d1,.d2,.d3,.d4,.lead,.muted,.kick,.stat-v,.stat-k,.sec-head p,.lead strong,.sec-mark){
  transition:color .7s var(--e-io),border-color .7s var(--e-io);
}
.canvas [data-theme] .kick::before{transition:background-color .7s var(--e-io)}
.canvas [data-theme] .seclink{transition:color .7s var(--e-io),gap .28s var(--e-out)}
/* Off-screen sections switch at once (zali-ui.js adds .cs-now for one frame). */
.canvas .cs-now,.canvas .cs-now *,.canvas .cs-now *::before{transition:none !important}
/* The colours come from two fixed layers behind the page (zali-ui.js);
   only the top layer fades, so scrolling never repaints the page. */
body.canvas{background:transparent}
.canvas-bg{position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none}
.canvas-bg i{position:absolute;inset:0;background:var(--paper)}
.canvas-bg i+i{opacity:0;will-change:opacity}
/* Every homepage section is laid out up front, so the points where the
   colour changes never move while someone is scrolling. */
.canvas .cv{content-visibility:visible}
/* A frosted header would re-blur on every frame of a colour change. */
.canvas .bb-nav.scrolled::before{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
/* With no colour edges between sections, spacing does the separating. */
.canvas main>.sec[data-theme]{padding-block:clamp(52px,5.4vw,84px)}
/* Surfaces keep their own colours whatever the page behind them does. */
.card{--accent-text:var(--blaze-deep)}
.on-dark .card .d4{color:var(--t-strong)}
.mtile:not(.on-light){--accent-text:var(--blaze)}
.vcard,.swatch,.path:not(.feat),.tp,.tl-card,.form-card,.qbox{--accent-text:var(--blaze-deep)}
.on-dark :is(.vcard,.swatch,.path:not(.feat),.tp,.tl-card,.form-card) :is(.d1,.d2,.d3,.d4){color:var(--t-strong)}
.lead strong{color:var(--t-strong);font-weight:600}
.on-dark .lead strong{color:#fff}

.sec-head{
  display:grid;grid-template-columns:1fr auto;gap:20px;
  align-items:end;margin-bottom:var(--sp-head);
}
.sec-head .d2{margin-top:12px}
.sec-head p{margin-top:10px;max-width:56ch;font-size:var(--fs-sm)}
@media(max-width:760px){.sec-head{grid-template-columns:1fr;gap:14px}}

.seclink{
  font-family:var(--disp);font-size:18px;font-weight:700;text-transform:uppercase;
  color:var(--t-strong);display:inline-flex;align-items:center;gap:8px;
  padding-bottom:3px;border-bottom:2px solid currentColor;
  transition:color .28s,gap .28s var(--e-out);white-space:nowrap;
}
.seclink:hover{color:var(--accent-text);gap:14px}
.seclink .ar{width:18px;height:18px}
/* A bigger tap area without moving the underline. */
.seclink{position:relative}
.seclink::after{content:'';position:absolute;inset:-7px -4px -8px}
.on-dark .seclink{color:var(--d-strong)}
.on-dark .seclink:hover{color:var(--blaze)}

/* ── Media slot ──────────────────────────────────────────────────────
   A clearly-marked dev scaffold — NOT a shipped "PLACEHOLDER" sticker.
   Adding class "slot-live" to <html> hides every marker for clean
   previews and screenshots. */
.slot{
  position:relative;overflow:hidden;display:grid;place-items:center;border-radius:var(--r-md);
  background:repeating-linear-gradient(-45deg,
    var(--concrete) 0 10px, var(--concrete-2) 10px 20px);
}
.slot.on-ink{
  background:repeating-linear-gradient(-45deg,
    var(--ink-2) 0 10px, var(--ink-3) 10px 20px);
}
.slot-tag{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:4;
  display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px 8px;
  background:rgba(10,10,10,.9);border:1px dashed rgba(255,255,255,.45);
  color:#fff;padding:8px 10px;border-radius:var(--r-sm);
  font-size:10.5px;font-weight:600;letter-spacing:.03em;line-height:1.35;
}
.slot-tag b{color:var(--blaze);font-weight:700;flex-shrink:0}
/* Long filenames must wrap rather than push the label past the slot edge. */
.slot-tag>span{min-width:0;overflow-wrap:anywhere}
.slot-tag code{font-family:ui-monospace,'Cascadia Mono',monospace;font-size:10px;opacity:.92;overflow-wrap:anywhere}
.slot-play{
  width:44px;height:44px;border-radius:50%;background:var(--blaze);color:#fff;
  display:grid;place-items:center;font-size:15px;
  box-shadow:0 6px 20px rgba(10,10,10,.3);
}
html.slot-live .slot-tag,
html.slot-live .slot-play,
html.slot-live .slot-label{display:none}

/* Product image slots fill their frame. */
.card-fig .slot,.gal-main .slot{position:absolute;inset:0}
/* Slots inside a rounded frame let the frame do the rounding. */
.card-fig .slot,.gal-main .slot,.tile .slot,.mtile-media .slot,.swatch-fig .slot,.mdet-media .slot,.thumb .slot{border-radius:0}
/* Lighter marker for product cards: one small label, so a grid of
   forty cards doesn't turn into forty black boxes. */
.slot-label{
  position:absolute;left:10px;bottom:10px;z-index:4;
  background:rgba(255,255,255,.9);color:var(--t-mute);padding:4px 9px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
/* Category tiles carry their title at the bottom, so the marker moves to the top right. */
.tile .slot-tag{top:10px;bottom:auto;left:auto;right:10px;max-width:62%}
/* Phone tiles are too small for file names; keep just the marker. */
@media(max-width:640px){.tile .slot-tag>span{display:none}}

/* ── Product card ────────────────────────────────────────────────── */
.card{
  background:var(--paper);border:1px solid var(--line-l);display:block;
  border-radius:var(--r-md);overflow:hidden;isolation:isolate;
  transition:border-color .28s,transform .5s var(--e-out),box-shadow .5s var(--e-out);
}
.card:hover{border-color:var(--blaze);transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.card:active{transform:translateY(-2px) scale(.99)}
.card-fig{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--concrete)}
.card-fig img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e-out)}
.card:hover .card-fig img{transform:scale(1.05)}
.card-fig .slot{transition:transform 1.1s var(--e-out)}
.card:hover .card-fig .slot{transform:scale(1.05)}
.card-fig .ph{width:44%;height:44%;opacity:.18}
.card-flag{
  position:absolute;top:10px;left:10px;z-index:3;background:var(--blaze-deep);color:#fff;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;
}
.card-flag.ink{background:var(--ink)}
.card-body{padding:var(--sp-card);display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.card-body>div{min-width:0}
.card-eyebrow{font-size:13px;font-weight:600;letter-spacing:0;color:var(--t-mute)}
.card-body .d4{margin-top:5px;overflow-wrap:anywhere}
.card-moq{font-size:13px;font-weight:600;letter-spacing:0;color:var(--t-mute);white-space:nowrap;flex-shrink:0}

/* Card wrapper: the whole card lifts as one, the back view fades in on
   hover, and the add-to-quote button sits over the photo. */
.pcard{position:relative;transition:transform .5s var(--e-out)}
.pcard .card:hover{transform:none}
.card-alt{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--e-out)}
.card-alt.slot{border-radius:0;background:repeating-linear-gradient(45deg,var(--concrete) 0 10px,var(--concrete-2) 10px 20px)}
.card-add{
  position:absolute;top:10px;right:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;
  min-height:38px;padding:7px 13px 7px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.95);color:var(--t-strong);border:1px solid var(--line-l);
  font-size:13px;font-weight:700;box-shadow:0 8px 20px -12px rgba(10,10,10,.45);
  transition:opacity .3s var(--e-out),transform .4s var(--e-out),background-color .2s,color .2s,border-color .2s;
}
.card-add-i{--icon:var(--i-plus)}
.card-add.on .card-add-i{--icon:var(--i-check)}
.card-add.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.card-add:active{transform:scale(.95)}
@media(hover:hover){
  .pcard:hover{transform:translateY(-5px)}
  .pcard:hover .card{border-color:var(--blaze);box-shadow:var(--shadow-lift)}
  .pcard:hover .card-alt{opacity:1}
  .card-add{opacity:0;transform:translateY(-4px)}
  .pcard:hover .card-add,.card-add:focus-visible,.card-add.on{opacity:1;transform:none}
}
@media(max-width:640px){
  .card-add{width:42px;height:42px;padding:0;justify-content:center}
  .card-add [data-q-text]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.qpill{
  position:fixed;left:18px;bottom:18px;z-index:90;display:inline-flex;align-items:center;gap:10px;
  min-height:50px;padding:8px 9px 8px 18px;border-radius:var(--r-pill);background:var(--ink);color:#fff;
  font-size:14px;font-weight:700;box-shadow:0 12px 30px -12px rgba(10,10,10,.55);transition:transform .3s var(--e-out);
}
.qpill[hidden]{display:none}
.qpill b{display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:var(--r-pill);background:var(--blaze-deep);color:#fff;font-size:14px}
.qpill:hover{transform:translateY(-3px)}
.qpill.bump b{animation:qbump .5s var(--e-out)}
@keyframes qbump{40%{transform:scale(1.35)}}
@media(max-width:600px){.qpill{left:16px;bottom:16px}}

/* On phones the name matters more than the MOQ sitting beside it —
   stack them so the name gets the full card width. */
@media(max-width:640px){
  .card-body{flex-direction:column;align-items:flex-start;gap:9px}
  .card-moq{align-self:flex-start}
}

/* ── Grids ───────────────────────────────────────────────────────── */
/* minmax(0,1fr) not 1fr — 1fr floors at min-content, so a long
   condensed product name silently widens its column and the cards
   come out uneven. */
.g-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-gap)}
.g-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-gap)}
.g-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-gap)}
.g-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-gap)}
@media(max-width:1080px){.g-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.g-4,.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}.g-2{grid-template-columns:minmax(0,1fr)}}
/* Text-heavy cards read better one per row on phones; product cards stay two-up. */
@media(max-width:640px){.g-3:has(>.vcard),.g-4:has(>.vcard),.g-3:has(>.swatch){grid-template-columns:minmax(0,1fr)}}

/* ── Category tile ───────────────────────────────────────────────────
   The source art is landscape (1400×1050) for desktop and portrait
   (900×1125) for mobile — a deliberate pair. The tile changes shape to
   match so neither crop is thrown away. */
.tilegrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-gap)}
.tilegrid>*{grid-column:span 2}
.tilegrid>*:nth-child(1),.tilegrid>*:nth-child(2){grid-column:span 3}
@media(max-width:900px){
  .tilegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tilegrid>*,
  .tilegrid>*:nth-child(1),
  .tilegrid>*:nth-child(2){grid-column:span 1}
  /* Five tiles in two columns would leave one alone at the bottom, so
     the first runs full width as a banner and the other four sit 2x2. */
  .tilegrid>*:first-child{grid-column:1/-1;aspect-ratio:16/10}
}

.tile{position:relative;aspect-ratio:4/3;overflow:hidden;display:block;background:var(--ink-2);border-radius:var(--r-md);isolation:isolate}
@media(max-width:900px){.tile{aspect-ratio:4/5}}
.tile .slot,.tile img,.tile video,.tile picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile picture img{position:absolute;inset:0}
.tile img,.tile video,.tile .slot{transition:transform 1.1s var(--e-out)}
.tile:hover img,.tile:hover video,.tile:hover .slot{transform:scale(1.06)}
.tile::after{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(10,10,10,.42) 0%,rgba(10,10,10,0) 30%,
    rgba(10,10,10,.08) 52%,rgba(10,10,10,.88) 100%);
}
.tile-n{
  position:absolute;top:12px;left:14px;z-index:3;
  font-family:var(--disp);font-size:26px;font-weight:900;line-height:.8;color:rgba(255,255,255,.6);
}
.tile-body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px}
.tile-body .d3{color:#fff}
.tile-body p{font-size:14px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.78);margin-top:6px}
/* The bar grows with a transform (no re-layout on each frame of the hover). */
.tile-bar{height:3px;background:var(--blaze);margin-top:11px;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e-out)}
.tile:hover .tile-bar{transform:scaleX(1)}

/* ── Numbered rows (print methods) ───────────────────────────────── */
.rows{border-top:2px solid var(--line-d)}
.row{
  display:grid;grid-template-columns:66px 1fr auto;gap:clamp(14px,2.6vw,32px);
  align-items:center;padding-block:clamp(15px,1.9vw,24px);
  border-bottom:1px solid var(--line-d);position:relative;
  transition:padding-left .42s var(--e-out);
}
.row::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--blaze);
  transform:scaleY(0);transform-origin:bottom;transition:transform .38s var(--e-out);
}
.row:hover{padding-left:18px}
.row:hover::before{transform:scaleY(1);transform-origin:top}
.row-n{font-family:var(--disp);font-size:clamp(26px,3vw,42px);font-weight:900;line-height:.8;color:rgba(255,255,255,.28);transition:color .3s}
.row:hover .row-n{color:#fff}
.row-d{font-size:var(--fs-sm);color:var(--d-mute);max-width:34ch;text-align:right;transition:color .3s}
.row:hover .row-d{color:rgba(255,255,255,.9)}
@media(max-width:820px){.row{grid-template-columns:46px 1fr}.row-d{display:none}}

/* ── Stat band ───────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,36px)}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}}
.stat-v{font-family:var(--disp);font-size:clamp(40px,5.2vw,74px);font-weight:900;line-height:.8;color:var(--t-strong)}
.on-dark .stat-v{color:#fff}
.stat-v em{font-style:normal;color:inherit}
.stat-k{
  font-size:14px;font-weight:500;letter-spacing:0;
  color:var(--t-mute);margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line-l);
}
.on-dark .stat-k{color:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.2)}

/* ═══════════════════════════════════════════════════════════════════
   NAV — markup and behaviour unchanged from nav.js. Skin only.
   ═══════════════════════════════════════════════════════════════════ */
.topbar{
  background:var(--ink);color:rgba(255,255,255,.72);padding-block:7px;overflow:hidden;
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
/* As wide as its text (the items twice), so sliding it by half its width is exactly one set of
   items and the loop is seamless (padding-right repeats the gap after the last item). (At the screen's width it slid half a screen, then jumped back:
   on phones a 4px-a-second crawl.) About 16px a second on desktop, 30 on phones. */
.topbar-track{display:flex;width:max-content;gap:44px;padding-right:44px;white-space:nowrap;align-items:center;animation:tick 67s linear infinite}
@media(max-width:760px){.topbar-track{animation-duration:36s}}
.topbar-track span{flex-shrink:0;display:inline-flex;align-items:center;gap:9px}
.topbar-track .hot{color:var(--blaze)}
.topbar:hover .topbar-track{animation-play-state:paused}
.topbar.is-off .topbar-track{animation-play-state:paused}   /* off screen (zali-ui.js tickerPause) */
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.bb-nav{background:transparent;border-bottom:1px solid var(--line-l);font-family:var(--sans);position:sticky;top:0;z-index:var(--z-nav);transition:transform .5s var(--e-out),box-shadow var(--t-base) var(--e-out),border-color var(--t-base)}
/* Scrolling down slides the logo row away (desktop keeps the category
   bar; phones hide the bar). Scrolling up brings it back (zali-ui.js).
   --nav-vis is how much header is showing, for anything sticky below. */
:root{--nav-vis:var(--nav-h)}
/* Set on the sticky items that read it, not on <html>: a custom property on the root would
   restyle every element of the page each time the header flips (100 ms and more). */
.nav-compact :is(.mnav,.mdet-media,.gal,.faq-nav){--nav-vis:46px}
.bb-nav.compact{transform:translateY(-50px)}
@media(max-width:900px){
  .nav-compact :is(.mnav,.mdet-media,.gal,.faq-nav){--nav-vis:0px}
  .bb-nav.compact{transform:translateY(-101%)}
}
/* The background sits on a layer behind the nav, so it can turn frosted
   on scroll without making the nav a containing block for the drawer. */
.bb-nav::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--paper);transition:background-color var(--t-base)}
.bb-nav.scrolled{box-shadow:0 14px 34px -22px rgba(10,10,10,.45);border-bottom-color:transparent}
.bb-nav.scrolled::before{background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
.bb-nav-main{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut);display:flex;align-items:center;justify-content:space-between;height:50px}
@media(max-width:900px){.bb-nav-main{height:64px}}
@media(min-width:901px){.bb-nav-cta{min-height:40px;padding:8px 18px}}
.bb-nav-logo{display:flex;align-items:center;padding-block:8px}
.bb-nav-logo img{height:27px;width:auto}
.bb-nav-right{display:flex;align-items:center;gap:12px}
.bb-nav-cta{
  background:var(--blaze-deep);color:#fff !important;border:2px solid var(--blaze-deep);
  padding:11px 20px;min-height:44px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .25s,border-color .25s,transform var(--t-fast) var(--e-out);
}
.bb-nav-cta:active{transform:scale(.97)}
.bb-nav-cta:hover{background:var(--ink);border-color:var(--ink)}

.bb-burger{display:none;flex-direction:column;gap:4px;padding:10px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.bb-burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.bb-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bb-burger.open span:nth-child(2){opacity:0}
.bb-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.bb-nav-cats{background:transparent;border-top:1px solid var(--line-l-soft)}
.bb-nav-cats-inner{max-width:var(--shell);margin:0 auto;padding-inline:calc(var(--gut) - 8px);display:flex;align-items:stretch;justify-content:space-between;gap:20px;height:44px}
.bb-nav-cats-left,.bb-nav-cats-right,.bb-cat{display:flex;align-items:stretch}
.bb-cat-link{
  display:flex;align-items:center;gap:6px;padding:0 14px;height:100%;
  font-family:var(--disp);font-size:19px;font-weight:700;text-transform:uppercase;
  letter-spacing:.012em;color:var(--t-strong);
  border-bottom:3px solid transparent;transition:color .18s,border-color .18s;
}
.bb-cat-link:hover,.bb-cat:hover .bb-cat-link,.bb-cat:focus-within .bb-cat-link,.bb-cat.open .bb-cat-link{color:var(--blaze);border-bottom-color:var(--blaze)}
/* The page or category you're on keeps its orange underline. */
.bb-cat-link[aria-current]{border-bottom-color:var(--blaze)}
.bb-md-item[aria-current]{box-shadow:inset 3px 0 0 var(--blaze)}
.bb-cat-link .bb-arr{--icon:var(--i-chev-down);width:13px;height:13px;color:var(--t-mute);transition:transform .2s,color .2s}
.bb-cat:hover .bb-cat-link .bb-arr,.bb-cat.open .bb-cat-link .bb-arr{transform:rotate(180deg);color:var(--blaze)}

.bb-dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(12px);
  width:min(var(--shell),calc(100vw - 24px));
  background:var(--paper);border:1px solid var(--line-l);border-top:3px solid var(--blaze);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:0 34px 64px -30px rgba(10,10,10,.35);padding:22px 26px 24px;
  /* Every product is listed, so a long menu scrolls inside itself on short screens. */
  max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s var(--e-out),transform .45s var(--e-out),visibility 0s .24s;z-index:var(--z-drop);
}
/* Opens on hover, on tap, or from the keyboard with the down arrow. */
.bb-cat:hover .bb-dropdown,.bb-cat.open .bb-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  transition:opacity .24s var(--e-out),transform .45s var(--e-out),visibility 0s 0s;
}
.bb-cols{display:grid;gap:24px}
.bb-cols-3{grid-template-columns:repeat(3,1fr)}
.bb-cols-4{grid-template-columns:repeat(4,1fr)}
.bb-cols-5{grid-template-columns:repeat(5,1fr)}
.bb-cols-6{grid-template-columns:repeat(6,1fr)}
.bb-cols-7{grid-template-columns:repeat(7,1fr)}
.bb-col{display:flex;flex-direction:column;opacity:0;transform:translateY(10px);transition:opacity .35s var(--e-out),transform .55s var(--e-out)}
.bb-cat:hover .bb-col,.bb-cat.open .bb-col{opacity:1;transform:none}
.bb-cat:hover .bb-col:nth-child(2),.bb-cat.open .bb-col:nth-child(2){transition-delay:.04s}
.bb-cat:hover .bb-col:nth-child(3),.bb-cat.open .bb-col:nth-child(3){transition-delay:.08s}
.bb-cat:hover .bb-col:nth-child(4),.bb-cat.open .bb-col:nth-child(4){transition-delay:.12s}
.bb-cat:hover .bb-col:nth-child(5),.bb-cat.open .bb-col:nth-child(5){transition-delay:.16s}
.bb-cat:hover .bb-col:nth-child(6),.bb-cat.open .bb-col:nth-child(6){transition-delay:.2s}
.bb-cat:hover .bb-col:nth-child(7),.bb-cat.open .bb-col:nth-child(7){transition-delay:.24s}
.bb-col-h{
  font-family:var(--disp);font-size:17px;font-weight:700;text-transform:uppercase;
  letter-spacing:.012em;color:var(--t-strong);line-height:1.05;
  margin-bottom:11px;padding-bottom:8px;border-bottom:1px solid var(--line-l);position:relative;
}
.bb-col-h::after{content:'';position:absolute;bottom:-1px;left:0;width:22px;height:1px;background:var(--blaze)}
.bb-col-link{display:block;font-size:14px;color:var(--t-body);padding:5px 0;line-height:1.35;transition:color .14s,transform .14s}
.bb-col-link:hover{color:var(--accent-text);transform:translateX(3px)}
/* Escape closes a dropdown even while focus stays on its category link. */
.bb-cat.esc .bb-dropdown{opacity:0;visibility:hidden;pointer-events:none}

@media(max-width:900px){.bb-nav-cats{display:none}.bb-burger{display:flex}}

/* Mobile drawer — same markup nav.js emits, restyled. */
.bb-md-overlay{
  display:block;position:fixed;inset:0;background:rgba(10,10,10,.45);z-index:998;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--e-out),visibility 0s .45s;
}
.bb-md-overlay.open{opacity:1;visibility:visible;transition:opacity .45s var(--e-out),visibility 0s}
.bb-md-drawer{
  display:block;position:fixed;top:0;right:0;width:min(400px,100vw);height:100dvh;
  background:var(--paper);z-index:var(--z-drawer);transform:translateX(104%);visibility:hidden;
  border-radius:var(--r-xl) 0 0 var(--r-xl);box-shadow:-30px 0 70px -30px rgba(10,10,10,.45);
  transition:transform .6s var(--e-out),visibility 0s .6s;overflow:hidden;
}
.bb-md-drawer.open{transform:none;visibility:visible;transition:transform .6s var(--e-out),visibility 0s}
/* Menu items slide in one after another each time a panel opens. */
@keyframes mdIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.bb-md-drawer.open .bb-md-panel.active .bb-md-item{animation:mdIn .6s var(--e-out) both}
.bb-md-drawer.open .bb-md-panel.active .bb-md-item:nth-child(2){animation-delay:.03s}
.bb-md-drawer.open .bb-md-panel.active .bb-md-item:nth-child(3){animation-delay:.06s}
.bb-md-drawer.open .bb-md-panel.active .bb-md-item:nth-child(4){animation-delay:.09s}
.bb-md-drawer.open .bb-md-panel.active .bb-md-item:nth-child(5){animation-delay:.12s}
.bb-md-drawer.open .bb-md-panel.active .bb-md-item:nth-child(6){animation-delay:.15s}
.bb-md-drawer.open .bb-md-panel.active .bb-md-item:nth-child(7){animation-delay:.18s}
.bb-md-drawer.open .bb-md-panel.active .bb-md-item:nth-child(8){animation-delay:.21s}
.bb-md-drawer.open .bb-md-panel.active .bb-md-item:nth-child(9){animation-delay:.24s}
.bb-md-drawer.open .bb-md-panel.active .bb-md-item:nth-child(n+10){animation-delay:.27s}
.bb-md-close{position:absolute;top:10px;right:12px;z-index:10;width:44px;height:44px;display:grid;place-items:center;color:var(--ink)}
.bb-md-close .ic{width:24px;height:24px}
.bb-md-close:hover{color:var(--blaze)}
.bb-md-panel{
  position:absolute;inset:0;background:var(--paper);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s var(--e-io),visibility 0s .28s;overflow-y:auto;overflow-x:hidden;
  visibility:hidden;
}
.bb-md-panel.active{transform:translateX(0);visibility:visible;transition:transform .28s var(--e-io),visibility 0s}
.bb-md-panel[data-panel='root']{transform:translateX(-100%)}
.bb-md-panel[data-panel='root'].active{transform:translateX(0)}
.bb-md-panel-head{padding:16px 20px 12px;border-bottom:1px solid var(--line-l);display:flex;align-items:center;gap:12px;flex-shrink:0}
.bb-md-logo{height:25px;width:auto}
.bb-md-back{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--t-mute);padding:8px 8px 8px 0;min-height:44px}
.bb-md-back:hover{color:var(--accent-text)}
.bb-md-back-arr{--icon:var(--i-chev-left);width:20px;height:20px}
.bb-md-panel-title{font-family:var(--disp);font-size:24px;font-weight:800;text-transform:uppercase;color:var(--t-strong);flex:1}
.bb-md-list{flex:1;overflow-y:auto;padding-block:2px}
.bb-md-item{
  display:flex;align-items:center;width:100%;gap:8px;
  border-bottom:1px solid var(--line-l-soft);padding:14px 20px;min-height:52px;text-align:left;
  font-family:var(--disp);font-size:20px;font-weight:700;text-transform:uppercase;
  color:var(--t-strong);transition:background .14s,color .14s;
}
.bb-md-item:hover,.bb-md-item:active{background:var(--concrete);color:var(--blaze)}
.bb-md-item-text{flex:1}
.bb-md-item-meta{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--t-mute)}
.bb-md-arr{--icon:var(--i-chev-right);width:18px;height:18px;color:var(--t-mute)}
.bb-md-item:hover .bb-md-arr{color:var(--blaze)}
.bb-md-item-plain{font-family:var(--sans);font-size:16px;font-weight:500;text-transform:none;color:var(--t-body);background:var(--concrete);padding:13px 20px}
.bb-md-item-all{background:var(--concrete);color:var(--t-strong)}
.bb-md-foot{padding:16px 20px;border-top:1px solid var(--line-l);flex-shrink:0}
.bb-md-cta{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--blaze-deep);color:#fff !important;padding:16px 18px;text-align:center;min-height:52px;border-radius:var(--r-pill);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.bb-md-cta:hover{background:var(--ink)}
@media(min-width:901px){.bb-md-drawer,.bb-md-overlay{display:none !important}}
body.bb-md-locked,html:has(>body.bb-md-locked){overflow:hidden}

/* ── Footer ──────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--d-body);padding:var(--sp-foot) 0 22px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:clamp(22px,3vw,44px);padding-bottom:32px;border-bottom:1px solid var(--line-d)}
@media(max-width:1080px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
/* Four stacked columns made the footer 994px tall on a phone. Brand
   spans, link lists stay 2-up. */
@media(max-width:640px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .foot-visit{grid-column:1/-1}
}
.foot-visit address{font-style:normal;display:grid;gap:9px;font-size:var(--fs-sm);line-height:1.5;color:var(--d-body)}
.foot-visit a{justify-self:start;padding-block:11px;margin-block:-11px;color:var(--d-body);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.28);transition:color .2s}
.foot-visit a:hover{color:var(--blaze)}
.foot-band{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end;padding-block:30px;border-bottom:1px solid var(--line-d)}
.foot-news-h{display:block;margin-bottom:14px;font-family:var(--disp);font-size:clamp(22px,2.2vw,28px);font-weight:800;text-transform:uppercase;line-height:1;color:#fff}
.foot-news-row{display:flex;gap:8px;max-width:520px}
.foot-news input{flex:1;min-width:0;min-height:50px;padding:12px 18px;border-radius:var(--r-pill);border:1px solid var(--line-d);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:16px}
.foot-news input::placeholder{color:var(--d-mute)}
.foot-news input:focus{outline:none;border-color:var(--blaze);box-shadow:0 0 0 3px rgba(255,59,24,.25)}
.foot-news-msg{margin-top:10px;min-height:1.4em;font-size:13.5px;color:var(--d-mute)}
@media(max-width:420px){.foot-news-row{flex-direction:column}.foot-news-row .btn{width:100%}}
.foot-mark{height:30px;width:auto;filter:invert(1) brightness(2.3);margin-bottom:13px}
.foot p{font-size:var(--fs-sm);line-height:1.6;color:var(--d-mute);max-width:34ch}
.foot h5,.foot-h{font-family:var(--disp);font-size:18px;font-weight:800;text-transform:uppercase;color:#fff;margin-bottom:13px}
.foot-h::after{content:'';display:block;width:22px;height:2px;margin-top:9px;background:var(--blaze)}
.foot li{margin-bottom:2px}
.foot li a{display:inline-block;padding-block:6px;font-size:var(--fs-sm);color:var(--d-body);transition:color .22s}
.foot li a:hover{color:var(--blaze)}
.foot-social{display:flex;gap:8px;margin-top:16px}
.foot-social a{width:44px;height:44px;border:1px solid var(--line-d);border-radius:50%;display:grid;place-items:center;color:var(--d-body);transition:.25s}
.foot-social a:hover{background:var(--blaze);border-color:var(--blaze);color:#fff}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;font-size:13px;font-weight:500;letter-spacing:0;color:var(--d-mute)}
.foot-bot a{margin-left:14px}
.foot-bot a:hover{color:var(--blaze)}
@media(max-width:540px){.foot-bot a{margin:0 14px 0 0}}

/* ── Phone action bar (product pages) ────────────────────────────── */
.pbar{display:none}
@media(max-width:900px){
  .pbar{
    position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97);border-top:1px solid var(--line-l);box-shadow:0 -12px 30px -20px rgba(10,10,10,.4);
  }
  .pbar .btn{min-height:50px;padding-inline:14px;width:100%}
  .has-pbar{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .has-pbar .wabtn,.has-pbar .qpill{display:none}
}

/* ── Quote list on the contact page ──────────────────────────────── */
.qbox{margin-top:18px;background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r-md);padding:16px 18px 14px}
.qbox[hidden]{display:none}
.qbox-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.qbox-clear{min-height:36px;font-size:13.5px;font-weight:600;color:var(--t-mute);text-decoration:underline;text-underline-offset:3px}
.qbox ul{display:grid;gap:6px}
.qbox li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 6px 6px 12px;background:var(--concrete);border-radius:var(--r-sm);font-size:14.5px;font-weight:600;color:var(--t-strong)}
.qbox li a{min-width:0;overflow-wrap:anywhere}
.qbox li button{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--t-mute)}
.qbox li button .ic{width:18px;height:18px}
.qbox li button:hover{background:var(--paper);color:var(--t-strong)}
.qbox p{margin-top:10px;font-size:13.5px;color:var(--t-mute)}

/* ── Skip link ───────────────────────────────────────────────────── */
.skip{
  position:fixed;left:12px;top:12px;z-index:2000;padding:11px 18px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:14px;font-weight:700;
  transform:translateY(-220%);transition:transform .2s var(--e-out);
}
.skip:focus{transform:none}
main:focus{outline:none}

/* ── Header search ───────────────────────────────────────────────── */
.bb-search-btn{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 10px 0 14px;
  border:1px solid var(--line-l);border-radius:var(--r-pill);background:var(--concrete);
  color:var(--t-mute);font-size:14px;font-weight:500;transition:border-color .2s,color .2s;
}
.bb-search-btn:hover{border-color:var(--ink);color:var(--t-strong)}
@media(min-width:901px){.bb-search-btn{min-height:40px}}
.bb-search-lbl{min-width:132px;text-align:left}
.bb-search-kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;border:1px solid var(--line-l);border-radius:7px;background:var(--paper);font:600 12px/1 var(--sans);color:var(--t-mute)}
@media(max-width:900px){
  .bb-search-btn{width:44px;padding:0;justify-content:center;background:transparent;border-color:transparent;color:var(--t-strong)}
  .bb-search-lbl,.bb-search-kbd{display:none}
}
@media(max-width:400px){.bb-nav-right{gap:6px}.bb-nav-cta{padding:10px 14px;font-size:13px;letter-spacing:.08em}.bb-nav-cta .ar{display:none}}
@media(max-width:350px){.bb-nav-cta{padding:9px 11px;font-size:12px;letter-spacing:.05em}}
.srch{position:fixed;inset:0;z-index:1100}
.srch[hidden]{display:none}
.srch-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.45);opacity:0;transition:opacity .3s var(--e-out);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.srch.open .srch-backdrop{opacity:1}
.srch-panel{
  position:relative;display:flex;flex-direction:column;max-width:760px;max-height:min(80vh,720px);
  margin:clamp(12px,9vh,96px) auto 0;background:var(--paper);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(10,10,10,.55);
  opacity:0;transform:translateY(-14px) scale(.985);transition:opacity .3s var(--e-out),transform .45s var(--e-out);
}
.srch.open .srch-panel{opacity:1;transform:none}
.srch-bar{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--line-l)}
.srch-bar svg{flex-shrink:0;color:var(--t-mute)}
.srch-input{flex:1;min-width:0;padding:10px 0;border:0;outline:0;background:transparent;font:500 19px/1.3 var(--sans);color:var(--t-strong)}
.srch-input::placeholder{color:var(--t-mute)}
.srch-input::-webkit-search-cancel-button{display:none}
.srch-close{min-height:36px;padding:0 10px;border:1px solid var(--line-l);border-radius:8px;font-size:12px;font-weight:700;color:var(--t-mute)}
.srch-close:hover{border-color:var(--ink);color:var(--t-strong)}
.srch-body{overflow-y:auto;overscroll-behavior:contain;padding:10px 10px 14px}
.srch-pop{padding:10px 10px 6px}
.srch-pop[hidden]{display:none}
.srch-pop-h{margin-bottom:10px;font-size:13.5px;font-weight:600;color:var(--t-mute)}
.srch-pop-row{display:flex;flex-wrap:wrap;gap:8px}
.srch-chip{min-height:40px;padding:8px 15px;border-radius:var(--r-pill);background:var(--concrete);font-size:14px;font-weight:600;color:var(--t-strong);transition:background .2s}
.srch-chip:hover{background:var(--concrete-2)}
.srch-list{display:grid;gap:2px}
.srch-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;padding:8px 12px 8px 8px;border-radius:var(--r-md);transition:background .15s}
.srch-item:hover,.srch-item:focus-visible{background:var(--concrete);outline:none}
.srch-item:focus-visible{box-shadow:inset 0 0 0 2px var(--blaze)}
.srch-thumb{display:grid;place-items:center;width:48px;height:56px;overflow:hidden;border-radius:var(--r-sm);background:var(--concrete)}
.srch-thumb img{width:100%;height:100%;object-fit:cover}
.srch-thumb-slot{width:100%;height:100%;background:repeating-linear-gradient(-45deg,var(--concrete) 0 6px,var(--concrete-2) 6px 12px)}
.srch-mono{display:grid;place-items:center;width:100%;height:100%;background:var(--ink);color:#fff;font:800 22px/1 var(--disp)}
.srch-txt{display:grid;gap:3px;min-width:0}
.srch-txt b{font:700 18px/1.1 var(--disp);text-transform:uppercase;color:var(--t-strong);overflow-wrap:anywhere}
.srch-txt mark{padding:0 1px;border-radius:3px;background:rgba(255,59,24,.2);color:inherit}
.srch-txt small{font-size:13.5px;color:var(--t-mute)}
.srch-go{width:18px;height:18px;color:var(--t-mute);transition:transform .2s,color .2s}
.srch-item:hover .srch-go,.srch-item:focus-visible .srch-go{transform:translateX(3px);color:var(--accent-text)}
.srch-none{padding:18px 12px;font-size:15px;line-height:1.55;color:var(--t-body)}
.srch-none a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
body.srch-locked,html:has(>body.srch-locked){overflow:hidden}
@media(max-width:640px){
  .srch-panel{height:100dvh;max-height:100dvh;margin:0;max-width:none;border-radius:0}
  .srch-input{font-size:17px}
}

/* ── Floating contact ────────────────────────────────────────────── */
.wabtn{
  position:fixed;right:18px;bottom:18px;z-index:90;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--wa);color:var(--ink);padding:13px 20px 13px 16px;min-height:50px;border-radius:var(--r-pill);
  font-size:14px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 8px 26px rgba(10,10,10,.24);transition:transform .45s var(--e-out),opacity .3s var(--e-out),background .25s;
}
.wabtn:hover{transform:translateY(-3px);background:#1EBA59}
/* Out of the way: slides off with the header while you scroll down,
   stays off over the footer (which has the same links) and while you type. */
.nav-compact .wabtn,.foot-in .wabtn,.typing .wabtn{transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none}
.typing .qpill{opacity:0;pointer-events:none}
@media(max-width:600px){.wabtn{padding:13px;bottom:16px}.wabtn span{display:none}}

/* ── Reveal primitives ───────────────────────────────────────────────
   Scoped to .js, which is set by an inline script in <head>. If that
   script or the GSAP bundle never runs, content stays visible instead
   of the page rendering permanently blank. */
.js .rv{opacity:0;transform:translateY(14px)}
/* Marked by an inline script at the end of each page: anything already
   on screen when the page opens shows at once, without waiting for the
   animation scripts. */
.js .rv.rv-in{opacity:1;transform:none}
/* If the motion script never starts (blocked CDN, very old browser), a
   timer in <head> adds .rv-safe and everything simply shows. */
.rv-safe .rv{opacity:1 !important;transform:none !important}
.rv-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.rv-line>span{display:block}

/* ═══════════════════════════════════════════════════════════════════
   SHARED PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page hero (inner pages) ─────────────────────────────────────── */
/* One column: the headline, then the intro right under it at reading width. */
.phero{padding-block:var(--hero-pad) clamp(10px,1.4vw,18px)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,20px);align-items:start}
.phero-grid>div:last-child{max-width:62ch}
.phero+.sec,.phero+.sec-tight{padding-top:clamp(24px,2.8vw,40px)}
.canvas main>.phero+.sec[data-theme]{padding-top:clamp(28px,3vw,44px)}
.phero .d1{margin-top:12px}
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;font-weight:500;letter-spacing:0;color:var(--t-mute)}
.crumb a{transition:color .2s;padding-block:11px;margin-block:-11px}
.crumb a:hover{color:var(--accent-text)}
.crumb .sep{opacity:.45}
.crumb [aria-current]{color:var(--t-strong)}

/* ── Method tile (print processes) ───────────────────────────────── */
.mtiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-gap)}
@media(max-width:1180px){.mtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.mtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mtile{
  display:flex;flex-direction:column;background:var(--ink-2);
  border:1px solid var(--line-d);border-radius:var(--r-md);overflow:hidden;isolation:isolate;
  transition:border-color .28s,transform .5s var(--e-out),box-shadow .5s var(--e-out);
}
.mtile-media .slot{transition:transform 1.1s var(--e-out)}
.mtile:hover .mtile-media .slot{transform:scale(1.05)}
.mtile:hover{border-color:var(--blaze);transform:translateY(-4px)}
/* Process footage is shot vertically (1080×1920), and the stills are
   portrait or square — so the media window is portrait, not landscape. */
.mtile-media{position:relative;aspect-ratio:3/4;overflow:hidden;flex-shrink:0;background:var(--ink-3)}
.mtile-media .slot,.mtile-media img,.mtile-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Video sits above its poster and fades in once it actually starts. */
.mtile-media video{opacity:0;transition:opacity .35s var(--e-out);z-index:2}
.mtile-media video.playing{opacity:1}
.mtile-media .vhint{
  position:absolute;right:9px;bottom:9px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(10,10,10,.78);color:#fff;padding:5px 9px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill);
  transition:opacity .3s;pointer-events:none;
}
.mtile:hover .vhint{opacity:0}
.mtile-n{
  position:absolute;top:10px;left:10px;z-index:4;
  font-family:var(--disp);font-size:15px;font-weight:800;letter-spacing:.06em;
  background:var(--blaze-deep);color:#fff;padding:5px 11px;border-radius:var(--r-pill);
}
.mtile-body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1;gap:9px}
.mtile-body .d3{color:var(--d-strong);font-size:clamp(19px,1.9vw,25px)}
.mtile-body p{font-size:var(--fs-sm);line-height:1.5;color:var(--d-mute)}
.mtile-spec{margin-top:auto;padding-top:10px;border-top:1px solid var(--line-d);display:grid;gap:5px}
.mtile-spec div{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-xs)}
.mtile-spec dt{color:var(--d-mute);letter-spacing:0;font-weight:500}
.mtile-spec dd{color:var(--d-strong);font-weight:600}
.mtile-go{
  font-size:14px;font-weight:700;letter-spacing:0;
  color:var(--d-strong);display:inline-flex;align-items:center;gap:7px;
  transition:gap .28s var(--e-out);
}
.mtile:hover .mtile-go{gap:12px}
.mtile-go .ar{color:var(--blaze);width:15px;height:15px}
.mtile.on-light .mtile-go{color:var(--t-strong)}
/* On light backgrounds (print-methods page) */
.mtile.on-light{background:var(--paper);border-color:var(--line-l)}
.mtile.on-light .d3{color:var(--t-strong)}
.mtile.on-light p{color:var(--t-body)}
.mtile.on-light .mtile-spec{border-top-color:var(--line-l)}
.mtile.on-light .mtile-spec dt{color:var(--t-mute)}
.mtile.on-light .mtile-spec dd{color:var(--t-strong)}

/* ── Method detail (print-methods page) ──────────────────────────────
   Each method gets the full story: what it is, a photo or video, six
   key specs, five practical points and a quote button. Desktop puts the
   media on the left and keeps it in view while you read; phones stack
   it as heading, media, specs, points. */
.mnav{
  position:sticky;top:calc(var(--nav-vis) + 12px);z-index:20;transition:top .5s var(--e-out);
  display:flex;gap:6px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;
  padding:6px;margin:0 0 6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.88);border:1px solid var(--line-l);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  box-shadow:0 14px 30px -22px rgba(10,10,10,.4);
}
.mnav::-webkit-scrollbar{display:none}
/* On narrow screens the bar scrolls sideways; fade the edge as a hint. */
@media(max-width:640px){
  .mnav{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .mnav.at-end{-webkit-mask-image:none;mask-image:none}
}
.mnav a{
  flex-shrink:0;display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;letter-spacing:0;color:var(--t-body);
  transition:background var(--t-fast),color var(--t-fast);
}
.mnav a:hover{color:var(--t-strong);background:var(--concrete)}
.mnav a.active{background:var(--ink);color:#fff}

.mdet{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"media head" "media body";grid-template-rows:auto 1fr;
  column-gap:clamp(24px,4.4vw,72px);row-gap:0;
  padding-block:clamp(30px,4.4vw,64px);border-top:1px solid var(--line-l);
}
.mdet:first-of-type{border-top:0}
.mdet-head{grid-area:head;align-self:end}
.mdet-media{
  grid-area:media;align-self:start;position:sticky;top:calc(var(--nav-vis) + 86px);transition:top .5s var(--e-out);
  aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;background:var(--concrete);
}
.mdet-media .slot,.mdet-media img,.mdet-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The method video fades in over its photo once it plays, and out when it stops. */
.mdet-media video{opacity:0;transition:opacity .35s var(--e-out);z-index:2}
.mdet-media video.playing{opacity:1}
.mdet-body{grid-area:body}
.mdet-badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:12px;
}
.mdet-head .d2{margin-bottom:14px}
.mdet-head .lead{max-width:58ch}
.mdet-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:22px}
.mdet-specs>div{background:var(--concrete);border-radius:var(--r-sm);padding:13px 15px 14px}
.mdet-specs dt{font-size:13px;font-weight:500;letter-spacing:0;color:var(--t-mute);margin-bottom:6px}
.mdet-specs dd{font-family:var(--disp);font-size:clamp(20px,1.8vw,24px);font-weight:800;text-transform:uppercase;line-height:1;color:var(--t-strong)}
/* A plain list in two columns: no bullets, no rules. */
.mdet-points{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.mdet-points li{font-size:var(--fs-sm);line-height:1.5;color:var(--t-body)}
@media(max-width:640px){.mdet-points{grid-template-columns:minmax(0,1fr);gap:10px}}
.mdet-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
@media(max-width:900px){
  .mdet{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "body";grid-template-rows:auto}
  .mdet-head{align-self:auto}
  .mdet-media{position:relative;top:auto;aspect-ratio:1/1;margin-top:20px}
  .mdet-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Chips / filters ─────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;min-height:44px;padding:11px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line-l);background:var(--paper);color:var(--t-body);
  font-size:14px;font-weight:600;letter-spacing:0;
  transition:border-color .2s,color .2s,background .2s,transform var(--t-fast) var(--e-out);
}
.chip:active{transform:scale(.96)}
.chip:hover{border-color:var(--ink);color:var(--t-strong)}
.chip[aria-selected='true'],.chip[aria-pressed='true'],.chip.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── Accordion ───────────────────────────────────────────────────── */
.acc{border-top:1px solid var(--line-l)}
.acc details{border-bottom:1px solid var(--line-l)}
.acc summary{
  cursor:pointer;list-style:none;padding:15px 0;min-height:52px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-family:var(--disp);font-size:clamp(19px,2vw,25px);font-weight:700;
  text-transform:uppercase;line-height:1.05;color:var(--t-strong);
  transition:color .22s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--blaze)}
.acc summary::after{
  content:'';width:20px;height:20px;flex-shrink:0;background:currentColor;
  -webkit-mask:var(--i-plus) center/contain no-repeat;mask:var(--i-plus) center/contain no-repeat;
  transition:transform .28s var(--e-out);
}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details.closing summary::after{transform:none}
.acc-body{padding:0 0 18px;font-size:var(--fs-sm);line-height:1.65;color:var(--t-body);max-width:74ch}
.acc-body p+p{margin-top:10px}
.acc-body strong{color:var(--t-strong);font-weight:600}

/* ── Table ───────────────────────────────────────────────────────── */
.tbl-wrap{border:1px solid var(--line-l);border-radius:var(--r-md);overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:660px}
.tbl th,.tbl td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line-l)}
.tbl th{
  background:var(--concrete);font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--t-mute);white-space:nowrap;
}
.tbl td{color:var(--t-body)}
.tbl td:first-child{
  font-family:var(--disp);font-size:17px;font-weight:700;text-transform:uppercase;
  color:var(--t-strong);white-space:nowrap;
}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--concrete)}

/* ── Forms ───────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t-body)}
.field .req{color:var(--accent-text)}
/* Optional fields say so, quietly, at the end of the label row; required
   fields carry no mark. Orange stays for actions and errors. */
.lbl-opt{float:right;margin-left:12px;font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--t-mute)}
legend:has(>.lbl-opt){width:100%}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;   /* 16px stops iOS zoom-on-focus */
  padding:12px 14px;min-height:48px;width:100%;border-radius:var(--r-sm);
  border:1px solid var(--line-l);background:var(--paper);color:var(--t-strong);
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,59,24,.16);
}
.field-help{font-size:13px;color:var(--t-mute)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}
.field-row .field{margin-bottom:0}
@media(max-width:600px){.field-row{grid-template-columns:1fr;gap:0;margin-bottom:0}
  .field-row .field{margin-bottom:16px}}
.form-card{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,32px)}
.form-step{
  font-family:var(--disp);font-size:20px;font-weight:800;text-transform:uppercase;
  color:var(--t-strong);margin:22px 0 14px;padding-bottom:9px;
  border-bottom:1px solid var(--line-l);display:flex;align-items:center;gap:10px;
}
.form-step:first-child{margin-top:0}
.form-step i{
  font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;color:#fff;background:var(--blaze-deep);padding:3px 10px;border-radius:var(--r-pill);
}
.drop{
  border:1.5px dashed var(--line-l);background:var(--concrete);border-radius:var(--r-md);
  padding:22px 18px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;
}
.drop:hover,.drop.is-over{border-color:var(--ink);background:var(--concrete-2)}
.drop-ico{display:block;position:relative;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:var(--paper);transition:transform .3s var(--e-out)}
.drop-ico::before{content:'';position:absolute;inset:12px;background:var(--t-strong);-webkit-mask:var(--i-upload) center/contain no-repeat;mask:var(--i-upload) center/contain no-repeat}
.drop.is-over .drop-ico{transform:translateY(-3px)}
.drop b{display:block;font-size:var(--fs-sm);color:var(--t-strong);margin-bottom:4px}
.drop span{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t-mute)}
.opt{
  display:block;border:1px solid var(--line-l);background:var(--paper);border-radius:var(--r-sm);
  padding:13px 15px;cursor:pointer;transition:border-color .2s,box-shadow .2s;min-height:48px;
}
.opt:hover{border-color:var(--ink)}
.opt input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;min-height:0;padding:0;margin:0}
.opt:has(input:checked){border-color:var(--blaze);box-shadow:inset 0 0 0 1px var(--blaze)}
.opt b{display:block;font-size:14px;font-weight:600;color:var(--t-strong)}
.opt span{font-size:13.5px;color:var(--t-mute);line-height:1.4}
.submit-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line-l);
}
.submit-row .note{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t-mute)}
@media(max-width:600px){.submit-row{flex-direction:column;align-items:stretch}.submit-row .btn{width:100%}}

/* ── Timeline (how it works) ───────────────────────────────────────
   Compact steps a customer can scan: when it happens, what happens in
   one sentence, and the two or three facts that matter as small tags.
   Desktop reads across one row per step; phones stack it. */
.tl{position:relative;list-style:none}
.tl::before{content:'';position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--line-l)}
/* Progress line drawn over the track as you scroll (zali-ui.js). */
.tl-progress{position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--blaze);transform:scaleY(0);transform-origin:top;z-index:1}
/* Each step sits above the progress line, so the line runs behind the numbers
   (the reveal leaves a transform on each step, which makes it its own layer). */
.tl-step{position:relative;z-index:2;display:grid;grid-template-columns:40px 1fr;gap:clamp(14px,2vw,24px);margin-bottom:10px;align-items:center}
.tl-step:last-child{margin-bottom:0}
.tl-n{
  width:40px;height:40px;background:var(--ink);color:#fff;border-radius:50%;
  font-family:var(--disp);font-size:18px;font-weight:800;
  display:grid;place-items:center;position:relative;z-index:2;
  transition:background-color .45s var(--e-out),transform .45s var(--e-out),box-shadow .45s var(--e-out);
}
.tl-n.on{background:var(--blaze-deep);transform:scale(1.08);box-shadow:0 0 0 6px rgba(255,59,24,.14)}
.tl-card{
  display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:6px 24px;
  background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r-md);padding:16px 20px;
  transition:border-color .25s,box-shadow .45s var(--e-out);
}
.tl-card:hover{border-color:var(--ink);box-shadow:var(--shadow-lift)}
.tl-when{font-size:13.5px;font-weight:700;letter-spacing:0;color:var(--t-strong);white-space:nowrap}
.tl-main h3{font-family:var(--disp);font-size:clamp(21px,1.9vw,25px);font-weight:800;text-transform:uppercase;line-height:1;color:var(--t-strong)}
.tl-main p{margin-top:5px;font-size:var(--fs-sm);line-height:1.5;color:var(--t-body);max-width:58ch}
.tl-facts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:320px;list-style:none}
.tl-facts li{padding:6px 12px;border-radius:var(--r-pill);background:var(--concrete);font-size:13px;font-weight:600;line-height:1.3;color:var(--t-strong)}
.tl-sum{font-size:var(--fs-lead);line-height:1.5;color:var(--t-body);margin-bottom:18px;max-width:60ch}
.pane-more{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--sp-gap);margin-top:var(--sp-head);align-items:stretch}
.pane-more>:only-child{grid-column:1/-1}
@media(max-width:900px){
  .tl-step{align-items:start}
  .tl-card{grid-template-columns:minmax(0,1fr);gap:4px;padding:15px 16px 16px}
  .tl-facts{justify-content:flex-start;max-width:none;margin-top:8px}
  .pane-more{grid-template-columns:minmax(0,1fr)}
}

/* ── Callout ─────────────────────────────────────────────────────── */
.callout{background:var(--concrete);border-left:3px solid var(--blaze);border-radius:var(--r-md);padding:clamp(18px,2.4vw,28px)}
.callout.on-ink{background:var(--ink-2);border-left-color:var(--blaze)}
.callout .d3{margin-bottom:10px}
.callout p{font-size:var(--fs-sm);line-height:1.6;max-width:74ch}
.callout ul{columns:2;column-gap:32px;margin-top:12px}
@media(max-width:720px){.callout ul{columns:1}}
.callout li{font-size:var(--fs-sm);line-height:1.5;padding:6px 0 6px 20px;position:relative;break-inside:avoid;color:var(--t-body)}
.callout li::before{content:'';position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--blaze)}
.callout.on-ink li{color:var(--d-body)}

/* ── Big number callout ──────────────────────────────────────────── */
.bignum{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,36px);align-items:center;align-content:center;background:var(--ink);color:var(--d-body);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,32px)}
@media(max-width:640px){.bignum{grid-template-columns:1fr;gap:12px}}
.bignum-v{font-family:var(--disp);font-size:clamp(52px,7vw,88px);font-weight:900;line-height:.8;color:var(--blaze)}
.bignum .d3{color:#fff;margin-bottom:8px}
.bignum p{font-size:var(--fs-sm);color:var(--d-mute);line-height:1.55;max-width:60ch}

/* ── Swatch card (fabrics) ───────────────────────────────────────── */
.swatch{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r-md);overflow:hidden;isolation:isolate;transition:border-color .25s,transform .5s var(--e-out),box-shadow .5s var(--e-out);display:block}
.swatch:hover{border-color:var(--blaze);transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.swatch-fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--concrete)}
.swatch-fig .slot,.swatch-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.swatch-body{padding:15px 16px 17px}
.swatch-body .d4{margin-bottom:5px}
.swatch-spec{font-size:13px;font-weight:600;letter-spacing:0;color:var(--t-mute);margin-bottom:9px}
.swatch-body p{font-size:var(--fs-sm);line-height:1.5;color:var(--t-body);margin-bottom:12px}
.swatch-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-top:11px;border-top:1px solid var(--line-l)}
.swatch-meta dt{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--t-mute);margin-bottom:2px}
.swatch-meta dd{font-size:13.5px;font-weight:600;color:var(--t-strong)}

/* ── Contact path card ───────────────────────────────────────────── */
.path{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r-md);padding:clamp(18px,2.2vw,26px);transition:border-color .25s,transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.path:hover{border-color:var(--blaze);transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.path.feat{background:var(--ink);border-color:var(--ink);color:var(--d-body)}
.path.feat .d3{color:#fff}
.path.feat p{color:var(--d-mute)}
.path-ico{width:44px;height:44px;border-radius:var(--r-sm);background:var(--concrete);color:var(--t-strong);display:grid;place-items:center;margin-bottom:14px}
.path.feat .path-ico{background:rgba(255,255,255,.08);color:#fff}
.path-tag{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--t-mute);margin-bottom:8px}
.path.feat .path-tag{color:var(--blaze)}
.path .d3{margin-bottom:9px}
.path p{font-size:var(--fs-sm);line-height:1.55;color:var(--t-body);margin-bottom:14px;flex:1}
.path-val{font-size:13.5px;font-weight:600;color:var(--t-strong);padding-top:11px;border-top:1px solid var(--line-l);margin-bottom:13px;overflow-wrap:anywhere}
.path.feat .path-val{color:#fff;border-top-color:var(--line-d)}

/* ── Value / QC card ─────────────────────────────────────────────── */
.vcard{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r-md);padding:clamp(16px,2vw,24px);transition:border-color .25s,box-shadow .45s var(--e-out)}
.vcard:hover{box-shadow:var(--shadow-lift)}
.vcard:hover{border-color:var(--blaze)}
.vcard-n{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t-mute);margin-bottom:12px}
.vcard .d3{margin-bottom:9px}
.vcard p{font-size:var(--fs-sm);line-height:1.55;color:var(--t-body)}
/* About: the three values as statements with a line above, no boxes. */
.vals{gap:clamp(22px,3vw,44px)}
.vals>.vcard,.vals>.vcard:hover{background:none;border:0;border-top:2px solid var(--t-strong);border-radius:0;padding:18px 0 0;box-shadow:none}
.vals .d3{font-size:clamp(26px,2.6vw,34px);margin-bottom:12px}

/* ── Vertical rhythm helper ──────────────────────────────────────── */
.sec-tight{padding-block:var(--sp-sec-tight)}

/* ── Performance ─────────────────────────────────────────────────────
   Sections keep the .cv class but are rendered normally: skipping off-screen
   sections (content-visibility) saved little on pages this size, and its
   placeholder heights made the page height and the scrollbar jump while
   scrolling, with a ScrollTrigger re-measure after each jump. */

/* ── Mobile refinements ──────────────────────────────────────────── */
@media(max-width:640px){
  /* The hero image slot was eating 377px before any content. */
  .hero-media .slot{aspect-ratio:4/3.2}

  /* Print methods stack one per row on phones, each with its photo,
     description and specs in full. Nothing is hidden off to the side. */
  .mtiles{grid-template-columns:minmax(0,1fr);gap:14px}
  .mtile-media{aspect-ratio:16/10}
  .mtile-body{padding:18px 18px 20px;gap:12px}
  .mtile-body .d3{font-size:30px}
  .mtile-body .d3 br{display:none}

  /* Paired buttons stack full width so they line up. */
  .hero-ctas,.cta-row,.mdet-cta,.quote-cta{flex-direction:column;align-items:stretch}
  .hero-ctas .btn,.cta-row .btn,.mdet-cta .btn,.quote-cta .btn{width:100%}

  /* Tighter tile chrome so the bigger names have somewhere to go. */
  .tile-body{padding:12px}
  .tile-n{font-size:22px;top:10px;left:11px}
  .tile-bar{margin-top:9px}

  /* Section heads don't need desktop-sized gaps on a phone. */
  .sec-head{margin-bottom:calc(var(--sp-head) - 4px)}
  .sec-head .d2{margin-top:9px}
  .sec-head p{margin-top:12px}
  body,.lead{line-height:1.65}

  .rows{border-top-width:1px}
  .row{padding-block:13px}

  .stat-k{margin-top:9px;padding-top:9px}
  .foot-grid{padding-bottom:26px}
  /* Footer links get thumb-sized rows on phones. */
  .foot li{margin-bottom:0}
  .foot li a{padding-block:10px}
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION
   Page intros are plain CSS so they start on first paint without
   waiting for any script. Scroll reveals, counters, the timeline line
   and smooth scrolling live in zali-ui.js. All of it switches off for
   people who ask their device for reduced motion.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes zRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes zLine{from{transform:translateY(110%)}to{transform:none}}
@keyframes zMask{
  from{opacity:0;transform:translateY(.32em);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(-.15em -.15em -.25em -.15em)}
}
/* The wipe ends with room around the frame, so the shadow behind it (--lift) is not cut off. */
@keyframes zWipe{from{clip-path:inset(calc(100% + 130px) -70px -130px -70px round 12px)}to{clip-path:inset(-40px -70px -130px -70px round 12px)}}
@keyframes zZoom{from{transform:scale(1.16)}to{transform:none}}

/* Homepage hero: lines rise out of a mask, then copy, buttons, facts. */
.js .hero-copy>.kick{animation:zRise .9s var(--e-out) .05s both}
.js .hero .rv-line>span{animation:zLine 1.1s var(--e-out) both}
.js .hero .rv-line:nth-child(1)>span{animation-delay:.1s}
.js .hero .rv-line:nth-child(2)>span{animation-delay:.18s}
.js .hero .rv-line:nth-child(3)>span{animation-delay:.26s}
.js .hero-copy>.lead{animation:zRise 1s var(--e-out) .4s both}
.js .hero-copy>.hero-ctas{animation:zRise 1s var(--e-out) .5s both}
.js .hero-copy>.hero-facts{animation:zRise 1s var(--e-out) .6s both}
.js .hero-media{animation:zWipe 1.3s var(--e-out) .15s both}
.js .hero-media>*{animation:zZoom 1.8s var(--e-out) .15s both}

/* Inner page heroes. */
.js .phero .crumb{animation:zRise .8s var(--e-out) .05s both}
.js .phero .d1{animation:zMask 1.15s var(--e-out) .1s both}
.js .phero-grid>div:last-child>*{animation:zRise 1s var(--e-out) .32s both}
.js .phero-grid>div:last-child>*:nth-child(2){animation-delay:.42s}
.js .phero-grid>div:last-child>*:nth-child(3){animation-delay:.52s}

/* Content a script inserts above the fold (product page). */
.js .in{animation:zRise .9s var(--e-out) both;animation-delay:calc(var(--i,0) * 90ms + 60ms)}

/* Page to page: the old page lifts away, the new one settles in.
   Chrome, Edge and Safari; other browsers just change page. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-old(root){animation:vtOut .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .5s var(--e-out) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(12px)}}
::view-transition-group(pdp-photo){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(pdp-photo),::view-transition-new(pdp-photo){animation-duration:.5s;height:100%}

/* Add to quote: a copy of the photo flies to the quote list. */
.q-fly{position:fixed;z-index:1200;pointer-events:none;overflow:hidden;border-radius:var(--r-md);box-shadow:0 18px 40px -18px rgba(10,10,10,.5);will-change:transform}
.q-fly>*{width:100%;height:100%}
.pbar .btn.bump{animation:qbtn .45s var(--e-out)}
@keyframes qbtn{40%{transform:scale(1.05)}}

/* Touch screens keep the press feedback but not the hover lift, which
   would otherwise stay stuck on whatever was last tapped. */
@media(hover:none){
  .card:hover,.mtile:hover,.swatch:hover,.path:hover{transform:none;box-shadow:none}
  .tl-card:hover,.vcard:hover,.btn:hover{box-shadow:none}
  .card:hover .card-fig .slot,.card:hover .card-fig img,.tile:hover .slot,.tile:hover img,.tile:hover video,
  .mtile:hover .mtile-media .slot{transform:none}
  .tile:hover .tile-bar{transform:scaleX(0)}
}
a,button,summary,label,select{touch-action:manipulation}

/* ── Motion safety ───────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1 !important;transform:none !important}
  .topbar-track{animation:none !important}
  .js .hero-copy>*,.js .hero .rv-line>span,.js .hero-media,.js .hero-media>*,
  .js .phero .crumb,.js .phero .d1,.js .phero-grid>div:last-child>*,.js .in{
    animation:none !important;opacity:1 !important;transform:none !important;clip-path:none !important;
  }
  .bb-col{opacity:1 !important;transform:none !important}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── Depth behind section photos and videos ──────────────────────────
   A soft layered shadow lifts them off light sections; on dark sections
   (shadows vanish there) a faint edge and a cool glow do the same job.
   The founder photo on About has an ambient glow instead: a soft halo in
   the photo's own colours, set as --glow / --glow-d by zali-ui.js
   (ambientGlow) once the photo has loaded; the shadow shows until then. */
:root{
  --lift:0 2px 4px rgba(10,10,10,.06),0 18px 36px -14px rgba(10,10,10,.28),0 46px 90px -32px rgba(10,10,10,.44);
  --lift-dark:0 0 0 1px rgba(255,255,255,.11),0 30px 80px -24px rgba(0,0,0,.85),0 0 120px -18px rgba(170,200,255,.38);
}
.hero-media img,.hero-media>.slot,.floor-grid img,.floor-grid>div>.slot,.floor-media,
.sialkot-photo,.founder .slot,#sialkot .slot,
.mdet-media,.cta-media,.g-2>.rv>.slot,.office-media{box-shadow:var(--lift)}
.on-dark :is(.hero-media img,.hero-media>.slot,.floor-grid img,.floor-grid>div>.slot,.floor-media,
.sialkot-photo,.founder .slot,#sialkot .slot,.mdet-media,.cta-media,.g-2>.rv>.slot,.office-media){box-shadow:var(--lift-dark)}
.founder-photo{box-shadow:var(--glow,var(--lift))}
.on-dark .founder-photo{box-shadow:var(--glow-d,var(--lift-dark))}
/* While a photo's opening curtain runs, its shadow waits; zali-ui.js then fades it in. */
.sh-wait{box-shadow:none !important}

/* The "video" hint steps aside while a method video plays. */
.mtile-media:has(video.playing) .vhint{opacity:0}

/* Print methods on phones: one swipeable row instead of five stacked
   cards. The next card peeks in; the dots show where you are. */
.mdots{display:none}
@media(max-width:640px){
  .mtiles{
    display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 6px;
  }
  .mtiles::-webkit-scrollbar{display:none}
  .mtile{flex:0 0 82%;scroll-snap-align:start;scroll-snap-stop:always}
  .mtiles .mtile-media{aspect-ratio:4/5}
  .mdots{display:flex;justify-content:center;gap:4px;margin-top:12px}
  .mdots button{width:24px;height:24px;display:grid;place-items:center}
  .mdots button::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--line-d);transition:width .3s var(--e-out),background .3s,border-radius .3s}
  .mdots button[aria-current="true"]::before{width:20px;border-radius:4px;background:var(--d-strong)}
  .on-light .mdots button::before,.sec:not(.on-dark) .mdots button::before{background:var(--line-l)}
  .sec:not(.on-dark) .mdots button[aria-current="true"]::before{background:var(--t-strong)}
}

/* ── Prerendered pages ───────────────────────────────────────────────
   A page prepared on hover (speculation rules) keeps its intro animations
   at their first frame until it is shown (head snippet adds .is-pre). */
.is-pre *,.is-pre *::before,.is-pre *::after{animation-play-state:paused !important}

/* ── Print ───────────────────────────────────────────────────────────
   Everything that scrolls in is shown, and the floating and fixed parts
   (ticker, buttons, colour layer, menus) stay off the paper. */
@media print{
  .js .rv,.js .rv-line>span,.js .hero-copy>*,.js .hero-media,.js .phero .d1{opacity:1 !important;transform:none !important;clip-path:none !important;animation:none !important}
  .topbar,.wabtn,.qpill,.pbar,.canvas-bg,.srch,.bb-md-overlay,.bb-md-drawer,.mdots{display:none !important}
  .bb-nav{position:static !important;transform:none !important}
  .mnav,.mdet-media,.gal,.faq-nav{position:static !important}
}