/* ==========================================================================
   Pedalio — stylesheet
   --------------------------------------------------------------------------
   Order of this file:
     1. Design tokens
     2. Reset and base elements
     3. Layout utilities
     4. Motion (scroll reveals, word reveals, drawn shapes, marquee)
     5. Components (button, underlined link, pill toggle, shapes)
     6. Header and menu
     7. Page sections, top to bottom
     8. Responsive
     9. Reduced motion

   Naming follows BEM: .block, .block__element, .block--variant.
   No class name carries the brand: renaming the site cannot break the CSS.

   Three rules worth knowing before editing:

   - EVERY SIZE IS IN rem, AND 1rem FOLLOWS THE WINDOW. The root font size is
     0.6944vw, which is exactly 10px on a 1440px screen. So `9.6rem` means
     "96px in the 1440px design" and the whole layout scales with the window
     instead of jumping at a breakpoint. Divide a design pixel by 10 and you
     have the rem value.
   - Every animated "hidden" state is written under `html.js`. If the scripts
     never run, nothing is hidden. See section 4.
   - Type sizes live in tokens, redefined once in section 8. A heading never
     carries its own media query: change --h2-size and the page follows.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* --- Brand colours. These are the whole palette. ---
     The site pairs one dark green with a set of pastel/saturated couples:
     each card, each stat panel picks a background and its matching text
     colour from the same family. */
  --green-deep: #005236; /* headings, primary surfaces, footer accents */
  --green-mid: #008558; /* filled buttons, drawn shape of section 2 */
  --green-ink: #0c1e18; /* body text, darkest panels, footer background */
  --green-panel: #0e3d2f; /* the result panel of the calculator, between the two */
  --lime: #e6ff55; /* the loud accent: hero title, footer logo, CTA */
  --lime-dark: #c9df49; /* the same lime one step darker (hover) */

  --cream: #f5f0e6; /* page background of the light sections */
  --cream-light: #fbf8f1; /* hero subtitle over the video */
  --sand: #fcee98; /* text on the brown card */
  --white: #ffffff;

  --violet: #4b1a9a; /* pair 1 — "Wellbeing", marketplace panel */
  --violet-pale: #f3eefc;
  --orange: #e54c1e; /* pair 2 — "Health" */
  --orange-pale: #fdf1ed;
  --blush: #f7c9ba; /* couple 3 — last call to action */
  --navy: #033968; /* pair 4 — "Absenteeism", shop network */
  --navy-pale: #ecf6fe;
  --mint: #d4f5e0; /* pair 5 — "Impact" */
  --mint-pale: #eafaf1;
  --brown: #372411; /* couple 6 — financing card */

  --ink-warm: #15110f; /* quotes */
  --line: #d3d3d3; /* hairlines: quote card, arrows */
  --line-soft: rgba(12, 30, 24, 0.1); /* FAQ separators */

  /* Three greens, not one. --green-deep passes AA on cream (8.2:1) and on
     white (9.3:1) but sinks into a photo; --lime is the one that survives on
     the video and on the dark footer (15.5:1 on --green-ink). Change one and
     you have to check the three. */

  /* --- Typography --- */
  --font-display: "Parkinsans", system-ui, -apple-system, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;

  /* Type scale, measured on the reference at 1440px. Redefined in section 8.
     Reminder: 1rem = 10 design pixels. */
  --h1-size: 11rem;
  --h1-height: 1;
  --h1-letter: -0.03em;

  --h2-xl-size: 9.6rem; /* "Get cycling", stat panel titles */
  --h2-xl-height: 1.1;
  --h2-xl-letter: -0.03em;

  --h2-lg-size: 7.2rem; /* "Cycling becomes a staff benefit" */
  --h2-lg-height: 1;
  --h2-lg-letter: -0.03em;

  --h2-size: 5.6rem; /* section titles, perk cards */
  --h2-height: 1;
  --h2-letter: -0.025em;

  --h3-size: 4.8rem; /* stat subtitle, price card */
  --h3-height: 1.1;
  --h3-letter: -0.02em;

  --h4-size: 3.6rem; /* process step title */
  --h4-height: 1.15;
  --h4-letter: -0.02em;

  --quote-size: 4.2rem;
  --quote-height: 1.1;

  --h5-size: 2.8rem; /* FAQ question, quote label */
  --h5-height: 1.2;
  --h5-letter: -0.015em;

  --lead-size: 2.4rem; /* display-font paragraphs */
  --lead-height: 1.3;
  --lead-letter: -0.01em;

  --text-lg: 2rem;
  --text-md: 1.8rem;
  --text: 1.6rem;
  --text-sm: 1.4rem;
  --text-xs: 1.2rem;
  --line-body: 1.5;

  /* --- Layout --- */
  --shell-max: 144rem;
  --shell-pad: 3.2rem;
  --radius-card: 1.6rem;
  --radius-lg: 2rem;
  --radius-btn: 1.2rem;
  --radius-btn-sm: 0.8rem;
  --nav-inset: 2rem; /* distance between the bar and the top of the window */

  /* --- Motion. Two curves for the whole site, straight from the source. --- */
  --ease-quart: cubic-bezier(0.77, 0, 0.175, 1); /* entrances, reveals */
  --ease-inout: cubic-bezier(0.645, 0.045, 0.355, 1); /* UI, hover, toggles */
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1); /* the drawn shapes */
  /* The label of a button overshoots and settles. `linear()` writes a
     spring by sampling it — 18 points, no library. */
  --ease-spring: linear(
    0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%,
    1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%,
    1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1
  );
}

/* ==========================================================================
   2. Reset and base elements
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* THE root font size. Everything else is rem, so this single line drives the
   scale of the page.

   0.6944444vw = 10px at 1440px, our design width.

   `max(8px, …)` is a fix, not a copy: the reference let the root drop to
   5.3px between 769 and 1024px, which printed body copy at 10px on a tablet.
   Same idea for the two other lines — see the README, "Limites connues". */
html {
  font-size: max(8px, 0.6944444vw);
  background: var(--white);
  color: var(--green-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Blocks slide in from the side; `clip` hides the overflow without turning
     the root into a scroll container, which would break `position: sticky`. */
  overflow-x: clip;
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  html {
    font-size: min(12px, 2.6666667vw); /* 10px at 375px, capped for tablets */
  }
}

@media (min-width: 1920px) {
  html {
    font-size: 10px; /* stop growing: the shell is capped at 144rem anyway */
  }
}

body {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  background: var(--white);
}

h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

/* The width/height attributes are there to reserve the right box before the
   image loads. Without `height: auto`, the height attribute would also win
   over any CSS width — a 2434×489 logo asked to be 400px wide would come out
   400×489. */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input {
  font: inherit;
}

/* One focus ring for the whole site. The reference wrote `:focus{outline:none}`
   with nothing in its place — keyboard users lost the caret entirely. */
:focus-visible {
  outline: 0.3rem solid var(--green-mid);
  outline-offset: 0.3rem;
  border-radius: 0.2rem;
}

.skip-link {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 100;
  padding: 1.2rem 2rem;
  border-radius: var(--radius-btn-sm);
  background: var(--green-ink);
  color: var(--lime);
  font-size: var(--text);
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform 0.25s var(--ease-inout);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   3. Layout utilities
   ========================================================================== */

/* The one container of the site: 1440px wide, 32px of gutter. */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

/* Type roles. A heading picks a role, never a size. */
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-height);
  letter-spacing: var(--h1-letter);
  font-weight: 800;
}

.t-h2-xl {
  font-family: var(--font-display);
  font-size: var(--h2-xl-size);
  line-height: var(--h2-xl-height);
  letter-spacing: var(--h2-xl-letter);
  font-weight: 700;
}

.t-h2-lg {
  font-family: var(--font-display);
  font-size: var(--h2-lg-size);
  line-height: var(--h2-lg-height);
  letter-spacing: var(--h2-lg-letter);
  font-weight: 700;
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-height);
  letter-spacing: var(--h2-letter);
  font-weight: 600;
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  line-height: var(--h3-height);
  letter-spacing: var(--h3-letter);
  font-weight: 700;
}

.t-h4 {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  line-height: var(--h4-height);
  letter-spacing: var(--h4-letter);
  font-weight: 700;
}

.t-h5 {
  font-family: var(--font-display);
  font-size: var(--h5-size);
  line-height: var(--h5-height);
  letter-spacing: var(--h5-letter);
  font-weight: 600;
}

.t-lead {
  font-family: var(--font-display);
  font-size: var(--lead-size);
  line-height: var(--lead-height);
  letter-spacing: var(--lead-letter);
  font-weight: 600;
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--line-body);
  letter-spacing: 0;
  font-weight: 400;
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text);
  line-height: var(--line-body);
  letter-spacing: 0;
  font-weight: 400;
}

/* ==========================================================================
   4. Motion
   --------------------------------------------------------------------------
   Everything here follows the same rule: the hidden state lives under
   `html.js`, so a page without JavaScript shows every block.

   The trigger sits 15% above the bottom of the WINDOW, not a percentage of
   the element: a panel taller than the screen would never reach "50% of
   itself visible" and would stay hidden forever. See main.js.
   ========================================================================== */

/* --- 4.1 Blocks that fade up ------------------------------------------- */

[data-reveal] {
  transition:
    opacity 1.2s var(--ease-quart) var(--reveal-delay, 0s),
    transform 1.2s var(--ease-quart) var(--reveal-delay, 0s);
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-shift, 4rem));
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --- 4.2 Headings that come up word by word ------------------------------
   main.js wraps each word in <span class="word"><span class="word__in">.
   The outer span clips, the inner one slides. Without JavaScript there is no
   wrapper at all and the heading is simply there. */

.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em; /* descenders would be clipped otherwise */
}

.word__in {
  display: inline-block;
  transition: transform 1s var(--ease-quart) var(--word-delay, 0s);
}

.js [data-words] .word__in {
  transform: translateY(110%);
}

.js [data-words].is-in .word__in {
  transform: translateY(0);
}

/* --- 4.3 Shapes drawn stroke by stroke -----------------------------------
   Each shape is one open path, drawn by animating `stroke-dashoffset` from
   `--draw` down to 0.

   `--draw` is how much of the path gets drawn, in the units of its viewBox.
   Set it to the full length and the whole doodle appears; set it shorter and
   the pen stops part way — which is what the hero does. */

.shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--shape-color, currentColor);
}

.shape svg {
  width: 100%;
  height: auto;
}

.shape path {
  stroke-dasharray: var(--draw);
}

.js .shape path {
  stroke-dashoffset: var(--draw);
}

.js .shape.is-in path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.5s var(--ease-draw) var(--shape-delay, 0.2s);
}

/* --- 4.4 Marquee ---------------------------------------------------------
   Two identical lists side by side, translated by half the track: when the
   first copy has left, the second is exactly where the first started. */

.marquee {
  width: 100%;
  overflow: hidden;
}

.marquee--fade {
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-time, 16s) linear infinite;
}

.marquee__list {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap, 8rem);
  padding-right: var(--marquee-gap, 8rem);
}

.marquee__logo {
  width: auto;
  height: var(--marquee-height, 5rem);
  object-fit: contain;
}

.marquee--ink .marquee__logo {
  filter: brightness(0);
}

.marquee--light .marquee__logo {
  filter: brightness(0) invert(1);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- 4.5 Parallax --------------------------------------------------------
   main.js writes a single number per element, `--shift`, in pixels. The CSS
   decides what to do with it — here, move on Y while keeping the rotation. */

[data-parallax] {
  will-change: transform;
}

/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- 5.1 Button ----------------------------------------------------------
   The signature of the site. At rest it is a plain filled button; on hover
   two tilted panels sweep up from below while the label leaves through the
   top and a second copy of it arrives from the bottom.

   Four moving parts:
     .btn__bg     the background, which grows slightly (scale 1.065 × 1.095)
     .btn__layer  two panels tilted -12°, 120% wide, offset by 42ms
     .btn__text   the label at rest, which rotates out and up
     .btn__inner::after  the same label, brought back by attr(data-text)

   The label is written twice on purpose: `content: attr(data-text)` is not
   read by screen readers and cannot be selected, which is exactly what we
   want for a copy that only exists to be animated. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  background: var(--btn-face);
  color: var(--btn-ink);
}

.btn:active {
  transform: scale(0.98);
}

.btn--sm {
  font-size: var(--text-xs);
  line-height: 1.4;
  border-radius: var(--radius-btn-sm);
  --btn-pad: 1.2rem 2rem;
}

.btn--lg {
  font-size: var(--text);
  line-height: 1.5;
  border-radius: var(--radius-btn);
  --btn-pad: 1.8rem 3.2rem;
}

.btn__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: clip;
  background: var(--btn-face);
  transition: scale 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.btn__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 120%;
  rotate: 0 0 1 -12deg;
  transform-origin: 100% 0;
  translate: -10% 100% 0;
  transition:
    translate 0.6s cubic-bezier(0.32, 0.72, 0, 1),
    rotate 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  /* Leaving, the second panel goes first; arriving, the first one does. */
  transition-delay: calc(var(--index) * -42ms);
}

.btn__layer:first-child {
  --index: 0;
  background: var(--mint); /* the same pale green under every button */
}

.btn__layer:last-child {
  --index: 1;
  background: var(--btn-sweep);
}

.btn__inner {
  position: relative;
  z-index: 1;
  display: grid;
  padding: var(--btn-pad);
  border-radius: inherit;
  overflow: clip;
}

/* The label that arrives. Its spring curve is the reference's, kept as is:
   `linear()` describes an easing by sampling it, which is how you write a
   bounce without a library. */
.btn__inner::after {
  content: attr(data-text);
  grid-area: 1 / 1;
  display: block;
  opacity: 0;
  color: var(--btn-ink-hover);
  rotate: 1 1 0.5 -30deg;
  transform-origin: top right;
  translate: 0 2em 0;
  transition:
    translate 0.75s var(--ease-spring),
    rotate 0.5s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.2s ease-out;
}

.btn__text {
  grid-area: 1 / 1;
  display: block;
  transform-origin: 0 0;
  transition:
    translate 0.75s var(--ease-spring),
    rotate 0.5s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.2s ease-out;
}

/* Hover only where there is a real pointer: on a touch screen the whole
   thing would fire on tap and never come back. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__bg {
    scale: 1.065 1.095;
  }

  .btn:hover .btn__layer {
    rotate: 0 0 1 0deg;
    translate: -10% 0 0;
    transition-delay: calc(var(--index) * 64ms);
  }

  .btn:hover .btn__text {
    opacity: 0;
    rotate: 1 1 0.45 -60deg;
    translate: 0 -2em 0;
  }

  .btn:hover .btn__inner::after {
    opacity: 1;
    rotate: 1 1 0.45 0deg;
    translate: 0 0 0;
    transition-delay: 0.1s;
  }
}

/* The four palettes. --btn-face is the resting fill, --btn-sweep the panel
   that lands on top, --btn-ink / --btn-ink-hover the two labels. */
.btn--primary {
  --btn-face: var(--green-ink);
  --btn-sweep: var(--lime);
  --btn-ink: var(--white);
  --btn-ink-hover: var(--green-ink);
}

.btn--secondary {
  --btn-face: var(--lime);
  --btn-sweep: var(--green-ink);
  --btn-ink: var(--green-ink);
  --btn-ink-hover: var(--white);
}

/* The one that works on the dark footer: green fill, lime label. */
.btn--tertiary {
  --btn-face: var(--green-mid);
  --btn-sweep: var(--lime);
  --btn-ink: var(--lime);
  --btn-ink-hover: var(--green-mid);
}

.btn--transparent {
  --btn-face: rgba(0, 0, 0, 0.2);
  --btn-sweep: var(--lime);
  --btn-ink: var(--white);
  --btn-ink-hover: var(--green-ink);
}

/* The "custom" button takes its colours from the tone class next to it. */
.btn--custom {
  --btn-face: var(--btn-bg);
  --btn-sweep: var(--btn-bg-hover, var(--btn-color));
  --btn-ink: var(--btn-color);
  --btn-ink-hover: var(--btn-color-hover, var(--btn-bg));
}

/* --- 5.2 Underlined link -------------------------------------------------
   The rule is there at rest and retracts on hover, from left to right. */

.ulink {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text);
  line-height: 1.5;
  letter-spacing: 0;
  cursor: pointer;
}

.ulink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-quart);
}

.ulink:hover::after {
  transform: scaleX(0);
  transform-origin: right center;
}

/* --- 5.3 Pill toggle (Employers / Employees) -----------------------------
   Two native radios and a sliding pill. No JavaScript: `:has()` moves the
   pill and swaps the panel, so the toggle works with the scripts removed. */

.pill {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  isolation: isolate;
  padding: 0.7rem;
  border-radius: 10rem;
  background: var(--cream);
}

.pill__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill__label {
  position: relative;
  z-index: 1;
  padding: 2rem 4rem;
  border-radius: 10rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: var(--green-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.4s var(--ease-inout);
}

.pill__label:hover {
  opacity: 0.7;
}

/* The moving background. One element, two positions. */
.pill__slider {
  position: absolute;
  z-index: 0;
  top: 0.7rem;
  bottom: 0.7rem;
  left: 0.7rem;
  width: calc(50% - 0.7rem);
  border-radius: 10rem;
  background: var(--green-ink);
  pointer-events: none;
  transition: transform 0.5s var(--ease-inout);
}

.pill:has(.pill__input:nth-of-type(2):checked) .pill__slider {
  transform: translateX(100%);
}

.pill__input:checked + .pill__label {
  color: var(--lime);
  opacity: 1;
}

.pill__input:focus-visible + .pill__label {
  outline: 0.3rem solid var(--green-mid);
  outline-offset: 0.2rem;
}

/* --- 5.4 Colour tones -----------------------------------------------------
   The site never paints a card directly: it picks a couple, a background and
   the text colour that goes with it. Cards read --card-bg / --card-color,
   buttons read --btn-bg / --btn-color. One class, one couple, and the same
   class works on a card, a panel or a button.

   Contrast measured on each pair:
     ink / mint         14.8:1     cream / navy           10.3:1
     brown / sand       12.5:1     violet-pale / violet    9.6:1
     navy-pale / navy   10.7:1     mint / green-deep       7.9:1
     violet / blush      7.3:1     blush / green-deep      6.2:1
     orange-pale/orange  3.5:1 *   orange / blush          2.6:1 *
   * The two orange pairs come straight from the reference and are the weak
     point of its palette: 3.5:1 passes AA for text of 24px and up but not for
     the bullet list, and 2.6:1 fails even for large text. They are kept as is
     to stay 1:1 with the original — the README says what to change for a real
     site. Do not reuse them elsewhere. */

.tone-ink {
  --card-bg: var(--green-ink);
  --card-color: var(--mint);
}

.tone-brown {
  --card-bg: var(--brown);
  --card-color: var(--sand);
}

.tone-orange {
  --card-bg: var(--orange);
  --card-color: var(--blush);
}

.tone-orange-pale {
  --card-bg: var(--orange-pale);
  --card-color: var(--orange);
}

.tone-violet-pale {
  --card-bg: var(--violet-pale);
  --card-color: var(--violet);
}

.tone-navy-pale {
  --card-bg: var(--navy-pale);
  --card-color: var(--navy);
}

.tone-mint {
  --card-bg: var(--mint);
  --card-color: var(--green-deep);
}

.tone-violet-card {
  --card-bg: var(--violet);
  --card-color: var(--blush);
}

.tone-cream-card {
  --card-bg: var(--cream);
  --card-color: var(--navy);
}

.tone-blush-card {
  --card-bg: var(--blush);
  --card-color: var(--green-deep);
}

/* Buttons. --btn-bg-hover / --btn-color-hover default to swapping the two. */
.tone-green-solid {
  --btn-bg: var(--green-deep);
  --btn-color: var(--white);
  --btn-bg-hover: var(--green-mid);
  --btn-color-hover: var(--white);
}

.tone-mint-btn {
  --btn-bg: var(--mint);
  --btn-color: var(--green-ink);
}

.tone-sand-btn {
  --btn-bg: var(--sand);
  --btn-color: var(--brown);
}

.tone-blush-orange-btn {
  --btn-bg: var(--blush);
  --btn-color: var(--orange);
}

.tone-blush-violet-btn {
  --btn-bg: var(--blush);
  --btn-color: var(--violet);
}

.tone-orange-btn {
  --btn-bg: var(--orange);
  --btn-color: var(--orange-pale);
}

.tone-violet-btn {
  --btn-bg: var(--violet);
  --btn-color: var(--violet-pale);
}

.tone-navy-btn {
  --btn-bg: var(--navy);
  --btn-color: var(--navy-pale);
}

/* --- 5.5 Drawn shapes: how much of each path is drawn --------------------
   Path lengths, measured once with getTotalLength(): curl-long 1975,
   curl 2343, wave 3500, hook 1923, loop 2447.

   The hero draws 1380 of its 1975 and stops there — the reference shows
   exactly that much of the doodle, and going all the way would push a second
   arc across the video. Every other shape is drawn whole.

   These values belong here rather than in a style attribute: the site's CSP
   forbids inline styles. */

.shape--curl-long {
  --draw: 1380;
}

.shape--curl {
  --draw: 2343.23;
}

.shape--wave {
  --draw: 3500.39;
}

.shape--hook {
  --draw: 1923.37;
}

.shape--loop {
  --draw: 2446.77;
}

/* --- 5.6 Round sticker (the "p" of the logo, on the call-to-action cards) */

.sticker {
  position: absolute;
  bottom: -6rem;
  width: 20rem;
  z-index: 3;
  pointer-events: none;
  transform: rotate(var(--sticker-tilt, -15deg)) translate3d(0, var(--shift, 0px), 0);
}

/* ==========================================================================
   6. Header and menu
   ========================================================================== */

.site-nav {
  position: fixed;
  inset: var(--nav-inset) 0 auto;
  z-index: 50;
  pointer-events: none; /* only the bar itself catches the pointer */
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  padding: 1.6rem 2.4rem;
  border-radius: var(--radius-btn-sm);
  background: var(--white);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.06);
  pointer-events: auto;
}

.site-nav__logo {
  flex-shrink: 0;
}

.site-nav__logo img {
  width: 14rem;
  height: auto;
}

.site-nav__logo--mark {
  display: none;
}

.site-nav__logo--mark img {
  width: 3.6rem;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 1.2rem;
  font-family: var(--font-display);
  font-size: var(--text);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--green-ink);
  transition: opacity 0.3s var(--ease-inout);
}

.site-nav__link:hover {
  opacity: 0.6;
}

.site-nav__chevron {
  width: 1.6rem;
  height: 1.6rem;
  transition: transform 0.3s var(--ease-inout);
}

.site-nav__item[data-open] .site-nav__chevron {
  transform: rotate(180deg);
}

/* The dropdown panel. Two delays, as the reference had: one before it opens,
   a longer one before it closes, so crossing the empty gap between the
   trigger and the panel does not shut it. Both live in main.js. */
.site-nav__panel {
  position: absolute;
  top: calc(100% + 1.2rem);
  left: 0;
  min-width: 24rem;
  padding: 1.6rem;
  border-radius: var(--radius-btn-sm);
  background: var(--white);
  box-shadow: 0 1.2rem 3rem rgba(12, 30, 24, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.8rem);
  transition:
    opacity 0.3s var(--ease-inout),
    transform 0.3s var(--ease-inout),
    visibility 0s linear 0.3s;
}

.site-nav__item[data-open] .site-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.site-nav__sublink {
  display: block;
  padding: 1rem 1.2rem;
  border-radius: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--text);
  font-weight: 500;
  transition: background-color 0.2s var(--ease-inout);
}

.site-nav__sublink:hover {
  background: var(--cream);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.site-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-display);
  font-size: var(--text);
  font-weight: 700;
  color: var(--green-ink);
}

.site-nav__flag {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.site-nav__burger {
  display: none;
  width: 4.4rem;
  height: 4.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  color: var(--green-ink);
}

.site-nav__burger svg {
  width: 2.8rem;
  height: 2.8rem;
}

/* Mobile sheet. Closed, it is fully out of the flow: `visibility: hidden`
   keeps its links out of the tab order. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding: 12rem var(--shell-pad) 4rem;
  background: var(--cream);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s var(--ease-quart),
    visibility 0s linear 0.4s;
}

.mobile-menu[data-open] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-menu__columns {
  display: grid;
  gap: 3.2rem;
}

.mobile-menu__tag {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: 0.6rem 1.4rem;
  border-radius: 10rem;
  background: var(--green-deep);
  color: var(--lime);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
}

.mobile-menu__links {
  display: grid;
  gap: 1.2rem;
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-size: var(--h5-size);
  font-weight: 600;
  letter-spacing: var(--h5-letter);
  color: var(--green-ink);
}

.mobile-menu__footer {
  display: grid;
  gap: 2.4rem;
}

.mobile-menu__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--green-ink);
  opacity: 0.7;
}

/* ==========================================================================
   7. Page sections, top to bottom
   ========================================================================== */

/* --- 7.1 Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 40% black. Without it the lime title sits at 2.1:1 on the bright parts of
   the video; with it, 6.4:1 on the darkest crop we measured. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.hero__shape {
  top: -10rem;
  left: -10rem;
  width: 110rem;
  z-index: 2;
  transform: rotate(-90deg);
}

.hero__shell {
  position: relative;
  z-index: 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero__title {
  color: var(--lime);
  max-width: 18ch;
}

.hero__title .asterisk {
  color: #ffc4ce;
}

.hero__subtitle {
  margin-top: 3rem;
  max-width: 50ch;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--cream-light);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
  margin-top: 6rem;
}

.hero__ctas .ulink {
  color: var(--white);
  font-weight: 600;
}

.hero__bottom {
  margin-top: auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--cream-light);
}

/* --- 7.2 Client logos ---------------------------------------------------- */

.clients {
  width: 100%;
  padding: 4rem 0;
  background: var(--green-deep);
}

.clients__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8rem;
}

.clients__logo {
  height: 5rem;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* --- 7.3 "Get cycling. Simply." ------------------------------------------ */

.activate {
  position: relative;
  width: 100%;
  padding: 10rem 0 12rem;
  overflow: hidden;
  background: var(--cream);
}

.activate__shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30rem;
  text-align: center;
}

.activate__title {
  color: var(--green-deep);
}

.activate__subtitle {
  margin-top: 3rem;
  max-width: 45ch;
  color: var(--green-ink);
}

.activate__cta {
  margin-top: 3rem;
}

.activate__shape {
  top: 29rem;
  left: -30rem;
  width: 80rem;
  transform: scaleX(-1) rotate(-160deg);
  --shape-color: var(--green-mid);
}

/* The tilted card. `--shift` comes from the parallax in main.js. */
.activate__card {
  position: absolute;
  right: 5rem;
  bottom: 15rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 30rem;
  padding: 1rem;
  border-radius: var(--radius-card);
  background: var(--brown);
  color: var(--sand);
  transform: rotate(7deg) translate3d(0, var(--shift, 0px), 0);
  transform-origin: center;
}

.activate__card-media {
  flex-shrink: 0;
  width: 100%;
  height: 15rem;
  overflow: hidden;
  border-radius: 1.2rem 1.2rem 0 0;
}

.activate__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activate__card-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 0 1rem 1rem;
  text-align: left;
}

.activate__card-title {
  font-size: var(--h3-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.activate__card-subtitle {
  margin-top: 0.8rem;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.activate__card-note {
  margin-top: 1.2rem;
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  opacity: 0.75;
}

.activate__marquee-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14rem;
  z-index: 1;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

.activate__marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 4rem 0;
  --marquee-height: 6rem;
}

/* --- 7.4 Process: three steps, one visual --------------------------------
   The three steps are native radios. Checked, a radio reveals its panel and
   its picture through `:has()`; main.js only adds the auto-advance. Remove
   the scripts and the three buttons still work. */

.process {
  position: relative;
  width: 100%;
  transition:
    background-color 0.8s var(--ease-quart),
    color 0.8s var(--ease-quart);
  background: var(--step-bg, var(--violet-pale));
  color: var(--step-color, var(--violet));
}

.process__shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6rem;
  padding-top: 10rem;
  padding-bottom: 4rem;
}

.process__title {
  margin: 0 auto;
  max-width: 20ch;
  text-align: center;
  font-weight: 700;
  color: inherit;
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6rem;
}

.process__steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.process__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.process__step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  cursor: pointer;
  opacity: 0.2;
  transition: opacity 0.4s var(--ease-quart);
}

.process__step:hover {
  opacity: 0.5;
}

.process__step-text {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: inherit;
}

.process__step-line {
  position: relative;
  display: block;
  width: 100%;
  height: 0.1rem;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.process__step-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s linear;
}

/* --- the three states, driven by the checked radio --- */

.process__radio:checked + .process__step {
  opacity: 1;
}

/* The bar fills over the 4s the step is on screen. */
.process__radio:checked + .process__step .process__step-line::after {
  transform: scaleX(1);
  transition: transform 4s linear;
}

.process__radio:focus-visible + .process__step {
  opacity: 1;
  outline: 0.3rem solid currentColor;
  outline-offset: 0.6rem;
}

.process__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.process__layer {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-quart);
}

.process__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  transition: transform 1.2s var(--ease-quart) 0.05s;
}

.process__content {
  position: relative;
  min-height: 30rem;
}

.process__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 0.8s var(--ease-quart),
    transform 0.8s var(--ease-quart);
}

.process__small-label {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

.process__step-title {
  font-weight: 700;
  color: inherit;
}

.process__description {
  color: inherit;
  font-weight: 500;
}

/* One `:has()` chain per step: the checked radio lights its panel and its
   picture. Three steps, three blocks — verbose but obvious to read. */
.process:has(#step-1:checked) .process__panel[data-step="1"],
.process:has(#step-2:checked) .process__panel[data-step="2"],
.process:has(#step-3:checked) .process__panel[data-step="3"] {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

.process:has(#step-1:checked) .process__layer[data-step="1"],
.process:has(#step-2:checked) .process__layer[data-step="2"],
.process:has(#step-3:checked) .process__layer[data-step="3"] {
  clip-path: inset(0 0 0 0);
}

.process:has(#step-1:checked) .process__layer[data-step="1"] img,
.process:has(#step-2:checked) .process__layer[data-step="2"] img,
.process:has(#step-3:checked) .process__layer[data-step="3"] img {
  transform: scale(1);
}

/* The section repaints itself in the colours of the active step. */
.process:has(#step-1:checked) {
  --step-bg: var(--violet-pale);
  --step-color: var(--violet);
}

.process:has(#step-2:checked) {
  --step-bg: var(--orange-pale);
  --step-color: var(--orange);
}

.process:has(#step-3:checked) {
  --step-bg: var(--mint-pale);
  --step-color: var(--green-deep);
}

/* --- 7.5 Perks: pill toggle and three cards ------------------------------ */

.perks {
  width: 100%;
  padding: 8rem 0;
  background: var(--white);
}

.perks__shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.perks__title {
  max-width: 22ch;
  text-align: center;
  font-weight: 700;
  color: var(--green-ink);
}

.perks__toggle {
  margin-top: 4rem;
}

.perks__cards {
  position: relative;
  width: 100%;
  margin-top: 4rem;
}

.perks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  transition:
    opacity 0.4s var(--ease-inout),
    transform 0.4s var(--ease-inout);
}

/* The second grid is stacked on the first and only one is shown, so swapping
   audiences never moves the page. */
.perks__grid--right {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}

.perks:has(#audience-right:checked) .perks__grid--left {
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}

.perks:has(#audience-right:checked) .perks__grid--right {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.perk-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  aspect-ratio: 3 / 4;
  padding: 4rem;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--card-color);
  overflow: hidden;
}

.perk-card__title {
  max-width: 9ch;
  font-weight: 700;
  color: inherit;
}

.perk-card__list {
  margin: auto 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--text);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

.perk-card__list li {
  position: relative;
  padding-left: 1.4rem;
}

.perk-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

.perk-card__cta {
  width: 100%;
}

/* --- 7.6 Stats: four panels stacking over a pinned photo -----------------
   Everything is `position: sticky`. The photo sticks first and stays behind;
   each panel sticks in turn, and the next one slides over it. main.js only
   adds the tilt of the panel underneath — see `--stack-progress`. */

.stack {
  position: relative;
  width: 100%;
  background: var(--white);
}

.stack__bg {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.stack__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The photo keeps its screen of vertical space — that is the screen you see
   before the first panel arrives — and stays stuck behind for the rest of the
   section, because `sticky` only unsticks at the bottom of `.stack`. */
.stack__panels {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10rem 3rem;
}

.stack__slot {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 3rem;
  perspective: 1200px;
}

.stack__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 128rem;
  margin: 0 auto;
  padding: 20rem;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--card-color);
  text-align: center;
  transform-origin: center top;
  transform-style: preserve-3d;
  will-change: transform;
  /* One number per panel, written by main.js from the scroll position. */
  transform: rotate(calc(var(--stack-progress, 0) * 4deg))
    rotateX(calc(var(--stack-progress, 0) * 36deg))
    scale(calc(1 - var(--stack-progress, 0) * 0.2));
}

/* The doodle inside a stat panel: same drawing, same colour as the text, at
   18% so it reads as a texture and not as a second heading. */
.stack__shape {
  top: 50%;
  left: 50%;
  width: 60rem;
  transform: translate(-50%, -50%);
  opacity: 0.18;
}

.stack__title,
.stack__row,
.stack__description {
  position: relative;
  z-index: 1;
}

.stack__title {
  margin-bottom: 3rem;
  font-weight: 700;
  color: inherit;
}

.stack__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.stack__row--number {
  flex-direction: row;
  justify-content: center;
  gap: 3rem;
  text-align: left;
}

.stack__number {
  font-family: var(--font-display);
  font-size: var(--h2-xl-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--h2-xl-letter);
}

.stack__subtitle {
  max-width: 30ch;
  font-weight: 600;
  color: inherit;
}

.stack__row--number .stack__subtitle {
  max-width: 20ch;
}

.stack__description {
  margin-top: 3rem;
  max-width: 35ch;
  font-weight: 400;
  color: inherit;
}

/* --- 7.7 Split call to action ------------------------------------------- */

.split {
  width: 100%;
  padding: 8rem 0 4rem;
  background: var(--white);
}

.split__card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 4rem;
  min-height: 40rem;
  padding: 5rem;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--card-color);
  overflow: hidden;
}

/* When the picture is allowed to break out of the card. */
.split__card--overflow {
  overflow: visible;
}

.split__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.split__card--text-right .split__content {
  grid-column: 2;
}

.split__title {
  max-width: 18ch;
  font-weight: 600;
  color: inherit;
}

.split__subtitle {
  max-width: 40ch;
  color: inherit;
}

.split__cta {
  margin-top: 1rem;
  align-self: start;
}

.split__visual {
  position: absolute;
  bottom: 0;
  width: 45%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.split__card--text-left .split__visual {
  right: 0;
}

.split__card--text-right .split__visual {
  left: 0;
}

.split__card--overflow .split__visual {
  top: -10rem;
  height: calc(100% + 10rem);
}

.split__image {
  width: 100%;
  height: auto;
  border-radius: 1.2rem;
}

.split__card--overflow .split__image {
  border-radius: 0;
  object-fit: contain;
  object-position: bottom center;
  height: 100%;
}

/* The sticker is clipped by the card unless the card lets things overflow. */
.split__sticker-clip {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  pointer-events: none;
}

.split__card--text-left .sticker {
  left: calc(50% - 15rem);
}

.split__card--text-right .sticker {
  right: calc(50% - 15rem);
  --sticker-tilt: 15deg;
}

/* --- 7.8 Bike brands marquee -------------------------------------------- */

.brands {
  width: 100%;
  padding: 4rem 0;
  background: var(--white);
}

.brands__title {
  margin: 0 auto 3rem;
  max-width: 60rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--green-ink);
}

/* --- 7.9 CO2 calculator -------------------------------------------------- */

.calc {
  width: 100%;
  padding: 4rem 0;
  background: var(--white);
}

.calc__card {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 6rem;
  border-radius: var(--radius-card);
  background: var(--cream);
}

.calc__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding-bottom: 3rem;
  text-align: center;
}

.calc__title {
  max-width: 15ch;
  font-weight: 700;
  color: var(--green-deep);
}

.calc__subtitle {
  color: var(--green-deep);
}

/* 62rem for the result, the rest for the sliders: the figure must not shrink
   below the width of "1,613 kg/year" or it wraps. */
.calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62rem;
  gap: 2rem;
}

.calc__inputs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
  padding: 3rem;
  border-radius: var(--radius-lg);
  background: var(--white);
}

.calc__field {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.calc__label {
  font-family: var(--font-body);
  font-size: var(--text);
  font-weight: 500;
  line-height: var(--line-body);
  letter-spacing: 0;
  color: var(--green-ink);
}

.calc__row {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* A native range input, restyled. It keeps keyboard control for free. */
.calc__slider {
  flex: 1;
  width: 100%;
  height: 0.4rem;
  appearance: none;
  background: color-mix(in srgb, var(--green-deep) 20%, transparent);
  border-radius: 10rem;
  cursor: pointer;
}

.calc__slider::-webkit-slider-thumb {
  appearance: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--green-deep);
  border: none;
  cursor: grab;
}

.calc__slider::-moz-range-thumb {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--green-deep);
  border: none;
  cursor: grab;
}

.calc__value {
  min-width: 7rem;
  padding: 0.8rem 1.2rem;
  border-radius: 0.6rem;
  background: var(--green-mid);
  color: var(--white);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text);
  font-weight: 600;
  letter-spacing: 0;
}

.calc__result-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  border-radius: var(--radius-lg);
  background: var(--white);
}

.calc__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
  padding: 3rem 2rem;
  border-radius: var(--radius-btn);
  background: var(--green-panel);
  text-align: center;
}

/* The figure and its unit sit on one line, aligned on their baseline. */
.calc__result-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
}

.calc__result-value {
  font-family: var(--font-body);
  font-size: var(--h1-size);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--lime);
}

.calc__result-unit {
  margin-left: 0.2em;
  font-family: var(--font-body);
  font-size: var(--h3-size);
  font-weight: 500;
  color: var(--lime);
}

.calc__result-label {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--line-body);
  letter-spacing: 0;
  color: var(--cream);
  opacity: 0.9;
}

.calc__equiv {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 4rem;
  border-radius: var(--radius-lg);
  background: var(--green-ink);
}

.calc__equiv-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--h5-size);
  font-weight: 500;
  letter-spacing: var(--h5-letter);
  color: var(--cream);
}

.calc__equiv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.calc__equiv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 2.4rem;
  border-radius: var(--radius-btn);
  background: var(--cream);
  text-align: center;
}

.calc__equiv-icon {
  width: 3.6rem;
  height: 3.6rem;
  margin-bottom: 0.4rem;
  color: var(--green-deep);
}

.calc__equiv-value {
  font-family: var(--font-body);
  font-size: var(--h3-size);
  font-weight: 700;
  line-height: 1;
  color: var(--green-deep);
}

.calc__equiv-label {
  font-family: var(--font-body);
  font-size: var(--text);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--green-deep);
  opacity: 0.8;
}

.calc__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  margin-top: 1rem;
  text-align: center;
}

.calc__footer-text {
  max-width: 55rem;
  color: var(--green-deep);
}

/* --- 7.10 Quotes carousel -----------------------------------------------
   A native scroll container with snap points. Dragging, swiping and the
   keyboard all work with the scripts removed; the arrows and the 8s
   auto-advance are the enhancement. */

.quotes {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 4rem 0;
  background: var(--white);
}

.quotes__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 4rem;
  padding: 5rem;
  border: 0.1rem solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
}

.quotes__side {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.quotes__nav {
  display: flex;
  gap: 1rem;
}

.quotes__arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border: 0.1rem solid var(--line);
  border-radius: 50%;
  color: var(--green-ink);
  transition:
    background-color 0.3s var(--ease-inout),
    border-color 0.3s var(--ease-inout),
    color 0.3s var(--ease-inout);
}

.quotes__arrow:hover {
  background: var(--green-ink);
  border-color: var(--green-ink);
  color: var(--white);
}

.quotes__arrow svg {
  width: 1.8rem;
  height: 1.8rem;
}

.quotes__counter {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(12, 30, 24, 0.5);
}

.quotes__label {
  font-family: var(--font-display);
  font-size: var(--h5-size);
  font-weight: 700;
  line-height: var(--h5-height);
  letter-spacing: var(--h5-letter);
  color: var(--ink-warm);
}

.quotes__track {
  display: flex;
  gap: 4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.quotes__track::-webkit-scrollbar {
  display: none;
}

.quotes__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.quotes__text {
  font-family: var(--font-display);
  font-size: var(--quote-size);
  line-height: var(--quote-height);
  font-weight: 500;
  color: var(--ink-warm);
}

.quotes__author {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: auto;
}

.quotes__portrait {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.quotes__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink-warm);
}

.quotes__company {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: rgba(21, 17, 15, 0.5);
}

/* --- 7.11 FAQ ------------------------------------------------------------
   Native <details>. Open by default in the markup, closed by main.js when
   JavaScript is available: without scripts, every answer is readable. */

.faq {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--white);
}

.faq__shell {
  position: relative;
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 8rem;
  padding: 4rem 0 8rem;
}

.faq__left {
  min-height: 50rem;
}

.faq__title {
  max-width: 12ch;
  color: var(--green-deep);
}

.faq__shape {
  left: -5rem;
  bottom: -25rem;
  width: 50rem;
  transform: rotate(-70deg);
  --shape-color: var(--green-deep);
}

.faq__item {
  border-bottom: 0.1rem solid var(--line-soft);
}

.faq__item:first-child {
  border-top: 0.1rem solid var(--line-soft);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 2.5rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--green-deep);
  transition: opacity 0.3s var(--ease-inout);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  opacity: 0.8;
}

.faq__question-text {
  font-weight: 600;
  color: inherit;
}

/* The plus turns into a minus: only the vertical bar collapses. */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform 0.4s var(--ease-inout);
}

.faq__icon::before {
  width: 100%;
  height: 0.15rem;
  transform: translate(-50%, -50%);
}

.faq__icon::after {
  width: 0.15rem;
  height: 100%;
  transform: translate(-50%, -50%);
}

.faq__item[open] .faq__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq__answers {
  padding-bottom: 2.5rem;
}

.faq__answer {
  max-width: 70ch;
  color: var(--green-ink);
}

.faq__answer + .faq__answer {
  margin-top: 1.2rem;
}

/* --- 7.12 Footer ---------------------------------------------------------
   The footer is taller than its window and slides up as the page ends —
   the reference moved it by -25% of its height. main.js writes `--shift`. */

.footer-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.site-footer {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  background: var(--green-ink);
  color: var(--cream);
  transform: translate3d(0, var(--shift, -25%), 0);
}

.site-footer__shell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6rem;
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 8rem var(--shell-pad);
}

.site-footer__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 0.6fr);
  gap: 4rem;
}

.site-footer__row--bottom {
  align-items: end;
}

.site-footer__logo img {
  width: 40rem;
  max-width: 100%;
}

.site-footer__headline {
  margin-top: 3rem;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--h4-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.site-footer__label {
  margin-bottom: 2rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.6);
}

.site-footer__group + .site-footer__group {
  margin-top: 3rem;
}

.site-footer__group-label {
  margin-bottom: 1.2rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--lime);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.site-footer__link {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  transition: opacity 0.3s var(--ease-inout);
}

.site-footer__link:hover {
  opacity: 0.6;
}

.site-footer__contact-label {
  margin-top: 3rem;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: start;
  margin-top: 2rem;
}

.site-footer__socials {
  display: flex;
  gap: 1.2rem;
}

.site-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(245, 240, 230, 0.1);
  color: var(--cream);
  transition: background-color 0.3s var(--ease-inout);
}

.site-footer__social:hover {
  background: var(--lime);
  color: var(--green-ink);
}

.site-footer__social svg {
  width: 2rem;
  height: 2rem;
}

.site-footer__value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  max-width: 24ch;
}

.site-footer__copyright {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(245, 240, 230, 0.6);
}

.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(245, 240, 230, 0.6);
  transition: color 0.3s var(--ease-inout);
}

.site-footer__top:hover {
  color: var(--lime);
}

.site-footer__top svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* ==========================================================================
   8. Responsive
   --------------------------------------------------------------------------
   The reference has two real breakpoints, 1024px and 768px. Everything else
   is handled by the fluid root font size of section 2, which is why there are
   so few rules here.
   ========================================================================== */

@media (max-width: 1024px) {
  .site-nav__menu,
  .site-nav__lang,
  .site-nav__actions .btn--primary {
    display: none;
  }

  .site-nav__burger {
    display: inline-flex;
  }

  .split__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .split__content,
  .split__card--text-right .split__content {
    grid-column: 1;
  }

  .split__visual {
    position: relative;
    width: 100%;
    height: auto;
  }

  .split__card--overflow .split__visual {
    top: auto;
    height: auto;
  }

  .split__card--overflow .split__image {
    height: auto;
  }

  .faq__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .faq__left {
    min-height: auto;
  }

  .quotes__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .calc__grid,
  .calc__equiv-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .calc__result-value {
    font-size: 5rem;
  }

  .site-footer__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    --shell-pad: 1.6rem;

    --h1-size: 5.5rem;
    --h2-xl-size: 4.8rem;
    --h2-lg-size: 3.6rem;
    --h2-size: 2.8rem;
    --h3-size: 2.4rem;
    --h4-size: 1.8rem;
    --quote-size: 2.2rem;
    --h5-size: 1.6rem;
    --lead-size: 1.6rem;
    --text-lg: 1.6rem;
    --text-md: 1.6rem;
    --text: 1.4rem;
    --text-sm: 1.3rem;
  }

  .site-nav__logo--full {
    display: none;
  }

  .site-nav__logo--mark {
    display: block;
  }

  .clients__list {
    gap: 3rem 4rem;
  }

  .activate {
    padding: 4rem 0 8rem;
  }

  .activate__shell {
    padding-bottom: 5rem;
  }

  .activate__shape {
    display: none;
  }

  /* On a phone the card cannot float: it goes back into the flow. */
  .activate__card {
    position: static;
    width: 100%;
    max-width: 30rem;
    margin: 4rem auto 0;
    transform: rotate(7deg);
  }

  .activate__marquee-label {
    bottom: 12rem;
  }

  .process__shell {
    gap: 2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .process__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .process__visual {
    display: none;
  }

  .process__content {
    min-height: 22rem;
  }

  .perks {
    padding: 4rem 0;
  }

  .perks__toggle,
  .perks__cards {
    margin-top: 2rem;
  }

  .pill__label {
    padding: 1.4rem 2.4rem;
  }

  .perks__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .perk-card {
    aspect-ratio: auto;
    padding: 2.4rem;
  }

  .perk-card__list {
    margin-bottom: 2rem;
  }

  .stack__panels {
    padding: 6rem 1.6rem;
  }

  .stack__slot {
    padding: 0 1.6rem;
  }

  .stack__panel {
    padding: 3rem 1.6rem;
    min-height: 60vh;
  }

  .stack__title {
    margin-bottom: 1.6rem;
  }

  .stack__row--number {
    flex-direction: column;
    gap: 1.6rem;
    text-align: center;
  }

  .stack__description {
    margin-top: 1.6rem;
  }

  .split {
    padding: 2rem 0;
  }

  .split__card {
    gap: 1.6rem;
    min-height: 0;
    padding: 2rem;
  }

  .split__visual {
    display: none;
  }

  .sticker {
    top: 0.5rem;
    bottom: auto;
    width: 6rem;
  }

  .split__card--text-left .sticker {
    left: auto;
    right: 0.5rem;
  }

  .split__card--text-right .sticker {
    right: 0.5rem;
  }

  .calc {
    padding: 2rem 0;
  }

  .calc__card {
    padding: 1.6rem;
    gap: 2rem;
  }

  .calc__inputs {
    padding: 2rem;
  }

  .calc__result-wrap {
    padding: 2rem;
  }

  .calc__result {
    padding: 2.4rem 1.6rem;
  }

  .calc__result-value {
    font-size: 3.6rem;
  }

  .calc__result-unit {
    font-size: var(--text);
  }

  .calc__equiv {
    gap: 1.6rem;
    padding: 2.4rem 1.6rem;
  }

  .calc__equiv-card {
    padding: 1.6rem;
  }

  .calc__equiv-icon {
    width: 2.8rem;
    height: 2.8rem;
  }

  .quotes {
    display: block;
    min-height: 0;
    padding: 2rem 0;
  }

  .quotes__card {
    gap: 3rem;
    padding: 3rem 2rem;
  }

  .quotes__slide,
  .quotes__track {
    gap: 2.4rem;
  }

  .faq__grid {
    padding: 2rem 0;
  }

  .faq__question {
    gap: 1.6rem;
    padding: 1.6rem 0;
  }

  .faq__icon {
    width: 1.6rem;
    height: 1.6rem;
  }

  .faq__shape {
    display: none;
  }

  /* The footer stops sliding: on a phone it is a plain block. */
  .footer-wrap,
  .site-footer {
    height: auto;
  }

  .site-footer {
    transform: none;
  }

  .site-footer__shell {
    gap: 4rem;
    padding: 4rem var(--shell-pad);
  }

  .site-footer__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .site-footer__logo img {
    width: 24rem;
  }
}

/* ==========================================================================
   9. Reduced motion
   --------------------------------------------------------------------------
   Final states, applied at once. Delays are reset too: a delay is movement
   spread over time, and a block that appears three seconds late is still an
   animation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js [data-words] .word__in {
    transform: none;
  }

  .js .shape path {
    stroke-dashoffset: 0;
  }

  .marquee__track {
    animation: none;
  }

  .stack__panel {
    transform: none;
  }

  .site-footer {
    transform: none;
  }

  .footer-wrap {
    height: auto;
  }
}