/* Nav — design node 1:512 (x 32, y 24, w 1536, h 56 inside the 1600 frame).
   Re-specced 2026-08-26: page inset 40 -> 32, a redrawn wordmark, padded
   links in place of a gap, and a 16 gap before the CTA.

   Fixed page chrome, positioned from the VIEWPORT, not the hero stage. The
   stage is a centred fixed-width box; the nav deliberately is not, because
   chrome that drifts toward the middle on a wide monitor reads as broken.
   It scales on --u with px floors so it stays tappable on phones. */

/* ---- legibility over anything ----
   The nav is fixed over a stack of alternating panels, so neither trick alone
   is enough:

     the FROST separates it from busy artwork and from content it overlaps —
       but a blur only removes detail, it cannot create contrast, so blurred
       white is still white;
     the INK FLIP is what carries the white services panel, where frost at a
       deliberately-subtle tint would leave white type just as invisible.

   Both hang off three custom properties, driven by two classes that js/nav.js
   toggles. `mix-blend-mode: difference` would self-invert against any backdrop
   and needs no JS at all, but white over the #00bf00 hero computes to magenta
   and over the Datascan blue to orange — right technique, wrong palette. */

.rdk-nav {
  --nav-ink: var(--rdk-white);
  --nav-logo-ink: var(--rdk-white);
  --nav-plate: rgba(0, 20, 7, 0.8);
  /* Spacing, in design units, so js/nav-tuner.js can drive it live.

     Each carries a px floor, because --u is 100vw/1600 and a bare 24u is
     5.6px on a phone — the nav would sit on the very edge. The floor is a
     FRACTION OF THE VALUE rather than a fixed pixel amount, and that matters:
     a fixed floor does not only protect a phone, it also refuses to let
     anyone ask for less than it on any narrow window. The sliders went dead
     at the bottom of their range and the nav could not be brought closer to
     the edge at all.

     The fractions are chosen so today's numbers are unchanged — 24 x 0.667 is
     the 16px the top used to floor at, 32 x 0.625 the 20px for the sides, and
     16 x 0.625 the 10px inside the capsules — but now 0 really is 0.

     Client's tuning pass, 2026-08-27. Reverting is these three numbers and
     nothing else — the previous set was `24 / 32 / 16`, which was node
     1:512's own 24 top and 32 sides. */
  --nav-top: 11;         /* from the top edge of the window */
  --nav-side: 72;        /* from the left and right edges */
  --nav-plate-pad: 16;   /* inside each capsule, around its contents */
  /* How a link that is NOT being hovered reads while its neighbour is. On the
     dark and light surfaces that is the state's own ink at a quarter
     strength; the green surfaces override both (client, 2026-08-26), because
     white at 25% over green goes grey rather than receding. */
  --nav-dim: 0.25;
  --nav-dim-ink: var(--nav-ink);
  /* "Let's talk" hover. Exposed as custom properties so js/nav-tuner.js can
     drive them live without the nav needing a config object or any JS of its
     own — the keyframes below read --cta-shake through var(), which resolves
     against the element being animated. */
  --cta-grow: 1.08;        /* how much bigger the PILL gets */
  --cta-grow-time: 0.2s;
  --cta-shake: 1.9;        /* degrees in the first swing */
  --cta-shake-time: 0.95s;
  position: fixed;
  z-index: 100;
  top: max(calc(var(--nav-top) * 0.667px), calc(var(--nav-top) * var(--u)));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  padding-inline: max(calc(var(--nav-side) * 0.625px),
                      calc(var(--nav-side) * var(--u)));
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Parked off the top edge. -130% clears the nav's own height plus its 24u
   offset, so nothing peeks. No `visibility` needed — fully off-screen is
   already unclickable and unhoverable, and js/nav.js brings it back on
   `focusin` so tabbing to it never lands on something invisible. */
.rdk-nav--hidden {
  transform: translateY(-130%);
}

.rdk-nav > * {
  pointer-events: auto;
}

/* Nodes 39:4179 / 39:4114 / 39:4063 give three surfaces — green, dark,
   light. Green and dark share their ink; only the plate differs. */
.rdk-nav--on-green {
  --nav-plate: rgba(0, 191, 0, 0.8);
}

/* A BLUE SURFACE — the About page's AI-slop panel (client, 2026-09-16: the
   plate "should inherit the color of the section"). Like green over the
   green hero, the plate is the SURFACE'S OWN colour, so it is invisible at
   rest and shows only when a screenshot or a thumbs-down passes behind it.
   That is the design, not a bug.
   THE INK STAYS WHITE AND IS 2.82:1 HERE, a shade under the 3:1 WCAG asks
   of the 20px bold links. Flagged and built as asked — it is the same trade
   the green hero already makes at 2.48:1, and the alternative (dark ink)
   loses the "inherits the section" effect entirely. */
.rdk-nav--on-blue {
  --nav-plate: rgba(52, 159, 247, 0.8);
}

/* The dimmed state on green is a COLOUR, not just a weaker white (client,
   2026-08-26): Redonk Lime at 70%. White at 25% over green goes grey rather
   than receding. Both surfaces that are green get it — the hero drops its
   plate but is still green underneath. */
.rdk-nav--on-green,
.rdk-nav--on-hero {
  --nav-dim: 0.7;
  --nav-dim-ink: var(--rdk-lime);
}

/* THE LANDING VIEW OF EVERY PAGE DROPS THE PLATE (client, 2026-09-01: no
   background shapes behind the nav or logo at the top of any page). Everywhere
   else keeps the frosted capsule — this is the landing view only, and scrolling
   away brings it back.

   It hangs off `--at-top`, NOT `--on-hero`, because the two are different
   questions. `--on-hero` also carries the lime link dim, which is right over a
   green hero and wrong over a project page's brand-coloured one; the plate
   drop applies to both.

   `--nav-plate: transparent` alone would not do this: `backdrop-filter: blur()`
   produces the frosted-glass look on its own, independent of the background
   colour sitting under it, so the filter itself has to come off too. */
.rdk-nav--at-top .rdk-nav__logo,
.rdk-nav--at-top .rdk-nav__right {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Note the links take #001407 here, not the darker #002300, and the wordmark
   goes GREEN: it is a logo, not body text. */
.rdk-nav--on-light {
  --nav-ink: var(--rdk-black-green);
  --nav-logo-ink: var(--rdk-green);
  --nav-plate: rgba(255, 255, 255, 0.8);
}

/* Two capsules — one behind the wordmark, one behind the links and CTA. Each
   is a DEFINED plate: the surface colour at 80% over a 15px backdrop blur,
   fully rounded. Figma bakes this into the logo asset as a pill path plus a
   foreignObject backdrop-filter; here it is CSS, so all three states come off
   one custom property.

   The plate is the outer box now, so the wordmark sits inset by its padding
   rather than flush to the page's 32u — which is what the design shows. */
.rdk-nav__logo,
.rdk-nav__right {
  border-radius: 999px;
  background: var(--nav-plate);
  /* -webkit- prefix is still required in Safari. */
  -webkit-backdrop-filter: blur(calc(15 * var(--u)));
  backdrop-filter: blur(calc(15 * var(--u)));
  transition: background-color 0.35s ease;
}

.rdk-nav__logo {
  display: block;
  flex: none;
  /* 152 of wordmark + 16 all round = the 183.777 x 62.635 Figma gives the
     logo plate. px floors because --u is 100vw/1600 and a bare 16u is 3.75px
     at 375, which would shrink-wrap the wordmark. */
  padding: max(calc(var(--nav-plate-pad) * 0.625px),
               calc(var(--nav-plate-pad) * var(--u)));
  color: var(--nav-logo-ink);
  transition: color 0.35s ease, background-color 0.35s ease;
}

/* Inlined SVG, so the wordmark takes the ink through currentColor.

   The client redrew this at nav size for legibility (node 153:4911). Figma
   gives the instance a 152 x 30 box holding art whose own viewBox is
   152 x 30.6353 — the reference code expresses that as a ~1% bleed above and
   below. Sized on WIDTH with the height left to the viewBox, so the art is
   drawn at its true proportion rather than squeezed into the 30; the 0.6u
   difference only reaches the plate's height. Figma's export also carries
   `preserveAspectRatio="none"`, which is dropped here — kept, it would let the
   wordmark distort the moment its box was not exactly 152 x 30.6353. */
.rdk-nav__wordmark {
  display: block;
  width: max(112px, calc(152 * var(--u)));
  height: auto;
  /* The O hops above the viewBox on hover; an <svg> clips at its box by
     default, which would slice the top off it mid-jump. */
  overflow: visible;
}

/* THE O HOPS ON HOVER (client, 2026-09-24). The wordmark is node 1021:88210,
   six separate letters where the old art fused D, O and N into one outline;
   D and N are whole letters underneath, so nothing opens up when the O
   leaves. Measured pixel-identical to the old art at rest.
   The O is the LAST path so it is drawn over its neighbours in the air.
   Lengths inside an SVG are its user units — the viewBox is 30.6 tall, so
   a 4-unit hop is ~13% of the wordmark's height at any size. It stretches
   on the way up and squashes on landing, pivoting at its base, which is
   what reads as a hop rather than a slide. An animation restarts only when
   its name is applied afresh, so it plays once per hover. */
.rdk-nav__wordmark-o {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@media (hover: hover) and (pointer: fine) {
  .rdk-nav__logo:hover .rdk-nav__wordmark-o,
  .rdk-nav__logo:focus-visible .rdk-nav__wordmark-o {
    animation: rdk-nav-o-hop 0.5s;
  }
}

/* Each segment carries its own easing, the way a real hop moves: a quick
   crouch, decelerating up, accelerating down, then settling from the squash. */
@keyframes rdk-nav-o-hop {
  0%   { transform: translateY(0) scale(1, 1);        animation-timing-function: ease-out; }
  15%  { transform: translateY(0) scale(1.08, 0.9);   animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  45%  { transform: translateY(-4px) scale(0.95, 1.06); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); }
  72%  { transform: translateY(0) scale(1.08, 0.92);  animation-timing-function: ease-out; }
  100% { transform: translateY(0) scale(1, 1); }
}

/* 16 all round now. It used to carry 32 of lead padding to hold the first
   link off the plate's edge; the links carry their own 16 since the re-spec,
   so 16 + 16 comes to the same 32 and the extra would double it. */
.rdk-nav__right {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: max(calc(var(--nav-plate-pad) * 0.625px),
               calc(var(--nav-plate-pad) * var(--u)));
}

/* No gap: node 1:512 butts the five link boxes together and spaces them with
   16 of padding each, so the space between two labels is the designed 32 and
   the padding doubles as the hover target. */
.rdk-nav__links {
  display: flex;
  align-items: center;
}

/* Figma's text boxes are 24 on 20px type — 1.2, expressed as a ratio so it
   follows the font-size's px floor on small screens instead of being pinned
   to --u and going out of step with it. `normal` leading measures differently
   in Redonk Avant Garde and pushed the link boxes past their designed 40. */
.rdk-nav__link,
.rdk-nav__cta,
.rdk-nav__menu {
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: max(15px, calc(20 * var(--u)));
  line-height: 1.2;
  white-space: nowrap;
  color: var(--nav-ink);
  transition: color 0.35s ease, background-color 0.35s ease,
              border-color 0.35s ease, opacity 0.3s ease;
}

/* 8/16 padding on a 24 line box gives the designed 40 x (48..112) link. The
   radius is Figma's; nothing fills it today, but it is what a hover state
   would paint and it costs nothing to carry. */
.rdk-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: 99px;
}

/* Hovering the group drops everything back and lifts the one under the
   pointer. Written as "dim the group, undim the target" rather than a rule
   per state: moving between two links fires the old link's mouseleave before
   the new one's mouseenter, so anything that restored on leave would flash
   the whole row back to full between every pair. Same lesson as the services
   row dim, and here CSS alone can express it.

   Both channels are transitioned (see the shared rule above), so a link fades
   between the two treatments rather than switching — which matters more on
   green, where it is a colour change and not only an opacity one. */
.rdk-nav__links:hover .rdk-nav__link {
  color: var(--nav-dim-ink);
  opacity: var(--nav-dim);
}

.rdk-nav__links .rdk-nav__link:hover,
.rdk-nav__links .rdk-nav__link:focus-visible {
  color: var(--nav-ink);
  opacity: 1;
}

.rdk-nav__actions {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
}

/* Both pills get an EXPLICIT height. Letting padding + line-height compute
   the box overshoots the designed 56 — Figma's frame height assumes an inside
   stroke and a tight text box. Same trap as v1's hero CTA. */
.rdk-nav__cta,
.rdk-nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: max(44px, calc(56 * var(--u)));
  border-radius: calc(52 * var(--u));
  padding-inline: calc(32 * var(--u));
}

/* "Let's talk" is a FILLED pill now (node 1:512), where it used to be an
   outline and Menu carried the fill.

   Figma exports the fill as white + `mix-blend-mode: overlay`, but its own
   render of the frame shows flat white with green text (sampled #ffffff /
   #00bf00). Overlay over #00bf00 would compute to #00ff00, which is not what
   the design shows — so it is a plain fill. Same trap the old Menu pill had. */
.rdk-nav__cta,
.rdk-nav__menu {
  color: var(--rdk-green);
  background: var(--rdk-white);
}

/* Hover: the PILL grows and shakes. The type does neither — it does not grow
   with it and it does not move (client, 2026-08-26).

   That is what the counter-transforms on the label are for. Whatever is done
   to the <a> is done to everything inside it, so the span is given the exact
   inverse: `1 / --cta-grow` against the growth, and a mirrored copy of the
   shake keyframes against the rotation. The cancellation is exact rather than
   approximate, for two reasons worth knowing before touching it:

     - the pill is a centred flex box with one child, so the span's centre IS
       the pill's centre — the pivot does not move, so undoing the ANGLE is
       enough to undo the motion;
     - a uniform scale commutes with a rotation, so R(t)S(g) . R(-t)S(1/g)
       composes to the identity whichever order CSS applies them in.

   Move the label off centre and neither holds any more: it would then swing
   around the pill's pivot however well its own angle was corrected.

   The alternative to all of this — growing the PADDING instead of scaling —
   would be a layout change, and this pill sits in a flex row inside a plate
   that would resize with it.

   `scale` and `rotate` are separate standalone properties, so the transition
   owns the growth while the keyframes own the shake without either touching
   the other. Nothing here is `transform`, so they compose cleanly.

   Deliberately CSS and not GSAP: js/nav.js has no GSAP by design, so the nav
   keeps working with a suspended ticker, and reduced motion is handled in the
   stylesheet below.

   The keyframes decay — each swing about half the last — which is what makes
   it read as a shudder settling rather than a loop that has been cut off.
   They are written as multiples of --cta-shake so one number moves all of
   them and keeps that decay intact. */
.rdk-nav__cta {
  scale: 1;
  transition: color 0.35s ease, background-color 0.35s ease,
              scale var(--cta-grow-time) ease;
}

.rdk-nav__cta > span {
  display: block;
  scale: 1;
  transition: scale var(--cta-grow-time) ease;
}

/* `.is-demo` is how js/nav-tuner.js replays this without a pointer. */
.rdk-nav__cta:hover,
.rdk-nav__cta:focus-visible,
.rdk-nav__cta.is-demo {
  scale: var(--cta-grow);
  animation: rdk-nav-wiggle var(--cta-shake-time) ease-out;
}

/* The mirror of the pill's shake — same duration and easing, so the two stay
   frame-locked without anything having to synchronise them. */
.rdk-nav__cta:hover > span,
.rdk-nav__cta:focus-visible > span,
.rdk-nav__cta.is-demo > span {
  scale: calc(1 / var(--cta-grow));
  animation: rdk-nav-wiggle-text var(--cta-shake-time) ease-out;
}

@keyframes rdk-nav-wiggle {
  0%   { rotate: 0deg; }
  14%  { rotate: calc(var(--cta-shake) * -1deg); }
  30%  { rotate: calc(var(--cta-shake) * 0.75deg); }
  46%  { rotate: calc(var(--cta-shake) * -0.469deg); }
  62%  { rotate: calc(var(--cta-shake) * 0.281deg); }
  80%  { rotate: calc(var(--cta-shake) * -0.125deg); }
  100% { rotate: 0deg; }
}

/* Exactly the above, negated. Keep the two in step — every keyframe here has
   to mirror its opposite number, or the label drifts out of true partway
   through the swing rather than staying still. */
@keyframes rdk-nav-wiggle-text {
  0%   { rotate: 0deg; }
  14%  { rotate: calc(var(--cta-shake) * 1deg); }
  30%  { rotate: calc(var(--cta-shake) * -0.75deg); }
  46%  { rotate: calc(var(--cta-shake) * 0.469deg); }
  62%  { rotate: calc(var(--cta-shake) * -0.281deg); }
  80%  { rotate: calc(var(--cta-shake) * 0.125deg); }
  100% { rotate: 0deg; }
}

/* A filled pill cannot just take the ink — a white pill on the white panel
   disappears whatever colour its label is. It swaps fill and label instead,
   so it stays the same green-and-white button on either surface. */
.rdk-nav--on-light .rdk-nav__cta,
.rdk-nav--on-light .rdk-nav__menu {
  color: var(--rdk-white);
  background: var(--rdk-green);
}

.rdk-nav__menu {
  width: calc(87 * var(--u));
  min-width: 72px;
  padding-inline: 0;
  /* Node 1:512 has no Menu button — that frame is desktop-only, and below 768
     the links are hidden, so it stays as the only way into them. */
  display: none;
}

/* ---------- Menu <-> close, one control ----------
   Node 249:32853 puts a 52px lime disc with a cross where the Menu pill sits,
   so the pill BECOMES it rather than being covered by a second button. Both
   faces live in the button and crossfade; the menu overlay is layered under
   the nav so this is what the reader actually sees on top of it.

   Kept in CSS, like the CTA's hover: js/nav.js uses no GSAP and the nav has
   to survive a suspended ticker. js/menu.js only toggles the class. */
.rdk-nav__menu {
  position: relative;
  /* Both faces stack on the same spot; the button centres them. */
  overflow: hidden;
  transition: color 0.35s ease, background-color 0.35s ease,
              width 0.42s cubic-bezier(0.34, 1.3, 0.64, 1),
              height 0.42s cubic-bezier(0.34, 1.3, 0.64, 1),
              translate 0.42s cubic-bezier(0.34, 1.3, 0.64, 1),
              padding 0.42s cubic-bezier(0.34, 1.3, 0.64, 1),
              opacity 0.3s ease;
}

.rdk-nav__menu-label,
.rdk-nav__menu-x {
  transition: opacity 0.24s ease, rotate 0.42s cubic-bezier(0.34, 1.3, 0.64, 1),
              scale 0.3s ease;
}

/* The cross is absolutely placed so it does not widen the pill in its closed
   state — the pill's width is the label's, and the design's 86.34 depends on
   it. `rotate`/`scale` and not `transform`: nothing touches this element's
   transform, but keeping to the standalone properties is the project's rule
   and leaves `transform` free if anything ever does. */
.rdk-nav__menu-x {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  opacity: 0;
  rotate: -90deg;
  scale: 0.4;
}

/* The visible label is the closed face; this one is what a screen reader
   reads in BOTH states, so the accessible name does not change out from under
   anyone when the button becomes a close control. js/menu.js swaps its text. */
.rdk-nav__menu-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rdk-nav--menu-open .rdk-nav__menu {
  /* Node 249:33097: 52 square, radius 37 — anything over 26 is a full circle,
     and 37 is what the frame carries. */
  width: 52px;
  height: 52px;
  padding-inline: 0;
  border-radius: 37px;
  background: var(--rdk-lime);
  color: var(--rdk-dark);
}

.rdk-nav--menu-open .rdk-nav__menu-label {
  opacity: 0;
  scale: 0.6;
}

.rdk-nav--menu-open .rdk-nav__menu-x {
  opacity: 1;
  rotate: 0deg;
  scale: 1;
}

/* While the menu is open the nav is over the overlay's green, whatever the
   observers think is under it — they cannot see the overlay, which is a
   sibling that covers the page rather than a section that scrolls past. Force
   the green treatment, and force the bar back on screen: it is the only way
   to close the menu, so it may not be parked off the top edge. */
.rdk-nav--menu-open,
.rdk-nav--menu-open.rdk-nav--hidden {
  transform: none;
}

.rdk-nav--menu-open {
  --nav-ink: var(--rdk-white);
  --nav-logo-ink: var(--rdk-white);
}

@media (max-width: 767px) {
  .rdk-nav__links,
  .rdk-nav__cta {
    display: none;
  }

  .rdk-nav__menu {
    display: flex;
  }

  /* With the links and CTA gone the right group is just the Menu button, and
     Menu is already a solid pill — a plate around it would be a pill inside a
     pill. */
  .rdk-nav__right {
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* ---------- geometry from node 1:1814 (a 390-wide frame) ----------

     Straight px, not `--u` with a floor. The desktop pair is a proportion of
     a 1600 frame and its floors are a fraction of that — at 390 wide
     `--nav-side: 72` resolves to 17.5 and the 0.625 floor then forces it back
     up to 45, which is nearly three times what the phone frame asks for. The
     phone has its own numbers, so it gets them directly.

     Frame: wordmark left 16 / top 20.28 / 121.6 wide (an instance of the
     same `Redonk Logo/Small` component the nav already inlines); Menu pill
     291.66..378, i.e. 12 in from the right, top 12, 86.34 x 40.55. `top: 12`
     puts the row where the pill sits and the flex centring lands the shorter
     wordmark at 20.3, which is the frame's number. */
  .rdk-nav {
    top: 12px;
    padding-inline: 12px;
  }

  /* The frame shows the wordmark bare on the hero green — no capsule. It is
     dropped rather than shrunk because a 6px plate around a 24px wordmark is
     a rim, not a surface, and the ink flip still does the legibility work on
     the light sections. */
  .rdk-nav__logo {
    /* 4 on top of the bar's 12, because the frame is ASYMMETRIC: the wordmark
       sits 16 from the left edge and the Menu pill 12 from the right. The
       bar's own padding has to serve the pill, so the difference lives here. */
    padding: 0 0 0 4px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .rdk-nav__wordmark {
    width: 121.6px;
  }

  /* THE BUTTON IS TAKEN OUT OF FLOW so that growing into the menu's 52px
     close disc cannot resize the nav row. The bar is `align-items: center`,
     so a taller child grows the row DOWNWARD from `top: 12` and re-centres
     everything else in it — measured, the wordmark dropped 20.02 -> 25.75 the
     moment the menu opened, where node 249:32853 holds it at 20 in both
     states. Pinning the group to the closed pill's box and floating the
     button inside it means the morph moves nothing but itself. */
  .rdk-nav__actions {
    position: relative;
    width: 86.34px;
    height: 40.55px;
  }

  .rdk-nav__menu {
    position: absolute;
    right: 0;
    top: 0;
    /* `width: auto` cannot be transitioned to the open state's 52px, and the
       frame's pill is a measured 86.01 anyway — so it is stated, which also
       makes the morph animate instead of jumping. */
    width: 86.34px;
    min-width: 0;
    height: 40.55px;
    padding-inline: 0;
    font-size: 15px;
    border-radius: 37.655px;
  }

  /* Anchored to the pill's RIGHT edge, so the shrink happens leftward and the
     disc stays in the corner rather than drifting inward from the pill's
     centre. That lands it at right 12 / top 12 on its own; node 249:33097
     wants 9 / 9, which is the 3px nudge. */
  .rdk-nav--menu-open .rdk-nav__menu {
    translate: 3px -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rdk-nav,
  .rdk-nav__logo,
  .rdk-nav__right,
  .rdk-nav__link,
  .rdk-nav__cta,
  .rdk-nav__menu {
    transition: none;
  }

  /* A button that jumps and shakes is exactly what this request is asking to
     be spared. The colour states still apply; only the movement goes. */
  .rdk-nav__cta:hover,
  .rdk-nav__cta:focus-visible,
  .rdk-nav__cta.is-demo {
    scale: 1;
    animation: none;
  }

  .rdk-nav__logo .rdk-nav__wordmark-o {
    animation: none !important;
  }

  .rdk-nav__cta:hover > span,
  .rdk-nav__cta:focus-visible > span,
  .rdk-nav__cta.is-demo > span {
    scale: 1;
    animation: none;
  }
}