/* Services — design node 464:84243 (1600 x 1544).

   A white panel inset 40u from both edges on the dark ground, holding a
   centred label and full-width rows: number left, service name centred at
   120u, arrow right. Seven rows in the frame, SIX on the page since
   2026-09-15 — the client cut the placeholder "A seventh Service".

   The flocked 3D icons the comp shows behind the type are NOT static art.
   Per the client they appear on hover and REPLACE the mouse cursor inside
   this section, so they live in one cursor layer that js/services.js drives
   (and that stays invisible if GSAP never loads). The comp's two icons
   corroborate the reading: both sit centred on their row, exactly where a
   cursor would be. */

.rdk-services {
  position: relative;
  z-index: 1;
  padding: 0 calc(40 * var(--u));
  background: var(--rdk-black-green);
}

.rdk-services__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Clips the cursor icon to the panel, which is what the comp does with its
     two icons — the pencil's box starts 125u above the row list. */
  overflow: clip;
  /* 299 of empty white used to sit below the last row — Figma's own 1544
     frame against 1245 of content, reproduced rather than trimmed. Node
     797:98452 fills it with the CTA, so the bottom padding is the node's 152.
     The TOP stays 152 where the node says 112, because the node also gives
     the label an 88 gap where this file has 48: 152 + 48 and 112 + 88 both
     put the ROWS at 200, so only the label itself sits 40 lower. That 48 is
     a recorded, separately-unapplied delta — see CLAUDE.md. */
  padding: calc(152 * var(--u)) calc(72 * var(--u)) calc(152 * var(--u));
  background: var(--rdk-white);
  border-radius: calc(96 * var(--u));
}

/* Node 46:4280: Satoshi Variable BLACK at 15/1.5 in green/500. It was Avantt
   SemiBold at 12/1.2 — so the weight jumped two steps (600 -> 900) as well as
   the size. Figma trims this run to its cap height (`text-box-trim: trim-both`),
   which is why the line box is 11 and not `normal`. */
.rdk-services__label {
  margin-bottom: calc(48 * var(--u));
  font-family: var(--rdk-font-body);
  font-weight: 900;
  font-size: calc(15 * var(--u));
  line-height: calc(11 * var(--u));
  letter-spacing: calc(1.5 * var(--u));
  font-feature-settings: "frac" 1;
  text-transform: uppercase;
  color: var(--rdk-green);
}

/* 88 below the rows, the node's own gap. A margin rather than a flex `gap`
   on the panel, because the label above already spaces itself that way and
   the panel's only other child is the list. */
.rdk-services__cta {
  margin-top: calc(88 * var(--u));
}

.rdk-services__list {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Figma's row pitch is 152 against a 120 row, i.e. a 32 gap. Opened up by
     20 on client direction — deliberately off-comp. */
  gap: calc(52 * var(--u));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Only once JS is driving the icon layer — otherwise this would take the
   cursor away and put nothing in its place. */
.rdk-services--live .rdk-services__list {
  cursor: none;
}

.rdk-services__row {
  position: relative;
  z-index: 1; /* above the cursor icon: the comp puts the type over it */
  display: flex;
  align-items: center;
  justify-content: center;
  /* --du: the pitch exists to hold the 104u name, so it floors with it.
     Left on --u the floored name is 70.7 in a 61.5 row and overflows it. */
  height: calc(120 * var(--du));
  border-radius: calc(24 * var(--u));
}

  /* Display/XL, from the file's own variables: 104 / lh 0.94 / tracking -5%.
     The leading was 1 here where the other three 104 runs (footer heading, work
     hero, services hero) all use the token's 0.94. Corrected 2026-09-09. */
.rdk-services__name {
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  /* 104, down from Figma's 120 (client, 2026-08-25). The tracking is scaled
     with it to hold the designed -0.05em. */
  font-size: calc(104 * var(--du));
  line-height: 0.94;
  letter-spacing: calc(-5.2 * var(--du));
  text-align: center;
  white-space: nowrap;
  color: var(--rdk-dark);
}

/* Number and arrow are pinned 16u inside the row's ends in Figma, both in
   48u boxes, so the name stays optically centred in the full row width. */
.rdk-services__num,
.rdk-services__arrow {
  position: absolute;
  top: 50%;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  translate: 0 -50%;
}

/* Satoshi Variable BLACK (was Bold) — node 19:12890. */
.rdk-services__num {
  left: calc(16 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rdk-font-body);
  font-weight: 900;
  font-size: calc(20 * var(--u));
  color: var(--rdk-green);
}

.rdk-services__arrow {
  right: calc(16 * var(--u));
  max-width: none;
}

/* ---------- cursor icon ----------
   Three nested layers, each owned by exactly one thing:

     .rdk-services__cursor      zero-size point  — GSAP x/y, follows the pointer
     .rdk-services__cursor-rig  zero-size point  — GSAP rotation (the physics
                                swing) and the squash pulse during a morph
     .rdk-services__cursor-icon six stacked imgs — GSAP opacity/scale/blur and
                                each icon's own designed rotation

   Splitting them is what stops the follow, the swing and the morph from
   overwriting one another's transform every frame — the same reason the
   hero's DONK is a rig plus an image.

   Each icon centres itself on the point with negative margins derived from
   its own --w/--h rather than a percentage translate, so `transform` stays
   entirely GSAP's (see the transform gotcha in CLAUDE.md). */

.rdk-services__cursor,
.rdk-services__cursor-rig {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.rdk-services__cursor-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  max-width: none;
  margin: calc(var(--h) * var(--u) * -0.5) 0 0 calc(var(--w) * var(--u) * -0.5);
  /* Resting state is invisible: without JS there is no cursor icon at all,
     which is correct. Opacity rather than `visibility` so the browser still
     lazy-loads them as the section approaches the viewport. */
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* The design table, straight from node 487:88748. --w/--h are each icon's
   own box (Figma stretches the square source into it — verified by
   reconstructing the frame both ways and diffing against Figma's own render),
   --rot is its rotation, --peak its opacity. js/services.js reads --rot and
   --peak from here so this stays the single source of truth. */
/* THE SET IS THE SERVICES PAGE'S FIVE SINCE 2026-09-18 (client: make the
   homepage's rows the services page's services). Pawn, laptop and megaphone
   keep their own numbers from node 487:88748 — including the 25% the play and
   megaphone were bumped by on 2026-08-25, since they were the two smallest
   objects in the set. Pencil, code and play are gone with the rows they served.

   WAND AND PANEL HAVE NO NODE IN THIS SET, so their numbers are derived rather
   than read, and are worth knowing as such:

   - SIZE comes from the services page's own ratio between that object and the
     laptop, applied to the laptop's size HERE. Its wand is 470 against a 520
     laptop (0.9038), so 323.633 x 0.9038 = 292.5; its panel is 519 x 436
     against 520 x 440, i.e. the same box, so the panel takes the laptop's
     323.633 with its own aspect. That keeps the two sets in proportion without
     importing the services page's absolute scale, which is a different one.
   - THE PANEL IS THE ONE NON-SQUARE SOURCE (648 x 544, aspect 1.1912) and its
     designed box matches it, so it is the one icon here NOT stretched from a
     square. Figma stretches the others into their boxes, which is why a 1:1
     asset can carry a 323.633 x 270.732 box — do not "correct" those.
   - ROTATION and PEAK are inherited from the icon each one DISPLACES in this
     set, so the set keeps its spread of resting angles: the wand takes the
     pencil's (both long thin objects, and it is the Brand row the pencil
     served), the panel takes the code's. The services page's own 180deg wand
     and 24deg panel are its composition, not a resting angle for a cursor. */
.rdk-services__cursor-icon[data-icon="pawn"]      { --w: 297.175; --h: 297.175; --rot: -40.06; --peak: 1; }
.rdk-services__cursor-icon[data-icon="wand"]      { --w: 292.5;   --h: 292.5;   --rot: -86.29; --peak: 0.9; }
.rdk-services__cursor-icon[data-icon="laptop"]    { --w: 323.633; --h: 270.732; --rot: -23.08; --peak: 1; }
.rdk-services__cursor-icon[data-icon="panel"]     { --w: 323.633; --h: 271.68;  --rot: -22.76; --peak: 1; }
.rdk-services__cursor-icon[data-icon="megaphone"] { --w: 260;     --h: 260;     --rot: -8.16;  --peak: 1; }

/* ---------- mobile: node 1:2001, a 390 frame ----------
   The card is FULL BLEED here — the section has no side padding of its own,
   where the desktop insets the panel 40u. */
@media (max-width: 767px) {
  .rdk-services {
    padding: 0;
  }

  .rdk-services__panel {
    /* The 40 gap between the label and the rows is the flex gap, so the
       label's own margin has to go or the two add up. */
    gap: 40px;
    padding: 56px 16px;
    border-radius: 48px;
  }

  /* Satoshi BOLD 11/1.32 here, against the desktop's BLACK 15/1.5 — the
     phone frame differs in weight as well as size. Same treatment as the
     intro's label row. */
  /* Same reason the label's margin goes: the panel's 40 flex gap does the
     spacing here, and the desktop's 88 would add to it. */
  .rdk-services__cta {
    margin-top: 0;
  }

  .rdk-services__label {
    margin-bottom: 0;
    font-weight: 700;
    font-size: 11px;
    line-height: normal;
    letter-spacing: 1.32px;
  }

  .rdk-services__list {
    gap: 32px;
  }

  /* Content height, not a fixed one: "Web & Development" wraps to two lines
     and the row has to grow with it. The number and the arrow are absolutely
     centred, so they follow whatever height the name sets. */
  .rdk-services__row {
    height: auto;
    border-radius: 0;
  }

  .rdk-services__name {
    font-size: 40px;
    line-height: 0.9;
    letter-spacing: -2px;
    /* The desktop keeps every name on one line; at 40px on a 390 screen two
       of them cannot be. `max-width` keeps a wrapped name clear of the number
       and arrow boxes, which are absolutely placed at the row's ends. */
    white-space: normal;
    max-width: calc(100% - 80px);
  }

  .rdk-services__num,
  .rdk-services__arrow {
    width: 28.8px;
    height: 28.8px;
  }

  .rdk-services__num {
    left: 0;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.5px;
  }

  .rdk-services__arrow {
    right: 0;
  }
}