:root{
  --blue:#0E3164; --blue-d:#082246; --blue-l:#2E6FB0;
  --sky:#6BD6FF; --sky-d:#2E6FB0;
  --paper:#FFFFFF; --paper2:#F2F5FA;
  --ink:#12203A; --ink2:#5A6B85;
  --cy:#00A6E0; --mg:#EC008C; --yl:#FFD400; --kk:#101010;
  --sky2:#7FB4E8; --sky3:#A9C9EC; --sky4:#C7D8EE; --sky5:#8FB4DC;
  --foot:#8FA8C8; --foot-h:#D6E4F5; --foot-a:#7E97BA;
  --fsc:#2E7D32; --fsc-l:#4ED07A;
  --line:rgba(255,255,255,.22); --line2:rgba(18,32,58,.13);
  --grid:32px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:"Archivo",sans-serif;letter-spacing:-.024em;line-height:1.12;font-weight:600}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.dwg{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.dwg-a{color:var(--sky2)}
img,svg{max-width:100%}

.bar{display:flex;height:5px}.bar i{flex:1}
.bar .c{background:var(--cy)}.bar .m{background:var(--mg)}
.bar .y{background:var(--yl)}.bar .k{background:var(--kk)}.bar .s{background:var(--sky)}

/* ---------- nav ---------- */
/* Floating pill. Sticky (not fixed), so it still reserves its space in flow on
   load and only overlays content once you scroll past it. Kept opaque enough
   (.86) that white nav text holds contrast over the white sections too — a
   lighter tint looks better on the navy hero but fails further down the page. */
header{position:sticky;top:10px;z-index:90;
  width:calc(100% - 20px);max-width:1180px;margin:10px auto 0;
  border-radius:16px;
  background:rgba(14,49,100,.86);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
             inset 0 -1px 0 rgba(0,0,0,.18),
             0 10px 30px rgba(8,20,44,.26)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;overflow:hidden}
.brand>span{min-width:0;overflow:hidden}
.brand svg{width:34px;height:34px;flex:none}
.bn{font-family:"Archivo",sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;
  color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt{font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sky2);margin-top:1px;display:block;white-space:nowrap}
.links{display:none;align-items:center;gap:20px;font-size:13.5px;color:var(--sky4)}
.links a:not(.btn):hover{color:var(--sky)}
.links a.on{color:#fff;border-bottom:2px solid var(--sky);padding-bottom:3px}
.btn{display:inline-block;font-size:14px;font-weight:500;padding:11px 20px;border-radius:2px;
  transition:.16s;min-height:44px;line-height:22px}
.btn-f{background:#fff;color:var(--blue)}
.btn-f:hover,.btn-f:active{background:var(--sky);color:var(--blue-d)}
.btn-o{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-o:hover,.btn-o:active{border-color:var(--sky);color:var(--sky)}
.btn-d{background:var(--blue);color:#fff}
.btn-d:hover{background:var(--blue-d)}
.burger{display:flex;width:44px;height:44px;background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:.2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:#fff;transition:.2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.drawer{display:none;background:rgba(8,34,70,.72);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 15px 15px;overflow:hidden}
.drawer.open{display:block}
.drawer a{display:block;padding:15px 20px;color:var(--sky4);font-size:15.5px;
  border-bottom:1px solid rgba(255,255,255,.09)}
.drawer a.on{color:#fff;border-left:3px solid var(--sky);padding-left:17px}
.drawer a.go{color:var(--sky);font-weight:500;border-bottom:0}

/* ---------- blueprint ---------- */
.bp{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  position:relative;background:var(--blue);
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);overflow:hidden}
#bpc{position:absolute;inset:0;display:block;pointer-events:none}
.bp .wrap{position:relative;padding-top:22px;padding-bottom:28px}
.ph-sm .wrap{padding-top:36px;padding-bottom:40px}
.ph-h1{font-size:clamp(30px,7.8vw,46px);color:#fff;max-width:17ch;margin-top:12px}
.hg{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;margin-top:16px}
/* Display voice is Anton — industrial poster caps, set only on page headlines.
   Section headings stay Archivo, so the page has a hierarchy instead of
   shouting throughout. Anton is a single weight, so the accent phrase is
   distinguished by colour; caps get near-zero tracking, not negative. */
h1{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,9vw,54px);color:#fff;max-width:15ch;
  letter-spacing:.002em;line-height:.94;text-wrap:balance}
h1 em{font-style:normal;color:var(--sky);font-weight:400}
.lede{font-size:16px;line-height:1.62;color:var(--sky3);max-width:46ch;margin-top:16px;
  text-wrap:pretty}
.cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.fsc{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:2px;
  padding:6px 11px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sky3);margin-top:14px}
.fsc::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fsc-l);
  display:inline-block;flex:none}

.dl{width:100%;height:auto;display:block;max-width:262px;margin:0 auto}
.dl-c{fill:none;stroke:#fff;stroke-width:1.6}
.dl-f{fill:none;stroke:var(--sky);stroke-width:1.3;stroke-dasharray:6 5}
.dl-s{fill:rgba(255,255,255,.06)}
.dl-d{stroke:var(--sky);stroke-width:.9;fill:none}
.dl-t{font-family:"IBM Plex Mono",monospace;font-size:9px;fill:var(--sky);letter-spacing:.08em}
.dl-t2{font-family:"IBM Plex Mono",monospace;font-size:8.5px;fill:var(--sky3);letter-spacing:.08em}
.pen{stroke-dasharray:var(--L);stroke-dashoffset:var(--L)}
.drawn .pen{animation:pen 1.5s cubic-bezier(.66,0,.2,1) forwards}
.fade{opacity:0}
.drawn .fade{animation:fade .6s ease 1.05s forwards}
@keyframes pen{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

.spec{position:relative;border-top:1px solid var(--line);background:rgba(8,34,70,.55)}
.sg{display:grid;grid-template-columns:1fr 1fr}
.sc{padding:17px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc:nth-child(2n){border-right:0}
.sc:nth-last-child(-n+2){border-bottom:0}
.sc .k{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sky2)}
.sc .v{font-family:"Archivo",sans-serif;font-weight:700;font-size:24px;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  margin-top:5px;line-height:1;color:#fff}
.sc .v small{font-size:11.5px;font-weight:500;color:var(--sky2);letter-spacing:0}
.sc .s{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--sky2);margin-top:5px;line-height:1.5}

/* ---------- sections ---------- */
section{padding:52px 0;scroll-margin-top:80px}
.alt{background:var(--paper2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.sh{display:flex;align-items:baseline;gap:13px;margin-bottom:26px}
.sh h2{font-size:clamp(23px,6vw,33px);color:var(--blue)}
.sh .n{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--sky-d);
  letter-spacing:.1em;flex:none}
.lead{font-size:16px;color:var(--ink2);max-width:60ch}
.lead+.lead{margin-top:12px}

.flow{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);
  border-radius:3px;overflow:hidden}
.step{padding:18px 16px;border-right:1px solid var(--line2);
  border-bottom:1px solid var(--line2);background:#fff}
.step:nth-child(2n){border-right:0}
.step:last-child{border-bottom:0;grid-column:1/-1}
.step .no{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--sky-d);letter-spacing:.1em}
.step h3{font-size:16px;margin:9px 0 5px;color:var(--blue)}
.step p{font-size:12.5px;color:var(--ink2);line-height:1.55}
.step .mc{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--ink2);
  margin-top:9px;padding-top:8px;border-top:1px solid var(--line2)}

/* ---------- finish simulator ---------- */
.fin{background:var(--blue-d);color:#fff}
.fin .sh h2{color:#fff}.fin .sh .n{color:var(--sky)}
.fin .lead{color:var(--sky3)}
.fx{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.stage{position:relative;border-radius:4px;overflow:hidden;background:#0A1830;padding:26px;
  min-height:300px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);touch-action:pan-y}
.box{position:relative;width:190px;height:255px;border-radius:3px;background:#15427C;
  overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.art{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;
  justify-content:space-between;color:#fff}
.art .top{font-family:"IBM Plex Mono",monospace;font-size:7px;letter-spacing:.22em;opacity:.6}
.art .crest{font-family:Georgia,serif;font-size:31px;line-height:1;font-weight:700;margin-top:12px}
.art .rule{width:34px;height:2px;background:#E8B84B;margin-top:9px}
.art .bot{font-size:8.5px;opacity:.68;line-height:1.5}
.lay{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .22s}
#sheen{background:radial-gradient(300px circle at var(--mx,50%) var(--my,40%),
  rgba(255,255,255,.55),rgba(255,255,255,.10) 42%,transparent 66%)}
/* Each finish reflects differently. Gloss throws a wide bright bloom; matte a
   broad dim one; soft-touch a tight, very low-amplitude specular, which is what
   a velvet surface actually does — near-zero but not zero. */
.box[data-f="matte"] #sheen{background:radial-gradient(330px circle at var(--mx,50%) var(--my,40%),
  rgba(255,255,255,.20),rgba(255,255,255,.05) 46%,transparent 70%)}
.box[data-f="soft"] #sheen{background:radial-gradient(150px circle at var(--mx,50%) var(--my,40%),
  rgba(255,255,255,.15),rgba(255,255,255,.04) 52%,transparent 76%)}
/* Soft-touch reads darker, warmer and finely textured in the hand. */
#veil{background:rgba(10,18,34,.30);
  background-image:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%);
  background-size:2px 2px}
#grain{mix-blend-mode:overlay;background-image:repeating-conic-gradient(
  rgba(255,255,255,.07) 0% 25%,transparent 0% 50%);background-size:3px 3px}
/* Spot UV and foil are applied to the artwork itself, not to a rectangle over
   it. Each layer carries a pixel-identical copy of .art, so the effect lands on
   the letterforms exactly where the real wordmark sits. Only the crest and the
   rule take the decoration — the small type does not. */
#spot .top,#spot .bot,#foil .top,#foil .bot{visibility:hidden}
#spot .art,#foil .art{color:transparent}
/* NOTE: the `background` shorthand resets background-clip, so the clip must be
   declared AFTER the gradient, never before it. */
#spot .crest{background-image:radial-gradient(220px circle at var(--mx,50%) var(--my,40%),
  rgba(255,255,255,.98),rgba(255,255,255,.6) 40%,rgba(255,255,255,.32) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#spot .rule{background-color:rgba(255,255,255,.92)}
#foil .crest{background-image:linear-gradient(115deg,#5C4410,#C9A227 18%,#FFF3B0 34%,
  #E8B84B 46%,#8A6A18 60%,#FFE79A 74%,#B08D22 88%,#6B5214);
  background-size:260% 260%;background-position:var(--fx,50%) var(--fy,50%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#foil .rule{background-image:linear-gradient(115deg,#C9A227,#FFF3B0 40%,#B08D22);
  background-size:260% 260%;background-position:var(--fx,50%) var(--fy,50%)}
.hint{position:absolute;left:14px;bottom:11px;font-family:"IBM Plex Mono",monospace;
  font-size:8.5px;letter-spacing:.13em;color:rgba(255,255,255,.42);max-width:80%}
.fbtns{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fbtns button{text-align:left;padding:12px 13px;border-radius:2px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:#fff;font-family:inherit;font-size:13px;
  cursor:pointer;transition:.16s;min-height:44px}
.fbtns button[aria-pressed="true"]{background:#fff;color:var(--blue-d);
  border-color:#fff;font-weight:500}
#fdesc{font-size:13px;line-height:1.65;color:var(--sky3);margin-top:13px;
  border-top:1px solid var(--line);padding-top:11px}

/* ---------- products ---------- */
.prods{display:grid;grid-template-columns:1fr;gap:16px}
.card{border:1px solid var(--line2);border-radius:3px;overflow:hidden;background:#fff}
.card .ph{background:var(--paper2);min-height:158px;display:flex;align-items:center;
  justify-content:center;padding:16px;position:relative;
  background-image:linear-gradient(rgba(18,32,58,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(18,32,58,.05) 1px,transparent 1px);
  background-size:16px 16px}
.pd{width:100%;height:auto;max-width:220px;transition:opacity .28s}
.pd-c{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linejoin:round}
.pd-f{fill:none;stroke:var(--sky-d);stroke-width:1.2;stroke-dasharray:5 4}
.pd-s{fill:rgba(14,49,100,.07)}
.pd-t{font-family:"IBM Plex Mono",monospace;font-size:7px;fill:#8497AF;letter-spacing:.12em}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .28s}
.ph.has .shot{opacity:1}
.ph.has .pd{opacity:0}
.ph.has.dwgon .shot{opacity:0}
.ph.has.dwgon .pd{opacity:1}
.tgl{position:absolute;right:9px;bottom:9px;z-index:3;font-family:"IBM Plex Mono",monospace;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;background:rgba(14,49,100,.92);
  color:#fff;border:0;border-radius:2px;padding:9px 12px;cursor:pointer;min-height:36px}
.card .bd{padding:17px 19px 21px}
.card h3{font-size:17.5px;color:var(--blue)}
.card p{font-size:13px;color:var(--ink2);margin-top:6px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tag{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid var(--line2);border-radius:2px;
  padding:4px 8px;color:var(--ink2)}
.note{font-size:12.5px;color:var(--ink2);margin-top:16px;line-height:1.6}

/* ---------- spec table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.tbl th,.tbl td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl th{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink2);font-weight:400;width:38%}
.tbl td{color:var(--ink)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}

/* ---------- tiles ---------- */
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
.tile{border:1px solid var(--line2);border-radius:3px;padding:18px 19px;background:#fff}
.tile h3{font-size:16.5px;color:var(--blue)}
.tile p{font-size:13.5px;color:var(--ink2);margin-top:6px}
.tile .mc{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--sky-d);
  letter-spacing:.1em;text-transform:uppercase}
.leaf{display:flex;gap:15px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid var(--line2)}
.leaf:last-child{border-bottom:0}
.leaf .ic{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--fsc);
  letter-spacing:.1em;padding-top:3px;flex:none;width:24px}
.leaf p{font-size:14px;color:var(--ink2)}
.leaf b{color:var(--ink);font-weight:500}
.green{background:#F2F5EC;border-top:1px solid #DCE5CE;border-bottom:1px solid #DCE5CE}
.lic{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--fsc);
  border:1px solid rgba(46,125,50,.4);border-radius:2px;padding:9px 14px;
  display:inline-block;margin-top:18px}

.callout{border:1px solid var(--line2);border-left:3px solid var(--sky-d);border-radius:3px;
  background:var(--paper2);padding:22px}
.callout h3{font-size:19px;color:var(--blue)}
.callout p{font-size:14px;color:var(--ink2);margin-top:8px;max-width:52ch}
.callout .btn{margin-top:16px}

/* ---------- rfq ---------- */
.rfq{background:var(--blue)}
.rfq h2{font-size:clamp(23px,6vw,33px);color:#fff;max-width:17ch}
.rfq p{color:var(--sky3);margin-top:11px;font-size:15px}
.form{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:3px;
  padding:20px;margin-top:24px}
.form label{display:block;font-family:"IBM Plex Mono",monospace;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sky5);margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;background:rgba(255,255,255,.09);
  border:1px solid var(--line);border-radius:2px;color:#fff;padding:13px 12px;
  font-family:inherit;font-size:16px;margin-bottom:14px;min-height:46px;-webkit-appearance:none}
.form textarea{min-height:88px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.42)}
.form select option{color:#12203A}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.form button{width:100%;background:#fff;color:var(--blue);border:0;border-radius:2px;
  padding:15px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;min-height:48px}
.form button[disabled]{opacity:.6;cursor:default}
.form input.bad,.form select.bad,.form textarea.bad{border-color:var(--mg);
  box-shadow:0 0 0 2px rgba(236,0,140,.22)}
.fstat{font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.6;
  letter-spacing:.02em;margin-top:11px;min-height:1px}
.fstat:empty{margin-top:0}
.fstat.err{color:#FFC2E4}
.fstat.ok{color:var(--sky)}
.cx{display:grid;gap:0;margin-top:22px;font-family:"IBM Plex Mono",monospace;
  font-size:13px;color:var(--sky4)}
.cx a{color:#fff;display:inline-block;padding:15px 0;line-height:1.2}
.cx .addr{font-size:12px;color:var(--sky5);line-height:1.6}

/* ---------- small runs ---------- */
.sr-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;font-size:13.5px;border:1px solid var(--line2);border-radius:2px;
  padding:10px 14px;cursor:pointer;background:#fff;transition:.15s;min-height:42px;line-height:20px}
.chip input:checked+span{background:var(--blue);color:#fff;border-color:var(--blue)}
.chip input:focus-visible+span{outline:2px solid var(--sky-d);outline-offset:2px}
.fs{border:0;margin-bottom:24px}
.fs legend{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sky-d);padding-bottom:11px}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:13px;color:var(--ink2);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;background:#fff;border:1px solid var(--line2);
  border-radius:2px;padding:12px;font-family:inherit;font-size:16px;color:var(--ink);min-height:46px}
.fld textarea{min-height:76px;resize:vertical}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  padding:24px 18px;text-align:center;cursor:pointer;transition:.15s;display:block}

.side{background:var(--paper2);border:1px solid var(--line2);border-radius:3px;padding:22px}
.side h2{font-size:18px;color:var(--blue)}
.sumrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line2);font-size:13.5px}
.sumrow:last-of-type{border-bottom:0}
.sumrow .k{color:var(--ink2)}
.sumrow .v{text-align:right;font-family:"IBM Plex Mono",monospace}
.est{background:var(--blue);color:#fff;border-radius:3px;padding:16px;margin-top:14px}
.est .k{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sky5)}
.est .v{font-family:"Archivo",sans-serif;font-weight:700;font-size:22px;
  letter-spacing:-.02em;margin-top:5px}
.est .n{font-size:11px;color:var(--sky3);margin-top:7px;line-height:1.5}
.bw{display:block;width:100%;text-align:center;border:0;border-radius:2px;padding:14px;
  font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;margin-top:12px;min-height:48px}
.b-wa{background:#075E54;color:#fff}

footer{background:var(--blue-d);color:var(--foot);font-size:13.5px}
footer .wrap{padding:36px 20px 26px}
.fg{display:grid;gap:28px}
footer .fh{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--foot-h);margin-bottom:11px;font-weight:400}
footer li{list-style:none;margin-bottom:0}
footer li a{display:inline-block;padding:14px 0;line-height:1.3}
footer a:hover{color:#fff}
footer .addr{color:var(--foot-a);line-height:1.6;margin-top:4px;padding:9px 0}
.fb a{display:inline-block;padding:14px 4px;margin:-14px 0}
.fb{border-top:1px solid rgba(255,255,255,.13);margin-top:26px;padding-top:17px;display:flex;
  justify-content:space-between;gap:10px;font-family:"IBM Plex Mono",monospace;
  font-size:10px;flex-wrap:wrap}

.maploader{width:100%;height:100%;min-height:200px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;text-align:center;cursor:pointer;
  background:var(--paper2);border:0;padding:24px 20px;font:inherit;color:var(--ink2);
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:32px 32px}
.maploader .dwg{color:var(--sky-d)}
.maploader .ml-pin{width:56px;height:56px;color:var(--sky-d);opacity:.75}
.maploader .ml-t{font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:14px;
  color:#fff;background:var(--blue);border-radius:2px;padding:11px 20px;display:inline-block}
.maploader .ml-s{font-size:12.5px;color:var(--ink2);max-width:44ch;line-height:1.6}
.maploader:hover .ml-t,.maploader:focus-visible .ml-t{background:var(--blue-d)}
.maploader:hover .ml-pin{opacity:1}
/* ---------------------------------------------------------------- plates
   Technical illustrations of the press. They draw in like a plotter, which
   is the same language as the dielines (section 9). If the file is missing
   the block falls back to the "pending" note rather than a broken image.  */
/* ------------------------------------------------------- press schematic
   The five-colour press drawn in the site's own language rather than shipped
   as a raster: it uses the real CMYK tokens, stays sharp at any size, prints
   cleanly into the company profile, and inks up unit by unit on scroll.   */
.press{width:100%;height:auto;display:block;background:var(--blue-d)}
.pu-body,.pr-feed .pu-body,.pr-del .pu-body{fill:none;stroke:rgba(255,255,255,.62);stroke-width:1.4}
.pu-cyl{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.1}
.pu-arm,.pr-rail,.pr-stack{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.1}
.pr-reg path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.1}
.pr-dim path{fill:none;stroke:var(--sky);stroke-width:.9}
.pr-dt{font-family:"IBM Plex Mono",monospace;font-size:12px;fill:var(--sky);
  letter-spacing:.12em;text-anchor:middle}
.pu-n{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--sky2);
  letter-spacing:.1em;text-anchor:middle}
.pu-t{font-family:"IBM Plex Mono",monospace;font-size:10px;fill:rgba(255,255,255,.55);
  letter-spacing:.14em;text-anchor:middle}
.pr-leg{font-family:"IBM Plex Mono",monospace;font-size:10.5px;fill:var(--sky2);letter-spacing:.11em}
.pr-dwg{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--sky);
  letter-spacing:.16em}
/* ---- detailed press elevation (infrastructure) ---- */
.pe-frame{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
.pe-con{fill:none;stroke:rgba(255,255,255,.10);stroke-width:1}
.pe-body{fill:none;stroke:rgba(255,255,255,.78);stroke-width:1.5}
.pe-body2{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.2}
.pe-thin{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1}
.pe-heavy{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2}
.pe-cyl{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.2}
.pr-dim-l{fill:none;stroke:var(--sky);stroke-width:.9}
/* Mono variant: the same drawing in pure line-work, no ink laid down. */
.press-mono .pu-ink{fill:none;stroke:var(--sky2);stroke-width:1.1;opacity:.55}
.drawn .press-mono .pu-ink{animation:monoink .55s ease forwards;animation-delay:var(--d,0s)}
@keyframes monoink{from{opacity:0}to{opacity:.55}}
.press-mono .pu-body{stroke:rgba(255,255,255,.72)}
.pu-fl{fill:none;stroke:#fff;stroke-width:1.3;opacity:.55}
/* the sheet travelling through the press */
.pr-path{fill:none;stroke:var(--sky);stroke-width:1.6;stroke-dasharray:14 10;opacity:.75}
.drawn .pr-path{animation:sheet 2.4s linear infinite}
@keyframes sheet{to{stroke-dashoffset:-48}}
/* each unit lays its ink down in turn */
.pu-ink{opacity:0}
.drawn .pu-ink{animation:inkup .55s ease forwards;animation-delay:var(--d,0s)}
@keyframes inkup{from{opacity:0}to{opacity:.92}}
@media(prefers-reduced-motion:reduce){
  .pu-ink{opacity:.92;animation:none}
  .drawn .pr-path{animation:none}
}
.plate{position:relative;overflow:hidden;border:1px solid var(--line2);
  border-radius:3px;background:var(--blue-d);aspect-ratio:16/9}
.plate.pl-43{aspect-ratio:4/3}
figure.plate{margin:0}
figure.plate figcaption{position:absolute;left:10px;bottom:10px;z-index:3;opacity:0;
  color:#fff;background:rgba(8,20,44,.78);padding:6px 10px;border-radius:3px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16)}
figure.plate.drawn figcaption{animation:fade .6s ease 1.55s forwards}
/* the drawn schematic sizes itself; no fixed box, no cover-cropping */
.plate.pl-svg{aspect-ratio:auto;background:var(--blue-d)}
.plate.pl-svg .press{clip-path:inset(0 100% 0 0)}
.plate.pl-svg.drawn .press{animation:plot 1.9s cubic-bezier(.66,0,.2,1) forwards}
.plate img{display:block;width:100%;height:100%;object-fit:cover;
  clip-path:inset(0 100% 0 0)}
.plate.drawn img{animation:plot 1.9s cubic-bezier(.66,0,.2,1) forwards}
@keyframes plot{to{clip-path:inset(0 0 0 0)}}
.plate::after{content:"";position:absolute;top:0;bottom:0;width:2px;left:0;opacity:0;
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--sky),transparent);
  box-shadow:0 0 14px 2px rgba(107,214,255,.5)}
.plate.drawn::after{animation:plotpen 1.9s cubic-bezier(.66,0,.2,1) forwards}
@keyframes plotpen{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
/* Captions sit on photographs, so they need their own ground — a tinted slug
   reads on a dark press or a light machine body alike, and looks like the slug
   on a technical print rather than text dropped on an image. */
.plate .cap{position:absolute;left:10px;bottom:10px;z-index:3;opacity:0;
  color:#fff;background:rgba(8,20,44,.78);padding:6px 10px;border-radius:3px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16)}
.plate.drawn .cap{animation:fade .6s ease 1.55s forwards}
.plate.pl-missing{background:var(--paper2);display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:10px}
.plate.pl-missing img,.plate.pl-missing::after{display:none}
.plate.pl-missing .cap{position:static;opacity:1;animation:none;color:var(--ink2)}
.nowa{font-size:12.5px;color:var(--ink2);text-align:center;margin-top:11px;line-height:1.6}
.nowa a{color:var(--blue);text-decoration:underline}
.wa{position:fixed;right:14px;bottom:14px;width:54px;height:54px;border-radius:50%;
  background:var(--blue-d);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;z-index:95;
  transition:opacity .25s,transform .25s;
  box-shadow:0 4px 16px rgba(0,0,0,.3)}
.wa svg{width:26px;height:26px;fill:#fff}
/* Stand down wherever the page already offers a way to make contact, so the
   bubble can never sit on top of a spec value a buyer is reading. */
.wa.wa-off{opacity:0;transform:scale(.7) translateY(8px);pointer-events:none}

/* ---------- desktop ---------- */
@media(min-width:960px){
  .dl{max-width:none;margin:0}
  h1{font-size:clamp(46px,4.4vw,62px)}
  .lede{font-size:17px;max-width:44ch}
  .links{display:flex}
  .burger{display:none}
  :root{--grid:38px}
  .wrap{padding:0 30px}
  header{top:14px;margin-top:14px;border-radius:19px}
  /* the pill's 20px inset eats width the full-bleed bar did not need, so the
     nav gets its padding back to stop the wordmark truncating at 960 */
  header .wrap{padding:0 20px}
  .links{gap:17px}
  .nav{height:72px}
  .bn{font-size:14px}
  .bp .wrap{padding-top:48px;padding-bottom:44px}
  .ph-sm .wrap{padding-top:54px;padding-bottom:58px}
  .hg{grid-template-columns:1.08fr .92fr;gap:44px;margin-top:22px}
  .sg{grid-template-columns:repeat(4,1fr)}
  .sc{border-bottom:0;padding:22px 26px}
  .sc:nth-child(2n){border-right:1px solid var(--line)}
  .sc:last-child{border-right:0}
  .sc .v{font-size:27px}
  section{padding:76px 0}
  .flow{grid-template-columns:repeat(5,1fr)}
  .step{border-bottom:0}
  .step:nth-child(2n){border-right:1px solid var(--line2)}
  .step:last-child{border-right:0;grid-column:auto}
  .step:hover{background:var(--paper2)}
  .fx{grid-template-columns:minmax(0,1fr) 250px;gap:30px}
  .stage{max-width:520px}
  .fbtns{grid-template-columns:1fr}
  .prods{grid-template-columns:repeat(3,1fr);gap:22px}
  .card{transition:.18s}
  .card:hover{border-color:var(--sky-d);transform:translateY(-3px)}
  .ph.has:hover .shot{opacity:0}
  .ph.has:hover .pd{opacity:1}
  footer li{margin-bottom:9px}
  footer li a{padding:0;line-height:inherit}
  footer .addr{padding:0}
  .cx{gap:8px}
  .cx a{padding:0}
  .rfq .inner{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
  .form{margin-top:0}
  .grid2{grid-template-columns:1fr 1fr;gap:18px}
  .sr-grid{grid-template-columns:1.4fr .9fr;gap:34px}
  .side{position:sticky;top:96px}
  .fg{grid-template-columns:1.5fr 1fr 1fr;gap:38px}
  footer .wrap{padding:42px 30px 28px}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
}
@media(prefers-reduced-motion:reduce){
  .plate img{clip-path:none;animation:none}
  .plate::after{display:none}
  .plate .cap{opacity:1;animation:none}
  /* §9: reduced motion shows dielines complete. Not "complete once you scroll
     to them" — they must not wait on the observer firing at all. */
  .pen,.drawn .pen{animation:none;stroke-dashoffset:0}
  .fade,.drawn .fade{animation:none;opacity:1}
  html{scroll-behavior:auto}
  .card:hover{transform:none}
}