/* ==========================================================================
   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-manufacturing 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-manufacturing .cn-hero__col {
    position: absolute;
    left: 79px; top: 176px; width: 690px;
  }
  .page-cn-manufacturing .cn-hero__col > * { position: static; left: auto; top: auto; }
  .page-cn-manufacturing .cn-hero__title { width: auto; margin: 0 0 16px; }
  .page-cn-manufacturing .cn-hero__lead {
    position: static; width: auto;
    font-size: 16px; line-height: 21px; margin: 0 0 12px;
  }
  .page-cn-manufacturing .cn-hero__cta { margin-top: 8px; }

  /* longer eyebrow ("Consultation with Anastasiia Havryna") */
  .page-cn-manufacturing .cn-hero__eyebrow { width: 360px; }
  .page-cn-manufacturing .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-manufacturing .cn-stat__key,
  .page-cn-manufacturing .cn-stat__val {
    left: 0; width: 100%; padding-inline: 10px;
    white-space: normal;
  }
  .page-cn-manufacturing .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-manufacturing .cn-fam__lead { top: 223px; }

  /* --- BIO: Yaser layout WITH the Yaser photos (same as the private
     consultation). The title wraps to 3 lines, so the lead/means/rule/points
     are stacked below it in the right-hand column beside the portrait. */
  .page-cn-manufacturing .cn-bio__title { white-space: normal; }
  .page-cn-manufacturing .cn-bio__lead        { top: 221px; }
  .page-cn-manufacturing .cn-bio__means       { top: 296px; }
  .page-cn-manufacturing .cn-bio__rule--long  { top: 319px; }
  .page-cn-manufacturing .cn-bio__point--1,
  .page-cn-manufacturing .cn-bio__point--2    { top: 336px; }
  .page-cn-manufacturing .cn-bio__point--3,
  .page-cn-manufacturing .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-manufacturing .cn-get__title { left: 340px; width: 760px; }
  .page-cn-manufacturing .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-manufacturing .cn-phase__name { width: 320px; }

  /* --- PRICE-card title longer than Yaser's — centre it across the whole
     header bar. */
  .page-cn-manufacturing .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-manufacturing .cn-hero__col {
    position: absolute; left: 9px; top: 90px; width: 371px;
  }
  .page-cn-manufacturing .cn-hero__col > .cn-hero__title,
  .page-cn-manufacturing .cn-hero__col > .cn-hero__lead { position: static; left: auto; top: auto; }
  .page-cn-manufacturing .cn-hero__title { width: auto; margin: 0 0 14px; }
  .page-cn-manufacturing .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-manufacturing .cn-hero__band  { top: 22px; height: 388px; }
  .page-cn-manufacturing .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-manufacturing .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-manufacturing .cn-hero__portrait { top: 400px; left: 116px; }
  /* button below the portrait (col is its offset parent at y:90) */
  .page-cn-manufacturing .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-manufacturing .cn-stats { transform: translateY(48px); }

  /* longer stat values wrap and centre inside their boxes */
  .page-cn-manufacturing .cn-stat__key,
  .page-cn-manufacturing .cn-stat__val { left: 0; width: 100%; padding-inline: 8px; white-space: normal; }
  .page-cn-manufacturing .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-manufacturing .cn-phase__name { width: 222px; font-size: 12px; white-space: nowrap; }

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

  /* BIO: Yaser portrait shows (base, y:2965). Manufacturing's title is longer
     than Yaser's, so widen it to full width and stack the lead/means/rule/points
     below it — all sitting above the portrait. */
  .page-cn-manufacturing .cn-bio__title      { width: 373px; }
  .page-cn-manufacturing .cn-bio__lead       { top: 2745px; }
  .page-cn-manufacturing .cn-bio__means      { top: 2845px; }
  .page-cn-manufacturing .cn-bio__rule--long { top: 2868px; }
  .page-cn-manufacturing .cn-bio__point--1,
  .page-cn-manufacturing .cn-bio__point--2   { top: 2892px; }
  .page-cn-manufacturing .cn-bio__point--3,
  .page-cn-manufacturing .cn-bio__point--4   { top: 2954px; }
  /* manufacturing's 4 points run longer than Yaser's, so drop the portrait +
     its band ~50px to sit below the last point (CTA at 3327 still clears it). */
  .page-cn-manufacturing .cn-bio__portrait { top: 3015px; }
  .page-cn-manufacturing .cn-bio__photo    { top: 3023px; }

  /* GET: the title wraps to 3 lines (ends y:3576, longer than Yaser's), so the
     sub must drop to clear it and the three gain rows drop with it. The footnote
     stays put (still clears the last row). */
  .page-cn-manufacturing .cn-get__sub { top: 3588px; width: 373px; }
  .page-cn-manufacturing .cn-gain--1,
  .page-cn-manufacturing .cn-gain--2 { top: 3648px; }
  .page-cn-manufacturing .cn-gain--3,
  .page-cn-manufacturing .cn-gain--4 { top: 3730px; }
  .page-cn-manufacturing .cn-gain--5 { top: 3812px; }

  /* RES: the base panel is sized for Yaser's FOUR testimonials, but this page
     has three, so they sat in slots 1-3 and left a ~180px hole before the CTA.
     Redistribute the three evenly across the title->CTA span so the gaps match
     (step ~199) and the block reads symmetric. */
  .page-cn-manufacturing .cn-tst--2 { top: 4398px; }
  .page-cn-manufacturing .cn-tst--3 { top: 4597px; }

  /* INV: "Manufacturing consultation with Yaser Albeer" is longer than Yaser's
     own title, so at the base 172px box it wrapped to THREE lines and the last
     spilled below the dark header plaque. Widen it to fill the plaque (211) and
     drop 1px so it settles to two lines inside the box. */
  .page-cn-manufacturing .cn-price__title { left: 64px; width: 205px; font-size: 13px; }

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

}

/* ==========================================================================
   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-manufacturing .cn-hero__col {
    position: absolute; left: 42px; top: 88px; width: 608px;
  }
  .page-cn-manufacturing .cn-hero__col > .cn-hero__title,
  .page-cn-manufacturing .cn-hero__col > .cn-hero__lead,
  .page-cn-manufacturing .cn-hero__col > .cn-hero__cta { position: static; left: auto; top: auto; }
  .page-cn-manufacturing .cn-hero__title { width: auto; margin: 0 0 14px; }
  .page-cn-manufacturing .cn-hero__lead  { width: 470px; margin: 0 0 10px; }
  .page-cn-manufacturing .cn-hero__cta   { margin-top: 6px; }

  /* longer stat labels wrap + centre inside their boxes instead of Yaser's
     narrow fixed slots */
  .page-cn-manufacturing .cn-stat__key,
  .page-cn-manufacturing .cn-stat__val { left: 0; width: 100%; padding-inline: 10px; white-space: normal; }
  .page-cn-manufacturing .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-manufacturing .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-manufacturing .cn-bio__title { white-space: normal; }
  .page-cn-manufacturing .cn-bio__lead        { top: 2590px; }
  .page-cn-manufacturing .cn-bio__means       { top: 2671px; }
  .page-cn-manufacturing .cn-bio__rule--long  { top: 2694px; }
  .page-cn-manufacturing .cn-bio__point--1,
  .page-cn-manufacturing .cn-bio__point--2    { top: 2710px; }
  .page-cn-manufacturing .cn-bio__point--3,
  .page-cn-manufacturing .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-manufacturing .cn-get__title { left: 55px;  width: 660px; }
  .page-cn-manufacturing .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-manufacturing .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-manufacturing .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-manufacturing [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-manufacturing .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-manufacturing .cn-hero__col {
        right: 79px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-hero__col > * {
        right: auto;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-stat__key,
html[dir="rtl"] .page-cn-manufacturing .cn-stat__val {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-get__title {
        right: 340px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-price__title {
        right: 456px;
        left: auto
    }
}
@media (max-width: 767px) {
    html[dir="rtl"] .page-cn-manufacturing .cn-hero__col {
        right: 9px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-hero__col > .cn-hero__title,
html[dir="rtl"] .page-cn-manufacturing .cn-hero__col > .cn-hero__lead {
        right: auto;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-hero__atelier {
        right: -595px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-hero__portrait {
        right: 116px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-hero__cta {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-stat__key,
html[dir="rtl"] .page-cn-manufacturing .cn-stat__val {
        right: 0;
        left: auto
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    html[dir="rtl"] .page-cn-manufacturing .cn-hero__col {
        right: 42px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-hero__col > .cn-hero__title,
html[dir="rtl"] .page-cn-manufacturing .cn-hero__col > .cn-hero__lead,
html[dir="rtl"] .page-cn-manufacturing .cn-hero__col > .cn-hero__cta {
        right: auto;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-stat__key,
html[dir="rtl"] .page-cn-manufacturing .cn-stat__val {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-get__title {
        right: 55px;
        left: auto
    }
    html[dir="rtl"] .page-cn-manufacturing .cn-get__sub {
        right: 135px;
        left: auto
    }
}

/* --------------------------------------------------------------------------
   Manufacturing refit: the "What you will get" title is two full sentences
   (longer than Manar's), so it must wrap instead of overflowing. Let it wrap
   at every breakpoint and drop the sub to clear the taller title.
   -------------------------------------------------------------------------- */
.page-cn-manufacturing .cn-get__title { white-space: normal; }