/* ==========================================================================
   THE DESIGNERS HUB — Consultation: Anastasiia Havryna (per-page refit)

   Loads AFTER consultation.css. consultation.css is the shared Yaser template,
   pinned to Yaser's exact wording and element counts. Anastasiia's copy differs
   (3 hero leads vs 1, 5 "what you'll get" vs 6, 3 testimonials vs 4, 5 FAQ vs 7,
   longer stat labels, no closing/footnote/note lines), so the deltas below
   refit those spots so the page still reads like the Yaser design.
   Scoped to .page-cn-anastasiia so the real Yaser page is untouched.
   ========================================================================== */

/* --- Photos: three DISTINCT Anastasiia photos, none reused ----------------
   Hero  = gc-p-havryna (front, hand-on-hip).
   Bio   = tm-x-anastasiia (her team shot; landscape, so cover into the box).
   Works = cons-anas-side.jpg (side pose, downloaded from the doc's Drive folder).
   The two team/works shots are cropped to their portrait boxes. */
.page-cn-anastasiia .cn-bio__portrait,
.page-cn-anastasiia .cn-works__photo { object-fit: cover; object-position: center top; }

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

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

  /* --- BIO: her title ("Strategy that combines branding, sales, and real
     market understanding.") is far longer than Yaser's and wraps to 2 lines,
     so the stack below it is shifted down one line (Yaser's was pinned to a
     one-line title). */
  .page-cn-anastasiia .cn-bio__title { white-space: normal; }
  .page-cn-anastasiia .cn-bio__lead        { top: 182px; }
  .page-cn-anastasiia .cn-bio__means       { top: 296px; }
  .page-cn-anastasiia .cn-bio__rule--long  { top: 319px; }
  .page-cn-anastasiia .cn-bio__point--1,
  .page-cn-anastasiia .cn-bio__point--2    { top: 336px; }
  .page-cn-anastasiia .cn-bio__point--3,
  .page-cn-anastasiia .cn-bio__point--4    { top: 383px; }

  /* --- PHASE names include the timing ("Strategic Direction (10 min)"), longer
     than Yaser's short names — widen the box so nothing clips. */
  .page-cn-anastasiia .cn-phase__name { width: 300px; }

  /* --- PRICE-card title longer than Yaser's — centre it across the whole
     header bar. */
  .page-cn-anastasiia .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-anastasiia .cn-hero__col {
    position: absolute; left: 9px; top: 90px; width: 371px;
  }
  .page-cn-anastasiia .cn-hero__col > .cn-hero__title,
  .page-cn-anastasiia .cn-hero__col > .cn-hero__lead { position: static; left: auto; top: auto; }
  .page-cn-anastasiia .cn-hero__title { width: auto; margin: 0 0 14px; }
  .page-cn-anastasiia .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. */
  .page-cn-anastasiia .cn-hero__band  { top: 22px; height: 340px; }
  .page-cn-anastasiia .cn-hero__panel { display: block; top: 500px; height: 168px; }

  /* Atelier: bright source (set in markup) + Figma's grayscale/blur, sized and
     placed so the light DESK area lands in the visible band (362-500) flanking
     the portrait; the panel above covers everything below it. */
  .page-cn-anastasiia .cn-hero__atelier {
    top: 86px; left: -595px; width: 1580px; height: 690px;
    filter: blur(1.25px) grayscale(1);
  }
  /* portrait: Figma's 159x190, centred, overlapping the band's bottom edge */
  .page-cn-anastasiia .cn-hero__portrait { top: 352px; left: 116px; }
  /* button below the portrait (col is its offset parent at y:90, so 470 lands
     it at ~560, clear of the 352-542 portrait) */
  .page-cn-anastasiia .cn-hero__cta { position: absolute; left: 0; top: 470px; }

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

  /* phase names include the timing, longer than Yaser's — widen within the
     242px card so they stay on one line. */
  .page-cn-anastasiia .cn-phase__name { width: 200px; }

  /* BIO: her title ("Strategy that combines branding, sales, and real market
     understanding.") wraps to ~5 lines here where Yaser's is 2, so it collided
     with the lead. Shift the lead + means + points + portrait down to clear it
     (same fix the desktop block already has). */
  .page-cn-anastasiia .cn-bio__lead       { top: 2745px; }
  .page-cn-anastasiia .cn-bio__means      { top: 2845px; }
  .page-cn-anastasiia .cn-bio__rule--long { top: 2868px; }
  .page-cn-anastasiia .cn-bio__point--1,
  .page-cn-anastasiia .cn-bio__point--2   { top: 2892px; }
  .page-cn-anastasiia .cn-bio__point--3,
  .page-cn-anastasiia .cn-bio__point--4   { top: 2954px; }
  .page-cn-anastasiia .cn-bio__portrait   { top: 3032px; }

  /* GET ("what you will get"): her title wraps to 3 lines here where Yaser's is
     2, so it collided with the sub. Shift the sub down to clear it. */
  .page-cn-anastasiia .cn-get__sub { top: 3566px; }
}

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

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

  /* BIO title ("Strategy that combines branding, sales, and real market
     understanding.") is far longer than Yaser's one-line title, and the shared
     tablet rule forces every bio title nowrap — so it was clipped at the
     section edge (scrollWidth 1099 in a 590 box). Let it wrap to 2 lines and
     shift the stack below it down one line (+31 = one line at lh 31). */
  .page-cn-anastasiia .cn-bio__title { white-space: normal; }
  .page-cn-anastasiia .cn-bio__lead        { top: 2559px; }
  .page-cn-anastasiia .cn-bio__means       { top: 2640px; }
  .page-cn-anastasiia .cn-bio__rule--long  { top: 2663px; }
  .page-cn-anastasiia .cn-bio__point--1,
  .page-cn-anastasiia .cn-bio__point--2    { top: 2679px; }
  .page-cn-anastasiia .cn-bio__point--3,
  .page-cn-anastasiia .cn-bio__point--4    { top: 2741px; }

  /* PHASE names carry the timing ("Strategic Direction (10 min)"), longer than
     Yaser's short names — widen so each stays on one line and clears the phase
     text below it (phase text sits at top:89, name at top:56). */
  .page-cn-anastasiia .cn-phase__name { width: 240px; }

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