/* Quaig Laser Pro Shop (/lab/pro-shop). The page sits on the site's shell (site.css); this file adds the materials.
   Material colours are fixed, the same in both themes, because they are the metal itself: black anodized aluminium,
   the white a laser leaves on it, and brushed steel for the order tags. One moment of motion: the beam marks the
   business card once on load. With reduced motion the card is simply marked. */
:root{
  --ano:#1c1f25; --ano-hi:#2d3139; --ano-lo:#121418; --mark:#e9edf0; --mark-dim:#b4bcc4; --edge:#8f979f;
  --steel-hi:#e3e6e9; --steel-lo:#a6acb2; --steel-ink:#1d2331; --test:#f4d27a; --test-ink:#14202a;
}

/* hero additions */
.ps-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font-family:var(--mono);font-size:14px;font-weight:600}
.ps-crumb a{color:var(--on-sky);display:inline-flex;align-items:center;min-height:44px}
.ps-crumb a::before{content:"\2190";margin-right:8px}
.ps-test{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--test);color:var(--test-ink);font-size:12px;letter-spacing:.04em}

/* the bench: black anodized, brushed, with the card on it */
.ps-bench{overflow:clip;color:var(--mark-dim);
  background:
    radial-gradient(120% 80% at 18% 0%,rgba(255,255,255,.06),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
    var(--ano-lo)}
.ps-bench-in{display:grid;gap:36px;align-items:center}
.ps-bench-copy{display:grid;gap:14px;max-width:560px}
.ps-bench h2{color:var(--mark)}
.ps-bench .eyebrow{color:var(--amber)}
.ps-bench p{color:var(--mark-dim)}
.ps-bench strong{color:var(--mark)}
.ps-bench .btn{background:var(--mark);color:var(--ano-lo)}
.ps-bench :focus-visible{outline-color:var(--amber)}
.ps-honest{font-size:15px}
.ps-quote-link{font-family:var(--mono);font-weight:600;color:#ffcf86;display:inline-flex;align-items:center;min-height:44px}

.ps-card{display:block;width:100%;max-width:520px;aspect-ratio:3.5/2;border-radius:clamp(10px,2.4vw,16px);text-decoration:none;
  transform:rotate(-3deg);transition:transform .45s cubic-bezier(.3,.8,.25,1);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 2px),
    linear-gradient(128deg,var(--ano-hi) 0%,var(--ano) 38%,var(--ano-lo) 62%,var(--ano-hi) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.6),0 34px 48px -24px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.5)}
.ps-card:hover{transform:rotate(-1deg) translateY(-4px)}
.ps-card:focus-visible{outline:3px solid var(--amber);outline-offset:6px}
.ps-card-face{position:relative;display:block;height:100%;overflow:hidden;border-radius:inherit}
.ps-mark{position:absolute;inset:11% 8%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;
  column-gap:12px;color:var(--mark);font-family:var(--mono);
  text-shadow:0 0 1px rgba(233,237,240,.55);
  clip-path:inset(0 100% 0 0);animation:ps-reveal 2.6s cubic-bezier(.45,.05,.4,1) .5s forwards}
.ps-mark-name{grid-column:1/-1;font-family:var(--display);font-weight:900;font-size:clamp(21px,4.4vw,32px);line-height:1.05;letter-spacing:.01em}
.ps-mark-role{grid-column:1/-1;margin-top:6px;font-size:clamp(11px,2.2vw,14px);opacity:.82}
.ps-mark-line{grid-row:4;align-self:end;font-size:clamp(11px,2.2vw,14px)}
.ps-mark-qr{grid-column:2;grid-row:3/5;align-self:end;width:clamp(44px,11vw,72px);height:auto}
.ps-beam{position:absolute;top:0;bottom:0;left:8%;width:2px;background:#fff3df;opacity:0;
  box-shadow:0 0 8px 2px rgba(242,163,58,.95),0 0 26px 8px rgba(242,163,58,.35);
  animation:ps-scan 2.6s cubic-bezier(.45,.05,.4,1) .5s forwards,ps-beam-fade 2.6s linear .5s forwards}
@keyframes ps-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes ps-scan{from{left:8%}to{left:92%}}
@keyframes ps-beam-fade{0%,90%{opacity:1}100%{opacity:0}}

/* bulk merch: a parts list, one row per product, each with a steel order tag */
.parts{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.part{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"ico copy tag" "ico link link";
  gap:2px 16px;padding:18px 0 10px;border-bottom:1px solid var(--line);align-items:start;min-width:0}
.part-ico{grid-area:ico;width:56px;height:56px;padding:6px;border-radius:8px;fill:none;stroke:var(--edge);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 2px),linear-gradient(140deg,var(--ano-hi),var(--ano-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.part-ico .m{stroke:var(--mark);stroke-width:2}
.part-copy{grid-area:copy;display:grid;gap:4px;min-width:0}
.part-copy h3{font-size:18px}
.part-copy p{color:var(--muted);font-size:15.5px}
.part-quote{grid-area:link;justify-self:start;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.tag{grid-area:tag;position:relative;display:inline-flex;align-items:baseline;gap:5px;margin-top:2px;padding:5px 11px 5px 25px;border-radius:4px;white-space:nowrap;
  font-family:var(--mono);font-weight:600;font-size:16px;color:var(--steel-ink);font-variant-numeric:tabular-nums;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),linear-gradient(180deg,var(--steel-hi),var(--steel-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.25),0 2px 0 rgba(0,0,0,.35)}
.tag::before{content:"";position:absolute;left:9px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--paper);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.tag-k{font-size:12px;font-weight:500}

/* quote form additions (the form itself uses the site's intake styles) */
.ps-intake input[type=date]{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--paper);border:1px solid var(--control);
  border-radius:6px;padding:11px 12px;min-height:44px}
.ps-min{margin:0;min-height:1.5em;font-size:14.5px;color:var(--muted)}
.ps-min.under{color:var(--amber)}
.ps-intake fieldset .check-help{margin-top:10px}
.ps-intake .field{align-content:start}

@media (min-width:900px){
  .ps-bench-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px}
  .parts{grid-template-columns:1fr 1fr;column-gap:44px}
  .ps-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:639px){
  .ps-card{transform:rotate(-2deg)}
  .ps-card:hover{transform:rotate(-2deg)}
}
@media (prefers-reduced-motion:reduce){
  .ps-mark{animation:none;clip-path:none}
  .ps-beam{display:none}
  .ps-card,.ps-card:hover{transition:none;transform:rotate(-2deg)}
}