/* Equal Labs website
   All styling for the site. Brand values are set once here, at the top,
   and used everywhere else by name. */

/* ---------- Font: Source Sans 3, hosted on our own site ----------
   One file holds weights 400, 500 and 600 (a "variable" font), Latin characters
   only: the same file Google Fonts served before. Licence: fonts/LICENSE.txt
   (SIL Open Font License 1.1). */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Brand variables (Equal Labs brand guide v1.0) ---------- */
:root {
  /* The ten brand colours. No others. */
  --teal: #00755E;          /* the one accent */
  --teal-light: #1D9E75;    /* only on Ink backgrounds, never text on white */
  --ink: #16211E;
  --secondary: #4A5754;
  --tertiary: #5F6B67;
  --rule: #D3DAD7;
  --fill: #EEF2F0;
  --band: #F7F9F8;          /* page background */
  --negative: #9E3A2E;
  --warning: #A15200;

  /* Fonts */
  --font-ui: 'Source Sans 3', Arial, sans-serif;  /* headings, UI, labels */
  --font-body: Georgia, serif;                    /* body text and italic highlights */

  /* Layout */
  --container: 1680px;      /* widest the content column gets; above this it stays centred */
  --gutter: 88px;           /* space inside the column, left and right */
  /* Space between sections: 180 px on desktop, growing like the text on wide
     screens (207 px at 1920 px). Dotted lines between sections sit centred in it. */
  --section-gap: clamp(180px, calc(99px + 5.625vw), 207px);
}

/* Phones and tablets: smaller side space, and 96 px between sections
   (the dotted lines there are 96 px tall, with the dots centred). */
@media (max-width: 1023px) {
  :root {
    --gutter: 24px;
    --section-gap: 96px;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--band);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--teal);
}

/* Visible focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

/* Lines of the hero cloud reach past the right edge; they must not cause sideways
   scrolling. Both are needed: the rule on html goes to the browser window, so the
   rule on body really cuts the drawing off at the edge. Without the one on html,
   tablets would show the page zoomed out to fit the drawing. */
html,
body {
  overflow-x: clip;
}

/* "Skip to content": hidden until it gets keyboard focus, then shown top left */
.skip-link {
  position: absolute;
  z-index: 100;
  left: 16px;
  top: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ---------- The centred column ----------
   Header and all section content sit in this column: at most 1680 px wide,
   centred, with 88 px side space (24 px on phones and tablets). Everything
   starts on the same 88 px line as the wordmark; each section keeps its own
   maximum width from the design inside the column.
   Backgrounds (page, teal block, contact) stay full width outside it. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Header and menu ---------- */
/* Desktop: wordmark left, menu pill right, at the edges of the column.
   88 px tall, so the hero can be placed exactly as in the design. */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 88px;
  padding-top: 22px;
}

.site-header__logo img {
  width: 156px;
}

/* The phone Menu button is hidden on desktop. */
.menu-button {
  display: none;
}

.menu {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 8px;
  padding: 8px 8px 8px 20px;
  background: var(--fill);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
}

.menu__link {
  color: var(--secondary);
  text-decoration: none;
}

.menu__link:hover {
  color: var(--ink);
}

.menu__end {
  display: flex;
  align-items: center;
  gap: 28px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.lang-switch [aria-current] {
  color: var(--teal);
  font-weight: 600;
}

.lang-switch__slash {
  color: var(--rule);
}

.lang-switch a {
  color: var(--tertiary);
  text-decoration: none;
}

.lang-switch a:hover {
  color: var(--ink);
}

.menu__contact {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}

.menu__contact:hover {
  background: var(--teal);
  color: #FFFFFF;
}

/* Phone and tablet: the pill does not fit, so a Menu button opens a panel. */
@media (max-width: 899px) {
  .site-header {
    height: 72px;
    align-items: center;
    padding-top: 0;
  }

  .site-header__logo img {
    width: 112px;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    background: var(--fill);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }

  /* The panel: full width, directly under the header. Hidden until opened. */
  .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    margin: 0;
    padding: 8px var(--gutter) 28px;
    background: var(--band);
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 18px 30px rgba(22, 33, 30, 0.12);
  }

  .menu.is-open {
    display: block;
  }

  .menu__link {
    display: block;
    padding: 14px 0;
    border-top: 1px dotted var(--teal);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
  }

  /* The last link (About) also gets a line underneath. */
  .menu__link:nth-of-type(4) {
    border-bottom: 1px dotted var(--teal);
  }

  .menu__end {
    justify-content: space-between;
    margin-top: 22px;
  }

  .lang-switch {
    padding-left: 0;
    border-left: 0;
    font-size: 16px;
  }

  .menu__contact {
    padding: 12px 22px;
    font-size: 16px;
  }
}

/* ---------- Growing on wide screens ----------
   The hero, section headings, eyebrows, buttons and body text grow evenly
   between 1440 and 1920 px wide: design size at 1440 px, 15% larger at
   1920 px, and no larger after that. All use the same formula, so they stay
   in proportion to each other.
   Each element sets --fs, its design size in px (without "px").
   Formula: size = 0.55 x fs + 0.03125 x fs vw, kept between fs and 1.15 x fs.
   --fs-cap limits body text: 20 px at most. */
.eyebrow,
.button,
.hero__title,
.section-title,
.hero__intro,
.body-text,
.how__lead,
.step__num,
.step__title,
.step__text,
.audit__title,
.audit__body {
  font-size: clamp(
    calc(var(--fs) * 1px),
    calc(var(--fs) * 0.55px + var(--fs) * 0.03125vw),
    min(calc(var(--fs) * 1.15px), var(--fs-cap, 999px))
  );
}

/* Section headings: 40 px in the design. */
.section-title {
  --fs: 40;
}

/* Body text in the sections (Georgia); sections set their own --fs from the design. */
.body-text {
  --fs: 19;
  --fs-cap: 20px;
}

/* ---------- Shared pieces ---------- */
/* Small capital label above a heading */
.eyebrow {
  --fs: 14;
  margin: 0 0 1em; /* 14 px at 14 px; sections may set their own */
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--secondary);
}

/* The italic Georgia highlight in headings (website-only choice) */
.highlight {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--teal);
}

/* Rounded teal button. Grows like the text, and is never lower than 48 px. */
.button {
  --fs: 16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(48px, calc(26.4px + 1.5vw), 55.2px);
  padding: 0 1.625em; /* 26 px at 16 px */
  border-radius: 999px;
  background: var(--teal);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}

.button:hover {
  background: var(--ink);
  color: #FFFFFF;
}

/* Words that must stay together on one line (also at a hyphen) */
.no-wrap {
  white-space: nowrap;
}

/* Line breaks that only exist on phones */
.phone-only {
  display: none;
}

/* ---------- Hero ---------- */
/* Desktop: text column (max 600 px) on the left, the = animation on the right.
   The hero is tall enough that Why starts 960 px from the top of the page. */
/* The spacing and the text column grow with the same formula as the text,
   so the hero keeps its proportions on wide screens. */
.hero {
  position: relative;
  /* --lift (set by main.js): between 1280 and 1024 px the cloud shrinks, so the hero
     gets up to 120 px shorter and Why moves up into the space; the = stays put. */
  min-height: calc(clamp(732px, calc(402.6px + 22.875vw), 841.8px) - var(--lift, 0px));
  padding-top: clamp(212px, calc(116.6px + 6.625vw), 243.8px);
}

.hero__text {
  position: relative;
  z-index: 2; /* the text stays above the drawing */
  max-width: clamp(600px, calc(330px + 18.75vw), 690px);
}

.hero .eyebrow {
  margin-bottom: 1.43em; /* 20 px at 14 px */
}

.hero__title {
  --fs: 52;
  margin: 0 0 0.46em;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Each headline line stays on one line, as in the design (white-space: nowrap).
   On phones the explicit phone line breaks still apply. main.js measures where
   the headline really ends, so the cloud keeps its 80 px clear space. */
.hero__title span {
  display: block;
  white-space: nowrap;
}

.hero__intro {
  --fs: 19;
  --fs-cap: 20px;
  max-width: 24.75em; /* 470 px at 19 px */
  margin: 0 0 32px;
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--secondary);
}

/* ---------- Hero animation ----------
   Desktop (1024 px and wider): the drawing from the 1440 px design, aligned
   with the column. The = sits two thirds across the column. On narrower
   desktops main.js shrinks the cloud and the = together (around the =),
   so the dense part of the cloud stays at least 80 px from the headline.
   Below 1024 px: the phone drawing sits centred below the text.
   main.js sets --x (where the = sits) and --s (the scale). */

.stage-box--desktop {
  position: absolute;
  z-index: 1; /* above the scroll line, below the text */
  left: 0;
  top: -88px; /* the design measures from the top of the page, above the header */
  pointer-events: none;
}

.stage-box--phone {
  display: none;
}

.stage {
  position: relative;
}

.stage--desktop {
  width: 1440px;
  height: 900px;
  --sq: 1.07; /* how much the = grows when the dot arrives */
  /* Move the = (at 960, 700 in the design) to --x, --y and scale around it. */
  transform: translate(calc(var(--x, 960px) - 960px), var(--y, 0px)) scale(var(--s, 1));
  transform-origin: 960px 700px;
}

.stage--phone {
  width: 390px;
  height: 420px;
  --sq: 1.08;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
}

.stage__svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}

.stage__labels {
  position: absolute;
  inset: 0;
}

/* The dotted cloud: the dots run along each line towards the = */
@keyframes dots { to { stroke-dashoffset: -36; } }

.dl {
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
  animation: dots 8s linear infinite;
}

/* The process names that briefly appear in the cloud */
@keyframes glimpse-desktop { 0%, 100% { opacity: 0; } 3%, 8% { opacity: 0.9; } 17% { opacity: 0; } }
@keyframes glimpse-phone { 0%, 100% { opacity: 0; } 3%, 8% { opacity: 0.75; } 17% { opacity: 0; } }

.lbl {
  position: absolute;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  animation: glimpse-desktop 18s ease-in-out infinite;
}

.stage--phone .lbl {
  font-size: 12px;
  color: var(--secondary);
  animation-name: glimpse-phone;
  animation-duration: 24s;
}

/* The name the travelling dot leaves from is shown in teal instead. */
.lbl.is-origin {
  display: none;
}

/* Each keyframe exists twice (A and B). Switching between them restarts
   the animation for the next dot. */
@keyframes olA { 0% { opacity: 0; } 6% { opacity: 1; } 45% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }
@keyframes olB { 0% { opacity: 0; } 6% { opacity: 1; } 45% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }
@keyframes travA { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 94% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes travB { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 94% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sqA { 0% { transform: scale(1); } 30% { transform: scale(var(--sq)); } 65% { transform: scale(0.98); } 100% { transform: scale(1); } }
@keyframes sqB { 0% { transform: scale(1); } 30% { transform: scale(var(--sq)); } 65% { transform: scale(0.98); } 100% { transform: scale(1); } }
@keyframes emA { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes emB { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* The name of the process the dot leaves from */
.originlbl {
  position: absolute;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  white-space: nowrap;
  opacity: 0;
}

/* The travelling dot */
.trav {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 2px 5px rgba(22, 33, 30, 0.28);
  offset-rotate: 0deg;
  offset-anchor: center;
  opacity: 0;
}

/* The dot that comes out below the = */
.emerge {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  offset-rotate: 0deg;
  offset-anchor: center;
  opacity: 0;
}

/* The = squeezes when the dot arrives */
.capture {
  transform-box: fill-box;
  transform-origin: center;
}

.capture.sqA { animation: sqA 0.7s ease-out; }
.capture.sqB { animation: sqB 0.7s ease-out; }

/* Desktop timing. The emerging dot travels along the short line only,
   and fades out at its end. */
.stage--desktop .emerge { offset-path: path('M960 740 L 960 872'); }
.stage--desktop .trav.a { animation: travA 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) 2.5s both; }
.stage--desktop .trav.b { animation: travB 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) 2.5s both; }
.stage--desktop .originlbl.a { animation: olA 8s ease-in-out 2.5s both; }
.stage--desktop .originlbl.b { animation: olB 8s ease-in-out 2.5s both; }
/* The very first dot starts part of the way along, so the page does not open empty. */
.stage--desktop .trav.first,
.stage--desktop .originlbl.first { animation-delay: -5s; }
.stage--desktop .emerge.emA { animation: emA 2.2s linear 0.25s both; }
.stage--desktop .emerge.emB { animation: emB 2.2s linear 0.25s both; }

/* Phone timing */
.stage--phone .emerge { offset-path: path('M195 372 L 195 414'); }
.stage--phone .trav.a { animation: travA 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) 2s both; }
.stage--phone .trav.b { animation: travB 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) 2s both; }
.stage--phone .originlbl.a { animation: olA 7s ease-in-out 2s both; }
.stage--phone .originlbl.b { animation: olB 7s ease-in-out 2s both; }
.stage--phone .trav.first,
.stage--phone .originlbl.first { animation-delay: -4s; }
.stage--phone .emerge.emA { animation: emA 2s linear 0.2s both; }
.stage--phone .emerge.emB { animation: emB 2s linear 0.2s both; }

/* The = is a link to For organisations. The "See how it works" hint is part
   of the same link: it shows on hover or keyboard focus, keeps the link
   hovered while the mouse moves onto it, and clicking it also goes to #how. */
.eqlink {
  position: absolute;
  left: 895px;
  top: 635px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  pointer-events: auto;
}

.eqtip {
  position: absolute;
  left: 118px; /* overlaps the edge of the = area, so there is no gap to cross */
  top: 52px;
  padding: 6px 14px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 999px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* while hidden, it must not catch the mouse */
}

.eqlink:hover .eqtip,
.eqlink:focus-visible .eqtip {
  opacity: 1;
  transform: none;
  pointer-events: auto; /* while shown, it belongs to the link */
}

.stage--phone .eqlink {
  left: 150px;
  top: 296px;
  width: 90px;
  height: 90px;
}

/* Phones and tablets show the phone drawing: the hint only appears on touch screens (below). */
.stage--phone .eqtip {
  display: none;
}

/* Touch screens (no hover): the hint is always there, small and quiet,
   just below the = and beside the solid line. */
@media (hover: none) {
  .eqtip,
  .stage--phone .eqtip {
    display: block;
    left: 77px;  /* 12 px right of the line */
    top: 105px;  /* 8 px below the = */
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--tertiary);
    background: none;
    border: 0;
    border-radius: 0;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }

  .stage--phone .eqtip {
    left: 57px;
    top: 74px;
    font-size: 12px;
  }
}

/* Below 1024 px: the phone drawing, centred under the text. */
@media (max-width: 1023px) {
  .hero {
    min-height: 0;
    padding-top: 72px;
  }

  .stage-box--desktop {
    display: none;
  }

  .stage-box--phone {
    display: block;
    position: relative;
    width: min(390px, 100vw);
    height: calc(420px * var(--s, 1));
    margin-top: -14px;
    /* Centre it, even when it is wider than the text column on a phone */
    margin-inline: calc(50% - min(195px, 50vw));
  }
}

/* Calm for everyone who asks for less motion: everything stands still. */
@media (prefers-reduced-motion: reduce) {
  .dl,
  .capture {
    animation: none;
  }

  .trav,
  .emerge,
  .originlbl,
  .stage--phone .lbl {
    display: none;
  }

  .stage--desktop .lbl {
    animation: none;
    opacity: 0.6;
  }

  .eqtip {
    transition: none;
  }
}

/* Phone: sizes from the phone design. */
@media (max-width: 599px) {
  .phone-only {
    display: inline;
  }

  .eyebrow {
    --fs: 13;
  }

  .hero .eyebrow {
    margin-bottom: 12px;
  }

  .hero {
    padding-top: 20px;
  }

  .hero__title {
    --fs: 34;
    margin-bottom: 16px;
    line-height: 1.12;
    letter-spacing: -0.01em;
  }

  .hero__intro {
    --fs: 17;
    margin-bottom: 24px;
  }

  .hero .button {
    --fs: 17;
    display: flex;
    min-height: 52px;
  }
}

/* ---------- Sections ---------- */
/* Each section is full width (for its background); its content sits in a .container.
   The same space between all sections. */
.section {
  margin-top: var(--section-gap);
}

/* Section headings and body text */
.section-title {
  margin: 0 0 0.5em; /* 20 px at 40 px */
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.body-text {
  margin: 0 0 0.84em; /* 16 px at 19 px */
  font-family: var(--font-body);
  line-height: 1.65;
  color: var(--secondary);
}

.body-text:last-child {
  margin-bottom: 0;
}

/* ---------- Why ---------- */
/* 720 px wide in the design, growing like the text on wide screens.
   It also keeps 80 px clear of the scroll line (main.js sets --line-x,
   where the line runs, measured from the left of the column). */
.why {
  max-width: min(
    clamp(720px, calc(396px + 22.5vw), 828px),
    calc(var(--line-x, 9999px) - var(--gutter) - 80px)
  );
}

/* ---------- For organisations ----------
   Full-width teal block. Desktop: intro, then the four steps with their
   drawings above the cards, joined by white lines, then the audit box.
   Sizes grow on wide screens with the same formula as the text. */
.how {
  position: relative;
  padding: 60px 0 40px;
  background: var(--teal);
  overflow: clip; /* the white line from above starts exactly at the top edge */
  /* Drawing width: 200 px in the design, growing on wide screens. On narrower
     desktops (below about 1170 px) it shrinks so the dotted link between two
     drawings stays 40 px long: column width (25vw - 68px) + gap - 20 px - 40 px. */
  --dw: min(clamp(200px, calc(110px + 6.25vw), 230px), calc(25vw - 96px));
  --dh: calc(var(--dw) * 0.55);                    /* drawing height, 110 px */
  --gap: 32px;                                     /* space between the four steps */
}

.how .eyebrow {
  color: var(--fill);
}

.how .section-title {
  --fs: 38;
  margin-bottom: 0.37em; /* 14 px at 38 px */
  color: rgba(255, 255, 255, 0.85); /* 4.56 : 1 on teal, still dimmer than the white highlight */
}

.how .highlight {
  color: #FFFFFF;
}

/* 740 px in the design, and 80 px clear of the white line */
.how__intro {
  max-width: min(
    clamp(740px, calc(407px + 23.125vw), 851px),
    calc(var(--line-x, 9999px) - var(--gutter) - 80px)
  );
}

.how__lead {
  --fs: 16;
  margin: 0;
  line-height: 1.6;
  color: #FFFFFF;
}

.how__lead-label {
  color: var(--fill);
  font-weight: 600;
}

/* The steps and the audit box: 1136 px wide in the design */
.steps-wrap,
.audit {
  max-width: clamp(1136px, calc(624.8px + 35.5vw), 1306.4px);
}

.steps-wrap {
  position: relative;
  margin-top: 34px;
}

/* The white line from the = comes down to the line across the steps. */
.steps__stem {
  position: absolute;
  left: calc(var(--line-x, -100px) - var(--gutter) - 1.5px);
  bottom: 100%;
  width: 3px;
  height: 2000px; /* cut off at the top of the teal block */
  background: #FFFFFF;
}

.steps__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: -1.5px;
  height: 3px;
  border-radius: 1.5px;
  background: #FFFFFF;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 50px;
}

/* Dotted drops: from the line to the drawing, and from the drawing to the card */
.step::before,
.step::after {
  content: '';
  position: absolute;
  left: calc(50% - 1.4px);
  width: 2.8px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1.4px, transparent 1.5px) center top / 2.8px 6px repeat-y;
}

.step::before {
  top: 4px;
  height: 42px;
}

.step::after {
  top: calc(50px + var(--dh) + 6px);
  height: 30px;
}

.step__drawing {
  display: block;
  flex: none;
  width: var(--dw);
  height: var(--dh);
  margin: 0 auto 40px;
}

.step__card {
  flex: 1;
  min-height: 170px;
  padding: 22px 22px 26px;
  border: 1px solid #FFFFFF;
}

.step__num {
  --fs: 13;
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--fill); /* full Fill for contrast: 5.02 : 1 on teal */
}

.step__title {
  --fs: 24;
  margin: 0 0 10px;
  font-weight: 500;
  color: #FFFFFF;
}

.step__text {
  --fs: 16;
  margin: 0;
  line-height: 1.5;
  color: var(--fill);
}

/* Moving dotted lines between the drawings, at the middle of the drawings */
.steps__links {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50px + var(--dh) / 2 - 2px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  pointer-events: none;
}

.steps__link {
  display: block;
  width: calc(100% + var(--gap) - var(--dw) - 20px);
  height: 4px;
  margin-left: calc(50% + var(--dw) / 2 + 10px);
  overflow: visible;
}

.flow.flow--white {
  stroke: #FFFFFF;
  stroke-width: 2.8;
  opacity: 0.9;
}

/* The Quickscan box */
.audit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--fill);
}

.audit__title {
  --fs: 22;
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--ink);
}

.audit__body {
  --fs: 17;
  --fs-cap: 20px;
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.55;
  color: var(--secondary);
}

.audit__button {
  flex: none;
  padding: 0 1.5em; /* 24 px at 16 px */
}

/* Phone and tablet: the cards stack, each drawing sits inside its card,
   and moving dotted lines join the cards. */
@keyframes flow-down { to { background-position: center 36px; } }

@media (max-width: 1023px) {
  .how {
    padding: 44px 0 40px;
  }

  .how .section-title {
    margin-bottom: 16px;
  }

  .how__lead {
    margin-bottom: 32px;
  }

  .steps-wrap {
    margin-top: 0;
  }

  .steps__stem,
  .steps__rule,
  .steps__links,
  .step::after {
    display: none;
  }

  .steps {
    display: block;
  }

  /* Each step is one card: number and title on the left, drawing on the right */
  .step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "num   drawing"
      "title drawing"
      "text  text";
    column-gap: 16px;
    padding: 18px 20px 20px;
    border: 1px solid #FFFFFF;
  }

  .step__card {
    display: contents;
  }

  .step__drawing {
    grid-area: drawing;
    align-self: center;
    width: 100px;
    height: 55px;
    margin: 0;
  }

  .step__num {
    grid-area: num;
    margin-bottom: 4px;
  }

  .step__title {
    --fs: 22;
    grid-area: title;
    margin: 0;
  }

  .step__text {
    grid-area: text;
    margin-top: 10px;
  }

  /* The moving dotted line between two cards */
  .step::before {
    display: none;
  }

  .step + .step {
    margin-top: 32px;
  }

  .step + .step::before {
    display: block;
    top: -27px;
    left: calc(50% - 1.2px);
    width: 2.4px;
    height: 22px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1.2px, transparent 1.3px) center top / 2.4px 9px repeat-y;
    animation: flow-down 3s linear infinite;
  }

  .audit {
    display: block;
    margin-top: 36px;
    padding: 24px 20px;
  }

  .audit__title {
    --fs: 20;
    margin-bottom: 8px;
    line-height: 1.25;
  }

  .audit__body {
    --fs: 16;
    margin-bottom: 18px;
  }

  .audit__button {
    display: flex;
    width: 100%;
  }
}

@media (max-width: 599px) {
  .how .section-title {
    --fs: 30;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step + .step::before {
    animation: none;
  }
}

/* ---------- Shared for Finance, Products and Proof ---------- */
/* 1136 px wide in the design, growing like the text on wide screens */
.finance__grid,
.products__grid,
.proof__box {
  max-width: clamp(1136px, calc(624.8px + 35.5vw), 1306.4px);
}

/* These sections use 38 px headings and 18 px body text in the design. */
.finance .section-title,
.products .section-title,
.proof .section-title {
  --fs: 38;
}

.body-text--18 {
  --fs: 18;
  line-height: 1.6;
}

.finance__terms,
.text-link,
.about__creds,
.about__quote,
.contact__email,
.footer,
.expertise__list li,
.product__name,
.product__text,
.product__status,
.product__link,
.proof__title,
.proof__text {
  font-size: clamp(
    calc(var(--fs) * 1px),
    calc(var(--fs) * 0.55px + var(--fs) * 0.03125vw),
    min(calc(var(--fs) * 1.15px), var(--fs-cap, 999px))
  );
}

/* ---------- For finance teams ---------- */
/* Desktop: text on the left, areas of expertise on the right */
.finance__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
}

/* The text column is at least 420 px, so the heading ("Senior finance
   expertise," needs 404 px) stays on two lines on narrower desktops.
   From about 1070 px wide both columns are simply half. */
@media (min-width: 1024px) {
  .finance__grid {
    grid-template-columns: minmax(420px, 1fr) minmax(0, 1fr);
  }
}

.finance .section-title {
  margin-bottom: 0.47em; /* 18 px at 38 px */
}

.finance__terms {
  --fs: 16;
  margin: 0;
  color: var(--tertiary);
}

/* Teal link with a dotted underline (Request my CV, Connect on LinkedIn) */
.text-link {
  --fs: 16;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px dotted var(--teal);
}

.text-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Touch screens and phones: small text links get a taller invisible tap area
   (about 44 px), without changing how they look. */
@media (pointer: coarse), (max-width: 599px) {
  .text-link,
  .product__link,
  .contact__email,
  .footer a {
    position: relative;
  }

  .text-link::after,
  .product__link::after,
  .contact__email::after,
  .footer a::after {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

.finance__cv {
  margin: 18px 0 0;
}

.expertise {
  padding-top: 34px;
}

.expertise__label {
  margin-bottom: 10px;
}

.expertise__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.expertise__list li {
  --fs: 19;
  padding: 16px 0;
  border-top: 1px dotted var(--teal);
  font-weight: 500;
}

.expertise__list li:last-child {
  border-bottom: 1px dotted var(--teal);
}

/* ---------- Products ---------- */
.products .section-title {
  margin-bottom: 0.37em; /* 14 px at 38 px */
}

.products__intro {
  max-width: 37.8em; /* 680 px at 18 px */
  margin-bottom: 28px;
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.product {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--teal);
}

.product__label {
  --fs: 13;
  margin-bottom: 6px;
}

.product__name {
  --fs: 24;
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--teal);
}

.product__text {
  --fs: 16;
  flex: 1;
  margin: 0 0 20px;
  line-height: 1.55;
  color: var(--ink);
}

.product__status {
  --fs: 14;
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px dotted var(--teal);
  color: var(--tertiary);
}

.product__status-label {
  font-weight: 600;
  color: var(--secondary);
}

.product__link {
  --fs: 15;
  align-self: flex-start;
  font-weight: 600;
  text-decoration: none;
}

.product__link:hover {
  color: var(--ink);
}

/* ---------- Proof (switched off for now) ---------- */
.proof .section-title {
  margin-bottom: 0.37em;
}

.proof__box {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  border: 1px dashed var(--teal);
}

.proof__drawing {
  flex: none;
}

.proof__title {
  --fs: 20;
  margin: 0 0 6px;
  font-weight: 600;
}

.proof__text {
  --fs: 17;
  --fs-cap: 20px;
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.55;
  color: var(--secondary);
}

/* Phone and tablet: one column */
@media (max-width: 1023px) {
  .finance__grid,
  .products__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance__grid {
    gap: 0;
  }

  .finance__cv {
    margin: 10px 0 26px;
  }

  .expertise {
    padding-top: 0;
  }

  .products__grid {
    gap: 20px;
  }

  /* Products and About sit straight under the dotted line on phones */
  .products .products__intro {
    margin-bottom: 22px;
  }
}

/* Phone sizes from the phone design */
@media (max-width: 599px) {
  .finance .section-title,
  .products .section-title,
  .proof .section-title {
    --fs: 30;
    margin-bottom: 16px;
  }

  .finance__terms {
    --fs: 15;
  }

  .expertise__label {
    margin-bottom: 8px;
  }

  .expertise__list li {
    --fs: 17;
    padding: 14px 0;
  }

  .product {
    padding: 22px 20px;
  }

  .product__label {
    --fs: 12;
    margin-bottom: 4px;
  }

  .product__name {
    --fs: 22;
    margin-bottom: 10px;
  }

  .product__text {
    margin-bottom: 16px;
  }

  .product__status {
    margin-bottom: 14px;
    padding-top: 12px;
  }

  .proof__box {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }
}

/* ---------- About ---------- */
/* Desktop: two photos on the left (400 px), text on the right */
.about__grid {
  --pw: clamp(400px, calc(220px + 12.5vw), 460px); /* photo column, growing on wide screens */
  display: grid;
  grid-template-columns: var(--pw) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  max-width: clamp(1136px, calc(624.8px + 35.5vw), 1306.4px);
}

/* The photos overlap: positions from the design, as parts of the 400 x 560 box */
.about__photos {
  position: relative;
  aspect-ratio: 400 / 560;
}

.about__portrait,
.about__mirror {
  position: absolute;
  display: block;
  object-fit: cover;
}

.about__portrait {
  left: 0;
  top: 0;
  width: 82.5%;   /* 330 px */
  height: 80.36%; /* 450 px */
  object-position: 50% 0%; /* cropped from the top: the head always stays in view */
}

.about__mirror {
  left: 53.5%;    /* 214 px */
  top: 46.79%;    /* 262 px */
  width: 49.5%;   /* 186 px photo + 2 x 6 px frame */
  height: 51.96%; /* 279 px photo + 2 x 6 px frame */
  object-position: 50% 30%;
  border: 6px solid var(--fill);
  box-shadow: 0 10px 28px rgba(22, 33, 30, 0.18);
}

.about .section-title {
  margin-bottom: 0.25em; /* 10 px at 40 px */
}

.about__creds {
  --fs: 14;
  margin: 0 0 24px;
  color: var(--tertiary);
}

.about__para {
  --fs: 18;
  margin-bottom: 0.89em; /* 16 px at 18 px */
}

.about__quote {
  --fs: 22;
  margin: 8px 0 28px;
  padding-left: 20px;
  border-left: 3px solid var(--teal);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.about__quote-accent {
  color: var(--teal);
}

.about__link {
  margin: 0;
}

/* ---------- Contact and footer ---------- */
/* Full-width Ink block, at least 480 px tall, footer at the bottom */
.contact {
  padding: 88px 0 28px;
  background: var(--ink);
  color: #FFFFFF;
}

.contact__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: calc(480px - 88px - 28px);
}

/* The dark version of the wordmark, top right */
.contact__logo {
  position: absolute;
  right: var(--gutter);
  top: 4px;
  width: clamp(180px, calc(99px + 5.625vw), 207px);
}

.contact .eyebrow {
  color: var(--teal-light);
}

.contact .contact__title {
  --fs: 42;
  margin-bottom: 0.43em; /* 18 px at 42 px */
  line-height: 1.12;
  color: #FFFFFF;
}

/* Desktop: the heading keeps 32 px clear of the wordmark on the right
   (longer headings, like the Dutch one, wrap instead of running under it). */
@media (min-width: 1024px) {
  .contact .contact__title {
    max-width: calc(100% - clamp(180px, calc(99px + 5.625vw), 207px) - 32px);
  }
}

.contact .contact__intro {
  max-width: 37.8em; /* 680 px at 18 px */
  margin: 0 0 30px;
  color: var(--rule);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

/* On Ink: light teal button with Ink text */
.contact__button {
  background: var(--teal-light);
  color: var(--ink);
}

.contact__button:hover {
  background: var(--fill);
  color: var(--ink);
}

.contact__email {
  --fs: 16;
  font-weight: 500;
  color: var(--rule);
  text-decoration: none;
  border-bottom: 1px dotted var(--teal-light);
}

.contact__email:hover {
  color: #FFFFFF;
}

/* Keyboard focus stays visible on the dark background */
.contact :focus-visible {
  outline-color: var(--teal-light);
}

.footer {
  --fs: 13;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap; /* if there is not enough room, the credit moves to its own line */
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(211, 218, 215, 0.25);
  color: var(--rule);
}

.footer p {
  margin: 0;
}

.footer a {
  color: var(--rule);
}

.footer a:hover {
  color: #FFFFFF;
}

.footer__sep {
  margin-inline: 0.4em;
}

/* Each part (address, KvK and BTW, Privacy) stays together: lines only break between parts */
.footer__legal > span {
  display: inline-block;
  white-space: nowrap;
}

/* The Equal Labs bars before the credit: light teal, 24 px wide
   (the brand minimum, never smaller), centred on the text */
.footer__credit {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__mark {
  flex: none;
  width: 24px;
  height: auto;
}

/* Phone and tablet: photos above the text; wordmark above the contact text */
@media (max-width: 1023px) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* Phone photo box from the phone design: 330 px tall */
  .about__photos {
    aspect-ratio: auto;
    height: 330px;
    max-width: 400px;
    margin-bottom: 24px;
  }

  .about__portrait {
    width: 210px;
    height: 286px;
  }

  .about__mirror {
    left: auto;
    right: 20px;
    top: 150px;
    width: 130px;  /* 120 px photo + 2 x 5 px frame */
    height: 180px; /* 170 px photo + 2 x 5 px frame */
    border-width: 5px;
    box-shadow: 0 10px 24px rgba(22, 33, 30, 0.18);
  }

  .contact {
    padding-top: 48px;
  }

  .contact__inner {
    min-height: 0;
  }

  .contact__logo {
    position: static;
    width: 120px;
    margin-bottom: 40px;
  }

  .footer {
    margin-top: 44px;
  }
}

/* Phone sizes from the phone design */
@media (max-width: 599px) {
  .about__creds {
    margin-bottom: 20px;
    line-height: 1.5;
  }

  .about__quote {
    --fs: 20;
    margin: 6px 0 24px;
    padding-left: 16px;
  }

  .contact .contact__title {
    --fs: 32;
    margin-bottom: 14px;
  }

  .contact .contact__intro {
    margin-bottom: 26px;
  }

  /* Full-width button, email link centred below it */
  .contact__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    width: 100%;
  }

  .contact__button {
    min-height: 52px;
    --fs: 17;
  }

  .contact__email {
    align-self: center;
  }

  /* Footer on four lines: © and Privacy / address / KvK and BTW / credit */
  .footer {
    display: block;
    padding-top: 16px;
    line-height: 1.7;
  }

  .footer__legal {
    display: flex;
    flex-wrap: wrap;
  }

  .footer__privacy {
    order: 1;
  }

  .footer__address {
    order: 2;
    flex-basis: 100%;
  }

  .footer__ids {
    order: 3;
    flex-basis: 100%;
  }

  .footer__address > .footer__sep:first-child,
  .footer__ids > .footer__sep:first-child {
    display: none;
  }
}

/* ---------- Privacy pages ----------
   Same header and footer as the homepage, one readable text column (720 px). */
.legal {
  padding: 72px 0 var(--section-gap);
}

.legal__text {
  max-width: 720px;
}

.legal__title,
.legal__lead,
.legal h2,
.legal p,
.legal li,
.legal table {
  font-size: clamp(
    calc(var(--fs) * 1px),
    calc(var(--fs) * 0.55px + var(--fs) * 0.03125vw),
    min(calc(var(--fs) * 1.15px), var(--fs-cap, 999px))
  );
}

.legal__title {
  --fs: 40;
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.15;
}

.legal p,
.legal li {
  --fs: 18;
  --fs-cap: 20px;
  margin: 0 0 0.89em;
  font-family: var(--font-body);
  line-height: 1.65;
  color: var(--secondary);
}

.legal .legal__lead {
  --fs: 19;
  color: var(--ink);
}

.legal h2 {
  --fs: 24;
  margin: 2em 0 0.5em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.legal ul {
  margin: 0 0 0.89em;
  padding-left: 1.3em;
}

.legal li {
  margin-bottom: 0.4em;
  padding-left: 0.2em;
}

.legal li::marker {
  color: var(--teal);
}

.legal a:hover {
  color: var(--ink);
}

/* The table stays a table; on narrow screens it scrolls sideways inside its box */
.legal__table {
  margin: 4px 0 20px;
  overflow-x: auto;
  border: 1px solid var(--rule);
}

.legal table {
  --fs: 15;
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  line-height: 1.5;
  color: var(--ink);
}

.legal th,
.legal td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.legal tbody tr:last-child > * {
  border-bottom: 0;
}

.legal thead th {
  background: var(--fill);
  font-weight: 600;
}

.legal tbody th {
  font-weight: 600;
}

/* Narrow screens (the table no longer fits): each row becomes a stacked card,
   the situation on top, then each cell with its column name. The table keeps
   its roles in the HTML (role="table", "row", "cell" ...), so screen readers
   still read it as a table. The column names are shown from data-label and
   are left out for screen readers (they already know the column). */
@media (max-width: 699px) {
  .legal__table {
    overflow: visible;
    border: 0;
  }

  .legal table,
  .legal tbody,
  .legal tr,
  .legal th,
  .legal td {
    display: block;
  }

  .legal table {
    min-width: 0;
  }

  /* The column headings: hidden on screen, still there for screen readers */
  .legal thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .legal tbody tr {
    margin-bottom: 12px;
    border: 1px solid var(--rule);
  }

  .legal tbody th {
    background: var(--fill);
  }

  /* Lines between the parts of each card, also in the last card */
  .legal tbody tr > *,
  .legal tbody tr:last-child > * {
    border-bottom: 1px solid var(--rule);
  }

  .legal tbody tr > :last-child,
  .legal tbody tr:last-child > :last-child {
    border-bottom: 0;
  }

  .legal td::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--secondary);
  }
}

/* Footer band at the bottom of the privacy pages, same look as on the homepage */
.site-footer {
  padding: 28px 0;
  background: var(--ink);
  color: #FFFFFF;
}

.site-footer .footer {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.site-footer :focus-visible {
  outline-color: var(--teal-light);
}

.footer [aria-current="page"] {
  text-decoration: none;
}

@media (max-width: 599px) {
  .legal {
    padding-top: 32px;
  }

  .legal__title {
    --fs: 30;
  }

  .legal p,
  .legal li {
    --fs: 17;
    line-height: 1.6;
  }

  .legal h2 {
    --fs: 21;
  }
}

/* ---------- Lines that join the sections ---------- */
@keyframes flow-dots { to { stroke-dashoffset: -36; } }

/* The dotted moving line used between sections */
.flow {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0 9;
  animation: flow-dots 3s linear infinite;
}

/* Each dotted line between sections is marked for phone (--phone) or
   desktop (--desktop); the design joins different sections on each.
   A section right after a dotted line has no extra space above it
   (after-line: on both, after-line-phone: on phones only). */
.connector {
  display: none;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  /* 100 px line in the middle of the space between sections */
  .connector--desktop {
    display: block;
    margin-block: calc((var(--section-gap) - 100px) / 2);
  }

  .after-line {
    margin-top: 0;
  }
}

/* The solid line from the = down to For organisations (desktop).
   main.js places it and sets its length as you scroll.
   It sits under the hero drawing, so the emerging dot shows on top of it. */
.scroll-line {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  border-radius: 1.5px;
  background: var(--teal);
  pointer-events: none;
}

/* ---------- Sections appear as you scroll ----------
   Only when JavaScript runs (the "js" class), so the text is never lost. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Phone and tablet: dotted connectors instead of gaps, no scroll line. */
@media (max-width: 1023px) {
  #why {
    margin-top: 8px;
  }

  .connector--phone {
    display: block;
  }

  .after-line,
  .after-line-phone {
    margin-top: 0;
  }

  .scroll-line {
    display: none;
  }
}

/* Phone sizes from the phone design */
@media (max-width: 599px) {
  .section-title {
    --fs: 30;
    margin-bottom: 16px;
  }

  .body-text {
    --fs: 17;
    margin-bottom: 14px;
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow {
    animation: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Calm motion only: switch off smooth scrolling when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}