/* ═══════════════════════════════════════════════════════════════════════
   FIDA — SERVICES
   A 1:1 build of Figma frame "SERVICES" (1440 × 4977, id 56:2).
   Loaded AFTER main.css. Only what is new to this page lives here.
   (The frame is toggled off in the Figma canvas — visible:false on the root
   — but its contents are complete and are what the prototype links to.)
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --stage-h:4977px;
  --page-svc:#3a3a3a;

  /* ── ASSET SLOTS ── package 3's photo and the hero backdrop both reuse
     process-4-refinement, already downloaded for HOME.                   */
  --img-svc1a:url('../assets/img/svc-pkg1-a.jpg');
  --img-svc1b:url('../assets/img/svc-pkg1-b.jpg');
  --img-svc2a:url('../assets/img/svc-pkg2-a.jpg');
  --img-svc2b:url('../assets/img/svc-pkg2-b.png');
  --img-svc3a:url('../assets/img/process-4-refinement.jpg');
  --img-svc-hero:url('../assets/img/process-4-refinement.jpg');
}
.stage{background:var(--page-svc)}

/* ── z-order · Figma children[0] paints first ─────────────────────────── */
.sec-pkg3  {z-index:1}
.sec-pkg2  {z-index:2}
.sec-pkg1  {z-index:3}
.sec-hero  {z-index:4}
.sec-nav   {z-index:5}
.sec-footer{z-index:6}
.sec-cta   {z-index:7}
.sec-words {z-index:8}
.sec-mani  {z-index:9}

/* ── type new to this page ─────────────────────────────────────────── */
.f-num180{font:italic 400 180px/198px var(--ff-name)}   /* the "1"          */
.f-num150{font:italic 400 150px/165px var(--ff-name)}   /* the "2" and "3"  */
.f-h64   {font:400 64px/77.12px var(--ff-display)}      /* page title       */
.f-h50   {font:500 50px/60.25px var(--ff-display)}      /* package names    */
.f-p18l  {font:300 18px/21.69px var(--ff-display)}      /* package tagline  */
.f-i18l2 {font:300 18px/21.78px var(--ff-sans)}         /* package body     */
.f-i18m2 {font:500 18px/21.78px var(--ff-sans)}         /* "Package Contents:" */
.f-i20l  {font:300 20px/24.2px var(--ff-sans)}          /* extended lists   */
.f-i20m  {font:500 20px/24.2px var(--ff-sans)}          /* tailored line    */
.f-i14l  {font:300 14px/16.94px var(--ff-sans)}         /* contents list    */
.in-m    {font-weight:500}                              /* Figma override 4 */
/* Only the numerals are pinned to one line. The page title (547 × 154) and
   "Extending your Brand Experience" (406 × 120) are two-line headings in
   Figma — both boxes are exactly 2 × their line-height — so they must be
   allowed to wrap. */
.f-num180 .in,.f-num150 .in{white-space:pre}

/* ── page hero ─────────────────────────────────────────────────────────
   fills = [ SOLID #000000 , IMAGE @15% ] on a 1440 × 445 clipping frame.

   imageTransform [[-0.9997198,0,0.9997198],[0,-0.4633553,0.6174365]] maps the
   BOX to the IMAGE, and both diagonals are negative — a 180° turn. The old
   rule multiplied those two FRACTIONS by the box and used the results as
   PIXELS (1440 × 0.9997198 = 1439.6 and 445 × 0.4633553 = 206.19), then
   stretched the whole photo into that 206px band with background-size 100%
   100%. So the backdrop covered 206 of the hero's 445 rows with a hard seam
   above and below, instead of being a vertical slice of the source spread
   across the full hero.

   Derived the same way contact.css does it. With the element rotated 180°,
   the un-rotated placement is the slice reversed:
     size-y = 1 / 0.4633553                     = 215.815%
     pos-y  = (0.6174365 - 0.4633553) / (1 - 0.4633553) =  28.713%
     size-x = 1 / 0.9997198                     = 100.028%
     pos-x  = 0 / (1 - 0.9997198)               =   0%
   transform-origin stays at its default centre — a 180° turn about the
   centre of a full-bleed box maps the box onto itself.                    */
.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-svc-hero);
}

/* ── the three package bands ───────────────────────────────────────── */
.sec-pkg1{background:var(--white)}
.sec-pkg2{background:var(--ink)}
.sec-pkg3{background:var(--lilac)}

/* Figma "Vector 5" — a 1px rule under each package tagline */
.rule{position:absolute;height:1px;background:currentColor}

/* Every package photo is a Figma STRETCH fill whose imageTransform crops it.
   background-size = 1/scale, background-position = offset/(1-scale) — that
   reproduces the exact crop instead of falling back to `cover`.          */
.svc-img{position:absolute;background-repeat:no-repeat}
.svc-1a{background-image:var(--img-svc1a);background-size:112.40% 180.55%;background-position:-0.54% 49.97%}
.svc-1b{background-image:var(--img-svc1b);background-size:111.77% 229.80%;background-position:0.23% 55.45%}
.svc-2a{background-image:var(--img-svc2a);background-size:129.08% 155.78%;background-position:49.89% 50.00%}
.svc-2b{background-image:var(--img-svc2b);background-size:112.41% 105.22%;background-position:30.42% -3.15%}
.svc-3a{background-image:var(--img-svc3a);background-size:131.45% 145.77%;background-position:87.13% 21.33%}

/* ── "Creat Your Brand" pill · 201 × 29, radius 40 ─────────────────── */
.btn-sm{position:absolute;display:block;border-radius:40px}
.btn-sm-black{background:var(--ink)}
.btn-sm-lilac{background:var(--lilac);border:.5px solid var(--ink)}

/* ── NAVEBAR — transparent like ABOUT's, and it scrolls ────────────── */
.sec-nav{background:transparent;overflow:visible}
/* No `background` — see the note in about.css. The shorthand killed the mask
   and painted the flat-black asset onto the black nav. */
.sec-nav .logo-nav{position:absolute;display:block}