/* ==========================================================================
   THE DESIGNERS HUB — Consultation: Manar Shehab (per-page refit)

   Loads AFTER consultation.css. consultation.css is the shared Yaser template,
   pinned to Yaser's exact wording and element counts. Manar's copy differs
   (3 hero leads vs 1, 5 "what you'll get" vs 6, 3 testimonials vs 4, 5 FAQ vs 7,
   longer titles), so the deltas below refit those spots so the page still reads
   like the Yaser design. Scoped to .page-cn-manar so Yaser's page is untouched.

   PHOTOS: Manar supplied a SINGLE photo, so per the client decision it is used
   in the HERO only (gc-p-shehab). The bio "real experience" portrait and the
   "how it works" works photo are NOT rendered (removed from the markup), so
   there is nothing to crop here. */

@media (min-width: 1200px) {

  /* --- HERO: 3 lead paragraphs flow inside a positioned column --------------
     Yaser's hero has 1 lead + 1 note at fixed y's. Anastasiia has 3 body
     paragraphs, so the title + leads + CTA are wrapped in .cn-hero__col and
     stacked in flow, keeping the panel / portrait / stats / type from the
     template. */
  .page-cn-manar .cn-hero__col {
    position: absolute;
    left: 79px; top: 176px; width: 690px;
  }
  .page-cn-manar .cn-hero__col > * { position: static; left: auto; top: auto; }
  .page-cn-manar .cn-hero__title { width: auto; margin: 0 0 16px; }
  .page-cn-manar .cn-hero__lead {
    position: static; width: auto;
    font-size: 16px; line-height: 21px; margin: 0 0 12px;
  }
  .page-cn-manar .cn-hero__cta { margin-top: 8px; }

  /* longer eyebrow ("Consultation with Anastasiia Havryna") */
  .page-cn-manar .cn-hero__eyebrow { width: 360px; }
  .page-cn-manar .cn-hero__rule    { width: 372px; }

  /* --- STATS: Anastasiia's labels are longer than Yaser's, so let each key +
     value fill and centre its own card and wrap instead of sitting in Yaser's
     narrow fixed boxes. */
  .page-cn-manar .cn-stat__key,
  .page-cn-manar .cn-stat__val {
    left: 0; width: 100%; padding-inline: 10px;
    white-space: normal;
  }
  .page-cn-manar .cn-stat__val { top: 36px; }

  /* --- FAM: Manar's title ("If your brand looks good but doesn't feel
     luxurious yet…") wraps to 3 lines where Yaser's is 2, so it collided with
     the lead. Shift the lead down to clear it (title ends y:217). */
  .page-cn-manar .cn-fam__lead { top: 223px; }

  /* --- BIO: her title ("Luxury fashion is built through details,
     storytelling, and emotional connection.") wraps to 3 lines, so the lead
     is shifted down to clear it (title ends y:213); the means/rule/points sit
     below the lead and keep Yaser's positions. */
  .page-cn-manar .cn-bio__title { white-space: normal; }
  .page-cn-manar .cn-bio__lead        { top: 221px; }
  .page-cn-manar .cn-bio__means       { top: 296px; }
  .page-cn-manar .cn-bio__rule--long  { top: 319px; }
  .page-cn-manar .cn-bio__point--1,
  .page-cn-manar .cn-bio__point--2    { top: 336px; }
  .page-cn-manar .cn-bio__point--3,
  .page-cn-manar .cn-bio__point--4    { top: 383px; }

  /* --- GET: title line 2 ("This is a shift in how you see your brand.") is
     wider than Yaser's 622 nowrap box, and the sub is far longer — widen the
     title (kept centred on 720) and let the sub wrap to two lines (clears the
     gains at y:268). */
  .page-cn-manar .cn-get__title { left: 340px; width: 760px; }
  .page-cn-manar .cn-get__sub   { white-space: normal; }

  /* --- PHASE names include the timing ("Luxury Positioning Analysis (20 min)"),
     longer than Yaser's short names — widen the box so nothing clips. */
  .page-cn-manar .cn-phase__name { width: 320px; }

  /* --- PRICE-card title longer than Yaser's — centre it across the whole
     header bar. */
  .page-cn-manar .cn-price__title { left: 456px; width: 528px; text-align: center; }
}

/* ==========================================================================
   MOBILE (390) refit
   ========================================================================== */
@media (max-width: 767px) {

  /* HERO — match Figma's ORDER: text band -> portrait (small, centred) ->
     button -> stats. Anastasiia's 3 paragraphs sit in the dark band; the
     portrait sits below the band and ABOVE the button (exactly like Yaser's
     mobile hero), and the button drops below the portrait. */
  .page-cn-manar .cn-hero__col {
    position: absolute; left: 9px; top: 90px; width: 371px;
  }
  .page-cn-manar .cn-hero__col > .cn-hero__title,
  .page-cn-manar .cn-hero__col > .cn-hero__lead { position: static; left: auto; top: auto; }
  .page-cn-manar .cn-hero__title { width: auto; margin: 0 0 14px; }
  .page-cn-manar .cn-hero__lead  { width: auto; margin: 0 0 10px; }

  /* Rebuild Yaser's hero "sandwich" so the office reads as a clean band the
     height of the portrait, flanking her, rather than fading to dark:
        dark text band (top)  ->  office band (portrait)  ->  dark panel (below)
     The panel is what caps the atelier and hides the photo's dark floor.
     Manar's 3-line title + 3 leads run ~48px taller than Anastasiia's, so the
     whole lower sandwich (band bottom, portrait, panel, CTA, stats) is dropped
     by 48 so the last lead (ends y:397) no longer runs over the portrait. */
  .page-cn-manar .cn-hero__band  { top: 22px; height: 388px; }
  .page-cn-manar .cn-hero__panel { display: block; top: 548px; height: 168px; }

  /* Atelier shifted down 48 too so the same light DESK region stays in the
     visible office band (now 410-548) flanking the portrait. */
  .page-cn-manar .cn-hero__atelier {
    top: 134px; left: -595px; width: 1580px; height: 690px;
    filter: blur(1.25px) grayscale(1);
  }
  /* portrait: Figma's 159x190, centred, now starting below the last lead */
  .page-cn-manar .cn-hero__portrait { top: 400px; left: 116px; }
  /* button below the portrait (col is its offset parent at y:90) */
  .page-cn-manar .cn-hero__cta { position: absolute; left: 0; top: 518px; }
  /* the stat cards are children of the .cn-stats ul (itself at section y:0), so
     one translate drops all three with the rest of the sandwich */
  .page-cn-manar .cn-stats { transform: translateY(48px); }

  /* longer stat values wrap and centre inside their boxes */
  .page-cn-manar .cn-stat__key,
  .page-cn-manar .cn-stat__val { left: 0; width: 100%; padding-inline: 8px; white-space: normal; }
  .page-cn-manar .cn-stat__val { top: 38px; }

  /* phase names include the timing; "Luxury Positioning Analysis (20 min)" ran
     248px in the 242px card and its "(20 min)" stuck out past the box. Drop to
     12px and widen the box to the card edge so the longest fits one line. */
  .page-cn-manar .cn-phase__name { width: 222px; font-size: 12px; white-space: nowrap; }

  /* FAM title wraps to 4 lines here (ends y:1727) — shift the lead to clear it. */
  .page-cn-manar .cn-fam__lead { top: 1733px; }

  /* BIO: with no portrait on this page the title takes the FULL width instead
     of Yaser's narrow 235 slot, so it is ~4 lines (ends y:2714) rather than 6,
     and the lead below clears it. The means/rule/points keep Yaser's stacked
     positions. */
  .page-cn-manar .cn-bio__title      { width: 373px; }
  .page-cn-manar .cn-bio__lead       { top: 2745px; }
  .page-cn-manar .cn-bio__means      { top: 2845px; }
  .page-cn-manar .cn-bio__rule--long { top: 2868px; }
  .page-cn-manar .cn-bio__point--1,
  .page-cn-manar .cn-bio__point--2   { top: 2892px; }
  .page-cn-manar .cn-bio__point--3,
  .page-cn-manar .cn-bio__point--4   { top: 2954px; }

  /* GET: title is 3 lines and the sub stays 3 lines even at full width, so the
     header runs past the gains' Yaser positions — nudge the three gain rows
     down ~18px to clear the sub (which ends y:3617). The footnote stays put
     (still clears the last row). */
  .page-cn-manar .cn-get__sub { top: 3566px; width: 373px; }
  .page-cn-manar .cn-gain--1,
  .page-cn-manar .cn-gain--2 { top: 3628px; }
  .page-cn-manar .cn-gain--3,
  .page-cn-manar .cn-gain--4 { top: 3710px; }
  .page-cn-manar .cn-gain--5 { top: 3792px; }

  /* SPEC: the longer "1:1 online consultation via video call" wrapped into the
     Duration row — widen so it stays one line. */
  .page-cn-manar .cn-spec__v--1 { width: 250px; }

  /* DEADSPACE TIGHTEN (single-photo page, no bio portrait). The bio was sized
     for a portrait that isn't here, leaving a ~287px void between the points
     (end y:3000) and the CTA (y:3327). Pull the CTA up under the points and
     shrink the dark panel to match, then shift every section BELOW the bio up
     the same 287 so the void closes without opening a gap before the get
     section (the designed bio→get gap of 128 is preserved). The four sections
     carry z-index 5-8, kept intact so the equal transform preserves paint
     order; the faq is in flow, so its margin-top moves it up instead. */
  .page-cn-manar .cn-bio__cta   { top: 3040px; }
  .page-cn-manar .cn-bio__panel { height: 580px; }
  .page-cn-manar .cn-get,
  .page-cn-manar .cn-res,
  .page-cn-manar .cn-works,
  .page-cn-manar .cn-inv  { transform: translateY(-287px); }
  /* faq is in flow; its margin-top (base `.cn > section.cn-faq`, 0,2,1) must be
     out-specified to move it up with the transformed sections above. */
  .page-cn-manar section.cn-faq  { margin-top: 6456px; }
  /* main's min-height was sized for the taller with-portrait page; drop it 287
     so the footer follows the faq instead of leaving a void below it. */
  .page-cn-manar main { min-height: 7075px; }
}

/* ==========================================================================
   TABLET (768) refit
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

  /* HERO — .cn-hero__col is a direct child of the section, so the shared
     `.cn > section > *` makes it absolute at 0,0 and drops the title onto the
     eyebrow + rule, which stay at Yaser's y:59/79. Place the column just below
     the rule (Yaser's title y is 88) and flow the title + 3 leads + CTA inside
     it, the same shape the desktop and mobile blocks use. The leads are capped
     at 470 so they clear the portrait on the right (portrait left:560); the
     2-line title clears the portrait vertically. */
  .page-cn-manar .cn-hero__col {
    position: absolute; left: 42px; top: 88px; width: 608px;
  }
  .page-cn-manar .cn-hero__col > .cn-hero__title,
  .page-cn-manar .cn-hero__col > .cn-hero__lead,
  .page-cn-manar .cn-hero__col > .cn-hero__cta { position: static; left: auto; top: auto; }
  .page-cn-manar .cn-hero__title { width: auto; margin: 0 0 14px; }
  .page-cn-manar .cn-hero__lead  { width: 470px; margin: 0 0 10px; }
  .page-cn-manar .cn-hero__cta   { margin-top: 6px; }

  /* longer stat labels wrap + centre inside their boxes instead of Yaser's
     narrow fixed slots */
  .page-cn-manar .cn-stat__key,
  .page-cn-manar .cn-stat__val { left: 0; width: 100%; padding-inline: 10px; white-space: normal; }
  .page-cn-manar .cn-stat__val { top: 36px; }

  /* FAM title wraps to 3 lines here (title ends y:1812) — shift the lead down
     to clear it. */
  .page-cn-manar .cn-fam__lead { top: 1818px; }

  /* BIO title ("Luxury fashion is built through details, storytelling, and
     emotional connection.") wraps to 3 lines here where Yaser's is 1 and
     Anastasiia's was 2, so the whole stack is shifted down one more line
     (title ends y:2582; lead is 3 lines). */
  .page-cn-manar .cn-bio__title { white-space: normal; }
  .page-cn-manar .cn-bio__lead        { top: 2590px; }
  .page-cn-manar .cn-bio__means       { top: 2671px; }
  .page-cn-manar .cn-bio__rule--long  { top: 2694px; }
  .page-cn-manar .cn-bio__point--1,
  .page-cn-manar .cn-bio__point--2    { top: 2710px; }
  .page-cn-manar .cn-bio__point--3,
  .page-cn-manar .cn-bio__point--4    { top: 2772px; }

  /* GET: title line 2 and the sub are longer than Yaser's, so each wrapped to
     an extra line and the header block ran into the gains (at y:3251). Widen
     both (kept centred on the panel centre x:385) so the title is 2 lines and
     the sub is 2 lines — clears the gains. */
  .page-cn-manar .cn-get__title { left: 55px;  width: 660px; }
  .page-cn-manar .cn-get__sub   { left: 135px; width: 500px; }

  /* SPEC: "1:1 online consultation via video call" is longer than Yaser's and
     wrapped to 2 lines, overlapping the Duration row — widen so it stays one
     line. */
  .page-cn-manar .cn-spec__v--1 { width: 330px; }

  /* PHASE names carry the timing; "Luxury Positioning Analysis (20 min)" is too
     long for the card at 15px (it wrapped and the "(20 min)" ran into the
     underline rule). Drop the phase names to 13px so the longest sits on one
     line inside the card; nowrap keeps them all single-line. */
  .page-cn-manar .cn-phase__name { width: 240px; font-size: 13px; white-space: nowrap; }

  /* DEADSPACE (single-photo page, no works photo). The works photo sat on the
     right over a dark decorative panel; with no photo that panel is just an
     empty dark strip. Drop it so the right is light whitespace, matching the
     left-aligned title + phases (same treatment desktop uses). The base
     `.cn [aria-hidden]:empty { display:block }` (0,3,0) restores it, so the
     hide has to match that specificity to win. */
  .page-cn-manar [aria-hidden="true"]:empty.cn-works__dark { display: none; }

  /* HERO portrait — Yaser's tablet portrait is a node render with a 4px WHITE
     stroke baked in, so it reads as a separate framed card floating over the
     dark band. gc-p-havryna is a raw photo with no baked frame, so add the
     white frame here, and use cover (not the base `.cn img` fill, which
     stretches the photo). Box stays 223x267; border-box keeps the outer size,
     so the frame sits inside exactly like Yaser's. */
  .page-cn-manar .cn-hero__portrait {
    border: 4px solid var(--white);
    object-fit: cover; object-position: center;
  }
}


/* ==== 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"] .page-cn-manar .cn-hero__col {
        right: 79px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-hero__col > * {
        right: auto;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-stat__key,
html[dir="rtl"] .page-cn-manar .cn-stat__val {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-get__title {
        right: 340px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-price__title {
        right: 456px;
        left: auto
    }
}
@media (max-width: 767px) {
    html[dir="rtl"] .page-cn-manar .cn-hero__col {
        right: 9px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-hero__col > .cn-hero__title,
html[dir="rtl"] .page-cn-manar .cn-hero__col > .cn-hero__lead {
        right: auto;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-hero__atelier {
        right: -595px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-hero__portrait {
        right: 116px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-hero__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-stat__key,
html[dir="rtl"] .page-cn-manar .cn-stat__val {
        right: 0;
        left: auto
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    html[dir="rtl"] .page-cn-manar .cn-hero__col {
        right: 42px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-hero__col > .cn-hero__title,
html[dir="rtl"] .page-cn-manar .cn-hero__col > .cn-hero__lead,
html[dir="rtl"] .page-cn-manar .cn-hero__col > .cn-hero__cta {
        right: auto;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-stat__key,
html[dir="rtl"] .page-cn-manar .cn-stat__val {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-get__title {
        right: 55px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manar .cn-get__sub {
        right: 135px;
        left: auto
    }
}