/* 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)}

/* Ripples the tiles spawn on hover. Geometry still comes from script because
   it follows the pointer; everything constant lives here so no style attribute
   is ever parsed from markup. */
.rk-rip{position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  animation-name:rkRipple;animation-timing-function:cubic-bezier(.22,1,.36,1);
  animation-fill-mode:forwards}
@keyframes rkRipple{from{transform:scale(0);opacity:.75}to{transform:scale(1);opacity:0}}

/* The circular wipe a role card plays on its way to the next page. */
.rk-wipe{position:fixed;inset:0;z-index:999;pointer-events:none;
  transition:clip-path .55s cubic-bezier(.22,1,.36,1)}

/* Without script the reveals must not stay hidden. They default to visible;
   this is the belt to that pair of braces. */
.no-js [data-reveal],.no-js [data-rise]{opacity:1 !important;translate:none !important;scale:1 !important}
.no-js [data-mascot]{opacity:1 !important}


/* ---- product overlay ----------------------------------------------------
   Built as real markup with real classes so nothing here is ever an inline
   style attribute, and so the dialog, its close button and its focus target
   are things a screen reader can find. */
body.rk-locked{overflow:hidden}

#rk-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:clamp(12px,3vw,40px)}
#rk-ov-scrim{all:unset;position:absolute;inset:0;cursor:pointer;
  background:rgba(6,9,11,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#rk-ov-panel{position:relative;z-index:1;box-sizing:border-box;
  width:min(660px,100%);max-height:calc(100vh - 2*clamp(12px,3vw,40px));
  overflow:auto;background:#0E1216;color:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:22px;box-shadow:0 60px 120px -40px rgba(0,0,0,.9);
  animation:rkFade .28s cubic-bezier(.22,1,.36,1) both}


/* The overlay photograph. A fixed 4:3 box so swapping between pack sizes does
   not make the dialog jump: different shots have different native ratios. */
#rk-ov-media{display:flex;flex-direction:column;gap:10px}
#rk-ov-figure{margin:0;border-radius:14px;overflow:hidden;background:#0B0E10;
  border:1px solid rgba(255,255,255,.1);aspect-ratio:4/3}
#rk-ov-img{width:100%;height:100%;object-fit:cover;display:block}

/* The other angles of the selected pack. A plain scrolling row: there are two
   to six of them, so paging or a carousel would be machinery for nothing, and
   this way the whole set stays visible and tabbable. */
#rk-ov-angles{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.rk-angle{all:unset;cursor:pointer;flex:none;width:76px;aspect-ratio:4/3;
  border-radius:8px;overflow:hidden;background:#0B0E10;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.14);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(75,163,234,.55)}}
.rk-angle:focus-visible{outline:2px solid #4BA3EA;outline-offset:2px}
.rk-angle[aria-pressed="true"]{opacity:1;border-color:#4BA3EA}

/* Said only when the photograph is of a different pack size of the same
   product, so it reads as a correction and not as decoration. */
#rk-ov-of{margin:0;font:500 12px 'Plex Mono',monospace;line-height:1.5;color:#8FA5B5}

/* The card thumbnail keeps its box whether or not a photograph exists, so a
   product without one does not shuffle the grid. */
#rk-ov-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:26px 26px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
#rk-ov-cat{display:block;font:500 11px 'Plex Mono',monospace;letter-spacing:.18em;
  text-transform:uppercase;color:#4BA3EA}
#rk-ov-title{margin:10px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;
  font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,34px);
  line-height:1.02;letter-spacing:.005em}
#rk-ov-x{all:unset;cursor:pointer;flex:none;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;
  justify-content:center;color:#EAF2F8;font-size:14px;transition:border-color .2s,color .2s}@media (hover:hover) and (pointer:fine){
#rk-ov-x:hover{border-color:#4BA3EA;color:#fff}}

#rk-ov-body{padding:22px 26px 26px;display:flex;flex-direction:column;gap:22px}
#rk-ov-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
#rk-ov-facts li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.08);font-size:14.5px}
#rk-ov-facts b{font:500 11px 'Plex Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#8FA5B5}
#rk-ov-facts span{color:#EAF2F8;text-align:right}
#rk-ov-desc{margin:0;font-size:14.5px;line-height:1.7;color:#AEBFCB}

.rk-ov-label{display:block;font:500 11px 'Plex Mono',monospace;letter-spacing:.16em;
  text-transform:uppercase;color:#8FA5B5;margin-bottom:12px}

#rk-ov-sizes{display:flex;flex-direction:column;gap:8px}
.rk-size{display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}@media (hover:hover) and (pointer:fine){
.rk-size:hover{border-color:rgba(75,163,234,.55);background:rgba(75,163,234,.08)}}
.rk-size:has(input:checked){border-color:#4BA3EA;background:rgba(75,163,234,.14)}
.rk-size input{accent-color:#4BA3EA;width:16px;height:16px;flex:none;margin:0}
.rk-size-pack{flex:1;font-size:14.5px;font-weight:600;color:#fff}
.rk-size-code{font:500 12px 'Plex Mono',monospace;color:#4BA3EA;white-space:nowrap}

#rk-ov-qtyrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#rk-ov-stepper{display:flex;align-items:center;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;overflow:hidden}
#rk-ov-stepper button{all:unset;cursor:pointer;width:42px;height:44px;display:flex;
  align-items:center;justify-content:center;color:#EAF2F8;font-size:17px;transition:background .2s}@media (hover:hover) and (pointer:fine){
#rk-ov-stepper button:hover{background:rgba(75,163,234,.18)}}
#rk-ov-qty{width:58px;height:44px;border:0;outline:none;background:transparent;
  color:#fff;text-align:center;font:500 15px 'Plex Mono',monospace;
  -moz-appearance:textfield;appearance:textfield}
#rk-ov-qty::-webkit-outer-spin-button,#rk-ov-qty::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
#rk-ov-bulk{display:flex;gap:6px}
#rk-ov-bulk button{all:unset;cursor:pointer;min-width:44px;height:44px;padding:0 6px;
  border-radius:999px;border:1px solid rgba(255,255,255,.16);display:flex;
  align-items:center;justify-content:center;font:500 12px 'Plex Mono',monospace;
  color:#AEBFCB;transition:border-color .2s,color .2s,background .2s}@media (hover:hover) and (pointer:fine){
#rk-ov-bulk button:hover{border-color:#4BA3EA;color:#fff;background:rgba(75,163,234,.12)}}

#rk-ov-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding-top:6px;border-top:1px solid rgba(255,255,255,.1)}
#rk-ov-add{all:unset;cursor:pointer;margin-top:16px;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:16px 30px;border-radius:999px;
  transition:filter .2s}@media (hover:hover) and (pointer:fine){
#rk-ov-add:hover{filter:brightness(1.15)}}
#rk-ov-ds,#rk-ov-nods{margin-top:16px;font:500 11px 'Plex Mono',monospace;letter-spacing:.1em}
#rk-ov-ds{color:#4BA3EA}@media (hover:hover) and (pointer:fine){
#rk-ov-ds:hover{color:#fff}}
#rk-ov-nods{color:#8FA5B5}

@media (max-width:560px){
  #rk-ov-panel{border-radius:16px}
  #rk-ov-head,#rk-ov-body{padding-left:18px;padding-right:18px}
}

/* ---- 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:.12}
.rk42{display:flex;width:max-content;animation:rkMarquee 70s linear infinite;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}
.rk43{padding-right:64px}
.rk44{position:relative;max-width:min(1920px, 94vw);margin:0 auto;padding:calc(72px + clamp(40px,6vw,80px)) clamp(20px,4.5vw,64px) clamp(56px,8vw,100px)}
.rk45{display:flex;align-items:center;gap:14px;font:500 12px 'Plex Mono',monospace;letter-spacing:.22em;color:#4BA3EA;animation:rkFade .7s cubic-bezier(.22,1,.36,1) .1s both}
.rk46{width:26px;height:1px;background:#4BA3EA}
.rk47{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rk48{margin:18px 0 0;font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(46px,7.4vw,110px);letter-spacing:.005em;line-height:.94;display:flex;overflow:hidden;padding-bottom:.08em}
.rk49{display:inline-block;animation:rkRise .7s cubic-bezier(.22,1,.36,1) .15s both}
.rk50{display:inline-block;animation:rkRise .7s cubic-bezier(.22,1,.36,1) .2s both}
.rk51{display:inline-block;animation:rkRise .7s cubic-bezier(.22,1,.36,1) .25s both}
.rk52{display:inline-block;width:.32em}
.rk53{display:inline-block;animation:rkRise .7s cubic-bezier(.22,1,.36,1) .3s both}
.rk54{display:inline-block;animation:rkRise .7s cubic-bezier(.22,1,.36,1) .35s both}
.rk55{display:inline-block;animation:rkRise .7s cubic-bezier(.22,1,.36,1) .4s both}
.rk56{display:inline-block;animation:rkRise .7s cubic-bezier(.22,1,.36,1) .45s both}
.rk57{display:inline-block;animation:rkRise .7s cubic-bezier(.22,1,.36,1) .5s both}
.rk58{display:inline-block;animation:rkRise .7s cubic-bezier(.22,1,.36,1) .55s both;color:#4BA3EA}
.rk59{flex:1}
.rk60{max-width:min(1920px, 94vw);margin:0 auto;padding:clamp(36px,5vw,56px) clamp(20px,4.5vw,64px) clamp(72px,9vw,110px)}
.rk61{display:flex;gap:10px;flex-wrap:nowrap;align-items:stretch}
.rk62{box-sizing:border-box;flex:1 1 0;min-width:0;background:linear-gradient(180deg,#ffffff,rgba(243,247,251,.92));border:1px solid #DBE1E6;border-radius:999px;outline:none;font-size:clamp(14.5px,1.7vw,16.5px);color:#101D27;padding:17px 26px;box-shadow:inset 0 1px 0 #fff,inset 0 -8px 14px -12px rgba(16,29,39,.15),0 12px 28px -18px rgba(16,29,39,.3);transition:border-color .2s,box-shadow .2s}
.rk62:focus{border-color:#005198;box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(0,81,152,.12),0 12px 28px -18px rgba(16,29,39,.3)}
.rk63{display:flex;flex:none;align-items:center;gap:4px;padding:4px;border-radius:999px;border:1px solid #DBE1E6;background:linear-gradient(180deg,#ffffff,rgba(243,247,251,.92));box-shadow:inset 0 1px 0 #fff,0 12px 28px -18px rgba(16,29,39,.3)}
.rk64{position:relative}
.rk65{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:14px;height:56px;padding:0 22px;border-radius:999px;font:500 12.5px 'Plex Mono',monospace;letter-spacing:.04em;border:1px solid #DBE1E6;background:linear-gradient(180deg,#ffffff,rgba(243,247,251,.92));color:#101D27;box-shadow:inset 0 1px 0 #fff,0 12px 28px -18px rgba(16,29,39,.3);transition:border-color .2s}
@media (hover:hover) and (pointer:fine){.rk65:hover{border-color:#005198}}
.rk65:focus{border-color:#005198}
.rk66{color:#61707D;transition:transform .25s}
.rk67{position:absolute;top:calc(100% + 10px);right:0;z-index:40;box-sizing:border-box;width:min(760px,calc(100vw - 40px));border-radius:20px;border:1px solid rgba(255,255,255,.2);box-shadow:0 40px 80px -30px rgba(0,0,0,.85);color:#fff;isolation:isolate;animation:rkFade .22s cubic-bezier(.22,1,.36,1) both}
.rk68{position:absolute;inset:0;display:block;backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);filter:url(#glass-distortion)}
.rk69{position:absolute;inset:0;display:block;background:rgba(11,14,16,.88)}
.rk70{position:absolute;inset:0;display:block;border-radius:inherit;box-shadow:inset 1px 1px 1px rgba(255,255,255,.4),inset 0 0 14px rgba(255,255,255,.1)}
.rk71{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px;padding:18px}
.rk72{margin:0 0 10px;font:500 10.5px 'Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#4BA3EA}
.rk73{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow:auto}
.rk74{display:flex;flex-direction:column;gap:2px}
.rk75{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:10px;margin-top:28px}
.rk76{box-sizing:border-box;cursor:pointer;background:#fff;border:1px solid #DBE1E6;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:transform .15s ease-out,border-color .3s,box-shadow .3s;will-change:transform}
@media (hover:hover) and (pointer:fine){.rk76:hover{border-color:#005198;box-shadow:0 22px 44px -24px rgba(0,81,152,.45)}}
.rk77{display:flex;min-width:0}
.rk78{position:relative;border-radius:8px;overflow:hidden;background:#F1F4F6;aspect-ratio:4/3}
.rk79{display:none;width:100%;height:100%;object-fit:cover}
.rk80{display:flex;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.rk81{font-weight:600;font-size:14.5px;line-height:1.32;flex:1}
.rk82{color:#101D27}
@media (hover:hover) and (pointer:fine){.rk82:hover{color:#005198}}
.rk83{display:flex;align-items:center;gap:10px;font:500 10.5px 'Plex Mono',monospace;letter-spacing:.08em;color:#61707D}
.rk84{color:#DBE1E6}
.rk85{color:#2C6249}
.rk86{all:unset;cursor:pointer;flex:none;margin-left:auto;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#1668B4,#005198);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 16px -8px rgba(0,81,152,.6);transition:transform .2s,filter .2s}
@media (hover:hover) and (pointer:fine){.rk86:hover{transform:scale(1.15);filter:brightness(1.18)}}
.rk87{display:block;width:100%;height:100%;object-fit:cover}
.rk88{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.rk89{color:#A2382A}
.rk90{margin-top:56px;text-align:center}
.rk91{height:72px;display:inline-block}
.rk92{margin-top:14px;font-weight:600;font-size:18px;color:#101D27}
.rk93{margin-top:6px;font-size:14px;color:#4A5D6C}
.rk94{background:#0B0E10;color:#fff}
.rk95{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}
.rk96{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}
.rk97{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){.rk97:hover{filter:brightness(1.15);color:#fff}}
.rk98{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){.rk98:hover{transform:translateY(-4px) scale(1.06);color:#fff;filter:brightness(1.05)}}

/* ---- 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}