/* ==========================================================================
   Transform8 — design tokens
   Values extracted from the published Framer build of transform8.framer.website
   ========================================================================== */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --c-bg:            #000000;   /* page background, and text on light areas */
  --c-text:          #ffffff;   /* primary text + button borders            */
  --c-text-70:       rgba(255, 255, 255, 0.70); /* link hover               */
  --c-accent:        #bfcfff;   /* periwinkle — eyebrows, dates, footer     */
  --c-accent-70:     rgba(191, 207, 255, 0.70); /* divider rules + icons    */
  --c-grey:          #757575;   /* "01." award numbering                    */

  --c-rule-dark:     rgba(0, 0, 0, 0.20);  /* hairline under award rows     */
  --c-bg-70:         rgba(0, 0, 0, 0.70);  /* light-section mirror of        */
                                           /* --c-text-70: body copy on white */
  --c-scrim:         rgba(0, 0, 0, 0.60);  /* hero overlay (mission is .70) */

  /* Plain white stand-ins for every image, per request */
  --c-placeholder:   #ffffff;

  /* ---- Type ------------------------------------------------------------ */
  --f-display: "Montserrat", "Montserrat Placeholder", sans-serif;
  --f-accent:  "Manrope", "Manrope Placeholder", sans-serif;

  /* Hero H1 — Montserrat 500, -3px tracking, 1.2 leading */
  --fs-h1: 80px;

  /* ---- Motion ----------------------------------------------------------
     --ease-site and the .4s duration are the site's own values, read from
     the published stylesheet (the canvas panels add a .5s ease fade).
     --dur-reveal is a visual match: Framer compiled the scroll-reveal
     duration into its JS bundle, so it is not recoverable.               */
  --ease-site:  cubic-bezier(0.44, 0, 0.56, 1);
  /* Long decelerating curve for the intro zoom — fast out of the rectangle,
     then a slow settle. The site's own ease is too symmetrical for this. */
  --ease-out-intro: cubic-bezier(0.16, 1, 0.30, 1);
  --dur-base:   0.4s;
  --dur-reveal: 0.7s;
}

/* Hero H1 scale, exactly as published:
   80px >=1280 · 70px 992–1279 · 50px 768–991 · 42px <=767
   (the phone variant is a separate Framer preset, hence the 768px step) */

@media (max-width: 1279.98px) {
  :root { --fs-h1: 70px; }
}

@media (max-width: 991.98px) {
  :root { --fs-h1: 50px; }
}

@media (max-width: 767.98px) {
  :root { --fs-h1: 42px; }
}