/* ============================================================
   NATIONAL WALL PRINTERS
   assets/css/styles.css
   ============================================================ */

/* ---- fonts (self-hosted, latin subset) ----
   font-display is SWAP, and that was a decision, not a default.

   PageSpeed Insights reports ~0.12 CLS on the home page, mobile, from text
   re-wrapping when the real font replaces the fallback. font-display:optional
   removes that completely — no swap period, so a late font is simply not used
   and nothing moves. It was tried (e6155e7) and reverted here on purpose.

   Two reasons swap wins for this site. That 0.12 is lab-only: the site has no
   CrUX field data, and field data is what Google actually ranks on. And the
   number comes from a Linux runner carrying DejaVu and Noto, whose metrics sit
   far from Archivo and Plex; the same Lighthouse config run on a machine with
   Arial and Segoe UI returns CLS 0. Almost no real visitor is in the
   environment that produces the score.

   Meanwhile optional degrades exactly the visitors the /lp/ pages are bought
   for — first-time, cold cache, often on mobile data, which is precisely when
   it declines to use a font. Trading real typography on a $30,000 enquiry
   against a synthetic number measured on hardware nobody uses is the wrong way
   round.

   What does carry across: the preloads in head.njk and the metric-adjusted
   fallbacks below. Both cut real-world shift with no trade at all. Revisit if
   CrUX ever starts reporting field CLS above 0.1. ---- */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---- metric-adjusted fallbacks ----
   Because the faces above are swap, text paints in a fallback first and then
   reflows when the real font lands. Where the fallback is a different width
   the text re-wraps, and a block of copy gaining or losing a line moves
   everything below it. These faces give the fallback the metrics of the font
   it stands in for, so the swap changes the glyphs and little else. This is
   what keeps swap affordable — see the note above.

   size-adjust is the measured width ratio of the real face to its local
   base, from canvas measureText over real text off this site — headings
   uppercased for the display face, body prose for the sans, label text for
   the mono. Measuring an A-Z alphabet instead gives numbers that are wrong
   by up to 7%, because what decides a wrap is glyph frequency in the actual
   copy, not an even spread of letters.

   Arial and Courier New are the bases because local() needs a real family
   name, both ship on Windows and macOS, and the Liberation faces are metric
   clones of them on Linux. Android has neither and falls through to the
   generic — no worse than before.

   These cost nothing: local() only, so no font is ever downloaded for them.
   Re-measure if a font file is ever swapped or subset differently. ---- */
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("Liberation Sans");font-weight:600;font-style:normal;size-adjust:98.92%;ascent-override:88.96%;descent-override:21.23%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("Liberation Sans");font-weight:700;font-style:normal;size-adjust:101.02%;ascent-override:87.11%;descent-override:20.79%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("Liberation Sans");font-weight:800;font-style:normal;size-adjust:104.15%;ascent-override:84.50%;descent-override:20.16%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial"),local("Liberation Sans");font-weight:400;font-style:normal;size-adjust:100.75%;ascent-override:102.23%;descent-override:27.79%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial"),local("Liberation Sans");font-weight:600;font-style:normal;size-adjust:104.38%;ascent-override:98.68%;descent-override:26.83%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial"),local("Liberation Sans");font-weight:700;font-style:normal;size-adjust:105.87%;ascent-override:97.29%;descent-override:26.45%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Mono Fallback";src:local("Courier New"),local("Liberation Mono");font-weight:500;font-style:normal;size-adjust:99.98%;ascent-override:103.02%;descent-override:28.00%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Mono Fallback";src:local("Courier New"),local("Liberation Mono");font-weight:600;font-style:normal;size-adjust:99.98%;ascent-override:103.02%;descent-override:28.00%;line-gap-override:0%}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#14161a;
  --ink-2:#22262d;
  --ink-3:#3f454e;
  --concrete:#dad7d0;
  --panel:#efede8;
  --paper:#f7f6f3;
  --white:#fff;

  --teal:#12a4c4;
  --teal-deep:#0a6f88;
  --red:#e63329;
  --amber:#f6a71d;
  --green:#4f8a2c;

  --line:rgba(20,22,26,.14);
  --line-dk:rgba(255,255,255,.16);

  --display:"Archivo","Archivo Fallback",system-ui,-apple-system,sans-serif;
  --body:"IBM Plex Sans","IBM Plex Sans Fallback",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,SFMono-Regular,monospace;

  --gut:clamp(20px,4vw,64px);
  --maxw:1680px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* No overflow-x:hidden here. It was masking rather than preventing overflow,
     and measurement at 320/375/430/768/1120 across the home, product, post and
     contact pages found none to mask. Hiding it on body can also break the
     sticky masthead. If overflow ever appears, fix the element that causes it. */
}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.on-dark :focus-visible{outline-color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.section{padding:clamp(60px,7vw,124px) 0}
.section--tight{padding:clamp(46px,5vw,78px) 0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:14px 20px;z-index:200;font-family:var(--mono);font-size:13px}
.skip:focus{left:0}

/* ---- type ---- */
.h-display{font-family:var(--display);font-weight:800;line-height:.96;letter-spacing:-.02em;text-transform:uppercase;margin:0}
.h1{font-size:clamp(40px,6vw,96px)}
.h2{font-size:clamp(30px,4vw,60px)}
.h3{font-size:clamp(21px,2vw,30px);line-height:1.05}
.lede{font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--ink-3);max-width:64ch}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-deep);display:flex;align-items:center;gap:12px;margin:0 0 20px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:none}
.on-dark{background:var(--ink);color:#fff}
.on-dark .h-display{color:#fff}
.on-dark .eyebrow{color:#5fd0e8}
.on-dark .lede{color:rgba(255,255,255,.72)}
.prose p{max-width:70ch}
.prose h2{margin:2.2em 0 .6em}
.prose h3{margin:1.8em 0 .5em;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px}
.prose ul{max-width:70ch;padding-left:1.2em}
.prose li{margin-bottom:.5em}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 26px;border:2px solid var(--ink);background:var(--ink);color:var(--white);
  text-decoration:none;cursor:pointer;line-height:1.2;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:none;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.on-dark .btn--ghost{background:none;color:#fff;border-color:rgba(255,255,255,.45)}
.on-dark .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--teal{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.btn--teal:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ============================================================
   HEADER
   ============================================================ */
.utility{background:var(--ink);color:rgba(255,255,255,.82);font-family:var(--mono);font-size:12.5px;letter-spacing:.05em}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.utility a{text-decoration:none}
.utility a:hover{color:#5fd0e8}
.utility__left{display:flex;gap:24px;flex-wrap:wrap}
.utility__badge{color:#5fd0e8;display:flex;align-items:center;gap:8px}
/* Replaced the static purchasing badge in this slot. It is a button in a bar
   of links, so it carries an underline to read as something you can press —
   color alone would not say that. Inherits the bar's mono type rather than
   restating it, the same way .foot__legal button does. */
.utility__book{
  background:none;border:0;margin:0;padding:0;font:inherit;letter-spacing:inherit;
  color:#5fd0e8;cursor:pointer;display:flex;align-items:center;gap:8px;
  text-decoration:underline;text-underline-offset:3px;
  /* The badge this replaced was static text and needed no target. As a
     control it does: 24px is the WCAG 2.2 minimum, and the type alone gives
     it 20. Same fix .foot__legal button already uses. */
  padding:2px 0;min-height:24px;
}
.utility__book:hover{color:#fff}

.masthead{position:sticky;position:-webkit-sticky;top:0;z-index:50;background:rgba(247,246,243,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;padding-bottom:12px;min-width:0}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:1 1 auto;min-width:0}
/* the whole mark, never cropped — height drives it, width follows the aspect */
.brand__mark{height:44px;width:auto;flex:none;display:block}
.brand__name{font-family:var(--display);font-weight:800;font-size:15.5px;line-height:1.1;text-transform:uppercase;letter-spacing:.005em;min-width:0;overflow-wrap:anywhere}

.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,28px)}
.nav > a,.nav-item__trigger{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:8px 0;border:0;border-bottom:2px solid transparent;background:none;
  white-space:nowrap;cursor:pointer;color:inherit;line-height:1.2;
}
.nav > a:hover,.nav > a[aria-current="page"],.nav-item__trigger:hover{border-color:var(--red)}
.nav .btn{padding:13px 20px;border-bottom-width:2px}
.nav__phone{display:none}
@media (min-width:1280px){.nav__phone{display:inline-block}}
.nav .btn:hover{border-color:var(--teal-deep)}

/* dropdown */
.nav-item{position:relative}
.nav-item__trigger{display:inline-flex;align-items:center;gap:7px}
.nav-item__trigger svg{width:10px;height:10px}
.nav-item::before{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav-item__menu{
  position:absolute;left:-16px;top:calc(100% + 14px);min-width:270px;
  background:var(--white);border:1px solid var(--line);box-shadow:0 24px 48px -24px rgba(20,22,26,.45);
  padding:8px;display:none;flex-direction:column;z-index:55;
}
.nav-item:hover .nav-item__menu,.nav-item:focus-within .nav-item__menu{display:flex}
.nav-item.is-dismissed .nav-item__menu{display:none}
.nav-item__menu a{
  font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;
  text-decoration:none;padding:11px 14px;border:0;
}
.nav-item__menu a:hover{background:var(--panel)}

/* mobile nav */
.navtoggle{display:none;align-items:center;gap:10px;flex:none;white-space:nowrap;background:none;border:2px solid var(--ink);color:var(--ink);padding:11px 15px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;line-height:1.2}
.navtoggle__bars{width:18px;height:12px;position:relative;flex:none}
.navtoggle__bars span{position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:transform .22s,opacity .22s}
.navtoggle__bars span:first-child{top:0}
.navtoggle__bars span:last-child{bottom:0}
.navtoggle[aria-expanded="true"] .navtoggle__bars span:first-child{transform:translateY(5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle__bars span:last-child{transform:translateY(-5px) rotate(-45deg)}

.mobilenav{
  position:fixed;inset:0;z-index:45;background:var(--ink);color:#fff;
  padding:110px var(--gut) calc(40px + env(safe-area-inset-bottom));
  overflow-y:auto;display:none;
}
.mobilenav.is-open{display:block}
.mobilenav a{display:block;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line-dk);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px}
.mobilenav .sub a{font-family:var(--body);font-weight:400;text-transform:none;font-size:16px;padding:11px 0 11px 18px;color:rgba(255,255,255,.75)}
.mobilenav .btn{margin-top:26px;width:100%;justify-content:center;border-bottom-width:2px}
body.nav-open{overflow:hidden}
body.nav-open .masthead{background:var(--ink);border-bottom-color:var(--line-dk)}
body.nav-open .brand__name{color:#fff}
body.nav-open .navtoggle{border-color:rgba(255,255,255,.5);color:#fff}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--concrete);border-bottom:1px solid var(--line);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,68px);align-items:center;padding:clamp(44px,5.5vw,88px) 0}
.hero__kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:var(--ink);color:#fff;padding:8px 14px;line-height:2.1;margin-bottom:24px}
.hero__kicker b{color:#5fd0e8;font-weight:600}
.hero h1 .flip{display:block;color:var(--teal-deep)}
.hero__lede{margin:24px 0 32px;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-2);max-width:56ch}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:36px}
.hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink);max-width:620px}
.hero__stats div{padding:18px 16px 0;border-right:1px solid var(--line)}
.hero__stats div:last-child{border-right:0}
.hero__stats b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.5vw,36px);line-height:1}
.hero__stats span{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:7px}

/* video stage */
.vstage{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden;border:1px solid rgba(20,22,26,.2);box-shadow:0 40px 80px -40px rgba(20,22,26,.55)}
.vstage video{width:100%;height:100%;object-fit:cover}
.vstage__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.vstage.is-static video{display:none}
.vstage.is-static .vstage__poster{display:block}
.vbtn{
  position:absolute;right:14px;bottom:14px;z-index:6;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(20,22,26,.84);color:#fff;border:1px solid rgba(255,255,255,.3);
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:11px 15px;cursor:pointer;line-height:1.2;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s,border-color .18s,transform .18s;
}
.vbtn:hover{background:var(--teal-deep);border-color:var(--teal-deep);transform:translateY(-2px)}
.vbtn svg{width:16px;height:16px;flex:none}
.vbtn .icon-on{display:none}
.vbtn[aria-pressed="true"] .icon-off{display:none}
.vbtn[aria-pressed="true"] .icon-on{display:block}
.vstage__tag{position:absolute;left:0;bottom:0;z-index:5;background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:10px 15px;display:flex;gap:10px;align-items:center}
.vstage__tag i{width:7px;height:7px;background:var(--red);border-radius:50%;font-style:normal}

/* page hero (interior pages) */
.page-hero{background:var(--ink);color:#fff;padding:clamp(52px,6vw,96px) 0}
.page-hero .lede{color:rgba(255,255,255,.72)}
.page-hero .eyebrow{color:#5fd0e8}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:14px 0;border-bottom:1px solid var(--line)}
.crumbs a{color:var(--ink-3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.crumbs li::after{content:"/";margin-left:10px;color:var(--ink-3)}
.crumbs li:last-child::after{content:""}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{background:var(--ink);color:#fff;overflow:hidden;border-bottom:1px solid var(--line-dk)}
.ticker__track{display:flex;white-space:nowrap;animation:slide 36s linear infinite;font-family:var(--mono);font-size:13px;letter-spacing:.15em;text-transform:uppercase;padding:14px 0}
.ticker__track span{padding:0 30px;display:flex;align-items:center;gap:30px}
.ticker__track span::after{content:"";width:6px;height:6px;background:#5fd0e8;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   CASE / STEPS
   ============================================================ */
.case,.steps{display:grid;border-top:2px solid var(--ink);margin-top:clamp(32px,4vw,54px)}
.case{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps{grid-template-columns:repeat(4,minmax(0,1fr));border-top-color:var(--teal)}
.case > div,.step{padding:28px clamp(16px,1.8vw,32px) 6px;border-right:1px solid var(--line)}
.case > div:last-child,.step:last-child{border-right:0}
.on-dark .step{border-right-color:var(--line-dk)}
.case h3,.step h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:19px;margin:0 0 11px;letter-spacing:-.01em}
.case p,.step p{margin:0;color:var(--ink-3);font-size:15.5px}
.on-dark .step p{color:rgba(255,255,255,.65)}
.case__n,.step__n{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--teal-deep);display:block;margin-bottom:14px}
.on-dark .step__n{color:#5fd0e8}

/* ============================================================
   APPLICATION CARDS
   ============================================================ */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.7vw,26px)}
.app{border:1px solid var(--line);background:var(--white);padding:clamp(24px,2.2vw,34px);position:relative;overflow:hidden;text-decoration:none;display:block;transition:transform .22s,box-shadow .22s}
.app:hover{transform:translateY(-4px);box-shadow:0 26px 52px -34px rgba(20,22,26,.45)}
.app::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:var(--bar,var(--teal))}
.app h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:19px;margin:0 0 11px}
.app p{margin:0 0 14px;color:var(--ink-3);font-size:15.5px}
.app ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.app li{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:9px;align-items:flex-start}
.app li::before{content:"";width:6px;height:6px;background:var(--bar,var(--teal));margin-top:6px;flex:none}
.app__more{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-deep)}

/* ============================================================
   SURFACES
   ============================================================ */
.substrate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,66px);align-items:center}

/* 3-across grid of surface names */
.mats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px}
.mats button{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 12px;border:1px solid var(--line);background:var(--white);color:inherit;
  cursor:pointer;line-height:1.3;text-align:center;transition:background .18s,color .18s,border-color .18s;
}
.mats button:hover{border-color:var(--ink)}
.mats button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.matnote{font-family:var(--mono);font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-top:22px;min-height:2.6em}

/* stacked photos — all present, one visible, so switching never flashes */
.matframe{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.matframe__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .28s ease;
}
.matframe__img.is-active{opacity:1}
.matframe__label{
  position:absolute;right:0;bottom:0;z-index:2;background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:9px 14px;
}

/* ============================================================
   OCCUPIED / PILLARS / PROCUREMENT
   ============================================================ */
.occupied{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);margin-top:clamp(30px,3.5vw,50px)}
.occupied div{border-left:2px solid var(--teal);padding:4px 0 4px 20px}
.occupied h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;margin:0 0 8px;color:#fff}
.occupied p{margin:0;color:rgba(255,255,255,.68);font-size:15.5px}

.pillar{border-top:2px solid var(--ink);padding-top:20px}
.pillar h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;margin:0 0 9px}
.pillar p{margin:0;color:var(--ink-3);font-size:15.5px}

.procure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:26px}
.procure span{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;display:flex;gap:10px;align-items:center;padding:13px 15px;border:1px solid var(--line);background:var(--white)}
.procure span::before{content:"";width:7px;height:7px;background:var(--teal);flex:none}

.finance{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.finance .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,62px);align-items:start}

/* ============================================================
   MACHINES
   ============================================================ */
.machines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,34px)}
.machine{border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.machine:hover{transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(20,22,26,.5)}
.machine__vis{aspect-ratio:16/9;background:linear-gradient(160deg,#22262d,#0e1114);position:relative;overflow:hidden;display:grid;place-items:center}
.machine__vis svg{width:64%;height:auto}
.machine__vis img{width:100%;height:100%;object-fit:cover;display:block}
/* studio shot on white — show the whole machine rather than cropping the rail */
.machine__vis--product{background:#fff}
.machine__vis--product img{object-fit:contain;padding:6% 5%}
.machine__flag{position:absolute;top:0;left:0;background:var(--teal-deep);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:8px 13px}
.machine__body{padding:clamp(22px,2.2vw,34px);display:flex;flex-direction:column;gap:16px;flex:1}
.machine p{margin:0;color:var(--ink-3)}
.specs{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.specs li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.specs li b{font-weight:600;text-align:right}
.specs li span{color:var(--ink-3);text-transform:uppercase;letter-spacing:.13em;font-size:11px}
.machine .btn{align-self:flex-start;margin-top:auto}

/* ============================================================
   POSTS / CARDS
   ============================================================ */
.posts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.post{border:1px solid var(--line);background:var(--white);padding:clamp(22px,2vw,30px);text-decoration:none;display:flex;flex-direction:column;gap:14px;transition:.2s}
.post:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.post:hover .post__meta{color:#5fd0e8}
.post:hover p{color:rgba(255,255,255,.7)}
.post__meta{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-deep)}
.post h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.1;margin:0}
.post p{margin:0;font-size:15.5px;color:var(--ink-3)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:22px 0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--teal-deep);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .faq__body{padding:0 0 22px;color:var(--ink-3);max-width:74ch}

/* ============================================================
   FORM
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,4vw,70px)}
.contact__info{display:grid;gap:24px;align-content:start}
.info-block{border-left:2px solid var(--teal);padding-left:18px}
.info-block h2,.info-block h3{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:#5fd0e8;margin:0 0 9px}
.info-block p,.info-block a{margin:0;color:rgba(255,255,255,.88);text-decoration:none;font-size:16.5px;line-height:1.55}
.info-block a:hover{color:#5fd0e8}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.06);border:1px solid var(--line-dk);color:#fff;
  padding:14px 15px;font-family:var(--body);font-size:16.3px;border-radius:0;
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);background:rgba(18,164,196,.1)}
.field ::placeholder{color:rgba(255,255,255,.5)}
.field select option{color:var(--ink)}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.5);margin:14px 0 0}
.formstatus{margin:16px 0 0;padding:14px 16px;font-size:15.5px;display:none}
.formstatus.is-error{display:block;background:rgba(230,51,41,.16);border:1px solid rgba(230,51,41,.5)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:#0d0f12;color:rgba(255,255,255,.65);padding:clamp(44px,5vw,70px) 0 0}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,46px)}
.foot h2{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot li{line-height:1.5}
.foot a,.foot__legal button{text-decoration:none;font-size:15px;display:inline-block;padding:5px 0;min-height:24px}
.foot a:hover,.foot__legal button:hover{color:#5fd0e8}
.brand--foot{background:#fff;padding:14px 18px;display:inline-flex;margin-bottom:18px}
.brand--foot img{height:104px;width:auto}
.social{display:flex;gap:10px;margin-top:10px}
.social a{width:40px;height:40px;border:1px solid var(--line-dk);display:grid;place-items:center;padding:0;transition:.18s}
.social a:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.foot__bar{margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--line-dk);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.foot__legal{display:flex;gap:18px;flex-wrap:wrap}
/* The cookie-preferences control opens a dialog rather than going anywhere, so
   it is a button. It shares the .foot a rule above for type and box metrics;
   these declarations only strip the native button chrome. Do NOT add font-size
   or the `font:` shorthand here — both would pull in .foot__bar's 11.5px and
   render it smaller than the links beside it. */
.foot__legal button{background:none;border:0;margin:0;font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;cursor:pointer}

/* ============================================================
   CONSENT BANNER
   ============================================================ */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--ink);color:#fff;border-top:2px solid var(--teal);padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom))}
.consent__inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.consent p{margin:0;font-size:15px;max-width:70ch;color:rgba(255,255,255,.82)}
.consent a{color:#5fd0e8}
.consent__actions{display:flex;gap:10px;flex-wrap:wrap}
.consent .btn{padding:12px 18px;font-size:12px}
/* The banner is a dark surface but carries no .on-dark class, so a ghost
   button here fell back to the light-background rule — dark text and a dark
   border on charcoal, i.e. 1.00:1 and invisible until hover. Give it the
   dark-surface treatment explicitly. */
.consent .btn--ghost{background:none;color:#fff;border-color:rgba(255,255,255,.55)}
.consent .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ============================================================
   REVEAL
   ============================================================ */
/* The heading "print pass" — stepped bands, like the head laying ink.
   Scoped to .reveal-on so a heading is never left invisible: the class
   is added by main.js only once the reveal code is definitely running,
   and a watchdog removes it if anything goes wrong. Default is VISIBLE. */
.reveal-on .reveal{clip-path:inset(0 0 100% 0)}
.reveal-on .reveal.is-in{animation:printpass .9s steps(10,end) forwards}
@keyframes printpass{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0 0)}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .apps,.case{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step{border-bottom:1px solid var(--line-dk)}
  .posts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1120px){
  .nav{display:none}
  .navtoggle{display:inline-flex}
  .hero__grid,.substrate,.finance .wrap,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .machines{grid-template-columns:minmax(0,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .apps,.case,.steps,.occupied,.procure,.posts-grid,.two-up{grid-template-columns:minmax(0,1fr)}
  .case > div,.step{border-right:0;border-bottom:1px solid var(--line);padding-bottom:24px}
  .hero__stats{grid-template-columns:1fr;max-width:none}
  .hero__stats div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:16px}
  .vbtn{right:10px;bottom:10px;padding:10px 13px}
  .foot__grid{grid-template-columns:1fr}
}
/* Header sizing on small screens. These have to hold up when the visitor
   has Android/iOS font scaling turned up, which enlarges text without
   changing the viewport — that is what pushed the menu button off screen.
   The brand shrinks, the toggle never does. */
@media (max-width:620px){
  .masthead .wrap{gap:10px}
  .brand{gap:10px}
  .brand__name{font-size:14px}
  .brand__mark{height:38px}
  .navtoggle{padding:10px 12px;font-size:11px;gap:8px}
}

@media (max-width:430px){
  .brand__name{font-size:12.5px;letter-spacing:0}
  .brand__mark{height:34px}
  /* the label is redundant next to the bars at this width */
  .navtoggle__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .navtoggle{padding:11px;gap:0}
}

@media (max-width:360px){
  .brand__name{font-size:11.5px}
  .brand__mark{height:30px}
}
@media (max-height:450px){
  .masthead{position:static}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal-on .reveal,
  .reveal-on .reveal.is-in{clip-path:inset(0 0 0 0);animation:none}
}

/* ============================================================
   FINANCING — application portal + partner mark
   ============================================================ */
.apply{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,64px);align-items:center}
.apply__note{font-size:14px;line-height:1.55;color:var(--ink-3);max-width:62ch;margin:22px 0 0}
.apply__note a{color:var(--teal-deep)}
.apply__brand{margin:0;background:var(--white);border:1px solid var(--line);padding:clamp(24px,3vw,38px);text-align:center}
.apply__brand img{width:100%;max-width:320px;height:auto;margin:0 auto}
.apply__brand figcaption{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.6}

/* generic fine print, used on the ink page too */
.finenote{font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:80ch;margin:14px 0 0}
.finenote a{color:var(--teal-deep)}

@media (max-width:820px){
  .apply{grid-template-columns:minmax(0,1fr)}
}

.contactcard{
  display:flex;gap:clamp(18px,3vw,44px);align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--teal);padding:clamp(22px,2.4vw,34px);
}
.contactcard h2{margin:0 0 6px}
.contactcard__role{margin:0;color:var(--ink-3);font-size:15.5px}
.contactcard__links{display:flex;gap:clamp(16px,2vw,32px);flex-wrap:wrap}
.contactcard__links a{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em;text-decoration:none;color:var(--teal-deep)}
.contactcard__links a:hover{text-decoration:underline}

/* ============================================================
   ABOUT — vertical video feature + work grid
   ============================================================ */
.vfeature{margin:0}
.vfeature__stage{position:relative;background:var(--ink);border:1px solid var(--line);overflow:hidden;max-width:420px;margin-inline:auto}
.vfeature__stage video,.vfeature__stage .vstage__poster{width:100%;height:auto;display:block}
.vfeature__stage.is-static video{display:none}
.vfeature__stage .vstage__poster{position:static;display:none}
.vfeature__stage.is-static .vstage__poster{display:block}
.vfeature figcaption{margin-top:14px;font-size:14.5px;color:var(--ink-3);max-width:420px;margin-inline:auto;text-align:center}

.workgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.workgrid__wide{grid-column:1 / -1}
.workgrid figure{margin:0}
.workgrid img{width:100%;height:auto;border:1px solid var(--line);background:var(--white)}
.workgrid figcaption{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3);line-height:1.5}

@media (max-width:760px){
  .workgrid{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   FAQ — groups, jump nav, tick lists
   ============================================================ */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.jump a{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;padding:12px 17px;border:1px solid var(--line);background:var(--white);transition:.18s;
}
.jump a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.faqgroup{border-top:1px solid var(--line)}
.faqgroup:nth-of-type(even){background:var(--panel)}
.faqgroup .faq{margin-top:26px}

.faq__sub{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal-deep);margin:24px 0 10px;
}
.faq__body p{margin:0 0 14px}
.faq__body p:last-child{margin-bottom:0}
.faq__body a{color:var(--teal-deep)}

.tick-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.tick-list li{display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.tick-list li::before{
  content:"";width:8px;height:8px;background:var(--teal);margin-top:8px;flex:none;
}
.tick-list--cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px clamp(16px,2vw,32px)}

@media (max-width:620px){
  .tick-list--cols{grid-template-columns:minmax(0,1fr)}
  .mats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .matnote{min-height:0}
}

/* ============================================================
   PRODUCT PAGE — GT3200
   ============================================================ */
.prodhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
.prodhero__fig{margin:0}
.prodhero__fig img{width:100%;height:auto;background:#fff}
.ph-note{
  aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:24px;
  border:2px dashed rgba(255,255,255,.32);color:rgba(255,255,255,.6);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;
}

.case--six{grid-template-columns:repeat(3,minmax(0,1fr))}
.case--six > div{border-bottom:1px solid var(--line);padding-bottom:24px}
.case--six > div:nth-child(3n){border-right:0}
.case--six > div:nth-last-child(-n+3){border-bottom:0}

.vfeature__stage--wide{max-width:none}
.vfeature__stage--wide + figcaption,.vfeature__stage--wide ~ figcaption{max-width:none}

.figure{margin:0}
.figure img{width:100%;height:auto;border:1px solid var(--line)}
.figure figcaption{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ink-3);line-height:1.5}

.compgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,26px)}
.compgrid figure{margin:0}
.compgrid img{width:100%;height:auto;border:1px solid var(--line);background:var(--white)}
.compgrid figcaption{margin-top:11px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.compgrid figcaption b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}

.specs-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.specgroup h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:18px;
  margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--ink);
}
.spectable{margin:0;display:grid}
.spectable > div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.spectable dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0}
.spectable dd{margin:0;font-size:15px;line-height:1.45}

@media (max-width:1180px){
  .compgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .case--six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case--six > div:nth-child(3n){border-right:1px solid var(--line)}
  .case--six > div:nth-child(2n){border-right:0}
}
@media (max-width:1000px){
  .prodhero{grid-template-columns:minmax(0,1fr)}
  .specs-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .compgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case--six{grid-template-columns:minmax(0,1fr)}
  .case--six > div{border-right:0}
  .spectable > div{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* five-step process row (NWP-FL1 floor printer) */
.steps--five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){.steps--five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.steps--five{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   SALESFORCE WEB-TO-LEAD FORM (contact page)
   Uses the site's own .field / .two-up styles — the vendor CSS
   that shipped with the snippet was dropped entirely.
   ============================================================ */
.sf-form{margin:0}
.field label.is-required::after{content:" *";color:var(--red);font-weight:700}
.field__opt{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:12.5px;color:rgba(255,255,255,.58)}
.sf-form__footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:10px}
.sf-form__consent{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.6);max-width:38ch}
@media (max-width:520px){
  .sf-form__footer{flex-direction:column;align-items:stretch}
  .sf-form__footer .btn{justify-content:center}
}

/* BBB accreditation seal (footer) */
.bbb-seal{display:inline-block;margin-top:20px;padding:0;line-height:0}
.bbb-seal img{border:0;height:auto;max-width:100%}
.bbb-seal:focus-visible{outline:3px solid var(--teal);outline-offset:4px}

/* ============================================================
   APPLICATION PHOTOS (applications-*.html)
   ============================================================ */
.appshot{margin:0}
.appshot img{width:100%;height:auto;border:1px solid var(--line);background:var(--panel)}
.appshot figcaption{
  margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink-3);line-height:1.5;
}

.signoff{margin-top:clamp(26px,3vw,38px);font-family:var(--mono);font-size:13px;letter-spacing:.06em;line-height:1.9;color:var(--ink-3)}
.signoff b{font-family:var(--display);font-size:15px;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}

/* ============================================================
   BLOG
   ============================================================ */
.postmeta{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:18px}

/* The base .prose caps paragraphs and lists at 70ch, which is right for a
   short block inside a wider page but too tight for a full article. Post
   bodies get a wider measure and slightly larger type, and the child caps
   are lifted so nothing narrows them again. */
.prose--post{max-width:none;width:min(100%,86ch);font-size:17.5px;line-height:1.72}
.prose--post p,.prose--post ul,.prose--post ol{max-width:none}
.prose--post h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.4vw,27px);line-height:1.2;margin:clamp(34px,4vw,52px) 0 14px}
.prose--post h3{font-family:var(--display);font-weight:700;font-size:clamp(17px,2vw,20px);margin:clamp(26px,3vw,36px) 0 10px}
.prose--post p{margin:0 0 22px}
.prose--post ul,.prose--post ol{margin:0 0 20px;padding-left:22px}
.prose--post li{margin-bottom:11px}
.prose--post img{width:100%;height:auto;margin:clamp(26px,3vw,40px) 0;border:1px solid var(--line);background:var(--panel)}
.prose--post a{color:var(--teal-deep)}
.prose--post blockquote{margin:clamp(26px,3vw,38px) 0;padding-left:22px;border-left:3px solid var(--teal);font-size:18px;color:var(--ink-2)}
.prose--post hr{border:0;border-top:1px solid var(--line);margin:clamp(30px,4vw,46px) 0}

.posts-grid--index{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,34px)}
.post__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:16px;background:var(--panel)}
.post__more{display:block;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep)}

@media (max-width:900px){
  .posts-grid--index{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .posts-grid--index{grid-template-columns:minmax(0,1fr)}
}

/* Notice on a post that describes superseded equipment */
.dated{border:1px solid var(--line);border-left:4px solid var(--amber);background:var(--panel);padding:clamp(20px,2.4vw,28px);display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dated p{margin:0;max-width:62ch;font-size:15.5px;line-height:1.6}
.dated .btn{flex:none}

/* ============================================================
   PAID LANDING PAGES (/lp/*)
   Used only by layouts/lp.njk and lp.html. These pages carry
   stripped chrome — no nav, no footer sitemap — so the header and
   footer here are variants of .masthead and .foot rather than new
   components, which keeps the type and box metrics identical.
   ============================================================ */
.lp-head .wrap{justify-content:space-between}
.lp-head .brand{cursor:default}
.lp-head__tel{
  font-family:var(--mono);font-size:clamp(13px,1.3vw,16px);font-weight:600;letter-spacing:.06em;
  text-decoration:none;color:var(--ink);white-space:nowrap;flex:none;padding:8px 0;
}
.lp-head__tel:hover{color:var(--teal-deep)}
.lp-foot{padding:0}

/* Above the fold. Padding is tighter than .section so the form clears
   the viewport at 1440px without scrolling. */
.lp-hero{padding:clamp(34px,3.4vw,54px) 0 clamp(40px,4vw,64px)}
.lp-hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  /* Headline, proof bullets, figure. The form spans all three; the trailing
     1fr absorbs any slack so the left-hand blocks stay stacked at the top
     instead of spreading to fill the form's height. */
  grid-template-rows:auto auto 1fr;
  /* Tighter between the three stacked left-hand blocks than between the
     columns, or the headline, bullets and image drift apart. */
  gap:clamp(20px,2.2vw,30px) clamp(28px,3.4vw,60px);align-items:start;
}
.lp-hero__intro{grid-column:1;grid-row:1}
.lp-form{grid-column:2;grid-row:1 / -1;border:1px solid var(--line-dk);background:rgba(255,255,255,.045);padding:clamp(22px,2.4vw,34px)}
.lp-form__intro{margin:0 0 24px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.72);max-width:52ch}
.lp-proof{grid-column:1;grid-row:2;align-self:start;list-style:none;margin:0;padding:0;display:grid;gap:11px}
.lp-proof li{display:flex;gap:12px;align-items:flex-start;line-height:1.5;color:rgba(255,255,255,.88)}
.lp-proof li::before{content:"";width:8px;height:8px;background:var(--teal);margin-top:8px;flex:none}

.lp-shot{grid-column:1;grid-row:3;align-self:start;margin:0}
/* The crop ratio lives on the box, as padding-top, not on the <img> as an
   aspect-ratio. Percentage padding resolves against the box width in every
   browser back to IE, with no feature to fall back from — so the frame is
   always the right shape. The image then fills that frame absolutely and is
   cropped by object-fit rather than being scaled into it, which means a bad
   outcome here is a badly chosen crop, never a stretched photo. */
.lp-shot__box{position:relative;width:100%;padding-top:50%;overflow:hidden;border:1px solid var(--line-dk);background:#0d0f12}
.lp-shot__box img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;border:0;max-width:none}
.lp-shot figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:1.5;color:rgba(255,255,255,.6)}

.lp-body{max-width:78ch}
.lp-body--wide{max-width:1100px}

.lp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.lp-card{border-top:2px solid var(--teal);padding-top:16px}
.lp-card h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;line-height:1.15;margin:0 0 10px}
.lp-card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-3)}

.lp-specs{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(16px,2vw,30px)}
.lp-specs div{border-top:1px solid var(--line);padding-top:9px}
.lp-specs dt{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.lp-specs dd{margin:3px 0 0;font-size:15.5px;line-height:1.45}

.lp-specs--three{grid-template-columns:repeat(3,minmax(0,1fr))}

.lp-proc{max-width:52ch;font-size:16.5px}

.lp-qa{display:grid;gap:clamp(22px,2.4vw,32px);max-width:78ch}
.lp-qa__item h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:18px;line-height:1.2;margin:0 0 10px}
.lp-qa__item p{margin:0 0 10px;color:var(--ink-3);line-height:1.6}
.lp-qa__item ul,.lp-qa__item ol{margin:0 0 10px;padding-left:1.2em;color:var(--ink-3)}
.lp-qa__item li{margin-bottom:.4em;line-height:1.55}
.lp-qa__item .tick-list{color:var(--ink-3)}

.lp-close{display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.lp-close__actions{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:1000px){
  .lp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-specs--three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* Single column: headline, then the form, then the proof bullets.
     DOM order already matches, so the explicit placements come off. */
  .lp-hero__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:0}
  .lp-hero__intro,.lp-form,.lp-proof,.lp-shot{grid-column:auto;grid-row:auto}
  .lp-shot{margin-top:clamp(24px,3vw,32px)}
  .lp-shot__box{padding-top:66.667%}
  .lp-form{margin-top:clamp(22px,3vw,30px)}
  .lp-proof{margin-top:clamp(24px,3vw,32px)}
}
@media (max-width:620px){
  .lp-cards{grid-template-columns:minmax(0,1fr)}
  .lp-specs,.lp-specs--three{grid-template-columns:minmax(0,1fr)}
  .lp-head .brand__name{display:none}
}

/* ============================================================
   YEAR-END FINANCING PROMOTION (/financing)
   Time-limited. Remove with the markup in financing.html on
   2026-12-31 — see the comment there.
   ============================================================ */
.promo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr);gap:clamp(30px,4vw,64px);align-items:start}
.promo__body{min-width:0}

/* Black bars with teal keywords, echoing the printed piece. */
.promo__bars{list-style:none;margin:0 0 clamp(26px,3vw,34px);padding:0;display:grid;gap:10px}
.promo__bars li{
  background:var(--ink);color:#fff;padding:13px 18px;line-height:1.35;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(15px,1.5vw,19px);letter-spacing:.01em;
}
.promo__bars b{color:#5fd0e8;font-weight:800}

.promo__calc{border:1px solid var(--line);background:var(--white);padding:clamp(20px,2.4vw,28px)}
.promo__calc-lead{margin:0 0 16px;font-size:16px;line-height:1.55;color:var(--ink-3)}
.promo__sum{margin:0;display:grid;gap:8px}
.promo__sum div{display:flex;justify-content:space-between;gap:20px;align-items:baseline;border-top:1px solid var(--line);padding-top:8px}
.promo__sum dt{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.promo__sum dd{margin:0;font-family:var(--display);font-weight:700;font-size:19px}
.promo__sum-total dt{color:var(--teal-deep)}
.promo__sum-total dd{font-weight:800;font-size:clamp(24px,2.4vw,32px);color:var(--teal-deep)}
/* Moved out of the tax panel: the note governs the finance terms too. */
.promo__note{margin:clamp(20px,2.4vw,28px) 0 0;border-top:1px solid var(--line);padding-top:16px;max-width:78ch}
.promo__note p{margin:0 0 8px;font-size:13px;line-height:1.6;color:var(--ink-3)}
.promo__note p:last-child{margin-bottom:0}

.promo__code{
  margin:clamp(22px,2.6vw,30px) 0 clamp(18px,2vw,24px);
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.promo__code b{color:var(--ink);letter-spacing:.18em}
.promo__actions{display:flex;gap:12px;flex-wrap:wrap}
.promo__contact{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--ink-3);max-width:62ch}
.promo__contact a{color:var(--teal-deep)}

.promo__fig{margin:0}
.promo__fig img{width:100%;height:auto;border:1px solid var(--line);background:var(--white)}
.promo__fig figcaption{
  margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink-3);line-height:1.5;
}

@media (max-width:900px){
  /* The poster goes under the copy rather than beside it, and stops trying
     to be a full-width 4:5 slab on a phone. */
  .promo{grid-template-columns:minmax(0,1fr)}
  .promo__fig{max-width:420px}
}