/* ═══════════════════════════════════════════════════════════════════════
   FIDA — ABOUT
   A 1:1 build of Figma frame "ABOUT" (1440 × 4031, id 49:375).
   Loaded AFTER main.css, which carries the artboard, the type scale and
   every shared primitive. Only what is new to this page lives here.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --stage-h:4031px;                       /* ABOUT's Figma frame height */
  --page-about:#3a3a3a;                   /* the ABOUT frame's own fill  */

  /* ── ASSET SLOTS, same rule as main.css: change only these lines ──── */
  --img-journey-bg:url('../assets/img/about-journey-bg.jpg');
  --img-journey-portrait:url('../assets/img/about-portrait-journey.jpg');
  --img-philosophy-bg:url('../assets/img/about-philosophy-bg.jpg');
}
.stage{background:var(--page-about)}

/* ── z-order · Figma children[0] paints first ──────────────────────────
   ABOUT lists FOOTER → CTA → CLIENT WORDS → NANIFESTO → PRINCIPLES →
   MY PHILOSOPHY → MY JOURNEY → NAVEBAR, so the navbar is front-most.   */
.sec-footer    {z-index:1}
.sec-cta       {z-index:2}
.sec-words     {z-index:3}
.sec-mani      {z-index:4}
.sec-principles{z-index:5}
.sec-philosophy{z-index:6}
.sec-journey   {z-index:7}
.sec-nav       {z-index:8}

/* ── type new to this page ─────────────────────────────────────────── */
.f-name96{font:italic 400 96px/105.6px var(--ff-name)}   /* "My Journey"      */
.f-p24j  {font:400 24px/28.92px var(--ff-display)}       /* journey paragraph */
.f-i18m  {font:500 18px/27.54px var(--ff-sans)}          /* principles list   */
.in-b    {font-weight:700}                               /* Figma override 1  */
.f-name96 .in,.f-h48 .in{white-space:pre}

/* ── NAVEBAR ───────────────────────────────────────────────────────────
   Unlike HOME's, this navbar is NOT isFixed and its fill is #000000 at 0%
   opacity — it sits transparent over the hero image and scrolls away.  */
.sec-nav{background:transparent;overflow:visible}
/* No `background` here. main.css paints the wordmark as a MASK over
   background-color:currentColor so one flat-black file can be re-tinted per
   page; the `background` shorthand resets background-color to transparent and
   paints the flat-black art directly — and at (0,2,0) it outranked main.css's
   (0,1,0), so ABOUT's lilac wordmark was rendering black on a black nav. */
.sec-nav .logo-nav{position:absolute;display:block}

/* ── MY JOURNEY ────────────────────────────────────────────────────────
   Both backdrops carry a quarter turn in their Figma imageTransform.

   That matrix was being read backwards. It maps the FRAME's normalised space
   into the IMAGE's — it says which part of the picture shows at each point of
   the frame — and it had been read as "the picture occupies this sub-rectangle
   of the frame". An IMAGE fill covers its whole frame by definition, and
   reading it the wrong way round produced layers far too small: the philosophy
   picture covered 736 of 1440px, leaving 166px bare at the left and 538 at the
   right, and the journey banner covered 954 of 1440.

   Solved by placing the frame's four corners where the matrix says they go.
   Both now land exactly, and both come out at the photograph's own 0.4619
   aspect — which a wrong reading would not. The rotations come out opposite
   to the old values, which is the tell.                                  */
.sec-journey{overflow:hidden}
.jr-white{position:absolute;background:var(--white)}
.jr-imgwrap{position:absolute;overflow:hidden;background:var(--ink)}
.jr-imgwrap i{
  position:absolute;display:block;transform-origin:0 0;
  background-size:100% 100%;background-repeat:no-repeat;
  opacity:.17;
}
/* imageTransform [[0,0.6627,0.2398],[-0.9907,0,0.9934]]
   frame 1440 x 445 — the frame spans 99.1% of the picture one way and 66.3%
   the other, so it is drawn 671.50 x 1453.52 and turned a quarter. */
.jr-bg i{
  left:1443.92px;top:-161.02px;width:671.50px;height:1453.52px;
  transform:rotate(90deg);background-image:var(--img-journey-bg);
}
.jr-portrait{
  position:absolute;
  background:var(--img-journey-portrait) center/cover no-repeat;
}
.lets-talk{
  position:absolute;display:block;border-radius:40px;
  border:1px solid var(--ink);background:transparent;
}
.lt-pill{position:absolute;display:block;background:var(--white)}

/* ── MY PHILOSOPHY ─────────────────────────────────────────────────── */
.sec-philosophy{background:var(--ink);overflow:hidden}
.sec-philosophy i{
  position:absolute;display:block;transform-origin:0 0;
  background-size:100% 100%;background-repeat:no-repeat;opacity:.16;
  /* imageTransform [[0,-0.5108,0.6263],[0.9597,0,0.0130]]
     frame 1440 x 354 — the frame spans 96.0% of the picture one way and 51.1%
     the other, so it is drawn 693.00 x 1500.41 and turned a quarter. */
  left:-19.54px;top:434.00px;width:693.00px;height:1500.41px;
  transform:rotate(-90deg);background-image:var(--img-philosophy-bg);
}

/* ── PRINCIPLES ────────────────────────────────────────────────────── */
.sec-principles{background:var(--white)}