/* --- 1. TOKENS --------------------------------------------------------- */
:root{
  /* LIGHT.  Aluminium and enamel, cool-neutral. Deliberately not a cream. */
  --canvas:#EDEDEA;      /* the page                                        */
  --panel:#F6F5F1;       /* a raised section, warmer than the canvas by a
                            hair, so a change of ground reads as a change of
                            subject and not as a rendering error            */
  --sunk:#E3E3DE;        /* a recessed section                              */
  --hair:#DEDFDB;        /* the lightest division                           */
  --rule:#CBCDC8;        /* table rows, borders                             */
  --rule2:#9DA19B;       /* a rule that has to be seen                      */
  --muted:#585E5A;       /* captions, units, annotation.  7.0:1 on canvas   */
  --ink:#1C201E;         /* prose, headings, linework.    14.9:1            */
  --plate:#111413;       /* the engineering plate. Refuses the theme.       */
  --plate-ink:#EDEDEA;
  --plate-muted:#9AA09C;
  --plate-rule:#2E3432;
  --signal:#8A6207;      /* signal, at text contrast on light.  4.9:1       */
  --signal-mark:#EFAF1F; /* signal, as a fill or a rule                     */
  --focus:#1C201E;

  --f-disp:"Source Serif 4","Source Serif Pro",Georgia,serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ar:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* one scale, in px, on an 8px rhythm */
  --t-hero:clamp(2.5rem,6.2vw,4.75rem);   /*  40 ->  76  display serif  */
  --t-h2:clamp(1.875rem,3.4vw,2.875rem);  /*  30 ->  46                 */
  --t-h3:1.5rem;                          /*  24/30                     */
  --t-name:1.5rem;                        /*  24/30  product name       */
  --t-lead:1.3125rem;                     /*  21/32                     */
  --t-body:1.0625rem;                     /*  17/27  THE READING SIZE   */
  --t-ui:0.9375rem;                       /*  15/20  nav, actions       */
  --t-spec:0.9375rem;                     /*  15/22  specification body */
  --t-data:0.875rem;                      /*  14/20  codes, values      */
  --t-lab:0.75rem;                        /*  12/16  table headers      */

  --gut:24px; --mar:20px; --maxw:1440px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:88px; --s10:112px; --s11:120px;
  --hdr:64px;
}
@media (min-width:600px){  :root{ --mar:32px } }
@media (min-width:1024px){ :root{ --mar:40px; --hdr:72px } }
@media (min-width:1536px){ :root{ --mar:64px } }

/* DARK.  A material-role swap. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --canvas:#121514; --panel:#191F1D; --sunk:#0D100F; --hair:#242A28;
    --rule:#333A37; --rule2:#5A625E; --muted:#A6ADA8; --ink:#EDEDEA;
    --plate:#0A0D0C; --plate-rule:#262C2A;
    --signal:#EFAF1F; --focus:#EDEDEA;
  }
}
:root[data-theme="dark"]{
  --canvas:#121514; --panel:#191F1D; --sunk:#0D100F; --hair:#242A28;
  --rule:#333A37; --rule2:#5A625E; --muted:#A6ADA8; --ink:#EDEDEA;
  --plate:#0A0D0C; --plate-rule:#262C2A;
  --signal:#EFAF1F; --focus:#EDEDEA;
}

/* --- 2. BASE ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,figcaption,table,dl,dd,ul,ol,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--f-body); font-size:var(--t-body); line-height:27px;
  font-weight:400; font-variant-numeric:tabular-nums lining-nums slashed-zero;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%; height:auto}
table{border-collapse:collapse; width:100%;
      font-variant-numeric:tabular-nums lining-nums slashed-zero}
a{color:inherit}
::selection{background:var(--ink); color:var(--canvas)}
:focus-visible{outline:2px solid var(--signal-mark); outline-offset:3px}
:root[data-theme="dark"] :focus-visible,
.plate :focus-visible{outline-color:var(--signal-mark)}
:focus:not(:focus-visible){outline:none}

.skip{position:absolute; inset-inline-start:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--canvas); padding:12px 16px;
  font-size:var(--t-ui); font-weight:500}
.skip:focus{inset-inline-start:0}

/* Arabic is a connected script: never tracked, never uppercased. One
   language per document, so `.ar` is a typographic instruction and not a
   visibility switch. Latin designations inside it stay Latin, in <bdi>. */
.ar,.ar *,[lang="ar"],[lang="ar"] *{
  font-family:var(--f-ar); letter-spacing:0 !important;
  text-transform:none !important; font-feature-settings:normal}
.ar{line-height:1.9}
bdi{font-feature-settings:"tnum" 1,"lnum" 1,"zero" 1}

/* Thmanyah, cut to outlines: the licence permits website use and forbids
   serving the font file, so Arabic display type is artwork. */
.th{display:block; height:auto; fill:currentColor; overflow:visible}

/* --- 3. GRID.  Twelve columns, and they are invisible. ----------------- */
.w{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--mar)}
.g{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--gut)}
@media (min-width:640px){  .g{grid-template-columns:repeat(8,minmax(0,1fr))} }
@media (min-width:1024px){ .g{grid-template-columns:repeat(12,minmax(0,1fr))} }
.full,.c1-5,.c1-6,.c1-7,.c1-8,.c1-9,.c6-13,.c7-13,.c8-13,.c9-13,
.h1c,.h2c,.q1,.q2,.q3,.q4,.t1,.t2,.t3{grid-column:1/-1}
@media (min-width:640px) and (max-width:1023px){
  .q1,.q3{grid-column:1/5} .q2,.q4{grid-column:5/9}
  .t1{grid-column:1/5} .t2{grid-column:5/9} .t3{grid-column:1/9}
  .c1-5,.c1-6,.c1-7{grid-column:1/5} .c6-13,.c7-13,.c8-13{grid-column:5/9}
  .h1c{grid-column:1/5} .h2c{grid-column:5/9}
}
@media (min-width:1024px){
  .c1-5{grid-column:1/5}  .c1-6{grid-column:1/6}  .c1-7{grid-column:1/7}
  .c1-8{grid-column:1/8}  .c1-9{grid-column:1/9}
  .c6-13{grid-column:6/13} .c7-13{grid-column:7/13} .c8-13{grid-column:8/13}
  .c9-13{grid-column:9/13}
  .h1c{grid-column:1/7}   .h2c{grid-column:7/13}
  .q1{grid-column:1/4} .q2{grid-column:4/7} .q3{grid-column:7/10} .q4{grid-column:10/13}
  .t1{grid-column:1/5} .t2{grid-column:5/9} .t3{grid-column:9/13}
}

/* --- 4. TYPE ----------------------------------------------------------- */
.hero{font-family:var(--f-disp); font-weight:600; font-size:var(--t-hero);
  line-height:1.04; letter-spacing:-0.02em; text-wrap:balance}
/* Product pages step down one size, so the home page keeps the largest type
   on the site and the hierarchy between them is not an accident. */
.hero.sm{font-size:clamp(2rem,4.4vw,3.5rem); line-height:1.08}
.h2{font-family:var(--f-disp); font-weight:600; font-size:var(--t-h2);
  line-height:1.08; letter-spacing:-0.015em; text-wrap:balance; max-width:16ch}
.h2.wide{max-width:22ch}
.h3{font-family:var(--f-disp); font-weight:600; font-size:var(--t-h3);
  line-height:1.16; letter-spacing:-0.01em}
.hero.ar,.h2.ar,.h3.ar{font-family:var(--f-ar); font-weight:700; letter-spacing:0}
.hero.ar{line-height:1.3} .h2.ar{line-height:1.38} .h3.ar{line-height:1.5}
.name{font-family:var(--f-body); font-weight:600; font-size:var(--t-name);
  line-height:1.25; letter-spacing:-0.008em}
.lead{font-size:var(--t-lead); line-height:32px; letter-spacing:-0.005em;
  max-width:34em; font-weight:400}
.lead.ar{line-height:1.85; max-width:30em}
p.body{max-width:34em}
p.body+p.body{margin-top:20px}
p.body.ar{max-width:30em}
.small{font-size:var(--t-spec); line-height:22px; color:var(--muted); max-width:40em}
.small.ar{line-height:1.9}
.lab{font-size:var(--t-lab); line-height:16px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--muted)}
.lab.ink{color:var(--ink)}
.lab.ar{letter-spacing:0; text-transform:none; font-size:0.8125rem}
.data{font-size:var(--t-data); line-height:20px; font-weight:500}
b,strong{font-weight:600}
.sig{color:var(--signal); font-weight:500}

/* --- 5. SECTIONS.  A section begins with its subject. ------------------ */
/* No number, no rule, no bilingual pre-heading. The title sits in the first
   four columns and one sentence starts at column six. */
.sec{padding-block:var(--s10) var(--s11); scroll-margin-block-start:calc(var(--hdr) + 8px)}
@media (max-width:1023px){ .sec{padding-block:var(--s8)} }
.sec+.sec{border-top:1px solid var(--hair)}
/* A section carrying three lines does not need the padding of one carrying a
   table. Applied where the content is short enough that the default reads as
   a gap rather than as breathing room. */
.sec.tight{padding-block:var(--s8)}
@media (max-width:1023px){ .sec.tight{padding-block:var(--s7)} }
.sec.tight{padding-block:var(--s8)}
/* A page is not one ground. Sections alternate, so a change of subject is
   visible before a word of it is read. */
.sec.raised{background:var(--panel)}
.sec.sunk{background:var(--sunk)}
.sec.dark{background:var(--plate); color:var(--plate-ink);
  --canvas:var(--plate); --panel:#161A19; --ink:var(--plate-ink);
  --muted:var(--plate-muted); --rule:var(--plate-rule); --hair:#1A1F1E;
  --rule2:#454D4A; --signal:var(--signal-mark); --focus:#EDEDEA}
.sec+.sec.raised,.sec+.sec.sunk,.sec+.sec.dark,.sec.dark+.sec,
.sec.raised+.sec,.sec.sunk+.sec{border-top:0}

/* --- 5a. FULL-BLEED IMAGE BANDS ---------------------------------------- */
/* A photograph is a mass, not an ornament, so it runs edge to edge and the
   type sits inside it. The scrim is heaviest at the bottom, where the type
   is, and lightest across the middle, where the subject is. */
.band{position:relative; overflow:clip; display:grid; align-items:end;
  background:var(--plate); color:var(--plate-ink);
  --canvas:var(--plate); --ink:var(--plate-ink); --muted:#B4BAB6;
  --rule:#2E3432; --rule2:#4B534F; --signal:var(--signal-mark);
  --focus:#EDEDEA}
.band > img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center}
/* The type sits in the lower third, so the scrim ramps hard from just above
   it and leaves the subject of the photograph alone. */
.band::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,13,12,.58) 0,rgba(10,13,12,.14) 18%,
    rgba(10,13,12,.26) 40%,rgba(10,13,12,.78) 68%,rgba(10,13,12,.96) 100%)}
.band > .over{position:relative; z-index:1; width:100%}
/* The hero frame is a night photograph. A scrim that runs bottom to top turns
   one of those into a black rectangle, so the hero darkens from the reading
   edge instead and leaves the picture alone. */
.band-hero{min-height:min(76vh,740px)}
.band-hero .over{padding-block:clamp(120px,26vh,260px) clamp(28px,5vh,64px)}
.band-hero::after{background:
  linear-gradient(180deg,rgba(9,11,11,.42) 0,rgba(9,11,11,0) 18%,
    rgba(9,11,11,0) 46%,rgba(9,11,11,.62) 74%,rgba(9,11,11,.92) 100%)}

/* A blue-hour exterior. The frame was composed with its left third empty and
   its subject on the right, so it needs almost nothing: the sky stays, the
   horizon band stays, and the scrim only firms up over the gravel where the
   type actually sits. */
.band-dusk::after{background:
  linear-gradient(180deg,rgba(6,9,12,.28) 0,rgba(6,9,12,0) 20%,
    rgba(6,9,12,.10) 44%,rgba(6,9,12,.56) 70%,rgba(6,9,12,.90) 100%)}

/* A night photograph is not a dusk photograph and does not take the same
   scrim. This is the vignette the frame carried on the earlier page: the top
   and the edges fall away, the middle is left alone, and the type sits in the
   dark band at the foot. Nothing is done to the file itself. */
.band-night::after{background:
  linear-gradient(180deg,rgba(6,8,10,.62) 0,rgba(6,8,10,.10) 22%,
    rgba(6,8,10,.06) 44%,rgba(6,8,10,.90) 94%),
  radial-gradient(122% 78% at 50% 38%,rgba(6,8,10,0) 38%,rgba(6,8,10,.58) 100%)}
.band-mid{min-height:min(60vh,580px)}
.band-mid .over{padding-block:clamp(96px,20vh,200px) var(--s7)}
.band-slim{min-height:min(44vh,430px)}
.band-slim .over{padding-block:clamp(72px,16vh,160px) var(--s6)}

/* Every band frame on this site is a 3:1 panorama. Cover-cropping one into a
   phone-shaped box shows a slice about a fifth of its width: the subject is
   cropped out, and the type lands on whatever the sky happens to be doing
   there, which on a dusk frame is bright orange under a scrim tuned for a
   wide screen. So on a phone a band stops being a backdrop. The picture gets
   a band of its own at an aspect it survives, the type gets the plate under
   it, and there is no scrim because nothing overlaps any more. */
@media (max-width:899px){
  .band{display:block; min-height:0}
  .band > img{position:static; width:100%; height:auto;
    aspect-ratio:16/10; object-fit:cover}
  .band::after{content:none}
  .band .over{padding-block:var(--s7) var(--s7)}
  /* the hero frame keeps its subject on the right, so bias its crop there */
  .band-dusk > img{object-position:64% center}
}

.shead{margin-bottom:var(--s7)}
.shead .h2{grid-column:1/-1}
/* The sub needs its own mobile default. Without one it falls to auto
   placement and lands in a single track of the four-column grid, which on a
   phone is about ninety pixels: one word per line, on every section head on
   the site. */
.shead .sub{grid-column:1/-1}
@media (min-width:1024px){
  .shead .h2{grid-column:1/5}
  .shead .sub{grid-column:6/11}
}
.shead .sub{font-size:var(--t-lead); line-height:32px; color:var(--muted);
  margin-top:0; max-width:34em}
.shead .sub.ar{line-height:1.85}
@media (max-width:1023px){ .shead .sub{margin-top:20px} }

/* --- 6. MASTHEAD ------------------------------------------------------- */
.mast{position:sticky; inset-block-start:0; z-index:40; background:var(--canvas);
  border-bottom:1px solid var(--rule)}
.mast-in{display:flex; align-items:center; gap:var(--s6); min-height:var(--hdr)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;
  margin-inline-end:auto; flex:none}
.brand .mk{width:26px; height:31px; display:block; flex:none; color:var(--ink)}
.brand .wm{font-family:var(--f-disp); font-weight:600; font-size:1.375rem;
  letter-spacing:-0.01em; line-height:1}
.brand svg.th{height:19px; width:auto}
.nav{display:flex; gap:clamp(16px,2vw,32px); flex-wrap:nowrap; overflow-x:auto;
  scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none; font-size:var(--t-ui); font-weight:500;
  color:var(--muted); white-space:nowrap; padding-block:4px;
  border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--signal-mark)}
.util{display:flex; align-items:center; gap:var(--s4); flex:none}
.util a,.util button{font-size:var(--t-ui); font-weight:500; color:var(--muted);
  text-decoration:none; background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; line-height:20px}
.util a:hover,.util button:hover{color:var(--ink)}
.util .on{color:var(--ink); border-bottom:2px solid var(--signal-mark)}
.util .sep{color:var(--rule2)}
.langlink{font-family:var(--f-ar); font-size:1rem; letter-spacing:0}
.langlink.en{font-family:var(--f-body); font-size:var(--t-ui)}
@media (max-width:1023px){
  .mast-in{flex-wrap:wrap; gap:var(--s3) var(--s5); padding-block:10px; min-height:0}
  .nav{order:3; width:100%; padding-bottom:2px}
  .brand{margin-inline-end:0}
  .util{margin-inline-start:auto}
}

/* --- 7. THE PLATE.  A photograph and an engineering plate have no light
   mode, so this surface refuses the theme in both directions. ----------- */
.plate{background:var(--plate); color:var(--plate-ink);
  --canvas:var(--plate); --panel:#161A19; --ink:var(--plate-ink);
  --muted:var(--plate-muted); --rule:var(--plate-rule); --hair:#1A1F1E;
  --rule2:#454D4A; --signal:var(--signal-mark); --focus:#EDEDEA}

/* --- 8. THE SECTION BEAM.  The signature. ------------------------------ */
/* The mark is a scan: nine bars converging to a point. The beam is that
   idea at page scale. A horizontal band is cut through an engineering
   drawing; inside the band the drawing reverses and the functional layer is
   exposed, with one signal line naming the route actually under discussion.
   The mark sits at the right terminus and reads as the scan head.
   It is drawn, it is static, and every label on it names a real thing. */
/* The drawing sits on the page in graphite. The band is the near-black
   plate: inside it the drawing reverses, the functional layer appears, and
   one signal line names the route. Outside the band there is only outline. */
.beam{position:relative; border:1px solid var(--rule); background:var(--panel)}
.beam-s{border-block-end:1px solid var(--rule)}
.beam svg{display:block; width:100%; height:auto}
/* the rule belongs to the frame, so it is drawn under the drawing. Put on the
   caption it stopped at the 52em measure and read as a half-drawn line. */
.beam .cap{padding:14px 16px;
  font-size:var(--t-spec); line-height:22px; color:var(--muted); max-width:52em}
.beam .cap.ar{line-height:1.9}
/* No non-scaling stroke: these drawings are shown at roughly twice their
   coordinate space, and a hairline that refuses to grow with the drawing is
   a hairline nobody can read. */
/* LINE CLASSES.  ISO 128-2 puts extra-wide : wide : narrow at 4:2:1 and sets
   the floor for thick against thin at 2:1. These drawings used 1.5 against
   0.9, a ratio of 1.67, which is under that floor -- which is why everything
   in them carried the same weight and the eye had nowhere to land. */
.dwgline{fill:none; stroke:currentColor; stroke-width:1.5}      /* wide, visible */
.dwgline.fine{stroke-width:0.75; opacity:.55}                   /* narrow, detail */
.dwgcut{fill:none; stroke:currentColor; stroke-width:3;
  stroke-linejoin:round; stroke-linecap:square}                 /* extra-wide, cut */
.dwghid{fill:none; stroke:currentColor; stroke-width:0.75; opacity:.5;
  stroke-dasharray:5 4}                                         /* hidden edge */
.dwgctr{fill:none; stroke:currentColor; stroke-width:0.75; opacity:.42;
  stroke-dasharray:16 3 3 3}                                    /* axis, symmetry */
.dwgdim{fill:none; stroke:currentColor; stroke-width:0.75; opacity:.75}
.dwgfill{fill:currentColor}
/* MATERIAL.  What the section plane passes through is filled; what it passes
   over is not. Outlines alone gave a wireframe, and a wireframe of a product
   reads as a diagram of an idea. */
.dwgpoche{fill:currentColor; opacity:.16; stroke:none}
.dwgvoid{fill:currentColor; opacity:.085; stroke:none}
/* TYPE.  Three registers, because a callout, a dimension and an annotation
   are three different kinds of statement and were all being set the same. */
.dwgtx{font-family:var(--f-body); font-weight:500; fill:currentColor}
.dwgtx.call{font-weight:600; letter-spacing:.01em}
.dwgtx.num{font-weight:600; font-variant-numeric:tabular-nums}
.dwgtx.dim{opacity:.62; font-weight:400}
/* Drawing labels on the Arabic pages were being set in the Latin face, so the
   Arabic in every schematic fell back to whatever that font substitutes and
   did not match the Arabic on the page around it. A label carrying Arabic
   declares direction="rtl", which is a reliable hook for exactly those. */
.dwgtx[direction="rtl"]{font-family:var(--f-ar); letter-spacing:0 !important}
/* THE ROUTE.  The highlighted path is the only thing in these drawings that
   is an event rather than an object, so it is the only thing that moves. It
   draws itself once, on entry, at a fixed speed -- so on PipeGuard the near
   arrival lands before the far one, which is the measurement the product
   actually makes. Drawn is the resting state: with no script, no observer or
   no patience for motion, the drawing is simply complete. */
.route{fill:none; stroke:var(--signal-mark); stroke-width:3.2;
  stroke-linecap:round; stroke-dasharray:var(--l,999); stroke-dashoffset:0}
.routedot{fill:var(--signal-mark); transform-box:fill-box;
  transform-origin:center}
.beam.on .route{animation:dwgdraw var(--d,900ms) cubic-bezier(.37,0,.26,1) both}
.beam.on .routedot{animation:dwgpop 300ms var(--d,900ms) cubic-bezier(.34,1.5,.64,1) both}
@keyframes dwgdraw{from{stroke-dashoffset:var(--l,999)} to{stroke-dashoffset:0}}
@keyframes dwgpop{from{transform:scale(0); opacity:0} to{transform:scale(1); opacity:1}}
@media (prefers-reduced-motion:reduce){
  .beam.on .route,.beam.on .routedot{animation:none}
}

/* --- 9. FIGURES.  A figure carries a caption, not a stamp. ------------- */
figure{margin:0}
.fig{border:1px solid var(--rule); background:var(--panel)}
.fig > svg{display:block; width:100%; height:auto; padding:20px}
.fig figcaption{border-top:1px solid var(--rule); padding:14px 16px;
  font-size:var(--t-spec); line-height:22px; color:var(--muted)}
.fig figcaption.ar{line-height:1.9}
.fig figcaption b{color:var(--ink); font-weight:600}
.frame{border:1px solid var(--rule); background:var(--panel); position:relative}
.frame img{width:100%}
.reserved{aspect-ratio:16/9; display:grid; place-items:center;
  border:1px solid var(--rule2); background:var(--panel)}
.reserved .t{text-align:center; padding:var(--s5); color:var(--muted);
  font-size:var(--t-spec); line-height:22px; max-width:36em}
.reserved .t b{display:block; color:var(--ink); font-weight:600; margin-bottom:6px}
.gridline{stroke:var(--rule); stroke-width:0.5}
.gridline.maj{stroke:var(--rule2); stroke-width:0.7}
.axis{fill:none; stroke:var(--ink); stroke-width:1.4}

/* --- 10. THE PRODUCT REGISTER.  One register, shared rules, no cards. -- */
.reg{border-top:2px solid var(--ink)}
.reg li{border-bottom:1px solid var(--rule)}
.reg a.row{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3);
  padding:var(--s5) 0; text-decoration:none; align-items:start}
@media (min-width:900px){
  /* The last column was auto, so SYNCHRONIZE made its row compute different
     column widths from SEE -- and since each row is its own grid, nothing
     lined up down the table. A fixed final column makes every row resolve
     identically. */
  .reg a.row{grid-template-columns:40px minmax(0,3fr) minmax(0,2fr)
    minmax(0,4fr) 118px;
    gap:var(--s5); align-items:baseline; padding:var(--s5) var(--s4)}
  .reg .fn{text-align:end}
}
.reg-ico{display:block; inline-size:40px; block-size:40px; color:var(--ink)}
@media (max-width:899px){ .reg-ico{margin-block-end:var(--s2)} }
.reg a.row:hover{background:var(--panel)}
.reg a.row:hover .name{color:var(--signal)}
.reg .dom{color:var(--muted); font-size:var(--t-spec)}
.reg .fn{font-size:var(--t-lab); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap}
.reg .fn.ar{letter-spacing:0; text-transform:none; font-size:.8125rem}
.reg .desc{font-size:var(--t-spec); line-height:22px; color:var(--ink)}
.reg .desc.ar{line-height:1.9}
.reg .lead-row{padding-block:var(--s6)}
.reg .lead-row .name{font-size:2rem; line-height:1.15}

/* --- 11. CAPABILITY BANDS.  Four verbs, five products. ----------------- */
.caps{border-top:1px solid var(--rule)}
.caps > div{border-bottom:1px solid var(--rule); padding-block:var(--s6);
  display:grid; gap:var(--s3)}
@media (min-width:900px){
  .caps > div{grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,3fr);
    gap:var(--s6); align-items:baseline}
}
.caps .verb{font-family:var(--f-disp); font-weight:600; font-size:1.75rem;
  line-height:1.1; letter-spacing:-0.01em}
.caps .verb.ar{font-family:var(--f-ar); font-weight:700}
.caps .who{color:var(--muted); font-size:var(--t-spec)}
.caps .who a{text-decoration:none; border-bottom:1px solid var(--rule2)}
.caps .who a:hover{color:var(--ink); border-bottom-color:var(--signal-mark)}

/* --- 11a. AN INDUSTRY, INSIDE A BAND ----------------------------------- */
.ind .h2{max-width:14ch}
.ind .sub{color:#C6CBC7; font-size:var(--t-lead); line-height:32px;
  max-width:34em; margin-top:20px}
.ind .sub.ar{line-height:1.85}
.ind .who{margin-top:var(--s5); display:flex; flex-wrap:wrap; gap:8px 18px;
  font-size:var(--t-spec)}
.ind .who a{text-decoration:none; border-bottom:1px solid #4B534F;
  padding-bottom:2px}
.ind .who a:hover{border-bottom-color:var(--signal-mark); color:var(--signal-mark)}
.ind .tag{font-size:var(--t-lab); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--signal-mark); margin-bottom:14px}
.ind .tag.ar{letter-spacing:0; text-transform:none; font-size:.8125rem}

/* --- 12. TABLES.  Real tables. Engineers paste these into spreadsheets. */
.tbl{background:transparent; width:100%}
.tbl caption{text-align:start; padding-bottom:12px; color:var(--muted);
  font-size:var(--t-lab); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase}
.tbl caption.ar{letter-spacing:0; text-transform:none; font-size:.8125rem}
.tbl thead th{border-top:2px solid var(--ink); border-bottom:1px solid var(--rule);
  text-align:start; padding:10px 16px 10px 0; color:var(--muted);
  font-size:var(--t-lab); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap}
.tbl thead th.ar{letter-spacing:0; text-transform:none; font-size:.8125rem}
.tbl th,.tbl td{text-align:start; padding:12px 16px 12px 0; vertical-align:top;
  font-weight:400; font-size:var(--t-spec); line-height:22px;
  border-bottom:1px solid var(--rule)}
.tbl td:last-child,.tbl th:last-child{padding-inline-end:0}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:2px solid var(--ink)}
.tbl .grp th{color:var(--ink); font-weight:600; font-size:var(--t-lab);
  letter-spacing:.06em; text-transform:uppercase; padding-block:20px 8px;
  border-bottom:1px solid var(--rule2)}
.tbl .grp th.ar{letter-spacing:0; text-transform:none; font-size:.875rem}
.tbl .k{color:var(--muted); width:34%}
.tbl .v{color:var(--ink)}
.tbl .u{width:1%; white-space:nowrap; color:var(--muted); font-size:var(--t-data)}
.tbl .num{font-variant-numeric:tabular-nums lining-nums slashed-zero; white-space:nowrap}
.tbl .ar{line-height:1.9}
.tbl-scroll{overflow-x:auto}
.eq{font-variant-numeric:tabular-nums lining-nums slashed-zero;
  white-space:nowrap; font-style:italic; letter-spacing:.01em}
.status{color:var(--muted); white-space:nowrap; font-size:var(--t-data)}
.status.met{color:var(--signal)}
/* Below this width a three-column specification table gives each value about
   a hundred pixels, which is two words a line. So on a phone the table stops
   pretending to be a table: every row becomes a block, the key leads it, and
   any column that is not the value prints its own name above itself. Nothing
   is hidden and nothing is truncated. */
@media (max-width:640px){
  .tbl thead{position:absolute; width:1px; height:1px; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .tbl tbody tr{display:block; padding-block:16px;
    border-bottom:1px solid var(--rule)}
  .tbl tbody tr.grp{padding-block:26px 6px; border-bottom:1px solid var(--rule2)}
  .tbl tbody:last-of-type tr:last-child{border-bottom:2px solid var(--ink)}
  .tbl tbody th,.tbl tbody td{display:block; width:auto; border:0; padding:0}
  /* width:auto has to be repeated at this specificity: the base .tbl .k and
     .tbl .u are two classes and outrank `.tbl tbody th`, which is one class
     and two elements, so the percentage widths survive the reset otherwise. */
  .tbl .k{color:var(--ink); font-weight:600; margin-bottom:6px; width:auto}
  .tbl .v{margin-bottom:10px; width:auto}
  .tbl .v:last-child{margin-bottom:0}
  .tbl .u{white-space:normal; width:auto}
  .tbl td:not(.v)[data-l]::before{content:attr(data-l); display:block;
    font-size:var(--t-lab); font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted); margin-bottom:2px}
  .tbl td.ar:not(.v)[data-l]::before{letter-spacing:0; text-transform:none;
    font-size:.8125rem}
}

/* --- 13. LISTS AND LEDGERS -------------------------------------------- */
.dl{width:100%}
.dl .r{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:var(--s5); padding-block:14px; border-bottom:1px solid var(--rule)}
.dl .r:first-child{border-top:2px solid var(--ink)}
.dl dt{color:var(--muted); font-size:var(--t-spec)}
.dl dd{color:var(--ink); font-size:var(--t-spec)}
@media (max-width:640px){ .dl .r{grid-template-columns:1fr; gap:4px} }
.steps{border-top:2px solid var(--ink)}
.steps li{display:grid; grid-template-columns:minmax(0,1fr);
  gap:var(--s3); padding-block:var(--s5); border-bottom:1px solid var(--rule)}
@media (min-width:900px){
  .steps li{grid-template-columns:minmax(0,2fr) minmax(0,5fr); gap:var(--s6)}
}
.steps h4{font-family:var(--f-disp); font-weight:600; font-size:var(--t-h3);
  line-height:1.16; letter-spacing:-0.01em}
.steps h4.ar{font-family:var(--f-ar); font-weight:700; line-height:1.5}
.steps p{font-size:var(--t-spec); line-height:23px; max-width:40em}
.steps p.ar{line-height:1.9}
.plain{border-top:1px solid var(--rule)}
.plain li{border-bottom:1px solid var(--rule); padding-block:12px;
  font-size:var(--t-spec)}
.inline{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:var(--t-spec);
  color:var(--muted)}
.inline b{color:var(--ink); font-weight:500}

/* --- 14. ACTIONS ------------------------------------------------------- */
.acts{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6)}
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  border:1px solid var(--ink); border-radius:3px; padding:11px 18px;
  min-height:44px; font-family:var(--f-body); font-size:var(--t-ui);
  font-weight:500; background:transparent; color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background 120ms linear,color 120ms linear}
}
.btn:hover{background:var(--ink); color:var(--canvas)}
.btn-fill{background:var(--ink); color:var(--canvas)}
.btn-fill:hover{background:transparent; color:var(--ink)}
.link{text-decoration:none; border-bottom:1px solid var(--rule2);
  font-size:var(--t-ui); font-weight:500; white-space:nowrap}
.link:hover{border-bottom-color:var(--signal-mark); color:var(--signal)}
.links{display:flex; gap:var(--s5); flex-wrap:wrap}

/* --- 15. THE EVIDENCE FIELD.  One measurement, and it is the only one. - */
.ev{background:var(--plate); color:var(--plate-ink);
  --canvas:var(--plate); --ink:var(--plate-ink); --muted:var(--plate-muted);
  --rule:var(--plate-rule); --signal:var(--signal-mark)}
.ev .big{font-family:var(--f-body); font-weight:500;
  font-size:clamp(3.5rem,9vw,7rem); line-height:1; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums lining-nums slashed-zero}
.ev .big em{font-style:normal; font-size:.42em; letter-spacing:-0.01em;
  color:var(--plate-muted); margin-inline-start:.18em}
.ev .facts{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s7); margin-top:var(--s6)}
.ev .facts > div{min-width:8rem}
.ev .facts dt{font-size:var(--t-lab); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--plate-muted)}
.ev .facts dt.ar{letter-spacing:0; text-transform:none; font-size:.8125rem}
.ev .facts dd{font-size:1.125rem; font-weight:500; margin-top:4px}

/* --- 16. FOOTER -------------------------------------------------------- */
.foot{border-top:1px solid var(--rule); padding-block:var(--s8) var(--s7)}
.foot a{text-decoration:none; color:var(--muted); font-size:var(--t-spec)}
.foot a:hover{color:var(--ink)}
.foot h4{font-size:var(--t-lab); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); margin-bottom:14px}
.foot h4.ar{letter-spacing:0; text-transform:none; font-size:.8125rem}
.foot ul li{padding-block:5px}
.legal{color:var(--muted); font-size:var(--t-data); line-height:20px;
  max-width:70em; margin-top:var(--s7)}
.legal p+p{margin-top:8px}
.legal.ar{line-height:1.9}

/* --- 17. MOTION.  Colour changes on hover and focus. Nothing else. ----- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* --- 18. PRINT.  Buyers print specification pages and take them into
   meetings, so the dark fields discharge to white and keep their rules. -- */
/* ---------------------------------------------------------------------------
   PRODUCT RAIL AND PRODUCT BLOCKS
   The five families are one page. The rail at the top is the argument: one
   line through five stops, drawn in ink up to the family being read and in
   rule after it, so scroll position shows how much of the stack has been
   assembled. Squares, not circles: this is the same drawing language as the
   schematics.
   --------------------------------------------------------------------------- */
.ptl{position:sticky; inset-block-start:var(--hdr-real, var(--hdr)); z-index:30;
  background:var(--canvas); border-block-end:1px solid var(--rule)}
.ptl-in{list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr))}
.ptl-s{min-width:0}
.ptl-a{display:block; text-decoration:none; color:var(--muted);
  padding:16px var(--s3) 14px; text-align:center; position:relative}
/* the rail, one segment per stop, meeting under the neighbouring nodes */
.ptl-a::before{content:""; position:absolute; inset-block-start:20px;
  inset-inline:0; border-block-start:1px solid var(--rule)}
.ptl-s:first-child .ptl-a::before{inset-inline-start:50%}
.ptl-s:last-child  .ptl-a::before{inset-inline-end:50%}
.ptl-a[data-done="1"]::before{border-block-start-color:var(--ink)}
.ptl-d{position:relative; z-index:1; display:block;
  inline-size:9px; block-size:9px; margin-inline:auto; background:var(--canvas);
  box-shadow:0 0 0 5px var(--canvas), inset 0 0 0 1px var(--rule2)}
.ptl-n{display:block; margin-block-start:12px; font-weight:600;
  font-size:var(--t-data); line-height:18px; letter-spacing:-0.005em;
  color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ptl-v{display:block; margin-block-start:2px; font-size:var(--t-lab);
  line-height:16px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted)}
.ptl-a.ar .ptl-v{letter-spacing:0; text-transform:none; font-size:.8125rem}
.ptl-a:hover .ptl-n{color:var(--ink)}
.ptl-a:hover .ptl-d{box-shadow:0 0 0 5px var(--canvas), inset 0 0 0 1px var(--ink)}
.ptl-a[data-done="1"] .ptl-d{background:var(--ink);
  box-shadow:0 0 0 5px var(--canvas), inset 0 0 0 1px var(--ink)}
.ptl-a[aria-current="true"]{color:var(--ink)}
.ptl-a[aria-current="true"] .ptl-n{color:var(--ink)}
.ptl-a[aria-current="true"] .ptl-d{background:var(--signal-mark);
  box-shadow:0 0 0 5px var(--canvas), inset 0 0 0 1px var(--ink)}
/* the rail sits on the canvas, so a raised block must not tint it */
.ptl-a[aria-current="true"] .ptl-v{color:var(--ink)}
@media (max-width:767px){
  .ptl-in{display:flex; overflow-x:auto; scrollbar-width:none;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
  .ptl-in::-webkit-scrollbar{display:none}
  .ptl-s{flex:0 0 auto; inline-size:128px; scroll-snap-align:center}
}

/* a jump has to clear the masthead and the rail, both of which are sticky */
.pblk{scroll-margin-block-start:calc(var(--hdr-real, var(--hdr))
      + var(--rail-h, 88px) + 8px)}
.pblk-h{align-items:end; row-gap:var(--s5)}
.pblk-n{margin-block:10px 0; font-size:clamp(2rem,4.4vw,3rem); max-width:none}
.pblk-c{font-size:var(--t-lead); line-height:30px; color:var(--muted);
  margin-block-start:10px; max-width:22em}
.pblk-c.ar{line-height:1.85}
.adds{font-family:var(--f-disp); font-weight:600; font-size:1.625rem;
  line-height:1.2; letter-spacing:-0.012em; margin:0 0 12px; color:var(--ink)}
.adds.ar{font-family:var(--f-ar); font-weight:700; line-height:1.6;
  letter-spacing:0; font-size:1.4375rem}
.pblk-w .body{max-width:34em}
.pblk-beam{margin-block-start:var(--s8)}
.pblk-b{margin-block-start:var(--s8); row-gap:var(--s8)}
.pblk-f{margin-block-start:var(--s8); row-gap:var(--s6)}

/* a specification is a list of short answers. Setting it as a table only
   bought white space and a third column nobody needed. */
.facts{list-style:none; margin:10px 0 0; padding:0;
  border-block-start:1px solid var(--rule)}
.facts li{padding-block:12px; border-block-end:1px solid var(--hair)}
.facts-k{display:block; font-size:var(--t-lab); line-height:16px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.facts-k.ar{letter-spacing:0; text-transform:none; font-size:.8125rem}
.facts-v{display:block; margin-block-start:3px; font-size:var(--t-spec);
  line-height:23px; color:var(--ink)}
.facts-v.ar{line-height:1.9}

.own{border-block-start:1px solid var(--ink)}
.own-r{display:grid; gap:8px; padding-block:16px;
  border-block-end:1px solid var(--rule)}
@media (min-width:768px){
  .own-r{grid-template-columns:minmax(0,160px) minmax(0,1fr); gap:var(--s5);
    align-items:start}
  .own-r > .lab{padding-block-start:7px}
}
.own-r .chips{margin:0}

.chips{list-style:none; margin:10px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px}
.chips li{font-size:var(--t-data); line-height:19px; color:var(--ink);
  border:1px solid var(--rule); padding:5px 10px}
.chips li.ar{line-height:1.9; padding-block:3px}

@media (max-width:767px){
  /* the section beams are engineering drawings 760 units wide. Fitted to a
     phone every label lands at about five pixels, which is a picture of a
     drawing rather than a drawing. Give the frame its own scroller and hold
     the drawing at a width its annotation can be read at; the caption stays
     put underneath. */
  .beam-s{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .beam-s svg{min-width:660px}
  .pblk-beam{margin-block-start:var(--s7)}
  .pblk-b,.pblk-f{margin-block-start:var(--s7)}
}

/* the contact page is one address. It is set at display size because that is
   the whole of the page's business, not because it needs decoration. */
.addr{padding-block:var(--s5) var(--s8)}
.addr-a{display:inline-block; margin-block:14px 20px; font-family:var(--f-disp);
  font-weight:600; font-size:clamp(1.75rem,4.4vw,3.25rem); line-height:1.1;
  letter-spacing:-0.02em; color:var(--ink); text-decoration:none;
  border-block-end:2px solid var(--rule2); padding-block-end:6px;
  overflow-wrap:anywhere}
.addr-a:hover{color:var(--signal); border-block-end-color:var(--signal-mark)}
.addr .body{max-width:34em; color:var(--muted)}

/* the supply record and the sectors: a plain field of cells on a hairline
   grid. Twelve categories set as prose was a wall; set as cells it is a
   catalogue, which is what it is. */
.supply{display:grid; grid-template-columns:minmax(0,1fr);
  border-block-start:1px solid var(--ink); border-inline-start:1px solid var(--rule)}
@media (min-width:640px){ .supply{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .supply{grid-template-columns:repeat(3,minmax(0,1fr))} }
.supply > div{padding:var(--s5) var(--s5) var(--s6);
  border-block-end:1px solid var(--rule); border-inline-end:1px solid var(--rule)}
.cell-ico{display:block; inline-size:44px; block-size:44px;
  margin-block-end:16px; color:var(--ink)}
.cell-ico .ic,.reg-ico .ic{fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; opacity:.82}
.cell-ico .ic.fine,.reg-ico .ic.fine{stroke-width:1; opacity:.42}
.cell-ico .ic.hi,.reg-ico .ic.hi{stroke:var(--signal); opacity:1}
.sectors > div:hover .ic{opacity:.95}
.reg a.row:hover .ic{opacity:.95}
.reg a.row:hover .ic.hi{stroke:var(--signal-mark)}
.sectors > div:hover .ic.hi{stroke:var(--signal-mark)}
.cell-t{font-family:var(--f-body); font-weight:600; font-size:1.0625rem;
  line-height:1.35; letter-spacing:-0.005em; margin:0}
.cell-t.ar{font-family:var(--f-ar); font-weight:700; line-height:1.6}
.cell-d{margin:8px 0 0; font-size:var(--t-spec); line-height:23px;
  color:var(--muted)}
.cell-d.ar{line-height:1.9}
.sectors .cell-t{font-family:var(--f-disp); font-weight:600; font-size:1.5rem;
  line-height:1.15; letter-spacing:-0.01em}
.sectors .cell-t.ar{font-family:var(--f-ar); font-weight:700; line-height:1.5;
  font-size:1.375rem}

/* THE CONTACT FORM
   Square, hairline, and on the page's own ground: a browser's default form
   controls are the one place a careful site suddenly looks like a different
   site. The outcome is shown by :target, so nothing here needs a script. */
.cform{max-width:32em; margin-block-start:var(--s5)}
.cform .lab{display:block; margin-block-end:8px}
.cform .lab + input, .cform .lab + textarea{margin-block-end:var(--s5)}
.cform input[type="email"], .cform textarea{
  display:block; inline-size:100%; box-sizing:border-box;
  font-family:var(--f-body); font-size:var(--t-body); line-height:26px;
  color:var(--ink); background:var(--canvas);
  border:1px solid var(--rule2); border-radius:0;
  padding:11px 13px; -webkit-appearance:none; appearance:none}
.cform.ar textarea{font-family:var(--f-ar); line-height:1.9}
.cform textarea{resize:vertical; min-block-size:7em}
.cform input::placeholder, .cform textarea::placeholder{color:var(--muted); opacity:1}
.cform input:hover, .cform textarea:hover{border-color:var(--ink)}
.cform input:focus-visible, .cform textarea:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-color:var(--ink)}
.cform input:user-invalid{border-color:var(--signal)}
.cform button.btn{font-family:var(--f-body); cursor:pointer}
.cform.ar button.btn{font-family:var(--f-ar)}
/* a field a person never sees and a bot fills in */
.hp{position:absolute; inline-size:1px; block-size:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; margin:0}

.cnote{display:none; margin-block-end:var(--s5); padding:14px 16px;
  border-inline-start:3px solid var(--rule2); background:var(--panel)}
.cnote:target{display:block}
.cnote b{display:block; font-size:var(--t-body); line-height:26px}
.cnote p{margin:4px 0 0; font-size:var(--t-spec); line-height:23px;
  color:var(--muted); overflow-wrap:anywhere}
.cnote.ar p{line-height:1.9}
.cnote.ok:target{border-inline-start-color:var(--signal-mark)}
.cnote.bad:target{border-inline-start-color:var(--signal)}
/* once it has sent, the form has done its job and the page should say so
   rather than invite the same message twice */
body:has(#sent:target) .cform{display:none}

/* the address is now the second way in, not the whole page */
.addr .addr-a{font-size:clamp(1.375rem,2.4vw,1.875rem)}

/* ===========================================================================
   THE INSTRUMENT VIEW
   Not a diagram of the equipment: a picture of what the instrument sees. The
   plate fills the frame, the plant is drawn in cutaway, and Rafed's own
   hardware is a block with a bracket round it -- identified, never specified.
   Two motion layers, after Territory Studio's split: an ambient one that says
   the run is being listened to, and a hero one that is the single event the
   drawing is about. At rest, with no script, every line is simply visible.
   =========================================================================== */
.hud{background:var(--plate); position:relative; overflow:hidden}
.hud > svg{display:block; width:100%; height:auto}

.hudbr{fill:none; stroke:#EDEDEA; stroke-width:1.6; opacity:.45}
.hudbr2{fill:none; stroke:var(--signal-mark); stroke-width:1.5; opacity:.9}
.hudrail{stroke:#7C8681; stroke-width:1; opacity:.45}
.hudtick{stroke:#7C8681; stroke-width:1.4; opacity:.75}
.hudtick.fine{stroke-width:.8; opacity:.4}
/* material: wall filled, bore hollow, cut face heaviest */
.hudwall{fill:#EDEDEA; fill-opacity:.13; stroke:none}
.hudbore{fill:#050807; fill-opacity:.55; stroke:none}
.hudcut{fill:none; stroke:#EDEDEA; stroke-width:2.6; opacity:.92}
.hudline{fill:none; stroke:#EDEDEA; stroke-width:1.1; opacity:.5}
.hudaxis{stroke:#7C8681; stroke-width:.9; opacity:.45; stroke-dasharray:20 4 3 4}
.hudweld{stroke:#EDEDEA; stroke-width:1; opacity:.4}
.hudband{fill:#EDEDEA; fill-opacity:.22; stroke:#EDEDEA; stroke-width:1.4;
  stroke-opacity:.8}
.hudbody{fill:#EDEDEA; fill-opacity:.09; stroke:#EDEDEA; stroke-width:1.7;
  stroke-opacity:.92}
.hudcable{fill:none; stroke:#EDEDEA; stroke-width:1.4; opacity:.55}
.hudcrack{fill:none; stroke:var(--signal-mark); stroke-width:2.2; opacity:.95}
.hudlead{stroke:#7C8681; stroke-width:.9; opacity:.55}
.hudnode{fill:var(--signal-mark)}
.hudtx{fill:#EDEDEA; font-family:var(--f-body); font-weight:500; opacity:.82;
  letter-spacing:.05em}
.hudtx.call{font-weight:600; opacity:1; letter-spacing:.045em}
.hudtx.hdr{font-family:var(--f-mono); font-weight:400; letter-spacing:.11em;
  opacity:.62}
/* Arabic is never letter-spaced and never set in the Latin mono face. The HUD
   type is tracked out on purpose, which is exactly the thing that pulls an
   Arabic word apart into its separate letters. */
.hudtx[direction="rtl"]{font-family:var(--f-ar); letter-spacing:0 !important}
.hudtx.num{fill:var(--signal-mark); font-weight:500; letter-spacing:0}
.hudtx.dimmed{opacity:.45}
.huddim{stroke:#7C8681; stroke-width:1; opacity:.7}

/* --- ambient: the run is being listened to, all of it, all the time ------ */
.hudambient{fill:none; stroke:#7C8681; stroke-width:1.2; opacity:.3;
  stroke-dasharray:3 9}
.beam.on .hudambient{animation:hudmarch 1.4s linear infinite}
@keyframes hudmarch{to{stroke-dashoffset:-12}}

/* --- hero: one escape, two arrivals, one speed, two distances ----------- */
.hudstream{fill:none; stroke:#7C8681; stroke-width:1.4; opacity:.24;
  stroke-dasharray:15 26; stroke-linecap:round}
.beam.on .hudstream{animation:hudstream linear infinite}
@keyframes hudstream{to{stroke-dashoffset:-41}}

/* THE WAVE PACKET.  One burst at the leak sends a packet each way. Both run
   off one 2.8s clock at one speed: the near arrival is four times closer, so
   its keyframe finishes at 25% and holds, and the two stay locked instead of
   drifting. The amplitude decays over distance in the geometry itself, so the
   far node visibly hears a smaller signal than the near one. */
.hudwave{fill:none; stroke:var(--signal-mark); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; opacity:.95}
.hudwave.halo{stroke-width:9; opacity:.13}
.beam.on .hudwave.near{animation:hudwn 2.8s linear infinite}
.beam.on .hudwave.far{animation:hudwf 2.8s linear infinite}
@keyframes hudwn{0%{stroke-dashoffset:var(--w)} 25%,100%{stroke-dashoffset:var(--e)}}
@keyframes hudwf{0%{stroke-dashoffset:var(--w)} 100%{stroke-dashoffset:var(--e)}}

.hudriser{fill:none; stroke:var(--signal-mark); stroke-width:1.6; opacity:.45;
  stroke-dasharray:3 4}
.hudfin{stroke:#EDEDEA; stroke-width:.8; opacity:.3}
.hudshaft{stroke:#EDEDEA; stroke-width:3.4; opacity:.85; stroke-linecap:round}
.hudspoke{stroke:#EDEDEA; stroke-width:1.1; opacity:.45}
.hudball{fill:#EDEDEA; fill-opacity:.35; stroke:#EDEDEA; stroke-width:.9;
  stroke-opacity:.7}
/* numbered callouts, and the key they point into */
.hudkey circle{fill:var(--plate); stroke:var(--signal-mark); stroke-width:1.4}
.hudkey text{fill:var(--signal-mark); font-family:var(--f-mono); font-weight:500;
  font-size:10.5px; letter-spacing:0}
.hudkey.sm circle{stroke-width:1.2}
.hudkey.sm text{font-size:8.5px}
.hudsensor{stroke:var(--signal-mark); stroke-width:2.6; opacity:.8}
.hudgap{stroke:var(--signal-mark); stroke-width:1.4; opacity:.6;
  stroke-dasharray:4 5}
.hudspin{transform-box:fill-box; transform-origin:center}
.beam.on .hudspin{animation:hudspin linear infinite}
@keyframes hudspin{to{transform:rotate(360deg)}}

/* every packet runs off the same clock and the same speed; only the distance
   and the phase change, so the five drawings read as one instrument */
.hudwave.sig,.hudwave.opt,.hudwave.opt2,.hudwave.out,.hudwave.out2,
.hudwave.arb{stroke-dasharray:inherit}
.beam.on .hudwave.sig{animation:hudwf 2.4s linear infinite}
.beam.on .hudwave.opt{animation:hudwf 1.6s linear infinite}
.beam.on .hudwave.opt2{animation:hudwf 1.6s .55s linear infinite}
.beam.on .hudwave.out{animation:hudwf 2.6s linear infinite}
.beam.on .hudwave.out2{animation:hudwf 2.6s .9s linear infinite}
.beam.on .hudwave.arb{animation:hudwf 2.0s linear infinite}

/* light leaving the illuminator */
.hudray{fill:none; stroke:var(--signal-mark); stroke-width:1.2; opacity:.28;
  stroke-dasharray:5 12}
.beam.on .hudray{animation:hudmarch2 1.1s linear infinite}
@keyframes hudmarch2{to{stroke-dashoffset:-17}}

/* what does not come back */
.huddiode{fill:var(--signal-mark); fill-opacity:.85; stroke:var(--signal-mark);
  stroke-width:1.2; stroke-linejoin:round}
.hudwall2{stroke:#EDEDEA; stroke-width:5; opacity:.9; stroke-linecap:round}
.hudreject{fill:none; stroke:#7C8681; stroke-width:1.8; opacity:.55;
  stroke-dasharray:7 7}
.beam.on .hudreject{animation:hudback 1.5s linear infinite}
@keyframes hudback{to{stroke-dashoffset:14}}
.hudblock line{stroke:var(--signal-mark); stroke-width:2.4; stroke-linecap:round}
.hudblock{opacity:0}
.beam.on .hudblock{animation:hudblock 2.6s ease-out infinite}
@keyframes hudblock{0%,55%{opacity:0} 62%{opacity:1} 90%,100%{opacity:0}}

/* four sources that disagree, one output that does not */
.hudtick2{fill:none; stroke:var(--signal-mark); stroke-width:2.2; opacity:0;
  stroke-dasharray:10 999}
.beam.on .hudtick2{animation:hudtick2 2.0s linear infinite}
@keyframes hudtick2{0%{opacity:.9; stroke-dashoffset:0}
  70%,100%{opacity:0; stroke-dashoffset:-220}}
.hudpps{stroke:var(--signal-mark); stroke-width:2.4; opacity:0}
.beam.on .hudpps{animation:hudpps 1.4s steps(1,end) infinite}
@keyframes hudpps{0%{opacity:1} 40%,100%{opacity:0}}
/* what the node heard, at the moment it heard it */
.hudheard{fill:none; stroke:var(--signal-mark); stroke-width:1.3; opacity:0}
.beam.on .hudheard{animation:hudheard 2.8s ease-out infinite}
@keyframes hudheard{0%,4%{opacity:0} 10%{opacity:1} 45%,100%{opacity:0}}
.hudpulse.near{stroke-dasharray:18 138}
.hudpulse.far{stroke-dasharray:18 274}
.beam.on .hudpulse.near{animation:hudpn 1.2s linear infinite}
.beam.on .hudpulse.far{animation:hudpf 2.4s linear infinite}
@keyframes hudpn{from{stroke-dashoffset:18} to{stroke-dashoffset:-138}}
@keyframes hudpf{from{stroke-dashoffset:18} to{stroke-dashoffset:-274}}

.hudping{fill:none; stroke:var(--signal-mark); stroke-width:1.6;
  transform-box:fill-box; transform-origin:center; opacity:0}
.beam.on .hudping{animation:hudping 2.4s cubic-bezier(.2,.7,.4,1) infinite}
@keyframes hudping{0%{transform:scale(.3); opacity:.9}
  70%,100%{transform:scale(2.6); opacity:0}}

.hudplume{fill:none; stroke:var(--signal-mark); stroke-width:1.6; opacity:.35}
.beam.on .hudplume{animation:hudplume 2.4s ease-out infinite}
@keyframes hudplume{0%{opacity:0} 12%{opacity:.8} 100%{opacity:0}}

.hudsweep{pointer-events:none}
.beam.on .hudsweep{animation:hudsweep 11s linear infinite}
@keyframes hudsweep{from{transform:translateX(0)} to{transform:translateX(1030px)}}

@media (prefers-reduced-motion:reduce){
  .beam.on .hudambient,.beam.on .hudwave,.beam.on .hudping,
  .beam.on .hudplume,.beam.on .hudsweep,.beam.on .hudstream,
  .beam.on .hudheard,.beam.on .hudspin,.beam.on .hudray,
  .beam.on .hudreject,.beam.on .hudblock,.beam.on .hudtick2,
  .beam.on .hudpps{animation:none}
  .hudtick2,.hudpps,.hudblock{opacity:.55}
  .hudwave{stroke-dasharray:none; opacity:.85}
  .hudheard{opacity:.7}
  .hudping{opacity:.45}
  .hudplume{opacity:.5}
}

/* THE PROCESS RAIL
   Seven steps that genuinely cannot be reordered, so they are drawn as a
   sequence rather than as seven equal boxes: one line down the side, a node
   per step, and the number set as a figure rather than a bullet. */
.proc{list-style:none; margin:0; padding:0; position:relative}
.proc::before{content:""; position:absolute; inset-block:14px 22px;
  inset-inline-start:21px; border-inline-start:1px solid var(--rule)}
.proc li{position:relative; display:grid; gap:var(--s3);
  grid-template-columns:44px minmax(0,1fr); padding-block:var(--s5)}
@media (min-width:900px){
  .proc li{grid-template-columns:44px minmax(0,3fr) ; column-gap:var(--s6)}
  .proc-b{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,5fr);
    column-gap:var(--s6); align-items:baseline}
}
.proc-n{position:relative; z-index:1; font-family:var(--f-disp);
  font-weight:600; font-size:1.125rem; line-height:1; color:var(--signal);
  background:var(--canvas); padding-block:7px; text-align:center;
  font-variant-numeric:tabular-nums}
.sec.raised .proc-n{background:var(--panel)}
.sec.sunk .proc-n{background:var(--sunk)}
.proc-t{font-family:var(--f-disp); font-weight:600; font-size:var(--t-h3);
  line-height:1.16; letter-spacing:-0.01em; margin:0}
.proc-t.ar{font-family:var(--f-ar); font-weight:700; line-height:1.5}
.proc-d{margin:6px 0 0; font-size:var(--t-spec); line-height:23px;
  max-width:42em; color:var(--muted)}
.proc-d.ar{line-height:1.9}
@media (min-width:900px){ .proc-d{margin-top:0}

/* Careers. Six disciplines read as a set, so they get equal cells rather than
   a bullet list; the honest-facts column reuses .facts so the section carries
   no vocabulary of its own. */
.roles{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5) var(--s6);
  margin-block-start:var(--s5); padding-block-start:var(--s5);
  border-block-start:1px solid var(--rule)}
@media (min-width:640px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.roles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.role-t{font-family:var(--f-disp); font-weight:600; font-size:1.0625rem;
  line-height:1.25; letter-spacing:-0.01em; margin:0; color:var(--ink)}
.role-t.ar{font-family:var(--f-ar); font-weight:700; line-height:1.5;
  letter-spacing:0; font-size:1rem}
.role-d{margin:6px 0 0; font-size:var(--t-spec); line-height:23px;
  color:var(--muted)}
.role-d.ar{line-height:1.9}
.careers-b{margin-block-start:var(--s7)}
.apply-a{margin-block-start:var(--s4)} }

/* THE COMPANY HERO.  The gauge, not a refinery at dusk: the first product the
   company ever sold, and the whole argument in one object. On the plate, so
   the page still opens dark, but split rather than full-bleed because a macro
   photograph crops to nothing in a band. */
.chero{background:var(--plate); color:var(--plate-ink);
  padding-block:var(--s9) var(--s10)}
.chero .g{align-items:center; row-gap:var(--s7)}
/* The photograph is a lit dial in a dark surround, so the only thing wrong
   with it was the crop: a hard rectangle sitting on the plate reads as a
   pasted-on picture. One radial mask dissolves all four edges at once --
   patching them with per-side gradients left the right and bottom hard -- and
   a second, gentler gradient darkens the periphery, which is what the
   photograph was already half doing: a light on the dial, the rest of the
   room dark. --plate refuses the theme, so its channels are written out. */
.chero-ph{position:relative; isolation:isolate;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 56% 48%,
    #000 50%, rgba(0,0,0,.72) 82%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 70% at 56% 48%,
    #000 50%, rgba(0,0,0,.72) 82%, transparent 100%)}
.chero-ph img{display:block; inline-size:100%; block-size:auto}
.chero-ph::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 68% 68% at 56% 48%,
    rgba(17,20,19,0) 60%, rgba(17,20,19,.14) 88%, rgba(17,20,19,.26) 100%)}
.chero .hero{color:var(--plate-ink)}
.chero .lead{color:var(--plate-muted); max-width:26em; margin-block-start:var(--s5)}
.chero + .sec{border-top:0}
#s-founder{padding-block:var(--s8)}
#s-founder .body{max-width:46em; color:var(--muted)}

/* THE ORIGIN NOTE.  One picture and one sentence, straight after the hero.
   It was buried at caption size under a Registrations heading, which is the
   wrong weight for the only line on the page that explains why the company
   exists. */
.origin-i{align-self:start}
.origin-i img{display:block; inline-size:100%; block-size:auto;
  border:1px solid var(--rule)}
.origin-t{align-self:center}
.origin-t .lead{max-width:24em; margin:0}
@media (max-width:899px){ .origin-t{margin-block-start:var(--s5)} }

@media print{
  :root{--canvas:#fff; --panel:#fff; --ink:#000; --muted:#333; --rule:#999;
        --rule2:#666; --hair:#ccc; --signal:#000; --signal-mark:#000; --mar:0}
  body{background:#fff; color:#000; font-size:10pt; line-height:15pt}
  @page{margin:14mm}
  .nav,.util,.acts,.skip,.mast{display:none !important}
  .plate,.beam,.ev{background:#fff !important; color:#000 !important;
    --canvas:#fff; --ink:#000; --muted:#333; --rule:#999; --signal:#000;
    border:2px solid #000}
  .beam svg,.ev{padding:8pt}
  .sec{padding-block:14pt; break-inside:auto}
  tr,.steps li,.reg li,.caps > div,figure{break-inside:avoid}
  .tbl caption,.shead{break-after:avoid}
  thead{display:table-header-group}
  .hero{font-size:26pt} .h2{font-size:17pt} .h3{font-size:13pt}
  .lead{font-size:12pt} .ev .big{font-size:34pt}
  a[href^="http"]::after{content:" (" attr(href) ")"; color:#555; font-size:8pt}
}