/* ==========================================================================
   Remaps UK design system
   One stylesheet for every rebuilt page, so the site cannot drift.
   Loaded only on pages that opt in, via rmuk_ds().

   The written rules live in remapsuk-design-rules.md. The short version:
      1. NO coloured line down one side of a container, and none across the top
         either. A container is a background, a hairline and a radius. If it
         needs emphasis it gets a different fill, not a stripe.
      2. ONE accent, and it means something. Blue is the brand. It goes on
         actions, links and figures, never on decoration. There is no second
         hue. Amber survives only on the AdBlue, DPF and EGR pages, where it is
         not a brand colour: it is what the warning lamp on the dashboard is.
      3. Real numbers or nothing. Every figure has a source.

   BRAND
      Three blues, sampled from the logo file by pixel count and consistent
      across the black, white and square variants:
        #147AFB  ~2,900px  the wordmark dial and strapline. THE brand blue.
        #1EA9FB    ~185px  the top segment of the dial. The action colour on dark.
        #0056FF    ~190px  the lower segment. Depth.
      The old site used #0068DF on every button. It is not in the logo.

   NEUTRALS ARE WARM, ON PURPOSE
      "Too blue" was never the buttons; it was the neutrals. The old light grey
      #F4F7FB and dark navy #0A1220 both had blue in them, and ninety per cent
      of any screen is neutral. Bone paper and a true near-black mean blue only
      appears where it carries meaning, and reads as more blue for it.
      John, 15 Sep 2026: "I like both together. That looks the best so far."
      Do not revert these to cool greys.

   TYPE
      Inter Tight for headings, Inter for everything else. Both are already
      served locally by Elementor on this site, so this adds no font requests.
   ========================================================================== */
:root{
  /* ---- brand, straight off the logo ---- */
  --rk-blue:#147AFB;
  --rk-blue-d:#0B5FD0;
  --rk-blue-deep:#0056FF;
  --rk-blue-l:#1EA9FB;
  --rk-blue-l-d:#0E93E0;
  --rk-blue-t:#E8F1FE;

  --rk-action:#1EA9FB;
  --rk-action-d:#0E93E0;

  /* ---- warning. MEANING, NOT DECORATION. AdBlue, DPF and EGR pages only. ---- */
  --rk-warn:#FFB400;
  --rk-warn-d:#E8A200;
  --rk-warn-t:#FFF4D9;

  /* Aliases kept so older markup still resolves. New markup uses the real names. */
  --rk-amber:var(--rk-action);
  --rk-amber-d:var(--rk-action-d);
  --rk-amber-t:var(--rk-blue-t);

  /* ---- surfaces. Warm. ---- */
  --rk-ink:#111316;         /* near-black, no blue in it */
  --rk-ink2:#1B1F23;        /* a card on a dark section */
  --rk-ink3:#2B3137;        /* hairline on dark */
  --rk-ink-fig:#16191D;     /* a figure tile on dark */
  --rk-paper:#FFFFFF;
  --rk-mist:#F7F5F1;        /* bone */
  --rk-mist2:#F1EDE6;       /* the emphasised card fill on light */
  --rk-line:#E7E2DA;        /* hairline on light */
  --rk-line2:#E3DCD0;

  /* ---- text ---- */
  --rk-text:#0C0D0E;        /* display type. True black, like the wordmark */
  --rk-slate:#5B5852;       /* body on light */
  --rk-slate-l:#9A968E;     /* body on dark */
  --rk-on-dark:#EFEDE9;

  /* ---- the blue that means "tuned" on the dark readout ---- */
  --rk-tuned:#0B2440;
  --rk-tuned-line:#154068;

  /* ---- plate ---- */
  --rk-plate:#FFD400;
  --rk-band:#0033A0;
  --rk-plate-ink:#0B1116;

  /* ---- states. Meaning only. ---- */
  --rk-good:#1F7A34;
  --rk-bad:#C0392B;

  /* ---- geometry ---- */
  --rk-r-sm:8px; --rk-r:12px; --rk-r-lg:18px; --rk-r-xl:24px;
  --rk-wrap:1120px;

  --rk-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --rk-disp:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;

  /* One shadow scale. */
  --rk-sh-1:0 1px 2px rgba(13,13,14,.06), 0 2px 8px rgba(13,13,14,.04);
  --rk-sh-2:0 4px 12px rgba(13,13,14,.07), 0 12px 32px rgba(13,13,14,.06);
  --rk-sh-3:0 18px 48px -18px rgba(8,10,12,.45);
}

/* ==========================================================================
   Base. Scoped to .rk so it cannot leak onto Elementor pages not yet rebuilt.
   ========================================================================== */
body.rk{margin:0;background:var(--rk-paper);overflow-x:hidden}
.rk{font-family:var(--rk-sans);color:var(--rk-text);line-height:1.6;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.rk *,.rk *:before,.rk *:after{box-sizing:border-box}
.rk img{max-width:100%;height:auto;display:block}
.rk a{color:var(--rk-blue);text-decoration:none}
.rk a:hover{color:var(--rk-blue-d)}
.rk p{margin:0 0 1em}
.rk p:last-child{margin-bottom:0}
.rk ul,.rk ol{margin:0 0 1em;padding-left:1.2em}

.rk-wrap{max-width:var(--rk-wrap);margin:0 auto;padding:0 22px;width:100%}
.rk-wrap-n{max-width:900px;margin:0 auto;padding:0 22px;width:100%}

/* ---- sections. Rhythm: dark, white, bone, dark, white. Two darks never touch. ---- */
.rk-sec{padding:64px 0}
.rk-sec-sm{padding:40px 0}
.rk-sec-mist{background:var(--rk-mist)}
.rk-sec-dark{background:var(--rk-ink);color:var(--rk-on-dark)}
/* ☠️ `.rk .rk-sec-dark h2`, NOT `.rk-sec-dark h2`. The shorter form is 0,1,1, the same as `.rk h2`
   in the type block below, and the later rule wins - which painted every heading on every dark
   section near-black on near-black. John found two of them invisible. 0,2,1 wins regardless. */
.rk .rk-sec-dark h1,.rk .rk-sec-dark h2,.rk .rk-sec-dark h3,.rk .rk-sec-dark h4,
.rk .rk-on-dark h1,.rk .rk-on-dark h2,.rk .rk-on-dark h3,.rk .rk-on-dark h4{color:#fff}
.rk .rk-sec-dark p{color:var(--rk-slate-l)}
.rk .rk-sec-dark a:not(.rk-btn):not(.rk-call){color:var(--rk-blue-l)}

/* ==========================================================================
   Type
   ========================================================================== */
.rk h1,.rk h2,.rk h3,.rk h4,.rk .rk-h1,.rk .rk-h2,.rk .rk-h3{
  font-family:var(--rk-disp);font-weight:800;letter-spacing:-.028em;
  line-height:1.08;color:var(--rk-text);margin:0 0 .4em}
.rk h1,.rk .rk-h1{font-size:clamp(33px,4.6vw,54px)}
.rk h2,.rk .rk-h2{font-size:clamp(25px,3.1vw,36px);letter-spacing:-.024em}
.rk h3,.rk .rk-h3{font-size:clamp(19px,2.1vw,23px);letter-spacing:-.018em;line-height:1.2}
.rk h4{font-size:17px;letter-spacing:-.012em;line-height:1.25}

.rk-lede{font-size:clamp(15.5px,1.5vw,18px);color:var(--rk-slate);line-height:1.6;max-width:56ch}
.rk-sec-dark .rk-lede,.rk-on-dark .rk-lede{color:var(--rk-slate-l)}
.rk-small{font-size:13.5px;color:var(--rk-slate)}
.rk-eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rk-blue);margin:0 0 12px;display:block}
.rk-sec-dark .rk-eyebrow,.rk-on-dark .rk-eyebrow{color:var(--rk-blue-l)}

.rk-num{font-family:var(--rk-disp);font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Long-form copy: question pages, explainers, terms. 68ch measure, generous leading. */
.rk-prose{max-width:68ch;font-size:16.5px;line-height:1.7;color:var(--rk-slate)}
.rk-prose h2{margin-top:1.6em;color:var(--rk-text);font-size:clamp(22px,2.4vw,28px)}
.rk-prose h3{margin-top:1.4em;color:var(--rk-text)}
.rk-prose li{margin-bottom:.4em}
.rk-prose strong{color:var(--rk-text)}

/* ==========================================================================
   Buttons. Three only.
   ☠️ EVERY BUTTON RULE IS PREFIXED .rk. Elementor's frontend.min.css carries
      `button,[type=submit]{...}` at 0,1,1, which beats a bare `.rk-btn-action` at
      0,1,0 - every submit on the site rendered transparent with the theme's pink
      border. `.rk .rk-btn-action` is 0,2,0 and wins without !important.
   ========================================================================== */
.rk .rk-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 24px;border:0;border-radius:var(--rk-r-sm);cursor:pointer;
  font-family:var(--rk-sans);font-size:15.5px;font-weight:700;letter-spacing:.005em;
  text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease;
  white-space:nowrap;line-height:1;text-transform:none}
.rk .rk-btn:focus-visible{outline:3px solid var(--rk-blue-l);outline-offset:2px}
.rk .rk-btn-blue{background:var(--rk-blue);color:#fff}
.rk .rk-btn-blue:hover{background:var(--rk-blue-d);color:#fff}
/* The action button changes blue with its background. On white, brand blue with white text
   (4.6:1). On the dark, the logo's light blue with near-black text (8.4:1). Nothing in the ramp
   works on both, and the light blue on white is 2.0:1. */
.rk .rk-btn-action{background:var(--rk-blue);color:#fff}
.rk .rk-btn-action:hover{background:var(--rk-blue-d);color:#fff}
.rk .rk-sec-dark .rk-btn-action,.rk .rk-on-dark .rk-btn-action,.rk .rk-mast .rk-btn-action,
.rk .rk-callbar .rk-btn-action,.rk .rk-drawer .rk-btn-action,.rk .rk-foot .rk-btn-action{
  background:var(--rk-blue-l);color:#07101C}
.rk .rk-sec-dark .rk-btn-action:hover,.rk .rk-on-dark .rk-btn-action:hover,
.rk .rk-mast .rk-btn-action:hover,.rk .rk-callbar .rk-btn-action:hover,
.rk .rk-drawer .rk-btn-action:hover,.rk .rk-foot .rk-btn-action:hover{
  background:var(--rk-blue-l-d);color:#07101C}
.rk .rk-btn-ghost{background:transparent;color:var(--rk-text);border:1.5px solid var(--rk-line)}
.rk .rk-btn-ghost:hover{border-color:var(--rk-text);color:var(--rk-text)}
/* ☠️ .rk-foot is a dark surface that is not .rk-sec-dark. Any new dark surface joins this list
   or the ghost button on it is invisible - the newsletter Sign up was, once. */
.rk .rk-sec-dark .rk-btn-ghost,.rk .rk-on-dark .rk-btn-ghost,.rk .rk-foot .rk-btn-ghost,
.rk .rk-drawer .rk-btn-ghost,.rk .rk-callbar .rk-btn-ghost,
.rk .rk-mast .rk-btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.rk .rk-sec-dark .rk-btn-ghost:hover,.rk .rk-on-dark .rk-btn-ghost:hover,
.rk .rk-foot .rk-btn-ghost:hover,.rk .rk-drawer .rk-btn-ghost:hover,
.rk .rk-callbar .rk-btn-ghost:hover,.rk .rk-mast .rk-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.rk .rk-btn-full{width:100%}
.rk .rk-btn-sm{height:42px;padding:0 17px;font-size:14px}
.rk .rk-btn-lg{height:58px;padding:0 30px;font-size:16.5px}
.rk .rk-btn svg{width:16px;height:16px;fill:currentColor;flex:0 0 16px}
.rk .rk-btns{display:flex;gap:10px;flex-wrap:wrap}

/* Phone. A pill, quiet, a real tap target. */
.rk .rk-call{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;
  border-radius:999px;border:1.5px solid var(--rk-line);background:transparent;
  font-size:14px;font-weight:700;color:var(--rk-text);text-decoration:none;white-space:nowrap}
.rk .rk-call:hover{border-color:var(--rk-blue);color:var(--rk-blue);background:var(--rk-blue-t)}
.rk .rk-call svg{width:14px;height:14px;fill:currentColor;flex:0 0 14px}
.rk .rk-on-dark .rk-call,.rk .rk-sec-dark .rk-call,.rk .rk-foot .rk-call,
.rk .rk-mast .rk-call,.rk .rk-callbar .rk-call{border-color:rgba(255,255,255,.26);color:#fff}
.rk .rk-on-dark .rk-call:hover,.rk .rk-sec-dark .rk-call:hover,.rk .rk-foot .rk-call:hover,
.rk .rk-mast .rk-call:hover,.rk .rk-callbar .rk-call:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

/* A text link with an arrow. */
.rk .go{font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:7px}

/* ==========================================================================
   The number plate
   ☠️ !important throughout the input: the theme styles every input globally.
   ☠️ UK band CENTRED, not bottom-aligned. Fixed width: a reg is 8 characters.
   ========================================================================== */
.rk-plate{display:flex;align-items:stretch;border:2px solid var(--rk-plate-ink);
  border-radius:6px;overflow:hidden;background:var(--rk-plate);height:56px;
  flex:0 0 auto;width:218px;max-width:100%}
.rk-plate .rk-band{background:var(--rk-band);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;letter-spacing:.05em;flex:0 0 32px}
.rk-plate input{flex:1;min-width:0;width:100%;
  border:0!important;border-radius:0!important;outline:none!important;
  background:var(--rk-plate)!important;background-color:var(--rk-plate)!important;
  box-shadow:none!important;height:52px!important;min-height:0!important;
  padding:0 8px!important;margin:0!important;
  font-family:"UKNumberPlate RMUK","Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-size:27px!important;font-weight:400!important;letter-spacing:.04em!important;
  text-transform:uppercase;text-align:center;color:#000!important}
.rk-plate input::placeholder{color:rgba(0,0,0,.34)!important}
.rk-plate input:-webkit-autofill,
.rk-plate input:-webkit-autofill:focus{
  -webkit-text-fill-color:#000!important;
  -webkit-box-shadow:0 0 0 60px var(--rk-plate) inset!important;
  box-shadow:0 0 0 60px var(--rk-plate) inset!important}
.rk-plate-sm{height:46px;width:178px}
.rk-plate-sm input{height:42px!important;font-size:22px!important}
.rk-plate-sm .rk-band{flex:0 0 26px;font-size:9.5px}

.rk-lookup{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.rk-lookup .rk-btn{height:56px}
@media (max-width:520px){
  .rk-lookup{flex-direction:column}
  .rk-lookup .rk-plate{width:100%}
  .rk-lookup .rk-btn{width:100%}
}

/* ==========================================================================
   Containers. Background, hairline, radius. Emphasis is a fill, never an edge.
   ========================================================================== */
.rk-card{background:var(--rk-paper);border:1px solid var(--rk-line);
  border-radius:var(--rk-r);padding:22px}
.rk-card-pad{padding:28px}
.rk-card-lift{box-shadow:var(--rk-sh-1)}
.rk-card-blue{background:var(--rk-mist2);border-color:var(--rk-line2)}
.rk-card-blue p{color:var(--rk-slate)}
.rk-card-blue .go{color:var(--rk-blue-d)}
.rk-card-amber{background:var(--rk-warn-t);border-color:#F2DCA4}
.rk-sec-dark .rk-card,.rk-on-dark .rk-card{background:var(--rk-ink2);border-color:var(--rk-ink3);color:var(--rk-on-dark)}
.rk-sec-dark .rk-card h3,.rk-on-dark .rk-card h3{color:#fff}
.rk-sec-mist .rk-card{background:var(--rk-paper)}

.rk-grid{display:grid;gap:16px}
.rk-g2{grid-template-columns:repeat(2,1fr)}
.rk-g3{grid-template-columns:repeat(3,1fr)}
.rk-g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.rk-g3,.rk-g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rk-g2,.rk-g3,.rk-g4{grid-template-columns:1fr}}

/* ==========================================================================
   Trust furniture
   ========================================================================== */
.rk-stars{color:#F5A623;letter-spacing:1px;font-size:14px;line-height:1}
.rk-rating{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700}

.rk-stat{text-align:center}
.rk-stat .v{font-family:var(--rk-disp);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(24px,2.8vw,31px);line-height:1;color:var(--rk-text);
  font-variant-numeric:tabular-nums}
.rk-stat .v small{font-size:.52em;font-weight:700;letter-spacing:-.01em}
.rk-stat .l{font-size:12.5px;color:var(--rk-slate);font-weight:600;margin-top:5px;line-height:1.3}
.rk-sec-dark .rk-stat .v{color:#fff}
.rk-sec-dark .rk-stat .l{color:var(--rk-slate-l)}

/* The strip of four stats under a hero. */
.rk-strip{background:var(--rk-paper);border-bottom:1px solid var(--rk-line);padding:26px 0}
.rk-strip .row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.rk-ticks{display:flex;flex-wrap:wrap;gap:9px 22px;list-style:none;margin:0;padding:0}
.rk-ticks li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.rk-ticks svg{width:15px;height:15px;flex:0 0 15px;fill:var(--rk-blue)}
.rk-sec-dark .rk-ticks svg,.rk-on-dark .rk-ticks svg{fill:var(--rk-blue-l)}
.rk-sec-dark .rk-ticks li,.rk-on-dark .rk-ticks li{color:var(--rk-on-dark)}
.rk-ticks-col{flex-direction:column;gap:10px}

.rk-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:5px;
  background:var(--rk-mist2);color:var(--rk-slate);border:1px solid var(--rk-line2)}
.rk-badge-good{background:#E9F5EC;color:var(--rk-good);border-color:#C7E5CE}
.rk-badge-blue{background:var(--rk-blue-t);color:var(--rk-blue-d);border-color:#CBDFFA}
.rk-badge-warn{background:var(--rk-warn-t);color:#7A5200;border-color:#F2DCA4}
.rk-badge-bad{background:#FBECEA;color:var(--rk-bad);border-color:#F0C9C4}

/* ==========================================================================
   Masthead. Solid, sticky, 72px. Five nav items.
   ☠️ SOLID, NOT TRANSPARENT. The live header sits over whatever the page puts
      behind it and went unreadable on three page types. A solid bar cannot.
   ========================================================================== */
.rk-mast{position:sticky;top:0;z-index:900;background:var(--rk-ink);
  border-bottom:1px solid var(--rk-ink3)}
.rk-mast-in{max-width:var(--rk-wrap);margin:0 auto;padding:0 22px;height:72px;
  display:flex;align-items:center;gap:26px}
.rk-mast .brand{display:flex;align-items:center;flex:0 0 auto}
.rk-mast .brand img{height:34px;width:auto}
.rk-nav{display:flex;align-items:center;gap:24px;flex:1;min-width:0}
.rk-nav a{color:rgba(255,255,255,.86);font-size:14.5px;font-weight:600;white-space:nowrap;
  padding:6px 0;border-bottom:2px solid transparent}
.rk-nav a:hover{color:#fff}
.rk-nav a.on{color:#fff;border-bottom-color:var(--rk-blue-l)}
.rk-nav a.rk-nav-trade{color:var(--rk-slate-l)}
.rk-nav a.rk-nav-trade:hover{color:#fff}
.rk-mast-r{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.rk-mast .rk-rating{color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:6px 13px}
/* ☠️ .rk PREFIX, same reason as the buttons: the theme styles `button,[type=button]` with a pink
   1px border at the same specificity as a bare .rk-burger, and it loads later, so the burger
   rendered as a small pink box on desktop. 0,2,0 wins. */
.rk .rk-burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0 10px;border-radius:0;box-shadow:none}
.rk .rk-burger span{display:block;height:2px;background:#fff;border-radius:2px}
/* ☠️ The theme also styles button:hover and :focus with its pink. A tapped button on a phone stays
   in :hover until something else is touched, which is how the burger turned pink after one tap.
   Three-class specificity beats the theme's pseudo-class rules whatever order they load in. */
.rk .rk-burger:hover,.rk .rk-burger:focus,.rk .rk-burger:active,
.rk .rk-drawer .x:hover,.rk .rk-drawer .x:focus,.rk .rk-drawer .x:active{
  background:transparent;border:0;color:#fff;box-shadow:none;outline:none}
.rk .rk-burger:focus-visible,.rk .rk-drawer .x:focus-visible{outline:3px solid var(--rk-blue-l);outline-offset:2px}

.rk-drawer{position:fixed;inset:0;z-index:1000;display:none}
.rk-drawer.open{display:block}
.rk-drawer .scrim{position:absolute;inset:0;background:rgba(6,8,10,.62)}
.rk-drawer .sheet{position:absolute;right:0;top:0;bottom:0;width:min(340px,88vw);
  background:var(--rk-ink);padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.rk-drawer .sheet a.item{display:block;color:#fff;font-size:17px;font-weight:700;
  padding:13px 0;border-bottom:1px solid var(--rk-ink3)}
/* The close control is a full row, not a lone ×: a word people read and a target 44px tall. */
.rk-drawer .sheet-top{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--rk-ink3);padding-bottom:12px}
.rk-drawer .sheet-top .t{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rk-slate-l)}
.rk .rk-drawer .x{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;
  color:#fff;font-family:var(--rk-sans);font-size:14px;font-weight:700;line-height:1;cursor:pointer;
  padding:0 4px 0 10px;min-height:44px;box-shadow:none;border-radius:0}
.rk .rk-drawer .x b{font-size:26px;font-weight:400;line-height:1;margin-top:-3px}

/* ☠️ THE WORDPRESS ADMIN BAR. When John is logged in, WordPress pins a 32px bar (46px on phones)
   over the top of every page. The sticky masthead and the fixed drawer both sat underneath it,
   which hid the close control. Both drop below it for logged-in users; customers never see it. */
.admin-bar .rk-mast{top:32px}
.admin-bar .rk-drawer .sheet{top:32px}
@media (max-width:782px){
  .admin-bar .rk-mast{top:46px}
  .admin-bar .rk-drawer .sheet{top:46px}
}

/* The live theme's floating "GET MY PRICE" bubble (RampDesk) and its pink CTA are not needed on a
   rebuilt page: the masthead, the price panel, the form and the mobile call bar already carry the
   action, and two floating things on a phone screen is how copy gets covered. Hidden here, on
   .rk pages only; everything else on the site keeps it. */
.rk #rd-cta-float{display:none!important}

/* ==========================================================================
   Hero. Dark, one soft light top right. Optional parallax photograph.
   ========================================================================== */
.rk-hero{position:relative;background:var(--rk-ink);color:#fff;overflow:hidden;padding:64px 0 56px}
.rk-hero:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(760px 420px at 82% 8%, rgba(20,122,251,.16), transparent 62%)}
.rk-hero-in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:46px;align-items:center}
.rk-hero-1{grid-template-columns:1fr;max-width:820px}
.rk .rk-hero h1{color:#fff;margin-bottom:16px}
.rk .rk-hero h1 em{font-style:normal;color:var(--rk-blue-l)}
.rk-hero .rk-lede{color:#C9C5BE;margin-bottom:26px}
.rk-hero .rk-lookup{margin-bottom:14px}
.rk-hero .under{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.rk-hero .under .note{font-size:13px;color:var(--rk-slate-l)}

/* The parallax. A position:fixed image inside a clip-path parent: the photo holds still, the
   page scrolls over it, and it is clipped away when the hero ends.
   ☠️ NOT background-attachment:fixed - broken on iOS Safari, and this site's traffic is phones.
   ☠️ The overlay is a GRADIENT weighted to the left, where the type is.
   ☠️ prefers-reduced-motion turns the fix off; layout is identical, nothing breaks. */
.rk-hero-haspic:before{background:linear-gradient(100deg, rgba(17,19,22,.93) 0%, rgba(17,19,22,.80) 34%,
  rgba(17,19,22,.50) 62%, rgba(17,19,22,.34) 100%)}
.rk-hero-fix{position:absolute;inset:0;overflow:hidden;clip-path:inset(0);z-index:0}
.rk .rk-hero-fix img{position:fixed;top:0;left:0;width:100%;height:100vh;
  object-fit:cover;object-position:50% 50%;opacity:.42}
@media (prefers-reduced-motion:reduce){
  .rk .rk-hero-fix img{position:absolute;height:100%}
}
/* A photograph sitting in the hero's right column, framed. */
.rk-hero-side{margin:0;border-radius:var(--rk-r-lg);overflow:hidden;position:relative;
  box-shadow:var(--rk-sh-3);border:1px solid var(--rk-ink3)}
.rk .rk-hero-side img{width:100%;height:440px;object-fit:cover;display:block}
.rk-hero-side figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  font-size:12.5px;color:#DCD9D3;font-weight:600;
  background:linear-gradient(to top, rgba(6,8,10,.9), rgba(6,8,10,0))}
@media (max-width:1000px){ .rk .rk-hero-side img{height:300px} }

/* ==========================================================================
   The dyno readout
   ========================================================================== */
.rk-dyno{background:var(--rk-ink);border-radius:var(--rk-r-lg);overflow:hidden;color:#fff}
.rk-dyno-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 20px;border-bottom:1px solid var(--rk-ink3);flex-wrap:wrap}
.rk-dyno-car{font-family:var(--rk-disp);font-weight:800;font-size:17px;letter-spacing:-.02em;color:#fff}
.rk-dyno-meta{font-size:12px;color:var(--rk-slate-l);letter-spacing:.03em;
  text-transform:uppercase;font-weight:600;margin-top:2px}
.rk-dyno-body{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.rk-figs{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px;
  border-right:1px solid var(--rk-ink3);align-content:start}
.rk-fig{background:var(--rk-ink-fig);border:1px solid var(--rk-ink3);border-radius:var(--rk-r-sm);padding:14px}
.rk-fig .l{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--rk-slate-l);font-weight:700;margin-bottom:6px}
.rk-fig .v{font-family:var(--rk-disp);font-weight:800;font-size:30px;letter-spacing:-.038em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.rk-fig .v i{font-style:normal;font-size:14px;font-weight:700;color:var(--rk-slate-l);margin-left:3px}
.rk-fig-tuned{background:var(--rk-tuned);border-color:var(--rk-tuned-line)}
.rk-fig-tuned .v{color:var(--rk-blue-l)}
.rk-gains{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:18px;
  background:var(--rk-tuned);border:1px solid var(--rk-tuned-line);border-radius:var(--rk-r-sm);padding:12px}
.rk-gain{text-align:center}
.rk-gain .g{font-family:var(--rk-disp);font-weight:800;font-size:20px;letter-spacing:-.025em;
  color:var(--rk-blue-l);line-height:1.1;font-variant-numeric:tabular-nums}
.rk-gain .t{font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--rk-slate-l);font-weight:700;margin-top:3px}
.rk-gain-sep{width:1px;height:28px;background:var(--rk-tuned-line)}
.rk-chart{padding:16px 20px}
.rk-chart svg{width:100%;height:auto;display:block;overflow:visible}
.rk-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rk-slate-l)}
.rk-legend span{display:inline-flex;align-items:center;gap:7px}
.rk-legend i{width:14px;height:3px;border-radius:2px;display:inline-block;font-style:normal}
.rk-dyno-foot{border-top:1px solid var(--rk-ink3);padding:16px 20px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:820px){
  .rk-dyno-body{grid-template-columns:1fr}
  .rk-figs{border-right:0;border-bottom:1px solid var(--rk-ink3)}
  .rk-fig .v{font-size:26px}
}
/* The readout as a framed card in a hero. */
.rk-readout{background:var(--rk-ink2);border:1px solid var(--rk-ink3);border-radius:var(--rk-r-lg);
  overflow:hidden;box-shadow:var(--rk-sh-3)}
.rk-readout .cap{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 18px;border-bottom:1px solid var(--rk-ink3);background:rgba(255,255,255,.02)}
.rk-readout .cap .t{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--rk-slate-l)}
.rk-readout .rk-dyno{background:transparent;border-radius:0}
.rk-readout .rk-figs{border-right:0;border-bottom:1px solid var(--rk-ink3);
  grid-template-columns:1fr 1fr;padding:18px}
.rk-readout .rk-dyno-body{grid-template-columns:1fr}
.rk-readout .rk-chart{padding:14px 18px 18px}

/* ==========================================================================
   Page patterns shared by the service pages
   ========================================================================== */
/* Service cards (the "three jobs" grid). The one we most want pressed gets a fill. */
.rk-svc{display:flex;flex-direction:column;gap:12px;height:100%}
.rk-svc h3{margin:0}
.rk-svc p{color:var(--rk-slate);font-size:14.5px;margin:0}
.rk-svc .go{margin-top:auto}
.rk-svc-hot{background:var(--rk-mist2);border-color:var(--rk-line2)}
.rk-svc-hot .go{color:var(--rk-blue-d)}

/* Numbered steps. */
.rk-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rk-steps-3{grid-template-columns:repeat(3,1fr)}
.rk-step .n{width:34px;height:34px;border-radius:50%;background:var(--rk-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--rk-disp);
  font-weight:800;font-size:15px;margin-bottom:12px}
.rk-step h3,.rk-step h4{margin:0 0 5px;font-size:17px}
.rk-step p{font-size:14px;color:var(--rk-slate);margin:0}
.rk-sec-dark .rk-step .n{background:var(--rk-blue-l);color:#07101C}
.rk-sec-dark .rk-step p{color:var(--rk-slate-l)}

/* An engineer. */
.rk-eng{display:flex;gap:14px;align-items:flex-start}
.rk-eng .av{width:54px;height:54px;border-radius:50%;flex:0 0 54px;background:var(--rk-blue);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--rk-disp);font-weight:800;font-size:17px;letter-spacing:-.02em;overflow:hidden}
.rk-eng .av img{width:100%;height:100%;object-fit:cover}
.rk-eng .nm{font-family:var(--rk-disp);font-weight:800;font-size:16px;letter-spacing:-.015em}
.rk-eng .pl{font-size:13px;color:var(--rk-slate);margin-bottom:6px}

/* Backed by JFA. */
.rk-backed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center}
.rk-backed .figs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding:22px;background:var(--rk-paper);border:1px solid var(--rk-line);border-radius:var(--rk-r)}

/* FAQ. Native details, no library. */
.rk-faq details{border-bottom:1px solid var(--rk-line);padding:4px 0}
.rk-faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-family:var(--rk-disp);font-weight:700;font-size:17px;letter-spacing:-.015em;line-height:1.3}
.rk-faq summary::-webkit-details-marker{display:none}
.rk-faq summary:after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--rk-slate);border-bottom:2px solid var(--rk-slate);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.rk-faq details[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.rk-faq .a{padding:0 0 18px;color:var(--rk-slate);font-size:15px;max-width:68ch}
.rk-faq .a p{margin-bottom:.8em}

/* ---- Two doors. The choice a warning-light page opens with: fix it, or switch it off. ----
   Equal weight, different fills. The road-legal door is the one we recommend and it says so;
   the other is not hidden, because hiding it is how the customer books a repair they did not
   want and cancels on the driveway. */
.rk-doors{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rk-door{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--rk-r);
  border:1px solid var(--rk-line);background:var(--rk-paper)}
.rk-door .who{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--rk-slate)}
.rk-door h3{margin:0}
.rk-door p{color:var(--rk-slate);font-size:15px;margin:0}
.rk-door .rk-btn{align-self:flex-start;margin-top:8px}
.rk-door-rec{background:var(--rk-mist2);border-color:var(--rk-line2)}
.rk-sec-dark .rk-door{background:var(--rk-ink2);border-color:var(--rk-ink3)}
.rk-sec-dark .rk-door p,.rk-sec-dark .rk-door .who{color:var(--rk-slate-l)}
.rk-sec-dark .rk-door-rec{background:var(--rk-tuned);border-color:var(--rk-tuned-line)}

/* ---- The warning lamp. Amber here MEANS the lamp; it is the one place it is allowed. ---- */
.rk-lamp{display:flex;gap:16px;align-items:flex-start}
.rk-lamp .ic{width:52px;height:52px;flex:0 0 52px;border-radius:var(--rk-r-sm);
  background:var(--rk-ink);display:flex;align-items:center;justify-content:center}
.rk-lamp .ic svg{width:30px;height:30px;fill:var(--rk-warn)}
.rk-lamp .ic-red svg{fill:#FF3B30}
.rk-lamp .ic-blue svg{fill:var(--rk-blue-l)}
.rk-lamp h3,.rk-lamp h4{margin:0 0 4px;font-size:17px}
.rk-lamp p{font-size:14.5px;color:var(--rk-slate);margin:0}
.rk-lamp .msg{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--rk-text);
  background:var(--rk-mist);border:1px solid var(--rk-line);border-radius:6px;padding:5px 10px}
.rk-sec-dark .rk-lamp .ic{background:#000}
.rk-sec-dark .rk-lamp p{color:var(--rk-slate-l)}
.rk-sec-dark .rk-lamp .msg{background:var(--rk-ink2);border-color:var(--rk-ink3);color:var(--rk-on-dark)}

/* ---- A countdown, as a three-stage rail. ---- */
.rk-count{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rk-count .st{padding:20px;border:1px solid var(--rk-line);border-radius:var(--rk-r);background:var(--rk-paper)}
.rk-count .mi{font-family:var(--rk-disp);font-weight:800;font-size:28px;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--rk-text)}
.rk-count .mi small{font-size:13px;font-weight:700;letter-spacing:0;margin-left:4px;color:var(--rk-slate)}
.rk-count .lb{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:8px 0 6px;
  display:inline-flex;align-items:center;gap:7px}
.rk-count .lb:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rk-slate)}
.rk-count .lb-warn:before{background:var(--rk-warn)}
.rk-count .lb-bad:before{background:#FF3B30}
.rk-count p{font-size:14px;color:var(--rk-slate);margin:0}

/* ---- A checklist of faults, two columns. ---- */
.rk-faults{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.rk-faults li{display:flex;gap:10px;align-items:flex-start;font-size:15px;padding:10px 0;
  border-bottom:1px solid var(--rk-line)}
.rk-faults li svg{width:16px;height:16px;flex:0 0 16px;fill:var(--rk-blue);margin-top:4px}
.rk-faults li b{color:var(--rk-text);font-weight:700}
.rk-faults li span{color:var(--rk-slate)}

/* ---- A definition strip: what it is, in two or three tiles. ---- */
.rk-defs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rk-def{padding:22px;border:1px solid var(--rk-line);border-radius:var(--rk-r);background:var(--rk-paper)}
.rk-def .k{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--rk-blue);margin-bottom:8px}
.rk-def p{font-size:14.5px;color:var(--rk-slate);margin:0}

/* ---- The legal box. Quiet, complete, not hidden. ---- */
.rk-legal{border:1px solid var(--rk-line);border-radius:var(--rk-r);padding:26px 28px;background:var(--rk-paper)}
.rk-legal h2,.rk-legal h3{font-size:19px;margin-bottom:10px}
.rk-legal p,.rk-legal li{font-size:14.5px;color:var(--rk-slate)}
.rk-legal ol{padding-left:1.25em}
.rk-legal li{margin-bottom:.5em}

/* ---- Make list, compact. ---- */
.rk-makes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 24px;list-style:none;margin:0;padding:0}
.rk-makes li{font-size:14.5px;color:var(--rk-slate);padding:7px 0;border-bottom:1px solid var(--rk-line)}
.rk-makes li b{color:var(--rk-text);font-weight:700}

/* ---- A framed photograph with a caption. ---- */
.rk-photo{margin:0;border-radius:var(--rk-r-lg);overflow:hidden;border:1px solid var(--rk-line);background:var(--rk-ink)}
.rk .rk-photo img{width:100%;height:auto;display:block}
.rk-photo figcaption{padding:10px 14px;font-size:13px;color:var(--rk-slate);background:var(--rk-paper);border-top:1px solid var(--rk-line)}
.rk-sec-dark .rk-photo{border-color:var(--rk-ink3)}
.rk-sec-dark .rk-photo figcaption{background:var(--rk-ink2);border-color:var(--rk-ink3);color:var(--rk-slate-l)}

/* ---- Sibling links at the foot of a service page. The whole card is the link. ---- */
.rk-sibs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rk .rk-sib{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--rk-line);
  border-radius:var(--rk-r);background:var(--rk-paper);color:var(--rk-text);transition:border-color .15s ease}
.rk .rk-sib:hover{border-color:var(--rk-text);color:var(--rk-text)}
.rk .rk-sib .go{color:var(--rk-blue)}
.rk .rk-sec-dark .rk-sib{background:var(--rk-ink2);border-color:var(--rk-ink3);color:var(--rk-on-dark)}
.rk .rk-sec-dark .rk-sib:hover{border-color:var(--rk-slate-l)}
.rk .rk-sec-dark .rk-sib .k,.rk .rk-sec-dark .rk-sib p{color:var(--rk-slate-l)}
.rk .rk-sec-dark .rk-sib h3{color:#fff}
.rk .rk-sec-dark .rk-sib .go{color:var(--rk-blue-l)}
.rk-sib .k{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--rk-slate)}
.rk-sib h3{font-size:17px;margin:0}
.rk-sib p{font-size:14px;color:var(--rk-slate);margin:0}
.rk-sib .go{margin-top:auto;padding-top:6px}

/* ==========================================================================
   The enquiry form. RampDesk's saved markup, which we do not control.
   ☠️ rmuk-rd-forms.php styles the same form site-wide with !important on
      nearly every line and the OLD palette (#0068DF, cool greys, a pill
      submit), printed inline after this stylesheet. So every rule here
      carries the form's own id prefix for specificity and !important to
      match. Ugly, and the only way that wins without touching a file the
      live pages still depend on. When the old pages are gone, that file goes
      and these lose their !important.
   ========================================================================== */
.rk .rk-form form[id^="rd-progressive-form-"]{display:flex!important;flex-direction:column;gap:6px;max-width:none!important}
.rk .rk-form form[id^="rd-progressive-form-"] label{font-family:var(--rk-sans)!important;font-size:13px!important;
  font-weight:700!important;color:var(--rk-text)!important;margin:8px 0 0!important;display:block}
.rk .rk-form form[id^="rd-progressive-form-"] label:first-child{margin-top:0!important}
.rk .rk-form form[id^="rd-progressive-form-"] input[type=text],
.rk .rk-form form[id^="rd-progressive-form-"] input[type=tel],
.rk .rk-form form[id^="rd-progressive-form-"] input[type=email],
.rk .rk-form form[id^="rd-progressive-form-"] textarea{
  width:100%!important;min-height:48px!important;height:48px;border:1.5px solid var(--rk-line)!important;
  border-radius:var(--rk-r-sm)!important;padding:0 14px!important;font:inherit!important;font-size:15px!important;
  color:var(--rk-text)!important;background:#fff!important;box-shadow:none!important;outline:none!important}
.rk .rk-form form[id^="rd-progressive-form-"] textarea{height:auto;min-height:96px!important;padding:12px 14px!important;resize:vertical}
.rk .rk-form form[id^="rd-progressive-form-"] input:focus,
.rk .rk-form form[id^="rd-progressive-form-"] textarea:focus{border-color:var(--rk-blue)!important;box-shadow:none!important}
.rk .rk-form form[id^="rd-progressive-form-"] input::placeholder,
.rk .rk-form form[id^="rd-progressive-form-"] textarea::placeholder{color:#A39F97}
.rk .rk-form form[id^="rd-progressive-form-"] div[data-rd-field-type="multi_checkbox"]{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:4px 0 6px}
.rk .rk-form form[id^="rd-progressive-form-"] div[data-rd-field-type="multi_checkbox"] label{
  margin:0!important;display:flex!important;align-items:center!important;gap:9px!important;
  font-size:13.5px!important;font-weight:600!important;color:var(--rk-slate)!important;
  border:1.5px solid var(--rk-line)!important;border-radius:var(--rk-r-sm)!important;
  padding:9px 12px!important;cursor:pointer;min-height:44px;background:#fff}
.rk .rk-form form[id^="rd-progressive-form-"] div[data-rd-field-type="multi_checkbox"] label:hover{border-color:var(--rk-text)!important}
.rk .rk-form form[id^="rd-progressive-form-"] div[data-rd-field-type="multi_checkbox"] label:has(:checked){
  border-color:var(--rk-blue)!important;color:var(--rk-text)!important;background:var(--rk-blue-t)}
.rk .rk-form form[id^="rd-progressive-form-"] input[type=checkbox]{width:16px!important;height:16px!important;margin:0!important;
  accent-color:var(--rk-blue);flex:0 0 16px}
.rk .rk-form form[id^="rd-progressive-form-"] button[type=submit]{display:inline-flex!important;align-items:center;justify-content:center;
  width:100%!important;min-height:52px!important;height:52px;margin:10px 0 0!important;padding:0 24px!important;border:0!important;
  border-radius:var(--rk-r-sm)!important;background:var(--rk-blue)!important;color:#fff!important;
  font-family:var(--rk-sans)!important;font-size:15.5px!important;font-weight:700!important;cursor:pointer;text-transform:none;filter:none!important}
.rk .rk-form form[id^="rd-progressive-form-"] button[type=submit]:hover{background:var(--rk-blue-d)!important}
@media (max-width:560px){.rk .rk-form form[id^="rd-progressive-form-"] div[data-rd-field-type="multi_checkbox"]{grid-template-columns:1fr!important}}

/* ==========================================================================
   Footer
   ========================================================================== */
.rk-foot{background:var(--rk-ink);color:var(--rk-slate-l);padding:46px 0 30px;font-size:14px}
.rk-foot a{color:var(--rk-slate-l)}
.rk-foot a:hover{color:#fff}
.rk-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;margin-bottom:30px}
/* Column labels are NOT headings. "Services" and "Company" in a footer have no place in the
   document outline that Google and screen readers walk; they are labels, so they are <p>. */
.rk-foot .k{color:#fff;font-size:13px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 12px;font-weight:700}
.rk-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.rk-foot .base{border-top:1px solid var(--rk-ink3);padding-top:18px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px}
.rk-foot .brand img{height:30px;width:auto;margin-bottom:14px}

/* Sticky call bar, phones only. A bar, not a floating circle. */
.rk-callbar{display:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px){
  .rk-hero-in{grid-template-columns:1fr;gap:30px}
  .rk-backed{grid-template-columns:1fr;gap:22px}
  .rk-steps,.rk-steps-3{grid-template-columns:1fr 1fr}
  .rk-foot .cols{grid-template-columns:1fr 1fr}
  .rk-defs,.rk-sibs,.rk-count{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .rk-nav,.rk-mast .rk-rating{display:none}
  .rk .rk-burger{display:flex}
  /* On desktop the nav (flex:1) pushes the right group over. With the nav hidden nothing does,
     so the button and burger sat next to the logo. The right group takes the space itself, so
     the burger is on the far right edge with the button beside it. */
  .rk-mast-in{gap:12px;height:66px}
  .rk-mast-r{margin-left:auto;gap:8px}
  .rk .rk-mast-r .rk-btn-sm{height:40px;padding:0 14px;font-size:13.5px}
  .rk .rk-burger{margin-right:-10px}
  .rk-strip .row{grid-template-columns:1fr 1fr;gap:18px}
  .rk-sec{padding:44px 0}
  .rk-hero{padding:40px 0 44px}
  .rk-makes{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .rk-callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:850;
    background:var(--rk-ink);border-top:1px solid var(--rk-ink3);padding:10px 14px;gap:10px}
  .rk-callbar .rk-btn{flex:1;height:48px;font-size:15px}
  body.rk{padding-bottom:72px}
  .rk-doors{grid-template-columns:1fr}
  .rk-faults{grid-template-columns:1fr}
}
@media (max-width:560px){
  .rk-steps,.rk-steps-3{grid-template-columns:1fr}
  .rk-foot .cols{grid-template-columns:1fr}
  .rk-defs,.rk-sibs,.rk-count{grid-template-columns:1fr}
  .rk-makes{grid-template-columns:1fr}
  .rk-readout .rk-figs{grid-template-columns:1fr 1fr;padding:14px;gap:10px}
  .rk-readout .cap .rk-badge{display:none}
  .rk-readout .cap .t{font-size:11px;letter-spacing:.08em}
  .rk-hero .under{gap:10px}
  .rk-hero .under .note{width:100%}
  .rk-legal{padding:20px}
}

/* ==========================================================================
   Reveal on scroll. .rk-js is set on <html> FIRST, so if the script never runs
   nothing is ever hidden. Anything still hidden after 3s is shown regardless.
   ========================================================================== */
.rk-js .rk-rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.rk-js .rk-rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rk-js .rk-rv{opacity:1!important;transform:none!important;transition:none!important}
  .rk *{animation-duration:.001ms!important;animation-iteration-count:1!important;
        transition-duration:.001ms!important}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.rk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rk-sr:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;padding:10px 14px;margin:0;
  clip:auto;background:#fff;color:var(--rk-text);z-index:2000;border-radius:6px;font-weight:700}
.rk :focus-visible{outline:3px solid var(--rk-blue-l);outline-offset:2px;border-radius:4px}