/* ==========================================================================
   KUHLWERX
   Built against docs/DESIGN-RESEARCH.md. Read it before changing anything here.

   The three corrections that drive this file:
     TYPE SCALE    caps at 61px. The direct competitor's hero h1 is 33 to 49px.
                   Body copy dominates; headings punctuate.
     LIGHT         the sector is light, not dark. One dark theme, used sparingly.
     RHYTHM        comes from swapping a named theme on a section wrapper, not
                   from varying layout. Every colour inside re-resolves.

   Motion is one idea: a bottom-up clip-path unmask. Used everywhere, nothing else.
   ========================================================================== */

@font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Variable.woff2") format("woff2-variations");font-weight:300 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  /* ink and ground */
  --ink:#10191F; --ink-2:#46545E; --ink-3:#515D67;
  --paper:#FFFFFF; --muted:#F1F3F4; --line:#DFE3E5;
  --deep:#16232E; --deep-2:#1E3040;
  --on-deep:#F4F7F8; --on-deep-2:#9FB3C0; --line-deep:rgba(159,179,192,.22);
  --blue:#2FA8D8; --blue-deep:#15647F; --blue-lift:#6FCBEC;
  --stage:#DEDDE0;

  /* live theme slots. A section theme rewrites these. */
  --bg:var(--paper); --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3);
  --rule:var(--line); --accent:var(--blue-deep); --accent-on:#FFFFFF;

  /* fluid type. Ceiling is 61px, deliberately. */
  --t-xs:clamp(.6875rem,.67rem + .08vw,.75rem);
  --t-sm:clamp(.8125rem,.79rem + .1vw,.875rem);
  --t-base:clamp(1rem,.95rem + .22vw,1.25rem);
  --t-lg:clamp(1.125rem,1.05rem + .31vw,1.4375rem);
  --t-xl:clamp(1.3125rem,1.2rem + .47vw,1.6875rem);
  --t-2xl:clamp(1.5625rem,1.4rem + .68vw,2.0625rem);
  --t-3xl:clamp(1.875rem,1.63rem + 1.04vw,2.5625rem);
  --t-4xl:clamp(2.25rem,1.9rem + 1.46vw,3.0625rem);
  --t-5xl:clamp(2.625rem,2.14rem + 2.06vw,3.8125rem);

  /* fluid space. One pair shrinks as the viewport grows, on purpose. */
  --s-2xs:clamp(.5rem,.47rem + .13vw,.625rem);
  --s-xs:clamp(.75rem,.7rem + .21vw,.9375rem);
  --s-sm:clamp(1rem,.93rem + .31vw,1.25rem);
  --s-md:clamp(1.5rem,1.36rem + .6vw,2rem);
  --s-lg:clamp(2.25rem,1.98rem + 1.15vw,3.25rem);
  --s-xl:clamp(3.5rem,2.9rem + 2.55vw,5.75rem);
  --s-2xl:clamp(5rem,3.9rem + 4.7vw,9rem);
  --s-pull:clamp(.625rem,4.2rem + -2.98vw,3.5rem);

  --r-control:2px; --r-media:4px; --r-panel:6px;

  --f-sans:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1360px;
  --gut:clamp(1.25rem,4vw,4rem);

  --e-expo:cubic-bezier(.16,1,.3,1);
  --e-quart:cubic-bezier(.25,1,.5,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --d-fast:150ms; --d-mid:400ms; --d-slow:900ms;

  --mask-out:polygon(0 100%,100% 100%,100% 100%,0% 100%);
  --mask-in:polygon(0 0,100% 0,100% 100%,0% 100%);
}

/* ---------- section themes. The rhythm lives here. ---------- */
.t-muted{--bg:var(--muted)}
.t-deep{--bg:var(--deep);--fg:var(--on-deep);--fg-2:var(--on-deep-2);
  --fg-3:var(--on-deep-2);--rule:var(--line-deep);--accent:var(--blue-lift);
  --accent-on:var(--deep)}
.t-media{--bg:transparent;--fg:#fff;--fg-2:rgba(255,255,255,.82);
  --fg-3:rgba(255,255,255,.66);--rule:rgba(255,255,255,.22);
  --accent:var(--blue-lift);--accent-on:var(--deep)}
[class*="t-"]{background:var(--bg);color:var(--fg)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);
  font-size:var(--t-base);font-weight:400;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,fieldset{margin:0;padding:0;border:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* grain. Real grain moves, so it steps. */
.grain{position:fixed;inset:-60%;z-index:120;pointer-events:none;opacity:.032;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grain 900ms steps(8) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}12.5%{transform:translate(-3%,2%)}
  25%{transform:translate(2%,-4%)}37.5%{transform:translate(-4%,-2%)}
  50%{transform:translate(3%,3%)}62.5%{transform:translate(-2%,4%)}
  75%{transform:translate(4%,-3%)}87.5%{transform:translate(-3%,-4%)}}

.skip{position:absolute;left:var(--gut);top:0;z-index:200;background:var(--deep);
  color:#fff;padding:.75rem 1.25rem;font-family:var(--f-mono);font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.1em;transform:translateY(-160%);
  transition:transform var(--d-mid) var(--e-expo)}
.skip:focus{transform:translateY(0)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the one motion idea: bottom-up unmask ---------- */
.js .um{clip-path:var(--mask-out);opacity:0;
  transition:clip-path var(--d-slow) var(--e-expo),opacity var(--d-slow) var(--e-expo)}
.js .um.on{clip-path:var(--mask-in);opacity:1}
.js .um-1{transition-delay:80ms}.js .um-2{transition-delay:160ms}
.js .um-3{transition-delay:240ms}.js .um-4{transition-delay:320ms}
.js .rise{opacity:0;transform:translateY(18px);
  transition:opacity var(--d-slow) var(--e-expo),transform var(--d-slow) var(--e-expo)}
.js .rise.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .js .um,.js .rise{opacity:1;clip-path:none;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--s-2xl)}
.sec-s{padding-block:var(--s-xl)}

/* ---------- type ---------- */
.d1{font-size:var(--t-4xl);font-weight:800;line-height:1.02;letter-spacing:-.032em;
  text-transform:uppercase;text-wrap:balance}
.d0{font-size:var(--t-5xl);font-weight:800;line-height:1;letter-spacing:-.036em;
  text-transform:uppercase;text-wrap:balance}
.d2{font-size:var(--t-3xl);font-weight:800;line-height:1.06;letter-spacing:-.028em;
  text-transform:uppercase;text-wrap:balance}
.d3{font-size:var(--t-2xl);font-weight:700;line-height:1.12;letter-spacing:-.022em}
.d4{font-size:var(--t-xl);font-weight:700;line-height:1.18;letter-spacing:-.016em}
.lead{font-size:var(--t-lg);line-height:1.5;color:var(--fg-2);max-width:46ch;
  text-wrap:pretty}
.body{color:var(--fg-2);max-width:62ch;text-wrap:pretty}
.body strong{color:var(--fg);font-weight:600}
.dim{color:var(--fg-3)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ---------- links ---------- */
.ln{display:inline;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--d-mid) var(--e-expo)}
.ln:hover{background-size:100% 1px}
.ln:not(:hover){background-position:100% 100%}
.tl{display:inline-flex;align-items:center;gap:.625rem;font-family:var(--f-mono);
  font-size:var(--t-sm);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);text-decoration:none}
.tl svg{width:1em;height:1em;transition:transform var(--d-mid) var(--e-expo)}
.tl:hover svg{transform:translateX(5px)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.625rem;padding:1.0625rem 1.75rem;border:1px solid transparent;
  border-radius:var(--r-control);font-family:var(--f-mono);font-size:var(--t-sm);
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;cursor:pointer;will-change:transform;
  transition:background-color var(--d-mid) var(--e-expo),color var(--d-mid) var(--e-expo),
    border-color var(--d-mid) var(--e-expo)}
.btn>span{display:inline-flex;align-items:center;gap:.625rem;will-change:transform}
.btn svg{width:1em;height:1em}
.btn-a{background:var(--deep);color:#fff;border-color:var(--deep)}
.btn-a:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.t-deep .btn-a,.t-media .btn-a{background:var(--blue);color:var(--deep);border-color:var(--blue)}
.t-deep .btn-a:hover,.t-media .btn-a:hover{background:#fff;border-color:#fff}
.btn-b{background:transparent;color:var(--fg);border-color:var(--rule)}
.btn-b:hover{border-color:var(--fg)}
.btn-w{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:var(--s-xs)}
@media (max-width:479px){.btns{display:grid;grid-template-columns:1fr}
  .btns .btn{width:100%}}

/* ---------- masthead ---------- */
.mh{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background-color var(--d-mid) var(--e-expo),
    border-color var(--d-mid) var(--e-expo),backdrop-filter var(--d-mid) linear;
  border-bottom:1px solid transparent}
.mh[data-stuck="true"]{background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.5);
  border-bottom-color:var(--line)}
/* Over the dark hero the masthead is light, on its own backdrop so legibility
   never depends on what happens to be behind it. This is the one glass element
   on the site, floating over moving content. It flips when it sticks. */
body.over-dark .mh:not([data-stuck="true"]){background:rgba(18,29,38,.55);
  backdrop-filter:blur(10px) saturate(1.4);border-bottom-color:rgba(255,255,255,.1)}
body.over-dark .mh:not([data-stuck="true"]) .wm,
body.over-dark .mh:not([data-stuck="true"]) .wm b{color:#fff}
body.over-dark .mh:not([data-stuck="true"]) .wm i{color:rgba(255,255,255,.62)}
body.over-dark .mh:not([data-stuck="true"]) .mh-n a{color:#fff}
body.over-dark .mh:not([data-stuck="true"]) .mh-c .tel{color:rgba(255,255,255,.86)}
body.over-dark .mh:not([data-stuck="true"]) .bg{border-color:rgba(255,255,255,.3)}
body.over-dark .mh:not([data-stuck="true"]) .bg i{background:#fff}
body.over-dark .mh:not([data-stuck="true"]) .btn-a{background:var(--blue);color:var(--deep);
  border-color:var(--blue)}
.mh-in{display:flex;align-items:center;gap:var(--s-sm);
  height:clamp(64px,4.6vw,80px);max-width:var(--max);margin-inline:auto;
  padding-inline:var(--gut)}
.wm{text-decoration:none;flex:none;line-height:1;display:block}
.wm b{display:block;font-size:clamp(1.125rem,1.35vw,1.375rem);font-weight:800;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.wm i{display:none;font-style:normal;font-family:var(--f-mono);font-size:9px;
  font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
  margin-top:3px}
@media (min-width:560px){.wm i{display:block}}
.mh-n{display:none}
@media (min-width:1060px){
  .mh-n{display:flex;align-items:center;gap:var(--s-md);margin-left:auto}
  .mh-n a{font-size:var(--t-sm);font-weight:500;text-decoration:none;color:var(--ink);
    padding-block:.35rem;background-image:linear-gradient(var(--blue),var(--blue));
    background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size var(--d-mid) var(--e-expo)}
  .mh-n a:hover,.mh-n a[aria-current="page"]{background-size:100% 2px}
}
.mh-c{display:none}
@media (min-width:1060px){
  .mh-c{display:flex;align-items:center;gap:var(--s-sm);flex:none}
  .mh-c .tel{font-family:var(--f-mono);font-size:var(--t-sm);text-decoration:none;
    color:var(--ink-2);white-space:nowrap}
  .mh-c .tel:hover{color:var(--ink)}
  .mh-c .btn{padding:.8125rem 1.25rem}
}
.mh-m{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:none}
@media (min-width:1060px){.mh-m{display:none}}
.mh-m .btn{padding:.75rem 1.0625rem}
.bg{display:inline-flex;flex-direction:column;gap:4px;justify-content:center;
  width:44px;height:44px;align-items:center;background:transparent;border:1px solid var(--line);
  border-radius:var(--r-control);cursor:pointer}
.bg i{display:block;width:17px;height:1.5px;background:var(--ink);
  transition:transform var(--d-mid) var(--e-expo),opacity var(--d-fast) linear}
.bg[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.bg[aria-expanded="true"] i:nth-child(2){opacity:0}
.bg[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.dr{position:fixed;inset:0;z-index:99;background:var(--paper);padding:calc(clamp(64px,4.6vw,80px) + var(--s-md)) var(--gut) var(--s-lg);
  display:flex;flex-direction:column;gap:var(--s-xs);
  clip-path:var(--mask-out);pointer-events:none;
  transition:clip-path var(--d-mid) var(--e-expo)}
.dr[data-open="true"]{clip-path:var(--mask-in);pointer-events:auto}
@media (min-width:1060px){.dr{display:none}}
.dr a.nv{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.025em;
  text-transform:uppercase;text-decoration:none;padding-block:.5rem;
  border-bottom:1px solid var(--line)}
.dr .btn{margin-top:var(--s-sm)}
.dr .tel{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3);
  text-decoration:none}

/* ---------- media ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--r-media);
  background:var(--stage)}
.media img{width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform var(--d-slow) var(--e-expo)}
a:hover>.media img,.hov:hover .media img{transform:scale(1.04)}
.media-ph{position:absolute;inset:0;display:none;flex-direction:column;
  justify-content:flex-end;gap:.3rem;padding:var(--s-sm);background:var(--stage)}
.media-empty .media-ph{display:flex}
.media-ph b{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--blue-deep)}
.media-ph i{font-style:normal;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3)}

/* ---------- hero. Type is moderate; the machine carries the scale.
   The ground is #DEDEE0, the exact backdrop the photos were shot on, so the
   equipment floats with no visible photo edge. Contained, never cropped.
   Mobile order is copy, machine, spec. Desktop puts the machine alongside. ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;background:#DEDEE0;
  padding-top:calc(clamp(64px,4.6vw,80px) + var(--s-md));padding-bottom:var(--s-lg)}
.hero-grid{display:grid;gap:var(--s-md)}
@media (min-width:980px){
  .hero{padding-bottom:var(--s-xl)}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
    grid-template-areas:"copy shot" "meta shot";
    column-gap:var(--s-xl);row-gap:var(--s-lg);align-items:center}
  .hero-copy{grid-area:copy;align-self:end}
  .hero-shot{grid-area:shot}
  .hero-meta{grid-area:meta;align-self:start}
}
.hero h1{max-width:14ch}
.hero .lead{max-width:40ch;margin-top:var(--s-sm)}
.hero .btns{margin-top:var(--s-md)}
.hero-shot{position:relative;will-change:transform}
/* The machine runs the full width of its frame, so any feathered edge eats
   equipment. The photo is shown whole inside a stated panel instead: a frame
   the eye reads as deliberate beats a soft edge that hides the product. */
.hero-shot .media{background:#fff;border-radius:var(--r-media);
  box-shadow:0 1px 0 rgba(22,35,46,.06),0 18px 40px -28px rgba(22,35,46,.35)}
.hero-shot .media img{object-fit:contain}
@media (max-width:979px){
  /* Full width on small screens so the machine has real presence. */
  .hero-shot{margin-inline:calc(var(--gut) * -1)}
}
@media (min-width:980px){
  /* No bleed off the right edge. The machine stays whole on screen. */
  .hero-shot{margin-block:calc(var(--s-md) * -1)}
}
.hero-meta{display:grid;gap:var(--s-xs) var(--s-md);grid-template-columns:repeat(2,1fr)}
@media (min-width:520px){.hero-meta{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.hero-meta{max-width:34rem}}
.hero-meta div{border-top:1px solid var(--rule);padding-top:.5625rem}
.hero-meta dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:.25rem}
.hero-meta dd{font-size:var(--t-sm);font-weight:700;letter-spacing:-.01em;
  line-height:1.35;text-wrap:balance}

/* ---------- velocity marquee ---------- */
.mq{overflow:hidden;padding-block:var(--s-sm);border-block:1px solid var(--rule);
  user-select:none}
.mq-t{display:flex;width:max-content;will-change:transform}
.mq-t span{display:inline-flex;align-items:center;gap:var(--s-md);padding-right:var(--s-md);
  font-size:var(--t-xl);font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
  white-space:nowrap;color:var(--fg-2)}
.mq-t b{color:var(--accent);font-weight:700}
.mq-t em{font-style:normal;width:.45em;height:.45em;background:var(--accent);
  border-radius:50%;flex:none;display:inline-block}

/* ---------- duty selector ---------- */
.sel{display:grid;gap:var(--s-lg)}
@media (min-width:1040px){.sel{grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:var(--s-xl);align-items:start}}
.sel-f{display:grid;gap:var(--s-md)}
.sel-q>legend{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:.75rem}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:inline-flex;align-items:center;padding:.6875rem 1rem;
  border:1px solid var(--rule);border-radius:var(--r-control);cursor:pointer;
  font-size:var(--t-sm);font-weight:500;line-height:1.2;
  transition:border-color var(--d-fast) var(--e-quart),
    background-color var(--d-fast) var(--e-quart),color var(--d-fast) var(--e-quart)}
.opt:hover span{border-color:var(--fg-3)}
.opt input:checked+span{background:var(--deep);border-color:var(--deep);color:#fff}
.opt input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.sel-n{display:grid;gap:.5rem;max-width:22rem}
.sel-n label{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3)}
.sel-n .row{display:flex;align-items:baseline;gap:.625rem;
  border-bottom:1px solid var(--rule);padding-bottom:.5rem}
.sel-n input{flex:1;min-width:0;background:transparent;border:0;padding:.375rem 0;
  font-size:var(--t-xl);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.sel-n input::-webkit-outer-spin-button,.sel-n input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.sel-n input[type=number]{-moz-appearance:textfield}
.sel-n .unit{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--fg-3)}
.sel-out{border:1px solid var(--rule);border-radius:var(--r-panel);
  padding:var(--s-md);position:sticky;top:calc(clamp(64px,4.6vw,80px) + var(--s-sm))}
.sel-out h3{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.025em;
  text-transform:uppercase;line-height:1.08;margin-block:.75rem 0}
.sel-out .why{margin-top:.75rem;color:var(--fg-2);font-size:var(--t-sm)}
.sel-out .alt{margin-top:var(--s-sm);padding-top:var(--s-sm);border-top:1px solid var(--rule);
  font-size:var(--t-sm);color:var(--fg-3)}
.sel-out .btn{margin-top:var(--s-md)}
.sel-swap{display:grid}
.sel-swap>*{grid-area:1/1}

/* ---------- pinned showcase ---------- */
.pin{position:relative}
.pin-in{display:grid;gap:var(--s-lg)}
@media (min-width:1040px){
  .pin-in{grid-template-columns:minmax(0,27rem) minmax(0,1fr);gap:var(--s-xl);
    align-items:start}
}
.pin-l{align-self:start}
@media (min-width:1040px){.pin-l{position:sticky;top:22vh}}
.pin-count{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--fg-3);
  margin-top:var(--s-sm);display:flex;align-items:center;gap:.625rem}
.pin-bar{flex:1;height:2px;background:var(--rule);position:relative;max-width:11rem}
.pin-bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);
  transform-origin:left;transform:scaleX(0);display:block}
.pin-r{display:grid;gap:var(--s-lg)}
.pn{display:grid;gap:var(--s-sm)}
.pn a{text-decoration:none;color:inherit;display:block}
.pn .media{aspect-ratio:16/10}
.pn-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.625rem var(--s-sm);
  justify-content:space-between}
.pn-h h3{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.025em;
  text-transform:uppercase;line-height:1.06}
.pn-s{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3)}
.pn-d{color:var(--fg-2);max-width:52ch}
.pn-k{display:flex;flex-wrap:wrap;gap:.4rem}
.kv{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;
  text-transform:uppercase;border:1px solid var(--rule);border-radius:var(--r-control);
  padding:.3125rem .5rem;color:var(--fg-3)}

/* ---------- applications: deliberately uneven ---------- */
.ap-g{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
@media (min-width:680px){.ap-g{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.ap-g{grid-template-columns:repeat(3,1fr)}}
.ap{background:var(--bg);padding:var(--s-md);display:flex;flex-direction:column;
  gap:.75rem;min-height:14rem;text-decoration:none;color:inherit;position:relative;
  transition:background-color var(--d-mid) var(--e-expo)}
.ap:hover{background:var(--muted)}
.t-deep .ap:hover{background:var(--deep-2)}
.ap h3{font-size:var(--t-xl);font-weight:700;letter-spacing:-.02em;margin-top:auto}
.ap p{font-size:var(--t-sm);color:var(--fg-2);line-height:1.5}
.ap .tl{margin-top:.25rem}
@media (min-width:1060px){.ap-wide{grid-column:span 2}}

/* ---------- statement band ---------- */
.st-in{display:grid;gap:var(--s-lg)}
@media (min-width:900px){.st-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--s-xl);align-items:center}}
.st-n{display:grid;gap:var(--s-md)}
@media (min-width:520px){.st-n{grid-template-columns:repeat(2,1fr)}}
.st-n div{border-top:1px solid var(--rule);padding-top:var(--s-xs)}
.st-n dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:.375rem}
.st-n dd{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.03em;line-height:1}
.st-n dd small{display:block;font-size:var(--t-sm);font-weight:400;letter-spacing:0;
  color:var(--fg-2);margin-top:.5rem}

/* ---------- certifications ---------- */
.cf{display:flex;flex-wrap:wrap;gap:.5rem}
.cf b{font-family:var(--f-mono);font-size:var(--t-sm);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--rule);border-radius:var(--r-control);
  padding:.6875rem .9375rem}

/* ---------- page head ---------- */
.ph{padding-top:calc(clamp(64px,4.6vw,80px) + var(--s-lg));padding-bottom:var(--s-lg)}
.ph .bc{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s-sm)}
.ph .bc a{color:var(--accent);text-decoration:none}
.ph .bc a:hover{text-decoration:underline}
.ph .lead{margin-top:var(--s-sm)}
.ph .btns{margin-top:var(--s-md)}

/* ---------- spec table ---------- */
.sp{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-panel);overflow:hidden}
@media (min-width:620px){.sp{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.sp{grid-template-columns:repeat(4,1fr)}}
.sp>div{background:var(--bg);padding:var(--s-sm)}
.sp dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:.5rem}
.sp dd{font-family:var(--f-mono);font-size:var(--t-base);font-weight:500;line-height:1.35}
.tbc{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--accent);
  border-bottom:1px dotted currentColor}

/* ---------- variant rows, overlapping ---------- */
.vr{display:grid;gap:var(--s-md);align-items:center;padding-block:var(--s-lg)}
@media (min-width:980px){
  .vr{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s-xl)}
  .vr:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .vr:nth-of-type(even) .vr-m{order:2}
  .vr+.vr{margin-top:calc(var(--s-pull) * -1)}
}
.vr .media{aspect-ratio:3/2}
.vr h3{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.025em;
  text-transform:uppercase;line-height:1.06;margin-bottom:.75rem}
.vr p{color:var(--fg-2);max-width:44ch;margin-bottom:var(--s-sm)}

/* ---------- form ---------- */
.fm{display:grid;gap:var(--s-lg)}
@media (min-width:1020px){.fm{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s-xl)}}
.fields{display:grid;gap:var(--s-md)}
.pair{display:grid;gap:var(--s-md)}
@media (min-width:600px){.pair{grid-template-columns:repeat(2,1fr)}}
.fd{display:grid;gap:.4375rem}
.fd label{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3)}
.fd .rq{color:var(--accent)}
.fd input,.fd textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--rule);padding:.6875rem 0;font-size:var(--t-lg);
  transition:border-color var(--d-mid) var(--e-expo)}
.fd textarea{min-height:7.5rem;resize:vertical;font-size:var(--t-base);line-height:1.55}
.fd input::placeholder,.fd textarea::placeholder{color:var(--fg-3);opacity:1}
.fd input:hover,.fd textarea:hover{border-bottom-color:var(--fg-3)}
.fd input:focus,.fd textarea:focus{outline:none;border-bottom-color:var(--blue)}
.fd .hint{font-size:var(--t-sm);color:var(--fg-3)}
.fd .er{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:#B3200F;display:none}
.fd[data-bad="true"] input,.fd[data-bad="true"] textarea{border-bottom-color:#B3200F}
.fd[data-bad="true"] .er{display:block}
.aside{border:1px solid var(--rule);border-radius:var(--r-panel);padding:var(--s-md);
  align-self:start}
.aside h2{font-size:var(--t-xl);font-weight:800;letter-spacing:-.025em;
  text-transform:uppercase;margin-bottom:var(--s-sm)}
.aside li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;padding-block:.75rem;
  font-size:var(--t-sm);color:var(--fg-2);border-top:1px solid var(--rule)}
.aside li b{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--accent);
  padding-top:.15rem}
.ok{display:none}
.ok[data-show="true"]{display:block}
.ok h2{font-size:var(--t-3xl);font-weight:800;letter-spacing:-.03em;
  text-transform:uppercase;line-height:1.04;margin-block:.75rem var(--s-sm)}
.ok .recap{margin-top:var(--s-md);border:1px solid var(--rule);border-radius:var(--r-panel);
  padding:var(--s-sm);font-family:var(--f-mono);font-size:var(--t-sm);color:var(--fg-2)}
.ok .recap b{color:var(--fg);font-weight:500}

/* ---------- contact ---------- */
.cc{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-panel);overflow:hidden}
@media (min-width:760px){.cc{grid-template-columns:repeat(3,1fr)}}
.cc>div{background:var(--bg);padding:var(--s-md);display:grid;gap:.5rem;align-content:start}
.cc dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3)}
.cc dd{font-size:var(--t-lg);font-weight:700;letter-spacing:-.018em;word-break:break-word}
.cc a{text-decoration:none}.cc a:hover{color:var(--accent)}

/* ---------- about ---------- */
.ab{display:grid;gap:var(--s-lg)}
@media (min-width:980px){.ab{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-xl)}}
.ab p+p{margin-top:var(--s-sm)}

/* ---------- closing ---------- */
.cl-in{display:grid;gap:var(--s-md);align-items:end}
@media (min-width:900px){.cl-in{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}}

/* ---------- footer ---------- */
.ft{padding-block:var(--s-xl) var(--s-md)}
.ft-g{display:grid;gap:var(--s-lg)}
@media (min-width:720px){.ft-g{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.ft-g{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.ft h2{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s-sm)}
.ft li{padding-block:.3125rem}
.ft li a{font-size:var(--t-sm);color:var(--fg-2);text-decoration:none}
.ft li a:hover{color:var(--fg)}
.ft-b{font-size:var(--t-sm);color:var(--fg-2);max-width:30ch;margin-top:var(--s-sm)}
.ft-base{margin-top:var(--s-lg);padding-top:var(--s-sm);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.5rem var(--s-md);justify-content:space-between;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--fg-3)}