/* ═══════════════════════════════════════════════════════════════════════
   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 90° rotation in their Figma imageTransform. The
   element is sized in pre-rotation units and pivoted from its top-left,
   which reproduces the matrix exactly rather than approximating it.    */
.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]] → rotate(-90°) */
.jr-bg i{
  left:345.31px;top:442.07px;width:440.85px;height:954.29px;
  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]] → rotate(90°) */
  left:901.82px;top:4.61px;width:339.73px;height:735.58px;
  transform:rotate(90deg);background-image:var(--img-philosophy-bg);
}

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