/* Storefront layer.
   ---------------------------------------------------------------------------
   What makes a site read as a print shop rather than a brochure site: a thin
   promo strip, a category bar with a mega panel deep enough to reach a leaf
   product in one move, product tiles that are photograph-first with the price
   directly under the name, and a lot of white between things. The colour is
   Harbor's own red.
   --------------------------------------------------------------------------- */

:root{
  --red:#e11b22; --red-d:#b3131a; --red-w:#fdeced;
  --char:#14161a; --sand:#f7f6f4; --line:#e2e0dc; --mut:#63636b; --faint:#9aa0ac;
}

/* ---------------------------------------------------------- promo strip */
.promo{background:var(--char);color:#fff;font-size:.83rem;text-align:center;
  padding-block:9px;letter-spacing:.01em}
.promo .hl{color:#ff5a60;font-weight:700}
.promo a{text-decoration:underline;text-underline-offset:3px;color:#c9ccd3}
.promo a:hover{color:#fff}
@media(max-width:400px){.promo{font-size:.74rem;padding-inline:10px}}

/* -------------------------------------------------------------- header */
.shhd{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
.shhd .bar{max-width:1520px;margin-inline:auto;display:flex;align-items:center;
  gap:clamp(14px,2.4vw,32px);padding:14px clamp(16px,3vw,36px)}
.shhd .lgimg{display:block;height:38px;width:auto}
@media(max-width:600px){.shhd .lgimg{height:29px}}
.shhd .search{flex:1;position:relative;min-width:0}
.shhd .search input{width:100%;border:1.5px solid var(--line);border-radius:8px;
  padding:11px 14px 11px 38px;font:inherit;font-size:.92rem;background:var(--sand)}
.shhd .search input:focus{outline:2.5px solid var(--red);outline-offset:-1px;
  background:#fff}
.shhd .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--mut);fill:none;stroke-width:2;
  stroke-linecap:round;pointer-events:none}
.shhd .tel{font-weight:800;font-size:.92rem;white-space:nowrap}
.shhd .tel span{color:var(--mut);font-weight:500;display:block;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase}
@media(max-width:1080px){.shhd .tel{display:none}}
.shhd .quote{background:var(--red);color:#fff;padding:11px 20px;border-radius:8px;
  font-weight:700;font-size:.89rem;white-space:nowrap}
.shhd .quote:hover{background:var(--red-d)}
/* Search moves to its own row rather than disappearing. Hiding it was the easy
   way to stop the header crowding, but search is how a phone shopper gets to one
   product out of a hundred and twenty, so it is the last thing to cut. */
@media(max-width:640px){
  .shhd .bar{flex-wrap:wrap;row-gap:11px}
  .shhd .search{order:3;flex-basis:100%}
  .shhd .quote{margin-left:auto}
}

/* ------------------------------------------------------- category bar */
.catbar{border-top:1px solid var(--line);background:#fff}
.catbar > ul{list-style:none;margin:0 auto;padding:0 clamp(16px,3vw,36px);
  max-width:1520px;display:flex;gap:clamp(10px,1.8vw,26px);overflow:visible}
/* Deliberately NOT position:relative. The panel is absolutely positioned against
   .catbar so it can span the full header width; a positioned .nitem would become
   the offset parent and shrink every panel to the width of its own nav link. */
.nitem{position:static}
.nitem > .ntop{display:block;padding:13px 2px;font-size:.9rem;font-weight:600;
  color:var(--char);white-space:nowrap;border-bottom:3px solid transparent}
.nitem:hover > .ntop, .nitem:focus-within > .ntop{color:var(--red);
  border-bottom-color:var(--red)}
.nitem.on > .ntop{border-bottom-color:var(--char);font-weight:800}

/* The panel spans the whole header rather than hanging off its nav item. Anchored
   to the item it overflowed the viewport twice over: the right-hand categories
   pushed a panel 400px past the edge, and because a hidden element still occupies
   layout, the PAGE picked up 700px of horizontal scroll even with every menu shut.
   Full width removes both problems and there is no per-item positioning to get
   wrong. `display:none` while closed, not just `visibility`, so it contributes
   nothing to scroll width. */
.catbar{position:relative}
.mega{display:none;position:absolute;left:0;right:0;top:100%;z-index:90}
.nitem:hover .mega, .nitem:focus-within .mega{display:block}
/* Flex, not a fixed grid. Categories have three or four groups, and a five-track
   grid left a dead column on every three-group menu. Flex lets the link columns
   share whatever is left after the promo panel takes its 230px. */
.mwrap{display:flex;gap:clamp(18px,2.4vw,34px);
  max-width:1520px;margin-inline:auto;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--red);
  border-radius:0 0 12px 12px;box-shadow:0 22px 50px rgba(16,17,20,.16);
  padding:26px clamp(16px,3vw,36px)}
.mcol{flex:1 1 0;min-width:120px}
.promoCol{flex:0 0 230px}
@media(max-width:1180px){
  .promoCol{flex:0 0 200px}
  .mwrap .mcol:nth-of-type(4):not(.promoCol){display:none}
}

.mcol h4{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 11px;font-weight:800;font-family:Inter}
.mcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mcol li{margin:0}
.mcol li a{font-size:.87rem;color:var(--char);line-height:1.35}
.mcol li a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
/* The core-lines panel: one link per line, name in bold with its starting price,
   laid out in as many columns as fit so a short list does not leave a hole. */
.mfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));column-gap:30px;align-content:start;align-items:start}
.mgrp{break-inside:avoid;margin:0 0 18px}
.mgrp h4{margin:0 0 7px;font-family:Archivo;font-weight:900;font-size:.95rem;letter-spacing:0;
  text-transform:none;color:var(--char)}
.mgrp h4 a{color:inherit}
.mgrp h4 a:hover{color:var(--red)}
.mgrp ul{gap:5px}
.mgrp li a{font-size:.85rem;color:var(--mut)}
.promoCol{border-left:1px solid var(--line);padding-left:22px;display:flex;
  flex-direction:column;gap:5px;min-width:0}
.promoCol img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:8px;margin-bottom:6px;display:block}
.promoCol b{font-family:Archivo;font-weight:900;font-size:.96rem;line-height:1.25}
.promoCol span{font-size:.8rem;color:var(--mut);line-height:1.5}
.mgo{margin-top:auto;padding-top:8px;font-size:.82rem;font-weight:800;color:var(--red)}

/* Hover menus do not work on a touch screen, so below the breakpoint the bar
   becomes a scrolling row of plain links straight to the category pages. */
@media(max-width:1000px){
  .catbar > ul{overflow-x:auto;scrollbar-width:none}
  .catbar > ul::-webkit-scrollbar{display:none}
  /* Beats the :hover rule above, which would otherwise still open a panel on a
     tap-and-hold. On a touch screen the top link goes straight to the category. */
  .mega, .nitem:hover .mega, .nitem:focus-within .mega{display:none}
  .nitem > .ntop{padding:12px 2px;font-size:.86rem}
}

/* ------------------------------------------------------------- buttons */
/* .btn.red lived in the old visuals sheet, which the storefront pages no longer
   load, so the primary call to action was rendering as bare text. */
.btn{display:inline-block;padding:14px 26px;border-radius:8px;font-weight:700;
  font-size:.92rem;border:2px solid transparent;cursor:pointer;transition:.18s;
  font-family:Inter,-apple-system,sans-serif;text-align:center}
.btn.red{background:var(--red);color:#fff;border-color:var(--red)}
.btn.red:hover{background:var(--red-d);border-color:var(--red-d)}
.btn.dark{background:var(--char);color:#fff;border-color:var(--char)}
.btn.dark:hover{background:var(--red);border-color:var(--red)}
.btn.line{border-color:var(--char);color:var(--char);background:#fff}
.btn.line:hover{background:var(--char);color:#fff}
.btn.ghost{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn.ghost:hover{background:#fff;color:var(--char);border-color:#fff}

/* ---------------------------------------------------------------- hero */
.shero{background:var(--char);color:#fff;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.shero .in{align-self:center;padding:clamp(46px,5.5vw,80px) clamp(20px,4vw,60px)}
.shero .eyebrow{color:#ff6b70;font-size:.7rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase}
.shero h1{font-size:clamp(2.1rem,4.2vw,3.3rem);font-weight:900;max-width:15ch;
  margin:15px 0 16px;text-wrap:balance;line-height:1.05}
.shero h1 em{font-style:normal;color:#ff4a52}
.shero p{color:#c3c8d1;max-width:46ch;font-size:1.03rem;margin:0 0 26px}
.shero .btns{display:flex;gap:11px;flex-wrap:wrap}
.shero .shot{position:relative;min-height:clamp(320px,38vw,520px)}
.shero .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shero .shot::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--char) 0%,rgba(20,22,26,.5) 8%,
    rgba(20,22,26,0) 24%)}
.shero .credit{position:absolute;right:12px;bottom:9px;z-index:2;font-size:.7rem;
  color:rgba(255,255,255,.6)}
.shero .fact{display:flex;flex-direction:column;gap:8px;margin-top:30px;color:#a8adb8;
  font-size:.77rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.shero .fact b{color:#fff}
@media(max-width:900px){
  .shero{grid-template-columns:1fr}
  .shero .shot{min-height:250px;order:2}
  .shero .shot::before{background:linear-gradient(180deg,var(--char) 0%,
    rgba(20,22,26,.45) 9%,rgba(20,22,26,0) 28%)}
}

/* --------------------------------------------------------------- tiles */
.wrap{max-width:1520px;margin-inline:auto;padding-inline:clamp(16px,3vw,36px)}
.grp{padding-block:clamp(26px,3.4vw,44px)}
.grp h2{font-family:Archivo;font-weight:900;font-size:clamp(1.3rem,2.4vw,1.75rem);
  margin:0 0 20px;letter-spacing:-.02em}

.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1080px){.tgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.tgrid{grid-template-columns:1fr}}

.tile{display:flex;flex-direction:column;background:#fff;border-radius:10px;
  scroll-margin-top:150px}
.tile .shot{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:10px;background:var(--sand)}
.tile .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease}
.tile:hover .shot img{transform:scale(1.04)}
.tile .flag{position:absolute;left:9px;top:9px;background:var(--red);color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 8px;border-radius:4px}
.tile .meta{display:flex;flex-direction:column;gap:4px;padding:12px 2px 0}
.tile .meta b{font-size:.98rem;font-weight:700;line-height:1.25}
.tile:hover .meta b{color:var(--red)}
.tile .d{font-size:.82rem;color:var(--mut);line-height:1.45}
.tile .p{font-size:.87rem;color:var(--char);margin-top:2px}
.tile .p b{font-weight:800}
.tile .per{color:var(--mut)}
.tile .q{color:var(--red);font-weight:700}

/* Spec tile: a cut shape drawn at its real size, where no photograph exists. */
.tile .spec{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,3.4vw,34px);background:var(--sand)}
.tile .spec .sheet{position:relative;display:flex;align-items:flex-end;
  justify-content:center;width:100%;max-width:100%;max-height:100%;background:#fff;
  border:1px solid var(--line);border-radius:4px;
  box-shadow:0 7px 20px rgba(16,17,20,.1)}
.tile .spec .sheet > span{font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding:7px 0}

/* -------------------------------------------------------- finish swatches */
.swgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
@media(max-width:1080px){.swgrid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:780px){.swgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.swgrid{grid-template-columns:repeat(3,1fr)}}
.sw{display:flex;flex-direction:column;gap:7px;scroll-margin-top:150px}
.sw img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;
  background:var(--sand);display:block}
.sw b{font-size:.76rem;font-weight:600;color:var(--mut);text-align:center;
  line-height:1.3}

/* ------------------------------------------------------ category tiles */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1080px){.cgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.cgrid{grid-template-columns:repeat(2,1fr)}}
.ctile{display:flex;flex-direction:column;border-radius:10px;scroll-margin-top:150px}
.ctile .shot{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:10px;
  background:var(--sand)}
.ctile .shot img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.ctile:hover .shot img{transform:scale(1.04)}
.ctile .meta{padding:12px 2px 0;display:flex;flex-direction:column;gap:3px}
.ctile .meta b{font-family:Archivo;font-weight:900;font-size:1rem;line-height:1.2}
.ctile:hover .meta b{color:var(--red)}
.ctile .p{font-size:.83rem;font-weight:700;color:var(--red)}
.ctile.local .p{color:var(--mut)}

/* ------------------------------------------------------ category header */
.chead{background:var(--sand);border-bottom:1px solid var(--line);
  padding-block:clamp(26px,3.4vw,44px)}
.crumb{font-size:.8rem;color:var(--mut);margin-bottom:10px}
.crumb a{color:var(--red);font-weight:600}
.crumb span{margin-inline:6px;color:var(--faint)}
.chead h1{font-family:Archivo;font-weight:900;font-size:clamp(1.9rem,3.6vw,2.7rem);
  margin:0 0 10px;letter-spacing:-.02em}
.chead .lead{font-size:1.02rem;color:var(--mut);max-width:60ch;margin:0 0 12px}
.chead .note{font-size:.84rem;color:var(--faint);max-width:64ch;margin:0}
.chead .note.local{color:var(--red)}

/* -------------------------------------------------------- trust strip */
.trust{border-block:1px solid var(--line);background:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  padding-block:0}
@media(max-width:880px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.trust .wrap{grid-template-columns:1fr}}
.trust div{padding:24px 22px 24px 0;display:flex;flex-direction:column;gap:5px}
.trust svg{width:24px;height:24px;stroke:var(--red);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:7px}
.trust b{font-family:Archivo;font-weight:900;font-size:.98rem}
.trust span{font-size:.85rem;color:var(--mut);line-height:1.5}

/* ------------------------------------------------------- in-house band */
.local-band{background:var(--char);color:#fff}
.local-band .wrap{padding-block:clamp(50px,7vw,86px)}
.local-band .eyebrow{color:#ff6b70;font-size:.7rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase}
.local-band h2{font-family:Archivo;font-weight:900;
  font-size:clamp(1.7rem,3.4vw,2.5rem);margin:11px 0 12px;max-width:22ch}
.local-band .sub{color:#a8adb8;max-width:58ch;margin:0 0 34px}
.jobs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1080px){.jobs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.jobs{grid-template-columns:repeat(2,1fr)}}
.job{margin:0;position:relative;border-radius:10px;overflow:hidden;background:#22252b;
  aspect-ratio:1/1}
.job img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
.job:hover img{transform:scale(1.05)}
.job figcaption{position:absolute;inset:auto 0 0 0;padding:30px 13px 12px;
  background:linear-gradient(to top,rgba(8,9,11,.94),rgba(8,9,11,0));
  display:flex;flex-direction:column;gap:2px}
.job figcaption b{font-size:.84rem;font-weight:800;line-height:1.25}
.job figcaption span{font-size:.74rem;color:#b9bec7;line-height:1.4}
.local-band .after{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}

/* ------------------------------------------------------------- lanes */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.lanes{grid-template-columns:1fr}}
.lane{border-radius:12px;padding:clamp(24px,3.2vw,36px);display:flex;
  flex-direction:column;gap:11px}
.lane.a{background:var(--red);color:#fff}
.lane.b{background:var(--char);color:#fff}
.lane h3{font-family:Archivo;font-weight:900;font-size:1.35rem}
.lane p{margin:0;font-size:.93rem;line-height:1.6}
.lane.a p{color:#ffe0e1}
.lane.b p{color:#b9bec7}
.lane .btn{align-self:flex-start;margin-top:6px}
.lane.a .btn{background:#fff;color:var(--red)}
.lane.b .btn{background:var(--red);color:#fff}
.lane.b .btn:hover{background:var(--red-d)}

@media(prefers-reduced-motion:reduce){
  .tile .shot img,.ctile .shot img,.job img,.mega{transition:none}
  .tile:hover .shot img,.ctile:hover .shot img,.job:hover img{transform:none}
}

/* ---------------------------------------------------------------------------
   Carried over from the pre-storefront sheet under new names. `.tgrid` and
   `.cgrid` now mean "product grid" and "category grid" in this file, and
   shop.css loads last, so the old testimonial and contact grids had to be
   renamed rather than left to inherit product-tile layout silently.
   --------------------------------------------------------------------------- */
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:26px}
.sechead h2{font-family:Archivo;font-weight:900;
  font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.02em}
.sechead a{color:var(--red);font-weight:700;font-size:.9rem;white-space:nowrap}

.tband{background:var(--sand);border-block:1px solid var(--line)}
.tgrid-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.tcard p{margin:0 0 12px;font-size:.94rem;color:#2a2d34;line-height:1.65}
.tcard b{font-size:.82rem;color:var(--mut)}
.tcard .stars{color:var(--red);letter-spacing:2px;margin-bottom:10px;font-size:.9rem}

.cgrid2{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,4vw,54px);
  align-items:start}
@media(max-width:860px){.cgrid2{grid-template-columns:1fr}}
.crow{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:14px 0;
  border-top:1px solid var(--line);font-size:.94rem}
.crow b{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);padding-top:3px}
.mapbox iframe{width:100%;height:330px;border:0;border-radius:12px;
  box-shadow:0 10px 30px rgba(16,17,20,.1)}

/* ---------- full footer ---------- */
.hgxf{background:var(--char);color:#e7e9ee;border-top:1px solid #2a2d34}
.hgxf a{color:#e7e9ee}
.hgxf a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hgxf .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:40px;
  padding-block:56px 42px}
@media(max-width:900px){.hgxf .cols{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.hgxf .cols{grid-template-columns:1fr}}
.hgxf .lgf{display:block;height:34px;width:auto;margin-bottom:16px;
  filter:brightness(0) invert(1)}
.hgxf p{margin:0;font-size:.89rem;color:#aab0bd;line-height:1.75}
.hgxf p a{color:#e7e9ee;font-weight:600}
.hgxf h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#8b919e;
  margin:2px 0 14px;font-weight:700;font-family:Inter}
.hgxf ul{list-style:none;margin:0;padding:0}
.hgxf li{margin-bottom:9px;font-size:.89rem}
.hgxf .bar{border-top:1px solid #2a2d34;padding-block:20px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#8b919e}
.hgxf .bar .by{display:inline-flex;align-items:center;gap:8px;color:#aab0bd}
.hgxf .bar .by svg{display:block}

section{padding-block:clamp(40px,5.5vw,72px)}

/* ---------- all-products index ---------- */
.acat{border-top:1px solid var(--line);padding-block:clamp(30px,4vw,52px)}
.acat:first-child{border-top:0}
.ahead{display:flex;gap:22px;align-items:flex-start;margin-bottom:26px}
.ahead img{width:132px;height:100px;object-fit:cover;border-radius:10px;flex:0 0 auto;
  background:var(--sand)}
.ahead h2{font-family:Archivo;font-weight:900;font-size:clamp(1.3rem,2.4vw,1.8rem);
  margin:0 0 6px;letter-spacing:-.02em;scroll-margin-top:150px}
.ahead p{margin:0 0 8px;color:var(--mut);font-size:.9rem;max-width:60ch;line-height:1.55}
.ago{font-size:.85rem;font-weight:800;color:var(--red)}
@media(max-width:560px){.ahead img{width:88px;height:70px}}
.acols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:1000px){.acols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.acols{grid-template-columns:1fr}}
.acol h3{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 11px;font-weight:800;font-family:Inter}
.acol h3 a{color:inherit}
.acol h3 a:hover{color:var(--red)}
.acol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.acol li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:.88rem;border-bottom:1px solid var(--line);padding-bottom:8px}
.acol li a{color:var(--char);font-weight:600}
.acol li a:hover{color:var(--red)}
.acol .pr{font-size:.78rem;color:var(--mut);white-space:nowrap;text-align:right}
.acol .pr b{color:var(--char);font-weight:800}
.acol .pr .per{display:none}
.acol .pr .q{color:var(--red);font-weight:700;font-size:.72rem}

/* ---------------------------------------------------- subcategory boxes */
/* A category page opens on these: one box per subcategory, each its own page.
   Taller than a plain category tile because it carries a line of description
   and a count, which is what makes the box worth clicking over a bare heading. */
.gtile .meta{gap:5px}
.gtile .meta b{font-size:1.05rem}
.gtile .d{font-size:.83rem;color:var(--mut);line-height:1.45}
.gtile .n{font-size:.76rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint)}
.gtile .p{font-size:.85rem;font-weight:700;color:var(--red)}

/* Back out of a subcategory to the grid it came from. */
.backto{margin:36px 0 0}
.backto a{font-size:.89rem;font-weight:800;color:var(--red)}
.backto a:hover{text-decoration:underline;text-underline-offset:3px}

/* Mega-panel headings are links to the subcategory pages now. */
.mcol h4 a{color:inherit}
.mcol h4 a:hover{color:var(--red)}
.mcol li.more a{font-weight:800;color:var(--red)}

/* Paper stocks: names, not photographs. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;
  font-size:.86rem;font-weight:600;background:#fff;scroll-margin-top:150px}

/* ==========================================================================
   Storefront layer 2, the big-online-printer layout.
   ==========================================================================
   What a national print site does that a brochure site does not, and what is
   copied here: a utility strip above the logo, a header that is mostly one
   very large search field, a category bar whose labels wrap to two lines, a
   full-width offer strip, a hero that is a solid card sitting on a photograph,
   and rows of square product tiles with the name UNDER the tile rather than on
   it. The palette stays Harbor's own.
   ========================================================================== */

:root{
  --navy:#2f3f57; --navy-d:#243449;
  --cream:#f3f0e9; --tileBg:#f2efe9; --util:#f6f6f6;
}

/* --------------------------------------------------------- utility strip */
.util{background:var(--util);border-bottom:1px solid var(--line)}
.util .wrap{display:flex;gap:22px;align-items:center;
  padding-block:9px;font-size:.79rem;flex-wrap:wrap}
.util a{color:#3a3a40}
.util a:hover{text-decoration:underline;text-underline-offset:3px}
.util .sep{margin-left:auto;color:var(--mut)}
@media(max-width:720px){.util .wrap{gap:14px;font-size:.72rem}
  .util .hideSm{display:none}}

/* ------------------------------------------------------------ big search */
.shhd .bar{gap:clamp(14px,2.2vw,30px)}
.shhd .search input{height:48px;border-radius:8px;border-color:#8a8a90;
  padding-inline:18px 52px;font-size:.95rem}
.shhd .search svg{left:auto;right:0;width:48px;height:100%;top:0;transform:none;
  background:var(--char);color:#fff;stroke:#fff;border-radius:0 7px 7px 0;
  padding:14px;box-sizing:border-box;pointer-events:none}
.shhd .acct{display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:.86rem;font-weight:600}
.shhd .acct svg{width:22px;height:22px;fill:none;stroke:var(--char);stroke-width:1.7}
@media(max-width:900px){.shhd .acct{display:none}}

/* -------------------------------------------------------- two-line navbar */
.catbar > ul{gap:clamp(10px,1.7vw,26px)}
.nitem > .ntop{padding:12px 0;font-size:.88rem;font-weight:500;line-height:1.25;
  max-width:11ch;text-align:center}
.nitem.hot > .ntop{color:var(--red);font-weight:700}

/* ------------------------------------------------------- offer strip */
.deal{background:var(--char);color:#fff}
.deal .wrap{display:flex;align-items:center;justify-content:center;gap:10px;
  padding-block:15px;font-size:.9rem;text-align:center;position:relative}
.deal a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.deal .chev{position:absolute;right:clamp(16px,3vw,36px);width:9px;height:9px;
  border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg)}
@media(max-width:620px){.deal .wrap{font-size:.78rem;padding-inline:34px}}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;background:var(--sand);overflow:hidden}
.hero .shot{position:absolute;inset:0}
.hero .shot img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(34px,4.4vw,58px)}
.hero .card{background:var(--navy);color:#fff;border-radius:10px;max-width:620px;
  padding:clamp(26px,3.4vw,42px)}
.hero h1{font-family:Archivo;font-weight:900;line-height:1.06;margin:0 0 14px;
  font-size:clamp(1.85rem,3.6vw,2.9rem)}
.hero h1 em{font-style:normal;color:#ffd7a1}
.hero p{color:#cfd6e2;font-size:1rem;line-height:1.55;margin:0 0 16px;max-width:46ch}
.hero .code{font-size:.92rem;margin:0 0 20px}
.hero .code b{font-weight:800}
.hero .pills{display:flex;gap:10px;flex-wrap:wrap}
.hero .pills a{background:#fff;color:var(--char);border-radius:7px;
  padding:12px 20px;font-weight:700;font-size:.9rem}
.hero .pills a:hover{background:var(--cream)}
.hero .fine{margin:18px 0 0;font-size:.74rem;color:#9fabbe}
@media(max-width:820px){
  .hero .shot{position:relative;height:230px}
  .hero .shot img{object-position:center 45%}
  .hero .wrap{padding-block:0 26px;margin-top:-46px}
  .hero .card{max-width:none}
}

/* ------------------------------------------------------------ cream band */
.band{background:var(--cream);text-align:center}
.band .wrap{padding-block:20px}
.band b{font-family:Archivo;font-weight:900;font-size:clamp(1.05rem,2vw,1.35rem);
  display:block;margin-bottom:5px}
.band a{text-decoration:underline;text-underline-offset:3px;font-weight:600;
  font-size:.92rem}

/* ------------------------------------------------- section head + rails */
.sec{padding-block:clamp(30px,3.8vw,52px)}
.sec.tight{padding-top:0}
.sechd{display:flex;align-items:baseline;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sechd h2{font-family:Archivo;font-weight:900;margin:0;
  font-size:clamp(1.35rem,2.7vw,1.95rem)}
.sechd p{margin:0;color:var(--mut);font-size:.92rem;flex-basis:100%}
.sechd a{font-size:.9rem;font-weight:700;color:var(--red);white-space:nowrap}
.sechd a:hover{text-decoration:underline;text-underline-offset:3px}

/* The rail scrolls sideways with snap points and a pair of round buttons, the
   way a catalogue row does on a big storefront. On a phone it is a plain swipe
   and the buttons hide, because an arrow button under a thumb is a mis-tap. */
.crailwrap{position:relative}
.crail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);
  gap:16px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px}
.crail::-webkit-scrollbar{display:none}
.crail > *{scroll-snap-align:start}
.crailwrap.n6 .crail{grid-auto-columns:minmax(150px,calc((100% - 5*16px)/6))}
.crailwrap.n4 .crail{grid-auto-columns:minmax(200px,calc((100% - 3*16px)/4))}
@media(max-width:900px){
  .crailwrap.n6 .crail{grid-auto-columns:minmax(132px,38vw)}
  .crailwrap.n4 .crail{grid-auto-columns:minmax(180px,62vw)}
}
.rnav{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);
  box-shadow:0 3px 14px rgba(16,17,20,.17);cursor:pointer;display:none;
  align-items:center;justify-content:center;padding:0}
.rnav:hover{background:var(--sand)}
.rnav.on{display:flex}
.rnav.prev{left:-14px}
.rnav.next{right:-14px}
.rnav i{width:9px;height:9px;border-right:2.4px solid var(--char);
  border-top:2.4px solid var(--char);display:block}
.rnav.next i{transform:rotate(45deg);margin-left:-3px}
.rnav.prev i{transform:rotate(-135deg);margin-right:-3px}
@media(max-width:820px){.rnav{display:none!important}}

/* --------------------------------------------------------- square tiles */
/* Name under the tile, not on it: a photograph with text laid over it reads as
   an advert, and a shopper scanning a row wants to compare names and prices. */
.sqtile{display:block}
.sqtile .shot{display:block;aspect-ratio:1/1;background:var(--tileBg);
  border-radius:9px;overflow:hidden;position:relative}
.sqtile .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s}
.sqtile:hover .shot img{transform:scale(1.045)}
.sqtile > b{display:block;margin-top:10px;font-size:.93rem;font-weight:700;
  line-height:1.3;color:var(--char)}
.sqtile .p{display:block;margin-top:3px;font-size:.85rem;color:var(--mut)}
.sqtile .p em,.sqtile .p b{font-style:normal;font-weight:800;color:var(--char)}
.sqtile .p .per{color:var(--mut);font-weight:500}
.sqtile .p .q{font-weight:700;color:var(--char)}
.sqtile:hover > b{text-decoration:underline;text-underline-offset:3px}
.sqtile .flag{position:absolute;left:8px;top:8px;background:var(--red);color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 8px;border-radius:4px}

/* ------------------------------------------------------------ big footer */
.foot{background:var(--navy);color:#fff;margin-top:clamp(30px,4vw,56px)}
.foot .wrap{padding-block:clamp(34px,4vw,54px)}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(20px,3vw,44px)}
@media(max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot .cols{grid-template-columns:1fr}}
.foot .lgf{height:34px;width:auto;filter:brightness(0) invert(1)}
.foot .rule{border:0;border-top:1px solid rgba(255,255,255,.28);margin:18px 0}
.foot p{color:#c6cede;font-size:.9rem;line-height:1.6;margin:0 0 10px}
.foot h4{font-size:.98rem;font-weight:800;margin:0 0 14px;font-family:Archivo}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{color:#c6cede;font-size:.9rem}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot .stars{color:#ffc046;font-size:1.05rem;letter-spacing:2px}
.foot .rate{color:#c6cede;font-size:.84rem;margin-top:7px}
.footbar{background:var(--navy-d)}
.footbar .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding-block:16px;font-size:.82rem;color:#a9b4c6}
.footbar a{color:#c6cede;text-decoration:underline;text-underline-offset:3px}
.footbar .by{margin-left:auto;display:flex;align-items:center;gap:7px;color:#8d99ad}
@media(max-width:700px){.footbar .by{margin-left:0}}

/* --- fixes after first render ------------------------------------------- */
/* Nav labels are two words long and must wrap, not collide. Each item gets an
   equal share of the bar and centres its own label inside it. */
.catbar > ul{justify-content:space-between;align-items:stretch}
.nitem{flex:1 1 0;min-width:0;display:flex}
.nitem > .ntop{white-space:normal;overflow-wrap:break-word;max-width:none;
  width:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:11px 4px;hyphens:none}
/* An equal share of a phone-width bar is about 55px, narrower than the word
   "Promotional", so the labels ran into each other. Below the breakpoint each
   item takes the width of its own label and the row scrolls sideways. */
@media(max-width:1000px){
  .catbar > ul{justify-content:flex-start}
  .nitem{flex:0 0 auto}
  .nitem > .ntop{white-space:nowrap;padding:11px 6px}
}

/* On a rail tile the quantity belongs on the product page, not under a 200px
   thumbnail where "from / $10 / for 50" breaks across three lines. */
.sqtile .p .per{display:none}
.sqtile .p{white-space:nowrap}
/* the price's <b> is inline; only the product name is a block. */
.sqtile .p b{display:inline;margin:0;font-size:inherit}

/* ==========================================================================
   Category page, breadcrumb, cream masthead with a standing subcategory
   sidebar, and product cards whose name and description sit inside the card.
   ========================================================================== */

.crumbbar{background:#fff;border-bottom:1px solid var(--line)}
.crumbbar .wrap{display:flex;align-items:center;gap:9px;padding-block:14px;
  font-size:.86rem;color:var(--mut);flex-wrap:wrap}
.crumbbar a{color:var(--char)}
.crumbbar a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbbar i{width:6px;height:6px;border-right:1.8px solid var(--faint);
  border-top:1.8px solid var(--faint);transform:rotate(45deg);display:block}

/* The cream band is only as tall as the intro and its photograph. The sidebar
   is lifted out of the grid so a long subcategory list overflows DOWN past the
   cream into the white below, instead of stretching a 1000px block of cream. */
.cathero{background:var(--cream)}
.cathero .wrap{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(20px,2.6vw,40px);padding-block:clamp(22px,2.8vw,34px);
  align-items:center;padding-left:calc(300px + clamp(20px,2.6vw,40px) +
    clamp(16px,3vw,36px))}
.catnav{position:absolute;left:clamp(16px,3vw,36px);
  top:clamp(22px,2.8vw,34px);width:300px}
#cbody > .wrap{padding-left:calc(300px + clamp(20px,2.6vw,40px) +
  clamp(16px,3vw,36px))}
/* a search has no sidebar and no category photo: a short header, full width */
.cathero.search .wrap, #cbody.search > .wrap{padding-left:clamp(16px,3vw,36px)}
.cathero.search{padding-block:0}
.cathero.search .wrap{grid-template-columns:minmax(0,1fr);padding-block:30px}
.cathero.search .catshot{display:none}
.cathero.search h1{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:6px}
@media(max-width:1180px){
  .cathero .wrap{grid-template-columns:minmax(0,1fr)}
  .catshot{display:none}
}
@media(max-width:900px){
  .cathero .wrap,#cbody > .wrap{padding-left:clamp(16px,3vw,36px)}
  .catnav{display:none}
}

/* The sidebar is the whole category in one glance, which is what stops a
   shopper from having to walk back up to the mega menu to change their mind. */
.catnav{background:#fff;border-radius:12px;padding:24px 22px}
.catnav > b{display:block;font-family:Archivo;font-weight:900;
  font-size:1.3rem;line-height:1.2;padding-bottom:16px;
  border-bottom:1px solid var(--line)}
.catnav section{padding:15px 0;border-bottom:1px solid var(--line)}
.catnav section:last-child{border-bottom:0;padding-bottom:0}
.catnav h5{margin:0 0 10px;font-family:Archivo;font-weight:900;font-size:.98rem}
.catnav h5 a{color:var(--char)}
.catnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.catnav li a{font-size:.89rem;color:#3d3d44}
.catnav li a:hover,.catnav h5 a:hover{color:var(--red);text-decoration:underline;
  text-underline-offset:3px}
.catnav .all a{font-weight:700;color:var(--char)}

.catintro .rev{font-size:.88rem;color:var(--mut);margin:0 0 6px}
.catintro .rev b{color:#e8a51c;letter-spacing:1px}
.catintro h1{font-family:Archivo;font-weight:900;margin:0 0 12px;
  font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.1}
.catintro p{margin:0 0 12px;font-size:1rem;line-height:1.55;color:#3d3d44;max-width:46ch}
.catintro .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.catintro .cta a{border-radius:7px;padding:13px 22px;font-weight:700;font-size:.92rem;
  border:1.6px solid var(--char)}
.catintro .cta a.solid{background:var(--char);color:#fff}
.catintro .cta a.solid:hover{background:var(--red);border-color:var(--red)}
.catintro .cta a.hollow{background:#fff;color:var(--char)}
.catintro .cta a.hollow:hover{background:var(--sand)}

.catshot{border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.catshot img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------------------- product cards */
.psec{padding-block:clamp(28px,3.6vw,48px)}
.psec + .psec{padding-top:0}
.psec h2{font-family:Archivo;font-weight:900;margin:0 0 6px;
  font-size:clamp(1.3rem,2.5vw,1.85rem)}
.psec .sub{margin:0 0 22px;color:var(--mut);font-size:.95rem;max-width:70ch}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* the category page: product boxes only (2026-10-18) */
.sqgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
@media(max-width:980px){.sqgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.sqgrid{grid-template-columns:repeat(2,1fr);gap:16px 12px}}
.acol .vs{display:block;font-size:.8rem;color:var(--mut);margin:2px 0 6px}
.psec .methods{margin:26px 0 0;font-size:.95rem;color:var(--mut)}
.psec .methods a{color:var(--char);font-weight:700}
.psec .methods a:hover{color:var(--red)}
.acol .vs a{color:var(--mut)}
.acol .vs a:hover{color:var(--red)}
@media(max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}}

.pcard{display:flex;flex-direction:column;background:var(--tileBg);
  border-radius:11px;overflow:hidden;position:relative}
.pcard .shot{display:block;aspect-ratio:16/11;overflow:hidden;background:#e9e5dd}
.pcard .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s}
.pcard:hover .shot img{transform:scale(1.04)}
.pcard .info{padding:16px 18px 20px}
.pcard b{display:block;font-size:1.02rem;font-weight:800;margin-bottom:5px}
.pcard .d{display:block;font-size:.89rem;color:#4a4a52;line-height:1.5}
.pcard .p{display:block;margin-top:11px;font-size:.92rem;color:var(--char)}
.pcard .p b{display:inline;font-weight:800;margin:0}
.pcard .p .per{color:var(--mut)}
.pcard:hover b{text-decoration:underline;text-underline-offset:3px}
.pcard .flag{position:absolute;left:11px;top:11px;background:var(--red);color:#fff;
  font-size:.63rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;z-index:2}
.pcard .spec{display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/11;background:#e9e5dd}
.pcard .sheet{background:#fff;border:1.5px dashed var(--faint);border-radius:5px;
  display:flex;align-items:center;justify-content:center;max-height:74%;max-width:62%;
  min-width:96px;color:var(--mut);font-size:.76rem;font-weight:700}

.backto{margin:26px 0 0;font-weight:700}
.backto a{color:var(--red)}
.backto a:hover{text-decoration:underline;text-underline-offset:3px}

/* A simpler masthead for the pages with no sidebar: same cream band, same
   breadcrumb, so contact and the product index sit in the same system. */
.pagehero{background:var(--cream)}
.pagehero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,44px);padding-block:clamp(26px,3.4vw,44px);align-items:center}
.pagehero h1{font-family:Archivo;font-weight:900;margin:0 0 12px;
  font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.08}
.pagehero p{margin:0;color:#3d3d44;font-size:1.02rem;line-height:1.55;max-width:56ch}
.pagehero .shot{border-radius:12px;overflow:hidden;aspect-ratio:16/10}
.pagehero .shot img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .pagehero .wrap{grid-template-columns:1fr}
  .pagehero .shot{display:none}
}

/* ===================================================================== *
 * Product page (product.html): gallery left, decisions right.
 * ===================================================================== */
.pdp .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);padding-block:clamp(20px,3vw,40px)}
@media(max-width:860px){.pdp .wrap{grid-template-columns:1fr}}
.pgal .main{position:relative;border-radius:14px;overflow:hidden;background:#f0ede7;aspect-ratio:1/1}
.pgal .main img{width:100%;height:100%;object-fit:cover;display:block}
.pgal .flag{position:absolute;left:14px;top:14px;background:var(--red);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:6px 9px;border-radius:5px}
.pgal .thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
/* the picture stays in view while the options beside it scroll, so no dead space under it */
@media(min-width:861px){.pgal{position:sticky;top:16px;align-self:start}}
.pgal .main canvas.pover{position:absolute;inset:0;width:100%;height:100%;display:block}
.pgal .pfaces{margin-top:14px}
.pgal .pflab{margin:0 0 8px;font-size:.92rem;font-weight:800}
.pgal .pflab b{font-weight:600;color:var(--mut)}
.pgal .faces{display:flex;gap:10px;flex-wrap:wrap}
.pgal .faces button{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.pgal .faces button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--char)}
.pgal .thumbs button{width:84px;height:84px;padding:0;border:2px solid transparent;border-radius:8px;
  overflow:hidden;background:#f0ede7;cursor:pointer}
.pgal .thumbs button.on{border-color:var(--char)}
.pgal .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pbuy h1{font-family:Archivo;font-weight:900;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.1;margin:0 0 8px}
.pbuy .rev{font-size:.9rem;color:var(--mut);margin:0 0 10px}
.pbuy .rev b{color:#e8a51c;letter-spacing:1px}
.pbuy .pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.pbuy .pills span{font-size:.78rem;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:#f6f7f9}
.pbuy .desc{font-size:1rem;line-height:1.55;color:#2a2d34;margin:0 0 18px}
.pbuy .desc a{color:var(--char);text-decoration:underline;text-underline-offset:3px}
.pbuy .price{margin:0 0 18px}
.pbuy .price b{display:block;font-family:Archivo;font-weight:900;font-size:1.9rem;line-height:1.1}
.pbuy .price span{font-size:.92rem;color:var(--mut)}
.pbuy .pickup{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:0 0 18px;
  display:flex;flex-direction:column;gap:8px}
.pbuy .pickup div{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:#2a2d34}
.pbuy .pickup svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:var(--char);stroke-width:1.7;stroke-linejoin:round}
.pbuy .pickup b{font-weight:700;margin-right:6px}
/* vehicle wraps and lettering: no designer, the mockup is made at the shop */
.pbuy .inperson{border:1.5px solid #f3c4c6;background:var(--red-w);border-radius:10px;
  padding-block:14px;padding-inline:16px;margin:0 0 18px;font-size:.92rem;color:#2a2d34}
.pbuy .inperson b{display:block;font-family:Archivo;font-weight:900;font-size:1.05rem;color:var(--char);margin-bottom:4px}
.pbuy .inperson p{margin:0 0 6px;line-height:1.5}
.pbuy .inperson .where{margin:0;font-weight:600}
.pbuy .inperson .where a{color:var(--red);font-weight:800}
.pbuy .opt{margin:0 0 16px}
.pbuy .opt > label{display:block;font-weight:800;font-size:.98rem;margin-bottom:7px}
.pbuy .selwrap{position:relative}
.pbuy select{width:100%;appearance:none;-webkit-appearance:none;border:1.6px solid var(--char);border-radius:8px;
  padding:14px 44px 14px 14px;font:inherit;font-size:.98rem;font-weight:600;background:#fff;color:var(--char)}
.pbuy .selwrap::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--char);border-bottom:2px solid var(--char);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pbuy .od{display:block;font-size:.82rem;color:var(--mut);margin-top:6px}
.qtable{display:flex;flex-direction:column;gap:8px}
.qrow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;
  border:1.6px solid var(--line);border-radius:9px;padding:13px 16px;cursor:pointer;background:#fff}
.qrow:hover{border-color:var(--char)}
.qrow.on{border-color:#1a6bd8;background:#eaf3ff;box-shadow:inset 0 0 0 1px #1a6bd8}
.qrow input{position:absolute;opacity:0;width:0;height:0}
.qrow .qn{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:8px}
.qrow .qn em{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid #1a6bd8;color:#1a6bd8;border-radius:999px;padding:2px 8px}
.qrow .qp b{font-weight:800;font-size:1rem}
.qrow .qp small{color:var(--mut);font-size:.82rem;margin-left:4px}
.qrow .qs{font-size:.84rem;color:var(--green);font-weight:700;min-width:84px;text-align:right}
@media(max-width:480px){.qrow{grid-template-columns:1fr auto}.qrow .qs{grid-column:1/-1;text-align:left;min-width:0}}
.pcta{display:flex;flex-direction:column;gap:9px;margin:20px 0 10px}
.pcta a{text-align:center;border-radius:8px;padding:15px 22px;font-weight:800;font-size:.98rem;border:1.6px solid var(--char)}
.pcta .solid{background:var(--red);border-color:var(--red);color:#fff}
.pcta .solid:hover{background:var(--red-d);border-color:var(--red-d)}
.pcta .hollow{background:#fff;color:var(--char)}
.pcta .hollow:hover{background:var(--sand)}
.pbuy .fine{font-size:.8rem;color:var(--faint);margin:0}
.pdetails{background:var(--sand);border-top:1px solid var(--line)}
.pdetails .wrap{padding-block:clamp(26px,3.5vw,44px)}
.pdetails h2{font-family:Archivo;font-weight:900;font-size:1.5rem;margin:0 0 16px}
.dcols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.dcols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dcols{grid-template-columns:1fr}}
.dcols h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 8px}
.dcols p{margin:0;font-size:.92rem;line-height:1.6;color:#2a2d34}

/* your designs (2026-10-19) */
/* on a phone the link is its icon and the count, so the logo, it and "Get a quote" share one row */
@media(max-width:900px){
  .shhd .acct.mine{display:flex;margin-left:auto;font-size:0;gap:4px}
  .shhd .acct.mine svg{width:24px;height:24px}
  .shhd .acct.mine #mine-n{font-size:.86rem;font-weight:700}
  .shhd .quote{margin-left:0}
}
.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.dcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dcard .pic{display:block;background:#eef0f3;aspect-ratio:4/3;overflow:hidden}
.dcard .pic img{width:100%;height:100%;object-fit:contain;display:block;padding:14px;box-sizing:border-box}
.dcard .tx{padding:16px 18px 18px}
.dcard .tx > b{display:block;font-family:Archivo;font-weight:900;font-size:1.08rem}
.dcard .w b{display:inline;font-weight:800;color:var(--char)}
.dcard .w{display:block;color:var(--mut);font-size:.9rem;margin:4px 0 12px}
.dcard .w i{font-style:normal;color:var(--mut)}
.dcard .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dcard .acts .btn{padding:9px 14px;font-size:.88rem}
.dcard .acts .lnk{background:none;border:0;padding:6px 4px;font:inherit;font-size:.86rem;font-weight:700;color:var(--mut);cursor:pointer}
.dcard .acts .lnk:hover{color:var(--red)}
.dempty{background:#fff;border:1px dashed var(--line);border-radius:14px;padding:28px;color:var(--mut)}
.dempty .starts a{font-weight:700;color:var(--char)}
/* account box on "Your designs": sign in by email, or who is signed in.
   Scoped to its #acct box: a bare .acct also matched the header's phone and
   "Your designs" links, giving the phone a border, padding and a 22px bottom
   margin that lifted it 11px above "Get a quote" (2026-11-04). */
#acct .acct{background:#fff;border:1px solid var(--line);border-radius:14px;padding-inline:22px;padding-block:18px;margin-block-end:22px}
#acct .acct p{margin:0;color:var(--mut)}
#acct .acct p b{color:var(--char)}
#acct .acct .row{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:12px}
#acct .acct input{flex:1 1 220px;min-width:0;height:44px;border:1px solid var(--line);border-radius:10px;padding-inline:12px;font:inherit}
#acct .acct .msg{margin-block-start:10px;color:#b42318}
#acct .acct.on{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.dempty .starts a:hover{color:var(--red)}
.samerow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.samerow a{display:block;text-align:center;color:var(--char);font-weight:700;font-size:.92rem}
.samerow canvas{display:block;width:100%;height:auto;border-radius:12px;background:#eef0f3;margin-bottom:8px}
@media(max-width:700px){.samerow{grid-template-columns:repeat(2,1fr)}}
#resume{background:#fff;border-bottom:1px solid var(--line)}
.resume{display:flex;align-items:center;gap:18px;padding-block:14px;flex-wrap:wrap}
.resume .thumbs{display:flex;gap:8px}
.resume .thumbs img{width:64px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#eef0f3}
.resume p{margin:0;flex:1 1 220px;color:var(--mut)}
.resume p b{color:var(--char)}
.resume .btn{padding:10px 18px;font-size:.9rem}

/* families: the main product large, its branches beside it (2026-10-19) */
.fam{padding-block:22px 6px}
.fam h2{font-family:Archivo;font-weight:900;margin:0 0 4px;font-size:clamp(1.25rem,2vw,1.6rem)}
.fam h2 a{color:var(--char)}
.fam h2 a:hover{color:var(--red)}
.fam .sub{margin:0 0 14px;color:var(--mut);font-size:.93rem;max-width:70ch}
.famrow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;grid-auto-flow:dense}
.famrow .sqtile.lead{grid-column:span 2;grid-row:span 2}
.famrow .sqtile.lead > b{font-size:1.15rem}
@media(max-width:980px){.famrow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.famrow{grid-template-columns:repeat(2,1fr);gap:12px}.famrow .sqtile.lead{grid-column:span 2;grid-row:auto}.famrow .sqtile.lead .shot{aspect-ratio:16/10}}

/* category: shop by type cards (2026-10-19) */
.tgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
@media(max-width:980px){.tgrid2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tgrid2{grid-template-columns:1fr}}
.tcard2{display:block;color:var(--char)}
.tcard2 .shot{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--tileBg);position:relative}
.tcard2 .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.tcard2 .shot canvas{position:absolute;inset:0;width:100%;height:100%}
.tcard2:hover .shot img{transform:scale(1.035)}
.tcard2 > b{display:block;font-family:Archivo;font-weight:900;font-size:1.15rem;margin-top:12px}
.tcard2:hover > b{color:var(--red)}
.tcard2 .ln{display:block;font-size:.88rem;color:var(--mut);margin-top:3px;line-height:1.45}
.tcard2 .p{display:block;font-size:.88rem;margin-top:6px;color:var(--char)}
.tcard2 .p b{font-weight:800}
.catintro .cta{gap:8px}
.catintro .cta a.pill{padding:9px 15px;border-radius:999px;font-size:.85rem}

/* the sidebar: square top flush with the breadcrumb bar, red edge (2026-10-19) */
.catnav{border-radius:0 0 12px 12px;border-top:4px solid var(--red)}
.cathero .wrap{padding-top:clamp(22px,2.8vw,34px)}
.subrail .subcat{display:block;color:var(--char)}
.subcat .shot{display:block;position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--tileBg)}
.subcat .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.subcat .shot canvas{position:absolute;inset:0;width:100%;height:100%}
.subcat:hover .shot img{transform:scale(1.04)}
.subcat > b{display:block;margin-top:9px;font-family:Archivo;font-weight:900;font-size:1rem}
.subcat:hover > b{color:var(--red)}
.subcat .p{display:block;font-size:.84rem;color:var(--mut);margin-top:2px}

/* smaller product tiles on department pages: six across */
#cbody .psec .sqgrid{grid-template-columns:repeat(6,1fr);gap:18px 14px}
#cbody .psec .sqgrid .sqtile > b{font-size:.86rem}
@media(max-width:1180px){#cbody .psec .sqgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){#cbody .psec .sqgrid{grid-template-columns:repeat(2,1fr)}}
.cathero.search .wrap, #cbody.search > .wrap{padding-left:clamp(16px,3vw,36px)}
/* a tighter department header: no section padding, a shorter photo (2026-10-19) */
.cathero{padding-block:0}
.cathero .wrap{padding-block:22px}
.catnav{top:22px}
.catshot{aspect-ratio:16/9}
.catintro h1{margin-bottom:8px}
.catintro p{margin-bottom:8px}

/* ===========================================================================
   2026-10-28 site-wide tidy: header controls one height, department rows that
   line up with the grid under them.
   =========================================================================== */
.shhd .acct, .shhd .quote{height:48px;box-sizing:border-box;display:inline-flex;align-items:center}
.shhd .quote{padding-block:0;padding-inline:22px;font-size:.92rem}
@media(max-width:900px){.shhd .acct:not(.mine){display:none}}
@media(max-width:640px){.shhd .acct, .shhd .quote{height:42px}}
/* the "Shop <department>" row: same columns, gap and square shape as Best sellers below it */
#cbody .crailwrap.n6 .subrail{gap:18px 14px;grid-auto-columns:calc((100% - (var(--n,6) - 1)*14px) / var(--n,6))}
#cbody .subrail .subcat .shot{aspect-ratio:1/1}
#cbody .subrail .subcat > b{font-size:.92rem}
@media(max-width:1180px){#cbody .crailwrap.n6 .subrail{grid-auto-columns:calc((100% - 3*14px) / 4)}}
@media(max-width:560px){#cbody .crailwrap.n6 .subrail{grid-auto-columns:calc((100% - 14px) / 2)}}
/* the holiday link in the category bar */
.nitem.ndeals > .ntop{color:var(--red);font-weight:800}
.deal[hidden]{display:none}

/* ===========================================================================
   2026-11-04 alignment pass.
   =========================================================================== */
/* Phone header: in launch mode "Your designs" is hidden, and it was the item
   carrying margin-left:auto, so "Get a quote" sat against the logo instead of
   the right edge. The logo now takes the slack, whichever links are showing. */
@media(max-width:640px){
  .shhd .bar > a:first-child{margin-right:auto}
  .shhd .acct.mine{margin-left:0}
}
/* Category bar on one line. Equal-share items made every two-word label wrap
   onto two lines (60px tall items) even at 1920. Each item now takes its own
   label's width, the row spreads with space-between, and the type scales down
   just enough between 1000px and 1280px that the eleven labels still fit. */
@media(min-width:1001px){
  .catbar > ul{gap:8px}
  .nitem{flex:0 1 auto}
  .nitem > .ntop{white-space:nowrap;padding-block:13px;padding-inline:0;
    font-size:clamp(.75rem, calc((100vw - 140px) / 72), .88rem)}
}
/* Quantity table: each row was its own grid, so a row without a "% savings"
   cell pushed its price to a different x than the rows below it. The rows now
   share one set of columns (subgrid), and price and per-unit are separate
   cells, so every price and every per-unit figure line up down the table. */
@supports (grid-template-columns:subgrid){
  .qtable{display:grid;grid-template-columns:1fr auto auto auto;row-gap:8px}
  .qrow{grid-column:1/-1;grid-template-columns:subgrid}
  .qrow .qp{display:contents}
  .qrow .qp b{justify-self:end;font-variant-numeric:tabular-nums}
  .qrow .qp small{margin-left:0;font-variant-numeric:tabular-nums}
  @media(max-width:480px){
    .qtable{grid-template-columns:1fr auto auto}
    .qrow .qs{grid-column:1/-1}
    .qrow .qs:empty{display:none}
  }
}
/* Hero buttons: the outline button has a 2px border and the white one had none,
   so once they wrap onto two lines on a phone they were 52px and 56px tall and
   different widths. Same border on both; on a phone each takes the full row. */
.bhero .go .p{border:2px solid #fff}
.bhero .go .p:hover{border-color:var(--cream)}
@media(max-width:520px){.bhero .go a{flex:1 1 100%;text-align:center}}
/* "Shop holiday" broke onto two lines beside the strip text on a phone. */
.deal a{white-space:nowrap}
/* Product details had the section's padding AND its .wrap's padding stacked,
   114px above "Details" against about 46px on the sections around it. */
.pdetails{padding-block:0}
/* Every product page: the variant list ("Soft touch, Linen, ...") is meant to sit
   under the product name, but the row is a flex row with no wrap, so it became a
   third column and squeezed names like "Business Cards" onto two lines. */
.acol li{flex-wrap:wrap;row-gap:3px}
.acol li .vs{flex-basis:100%;margin-block:0}
/* Software page: its button pairs were bare inline-blocks, 5px apart side by
   side and touching (0px) once they stacked on a phone. */
.btnrow{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:520px){.btnrow .btn{flex:1 1 100%;text-align:center}}
/* Contact and request: the first field label's 14px top margin started the form
   14px below the map beside it. */
.cgrid2 .cform > label:first-of-type{margin-top:0}
/* ------------------------------------------------------------ vehicles page
   Jack, 2026-11-06: five products, so no sidebar. Photo hero, one big card per
   product, a strip of real jobs and the in-person note (shop.js initVehicles). */
.vehpage .cathero{display:none}
.vehpage #cbody{min-height:0}
.vhero{position:relative;overflow:hidden;padding-block:0;background:var(--char);color:#fff;isolation:isolate}
.vhero .vbg{position:absolute;inset:0;z-index:-1}
.vhero .vbg img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;display:block}
.vhero .vbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,15,18,.92) 0%,rgba(14,15,18,.78) 38%,rgba(14,15,18,.15) 75%,rgba(14,15,18,0) 100%)}
.vhero .wrap{padding-block:clamp(56px,8vw,118px)}
.vhcopy{max-width:560px}
.vhero .eyebrow{color:#ff8a8f;display:block;margin:0 0 14px}
.vhero h1{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:clamp(2.2rem,5vw,3.9rem);
  line-height:1.02;letter-spacing:-.02em;margin:0 0 18px;color:#fff}
.vhero p{margin:0 0 24px;font-size:1.06rem;line-height:1.6;color:rgba(255,255,255,.86)}
.vhero .rev{margin:22px 0 0;font-size:.85rem;color:rgba(255,255,255,.7)}
.vgo{display:flex;flex-wrap:wrap;gap:12px}
.vgo .btn{padding-block:14px;padding-inline:26px;border:2px solid transparent;text-align:center}
.vgo .btn.red{border-color:var(--red)}
.btn.vline{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.btn.vline:hover{background:#fff;color:var(--char)}

.vprods{padding-block:clamp(44px,6vw,84px)}
.vgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.vcard{grid-column:span 2;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.vcard.big{grid-column:span 3}
.vcard:hover{box-shadow:0 14px 34px rgba(20,22,26,.12);transform:translateY(-2px)}
.vshot{display:block;position:relative;aspect-ratio:4/3;background:var(--tileBg);overflow:hidden}
.vcard.big .vshot{aspect-ratio:16/10}
.vshot img,.vshot canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.vcard:hover .vshot img{transform:scale(1.04)}
.vtxt{display:flex;flex-direction:column;flex:1;padding-block:20px 22px;padding-inline:22px}
.vn{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:.74rem;letter-spacing:.14em;color:var(--red)}
.vtxt h3{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:clamp(1.25rem,2vw,1.6rem);margin:4px 0 8px;line-height:1.1}
.vcard.big .vtxt h3{font-size:clamp(1.4rem,2.4vw,1.95rem)}
.vtxt h3 a{color:inherit;text-decoration:none}
.vtxt p{margin:0;color:var(--mut);font-size:.95rem;line-height:1.55}
.vtxt .vprice{margin:10px 0 0;font-size:.88rem;color:var(--char)}
.vtxt .vprice .q{font-weight:700}
.vacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:auto;padding-top:18px}
.vacts .btn{padding-block:11px;padding-inline:20px;font-size:.9rem}
.vmore{font-weight:700;font-size:.9rem;color:var(--char);text-decoration:underline;text-underline-offset:3px}
.vmore:hover{color:var(--red)}

.vjobs{background:var(--char);color:#fff;padding-block:clamp(44px,6vw,80px)}
.vjobs .hhd h2{color:#fff}
.vjobs .hhd p{color:rgba(255,255,255,.72)}
.vstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.vstrip figure{margin:0;position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#222}
.vstrip img{width:100%;height:100%;object-fit:cover;display:block}
.vstrip figcaption{position:absolute;inset-inline:0;bottom:0;padding-block:28px 10px;padding-inline:12px;font-size:.8rem;font-weight:600;
  color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72))}

.vshop{background:var(--sand);border-block:1px solid var(--line);padding-block:clamp(44px,6vw,84px)}
.vshop .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.vnote .eyebrow{display:block;margin:0 0 10px}
.vnote h2{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.06;margin:0 0 14px}
.vnote p{margin:0 0 16px;color:var(--mut);line-height:1.6}
.vnote .where{color:var(--char);font-size:.95rem}
.vnote .where a{color:var(--red-d);font-weight:700}
.vnote .vgo{margin-top:22px}
.vnote .btn.line{border-color:var(--char);color:var(--char);background:transparent}
.vnote .btn.line:hover{background:var(--char);color:#fff}
.vsteps{list-style:none;margin:0;padding-inline:0;counter-reset:vs;display:grid;gap:12px}
.vsteps li{counter-increment:vs;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding-block:18px;padding-inline:20px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px}
.vsteps li::before{content:counter(vs,decimal-leading-zero);grid-row:span 2;font-family:Archivo,Inter,sans-serif;font-weight:900;
  font-size:1.5rem;color:var(--red);line-height:1}
.vsteps b{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:1.02rem}
.vsteps span{font-size:.9rem;color:var(--mut);line-height:1.5}

@media(max-width:960px){
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vcard,.vcard.big{grid-column:span 1}
  .vcard:last-child:nth-child(odd){grid-column:1/-1}
  .vshop .wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .vhero .vbg{position:relative;inset:auto;z-index:0;height:min(62vw,300px)}
  .vhero .vbg img{object-position:30% 60%}
  .vhero .vbg::after{background:linear-gradient(180deg,rgba(20,22,26,0) 55%,rgba(20,22,26,1) 100%)}
  .vhero .wrap{padding-block:8px 40px}
  .vgrid{grid-template-columns:minmax(0,1fr)}
  .vcard:last-child:nth-child(odd){grid-column:auto}
  .vcard .vshot,.vcard.big .vshot{aspect-ratio:4/3}
  .vstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){.vgo .btn{flex:1 1 100%}}

/* sales@ in the header (Jack 2026-11-06: customers email it a lot); dropped where the bar gets tight */
@media(max-width:1279px){.shhd .acct.mail{display:none}}

/* ------------------------------------------------------------ software page
   Jack 2026-11-06 (second pass): light like the rest of the shop, a compact intro the
   height of a category header, small cards (a group label then its three tools per row),
   no prices, no 25% offer copy (that lives on boldreachdata.com). shop.js initSoftware. */
.softpage .cathero{display:none}
.softpage #cbody{min-height:0}
.sw-intro{background:var(--sand);border-bottom:1px solid var(--line);padding-block:clamp(22px,3vw,34px)}
/* copy left, picture right, held close together (Jack 2026-11-08, third pass: liked the
   split, it was only too spread out) */
.sw-intro .wrap{display:grid;grid-template-columns:minmax(0,560px) minmax(0,440px);justify-content:center;align-items:center;gap:clamp(20px,3vw,40px)}
.sw-icopy{max-width:560px}
.sw-ishot{aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 10px 30px rgba(20,22,26,.08)}
.sw-ishot img{display:block;width:100%;height:100%;object-fit:contain}
.sw-intro .eyebrow{display:block;margin:0 0 6px;color:var(--red-d)}
.sw-intro h1{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.05;margin:0 0 8px}
.sw-intro p{margin:0;color:#3d3d44;font-size:1rem;line-height:1.5}
.sw-go{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sw-go .btn{padding-block:10px;padding-inline:18px;font-size:.9rem;border:2px solid transparent}
.sw-go .btn.red{border-color:var(--red)}
.sw-go .btn.line{border-color:var(--char)}

/* the nine products: three group columns, heading on top, three icon rows each */
.sw-prods{padding-block:clamp(22px,3vw,34px)}
.sw-grps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px}
.sw-grp h3{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:1.1rem;line-height:1.2;margin:0 0 2px}
.sw-grp>p{margin:0 0 10px;color:var(--mut);font-size:.86rem;line-height:1.4}
.sw-tile{display:flex;align-items:flex-start;gap:12px;color:var(--char);text-decoration:none;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding-block:12px;padding-inline:14px;transition:border-color .15s}
.sw-grp .sw-tile+.sw-tile{margin-top:8px}
.sw-tile:hover{border-color:var(--red)}
.sw-ic{flex:0 0 40px;width:40px;height:40px;border-radius:9px;background:#fbeaea;display:flex;align-items:center;justify-content:center}
.sw-ic svg{width:22px;height:22px;fill:none;stroke:var(--red-d);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sw-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sw-txt b{font-size:.95rem;font-weight:700;line-height:1.3}
.sw-tile:hover .sw-txt b{color:var(--red-d)}
.sw-txt span{font-size:.84rem;line-height:1.4;color:var(--mut)}

.sw-proof{background:var(--sand);border-block:1px solid var(--line);padding-block:clamp(24px,3vw,36px)}
.sw-proof .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 40px;flex-wrap:wrap}
.sw-proof h2{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:clamp(1.25rem,2vw,1.55rem);margin:0 0 6px}
.sw-proof p{margin:0;color:var(--mut);font-size:.95rem;line-height:1.5;max-width:62ch}
.sw-proof p a{color:var(--red-d);font-weight:700;white-space:nowrap}
.sw-proof .sw-go{margin-top:0}

/* Jack 2026-11-08: Try it yourself (demo cards), What's your business? (the type-ahead
   from bizsearch.js) and a short FAQ under the software cards. The red claim ticker is
   site-wide now (.htick, top of this file's page chrome). */
.sw-more{padding-block:clamp(22px,3vw,34px);border-top:1px solid var(--line)}
.sw-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;margin-bottom:14px}
.sw-head h2{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:clamp(1.15rem,1.8vw,1.4rem);margin:0}
.sw-head p{margin:0;color:var(--mut);font-size:.88rem;line-height:1.45}
.sw-demos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
/* each demo is its real screen on top, whole (4:3, the screenshot's own shape), words under */
.sw-demo{display:flex;flex-direction:column;gap:10px;color:var(--char);text-decoration:none;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:10px;transition:border-color .15s}
.sw-demo:hover{border-color:var(--red)}
.sw-demo:hover .sw-txt b{color:var(--red-d)}
.sw-shot{display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#f6f6f7}
.sw-shot img{display:block;width:100%;height:100%;object-fit:contain}
.sw-demo .sw-txt{flex:1;padding-inline:4px;padding-block:0 4px}
.sw-txt em{font-style:normal;font-size:.8rem;font-weight:700;color:var(--red-d);margin-top:auto;padding-top:4px}
/* centred in the middle of the page (Jack 2026-11-08) */
.sw-ask{padding-block:clamp(36px,5vw,60px)}
.sw-ask .wrap{text-align:center}
.sw-ask h2{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0}
.sw-ask .wrap>p{margin-block:6px 18px;color:var(--mut);font-size:.95rem}
.sw-ask .bzs{max-width:760px;margin-inline:auto;text-align:left}
.sw-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;align-items:start}
.sw-faq details{border:1px solid var(--line);border-radius:10px;background:#fff}
.sw-faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:.92rem;padding-block:12px;padding-inline:16px 40px;position:relative}
.sw-faq summary::-webkit-details-marker{display:none}
.sw-faq summary::after{content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--red-d);font-size:1.15rem;font-weight:700}
.sw-faq details[open] summary::after{content:'\2212'}
.sw-faq details p{margin:0;padding-inline:16px;padding-block:0 14px;color:var(--mut);font-size:.88rem;line-height:1.5}
.sw-faqs{border-top:1px solid var(--line)}
.sw-proof{margin-bottom:0}

@media(max-width:1100px){
  .sw-demos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .sw-grps{grid-template-columns:minmax(0,1fr);gap:18px}
  .sw-intro .wrap{grid-template-columns:minmax(0,1fr)}
  .sw-ishot{max-width:440px}
}
@media(max-width:760px){
  .sw-demos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sw-faq{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------ site-wide claim ticker
   Jack 2026-11-08: slim Harbor-red band under the nav on every page (built in renderChrome).
   Pure CSS loop, paused on hover or focus, one still line under prefers-reduced-motion. */
.htick{display:block;overflow:hidden;background:var(--red);color:#fff;text-decoration:none;height:40px}
.htrack{display:flex;width:max-content;height:100%;animation:htick 60s linear infinite}
.htick:hover .htrack,.htick:focus-visible .htrack{animation-play-state:paused}
.htick:focus-visible{outline:3px solid var(--char);outline-offset:-3px}
.hrun{display:flex;align-items:center;flex:0 0 auto}
.hrun span{font-weight:700;font-size:.9rem;letter-spacing:.01em;white-space:nowrap;padding-inline:22px}
.hrun i{font-style:normal;opacity:.7}
@keyframes htick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .htrack{animation:none;width:100%;justify-content:center}
  .hrun[aria-hidden]{display:none}
  .hrun span~span,.hrun i{display:none}
}
@media(max-width:760px){.hrun span{font-size:.84rem}}

/* ------------------------------------------------------------ "What's your business?"
   The shared type-ahead (bizsearch.js) on the Software page and the Your Business hero. */
.bzs{position:relative}
.bzs-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bzs-row{display:flex;gap:10px}
.bzs-field{position:relative;flex:1;min-width:0}
.bzs-in{width:100%;height:60px;border:2px solid #8a8a90;border-radius:10px;background:#fff;color:var(--char);
  font:inherit;font-size:1.15rem;padding-inline:18px}
.bzs-in::placeholder{color:#8a8a90}
.bzs-in:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(225,27,34,.15)}
.bzs-go{height:60px;padding-inline:26px;font-size:1rem;flex:0 0 auto}
.bzs-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;margin:0;padding-block:6px;padding-inline:0;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(20,22,26,.12);
  max-height:340px;overflow-y:auto}
.bzs-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-block:11px;padding-inline:18px;
  cursor:pointer;font-size:1rem;color:var(--char)}
.bzs-list li b{color:var(--red-d)}
.bzs-list li small{font-size:.8rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bzs-list li[aria-selected="true"],.bzs-list li:hover{background:#fbeaea}
.bzs-out:empty{display:none}
.bzs-out{margin-top:14px}
.bzs-res,.bzs-note{border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;background:#fff;
  padding-block:16px;padding-inline:20px}
.bzs-res h3{margin:0 0 12px;font-size:1.05rem;line-height:1.35}
.bzs-res h3 span{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red-d);margin-bottom:2px}
.bzs-res p,.bzs-note{margin:0 0 14px;color:var(--mut);font-size:.95rem;line-height:1.7}
.bzs-res ul{margin:0 0 18px;padding-inline-start:20px;font-size:.95rem;line-height:1.7}
.bzs-res li+li{margin-top:10px}
.bzs-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.bzs-link{color:var(--red-d);font-weight:700;font-size:.9rem}
.bzs-note{margin:0}
.bzs-note a{color:var(--red-d);font-weight:700}
/* the Your Business hero, light (Jack: no dark bands); kit pages keep their blue hero */
.bhero.bzhero{background:var(--sky,#edf3fb);color:var(--char);border-bottom:1px solid var(--line)}
.bhero.bzhero h1 em{color:var(--red)}
.bhero.bzhero .lede{color:var(--mut)}
.bzhero #bizsearch{max-width:760px;margin-bottom:18px}
@media(max-width:600px){
  /* the list hangs under the whole row, so it never covers the stacked Show me button */
  .bzs-row{flex-direction:column;position:relative}
  .bzs-field{position:static}
  .bzs-in,.bzs-go{height:54px}
  .bzs-in{font-size:1.05rem}
  .bzs-go{width:100%}
}

/* the Your Business guided flow (business.html bizFlow): step 2 stage cards, step 3 products */
.bzflow{padding-block:clamp(26px,3.5vw,44px);border-bottom:1px solid var(--line);scroll-margin-top:12px}
.bzflow h2{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 14px}
.bzflow.in{animation:bzfade .5s ease both}
@keyframes bzfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bzflow.in{animation:none}}
.bzstages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:980px}
.bzstages button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;
  font:inherit;color:var(--char);background:#fff;border:2px solid var(--line);border-radius:12px;
  padding-block:18px;padding-inline:20px;transition:border-color .2s,background .2s}
.bzstages b{font-size:1.1rem}
.bzstages span{font-size:.88rem;color:var(--mut);line-height:1.4}
.bzstages button:hover{border-color:var(--red)}
.bzstages button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.bzstages button[aria-pressed="true"]{border-color:var(--red);background:#fdf1f1}
.bzstages button[aria-pressed="true"] b{color:var(--red-d)}
.bz3hd{margin-bottom:16px}
.bz3hd h2{margin-bottom:4px}
.bz3hd p{margin:0;color:var(--mut);font-size:.95rem}
.bz3hd .bz3eye{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red-d);margin-bottom:4px}
.bzsoft{margin-block:18px 0;padding-block:12px;padding-inline:16px;border-left:4px solid var(--red);background:#fafafa;
  border-radius:8px;font-size:.92rem;color:var(--char)}
.bzsoft a{color:var(--red-d);font-weight:700;white-space:nowrap}
.bz3foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:20px}
.bzall{color:var(--red-d);font-weight:700}
@media(max-width:600px){
  .bzstages{grid-template-columns:minmax(0,1fr);gap:10px}
  .bzstages button{padding-block:14px}
  .bzgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* ------------------------------------------------------------ software product pages
   Jack 2026-11-08: whole screenshots (4:3, never cropped), fuller Details, a Bold Reach band
   under them, and "Other things to help you" with at least five tools. */
.softprod .pgal .main{aspect-ratio:4/3;background:#fff;border:1px solid var(--line)}
.softprod .pgal .main img{object-fit:contain}
.softprod .pgal .thumbs button{width:112px;height:84px;background:#fff;border-color:var(--line)}
.softprod .pgal .thumbs button.on{border-color:var(--char)}
.softprod .pgal .thumbs img{object-fit:contain}
.softprod #also .sqtile .shot{aspect-ratio:4/3;background:#fff;border:1px solid var(--line)}
.softprod #also .sqtile .shot img{object-fit:contain}
.softprod .sqtile .p{display:none}
.dcols.d3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px}
.dcols ol{margin:0;padding-inline-start:18px;line-height:1.55}
.dcols ol li+li{margin-top:6px}
.brband{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 28px;margin-top:clamp(26px,3.5vw,40px);
  background:#fff;border:1px solid var(--line);border-radius:14px;padding-block:22px;padding-inline:24px}
.brband>img{width:72px;height:auto;display:block}
.brband .eyebrow{display:block;margin:0 0 4px;color:var(--red-d)}
.brband h2{font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:clamp(1.2rem,2vw,1.5rem);margin:0 0 6px}
.brband p{margin:0;color:var(--mut);line-height:1.55}
.brband p a{color:var(--red-d);font-weight:700;white-space:nowrap}
.brband ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;padding:0;list-style:none;font-size:.88rem;font-weight:700}
.brband li::before{content:'\2713';color:var(--red-d);margin-right:6px}
.bract{display:flex;flex-direction:column;gap:10px}
.bract .btn{text-align:center;padding-block:11px;padding-inline:20px;border:2px solid transparent;white-space:nowrap}
.bract .btn.red{border-color:var(--red)}
.bract .btn.line{border-color:var(--char)}
@media(max-width:900px){
  .dcols.d3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brband{grid-template-columns:auto minmax(0,1fr)}
  .bract{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
}
@media(max-width:600px){
  .dcols.d3{grid-template-columns:minmax(0,1fr)}
  .brband{grid-template-columns:minmax(0,1fr)}
}