/* ==========================================================================
   THE DESIGNERS HUB — General consultations (listing)
   Source of truth: Figma frame "general consultations pc" #2129:3090
   (1440 x 3252). Every coordinate in the desktop block is the literal Figma
   value; offsets inside a card are relative to that card's own 584x232 frame.

   Line steps are derived per style from each node's height / line count:
     h1 (Inter 700 36, 1.06em)          -> 38px
     card title (Inter 600 36, 0.97em)  -> 35px
     card sub / caption (Inter 500 19)  -> 23px
     card desc (Inter 400 16)           -> 19px
     note (Inter 300 19)                -> 23px
   ========================================================================== */

.page-consultations main { position: relative; }

/* --------------------------------------------------------------------------
   Flow fallback (below 1200px) — unverified reflow, desktop is the port.
   Scoped to a max-width query so it cannot outrank the desktop rules.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .gc section { position: relative; padding: var(--space-32) var(--page-pad-mob); }
  .gc img { width: 100%; height: auto; }
  .gc-hero__bg, .gc-card__bg { display: none; }
  .gc-list { background: var(--color-surface-dark); }
  .gc-item { margin-bottom: var(--space-32); }
  .gc-card { background: var(--white); padding: var(--space-16); }
  .gc-card__portrait { max-width: 177px; }
  .gc-item__caption, .gc-item__note { color: var(--white); margin-top: var(--space-8); }
  .gc-item__cta { display: inline-block; margin-top: var(--space-16); }
}

/* Nodes that exist only on the 390 frame: the hero plate #2129:4872, and the
   second caption line #2129:4957 on card 6 which the 1440 frame does not draw.
   Hidden everywhere by default; the mobile block at the end turns them on. */
.gc-hero__plate,
.gc-item__note--mob { display: none; }

.gc-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.gc-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  color: var(--color-text);
}

.gc-card__sub {
  font-weight: var(--fw-med);
  text-transform: uppercase;
  color: var(--color-text);
}

.gc-card__desc { color: var(--color-text); }
.gc-card__desc--lower { text-transform: lowercase; }

/* gold CTA — 180x40, label Inter 700 12 UPPER (#2129:3173) */
.gc-item__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 40px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.gc-item__cta:hover,
.gc-item__cta:focus-visible { background: var(--gold-deep); }

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

  .page-consultations main {
    width: var(--frame-desktop);
    height: 3252px;
    margin-inline: auto;
  }

  .gc section { position: absolute; left: 0; width: var(--frame-desktop); padding: 0; }
  /* `> picture > img` is not optional: the 23 breakpoint image swaps wrap
     their <img> in a <picture>, making it a GRANDCHILD. Without this the
     desktop photos fall back to static at 0,0 — the failure that silently
     unpositioned nine images on blog/membership/event. */
  .gc section > *,
  .gc section > picture > img { position: absolute; }
  .page-consultations main img { max-width: none; }

  /* single-line nodes in Figma — held so a wider browser measurement cannot
     wrap them and push the block below down */
  .gc-hero__line,
  .gc-item__caption,
  .gc-item__note,
  /* one line in Figma; the browser measures each a shade wider and wraps */
  .gc-item--2 .gc-card__sub,
  .gc-item--3 .gc-card__desc,
  .gc-item--11 .gc-card__desc { white-space: nowrap; }

  /* ---- HERO : plate #2129:3095 y:60 1445x412, copy centred over it ------- */
  .gc-hero { top: 0; height: 471px; }

  .gc-hero__bg { left: -2px; top: 60px; width: 1445px; height: 412px; object-fit: cover; }

  .gc-hero__title {
    left: 247px; top: 195px; width: 947px;
    color: var(--white);
    font-size: var(--fs-h1);
    line-height: 38px;
    white-space: nowrap;
  }

  .gc-hero__line { color: var(--white); }
  .gc-hero__line--1 { left: 413px; top: 241px; width: 614px; font-size: var(--fs-lead); line-height: 22px; }
  .gc-hero__line--2 { left: 337px; top: 270px; width: 766px; font-size: var(--fs-body); line-height: 19px; }
  .gc-hero__line--3 { left: 522px; top: 296px; width: 396px; font-size: var(--fs-body); line-height: 19px; }

  /* ---- LISTING ---------------------------------------------------------- */
  .gc-list { top: 0; height: 3252px; }

  /* #2129:3091 dark plate; #2129:3092 contributes only its 1px bottom rule */
  .gc-list__plate { left: -1px; top: 471px; width: 1441px; height: 2693px; background: var(--color-surface-dark); }
  .gc-list__rule  { left: -1px; top: 3207px; width: 1441px; height: 1px; background: var(--color-surface-dark); }

  /* --- card shell : 584x232 white frame ---------------------------------- */
  .gc-item { position: absolute; }

  .gc-card {
    position: absolute;
    left: 0; top: 0;
    width: 584px; height: 232px;
    background: var(--white);
    overflow: hidden;   /* the bg plate is 645x647 and is cropped by the card */
  }

  .gc-card > *,
  .gc-card > picture > img,
  .gc-item__caption,
  .gc-item__note,
  .gc-item__cta { position: absolute; }

  .gc-card__bg { left: -5px; top: -50px; width: 645px; height: 647px; object-fit: cover; }

  .gc-card__portrait { left: 398px; top: 8px; width: 177px; height: 216px; object-fit: cover; }

  .gc-card__title { left: 16px; top: 19px; font-size: 36px; line-height: 35px; }

  .gc-card__sub { left: 16px; top: 97px; font-size: 19px; line-height: 23px; }

  .gc-card__desc { left: 16px; font-size: var(--fs-body); line-height: 19px; }

  /* caption / note / CTA sit on the dark plate below each card */
  .gc-item__caption {
    color: var(--white);
    font-size: 19px;
    font-weight: var(--fw-med);
    line-height: 23px;
    text-transform: uppercase;
  }

  .gc-item__note {
    color: var(--white);
    font-size: 19px;
    font-weight: var(--fw-light);
    line-height: 23px;
  }

  /* --- per-card geometry -------------------------------------------------
     Card origin, then the title/desc widths and the y of the description,
     which Figma varies with how many lines the block above it takes. */

  .gc-item--1  { left: 96px;  top: 536px; }
  .gc-item--1 .gc-card__title { width: 354px; }
  .gc-item--1 .gc-card__desc  { top: 159px; width: 382px; }
  .gc-item--1 .gc-item__caption { left: 0; top: 246px; width: 510px; }
  .gc-item--1 .gc-item__cta     { left: 0; top: 332px; }

  .gc-item--2  { left: 776px; top: 536px; }
  /* Figma breaks this "STRATEGIC / BRAND INTENSIVE" in a 327px box; the browser
     measures "BRAND INTENSIVE" at 327.4px and spills to a third line. 1px of
     extra box restores Figma's two lines — the title is absolutely positioned,
     so nothing else keys off its width. */
  .gc-item--2 .gc-card__title { width: 328px; }
  .gc-item--2 .gc-card__sub   { width: 347px; }
  .gc-item--2 .gc-card__desc  { top: 194px; width: 320px; }
  .gc-item--2 .gc-item__caption { left: 0; top: 246px; width: 548px; }
  .gc-item--2 .gc-item__note    { left: 0; top: 277px; width: 277px; }
  .gc-item--2 .gc-item__cta     { left: 0; top: 332px; }

  /* Translated from Arabic (#2129:3193). Figma right-aligns the title, sets the
     description at x:329 and right-aligns the caption because the card is RTL;
     in English those all take the left-aligned x:16 the other ten cards use.
     The 34px/33px type size is Figma's own for this card and is kept. */
  .gc-item--3  { left: 91px;  top: 972px; }
  /* 372 not Figma's 368: "TARGET CUSTOMERS," measures 369.9px, and the English
     title has clear space to x:383 before the portrait at x:398. Keeps Figma's
     two lines. */
  .gc-item--3 .gc-card__title { left: 15px; width: 372px; font-size: 34px; line-height: 33px; }
  .gc-item--3 .gc-card__desc  { left: 16px; top: 194px; width: 200px; }
  .gc-item--3 .gc-item__caption { left: 0; top: 246px; width: 575px; }
  .gc-item--3 .gc-item__cta     { left: 0; top: 332px; }

  .gc-item--4  { left: 776px; top: 972px; }
  .gc-item--4 .gc-card__title { width: 327px; }
  .gc-item--4 .gc-card__sub   { width: 358px; }
  .gc-item--4 .gc-card__desc  { top: 194px; width: 60px; }
  .gc-item--4 .gc-item__caption { left: 0; top: 246px; width: 333px; }
  .gc-item--4 .gc-item__note    { left: 0; top: 277px; width: 544px; white-space: normal; }
  .gc-item--4 .gc-item__cta     { left: 0; top: 355px; }

  .gc-item--5  { left: 96px;  top: 1431px; }
  .gc-item--5 .gc-card__title { width: 327px; }
  .gc-item--5 .gc-card__sub   { width: 342px; }
  .gc-item--5 .gc-card__desc  { top: 194px; width: 180px; }
  .gc-item--5 .gc-item__caption { left: 0; top: 246px; width: 534px; }
  .gc-item--5 .gc-item__note    { left: 0; top: 277px; width: 171px; }
  .gc-item--5 .gc-item__cta     { left: 0; top: 332px; }

  .gc-item--6  { left: 771px; top: 1431px; }
  .gc-item--6 .gc-card__title { width: 327px; }
  .gc-item--6 .gc-card__sub   { width: 57px; }
  .gc-item--6 .gc-card__desc  { top: 177px; width: 336px; }
  .gc-item--6 .gc-item__caption { left: 0; top: 246px; width: 519px; }
  .gc-item--6 .gc-item__cta     { left: 0; top: 332px; }

  .gc-item--7  { left: 96px;  top: 1863px; }
  .gc-item--7 .gc-card__title { width: 327px; }
  /* "Brand not resonating?" measures 250.2px in Figma's 249px box, spilling to
     a third line; 251px restores Figma's two. */
  .gc-item--7 .gc-card__sub   { width: 251px; }
  .gc-item--7 .gc-card__desc  { top: 177px; width: 327px; }
  .gc-item--7 .gc-item__caption { left: 0; top: 246px; width: 449px; }
  .gc-item--7 .gc-item__cta     { left: 0; top: 301px; }

  .gc-item--8  { left: 771px; top: 1863px; }
  .gc-item--8 .gc-card__title { width: 382px; }
  .gc-item--8 .gc-card__sub   { width: 293px; }
  .gc-item--8 .gc-card__desc  { top: 175px; width: 267px; }
  .gc-item--8 .gc-item__caption { left: 0; top: 246px; width: 196px; }
  .gc-item--8 .gc-item__cta     { left: 0; top: 301px; }

  .gc-item--9  { left: 96px;  top: 2268px; }
  .gc-item--9 .gc-card__title { width: 327px; }
  .gc-item--9 .gc-card__sub   { width: 358px; }
  .gc-item--9 .gc-card__desc  { top: 175px; width: 371px; }
  .gc-item--9 .gc-item__caption { left: 0; top: 246px; width: 196px; }
  .gc-item--9 .gc-item__cta     { left: 0; top: 322px; }

  .gc-item--10 { left: 776px; top: 2268px; }
  .gc-item--10 .gc-card__title { width: 360px; }
  .gc-item--10 .gc-card__sub   { width: 287px; }
  .gc-item--10 .gc-card__desc  { top: 194px; width: 273px; }
  .gc-item--10 .gc-item__caption { left: 0; top: 246px; width: 432px; }
  .gc-item--10 .gc-item__note    { left: 0; top: 277px; width: 171px; }
  .gc-item--10 .gc-item__cta     { left: 0; top: 322px; }

  .gc-item--11 { left: 91px;  top: 2695px; }
  .gc-item--11 .gc-card__title { width: 360px; }
  .gc-item--11 .gc-card__sub   { width: 342px; }
  .gc-item--11 .gc-card__desc  { top: 194px; width: 205px; }
  .gc-item--11 .gc-item__caption { left: 0; top: 246px; width: 584px; }
  .gc-item--11 .gc-item__cta     { left: 0; top: 320px; }
}

/* ==========================================================================
   MOBILE — the 390 canvas, frame "general consultations phone" #2129:4868
   (390 x 4118). Verified against the frame, not reflowed.

   The frame draws no header and no footer, so its y:0 is the top of the PAGE.
   The shared header is 81 tall, main starts at its bottom, and every
   coordinate below is THE FIGMA VALUE MINUS 81. main is 4118 - 81 = 4037.

   The listing is ONE column of 11 cards at 374x156, against the 1440 frame's
   two columns of 584x232 — and the card is laid out differently, not just
   resized: the portrait moves from the right edge to the left, and the title
   block sits beside it rather than above it.

   Stroke alignment read off node renders: the hero plate #2129:4872 (4px) is
   INSIDE (461x216 declared, 461x216 drawn) and the dark listing plate
   #2129:4869 carries a 15px stroke in its own fill colour, so it is a plain
   band. All 11 portrait renders come back at exactly their declared size.

   Every card's internals differ — title 1 or 2 lines, sub 1/2/3 lines, and
   the description pinned to one of three y values (95, 110 or 125) depending
   on how tall the block above it is. Each was fetched per card; none of it is
   derivable from the first.
   ========================================================================== */
@media (max-width: 767px) {

  /* ---------------------------------------------------------------- shell */
  .page-consultations main {
    position: relative;
    width: 390px;
    min-height: 3799px;
    margin: 0;
    padding: 0;
  }

  /* The <=1199 fallback sets `.gc img { width:100%; height:auto }` at (0,1,1),
     which outranks every bare per-image rule below. Beaten here on source
     order at equal specificity. */
  .gc img { width: auto; height: auto; max-width: none; }

  .gc > section {
    position: absolute;
    left: 0;
    width: 390px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: none;
  }
  .gc > section > *,
  .gc > section > picture > img { position: absolute; margin: 0; }

  /* re-show what the fallback hides outright */
  .gc-hero__bg, .gc-card__bg, .gc-hero__plate,
  .gc-item__note--mob { display: block; }

  /* Figma paints the hero photo AFTER the dark listing plate, and the two
     overlap by 3px (photo ends 416, plate starts 413). The list section comes
     later in the DOM, so without this the plate covers the photo's last 3px. */
  .gc-hero { z-index: 1; }

  /* ================= HERO — photo y:81, plate y:140 ================= */
  .gc-hero { top: 0; height: 335px; }

  .page-consultations .gc-hero__bg { left: -43px; top: 0; width: 526px; height: 335px;
                                     object-fit: fill; }

  .gc-hero__plate { left: -35px; top: 59px; width: 461px; height: 216px;
                    background: var(--bg); border: 4px solid var(--ink); }

  .gc-hero__title {
    left: 8px; top: 89px; width: 352px;
    color: var(--color-text);
    font-weight: var(--fw-bold);
    font-size: 24px;
    line-height: 25px;   /* 24 at 1.06em = 25.44 -> 25 */
    white-space: normal;
  }

  .gc-hero__line {
    left: 8px;
    color: var(--color-text);
    font-weight: var(--fw-reg);
    font-size: 14px;
    line-height: 17px;
    white-space: normal;
  }
  .gc-hero__line--1 { top: 147px; width: 349px; }
  .gc-hero__line--2 { top: 187px; width: 368px; }
  .gc-hero__line--3 { top: 227px; width: 370px; }

  /* ================= LISTING — dark plate y:413 ================= */
  .gc-list { top: 332px; height: 3419px; }

  .gc-list__plate { left: 0; top: 0; width: 390px; height: 3419px;
                    background: var(--color-surface-dark); }
  /* the 390 frame draws no closing rule */
  .gc-list__rule { display: none; }

  /* ---- item shell ------------------------------------------------------ */
  .gc-item {
    position: absolute;
    left: 8px;
    width: 374px;
    margin: 0;
  }

  .gc-card {
    position: absolute;
    left: 0; top: 0;
    width: 374px; height: 156px;
    background: var(--white);
    padding: 0;
    overflow: hidden;   /* the bg is 383 wide from x:-8; the frame clips it */
  }

  .gc-card > *,
  .gc-card > picture > img,
  .gc-item__caption,
  .gc-item__note,
  .gc-item__cta { position: absolute; margin: 0; }

  /* one shared bitmap across all 11 cards, as in the file */
  .page-consultations .gc-card__bg { left: -8px; top: 0; width: 383px; height: 156px;
                                     object-fit: fill; }

  .page-consultations .gc-card__portrait {
    left: 0; top: 0; width: 115px; height: 156px;
    max-width: none;
    object-fit: fill;
  }
  /* cards 9-11 carry a slightly larger portrait, bled 2px left */
  .page-consultations .gc-item--9 .gc-card__portrait,
  .page-consultations .gc-item--10 .gc-card__portrait,
  .page-consultations .gc-item--11 .gc-card__portrait {
    left: -2px; width: 117px; height: 157px;
  }

  .gc-card__title {
    left: 122px; top: 16px; width: 242px;
    font-size: 16px;
    line-height: 19px;
  }

  .gc-card__sub {
    left: 122px; top: 37px; width: 236px;
    font-size: 12px;
    line-height: 15px;
  }

  .gc-card__desc {
    left: 122px; top: 125px; width: 242px;
    font-size: 12px;
    line-height: 15px;
  }

  /* ---- per-card overrides ---------------------------------------------- */
  /* title width */
  .gc-item--8 .gc-card__title,
  .gc-item--10 .gc-card__title,
  .gc-item--11 .gc-card__title { width: 176px; }
  .gc-item--9 .gc-card__title  { width: 235px; }

  /* sub: y moves to 56 wherever the title runs to two lines */
  .gc-item--5 .gc-card__sub,
  .gc-item--8 .gc-card__sub,
  .gc-item--10 .gc-card__sub,
  .gc-item--11 .gc-card__sub { top: 56px; }
  .gc-item--7 .gc-card__sub,
  .gc-item--8 .gc-card__sub,
  .gc-item--9 .gc-card__sub,
  .gc-item--10 .gc-card__sub,
  .gc-item--11 .gc-card__sub { width: 176px; }

  /* desc: three different y values depending on the block above it */
  .gc-item--1 .gc-card__desc  { top: 99px;  width: 242px; }
  .gc-item--6 .gc-card__desc  { top: 110px; width: 178px; }
  .gc-item--7 .gc-card__desc  { top: 110px; width: 248px; }
  .gc-item--8 .gc-card__desc  { top: 110px; width: 217px; }
  .gc-item--9 .gc-card__desc  { top: 95px;  width: 235px; }
  .gc-item--2 .gc-card__desc  { width: 240px; }
  .gc-item--4 .gc-card__desc  { width: 45px; }
  .gc-item--5 .gc-card__desc  { width: 135px; }
  .gc-item--10 .gc-card__desc,
  .gc-item--11 .gc-card__desc { width: 235px; }

  /* ---- caption / note / CTA on the dark plate --------------------------- */
  .gc-item__caption {
    left: 0; top: 168px;
    color: var(--white);
    font-weight: var(--fw-med);
    font-size: 12px;
    line-height: 15px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .gc-item__note {
    left: 0; top: 187px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 12px;
    line-height: 15px;
    text-transform: none;
  }

  .gc-item--1 .gc-item__caption  { width: 322px; }
  .gc-item--2 .gc-item__caption  { width: 346px; }
  .gc-item--4 .gc-item__caption  { width: 211px; }
  .gc-item--5 .gc-item__caption  { width: 337px; }
  .gc-item--6 .gc-item__caption  { width: 328px; }
  .gc-item--7 .gc-item__caption  { width: 284px; }
  .gc-item--8 .gc-item__caption  { width: 124px; }
  .gc-item--9 .gc-item__caption  { width: 124px; }
  .gc-item--11 .gc-item__caption { width: 367px; }

  .gc-item--2 .gc-item__note { width: 175px; }
  /* 333 not Figma's declared 336: the file breaks this before "strategist"
     and the browser pulls that word up onto line 1 — same line COUNT, so only
     a pixel diff catches it. Measured window is 280-333; held at the top of
     it, closest to the declared box. Same class of early break as the program
     hero lede and article p10/p28. */
  .gc-item--4 .gc-item__note { width: 333px; white-space: normal; }
  .gc-item--5 .gc-item__note { width: 336px; }
  .gc-item--6 .gc-item__note { width: 336px; }

  /* CARD 3 — the frame draws this card in Arabic (title #2129:4941 RIGHT
     aligned at 0.97em, description #2129:4942 parked at x:323, caption
     #2129:4953 at x:20). The site is English-only and the 1440 build already
     ships the translation with standard left alignment, so the same is done
     here: the Arabic BOXES are not reused, only the card's own origin. The
     caption keeps Figma's x:20 indent. */
  .gc-item--3 .gc-item__caption { left: 12px; width: 361px; }

  /* CARD 10 — the 390 frame draws ONLY "THE DESIGNERS HUB" here, where the
     1440 frame has a caption ("Get orders. Secure buyers Scale sales") plus
     that line as a note. The caption is dropped at mobile and the note takes
     the caption slot, which is what the frame shows. FLAGGED: the two frames
     disagree on this card's copy. */
  .gc-item--10 .gc-item__caption { display: none; }
  .gc-item--10 .gc-item__note    { top: 168px; width: 124px; }

  /* the 373x48 gold button, mixed case — the instance carries no textCase, so
     `.gc-item__cta`'s uppercase has to come back off */
  .gc-item__cta {
    display: flex;
    left: 0;
    width: 373px;
    height: 48px;
    max-width: none;
    padding: 0;
    font-family: var(--font-button);
    font-size: 14px;
    font-weight: var(--fw-bold);
    letter-spacing: normal;
    text-transform: none;
  }

  /* ---- the 11 item origins (Figma card y minus the plate's 413) --------- */
  .gc-item--1  { top: 17px; }
  .gc-item--2  { top: 304px; }
  .gc-item--3  { top: 610px; }
  .gc-item--4  { top: 905px; }
  .gc-item--5  { top: 1234px; }
  .gc-item--6  { top: 1548px; }
  .gc-item--7  { top: 1862px; }
  .gc-item--8  { top: 2157px; }
  .gc-item--9  { top: 2452px; }
  .gc-item--10 { top: 2747px; }
  .gc-item--11 { top: 3042px; }

  /* CTA y is not on a step — Figma leaves a different gap under each card */
  .gc-item--1  .gc-item__cta { top: 207px; }
  .gc-item--2  .gc-item__cta { top: 226px; }
  .gc-item--3  .gc-item__cta { top: 215px; }
  .gc-item--4  .gc-item__cta { top: 249px; }
  .gc-item--5  .gc-item__cta { top: 234px; }
  .gc-item--6  .gc-item__cta { top: 234px; }
  .gc-item--7  .gc-item__cta { top: 215px; }
  .gc-item--8  .gc-item__cta { top: 215px; }
  .gc-item--9  .gc-item__cta { top: 215px; }
  .gc-item--10 .gc-item__cta { top: 215px; }
  .gc-item--11 .gc-item__cta { top: 215px; }
}

/* ==========================================================================
   TABLET — literal Figma geometry, 768 canvas
   Source of truth: frame "general consultations tablet" #2129:6999
   (768 x 5220).

   No chrome drawn, so `main` = 5220 - 81 = **5139** and every coordinate is
   THE FIGMA VALUE MINUS 81. Section origins (frame y): hero 81 | list 479.

   ONE COLUMN OF 688x248 CARDS, against the 1440 frame's two columns of
   584x232 and the 390 frame's one column of 374x156. The card is re-laid-out
   at every breakpoint, not resized: here the portrait sits at the card's
   RIGHT edge (x:503) where at 390 it sits left.

   Each `.gc-item` wraps its card, caption, note and CTA, but Figma draws the
   caption/note/CTA OUTSIDE the card on the dark plate. `.gc-item` is
   therefore `display: contents` and every piece is placed against the
   section, exactly as the DOM order runs.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

  .page-consultations main {
    position: relative;
    width: var(--frame-tablet);
    max-width: none;
    height: 5139px;
    margin-inline: auto;
    padding: 0;
  }

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

  .page-consultations .gc-item { display: contents; }

  .page-consultations main > section > *,
  .page-consultations main > section > picture > img,
  .page-consultations .gc-item > *,
  .page-consultations .gc-card > *,
  .page-consultations .gc-card > picture > img {
    position: absolute;
    margin: 0;
  }

  .page-consultations .gc img,
  .page-consultations main img { max-width: none; height: auto; }

  /* ======================================================================
     1. HERO — photo #2129:7000 at Figma 63, i.e. 18px above main's top.
     ====================================================================== */
  .gc-hero { top: 0; height: 398px; }

  .page-consultations .gc-hero__bg {
    display: block;
    left: -1px;
    top: -18px;
    width: 987px;
    height: 419px;
    object-fit: fill;
  }

  /* #2129:7001 — 690x242, 4px INSIDE. The 1440 frame lays the copy straight
     over the photo and has no plate; 768 and 390 both draw one. */
  .page-consultations .gc-hero__plate {
    display: block;
    left: 39px;
    top: 82px;
    width: 690px;
    height: 242px;
    background: var(--bg);
    border: 4px solid var(--color-surface-dark);
  }

  .page-consultations .gc-hero__title {
    left: 66px;
    top: 116px;
    width: 475px;
    max-width: none;
    font-size: 32px;
    font-weight: var(--fw-bold);
    line-height: 34px;           /* 32 * 1.06 = 33.92; box 68 = 2 lines */
    text-align: left;
    text-transform: uppercase;
    color: var(--color-surface-dark);
  }

  .page-consultations .gc-hero__line {
    left: 66px;
    max-width: none;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 19px;
    color: var(--color-surface-dark);
  }

  .page-consultations .gc-hero__line--1 { top: 198px; width: 637px; }
  .page-consultations .gc-hero__line--2 { top: 225px; width: 624px; }  /* 2 lines */
  .page-consultations .gc-hero__line--3 { top: 271px; width: 624px; }

  /* ======================================================================
     2. LISTING — dark plate #2129:7006 at Figma 479 -> main 398.
     Local coordinates are the Figma value minus 479.
     ====================================================================== */
  /* `background: none` IS LOAD-BEARING. The fallback paints `.gc-list` dark
     at (0,1,0), and this section is 4741 tall against the plate's 4656 — so
     the section's own fill ran 85px past the plate and painted the frame's
     light tail dark. The plate is a real element and the only thing that
     should carry the fill. Same trap the mobile programs page hit. */
  .gc-list { top: 398px; height: 4741px; background: none; }

  /* the plate's 15px stroke is its own fill colour, so it is drawn as a
     plain background at the declared box */
  .page-consultations .gc-list__plate {
    display: block;
    left: -3px;
    top: 0;
    width: 771px;
    height: 4656px;
    background: var(--color-surface-dark);
    border: 0;
  }

  /* #2129:7007 carries stroke "0px 0px 1px" — a BOTTOM EDGE ONLY on a
     771x4647 rect that starts at 38, so the line lands at 4685, i.e. 29px
     BELOW the plate it appears to belong to. Written as that single line. */
  .page-consultations .gc-list__rule {
    display: block;
    left: -3px;
    top: 4685px;
    width: 771px;
    height: 1px;
    background: var(--color-surface-dark);
  }

  /* ---- the card ------------------------------------------------------- */
  .page-consultations .gc-card {
    position: absolute;
    left: 40px;
    width: 688px;
    height: 248px;
    padding: 0;
    background: var(--white);
    border: 0;
    overflow: hidden;            /* the Figma frame clips its 337-tall bg */
  }

  /* the fallback hides this at (0,1,0) together with the hero photo, so the
     display has to be restated here as well as the geometry */
  .page-consultations .gc-card__bg {
    display: block;
    left: -8px;
    top: 0;
    width: 696px;
    height: 337px;
    object-fit: fill;
  }

  .page-consultations .gc-card__portrait {
    left: 503px;
    top: 23px;
    width: 168.27px;
    height: 202.38px;
    object-fit: fill;
  }

  .page-consultations .gc-card__title {
    left: 17px;
    top: 21px;
    width: 445px;
    max-width: none;
    font-size: 24px;
    font-weight: var(--fw-semi);
    line-height: 29px;
    text-align: left;
    text-transform: uppercase;
    color: var(--color-surface-dark);
  }

  .page-consultations .gc-card__sub {
    left: 17px;
    top: 58px;
    width: 367px;
    max-width: none;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 19px;
    text-transform: uppercase;
    color: var(--color-surface-dark);
  }

  .page-consultations .gc-card__desc {
    left: 17px;
    top: 206px;
    width: 367px;
    max-width: none;
    font-size: 16px;
    font-weight: var(--fw-reg);
    line-height: 19px;
    text-transform: none;
    color: var(--color-surface-dark);
  }

  /* ---- caption / note / CTA: OUTSIDE the card, on the dark plate ------- */
  .page-consultations .gc-item__caption {
    left: 40px;
    max-width: none;
    font-size: 19px;
    font-weight: var(--fw-med);
    line-height: 23px;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
  }

  .page-consultations .gc-item__note {
    display: block;
    left: 40px;
    max-width: none;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 19px;
    text-transform: none;
    color: var(--white);
    white-space: nowrap;
  }

  .page-consultations .gc-item__cta {
    left: 40px;
    width: 166px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    background: var(--gold);
    border: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--fw-bold);
    line-height: 15px;
    letter-spacing: normal;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
  }

  /* ---- per-item y, all relative to the list section -------------------- */
  .page-consultations .gc-item--1  .gc-card { top: 58px;   }
  .page-consultations .gc-item--2  .gc-card { top: 461px;  }
  .page-consultations .gc-item--3  .gc-card { top: 890px;  }
  .page-consultations .gc-item--4  .gc-card { top: 1294px; }
  .page-consultations .gc-item--5  .gc-card { top: 1723px; }
  .page-consultations .gc-item--6  .gc-card { top: 2152px; }
  .page-consultations .gc-item--7  .gc-card { top: 2581px; }
  .page-consultations .gc-item--8  .gc-card { top: 2985px; }
  .page-consultations .gc-item--9  .gc-card { top: 3389px; }
  .page-consultations .gc-item--10 .gc-card { top: 3793px; }
  .page-consultations .gc-item--11 .gc-card { top: 4222px; }

  .page-consultations .gc-item--1  .gc-item__caption { top: 323px;  width: 510px; }
  .page-consultations .gc-item--2  .gc-item__caption { top: 726px;  width: 548px; }
  .page-consultations .gc-item--3  .gc-item__caption { top: 1155px; width: 572px; }
  .page-consultations .gc-item--4  .gc-item__caption { top: 1559px; width: 333px; }
  .page-consultations .gc-item--5  .gc-item__caption { top: 1988px; width: 534px; }
  .page-consultations .gc-item--6  .gc-item__caption { top: 2417px; width: 519px; }
  .page-consultations .gc-item--7  .gc-item__caption { top: 2846px; width: 449px; }
  .page-consultations .gc-item--8  .gc-item__caption { top: 3250px; width: 196px; }
  .page-consultations .gc-item--9  .gc-item__caption { top: 3654px; width: 196px; }
  .page-consultations .gc-item--10 .gc-item__caption { top: 4058px; width: 417px; }
  .page-consultations .gc-item--11 .gc-item__caption { top: 4487px; width: 581px; }

  .page-consultations .gc-item--2  .gc-item__note { top: 755px;  width: 233px; }
  .page-consultations .gc-item--4  .gc-item__note { top: 1588px; width: 533px; }
  .page-consultations .gc-item--5  .gc-item__note { top: 2017px; width: 144px; }
  .page-consultations .gc-item--6  .gc-item__note { top: 2446px; width: 144px; }
  .page-consultations .gc-item--10 .gc-item__note { top: 4087px; width: 144px; }

  .page-consultations .gc-item--1  .gc-item__cta { top: 378px;  }
  .page-consultations .gc-item--2  .gc-item__cta { top: 806px;  }
  .page-consultations .gc-item--3  .gc-item__cta { top: 1210px; }
  .page-consultations .gc-item--4  .gc-item__cta { top: 1639px; }
  .page-consultations .gc-item--5  .gc-item__cta { top: 2068px; }
  .page-consultations .gc-item--6  .gc-item__cta { top: 2497px; }
  .page-consultations .gc-item--7  .gc-item__cta { top: 2901px; }
  .page-consultations .gc-item--8  .gc-item__cta { top: 3305px; }
  .page-consultations .gc-item--9  .gc-item__cta { top: 3709px; }
  .page-consultations .gc-item--10 .gc-item__cta { top: 4138px; }
  .page-consultations .gc-item--11 .gc-item__cta { top: 4542px; }

  /* ---- per-card internals: NONE of this is derivable from card 1 ------- */
  /* card 1 has no sub, and its description is three lines high up the card */
  .page-consultations .gc-item--1 .gc-card__desc { top: 172px; width: 367px; }

  /* card 3 is the Arabic listing: a RIGHT-aligned two-line title at 0.97em
     and a description parked at the card's right edge. The site is English
     only and the 1440 build already ships the translation, so the English
     strings sit in the Arabic boxes — the title then needs the taller box
     it already has, and the description keeps Figma's own narrow 54px slot
     only in position, not in width. */
  .page-consultations .gc-item--3 .gc-card__title {
    width: 457px;
    height: 46px;
    line-height: 23px;           /* 24 * 0.97 = 23.28 */
    text-align: right;
  }
  /* Figma's box is 54 wide because it holds the Arabic "٦٠ دقيقة"; the English
     "60 minutes" the site ships measures 84.18 and wrapped to two lines. The
     box therefore keeps Figma's RIGHT edge (474) — the meaningful anchor for
     an RTL slot — and grows leftward to 389, which stays clear of the
     portrait at 503. A consequence of the English substitution, not a
     measurement error. */
  .page-consultations .gc-item--3 .gc-card__desc { left: 389px; top: 206px; width: 85px; }

  .page-consultations .gc-item--4 .gc-card__sub  { height: 38px; }   /* 2 lines */
  .page-consultations .gc-item--5 .gc-card__sub  { height: 38px; }
  .page-consultations .gc-item--6 .gc-card__sub  { width: 230px; }
  .page-consultations .gc-item--7 .gc-card__sub  { width: 230px; height: 38px; }
  .page-consultations .gc-item--7 .gc-card__desc { top: 191px; width: 333px; }
  .page-consultations .gc-item--8 .gc-card__desc { top: 191px; width: 261px; }
  .page-consultations .gc-item--9 .gc-card__desc { top: 191px; }
  .page-consultations .gc-item--10 .gc-card__sub { width: 395px; }
  .page-consultations .gc-item--10 .gc-card__desc { top: 210px; }
  .page-consultations .gc-item--11 .gc-card__sub { width: 160px; }
  .page-consultations .gc-item--11 .gc-card__desc { top: 210px; text-transform: lowercase; }

  /* the wider title box on the last four cards */
  .page-consultations .gc-item--8  .gc-card__title,
  .page-consultations .gc-item--9  .gc-card__title,
  .page-consultations .gc-item--10 .gc-card__title,
  .page-consultations .gc-item--11 .gc-card__title { width: 463px; }

  /* Chrome measures both of these a shade past Figma's own box and spilled a
     second line — 396.93 in 395, and 161.64 in 160. Nothing sits to the right
     of either inside the card. */
  .page-consultations .gc-item--10 .gc-card__sub,
  .page-consultations .gc-item--11 .gc-card__sub { white-space: nowrap; }
}

/* ==== RTL OVERLAY (auto — tools/rtl-gen.js; mirrors horizontal geometry for Arabic, scoped to html[dir=rtl], changed decls only) ==== */
@media (min-width: 1200px) {
    html[dir="rtl"] .gc section {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-hero__bg {
        right: -2px;
        left: auto
    }
    html[dir="rtl"] .gc-hero__title {
        right: 247px;
        left: auto
    }
    html[dir="rtl"] .gc-hero__line--1 {
        right: 413px;
        left: auto
    }
    html[dir="rtl"] .gc-hero__line--2 {
        right: 337px;
        left: auto
    }
    html[dir="rtl"] .gc-hero__line--3 {
        right: 522px;
        left: auto
    }
    html[dir="rtl"] .gc-list__plate {
        right: -1px;
        left: auto
    }
    html[dir="rtl"] .gc-list__rule {
        right: -1px;
        left: auto
    }
    html[dir="rtl"] .gc-card {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-card__bg {
        right: -5px;
        left: auto
    }
    html[dir="rtl"] .gc-card__portrait {
        right: 398px;
        left: auto
    }
    html[dir="rtl"] .gc-card__title {
        right: 16px;
        left: auto
    }
    html[dir="rtl"] .gc-card__sub {
        right: 16px;
        left: auto
    }
    html[dir="rtl"] .gc-card__desc {
        right: 16px;
        left: auto
    }
    html[dir="rtl"] .gc-item--1 {
        right: 96px;
        left: auto
    }
    html[dir="rtl"] .gc-item--1 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--1 .gc-item__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--2 {
        right: 776px;
        left: auto
    }
    html[dir="rtl"] .gc-item--2 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--2 .gc-item__note {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--2 .gc-item__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--3 {
        right: 91px;
        left: auto
    }
    html[dir="rtl"] .gc-item--3 .gc-card__title {
        right: 15px;
        left: auto
    }
    html[dir="rtl"] .gc-item--3 .gc-card__desc {
        right: 16px;
        left: auto
    }
    html[dir="rtl"] .gc-item--3 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--3 .gc-item__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--4 {
        right: 776px;
        left: auto
    }
    html[dir="rtl"] .gc-item--4 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--4 .gc-item__note {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--4 .gc-item__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--5 {
        right: 96px;
        left: auto
    }
    html[dir="rtl"] .gc-item--5 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--5 .gc-item__note {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--5 .gc-item__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--6 {
        right: 771px;
        left: auto
    }
    html[dir="rtl"] .gc-item--6 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--6 .gc-item__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--7 {
        right: 96px;
        left: auto
    }
    html[dir="rtl"] .gc-item--7 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--7 .gc-item__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--8 {
        right: 771px;
        left: auto
    }
    html[dir="rtl"] .gc-item--8 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--8 .gc-item__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--9 {
        right: 96px;
        left: auto
    }
    html[dir="rtl"] .gc-item--9 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--9 .gc-item__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--10 {
        right: 776px;
        left: auto
    }
    html[dir="rtl"] .gc-item--10 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--10 .gc-item__note {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--10 .gc-item__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--11 {
        right: 91px;
        left: auto
    }
    html[dir="rtl"] .gc-item--11 .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--11 .gc-item__cta {
        right: 0;
        left: auto
    }
}
@media (max-width: 767px) {
    html[dir="rtl"] .gc > section {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-hero__bg {
        right: -43px;
        left: auto
    }
    html[dir="rtl"] .gc-hero__plate {
        right: -35px;
        left: auto
    }
    html[dir="rtl"] .gc-hero__title {
        right: 8px;
        left: auto
    }
    html[dir="rtl"] .gc-hero__line {
        right: 8px;
        left: auto
    }
    html[dir="rtl"] .gc-list__plate {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item {
        right: 8px;
        left: auto
    }
    html[dir="rtl"] .gc-card {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-card__bg {
        right: -8px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-card__portrait {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-item--9 .gc-card__portrait,
html[dir="rtl"] .page-consultations .gc-item--10 .gc-card__portrait,
html[dir="rtl"] .page-consultations .gc-item--11 .gc-card__portrait {
        right: -2px;
        left: auto
    }
    html[dir="rtl"] .gc-card__title {
        right: 122px;
        left: auto
    }
    html[dir="rtl"] .gc-card__sub {
        right: 122px;
        left: auto
    }
    html[dir="rtl"] .gc-card__desc {
        right: 122px;
        left: auto
    }
    html[dir="rtl"] .gc-item__caption {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item__note {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .gc-item--3 .gc-item__caption {
        right: 12px;
        left: auto
    }
    html[dir="rtl"] .gc-item__cta {
        right: 0;
        left: auto
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    html[dir="rtl"] .page-consultations main > section {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-hero__bg {
        right: -1px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-hero__plate {
        right: 39px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-hero__title {
        right: 66px;
        text-align: right;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-hero__line {
        right: 66px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-list__plate {
        right: -3px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-list__rule {
        right: -3px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-card {
        right: 40px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-card__bg {
        right: -8px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-card__portrait {
        right: 503px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-card__title {
        right: 17px;
        text-align: right;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-card__sub {
        right: 17px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-card__desc {
        right: 17px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-item__caption {
        right: 40px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-item__note {
        right: 40px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-item__cta {
        right: 40px;
        left: auto
    }
    html[dir="rtl"] .page-consultations .gc-item--3 .gc-card__title {
        text-align: left
    }
    html[dir="rtl"] .page-consultations .gc-item--3 .gc-card__desc {
        right: 389px;
        left: auto
    }
}