/* ═══════════════════════════════════════════════════════════════════════
   FIDA — PORTFOLIO
   A 1:1 build of Figma frame "PORTFOLIO" (1440 × 4397, id 85:349).
   Loaded AFTER main.css. Only what is new to this page lives here.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --stage-h:4397px;

  /* ── ASSET SLOTS ── four cards re-crop images already downloaded for HOME
     and SERVICES; only the last three are unique to this page.          */
  --img-imanelle:url('../assets/img/work-imanelle.jpg');
  --img-fespotte:url('../assets/img/work-fespotte.jpg');
  --img-valena:url('../assets/img/work-valena.jpg');
  --img-pf-hero:url('../assets/img/process-4-refinement.jpg');
}
.stage{background:var(--white)}

/* ── z-order · Figma children[0] paints first ─────────────────────────── */
.sec-footer{z-index:1}
.sec-cta   {z-index:2}
.sec-works {z-index:3}
.sec-hero  {z-index:4}
.sec-nav   {z-index:5}

/* ── type new to this page ─────────────────────────────────────────── */
.f-h96 {font:400 96px/115.68px var(--ff-display)}   /* "Portfolio"        */
.pj-sb24{font-weight:600;font-size:24px}            /* the project name   */
.pj-m16 {font-weight:500}                           /* Figma override 5   */

/* ── page hero · same 180° flipped backdrop as SERVICES ────────────────
   Node 90:9, imageTransform byte-identical to SERVICES' 56:154. See the
   derivation in services.css — the old rule used the crop fractions as pixel
   sizes and squashed the photo into a 206px band of the 445px hero.       */
.sec-hero{background:var(--ink);overflow:hidden}
.sec-hero i{
  position:absolute;inset:0;display:block;opacity:.15;
  background-repeat:no-repeat;
  background-size:100.028% 215.815%;background-position:0% 28.713%;
  transform:rotate(180deg);background-image:var(--img-pf-hero);
}

.sec-nav{background:transparent;overflow:visible}
.sec-nav .logo-nav{position:absolute;display:block}

/* ── the seven cards ───────────────────────────────────────────────────
   Every thumbnail is a Figma STRETCH fill with its own crop matrix, so each
   gets its own background-size / position rather than a shared `cover`.
   Four of them re-crop a photo another page already uses — same file,
   different framing, exactly as the Figma does it.                      */
.work{position:absolute;border-radius:10px;background-repeat:no-repeat}
.w-mozitti {background-image:var(--img-work1);   background-size:126.44% 102.61%;background-position:26.91% -1.83%}
.w-khadera {background-image:var(--img-work2);   background-size:101.61% 150.30%;background-position:48.48% 32.71%}
.w-lalla   {background-image:var(--img-work3);   background-size:126.13% 193.14%;background-position:63.55% 47.33%}
.w-cook    {background-image:var(--img-svc1a);   background-size:149.48% 138.44%;background-position:30.54% 49.65%}
.w-imanelle{background-image:var(--img-imanelle);background-size:155.48% 104.99%;background-position:89.85% 46.79%}
.w-fespotte{background-image:var(--img-fespotte);background-size:170.84% 177.02%;background-position:49.85% 54.03%}
.w-valena  {background-image:var(--img-valena);  background-size:109.81% 101.69%;background-position:61.23% 38.86%}