/* =========================================================
   NorthCell simple pages: Our Approach, Our Progress
   Design reference: Figma "00 Our Approach" / "00 Our Progress" (1920 x 1712)
   Loaded after styles.css, which provides the tokens, header and footer.
   Positions are Figma frame coordinates minus the 240px Figma header.
   ========================================================= */

body.page-simple { overflow-x: clip; }

/* ---------- 1. Main section (Figma y 240–1128) ---------- */
.page-hero {
  position: relative;
  height: calc(888 * var(--u));
}
/* Both columns sit in a 1920-wide Figma frame centred on the page, so the
   illustration and the text keep their spacing on any screen shape */
.page-art,
.page-copy { position: absolute; }
.page-art {
  top: 0;
  bottom: 0;
  left: calc(50% - 960 * var(--u));
  width: calc(1920 * var(--u));
  pointer-events: none;
}
.page-art img { position: absolute; max-width: none; }

/* Text column: x 1219, 587 wide */
.page-copy {
  left: calc(50% + 259 * var(--u));
  width: calc(587 * var(--u));
  color: var(--text-primary);
}
.page--approach .page-copy,
.page-approach .page-copy { top: calc(190 * var(--u)); }   /* y 430 */
.page-progress .page-copy { top: calc(207 * var(--u)); }   /* y 447 */

.page-copy__title {
  font-size: var(--h3);
  line-height: var(--h3-lh);
}
.page-progress .page-copy__title { width: calc(532 * var(--u)); }
.page-copy__body {
  width: calc(558 * var(--u));
  margin-top: calc(24 * var(--u));
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
}

/* Previous / Next links: Inter 26, underlined, 58 apart (Figma y 800 / 858) */
.page-copy__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(39 * var(--u));
  margin: calc(76 * var(--u)) 0 0;
}
.page-progress .page-copy__links { margin-top: calc(76 * var(--u)); }
.page-link {
  font-size: calc(26 * var(--u));
  line-height: 1.2;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-box: trim-both cap alphabetic;   /* matches Figma's text trimming */
  transition: color 0.2s;
}
.page-link:hover { color: var(--brand-coral); }

/* ---------- 2. Our Approach illustration ----------
   Four coral cards with white arrows (Figma "Group 13"), fanned out behind
   the three people. Card sizes are their rotated outlines in Figma. */
.approach-card--1 { left: calc(121.4 * var(--u)); top: calc(130.5 * var(--u)); width: calc(243.2 * var(--u)); height: calc(308.7 * var(--u)); }
.approach-card--2 { left: calc(366 * var(--u));   top: calc(239.6 * var(--u)); width: calc(224 * var(--u));   height: calc(296.6 * var(--u)); }
.approach-card--3 { left: calc(603.7 * var(--u)); top: calc(134 * var(--u));   width: calc(199 * var(--u));   height: calc(279.6 * var(--u)); }
.approach-card--4 { left: calc(777.9 * var(--u)); top: calc(216.8 * var(--u)); width: calc(240.4 * var(--u)); height: calc(307 * var(--u)); }
.approach-people  { left: calc(205 * var(--u));   top: calc(274.1 * var(--u)); width: calc(701 * var(--u));   height: calc(467.3 * var(--u)); }

/* ---------- 3. Our Progress illustration ----------
   Coral diamond (Figma "Rectangle 29": 451.8 square turned 45deg, centred
   at x 591.4, y 647.5) with the hands image on top. */
.progress-diamond {
  left: calc(246.4 * var(--u));
  top: calc(62.5 * var(--u));
  width: calc(690 * var(--u));
  height: calc(690 * var(--u));
}
.progress-hands { left: calc(179 * var(--u)); top: calc(152 * var(--u)); width: calc(800 * var(--u)); height: calc(533 * var(--u)); }

/* Animated character versions (js/ascii-art.js) replace the static artwork */
.page-art img.is-replaced { display: none; }
.page-art canvas { position: absolute; }

/* ---------- 4. Footer area (Figma: footer at y 1128, 53 below) ---------- */
.page-footer { padding-bottom: calc(53 * var(--u)); }

/* ---------- 5. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Text rises in */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--rise, calc(32 * var(--u))));
    transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: 0.5s;
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  /* Our Approach: the cards fan out from behind the people, one by one,
     then the people rise in front of them */
  .js .approach-card {
    opacity: 0;
    transform: translate(var(--from-x), calc(60 * var(--u))) rotate(var(--from-r)) scale(0.9);
    transition: opacity 0.6s ease, transform 1.3s var(--ease-out);
  }
  .approach-card--1 { --from-x: calc(160 * var(--u));  --from-r: -10deg; }
  .approach-card--2 { --from-x: calc(60 * var(--u));   --from-r: -6deg; }
  .approach-card--3 { --from-x: calc(-60 * var(--u));  --from-r: 0deg; }
  .approach-card--4 { --from-x: calc(-160 * var(--u)); --from-r: 9deg; }
  .js .is-visible .approach-card { opacity: 1; transform: none; }
  .js .is-visible .approach-card--1 { transition-delay: 0.35s; }
  .js .is-visible .approach-card--2 { transition-delay: 0.45s; }
  .js .is-visible .approach-card--3 { transition-delay: 0.55s; }
  .js .is-visible .approach-card--4 { transition-delay: 0.65s; }

  /* Our Progress: the diamond's own character build-up is its entrance */

  .js .page-art__image {
    opacity: 0;
    transform: translateY(calc(40 * var(--u)));
    transition: opacity 1s ease, transform 1.3s var(--ease-out);
  }
  .js .is-visible .page-art__image { opacity: 1; transform: none; transition-delay: 0.6s; }
}

/* The browser sets Inter a touch narrower than Figma; this keeps Figma's
   line breaks in the Our Approach paragraph */
.page-approach .page-copy__body { width: calc(545 * var(--u)); }

/* ---------- 6. Privacy Policy (legal text) ----------
   A single readable column, starting under the "N" of the logo like all
   other text. Sizes follow the site's type scale. */
.legal {
  padding: calc(102 * var(--u)) 0 calc(120 * var(--u)) calc(var(--text-x) * var(--u));
  width: calc((var(--text-x) + 900) * var(--u));
  color: var(--text-primary);
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
}
.legal__title {
  font-size: var(--h2);
  line-height: var(--h2-lh);
}
.legal__meta {
  margin-top: calc(8 * var(--u));
  color: var(--text-secondary);
}
.legal__head { margin-bottom: calc(48 * var(--u)); }
.legal h2 {
  margin: calc(48 * var(--u)) 0 calc(12 * var(--u));
  font-size: var(--h5);
  line-height: var(--h5-lh);
}
.legal p + p { margin-top: calc(16 * var(--u)); }
.legal ul {
  margin: calc(12 * var(--u)) 0 0;
  padding-left: 1.2em;
}
.legal li + li { margin-top: calc(10 * var(--u)); }
.legal ul + p { margin-top: calc(16 * var(--u)); }
.legal a { color: inherit; text-underline-offset: 0.15em; }
.legal a:hover { color: var(--brand-coral); }
.page-privacy .page-footer { padding-bottom: calc(53 * var(--u)); }