/* NFC Display Co — staging rebuild
   Design tokens first, then layout. No external requests: fonts are system-stack,
   icons are inline SVG. Everything below assumes mobile-first (380px up). */

:root{
  --ink:#101013;
  --ink-2:#3a3a42;
  --ink-3:#6b6b76;
  --paper:#faf8f5;
  --paper-2:#f2ede6;
  --line:#e3ddd4;
  --accent:#ff6a13;
  --accent-ink:#c94e05;
  --white:#fff;

  --wrap:1180px;
  --gutter:20px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,16,19,.06), 0 8px 30px rgba(16,16,19,.08);
  --shadow-lg:0 2px 4px rgba(16,16,19,.06), 0 24px 60px rgba(16,16,19,.14);

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Headings are a serif. The tightly-tracked heavy sans that was here reads as
     a generated landing page; a serif reads as an established maker, which is
     what this business actually is. Still a system stack - no web font, no
     external request, nothing to load. */
  --font-head:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --step--1:clamp(.82rem,.79rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.19rem,1.1rem + .45vw,1.44rem);
  --step-2:clamp(1.45rem,1.28rem + .85vw,2.05rem);
  --step-3:clamp(1.8rem,1.45rem + 1.75vw,3rem);
  --step-4:clamp(2.2rem,1.6rem + 3vw,4.1rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;font-family:var(--font);font-size:var(--step-0);line-height:1.6;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.022em;margin:0;text-wrap:balance}
/* h4 is deliberately NOT in the serif rule below: both its uses are small UI
   labels - 13.5px dashboard panel headings and the 0.78rem uppercase footer
   headings - where a serif reads dated rather than established. */
h1,h2,h3{font-family:var(--font-head);letter-spacing:-.012em;line-height:1.14;font-weight:700}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);letter-spacing:-.006em}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---------- landline strip ---------- */
/* Sits ABOVE the sticky header rather than inside the nav. The nav already runs
   to seven links plus the log-in and the quote button at 900px, and a phone
   number is the one thing that has to read at every width, so it gets its own
   row. It scrolls away with the page; the sticky header is unchanged.
   No `padding: X 0` on the .wrap element - that wipes the 20px side gutter. */
.topbar{background:var(--ink);color:var(--white);font-size:.8rem;line-height:1.4}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.topbar__msg{color:rgba(255,255,255,.72);font-weight:600;letter-spacing:-.01em}
.topbar__tel{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--white);text-decoration:none;font-weight:700;white-space:nowrap;padding:7px 0;
}
.topbar__tel svg{width:14px;height:14px;flex:none;fill:currentColor}
.topbar__tel:hover{text-decoration:underline}
/* On a phone the strapline goes and the number centres, so it never wraps. */
@media (max-width:639px){
  .topbar__msg{display:none}
  .topbar__in{justify-content:center}
}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;background:rgba(250,248,245,.86);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s;
}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(16,16,19,.05)}
.hdr__in{display:flex;align-items:center;gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:-.03em;font-size:1.03rem}
.brand svg{width:26px;height:26px;flex:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{
  text-decoration:none;font-size:var(--step--1);font-weight:600;color:var(--ink-2);
  padding:9px 12px;border-radius:99px;transition:background .15s,color .15s;
}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
.nav__links{display:none}
@media (min-width:900px){.nav__links{display:flex;gap:2px}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:var(--step--1);font-weight:700;letter-spacing:-.01em;
  padding:13px 22px;border-radius:99px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .2s,background .18s,color .18s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(16,16,19,.18)}
.btn--primary:hover{background:#26262e;box-shadow:0 10px 26px rgba(16,16,19,.26)}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(255,106,19,.3)}
.btn--accent:hover{background:#f45f06;box-shadow:0 10px 28px rgba(255,106,19,.38)}
.btn--ghost{border-color:var(--line);background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--white);border-color:var(--ink-3)}
.btn--lg{padding:16px 30px;font-size:var(--step-0)}
.btn--block{width:100%}

/* mobile menu */
.burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);background:var(--white);border-radius:12px;cursor:pointer;padding:0}
@media (min-width:900px){.burger{display:none}}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobnav{display:none;border-top:1px solid var(--line);background:var(--paper);padding:10px var(--gutter) 20px}
.mobnav.is-open{display:block}
@media (min-width:900px){.mobnav,.mobnav.is-open{display:none}}
.mobnav a{display:block;text-decoration:none;font-weight:650;padding:13px 4px;border-bottom:1px solid var(--line)}
.mobnav .btn{margin-top:14px}

/* narrow phones: stop the header CTA crowding the logo */
@media (max-width:439px){
  .hdr__in{gap:10px}
  .brand{font-size:.92rem;gap:8px}
  .brand svg{width:23px;height:23px}
  .hdr .nav>.btn{font-size:.76rem;padding:11px 15px}
  .burger{width:42px;height:42px}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(18px,3vw,52px) 0 clamp(32px,5vw,72px)}
.hero__grid{display:grid;gap:clamp(18px,3vw,52px);align-items:center}
@media (min-width:940px){.hero__grid{grid-template-columns:1.02fr .98fr}}
/* Above the fold on a phone: headline + one line + video + CTA, no scrolling.
   The media is pulled above the buttons so it is genuinely on screen. */
@media (max-width:939px){
  .hero__copy{display:contents}
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero .eyebrow{order:1;margin-bottom:10px}
  .hero h1{order:2}
  .hero__sub{order:3;margin-top:12px;font-size:var(--step-0);max-width:none}
  /* Tight on purpose: the fold budget above is real. Every point added here
     costs roughly 25px, and the CTA falls off an 812px screen before you
     notice on a desktop. Measure after changing this, do not eyeball it. */
  .hero__points{order:3;margin-top:14px;max-width:none;gap:9px}
  .hero__points li{font-size:var(--step--1);line-height:1.4}
  .hero__points svg{width:18px;height:18px;margin-top:1px}
  .hero__media{order:4;margin-top:16px}
  .hero__cta{order:5;margin-top:16px}
  .hero__cta .btn{flex:1 1 100%}
  .hero h1{font-size:clamp(1.9rem,7.4vw,2.6rem)}
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);
  background:rgba(255,106,19,.1);padding:7px 14px;border-radius:99px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__sub{margin-top:20px;font-size:var(--step-1);color:var(--ink-2);max-width:34ch;line-height:1.45}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__note{margin-top:18px;font-size:var(--step--1);color:var(--ink-3);display:flex;align-items:center;gap:8px}
.hero__sub strong{color:var(--ink);font-weight:750}

/* Hero proof points. These replaced a single prose sub-line: three scannable
   facts read faster at the top of a page than one sentence, and "one-time
   purchase" leads because a monthly fee is the objection most visitors arrive
   with. `align-items:flex-start` keeps the tick beside the FIRST line when a
   point wraps to two, rather than floating to the middle of the block. */
.hero__points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px;max-width:38ch}
.hero__points li{display:flex;align-items:flex-start;gap:10px;font-size:var(--step-0);color:var(--ink-2);line-height:1.45}
.hero__points svg{width:19px;height:19px;flex:none;margin-top:2px;fill:var(--accent)}
.hero__points strong{color:var(--ink);font-weight:750}
.hero__media{position:relative}
.hero__media img,.hero__media .media-video{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.media-video{background:var(--paper-2);width:100%;display:block;border-radius:var(--radius);box-shadow:var(--shadow-lg)}

/* ---------- "in use" band ---------- */
/* Full-bleed, not inside .wrap: the pictures are the argument on this band, so
   they take the whole width and only a thin gutter keeps them off the edge.
   The gutter and the grid gap are the same value, so the rhythm holds. */
.uses-band{background:var(--paper-2);padding:clamp(24px,3vw,46px) 0}
/* Square on purpose: the source clips arrived in both orientations, and a centre
   crop to 1:1 is the only shape that treats a portrait phone video and a
   landscape one equally. Cropping happens at build time in ffmpeg, not here. */
.uses{
  list-style:none;margin:0;display:grid;
  gap:clamp(14px,1.5vw,22px);padding-inline:clamp(14px,1.5vw,22px);
}
@media (min-width:760px){.uses{grid-template-columns:repeat(3,1fr)}}

/* The label above each picture. A small boxed caption rather than a headline:
   these are captions for the pictures, not competing headings, and the sans
   keeps them reading as labels next to the serif used everywhere else. */
.use__name{
  /* justify-self does two jobs here: centres the box over its picture, and
     keeps it hugging its text - as a grid item, inline-block alone would
     still stretch to the full column. */
  display:inline-block;justify-self:center;width:fit-content;
  margin:0 0 clamp(7px,.7vw,11px);
  font-family:var(--font);font-size:clamp(.9rem,.83rem + .22vw,1.04rem);
  font-weight:700;letter-spacing:.005em;line-height:1.35;text-align:center;
  /* Dark text on the brand orange, not white: white on #ff6a13 is 2.9:1 and
     fails contrast at this size, whereas the ink is 6.7:1. */
  color:var(--ink);background:var(--accent);border:0;
  border-radius:var(--radius-sm);padding:9px 18px;
}

/* Keep the three pictures starting at the same height even if one label wraps.
   subgrid does it properly by sharing the band's rows; the min-height below is
   the fallback where subgrid is unavailable. */
@media (min-width:760px){
  .use__name{min-height:2.7em}
  @supports (grid-template-rows: subgrid){
    .uses{grid-template-rows:auto auto}
    .use{display:grid;grid-row:span 2;grid-template-rows:subgrid}
    .use__name{min-height:0;align-self:start}
  }
}
.use__media{
  position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--shadow);
}
/* The photo is a real <img> underneath, and the clip fades in on top of it.
   Deliberately NOT the video's poster attribute: a paused video keeps showing
   its last decoded frame, so the poster never comes back once it has played,
   and load() to force it is inconsistent across browsers. Layering makes the
   return to the photo unconditional. */
.use__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.use__vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .18s ease;
}
.use.is-playing .use__vid{opacity:1}
@media (prefers-reduced-motion:reduce){.use__vid{transition:none}}

/* One control, two jobs. On a touch screen there is no hover, so it has to say
   what to do and be big enough to hit - hence the labelled pill. On a pointer
   device hovering already starts the clip, so it shrinks to a quiet glyph and
   gets out of the way. It stays a real <button> on both, so it works with a
   keyboard and reads properly to a screen reader. */
.use__play{
  position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:.78rem;font-weight:700;letter-spacing:-.01em;color:#fff;
  background:rgba(16,16,19,.68);backdrop-filter:blur(6px);
  border:0;border-radius:99px;padding:9px 15px 9px 12px;cursor:pointer;
  transition:opacity .2s,transform .2s,background .2s;
}
.use__play svg{width:16px;height:16px;fill:currentColor;flex:none}
.use__play:hover{background:rgba(16,16,19,.82)}
/* While the clip runs the control would only cover it up. */
.use.is-playing .use__play{opacity:0;transform:scale(.9);pointer-events:none}

@media (hover:hover){
  /* Pointer devices: hovering is the affordance, so drop the words. */
  .use__play{left:auto;right:12px;padding:0;width:38px;height:38px;justify-content:center;background:rgba(16,16,19,.62)}
  .use__play-txt{display:none}
  .use__play svg{width:17px;height:17px;margin-left:2px}
  .use__media{transition:box-shadow .25s,transform .25s}
  .use:hover .use__media{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
}
@media (prefers-reduced-motion:reduce){
  .use__media,.use:hover .use__media,.use__play{transition:none;transform:none}
}

/* ---------- tap sequence (real photography, animated) ---------- */
.tapseq{
  position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);background:#241c17;isolation:isolate;
}
/* Willem's own square footage. The <img> inside the <video> is the last-resort
   fallback if the browser refuses the file, so a real frame always shows. */
.tapseq__vid,.tapseq__vid img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  border-radius:0!important;box-shadow:none!important;
}

/* Sound toggle. Sits opposite the "Real taps, real reviews" tag so the two
   never collide, and is big enough to hit on a phone. */
.tapseq__sound{
  position:absolute;top:12px;right:12px;z-index:3;
  width:40px;height:40px;display:grid;place-items:center;padding:0;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(16,16,19,.62);color:#fff;backdrop-filter:blur(6px);
  transition:background .18s ease,transform .18s ease;
}
.tapseq__sound:hover{background:rgba(16,16,19,.82);transform:scale(1.06)}
.tapseq__sound:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tapseq__sound svg{width:20px;height:20px;fill:currentColor}
.tapseq__sound .tapseq__sound-on{display:none}
.tapseq__sound[aria-pressed="true"] .tapseq__sound-off{display:none}
.tapseq__sound[aria-pressed="true"] .tapseq__sound-on{display:block}

/* tap ripple, fires as the sequence turns over */
.tapseq__ring{
  position:absolute;left:50%;top:52%;width:74px;height:74px;margin:-37px 0 0 -37px;
  border:3px solid rgba(255,255,255,.9);border-radius:50%;opacity:0;pointer-events:none;
}
.tapseq.is-tapping .tapseq__ring{animation:tapRing .9s ease-out}
@keyframes tapRing{
  0%{opacity:.95;transform:scale(.35)}
  70%{opacity:.35}
  100%{opacity:0;transform:scale(1.9)}
}
.tapseq__tag{
  position:absolute;left:14px;top:14px;z-index:2;background:rgba(16,16,19,.72);color:#fff;
  backdrop-filter:blur(6px);font-size:.72rem;font-weight:750;letter-spacing:.04em;
  padding:6px 12px;border-radius:99px;display:flex;align-items:center;gap:7px;
}
.tapseq__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:tapDot 1.6s ease-in-out infinite}
@keyframes tapDot{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .tapseq__f.is-on{animation:none}
  .tapseq.is-tapping .tapseq__ring{animation:none}
  .tapseq__tag::before{animation:none}
}
.hero__badge{
  position:absolute;left:-6px;bottom:-18px;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;
  font-size:var(--step--1);font-weight:700;max-width:min(260px,72%);line-height:1.3;
}
@media (min-width:940px){.hero__badge{left:-28px}}
.hero__badge svg{width:26px;height:26px;flex:none;color:var(--accent)}

/* ---------- trust strip ---------- */
.trust{border-block:1px solid var(--line);background:var(--paper-2);padding:12px 0}
.trust__label{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;text-align:center;margin-bottom:8px}
.trust__list{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 6px;list-style:none;margin:0;padding:0}
.trust__list li{font-weight:650;font-size:.71rem;color:var(--ink-2);background:var(--white);border:1px solid var(--line);padding:4px 10px;border-radius:99px}

/* ---------- sections ---------- */
/* Willem: the site had ~19% of its height in section padding alone. */
.sec{padding:clamp(34px,4.4vw,62px) 0}
.sec--tight{padding:clamp(24px,3vw,40px) 0}
.sec--tint{background:var(--paper-2)}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec--ink h2,.sec--ink h3{color:#fff}
.sec__head{max-width:56ch;margin-bottom:clamp(18px,2.4vw,30px)}
.sec__head--center{margin-inline:auto;text-align:center}
/* condensed header — same content, less vertical real estate before the content */
.sec__head--slim{margin-bottom:clamp(14px,1.6vw,20px)}
.sec__head--slim h2{font-size:var(--step-1)}
.sec__head--slim .sec__kicker{margin-bottom:8px}
.sec__head--slim .sec__lead{margin-top:10px;font-size:var(--step-0)}
.sec__kicker{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}
.sec--ink .sec__kicker{color:var(--accent)}
.sec__lead{margin-top:16px;font-size:var(--step-1);color:var(--ink-2);line-height:1.5}
.sec--ink .sec__lead{color:#b9b9c4}

/* how it works */
.steps{display:grid;gap:18px;counter-reset:s}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:22px}}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 28px;position:relative}
.sec--ink .step{background:#1b1b21;border-color:#2d2d36}
.step__n{
  counter-increment:s;width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:1.02rem;margin-bottom:16px;
}
.step__n::before{content:counter(s)}
.step h3{margin-bottom:9px}
.step p{color:var(--ink-2);font-size:var(--step--1)}
.sec--ink .step p{color:#a9a9b6}
.step ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.step li{font-size:var(--step--1);color:var(--ink-3);display:flex;gap:8px;align-items:flex-start}
.sec--ink .step li{color:#9a9aa8}
.step li svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--accent)}

/* how it works: two steps + portrait video */
.how{display:grid;gap:22px;align-items:center}
@media (min-width:860px){.how{grid-template-columns:1.12fr .88fr;gap:38px}}
/* two class names beats the single-class rule above at any width, so the steps
   stay centred and full width while there is no media column */
.how.how--nomedia{grid-template-columns:1fr;max-width:980px;margin-inline:auto}
/* with no media column the two steps sit side by side once there is room for it.
   Below this they stack, which is what you want on a phone. The closing line has
   to span both columns or it lands in a third cell. */
@media (min-width:760px){
  .how--nomedia .how__steps{grid-template-columns:1fr 1fr;gap:18px}
  .how--nomedia .how__done{grid-column:1 / -1;margin-top:10px}
}
.how__steps{display:grid;gap:16px;counter-reset:s}
.how__done{font-weight:750;font-size:var(--step-1);color:var(--ink);text-align:center;letter-spacing:-.01em;margin-top:2px}
.sec--ink .how__done{color:#fff}
.how__video{position:relative;display:flex;justify-content:center}
.how__video .media-video{width:100%;max-width:320px;aspect-ratio:9/16;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lg);background:#1b1b21}

.split{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split--rev .split__media{order:-1}}
.split__media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%}
/* On a phone this photo pushes the section past a screen and a half for no gain,
   so it only shows once the split is actually two columns. Note display:none does
   NOT prevent the download - the <picture> source/media split in the markup is
   what does that. The founder photo is a different .split__media and stays. */
@media (max-width:899px){.split__media--wide-only{display:none}}

/* benefits */
.benefits{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.benefits li{display:flex;gap:13px;align-items:flex-start;font-weight:600}
.benefits svg{width:22px;height:22px;flex:none;color:var(--accent);margin-top:2px}

/* The moments band (.moments / .moment / .moments__note) was removed on 10 August 2026
   with its section — see the note where it stood in index.html. `.media-video` itself
   is shared with the hero and the how-it-works clip and stays. */

/* ---------- products ---------- */
/* The bulk-price offer now leads the section at full width, with the range
   label under it. The old .rangetop two-column row is gone with the h2 it was
   balancing. */
.bulk{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;background:var(--ink);color:#fff;
  border-radius:var(--radius);padding:18px 24px;margin-bottom:26px;
}
.bulk strong{font-size:var(--step-1);letter-spacing:-.02em}
.bulk span{color:#b9b9c4;font-size:var(--step--1)}
.bulk .btn{margin-left:auto}

.prods{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:600px){.prods{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.prods{grid-template-columns:repeat(4,1fr);gap:20px}}
/* Willem: 2 per row (all breakpoints ≥560) */
/* Willem: two per row on a phone, four across on desktop - eight products as one
   page-and-a-bit rather than four screens of scrolling. */
.prods.prods--2{grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){.prods.prods--2{gap:16px}}
@media (min-width:1000px){.prods.prods--2{grid-template-columns:repeat(4,1fr);gap:18px;max-width:none}}
.prod{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .22s,border-color .18s;
}
.prod:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#d2c9bb}
/* Square box + contain: his product shots range from 0.50 (tall bill holder) to
   1.50 (wide line-up). A 4:3 box with object-fit:cover cropped the tall ones to
   a third of their height and pushed the wide one off to the side. Contain shows
   every product whole regardless of shape, and survives any new photo. */
.prod__img{
  /* white, not paper-2: Willem's product shots are cut out on white, so a tinted
     box would show as a visible square behind each one */
  background:#fff;aspect-ratio:1/1;overflow:hidden;
  display:grid;place-items:center;padding:12px;
}
.prod__img img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform .4s;
}
.prod:hover .prod__img img{transform:scale(1.04)}
.prod__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;gap:10px}
.prod h3{font-size:1.06rem}
.prod__dims{font-size:var(--step--1);color:var(--ink-3);font-weight:600}
/* bullets run across the card and wrap only when there isn't room, so a product
   costs two lines of height instead of four */
.prod__meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--step--1);color:var(--ink-2)}
.prod__meta li{display:flex;gap:8px;align-items:flex-start}
.prod__meta svg{width:14px;height:14px;flex:none;margin-top:4px;color:var(--accent)}
.prod__price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.prod__price b{font-size:1.22rem;letter-spacing:-.03em;display:block}
.prod__price small{color:var(--ink-3);font-size:.78rem;display:block;margin-top:3px;line-height:1.35}
.prod .btn{margin-top:14px}

/* ---------- process ---------- */
.flow{display:grid;gap:14px;counter-reset:f}
@media (min-width:820px){.flow{grid-template-columns:repeat(4,1fr);gap:18px}}
.flow__item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;position:relative}
.flow__item::before{
  counter-increment:f;content:counter(f);font-size:2.6rem;font-weight:800;letter-spacing:-.05em;
  color:var(--paper-2);position:absolute;top:12px;right:18px;line-height:1;
}
.flow__item h3{font-size:1.02rem;margin-bottom:8px;position:relative}
.flow__item p{font-size:var(--step--1);color:var(--ink-2);position:relative}

/* ---------- founder ---------- */
.founder__media img{border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.founder__quote{font-size:var(--step-1);line-height:1.5;color:var(--ink-2)}
.founder__name{margin-top:22px;font-weight:800;letter-spacing:-.02em}
.founder__role{color:var(--ink-3);font-size:var(--step--1)}
.contactrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{
  display:inline-flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--line);
  border-radius:99px;padding:10px 17px;font-size:var(--step--1);font-weight:650;text-decoration:none;
  transition:border-color .15s,transform .12s;
}
.chip:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.chip svg{width:16px;height:16px;color:var(--accent)}

/* ---------- gallery ---------- */
.gal{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.gal{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (min-width:1060px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal__item{
  position:relative;border:0;padding:0;background:var(--paper-2);border-radius:var(--radius-sm);
  overflow:hidden;cursor:zoom-in;aspect-ratio:3/4;display:block;
}
.gal__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gal__item:hover img{transform:scale(1.05)}
.gal__cap{
  position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;color:#fff;text-align:left;
  font-size:.8rem;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.72));
}
.gal__item--wide{grid-column:span 2;aspect-ratio:16/10}

dialog.lb{border:0;padding:0;background:transparent;max-width:min(94vw,1100px);max-height:94vh;overscroll-behavior:contain}
dialog.lb::backdrop{background:rgba(10,10,12,.88);backdrop-filter:blur(4px)}
.lb__img{border-radius:var(--radius);max-height:82vh;width:auto;max-width:100%;margin-inline:auto;box-shadow:var(--shadow-lg)}
.lb__cap{color:#fff;text-align:center;margin-top:14px;font-size:var(--step--1);font-weight:600}
.lb__close{position:fixed;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem;cursor:pointer;line-height:1}
.lb__close:hover{background:rgba(255,255,255,.3)}

/* ---------- faq ---------- */
.faq{max-width:760px;margin-inline:auto;display:grid;gap:10px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 20px;font-weight:700;position:relative;
  font-size:var(--step-0);letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details[open] summary{color:var(--accent-ink)}
.faq p{padding:0 20px 20px;color:var(--ink-2);font-size:var(--step--1)}

/* ---------- cta band ---------- */
.cta{text-align:center}
.cta h2{max-width:20ch;margin-inline:auto}
.cta p{max-width:52ch;margin:18px auto 0;color:#b9b9c4;font-size:var(--step-1)}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.sec--ink .btn--ghost{border-color:#3a3a45;color:#fff}
.sec--ink .btn--ghost:hover{background:#22222a;border-color:#55555f}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#9a9aa8;padding:52px 0 34px;border-top:1px solid #24242c}
.ftr__grid{display:grid;gap:32px}
@media (min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr h4{color:#fff;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
.ftr a{color:#c3c3ce;text-decoration:none;font-size:var(--step--1)}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr .brand{color:#fff;font-size:1.1rem}
.ftr__blurb{margin-top:14px;font-size:var(--step--1);max-width:36ch;line-height:1.55}
.ftr__base{
  margin-top:40px;padding-top:22px;border-top:1px solid #24242c;display:flex;flex-wrap:wrap;
  gap:8px 20px;justify-content:space-between;font-size:.8rem;
}

/* ---------- forms ---------- */
.formwrap{display:grid;gap:clamp(28px,4vw,48px)}
@media (min-width:980px){.formwrap{grid-template-columns:1.15fr .85fr;align-items:start}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,34px)}
.card--sticky{position:sticky;top:86px}
.fieldset{border:0;padding:0;margin:0 0 28px}
.fieldset:last-of-type{margin-bottom:0}
.legend{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;display:block}
.field{margin-bottom:18px}
.field label,.label{display:block;font-weight:650;font-size:var(--step--1);margin-bottom:7px}
.req{color:var(--accent)}
.hint{font-size:.8rem;color:var(--ink-3);margin-top:6px;line-height:1.45}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:var(--step-0);padding:13px 15px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);transition:border-color .15s,background .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--white);outline:none}
textarea{min-height:110px;resize:vertical}
.grid2{display:grid;gap:18px}
@media (min-width:620px){.grid2{grid-template-columns:1fr 1fr}}

.picks{display:grid;gap:10px}
@media (min-width:620px){.picks{grid-template-columns:1fr 1fr}}
.pick{
  position:relative;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 15px;cursor:pointer;background:var(--paper);
  transition:border-color .15s,background .15s;font-size:var(--step--1);font-weight:600;
}
.pick:hover{border-color:var(--ink-3)}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick__box{width:20px;height:20px;border:2px solid var(--line);border-radius:6px;flex:none;display:grid;place-items:center;background:#fff;transition:.15s}
.pick__box svg{width:12px;height:12px;color:#fff;opacity:0;transition:.15s}
.pick input:checked~.pick__box{background:var(--accent);border-color:var(--accent)}
.pick input:checked~.pick__box svg{opacity:1}
.pick:has(input:checked){border-color:var(--accent);background:rgba(255,106,19,.06)}
.pick input:focus-visible~.pick__box{outline:3px solid var(--accent);outline-offset:2px}
.pick__qty{margin-left:auto;width:66px;padding:7px 9px;font-size:.88rem;text-align:center}

.err{color:#c0270c;font-size:.8rem;margin-top:6px;font-weight:600;display:none}
.field.is-err input,.field.is-err select,.field.is-err textarea{border-color:#c0270c;background:#fdf3f1}
.field.is-err .err{display:block}

.drop{
  border:2px dashed var(--line);border-radius:var(--radius-sm);padding:24px;text-align:center;
  background:var(--paper);cursor:pointer;transition:border-color .15s,background .15s;
}
.drop:hover,.drop.is-over{border-color:var(--accent);background:rgba(255,106,19,.05)}
.drop svg{width:26px;height:26px;color:var(--ink-3);margin-inline:auto;margin-bottom:8px}
.drop p{font-size:var(--step--1);font-weight:650}
.drop small{color:var(--ink-3);font-size:.8rem}
.drop input{position:absolute;opacity:0;width:0;height:0}
.filelist{margin-top:12px;display:grid;gap:8px}
.filelist li{display:flex;align-items:center;gap:10px;font-size:.85rem;background:var(--paper-2);padding:9px 13px;border-radius:8px}
.filelist button{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:1.1rem;line-height:1;padding:0 4px}

.sidebox h3{margin-bottom:14px}
.sidebox ol{margin:0;padding-left:20px;display:grid;gap:12px;font-size:var(--step--1);color:var(--ink-2)}
.sidebox ol strong{color:var(--ink)}
.eg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.eg figure{margin:0}
.eg img{border-radius:var(--radius-sm);aspect-ratio:3/4;object-fit:cover;width:100%}
.eg figcaption{font-size:.76rem;color:var(--ink-3);margin-top:6px;line-height:1.35}

.formnote{background:var(--paper-2);border-radius:var(--radius-sm);padding:14px 16px;font-size:.82rem;color:var(--ink-2);margin-top:18px;line-height:1.5}
.sent{display:none;text-align:center;padding:22px 0}
.sent svg{width:52px;height:52px;color:var(--accent);margin-inline:auto;margin-bottom:16px}
.is-sent .sent{display:block}
.is-sent .formbody{display:none}

/* ---------- legal / prose ---------- */
.prose{max-width:72ch;margin-inline:auto}
.prose h2{font-size:var(--step-2);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:26px 0 10px}
.prose p,.prose li{color:var(--ink-2)}
.prose p+p{margin-top:14px}
.prose ul{margin:14px 0;padding-left:22px;display:grid;gap:9px}
.prose a{color:var(--accent-ink);font-weight:650}
.toc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;margin-bottom:36px}
.toc ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:var(--step--1)}
.toc a{text-decoration:none;font-weight:650;color:var(--ink-2)}
.toc a:hover{color:var(--accent-ink);text-decoration:underline}

.pagehead{padding:clamp(34px,5vw,64px) 0 clamp(24px,3vw,40px);text-align:center}
.pagehead p{margin-top:16px;color:var(--ink-2);font-size:var(--step-1);max-width:56ch;margin-inline:auto}
.back{display:inline-flex;align-items:center;gap:7px;font-size:var(--step--1);font-weight:650;text-decoration:none;color:var(--ink-3);margin-bottom:22px}
.back:hover{color:var(--ink)}
.back svg{width:15px;height:15px}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}


/* ---------- design configurator (quote page + homepage teaser) ---------- */
/* configurator-only styles */
.cfg{display:grid;gap:clamp(24px,3vw,40px)}
@media (min-width:1000px){.cfg{grid-template-columns:1fr 1fr;align-items:start}}
.stage{
  background:linear-gradient(160deg,#1a1a20,#101013);border-radius:var(--radius);
  padding:22px;position:sticky;top:86px;box-shadow:var(--shadow-lg);
}
@media (max-width:999px){.stage{position:static;padding:16px}}
.stage__inner{background:radial-gradient(120% 90% at 50% 12%,#33333f 0%,#17171d 70%);border-radius:12px;padding:8px}
#preview svg{width:100%;height:auto;display:block;max-height:46vh}
@media (max-width:640px){
  #preview{display:flex;justify-content:center}
  #preview svg{max-width:280px;max-height:38vh}
}
/* The drawing is hidden whenever a photograph of that product/colour loaded.
   This rule is load-bearing: the ID selector above sets display:flex, which
   out-specifies the browser's [hidden]{display:none}, so without it the
   drawing stays on screen under the photo on phones — which is exactly where
   it was spotted. */
#preview[hidden]{display:none}
#preview[hidden] + .photoreal,
#preview[hidden] ~ .photoreal{margin-top:0}
.stage__cap{color:#b9b9c4;font-size:.82rem;text-align:center;margin-top:14px;line-height:1.5;min-height:2.6em}
.pricebox{margin-top:16px;background:#fff;border-radius:12px;padding:18px 20px;display:grid;gap:6px}
.price__from{font-size:1.55rem;font-weight:800;letter-spacing:-.03em}
.price__from small{font-size:.82rem;font-weight:600;color:var(--ink-3);letter-spacing:0}
.price__badge{justify-self:start;background:rgba(255,106,19,.12);color:var(--accent-ink);font-size:.76rem;font-weight:700;padding:5px 11px;border-radius:99px}

/* Talk-to-a-human box. It sits at the top of the builder column, NOT in the
   preview column: that one is `position:sticky` and taller than a 720px viewport,
   so anything at its bottom never scrolls into view on desktop. Here it scrolls
   normally and is the first thing under the preview on mobile.
   The number is a tel: link, so a phone dials it on tap. */
.callbox{
  margin:0 0 18px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 22px 16px;text-align:center;
  box-shadow:var(--shadow);
}
.callbox__lead{font-weight:800;font-size:1rem;letter-spacing:-.01em;margin:0}
.callbox__body{font-size:.82rem;color:var(--ink-2);line-height:1.5;margin:5px 0 11px}
.callbox__num{
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--ink);color:#fff;text-decoration:none;
  font-weight:800;font-size:1.18rem;letter-spacing:-.01em;
  padding:12px 16px;border-radius:99px;min-height:48px;   /* comfortable tap target */
  transition:transform .12s ease,box-shadow .12s ease;
}
.callbox__num:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,16,19,.22)}
.callbox__num:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.callbox__hint{font-size:.72rem;color:var(--ink-3);margin:9px 0 0}
.price__note{font-size:.76rem;color:var(--ink-3);line-height:1.45}

.sw{
  display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);background:var(--white);
  border-radius:99px;padding:6px 13px 6px 7px;cursor:pointer;font:inherit;font-size:.8rem;font-weight:650;
  transition:border-color .15s,transform .1s;
}
.sw:hover{border-color:var(--ink-3)}
.sw:active{transform:scale(.97)}
.sw__dot{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);flex:none}
.sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.swgrid{display:flex;flex-wrap:wrap;gap:8px}

.pfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px}
.pf{
  display:grid;gap:7px;justify-items:center;border:1.5px solid var(--line);background:var(--white);
  border-radius:var(--radius-sm);padding:14px 8px;cursor:pointer;font:inherit;font-size:.78rem;font-weight:650;
  transition:border-color .15s,background .15s;
}
.pf:hover{border-color:var(--ink-3)}
.pf svg{width:26px;height:26px}
.pf[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,106,19,.07);box-shadow:0 0 0 1px var(--accent)}

.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg{position:relative}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{
  display:block;text-align:center;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 6px;font-size:.8rem;font-weight:650;cursor:pointer;background:var(--white);transition:.15s;
}
.seg input:checked+span{border-color:var(--accent);background:rgba(255,106,19,.08);color:var(--accent-ink)}
.seg input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
/* decorations are a yes/no now, priced by hand off what they describe */
.checkrow{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-weight:600}
.checkrow input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--accent);cursor:pointer}

.specrow{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:var(--step--1)}
.specrow:last-child{border-bottom:0}
.specrow span{color:var(--ink-3)}
.specrow b{text-align:right;font-weight:700}
.qtyrow{display:flex;gap:12px;align-items:flex-end}
.qtyrow .field{flex:none;width:120px;margin-bottom:0}

/* ---------- homepage design-tool teaser ---------- */
.designer{display:grid;gap:clamp(20px,3vw,36px);align-items:start}
@media (min-width:940px){.designer{grid-template-columns:1fr 1fr}}
.designer .stage{position:sticky;top:86px}
@media (max-width:939px){.designer .stage{position:static}}
.designer__controls{display:flex;flex-direction:column}
.designer__controls .field:last-of-type{margin-bottom:22px}

/* ---------- mobile product cards ----------
   Must live at the end of the file: the .prod__price / .prod__meta rules above
   have the same specificity, so anything declared earlier loses to them.
   Two cards were filling 57% of a phone screen; this is the chrome coming off,
   not the product - photo, name, size, price and button all stay. */
@media (max-width:699px){
  /* height:100% does NOT resolve against a grid area sized by aspect-ratio with
     place-items:center - it falls back to the image's own ratio and overflow
     clips the bottom. Flex + max-height does resolve, so the square photo scales
     down to fit the shorter box and letterboxes at the sides instead. */
  .prod__img{aspect-ratio:4/3;padding:6px;display:flex;align-items:center;justify-content:center}
  .prod__img img{width:auto;height:auto;max-width:100%;max-height:100%}
  .prod__body{padding:10px 11px 12px}
  .prod h3{font-size:.95rem}
  .prod__dims{font-size:.69rem;margin-top:1px}
  .prod__meta{display:none}
  .prod__price{padding-top:8px;margin-top:8px}
  .prod__price b{font-size:1rem;letter-spacing:-.02em}
  .prod__price small{display:none}
  .prod .btn{padding:8px 10px;font-size:.74rem}
}

/* ---------- WhatsApp click-to-chat ----------
   Sits clear of the iOS home indicator and never over a CTA. */
.wa{
  /* hidden on landing so it cannot sit over the hero CTAs - main.js reveals it
     once you have scrolled past them */
  opacity:0;pointer-events:none;transform:translateY(10px);
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;z-index:90;
  box-shadow:0 6px 22px rgba(37,211,102,.42),0 2px 6px rgba(16,16,19,.18);
  transition:transform .16s,box-shadow .2s;
}
.wa svg{width:30px;height:30px;fill:#fff}
.wa.is-on{opacity:1;pointer-events:auto;transform:none}
.wa.is-on:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,211,102,.5)}
.wa:active{transform:translateY(0)}
@media (max-width:479px){.wa{width:50px;height:50px;right:13px;bottom:calc(13px + env(safe-area-inset-bottom))}.wa svg{width:27px;height:27px}}
@media print{.wa{display:none}}

/* ---------- "see it in your branding" band ---------- */
.brandband{
  background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:clamp(20px,3.2vw,32px);margin-bottom:clamp(18px,2.4vw,28px);
}
.brandband__head{display:grid;gap:5px;margin-bottom:16px}
.brandband__head strong{font-size:var(--step-1);letter-spacing:-.02em}
.brandband__head span{color:#b9b9c4;font-size:var(--step--1)}
.brandband__row{display:flex;gap:10px;flex-wrap:wrap}
.brandband__row input{
  flex:1 1 240px;min-width:0;padding:13px 16px;border-radius:99px;border:1.5px solid #33333d;
  background:#1b1b21;color:#fff;font:inherit;font-size:var(--step--1);
}
.brandband__row input::placeholder{color:#7c7c8a}
.brandband__row input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.brandband__or{display:flex;align-items:center;gap:12px;margin:14px 0;color:#7c7c8a;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em}
.brandband__or::before,.brandband__or::after{content:"";flex:1;height:1px;background:#33333d}
.brandband__drop{
  display:flex;align-items:center;justify-content:center;gap:11px;text-align:center;
  border:1.5px dashed #3a3a45;border-radius:var(--radius-sm);padding:18px;cursor:pointer;
  color:#b9b9c4;font-size:var(--step--1);transition:border-color .15s,background .15s,color .15s;
}
.brandband__drop svg{width:20px;height:20px;flex:none}
.brandband__drop:hover,.brandband__drop.is-over{border-color:var(--accent);background:rgba(255,106,19,.08);color:#fff}
.brandband__status{margin-top:12px;font-size:var(--step--1);color:#b9b9c4;min-height:1.2em}
.brandband__status.is-busy::after{content:"";display:inline-block;width:9px;height:9px;margin-left:8px;border-radius:50%;background:var(--accent);animation:bbp 1s infinite}
@keyframes bbp{0%,100%{opacity:.25}50%{opacity:1}}
.brandband__got{margin:18px 0 14px;color:#e6e6ee;font-size:var(--step--1)}
.brandband__grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){.brandband__grid{grid-template-columns:repeat(3,1fr);gap:14px}}
.bb{margin:0;background:#fff;border-radius:var(--radius-sm);padding:14px 10px 10px;text-align:center}
.bb__art{display:grid;place-items:center;min-height:150px}
.bb__art svg{width:auto;height:auto;max-width:100%;max-height:230px}
.bb figcaption{margin-top:7px;font-size:.7rem;font-weight:700;color:var(--ink-3)}
.brandband__cta{margin-top:16px;text-align:center}

/* ---------- multi-product basket ---------- */
.addrow{margin-top:4px}
.cart{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cart li{
  display:flex;align-items:flex-start;gap:10px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px;
}
.cart__body{flex:1;min-width:0}
.cart__name{font-weight:750;font-size:var(--step--1);letter-spacing:-.01em}
.cart__meta{font-size:.76rem;color:var(--ink-3);margin-top:2px;line-height:1.45}
.cart__qty{font-weight:750;font-size:var(--step--1);white-space:nowrap;color:var(--accent-ink)}
.cart__rm{
  border:0;background:none;cursor:pointer;color:var(--ink-3);font:inherit;font-size:1.1rem;
  line-height:1;padding:2px 4px;border-radius:6px;flex:none;
}
.cart__rm:hover{color:#c0392b;background:rgba(192,57,43,.08)}

/* Customer log-in. Quiet on purpose: most visitors are prospects, not existing
   customers, so it must be findable without competing with the quote button. */
.nav__login{
  font-size:var(--step--1);font-weight:700;color:var(--ink-2);text-decoration:none;
  padding:8px 4px;white-space:nowrap;
}
.nav__login:hover{color:var(--ink);text-decoration:underline}
@media (max-width:900px){.nav__login{display:none}}   /* lives in the burger menu instead */

/* Photoreal preview on the quote page. Sits under the working drawing: the
   drawing is what you configure against, this is what it actually looks like. */
.photoreal{margin-top:18px;text-align:center;min-height:60px}
.photoreal img{
  max-width:100%;width:auto;max-height:420px;border-radius:var(--radius);
  box-shadow:var(--shadow);display:block;margin-inline:auto;
}
.photoreal__cap{margin-top:10px;font-size:var(--step--1);color:var(--ink-3)}
.photoreal.is-loading{opacity:.45;transition:opacity .2s}

/* upload feedback that is a warning rather than a hint */
.hint.is-warn{color:var(--accent-ink);font-weight:600}

/* Custom size: no preview, because there is no standard shape to preview. */
.customnote{
  background:var(--white);border-radius:12px;padding:18px 20px 16px;text-align:center;margin-top:4px;
}
.customnote__lead{font-weight:800;font-size:1rem;letter-spacing:-.01em;margin:0}
.customnote__body{font-size:.84rem;color:var(--ink-2);line-height:1.55;margin:7px 0 13px}
.customnote .callbox__num{font-size:1.08rem}

/* price: the figure, then who it is for, then the bulk line */
.price__unit{font-size:.68rem;font-weight:700;letter-spacing:.11em;color:var(--ink-3);margin-top:-2px}
.price__bulk{
  font-size:.8rem;line-height:1.5;color:var(--ink-2);font-weight:600;
  border-top:1px solid var(--line);margin-top:10px;padding-top:10px;
}

/* Proud to be a British manufacturer.
   ☠️ DELIBERATELY NOT THE "MADE IN BRITAIN" MARK. That is a registered collective
   trade mark, licensed only to paying members of madeinbritain.org — using it, or
   anything close enough to be mistaken for it, would be infringement. This is our
   own plain badge stating a fact we can evidence: Willem makes them himself in
   Urmston. See the research note in the handoff before anyone "improves" it. */
.madein{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
        padding:16px 0 4px;margin-top:22px;border-top:1px solid rgba(255,255,255,.10)}
.madein svg{width:26px;height:auto;flex:none;border-radius:2px;
            box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.madein b{font-size:13.5px;font-weight:650;letter-spacing:.01em}
.madein > span{font-size:12.5px;opacity:.72}
@media(max-width:520px){
  .madein{gap:8px}
  .madein b,.madein > span{flex:1 1 100%}
}

/* ---------- dashboard.html ----------
   A mock-up of the real customer dashboard, drawn in HTML and CSS rather than
   screenshotted. ⚠️ Deliberate: a screenshot goes stale the moment the dashboard
   changes and nobody remembers to retake it, and a real screenshot would carry a
   real customer's numbers. Everything here is invented and the venue does not
   exist — see the "Example" pill, which must stay. */
.dash{max-width:900px;margin:30px auto 0;border:1px solid var(--line,#e5e2dc);
      border-radius:16px;overflow:hidden;background:#fff;
      box-shadow:0 1px 2px rgba(16,16,19,.06),0 14px 40px rgba(16,16,19,.07)}
.dash__bar{display:flex;align-items:center;gap:10px;padding:13px 16px;
           background:#101013;color:#fff;font-size:13px}
.dash__mark{width:22px;height:22px;border-radius:6px;background:#fff;color:#101013;
            display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none}
.dash__bar b{letter-spacing:.06em;font-size:12.5px}
.dash__biz{margin-left:auto;opacity:.78}
.dash__tag{border:1px solid rgba(255,255,255,.32);border-radius:999px;
           padding:2px 9px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.dash__body{padding:16px;background:#faf8f4}

.dash__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
@media(min-width:700px){.dash__stats{grid-template-columns:repeat(4,1fr)}}
.dstat{background:#fff;border:1px solid #e5e2dc;border-radius:12px;padding:12px 13px}
.dstat span{display:block;font-size:11px;color:#6a6a78}
.dstat b{display:block;font-size:21px;letter-spacing:-.03em;line-height:1.3;color:#101013}
.dstat i{display:block;font-size:11px;color:#6a6a78;font-style:normal}

.dash__panel{background:#fff;border:1px solid #e5e2dc;border-radius:12px;padding:13px 15px;margin-bottom:12px}
.dash__ph{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.dash__ph h4{margin:0;font-size:13.5px}
.dash__ph span{font-size:11.5px;color:#6a6a78}
.dash__chart{display:block;width:100%;height:96px}
.dash__chart .g{stroke:#eceae4;stroke-width:1;vector-effect:non-scaling-stroke}
.dash__chart .f{fill:#fff1e6}
.dash__chart .p{fill:none;stroke:#ff6a13;stroke-width:2;stroke-linejoin:round;
                stroke-linecap:round;vector-effect:non-scaling-stroke}
.dash__axis{display:flex;justify-content:space-between;font-size:11px;color:#6a6a78;margin-top:6px}
.dash__two{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.dash__two{grid-template-columns:1fr 1fr}}

.dprod,.dsign{display:flex;align-items:baseline;gap:9px;padding:8px 0;border-top:1px solid #f0ede7;font-size:13px}
.dprod:first-of-type,.dsign:first-of-type{border-top:0}
.dprod b,.dsign b{font-weight:600;color:#101013}
.dprod span{font-size:11.5px;color:#6a6a78}
.dprod i,.dsign i{margin-left:auto;font-style:normal;font-size:11.5px;color:#6a6a78;white-space:nowrap}
.dash__note{margin:11px 0 0;font-size:11.5px;color:#6a6a78}

/* tick / cross lists */
.ticks{list-style:none;padding:0;margin:12px 0 0}
.ticks li{position:relative;padding-left:26px;margin-bottom:8px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;
                  border-left:2.4px solid #1c7c4a;border-bottom:2.4px solid #1c7c4a;
                  transform:rotate(-45deg)}
.ticks--no li::before{width:13px;height:13px;top:.28em;transform:none;border:0;
                      background:
                        linear-gradient(45deg,transparent 44%,#b23c3c 44%,#b23c3c 56%,transparent 56%),
                        linear-gradient(-45deg,transparent 44%,#b23c3c 44%,#b23c3c 56%,transparent 56%)}

/* Who built it. Deliberately the quietest thing in the footer — a credit, not a
   second brand. Sits on its own line on a phone so it never crowds the company
   registration details, which are the ones that legally have to be readable. */
.ftr__by{opacity:.55;font-size:12px}
.ftr__by a{border-bottom:1px solid rgba(255,255,255,.28)}
.ftr__by a:hover{opacity:1;border-bottom-color:currentColor}
@media(max-width:640px){.ftr__by{flex:1 1 100%;margin-top:4px}}