/* self-hosted fonts (generated by tools/build.mjs) */
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/poppins-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/poppins-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/poppins-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/poppins-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/poppins-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/poppins-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/poppins-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/poppins-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Ethiopic';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/noto-sans-ethiopic-ethiopic-400-normal.woff2) format("woff2");unicode-range:U+030E,U+1200-1399,U+2D80-2DDE,U+AB01-AB2E,U+1E7E0-1E7E6,U+1E7E8-1E7EB,U+1E7ED-1E7EE,U+1E7F0-1E7FE}
@font-face{font-family:'Noto Sans Ethiopic';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/noto-sans-ethiopic-ethiopic-600-normal.woff2) format("woff2");unicode-range:U+030E,U+1200-1399,U+2D80-2DDE,U+AB01-AB2E,U+1E7E0-1E7E6,U+1E7E8-1E7EB,U+1E7ED-1E7EE,U+1E7F0-1E7FE}

/* ============================================================================
   Delta Technology — website stylesheet
   Art direction: "Instrument". Engineering-document structure, hairline rules,
   no drop shadows, no stock-photo furniture. Every colour is a token from the
   brand manual; nothing is invented here.
   ========================================================================= */

:root{
  color-scheme: light;

  /* brand tokens — Part 4 of the manual is the master for these */
  --brand:#001F7A; --brand-2:#2E63BE;
  --accent:#F2A93B; --accent-deep:#8C5A06;
  --surface:#DCE4F0; --wash:#EAEFF7; --paper:#FAFAF9;
  --ink:#0A1420; --muted:#55647C;
  --ok:#1B7A50; --warn:#A35D00; --bad:#A32018;
  --line:#C7D2E3;
  --deep:#00164F;                 /* logo-derived, for the darkest fields */

  /* Noto Sans Ethiopic closes every stack, so a Ge'ez character always has a
     face to land in even where a selector has been missed. */
  --f-display:'Poppins', 'Noto Sans Ethiopic', Helvetica, Arial, sans-serif;
  --f-body:'IBM Plex Sans', 'Noto Sans Ethiopic', Helvetica, Arial, sans-serif;
  --f-mono:'IBM Plex Mono', 'Noto Sans Ethiopic', ui-monospace, monospace;
  --f-am:'Noto Sans Ethiopic', 'IBM Plex Sans', sans-serif;

  --wrap:1220px;
  --gut:clamp(1.15rem, 4.2vw, 3rem);
  --rail:clamp(0px, 6vw, 108px);   /* the engineering-document left rail */

  --step--1:clamp(.78rem,.76rem + .12vw,.84rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.09rem);
  --step-1:clamp(1.16rem,1.09rem + .34vw,1.4rem);
  --step-2:clamp(1.4rem,1.24rem + .78vw,1.95rem);
  --step-3:clamp(1.72rem,1.42rem + 1.5vw,2.75rem);
  --step-4:clamp(2.1rem,1.5rem + 2.9vw,4.1rem);
  --step-5:clamp(2.5rem,1.5rem + 4.2vw,4.6rem);

  --dur:.32s;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* The viewer may stamp a dark theme on the root. A company website keeps its
   own identity either way; these only stop the host's ground showing through. */
:root[data-theme="dark"], :root[data-theme="light"]{ color-scheme: light; }

*,*::before,*::after{ box-sizing:border-box }
/* An author-origin display value beats the UA sheet's [hidden]{display:none},
   so filtering set the attribute and hid nothing. This is not optional. */
[hidden]{ display:none!important }
html{ -webkit-text-size-adjust:100% ; scroll-behavior:smooth;
  /* the header is pinned to the top and the call bar to the bottom; without
     this the browser scrolls a focused control exactly underneath one */
  scroll-padding-top:92px; scroll-padding-bottom:76px }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--step-0)/1.62 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html[lang="am"] body,
[lang="am"]{ font-family:var(--f-am) }
/* `body` sets line-height in its font shorthand, so the inherited Ge'ez leading
   from [lang="am"] on <html> never applied to a single paragraph. */
html[lang="am"] body{ line-height:1.8 }

img,svg,video{ max-width:100%; display:block }
/* The logo carries intrinsic width/height so Safari cannot collapse it; that
   means every instance must also be told to scale its height. */
.lg{ height:auto }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.08;
  letter-spacing:-.018em; margin:0; text-wrap:balance }
h1{ font-size:var(--step-5) } h2{ font-size:var(--step-4) }
h3{ font-size:var(--step-2) } h4{ font-size:var(--step-1); letter-spacing:-.01em }
p{ margin:0 0 1em }
/* A model number, a URL or a pasted address can be longer than its column.
   Breaking it is ugly; losing it behind overflow:hidden is worse. */
.card :is(h3,h4,p,li), .tbl :is(td,th), .facts li, .prod .maker{ overflow-wrap:anywhere }
/* Ge'ez has no case and its counters carry meaning — never letterspace it,
   and never tighten it. Manual, Part 5. */
[lang="am"] h1,[lang="am"] h2,[lang="am"] h3,[lang="am"] h4{
  font-family:var(--f-am); letter-spacing:normal; line-height:1.3;
  font-weight:600 }
[lang="am"]{ line-height:1.8 }
/* An untranslated field on an Amharic page falls back to English, and the
   renderer marks the run `lang="en"` so it can be set as what it is: Latin
   text in the Latin face, not English wearing the Ethiopic face at Ge'ez
   leading with the display tracking stripped off. */
html[lang="am"] [lang="en"]{ font-family:var(--f-body); line-height:1.62 }
html[lang="am"] :is(h1,h2,h3,h4) [lang="en"]{ font-family:var(--f-display);
  letter-spacing:-.018em }
html[lang="am"] :is(h1,h2,h3,h4):has(> [lang="en"]:only-child){ line-height:1.08 }

a{ color:var(--brand); text-underline-offset:.18em;
   text-decoration-thickness:from-font }
a:hover{ color:var(--accent-deep) }

/* Focus: 3:1 against every ground it can land on. The navy list has to name
   every navy surface, not the obvious ones — the header and the mobile menu
   are navy too, and leaving them out put the whole of the site's primary
   navigation behind a 2.4:1 ring. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent-deep); outline-offset:2px; border-radius:2px }
:is(.dark,.deep,.hero,.hdr,.mobmenu) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline-color:var(--accent) }
/* Amber-on-amber is not a focus ring: on the skip link and on a primary
   button the ring has to leave the button's own colour. */
.skip:focus-visible,
:is(.dark,.deep,.hero) .btn:not(.sec):focus-visible{ outline-color:var(--ink) }

::selection{ background:var(--accent); color:var(--ink) }

/* ---------------------------------------------------------------- layout -- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gut) }
.band{ padding-block:clamp(3.4rem,8vw,7rem) }
.band.tight{ padding-block:clamp(2.4rem,5vw,4rem) }
.dark{ background:var(--brand); color:#fff }
.dark h1,.deep h1,.dark h2,.deep h2,.dark h3,.deep h3,.dark h4,.deep h4{ color:#fff }
.dark a:not(.btn),.deep a:not(.btn){ color:var(--accent) }
.dark a:not(.btn):hover,.deep a:not(.btn):hover{ color:#fff }
.deep{ background:var(--deep); color:#fff }
/* the closing band sits against the footer, which is the same navy; the
   brand blue keeps it a band rather than the top of the footer */
.band.deep{ background:var(--brand) }
.wash{ background:var(--wash) }
.surface{ background:var(--surface) }

/* the left rail: section number + label, an engineering-document tell */
.secgrid{ display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:0 }
.secgrid > div{ min-width:0 }
.secgrid > .rail{ position:relative }
.rail-in{ position:sticky; top:96px; font:500 var(--step--1)/1.3 var(--f-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  writing-mode:vertical-rl; transform:rotate(180deg); padding-block:.2rem;
  white-space:nowrap;
  /* a long section heading would otherwise run most of the page height */
  max-height:min(52vh,380px); overflow:hidden;
  mask:linear-gradient(to bottom, #000 78%, transparent) }
.dark .rail-in,.deep .rail-in{ color:#A9BEE6 }
[lang="am"] .rail-in{ letter-spacing:normal; text-transform:none }
/* Ethiopic is not drawn to be rotated, and IBM Plex Mono has no Ge'ez at all.
   The rail is decoration; on the Amharic pages it is simply dropped. */
html[lang="am"] .secgrid > .rail{ display:none }
html[lang="am"] .secgrid{ grid-template-columns:minmax(0,1fr) }
@media (max-width:900px){
  .secgrid{ grid-template-columns:minmax(0,1fr) }
  .secgrid > .rail{ display:none }
}

.eyebrow{ font:500 var(--step--1)/1.4 var(--f-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-deep); margin:0 0 1rem;
  display:flex; align-items:center; gap:.6rem }
.dark .eyebrow,.deep .eyebrow,.hero .eyebrow{ color:var(--accent) }
[lang="am"] .eyebrow{ letter-spacing:normal; text-transform:none;
  font-family:var(--f-am) }
.eyebrow::before{ content:""; width:22px; height:10px; flex:none;
  background:currentColor;
  clip-path:polygon(0 100%,26% 0,40% 0,14% 100%, 30% 100%,56% 0,70% 0,44% 100%,
                    60% 100%,86% 0,100% 0,74% 100%) }

.lede{ font-size:var(--step-1); line-height:1.5; color:var(--ink);
  max-width:60ch }
/* A section heading and the paragraph under it need air between them. Cards
   are excluded on purpose — they space their children with grid gap, and a
   margin here would double it. */
h2 + .lede, h2 + p[data-html], h2 + .hint{ margin-top:1.1rem }
.dark .lede,.deep .lede{ color:#fff }
.measure{ max-width:66ch }
/* A heading in a two-column band has about half the measure of one that runs
   the page; at --step-4 that is seventeen characters a line. */
@media (min-width:861px){
  .cols h2, .cols.lead h2{ font-size:var(--step-3) }
}

/* ------------------------------------------------------------- the ridge -- */
/* The mark's own geometry, used as a field element. 58.5° is the logo's angle. */
.ridgefield{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.ridgefield svg{ position:absolute; height:150%; width:auto; opacity:.5;
  top:-25%; right:-8% }

/* Ruled to the content column, not the window: every line lands on a column
   edge of the layout behind it, which is the point of the motif. */
.grid-lines{ position:absolute; top:0; bottom:0; left:50%; translate:-50% 0;
  width:min(100% - 2*var(--gut), var(--wrap)); pointer-events:none; opacity:.55;
  background-image:linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:calc(100%/4) 100% }

/* ------------------------------------------------------------- controls --- */
.btn{ --bg:var(--accent); --fg:var(--ink); --bd:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:.9rem 1.5rem; border:1.5px solid var(--bd);
  background:var(--bg); color:var(--fg); font:600 var(--step-0)/1 var(--f-body);
  text-decoration:none; cursor:pointer; border-radius:2px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease); text-align:center }
[lang="am"] .btn{ font-family:var(--f-am); line-height:1.4 }
.btn:hover{ --bg:var(--ink); --fg:#fff; --bd:var(--ink) }
.btn.sec{ --bg:transparent; --fg:var(--brand); --bd:var(--brand) }
.btn.sec:hover{ --bg:var(--brand); --fg:#fff }
.dark .btn.sec,.deep .btn.sec,.hero .btn.sec{ --fg:#fff; --bd:rgba(255,255,255,.55) }
.dark .btn.sec:hover,.deep .btn.sec:hover,.hero .btn.sec:hover{ --bg:#fff; --fg:var(--brand); --bd:#fff }
.btn svg{ width:1em; height:1em; flex:none }
.btnrow{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem;
  align-items:flex-start }
.btnrow .btn{ flex:0 0 auto; max-width:100% }
/* On a phone a wrapped row is two buttons of different widths stacked
   raggedly. Stack them deliberately instead, at one width, each an easy
   thumb-width target. */
@media (max-width:560px){
  .btnrow{ flex-direction:column; align-items:stretch }
  .btnrow .btn{ width:100% }
}

.chip{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px;
  padding:.55rem 1rem; border:1px solid var(--line); background:#fff;
  color:var(--ink); font:500 var(--step--1)/1 var(--f-body); cursor:pointer;
  border-radius:999px;
  /* not `all`: that animated outline-width too, so the focus ring faded in
     over a third of a second instead of appearing when focus did */
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease) }
[lang="am"] .chip{ font-family:var(--f-am); line-height:1.5 }
.chip:hover{ border-color:var(--brand) }
.chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand);
  color:#fff }

/* --------------------------------------------------------------- header --- */
.hdr{ position:sticky; top:0; z-index:70; background:var(--brand); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14) }
.hdr-in{ display:flex; align-items:center; gap:1.25rem; min-height:74px;
  flex-wrap:wrap }
.brand{ display:flex; align-items:center; flex:none; text-decoration:none;
  padding-block:.5rem }
.brand .lg{ width:186px; height:auto }
@media (max-width:420px){ .brand .lg{ width:150px } }
.hdr nav{ margin-inline-start:auto; display:flex; gap:.15rem;
  /* If the words outgrow the bar the row wraps and the header gets taller.
     That is ugly; links you cannot reach are worse. */
  flex-wrap:wrap; justify-content:flex-end }
.hdr nav a{ color:#fff; text-decoration:none; padding:.85rem .78rem;
  font:500 var(--step--1)/1 var(--f-body); letter-spacing:.01em;
  border-radius:2px; white-space:nowrap; position:relative }
[lang="am"] .hdr nav a{ font-family:var(--f-am); line-height:1.4 }
.hdr nav a::after{ content:""; position:absolute; left:.78rem; right:.78rem;
  bottom:.35rem; height:2px; background:var(--accent); transform:scaleX(0);
  transform-origin:left; transition:transform var(--dur) var(--ease) }
.hdr nav a:hover::after,.hdr nav a.on::after{ transform:scaleX(1) }
.tools{ display:flex; align-items:center; gap:.4rem; margin-inline-start:auto }
.burger{ display:none; width:48px; height:48px; background:none; padding:12px;
  border:1px solid rgba(255,255,255,.4); border-radius:2px; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px }
.burger i{ display:block; height:2px; background:#fff; transition:all var(--dur) }
@media (min-width:67.5625em){
  /* the burger is the only tool left, so above its breakpoint the slot goes
     and the navigation ends flush with the content edge */
  .hdr .tools{ display:none }
  .hdr nav a:last-child{ padding-inline-end:0 }
  .hdr nav a:last-child::after{ right:0 }
}
/* em, not px. A px breakpoint answers "how wide is the screen"; the question
   that decides whether a horizontal bar of words fits is "how big is the
   text". Someone who raises their browser's font size to 200% has the same
   1280px screen and eight nav items that no longer fit in it — with a px
   query they get a bar that overflows off-screen and no burger. */
@media (max-width:67.5em){
  .hdr nav{ display:none }
  .burger{ display:flex }
}
@media (max-width:380px){
  .brand .lg{ width:132px }
  .hdr-in{ gap:.5rem; min-height:66px }
}

.mobmenu{ position:fixed; inset:0; z-index:80; background:var(--brand);
  color:#fff; padding:1.25rem var(--gut) 2rem; overflow:auto;
  overscroll-behavior:contain;
  transform:translateY(-100%); visibility:hidden;
  /* visibility must flip to visible on the *first* frame, not part-way through
     the slide: a transitioned `visibility` reads back as hidden at t=0, and an
     element in a hidden subtree cannot take focus — which left the open menu
     with focus stranded on the page behind it. Delay only the hide. */
  transition:transform var(--dur) var(--ease), visibility 0s linear var(--dur) }
.mobmenu.open{ transform:none; visibility:visible;
  transition:transform var(--dur) var(--ease), visibility 0s linear 0s }
.mm-top{ display:flex; justify-content:space-between; align-items:center;
  min-height:56px; margin-bottom:1.5rem; gap:1rem }
.mm-top .lg{ width:150px; height:auto; flex:none }
.mm-link{ display:block; color:#fff; text-decoration:none; padding:1rem 0;
  font:600 var(--step-2)/1.15 var(--f-display); letter-spacing:-.015em;
  border-bottom:1px solid rgba(255,255,255,.16) }
[lang="am"] .mm-link{ font-family:var(--f-am); letter-spacing:normal;
  line-height:1.4 }
.mm-close{ background:none; border:1px solid rgba(255,255,255,.4); color:#fff;
  min-height:44px; min-width:44px; padding:.6rem 1rem; border-radius:2px;
  font:500 var(--step--1)/1 var(--f-mono); cursor:pointer }

/* smooth scrolling is global, so every in-page target needs to clear the
   sticky header rather than hide beneath it */
#main,[id]{ scroll-margin-top:96px }
#main:focus{ outline:none }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent);
  color:var(--ink); padding:.85rem 1.25rem; font-weight:600 }
.skip:focus{ left:0 }

/* ----------------------------------------------------------------- hero --- */
.hero{ position:relative; background:var(--brand); color:#fff; overflow:hidden;
  isolation:isolate }
.hero .wrap{ position:relative; z-index:2 }
.hero-in{ padding-block:clamp(3.2rem,9vw,7.5rem) clamp(3rem,7vw,5.5rem) }
.hero h1{ margin:0 0 1.35rem }
.hero .lede{ max-width:46ch; color:#C9D8F2 }
@media (min-width:940px){
  .hero-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
    gap:clamp(2rem,5vw,5rem); align-items:end }
  /* a deeper crop than the 16:9 used elsewhere, so the picture rises to meet
     the headline instead of leaving a field of navy above it */
  .hero .hero-plate .plate.wide{ aspect-ratio:4/3 }
}
.hero-plate{ align-self:stretch; display:flex; align-items:flex-end }
/* stacked under the buttons on a phone, the photograph needs air above it */
@media (max-width:939px){ .hero-plate{ margin-top:clamp(1.6rem,6vw,2.4rem) } }

/* status strip under the hero */
.status{ background:var(--deep); color:#fff;
  border-top:1px solid rgba(255,255,255,.16) }
/* A grid, not flex-wrap: a wrapped flex row left the fourth cell alone and
   borderless between 641 and 899px, which is every tablet and landscape phone.
   The seams are gaps over the field colour, so no row can ever be partial. */
.status-in{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:rgba(255,255,255,.14);
  /* .wrap pads the sides; without this the seam colour paints those too and
     reads as two clipped extra cells */
  background-clip:content-box }
@media (min-width:900px){ .status-in{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.stat{ padding:1.35rem 1.4rem 1.4rem; background:var(--deep) }
.stat b{ display:block; font:600 var(--step-2)/1 var(--f-display);
  letter-spacing:-.02em; margin-bottom:.3rem }
/* "30+", "10", "9" are Latin digits in both languages — they stay in the
   display face rather than switching typeface with the page. */
[lang="am"] .stat b{ letter-spacing:normal; line-height:1.3 }
/* the label under the figure. Scoped to the direct child: the figure itself
   carries an editable <span> inside its <b>, which must stay in the display
   face at full size. */
.stat > span{ font:400 var(--step--1)/1.4 var(--f-mono); color:#A9BEE6;
  letter-spacing:.06em; text-transform:uppercase; display:block }
[lang="am"] .stat > span{ font-family:var(--f-am); letter-spacing:normal;
  text-transform:none }
.stat b span{ font:inherit; letter-spacing:inherit; color:inherit }
.dot{ width:.55em; height:.55em; border-radius:50%; background:var(--accent);
  display:inline-block; margin-inline-end:.45em; vertical-align:.05em }

/* ---------------------------------------------------------------- plates -- */
/* An image slot. Empty, it is a piece of brand geometry with a caption saying
   what belongs there. Filled from the CMS, the photograph takes over. */
.plate{ position:relative; margin:0; width:100%; aspect-ratio:4/3; overflow:hidden;
  background:var(--wash); border:1px solid var(--line); border-radius:2px }
.plate.wide{ aspect-ratio:16/9 }
.plate.tall{ aspect-ratio:3/4 }
.plate img{ width:100%; height:100%; object-fit:cover }
.plate-empty{ display:grid; place-items:center; background:var(--wash);
  color:var(--brand) }
.dark .plate-empty,.deep .plate-empty,.hero .plate-empty{ background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.2); color:#fff }
.plate-empty svg{ width:44%; max-width:200px; height:auto; opacity:.28 }
.plate-cap{ position:absolute; left:0; right:0; bottom:0; padding:.7rem .9rem;
  font:400 var(--step--1)/1.35 var(--f-mono); color:var(--muted);
  background:linear-gradient(transparent,rgba(250,250,249,.94) 40%) }
.dark .plate-cap,.deep .plate-cap,.hero .plate-cap{ color:#C9D8F2;
  background:linear-gradient(transparent,rgba(0,22,79,.9) 40%) }
[lang="am"] .plate-cap{ font-family:var(--f-am) }

/* ----------------------------------------------------------------- cards -- */
/* Hairline seams without a background trick: each cell draws its own 1px
   ring, so a row that does not fill leaves paper rather than a grey hole. */
.grid{ display:grid; gap:1px }
/* c2 means two. At 320px the 1124px content box fitted three, so a four-card
   grid ran 3 + 1 and left an orphan beside two-thirds of empty paper. */
.grid.c2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)) }
.grid.c3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)) }
.grid.c4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)) }
/* four cards read better as two rows of two than as three-and-a-gap */
.grid.pair{ grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)) }
/* the last card closes its row rather than leaving the corner missing */
@media (min-width:900px){
  .grid.c3 > :last-child:nth-child(3n+2){ grid-column:span 2 }
  .grid.c4 > :last-child:nth-child(4n+3){ grid-column:span 2 }
}
.grid > *{ --pad:clamp(1.3rem,2.6vw,2.1rem); background:var(--paper); padding:var(--pad);
  box-shadow:0 0 0 1px var(--line) }
.dark .grid > *{ background:var(--brand); box-shadow:0 0 0 1px rgba(255,255,255,.22) }
.deep .grid > *{ background:var(--deep); box-shadow:0 0 0 1px rgba(255,255,255,.22) }
.wash .grid > *{ background:var(--wash) }

.card{ position:relative; display:flex; flex-direction:column; gap:.55rem }
.card h3,.card h4{ margin:0 }
.card p{ margin:0; color:var(--muted) }
.dark .card p,.deep .card p{ color:#C9D8F2 }
.card .no{ font:500 var(--step--1)/1 var(--f-mono); color:var(--accent-deep);
  letter-spacing:.1em }
.dark .card .no,.deep .card .no{ color:var(--accent) }
a.card{ text-decoration:none; color:inherit;
  transition:background var(--dur) var(--ease) }
a.card::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease) }
a.card:hover::after,a.card:focus-visible::after{ transform:scaleX(1) }

/* The tags are the last thing in a card, so they hang from the bottom and
   line up across a row however long the descriptions above them run. */
.facts{ list-style:none; margin:auto 0 0; padding:.4rem 0 0; display:flex;
  flex-wrap:wrap; gap:.4rem }
.facts li{ font:500 var(--step--1)/1.3 var(--f-mono); color:var(--muted);
  border:1px solid var(--line); padding:.35rem .55rem; border-radius:3px }
[lang="am"] .facts li{ font-family:var(--f-am); line-height:1.5 }
.dark .facts li,.deep .facts li{ color:#C9D8F2; border-color:rgba(255,255,255,.28) }

/* Three contract tiers read as a comparison table, so the parts have to line
   up: the badge row is reserved on all three, and the inclusion lists sit on
   the same baseline instead of leaving one card looking half-empty. */
.card.tier{ height:100% }
.card.tier .ticks{ margin-top:auto; padding-top:.6rem }

.ticks{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.45rem }
.ticks li{ position:relative; padding-inline-start:1.5rem; color:var(--muted) }
.ticks li a{ display:inline-flex; align-items:center; min-height:32px;
  text-decoration:none; border-bottom:1px solid var(--line) }
.ticks li a:hover{ border-color:currentColor }
.ticks li::before{ content:""; position:absolute; inset-inline-start:0; top:.62em;
  width:.62rem; height:.62rem; background:var(--accent);
  clip-path:polygon(0 100%,50% 0,100% 100%) }
.dark .ticks li,.deep .ticks li{ color:#C9D8F2 }

/* ------------------------------------------------------------- catalogue -- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.25rem }
.searchrow{ display:flex; gap:.6rem 1rem; flex-wrap:wrap; align-items:center;
  margin-bottom:1rem; max-width:640px }
.search{ flex:1 1 260px; min-height:52px; padding:.85rem 1rem;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  font:400 var(--step-0)/1.3 var(--f-body); border-radius:2px }
[lang="am"] .search{ font-family:var(--f-am) }
.search:focus{ border-color:var(--brand) }
.count{ font:500 var(--step--1)/1 var(--f-mono); color:var(--muted);
  letter-spacing:.06em }
[lang="am"] .count{ font-family:var(--f-am); letter-spacing:normal;
  line-height:1.5 }
.empty{ padding:3rem 1rem; text-align:center; color:var(--muted);
  border:1px dashed var(--line) }

.prod{ display:flex; flex-direction:column; gap:.5rem }
.prod .maker{ font:500 var(--step--1)/1.3 var(--f-mono); color:var(--accent-deep);
  letter-spacing:.04em }
.prod h3{ font-size:var(--step-1); letter-spacing:-.01em }
[lang="am"] .prod h3{ letter-spacing:normal }

/* A product photograph, when the catalogue has one. It runs to the card's
   edges on a white ground (instrument photography is shot on white) and is
   never cropped: a spectrometer with its end cut off is worse than none. */
.pphoto{ margin:calc(var(--pad,1.5rem) * -1) calc(var(--pad,1.5rem) * -1) .5rem;
  aspect-ratio:4/3; background:#fff; border-bottom:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden }
.pphoto img{ width:100%; height:100%; object-fit:contain;
  padding:clamp(.75rem,2vw,1.25rem) }
/* Once any card in the catalogue has a photograph, the ones that do not keep
   the same band of space, so a row still reads as a row. */
@media (min-width:700px){
  .grid:has(.pphoto) > .prod:not(.has-photo)::before{
    content:""; display:block; aspect-ratio:4/3; background:var(--paper);
    border-bottom:1px solid var(--line);
    margin:calc(var(--pad) * -1) calc(var(--pad) * -1) .5rem }
  .wash .grid:has(.pphoto) > .prod:not(.has-photo)::before{ background:var(--wash) }
}

/* A manufacturer's logo, in a column of its own so that rows with and
   without one still line up. Logos arrive in every proportion — square marks,
   long wordmarks — so the cell is a box they are fitted inside, never
   cropped and never stretched. */
.tbl-partners .logocell{ width:1%; padding-inline-end:1.5rem }
.plogo{ display:flex; align-items:center; justify-content:flex-start; margin:0;
  width:clamp(104px,14vw,152px); height:56px }
.plogo img{ max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; object-position:left center }
.plogo-empty{ width:clamp(104px,14vw,152px); height:56px; border:1px dashed var(--line);
  border-radius:3px; align-items:center; justify-content:center }
@media (max-width:700px){
  .tbl-partners .logocell{ width:auto; padding-inline-end:0 }
  .plogo, .plogo-empty{ height:48px; margin-bottom:.5rem }
}

/* --------------------------------------------------------------- tables --- */
.tbl{ width:100%; border-collapse:collapse; font-size:var(--step-0) }
.tbl th,.tbl td{ text-align:start; padding:.9rem 1rem; border-bottom:1px solid var(--line);
  vertical-align:top }
.tbl th{ font:600 var(--step--1)/1.3 var(--f-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap }
.tbl .hint{ display:block; margin-top:.3rem; max-width:46ch }
[lang="am"] .tbl th{ font-family:var(--f-am); letter-spacing:normal;
  text-transform:none }
.scroller{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  /* a fading right edge is the only cue a touch device gets that a table
     continues past the screen */
  background:linear-gradient(to right,var(--paper) 30%,transparent),
             linear-gradient(to left,var(--paper) 30%,transparent) right,
             radial-gradient(farthest-side at 0 50%,rgba(10,20,32,.12),transparent) ,
             radial-gradient(farthest-side at 100% 50%,rgba(10,20,32,.12),transparent) right;
  background-repeat:no-repeat; background-size:44px 100%,44px 100%,16px 100%,16px 100%;
  background-attachment:local,local,scroll,scroll }
/* On a phone a three-column table is a column of six-word lines inside a
   sideways scroll. Below 700px each row becomes a block: the name, then the
   other cells under their own heading, so nothing is squeezed and nothing
   scrolls out of sight. The column headings are repeated per cell through
   data-label, written by the renderer. */
@media (max-width:700px){
  .scroller{ overflow:visible; background:none }
  .tbl, .tbl tbody, .tbl tr, .tbl td, .tbl th{ display:block; width:auto }
  .tbl thead{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap }
  .tbl tr{ border-bottom:1px solid var(--line); padding-block:1.1rem }
  .tbl tr:first-child{ border-top:1px solid var(--line) }
  .tbl td, .tbl th{ border:0; padding:0 0 .55rem }
  .tbl tr > :last-child{ padding-bottom:0 }
  .tbl th[scope="row"]{ white-space:normal; margin-bottom:.1rem }
  .tbl td[data-label]::before{ content:attr(data-label) ": ";
    font:600 var(--step--1)/1.4 var(--f-mono); letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted) }
  .tbl td.count{ font-size:var(--step--1) }
}

.wash .scroller{ background-image:linear-gradient(to right,var(--wash) 30%,transparent),
             linear-gradient(to left,var(--wash) 30%,transparent),
             radial-gradient(farthest-side at 0 50%,rgba(10,20,32,.12),transparent),
             radial-gradient(farthest-side at 100% 50%,rgba(10,20,32,.12),transparent) }

/* ------------------------------------------------------------- timeline --- */
.tl{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.tl li{ display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1.5rem;
  padding:1.5rem 0; border-top:1px solid var(--line) }
.tl li > div{ max-width:72ch }
.tl li:last-child{ border-bottom:1px solid var(--line) }
.tl b{ font:600 var(--step-2)/1 var(--f-display); color:var(--brand);
  letter-spacing:-.02em }
.dark .tl li,.deep .tl li{ border-color:rgba(255,255,255,.2) }
.dark .tl b,.deep .tl b{ color:var(--accent) }
@media (max-width:620px){
  .tl li{ grid-template-columns:minmax(0,1fr); gap:.4rem }
}

/* ------------------------------------------------------------- accordion -- */
.acc{ border-top:1px solid var(--line) }
.acc details{ border-bottom:1px solid var(--line) }
.acc summary{ cursor:pointer; padding:1.25rem 2.5rem 1.25rem 0; position:relative;
  font:600 var(--step-1)/1.35 var(--f-display); letter-spacing:-.01em;
  list-style:none; min-height:56px }
[lang="am"] .acc summary{ font-family:var(--f-am); letter-spacing:normal;
  line-height:1.5 }
.acc summary::-webkit-details-marker{ display:none }
.acc summary::after{ content:""; position:absolute; inset-inline-end:.4rem;
  top:50%; margin-top:-9px; width:14px; height:14px;
  border-inline-end:2px solid var(--brand);
  border-block-end:2px solid var(--brand); transform:rotate(45deg);
  transition:transform var(--dur) var(--ease) }
.acc details[open] summary::after{ transform:rotate(225deg); margin-top:-4px }
.acc .body{ padding:0 0 1.4rem; color:var(--muted); max-width:70ch }

/* --------------------------------------------------------------- reach --- */
/* The site takes no submissions: each block offers the line and the address
   for its desk, so what used to be form styling is three rules. */
.hint{ font:400 var(--step--1)/1.5 var(--f-body); color:var(--muted);
  max-width:72ch }
/* a contact address on its own line, sized to be tapped */
.bigmail{ margin:.25rem 0 0 }
.bigmail a{ display:inline-flex; align-items:center; min-height:44px;
  font-weight:600; font-size:var(--step-1); word-break:break-word }
/* the service line, sitting above the address it belongs with */
.reach-call{ margin:1.25rem 0 .5rem }
.card .reach-call{ margin-top:1rem }


/* ---------------------------------------------------------------- footer -- */
.ftr{ background:var(--deep); color:#fff; padding-block:clamp(3rem,6vw,5rem) 2rem }
.ftr a{ color:#C9D8F2; text-decoration:none }
.ftr a:hover{ color:#fff; text-decoration:underline }
.ftr-grid{ display:grid; gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)) }
.ftr .fh{ font:600 var(--step--1)/1.3 var(--f-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 1rem }
[lang="am"] .ftr .fh{ font-family:var(--f-am); letter-spacing:normal;
  text-transform:none }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid }
.ftr li{ padding-block:.35rem }
/* A footer link is still a tap target. 44 px tall on a phone, comfortable
   everywhere else. */
.ftr li a{ display:inline-flex; align-items:center; min-height:32px }
@media (max-width:820px){ .ftr li a{ min-height:44px } }
.ftr .fine a{ min-height:32px }
.flogo .lg{ width:150px; height:auto; margin-bottom:1.1rem }
.ftr .fine{ margin-top:2.5rem; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.18); display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:.6rem 1.5rem; font-size:var(--step--1);
  color:#A9BEE6 }

/* --------------------------------------------------------- service rail --- */
/* The one action that matters most, always one tap away on a phone. */
.callbar{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--accent); color:var(--ink); display:none;
  border-top:1px solid var(--accent-deep);
  padding-bottom:env(safe-area-inset-bottom,0px) }
.callbar a{ display:flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:58px; color:var(--ink); text-decoration:none; font-weight:600;
  padding:.6rem 1rem; text-align:center; line-height:1.25 }
.callbar .cb-num{ white-space:nowrap }
/* at 390px the label wrapped to two ragged lines beside the number; stacked,
   both read straight */
@media (max-width:430px){
  .callbar a{ flex-direction:column; gap:.1rem; padding:.45rem 1rem }
  .callbar .cb-label{ font:500 var(--step--1)/1.3 var(--f-body) }
  .callbar .cb-num{ font-size:var(--step-0) }
}
/* Amber on amber is only 2.94:1 — below the 3:1 a focus ring has to meet. */
.callbar :focus-visible{ outline-color:var(--ink) }
@media (max-width:820px){
  .callbar{ display:block }
  /* the bar is 60-61px once the label wraps, plus whatever the home indicator
     takes, so the spacer is measured rather than guessed */
  body{ padding-bottom:calc(66px + env(safe-area-inset-bottom,0px)) }
}
/* A landscape phone, or a desktop at 400% zoom, has no room to give up: the
   header and the call bar together were eating half the viewport. */
@media (max-height:480px){
  .callbar{ display:none }
  body{ padding-bottom:0 }
  .hdr{ position:static }
  .hdr-in{ min-height:56px }
}

/* A phone number or an address is the most likely thing anyone taps on a
   phone, and a bare text link is only as tall as its line. */
@media (max-width:820px){
  /* only where the link stands alone in a list — inline in a sentence it made
     the line 68% taller than its neighbours and stopped wrapping */
  .ticks li a[href^="tel:"],.ticks li a[href^="mailto:"],
  .ftr li a[href^="tel:"],.ftr li a[href^="mailto:"]{
    display:inline-flex; align-items:center; min-height:44px }
}

/* --------------------------------------------------- editing affordances -- */
/* Only ever rendered while an admin is editing: an empty card or a row at the
   end of each list saying what can be added there. */
.addcard{ display:grid; place-items:center; min-height:132px; cursor:pointer;
  border:0; background:transparent;
  box-shadow:0 0 0 1px var(--line) inset, 0 0 0 1px var(--line);
  color:var(--brand); font:600 var(--step-0)/1.3 var(--f-body) }
.addcard span{ border:1px dashed currentColor; border-radius:3px; padding:.6rem 1rem }
.addcard:hover{ background:#fff; color:var(--accent-deep) }
.addrow{ margin:1rem 0 0 }
.addbtn{ background:#fff; color:var(--brand); border:1px dashed var(--brand);
  border-radius:3px; padding:.6rem 1rem; min-height:44px; cursor:pointer;
  font:600 var(--step--1)/1 var(--f-body) }
.addbtn:hover{ background:var(--wash) }

/* ---------------------------------------------------------- linkedin ------ */
.postlink{ margin:.2rem 0 0 }
.postlink a{ font:500 var(--step--1)/1.4 var(--f-body); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:.1rem }
.postlink a::after{ content:" →" }
.postlink a:hover{ border-color:currentColor }
.btn .in{ flex:none }
.ftr .finked{ display:inline-flex; align-items:center; gap:.45rem; min-height:44px }

/* ------------------------------------------------------------ utilities --- */
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap }
.banner{ background:var(--accent); color:var(--ink); text-align:center;
  padding:.7rem 1rem; font:500 var(--step--1)/1.45 var(--f-body) }
[lang="am"] .banner{ font-family:var(--f-am) }
.cols{ display:grid; gap:clamp(1.6rem,4vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) }
.cols > *{ min-width:0 }
.cols.lead{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }
/* The left column is a heading and a button; the right one can run for two
   screens. Rather than leave the first column stranded at the top of a tall
   empty space, it travels with the reader. */
@media (min-width:861px){
  .band .cols.lead > div:first-child{ position:sticky; top:104px;
    align-self:start }
}
/* Chrome gives up balancing above five lines, and the longest heading on the
   site runs to six on a phone — leaving single words stranded on their own
   lines, which `pretty` handles. In the two-column layout the headings are
   short enough for `balance`, which keeps "Request a service visit" from
   breaking after the fifth word. */
.cols.lead h2{ text-wrap:pretty }
@media (min-width:861px){ .cols.lead h2{ text-wrap:balance } }
@media (max-width:860px){ .cols.lead{ grid-template-columns:minmax(0,1fr) } }
.stack > * + *{ margin-top:clamp(2rem,4vw,3.2rem) }
.hr{ height:1px; background:var(--line); border:0; margin:0 }
.dark .hr,.deep .hr{ background:rgba(255,255,255,.2) }

/* reveal-on-scroll, off entirely when the viewer asks for less motion */
.rv{ opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease) }
.rv.in{ opacity:1; transform:none }
/* Never animate opacity on a box that holds a link: tabbing into an unrevealed
   card put focus on something invisible, and the focus ring with it. */
.rv:focus-within{ opacity:1; transform:none; transition:none }
/* Print. A procurement officer prints the contact page for a file and the
   solutions page for a tender pack, so both have to survive a printer with
   background graphics switched off — which is the default. Three things went
   wrong there and all three are fixed here: white text kept its colour once
   its navy ground stopped printing (the footer's phone number came out at
   1.1:1), the accordions printed their headings with no answers under them,
   and nothing ever revealed because printing does not scroll. */
@media print{
  .rv{ opacity:1!important; transform:none!important }
  .hdr,.callbar,.banner,.mobmenu,.skip,.ridgefield,.grid-lines{ display:none }
  body{ background:#fff; padding-bottom:0; color:var(--ink) }
  .hero,.dark,.deep,.ftr,.wash,.surface,.status,.stat{
    background:#fff!important; color:var(--ink)!important }
  .hero h1,.dark h1,.deep h1,.ftr h2,.ftr h3,
  .hero h2,.dark h2,.deep h2,.hero h3,.dark h3,.deep h3,
  .dark h4,.deep h4,.dark b,.deep b,.stat b{ color:var(--ink)!important }
  .hero .lede,.dark .lede,.deep .lede,.dark p,.deep p,.ftr p,.ftr li,
  .ftr a,.ftr .fine,.dark .eyebrow,.deep .eyebrow,.hero .eyebrow,
  .dark .rail-in,.deep .rail-in,.stat span{ color:var(--muted)!important }
  .dark .hr,.deep .hr,.dark .tl li,.deep .tl li,.status-in > *{
    border-color:var(--line)!important }
  a{ color:var(--ink)!important; text-decoration:underline }
  .btn{ display:none }                    /* a button you cannot press */
  /* An accordion on paper is just a heading with nothing under it. Newer
     Chromium hides the closed content through ::details-content rather than
     display, so both have to be answered — and app.js opens them on
     beforeprint as well, because this is too important to rest on CSS alone. */
  .acc details > .body{ display:block!important }
  .acc details::details-content{ content-visibility:visible!important;
    block-size:auto!important }
  .acc summary::after{ display:none }
  .acc summary{ padding-right:0 }
  /* the logo is drawn in white for the navy footer; on paper it would be
     invisible, and it is the only mark left once the header is dropped */
  .ftr .lg{ color:var(--ink)!important }
  /* a column that follows the reader has nothing to follow on paper */
  .band .cols.lead > div:first-child{ position:static }
  .scroller{ overflow:visible }
  .band{ padding-block:1.2rem }
  h1,h2,h3{ break-after:avoid }
  .card,.acc details,.tl li,.prod{ break-inside:avoid }
}
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none }
  *,*::before,*::after{ animation-duration:.001ms!important;
    transition-duration:.001ms!important }
}