/* Base layer, verbatim from the design: faces, keyframes, resets. */
@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
html{overflow-x:clip}
body{margin:0;overflow-x:clip;background:#F1F4F6;color:#101D27;font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#005198;text-decoration:none}@media (hover:hover) and (pointer:fine){
a:hover{color:#4BA3EA}}
::selection{background:#4BA3EA;color:#0B0E10}
input::placeholder{color:#61707D}
header input::placeholder{color:#fff;opacity:.92}
@keyframes rkFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rkRise{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:translateY(0)}}
@keyframes rkMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}
@media (max-width:960px){#rk-hdr-nav{display:none !important}}
/* The search box grows only on the HOME hero, where the header is over the
   film and has room. Elsewhere it would push the nav around for no reason.
   Hover is gated on a fine pointer so a tablet does not fire it from a
   stray touch; :focus is ungated, which is what makes a tap on an iPad open
   it. Under 680px the box is hidden entirely, so phones never reach this. */
@media (hover:hover) and (pointer:fine){
  #rk-hdr-search:hover{border-color:rgba(255,255,255,.4) !important}
}
#rk-hdr-pill[data-solid="0"] #rk-hdr-search:focus{border-color:#4BA3EA !important}

@keyframes rkGlassIn{from{transform:translateY(12px)}to{transform:none}}

/* ---- state the scripts toggle ------------------------------------------
   !important is load-bearing here, not laziness. Several of the things this
   hides are addressed by ID (#rk-ov, #rk-tray, #rk-ov-ds), and an ID selector
   outranks a class one, so a plain .rk-closed{display:none} loses to
   #rk-ov{display:flex} and the overlay sits open and empty on page load. */
.rk-closed{display:none !important}

/* Rows the enquiry basket builds at runtime. Their look lives here so the
   script only ever sets text and classes, never a style attribute. */
.rk-tray-row{display:flex;justify-content:space-between;gap:10px;padding:12px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);align-items:center}
.rk-tray-name{font-size:13.5px;font-weight:600}
.rk-tray-code{margin-top:3px;font:500 11px 'Plex Mono',monospace;color:#4BA3EA}
.rk-tray-x{all:unset;cursor:pointer;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;
  justify-content:center;color:#8FA5B5;font-size:13px;
  transition:color .2s,border-color .2s}@media (hover:hover) and (pointer:fine){
.rk-tray-x:hover{color:#fff;border-color:#A2382A}}

/* Options inside the catalogue's one filter dropdown. Real radios, so the
   panel is keyboard navigable and a screen reader reads it as three groups.
   Light-on-dark, because the panel is the same frosted glass as the header
   menus rather than a white card. */
.rk-opt{display:flex;align-items:center;gap:10px;cursor:pointer;padding:9px 12px;
  border-radius:10px;font:500 11.5px 'Plex Mono',monospace;letter-spacing:.04em;
  line-height:1.4;color:#AEBFCB;transition:background .18s,color .18s}@media (hover:hover) and (pointer:fine){
.rk-opt:hover{background:rgba(75,163,234,.16);color:#fff}}
.rk-opt input{accent-color:#4BA3EA;width:15px;height:15px;flex:none;margin:0}
.rk-opt:has(input:checked){background:rgba(75,163,234,.2);color:#fff}
.rk-opt:focus-within{outline:2px solid #4BA3EA;outline-offset:-2px}
/* The category column scrolls; its bar should not be a white slab on glass. */
#rk-filter-panel [style*="overflow:auto"],#rk-filter-panel div{scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent}





/* ---- the footer ----------------------------------------------------------
   Brand on the left, three link columns on the right, one bar underneath.
   Nothing here is hoisted from markup: _footer.html carries classes only, so
   the whole look is in one place. */
/* position and z-index are load-bearing, not decoration: the hero is
   position:sticky with z-index:0, and every section that scrolls over it is
   positioned with z-index:2. The footer was static, so the hero VIDEO painted
   straight through it. */
.rk-footer{position:relative;z-index:2;background:#0B0E10;
  border-top:1px solid rgba(255,255,255,.08);color:#D7E2EA}
.rk-footgrid{max-width:min(1920px, 94vw);margin:0 auto;box-sizing:border-box;
  padding:clamp(48px,6vw,72px) clamp(20px,4.5vw,64px) clamp(36px,5vw,56px);
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px)}
/* The wordmark link, and only that one. Written as ".rk-foot-brand a:first-child"
   it also matched the LinkedIn button, which is the first child of .rk-socials
   inside this same block: at specificity (0,2,1) it beat ".rk-socials a" and
   killed that button's display:flex, dropping the 17px glyph into the top-left
   corner of its 38px circle while the other two stayed centred. */
.rk-foot-brand>a:first-child{display:inline-block}
.rk-foot-brand img{height:38px;width:auto;display:block}
.rk-foot-brand p{margin:20px 0 0;font-size:13.5px;line-height:1.7;color:#8FA5B5;max-width:38ch}
.rk-foot-head{font:500 11px 'Plex Mono',monospace;letter-spacing:.18em;
  text-transform:uppercase;color:#4BA3EA}
.rk-foot-links{margin-top:16px;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.rk-foot-links a{color:#D7E2EA;transition:color .2s}@media (hover:hover) and (pointer:fine){
.rk-foot-links a:hover{color:#4BA3EA}}
.rk-foot-links address{font-style:normal;line-height:1.6;color:#8FA5B5}
.rk-foot-all{font:500 11px 'Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:#9CC8EE !important;margin-top:4px}@media (hover:hover) and (pointer:fine){
.rk-foot-all:hover{color:#fff !important}}
.rk-socials{display:flex;gap:10px;margin-top:22px}
.rk-socials a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.18);color:#D7E2EA;
  transition:border-color .2s,color .2s,background .2s}@media (hover:hover) and (pointer:fine){
.rk-socials a:hover{border-color:#4BA3EA;color:#fff;background:rgba(75,163,234,.12)}}
/* explicit box for the glyph: an inline svg sits on the text baseline and
   picks up descender space, which pushed the LinkedIn mark low in some
   browsers */
.rk-socials svg{display:block;width:17px;height:17px;flex:none}
.rk-foot-bar{border-top:1px solid rgba(255,255,255,.08)}
.rk-foot-bar>div{max-width:min(1920px, 94vw);margin:0 auto;box-sizing:border-box;
  padding:18px clamp(20px,4.5vw,64px);display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:10px 28px;font:500 10.5px 'Plex Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#61707D}
.rk-foot-legal{display:flex;gap:22px}
.rk-foot-legal a{color:#8FA5B5;transition:color .2s}@media (hover:hover) and (pointer:fine){
.rk-foot-legal a:hover{color:#4BA3EA}}
/* Tablet: the brand runs across the top, the three columns share the row. */
@media (max-width:1024px){
  .rk-footgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(20px,4vw,40px)}
  .rk-foot-brand{grid-column:1 / -1}
}
/* Phone: brand, then the product list across two columns, then the company
   and contact columns paired left and right. Never one long ribbon. */
@media (max-width:640px){
  .rk-footgrid{grid-template-columns:1fr 1fr;gap:30px clamp(16px,5vw,32px)}
  .rk-foot-products{grid-column:1 / -1}
  .rk-foot-products .rk-foot-links{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
  .rk-foot-products .rk-foot-all{grid-column:1 / -1}
  .rk-foot-col:last-child{text-align:right}
  .rk-foot-col:last-child .rk-foot-links{align-items:flex-end}
  .rk-foot-bar>div{flex-direction:column;align-items:flex-start;gap:10px;font-size:9.5px}
  .rk-socials a{width:34px;height:34px}
}

/* ---- the header, in two shapes ------------------------------------------
   AT REST on a wide screen it is a full-width bar: logo at the left margin,
   the four links dead centre, actions hard right. Its max-width is the page
   width, so the logo lines up with the hero headline beneath it.

   FLOATING (once scrolled) it collapses to the centred glass pill it has
   always been. That is a deliberate change of shape, asked for directly.

   ON A PHONE it is the pill at every scroll position. There is no nav to
   centre at that width, and the full-width bar could not fit the logo, the
   basket, ENQUIRE and the menu button inside 94vw: the hamburger ran past
   the right edge. */
#rk-hdr-pill.rk-float{
  width:fit-content !important;
  max-width:calc(100vw - 24px) !important;
  margin-top:14px !important;
  height:62px !important;
  border-radius:999px !important;
  border-color:rgba(255,255,255,.2) !important;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7) !important;
  grid-template-columns:auto auto auto !important;
}
@media (max-width:960px){
  /* Four things, in the order a thumb expects: menu, search, wordmark, basket.
     The wordmark is centred on the BAR rather than inside a column, because the
     two side groups do not weigh the same and a column-centred logo would sit
     visibly off-axis. Taking it out of flow also lets the search field borrow
     its space while it is open.

     The action cluster becomes display:contents so its children are laid out by
     the bar's own grid and can be ordered around the logo. */
  #rk-hdr-pill,#rk-hdr-pill.rk-float{
    width:100% !important;
    max-width:calc(100vw - 24px) !important;
    margin-top:12px !important;
    height:60px !important;
    border-radius:999px !important;
    padding:0 10px !important;
    grid-template-columns:auto auto 1fr !important;
    gap:8px !important;
  }
  /* At the top of a page the bar is only its controls over the hero, exactly
     as on a laptop. The rim and the shadow arrive with the glass when the
     runtime marks the bar floating, so the whole treatment lands at once. */
  #rk-hdr-pill.rk-float{
    border-color:rgba(255,255,255,.2) !important;
    box-shadow:0 18px 44px -18px rgba(0,0,0,.72) !important;
  }

  /* ---- the phone bar -----------------------------------------------------
     A normal bar rather than a floating capsule: full width, flush to the
     top, square, one fill, and it keeps its shape when you scroll. This is
     inside the phone breakpoint on purpose - the desktop keeps its pill. */
  #rk-hdr-pill,#rk-hdr-pill.rk-float{
    max-width:none !important;
    margin-top:0 !important;
    height:58px !important;
    border-radius:0 !important;
    padding:0 16px !important;
    background:#0B0E10 !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.1) !important;
  }
  /* scrolled, it earns a shadow and nothing else moves */
  #rk-hdr-pill.rk-float{box-shadow:0 10px 28px -16px rgba(0,0,0,.8) !important}
  /* the glass layer belongs to the pill; on the flat bar it is just blur
     over a solid fill, so it stays down whatever the runtime does to it */
  #rk-hdr-pill>div:first-child{opacity:0 !important}

  /* No circles: the ring, the fill and the inner highlight go and the icon
     is the control. The target stays 44px so it does not shrink with the
     decoration. */
  #rk-hdr-pill [title="Enquiry basket"],
  #rk-hdr-pill [title="Menu"]{
    background:none !important;border:0 !important;box-shadow:none !important;
    border-radius:0 !important;width:44px !important;height:44px !important;
  }
  #rk-hdr-pill #rk-hdr-search{
    border:0 !important;border-radius:0 !important;
    background:none !important;box-shadow:none !important;
  }
  #rk-hdr-pill .rk-search-wrap{width:44px !important;height:44px !important}
  #rk-hdr-pill .rk-search-wrap.rk-open #rk-hdr-search{
    border-bottom:1.5px solid #4BA3EA !important;background:none !important;
  }

  /* One size for both marks. A magnifier and a bag at the same nominal size
     do not carry the same weight, so the magnifier is drawn a shade lighter
     and both are centred in the same 44px box. */
  #rk-hdr-pill .rk-search-wrap .rk-mag,
  #rk-hdr-pill [title="Enquiry basket"] svg,
  #rk-hdr-pill [title="Menu"] svg{
    width:20px !important;height:20px !important;
  }
  /* the magnifier is #9CC8EE elsewhere, which next to two white marks reads
     as a different control rather than the same one. One colour, and one
     stroke weight, so the three sit as a set. */
  #rk-hdr-pill .rk-search-wrap .rk-mag{stroke-width:1.8;right:12px;color:#EAF2F8}
  #rk-hdr-pill .rk-search-wrap:focus-within .rk-mag{color:#4BA3EA}
  #rk-hdr-pill [title="Enquiry basket"] svg{stroke-width:1.8}
  /* the hamburger is three spans, not an svg, so it is sized here to
     match the 20px marks either side of it */
  #rk-hdr-pill [title="Menu"] span{width:20px !important;height:1.8px !important}

  #rk-hdr-nav{display:none !important}
  #rk-hdr-pill>div:last-child{display:contents}
  /* display:contents removes the cluster box, and with it the position:relative
     and z-index that lifted the controls above the glass layer. Each control
     has to carry that itself now, or the glass paints over them and the
     hamburger all but disappears. */
  #rk-hdr-pill>div:last-child>*{position:relative;z-index:1}
  #rk-hdr-pill>a{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);padding:0 !important;z-index:2;
    transition:opacity .22s}
  #rk-hdr-pill>a img{height:26px}
  #rk-hdr-pill [title="Menu"]{order:1}
  #rk-hdr-pill .rk-search-wrap{order:2}
  #rk-hdr-pill [title="Enquiry basket"]{order:3;justify-self:end}
  #rk-hdr-pill .rk-hdr-enquire{display:none !important}

  /* the search sits on the left, so it opens rightward and takes the room the
     wordmark was using; the wordmark steps aside while it is open */
  #rk-hdr-pill #rk-hdr-search{left:0;right:auto}
  #rk-hdr-pill .rk-search-wrap.rk-open{justify-self:stretch}
  #rk-hdr-pill .rk-search-wrap.rk-open #rk-hdr-search{left:0;right:0;width:auto}
  #rk-hdr-pill.rk-searching>a{opacity:0;pointer-events:none}
  /* the panel hangs off a wrapper that starts 60px into the bar, so anchoring
     it there pushed it past the right edge of a phone. Pin it to the viewport. */
  #rk-hdr-pill .rk-search-wrap #rk-sug{position:fixed;left:12px;right:12px;top:66px;
    width:auto;max-height:min(58vh,420px)}
}

/* ---- the header search --------------------------------------------------
   A magnifier in a pill. It does NOT grow on hover any more: a control that
   changes size when the pointer crosses it makes the whole action cluster
   twitch, and on the floating pill it shoved the nav sideways. One width, at
   rest and floating alike.

   Below 680px the header control is hidden; search on a phone lives in the
   menu panel, which has room for it. */
.rk-search-wrap{width:clamp(132px,13vw,190px)}
.rk-search-wrap .rk-mag{position:absolute;right:12px;color:#9CC8EE;pointer-events:none;
  transition:color .2s}
.rk-search-wrap:focus-within .rk-mag{color:#4BA3EA}



/* ---- the page does not scroll behind the menu --------------------------
   overflow:hidden on the root alone is ignored by iOS Safari, which keeps
   scrolling the document under a fixed overlay. Fixing the body is the only
   reliable stop, and it loses the scroll position, so the runtime records the
   offset before locking and restores it after. */
html.rk-locked{overflow:hidden}
html.rk-locked body{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ---- the menu panel -----------------------------------------------------
   One panel, two shapes. On a laptop it is a card hung from the menu button.
   Under 680px it takes the whole screen, the way a shop's menu does: a small
   search field, the routes (PRODUCTS opens in place to list the eight
   categories), then the basket and the enquiry side by side. */
.rk-menu-links{display:flex;flex-direction:column;padding:6px 10px 4px}
.rk-menu-link{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  gap:12px;width:100%;padding:13px 16px;border-radius:12px;color:#EAF2F8;
  font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;
  font-size:20px;letter-spacing:.005em;line-height:1.1;text-align:left;
  transition:background .2s,padding-left .25s}@media (hover:hover) and (pointer:fine){
.rk-menu-link:hover{background:rgba(75,163,234,.14);padding-left:22px;color:#fff}}
.rk-menu-toggle{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:12px;width:100%;padding:13px 16px;border-radius:12px;
  color:#EAF2F8;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:20px;letter-spacing:.005em;line-height:1.1;
  transition:background .2s,padding-left .25s}@media (hover:hover) and (pointer:fine){
.rk-menu-toggle:hover{background:rgba(75,163,234,.14);padding-left:22px;color:#fff}}
.rk-menu-toggle:focus-visible{outline:2px solid #4BA3EA;outline-offset:-2px}
.rk-menu-toggle[aria-expanded="true"]{background:rgba(75,163,234,.1);color:#fff}
.rk-menu-chev{color:#4BA3EA;flex:none;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.rk-menu-toggle[aria-expanded="true"] .rk-menu-chev{transform:rotate(180deg)}
.rk-menu-sub{display:flex;flex-direction:column;gap:1px;padding:4px 0 8px 12px;
  animation:rkFade .25s cubic-bezier(.22,1,.36,1) both}
.rk-menu-subitem{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-radius:10px;font-size:15px;color:#D7E2EA;transition:background .15s,color .15s}@media (hover:hover) and (pointer:fine){
.rk-menu-subitem:hover{background:rgba(75,163,234,.14);color:#fff}}
.rk-menu-suball{margin-top:4px;font:500 11px 'Plex Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#9CC8EE}
/* Brand left, close right, mirroring the page header. */
.rk-menu-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 16px 4px}
.rk-menu-brand img{display:block;height:28px;width:auto}
.rk-menu-reach{display:flex;flex-direction:column;gap:7px;padding:16px 18px 4px;
  border-top:1px solid rgba(255,255,255,.1)}
.rk-menu-reach>a{font-size:14px;color:#D7E2EA;transition:color .2s}
.rk-menu-reach>a:first-child{font:500 15px 'Plex Mono',monospace;letter-spacing:.02em;color:#fff}@media (hover:hover) and (pointer:fine){
.rk-menu-reach>a:hover{color:#4BA3EA}}
.rk-menu-reach .rk-socials{margin-top:9px}
.rk-menu-reach .rk-socials a{width:36px;height:36px}

.rk-menu-search{position:relative;display:flex;align-items:center;margin:12px 16px 4px}
.rk-menu-search input{box-sizing:border-box;width:100%;height:42px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;
  font-size:16px;padding:0 40px 0 16px;outline:none;transition:border-color .2s}
.rk-menu-search input:focus{border-color:#4BA3EA}
.rk-menu-search .rk-mag{position:absolute;right:14px;color:#9CC8EE;pointer-events:none}
.rk-menu-search #rk-sug{right:0;left:0;width:auto}
.rk-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 16px 14px}
.rk-menu-basket{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:9px;padding:0 14px;height:48px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:#EAF2F8;font:500 12px 'Plex Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;transition:border-color .2s,color .2s}@media (hover:hover) and (pointer:fine){
.rk-menu-basket:hover{border-color:#4BA3EA;color:#fff}}
.rk-menu-basket span{min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:#005198;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:0}
.rk-menu-enquire{box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  height:48px;padding:0 14px;border-radius:999px;font:500 12px 'Plex Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#1668B4,#005198 55%,#003F76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);transition:filter .2s}@media (hover:hover) and (pointer:fine){
.rk-menu-enquire:hover{filter:brightness(1.12);color:#fff}}
.rk-menu-foot{border-top:1px solid rgba(255,255,255,.1);padding:14px 18px;
  font:500 10.5px 'Plex Mono',monospace;letter-spacing:.14em;color:#61707D}
/* The card is placed 12px under the header, which itself sits 14px down and
   is 76px tall, so 102px is already spent before it starts. Leave a matching
   gap at the bottom rather than running off the screen. */
#rk-menu-panel{max-height:calc(100dvh - 118px);overflow-y:auto;overscroll-behavior:contain}
/* The close sits in the menu's own header row at every width. On the
   full-screen panel it is the only way out, since the panel covers the bar. */
.rk-menu-close{all:unset;box-sizing:border-box;display:flex;flex:none;cursor:pointer;
  width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;
  color:#EAF2F8;border:1px solid rgba(255,255,255,.22);
  transition:border-color .2s,color .2s}@media (hover:hover) and (pointer:fine){
.rk-menu-close:hover{border-color:#4BA3EA;color:#fff}}
.rk-menu-close:focus-visible{outline:2px solid #4BA3EA;outline-offset:2px}
@media (max-width:680px){
  #rk-menu-panel{
    position:fixed !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:auto !important;max-height:none !important;height:100dvh !important;
    border-radius:0 !important;border:0 !important;
    padding-top:0;box-sizing:border-box;
    display:flex;flex-direction:column;
    background:rgba(9,12,14,.88) !important;
    backdrop-filter:blur(30px) saturate(1.7) !important;
    -webkit-backdrop-filter:blur(30px) saturate(1.7) !important;
    animation:rkGlassIn .22s cubic-bezier(.22,1,.36,1) both}
  .rk-menu-top{padding:18px 18px 6px}
  .rk-menu-brand img{height:30px}
  .rk-menu-search{margin:6px 18px 8px}
  .rk-menu-links{padding:6px 12px 4px}
  .rk-menu-link,.rk-menu-toggle{font-size:24px;padding:14px 16px}
  .rk-menu-subitem{font-size:16px;padding:11px 14px}
  .rk-menu-actions{margin:10px 20px 18px}
  /* the credential line pins to the bottom of the screen */
  #rk-menu-panel>*:last-child{margin-top:auto}
}

/* ---- what the search actually returns ------------------------------------
   Typing shows matching products immediately. Built by script, so the styles
   live here rather than as attributes the CSP would block. */
#rk-sug{position:absolute;top:calc(100% + 10px);right:0;z-index:86;
  width:min(380px,calc(100vw - 24px));max-height:min(60vh,420px);overflow:auto;
  background:rgba(13,17,21,.94);backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.18);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 40px 80px -30px rgba(0,0,0,.85);
  padding:6px;animation:rkGlassIn .18s cubic-bezier(.22,1,.36,1) both}
.rk-sug-item{display:flex;flex-direction:column;gap:3px;padding:10px 12px;
  border-radius:10px;color:#EAF2F8;transition:background .15s}@media (hover:hover) and (pointer:fine){
.rk-sug-item:hover,.rk-sug-on{background:rgba(75,163,234,.18);color:#fff}}
.rk-sug-name{font-size:14px;font-weight:600;line-height:1.3}
.rk-sug-meta{font:500 10.5px 'Plex Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:#8FA5B5}


/* ---- the enquiry form -------------------------------------------------
   .rk-hp is the honeypot: off-screen rather than display:none, because the
   better bots skip anything display:none and fill in everything else.
   tabindex="-1" keeps it out of the keyboard path. */
.rk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.rk-formnote{margin:10px 0 0;font:500 12px 'Plex Mono',monospace;letter-spacing:.02em;
  line-height:1.6;color:#8FA5B5;transition:color .2s}
.rk-formnote.rk-ok{color:#7ED0A6}
.rk-formnote.rk-bad{color:#F0A88A}

/* ---- skip to content ----------------------------------------------------
   The header is fixed and identical on every page: a wordmark, four nav
   links, a search, a basket and a menu. Without this a keyboard user tabs
   all of it before reaching the page, every time, on every page.

   Moved off-screen rather than hidden: display:none and visibility:hidden
   both remove an element from the tab order, which would defeat it. */
.rk-skip{position:fixed;left:-9999px;top:0;z-index:200;
  padding:12px 20px;border-radius:0 0 12px 0;
  font:500 13px 'Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:#005198;box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
.rk-skip:focus{left:0}
.rk-skip:focus-visible{outline:2px solid #fff;outline-offset:-5px}
/* The fixed header would otherwise sit on top of whatever the link jumps
   to, so the target reserves its own height. */
#main{scroll-margin-top:96px}

/* ---- taps land immediately ----------------------------------------------
   Without this a touch browser waits to see whether a tap is the first half
   of a double-tap-to-zoom before it dispatches the click, which reads as a
   button that did not respond. manipulation keeps panning and pinch-zoom and
   drops only the double-tap gesture, which nothing here uses.

   !important because most controls here are all:unset buttons whose
   hoisted class rule resets touch-action to auto, and a class outranks an
   element selector. Overriding it is the whole point of the rule. */
a,button,summary,label,input,select,[role="button"]{touch-action:manipulation !important}

/* ---- back to top --------------------------------------------------------
   A catalogue of 130 products is long, and the list view makes it longer:
   getting back to the filters from the bottom is a dozen swipes. The button
   appears after one screen of scrolling.

   It sits bottom LEFT. The right-hand corner already holds the WhatsApp button
   and, on the catalogue, the quick-add button of whichever card happens to be
   there: a floating control may cover text, but it should not cover another
   control. The left corner is empty on every page that has a listing. */
.rk-top{all:unset;box-sizing:border-box;position:fixed;z-index:88;
  left:clamp(14px,3vw,32px);bottom:clamp(14px,3vw,32px);
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#EAF2F8;background:rgba(13,17,21,.86);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.7);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .25s,transform .25s cubic-bezier(.22,1,.36,1),border-color .2s,color .2s}
.rk-top-on{opacity:1;transform:none;pointer-events:auto}@media (hover:hover) and (pointer:fine){
.rk-top:hover{border-color:#4BA3EA;color:#fff}}
.rk-top:focus-visible{outline:2px solid #4BA3EA;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .rk-top{transition:opacity .2s;transform:none}
}

/* ---- format silhouettes --------------------------------------------------
   71 of the 130 products have no photograph yet. A silhouette stands in its
   place: flat line art of the PACK FORMAT, at its own scale inside the image
   box, with the format named underneath in the same mono the rest of the
   site uses for data. It is drawn to read as a diagram, never as a product
   shot, and the product page repeats that in words under the box. */
.rk-silo img{width:58%;max-width:132px;height:auto;opacity:.92}
.rk-silo>span{font:500 9.5px 'Plex Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#8C9BA8}
@media (max-width:560px){
  .rk-silo>span{font-size:8px;letter-spacing:.08em}
  .rk-silo img{width:52%}
}
/* the product hero shows the same drawing larger, and must not crop it */
.rk-hero-silo{background:#F7F9FA !important}
.rk-hero-silo #rk-p-img{object-fit:contain !important;padding:11%}

/* ---- catalogue card ------------------------------------------------------
   The category label is one long unbroken word on several categories
   ("IMMUNOTURBIDIMETRIC"), so it gets a single line and an ellipsis rather
   than being allowed to grow the row. The quick-add button now lives inside
   the image box, which is the only way every card can put it in the same
   place regardless of how long that label is. */
.rk-card-cat{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:500 10.5px 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#61707D}
@media (max-width:560px){.rk-card-cat{font-size:9.5px;letter-spacing:.1em}}
/* ---- the grid/list view toggle ----------------------------------------- */
.rk-viewbtn{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;color:#61707D;transition:background .18s,color .18s}@media (hover:hover) and (pointer:fine){
.rk-viewbtn:hover{color:#101D27;background:rgba(0,81,152,.08)}}
.rk-viewbtn:focus-visible{outline:2px solid #005198;outline-offset:-2px}
.rk-viewbtn[aria-pressed="true"]{background:linear-gradient(180deg,#1668B4,#005198);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
body{margin:0}

/* The angle strip. Same look as the catalogue overlay's, because it is the
   same thing: the other verified photographs of this pack. */
.rk-angle{all:unset;cursor:pointer;flex:none;width:76px;aspect-ratio:4/3;
  border-radius:8px;overflow:hidden;background:#fff;box-sizing:border-box;
  border:1px solid #DBE1E6;transition:border-color .2s,opacity .2s;opacity:.62}
.rk-angle img{width:100%;height:100%;object-fit:cover;display:block}@media (hover:hover) and (pointer:fine){
.rk-angle:hover{opacity:1;border-color:rgba(0,81,152,.55)}}
.rk-angle:focus-visible{outline:2px solid #005198;outline-offset:2px}
.rk-angle[aria-pressed="true"]{opacity:1;border-color:#005198}

/* The stock-code table's photograph column and its links. */
.rk-rowshot{width:72px;height:54px;object-fit:cover;border-radius:6px;
  border:1px solid #DBE1E6;display:block;background:#F1F4F6}
.rk-dash{color:#9CA9B4}
.rk-dslink{color:#005198;font-weight:600}@media (hover:hover) and (pointer:fine){
.rk-dslink:hover{color:#1668B4}}

/* The lifted header is fixed, so a fragment link would land under it. */
:target{scroll-margin-top:96px}

/* ---- the assembly, embedded in a light page -------------------------------
   A full-bleed dark band, the way the homepage breaks its own light sections.
   The page's main is a max-width column, so this has to break out of it: 100vw
   centred on the viewport rather than on the column. */
.rk-as-embed{position:relative;left:50%;right:50%;width:100vw;
  margin-left:-50vw;margin-right:-50vw;background:#0B0E10;color:#fff}
.rk-as-embedhead{max-width:1280px;margin:0 auto;
  padding:clamp(48px,7vw,88px) clamp(20px,4.5vw,64px) 0}
.rk-as-embedhead h2{margin:0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:clamp(24px,3.2vw,38px);line-height:1.05;
  letter-spacing:.005em;color:#fff}
.rk-as-embedhead h2 span{color:#4BA3EA}
.rk-as-embedhead p{margin:14px 0 0;max-width:62ch;font-size:15.5px;line-height:1.7;color:#B7C7D3}
.rk-as-embedhead b{color:#fff;font-weight:600}
.rk-as-embedhead .rk-as-note{margin-top:12px;font:500 11px 'Plex Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;color:#6E8598}
/* Embedded, the sticky stage should not also carry the page background: the
   band around it already does. */
.rk-as-embed .rk-as-wrap{margin-top:clamp(8px,2vw,24px)}
.rk-as-embed .rk-as-still{padding-top:clamp(24px,4vw,40px)}

/* ---- the assembly diagram -------------------------------------------------
   A sticky stage inside a tall wrapper: the wrapper's height is set in JS from
   the number of stages, so the scroll distance per stage stays the same
   whatever the viewport. Dark, because the drawing is line work and it reads
   better lifted off a dark ground than sitting on a white one. */
.rk-as-note{margin:12px 0 0;font:500 11px 'Plex Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:#6E8598}

.rk-as-wrap{position:relative}
.rk-as-stage{position:sticky;top:0;height:100svh;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:center;
  gap:clamp(20px,4vw,56px);max-width:1280px;margin:0 auto;
  padding:0 clamp(20px,4.5vw,64px)}

/* the drawing */
.rk-as-canvas{grid-column:1;min-width:0}
/* Clipped to the frame so the lit ground cannot spill onto the light page above
   and below, then feathered at the frame itself: the fade has to be in screen
   space, because the camera moves the drawing's own coordinates underneath it. */
.rk-as-canvas svg{display:block;width:100%;height:auto;max-height:60svh;overflow:hidden;
  -webkit-mask-image:radial-gradient(58% 64% at 50% 50%,#000 64%,transparent 100%);
  mask-image:radial-gradient(58% 64% at 50% 50%,#000 64%,transparent 100%)}
/* Every layer animates from its own centre, or the housing would grow out of
   the top-left corner instead of closing around the strip. */
.as-layer{transform-box:fill-box;transform-origin:50% 50%;transition:none}
#as-line-t,#as-line-c{transform-box:fill-box;transform-origin:50% 100%}
.as-tick{font:500 11px 'Plex Mono',monospace;fill:#8FA3B4;letter-spacing:.08em}
/* Every moving part turns about its own centre unless it is hinged, in which
   case it turns about the edge it is hinged on. Getting this wrong is what
   makes a folding box look like a shrinking rectangle. */
#as-scene g,#as-scene rect,#as-scene path,#as-scene text,#as-ground rect{
  transform-box:fill-box;transform-origin:50% 50%}
#as-line-t,#as-line-c{transform-origin:50% 100%}
#as-c-top{transform-origin:50% 100%}
#as-c-side{transform-origin:0% 50%}
#as-pouch-sheen,#as-sweep,#as-jaw-l{transform-origin:0% 50%}
#as-jaw-r{transform-origin:100% 50%}
/* The stage number, enormous and nearly gone. It gives the frame a sense of
   scale and tells you where you are without another label. */
.as-bignum{font-family:'Archivo',sans-serif;font-stretch:62%;font-weight:800;
  font-size:300px;fill:#4BA3EA;fill-opacity:.055;text-anchor:middle;
  paint-order:stroke;pointer-events:none}
.as-lot{font:500 10px 'Plex Mono',monospace;fill:#6C7D8B;text-anchor:middle;letter-spacing:.16em}
.as-mark{font:500 10px 'Plex Mono',monospace;fill:#8FA0AE;text-anchor:middle}
.as-tiny{font:500 8px 'Plex Mono',monospace;fill:#8FA0AE;text-anchor:middle}
.as-brand{font:600 11px 'Inter',sans-serif;fill:#6B7C8A;text-anchor:end}
.as-pouchmark{font:800 26px 'Archivo',sans-serif;font-stretch:72%;fill:#1B4F86;
  text-anchor:middle;letter-spacing:.01em}
.as-pouchsub{font:500 10px 'Plex Mono',monospace;fill:#5B6C7A;text-anchor:middle;letter-spacing:.14em}
.as-cartonmark{font:800 22px 'Archivo',sans-serif;font-stretch:72%;fill:#1B4F86}
.as-cartonsub{font:600 12px 'Inter',sans-serif;fill:#3C4A56}
.as-cartoncode{font:500 11px 'Plex Mono',monospace;fill:#005198;letter-spacing:.08em}

/* the caption */
.rk-as-caption{grid-column:2;min-width:0}
.rk-as-step{margin:0;font:500 11px 'Plex Mono',monospace;letter-spacing:.18em;
  text-transform:uppercase;color:#4BA3EA}
.rk-as-step span+span{color:#5C6B79}
.rk-as-caption h2{margin:12px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;
  font-weight:800;text-transform:uppercase;font-size:clamp(22px,3vw,34px);line-height:1.05;
  letter-spacing:.005em;color:#fff;min-height:2.1em}
.rk-as-caption p+p,#rk-as-body{margin:14px 0 0;font-size:15px;line-height:1.75;color:#B7C7D3}
#rk-as-body{min-height:7.5em}

/* the rail */
.rk-as-rail{position:absolute;left:clamp(20px,4.5vw,64px);bottom:clamp(20px,4vw,44px);
  right:clamp(20px,4.5vw,64px);margin:0;padding:0;list-style:none;
  display:flex;gap:clamp(6px,1.4vw,18px)}
.rk-as-rail li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px}
.rk-as-rail i{display:block;height:2px;border-radius:1px;background:#24313B;
  transition:background .35s}
.rk-as-rail li.rk-on i{background:#4BA3EA}
.rk-as-rail span{font:500 9px 'Plex Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:#4A5A67;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transition:color .35s}
.rk-as-rail li.rk-on span{color:#8FA5B5}

/* the still list, for reduced motion */
.rk-as-still{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(20px,4.5vw,64px);
  list-style:none;counter-reset:s}
.rk-as-still li{counter-increment:s;position:relative;padding-left:48px;margin-top:26px}
.rk-as-still li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;
  font:500 11px 'Plex Mono',monospace;color:#4BA3EA}
.rk-as-still b{display:block;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:19px;letter-spacing:.005em;color:#fff}
.rk-as-still span{display:block;margin-top:7px;font-size:14.5px;line-height:1.7;color:#B7C7D3}

@media (max-width:900px){
  /* Stacked: the drawing on top, the caption under it, the rail below both.
     A 420px caption column beside a drawing is unreadable on a phone. */
  .rk-as-stage{grid-template-columns:minmax(0,1fr);align-content:center;
    gap:clamp(14px,3vw,26px);padding-bottom:72px}
  .rk-as-canvas,.rk-as-caption{grid-column:1}
  .rk-as-canvas svg{max-height:34svh}
  .rk-as-caption h2{min-height:0}
  #rk-as-body{min-height:9em;font-size:14.5px}
  .rk-as-rail span{display:none}
  .rk-as-rail{gap:5px}
}

/* On a phone the pinned stage sat under the 58px header, and the drawing box
   took the camera's shape: 380 by 110 at the first step, a 102px strip in a
   full-height panel with the rest of the screen empty, growing to 208px only
   by step five. The stage now starts below the header, and the drawing keeps
   the finished scene's 640 by 380 frame at every step, so the camera zooms
   inside a steady window instead of the window shrinking to a sliver. Up to
   960px, which is where the header is the flat 58px bar. */
@media (max-width:960px){
  .rk-as-stage{top:58px;height:calc(100svh - 58px)}
  .rk-as-canvas svg{aspect-ratio:640/380;height:auto}
}

/* ---- the enquiry page -----------------------------------------------------
   Two columns on a desk, stacked on a phone, with the list FIRST in both. A
   buyer arriving here has already chosen; showing the form above their own
   list would make them scroll to check what they are about to send. */
.rk-enq-head{position:relative;background:#0B0E10;color:#fff;overflow:hidden}
.rk-enq-headin{max-width:1280px;margin:0 auto;
  padding:calc(72px + clamp(14px,2.2vw,32px)) clamp(20px,4.5vw,64px) clamp(26px,3.4vw,44px)}
.rk-enq-crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:500 11.5px 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8FA5B5}
.rk-enq-crumb a{color:#8FA5B5;transition:color .2s}@media (hover:hover) and (pointer:fine){
.rk-enq-crumb a:hover{color:#4BA3EA}}
.rk-enq-crumb span{color:#3A4954}
.rk-enq-crumb .rk-enq-here{color:#4BA3EA}
.rk-enq-head h1{margin:14px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:clamp(30px,5vw,58px);line-height:1.02;letter-spacing:.005em}
.rk-enq-head h1 span{color:#4BA3EA}
.rk-enq-lede{margin:16px 0 0;max-width:60ch;font-size:15.5px;line-height:1.7;color:#B7C7D3}

.rk-enq-main{flex:1;background:#F1F4F6}
.rk-enq-grid{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,3.5vw,48px);
  padding:clamp(28px,4vw,52px) clamp(20px,4.5vw,64px) clamp(64px,8vw,104px);align-items:start}
.rk-enq-col h2{margin:0 0 18px;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:clamp(21px,2.6vw,30px);line-height:1.05;color:#101D27}
.rk-enq-col h2 span{color:#005198}

/* the list */
.rk-enq-items{display:flex;flex-direction:column;gap:10px}
.rk-enq-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;
  background:#fff;border:1px solid #DBE1E6;border-radius:12px;padding:14px 16px}
.rk-enq-name{font-weight:600;font-size:15px;line-height:1.35;color:#101D27}
.rk-enq-code{margin-top:3px;font:500 11.5px 'Plex Mono',monospace;letter-spacing:.04em;color:#005198}
.rk-enq-qty{display:flex;align-items:center;border:1px solid #DBE1E6;border-radius:9px;overflow:hidden;
  background:#F7F9FA;flex:none}
.rk-enq-qty button{all:unset;box-sizing:border-box;cursor:pointer;width:34px;height:38px;
  display:flex;align-items:center;justify-content:center;font-size:15px;color:#101D27;
  transition:background .18s}@media (hover:hover) and (pointer:fine){
.rk-enq-qty button:hover{background:#EAF2FA}}
.rk-enq-qty button:focus-visible{outline:2px solid #005198;outline-offset:-2px}
.rk-enq-qty input{all:unset;box-sizing:border-box;width:44px;height:38px;text-align:center;
  font:500 14px 'Plex Mono',monospace;color:#101D27;background:#fff;
  border-left:1px solid #DBE1E6;border-right:1px solid #DBE1E6;-moz-appearance:textfield}
.rk-enq-qty input::-webkit-outer-spin-button,.rk-enq-qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.rk-enq-drop{all:unset;box-sizing:border-box;cursor:pointer;flex:none;
  font:500 10.5px 'Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:#8A94A0;padding:8px 4px;transition:color .2s}@media (hover:hover) and (pointer:fine){
.rk-enq-drop:hover{color:#9C3B24}}
.rk-enq-drop:focus-visible{outline:2px solid #005198;outline-offset:2px;border-radius:4px}
.rk-enq-count{margin:14px 0 0;font:500 11.5px 'Plex Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:#61707D}
.rk-enq-empty{background:#fff;border:1px dashed #C3CDD5;border-radius:14px;padding:22px 24px}
.rk-enq-empty p{margin:0;font-size:14.5px;line-height:1.7;color:#4A5D6C}
.rk-enq-empty p+p{margin-top:9px}
.rk-enq-empty b{color:#101D27}
.rk-enq-browse{display:inline-block;margin-top:14px;font:500 12px 'Plex Mono',monospace;
  letter-spacing:.1em;color:#005198;border-bottom:2px solid #005198;padding-bottom:3px}

/* the form */
.rk-enq-form{background:#fff;border:1px solid #DBE1E6;border-radius:16px;
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:15px}
.rk-enq-pair{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.rk-enq-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.rk-enq-field label{font:500 11px 'Plex Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:#61707D;display:flex;gap:8px;align-items:baseline}
.rk-enq-field label i{font-style:normal;font-size:9.5px;letter-spacing:.1em;color:#A2ADB7}
/* 16px, not smaller: iOS Safari zooms the page in on any field under 16px */
.rk-enq-field input,.rk-enq-field select,.rk-enq-field textarea{
  box-sizing:border-box;width:100%;font:400 16px 'Inter',system-ui,sans-serif;color:#101D27;
  background:#F7F9FA;border:1px solid #DBE1E6;border-radius:10px;padding:12px 14px;
  transition:border-color .2s,box-shadow .2s,background .2s}
.rk-enq-field textarea{resize:vertical;line-height:1.6;min-height:96px}
.rk-enq-field input:focus,.rk-enq-field select:focus,.rk-enq-field textarea:focus{
  outline:none;background:#fff;border-color:#005198;box-shadow:0 0 0 4px rgba(0,81,152,.12)}
.rk-enq-field .rk-wrong{border-color:#9C3B24;background:#FCF3F0}
.rk-enq-send{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;margin-top:4px;
  font:500 12.5px 'Plex Mono',monospace;letter-spacing:.12em;color:#fff;background:#005198;
  border-radius:11px;padding:16px 20px;transition:filter .2s,opacity .2s}@media (hover:hover) and (pointer:fine){
.rk-enq-send:hover{filter:brightness(1.15)}}
.rk-enq-send:focus-visible{outline:2px solid #101D27;outline-offset:2px}
.rk-enq-send[disabled]{opacity:.55;cursor:default}
.rk-enq-status{margin:0;font:500 12px 'Plex Mono',monospace;line-height:1.6;color:#61707D}
.rk-enq-status.rk-ok{color:#12634A}
.rk-enq-status.rk-bad{color:#9C3B24}
.rk-enq-privacy{margin:0;font-size:12.5px;line-height:1.6;color:#8A94A0}
.rk-enq-privacy a{color:#005198}

@media (max-width:900px){
  .rk-enq-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* The remove control drops under the row rather than squeezing three
     columns into 320px and clipping the product name. */
  .rk-enq-row{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
  .rk-enq-drop{grid-column:1 / -1;justify-self:start}
  .rk-enq-pair{grid-template-columns:1fr}
}

/* ---- careers -------------------------------------------------------------
   Four function cards and one honest note. No invented roles or benefits. */
/* ---- Careers -------------------------------------------------------------
   Laid out after the reference: a split hero, an oversized heading in two
   voices, then a light band with the form and photographs floated beside it.

   Newsreader italic is the second voice. The file was already sitting unused
   in assets/fonts, so this costs one declaration and the 62 KB downloads only
   on a page that actually renders a glyph in it. The path is written for
   assets/css/page.css, one level below the markup, because PAGE_CSS is not
   put through depth() the way the base layer is. */
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight:200 800;font-style:italic;font-display:swap}

/* The four functions. Not vacancies, so they are stated as cards rather than
   as anything you can apply to directly. */
.rk-careers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;margin-top:22px}
.rk-careers-card{background:#fff;border:1px solid #DBE1E6;border-radius:14px;padding:22px}
.rk-careers-num{font:500 11px 'Plex Mono',monospace;letter-spacing:.14em;color:#4BA3EA}
.rk-careers-card h3{margin:10px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;
  font-weight:800;text-transform:uppercase;font-size:19px;line-height:1.1;color:#101D27}
.rk-careers-card p{margin:10px 0 0;font-size:14px;line-height:1.65;color:#4A5D6C}

.rk-cr-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  background:#0B0E10;color:#fff}

/* the photograph, with the reference's caption sitting over its foot */
.rk-cr-shot{position:relative;min-height:clamp(420px,62vh,660px);overflow:hidden}
.rk-cr-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.45) brightness(.8)}
.rk-cr-shotcap{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:clamp(20px,3vw,34px) clamp(20px,3vw,34px) clamp(18px,2.4vw,28px);
  background:linear-gradient(180deg,rgba(11,14,16,0),rgba(11,14,16,.86) 62%);
  font-size:12.5px;line-height:1.6;color:#C6D3DC;max-width:46ch}

.rk-cr-panel{display:flex;flex-direction:column;justify-content:center;
  padding:calc(72px + clamp(28px,4vw,56px)) clamp(24px,4.5vw,72px) clamp(36px,5vw,64px)}
.rk-cr-crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:500 11.5px 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8FA5B5}
.rk-cr-crumb a{color:#4BA3EA;transition:color .2s}@media (hover:hover) and (pointer:fine){
.rk-cr-crumb a:hover{color:#fff}}
.rk-cr-crumb>span{color:#3A4954}
.rk-cr-crumb .rk-cr-here{color:#fff}

/* The two voices: condensed uppercase sans, then a lowercase italic serif
   indented under it. That contrast is the whole trick of the reference. */
.rk-cr-hero h1{margin:clamp(16px,2.4vw,28px) 0 0;display:flex;
  flex-direction:column;line-height:.92;letter-spacing:.005em}
.rk-cr-sans{font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:clamp(38px,6.2vw,84px)}
.rk-cr-serif{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(42px,7vw,96px);color:#4BA3EA;padding-left:.14em;margin-top:-.06em}

.rk-cr-lede{margin:clamp(18px,2.4vw,26px) 0 0;max-width:52ch;
  font-size:clamp(14.5px,1.6vw,16.5px);line-height:1.7;color:#AEBFCB}

.rk-cr-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(18px,2.4vw,34px);margin-top:clamp(26px,3.4vw,44px);
  padding-top:clamp(22px,2.8vw,32px);border-top:1px solid #1C262E}
.rk-cr-meta b{display:block;font:500 10.5px 'Plex Mono',monospace;letter-spacing:.2em;
  text-transform:uppercase;color:#4BA3EA}
.rk-cr-meta p{margin:9px 0 0;font-size:13.5px;line-height:1.65;color:#C6D3DC}
.rk-cr-meta a{color:#fff;border-bottom:1px solid #3A4954;transition:border-color .2s}@media (hover:hover) and (pointer:fine){
.rk-cr-meta a:hover{border-color:#4BA3EA}}

.rk-cr-main{flex:1;background:#F1F4F6}
/* The card grid is the last thing on the page now, so it needs room under it
   rather than the 40px that assumed a closing band was coming. */
.rk-cr-wrap{max-width:1280px;margin:0 auto;
  padding:0 clamp(20px,4.5vw,64px) clamp(56px,8vw,104px)}
.rk-cr-h2{margin:0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:clamp(24px,3.2vw,38px);line-height:1.05;
  letter-spacing:.005em;color:#101D27}
.rk-cr-h2 span{color:#005198}
.rk-cr-sub{margin:12px 0 0;max-width:62ch;font-size:15px;line-height:1.7;color:#4A5D6C}

/* form left, photographs right */
.rk-cr-band{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(26px,4vw,72px);
  padding:clamp(44px,6vw,84px) clamp(20px,4.5vw,64px) clamp(30px,4vw,56px)}
.rk-cr-formcol{min-width:0}
.rk-cr-form{display:flex;flex-direction:column;gap:15px;margin-top:clamp(22px,3vw,32px);
  max-width:640px}
.rk-cr-form .rk-enq-send{margin-top:8px;align-self:flex-start;padding:16px 34px;
  border-radius:999px}
/* Off-screen rather than display:none: a robot reads the computed style, and a
   field that is not rendered at all is one it knows to skip. */
.rk-cr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* The CV note. It sits in the run of fields rather than after them, so a
   reader meets the requirement while filling the form. Not a field: there is
   nothing here to type into, and it should not pretend otherwise. */
.rk-cr-cvnote{padding:16px 18px;background:#fff;border:1px solid #DBE1E6;
  border-radius:14px;border-left:3px solid #005198}
.rk-cr-cvnote b{display:block;font:500 11px 'Plex Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:#101D27}
.rk-cr-cvnote p{margin:9px 0 0;font-size:13.5px;line-height:1.7;color:#4A5D6C}
.rk-cr-cvnote a{color:#005198;font-weight:600}
.rk-cr-privacy{margin:14px 0 0;font-size:13px;line-height:1.7;color:#61707D}
.rk-cr-privacy a{color:#005198;font-weight:600}

/* Two shots, the lower one stepped in and up so the pair overlaps the way the
   reference floats them beside its form. */
.rk-cr-float{position:relative;min-width:0;align-self:start;padding-top:clamp(30px,5vw,72px)}
.rk-cr-float img{display:block;width:100%;height:auto;border-radius:16px;
  object-fit:cover;filter:saturate(.4) brightness(.9);
  box-shadow:0 24px 60px rgba(16,29,39,.18)}
.rk-cr-float .rk-cr-f1{aspect-ratio:4/5}
.rk-cr-float .rk-cr-f2{aspect-ratio:4/3;width:74%;margin:-16% 0 0 auto;position:relative;
  border:6px solid #F1F4F6}

@media (max-width:1000px){
  .rk-cr-hero{grid-template-columns:minmax(0,1fr)}
  .rk-cr-shot{min-height:clamp(260px,42vh,380px)}
  .rk-cr-panel{padding-top:clamp(30px,5vw,48px)}
  .rk-cr-band{grid-template-columns:minmax(0,1fr)}
  /* the floated pair becomes one row of two, above the form */
  .rk-cr-float{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:0;order:-1}
  .rk-cr-float .rk-cr-f1,.rk-cr-float .rk-cr-f2{aspect-ratio:1/1;width:100%;margin:0;border:0}
}
@media (max-width:560px){
  .rk-cr-float{display:none}
  .rk-cr-form .rk-enq-send{align-self:stretch}
}




/* ---- OEM and Exports -----------------------------------------------------
   Two heads, one switch: the pair of tabs under the breadcrumb takes a visitor
   who landed on the wrong page to the right one in one tap. */
.rk-pagetabs{display:inline-flex;margin-top:22px;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:3px;gap:2px}
.rk-pagetabs a{display:flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;
  font:500 11px 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#AEBFCB;
  transition:color .2s,background .2s}@media (hover:hover) and (pointer:fine){
.rk-pagetabs a:hover{color:#fff}}
.rk-pagetabs a[aria-current="page"]{background:#005198;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.rk-xp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rk-xp-fact{background:#fff;border:1px solid #DBE1E6;border-radius:14px;padding:22px 20px}
.rk-xp-fact b{display:block;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  font-size:clamp(34px,4vw,52px);line-height:1;color:#005198}
.rk-xp-fact span{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:#4A5D6C}
.rk-xp-cats{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rk-xp-cats a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#fff;border:1px solid #DBE1E6;border-radius:12px;padding:16px 18px;
  font-weight:600;font-size:14.5px;color:#101D27;transition:border-color .2s,color .2s}
.rk-xp-cats a span{color:#005198}@media (hover:hover) and (pointer:fine){
.rk-xp-cats a:hover{border-color:#005198;color:#005198}}
.rk-xp-steps{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rk-xp-step{background:#fff;border:1px solid #DBE1E6;border-radius:14px;padding:22px}
.rk-xp-num{font:500 11px 'Plex Mono',monospace;letter-spacing:.14em;color:#4BA3EA}
.rk-xp-step h3{margin:10px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:20px;line-height:1.05;color:#101D27}
.rk-xp-step p{margin:10px 0 0;font-size:14px;line-height:1.65;color:#4A5D6C}
.rk-xp-step .rk-todo{margin-top:14px}
.rk-xp-docs{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rk-xp-docs li{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid #DBE1E6;
  border-radius:12px;padding:18px 20px}
.rk-xp-docs b{font:500 11px 'Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#005198}
.rk-xp-docs span{font-size:14.5px;line-height:1.6;color:#233542}
.rk-xp-cta{margin-top:clamp(44px,6vw,72px);background:#0B0E10;color:#fff;border-radius:18px;
  padding:clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:24px}
.rk-xp-cta h2{margin:0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:clamp(26px,3.4vw,40px);line-height:1.02}
.rk-xp-cta p{margin:12px 0 0;max-width:52ch;font-size:15px;line-height:1.7;color:#AEBFCB}
.rk-xp-cta-acts{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.rk-xp-btn{display:inline-block;font:500 12.5px 'Plex Mono',monospace;letter-spacing:.1em;
  color:#fff;background:linear-gradient(180deg,#1668B4,#005198 55%,#003F76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);padding:16px 30px;border-radius:999px;
  transition:filter .2s}@media (hover:hover) and (pointer:fine){
.rk-xp-btn:hover{filter:brightness(1.15);color:#fff}}
.rk-xp-btn-ghost{font-size:13.5px;color:#9CC8EE}@media (hover:hover) and (pointer:fine){
.rk-xp-btn-ghost:hover{color:#fff}}
@media (max-width:1024px){
  .rk-xp-facts,.rk-xp-cats,.rk-xp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .rk-xp-cats,.rk-xp-docs{grid-template-columns:1fr}
  .rk-xp-steps{grid-template-columns:1fr}
  .rk-xp-fact{padding:18px 16px}
}

/* ---- the rapid tests page ------------------------------------------------ */
.rk-rt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}

/* ---- one drop, one test -------------------------------------------------
   The whole sequence is one 4.6s timeline expressed as four animations that
   share it, so the parts stay in step without a single line of script beyond
   the class that starts them. Each element rests in its finished state, which
   is what a visitor sees if they arrive after it has played, if they ask for
   reduced motion, or if the observer never fires. */
.rk-rt-art{position:relative;flex:none;
  width:clamp(240px,34vw,400px);height:clamp(150px,20vw,232px)}
.rk-rt-drop{position:absolute;left:0;bottom:16%;width:clamp(62px,8.6vw,100px);
  transform-origin:50% 92%}
.rk-rt-drop img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.55));
  animation:rkDropBob 3.8s ease-in-out infinite}
@keyframes rkDropBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.rk-rt-droplet{position:absolute;right:12%;bottom:-4px;opacity:0}
.rk-rt-cassette{position:absolute;right:0;bottom:16%;width:min(72%,286px);height:auto;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.5))}
.rk-rt-fluid{transform:scaleX(1);transform-origin:left center}

.rk-rt-art.rk-play .rk-rt-drop{animation:rkTip 4.6s cubic-bezier(.4,0,.2,1) both}
.rk-rt-art.rk-play .rk-rt-droplet{animation:rkFall 4.6s cubic-bezier(.55,0,.9,.6) both}
.rk-rt-art.rk-play .rk-rt-fluid{animation:rkSweep 4.6s cubic-bezier(.35,0,.25,1) both}
.rk-rt-art.rk-play .rk-rt-c{animation:rkLine 4.6s ease both}
.rk-rt-art.rk-play .rk-rt-t{animation:rkLineLate 4.6s ease both}

@keyframes rkTip{
  0%,6%{transform:rotate(0) translateY(0)}
  16%,30%{transform:rotate(15deg) translateY(4px)}
  44%,100%{transform:rotate(0) translateY(0)}
}
@keyframes rkFall{
  0%,17%{opacity:0;transform:translate(0,0) scale(.5)}
  20%{opacity:1;transform:translate(0,0) scale(1)}
  30%{opacity:1;transform:translate(8px,34px) scale(.9)}
  33%,100%{opacity:0;transform:translate(9px,40px) scale(.4)}
}
@keyframes rkSweep{0%,34%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
@keyframes rkLine{0%,60%{opacity:0}72%,100%{opacity:1}}
@keyframes rkLineLate{0%,74%{opacity:0}86%,100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .rk-rt-art.rk-play .rk-rt-drop,.rk-rt-art.rk-play .rk-rt-droplet,
  .rk-rt-art.rk-play .rk-rt-fluid,.rk-rt-art.rk-play .rk-rt-c,
  .rk-rt-art.rk-play .rk-rt-t{animation:none !important}
}
.rk-rt-lines{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rk-rt-line{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #DBE1E6;
  border-radius:14px;padding:24px;color:#101D27;transition:border-color .25s,box-shadow .25s}@media (hover:hover) and (pointer:fine){
.rk-rt-line:hover{border-color:#005198;box-shadow:0 20px 40px -26px rgba(0,81,152,.5);color:#101D27}}
.rk-rt-line h3{margin:0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:clamp(22px,2.6vw,30px);line-height:1.02}
.rk-rt-line p{margin:0;font-size:14.5px;line-height:1.65;color:#4A5D6C;flex:1}
.rk-rt-go{font:500 11px 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#005198}
.rk-rt-chips{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.rk-rt-chips a{font:500 11.5px 'Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  color:#005198;border:1px solid #C9D3DB;background:#fff;border-radius:999px;padding:10px 16px;
  transition:border-color .2s,background .2s}@media (hover:hover) and (pointer:fine){
.rk-rt-chips a:hover{border-color:#005198;background:#EAF2FA}}
@media (max-width:760px){
  /* the art drops under the copy and runs the full width it is given */
  .rk-rt-head{display:block}
  /* the drop sits higher against the cassette so the pair reads as one
     gesture rather than two objects resting on the same line */
  .rk-rt-art{width:100%;max-width:420px;height:clamp(132px,40vw,178px);margin-top:20px}
  .rk-rt-drop{bottom:24%;width:clamp(70px,20vw,96px)}
  .rk-rt-cassette{bottom:12%;width:min(66%,250px)}
  .rk-rt-lines{grid-template-columns:1fr}
}

/* ---- product details ------------------------------------------------------
   Description on the left, specification on the right, under the purchase
   decision: what a buyer reads once they have found the pack they want. */
.rk-spec{margin:0 0 14px;font-size:14px;line-height:1.6;color:#4A5D6C}
.rk-assure{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #E5EAEE;
  display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#4A5D6C}
.rk-assure li{padding-left:18px;position:relative}
.rk-assure li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;
  border-radius:50%;background:#4BA3EA}
.rk-details{margin-top:clamp(40px,5.5vw,64px)}
.rk-details-grid{margin-top:18px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,48px);align-items:start}
.rk-details-lede{margin:0;font-size:15.5px;line-height:1.75;color:#233542}
.rk-spectable{margin:0;background:#fff;border:1px solid #DBE1E6;border-radius:12px;overflow:hidden}
.rk-spectable>div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;
  padding:12px 18px;border-bottom:1px solid #EDF1F4;font-size:14px}
.rk-spectable>div:last-child{border-bottom:0}
.rk-spectable dt{font:500 10.5px 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  color:#61707D;padding-top:3px}
.rk-spectable dd{margin:0;color:#101D27;overflow-wrap:anywhere}
.rk-spectable dd a{color:#005198;font-weight:600}
@media (max-width:820px){
  .rk-details-grid{grid-template-columns:1fr}
  .rk-spectable>div{grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:12px;padding:11px 14px}
}

/* ---- the product purchase panel ----------------------------------------
   Under "At a glance", beside the photograph: pack size first (each option IS
   a stock code), then quantity, then the primary action, then the question.
   It used to sit in the dark hero above the fold, away from the picture and
   the facts a buyer reads before deciding. Light palette now, because it sits
   on the page body. */
.rk-buypanel{margin-top:22px;padding:20px;max-width:640px;box-sizing:border-box;background:#fff;border:1px solid #DBE1E6;
  border-radius:14px}
.rk-variants{margin:0;padding:0;border:0;min-width:0}
.rk-variants legend{padding:0;font:500 11px 'Plex Mono',monospace;letter-spacing:.18em;
  text-transform:uppercase;color:#005198}
.rk-variants-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rk-variant{position:relative;cursor:pointer;display:block}
.rk-variant input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.rk-variant-box{display:flex;flex-direction:column;gap:3px;min-width:96px;padding:10px 14px;
  border:1px solid #C9D3DB;border-radius:10px;background:#F7F9FA;color:#101D27;
  transition:border-color .2s,background .2s,box-shadow .2s}
.rk-variant-box b{font-size:14px;font-weight:600;line-height:1.2}
.rk-variant-box small{font:500 10.5px 'Plex Mono',monospace;letter-spacing:.06em;color:#61707D}@media (hover:hover) and (pointer:fine){
.rk-variant:hover .rk-variant-box{border-color:#005198}}
.rk-variant input:checked+.rk-variant-box{border-color:#005198;background:#EAF2FA;
  box-shadow:inset 0 0 0 1px #005198}
.rk-variant input:checked+.rk-variant-box small{color:#005198}
.rk-variant input:focus-visible+.rk-variant-box{outline:2px solid #4BA3EA;outline-offset:2px}
.rk-chosen{margin:14px 0 0;font-size:13px;color:#4A5D6C}
.rk-chosen b{font:500 12.5px 'Plex Mono',monospace;color:#005198;letter-spacing:.04em}

.rk-buy{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.rk-qty{display:flex;align-items:center;flex:none;border:1px solid #C9D3DB;
  border-radius:999px;overflow:hidden;background:#fff}
.rk-qty button{all:unset;cursor:pointer;width:44px;height:48px;display:flex;align-items:center;
  justify-content:center;color:#101D27;font-size:19px;transition:background .2s}@media (hover:hover) and (pointer:fine){
.rk-qty button:hover{background:#EAF2FA}}
.rk-qty button:focus-visible{outline:2px solid #4BA3EA;outline-offset:-2px}
#rk-p-qty{width:52px;height:48px;border:0;outline:none;background:transparent;color:#101D27;
  text-align:center;font:500 15px 'Plex Mono',monospace;-moz-appearance:textfield;appearance:textfield}
#rk-p-qty::-webkit-outer-spin-button,#rk-p-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.rk-buy-primary{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;
  justify-content:center;flex:1 1 auto;height:48px;padding:0 24px;border-radius:999px;
  font:500 12.5px 'Plex Mono',monospace;letter-spacing:.1em;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#1668B4,#005198 55%,#003F76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);transition:filter .2s}@media (hover:hover) and (pointer:fine){
.rk-buy-primary:hover{filter:brightness(1.15)}}
.rk-buy-primary:focus-visible{outline:2px solid #4BA3EA;outline-offset:3px}
.rk-buy-secondary{box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  width:100%;height:48px;padding:0 22px;border-radius:999px;font:500 12.5px 'Plex Mono',monospace;
  letter-spacing:.1em;color:#101D27;border:1px solid #C9D3DB;white-space:nowrap;
  transition:border-color .2s,color .2s}@media (hover:hover) and (pointer:fine){
.rk-buy-secondary:hover{border-color:#005198;color:#005198}}

@media (max-width:640px){
  .rk-buypanel{padding:16px}
  .rk-qty{width:100%;justify-content:space-between}
  #rk-p-qty{flex:1;width:auto}
  .rk-buy-primary,.rk-buy-secondary{width:100%;padding:0 18px}
}


/* ---- the privacy notice -------------------------------------------------
   Styled by element inside .rk-legal rather than by class, because the notice
   is lifted verbatim from the live page and carries no classes of its own.
   Anything that put classes into that text would have to edit a legal notice
   to restyle it. */
.rk-legal{max-width:74ch;color:#233542}
.rk-legal h2{margin:clamp(36px,4vw,52px) 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;
  font-weight:800;text-transform:uppercase;font-size:clamp(20px,2.4vw,28px);line-height:1.1;
  letter-spacing:.005em;color:#101D27}
.rk-legal section:first-child h2{margin-top:0}
.rk-legal h3{margin:28px 0 0;font-size:16.5px;font-weight:700;color:#101D27}
.rk-legal p{margin:14px 0 0;font-size:15.5px;line-height:1.75}
.rk-legal ul,.rk-legal ol{margin:14px 0 0;padding-left:22px;font-size:15.5px;line-height:1.75}
.rk-legal li{margin-top:7px}
.rk-legal a{color:#005198;font-weight:600}@media (hover:hover) and (pointer:fine){
.rk-legal a:hover{color:#1668B4}}
.rk-legal b,.rk-legal strong{font-weight:700;color:#101D27}
.rk-legaltbl{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px;
  background:#fff;border:1px solid #DBE1E6;border-radius:12px;overflow:hidden}
.rk-legaltbl th{text-align:left;padding:12px 16px;border-bottom:1px solid #DBE1E6;
  font:500 10.5px 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#61707D}
.rk-legaltbl td{padding:12px 16px;border-bottom:1px solid #EDF1F4;vertical-align:top;line-height:1.6}

/* The three things the Act requires and Reckon has not supplied yet. Marked,
   not hidden: a notice that looks finished and is not would be worse. */
.rk-todo{margin-top:18px;padding:16px 18px;border-radius:12px;
  border:1px dashed #C08A2E;background:rgba(192,138,46,.07)}
.rk-todo>b{display:block;font:500 10.5px 'Plex Mono',monospace;letter-spacing:.16em;
  text-transform:uppercase;color:#8A6220}
.rk-todo p{margin-top:8px;font-size:14px;color:#5C4A28}

.rk-legalnav ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.6;color:#4A5D6C}
.rk-legalnav li{margin-top:8px}
.rk-legalnav a{color:#4A5D6C}@media (hover:hover) and (pointer:fine){
.rk-legalnav a:hover{color:#005198}}
@media (max-width:860px){
  .rk-legalnav{position:static !important;padding-bottom:8px;border-bottom:1px solid #DBE1E6}
}

/* ---- FAQ. Drawn with <details>, so it needs no script and every answer is in
   the served HTML whether it is open or not. */
.rk-faqs{margin-top:22px;display:grid;gap:10px;max-width:880px}
.rk-faq{background:#fff;border:1px solid #DBE1E6;border-radius:14px}
.rk-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:18px;padding:18px 22px;font-size:16px;font-weight:600;line-height:1.4;color:#101D27}
.rk-faq summary::-webkit-details-marker{display:none}
.rk-faq summary::after{content:'+';font:500 20px 'Plex Mono',monospace;color:#005198;flex:none;line-height:1}
.rk-faq[open] summary::after{content:'−'}@media (hover:hover) and (pointer:fine){
.rk-faq summary:hover{color:#005198}}
.rk-faq summary:focus-visible{outline:2px solid #005198;outline-offset:2px;border-radius:14px}
.rk-faq-a{padding:0 22px 20px;font-size:15px;line-height:1.7;color:#4A5D6C;max-width:72ch}
.rk-faq-a p{margin:0}
.rk-faq-a .rk-todo{margin-top:12px}
@media (max-width:560px){ .rk-faq summary{padding:16px 18px;font-size:15px} .rk-faq-a{padding:0 18px 18px} }

/* ---- product details: key facts, then dropdowns -------------------------
   The note under the description, the tiles beside it, and three <details>
   below. The dropdowns reuse the spec table, laid out in two columns on a
   desk so a long specification does not run the length of the page. */
.rk-details-note{margin:14px 0 0;font-size:13.5px;line-height:1.7;color:#4A5D6C}
.rk-details-note a{color:#005198;font-weight:600}
.rk-keyfacts{margin:0;display:grid;gap:10px}
.rk-kf-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rk-kf-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rk-keyfacts>div{background:#fff;border:1px solid #DBE1E6;border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:6px;min-width:0}
.rk-keyfacts dt{font:500 10px 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#61707D}
.rk-keyfacts dd{margin:0;font-size:14.5px;font-weight:600;line-height:1.35;color:#101D27;
  overflow-wrap:break-word;hyphens:auto}
.rk-kf-none{display:none}
.rk-details-grid:has(.rk-kf-none){grid-template-columns:minmax(0,1fr)}
.rk-acc{margin-top:clamp(18px,2.6vw,26px);display:grid;gap:10px}
.rk-acc-item{background:#fff;border:1px solid #DBE1E6;border-radius:14px;overflow:hidden}
.rk-acc-item>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
  padding:16px 20px;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;
  text-transform:uppercase;font-size:17px;letter-spacing:.01em;color:#101D27}
.rk-acc-item>summary::-webkit-details-marker{display:none}
.rk-acc-item>summary em{margin-left:auto;font:500 10.5px 'Plex Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;font-style:normal;color:#61707D}
.rk-acc-item>summary::after{content:'+';width:20px;text-align:center;font:500 20px 'Plex Mono',monospace;
  line-height:1;color:#005198}
.rk-acc-item[open]>summary::after{content:'−'}@media (hover:hover) and (pointer:fine){
.rk-acc-item>summary:hover{color:#005198}}
.rk-acc-item>summary:focus-visible{outline:2px solid #005198;outline-offset:-2px;border-radius:14px}
.rk-acc-item .rk-spectable{border:0;border-top:1px solid #EDF1F4;border-radius:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.rk-acc-item .rk-spectable>div:nth-child(odd){border-right:1px solid #EDF1F4}
.rk-acc-item .rk-spectable>div:last-child{border-bottom:1px solid #EDF1F4}
.rk-ds-steps{margin:0;padding:14px 24px 20px 46px;border-top:1px solid #EDF1F4;
  font-size:14.5px;line-height:1.7;color:#233542}
.rk-ds-steps li{margin-top:6px;padding-left:4px}
.rk-ds-steps li::marker{font:500 12px 'Plex Mono',monospace;color:#61707D}
@media (max-width:820px){
  .rk-kf-3,.rk-kf-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rk-acc-item .rk-spectable{grid-template-columns:1fr}
  .rk-acc-item .rk-spectable>div:nth-child(odd){border-right:0}
  .rk-acc-item>summary{padding:15px 16px;font-size:16px}
  .rk-ds-steps{padding:12px 16px 16px 38px}
}

/* ---- hoisted from inline style attributes (CSP: style-src self) ------- */
.rk1{min-height:100vh;display:flex;flex-direction:column}
.rk2{display:none}
.rk3{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;pointer-events:none}
.rk4{pointer-events:auto;position:relative;box-sizing:border-box;width:100%;max-width:min(1920px, 94vw);margin-top:10px;height:76px;border-radius:18px;border:1px solid transparent;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(10px,1.4vw,20px);padding:0 clamp(18px,1.7vw,28px);box-shadow:none;background:transparent;transition:max-width .5s cubic-bezier(.22,1,.36,1),margin-top .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),border-radius .5s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s,background .35s}
.rk5{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .4s}
.rk6{position:absolute;inset:0;backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7)}
.rk7{position:absolute;inset:0;background:linear-gradient(150deg,rgba(24,32,40,.62),rgba(11,14,16,.72))}
.rk8{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 1px 1px 1px rgba(255,255,255,.34),inset 0 0 18px rgba(255,255,255,.08)}
.rk9{position:relative;z-index:1;display:flex;align-items:center;border-radius:12px;padding:6px 12px 6px 0}
.rk10{height:30px;display:block}
.rk11{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:clamp(18px,2.9vw,46px);height:44px;padding:0 clamp(8px,1.4vw,20px);min-width:0}
.rk12{position:relative;display:inline-flex}
.rk13{font:500 14.5px 'Plex Mono',monospace;letter-spacing:.12em;color:#4BA3EA;text-shadow:0 1px 12px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.4);white-space:nowrap;padding:8px 2px 12px;background-image:linear-gradient(90deg,rgba(75,163,234,0),#2f7fd0 25%,#a5d4ff 50%,#2f7fd0 75%,rgba(75,163,234,0));background-repeat:no-repeat;background-position:bottom center;background-size:100% 2px}
.rk14{position:absolute;top:calc(100% + 14px);left:-24px;z-index:84;display:block;width:min(540px,calc(100vw - 32px));border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 40px 80px -30px rgba(0,0,0,.85);color:#fff;animation:rkGlassIn .3s cubic-bezier(.22,1,.36,1) both}
.rk15{position:absolute;inset:0;border-radius:inherit;overflow:hidden;display:block;z-index:0}
.rk16{position:absolute;inset:0;display:block;transform:translateZ(0);backdrop-filter:blur(18px) saturate(1.7);-webkit-backdrop-filter:blur(18px) saturate(1.7)}
.rk17{position:absolute;inset:0;display:block;background:linear-gradient(150deg,rgba(24,32,40,.88),rgba(11,14,16,.93))}
.rk18{position:absolute;inset:0;display:block;border-radius:inherit;box-shadow:inset 1px 1px 1px rgba(255,255,255,.34),inset 0 0 18px rgba(255,255,255,.08)}
.rk19{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:12px}
.rk20{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;color:#EAF2F8;font-size:13.5px;font-weight:600;font-family:'Inter',sans-serif;letter-spacing:0;white-space:normal;transition:background .2s,padding-left .25s}
@media (hover:hover) and (pointer:fine){.rk20:hover{background:rgba(75,163,234,.16);padding-left:20px;color:#fff}}
.rk21{font:500 10.5px 'Plex Mono',monospace;color:#4BA3EA;white-space:nowrap}
.rk22{font:500 14.5px 'Plex Mono',monospace;letter-spacing:.12em;color:#EAF2F8;text-shadow:0 1px 12px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.4);white-space:nowrap;padding:8px 2px 12px;background-image:linear-gradient(90deg,rgba(75,163,234,0),#2f7fd0 25%,#a5d4ff 50%,#2f7fd0 75%,rgba(75,163,234,0));background-repeat:no-repeat;background-position:bottom center;background-size:0% 2px;transition:background-size .4s cubic-bezier(.22,1,.36,1),color .2s,text-shadow .3s}
@media (hover:hover) and (pointer:fine){.rk22:hover{background-size:100% 2px;color:#fff;text-shadow:0 0 16px rgba(75,163,234,.9)}}
.rk23{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.rk24{position:relative;display:flex;align-items:center;flex-shrink:1;min-width:44px;width:clamp(44px,9vw,150px);transition:width .3s}
.rk25{box-sizing:border-box;min-width:0;width:100%;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:#fff;font-size:13px;padding:0 36px 0 16px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:border-color .2s,width .3s}
@media (hover:hover) and (pointer:fine){.rk25:hover{border-color:#4BA3EA}}
.rk25:focus{border-color:#4BA3EA}
.rk26{all:unset;cursor:pointer;position:relative;width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;color:#EAF2F8;transition:border-color .2s}
@media (hover:hover) and (pointer:fine){.rk26:hover{border-color:#4BA3EA}}
.rk27{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#4BA3EA;color:#06171c;font:600 11px 'Inter',sans-serif;display:flex;align-items:center;justify-content:center;padding:0 4px}
.rk28{font:500 12.5px 'Plex Mono',monospace;letter-spacing:.12em;color:#fff;background:linear-gradient(180deg,#1668B4,#005198 55%,#003F76);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);height:40px;display:flex;align-items:center;padding:0 22px;box-sizing:border-box;border-radius:999px;transition:filter .2s}
@media (hover:hover) and (pointer:fine){.rk28:hover{filter:brightness(1.15);color:#fff}}
.rk29{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:border-color .2s}
@media (hover:hover) and (pointer:fine){.rk29:hover{border-color:#4BA3EA}}
.rk30{width:15px;height:1.6px;background:#EAF2F8;border-radius:1px}
.rk31{position:fixed;top:84px;right:clamp(12px,3vw,40px);z-index:85;width:min(340px,calc(100vw - 24px));background:rgba(13,17,21,.82);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);border:1px solid rgba(255,255,255,.18);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 40px 80px -30px rgba(0,0,0,.85);overflow:hidden;color:#fff;animation:rkGlassIn .35s cubic-bezier(.22,1,.36,1) both}
.rk32{position:fixed;top:84px;right:clamp(12px,3vw,40px);z-index:80;width:min(360px,calc(100vw - 24px));background:rgba(13,17,21,.78);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid rgba(255,255,255,.18);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 40px 80px -30px rgba(0,0,0,.8);color:#fff;overflow:hidden}
.rk33{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}
.rk34{font:500 11.5px 'Plex Mono',monospace;letter-spacing:.14em;color:#EAF2F8}
.rk35{all:unset;cursor:pointer;font:500 10.5px 'Plex Mono',monospace;letter-spacing:.1em;color:#8FA5B5;transition:color .2s}
@media (hover:hover) and (pointer:fine){.rk35:hover{color:#fff}}
.rk36{padding:24px 20px;font-size:13.5px;line-height:1.6;color:#AEBFCB}
.rk37{max-height:300px;overflow:auto}
.rk38{padding:14px 20px 18px}
.rk39{all:unset;cursor:pointer;box-sizing:border-box;width:100%;text-align:center;font:500 12.5px 'Plex Mono',monospace;letter-spacing:.12em;color:#fff;background:linear-gradient(180deg,#1668B4,#005198 55%,#003F76);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);padding:15px 0;border-radius:999px;transition:filter .2s}
@media (hover:hover) and (pointer:fine){.rk39:hover{filter:brightness(1.15)}}
.rk40{position:relative;background:#0B0E10;color:#fff;overflow:hidden}
.rk41{position:absolute;top:50%;left:0;right:0;transform:translateY(-52%);pointer-events:none;opacity:.10;overflow:hidden}
.rk42{display:flex;width:max-content;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(52px,9vw,140px);line-height:1;white-space:nowrap;-webkit-text-stroke:1.5px #4BA3EA;color:transparent}
.rk43{padding-right:64px}
.rk44{position:relative;max-width:min(1920px, 94vw);margin:0 auto;padding:calc(72px + clamp(14px,2.2vw,32px)) clamp(20px,4.5vw,64px) clamp(22px,3vw,40px)}
.rk45{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 11.5px 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8FA5B5}
.rk46{color:#8FA5B5}
@media (hover:hover) and (pointer:fine){.rk46:hover{color:#4BA3EA}}
.rk47{color:#3A4954}
.rk48{color:#4BA3EA}
@media (hover:hover) and (pointer:fine){.rk48:hover{color:#fff}}
.rk49{margin:14px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(27px,4.4vw,54px);line-height:1.02;letter-spacing:.005em;max-width:18ch}
.rk50{flex:1;background:#F1F4F6}
.rk51{max-width:min(1920px, 94vw);margin:0 auto;padding:clamp(20px,3vw,40px) clamp(20px,4.5vw,64px) clamp(64px,8vw,100px)}
.rk52{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.rk53{display:flex;flex-direction:column;gap:10px}
.rk54{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #DBE1E6;aspect-ratio:4/3}
.rk55{width:100%;height:100%;object-fit:cover;display:block}
.rk56{display:none;gap:8px;overflow-x:auto;padding-bottom:2px}
.rk57{margin:0;font:500 11.5px 'Plex Mono',monospace;line-height:1.55;color:#61707D}
.rk58{margin-top:0}
.rk59{margin:0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.2vw,38px);line-height:1.05;letter-spacing:.005em;color:#101D27}
.rk60{color:#005198}
.rk61{margin:clamp(44px,6vw,64px) 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.2vw,38px);line-height:1.05;letter-spacing:.005em;color:#101D27}
.rk62{margin:12px 0 0;font-size:14.5px;color:#4A5D6C}
.rk63{margin-top:20px;overflow-x:auto;background:#fff;border:1px solid #DBE1E6;border-radius:12px}
.rk64{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.rk65{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rk66{text-align:left;padding:14px 18px;border-bottom:1px solid #DBE1E6;font:500 10.5px 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#61707D}
.rk67{padding:14px 18px;border-bottom:1px solid #EDF1F4;font:500 13px 'Plex Mono',monospace;color:#005198;white-space:nowrap}
.rk68{padding:14px 18px;border-bottom:1px solid #EDF1F4;color:#101D27}
.rk69{padding:8px 18px;border-bottom:1px solid #EDF1F4}
.rk70{padding:14px 18px;border-bottom:1px solid #EDF1F4}
.rk71{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;margin-top:22px}
.rk72{box-sizing:border-box;background:#fff;border:1px solid #DBE1E6;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;color:#101D27;transition:border-color .25s,box-shadow .25s}
@media (hover:hover) and (pointer:fine){.rk72:hover{border-color:#005198;box-shadow:0 20px 40px -26px rgba(0,81,152,.5);color:#101D27}}
.rk73{position:relative;border-radius:8px;overflow:hidden;background:#F1F4F6;aspect-ratio:4/3}
.rk74{display:block;width:100%;height:100%;object-fit:cover}
.rk75{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.rk76{font-weight:600;font-size:15px;line-height:1.35;flex:1}
.rk77{font:500 10.5px 'Plex Mono',monospace;letter-spacing:.08em;color:#61707D}
.rk78{display:none;width:100%;height:100%;object-fit:cover}
.rk79{display:flex;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.rk80{background:#0B0E10;color:#fff}
.rk81{max-width:min(1920px, 94vw);margin:0 auto;padding:clamp(56px,8vw,90px) clamp(20px,4.5vw,64px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.rk82{margin:0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.6vw,48px);letter-spacing:.005em;line-height:1}
.rk83{font:500 13px 'Plex Mono',monospace;letter-spacing:.1em;color:#fff;white-space:nowrap;background:linear-gradient(180deg,#1668B4,#005198 55%,#003F76);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);padding:18px 34px;border-radius:999px;transition:filter .2s}
@media (hover:hover) and (pointer:fine){.rk83:hover{filter:brightness(1.15);color:#fff}}
.rk84{position:fixed;right:clamp(14px,3vw,32px);bottom:clamp(14px,3vw,32px);z-index:90;width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,#1668B4,#005198 55%,#003F76);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 16px 32px -12px rgba(0,81,152,.65);transition:transform .25s cubic-bezier(.22,1,.36,1),filter .2s}
@media (hover:hover) and (pointer:fine){.rk84:hover{transform:translateY(-4px) scale(1.06);color:#fff;filter:brightness(1.05)}}
.rk85{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.rk86{display:flex;width:max-content;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(90px,12vw,170px);line-height:1;white-space:nowrap;-webkit-text-stroke:1.5px #4BA3EA;color:transparent}
.rk87{position:relative;max-width:min(1920px, 94vw);margin:0 auto;padding:calc(72px + clamp(40px,6vw,80px)) clamp(20px,4.5vw,64px) clamp(48px,7vw,88px)}
.rk88{margin:22px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(34px,5.6vw,72px);line-height:1;letter-spacing:.005em;max-width:14ch}
.rk89{margin:22px 0 0;max-width:60ch;font-size:clamp(15px,1.7vw,17px);line-height:1.7;color:#AEBFCB}
.rk90{margin:18px 0 0;font:500 12px 'Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#4BA3EA}
.rk91{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.rk92{font:500 12.5px 'Plex Mono',monospace;letter-spacing:.1em;color:#fff;background:linear-gradient(180deg,#1668B4,#005198 55%,#003F76);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);padding:16px 30px;border-radius:999px;transition:filter .2s}
@media (hover:hover) and (pointer:fine){.rk92:hover{filter:brightness(1.15);color:#fff}}
.rk93{font:500 12.5px 'Plex Mono',monospace;letter-spacing:.1em;color:#EAF2F8;border:1px solid rgba(255,255,255,.24);padding:16px 30px;border-radius:999px;transition:border-color .2s,color .2s}
@media (hover:hover) and (pointer:fine){.rk93:hover{border-color:#4BA3EA;color:#fff}}
.rk94{max-width:min(1920px, 94vw);margin:0 auto;padding:clamp(40px,6vw,72px) clamp(20px,4.5vw,64px) clamp(64px,8vw,100px)}
.rk95{margin:clamp(48px,6vw,72px) 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.2vw,38px);line-height:1.05;letter-spacing:.005em;color:#101D27}
.rk96{width:100%;border-collapse:collapse;font-size:14.5px;min-width:620px}
.rk97{color:#101D27;font-weight:600}
@media (hover:hover) and (pointer:fine){.rk97:hover{color:#005198}}
.rk98{padding:14px 18px;border-bottom:1px solid #EDF1F4;color:#4A5D6C}
.rk99{box-sizing:border-box;background:#fff;border:1px solid #DBE1E6;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px;color:#101D27;transition:border-color .25s,box-shadow .25s}
@media (hover:hover) and (pointer:fine){.rk99:hover{border-color:#005198;box-shadow:0 20px 40px -26px rgba(0,81,152,.5);color:#101D27}}
.rk100{font-weight:600;font-size:15.5px;line-height:1.35}
.rk101{margin:22px 0 0;max-width:62ch;font-size:clamp(15px,1.7vw,17px);line-height:1.7;color:#AEBFCB}
.rk102{max-width:min(1920px, 94vw);margin:0 auto;padding:clamp(40px,6vw,72px) clamp(20px,4.5vw,64px) clamp(64px,8vw,100px);display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.rk103{position:sticky;top:96px}
.rk104{margin:0 0 12px;font:500 11px 'Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#005198}
.rk105{display:flex;width:max-content;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(48px,12vw,170px);line-height:1;white-space:nowrap;-webkit-text-stroke:1.5px #4BA3EA;color:transparent}
.rk106{margin:14px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(34px,5.6vw,72px);line-height:1;letter-spacing:.005em;max-width:16ch}
.rk107{flex:1;background:#0B0E10;color:#fff}
.rk108{max-width:min(1920px, 94vw);margin:0 auto;padding:clamp(48px,7vw,88px) clamp(20px,4.5vw,64px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.rk109{font:500 12px 'Plex Mono',monospace;letter-spacing:.22em;color:#4BA3EA}
.rk110{margin:22px 0 0;max-width:480px;font-size:16px;line-height:1.7;color:#AEBFCB}
.rk111{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.rk112{font:500 11px 'Plex Mono',monospace;letter-spacing:.08em;color:#9CC8EE;border:1px solid rgba(75,163,234,.4);border-radius:999px;padding:8px 14px}
.rk113{display:inline-block;margin-top:30px;font:500 13px 'Plex Mono',monospace;letter-spacing:.1em;color:#fff;background:linear-gradient(180deg,#1668B4,#005198 55%,#003F76);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);padding:16px 28px;border-radius:999px;transition:filter .2s}
@media (hover:hover) and (pointer:fine){.rk113:hover{filter:brightness(1.15);color:#fff}}
.rk114{height:clamp(320px,38vw,480px);border:1px solid rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.rk115{width:100%;height:100%;object-fit:cover;filter:saturate(.6);display:block}
.rk116{background:#F1F4F6}
.rk117{max-width:min(1920px, 94vw);margin:0 auto;padding:clamp(48px,7vw,88px) clamp(20px,4.5vw,64px) clamp(64px,8vw,100px)}
.rk118{margin:clamp(44px,6vw,72px) 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.2vw,38px);line-height:1.05;letter-spacing:.005em;color:#101D27}
.rk119{margin:12px 0 0;max-width:62ch;font-size:15px;line-height:1.7;color:#4A5D6C}
.rk120{color:#005198;font-weight:600}
.rk121{color:#4BA3EA}
.rk122{margin:22px 0 0;font:500 11.5px 'Plex Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:#4BA3EA}
.rk123{margin:14px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(34px,5.6vw,72px);line-height:1;letter-spacing:.005em;max-width:14ch}
.rk124{width:100%;border-collapse:collapse;font-size:14.5px;min-width:760px}
.rk125{color:#4A5D6C}
@media (hover:hover) and (pointer:fine){.rk125:hover{color:#005198}}
.rk126{position:relative;background:#0B0E10;color:#fff;overflow:hidden;flex:1;display:flex;align-items:center}
.rk127{position:relative;max-width:min(1920px, 94vw);margin:0 auto;width:100%;padding:calc(72px + clamp(40px,6vw,80px)) clamp(20px,4.5vw,64px) clamp(56px,8vw,100px)}
.rk128{margin:0;font:500 11.5px 'Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#4BA3EA}
.rk129{margin:22px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(34px,6vw,76px);line-height:1;letter-spacing:.005em;max-width:14ch}
.rk130{margin:22px 0 0;max-width:56ch;font-size:clamp(15px,1.7vw,17px);line-height:1.7;color:#AEBFCB}
.rk131{margin-top:clamp(40px,6vw,64px)}
.rk132{margin:0 0 14px;font:500 11px 'Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#8FA5B5}
.rk133{display:flex;flex-wrap:wrap;gap:8px}
.rk134{font:500 11.5px 'Plex Mono',monospace;letter-spacing:.08em;color:#EAF2F8;border:1px solid rgba(255,255,255,.16);padding:11px 18px;border-radius:999px;transition:border-color .2s,color .2s}
@media (hover:hover) and (pointer:fine){.rk134:hover{border-color:#4BA3EA;color:#fff}}

/* ---- overrides of hoisted rules (must stay after them) ------------------ */

/* The product page splits photograph and facts into two columns; on a phone
   they stack, photograph first, purchase panel under the facts. */
@media (max-width:820px){
  .rk-prodgrid{grid-template-columns:minmax(0,1fr)}
}

/* The panel hangs from the right edge of its button, which sits at the right
   end of the filter row. Anchored left it ran off the side of the viewport and
   cut the last column in half. Narrow screens drop to fewer columns and pin the
   panel to the left instead, because there is no room to hang anything.

   These override the hoisted grid-template on #rk-filter-cols, so they live in
   OVERRIDE: a media query carries no extra specificity of its own. */
@media (max-width:820px){
  #rk-filter-cols{grid-template-columns:1fr 1fr}
}
/* The panel carried its background in an absolutely positioned layer INSIDE
   itself. As soon as the sheet scrolls, that layer scrolls away with the
   content and everything below it is transparent: that is what put the radio
   buttons over the product grid and the heading. A background belongs on the
   panel, not on a child of it.

   The same layer also combined backdrop-filter with filter:url(#glass-distortion)
   under an isolation:isolate ancestor. Isolation makes the panel its own
   backdrop root, so the blur has nothing behind it to sample, and the SVG
   filter invalidates the snapshot on top of that. Both go. */
#rk-filter-panel{
  isolation:auto;
  background:rgba(11,14,16,.97);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  overscroll-behavior:contain;
}
#rk-filter-panel>span:first-child{display:none}

/* On a phone the panel becomes a sheet pinned to the bottom of the screen.

   It used to be absolutely positioned against the filter BUTTON, which sits at
   the right end of the row, so left:0 meant the button's left edge, not the
   screen's: the panel opened at x=277 on a 390px screen and ran 237px past the
   edge. Anchoring to the viewport is the only way it cannot escape, and a
   bottom sheet is also the easier thing to reach with a thumb. */
@media (max-width:560px){
  #rk-filter-cols{grid-template-columns:1fr;padding:14px}
  #rk-filter-panel{
    position:fixed;
    left:12px;right:12px;bottom:12px;top:auto;
    width:auto;max-height:72vh;overflow:auto;
    /* a sheet sits above the page it covers, and is opaque, not glass: there
       is nothing behind it worth seeing and everything behind it to hide */
    z-index:70;background:#0C1114;
    border-radius:20px}
}


/* The privacy notice puts its contents list beside the text. A 260px column
   plus the body does not fit a phone, and the page scrolled sideways because
   of it. The inline grid-template becomes a hoisted single-class rule, so this
   has to sit after the hoisted block to win. */
@media (max-width:860px){
  .rk-legalgrid{grid-template-columns:minmax(0,1fr)}
}

/* ---- catalogue: list view ------------------------------------------------
   Same cards, laid out as rows. Declared here rather than in SHARED because
   every one of these beats a hoisted single-class rule from the card markup. */
#rk-grid.rk-list{grid-template-columns:1fr !important;gap:8px}
#rk-grid.rk-list>[data-name]{flex-direction:row !important;align-items:center;gap:14px !important;
  padding:10px 14px !important}
#rk-grid.rk-list>[data-name]>*:nth-child(2){flex:none;width:92px;aspect-ratio:1/1 !important;
  border-radius:8px}
#rk-grid.rk-list>[data-name]>*:nth-child(3){flex:1;font-size:15px !important}
/* the category + quick-add row moves to the far right and loses its stretch */
#rk-grid.rk-list>[data-name]>*:nth-child(1){order:4;flex:none;flex-direction:column-reverse;
  align-items:flex-end;gap:6px !important}
/* The meta row now ends in the add button, so it goes LAST in the row:
   the button belongs at the end of a list row, not wedged between the
   datasheet badge and the category. */
#rk-grid.rk-list>[data-name]>*:nth-child(4){flex:none;order:5;gap:12px}
/* The meta row carries the add button, so on a narrow list row its text is
   what goes, not the row: hiding the row would take the button with it. */
@media (max-width:620px){
  #rk-grid.rk-list>[data-name]>*:nth-child(1) span{display:none}
  #rk-grid.rk-list>[data-name]>*:nth-child(4) span{display:none}
  #rk-grid.rk-list>[data-name]>*:nth-child(4){gap:0 !important}
}

/* ---- catalogue: search + filter share one line on a phone ---------------
   The row used to wrap because the search carried min-width:260px. It is now
   free to shrink, and below 560px the filter button drops its long label so
   the two controls plus the view toggle still fit across 390px. */
@media (max-width:700px){
  .rk-filterrow{gap:8px}
  #rk-q{padding:13px 18px !important;font-size:15px !important}
  #rk-filter-btn{height:48px !important;padding:0 14px !important;gap:8px !important}
  #rk-view{padding:3px !important}
  .rk-viewbtn{width:34px;height:34px}
}
@media (max-width:560px){
  #rk-filter-label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0}
  #rk-filter-btn::before{content:"FILTER";font:500 11.5px 'Plex Mono',monospace;letter-spacing:.06em}
}
/* The toggle stays on the smallest phones: switching to the list is exactly
   what someone scrolling 130 products on a phone wants. It just gets tighter. */
@media (max-width:430px){
  #rk-view{padding:2px !important;gap:2px !important}
  .rk-viewbtn{width:30px;height:30px}
  .rk-viewbtn svg{width:13px;height:13px}
  #rk-filter-btn{padding:0 11px !important}
}

/* ---- catalogue: two compact cards per row on a phone --------------------
   auto-fill with a 208px minimum gives exactly one card at 390px, which is a
   very tall column for 130 products. Two across halves the scrolling. */
@media (max-width:560px){
  #rk-grid:not(.rk-list){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  #rk-grid:not(.rk-list)>[data-name]{padding:10px !important;gap:7px !important}
  #rk-grid:not(.rk-list)>[data-name] div[style*="font-weight:600"],
  #rk-grid:not(.rk-list)>[data-name]>*:nth-child(3){font-size:13px !important;line-height:1.28 !important}
}


/* ---- homepage sections at narrow widths ---------------------------------
   None of these had a breakpoint. They are all grids with a fixed column
   count, so on a phone they did not stack, they just divided the same 319px
   of usable width by three or four and squeezed the contents to nothing.

   Every rule here overrides a hoisted single-class rule, which is why the
   whole block lives in OVERRIDE: a media query adds no specificity of its
   own, so placed any earlier it would lose at every width. */

/* Three glass cards. At 390px each was getting ~45px of text column. */
@media (max-width:900px){
  .rk-trustgrid{grid-template-columns:1fr;gap:12px}
  .rk-trustgrid>*{padding:20px !important}
}

/* Eight category tiles in a 4-column grid with 2-column feature spans. At
   390px a 1-span tile was 69px wide with 26px of padding, leaving 17px of
   content, so the names wrapped one glyph per line: the "vertical spread". */
@media (max-width:900px){
  .rk-rangegrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:minmax(132px,auto) !important;gap:10px}
  .rk-rangegrid>*{grid-column:span 1 !important;grid-row:span 1 !important;padding:18px !important}
  /* the two feature tiles keep their prominence by running full width */
  .rk-rangegrid>*:nth-child(1),.rk-rangegrid>*:nth-child(2){grid-column:1 / -1 !important}
}
/* Deliberately NOT one column even on the narrowest phone: a single column is
   the vertical stack this was meant to replace. Two tiles across stays compact
   and readable, with only the two feature categories running full width. */
@media (max-width:480px){
  .rk-rangegrid{grid-auto-rows:minmax(104px,auto) !important;gap:8px}
  .rk-rangegrid>*{padding:14px !important}
}

/* Every tile centres its contents on both axes, at every width. The count
   and the arrow sat in opposite corners with the name pinned to the bottom
   left, which read as three things scattered in a box rather than one tile
   with a label. */
.rk-rangegrid>*{justify-content:center !important;text-align:center}
.rk-tile-top{justify-content:center !important;gap:12px}
.rk-tile-body{display:block}

/* On a phone a tile has room for a count and a name, and nothing else. The
   blurb was a third of a sentence per line and the name sat hard left with the
   count floating above it, which read as three separate things rather than one
   tile. Centred, and the blurb goes. */
@media (max-width:900px){
  .rk-rangegrid>*{justify-content:center !important;text-align:center}
  /* the count row goes too: a tile is a name and a way in, nothing else */
  .rk-tile-top{display:none !important}
  .rk-tile-body{display:block}
  .rk-tile-blurb{display:none !important}
}

/* The embedded map is a 300px square that, once the split has collapsed to
   one column, is simply a large grey rectangle between the address and the
   next section. The address and the GET DIRECTIONS button above it already
   carry everything a phone needs, and the button opens the real map app. */
@media (max-width:820px){
  .rk-mapgrid>a{display:none !important}
}

/* Two-column bodies (About: director quote beside the photo; OEM: copy
   beside the line photograph) stack on anything narrower than a tablet. */
@media (max-width:820px){
  .rk-split{grid-template-columns:minmax(0,1fr) !important;gap:24px !important}
}

/* The contact block: enquiry split, the name+organisation field pair, and the
   address/map split were all hard 2-column. */
@media (max-width:820px){
  .rk-enqgrid,.rk-mapgrid{grid-template-columns:minmax(0,1fr) !important}
  .rk-fieldpair{grid-template-columns:1fr !important}
}

/* 16px is the threshold below which iOS Safari zooms the page on focus and
   then will not zoom back out. The form was at 14.5px. */
@media (max-width:820px){
  .rk-enqgrid input,.rk-enqgrid textarea,.rk-enqgrid select{font-size:16px !important}
}

/* 1st Check, the blood-drop mascot. It is positioned at left:389px, which is
   at or past the right edge of a phone, so it used to be hidden there. It is
   part of how the Rapid Diagnostics section reads, though, so instead of
   dropping it the phone gets it placed against the section's own right edge,
   under the copy where there is room. */
@media (max-width:760px){
  /* Beside the headline: the h2 already leaves clamp(90px,10vw,140px) free on
     its right for exactly this. top:30px puts the drop level with the first
     line of "One drop." */
  /* width:auto alongside the height, always: the img carries width and
     height attributes for layout stability, and those double as
     presentational hints. Set the height alone and the attribute
     supplies a 456px width, which is how this drop ended up eight
     times too wide on a phone. */
  img.rk-mascot{left:auto !important;right:0 !important;top:30px !important;bottom:auto !important;
    width:auto !important;height:clamp(64px,17vw,84px) !important}
  div.rk-mascot{left:auto !important;right:0 !important;top:calc(30px + clamp(64px,17vw,84px) + 6px) !important;
    bottom:auto !important;width:clamp(64px,17vw,84px);text-align:center}
}

/* ---- Batch release on a phone --------------------------------------------
   The pinned, sideways-scrolling stage costs a phone one full screen plus the
   whole track width of scrolling for four cards. Below 760px it is a plain
   stack: heading, then the four cards, then "Released." page.js skips the
   scrub at this width so no inline height or transform fights these rules. */
@media (max-width:760px){
  #rk-proc-wrap{height:auto !important}
  .rk-proc-stage{position:static !important;height:auto !important;display:block !important;
    overflow:visible !important;padding:clamp(48px,9vw,72px) 0 clamp(40px,7vw,56px)}
  /* relative + z-index, not static: the background images and gradient are
     absolutely positioned and would paint over a static heading */
  .rk-proc-head{position:relative !important;top:0 !important;z-index:1;pointer-events:auto}
  #rk-proc-track{flex-direction:column !important;gap:10px !important;transform:none !important;
    padding:22px clamp(20px,4.5vw,64px) 0 !important}
  .rk-proc-card{width:100% !important;padding:20px 18px !important}
  .rk-proc-end{width:100% !important;padding:22px 0 0}
}

/* ---- Rapid Tests on a phone ----------------------------------------------
   A hard 1fr 1fr split, so the whole story was crammed into the left half of
   a 390px screen while the right half held only the mascot, which is hidden
   at this width anyway. The headline was wrapping one word per line. */
@media (max-width:900px){
  .rk-rapidgrid{grid-template-columns:minmax(0,1fr) !important;gap:28px !important}
}
/* Label and value collided at the middle of a narrow row. */
@media (max-width:560px){
  .rk-specrow{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ---- input-appropriate hint text ----------------------------------------
   The 3D viewer told every visitor to move a pointer. A phone has none, and
   the control it does respond to is a drag. */
.rk-hint-touch{display:none}
@media (hover:none),(pointer:coarse){
  .rk-hint-fine{display:none}
  .rk-hint-touch{display:inline}
}

/* ---- the WhatsApp button -------------------------------------------------
   It is fixed to the bottom-right corner, which is exactly where the enquiry
   form's message box ends, so it sat on top of the one field people type the
   most into. Nudged clear of it, and out of the way of the tray on a phone. */
.rk-wa{transition:transform .25s cubic-bezier(.22,1,.36,1),filter .2s}
@media (max-width:820px){
  .rk-wa{right:12px !important;bottom:12px !important;width:48px !important;height:48px !important}
  /* give the form room to breathe underneath it */
  #contact form,.rk-enqgrid textarea{scroll-margin-bottom:80px}
  .rk-enqgrid{padding-bottom:64px}
}



/* Desktop only: pull the hero copy closer to the left edge, matching the
   reference, where the copy sits just inside the margin rather than a full
   container gutter in from it. */
@media (min-width:1024px){
  .rk-herocopy{padding-left:clamp(18px,1.7vw,28px) !important}
}

/* A wide table inside the notice scrolls in its own box rather than pushing
   the page. Nothing in a legal notice may be cut off to make it fit. */
.rk-legal .rk-legaltbl{display:block;overflow-x:auto;white-space:normal}


/* ---- the header search: an icon at rest, a field when you use it --------
   It used to be a 190px pill that shrank through three width bands as the
   window narrowed, and between 961px and 1419px it collapsed to a 40px circle
   that could be focused but never grew. On an iPad that read as a search
   button that does nothing: the field was there, 40px wide, with a
   transparent placeholder and nowhere to put the words.

   One behaviour at every width now. At rest it is a 44px circle carrying the
   magnifier. Focus it, by click, tap or Tab, and the field grows leftward over
   the nav and the placeholder appears. Leave it empty and it closes again.

   The field is absolutely positioned inside a wrapper that never changes size,
   so opening it moves nothing else in the bar: at 1024px the nav is still
   centred to the pixel whether the search is open or shut. */
#rk-hdr-pill>div:last-child{gap:10px}
#rk-hdr-pill>div:last-child>button,
#rk-hdr-pill>div:last-child>a{flex:0 0 auto}
#rk-hdr-pill .rk-search-wrap{flex:0 0 auto;min-width:0;width:42px;height:42px;position:relative}
/* box-sizing:border-box means the used width can never fall below the
   padding, so the closed state carries its own narrow padding or the circle
   sits 14px wider than the round buttons beside it. */
#rk-hdr-pill #rk-hdr-search{position:absolute;right:0;top:0;width:42px;
  padding:0 12px !important;
  transition:width .34s cubic-bezier(.22,1,.36,1),border-color .2s}
#rk-hdr-pill #rk-hdr-search::placeholder{color:transparent}
#rk-hdr-pill .rk-search-wrap .rk-mag{right:14px;z-index:4}
#rk-hdr-pill .rk-search-wrap.rk-open #rk-hdr-search{
  width:clamp(220px,26vw,340px);z-index:3;padding:0 42px 0 18px !important;
  border-color:#4BA3EA;
  background:linear-gradient(180deg,#111820,#0B1014)}
#rk-hdr-pill .rk-search-wrap.rk-open #rk-hdr-search::placeholder{color:#fff;opacity:.72}

/* ENQUIRE costs 107px plus a gap. Below 1280 the actions column cannot pay
   for it and keep the buttons round. */
@media (max-width:1279px){
  #rk-hdr-pill .rk-hdr-enquire{display:none !important}
}
/* Narrow tablets have less room to grow into, so the open field takes what
   there is rather than running under the logo. */
@media (max-width:900px){
  #rk-hdr-pill .rk-search-wrap.rk-open #rk-hdr-search{width:min(300px,calc(100vw - 190px))}
}

/* ---- touch: text boxes at 16px ------------------------------------------
   iPhone and iPad Safari zoom the page in when you tap a text box whose text
   is under 16px, and leave it zoomed until you pinch out. These five were
   13px to 15px. Gated to touch and narrow screens, so the laptop header keeps
   its size. The enquiry, careers and contact fields were already 16px. */
@media (hover:none), (pointer:coarse), (max-width:960px){
  #rk-hdr-search, #rk-menu-q, #rk-q, #rk-ov-qty, #rk-p-qty{font-size:16px !important}
}
/* ---- phone bar: the open field starts after the magnifier, not under it.
   The magnifier sits 12px to 32px into the field; text now starts at 44px. */
@media (max-width:960px){
  #rk-hdr-pill .rk-search-wrap.rk-open #rk-hdr-search{padding:0 12px 0 44px !important}
}
/* ---- laptop: the open field grows leftward over the nav, which cut
   "OEM & EXPORTS" in half. The links step aside while you search, the way
   the wordmark does on the phone, and come back when the field closes. */
#rk-hdr-nav{transition:opacity .22s}
#rk-hdr-pill.rk-searching #rk-hdr-nav{opacity:0;pointer-events:none}