/* Light-only by design — Tim does not want a dark theme, so every colour is
   painted explicitly and there is no prefers-color-scheme block. */
:root{

  /* glass system */
  --g-fill:rgba(255,255,255,.55);
  --g-fill-2:rgba(255,255,255,.38);
  --g-edge:rgba(255,255,255,.85);
  --g-line:rgba(var(--d-rgb),.10);
  --g-blur:saturate(165%) blur(18px);
  --g-shadow:0 14px 40px -14px rgba(var(--d-rgb),.26), 0 2px 6px -2px rgba(var(--d-rgb),.10);
  --g-shadow-lift:0 26px 60px -18px rgba(var(--d-rgb),.34), 0 3px 8px -2px rgba(var(--d-rgb),.12);

  --f-d:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --f-b:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-m:"DM Mono",ui-monospace,Menlo,monospace;

  --gut:clamp(18px,4vw,56px);
  --maxw:1320px;
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y proximity;scroll-padding-top:clamp(70px,9svh,96px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-b);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
/* ambient field the glass has something to refract */
body::before{
  content:"";position:fixed;inset:-10% -10% auto -10%;height:120vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46vw 46vw at 12% 8%, rgba(var(--a-rgb),.20), transparent 62%),
    radial-gradient(40vw 40vw at 88% 14%, rgba(var(--t-rgb),.20), transparent 64%),
    radial-gradient(52vw 46vw at 72% 78%, rgba(var(--a-rgb),.13), transparent 66%),
    radial-gradient(38vw 38vw at 22% 92%, rgba(var(--d-rgb),.16), transparent 62%);
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--f-d);font-weight:800;text-transform:uppercase;line-height:.85;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--rust);outline-offset:4px;border-radius:6px}
.mono{font-family:var(--f-m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

.glass{
  background:var(--g-fill);
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);
  box-shadow:var(--g-shadow);
  border-radius:var(--r);
}









:root{  /* cyan palette, baked in */
  --a:#1F3A6E;
  --a-1:#284A8D;
  --a-2:#172C53;
  --a-1h:#2A4F95;
  --a-midh:#1C3462;
  --a-2h:#142648;
  --a-ink:#112242;
  --a-bright:#305BAC;
  --a-pale:#B0BBD1;
  --a-pale-2:#9AACCD;
  --a-rgb:31,58,110;
  --a-sh-rgb:0,0,0;
  --a-edge-rgb:5,10,18;
  --a-deep-rgb:0,0,0;
  --a-deeper-rgb:0,0,0;
  --a-deepest-rgb:0,0,0;
  --a-pale-ink-rgb:13,27,54;
  --a-glow-rgb:0,0,0;
  --a-fg:#B3B4B5;
  --a-fg-rgb:179,180,181;
  --d:#161C28;
  --d-1:#242E41;
  --d-2:#0A0C12;
  --d-1h:#283348;
  --d-midh:#11151E;
  --d-2h:#050609;
  --d-ink:#010203;
  --d-bright:#32405B;
  --d-pale:#999999;
  --d-pale-2:#848994;
  --d-rgb:22,28,40;
  --d-sh-rgb:0,0,0;
  --d-edge-rgb:0,0,0;
  --d-deep-rgb:0,0,0;
  --d-deeper-rgb:0,0,0;
  --d-deepest-rgb:0,0,0;
  --d-pale-ink-rgb:0,0,0;
  --d-glow-rgb:0,0,0;
  --d-fg:#8D8D8D;
  --d-fg-rgb:141,141,141;
  --t:#0E7C9B;
  --t-1:#1199BF;
  --t-2:#0B637B;
  --t-1h:#12A1C9;
  --t-midh:#0D718D;
  --t-2h:#0A586F;
  --t-ink:#075368;
  --t-bright:#15B6E4;
  --t-pale:#B4DDE8;
  --t-pale-2:#9CD7E7;
  --t-rgb:14,124,155;
  --t-sh-rgb:1,8,10;
  --t-edge-rgb:4,38,47;
  --t-deep-rgb:0,0,0;
  --t-deeper-rgb:0,0,0;
  --t-deepest-rgb:0,0,0;
  --t-pale-ink-rgb:5,71,90;
  --t-glow-rgb:3,11,13;
  --t-fg:#B1CCD3;
  --t-fg-rgb:177,204,211;
  --ink:#141822;
  --ink-2:#3F4B67;
  --ink-3:#6C7BA1;
  --n-1:#1E2434;
  --n-2:#0D1017;
  --paper:#EBEFF4;
  --on-a:#FFFFFF;
  --on-a-rgb:255,255,255;
  --on-t:#FFFFFF;
  --on-d:#FFFFFF;
  --chip-bg:linear-gradient(180deg,#fff 0%,#B0BBD1 55%,#9AACCD 100%);
  --chip-fg:#112242;
  --chip-edge:rgba(255,255,255,.85);
  --chip-bg-h:linear-gradient(180deg,#1E2434 0%,#141822 55%,#0D1017 100%);
  --chip-fg-h:#fff;
  --chip-edge-h:rgba(0,0,0,.4);
  --art-hue:-157deg;
  --rust:var(--a);
  --rust-ink:var(--a-ink);
  --navy:var(--d);
  --match:var(--t);
}
html[data-glass="subtle"]{
  --g-fill:rgba(255,255,255,.42);--g-fill-2:rgba(255,255,255,.26);
  --g-edge:rgba(255,255,255,.70);--g-blur:saturate(130%) blur(11px);
}
html[data-glass="strong"]{
  --g-fill:rgba(255,255,255,.66);--g-fill-2:rgba(255,255,255,.50);
  --g-edge:rgba(255,255,255,.95);--g-blur:saturate(200%) blur(26px);
}

/* ---------------- header ---------------- */
.top{position:sticky;top:0;z-index:40;padding:10px var(--gut) 0}
.topbar{
  display:flex;align-items:center;gap:clamp(18px,2.6vw,44px);
  padding:10px clamp(16px,2vw,26px);border-radius:calc(var(--r) + 4px);
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow);
}
.mark{display:block;flex:none}
.mark img{height:clamp(30px,2.7vw,40px);width:auto}
.topnav{flex:1;display:flex;justify-content:space-evenly;align-items:center;gap:10px;flex-wrap:wrap}
.topnav a{font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:.01em;padding:6px 2px;white-space:nowrap}
.topnav a:hover{color:var(--rust-ink)}
.topacts{flex:none;display:flex;align-items:center;gap:9px}
.topcta{
  font-family:var(--f-b);font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:11px 19px;border-radius:999px;white-space:nowrap;color:var(--on-a);
  display:inline-flex;align-items:center;gap:8px;position:relative;isolation:isolate;
  background:linear-gradient(180deg,var(--a-1) 0%,var(--rust) 48%,var(--a-2) 100%);
  border:1px solid rgba(var(--a-edge-rgb),.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(var(--a-sh-rgb),.4),
    0 1px 2px rgba(var(--d-rgb),.16),
    0 8px 18px -9px rgba(var(--a-rgb),.68);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease;
}
.topcta::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 52%)}
.topcta:hover{transform:translateY(-2px);
  background:linear-gradient(180deg,var(--a-1h) 0%,var(--a-midh) 48%,var(--a-2h) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(var(--a-sh-rgb),.44),
    0 2px 4px rgba(var(--d-rgb),.18),
    0 14px 26px -10px rgba(var(--a-rgb),.76)}
.topcta:active{transform:translateY(1px) scale(.995);
  box-shadow:inset 0 2px 5px rgba(var(--a-sh-rgb),.42),0 3px 10px -7px rgba(var(--a-rgb),.6)}

.topmatch{
  font-family:var(--f-b);font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:11px 18px;border-radius:999px;white-space:nowrap;color:var(--on-t);
  display:inline-flex;align-items:center;gap:8px;position:relative;isolation:isolate;
  background:linear-gradient(180deg,var(--t-1) 0%,var(--match) 48%,var(--t-2) 100%);
  border:1px solid rgba(var(--t-edge-rgb),.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(var(--t-sh-rgb),.42),
    0 1px 2px rgba(var(--d-rgb),.16),
    0 8px 18px -9px rgba(var(--t-rgb),.62);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease;
}
.topmatch::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 52%)}
.topmatch:hover{transform:translateY(-2px);
  background:linear-gradient(180deg,var(--t-1h) 0%,var(--t-midh) 48%,var(--t-2h) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(var(--t-sh-rgb),.46),
    0 2px 4px rgba(var(--d-rgb),.18),
    0 14px 26px -10px rgba(var(--t-rgb),.72)}
.topmatch:active{transform:translateY(1px) scale(.995);
  box-shadow:inset 0 2px 5px rgba(var(--t-sh-rgb),.44),0 3px 10px -7px rgba(var(--t-rgb),.58)}
.topmatch .xh{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.topmatch:hover .xh{transform:rotate(90deg)}

/* ---------------- hero ---------------- */
/* ---- the opening fold ----
   Everything from the header down to "Your brand. Our chemistry." is
   budgeted against the viewport height, so that heading is always the
   last thing on the first screen. --mw caps the matcher column by
   height; the art keeps its aspect ratio so the overlay bar stays put. */
:root{--mw:min(44vw,43svh)}
.hero{padding-block:clamp(10px,2.1svh,40px) clamp(8px,1.6svh,26px);scroll-snap-align:start;
  position:relative;isolation:isolate}
/* Hero backdrop. Full-bleed past the wrap, multiply-blended so its near-white
   ground disappears into the paper and only the droplets and strands darken,
   and hue-rotated with everything else so the strands follow the palette.
   Masked away at the bottom so it dissolves before the ticker. */
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:0;left:50%;translate:-50% 0;width:100vw;height:100%;
  background:url(/assets/img-917b3c8a4a.webp) center top/cover no-repeat;
  /* not hue-rotated: unlike the line-art, this backdrop's blue is the
     subject, not incidental tinting. It stays as shot; once a palette is
     settled the asset gets re-rendered to match. */
  mix-blend-mode:multiply;opacity:.92;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%);
}
@media (max-width:860px){.hero::before{opacity:.5}}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--mw));gap:clamp(20px,3.4vw,54px);align-items:center;justify-content:space-between}
.kick{display:flex;gap:13px;align-items:center;margin-bottom:clamp(9px,1.7svh,18px)}
.kick i{display:block;height:2px;width:46px;background:var(--rust);flex:none}
h1{font-size:clamp(38px,min(7.6vw,11.2svh),112px)}
h1 .k{color:var(--rust)}
.lede{margin-top:clamp(11px,2svh,22px);padding-top:clamp(10px,1.8svh,20px);border-top:1px solid var(--g-line);color:var(--ink-2);font-size:clamp(14px,min(1.3vw,1.85svh),17px);max-width:48ch}
.acts{display:flex;gap:11px;margin-top:clamp(12px,2svh,22px);flex-wrap:wrap}
.btn{
  font-family:var(--f-b);font-size:13.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:14px 26px;display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;position:relative;isolation:isolate;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
/* the sheen: a light that sits on the top curve of every pill */
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 52%);
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn svg{flex:none}

/* filled — rust, lit from above, seated on its own coloured shadow */
.btn-f{
  color:var(--on-a);
  background:linear-gradient(180deg,var(--a-1) 0%,var(--rust) 48%,var(--a-2) 100%);
  border-color:rgba(var(--a-edge-rgb),.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(var(--a-sh-rgb),.4),
    0 1px 2px rgba(var(--d-rgb),.18),
    0 10px 22px -10px rgba(var(--a-rgb),.70),
    0 22px 44px -24px rgba(var(--a-rgb),.58);
}
.btn-f:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,var(--a-1h) 0%,var(--a-midh) 48%,var(--a-2h) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(var(--a-sh-rgb),.44),
    0 2px 4px rgba(var(--d-rgb),.20),
    0 16px 30px -12px rgba(var(--a-rgb),.78),
    0 30px 58px -26px rgba(var(--a-rgb),.62);
}
.btn-f:active{
  box-shadow:
    inset 0 2px 5px rgba(var(--a-sh-rgb),.42),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 12px -8px rgba(var(--a-rgb),.60);
}

/* outline — glass, a real pane with an edge and a cast shadow */
.btn-o{
  color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.34));
  border-color:var(--g-edge);
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(var(--d-rgb),.06),
    0 1px 2px rgba(var(--d-rgb),.10),
    0 10px 22px -12px rgba(var(--d-rgb),.34);
}
.btn-o:hover{
  transform:translateY(-2px);color:var(--rust-ink);border-color:rgba(var(--a-rgb),.55);
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.46));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 4px rgba(var(--d-rgb),.10),
    0 16px 32px -14px rgba(var(--d-rgb),.40);
}
.btn-o:active{
  box-shadow:inset 0 2px 6px rgba(var(--d-rgb),.16),0 2px 8px -6px rgba(var(--d-rgb),.30);
}

/* matcher — the one blue object on the page, so it reads as a tool not a link */
.btn-m{
  color:var(--on-t);
  background:linear-gradient(180deg,var(--t-1) 0%,var(--match) 48%,var(--t-2) 100%);
  border-color:rgba(var(--t-edge-rgb),.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(var(--t-sh-rgb),.42),
    0 1px 2px rgba(var(--d-rgb),.18),
    0 10px 22px -10px rgba(var(--t-rgb),.66),
    0 22px 44px -24px rgba(var(--t-rgb),.54);
}
.btn-m:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,var(--t-1h) 0%,var(--t-midh) 48%,var(--t-2h) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(var(--t-sh-rgb),.46),
    0 2px 4px rgba(var(--d-rgb),.20),
    0 16px 30px -12px rgba(var(--t-rgb),.74),
    0 30px 58px -26px rgba(var(--t-rgb),.58);
}
.btn-m:active{
  box-shadow:
    inset 0 2px 5px rgba(var(--t-sh-rgb),.44),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 12px -8px rgba(var(--t-rgb),.58);
}
/* the crosshair breathes on hover — signals "this does something" */
.btn-m .xh{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.btn-m:hover .xh{transform:rotate(90deg)}

/* matcher — glass panel the artwork breaks out of */
.match{display:block;position:relative;justify-self:end;width:100%;padding:clamp(10px,1.4svh,16px) clamp(14px,1.8vw,24px) clamp(10px,1.4svh,22px);border-radius:calc(var(--r) + 6px);
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow);
  transition:box-shadow .24s ease,transform .24s ease}
.match:hover{box-shadow:var(--g-shadow-lift);transform:translateY(-3px)}
.tagrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--g-line)}
.tool{font-family:var(--f-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--match);font-weight:500}
.go{font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.match:hover .go{color:var(--match)}
.art{container-type:inline-size;position:relative;margin:-6% -7% -2%}
.art img{width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(var(--d-rgb),.20));transition:transform .26s ease}
.match:hover .art img{transform:translateY(-7px)}
.art .bar{
  position:absolute;left:16.2%;right:21.4%;top:47.6%;height:12.2%;
  display:flex;align-items:center;padding-left:1.5%;
  font-family:var(--f-b);font-weight:500;color:var(--ink-2);
  font-size:2.3cqw;letter-spacing:.01em;white-space:nowrap;overflow:hidden;
}
.cap{margin-top:2px;padding-top:clamp(8px,1.3svh,14px);border-top:1px solid var(--g-line);display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.cap b{font-family:var(--f-d);font-weight:800;font-size:clamp(21px,2.1vw,27px);text-transform:uppercase;line-height:.9}
.cap span{font-size:clamp(12px,min(.95vw,1.55svh),13.5px);color:var(--ink-2);max-width:34ch}

/* ---------------- ticker ---------------- */
.strip{margin:0 var(--gut);border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,rgba(var(--a-rgb),.92),rgba(var(--a-rgb),.78));
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid rgba(255,255,255,.42);box-shadow:var(--g-shadow);color:var(--on-a)}
.strip .run{display:flex;width:max-content;animation:slide 38s linear infinite}
.strip span{font-family:var(--f-d);font-weight:700;text-transform:uppercase;font-size:clamp(14px,2svh,20px);letter-spacing:.05em;padding:clamp(5px,.9svh,9px) clamp(15px,2.1svh,22px);white-space:nowrap;display:flex;align-items:center;gap:22px}
.strip span::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(var(--on-a-rgb),.85);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip .run{animation:none}*{transition:none!important}}

/* ---------------- sections ---------------- */
section{padding-block:clamp(46px,6vw,88px)}
#what{padding-top:clamp(10px,2.2svh,44px);scroll-snap-align:start}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:clamp(24px,3.4vw,44px)}
#what .shead{margin-bottom:clamp(14px,2.4svh,44px)}
.shead h2{font-size:clamp(32px,5.2vw,70px)}
#what .shead h2{font-size:clamp(30px,min(5vw,7svh),68px)}
/* three lines now, so it runs smaller to keep the sub-paragraph alongside it */
#products .shead h2{font-size:clamp(27px,4.3vw,58px)}
.shead p{color:var(--ink-2);max-width:40ch;font-size:15.5px}

.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.cap-b{padding:clamp(20px,2vw,26px);border-radius:var(--r);
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow);
  transition:transform .2s ease,box-shadow .2s ease}
.cap-b:hover{transform:translateY(-4px);box-shadow:var(--g-shadow-lift)}
.caphead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.cap-b .n{font-family:var(--f-d);font-weight:800;font-size:46px;line-height:.8;color:var(--rust);display:block}
/* fixed square box with contain-fit: the four icons have different aspect
   ratios, so matching their heights would make the wide ones visually
   heavier. A shared footprint keeps the row reading as a set. */
.capic{width:clamp(54px,4.6vw,72px);height:clamp(54px,4.6vw,72px);object-fit:contain;flex:none;margin-top:-2px;opacity:.9;filter:hue-rotate(var(--art-hue,0deg));transition:transform .22s cubic-bezier(.2,.7,.3,1),opacity .22s ease}
.cap-b:hover .capic{transform:translateY(-3px) scale(1.04);opacity:1}
.cap-b h3{font-size:21px;margin-bottom:8px}
.cap-b p{font-size:14.5px;color:var(--ink-2)}

.rows{display:grid;gap:10px}
.r{display:grid;grid-template-columns:52px 1fr auto;gap:clamp(14px,3vw,40px);align-items:center;
  position:relative;overflow:hidden;isolation:isolate;min-height:clamp(80px,8vw,112px);
  padding:clamp(16px,2vw,26px) clamp(16px,2vw,26px);border-radius:var(--r);
  background:var(--g-fill-2);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.r:hover{background:var(--g-fill);transform:translateX(10px);box-shadow:var(--g-shadow)}
.r .idx{font-family:var(--f-m);font-size:12px;color:var(--ink-3)}
.r h3{font-size:clamp(23px,3.6vw,46px)}
.r:hover h3{color:var(--rust)}
.r .tags{font-family:var(--f-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:right}
/* Row artwork. The source is dark line-work on white, so multiply blending
   drops the white straight out against the glass fill -- no cutout mask, no
   halo. A gradient mask fades it in after the heading and out before the tags
   so it never fights the text. */
.r .art-bg{
  position:absolute;top:50%;left:61%;translate:-50% -50%;
  height:104%;width:auto;max-width:none;z-index:-1;pointer-events:none;
  mix-blend-mode:multiply;opacity:.78;filter:hue-rotate(var(--art-hue,0deg));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  transition:opacity .24s ease,translate .24s cubic-bezier(.2,.7,.3,1);
}
.r:hover .art-bg{opacity:1;translate:calc(-50% - 10px) -50%}
/* The car artwork carries its own margin, so it floats clear of the text.
   These three arrive cropped hard to the subject with no air, and their
   headings are long enough that there is no clean gap to float into — so
   they run as a low-opacity watermark instead, masked away from the index
   on the left and the tags on the right. */
.r .art-bg.bleed{height:76%;opacity:.5;
  /* not 100%: these crops have zero vertical air, so a full-height fit
     gets sliced by the row's overflow and reads as a mistake rather than
     a composition */
 
  /* two mask layers intersected: the subjects touch their own top and bottom
     edges in the source, so a vertical fade is what stops them ending on a
     hard line inside the row */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 82%,transparent 100%),
                     linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 82%,transparent 100%),
             linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.r:hover .art-bg.bleed{opacity:.66}
@media (max-width:860px){.r .art-bg{display:none}}


.famspanel{padding:clamp(18px,2.2vw,30px) clamp(20px,2.6vw,36px);border-radius:var(--r);
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
.fams{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,60px)}
.f{display:grid;grid-template-columns:1fr 52px;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--g-line)}
.f .nm{font-family:var(--f-d);font-weight:700;font-size:24px;text-transform:uppercase}
.f .ct{font-family:var(--f-d);font-weight:800;font-size:31px;color:var(--rust);text-align:right;line-height:1;font-variant-numeric:tabular-nums}
.f .track{grid-column:1/-1;height:4px;border-radius:999px;background:rgba(var(--d-rgb),.09);margin-top:-4px}
.f .track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--rust),var(--a-bright))}


.stats .wrap{padding-block:0}
.stats{padding-top:0}
.statsbox{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);
  padding:clamp(28px,3.4vw,46px) clamp(22px,3vw,44px);border-radius:calc(var(--r) + 4px);
  background:linear-gradient(135deg,rgba(var(--d-rgb),.92),rgba(var(--d-rgb),.80));
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid rgba(255,255,255,.22);box-shadow:var(--g-shadow-lift);color:var(--d-fg)}
.st .v{font-family:var(--f-d);font-weight:800;font-size:clamp(42px,5.4vw,70px);line-height:.82;color:var(--a-bright)}
.st .k{margin-top:9px;font-size:14px;color:rgba(var(--d-fg-rgb),.72)}

.ctabox{display:flex;gap:28px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  padding:clamp(34px,4.4vw,60px) clamp(24px,3.2vw,48px);border-radius:calc(var(--r) + 4px);
  background:linear-gradient(135deg,rgba(var(--a-rgb),.94),rgba(var(--a-rgb),.80));
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid rgba(255,255,255,.34);box-shadow:var(--g-shadow-lift);color:var(--on-a)}
.ctabox h2{font-size:clamp(32px,5.2vw,66px);color:var(--on-a)}
.ctabox p{margin-top:11px;max-width:42ch;color:rgba(var(--on-a-rgb),.9);font-size:16px}
.ctabox .acts{margin-top:0}
.ctabox .btn-f{
  color:var(--chip-fg);
  background:var(--chip-bg);
  border-color:var(--chip-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(var(--a-pale-ink-rgb),.16),
    0 2px 4px rgba(var(--a-deep-rgb),.20),
    0 14px 30px -12px rgba(var(--a-deeper-rgb),.45);
}
.ctabox .btn-f:hover{
  color:var(--chip-fg-h);
  background:var(--chip-bg-h);
  border-color:var(--chip-edge-h);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 4px rgba(var(--a-deepest-rgb),.30),
    0 18px 36px -14px rgba(var(--a-deepest-rgb),.55);
}
.ctabox .btn-f:active{box-shadow:inset 0 2px 6px rgba(var(--a-deepest-rgb),.35),0 3px 10px -7px rgba(var(--a-deepest-rgb),.5)}
.ctabox .btn-m{
  color:var(--on-d);border-color:rgba(var(--d-edge-rgb),.55);
  background:linear-gradient(180deg,var(--d-1) 0%,var(--navy) 48%,var(--d-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(var(--d-sh-rgb),.5),
    0 2px 4px rgba(var(--a-deeper-rgb),.24),
    0 14px 30px -13px rgba(var(--d-glow-rgb),.66);
}
.ctabox .btn-m:hover{
  background:linear-gradient(180deg,var(--d-1h) 0%,var(--d-midh) 48%,var(--d-2h) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(var(--d-sh-rgb),.55),
    0 2px 4px rgba(var(--a-deeper-rgb),.26),
    0 20px 40px -15px rgba(var(--d-glow-rgb),.74);
}
.ctabox .btn-m:active{
  box-shadow:inset 0 2px 6px rgba(var(--d-sh-rgb),.6),0 3px 10px -7px rgba(var(--d-glow-rgb),.6);
}
/* the crosshair keeps the tool cue without a second loud fill */
.ctabox .btn-m .xh{color:var(--t-pale)}

footer{padding-block:clamp(30px,4vw,54px) 40px}
.footbox{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px;
  padding:clamp(24px,3vw,40px);border-radius:var(--r);
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
.footbox img{height:36px;width:auto}
.footbox p{color:var(--ink-2);margin-top:12px;max-width:40ch;font-size:14.5px}
.footbox h4{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 11px;font-weight:400}
.footbox nav a{display:block;padding:5px 0;font-size:14.5px;color:var(--ink-2)}
.footbox nav a:hover{color:var(--rust-ink)}

/* ---------------- why partner ----------------
   One glass panel divided by hairlines rather than four separate cards —
   the 01-04 capability row already uses cards, and repeating them here
   would flatten the page's rhythm. The dividers also echo the old site. */
.why{padding-top:clamp(18px,2.2vw,32px);padding-bottom:0}
.whybox{
  display:grid;grid-template-columns:minmax(238px,1fr) repeat(4,1fr);
  padding:clamp(22px,2.6vw,38px) 0;border-radius:var(--r);
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow);
}
.whyhead{padding-inline:clamp(20px,2.4vw,34px);align-self:start}
.whyhead h2{font-size:clamp(25px,2.2vw,34px);line-height:1;overflow-wrap:break-word}
.whyhead i{display:block;height:3px;width:74px;background:var(--rust);border-radius:3px;margin:clamp(16px,2vw,24px) 0 clamp(16px,2vw,22px)}
.whyhead .btn{padding:12px 22px;font-size:12.5px}

.wc{padding-inline:clamp(18px,1.9vw,28px);border-left:1px solid var(--g-line);
  display:flex;flex-direction:column;gap:11px}
.wc .ic{margin-bottom:4px}
.wc .ic{color:var(--navy);opacity:.82;width:46px;height:46px;transition:color .2s ease,transform .2s ease,opacity .2s ease}
.wc:hover .ic{color:var(--rust);opacity:1;transform:translateY(-3px)}
.wc h3{font-size:17px;line-height:1.08;text-transform:uppercase;letter-spacing:.01em}
.wc p{font-size:14px;color:var(--ink-2);flex:1}
.wc .more{font-family:var(--f-b);font-size:12.5px;font-weight:600;color:var(--navy);
  display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em}
.wc .more svg{transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.wc:hover .more{color:var(--rust-ink)}
.wc:hover .more svg{transform:translateX(5px)}

@media (max-width:1080px){
  .topnav{justify-content:flex-end;gap:clamp(14px,1.8vw,26px)}
  .whybox{grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,30px) 0}
  .whyhead{grid-column:1/-1;padding-bottom:6px}
  .whyhead h2{font-size:clamp(26px,3.6vw,34px)}
  .wc:nth-child(2),.wc:nth-child(4){border-left:0}
  .wc:nth-child(4),.wc:nth-child(5){padding-top:24px;border-top:1px solid var(--g-line)}
}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .caps{grid-template-columns:repeat(2,1fr)}
  .fams{grid-template-columns:1fr}
  .statsbox{grid-template-columns:repeat(2,1fr)}
  .footbox{grid-template-columns:1fr 1fr}
  .art .bar{font-size:3cqw}
}
@media (max-width:680px){
  .topcta{display:none}
  .topmatch{padding:10px 14px}
  .topmatch span{display:none}
  .topmatch{gap:0}
  .caps{grid-template-columns:1fr}
  .whybox{grid-template-columns:1fr;gap:24px 0}
  .wc{border-left:0;padding-top:22px;border-top:1px solid var(--g-line)}
  .r{grid-template-columns:34px 1fr}
  .r .tags{grid-column:2;text-align:left}
  .statsbox{grid-template-columns:1fr}
  .footbox{grid-template-columns:1fr}
}







/* ---------------- multi-page additions ---------------- */
/* The dispensing cards moved from h3 to h2. Their size rule lives in the
   template stylesheet, which still targets h3, so it is restated here for the
   new tag rather than edited there — the template is regenerated. */
.cap-b h2{font-size:21px;margin-bottom:8px}
/* The footer column headings moved from h4 to h2 to stop skipping a level.
   They were only ever chosen as a size, so the size comes with them. */
.footbox h2{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 11px;font-weight:400}
/* Contrast corrections, solved rather than guessed. Both tokens failed WCAG AA
   for normal text against the page ground; these are the darkest-ground values
   that clear 4.5:1 with hue and saturation held. --t-rgb moves with --t
   because they are the same colour and drift would show as a mismatched glow. */
:root{
  --ink-3:#5c6a90;      /* was #6c7ba1 — 3.65:1 on --paper, now 4.64:1 */
  --t:#0d7492;          /* was #0e7c9b — 4.16:1 as link text, now 4.63:1 */
  --t-rgb:13,116,146;
}
.topnav a.on{color:var(--a);font-weight:600}
.topnav a.on::after{content:"";display:block;height:2px;border-radius:2px;background:var(--a);margin-top:3px}
.crumb{font-family:var(--f-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.phead{padding-block:clamp(26px,4vw,54px) clamp(14px,2vw,26px)}
.phead p{margin-bottom:0}
.phead h1{font-size:clamp(38px,6.4vw,84px);line-height:.94}
.phead p{margin-top:16px;color:var(--ink-2);font-size:clamp(15px,1.3vw,17px);max-width:56ch}

/* Banner head: title and supporting line side by side across the full width,
   title on a single line. The type scale is tighter than the stacked .phead
   because a 33-character headline has to survive on one line down to tablet. */
.phead-banner h1{font-size:clamp(21px,4.05vw,58px);white-space:nowrap;line-height:.96}
/* Sized by script to fill the content width exactly — a fixed font-size can
   only approximate it, and the approximation breaks the moment the text or
   the container changes. The clamp above is the pre-font-load fallback. */
.phead-banner h1.fit{display:block}
/* left, not centred: the headline is measured to span photos one to four,
   and a centred run of that width lines up with neither edge */
.phead-banner .wrap{text-align:left}
.phead-banner p{margin-top:14px;max-width:none}
/* On a phone a 33-character headline cannot hold one line without either
   shrinking to unreadable or pushing the page sideways. It wraps instead —
   the banner arrangement only has to hold where there is width for it. */
@media (max-width:620px){.phead-banner h1{white-space:normal}}

.prose{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.prose p{color:var(--ink-2);font-size:15.5px;margin:0 0 14px}
@media (max-width:860px){.prose{grid-template-columns:1fr}}
.prose-wide{grid-template-columns:1.4fr 1fr;align-items:start}
@media (max-width:860px){.prose-wide{grid-template-columns:1fr}}
.caps-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.caps-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.caps-3{grid-template-columns:1fr}}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(12px,1.4vw,18px)}
.pcard{padding:clamp(18px,2vw,24px);border-radius:var(--r);display:flex;flex-direction:column;gap:10px;
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow);transition:transform .2s ease,box-shadow .2s ease}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--g-shadow-lift)}
.pcard h3{font-size:19px;line-height:1.1}
/* The photos are product shots on white, so they sit on their own white tile
   rather than floating on the glass — a white-backed JPEG on a translucent
   panel reads as a mistake. */
.pshot{aspect-ratio:1;border-radius:12px;overflow:hidden;background:#fff;
  border:1px solid rgba(var(--d-rgb),.10);display:grid;place-items:center}
.pshot img{width:100%;height:100%;object-fit:contain;display:block}
.pshot.none{background:rgba(var(--d-rgb),.035);border-style:dashed;
  border-color:rgba(var(--d-rgb),.20)}
.pshot.none span{font-family:var(--f-m);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}

/* page head with artwork beside it */
.phead-art .wrap{display:grid;grid-template-columns:1fr minmax(0,.82fr);
  gap:clamp(20px,4vw,60px);align-items:center}
.phead-art img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
@media (max-width:900px){
  .phead-art .wrap{grid-template-columns:1fr}
  .phead-art img{max-width:440px;margin-inline:auto}
}

/* filter groups */
.fgroups{display:grid;gap:clamp(14px,1.8vw,22px);margin-bottom:clamp(16px,2vw,26px)}
.fgroup h2{margin:0 0 9px;font-family:var(--f-m);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400}
.fgroup .filters{margin-bottom:0}
.fbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.fclear{font-family:var(--f-b);font-size:11.5px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--t);cursor:pointer;background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:3px}
.fclear[hidden]{display:none}
.pcard[hidden]{display:none}
.fempty{padding:36px 20px;text-align:center;color:var(--ink-2);font-size:15px;
  border-radius:var(--r);border:1px dashed rgba(var(--d-rgb),.22)}
.fempty[hidden]{display:none}

/* Shared pill row. The industry sub-applications and the about credentials
   are the same component; defining it once stops them drifting apart. */
.pillrow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pillrow li{font-family:var(--f-b);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-2);padding:9px 16px;border-radius:999px;line-height:1.3;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.52));
  border:1px solid var(--g-edge);
  /* same three-part recipe as the buttons: a lit top edge, a darkened bottom
     edge for thickness, then a tight contact shadow plus a wide soft one */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(var(--d-rgb),.09),
    0 1px 2px rgba(var(--d-rgb),.13),
    0 8px 18px -8px rgba(var(--d-rgb),.30);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s ease,color .16s ease}
.pillrow li:hover{transform:translateY(-3px);color:var(--a-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(var(--d-rgb),.10),
    0 2px 4px rgba(var(--d-rgb),.14),
    0 16px 30px -10px rgba(var(--d-rgb),.40)}
.pillrow li:active{transform:translateY(0);
  box-shadow:inset 0 2px 5px rgba(var(--d-rgb),.16),0 1px 2px rgba(var(--d-rgb),.10)}

/* the ticker's duration is generated, so its speed survives the list growing */
.strip .run{animation-duration:var(--dur,38s)}

/* per-image render height, solved for equal ink weight in make_lines_art.py.
   These sit in EXTRA_CSS, which is appended after the template's own rules,
   so equal-specificity overrides land the right way round. */
.r .art-bg{height:var(--ah,104%)}
.r .art-bg.bleed{height:var(--ah,76%)}
/* The new pieces opt out of the palette hue-rotation. The car was
   neutralised to grey so rotating it is a no-op; these keep a deliberate blue
   accent, and -157deg turns it olive -- the same reason the hero backdrop is
   exempt. Left alone they sit close enough to the cyan palette to read as
   deliberate, and they can carry far more opacity than the olive version could. */
.r .art-bg.lineart{opacity:.85;filter:saturate(1);left:67%;
  transition:opacity .24s ease,filter .26s ease,translate .24s cubic-bezier(.2,.7,.3,1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 84%,transparent 100%),
                     linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 84%,transparent 100%),
             linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
/* the accent is the only saturated thing in a graphite drawing, so
   saturate() lights the blue line and leaves the pencil alone */
.r:hover .art-bg.lineart{opacity:1;filter:saturate(2.4) contrast(1.06)}

/* Chemistry chips, inside the rail column. Narrower and quieter than the
   old full-width chip row: it is a secondary axis, not the primary one. */
.lrail .fgroup{border-top:1px solid var(--g-line);margin-top:14px;padding-top:14px}
.lrail .fgroup h2{margin-bottom:9px}
.lrail .filters{gap:6px;margin-bottom:0}
.lrail .fbtn{padding:7px 12px;font-size:11.5px}

/* ---------------- documents ---------------- */
.drow{display:grid;grid-template-columns:1fr auto auto auto;gap:clamp(10px,1.6vw,22px);
  align-items:center;padding:14px clamp(14px,1.8vw,20px);border-top:1px solid var(--g-line);
  color:inherit;text-decoration:none;transition:background .18s ease}
.dtable .drow:first-child{border-top:0}
a.drow:hover{background:var(--g-fill-2)}
.drow strong{display:block;font-weight:600;font-size:15.5px;line-height:1.25}
.dfor{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.drow .k,.dsize{font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.dgo{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-m);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
a.drow:hover .dgo{color:var(--rust)}
.grow{display:grid;grid-template-columns:minmax(160px,.8fr) 1.6fr;gap:clamp(10px,1.6vw,22px);
  padding:14px clamp(14px,1.8vw,20px);border-top:1px solid var(--g-line)}
.gaps .grow:first-child{border-top:0}
.grow strong{font-weight:600;font-size:15px}
.grow span{font-size:13.5px;color:var(--ink-3);line-height:1.45}
@media (max-width:760px){
  .drow{grid-template-columns:1fr auto}
  .drow .k{display:none}
  .grow{grid-template-columns:1fr;gap:4px}
}

/* the download block in a product's spec rail */
.pdocs{margin-top:clamp(14px,1.8vw,20px);padding-top:clamp(14px,1.8vw,18px);
  border-top:1px solid var(--g-line)}
.pdocs h2{font-family:var(--f-m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.dl{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:11px;
  background:var(--g-fill-2);border:1px solid var(--g-edge);color:inherit;
  text-decoration:none;transition:background .18s ease,transform .18s ease}
.dl + .dl{margin-top:8px}
.dl:hover{background:var(--g-fill);transform:translateY(-2px)}
.dl svg{flex:none;color:var(--navy)}
.dl:hover svg{color:var(--rust)}
.dl b{display:block;font-weight:600;font-size:13.5px;line-height:1.25}
.dl em{display:block;font-style:normal;font-family:var(--f-m);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}

/* ---------------- contact ---------------- */
/* The honeypot is positioned off-screen rather than display:none -- some bots
   skip hidden inputs, and one that is technically visible catches more. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ferr{grid-column:1/-1;margin:0;font-size:14px;color:#9b2c1f;
  background:rgba(155,44,31,.07);border:1px solid rgba(155,44,31,.25);
  border-radius:10px;padding:10px 14px}
.fdone{padding:clamp(22px,2.6vw,32px);border-radius:calc(var(--r) + 2px);
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
.fdone h2{font-size:clamp(20px,2vw,26px);margin-bottom:10px}
.fdone p{color:var(--ink-2)}
.cblock{margin-top:clamp(24px,3vw,36px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--g-line)}
.cblock h3{font-family:var(--f-m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.cblock address{font-style:normal;color:var(--ink-2);font-size:15px;line-height:1.5;
  margin-bottom:14px}
.cblock dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.cblock dt{font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.cblock dd{margin:0;font-size:15px}
.cblock a,footer address a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(var(--d-rgb),.22)}
.cblock a:hover{color:var(--rust);border-bottom-color:currentColor}
footer address{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--ink-2);
  margin-bottom:10px}

/* ---------------- product detail ---------------- */
/* Two columns, and the spec rail is the one that sticks. A buyer scrolling the
   instructions is usually checking them against the mix ratio, and a table
   that scrolls away makes them go back for it. */
.crumb a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(var(--d-rgb),.28)}
.crumb a:hover{color:var(--rust);border-bottom-color:currentColor}
.crumb i{font-style:normal;opacity:.45;margin:0 6px}

.pdet{display:grid;grid-template-columns:minmax(260px,330px) 1fr;
  gap:clamp(20px,2.6vw,40px);align-items:start}
.pside{position:sticky;top:clamp(84px,9vw,104px);padding:clamp(18px,2vw,24px);
  border-radius:calc(var(--r) + 2px);background:var(--g-fill);
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
.pside .pshot{margin-bottom:clamp(14px,1.8vw,20px)}
.pside h2{font-family:var(--f-m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}

.spectbl{width:100%;border-collapse:collapse}
.spectbl th,.spectbl td{text-align:left;padding:9px 0;vertical-align:top;
  border-top:1px solid var(--g-line);font-size:13.5px;line-height:1.35}
.spectbl tr:first-child th,.spectbl tr:first-child td{border-top:0}
.spectbl th{font-family:var(--f-m);font-weight:400;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);width:38%;padding-right:12px}
.spectbl td{color:var(--ink);font-weight:500}

.pacts{display:flex;flex-direction:column;gap:9px;margin-top:clamp(16px,2vw,22px)}
.pacts .btn{justify-content:center;width:100%;padding:12px 16px;font-size:12.5px}
.pnote{font-size:12px;line-height:1.45;color:var(--ink-3);margin:12px 0 0}
.pnote a{color:inherit}

.pbody{display:grid;gap:clamp(22px,2.8vw,38px)}
.psec h2{font-size:clamp(20px,2vw,27px);margin-bottom:clamp(10px,1.2vw,14px)}
.psec p{color:var(--ink-2)}
.psec .steps{grid-template-columns:1fr}
.psec .step{align-items:center}
.psec .step p{font-size:14.5px;margin:0}

.blist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.blist li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2);line-height:1.45}
.blist li:before{content:"";position:absolute;left:0;top:.5em;width:11px;height:6px;
  border-left:2px solid var(--rust);border-bottom:2px solid var(--rust);
  transform:rotate(-45deg) translateY(-2px)}

@media (max-width:900px){
  .pdet{grid-template-columns:1fr}
  .pside{position:static}
}

/* ---------------- custom formulation ---------------- */
.fromchip{display:inline-block;font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t);background:var(--g-fill-2);
  border:1px solid rgba(var(--t-rgb),.35);border-radius:999px;padding:7px 15px;
  margin-bottom:clamp(16px,2vw,24px)}
.matchcall{display:grid;grid-template-columns:1.25fr auto;gap:clamp(22px,3vw,48px);
  align-items:center;padding:clamp(24px,3vw,40px);border-radius:calc(var(--r) + 4px);
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
.matchcall h2{font-size:clamp(26px,3.4vw,44px);margin:8px 0 12px}
.matchcall p{color:var(--ink-2);max-width:52ch}
.matchcall .mono{font-family:var(--f-m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.matchcall .acts{margin-top:0;flex-direction:column;align-items:stretch}
.matchcall .acts .btn{justify-content:center}
@media (max-width:820px){.matchcall{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px)}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.6vw,20px);align-items:start;
  padding:clamp(18px,2.1vw,26px);border-radius:var(--r);
  background:var(--g-fill-2);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);transition:background .2s ease,transform .2s ease}
.step:hover{background:var(--g-fill);transform:translateY(-3px)}
.step .n{font-family:var(--f-d);font-weight:800;font-size:38px;line-height:.82;
  color:var(--rust);font-variant-numeric:tabular-nums}
.step h3{font-size:19px;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--ink-2)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ---------------- products: the line rail ----------------
   Five lines beside the grid so someone who lands on a filtered view can move
   between lines without going back to Industries. Sticky, because the grid is
   much taller than the rail. */
.plyt{display:grid;grid-template-columns:clamp(190px,16vw,224px) minmax(0,1fr);
  gap:clamp(20px,2.6vw,40px);align-items:start}
/* without this the auto-width track grows to the widest rail item and the
   horizontal scroller never gets a chance to clip */
.plyt>*{min-width:0}
.railcol{position:sticky;top:clamp(84px,10svh,108px);display:flex;flex-direction:column;gap:12px}
.backind{justify-content:center;padding:12px 14px;font-size:12px;width:100%;
  white-space:nowrap;letter-spacing:.02em}
.backind svg{transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.backind:hover svg{transform:translateX(-3px)}
.lrail{padding:clamp(16px,1.7vw,22px) clamp(12px,1.2vw,16px);border-radius:var(--r);
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
.lrail h2{margin:0 0 10px;padding-inline:9px;font-family:var(--f-m);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.lr{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:10px;font-size:14px;color:var(--ink-2);
  border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.lr span{line-height:1.25}
.lr em{font-style:normal;font-family:var(--f-m);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-3);flex:none}
.lr:hover{background:var(--g-fill-2);color:var(--rust-ink);border-color:var(--g-edge)}
.lr.on{color:var(--on-a);font-weight:600;border-color:rgba(var(--a-edge-rgb),.5);
  background:linear-gradient(180deg,var(--a-1) 0%,var(--rust) 48%,var(--a-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 6px 14px -8px rgba(var(--a-rgb),.6)}
.lr.on em{color:rgba(var(--on-a-rgb),.72)}
.lrail .lr.all{margin-bottom:6px;padding-bottom:11px;border-bottom:1px solid var(--g-line);
  border-radius:10px 10px 0 0}
@media (max-width:900px){
  /* stacked: the rail becomes a scrollable row above the grid rather than a
     column nobody can see without scrolling back up */
  .plyt{grid-template-columns:1fr;gap:clamp(14px,2vw,20px)}
  .railcol{position:static;gap:10px}
  .backind{width:auto;align-self:flex-start}
  .lrail{padding:12px 14px}
  .lrail h2{padding-inline:0;margin-bottom:8px}
  .lrail .rails{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .lr{flex:none;padding:8px 13px;border:1px solid var(--g-edge);background:var(--g-fill-2)}
  .lrail .lr.all{margin-bottom:0;padding-bottom:8px;border-bottom:1px solid var(--g-edge);
    border-radius:10px}
}

/* ---------------- market tiles ----------------
   The compact tier under the five lines. Same glass and same hover as the
   rows, a third the height, and the artwork runs as a bottom-right watermark
   rather than a block, so a tile with art and one without are the same shape. */
/* These are <h2> now rather than <p>: they introduce a section and read as
   headings, and as paragraphs a screen reader walked straight past them. The
   explicit weight and line-height keep the appearance identical. */
.slabel{font-family:var(--f-m);font-size:11px;font-weight:400;line-height:1.3;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 clamp(12px,1.5vw,18px)}
.slabel.second{margin-top:clamp(30px,3.6vw,52px)}
.sublede{color:var(--ink-2);font-size:14.5px;max-width:56ch;
  margin:-6px 0 clamp(14px,1.8vw,20px)}
/* the matcher artwork breaks out of its panel by design; once the hero stacks
   there is no panel to break out of, only the viewport edge */
@media(max-width:860px){.art{margin-inline:0}}
.igrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,14px)}
.ig{position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:7px;justify-content:flex-end;
  min-height:clamp(84px,7.6vw,96px);padding:14px 17px;border-radius:14px;
  background:var(--g-fill-2);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.ig:hover{background:var(--g-fill);transform:translateY(-3px);box-shadow:var(--g-shadow)}
.ig h3{font-family:var(--f-d);font-weight:800;font-size:clamp(16px,1.35vw,19px);
  text-transform:uppercase;line-height:1.04;margin:0;letter-spacing:.01em}
.ig:hover h3{color:var(--rust)}
.ig .tags{font-family:var(--f-m);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);text-align:left}
/* In flow, directly above the name. Absolute positioning put it at the top of
   the tile while the text sat at the bottom, which parked all the leftover
   height between them -- and by a different amount per tile, since the pieces
   run 34-58px tall. As a flex item the separation is just the column gap. */
.ig .tart{align-self:flex-end;margin-right:-5%;width:var(--aw);height:auto;max-width:none;
  pointer-events:none;mix-blend-mode:multiply;opacity:.72;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  filter:saturate(1);
  transition:opacity .24s ease,filter .24s ease,translate .24s cubic-bezier(.2,.7,.3,1)}
.ig:hover .tart{opacity:1;filter:saturate(2.6) contrast(1.08);translate:-6px 0}
@media(max-width:1080px){.igrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.igrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.igrid{grid-template-columns:1fr}.ig .tart{opacity:.5}}

/* meet the team */
/* Flex, not grid: a grid cannot centre a short final row, and eleven people
   across six columns always leaves one. The basis is computed from a column
   count so the tiles still line up exactly like a grid, and justify-content
   centres whatever is left over — for any roster size, not just this one. */
.team{display:flex;flex-direction:column;gap:clamp(22px,2.45vw,37px)}
.trow{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(22px,2.45vw,37px) var(--tg);--ts:1}
/* top row: six across, filling the container */
.trow-a{--tg:max(10px,1.28%)}
.trow-a .tm{flex:0 0 calc((100% - 5 * var(--tg)) / 6)}
/* bottom row: five across at 1.108x the tile and 1.632x the gap, so it spans
   94.8% of the container and centres the 5.2% that is left over */
.trow-b{--tg:max(10px,2.085%);--ts:1.09}
.trow-b .tm{flex:0 0 17.28%}
.tm{text-align:center;display:flex;flex-direction:column}
.tm figcaption{display:flex;flex-direction:column;flex:1}
.tm span{flex:1}
.tm .face{aspect-ratio:9/10;border-radius:14px;overflow:hidden;margin-bottom:5.6%;
  background:var(--g-fill-2);border:1px solid rgba(var(--t-rgb),.30);
  /* blue rim: a tight ring hugging the edge, then a wider bloom outside it.
     Driven by the tool colour, so it follows the palette like everything else. */
  box-shadow:
    0 0 0 1px rgba(var(--t-rgb),.22),
    0 0 18px -2px rgba(var(--t-rgb),.42),
    0 6px 18px -8px rgba(var(--d-rgb),.30);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease,border-color .24s ease}
.tm:hover .face{transform:translateY(-5px);border-color:rgba(var(--t-rgb),.55);
  box-shadow:
    0 0 0 1px rgba(var(--t-rgb),.40),
    0 0 30px 0 rgba(var(--t-rgb),.60),
    0 16px 32px -12px rgba(var(--d-rgb),.38)}
.tm img{width:100%;height:100%;object-fit:cover;display:block}
.tm b{display:block;font-family:var(--f-d);font-weight:800;font-size:calc(clamp(15px,1.38vw,21px) * var(--ts,1));
  text-transform:none;line-height:1.1;letter-spacing:.005em}
.tm span{display:block;font-size:calc(clamp(12.5px,1.05vw,14px) * var(--ts,1));color:var(--ink-2);
  margin-top:3.9%;line-height:1.35;min-height:calc(2 * 1.35em)}
.tm em{display:block;margin-top:auto;font-style:normal;
  font-size:calc(clamp(13px,1.05vw,15px) * var(--ts,1));color:var(--t);padding-top:7.8%}
/* narrow: dissolve the two rows back into one wrapping grid. display:contents
   drops the row boxes but not inheritance, hence the explicit resets. */
@media (max-width:1240px){
  .team{flex-direction:row;flex-wrap:wrap;justify-content:center;
    --tc:5;--tg:max(10px,1.28%);gap:clamp(22px,2.45vw,37px) var(--tg)}
  .trow{display:contents}
  .team .tm{--tg:max(10px,1.28%);--ts:1;
    flex:0 0 calc((100% - (var(--tc) - 1) * var(--tg)) / var(--tc))}
}
@media (max-width:1080px){.team{--tc:4}}
@media (max-width:820px){.team{--tc:3}}
@media (max-width:560px){.team{--tc:2}}

/* about: "more than a supplier" */
.mts{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,4vw,64px);align-items:start;
  padding:clamp(26px,3.2vw,46px);border-radius:var(--r);
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
.mts h2{font-size:clamp(26px,2.6vw,38px);line-height:.98;margin-bottom:16px}
.mts p{color:var(--ink-2);font-size:15.5px;margin:0 0 15px}
.mts p:last-child{margin-bottom:0}
.mts h3{margin:0 0 14px;font-family:var(--f-m);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400}
@media (max-width:860px){.mts{grid-template-columns:1fr}}

/* industry detail blocks */
.idet{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
.idet > div{padding:clamp(22px,2.6vw,34px);border-top:1px solid var(--g-line);
  border-left:1px solid var(--g-line);display:flex;flex-direction:column}
.idet > div:nth-child(-n+2){border-top:0}
.idet > div:nth-child(odd){border-left:0}
.idet h3{font-size:20px;margin-bottom:7px}
.idet > div > p{color:var(--ink-2);font-size:14.5px;margin:0}
.idet ul{margin:16px 0 0}
.idet .more{margin-top:auto;padding-top:18px;font-family:var(--f-b);font-size:12.5px;
  font-weight:600;color:var(--a);display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em}
.idet .more svg{transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.idet .more:hover svg{transform:translateX(5px)}
@media (max-width:900px){
  .idet{grid-template-columns:1fr}
  .idet > div{border-left:0;border-top:1px solid var(--g-line)}
  .idet > div:first-child{border-top:0}
}

.pcard .cats{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.pcard .cat{font-family:var(--f-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;color:var(--a-ink);background:rgba(var(--a-rgb),.10);
  border:1px solid rgba(var(--a-rgb),.20)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,26px)}
.fbtn{font-family:var(--f-b);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;cursor:pointer;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.34));
  border:1px solid var(--g-edge);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(var(--d-rgb),.10);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease}
.fbtn:hover{transform:translateY(-2px)}
.fbtn[aria-pressed="true"]{color:var(--on-a);border-color:rgba(var(--a-edge-rgb),.5);
  background:linear-gradient(180deg,var(--a-1) 0%,var(--a) 48%,var(--a-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 8px 18px -9px rgba(var(--a-rgb),.65)}
.fcount{font-family:var(--f-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}

.dtable{border-radius:var(--r);overflow:hidden;
  background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
/* .drow and its parts live in the documents block above -- this rule used to
   restate them with three columns and, being later, silently won. Only
   .pending is still needed here. */
.pending{font-family:var(--f-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;color:var(--ink-3);border:1px dashed rgba(var(--d-rgb),.28);
  white-space:nowrap}

.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:14px;margin-bottom:22px;
  background:rgba(var(--t-rgb),.07);border:1px solid rgba(var(--t-rgb),.22);color:var(--ink-2);font-size:14px}
.notice b{color:var(--ink);font-weight:600}

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;font-family:var(--f-b);font-size:15px;color:var(--ink);
  padding:12px 14px;border-radius:12px;border:1px solid var(--g-edge);background:rgba(255,255,255,.7);
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 2px rgba(var(--d-rgb),.06)}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid rgba(var(--t-rgb),.55);outline-offset:1px}
@media (max-width:680px){.form{grid-template-columns:1fr}}

/* ---------------- navigation ----------------
   Eight items plus two pills only fit above ~1400px. Between there and 1100
   the row tightens; below 1100 it becomes a proper menu rather than wrapping
   into a second line, which is what it did before. */
@media (max-width:1440px){
  .topnav{gap:clamp(9px,1.2vw,20px)}
  .topnav a{font-size:13px}
}
/* Below this the row cannot hold eight links AND two pills. The quote pill
   goes first -- Contact is still in the nav and the CTA repeats at the foot
   of every page -- which buys enough room to keep the real nav down to
   tablet width instead of hiding it behind a menu button. */
@media (max-width:1420px){
  .topcta{display:none}
  .topnav{gap:clamp(8px,1.1vw,16px)}
  .topnav a{font-size:12.5px}
}
.navtoggle{display:none;flex:none;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--f-b);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);padding:10px 15px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.34));
  border:1px solid var(--g-edge);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(var(--d-rgb),.10)}
.navtoggle i{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink);position:relative}
.navtoggle i::before,.navtoggle i::after{content:"";position:absolute;left:0;width:16px;height:2px;
  border-radius:2px;background:var(--ink);transition:transform .2s ease}
.navtoggle i::before{top:-5px}.navtoggle i::after{top:5px}
.navtoggle[aria-expanded="true"] i{background:transparent}
.navtoggle[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}

/* Opaque, not glass. A translucent panel over a page of 80px display type is
   unreadable no matter how much blur sits behind it, and backdrop-filter
   cannot be relied on inside the sticky header's stacking context. */
.mobnav{display:none;position:absolute;left:var(--gut);right:var(--gut);top:calc(100% + 8px);
  padding:14px;border-radius:calc(var(--r) + 4px);z-index:60;background:#fff;
  border:1px solid var(--g-edge);box-shadow:var(--g-shadow-lift)}
.navscrim{display:none;position:fixed;inset:0;z-index:50;background:rgba(var(--d-rgb),.42);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.navscrim[hidden]{display:none}
/* keep the bar itself above the scrim so the close button stays lit and tappable */
.topbar{position:relative;z-index:70}
.mobnav a{display:block;padding:11px 12px;border-radius:11px;font-size:15px;color:var(--ink-2)}
.mobnav a:hover{background:rgba(var(--d-rgb),.05);color:var(--a-ink)}
.mobnav a.on{color:var(--a);font-weight:600;background:rgba(var(--a-rgb),.08)}
.mobnav .acts{margin-top:10px;padding-top:12px;border-top:1px solid var(--g-line);gap:8px}
.mobnav .btn{flex:1;justify-content:center}

@media (max-width:1100px){
  .topnav{display:none}
  .topcta{display:none}
  .navtoggle{display:inline-flex}
  .mobnav{display:block}
  .mobnav[hidden]{display:none}
  .navscrim:not([hidden]){display:block}
}