/* ============================================================
   PÉNDULO CASE STUDY  —  artboard 1440 × 8567
   (was 9510; the launch-film block was removed and the tail closed up)
   Rebuilt 1:1 from ~/Downloads/pendulo page.svg.

   Scales to WIDTH like the hero and section 3: --k is set before
   first paint by the inline head script. Everything inside .pg__art
   is positioned in artboard coordinates.

   Type solved against the SVG ink boxes — every block's ink HEIGHT
   lands on 0.00:
     headings  PP Editorial New UltralightItalic 75 (the Swing line 55)
     card titles  Neue Montreal Medium 30
     body         Neue Montreal Book 18, leading 29
     hero leads and the step labels  Book 18, leading 25
     nav          Neue Montreal Regular 12
   ============================================================ */

body.case{ background:#000; margin:0 }

.pg{
  position:relative;
  width:100%;
  height:calc(7573px * var(--k));
  overflow:hidden;
  background:#000;
}
.pg__art{
  position:absolute;
  left:0; top:0;
  width:1440px; height:7573px;
  transform-origin:0 0;
  transform:scale(var(--k));
}

/* -- media frames: box in artboard coords, image placed inside it by the
      pattern matrix (imgLeft = e·w, imgTop = f·h, imgW = a·IW·w …) -- */
.pg__frame{ position:absolute; overflow:hidden }
.pg__frame img,
.pg__frame video{ position:absolute; max-width:none; display:block }

/* the artboard carries this one at 74% */
.pg__frame--dim{ opacity:.74 }

/* hero bleeds 94px above the artboard and rounds only its bottom corners */
.pg__hero{ border-radius:0 0 45px 45px }

/* -- nav pill: SVG rect 425.5,39.5 589×38 rx19 with a 1px stroke, which
      strokes from the CENTRE → a 590×39 border-box at 425,39 -- */
.pg__nav{
  position:absolute;
  left:425px; top:39px;
  width:590px; height:39px;
  box-sizing:border-box;
  border:1px solid #EBEBEB;
  border-radius:19.5px;
  background:rgba(0,0,0,.01);
}
.pg__nav a{
  position:absolute;
  top:14px;                       /* 53 − 39 */
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:12px;
  line-height:12px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}
.pg__nav a:nth-child(1){ left:62.01px }    /* 487.01 − 425 */
.pg__nav a:nth-child(2){ left:194.03px }
.pg__nav a:nth-child(3){ left:330.02px }
.pg__nav a:nth-child(4){ left:493.02px }

/* -- type -- */
.pg__lead,.pg__body,.pg__cardbody,.pg__cardtitle,.pg__h{
  position:absolute; margin:0; color:#fff; white-space:nowrap;
}
.pg__lead{
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:350; font-size:18px; line-height:25px;
}
.pg__body{
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:350; font-size:18px; line-height:29px;
}
.pg__body--dim,.pg__cardbody{ opacity:.7 }
.pg__cardbody{
  position:absolute; margin:0; color:#fff; white-space:nowrap;
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:350; font-size:18px; line-height:29px;
}
.pg__cardtitle{
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:500; font-size:30px; line-height:30px;
}
.pg__h{
  font-family:'PP Editorial New',Georgia,serif;
  font-style:italic; font-weight:200;
  font-size:75px; line-height:75px;
}
.pg__h--sm{ font-size:55px; line-height:55px }

/* -- challenge / insight slabs -----------------------------------------
   The artboard fills these with a flat #525252 @13% and no stroke, which
   reads as almost nothing on black. At the user's request they now carry
   a lit hairline outline instead — brightest along the top edge, fading
   out down the sides, with a whisper of light on the inside top edge.

   The border is a gradient, which needs the two-layer background trick:
   the padding-box layer paints the fill, the border-box layer shows
   through the 1px TRANSPARENT border. box-sizing:border-box keeps the
   card at the artboard's 561×250 rather than 563×252.

   THE FILL LAYER MUST BE OPAQUE. The border-box layer is painted across
   the WHOLE rounded rect, not just the 1px ring — a translucent fill lets
   it bleed through and washes the card grey from the top down. These are
   the artboard's rgba(82,82,82,.16→.05) composited over the black page,
   so they look identical while actually hiding the layer beneath. -- */
.pg__card{
  position:absolute;
  box-sizing:border-box;
  width:561px; height:250px;
  border-radius:20px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, #0d0d0d, #0a0a0a) padding-box,
    linear-gradient(180deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.16) 30%,
      rgba(255,255,255,.13) 62%,
      rgba(255,255,255,.12) 85%,
      rgba(255,255,255,.15) 100%) border-box;
  /* no inset top highlight — the approved render has none, and it was
     doubling up with the .38 top stop of the border gradient */
}

/* -- the artboard's own bottom fade over the interior shot.
      Figma gradient: black at y2889, white at y2579, multiply @77% —
      so it darkens DOWNWARD and leaves the top untouched. -- */
.pg__scrim{
  position:absolute;
  border-radius:0 0 15px 15px;
  background:linear-gradient(to top,#000,#fff);
  mix-blend-mode:multiply;
  opacity:.77;
  pointer-events:none;
}

/* -- rollout step diagram: five centred 2-line labels on one baseline -- */
.pg__steps{
  position:absolute; left:0; top:3169px;
  margin:0; padding:0; list-style:none;
  width:1440px; height:60px;
}
.pg__steps li{
  position:absolute; top:0;
  width:260px;
  text-align:center;
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:350; font-size:18px; line-height:25px;
  color:#fff;
}
.pg__steps span{ display:block; white-space:nowrap }

/* the connectors are the artboard's own paths, kept as SVG so the
   arrowheads stay exact */
.pg__flow{
  position:absolute; left:0; top:0;
  width:1440px; height:7573px;
  pointer-events:none;
  overflow:visible;
}


/* ---- post-launch carousel -------------------------------------------
   NOT in the artboard — the region between the post-launch copy (ends
   ~6800) and "My role" (7947) is empty there. Derived from the clips:
   all five are 2574x3218, so the cards are 4:5. Five across on the
   page's own 54 margin with a 15 gap gives 254.4 x 318.

   Same seamless recipe as the reels marquee: three copies of the set,
   travelling exactly one set width (5 x 269.4 = 1347), ease:'none'. */
.pg__carousel{
  position:absolute;
  left:54px;
  width:1332px; height:318px;
}
.pg__ptrack{
  position:absolute;
  left:0; top:0;
  height:318px;
  display:flex;
  gap:15px;                  /* five cards fill 1332 exactly: 5x254.4 + 4x15 */
}
.pg__pcard{
  flex:0 0 auto;
  width:254.4px; height:318px;
  border-radius:15px;
  overflow:hidden;
  background:#111;
}
.pg__pcard video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}


/* ---- second post-launch row --------------------------------------
   Also not in the artboard. The four clips are 720x960, so these cards
   are 3:4 — a different shape from the 4:5 row above, on the same 54
   margin and 15 gap. Static, like the row above. */
.pg__jrow{
  position:absolute;
  left:54px;
  width:1332px; height:429px;
}
.pg__jtrack{
  position:absolute;
  left:0; top:0;
  height:429px;
  display:flex;
  gap:15px;                  /* 4x321.75 + 3x15 = 1332 exactly */
}
.pg__jcard{
  flex:0 0 auto;
  width:321.75px; height:429px;
  border-radius:15px;
  overflow:hidden;
  background:#111;
}
.pg__jcard video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}


/* ---- role / result section (Desktop - 410.svg) --------------------
   Two translucent cards over a full-width image. The artboard's rect
   carries matrix(-1 0 0 1 1386 104): x = e - w = 54, and the pattern
   fill is MIRRORED — so the image is flipped and its left offset is
   the mirror of [0, 1357] in a 1332 box, i.e. -25. */
.pg__rolefig img{ transform:scaleX(-1) }
.pg__rcard{
  position:absolute;
  border-radius:20px;
  background:rgba(0,0,0,.13);   /* the artboard's black @13%, not #525252 */
}

/* -- reveal masks: vertical clip only. PP Editorial New italic overhangs
      its advance width, so bleed sideways. -- */
.pg .line{ display:block; overflow:hidden; margin-left:-16px; padding-left:16px; padding-right:28px }
.pg .line > span{ display:block; will-change:transform }

@media (prefers-reduced-motion:reduce){
  .pg .line > span{ transform:none !important }
}