/* lasercleanmachinery.com — global layer (tokens, buttons, tables, photo tags, before/after slider, reduced motion) */
:root{
  --ink:#111820;--ink-2:#1B2530;--steel:#F2F5F7;--paper:#FAFBFC;--white:#FFFFFF;
  --beam:#2563EB;--beam-ink:#1D4ED8;--rust:#A4502A;--line:rgba(17,24,32,.14);--muted:#4A5866;
  --on-ink:#F2F5F7;--on-ink-2:#B8C3CE;
  --radius:4px;
  --f-head:"Red Hat Display",system-ui,sans-serif;--f-body:"Red Hat Text",system-ui,sans-serif;--f-mono:"DM Mono",ui-monospace,monospace;
  --fs-xs:.75rem;--fs-sm:.875rem;--fs-body:1.0625rem;--fs-h3:1.22rem;--fs-lead:1.5rem;
  --fs-h2:clamp(1.65rem,2.5vw,2.3rem);--fs-num:2.9rem;--fs-h1:clamp(2.3rem,4.2vw,3.7rem);
  --w-wide:1320px;--w-std:1160px;--w-narrow:880px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:var(--fs-body);line-height:1.65;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--f-head);line-height:1.15;margin:0 0 16px;color:inherit;letter-spacing:-.01em}
h1{font-size:var(--fs-h1);font-weight:800}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.3}
p{margin:0 0 16px;max-width:70ch}
a{color:var(--beam)}
a:hover{color:var(--beam-ink)}
:focus-visible{outline:2px solid var(--beam);outline-offset:2px}
.mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.01em}

/* containers */
.wrap{width:100%;max-width:var(--w-std);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.wrap--wide{max-width:var(--w-wide);margin-left:auto;margin-right:auto}
.wrap--narrow{max-width:var(--w-narrow);margin-left:auto;margin-right:auto}
.sec{position:relative;padding:88px 0}
@media (max-width:768px){.sec{padding:56px 0}.wrap{padding-left:16px;padding-right:16px}}
.bg-white{background-color:var(--white)}
.bg-steel{background-color:var(--steel)}
.bg-paper{background-color:var(--paper)}
.bg-ink{background-color:var(--ink);color:var(--on-ink)}
.bg-ink a:not(.btn){color:#9DB8F5}
.lede{font-size:var(--fs-h3);line-height:1.5;color:var(--muted)}
.bg-ink .lede{color:var(--on-ink-2)}

/* buttons — square-ish, never pills */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:var(--radius);font-family:var(--f-head);font-weight:700;font-size:1.0625rem;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
a.btn.btn--p,.btn.btn--p{background:var(--beam);color:#fff;border-color:var(--beam)}
a.btn.btn--p:hover,.btn.btn--p:hover{background:var(--beam-ink);border-color:var(--beam-ink);color:#fff}
a.btn.btn--o,.btn.btn--o{background:transparent;color:var(--ink);border-color:var(--ink)}
a.btn.btn--o:hover,.btn.btn--o:hover{background:var(--ink);color:#fff}
.bg-ink a.btn.btn--o,.on-dark a.btn.btn--o{color:#fff;border-color:rgba(255,255,255,.7)}
.bg-ink a.btn.btn--o:hover,.on-dark a.btn.btn--o:hover{background:#fff;color:var(--ink)}
.btn svg{width:18px;height:18px;flex:none}

/* tables */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:8px}
.tbl{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.5}
.tbl th,.tbl td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--steel);font-family:var(--f-head);font-weight:700;font-size:.875rem;color:var(--ink)}
.tbl tbody th{font-family:var(--f-head);font-weight:700}
.tbl td.mono,.tbl .mono{font-family:var(--f-mono)}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}

/* photo tags — BEFORE / AFTER */
.ph{position:relative;overflow:hidden;border-radius:var(--radius)}
.ph>img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:10px;z-index:2;padding:3px 8px;font-family:var(--f-mono);font-weight:500;font-size:.75rem;line-height:1.4;letter-spacing:.06em;color:#fff;border-radius:2px;text-transform:uppercase}
.tag--before{left:10px;background:var(--rust)}
.tag--after{right:10px;background:var(--ink)}
.tag--b-bl{top:auto;bottom:10px;left:10px}
.tag--a-tl{right:auto;left:10px}
.tag--a-tr{left:auto;right:10px}
.tag--b-tr{left:auto;right:10px}

/* Scan Seam marker — 2px beam line + 8x8 head */
.seam{position:absolute;width:2px;background:var(--beam);pointer-events:none}
.seam::after{content:"";position:absolute;left:-3px;top:var(--head,40%);width:8px;height:8px;background:var(--beam);box-shadow:0 0 0 2px #fff}

/* before / after slider (one surface, two real zones) */
.ba{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--ink);aspect-ratio:4/5;touch-action:pan-y;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:var(--beam);z-index:3}
.ba .ba-line::after{content:"";position:absolute;left:-3px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--beam);box-shadow:0 0 0 2px #fff}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4}
.ba .ba-grip{position:absolute;top:calc(50% + 18px);left:var(--pos,50%);transform:translateX(-50%);z-index:3;padding:4px 8px;background:var(--white);color:var(--ink);font-family:var(--f-mono);font-size:.75rem;border-radius:2px;pointer-events:none;white-space:nowrap}
.ba:has(input:focus-visible) .ba-line{outline:2px solid #fff;outline-offset:2px}

/* plugin chrome: logo image only; topbar spacer; nav fits one row */
@media (min-width:769px){#topbar-container{height:45px}}
.dm-container{max-width:1320px}
@media (min-width:769px){.dm-nav-link{padding:10px 12px;font-size:15px}}
@media (min-width:769px) and (max-width:1240px){.dm-nav-link{padding:8px 7px;font-size:13px}.dm-logo img{height:22px}}
.dm-logo img+.dm-logo-text{display:none}
.dm-logo img{height:30px;width:auto;max-width:220px}
@media (max-width:420px){.dm-logo img{height:24px;max-width:180px}}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .rv,.seam::after,.ba *{animation:none!important;transition:none!important}
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* director fix 2026-11-09: plugin dynamic-menu.css outranks plain .dm-nav-link; keep 7 top items inside the bar 769-1440px */
@media (min-width:769px){
  nav.dm-menu .dm-nav{gap:2px}
  nav.dm-menu .dm-nav .dm-nav-link{padding:10px 12px;font-size:15px}
  nav.dm-menu .dm-logo img{height:26px;width:auto}
}
@media (min-width:769px) and (max-width:1180px){
  nav.dm-menu .dm-nav .dm-nav-link{padding:8px 7px;font-size:13.5px}
  nav.dm-menu .dm-logo img{height:20px}
  nav.dm-menu .dm-container{padding:0 14px}
}
@media (min-width:769px) and (max-width:940px){
  nav.dm-menu .dm-nav{gap:0}
  nav.dm-menu .dm-nav .dm-nav-link{padding:6px 5px;font-size:12px;letter-spacing:0}
  nav.dm-menu .dm-logo img{height:15px}
  nav.dm-menu .dm-container{padding:0 10px}
}
@media (min-width:769px){nav.dm-menu .dm-nav-item:nth-last-child(-n+3) .dm-dropdown-menu{left:auto;right:0}}