*/ .page-approach main, .page-progress main { padding-top: 0; } /* ---------- 1. Hero: artwork above the copy ---------- */ .page-approach .page-hero, .page-progress .page-hero { position: relative; height: calc(632 * var(--p)); /* footer starts at Figma y 833 */ overflow: hidden; /* the artwork bleeds past both edges */ } .page-approach .page-art, .page-progress .page-art { position: absolute; left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%; } /* ---------- 2. Copy block (Figma "00 Copy", x 51, y 501) ---------- */ .page-approach .page-copy, .page-progress .page-copy { position: absolute; left: calc(51 * var(--p)); top: calc(300 * var(--p)); width: calc(318 * var(--p)); } .page-progress .page-copy { width: calc(291 * var(--p)); } .page-approach .page-copy__title, .page-progress .page-copy__title { font-size: calc(20 * var(--p)); /* Phone/H4 */ line-height: 1.4; } .page-approach .page-copy__title { width: calc(285 * var(--p)); } .page-progress .page-copy__title { width: calc(213 * var(--p)); } .page-approach .page-copy__body, .page-progress .page-copy__body { width: 100%; margin-top: calc(24 * var(--p)); font-size: calc(14 * var(--p)); /* Phone/Body 2 */ line-height: 1.5; } /* Previous / Next: Phone/Link, 18 underlined. Figma puts the pair at y 704 / 747 on Our Approach and y 700 / 743 on Our Progress, both 43 apart, and at x 50 while the copy block starts at 51. */ .page-approach .page-copy__links, .page-progress .page-copy__links { margin-left: calc(-1 * var(--p)); gap: calc(19.6 * var(--p)); } .page-approach .page-copy__links { margin-top: calc(39 * var(--p)); } .page-progress .page-copy__links { margin-top: calc(35 * var(--p)); } .page-approach .page-link, .page-progress .page-link { font-size: calc(18 * var(--p)); line-height: 1.3; text-box: normal; } /* Press feedback: coral while the finger is down. :hover is no good here — on a touch screen it only lands once the tap is over and then sticks. */ .page-approach .page-link:active, .page-progress .page-link:active { color: var(--brand-coral); transition: none; } /* ---------- 3. Our Approach artwork ---------- The four cards are re-fanned for the narrow frame, so each one carries its own phone position rather than a scaled copy of the desktop one. Figma frame coordinates: 37.34/256, 123.43/294.38, 207.12/257.23, 268.4/286.36, all minus the 201 header. */ .approach-card--1 { left: calc(37.34 * var(--p)); top: calc(55 * var(--p)); width: calc(85.6 * var(--p)); height: calc(108.66 * var(--p)); } .approach-card--2 { left: calc(123.43 * var(--p)); top: calc(93.38 * var(--p)); width: calc(78.85 * var(--p)); height: calc(104.4 * var(--p)); } .approach-card--3 { left: calc(207.12 * var(--p)); top: calc(56.23 * var(--p)); width: calc(70.05 * var(--p)); height: calc(98.43 * var(--p)); } .approach-card--4 { left: calc(268.4 * var(--p)); top: calc(85.36 * var(--p)); width: calc(84.62 * var(--p)); height: calc(108.06 * var(--p)); } .approach-people { left: calc(66.78 * var(--p)); top: calc(105.52 * var(--p)); width: calc(246.73 * var(--p)); height: calc(164.48 * var(--p)); } /* ---------- 4. Our Progress artwork ---------- Figma "Group 13": the coral diamond is a 172.796 square turned 45deg, so it measures 244.371 across, with the hands image laid over it. */ .progress-diamond { left: calc(77.28 * var(--p)); top: calc(32 * var(--p)); width: calc(244.37 * var(--p)); height: calc(244.37 * var(--p)); } .progress-hands { left: calc(55.86 * var(--p)); top: calc(65.21 * var(--p)); width: calc(278.59 * var(--p)); height: calc(185.73 * var(--p)); } /* ---------- 5. Privacy Policy ---------- No phone frame was drawn for this one, so it keeps the desktop format — one readable column under the header — set in the phone type ramp with the same 51 side margin the rest of the phone site uses. */ body.page-privacy { padding-top: var(--head-h-p); background: var(--bg-cream); transition: padding-top 0.5s var(--ease-out, ease); } body.page-privacy[data-banner="open"] { padding-top: var(--head-h-hero); } .page-privacy main { padding-top: 0; } .legal { padding: calc(49 * var(--p)) calc(51 * var(--p)) calc(40 * var(--p)); width: 100%; font-size: calc(14 * var(--p)); /* Phone/Body 2 */ line-height: 1.5; } .legal__title { font-size: calc(24 * var(--p)); /* Phone/H3 */ line-height: 1.3; } .legal__meta { margin-top: calc(6 * var(--p)); font-size: calc(12 * var(--p)); /* Phone/Caption */ line-height: 1.4; } .legal__head { margin-bottom: calc(32 * var(--p)); } .legal h2 { margin: calc(32 * var(--p)) 0 calc(10 * var(--p)); font-size: calc(20 * var(--p)); /* Phone/H4 */ line-height: 1.4; } .legal p + p { margin-top: calc(14 * var(--p)); } .legal ul { margin: calc(10 * var(--p)) 0 0; } .legal li + li { margin-top: calc(8 * var(--p)); } .legal ul + p { margin-top: calc(14 * var(--p)); } /* ---------- 6. Footer ---------- */ .page-approach .page-footer, .page-progress .page-footer, .page-privacy .page-footer { padding-bottom: calc(27 * var(--p)); } /* ---------- 7. Motion ---------- */ @media (prefers-reduced-motion: no-preference) { .js .approach-card { transform: translate(var(--from-x), calc(21 * var(--p))) rotate(var(--from-r)) scale(0.9); } .approach-card--1 { --from-x: calc(56 * var(--p)); } .approach-card--2 { --from-x: calc(21 * var(--p)); } .approach-card--3 { --from-x: calc(-21 * var(--p)); } .approach-card--4 { --from-x: calc(-56 * var(--p)); } .js .page-art__image { transform: translateY(calc(14 * var(--p))); } } }