/* ==========================================================================
   THE DESIGNERS HUB — home page
   Source of truth: Figma frame "home page" #2129:1470 (1440 x 4682).
   Every desktop offset below is the literal Figma coordinate. The frame's
   content sits on a +30px offset (it centres on x=750, not 720), which is
   reproduced rather than corrected.
   Narrow-width rules are a reflow only; the design defines 1440 here.
   ========================================================================== */

.page-home { display: flow-root; }

/* The .lbl-wide / .lbl-narrow pair that swaps the fabric-band and closing CTA
   labels between breakpoints now lives in base.css — the stage pages need the
   same mechanism for their case-study label. */

/* The case-study prev/next pair exists only on the 390 frame — the 1440 frame
   lays all three cards out at once. home.js also hides them above the
   breakpoint, but the default belongs in CSS so a JS failure cannot drop two
   stray buttons into the verified desktop layout. */
.results__nav { display: none; }

.page-home main {
  position: relative;
  max-width: var(--frame-desktop);
  margin-inline: auto;
}

/* ==========================================================================
   1. HERO — frame y:279 h442 | dark band x:30 w1440 | card x:30 w888
   ========================================================================== */
.hero__band { background: var(--color-surface-dark); padding-block: var(--space-32); }

.hero__inner {
  position: relative;
  margin-inline: auto;
  overflow-x: clip;
  overflow-y: visible;
}

.hero__card {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border: var(--stroke-15) solid var(--color-surface-dark);
  padding: 35px 28px;
}

.hero__tabs { display: flex; align-items: center; gap: var(--space-16); }

.hero__tab {
  font-size: var(--fs-meta);
  font-weight: var(--fw-reg);
  color: var(--grey-300);
}

.hero__tab--active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  padding: 5px 18px 5px 19px;
  background: var(--color-surface-dark);
  border: var(--stroke-1) solid var(--color-surface-dark);
  color: var(--white);
}

.hero__title { margin-top: var(--space-16); }
.hero__lead  { margin-top: var(--space-16); }
.hero__lead + .hero__lead { margin-top: var(--space-8); }
.hero__cta   { margin-top: var(--space-32); }

.hero__model { display: none; position: absolute; z-index: 1; object-fit: cover; }

/* ==========================================================================
   2. PAIN — H2 y:813 x:378 w744 | row1 y:939 | row2 y:1037
   ========================================================================== */
.pain { position: relative; z-index: 2; padding-block: var(--space-64); }

.pain__title { max-width: 744px; margin-inline: auto; text-align: center; }

.pain__row { display: grid; gap: var(--space-24) var(--space-48); margin-top: var(--space-48); }

.pain__item { display: flex; align-items: flex-start; gap: 9px; }

.pain__item::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.pain__item p { font-size: var(--fs-body); line-height: 1.3; }

/* ==========================================================================
   3. FABRIC BAND — image x:30 y:1171 w1440 h344
   ========================================================================== */
.fabric { position: relative; overflow: hidden; text-align: center; color: var(--bg); }

.fabric__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fabric__inner { position: relative; z-index: 2; padding-block: var(--space-48); }

.fabric__title { color: var(--bg); }

.fabric__note {
  margin-top: var(--space-16);
  font-weight: var(--fw-med);
  color: var(--bg);
}

.fabric__cta { margin-top: var(--space-24); }

/* ==========================================================================
   4. STAGE — outline x:50 y:1547 w1400 h400 | panel x:110 y:1587 w1280 h432
   ========================================================================== */
.stage { position: relative; padding-block: var(--space-48); }

.stage__outline { display: none; }

.stage__panel {
  position: relative;
  z-index: 2;
  background: var(--color-surface-dark);
  color: var(--bg);
  padding: var(--space-48) var(--space-24);
}

.stage__title,
.stage__sub { text-align: center; color: var(--bg); }

.stage__title { max-width: 520px; margin-inline: auto; }

.stage__sub {
  max-width: 420px;
  margin: var(--space-16) auto 0;
  font-weight: var(--fw-light);
}

.stage__cols { display: grid; gap: var(--space-32); margin-top: var(--space-48); }

.stage__colhead {
  font-size: var(--fs-body);
  font-weight: var(--fw-reg);
  line-height: 17px;
  text-transform: uppercase;
}

.stage__colhead--before { color: var(--bg); }
.stage__colhead--system,
.stage__colhead--after  { color: var(--gold); }

/* rules: #2129:1534 / 1536 / 1535 — all gold in Figma */
.stage__rule { margin-top: 7px; height: 1px; background: var(--gold); }
.stage__rule--before { background: var(--gold); }

.stage__list { margin-top: var(--space-16); }

.stage__list li {
  position: relative;
  padding-left: 29px;
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 25px;
}

.stage__list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.stage__list--before li::before { background: var(--grey-250); }
.stage__list--after  li::before { background: var(--gold); }

.stage__flow { position: relative; margin-top: var(--space-16); }

.stage__flowitem {
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 25px;
}

.stage__flowarrow { display: none; }

/* ==========================================================================
   5. FOUR STEPS — band y:2091 h698 | card x:30 w888 | model x:806 752x752
   ========================================================================== */
.steps { position: relative; }

.steps__band { background: var(--color-surface-dark); }

.steps__inner { position: relative; margin-inline: auto; overflow-x: clip; }

.steps__card {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border: var(--stroke-15) solid var(--color-surface-dark);
  padding: 40px 24px 48px;
}

.steps__grid { display: grid; gap: 60px var(--space-64); margin-top: 48px; padding-left: 40px; }

.step {
  position: relative;
  background: var(--color-surface-dark);
  border: var(--stroke-1) solid var(--black);
  border-radius: var(--radius-2);
  padding: 29px 20px 20px 28px;
  min-height: 132px;
}

.step__badge {
  position: absolute;
  left: -40px;
  top: -26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bg);
  border: 0.68px solid var(--color-surface-dark);
  color: var(--gold);
  font-weight: var(--fw-semi);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
}

.step__title {
  color: var(--gold);
  font-weight: var(--fw-med);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
}

.step__rule {
  border: 0;
  border-top: var(--stroke-1) solid var(--bg);
  margin: var(--space-8) -20px var(--space-8) -28px;
}

.step__desc {
  color: var(--bg);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 1.45;
}

.steps__arrow { display: none; }

/* The 768 frame's three curved connectors (#2129:6062 / 6064 / 6063). They
   replace the two straight desktop arrows rather than restyling them, so they
   are off everywhere except the tablet block. */
.steps__arc { display: none; }

/* Tablet-only authored line break in the hero lead — inert at every other
   width, so 1440 and 390 keep the single flowing paragraph they verified. */
.hm-brk { display: none; }

.steps__model { display: none; position: absolute; z-index: 1; object-fit: cover; }

/* ==========================================================================
   6. RESULTS — H2 y:2861 x:518 w464 | cards y:2964 x:122/556/990 389x271
   ========================================================================== */
.results { padding-block: var(--space-64); }

.results__title { text-align: center; }

.results__grid { display: grid; gap: var(--space-32); margin-top: var(--space-48); }

.case {
  background: var(--color-surface-dark);
  border-radius: var(--radius-2);
  color: var(--bg);
  padding: 28px 23px 0;
}

.case__brand {
  color: var(--gold);
  font-weight: var(--fw-med);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
  text-align: center;
}

.case__list { margin-top: var(--space-4); }

.case__row + .case__row { margin-top: var(--space-16); }

.case__label {
  display: inline-block;
  font-weight: var(--fw-semi);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
}

/* gold plate #2268:1001 — 108 x 23 */
.case__label--result {
  background: var(--gold);
  color: var(--white);
  width: 108px;
  height: 23px;
  line-height: 23px;
  text-align: center;
}

.case__value {
  margin-top: 6px;
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 1.35;
}

/* ==========================================================================
   7. BRANDS — image x:30 y:3307 w1440 h440 | panel x:13 y:3354 745x339
   ========================================================================== */
.brands { position: relative; overflow: hidden; }

.brands__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.brands__inner { position: relative; z-index: 2; margin-inline: auto; padding-block: var(--space-48); }

.brands__panel { background: var(--color-surface-dark); color: var(--bg); padding: var(--space-32) var(--space-24); }

.brands__title { color: var(--bg); max-width: 536px; }

.brands__stats { display: grid; gap: var(--space-24); margin-top: var(--space-32); }

.brands__n {
  color: var(--gold);
  font-weight: var(--fw-reg);
  font-size: 24px;
  line-height: 1.2;
}

.brands__d { margin-top: 5px; font-size: var(--fs-meta); line-height: 1.4; color: var(--bg); }
.brands__d .g  { color: var(--gold); }
.brands__d .gd { color: var(--gold-deep); }

/* ==========================================================================
   8. WORKED WITH — H2 y:3819 x:633 | logos at four distinct sizes
   ========================================================================== */
.worked { padding-block: var(--space-64); text-align: center; }

.worked__viewport { position: relative; margin-top: var(--space-48); }

.worked__track { display: flex; align-items: center; justify-content: center; gap: var(--space-32); flex-wrap: wrap; }

.worked__logo { object-fit: contain; }

.worked__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.worked__nav--prev { left: 0; }
.worked__nav--next { right: 0; }

.worked__dots { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: var(--space-32); }

.worked__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); border: 0; padding: 0; opacity: 0.45; cursor: pointer; }
.worked__dot[aria-current="true"] { width: 10px; height: 10px; opacity: 1; }

/* ==========================================================================
   9. FINAL CTA — outline x:50 y:4160 w1400 h304 | panel x:110 y:4200 1280x336
   ========================================================================== */
.cta { position: relative; padding-block: var(--space-64); }

.cta__outline { display: none; }

.cta__panel {
  position: relative;
  z-index: 2;
  background: var(--color-surface-dark);
  color: var(--bg);
  text-align: center;
  padding: var(--space-48) var(--space-24);
}

.cta__title { color: var(--bg); max-width: 494px; margin-inline: auto; }
.cta__sub   { max-width: 379px; margin: var(--space-16) auto 0; font-weight: var(--fw-light); color: var(--bg); }
.cta__btn   { margin-top: var(--space-24); }

/* ==========================================================================
   MOBILE — literal Figma geometry, 390 canvas
   Source of truth: frame "главная моб" #2129:3893 (390 x 4076).

   ORIGIN. The frame draws no header and no footer, so its y:0 is the top of
   the page. The mobile header is 81 tall (#2129:10148), and `main` starts at
   its bottom — so every coordinate below is the Figma value MINUS 81. Each
   section is absolutely positioned at its own main-space top rather than
   chained with margins, so no error can compound down the page.

   STROKE ALIGNMENT was read off the node renders, not assumed (it is not
   uniform on this frame):
     hero plate  #2129:4007  422x543 declared -> 438x559 render = OUTSIDE 8px
     stage frame #2129:3942  735x493 -> 735x493 = INSIDE
     CTA frame   #2129:3943  761x244 -> 761x244 = INSIDE
     step card   #2129:3914  374x102 -> 374x102 = INSIDE
     step badge  #2129:3918   53x53  ->  53x53  = INSIDE

   Several of Figma's boxes are desktop-width rectangles that hang off the
   left edge of the 390 canvas (the stage/CTA frames start at x:-345, the
   brands band at x:-393). Their real x is reproduced and the section clips,
   rather than snapping them to 0 — that is what the file draws.

   Buttons on this frame carry NO textCase and are mixed case, unlike every
   desktop button. `text-transform: none` below is read from the file.
   ========================================================================== */
@media (max-width: 767px) {

  .page-home main {
    position: relative;
    width: var(--frame-mobile);
    max-width: none;
    height: 3741px;              /* frame 4076 - 81 header */
    margin-inline: 0;
  }

  /* sections are placed against main; .container must not re-pad them */
  .page-home .container {
    width: var(--frame-mobile);
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
  }

  /* the width is load-bearing, not cosmetic: every child is absolute, so
     without it the section shrink-wraps to 0 and its overflow:hidden clips
     the whole block away */
  .page-home main > section { position: absolute; left: 0; width: var(--frame-mobile); }

  /* Figma renders each of these as a single line. The browser measures the
     same strings fractionally wider, which spills a second line and breaks
     the fixed section heights. Hold them to the line the file draws. */
  .results__title,
  .worked__title,
  .steps__title,
  .brands__n,
  .fabric__note,
  .cta__sub { white-space: nowrap; }

  /* --- shared button geometry: 48 tall, mixed case ---------------------- */
  .hero__cta,
  .fabric__cta,
  .cta__btn {
    display: flex;
    min-height: 0;
    height: 48px;
    max-width: none;
    padding: 0;
    font-family: var(--font-button);
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;   /* #2129:4011 / 3987 / 4005 carry no textCase */
  }

  /* ======================================================================
     1. HERO — #2129:4006. Plate outer top at Figma 105 -> main 24.
     Local coordinates below are the Figma value minus 105.
     ====================================================================== */
  .hero {
    top: 24px;
    height: 559px;
    margin-top: 0;
    overflow: hidden;   /* clips the plate + dark band where they run off-canvas */
  }

  /* #2129:4007 — 422x543 with an OUTSIDE 8px stroke, so the stroke sits
     beyond the declared box: outer edge (-26,105)-(412,664), which is what
     the node render returns (438x559). box-sizing is border-box globally,
     so these are the OUTER numbers — writing 422x543 here would land the
     bottom edge 16px high. */
  .hero::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 0;
    width: 438px;
    height: 559px;
    background: var(--bg);
    border: 8px solid var(--color-surface-dark);
  }

  .hero__band {
    position: absolute;
    inset: 0;
    background: none;
    padding-block: 0;
  }

  .hero__inner { position: absolute; inset: 0; width: var(--frame-mobile); }

  .hero__card {
    position: absolute;
    inset: 0;
    background: none;
    border: 0;
    padding: 0;
  }

  /* #2129:4008 — the dark lower band, 428x307 at x:-19 */
  .hero__card::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 244px;
    width: 428px;
    height: 307px;
    background: var(--color-surface-dark);
  }

  .hero__tabs { position: absolute; left: 9px; top: 41px; gap: var(--space-16); }

  .hero__tab { font-size: 11px; font-weight: var(--fw-reg); color: var(--grey-300); }

  .hero__tab--active {
    height: 25px;
    padding: 5px 18px 5px 19px;
    font-weight: var(--fw-med);
    color: var(--bg);
  }

  /* #2129:4017 — Inter Bold 24 / 1.06 / UPPER, 381 wide, 3 lines (h75) */
  .hero__title {
    position: absolute;
    left: 9px;
    top: 90px;
    width: 381px;
    max-width: none;
    margin: 0;
    font-size: 24px;
    line-height: 1.06;
  }

  /* both leads are Inter Regular 15; Figma's auto line-height resolves to 18
     (lead 1 is h54 = 3 lines, lead 2 h36 = 2) */
  /* the `+` rule in the shared block is (0,2,0) and beats a bare .hero__lead,
     so the 8px stack gap has to be undone at matching specificity */
  .hero__lead,
  .hero__lead + .hero__lead {
    position: absolute;
    margin: 0;
    font-size: 15px;
    font-weight: var(--fw-reg);
    line-height: 18px;
  }

  .hero__card p.hero__lead:nth-of-type(1) { left: 9px;  top: 173px; width: 339px; }

  /* #2129:4019 sits on the dark band, so it is the inverted one */
  .hero__card p.hero__lead:nth-of-type(2) {
    left: 14px;
    top: 385px;
    width: 295px;
    color: var(--white);
  }

  .hero__cta {
    position: absolute;
    left: 9px;
    top: 471px;
    width: 373px;
    margin-top: 0;
    font-weight: var(--fw-bold);
  }

  /* #2129:4020 — paints LAST in Figma, over the dark band. The shared rule
     gives this z-index 1 against the card's 2, which is the desktop
     stacking (card over model); at 390 that order is reversed. Nothing else
     overlaps it, so raising it clear of the card is enough. */
  .hero__model {
    display: block;
    z-index: 3;
    left: 0;
    top: 231px;
    width: var(--frame-mobile);
    height: 138px;
    object-fit: fill;   /* every image fill in this file is STRETCH */
  }

  /* ======================================================================
     2. PAIN — title #2129:3895 at Figma 694 -> main 613.
     Local coordinates are the Figma value minus 694.
     Figma lays the five points out in two columns (x:9 / x:203) with the
     fifth centred beneath — not the 3+2 rows the desktop frame uses.
     ====================================================================== */
  .pain {
    top: 613px;
    height: 275px;
    margin-top: 0;
    padding-block: 0;
  }

  .pain__title {
    position: absolute;
    left: 9px;
    top: 0;
    width: 363px;
    max-width: none;
    margin: 0;
    text-align: left;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
  }

  .pain__row { display: block; margin: 0; }

  .pain__item {
    position: absolute;
    display: block;
    gap: 0;
  }

  .pain__item::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    margin: 0;
  }

  .pain__item p {
    position: absolute;
    top: 4px;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 1.04;
  }

  .pain__row--1 .pain__item:nth-child(1) { left: 9px;   top: 95px;  }
  .pain__row--1 .pain__item:nth-child(2) { left: 203px; top: 95px;  }
  .pain__row--1 .pain__item:nth-child(3) { left: 9px;   top: 168px; }
  .pain__row--2 .pain__item:nth-child(1) { left: 203px; top: 168px; }
  .pain__row--2 .pain__item:nth-child(2) { left: 93px;  top: 241px; }

  .pain__row--1 .pain__item:nth-child(1) p { left: 20px; width: 155px; }
  .pain__row--1 .pain__item:nth-child(2) p { left: 21px; width: 153px; }
  .pain__row--1 .pain__item:nth-child(3) p { left: 20px; width: 158px; }
  /* Figma declares 157 but breaks after the em dash — "You want to grow —" /
     "but you're afraid to lose" / "control" — even though "but" measures
     155.9 and would fit. The browser has no such preference and pulls "but"
     up, changing lines 1 and 2 while keeping the count at 3 (so a height
     check passes and only a pixel diff catches it). Held to 155, inside the
     154-155 window that reproduces the file's own lines. Deliberate 2px
     deviation from the declared width; the em-dash preference is unexplained. */
  .pain__row--2 .pain__item:nth-child(1) p { left: 21px; width: 155px; }
  .pain__row--2 .pain__item:nth-child(2) p { left: 20px; width: 185px; }

  /* ======================================================================
     3. FABRIC BAND — #2129:3982 at Figma 1005 -> main 924.
     Local coordinates are the Figma value minus 1005.
     ====================================================================== */
  .fabric {
    top: 924px;
    height: 219px;
    margin-top: 0;
  }

  .fabric__bg { object-fit: fill; }

  .fabric__inner { position: absolute; inset: 0; padding-block: 0; }

  /* Figma declares 51 / 286 and breaks after "CONSULTATIONS". The browser
     measures that line at 286.29 — a 0.29px overflow that spilled a third
     line and broke the band height. Widened to 288 and moved 1px left so the
     text keeps Figma's own centre (194); the break is stable to 327. */
  .fabric__title {
    position: absolute;
    left: 50px;
    top: 36px;
    width: 288px;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-med);   /* style_a7dca690 — Medium, not the h2 semibold */
    line-height: 1.06;
    text-align: center;
  }

  .fabric__note {
    position: absolute;
    left: 51px;
    top: 84px;
    width: 287px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    text-align: center;
  }

  /* #2129:3987 — white fill, and its label is Open Sans REGULAR where the
     other two buttons on this frame are Bold */
  .fabric__cta {
    position: absolute;
    left: 8px;
    top: 125px;
    width: 374px;
    margin: 0;
    background: var(--white);
    color: var(--color-surface-dark);
    font-weight: var(--fw-reg);
  }

  /* ======================================================================
     4. STAGE — frame #2129:3942 at Figma 1256 -> main 1175.
     Local coordinates are the Figma value minus 1256. The dark panel is a
     pseudo-element so the copy can keep frame-space coordinates instead of
     being re-based onto a box that starts at x:-307.
     ====================================================================== */
  .stage {
    top: 1175px;
    height: 535px;
    margin-top: 0;
    padding-block: 0;
    overflow: hidden;
  }

  .stage__outline {
    display: block;
    position: absolute;
    z-index: 1;
    left: -345px;
    top: 0;
    width: 735px;
    height: 493px;
    background: var(--bg);
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  /* #2129:3944 — 689x521 at x:-307, painted over the frame */
  .stage::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: -307px;
    top: 14px;
    width: 689px;
    height: 521px;
    background: var(--color-surface-dark);
  }

  .stage__panel {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    width: var(--frame-mobile);
    height: 535px;
    background: none;
    padding: 0;
  }

  .stage__title {
    position: absolute;
    left: 9px;
    top: 50px;
    width: 343px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    line-height: 1.06;
    text-align: left;
  }

  .stage__sub {
    position: absolute;
    left: 9px;
    top: 98px;
    width: 319px;
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 17px;
    text-align: left;
  }

  .stage__cols { display: block; margin: 0; }
  .stage__col  { position: static; }

  .stage__colhead {
    position: absolute;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 1.04;
  }

  .stage__colhead--before { left: 8px;   top: 164px; }
  .stage__colhead--system { left: 170px; top: 285px; }
  .stage__colhead--after  { left: 9px;   top: 406px; }

  .stage__rule { position: absolute; width: 211.5px; height: 1px; margin: 0; }

  .stage__rule--before                  { left: 8px;   top: 187px; }
  .stage__col--system .stage__rule      { left: 170px; top: 308px; }
  .stage__col--after  .stage__rule      { left: 9px;   top: 429px; }

  .stage__list { margin: 0; }

  .stage__list li {
    position: absolute;
    padding-left: 0;
    font-size: 13px;
    line-height: 1.04;
  }

  /* the dot sits 13px left of the text on both lists */
  .stage__list li::before { left: -13px; width: 6px; height: 6px; }

  /* Figma's dot offsets are 4/5/5 against their own line, not a flat step */
  .stage__list li:nth-child(1)::before { top: 4px; }
  .stage__list li:nth-child(2)::before,
  .stage__list li:nth-child(3)::before { top: 5px; }

  .stage__list--before li { left: 22px; }
  .stage__list--before li:nth-child(1) { top: 195px; }
  .stage__list--before li:nth-child(2) { top: 217px; }
  .stage__list--before li:nth-child(3) { top: 239px; }

  .stage__list--after li { left: 23px; }
  .stage__list--after li:nth-child(1) { top: 437px; }
  .stage__list--after li:nth-child(2) { top: 459px; }
  .stage__list--after li:nth-child(3) { top: 481px; }

  .stage__flow { position: static; margin: 0; }

  .stage__flowitem {
    position: absolute;
    font-size: 13px;
    line-height: 1.04;
  }

  .stage__flowitem--1 { left: 170px; top: 316px; }
  .stage__flowitem--2 { left: 249px; top: 338px; }
  .stage__flowitem--3 { left: 305px; top: 360px; }

  .stage__flowarrow { display: block; position: absolute; }
  .stage__flowarrow--1 { left: 190px; top: 331.87px; width: 49.82px; height: 18.37px; }
  .stage__flowarrow--2 { left: 259px; top: 354px;    width: 41.69px; height: 18.37px; }

  /* ======================================================================
     5. FOUR STEPS — title #2129:3911 at Figma 1827 -> main 1746.
     Local coordinates are the Figma value minus 1827. Cards run on a flat
     152px pitch; the badge straddles each card's top-left corner.
     ====================================================================== */
  .steps { top: 1746px; height: 637px; margin-top: 0; }

  .steps__band { background: none; height: auto; }

  .steps__inner { position: static; width: auto; height: auto; overflow: visible; }

  .steps__card {
    position: static;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    padding: 0;
  }

  .steps__title {
    position: absolute;
    left: 91px;
    top: 0;
    width: 209px;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
  }

  .steps__arrow { display: none; }   /* no connector arrows on the 390 frame */
  .steps__model { display: none; }

  .steps__grid { display: block; margin: 0; padding: 0; }

  .step {
    position: absolute;
    left: 8px;
    width: 374px;
    height: 102px;
    min-height: 0;
    padding: 0;
    border: var(--stroke-1) solid var(--black);
    border-radius: var(--radius-2);
  }

  .steps__grid .step:nth-child(1) { top: 79px;  }
  .steps__grid .step:nth-child(2) { top: 231px; }
  .steps__grid .step:nth-child(3) { top: 383px; }
  .steps__grid .step:nth-child(4) { top: 535px; }

  /* #2129:3938 — the white vertical divider, 1px x 100 at card x:61 */
  .step::after {
    content: "";
    position: absolute;
    left: 52px;
    top: 0;
    width: 1px;
    height: 100px;
    background: var(--white);
  }

  /* offsets below are from the padding box, which starts 1px inside the
     card's border — Figma measures every one of them from the outer edge */
  .step__badge {
    left: -1px;
    top: -27px;
    width: 53px;
    height: 53px;
    border-width: 0.53px;
    font-size: 12px;
  }

  .step__title {
    position: absolute;
    left: 59px;
    top: 13px;
    font-size: 14px;
    line-height: 1.04;
  }

  .step__rule {
    position: absolute;
    left: 52.5px;
    top: 38px;
    width: 320px;
    margin: 0;
  }

  .step__desc {
    position: absolute;
    left: 59px;
    top: 46px;
    width: 211px;
    font-size: 14px;
    font-weight: 200;    /* Inter ExtraLight — style_c03ca0ea */
    line-height: 1.04;
  }

  /* ======================================================================
     6. RESULTS — title #2129:3912 at Figma 2536 -> main 2455.
     Local coordinates are the Figma value minus 2536.
     The 390 frame draws ONE card plus a prev/next pair; the three cards are
     stacked and swapped by assets/js/home.js.
     ====================================================================== */
  .results { top: 2455px; height: 367.6px; margin-top: 0; padding-block: 0; }

  .results__title {
    position: absolute;
    left: 50px;
    top: 0;
    width: 290px;
    margin: 0;
    text-align: left;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
  }

  .results__grid {
    display: block;
    position: absolute;
    left: 29px;
    top: 45px;
    width: 333px;
    height: 271px;
    margin: 0;
  }

  .case {
    position: absolute;
    left: 0;
    top: 0;
    width: 333px;
    height: 271px;
    padding: 0;
  }

  .case[hidden] { display: none; }

  .case__brand {
    position: absolute;
    left: 99px;
    top: 30px;
    width: 135px;
    text-align: left;
    font-size: 16px;
    line-height: 1.04;
  }

  .case__list { position: static; margin: 0; }

  .case__row {
    position: absolute;
    left: 0;
    width: 333px;
    margin: 0;
  }

  .case__row + .case__row { margin-top: 0; }

  .case__list .case__row:nth-child(1) { top: 76px;  }
  .case__list .case__row:nth-child(2) { top: 134px; }
  .case__list .case__row:nth-child(3) { top: 189px; }

  .case__label {
    position: absolute;
    left: 22px;
    top: 0;
    font-size: 14px;
    font-weight: var(--fw-med);
    line-height: 17px;
  }

  /* #I2268:1381;2268:1044 — the gold bar is anchored to the card edge (x:1),
     not to the label's own text box, which starts at x:22 like every other */
  .case__label--result {
    left: 1px;
    width: 108px;
    height: 23px;
    padding-left: 21px;
    line-height: 23px;
    text-align: left;
  }

  .case__value {
    position: absolute;
    left: 22px;
    top: 25px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 17px;
  }

  /* WIDENED to the card's full inner width (333 - 22 - 22 = 289).
     Figma pins only card 1 at 390 — the other two are reached through the
     derived carousel — and their copy is longer, so at the file's declared
     183/241 their values wrapped to two lines and ran INTO the next row's
     label: the rows sit at fixed tops (76/134/189), which only works while
     every value is one line. Card 1 is unaffected because its values are
     left-aligned and still fit on one line (127.1 and 195.1 against 289), so
     nothing Figma specifies moves. Row 3 is the last row and its two-line
     values have room inside the 271 card, so it keeps a natural width. */
  .case__list .case__row:nth-child(1) .case__value,
  .case__list .case__row:nth-child(2) .case__value { width: 289px; }

  /* #I2268:1381;2129:10055 is Regular where the other two values are Light */
  .case__list .case__row:nth-child(3) .case__value {
    top: 28px;
    width: 289px;
    font-weight: var(--fw-reg);
  }

  .results__nav {
    display: block;
    position: absolute;
    top: 336px;
    width: 31.6px;
    height: 31.6px;
    padding: 0;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  .results__nav img { width: 31.6px; height: 31.6px; }
  .results__nav--prev { left: 155px; }
  .results__nav--next { left: 202.4px; }

  /* ======================================================================
     7. BRANDS BAND — #2129:3988 at Figma 2928 -> main 2847.
     Local coordinates are the Figma value minus 2928.
     ====================================================================== */
  .brands { top: 2847px; height: 374px; margin-top: 0; }

  .brands__bg { object-fit: fill; }

  .brands__inner {
    position: absolute;
    inset: 0;
    width: var(--frame-mobile);
    padding-block: 0;
  }

  /* #2129:3989 — 791x195 at x:-393, over the photo and under the copy */
  .brands__inner::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -393px;
    top: 70px;
    width: 791px;
    height: 195px;
    background: var(--color-surface-dark);
  }

  .brands__panel {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: var(--frame-mobile);
    height: 374px;
    background: none;
    padding: 0;
  }

  .brands__title {
    position: absolute;
    left: 35px;
    top: 102px;
    width: 320px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-med);   /* style_a7dca690 */
    line-height: 1.06;
    text-align: center;
  }

  /* the stat number and its description are independently placed boxes with
     different widths and different x — they are not one centred column */
  .brands__stats { display: block; margin: 0; position: static; }
  .brands__stat  { position: static; text-align: center; }

  /* #2129:3997 / 3998 — two gold rules between the three stats */
  .brands__stats::before,
  .brands__stats::after {
    content: "";
    position: absolute;
    top: 173px;
    width: 1px;
    height: 60px;
    background: var(--gold);
  }

  .brands__stats::before { left: 131px; }
  .brands__stats::after  { left: 256px; }

  .brands__n {
    position: absolute;
    top: 176px;
    margin: 0;
    font-size: 18px;
    font-weight: var(--fw-reg);
    line-height: 22px;
  }

  .brands__d {
    position: absolute;
    top: 198px;
    margin: 0;
    font-size: 11px;
    font-weight: var(--fw-light);
    line-height: 13px;
  }

  .brands__stat--1 .brands__n { left: 37px;  width: 57px; }
  .brands__stat--2 .brands__n { left: 147px; width: 95px; }
  .brands__stat--3 .brands__n { left: 278px; width: 82px; }

  .brands__stat--1 .brands__d { left: 8px;   width: 114px; }
  .brands__stat--2 .brands__d { left: 145px; width: 99px; }
  /* #2129:3996 is Regular where the other two descriptions are Light */
  .brands__stat--3 .brands__d { left: 261px; width: 115px; font-weight: var(--fw-reg); }

  /* ======================================================================
     8. WORKED WITH — title #2129:3913 at Figma 3338 -> main 3257.
     Local coordinates are the Figma value minus 3338.
     The 390 frame places only TWO of the four logos; 3 and 4 are hidden.
     ====================================================================== */
  .worked { top: 3257px; height: 156px; margin-top: 0; padding-block: 0; }

  .worked__title {
    position: absolute;
    left: 122px;
    top: 0;
    width: 147px;
    margin: 0;
    text-align: left;
    font-size: 20px;
    font-weight: var(--fw-semi);
    line-height: 1.06;
  }

  .worked__viewport { position: static; margin: 0; }
  .worked__track    { display: block; }

  .worked__logo { position: absolute; object-fit: fill; }

  .worked__logo[hidden] { display: none; }

  /* --- page 1: read from the frame ------------------------------------- */
  .worked__logo--yaser    { left: 43px;  top: 53px;    width: 171px; height: 69.13px; }
  .worked__logo--creative { left: 266px; top: 57.88px; width: 81px;  height: 66.89px; }

  /* --- page 2: DERIVED, not in the file --------------------------------
     The 390 frame places only the first two logos. Each of its boxes is
     sized to its own logo's aspect ratio (171/69.13 = 2.474 against the
     yaser bitmap's 2.477; 81/66.89 = 1.211 against creative's 1.212), so
     page 2 fits each remaining logo into the box of the logo it replaces,
     preserving aspect and centring it there:
       hub     2.740 -> width-limited in 171x69.13 -> 171 x 62.41, y +3.36
       mahatta 3.301 -> width-limited in  81x66.89 ->  81 x 24.54, y +21.18
     Mahatta comes out small because Figma's right-hand box is narrow and
     that logo is very wide; flagged rather than rebalanced by inventing a
     new slot. ------------------------------------------------------------ */
  .worked__logo--hub      { left: 43px;  top: 56.36px; width: 171px; height: 62.41px; }
  .worked__logo--mahatta  { left: 266px; top: 79.06px; width: 81px;  height: 24.54px; }

  .worked__nav { top: 72px; transform: none; width: 31.6px; height: 31.6px; }
  .worked__nav img { width: 31.6px; height: 31.6px; }
  .worked__nav--prev { left: 5px; }
  .worked__nav--next { left: 353px; right: auto; }

  .worked__dots { display: block; position: static; margin: 0; }

  .worked__dot { position: absolute; opacity: 1; }

  /* Figma draws THREE dots at x:171/192/211 beside four logos shown two at a
     time — a count that matches neither the logos nor the pages, and the
     1440 frame draws three beside a static row of four, so they are not page
     indicators there either. Four logos two-up is two pages, so two dots are
     rendered and the third is dropped. The pair keeps Figma's 20px centre
     pitch and its vertical centre (3489), re-centred on the canvas centre
     (195) as the file centres its three. Departure from the frame — flagged. */
  .worked__dot:nth-child(1) { left: 181px; top: 147px; width: 8px; height: 8px; }
  .worked__dot:nth-child(2) { left: 201px; top: 147px; width: 8px; height: 8px; }
  .worked__dot:nth-child(3) { display: none; }

  .worked__dot:nth-child(1)[aria-current="true"] { left: 180px; top: 146px; width: 10px; height: 10px; }
  .worked__dot:nth-child(2)[aria-current="true"] { left: 200px; top: 146px; width: 10px; height: 10px; }

  /* ======================================================================
     9. FINAL CTA — frame #2129:3943 at Figma 3530 -> main 3449.
     Local coordinates are the Figma value minus 3530. Same pseudo-element
     panel as the stage block, for the same reason.
     ====================================================================== */
  .cta {
    top: 3449px;
    height: 244px;
    margin-top: 0;
    margin-bottom: 0;
    padding-block: 0;
    overflow: hidden;
  }

  .cta__outline {
    display: block;
    position: absolute;
    z-index: 1;
    left: -345px;
    top: 0;
    width: 761px;
    height: 244px;
    background: var(--bg);
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  /* #2129:3945 — 714x217 at x:-307 */
  .cta::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: -307px;
    top: 14px;
    width: 714px;
    height: 217px;
    background: var(--color-surface-dark);
  }

  .cta__panel {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    width: var(--frame-mobile);
    height: 244px;
    background: none;
    padding: 0;
    text-align: left;
  }

  .cta__title {
    position: absolute;
    left: 32px;
    top: 50px;
    width: 326px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    line-height: 1.06;
    text-align: center;
  }

  .cta__sub {
    position: absolute;
    left: 44px;
    top: 98px;
    width: 295px;
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
  }

  .cta__btn {
    position: absolute;
    left: 9px;
    top: 147px;
    width: 373px;
    margin: 0;
    font-weight: var(--fw-bold);
  }
}

/* ==========================================================================
   TABLET reflow (not verified against frame #2129:6058)
   ========================================================================== */
@media (min-width: 768px) {
  .hero__card { padding: 50px 40px; }
  .pain__row--1,
  .pain__row--2 { grid-template-columns: repeat(2, 1fr); }
  .stage__cols { grid-template-columns: repeat(3, 1fr); }
  .steps__grid { grid-template-columns: repeat(2, 1fr); }
  .steps__card { padding: 52px 40px 56px; }
  .results__grid { grid-template-columns: repeat(2, 1fr); }
  .brands__stats { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   DESKTOP — literal Figma geometry, 1440 canvas
   ========================================================================== */
@media (min-width: 1200px) {

  /* --- full-bleed bands ---------------------------------------------------
     `main` runs the full document width so the coloured/photographic bands
     reach both edges on any monitor. Everything that carries Figma geometry
     is held to a centred 1440 canvas instead.

     Deliberately no `100vw` here: with a vertical scrollbar present 100vw is
     wider than the content area, so bands overhang and rely on clipping —
     which shifts with window size and zoom. Percentages resolve against the
     document width, which is exactly what we want.
  ------------------------------------------------------------------------ */
  .page-home main { width: 100%; max-width: none; }

  /* sections that position children against the 1440 grid stay on the grid */
  .pain,
  .stage,
  .results,
  .worked,
  .cta {
    width: var(--frame-desktop);
    margin-left: calc((100% - 1440px) / 2);
    margin-right: calc((100% - 1440px) / 2);
  }

  .container { max-width: none; width: 100%; padding-inline: 0; margin-inline: 0; }

  /* bands span the document; their contents return to the 1440 canvas */
  .hero__band,
  .steps__band,
  .fabric,
  .brands { width: 100%; margin-left: 0; }

  .hero__inner   { width: 1410px; margin-left: calc((100% - 1440px) / 2 + 30px); margin-right: 0; }
  .steps__inner  { width: 1438px; margin-left: calc((100% - 1440px) / 2 + 2px);  margin-right: 0; }
  .fabric__inner { width: 1410px; margin-left: calc((100% - 1440px) / 2 + 30px); }
  .brands__inner { width: var(--frame-desktop); margin-left: calc((100% - 1440px) / 2); margin-right: 0; }

  /* Figma renders these as one line (h39). The browser measures the same
     strings 1-4px wider, which forced a second line and pushed every later
     section down 40px. Hold them to the single line the design specifies. */
  .fabric__title,
  .fabric__note,
  .results__title,
  .worked__title,
  .brands__n,
  .btn { white-space: nowrap; }

  /* --- hero: frame y:279 --- */
  /* Figma puts this hero at y:279 and the Launch/Growth/Scale heroes at y:102.
     Both are pulled to a shared y:190 so the card sits at the same height
     across all four pages (190 - 76px header = 114). Deliberate deviation;
     every gap below the hero keeps its Figma value, the block just moves. */
  .hero { margin-top: 114px; }
  .hero__band { height: 442px; padding-block: 0; }
  .hero__inner { width: 1410px; height: 442px; }
  .hero__card {
    position: absolute;
    left: 0;
    top: 0;
    width: 888px;
    height: 442px;
    padding: 50px 21px 0 65px; /* text lands on x:110, H1 gets its 772px */
  }
  .hero__title { margin-top: var(--space-16); max-width: 772px; }
  .hero__lead  { margin-top: var(--space-16); max-width: 582px; }
  .hero__cta   { margin-top: 54px; }
  .hero__model { display: block; left: 896px; top: -34px; width: 608px; height: 608px; }

  /* --- pain: H2 y:813 (92 below hero) --- */
  .pain { padding-block: 0; margin-top: 92px; }
  .pain__title { margin: 0 0 0 378px; width: 744px; max-width: none; }
  .pain__row { display: flex; gap: 0; }
  .pain__row--1 { margin-top: 48px; margin-left: 175px; }
  .pain__row--2 { margin-top: 60px; margin-left: 418px; }
  .pain__row--1 .pain__item:nth-child(1) { width: 274px; }
  .pain__row--1 .pain__item:nth-child(2) { width: 301px; margin-left: 184px; }
  .pain__row--1 .pain__item:nth-child(3) { width: 253px; margin-left: 148px; }
  .pain__row--2 .pain__item:nth-child(1) { width: 252px; }
  .pain__row--2 .pain__item:nth-child(2) { width: 237px; margin-left: 182px; }

  /* --- fabric: y:1171 h344 (92 below pain) --- */
  .fabric { margin-top: 92px; height: 344px; text-align: left; }
  .fabric__inner { padding-block: 0; }
  .fabric__title { margin: 72px 0 0 261px; width: 919px; text-align: center; }
  .fabric__note  { margin: 16px 0 0 534px; width: 372px; font-size: var(--fs-lead); line-height: 22px; text-align: center; }
  .fabric__cta   { margin: 32px 0 0 601px; width: 239px; }

  /* --- stage: outline y:1547 h400, panel y:1587 h432 --- */
  .stage { height: 472px; margin-top: 32px; padding-block: 0; }
  .stage__outline {
    display: block;
    position: absolute;
    z-index: 1;
    left: 50px;
    top: 0;
    width: 1400px;
    height: 400px;
    border: var(--stroke-1) solid var(--color-surface-dark);
  }
  .stage__panel { position: absolute; left: 110px; top: 40px; width: 1280px; height: 432px; padding: 0; }
  .stage__title { margin: 72px 0 0 456px; width: 369px; max-width: none; }
  .stage__sub   { margin: 4px 0 0 476px; width: 329px; max-width: none; }
  .stage__cols  { display: block; margin: 0; }
  .stage__col   { position: absolute; top: 248px; }
  .stage__col--before { left: 146px; width: 239px; }
  .stage__col--system { left: 509px; width: 261px; }
  .stage__col--after  { left: 897px; width: 239px; }
  .stage__colhead { margin-left: 15px; }
  .stage__flow { height: 75px; }
  .stage__flowitem { position: absolute; }
  .stage__flowitem--1 { left: 14px;  top: 0; }
  .stage__flowitem--2 { left: 210px; top: 25px; }
  .stage__flowitem--3 { left: 279px; top: 50px; }
  .stage__flowarrow { display: block; position: absolute; }
  .stage__flowarrow--1 { left: 21px;  top: 17px; }
  .stage__flowarrow--2 { left: 105px; top: 43px; }

  /* --- steps: band y:2091 h698 (72 below stage) --- */
  .steps { margin-top: 72px; }
  .steps__band { height: 698px; }
  .steps__inner { width: 1438px; height: 698px; }
  .steps__card {
    position: absolute;
    left: 28px;
    top: 0;
    width: 888px;
    height: 698px;
    padding: 57px 0 0 64px;
  }
  .steps__grid {
    grid-template-columns: repeat(2, 252px);
    gap: 125px 72px;
    margin-top: 126px;
    padding-left: 40px;
  }
  /* Figma x:159 y:2251 / y:2508. Offsets are from the card's padding box,
     which starts at page 45,2106 (card 30,2091 + 15px border). */
  .steps__arrow { display: block; position: absolute; width: 293px; pointer-events: none; }
  .steps__arrow--1 { left: 114px; top: 145px; }
  .steps__arrow--2 { left: 114px; top: 402px; }
  .steps__model { display: block; left: 804px; top: -13px; width: 752px; height: 752px; }

  /* --- results: H2 y:2861 (72 below steps) --- */
  .results { padding-block: 0; margin-top: 72px; }
  .results__title { margin: 0 0 0 518px; width: 464px; text-align: center; }
  .results__grid {
    display: grid;
    grid-template-columns: repeat(3, 389px);
    gap: 45px;
    margin: 64px 0 0 122px;
  }
  .case { width: 389px; height: 271px; padding: 28px 23px 0; }

  /* --- brands: image y:3307 h440 (72 below results) --- */
  .brands { margin-top: 72px; height: 440px; }
  .brands__inner { padding-block: 0; height: 440px; position: relative; }
  .brands__panel { position: absolute; left: 13px; top: 47px; width: 745px; height: 339px; padding: 0; }
  .brands__title { margin: 72px 0 0 97px; width: 536px; max-width: none; }
  .brands__stats { display: block; margin: 0; }
  .brands__stat  { position: absolute; top: 198px; text-align: center; }
  .brands__stat--1 { left: 97px;  width: 112px; }
  .brands__stat--2 { left: 287px; width: 92px; }
  .brands__stat--3 { left: 476px; width: 125px; }
  .brands__n { font-size: var(--fs-stat); }

  /* --- worked with: H2 y:3819 (72 below brands) --- */
  .worked { position: relative; height: 269px; padding-block: 0; margin-top: 72px; }
  .worked__title { margin: 0 0 0 633px; width: 235px; text-align: center; }
  .worked__viewport { position: static; margin: 0; }
  .worked__track { display: block; }
  .worked__logo { position: absolute; }
  .worked__logo--yaser   { left: 174px;  top: 82px;  width: 304px; height: 122px; }
  .worked__logo--creative{ left: 555px;  top: 87px;  width: 155px; height: 128px; }
  .worked__logo--hub     { left: 788px;  top: 96px;  width: 256px; height: 94px; }
  .worked__logo--mahatta { left: 1119px; top: 118px; width: 207px; height: 63px; }
  .worked__nav { top: auto; transform: none; }
  .worked__nav--prev { left: 97px;   top: 129px; }
  .worked__nav--next { left: 1363px; right: auto; top: 135px; }
  .worked__dots { position: absolute; left: 726px; top: 259px; margin: 0; justify-content: flex-start; }

  /* --- final CTA: outline y:4160, panel y:4200 (72 below dots) --- */
  .cta { height: 376px; margin-top: 72px; padding-block: 0; margin-bottom: 146px; }
  .cta__outline {
    display: block;
    position: absolute;
    z-index: 1;
    left: 50px;
    top: 0;
    width: 1400px;
    height: 304px;
    border: var(--stroke-1) solid var(--color-surface-dark);
  }
  /* text-align:left so the explicit Figma offsets below are not compounded
     by centring; the title/sub keep centred text inside their own boxes */
  .cta__panel { position: absolute; left: 110px; top: 40px; width: 1280px; height: 336px; padding: 0; text-align: left; }
  .cta__title { margin: 72px 0 0 393px; width: 494px; max-width: none; text-align: center; }
  .cta__sub   { margin: 4px 0 0 451px; width: 379px; max-width: none; text-align: center; }
  .cta__btn   { margin: 32px 0 0 521px; width: 239px; }
}

/* ==========================================================================
   TABLET — literal Figma geometry, 768 canvas
   Source of truth: frame "tablet home" #2129:6058 (768 x 4630).

   The frame draws no header and no footer, so its y:0 is the top of the page.
   The tablet header is 81 tall, so `main` = 4630 - 81 = 4549 and EVERY
   COORDINATE BELOW IS THE FIGMA VALUE MINUS 81. Each section carries its own
   origin, noted at its block, and children are written against that section
   so nothing compounds down the page.

   `<main>` ON THIS PAGE HAS NO CLASS — everything is `.page-home main`.

   STROKE ALIGNMENT: batched as node renders over 6095 / 6131 / 6132 / 6061 /
   6066 / 6067 / 6098 — all seven come back at exactly their declared size, so
   EVERY bordered box on this frame is INSIDE.

   Line heights are written in px: Figma rounds line-height to the nearest
   integer pixel, and every multi-line box then matches its declared height.

   NOT PORTED — four decorative overlays, all flagged:
     #2129:6094  hero ring     declared 936.42x736.15, node render 855x553
     #2129:6065  steps ring    declared 1081.64x1037.89, render 956x809
     #2268:1380  results ring  declared 1452.44x1272.12, render 1219x833
   For these three the API's declared box and Figma's own node render
   disagree, so neither their scale nor their origin can be read from the
   file — the same mismatch the events mobile rings hit (#2268:1380 is
   literally the same node id, and the same 1219x833). Every other node on
   this frame renders at exactly its declared size, so this is specific to
   them.
     #2129:6072  a 323x97 #292828 vector under the steps model. It is
   declared BEFORE the model photo #2129:6073, which covers it completely —
   sampling the frame render inside its box returns the photo, not the shape.
   Invisible in the composed frame, so it is left out.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

  .page-home main {
    position: relative;
    width: var(--frame-tablet);
    max-width: none;
    height: 4416px;              /* frame 4630 - 81 header */
    margin-inline: auto;
    padding: 0;
  }

  .page-home main > section {
    position: absolute;
    left: 0;
    width: var(--frame-tablet);
    margin: 0;
    padding: 0;
  }

  /* wrappers that must not re-pad, re-centre or become an offset parent */
  .page-home .container,
  .page-home .hero__inner,
  .page-home .fabric__inner,
  .page-home .brands__inner,
  .page-home .steps__band,
  .page-home .steps__inner,
  .page-home .stage__cols,
  .page-home .stage__col,
  .page-home .stage__list,
  .page-home .stage__flow,
  .page-home .steps__grid,
  .page-home .results__grid,
  .page-home .pain__row,
  .page-home .brands__stats,
  .page-home .worked__viewport {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    overflow: visible;
    gap: 0;
  }

  /* all three buttons are the 239x52 instance, Open Sans Bold 14 UPPER */
  .page-home .hero__cta,
  .page-home .fabric__cta,
  .page-home .cta__btn {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 239px;
    height: 52px;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-button);
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 19px;
    letter-spacing: normal;
    text-transform: uppercase;
  }

  /* ======================================================================
     1. HERO — frame #2129:6092 at Figma 106 -> main 25.
     Section origin is Figma 106; local coordinates are the value minus 106.

     The section must NOT clip: the model #2129:6105 runs from y:254 to 677,
     i.e. 93px BELOW the 584 band bottom, and the frame does not clip it
     (checked against the frame render — the boots sit in the gap above the
     pain heading). Horizontal bleed past 768 is already handled globally by
     `html { overflow-x: clip }` in base.css.
     ====================================================================== */
  .hero { top: 25px; height: 478px; padding: 0; overflow: visible; }

  /* #2129:6093 — 769 wide, one pixel past the canvas, as the file draws it */
  .page-home .hero__band {
    position: absolute;
    left: 0;
    top: 0;
    width: 769px;
    height: 478px;
    padding: 0;
    background: var(--color-surface-dark);
  }

  /* #2129:6095 — 623x478 with a 15px INSIDE stroke in the band's own colour */
  .hero__card {
    position: absolute;
    left: 0;
    top: 0;
    width: 623px;
    height: 478px;
    padding: 0;
    background: var(--bg);
    border: 15px solid var(--color-surface-dark);
  }

  /* offsets below are from the card's padding box, 15px inside its border */
  .hero__tabs { position: absolute; left: 27px; top: 57px; gap: 16px; }

  .hero__tab { font-size: 12px; line-height: 15px; }

  .hero__tab--active { height: 25px; padding: 5px 18px 5px 19px; font-size: 12px; }

  /* 560 against Figma's declared 557: Chrome measures the file's own first
     line, "YOU HAVE AN IDEA FOR A FASHION", at 558.39 — 1.4px past the box —
     which pulled FASHION down and re-broke all three lines. The line COUNT
     stays 3 either way, so the height check passes and only a pixel diff
     catches it. Window is 559 to ~660 (above that BRAND joins line 1). */
  .hero__title {
    position: absolute;
    left: 27px;
    top: 98px;
    width: 560px;
    max-width: none;
    margin: 0;
    font-size: 32px;
    font-weight: var(--fw-bold);
    line-height: 34px;           /* 32 * 1.06 = 33.92 -> 34; box 102 = 3 lines */
    text-transform: uppercase;
  }

  /* 518 against Figma's declared 517 — the file's own second line,
     "Wrong decisions at this stage can cost you months — or even years.",
     measures 517.31 in Chrome and spilled a third line. */
  .hero__lead {
    position: absolute;
    left: 27px;
    top: 214px;
    width: 518px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 19px;           /* box 38 = 2 lines */
  }

  /* MANUAL BREAK. Figma ends line 1 at "stuck." and starts line 2 with
     "Wrong", though "Wrong" would still fit (355.23 + 48 against a 517 box) —
     so the break is authored, not a wrap, and the API returned it unescaped.
     Same line count either way, so only a pixel diff catches it. Tablet-only:
     the 1440 and 390 frames both let this paragraph flow. */
  .hero__lead .hm-brk { display: inline; }
  .hero__lead .hm-brk::before { content: "\A"; white-space: pre; }

  /* `margin: 0` on `.hero__lead` above is (0,1,0) and LOSES to the base rule
     `.hero__lead + .hero__lead { margin-top: 8px }` at (0,2,0) — and an
     absolutely positioned box still honours margin, so the second lead sat
     exactly 8px low until this matched that specificity. */
  .hero__lead + .hero__lead { top: 258px; width: 437px; margin: 0; }

  .hero__cta { left: 27px; top: 327px; }

  /* PAINT ORDER IS REVERSED AGAINST DESKTOP, exactly as it is at 390: Figma
     declares the model #2129:6105 AFTER the plate #2129:6095, so it paints
     over it — the figure's head and shoulders sit on the white card from
     x:441 to 623. The shared rules give `.hero__model` z-index 1 against
     `.hero__card`'s 2, which is right at 1440 and wrong here, so it is raised
     rather than reordered. Measurement cannot catch this: every box was at
     its Figma coordinate while the card painted the model's head out. */
  .hero__model {
    display: block;
    position: absolute;
    left: 441px;
    top: 148px;
    width: 426px;
    height: 423px;
    max-width: none;
    object-fit: fill;
    z-index: 3;
  }

  /* ======================================================================
     2. PAIN — title #2129:6106 at Figma 651 -> main 570.
     Local coordinates are the Figma value minus 651.

     Each bullet is a GROUP whose dot sits at the group origin and whose text
     carries its own offset — (20,4) (21,4) (18,4) (17,8) (15,8). None of it
     is derivable from the first, so all five are written out.
     ====================================================================== */
  .pain { top: 570px; height: 240px; padding: 0; z-index: 2; }

  .pain__title {
    position: absolute;
    left: 84px;
    top: 0;
    width: 600px;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-semi);
    line-height: 31px;           /* box 62 = 2 lines */
    text-align: center;
    text-transform: uppercase;
  }

  .pain__item {
    position: absolute;
    display: block;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .pain__item::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    margin: 0;
  }

  .pain__item p {
    position: absolute;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 17px;           /* 16 * 1.04 = 16.64 -> 17; box 51 = 3 lines */
  }

  .pain__row--1 .pain__item:nth-child(1) { left: 42px;  top: 94px;  }
  .pain__row--1 .pain__item:nth-child(2) { left: 302px; top: 94px;  }
  .pain__row--1 .pain__item:nth-child(3) { left: 546px; top: 98px;  }
  .pain__row--2 .pain__item:nth-child(1) { left: 158px; top: 181px; }
  .pain__row--2 .pain__item:nth-child(2) { left: 460px; top: 181px; }

  .pain__row--1 .pain__item:nth-child(1) p { left: 20px; top: 4px; width: 184px; }
  .pain__row--1 .pain__item:nth-child(2) p { left: 21px; top: 4px; width: 176px; }
  .pain__row--1 .pain__item:nth-child(3) p { left: 18px; top: 4px; width: 164px; }
  .pain__row--2 .pain__item:nth-child(1) p { left: 17px; top: 8px; width: 148px; }
  .pain__row--2 .pain__item:nth-child(2) p { left: 15px; top: 8px; width: 146px; }

  /* ======================================================================
     3. FABRIC BAND — image #2129:6125 at Figma 939 -> main 858.
     Local coordinates are the Figma value minus 939.
     ====================================================================== */
  .fabric { top: 858px; height: 268px; padding: 0; }

  .fabric__bg {
    position: absolute;
    inset: auto;
    left: 1px;
    top: 0;
    width: 768px;
    height: 268px;
    max-width: none;
    object-fit: fill;
  }

  .fabric__title {
    position: absolute;
    left: 192px;
    top: 48px;
    width: 385px;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-semi);
    line-height: 31px;           /* box 62 = 2 lines */
    text-align: center;
    text-transform: uppercase;
  }

  .fabric__note {
    position: absolute;
    left: 198px;
    top: 118px;
    width: 372px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-med);
    line-height: 19px;
    text-align: center;
  }

  /* #2129:6128 is the LIGHT variant — an #F8F8F8 plate with a dark label */
  .fabric__cta {
    left: 265px;
    top: 169px;
    background: var(--bg);
    color: var(--color-surface-dark);
  }

  /* ======================================================================
     4. STAGE — outline #2129:6131 at Figma 1255 -> main 1174.
     Local coordinates are the Figma value minus 1255.

     The three columns are NOT a row at 768: BEFORE (x 64-303) and SYSTEM
     (x 443-704) sit side by side, and AFTER is centred BELOW them at y 1640.
     ====================================================================== */
  .stage { top: 1174px; height: 540px; padding: 0; }

  .stage__outline {
    display: block;
    position: absolute;
    left: 16px;
    top: 0;
    width: 735px;
    height: 493px;
    background: var(--bg);
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  /* #2129:6133 — 514 tall, i.e. TALLER than the 493 outline it sits in, so
     the section is sized to the panel (1795 - 1255) and not to the outline */
  .stage__panel {
    position: absolute;
    left: 39px;
    top: 26px;
    width: 689px;
    height: 514px;
    margin: 0;
    padding: 0;
    background: var(--color-surface-dark);
    text-align: left;
  }

  /* everything below is PANEL-relative — the panel has no border, so each
     offset is the Figma value minus the panel origin (39, 1281) */
  .stage__title {
    position: absolute;
    left: 186px;
    top: 48px;
    width: 318px;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-med);
    line-height: 31px;           /* box 62 = 2 lines */
    text-align: center;
    text-transform: uppercase;
  }

  .stage__sub {
    position: absolute;
    left: 199px;
    top: 118px;
    width: 292px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 19px;
    text-align: center;
  }

  .stage__colhead {
    position: absolute;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .stage__colhead--before { left: 40px;  top: 187px; width: 62px;  }
  .stage__colhead--system { left: 418px; top: 195px; width: 234px; }
  .stage__colhead--after  { left: 254px; top: 359px; width: 51px;  }

  .stage__rule { position: absolute; height: 1px; margin: 0; }
  .stage__rule--before { left: 25px; top: 212px; width: 239px; }
  .stage__col--system .stage__rule { left: 404px; top: 219px; width: 261px; }
  .stage__col--after  .stage__rule { left: 233px; top: 384px; width: 239px; }

  /* the list entries sit on a 25px STEP with a 17px line-height — the gap is
     not the line-height, so each row is placed rather than flowed */
  .stage__list { margin: 0; }

  .stage__list li {
    position: absolute;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 17px;
    white-space: nowrap;
  }

  .stage__list li::before { position: absolute; width: 8px; height: 8px; }

  .stage__list--before li { left: 54px; }
  .stage__list--before li:nth-child(1) { top: 228px; }
  .stage__list--before li:nth-child(2) { top: 253px; }
  .stage__list--before li:nth-child(3) { top: 278px; }
  .stage__list--before li::before { left: -13px; top: 4px; }

  .stage__list--after li { left: 266px; }
  .stage__list--after li:nth-child(1) { top: 400px; }
  .stage__list--after li:nth-child(2) { top: 425px; }
  .stage__list--after li:nth-child(3) { top: 450px; }
  .stage__list--after li::before { left: -12px; top: 4px; }

  .stage__flow { margin: 0; }

  .stage__flowitem {
    position: absolute;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 17px;
    white-space: nowrap;
  }

  .stage__flowitem--1 { left: 418px; top: 236px; width: 95px; }
  .stage__flowitem--2 { left: 504px; top: 261px; width: 64px; }
  .stage__flowitem--3 { left: 573px; top: 286px; width: 74px; }

  .stage__flowarrow { display: block; position: absolute; max-width: none; }
  .stage__flowarrow--1 { left: 425.5px; top: 253.5px; width: 70.5px; height: 26px; }
  .stage__flowarrow--2 { left: 509px;   top: 279px;   width: 59px;   height: 26px; }

  /* ======================================================================
     5. FOUR STEPS — frame #2129:6059 at Figma 1843 -> main 1762.
     Local coordinates are the Figma value minus 1843.

     The dark band is NOT full bleed here: #2129:6060 is only 269 wide at
     x:512, with the light plate #2129:6061 filling x:-1 to 513.
     `.steps__band` is therefore made a pass-through and the dark rect drawn
     as its ::before, so `.steps__card` resolves against the SECTION rather
     than against the band.
     ====================================================================== */
  .steps { top: 1762px; height: 866px; padding: 0; }

  .page-home .steps__band::before {
    content: "";
    position: absolute;
    left: 512px;
    top: 0;
    width: 269px;
    height: 866px;
    background: var(--color-surface-dark);
  }

  /* #2129:6061 — 514x866 with a 12px INSIDE stroke */
  .steps__card {
    position: absolute;
    left: -1px;
    top: 0;
    width: 514px;
    height: 866px;
    padding: 0;
    background: var(--bg);
    border: 12px solid var(--color-surface-dark);
  }

  /* offsets below are from the card's padding box, 12px inside its border */
  .steps__title {
    position: absolute;
    left: 29px;
    top: 36px;
    width: 272px;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-semi);
    line-height: 31px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* MEASURED, NOT READ — the three gold connectors #2129:6062 / 6064 / 6063.
     Their SVG exports trim to the ink bounds (106x165 against a declared
     137.56x185.33), and stretching to the declared box would distort the
     curve, so each is placed at the ink box scanned off the frame render:
     arc1 x 22..125 y 1996..2159, arc2 x 103..161 y 2215..2316, arc3
     x 22..125 y 2366..2529. Note the declared Y is exactly right on arcs 1
     and 3 (153 and 523 frame-relative) and only the X is wrong — the same
     shape of error the consultation page's connector arrows had. */
  .steps__arc {
    display: block;
    position: absolute;
    max-width: none;
  }

  .steps__arc--1 { left: 11px; top: 141px; width: 106px; height: 165px; }
  .steps__arc--2 { left: 92px; top: 360px; width: 61px;  height: 107px; }
  .steps__arc--3 { left: 11px; top: 511px; width: 106px; height: 165px; }

  .steps__grid { margin: 0; padding: 0; }

  .step {
    position: absolute;
    width: 252px;
    height: 132px;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .step:nth-child(1) { left: 70px;  top: 125px; }
  .step:nth-child(2) { left: 165px; top: 307px; }
  .step:nth-child(3) { left: 70px;  top: 489px; }
  .step:nth-child(4) { left: 165px; top: 671px; }

  /* the badge keeps the base rule's -40 / -26 overhang, which is exactly what
     this frame draws (#2129:6067 at 40,111 against its card at 80,137) */
  .step__badge { width: 68px; height: 68px; font-size: 14px; line-height: 17px; }

  .step__title {
    position: absolute;
    left: 27px;
    top: 28px;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-med);
    line-height: 17px;
    white-space: nowrap;
  }

  .step__rule {
    position: absolute;
    left: 0;
    top: 53px;
    width: 250px;
    margin: 0;
  }

  .step__desc {
    position: absolute;
    left: 27px;
    top: 61px;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 17px;
  }

  .step:nth-child(1) .step__desc { width: 180px; }   /* 3 lines */
  .step:nth-child(2) .step__desc { width: 199px; }   /* 3 lines */
  .step:nth-child(3) .step__desc { width: 199px; }   /* 2 lines */
  .step:nth-child(4) .step__desc { width: 211px; }   /* 1 line  */

  /* Same reversal as the hero: Figma declares the model #2129:6073 AFTER the
     plate #2129:6061, so it paints over it and its dark lower body cuts into
     the plate's bottom-right corner. `.steps__card` carries z-index 2 from
     the shared rules, so the photo has to be raised above it. Safe because
     the node render is 88% transparent — the plate and step 1's card show
     through, and the model's opaque pixels start well right of the cards. */
  .steps__model {
    display: block;
    position: absolute;
    left: 217px;
    top: 181px;
    width: 725px;
    height: 725px;
    max-width: none;
    object-fit: fill;
    z-index: 3;
  }

  /* ======================================================================
     6. RESULTS — title #2129:6108 at Figma 2757 -> main 2676.
     Local coordinates are the Figma value minus 2757.

     The 768 frame lays ALL THREE cards out (one centred over two), so no
     carousel runs here — cases.js gates on max-width 767 and the prev/next
     pair stays hidden by the base rule.
     ====================================================================== */
  .results { top: 2676px; height: 625px; padding: 0; }

  .results__title {
    position: absolute;
    left: 196px;
    top: 0;
    width: 377px;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-semi);
    line-height: 31px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* the card is the SAME 333x271 component the 390 frame uses, so its
     internals are the numbers the mobile block already verified */
  .case {
    position: absolute;
    width: 333px;
    height: 271px;
    padding: 0;
  }

  .results__grid .case:nth-child(1) { left: 218px; top: 63px;  }
  .results__grid .case:nth-child(2) { left: 41px;  top: 354px; }
  .results__grid .case:nth-child(3) { left: 394px; top: 354px; }

  /* all three titles are centred in the card: 135, 197 and 71 wide land at
     x 99, 68 and 131, which is (333 - w) / 2 in each case */
  .case__brand {
    position: absolute;
    left: 0;
    top: 30px;
    width: 333px;
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: var(--fw-med);
    line-height: 17px;
  }

  .case__list { position: static; margin: 0; }

  .case__row { position: absolute; left: 0; width: 333px; margin: 0; }
  .case__row + .case__row { margin-top: 0; }

  .case__list .case__row:nth-child(1) { top: 76px;  }
  .case__list .case__row:nth-child(2) { top: 134px; }
  .case__list .case__row:nth-child(3) { top: 189px; }

  .case__label {
    position: absolute;
    left: 22px;
    top: 0;
    font-size: 14px;
    font-weight: var(--fw-med);
    line-height: 17px;
  }

  /* the gold bar is anchored to the card edge (x:1), not to the label's own
     text box, which starts at x:22 like every other */
  .case__label--result {
    left: 1px;
    width: 108px;
    height: 23px;
    padding-left: 21px;
    line-height: 23px;
    text-align: left;
  }

  .case__value {
    position: absolute;
    left: 22px;
    top: 25px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 17px;
  }

  /* Same fix as the 390 block: the rows sit at fixed tops, so a two-line
     value runs into the next row's label. The 768 frame lays all three cards
     out at once, so cards 2 and 3 are visible here rather than behind a
     carousel, and both were colliding. Widened to the card's inner width
     (333 - 22 - 22 = 289); card 1 is unaffected because its values still fit
     on one line. */
  .case__list .case__row:nth-child(1) .case__value,
  .case__list .case__row:nth-child(2) .case__value { width: 289px; }

  .case__list .case__row:nth-child(3) .case__value {
    top: 28px;
    width: 289px;
    font-weight: var(--fw-reg);
  }

  /* ======================================================================
     7. BRANDS BAND — image #2129:6168 at Figma 3429 -> main 3348.
     Local coordinates are the Figma value minus 3429.

     The dark panel is declared at x:-135 and is 745 wide, so only its right
     610px is on canvas. The section clips, which is what the artboard does.
     ====================================================================== */
  .brands { top: 3348px; height: 355px; padding: 0; overflow: hidden; }

  .brands__bg {
    position: absolute;
    inset: auto;
    left: -1px;
    top: 0;
    width: 768px;
    height: 355px;
    max-width: none;
    object-fit: fill;
  }

  .brands__panel {
    position: absolute;
    left: -135px;
    top: 48px;
    width: 745px;
    height: 259px;
    margin: 0;
    padding: 0;
    background: var(--color-surface-dark);
  }

  /* PANEL-relative from here — the panel has no border, so each offset is the
     Figma value minus the panel origin (-135, 3477) */
  .brands__title {
    position: absolute;
    left: 175px;
    top: 48px;
    width: 423px;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-med);
    line-height: 31px;           /* box 62 = 2 lines */
    text-transform: uppercase;
  }

  .brands__stats { margin: 0; }

  .brands__n {
    position: absolute;
    margin: 0;
    font-size: 24px;
    font-weight: var(--fw-reg);
    line-height: 29px;
    text-align: center;
    white-space: nowrap;
  }

  .brands__d {
    position: absolute;
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 15px;           /* box 30 = 2 lines */
    text-align: center;
  }

  .brands__stat--1 .brands__n { left: 193px; top: 150px; width: 76px;  }
  .brands__stat--2 .brands__n { left: 335px; top: 150px; width: 126px; }

  /* #2129:6173 is the odd one out: 142x24 at y:3630 where the other two are
     29 tall at y:3627, on the same 24px Inter Regular style. Its own declared
     box is reproduced rather than sharing the 29. */
  .brands__stat--3 .brands__n { left: 509px; top: 153px; width: 142px; line-height: 24px; }

  .brands__stat--1 .brands__d { left: 175px; top: 181px; width: 112px; }
  .brands__stat--2 .brands__d { left: 352px; top: 181px; width: 92px;  }
  .brands__stat--3 .brands__d { left: 517px; top: 181px; width: 126px; }

  /* ======================================================================
     8. WORKED WITH — title #2129:6109 at Figma 3831 -> main 3750.
     Local coordinates are the Figma value minus 3831.

     The frame draws only TWO of the four logos, with a prev/next pair and
     three dots — structurally the same control the 390 frame draws. home.js
     therefore pages them two-up in this band as well, so Fashion Hub and
     Al Mahatta stay reachable. DERIVED, NOT PORTED: Figma pins one state and
     specifies no transition, and four logos two-up is two pages against the
     three dots drawn. Needs client sign-off.
     ====================================================================== */
  .worked { top: 3750px; height: 280px; padding: 0; text-align: left; }

  .worked__title {
    position: absolute;
    left: 289px;
    top: 0;
    width: 191px;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-semi);
    line-height: 31px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .worked__track { display: block; }

  .worked__logo { position: absolute; max-width: none; object-fit: fill; }
  .worked__logo[hidden] { display: none; }

  .worked__logo--yaser    { left: 106px; top: 88px; width: 304px; height: 122px; }
  .worked__logo--creative { left: 487px; top: 93px; width: 155px; height: 128px; }
  /* page 2 reuses the two boxes above; home.js swaps which pair is shown */
  .worked__logo--hub      { left: 106px; top: 88px; width: 304px; height: 122px; }
  .worked__logo--mahatta  { left: 487px; top: 93px; width: 155px; height: 128px; }

  .worked__nav {
    position: absolute;
    top: auto;
    transform: none;
    width: 40px;
    height: 40px;
  }

  .worked__nav--prev { left: 29px;  top: 135px; right: auto; }
  .worked__nav--next { left: 687px; top: 141px; right: auto; }
  .worked__nav img { width: 40px; height: 40px; }

  .worked__dots {
    position: absolute;
    left: 360px;
    top: 265px;
    justify-content: flex-start;
    gap: 11px;
    margin: 0;
  }

  /* ======================================================================
     9. FINAL CTA — outline #2129:6132 at Figma 4154 -> main 4073.
     Local coordinates are the Figma value minus 4154. The panel is again
     taller than its outline, so the section is sized to the panel.
     ====================================================================== */
  .cta { top: 4073px; height: 295px; padding: 0; }

  .cta__outline {
    display: block;
    position: absolute;
    left: 16px;
    top: 0;
    width: 735px;
    height: 247px;
    background: var(--bg);
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  .cta__panel {
    position: absolute;
    left: 39px;
    top: 26px;
    width: 689px;
    height: 269px;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  /* PANEL-relative: the Figma value minus the panel origin (39, 4180) */
  .cta__title {
    position: absolute;
    left: 141px;
    top: 48px;
    width: 408px;
    max-width: none;
    margin: 0;
    font-size: 26px;
    font-weight: var(--fw-med);
    line-height: 31px;           /* box 62 = 2 lines */
    text-align: center;
    text-transform: uppercase;
  }

  .cta__sub {
    position: absolute;
    left: 177px;
    top: 118px;
    width: 337px;
    max-width: none;
    margin: 0;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 19px;
    text-align: center;
  }

  .cta__btn { left: 226px; top: 169px; }
}

/* ==========================================================================
   WORKED WITH — 8-logo uniform strip (2026-07-21)
   The client added four brands to the four the frames drew. Figma only
   positions four at exact coordinates per breakpoint, so an 8-logo wall is a
   redesign, not a port: every logo is normalised to a uniform HEIGHT and laid
   out with flexbox (the standard for a logo strip), replacing the per-logo
   absolute coordinates. Appended last so it overrides the verified blocks by
   source order without editing them.

   Desktop shows all eight in one centred row (no paging). The two narrow
   bands page two-up across four pages with the prev/next pair and four dots,
   driven by home.js (pages = ceil(8 / 2) = 4).
   ========================================================================== */
.worked__track {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 44px;
}
.worked__logo {
  position: static;
  height: 44px;
  width: auto;
  max-width: none;
  object-fit: contain;
}
.worked__logo[hidden] { display: none; }

/* the absolute track spans the band and, on the narrow layouts, overlaps the
   prev/next arrows to its left and right — its empty area would block those
   clicks. The logos are not interactive, so the track passes pointer events
   through and only the logos themselves take them (for the hover lift). */
.worked__track { pointer-events: none; }
.worked__logo { pointer-events: auto; }

/* dots as a centred flex row at every breakpoint */
.worked__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.worked__dot { position: static; opacity: 0.4; }
.worked__dot[aria-current="true"] { opacity: 1; }

/* ---- desktop: all eight in one centred row, controls hidden ---------- */
@media (min-width: 1200px) {
  .page-home .worked__track {
    position: absolute;
    left: 0; top: 90px;
    width: var(--frame-desktop);
    height: 108px;
    flex-wrap: nowrap;              /* all eight in one balanced row */
    gap: 36px;
    padding: 0 56px;
  }
  .page-home .worked__logo { height: 46px; }
  .page-home .worked__nav,
  .page-home .worked__dots { display: none; }
}

/* ---- tablet 768: two-up, four dots ---------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .page-home .worked__track {
    position: absolute;
    left: 0; top: 84px;
    width: var(--frame-tablet);
    height: 140px;
    flex-wrap: nowrap;
    gap: 56px;
  }
  .page-home .worked__logo { height: 74px; }
  .page-home .worked__dots {
    position: absolute;
    left: 0; top: 250px;
    width: var(--frame-tablet);
    gap: 12px;
  }
  .page-home .worked__dot { width: 8px; height: 8px; }
  .page-home .worked__dot[aria-current="true"] { width: 10px; height: 10px; }
}

/* ---- mobile 390: two-up, four dots ----------------------------------
   the original 390 block hid the 3rd dot (four logos = two pages); with eight
   logos there are four pages, so it is un-hidden here. */
@media (max-width: 767px) {
  .page-home .worked__track {
    position: absolute;
    left: 0; top: 42px;
    width: var(--frame-mobile);
    height: 82px;
    flex-wrap: nowrap;
    gap: 32px;
  }
  .page-home .worked__logo { height: 48px; }
  .page-home .worked__dots {
    position: absolute;
    left: 0; top: 138px;
    width: var(--frame-mobile);
    gap: 10px;
  }
  .page-home .worked__dot { width: 8px; height: 8px; }
  .page-home .worked__dot:nth-child(3) { display: block; }
  .page-home .worked__dot[aria-current="true"] { width: 10px; height: 10px; }
}