/* ============================================================
   Work case-study pages — subtext typography
   ------------------------------------------------------------
   Matches the About page subtext style exactly:
     Figtree · 16px · weight 500 · line-height 26px
   Targets the muted body "subtext" paragraphs, identified by
   their 0.75-opacity text colour — light sections use
   rgba(30,30,30,.75) and dark sections use rgba(255,255,255,.75).
   Text COLOUR is left untouched (per-section); only the type
   scale / weight / leading are normalised to the About spec.
   ============================================================ */
/* Body subtexts — match the 15px muted descriptions (paragraphs AND
   ordered/unordered list blocks, where the style sits on the <ol>/<ul>
   and bare <li>/<p> children inherit via the custom properties).
   Scoped to 15px so smaller 13–14px data/metric captions stay put. */
.framer-text[style*="--framer-font-size:15px"][style*="rgba(30, 30, 30, 0.75)"],
.framer-text[style*="--framer-font-size:15px"][style*="rgba(255, 255, 255, 0.75)"] {
  --framer-font-size: 16px !important;
  --framer-line-height: 26px !important;
  font-size: 16px !important;
  line-height: 26px !important;
  font-weight: 500 !important;
}

/* Section / content headings → lowercase (matches the all-lowercase
   page-title aesthetic, e.g. "rebuilding admissions for progression…").
   Targets the Space-Grotesk 700 headings coloured rgb(30,30,30)
   ("Segue towards problems", "Offline & Online Research", "Objective:",
   "About newton school", …). The Geist-Mono "Sign Up • NSAT…" flow line
   and the rgb(26,26,26) page title/footer CTA are intentionally excluded. */
p.framer-text[style*="Space Grotesk"][style*="--framer-font-weight:700"][style*="rgb(30, 30, 30)"] {
  text-transform: lowercase !important;
}

/* Header accent bars (SVG "Rectangle 7", 2px wide, was 30px / 54px tall)
   → uniform 24px height. The SVGs are given preserveAspectRatio="none"
   in markup so they stretch to the new height without letterboxing,
   keeping the 2px width and original colour.
   align-self:center vertically centres the bar with its label text — some
   Framer label rows use align-items:flex-start, which left the shorter bar
   top-aligned and visibly out of line with the text. Centring the bar works
   in both flex-start and center rows (the text is always the tallest child,
   so the row height tracks the text line-box). */
[data-framer-name="Rectangle 7"] {
  height: 24px !important;
  align-self: center !important;
}

/* ------------------------------------------------------------------
   Referral bento (work-newtonschool "Referrals on Admissions
   Timeline" showcase). Recreates Figma node 7055:197374 exactly:
   1200x949.2 canvas, #fafafa, orange bottom border, 100px padding,
   24px gaps -> expressed as percentages so the card scales fluidly.
     row 1: leaderboard 488x310 (100,100) + milestone 488x310 (612,100)
     row 2: how-it-works 535.9x415.2 (100,434) + earn 440.1x415.2 (659.9,434)
   The .nst-bento-gif slots sit at the exact Figma geometry of the two
   animated illustrations inside the how-it-works panel (invite people
   / rupee), ready for looping GIF/WebP/video art; they blend like the
   design (multiply) and the rupee slot clips at its card edge.
   ------------------------------------------------------------------ */
.nst-bento {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 949.2;
  background-color: #fafafa;
  border-bottom: 2px solid rgb(232, 80, 58);
  overflow: hidden;
}
.nst-bento img { display: block; }
.nst-bento-t1, .nst-bento-t2 {
  position: absolute;
  top: 10.5352%;              /* 100/949.2 */
  width: 40.6667%;            /* 488/1200 */
  height: 32.6591%;           /* 310/949.2 */
}
.nst-bento-t1 { left: 8.3333%; }   /* 100/1200 */
.nst-bento-t2 { left: 51%; }       /* 612/1200 */
.nst-bento-t3 {
  position: absolute;
  left: 8.3333%;
  top: 45.7228%;              /* 434/949.2 */
  width: 44.6583%;            /* 535.9/1200 */
  height: 43.7421%;           /* 415.2/949.2 */
}
.nst-bento-t3 > img { width: 100%; height: 100%; }
.nst-bento-t4 {
  position: absolute;
  left: 54.9917%;             /* 659.9/1200 */
  top: 45.7228%;
  width: 36.675%;             /* 440.1/1200 */
  height: 43.7421%;
}
/* GIF slots - geometry in % of the 535.9x415.2 how-it-works panel */
.nst-bento-gif {
  position: absolute;
  overflow: hidden;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.nst-bento-gif img,
.nst-bento-gif video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nst-bento-gif-invite {       /* node 7055:198887 - 100.65x80.99 @ (393.05, 61.45) */
  left: 73.3439%;
  top: 14.8001%;
  width: 18.7815%;
  height: 19.5063%;
}
.nst-bento-gif-rupee {        /* node 7055:198896 - 146.4x95.57 @ (392.29, 154.55), clipped at card edge x=499.7 */
  left: 73.2021%;
  top: 37.2231%;
  width: 20.043%;
  height: 23.0171%;
}
.nst-bento-gif-rupee img,
.nst-bento-gif-rupee video { width: 136.3%; }   /* full 146.4px art, right side clipped like Figma */

/* ------------------------------------------------------------------
   Experiments showcase (work-newtonschool "Experiments on Admissions
   Timeline"). Recreates Figma node 7066:30556: 1200x1406 canvas,
   #fafafa, orange bottom border, three stacked crop windows (white,
   1px rgba(0,0,0,.12) border) each revealing a region of a scaled
   product video — Profile @1350w (top band, right-flush), Toast
   @1200w (bottom-centre band), Score Card @1000w (near-bottom, full
   width). All geometry in % so the card scales fluidly; videos use
   the lazy-video data-src/data-autoplay contract.
   ------------------------------------------------------------------ */
.nst-exp {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 1406;
  background-color: #fafafa;
  border-bottom: 2px solid rgb(232, 80, 58);
  overflow: hidden;
}
.nst-exp-w {
  position: absolute;
  left: 8.3333%;              /* 100/1200 */
  width: 83.3333%;            /* 1000/1200 */
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.nst-exp-w video {
  position: absolute;
  display: block;
  height: auto;
}
.nst-exp-w1 { top: 7.1124%;  height: 22.0484%; }   /* 100/1406, 310/1406 */
.nst-exp-w1 video { width: 135%; left: -35%; top: 0; }          /* 1350w, x -350 */
.nst-exp-w2 { top: 30.8677%; height: 22.0484%; }   /* 434/1406 */
.nst-exp-w2 video { width: 120%; left: -10%; top: -123.871%; }  /* 1200w, x -100, y -384/310 */
.nst-exp-w3 { top: 54.6231%; height: 38.2646%; }   /* 768/1406, 538/1406 */
.nst-exp-w3 video { width: 100%; left: 0; top: -7.4349%; }      /* 1000w, y -40/538 */