/* ==========================================================
   FLIESE IMPORTS — fi-v5
   Industrial spec-sheet language. Sharp corners, system type,
   one identity colour per product. Manufacturer site, not a showroom.
   ========================================================== */
:root{
  /* These four were being silently replaced further down the cascade, so this
     block said one thing and the page rendered another. The values here are now
     the ones actually in force. */
  --ink:#1C1C1E; --paper:#ffffff; --grey:#eeeff1; --line:#e2e3e7;
  --mut:#54575e;            /* 7.4:1 on white */
  --mut-d:#b9bcc2;          /* 8.9:1 on ink  */
  --rule:#8a8d94;           /* decorative only, never text */
  --gut:clamp(16px,4vw,44px); --maxw:1180px; --navh:62px; --tap:44px;
  --sans:'Manrope',-apple-system,'Segoe UI',system-ui,Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman','Nimbus Roman',serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:16px/1.55 var(--sans);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.nav :focus-visible,.hero :focus-visible,footer :focus-visible,.tabs :focus-visible{outline-color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:#fff;color:var(--ink);
  padding:12px 18px;font-weight:800}
.skip:focus{left:8px;top:8px}

/* ---------- type ---------- */
.h-xl{font:600 clamp(30px,6.4vw,60px)/1.02 var(--serif);letter-spacing:-.005em;
  text-transform:uppercase;overflow-wrap:break-word;max-width:18ch}
.h-lg{font:600 clamp(25px,4vw,40px)/1.08 var(--serif);letter-spacing:-.005em;
  text-transform:uppercase;overflow-wrap:break-word}
.h-md{font-size:19px;font-weight:800;letter-spacing:.01em;text-transform:uppercase}
.kick{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.lede{font-size:18px;line-height:1.6;color:var(--mut);max-width:640px}
.small{font-size:13.5px;color:var(--mut)}

/* ---------- nav ---------- */
/* Luke/Nick 2 Sep: "a line horizontally under the top header bar". Desktop
   already had one (the nav's border-top); phones hide the nav, so the header
   ran straight into the hero with no separation. The line now lives on the
   brandbar itself at every width, and the nav's own border goes, so desktop
   does not get two. */
.brandbar{background:var(--ink);color:#fff;border-bottom:1px solid #4a4d53}
.brandbar-in{max-width:var(--maxw);margin:0 auto;padding:clamp(14px,2vw,22px) var(--gut);
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);flex-shrink:0}
.mark .fi{width:clamp(54px,7.4vw,104px);aspect-ratio:1;border:clamp(3px,.4vw,5px) solid #fff;
  display:grid;place-items:center;font:600 clamp(28px,4vw,54px)/1 var(--serif);
  padding-bottom:.06em;flex-shrink:0}
.mark .nm{font:600 clamp(21px,3.4vw,40px)/1.04 var(--serif);letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap}
.mark .nm span{display:block;font-weight:400;font-size:.34em;letter-spacing:.34em;
  color:var(--mut-d);margin-top:.28em}
@media(max-width:760px){
  .brandbar-in{gap:12px}
}
.nav{position:sticky;top:0;z-index:40;background:var(--ink);color:#fff;
  border-bottom:1px solid #000}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:var(--navh);
  display:flex;align-items:center;gap:20px}
.nav-links{display:flex;gap:2px;flex-wrap:wrap}
.nav-links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 13px;font-size:13px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#d5d7db}
.nav-links a:hover{color:#fff}
.nav-links a.on{color:#fff;box-shadow:inset 0 -3px 0 #fff}
@media(max-width:900px){.nav{display:none}}


/* mobile bottom bar */
.tabs{display:none}
@media(max-width:900px){
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;background:var(--ink);
    padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #000}
  .tabs a{flex:1;display:flex;align-items:center;justify-content:center;padding:0 4px;font-size:11px;
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b9bcc2;min-height:52px}
  .tabs a.on{color:#fff;box-shadow:inset 0 3px 0 #fff}
  body{padding-bottom:66px}
}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff;padding:calc(26px + 2vw) 0 calc(32px + 2vw)}
.hero .kick{color:var(--mut-d)}
.hero .lede{color:#d5d7db}
.hero .rule{height:3px;background:#fff;width:64px;margin:22px 0 26px}
.hero.slim{padding:30px 0 28px}
/* ---------- catalogue ---------- */
.cat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1060px){.cat{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.cat{grid-template-columns:repeat(2,1fr);gap:11px}}
@media(max-width:359px){.cat{grid-template-columns:1fr}}
.card{border:1.5px solid var(--line);background:#fff;display:flex;flex-direction:column}
.card:hover{border-color:var(--ink)}
.pane{aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;padding:14px;
  container-type:inline-size}
.pane.sm{aspect-ratio:16/10}
.wm{font:600 clamp(17px,6.5vw,34px)/1.04 var(--serif);text-transform:uppercase;text-align:center;
  letter-spacing:.005em;overflow-wrap:normal;hyphens:none;
  font-size:clamp(17px,15cqw,58px)}   /* vw line above is the Safari<16 fallback */
.pane.sm .wm{font-size:clamp(14px,5vw,24px);font-size:clamp(14px,12cqw,34px)}
.wm-logo{width:min(82%,320px);height:auto}
.card .meta{padding:12px 14px 15px;border-top:1.5px solid var(--line)}
.card .eb{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.card .pn{font:600 17px/1.2 var(--serif);text-transform:uppercase;margin:4px 0 3px;letter-spacing:.01em}
.card .pt{font-size:12.5px;color:var(--mut);line-height:1.45;min-height:2.6em}
.card .cta{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:1px}
.cat.rel{grid-template-columns:repeat(4,1fr)}
.cat.rel .pane{aspect-ratio:16/10}
.cat.rel .meta{padding:10px 12px 12px}
.cat.rel .pn{font-size:14px;margin:2px 0 0}
@media(max-width:780px){.cat.rel{grid-template-columns:repeat(2,1fr)}}

/* ---------- system ---------- */
.step{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.steps .step:last-child{border-bottom:0}   /* was .step:last-child, which never matched: a .notebox follows the last step */
.step .no{width:44px;height:44px;border:2.5px solid var(--ink);display:grid;place-items:center;
  font-size:19px;font-weight:800}
.step h2{font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px}
.step p{font-size:15.5px;color:var(--mut);max-width:660px}
.step .who{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.step .who a{display:inline-flex;align-items:center;min-height:var(--tap);border:1.5px solid var(--ink);
  font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:0 13px}
.step .who a:hover{background:var(--ink);color:#fff}
.step .who span{display:inline-flex;align-items:center;min-height:var(--tap);border:1.5px dashed var(--rule);
  color:var(--mut);font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:0 13px}
@media(max-width:520px){.step{grid-template-columns:1fr;gap:12px}}

/* ---------- sections ---------- */
.sec{padding:52px 0}
.sec.tight{padding:38px 0}
.sec.tint{background:var(--grey)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:30px}

/* ---------- product page ---------- */
.pp-top{padding:22px 0 18px}
.pp-top .kind{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.pp-top .crumb{margin-bottom:8px}
.pp-head{color:#fff;padding:30px 0 36px}
.wm-h1{font:600 clamp(38px,8.4vw,86px)/1 var(--serif);text-transform:uppercase;letter-spacing:-.005em;
  margin-top:10px;overflow-wrap:break-word}
.pp-logo{width:min(100%,360px);height:auto;margin-top:6px}
.vis-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pp-head.lighttx{color:var(--ink)}
.blurb{max-width:680px;font-size:17.5px;line-height:1.62;color:var(--ink)}
.cls{display:inline-block;border:2px solid var(--ink);font-weight:800;font-size:13px;
  letter-spacing:.1em;padding:7px 11px;margin-top:18px;text-transform:uppercase}
.doc-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.doc-btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:0 18px;
  font-size:13.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;min-height:48px}
.doc-btn.inv{background:#fff;color:var(--ink)}
.doc-btn.ghost{background:none;border:2px solid currentColor;color:inherit}
.doc-btn:hover{opacity:.88}
.spec{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed}
.spec td{overflow-wrap:anywhere}
.spec th,.spec td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:44%;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.spec tr:first-child th,.spec tr:first-child td{border-top:2px solid var(--ink)}
.plist{list-style:none}
.plist li{padding:10px 0 10px 26px;border-bottom:1px solid var(--line);position:relative;font-size:15.5px}
.plist li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:10px;background:var(--ink)}
.plist.tick li::before{background:none;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
  width:11px;height:6px;transform:rotate(-45deg);top:16px}
.plist.no li::before{background:none;width:12px;height:2.5px;background:var(--ink);top:20px;left:1px}
.notebox{border:2px solid var(--ink);padding:16px 18px;font-size:14.5px;line-height:1.58}
.notebox p{margin-top:8px}
.notebox .doc-btns{margin-top:14px}
.notebox b{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.crumb{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;
  display:flex;align-items:center;flex-wrap:wrap}
.crumb a{display:inline-flex;align-items:center;min-height:var(--tap);padding-right:2px;opacity:.9}
.crumb a:hover{opacity:1;text-decoration:underline}
.crumb .sep{opacity:.5;padding:0 8px}

/* ---------- documents table ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:15px}
.dtable th{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
  text-align:left;padding:10px 12px;border-bottom:2px solid var(--ink)}
.dtable td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.dtable .sw{width:16px;height:16px;display:inline-block;vertical-align:-2px;margin-right:9px;
  border:1px solid rgba(0,0,0,.2)}
.docline{display:flex;flex-wrap:wrap;gap:8px}
.dl{display:inline-flex;align-items:center;min-height:var(--tap);border:1.5px solid var(--ink);padding:0 13px;
  font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.dl:hover{background:var(--ink);color:#fff}
@media(max-width:700px){
  .dtable thead{display:none}
  .dtable tr{display:block;border-bottom:1.5px solid var(--line);padding:14px 0}
  .dtable td{display:block;border:0;padding:4px 0}
}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#d5d7db}
footer .f-in{max-width:var(--maxw);margin:0 auto;padding:44px var(--gut) 30px;display:flex;flex-wrap:wrap;
  gap:34px;align-items:flex-start}
footer .mark{gap:12px}
footer .mark .fi{width:46px;border-width:2.5px;font-size:24px}
footer .mark .nm{color:#fff;font-size:18px}
footer .fblurb{max-width:290px;font-size:14px;line-height:1.55;color:#d5d7db;margin-top:14px}
footer .fmark{flex:0 1 auto}
footer .cols{display:flex;gap:44px;flex-wrap:wrap;margin-left:auto}
footer h2{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-d);margin-bottom:6px;
  font-weight:700}
footer .cols a{display:flex;align-items:center;min-height:var(--tap);font-size:14.5px;color:#d5d7db}
footer .cols a:hover{color:#fff;text-decoration:underline}
footer .base{border-top:1px solid #2a2c30;padding:16px var(--gut);font-size:12.5px;color:var(--mut-d);
  text-align:center}
@media(max-width:600px){footer .cols{gap:26px;margin-left:0}footer .f-in{gap:24px}}

/* ---------- print ---------- */
/* print rules live in one place, at the end of polish.css */
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}


/* =========================================================================
   fi-v11 — depth pass. Nick's note was "very 2D, square, font is basic".
   Elevation is a real 3-layer system, corners are consistent, and the UI
   typeface is Manrope. Georgia stays on the wordmarks because that is the
   brand: it is on the live site and on the pail labels.
   ========================================================================= */
:root{
  /* colour tokens live in site.css; this block adds only what the depth pass
     introduced, so there is one place to look for each value */
  --r:16px; --r-sm:10px;
  --e1:0 1px 2px rgba(18,20,24,.05), 0 2px 6px rgba(18,20,24,.06);
  --e2:0 2px 4px rgba(18,20,24,.06), 0 8px 22px rgba(18,20,24,.10);
  --e3:0 4px 8px rgba(18,20,24,.08), 0 18px 44px rgba(18,20,24,.16);
}
body{background:var(--grey);font-family:var(--sans);letter-spacing:-.005em}
/* no button reset existed, so the browser default 2px outset border was showing */
button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;appearance:none;-webkit-appearance:none}
.sec,.sec.tint{background:transparent}

/* ---- cards lift on hover, which is what he meant by shadows around things ---- */
.card{border:0;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--e1);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s}
.card:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.card .meta{border-top:0;padding:15px 17px 18px}
.card .pn{font-family:var(--serif)}
.card .pt{color:#55585f}
.card .cta{border-bottom-width:2px;transition:gap .2s}
.card:hover .cta{opacity:.75}

/* ---- buttons: pill, elevated, and they respond ---- */
.doc-btn,.dl,.step .who a,.step .who span,.backbtn{border-radius:8000px}
.doc-btn{padding:0 22px;box-shadow:var(--e1);transition:transform .16s,box-shadow .16s,opacity .16s}
.doc-btn:hover{transform:translateY(-2px);box-shadow:var(--e2);opacity:1}
.dl{padding:0 17px;transition:transform .16s,box-shadow .16s,background .16s,color .16s}
.dl:hover{transform:translateY(-1px);box-shadow:var(--e1)}
.notebox{border:0;border-radius:var(--r);background:#fff;padding:20px 22px;box-shadow:var(--e1)}
.spec,.dtable{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--e1)}
.spec th,.spec td,.dtable td,.dtable th{padding-left:16px;padding-right:16px}
.spec tr:first-child th,.spec tr:first-child td{border-top:0}
.plist li{border-bottom-color:var(--line)}
.pp-top{background:#fff}
.pp-head{border-radius:0}

/* ---- brandbar: contact removed, one call button kept ---- */

/* ---- explicit back control, because the bottom bar was being covered ---- */
.backbtn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;
  background:#fff;color:var(--ink);font-weight:700;font-size:14px;box-shadow:var(--e1);
  margin-bottom:14px;transition:transform .16s,box-shadow .16s}
.backbtn:hover{transform:translateX(-3px);box-shadow:var(--e2)}

/* ---- the swipe showcase ---- */
.showcase{padding:26px 0 10px}
.carousel{position:relative}
.track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:6px 2px 18px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 clamp(280px,64%,760px);scroll-snap-align:start;
  border-radius:var(--r);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
  box-shadow:var(--e1);transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s}
.slide:hover{transform:translateY(-5px);box-shadow:var(--e3)}
.s-art{display:grid;place-items:center;padding:20px 16px;aspect-ratio:16/10}
.s-wm{font:600 clamp(24px,3.4vw,40px)/1.05 var(--serif);text-transform:uppercase;text-align:center}
.s-logo{width:min(84%,220px);height:auto}
.s-txt{display:flex;flex-direction:column;gap:2px;padding:14px 16px 17px;background:#fff;color:var(--ink)}
.s-name{font:600 18px var(--serif);text-transform:uppercase;margin-top:1px}
.s-kind{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#55585f}
.s-tag{font-size:13.5px;font-weight:500;line-height:1.4;color:#55585f;margin-top:3px}
.s-cta{margin-top:9px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:2px solid currentColor;align-self:flex-start;padding-bottom:2px}
.cnav{position:absolute;top:calc(50% - 26px);z-index:3;width:46px;height:46px;border-radius:50%;
  background:#fff;color:var(--ink);font-size:26px;line-height:1;display:grid;place-items:center;
  box-shadow:var(--e2);transition:transform .16s,box-shadow .16s,opacity .16s;padding-bottom:3px}
.cnav:hover{transform:scale(1.08);box-shadow:var(--e3)}
.cnav.prev{left:-10px}.cnav.next{right:-10px}
.cnav[disabled]{opacity:0;pointer-events:none}
@media(max-width:760px){.cnav{display:none}}
.dots{display:flex;gap:0;justify-content:center;margin-top:0;flex-wrap:wrap}
/* nine 44px targets do not fit 320px in one row, so they wrap rather than shrink */
/* the visible dot is 8px but the tappable button is a full 44px square */
.dots button{flex:0 0 44px;width:44px;height:44px;background:none;display:grid;place-items:center;
  border-radius:50%;-webkit-tap-highlight-color:transparent}
.dots button::before{content:"";width:8px;height:8px;border-radius:8000px;background:#c3c6cc;
  transition:width .22s cubic-bezier(.2,.7,.3,1),background .22s}
.dots button:hover::before{background:#9aa0a8}
.dots button.on::before{background:var(--ink);width:26px}

/* ---- the bottom bar was hidden under Netlify's badge; lift it clear ---- */
@media(max-width:900px){
  .tabs{box-shadow:0 -2px 14px rgba(0,0,0,.22)}
  .tabs a{min-height:56px}
  body{padding-bottom:74px}
}

/* Nick asked for the showcase 'up top', so the intro is compact enough that the
   carousel is on screen without scrolling. */
.hero{padding:30px 0 30px}
.hero .h-xl{font-size:clamp(27px,4.4vw,46px);max-width:20ch}
.hero .rule{margin:16px 0 16px;width:52px;height:3px}
.hero .lede{font-size:16.5px;max-width:600px}
.showcase{padding:20px 0 6px}
@media(max-width:760px){
  .hero{padding:22px 0 22px}
  .hero .h-xl{font-size:clamp(25px,7vw,34px)}
  /* .slide width for this breakpoint is declared once, further down (84%) */
}

/* ---- icon-only actions in the brand bar ---- */
.hicons{margin-left:auto;display:flex;gap:10px;align-items:center}
.icnbtn{width:46px;height:46px;border-radius:8000px;background:#fff;color:var(--ink);
  display:grid;place-items:center;box-shadow:var(--e1);
  transition:transform .16s,box-shadow .16s}
.icnbtn:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.icnbtn svg{width:21px;height:21px;fill:currentColor}
@media(max-width:560px){.hicons{margin-left:auto}}

/* ---- stockist line: understated on purpose ---- */
.stockist{border-top:1px solid #2a2c30;padding:8px var(--gut) 2px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-d)}
.stockist a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:700;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.45);margin-left:7px;transition:box-shadow .16s}
.stockist a:hover{box-shadow:inset 0 -2px 0 #fff}
footer .base{border-top:0;padding-top:12px}

.carousel.is-auto .track{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  .track{scroll-behavior:auto}
  .card,.slide,.doc-btn,.icnbtn,.backbtn{transition:none}
}

/* ---- Three slides fitted the track exactly, so there was nothing to swipe.
   Hero-sized slides now scroll with a peek of the next, which is what the
   Coca-Cola carousel actually does, and gives the range more presence. ---- */
/* width now declared once, at the top of this block */
.slide{min-height:clamp(300px,30vw,380px)}
@media(min-width:761px){
  .slide{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
  .s-art{aspect-ratio:auto;height:100%;padding:26px}
  .s-txt{justify-content:center;padding:26px 30px}
  .s-name{font-size:clamp(22px,2.2vw,30px);margin-top:2px}
  .s-tag{font-size:15px;margin-top:6px}
  .s-wm{font-size:clamp(28px,3.2vw,44px)}
  .s-logo{width:min(90%,260px)}
}
@media(max-width:760px){.slide{flex:0 0 84%;min-height:auto}}

/* =========================================================================
   fi-v13 — polish pass.
   Four things this layer fixes:
     1. every depth cue was :hover only, so a phone saw a flat site
     2. cards were shadow-only, so Windows High Contrast erased their edges
     3. the mobile tab bar reached three pages out of five
     4. small robustness: reduced motion, print, tap highlight
   ========================================================================= */

/* ---- 1. depth that a finger can see -----------------------------------
   Hover transforms are now behind (hover:hover) so they cannot stick on a
   touch device, and every interactive surface gets a real :active state. */
@media (hover:none){
  /* no pointer to hover with, so the resting state has to carry the depth */
  .card,.slide,.notebox,.spec,.dtable{box-shadow:var(--e2)}
  .doc-btn,.icnbtn{box-shadow:var(--e2)}
  .card:hover,.slide:hover,.doc-btn:hover,.dl:hover,.icnbtn:hover,
  .backbtn:hover,.cnav:hover{transform:none}
}
.card:active   {transform:translateY(-1px) scale(.988);box-shadow:var(--e1);transition-duration:.06s}
.slide:active  {transform:translateY(-1px) scale(.99); box-shadow:var(--e1);transition-duration:.06s}
.doc-btn:active,.dl:active,.icnbtn:active,.step .who a:active{transform:translateY(1px) scale(.97);
  box-shadow:var(--e1);transition-duration:.06s}
.backbtn:active{transform:translateX(-2px) scale(.97);transition-duration:.06s}
.cnav:active   {transform:scale(.94);transition-duration:.06s}
.tabs a:active {background:#2a2c31}
.dots button:active::before{background:#6c7078}
a,button{-webkit-tap-highlight-color:rgba(28,28,30,.10)}

/* ---- 2. forced colours (Windows High Contrast) ------------------------
   In forced-colours mode every box-shadow is stripped. Anything that was
   only a shadow becomes an invisible edge, so give those surfaces a real
   border that the mode is allowed to recolour. */
@media (forced-colors: active){
  .card,.slide,.notebox,.spec,.dtable,.cnav,.icnbtn,
  .doc-btn,.dl,.backbtn{border:1px solid CanvasText}
  .pane,.s-art{border-bottom:1px solid CanvasText}
  .dots button.on::before{outline:2px solid CanvasText;outline-offset:1px}
  .nav-links a.on,.tabs a.on{outline:2px solid Highlight;outline-offset:-2px}
  .rule,.sw{forced-color-adjust:none}
  .doc-btn,.dl,.card,.slide{forced-color-adjust:auto}
}

/* ---- 3. mobile tab bar reaches all five pages -------------------------
   Was Products / Documents / Contact. Warranty and the Wet-Area System were
   footer-only, which on a phone means scrolling the whole page to find them.
   Five icon-and-label targets fit 320px at 64px each. */
@media(max-width:900px){
  .tabs a{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;
    min-height:58px;padding:6px 2px 5px;font-size:9.5px;letter-spacing:.03em;line-height:1.05;
    text-align:center}
  .tabs a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .tabs a span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .tabs a.on{box-shadow:inset 0 3px 0 #fff}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media(max-width:340px){.tabs a{font-size:8.5px;letter-spacing:0}}

/* ---- 4. odds and ends -------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}
/* the Diamond mark is a fixed-ratio bitmap; reserve its box so nothing jumps */
.wm-logo,.s-logo,.pp-logo{aspect-ratio:536/179}

/* print: the spec tables are what a tiler actually wants on paper */
@media print{
  .nav,.tabs,.brandbar,.cnav,.dots,.skip,.backbtn,.doc-btns,.showcase,
  footer,.cta{display:none !important}
  body{background:#fff;padding-bottom:0}
  .sec{padding:14px 0}
  .wm-h1{font-size:34px}
  .pp-head{padding:0 0 12px}
  .card,.notebox,.spec,.dtable{box-shadow:none;border:1px solid #999}
  .hero,.pp-head{background:#fff !important;color:#000 !important}
  .hero .lede,.hero .kick{color:#333 !important}
  a[href^="/docs/"]::after{content:" (" attr(href) ")";font-size:11px}
}

/* ---- carousel: the last slide can never left-align ---------------------
   With a peek carousel the track runs out of scroll before the final slide
   reaches the left edge, so snapping it to start leaves it stranded. Snapping
   the last one to the end puts it exactly where the track stops anyway. */
.track > .slide:last-child{scroll-snap-align:end}

/* ---- light-only, declared --------------------------------------------
   No prefers-color-scheme rules here on purpose: this is a light industrial
   site, like the manufacturer sites it was benchmarked against. Saying so
   explicitly stops the browser guessing — form fields, scrollbars and the
   mobile address bar all render for a light page instead of being auto-darkened. */
:root{color-scheme:light}

/* ---- carousel chrome is JS-driven, so do not paint it before JS runs ---- */
.carousel .cnav,.carousel .dots{display:none}
.carousel.js .dots{display:flex}
@media(min-width:761px){.carousel.js .cnav{display:grid}}

/* ---- Instagram showcase (reworked 30 Aug, second pass) --------------------
   First pass forced the portrait posts into landscape hero slides, so every
   photo rendered as a huge zoomed crop. Posts are portrait; show them
   portrait. Three cards at the image's own 3:4 — no crop, no zoom — sitting
   side by side on desktop, one-per-swipe on mobile. The JS hides the arrows,
   dots and autoplay whenever the row fits without scrolling. */
.slide.ig{display:flex;flex-direction:column;flex:0 0 clamp(218px,31%,368px);min-height:0}
/* the author display rules above beat the UA's [hidden] default, so restate it */
.carousel .cnav[hidden],.carousel .dots[hidden]{display:none!important}
.slide.ig .s-photo{padding:0;overflow:hidden;position:relative;background:#e8e9eb;
  aspect-ratio:3/4;height:auto}
.slide.ig .s-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slide.ig .s-txt{flex:1 1 auto;justify-content:flex-start;padding:13px 15px 15px}
.slide.ig .s-kind{font-size:10px}
.slide.ig .s-name{font-size:16px;line-height:1.25;margin-top:2px}
.slide.ig .s-tag{font-size:13px;margin-top:2px}
.slide.ig .s-cta{color:var(--ink);margin-top:8px;font-size:11.5px}
@media(min-width:761px){
  .slide.ig{grid-template-columns:none}
  .slide.ig .s-name{font-size:17px}
}
@media(max-width:760px){
  .slide.ig{flex:0 0 72%}
}
@media(max-width:430px){
  .slide.ig{flex:0 0 78%}
}
/* the whole row fits on desktop, so centre it instead of leaving end-gap */
.carousel.no-scroll .track{justify-content:center}
@media (forced-colors: active){ .slide.ig .s-photo{border-bottom:1px solid CanvasText} }
@media print{ .showcase{display:none !important} }

/* ==================== v17 mobile pass (30 Aug, evening) ====================
   The giant-photo phone render was stale cached CSS, fixed by fingerprinted
   asset names in build.py. These rules fix what was genuinely wrong with the
   mobile composition itself, judged from a full-length phone render. */

/* ---- 1. header: one row, not two. The mark + two icon buttons overflowed
   384px by ~6px, wrapping the icons onto their own line with dead space. */
@media(max-width:560px){
  .brandbar-in{flex-wrap:nowrap;gap:10px;padding-top:12px;padding-bottom:12px}
  .mark{gap:10px}
  .mark .fi{width:44px;border-width:2.5px;font-size:23px}
  .mark .nm{font-size:17px}
  .mark .nm span{letter-spacing:.26em;margin-top:.2em}
  .hicons{gap:8px}
  /* 44px stays the floor — the tap-target rule, and the guard suite enforcing
     it, caught this at 40px */
  .icnbtn{width:44px;height:44px}
  .icnbtn svg{width:19px;height:19px}
}

/* ---- 2. hero: same words, less wall. Nearly two screens of dark before any
   product; the headline and lede carry the same copy in less height. */
@media(max-width:560px){
  .hero{padding:18px 0 22px}
  .hero .h-xl{font-size:clamp(22px,6.4vw,30px)}
  .hero .rule{margin:13px 0 13px;width:44px}
  .hero .lede{font-size:15.5px;line-height:1.5}
}

/* ---- 3. IG cards: slimmer caption, a little more presence. The four-row
   caption slab read like a document under each photo. The kicker is chrome,
   repeated three times — the phone does not need it. */
@media(max-width:760px){
  .slide.ig{flex:0 0 76%}
  .slide.ig .s-kind{display:none}
  .slide.ig .s-txt{padding:11px 13px 13px}
  /* two lines, then clamp — a nowrap ellipsis was truncating
     "Brady Tiling × Fliese Imports", the one name that matters */
  .slide.ig .s-name{font-size:15.5px;line-height:1.25;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .slide.ig .s-tag{font-size:12.5px;margin-top:1px}
  .slide.ig .s-cta{font-size:11px;margin-top:6px}
}
@media(max-width:430px){
  .slide.ig{flex:0 0 80%}
}

/* ---- 4. catalogue: the brand eyebrow appears on all eight cards; on a phone
   it is pure repetition. Name, tag and the action carry the card. */
@media(max-width:560px){
  .card .eb{display:none}
  .card .meta{padding:12px 14px 14px}
  .card .pn{font-size:16px}
}

/* ---- 5. aspect-ratio fallback. On engines without it (Samsung Internet <15,
   iOS <15) the photo box would collapse to nothing, since the img inside is
   absolutely positioned. The padding-top box is the same 3:4 by construction. */
@supports not (aspect-ratio: 1 / 1){
  .slide.ig .s-photo{height:0;padding-top:133.34%}
}
/* 320px phones: the nowrap header ran 4px over with 44px targets — trim the
   wordmark, not the tap area */
@media(max-width:340px){
  .brandbar-in{gap:8px}
  .mark{gap:8px;min-height:44px}   /* hit area stays 44 even with the 40px box */
  .mark .nm{font-size:14.5px}
  .mark .fi{width:40px;font-size:21px}
  .hicons{gap:6px}
}