@charset "UTF-8";
/* =============================================================================
   cat.css — the datasheet build

   Layout concept: a graphite masthead band over paper, a sticky catalogue rail
   on every listing page, the specification grid as the hero of the machine
   page, hairline rules instead of cards, mono tabular figures, no radii.

   TO CHANGE THE ACCENT, change --accent, --btn-bg and --band-accent below and
   nothing else. Measured against the surface behind them, all WCAG AA:
       sage   #4F6B57  5.88:1 on paper   <- in use
       flame  #B4381A  5.96:1 on paper      blue  #0F4C81  8.86:1 on paper
       on dark: #9CC0A8 7.68:1 on the band <- in use, was #F59E0B at 7.14:1
   ============================================================================= */

:root{
  --paper:#FFFFFF;  --mist:#F2F4F6;   --sunk:#E9EDEF;
  --ink:#14181B;    --steel:#5B666F;
  --rule:#DDE2E6;   --rule-2:#C3CBD2;
  --band:#1F262B;   --band-ink:#F2F4F6; --band-dim:#A8B3BB; --band-rule:#39434A;

  /* Greyish green, replacing the red. Chosen by contrast, not by eye:
     #4F6B57 is 5.88:1 on white where the old #B4381A was 5.96:1, so every
     heading, link and button keeps the same visual weight it had - the page
     changes colour without changing its balance.
     --bad stays red. An error that is the same colour as the brand is not a
     warning, it is decoration. */
  --accent:#4F6B57; --btn-bg:#4F6B57;  --btn-fg:#FFFFFF;   --band-accent:#9CC0A8;

  --ok:#1B6B3A;     --warn:#8A5A00;    --bad:#A3201A;

  --display:"Barlow Condensed","Arial Narrow",Haettenschweiler,sans-serif;
  --ui:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --wrap:1140px;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);
  font-size:16px;line-height:1.6}
img{max-width:100%;height:auto}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.015em;line-height:1.06;text-wrap:balance;margin:0}
p{margin:0 0 1em}
.mono,code,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.in{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--band);color:var(--band-ink);padding:10px 14px}

/* ---------- utility strip + masthead ------------------------------------- */
.util{background:var(--band);color:var(--band-dim);border-bottom:1px solid var(--band-rule);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}
.util .in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:7px}
.util a{color:var(--band-accent);text-decoration:none}

.mast{background:var(--band);color:var(--band-ink)}
/* The three parts stay on ONE row and the NAVIGATION wraps inside itself.
   With flex-wrap on this container instead, the whole row broke apart and the
   mark, the menu and the search each took a line of their own - 155px of dark
   band before any content. Below 760px that is the right behaviour, so it is
   restored there. */
.mast .in{display:flex;align-items:center;gap:22px;padding-block:14px;flex-wrap:nowrap}
@media (max-width:760px){ .mast .in{flex-wrap:wrap} }

/* THE MASTHEAD MARK.

   This was the full company name, on two lines, and it kept being cut off.
   Four attempts: more leading, explicit lines, no-wrap, wrapping again. Each
   one fixed the case in front of me and broke a different one, because the
   real problem was never the type - it was that a two-line name and an
   eight-item navigation do not both fit, and something has to give.

   A monogram cannot be cut. Two characters, one line, fixed box. The full
   name travels with it in a visually hidden span, so the link still reads as
   "Machines Equipments" to a screen reader and to a crawler. */
.wm{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;
  color:var(--band-ink);text-decoration:none;padding-block:2px}
.wm-mark{display:grid;place-items:center;width:52px;height:52px;flex:0 0 auto;
  font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:.04em;
  line-height:1;color:var(--band);background:var(--band-ink);
  border:2px solid var(--band-ink)}
.wm:hover .wm-mark{background:var(--band-accent);border-color:var(--band-accent);
  color:var(--band)}
.wm em{font-family:var(--mono);font-size:8.5px;font-style:normal;font-weight:400;
  letter-spacing:.22em;color:var(--band-dim)}
.wm img{max-height:46px;width:auto;display:block}

/* FALLBACK for the previous markup, which wrote the name as <b> lines.

   When css/cat.css was updated and includes/header.php was not, those <b>
   elements lost every rule that styled them and the masthead rendered the
   company name in plain body type - looking broken rather than looking like an
   older version. A stylesheet should never depend on a template landing with
   it. These rules keep that markup looking deliberate: display face,
   uppercase, two tidy lines, and no clipping at any width. */
.wm b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.9vw,24px);line-height:1.12;letter-spacing:.02em;
  text-transform:uppercase;white-space:normal;overflow-wrap:anywhere}
.wm:has(b){display:block;max-width:min(34vw,300px)}

/* 13.5px with a 14px gap is the largest that fits all eight items on one line
   at 1440 with the longest division names this catalogue has. Measured, not
   guessed - at 14px CONTACT drops to a second line. */
.mnav{display:flex;gap:14px;flex:1 1 auto;flex-wrap:wrap;font-family:var(--display);font-size:13.5px;
  font-weight:600;text-transform:uppercase;letter-spacing:.04em;list-style:none;margin:0;padding:0}
.mnav a{color:var(--band-ink);text-decoration:none;padding-bottom:3px;display:block;white-space:nowrap}
.mnav a:hover{box-shadow:0 2px 0 var(--band-accent)}
.mnav a[aria-current]{box-shadow:0 2px 0 var(--band-accent)}

.msearch{display:flex;flex:none;border:1px solid var(--band-rule);background:rgba(255,255,255,.06)}
.msearch input{border:0;background:transparent;color:var(--band-ink);font-family:var(--mono);
  font-size:12px;padding:8px 11px;width:190px;min-width:0}
.msearch input::placeholder{color:var(--band-dim)}
.msearch button{border:0;background:var(--band-accent);color:#14181B;font-family:var(--mono);
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;padding:8px 13px;cursor:pointer;font-weight:700}

/* ---------- breadcrumb ---------------------------------------------------- */
.crumb{background:var(--mist);border-bottom:1px solid var(--rule);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.crumb .in{padding-block:8px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumb li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--rule-2)}
.crumb a{color:var(--accent);text-decoration:none}

/* ---------- page furniture ------------------------------------------------ */
.kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px}
h1.t{font-size:clamp(28px,5vw,42px);margin:0 0 10px}
h2.t{font-size:clamp(20px,3vw,26px);margin:0 0 12px}
h3.t{font-size:18px;letter-spacing:.05em;margin:0 0 8px}
.lede{font-size:17px;max-width:68ch;margin:0 0 14px}
.note{font-size:14px;color:var(--steel);max-width:72ch}
.blk{padding-block:30px;border-bottom:1px solid var(--rule)}
.blk:last-child{border-bottom:0}
.hd{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.hd .more{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap}

/* ---------- hero ---------------------------------------------------------- */
.hero{background:var(--mist);border-bottom:1px solid var(--rule)}
.hero .in{padding-block:34px}
.bigsearch{display:flex;margin:16px 0 0;border:2px solid var(--ink);background:var(--paper);max-width:720px}
.bigsearch input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font-family:var(--mono);font-size:14px;padding:13px 15px}
.bigsearch input::placeholder{color:var(--steel)}
.bigsearch button{border:0;background:var(--btn-bg);color:var(--btn-fg);font-family:var(--display);
  font-size:16px;text-transform:uppercase;letter-spacing:.06em;padding:13px 24px;cursor:pointer;font-weight:700}
.hint{font-family:var(--mono);font-size:10.5px;color:var(--steel);margin-top:9px;letter-spacing:.04em}
.hint a{color:var(--steel)}

.state{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule-2);
  margin-top:22px;background:var(--paper)}
.state>div{padding:13px 15px;border-right:1px solid var(--rule)}
.state>div:last-child{border-right:0}
.state b{display:block;font-family:var(--mono);font-size:25px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
/* A word, not a figure. The numerals are 25px mono; a nine-letter word at that
   size would be wider than the tile, so it is set smaller and sits on the same
   baseline as the numbers beside it. */
.state b.word{font-size:19px;letter-spacing:-.01em;padding-top:5px}
.state span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin-top:6px}

/* ---------- division grid ------------------------------------------------- */
.divs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.dv{background:var(--paper);padding:15px;display:block;text-decoration:none;color:var(--ink)}
.dv:hover{background:var(--mist)}
.dv h3{font-size:16px;margin:0 0 5px;letter-spacing:.03em;line-height:1.12}
.dv .ct{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:8px}
.dv ul{list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--steel)}
.dv li{padding:3px 0;border-top:1px dotted var(--rule)}

/* ---------- range blocks -------------------------------------------------- */
.ranges{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.rg{background:var(--paper);padding:14px;text-decoration:none;color:var(--ink);display:block}
.rg:hover{background:var(--mist)}
.rg h3{font-size:15px;margin:0 0 4px}
.rg .ct{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px}
.rg ul{list-style:none;margin:0;padding:0;font-size:12px;color:var(--steel)}

/* ---------- the listing row: a comparison row, not a tile ----------------- */
.rows{border:1px solid var(--rule)}
.row{display:grid;grid-template-columns:150px 1fr 320px 104px;gap:16px;padding:13px 15px;
  border-bottom:1px solid var(--rule);align-items:start}
.row:last-child{border-bottom:0}
.row:nth-child(even){background:var(--mist)}
.row .cd{font-family:var(--mono);font-size:11px;color:var(--steel);word-break:break-all;min-width:0}
.row .nm{min-width:0}
.row .nm a{font-weight:600;font-size:14.5px;text-decoration:none}
.row .nm a:hover{text-decoration:underline}
.row .nm em{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--steel);margin-top:3px}
.row .kv{font-family:var(--mono);font-size:10.5px;line-height:1.65;min-width:0;color:var(--ink)}
.row .kv b{color:var(--steel);font-weight:400}
.row .go{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--rule-2);padding:7px 9px;text-align:center;text-decoration:none;color:var(--ink)}
.row .go:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- split: sticky rail + body ------------------------------------- */
.split{display:grid;grid-template-columns:230px 1fr;gap:34px;padding-block:26px}
.split>*{min-width:0}
.rail{border-top:2px solid var(--ink);padding-top:11px;align-self:start;position:sticky;top:14px}
.rail h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);margin:0 0 9px;font-weight:500}
.rail ul{list-style:none;margin:0 0 20px;padding:0}
.rail li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:5px 0;
  border-bottom:1px solid var(--rule)}
.rail li a{color:var(--ink);text-decoration:none}
.rail li a:hover{color:var(--accent)}
.rail li b{font-family:var(--mono);font-size:10.5px;color:var(--steel);font-weight:400}
.rail li.on{background:var(--mist);margin-inline:-7px;padding-inline:7px;border-bottom-color:var(--rule-2)}
.rail li.on a{color:var(--accent);font-weight:700}
.rail .box{border:1px solid var(--rule-2);padding:12px;font-size:12.5px;color:var(--steel)}
.rail .box a{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none}

/* ---------- the machine datasheet ---------------------------------------- */
.ds{display:grid;grid-template-columns:1fr 290px;gap:34px;padding-block:26px}
.ds>*{min-width:0}
.titleblk{border-bottom:2px solid var(--ink);padding-bottom:13px;margin-bottom:18px}
.meta{display:flex;flex-wrap:wrap;gap:7px 20px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--steel);margin-top:9px}
.meta b{color:var(--ink);font-weight:500}
/* THE PHOTOGRAPH IS DRAWN AT 70% OF ITS OWN SIZE, NOT 70% OF THIS COLUMN.
   The size comes from width and height attributes that machine.php works out
   on the server from the real file - a 750 square is drawn at 525 on every
   screen. There is deliberately no width here: a width in CSS would override
   those attributes, and a percentage in CSS is a percentage of the column, so
   it would be a different number on every browser window.

   The global img rule supplies max-width:100% and height:auto, which is what
   shrinks it on a narrow screen and keeps it square while it does. */
.shot{border:1px solid var(--rule-2);background:var(--mist);display:block}

/* The photograph and the strip beside it. The photograph keeps its own drawn
   size (flex:0 0 auto - it must not be stretched or squashed to fill a row);
   the strip takes whatever is left. Below 150px there is not enough room for a
   label, so the whole thing wraps and the strip becomes a row underneath. */
.shotwrap{display:flex;gap:20px;align-items:stretch;flex-wrap:wrap}
.shotwrap > .shot{flex:0 1 auto}
.shotwrap > .noshot{flex:0 1 525px}
.shotside{flex:1 1 150px;min-width:150px;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;justify-content:center;gap:2px}
.shotside li{padding:11px 0;border-bottom:1px solid var(--rule)}
.shotside li:last-child{border-bottom:0}
.shotside svg{display:block;color:var(--accent);margin-bottom:6px}
.shotside b{display:block;font-size:13px;line-height:1.35;font-weight:600;color:var(--ink)}
.shotside span{display:block;margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--steel)}

/* Side by side the strip is a column; stacked it is a row of four, because a
   single tall column under a photograph is a lot of scrolling for four short
   labels. */
@media (max-width:760px){
  .shotside{flex-basis:100%;flex-direction:row;gap:0 18px;border-top:1px solid var(--rule);
    margin-top:14px;padding-top:4px}
  .shotside li{flex:1 1 0;border-bottom:0;padding:10px 0}
}
@media (max-width:560px){
  .shotside{flex-wrap:wrap;gap:0 18px}
  .shotside li{flex:1 1 44%}
  .shotside span{display:none}
}
/* Shown when the photograph is not on disk. Reads as a plate on a machine, not
   as a failure: the specification underneath is what the page is for. */
/* It has no file, so there is nothing to take 70% of. 525px is a 750 square
   at the same scale, so an unphotographed machine sits in the same footprint
   as a photographed one and the column does not jump between pages. Square,
   because the photographs are. */
.noshot{width:100%;max-width:525px;
  aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;text-align:center;padding:20px;
  background:repeating-linear-gradient(135deg,var(--mist) 0 11px,var(--sunk) 11px 22px)}
.noshot span{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--steel);
  background:var(--paper);border:1px solid var(--rule-2);padding:7px 13px}
.noshot small{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel)}
/* The extra views line up under the main photograph rather than running wider
   than it. machine.php sets --shot-w to the drawn width of the main image; the
   525px fallback covers the case where the file could not be measured. */
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:7px;
  max-width:var(--shot-w,525px)}
.thumbs img{border:1px solid var(--rule);display:block;width:100%}

@media (max-width:760px){
  .thumbs{max-width:100%}
}

.sp{border:1px solid var(--rule-2);margin-top:22px}
.sp .cap{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--band);color:var(--band-ink);padding:9px 14px}
.sp .cap h2{font-size:15px;letter-spacing:.09em;margin:0}
.sp .cap span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--band-dim)}
.sp dl{display:grid;grid-template-columns:230px 1fr;margin:0}
.sp dt,.sp dd{margin:0;padding:8px 14px;border-bottom:1px solid var(--rule);font-size:13.5px}
.sp dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--steel);background:var(--mist)}
.sp dd{font-family:var(--mono);font-variant-numeric:tabular-nums;word-break:break-word}
.sp dl>:nth-last-child(1),.sp dl>:nth-last-child(2){border-bottom:0}
/* The supply note sits under the grid, set apart from it: it is a statement
   about how the machine is sold, not one of the measured values above. */
.sp-note{margin:0;padding:11px 14px;border-top:1px solid var(--rule);
  background:var(--mist);font-size:12.5px;line-height:1.5;color:var(--steel)}
/* Same note on a machine published without a grid: it needs its own box. */
.sp-note-solo{margin-top:22px;border:1px solid var(--rule-2);border-top-width:1px}

.prose{max-width:68ch}
.prose table{border-collapse:collapse;width:100%;font-size:13.5px;margin:12px 0}
.prose td,.prose th{border:1px solid var(--rule);padding:7px 10px;text-align:left}
.prose ul{padding-left:1.1em}

.enq{border:2px solid var(--ink);padding:15px}
.enq h2{font-size:17px;letter-spacing:.04em;margin:0 0 6px}
.enq label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);margin:0 0 3px}
.enq input,.enq textarea,.enq select{width:100%;border:1px solid var(--rule-2);padding:8px 10px;
  font-family:var(--mono);font-size:12px;margin-bottom:9px;background:var(--paper);color:var(--ink)}
.cta{display:block;width:100%;border:0;background:var(--btn-bg);color:var(--btn-fg);text-align:center;
  padding:11px;font-family:var(--display);font-size:16px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;cursor:pointer;text-decoration:none}
.side{border:1px solid var(--rule);padding:13px;margin-top:14px}
.side h3{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--steel);margin:0 0 8px;font-weight:500}
.side ul{list-style:none;margin:0;padding:0;font-size:12.5px}
.side li{padding:4px 0;border-top:1px solid var(--rule)}
.side li:first-child{border-top:0}
.side li b{font-weight:600}

/* ---------- markets ------------------------------------------------------- */
.mkts{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.mkts a{display:block;border:1px solid var(--rule-2);padding:6px 11px;font-size:12.5px;
  color:var(--ink);text-decoration:none;background:var(--paper)}
.mkts a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mkts a b{font-family:var(--mono);font-size:10px;color:var(--steel);font-weight:400;margin-left:6px}
.mkts a:hover b{color:var(--band-dim)}
.plain{font-size:12.5px;color:var(--steel);line-height:1.9;max-width:none}

.cspec{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid var(--rule-2);
  margin-top:18px;background:var(--paper)}
.cspec>div{padding:12px 14px;border-right:1px solid var(--rule)}
.cspec>div:last-child{border-right:0}
.cspec span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin-bottom:5px}
.cspec b{font-family:var(--mono);font-size:13px;font-weight:500}

/* ---------- messages ------------------------------------------------------ */
.msg{border-left:3px solid var(--accent);background:var(--mist);padding:13px 16px;margin:18px 0;font-size:14.5px}
.msg.ok{border-left-color:var(--ok)}
.msg.bad{border-left-color:var(--bad)}

/* ---------- footer -------------------------------------------------------- */
.ft{background:var(--band);color:var(--band-dim);font-size:13px;margin-top:40px}
.ft .in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px;padding-block:28px}
.ft h3{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--band-ink);margin:0 0 9px;font-weight:500}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{padding:3px 0}
.ft a{color:var(--band-dim);text-decoration:none}
.ft a:hover{color:var(--band-accent)}
/* The same mark as the masthead, drawn for a dark background. It used to be
   the company name set large, which meant the site had two different brand
   marks depending on how far down the page you were. */
.ft-wm{display:inline-flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:14px}
.ft-mark{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;
  border:2px solid var(--band-accent);color:var(--band-accent);
  font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.03em}
.ft-wm:hover .ft-mark{background:var(--band-accent);color:var(--band)}
.ft-wm img{max-height:46px;width:auto;display:block}
.ft-nm{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.18;
  letter-spacing:.02em;text-transform:uppercase;color:var(--band-ink);max-width:14em}
.ft-name{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.14;
  letter-spacing:.02em;text-transform:uppercase;color:var(--band-ink);margin-bottom:9px}

/* Address, phone, email - each on its own line with its icon. The icon column
   is fixed so the text lines up whatever the icon is. */
.ft-con{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.5}
.ft-con li{display:flex;align-items:flex-start;gap:9px;padding:5px 0}
.ft-con svg{flex:0 0 15px;margin-top:2px;color:var(--band-accent)}
.ft-con a{color:var(--band-dim);text-decoration:none}
.ft-con a:hover{color:var(--band-accent)}

/* Browse by range. Real pages, each under its own name, with the number of
   products on it - not a keyword list. */
.ft-browse{border-top:1px solid var(--band-rule)}
.ft-browse .in{display:block;padding-block:20px}
.ft-browse ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px 22px}
.ft-browse li{padding:4px 0}
.ft-browse a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  color:var(--band-dim);text-decoration:none;font-size:12.5px;
  border-bottom:1px solid var(--band-rule);padding-bottom:5px}
.ft-browse a:hover{color:var(--band-accent)}
.ft-browse a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ft-browse em{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--band-ink);
  flex:0 0 auto}
.ft .legal{border-top:1px solid var(--band-rule)}
.ft .legal .in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- narrow -------------------------------------------------------- */
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:22px}
  .rail{position:static}
  .ds{grid-template-columns:1fr}
  .row{grid-template-columns:1fr 1fr;gap:10px}
  .row .cd{order:1} .row .go{order:2} .row .nm{order:3;grid-column:1/-1} .row .kv{order:4;grid-column:1/-1}
  .ft .in{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .mast .in{gap:12px}
  .mnav{font-size:14px;gap:13px}
  .msearch{width:100%} .msearch input{width:auto;flex:1}
  .state{grid-template-columns:1fr 1fr}
  .state>div{border-bottom:1px solid var(--rule)}
  .state>div:nth-child(2n){border-right:0}
  .sp dl{grid-template-columns:1fr}
  .sp dt{border-bottom:0;padding-bottom:2px}
  .ft .in{grid-template-columns:1fr}
  h1.t{font-size:27px}
}
@media print{
  .util,.msearch,.mnav,.enq,.rail,.ft{display:none}
  body{font-size:11pt} .sp{border-color:#000} a{text-decoration:none;color:#000}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------------------
   HERO CAROUSEL

   A scroll-snap strip, not a JavaScript slider. The browser does the scrolling,
   so swipe, arrow keys and the dot links all work with the script switched off
   entirely - and if the script never loads, the first slide is simply shown.
   The script only adds auto-advance.
   -------------------------------------------------------------------------- */
.hero-slides{position:relative;background:var(--band)}
.hs-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.hs-track::-webkit-scrollbar{display:none}
.hs-track:focus-visible{outline:2px solid var(--band-accent);outline-offset:-2px}
.hs-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;margin:0;
  aspect-ratio:1140/420;max-height:min(58vh,520px);background:var(--band);overflow:hidden}
.hs-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* The caption lines up with the page column, not with the window edge. Left
   flush against the viewport it read as a different site to everything under
   it. */
.hs-slide figcaption{position:absolute;left:0;right:0;bottom:0;
  padding-block:26px 34px;
  padding-inline:max(var(--gut),calc((100% - var(--wrap))/2))
                 max(var(--gut-r),calc((100% - var(--wrap))/2));
  background:linear-gradient(to top,rgba(14,18,21,.90),rgba(14,18,21,.55) 55%,transparent);
  color:#fff}
.hs-slide figcaption strong{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(20px,3.1vw,34px);line-height:1.1;text-transform:uppercase;letter-spacing:.01em}
.hs-slide figcaption span{display:block;margin-top:7px;font-size:14px;line-height:1.5;
  color:#D8DEE2;max-width:62ch}
.hs-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:9px}
.hs-dots a{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.42);
  display:block;text-decoration:none}
.hs-dots a:hover{background:#fff}
.hs-dots a[aria-selected="true"]{background:var(--band-accent);transform:scale(1.25)}

/* A carousel that moves on its own is the first thing to stop for anyone who
   has asked the system to reduce motion. */
@media (prefers-reduced-motion:reduce){
  .hs-track{scroll-behavior:auto}
}

@media (max-width:700px){
  .hs-slide{aspect-ratio:4/3}
  .hs-slide figcaption{padding:18px var(--gut-r) 20px var(--gut)}
  .hs-slide figcaption span{display:none}
}

/* The two hero buttons that replaced the search box. */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0}
.btn-lg{display:inline-block;background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:16px;text-transform:uppercase;
  letter-spacing:.05em;padding:13px 22px;border:1px solid var(--btn-bg)}
.btn-lg:hover{filter:brightness(1.08)}
.btn-lg.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-lg.ghost:hover{border-color:var(--ink);filter:none}

/* Search moved out of the masthead and onto its own page. */
.msearch-link{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font-family:var(--display);font-size:14.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--band-ink);text-decoration:none;
  border:1px solid var(--band-rule);padding:8px 14px;white-space:nowrap}
.msearch-link:hover{border-color:var(--band-accent);color:var(--band-accent)}
.msearch-link[aria-current]{border-color:var(--band-accent);color:var(--band-accent)}

/* ---------- /catalogue/all/  —  the A-Z index ----------------------------- */
.azjump{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.azjump a{display:inline-block;min-width:30px;text-align:center;padding:5px 7px;
  border:1px solid var(--rule);font-family:var(--mono);font-size:12px;
  text-decoration:none;color:var(--accent)}
.azjump a:hover{border-color:var(--accent);background:var(--mist)}
.azgroup{margin-top:26px}
.azletter{display:flex;align-items:baseline;gap:10px;font-size:22px;
  border-bottom:2px solid var(--band);padding-bottom:6px;scroll-margin-top:16px}
.azletter span{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--steel)}
.azlist{list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:2px 24px}
.azlist li{padding:7px 0;border-bottom:1px solid var(--rule);min-width:0}
.azlist a{text-decoration:none;color:var(--ink);font-size:14.5px}
.azlist a:hover{color:var(--accent);text-decoration:underline}
.azlist em{display:block;font-family:var(--mono);font-size:10.5px;font-style:normal;
  color:var(--steel);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
@media (max-width:620px){
  .azlist{grid-template-columns:1fr}
}

/* ---------- /blog/  and  /blog/<slug>/  ----------------------------------- */
.posts{list-style:none;margin:0;padding:0}
.post-row{border-bottom:1px solid var(--rule)}
.post-row:first-child{border-top:1px solid var(--rule)}
.post-row a{display:flex;gap:22px;align-items:flex-start;padding:20px 0;
  text-decoration:none;color:inherit}
.post-row a:hover h2{color:var(--accent)}
.post-img{flex:0 0 220px;line-height:0}
.post-img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--mist)}
.post-txt{min-width:0}
.post-txt h2{font-family:var(--display);font-size:22px;line-height:1.2;margin:4px 0 0}
.post-ex{display:block;margin-top:7px;color:var(--steel);font-size:14.5px;line-height:1.6}
.post-txt .ct{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--steel)}

.blogpager{display:flex;align-items:center;justify-content:space-between;gap:18px;
  border-top:1px solid var(--rule);margin-top:10px;padding-top:16px;
  font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.blogpager span{color:var(--steel)}
.blogpager a{color:var(--accent);text-decoration:none}
.blogpager a:hover{text-decoration:underline}

/* One article. The measure is held near 68 characters because this is the only
   page on the site that is read rather than scanned. */
.post .lede{max-width:34em}
.post-hero{margin:22px 0 0;line-height:0}
.post-hero img{width:100%;height:auto;background:var(--mist)}
.prose{max-width:34em;margin-top:22px;font-size:16px;line-height:1.75;color:var(--ink)}
.prose p{margin:0 0 1.15em}
.prose h3{font-family:var(--display);font-size:21px;line-height:1.25;margin:1.9em 0 .5em}
.prose h4{font-size:16px;margin:1.6em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.25em}
.prose li{margin:0 0 .4em}
.prose strong{font-weight:700}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.3em;font-size:14.5px}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:8px 10px;text-align:left;
  vertical-align:top}
.prose th{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--steel);font-weight:500}

@media (max-width:680px){
  .post-row a{display:block}
  .post-img{width:100%;margin-bottom:12px}
  .post-txt h2{font-size:19px}
  .prose{font-size:15.5px}
}

/* ---------- /markets/ ----------------------------------------------------- */
/* Market cards. Each one shows what its page actually contains - a port, a
   conformity route, a supply - so a buyer picks on information rather than on
   a country name, and twenty links stop having identical labels. */
.mkt-region{padding-block:22px}
.mktgrid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.mktgrid li{background:var(--paper)}
.mktgrid a{display:flex;flex-direction:column;gap:9px;height:100%;padding:15px 16px;
  text-decoration:none;color:var(--ink)}
.mktgrid a:hover{background:var(--mist)}
.mktgrid h3{font-family:var(--display);font-size:19px;line-height:1.15;margin:0;
  letter-spacing:.01em}
.mktgrid a:hover h3{color:var(--accent)}
.mktgrid dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;
  font-size:12px;line-height:1.45}
.mktgrid dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--steel);padding-top:2px}
.mktgrid dd{margin:0;color:var(--ink)}
.mkt-none{margin:0;font-size:12.5px;color:var(--steel);line-height:1.5}
.mkt-go{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}

/* How a quotation is built. */
.qsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:4px}
.qsteps>div{background:var(--paper);padding:16px 17px}
.qsteps span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--accent);margin-bottom:8px}
.qsteps h3{font-family:var(--display);font-size:16px;margin:0 0 6px;line-height:1.2}
.qsteps p{margin:0;font-size:13px;line-height:1.6;color:var(--steel)}

/* Questions, visibly answered - the FAQ markup points at exactly these. */
.faq{margin:0;max-width:46em}
.faq dt{font-family:var(--display);font-size:16.5px;line-height:1.25;margin:18px 0 0;
  padding-top:16px;border-top:1px solid var(--rule)}
.faq dt:first-child{border-top:0;padding-top:0;margin-top:0}
.faq dd{margin:7px 0 0;font-size:14.5px;line-height:1.65;color:var(--steel)}

/* The countries without a page. Columns, so two hundred names read as reach
   rather than as padding. */
.othermk{font-size:12.5px;line-height:1.85;color:var(--steel);max-width:none;
  column-width:188px;column-gap:28px}
.othermk i{font-style:normal;white-space:nowrap}
.othermk span{color:var(--rule-2);padding:0 2px}

@media (max-width:620px){
  .mktgrid{grid-template-columns:1fr}
  .othermk{column-width:auto;columns:2;font-size:12px}
}

/* ---------- written division copy ----------------------------------------- */
.divcopy{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.divcopy article{background:var(--paper);padding:18px 19px}
.divcopy .kick{margin:0 0 5px}
.divcopy h3{font-family:var(--display);font-size:19px;line-height:1.18;margin:0 0 9px}
.divcopy h3 a{color:var(--ink);text-decoration:none}
.divcopy h3 a:hover{color:var(--accent)}
.divcopy h3 em{display:block;font-family:var(--mono);font-size:10px;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-top:4px}
.divcopy p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink)}
.divspec{margin-top:10px !important;padding-top:9px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px !important;line-height:1.55 !important;
  color:var(--steel) !important}