/* Footer — design node 212:19005 / 212:19006, replacing 114:15418.

   The 2026-08-27 pass tightened it: the CTA band came down 597 -> 565, the
   content block's internal gap 55 -> 40 with a 16 top padding, and all three
   bubbles moved (top -266.1 -> -322.1, left 22 -> 6, bottom right 75.33 ->
   -176.28). Total footer 565 + 102 + 323 = 990.

   Three bands, all Redonk green: a 733u CTA with 96u top corners, a bordered
   links row, and the 323u REDONK band. The old dark ground, the inset
   rounded-all-round CTA panel and the multiply glow are gone.

   It sits in NORMAL FLOW, like every other section. It was briefly built as a
   fixed panel that the page slid up off (lentoagency-style); the client's
   design does not work that way, so that is gone — along with its spacer, its
   z-index balancing act against the sticky hero, and the visibility gate that
   stopped it showing through the intro's corner notches. */

.rdk-footer {
  position: relative;
  z-index: 1;
  /* 144 of page ground between the About section and the CTA band's rounded
     shoulders (client, 2026-08-26). In --u like every other measurement here,
     so it keeps its proportion rather than becoming a huge gap on a phone. */
  margin-top: calc(144 * var(--u));
  /* Transparent, so the CTA band's rounded top corners reveal the page ground
     behind them — the same trick the intro panel uses. Each band paints its
     own green. Putting a background back here fills the corners in. */
  background: none;
  /* The DONK deliberately overhangs the last band; this is what trims him,
     exactly as the frame does. */
  overflow: clip;
}

/* ---------- 1. the CTA band ---------- */

.rdk-footer__cta {
  position: relative;
  height: calc(565 * var(--u));
  background: var(--rdk-green);
  border-radius: calc(96 * var(--u)) calc(96 * var(--u)) 0 0;
  /* Holds the bubbles inside the rounded corners. */
  overflow: clip;
}

/* Three of them, one asset per position — each is Figma's RENDER of its own
   node, so the rotation, the mirroring, the image adjustments AND the frame's
   clip are already baked in. Nothing here re-applies any of that; see the
   image-adjustment rule in CLAUDE.md for why the raw fill is the wrong file. */
.rdk-footer__bubble {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

/* WHOLE bubbles at their real coordinates, most of which are negative — the
   band's `overflow: clip` does the cropping live, so drifting one simply
   reveals more of it.

   These come from group `179:7201`, which the client made for exactly this: a
   Figma export is always sliced at its parent frame's edge, so pulling these
   from the footer itself gave three half-bubbles whose straight edges walked
   inland the moment they moved. A GROUP does not clip, so the same three
   objects export whole. Verified per file: the alpha bounding box sits inside
   the canvas on all four sides, i.e. no silhouette runs to an edge.

   Positions are node 114:15507's, relative to the 1600 x 597 band. The left
   one's `top: calc(50% + 11)` with a -50% translate resolves to a flat 22,
   which is used instead — GSAP owns `transform` on these, and it clears the
   standalone `translate` the moment it takes over. */
.rdk-footer__bubble--left {
  left: calc(-181 * var(--u));
  top: calc(6 * var(--u));
  width: calc(574.997 * var(--u));
  height: calc(574.997 * var(--u));
}

.rdk-footer__bubble--top {
  right: 0;
  top: calc(-322.1 * var(--u));
  width: calc(633.301 * var(--u));
  height: calc(633.301 * var(--u));
}

.rdk-footer__bubble--bottom {
  right: calc(-176.28 * var(--u));
  bottom: calc(-320.87 * var(--u));
  width: calc(588.557 * var(--u));
  height: calc(588.557 * var(--u));
}

/* Dead centre. Node 212:19007 sits at y 86.5 in a 565 band and is 392 tall:
   86.5 + 392/2 is exactly 282.5, the band's own middle — and 86.5 above the
   block equals 86.5 below it, which is what keeps the gap to the links row
   the same as the gap above the heading. */
.rdk-footer__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  /* Figma pads the block 16 at the top rather than centring the text and the
     button on the block's own middle, which is why the box is 392 and not
     376. Node 212:19007. */
  padding-top: calc(16 * var(--u));
  width: calc(706 * var(--u));
}

.rdk-footer__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--u));
  width: 100%;
  text-align: center;
  color: var(--rdk-white);
}

.rdk-footer__heading {
  width: calc(554.449 * var(--u));
  margin: 0;
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(104 * var(--du));
  line-height: 0.94;
  letter-spacing: calc(-5.2 * var(--du));
}

.rdk-footer__blurb {
  width: 100%;
  margin: 0;
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-l);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  opacity: 0.9;
}

/* Redonk LIME, and 4u of border — the old build had 5. */
.rdk-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Node 382:68079: 199 wide with 32 of side padding. Written as a MINIMUM
     plus the padding rather than a fixed width so a page whose slot carries a
     longer label (the About page's "Start a conversation") gets a wider pill
     and every other page measures exactly as before. */
  min-width: calc(199 * var(--u));
  height: calc(80 * var(--u));
  padding: 0 calc(32 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(23 * var(--u));
  line-height: 1.2;  /* was `normal`, pinned 2026-09-21: that resolved to 1.2 from the brand face's own metrics, and the descender fix raises its declared descent. Stated so the fix cannot move this. */
  letter-spacing: calc(-0.23 * var(--u));
  color: var(--rdk-white);
  border: calc(4 * var(--u)) solid var(--rdk-lime);
  border-radius: calc(52 * var(--u));
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Node 14:2693 — the component's own On Green / Secondary / L / Hover: lime
   fill, a 5u border (up from 4) and an INK label. The label was green here,
   which is the one thing the variant does not do. */
.rdk-footer__btn:hover,
.rdk-footer__btn:focus-visible {
  color: var(--rdk-black-green);
  background: var(--rdk-lime);
  border-width: calc(5 * var(--u));
}

/* ---------- 2. the links row ---------- */

.rdk-footer__utility {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(24 * var(--u)) calc(40 * var(--u));
  background: var(--rdk-green);
  border-top: calc(2 * var(--u)) solid rgba(104, 243, 24, 0.2);
}

.rdk-footer__social {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  width: calc(277 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.rdk-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  border: calc(2 * var(--u)) solid rgba(104, 243, 24, 0.2);
  border-radius: calc(8 * var(--u));
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* Lime at 50%, and the outline goes entirely — a fill and nothing else
   (client, 2026-08-26). The border stays in the box model so the icon does not
   shift by 2u on hover; only its colour is dropped. */
.rdk-footer__social a:hover,
.rdk-footer__social a:focus-visible {
  border-color: transparent;
  background: rgba(104, 243, 24, 0.5);
}

.rdk-footer__social img {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  max-width: none;
}

.rdk-footer__links {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(20 * var(--u));
  line-height: 1.2;  /* was `normal`, pinned 2026-09-21: that resolved to 1.2 from the brand face's own metrics, and the descender fix raises its declared descent. Stated so the fix cannot move this. */
  white-space: nowrap;
  color: var(--rdk-white);
}

/* The nav's treatment, and the nav's GREEN treatment specifically, since this
   row is on green: the others fall back to Redonk Lime at 70% while one is
   hovered. Written as "dim the group, undim the target" — a restore-on-leave
   would flash the whole row back to full between every pair of links, because
   the old link's leave fires before the new one's enter. */
.rdk-footer__links a {
  transition: color 0.3s ease, opacity 0.3s ease;
}

.rdk-footer__links:hover a {
  color: var(--rdk-lime);
  opacity: 0.7;
}

.rdk-footer__links a:hover,
.rdk-footer__links a:focus-visible {
  color: var(--rdk-white);
  opacity: 1;
}

/* Satoshi Variable MEDIUM. The design specifies Avantt TRIAL Medium here —
   the last node in the file still doing so — and the typography pass maps that
   to Satoshi 500. Verified rendering rather than assumed: forcing the fallback
   stack changes the measured advance width (569.8 -> 554 at 40px), which it
   would not if Satoshi were silently failing to load. */
/* The email took the utility row's right-hand slot (node 793:98372), so it
   is the footer LINKS' type, not the legal line's — Redonk Avant Garde Bold
   20 in white. Underlines on hover rather than joining the links' group dim:
   it sits outside that list, and an underline is what an address wants. */
.rdk-footer__email {
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(20 * var(--u));
  line-height: 1.2;  /* was `normal`, pinned 2026-09-21: that resolved to 1.2 from the brand face's own metrics, and the descender fix raises its declared descent. Stated so the fix cannot move this. */
  white-space: nowrap;
  color: var(--rdk-white);
  transition: opacity 0.3s ease;
}

.rdk-footer__email:hover,
.rdk-footer__email:focus-visible {
  text-decoration: underline;
}

/* ---------- the coda (node 793:98345) ----------
   A thin band under the REDONK wordmark holding the legal line, and the box
   DONK now hangs out of. `position: relative` is the anchor for him and
   nothing else; the band paints the same green so the join is invisible. */
.rdk-footer__coda {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(24 * var(--u)) calc(40 * var(--u));
  background: var(--rdk-green);
}

.rdk-footer__legal {
  letter-spacing: var(--rdk-body-track);
  margin: 0;
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-xs);
  line-height: var(--rdk-body-lh);
  color: var(--rdk-white);
}

.rdk-footer__legal a {
  text-decoration: underline;
}

/* ---------- 3. the wordmark band ---------- */

.rdk-footer__mark {
  position: relative;
  /* THE BAND'S HEIGHT FOLLOWS ITS WIDTH, NOT --u (client, 2026-09-24: "REDONK
     should be going edge to edge"). It was `323 * --u` under a `width: 100%`
     wordmark, and those two only agree at the design width: --u is pinned at
     1px from 1600 to 1880 while the window keeps widening, so the box grew
     wider than the SVG's aspect and `img` letterboxed the glyphs inside it —
     measured 1650 of a 1920 window, pulled in ~135 a side. Holding the band to
     the artwork's own aspect makes the wordmark fill the width at every size.
     At a 1600 window it resolves to the same ~319 it always did. */
  height: auto;
  aspect-ratio: 1604 / 323;
  background: var(--rdk-green);
}

/* Scoped to its own class, NOT `.rdk-footer__mark img`: that would also match
   the DONK inside this block and out-specify `.rdk-footer__donk`, which is how
   the DONK once ended up 1604 wide and 0 tall. */
/* Edge to edge, no side padding (client, 2026-08-26). Its height comes from
   its width through the SVG's own aspect, and the band above is held to the
   same aspect, so the two cannot disagree at any window width. */
.rdk-footer__wordmark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(0.76 * var(--u));
  width: 100%;
  height: auto;
  max-width: none;
  transform-origin: 50% 100%;
}

/* 368 tall against the band's 323 — he overhangs the bottom edge by 45, and
   the footer's `overflow: clip` trims him exactly as the frame does. */
/* HE HANGS UP OUT OF THE CODA NOW, not down out of the wordmark band — so he
   is a child of the coda and paints OVER the wordmark, which is the order the
   node has (the coda is the later sibling).
   Anchored by his BOTTOM, not his top, so the band's own height — which is a
   line of 14px type plus its padding — cannot move him. -7.2 is where the
   node's ink ends: its box is 442 x 414 at `bottom: -50`, and 46 of that is
   empty canvas below his feet, which our 442 x 368 export has already
   trimmed. Measured off both: the ink lands within a pixel either way, so the
   shipped asset needs no re-export.
   `right: 68` is unchanged — he was at `left: 1090` in a 1600, which is the
   same 68 from the right edge. */
.rdk-footer__donk {
  position: absolute;
  right: calc(68 * var(--u));
  bottom: calc(-7.2 * var(--u));
  width: calc(442 * var(--u));
  height: calc(368 * var(--u));
  max-width: none;
  pointer-events: none;
}

/* ---------- mobile: node 58:11819, a 390 frame ----------
   Straight px, like the other phone blocks: these are absolute sizes in a
   390-wide frame, not a proportion of a 1600 one.

   TABLET PORTRAIT TAKES THIS FOOTER TOO (client, 2026-09-16: "use the mobile
   footer for tablet portrait"). It is the stacked one — links in a centred
   column, the utility band a centred stack, the CTA band's own 32 corners —
   and it pairs with the lift already being off there, so the footer simply
   sits under the section and scrolls with the page.

   It travels better than a 390-frame block has any right to: the REDONK band
   is an ASPECT (482 / 106.04) and its wordmark a PERCENTAGE (105.36%), so the
   band's bleed-and-clip survives any width. What does NOT scale is the type
   and the padding, which are absolute 390-frame px — see the note in
   css/tokens.css about a tablet inheriting phone sizes on a wider screen.
   Flagged rather than adjusted: the ask was this footer, not a third one. */
@media (max-width: 767px),
       (min-width: 768px) and (orientation: portrait) {
  .rdk-footer__cta {
    height: auto;
    min-height: 0;
    padding: 88px 24px;
    border-radius: 32px 32px 0 0;
  }

  .rdk-footer__inner {
    position: static;
    translate: none;
    gap: 24px;
    padding-top: 0;
    width: 100%;
  }

  .rdk-footer__text {
    gap: 24px;
  }

  .rdk-footer__heading {
    width: 302px;
    font-size: 56px;
    line-height: 0.94;
    letter-spacing: -2.8px;
  }

  .rdk-footer__blurb {
    width: 302px;
  }

  /* Node 267:41710: 64 tall, 16/40 padding, a 4 lime border, fully round,
     label Redonk Avant Garde Bold 18. The width is no longer stated — the
     design sizes it from the padding and the label, and pinning 139.3 was
     what made the old 14.7px type fit a box it should not have. */
  .rdk-footer__btn {
    width: auto;
    height: 64px;
    padding: 16px 40px;
    font-size: 18px;
    line-height: 1.2;  /* was `normal`, pinned 2026-09-21: that resolved to 1.2 from the brand face's own metrics, and the descender fix raises its declared descent. Stated so the fix cannot move this. */
    letter-spacing: normal;
    border-width: 4px;
    border-radius: 999px;
  }

  /* The desktop's three-column row becomes a centred stack, and the LINKS
     stack too — node 249:29505 runs them down the page rather than across. */
  .rdk-footer__utility {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 32px 16px;
    border-top-width: 2px;
  }

  .rdk-footer__links {
    order: 1;
    flex-direction: column;
    align-items: center;
    gap: 28.92px;
    font-size: 21.208px;
    line-height: 1.2;  /* was `normal`, pinned 2026-09-21: that resolved to 1.2 from the brand face's own metrics, and the descender fix raises its declared descent. Stated so the fix cannot move this. */
  }

  /* The phone has no mobile node for the email yet, so it takes the LINKS'
     own phone size (21.208) — it is the same type at the same weight up on
     the desktop, and the utility row is a centred stack here, so it simply
     joins the bottom of it. */
  .rdk-footer__email {
    order: 3;
    font-size: 21.208px;
  }

  .rdk-footer__social {
    order: 2;
    gap: 32px;
    width: auto;
  }

  .rdk-footer__social a {
    width: 56px;
    height: 56px;
    border-width: 1.788px;
    border-radius: 8.616px;
  }

  .rdk-footer__social img {
    width: 34.459px;
    height: 34.459px;
  }

  /* The legal is out of the utility stack and into the coda now, so it has no
     `order` to carry — it is the coda's only child and centres there. */
  .rdk-footer__coda {
    justify-content: center;
    padding: 24px 16px;
  }

  .rdk-footer__legal {
    text-align: center;
  }

  /* All three bubbles are 200 here, against the desktop's 575-633, and the
     third one stays — the old mobile block hid two of them. */
  .rdk-footer__bubble--left {
    left: -107.76px;
    top: 64.68px;
    width: 200px;
    height: 200px;
  }

  .rdk-footer__bubble--top {
    right: auto;
    left: 256.65px;
    top: -51.36px;
    width: 200px;
    height: 200px;
  }

  .rdk-footer__bubble--bottom {
    right: auto;
    bottom: auto;
    left: 213.31px;
    top: 340px;
    width: 201.295px;
    height: 201.295px;
  }

  /* The band is an ASPECT, not a height: node 249:29598 is 482 x 106.04, and
     the wordmark inside it is 410.899 wide in a 390 frame — i.e. WIDER than
     the screen and clipped at the right, which is what the frame shows. That
     is why the wordmark cannot be `width: 100%` here the way it is on
     desktop. */
  .rdk-footer__mark {
    height: auto;
    aspect-ratio: 482 / 106.04;
  }

  .rdk-footer__wordmark {
    left: 0;
    right: auto;
    bottom: auto;
    top: -0.23px;
    width: 105.36%;   /* 410.899 of 390 */
    height: auto;
    transform-origin: 0 0;
  }

  /* Unchanged on screen: `bottom: 100%` sits him on the coda's top edge,
     which IS the wordmark band's bottom — where his own bottom already was
     (measured 0.6 inside it). Only the anchor moved, with his parent. */
  .rdk-footer__donk {
    right: auto;
    left: 68.7%;      /* 267.94 of 390 */
    bottom: 100%;
    width: 33.7%;     /* 131.43 of 390 */
    height: auto;
  }
}


@media (prefers-reduced-motion: reduce) {
  .rdk-footer__btn,
  .rdk-footer__social a,
  .rdk-footer__links a {
    transition: none;
  }
}

/* ---------- the touch target floor (2026-09-16) ----------
   The CTA is `80 * --u` with no floor, so it draws 41 with an 11.8px label
   on a device operated by a thumb — under the 44 minimum, and the same fault
   the About CTA and the case-study pill carry. It has no chip (the one
   section-level CTA without one), so the pill is the whole button.
   Gated on the POINTER, not orientation — see css/cases.css for why. A
   desktop reports `hover: hover` and cannot match; `max()` only raises. */
@media (min-width: 768px) and (hover: none) {
  .rdk-footer__btn {
    height: max(44px, calc(80 * var(--u)));
    font-size: max(15px, calc(23 * var(--u)));
  }
}

/* ---------- tablet portrait: the CTA band's own adjustments (2026-09-16) ----
   The block above is node 58:11819's, drawn on a 390 frame, and two of its
   numbers are a share of that frame rather than a size — so on an 820 screen
   they land in the wrong place. Both are client reports.

   AFTER the mobile block, deliberately: a media query adds no specificity, so
   at equal weight the later rule wins. */
@media (min-width: 768px) and (orientation: portrait) {
  /* ONE LINE (client: "the sub copy can be longer, possibly one line?").
     The 302 measure is the phone's and breaks this sentence in two; measured,
     it wants **504** to set on one line and the band has **757** between its
     24 paddings. 560 takes it with 56 of slack rather than sitting on the
     knife edge — the pills' own lesson, where a measure solved to the exact
     pixel wrapped unpredictably as rounding moved.
     A page whose `footer-blurb` slot carries a longer line (the About page's)
     simply wraps again, which is correct. */
  .rdk-footer__blurb {
    width: 560px;
  }

  /* MORE TO THE LEFT (client: "bubbles that are in the middle should be more
     to the left"). Their `left` is a 390-frame px, so what reads as a third
     of the way across a phone sits dead centre on an 820 screen: measured,
     the bottom bubble spans 213..415 and the top 257..457, against centred
     copy at 252..554 and the button at 321..484. The bottom one is the
     offender — it rests just below the button and DRIFTS up over it, which is
     what the screenshot caught, so the fix has to clear it horizontally
     rather than vertically.

     Both move RIGHT, past the copy rather than in front of it — the blurb is
     the widest thing here at 123..683, so clearing its right edge is what
     decides the number, with room for the ~30 of drift js/footer.js gives
     them. That also balances the band: `--left` hangs off the left edge, so
     one of these hanging off the right is the same gesture mirrored, and the
     copy sits in clear green between them. */
  .rdk-footer__bubble--bottom {
    left: 620px;
  }

  .rdk-footer__bubble--top {
    left: 700px;
  }

  /* A GAP ABOVE THE FOOTER, THE WHITE CARD'S OWN SIDE INSET (client: "needs
     to be a gap between the footer and section above. Match the padding to
     the left and right of the white section"). `.rdk-about`'s side padding
     is `40 * --u` — measured 20.5px at 820, which is exactly the inset the
     card sits at — so the same expression gives a gap that stays in step
     with it at every width instead of being a number to keep matched.

     WRITTEN TWICE ON PURPOSE. The footer-reveal experiment zeroes this
     margin for the phone and tablet portrait (`body.rdk-reveal .rdk-footer`,
     specificity 0-2-1), so a plain `.rdk-footer` here would lose to it. The
     first rule is what a world without the experiment gets — the base
     stylesheet's own 144u would otherwise apply — and the second is what
     beats the opt-out while it is on. Both carry the same value, so deleting
     `css/footer-reveal.css` cannot change what this looks like. */
  .rdk-footer,
  body.rdk-reveal .rdk-footer {
    margin-top: calc(40 * var(--u));
  }
}