@font-face {
  font-family: 'PP Telegraf';
  src: url('../assets/fonts/Telegraf-UltraLight-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Telegraf';
  src: url('../assets/fonts/Telegraf-Regular-400.woff2') format('woff2'),
       url('../assets/fonts/Telegraf-Regular-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Telegraf';
  src: url('../assets/fonts/Telegraf-UltraBold-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

@property --pillar-side {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 33.3333%;
}

:root {
  --tmc-blue: #193E92;
  --tmc-green: #009750;
  --tmc-red: #910D49;
  --tmc-light-blue: #8FD7E7;
  --tmc-light-green: #56F09F;
  --tmc-light-red: #FF9476;
  --tmc-black: #000000;
  --tmc-white: #FFFFFF;

  /* Tone-on-tone tints of TMC Blue, 10% steps */
  --tmc-blue-90: color-mix(in srgb, var(--tmc-blue) 90%, var(--tmc-white));
  --tmc-blue-80: color-mix(in srgb, var(--tmc-blue) 80%, var(--tmc-white));

  --font: 'PP Telegraf', Arial, sans-serif;

  --margin: clamp(20px, 5vw, 72px);
  --gutter: calc(100vw / 30);
  --radius: clamp(10px, 1.4vw, 20px);
  --radius-button: 10px;

  --header-pad: clamp(20px, 3vw, 40px);
  /* Compact (scrolled) bar height: sections fill 100svh minus this */
  --header-h: calc(2 * clamp(12px, 1.4vw, 18px) + max(clamp(32px, 3vw, 44px), 46px));
  --logo-h: clamp(40px, 4.2vw, 60px);
}

/* ---------- Base ---------- */

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

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--tmc-blue);
  background: var(--tmc-white);
  -webkit-font-smoothing: antialiased;
}

h1,
p,
figure,
ol,
ul {
  margin: 0;
  padding: 0;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--tmc-white);
  color: var(--tmc-blue);
  transform: translateY(-200%);
}

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

.eyebrow {
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Motion & scroll (shared) ----------
   One layer every section uses. See "Motion & scroll" in CLAUDE.md.
   - data-reveal / data-reveal="fade|pop"  element animates in once on scroll
   - data-reveal-stagger                   its children animate in one by one
   - .parallax                             drifts against the scroll (CSS only)
   Hidden states only apply with JS and without reduced motion, so content
   is never stuck invisible. Anchor offset (scroll-padding-top) belongs to
   the header styles, not here. */

:root {
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-reveal: 0.8s;
  --reveal-distance: 16px;
  --reveal-stagger: 0.06s;
  --parallax-distance: 48px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .js [data-reveal],
  .js [data-reveal-stagger] > * {
    transition:
      opacity var(--duration-reveal) var(--ease-out),
      transform var(--duration-reveal) var(--ease-out);
    transition-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger));
  }

  .js [data-reveal]:not(.is-revealed),
  .js [data-reveal-stagger]:not(.is-revealed) > * {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
  }

  .js [data-reveal="fade"]:not(.is-revealed) {
    transform: none;
  }

  .js [data-reveal="pop"]:not(.is-revealed) {
    transform: scale(0);
  }

  /* Parallax uses `translate`, so it stacks with reveal's `transform` */
  @supports (animation-timeline: view()) {
    .parallax {
      animation: parallax linear both;
      animation-timeline: view();
    }

    @keyframes parallax {
      from { translate: 0 var(--parallax-distance); }
      to   { translate: 0 calc(-1 * var(--parallax-distance)); }
    }
  }
}

/* Section hand-off: put .parallax-out on a section. While it scrolls away
   its content sinks and, late, fades; the next section slides over it. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Each parallax-out section needs its own timeline name: set
       --section-out on it, e.g. style="--section-out: --out-why" */
    .parallax-out {
      view-timeline: var(--section-out, --section-out) block;
    }

    .parallax-out > * {
      /* Sink, plus the same late fade as .stack-under (stack-fade) */
      animation: parallax-out linear both, stack-fade linear both;
      animation-timeline: var(--section-out, --section-out), var(--section-out, --section-out);
      /* Raise the start (e.g. exit 40%) to let the section scroll on
         normally for a while before the hand-off kicks in */
      animation-range:
        var(--parallax-out-start, exit 0%) exit 100%,
        exit var(--stack-fade-start, 50%) exit 100%;
    }

    .parallax-out + * {
      position: relative;
      z-index: 1;
    }

    @keyframes parallax-out {
      to {
        translate: 0 var(--parallax-out-distance, 40vh);
      }
    }
  }
}

/* Stack: put .stack-under on a section. It scrolls normally until its
   bottom reaches the bottom of the screen, then stays put while the next
   section slides over it like a card. --stack-top is set by js/script.js
   (negative for sections taller than the screen), so no JS means no pin. */

@media (prefers-reduced-motion: no-preference) {
  .js .stack-under {
    position: sticky;
    top: var(--stack-top, 0px);
  }

  /* Every later sibling, not just the next one: the pinned section stays
     stuck until the end of <main>, so all following sections must cover it */
  .stack-under ~ * {
    position: relative;
    z-index: 2;
  }

  /* While the next section covers it, the pinned content fades. The fade
     follows the covering section's entry; --stack-fade-start sets how far
     it must be in before fading begins. Each pair gets its own timeline
     name (--stack-cover-1, -2, …): js/script.js sets --stack-cover on both
     sections and lists the names in timeline-scope on <body>. */
  @supports (animation-timeline: view()) {
    .stack-under + * {
      view-timeline: var(--stack-cover, --stack-cover) block;
    }

    /* A section can both cover a stack-under one and hand off itself */
    .stack-under + .parallax-out {
      view-timeline:
        var(--stack-cover, --stack-cover) block,
        var(--section-out, --section-out) block;
    }

    .js .stack-under > * {
      animation: stack-fade linear both;
      animation-timeline: var(--stack-cover, --stack-cover);
      animation-range: entry var(--stack-fade-start, 50%) entry 100%;
    }

    @keyframes stack-fade {
      to { opacity: 0.15; }
    }
  }
}

/* Cursor dot: replaces the pointer on mouse devices, trails it slightly.
   Built by js/script.js only for a fine pointer without reduced motion.
   Each section sets --cursor-color to a colour allowed on its background. */

:root {
  --cursor-color: var(--tmc-blue);
  --cursor-size: 16px;
  --cursor-lag: 0.35s;
}

.site-header,
.hero {
  --cursor-color: var(--tmc-light-blue);
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: var(--cursor-size);
  height: var(--cursor-size);
  margin: calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
  border: 1.5px solid var(--cursor-color);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition:
    translate var(--cursor-lag) var(--ease-out),
    scale 0.3s var(--ease-out),
    opacity 0.3s ease,
    border-color 0.3s ease,
    background-color 0.2s ease;
}

.cursor-dot.is-visible {
  opacity: 1;
}

.cursor-dot.is-hovering {
  background: var(--cursor-color);
}

.has-cursor-dot,
.has-cursor-dot * {
  cursor: none !important;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.button--primary {
  background: var(--tmc-white);
  color: var(--tmc-blue);
  font-weight: 800;
}

.button--secondary {
  border-color: var(--tmc-white);
  color: var(--tmc-white);
}

@media (prefers-reduced-motion: no-preference) {
  .button--primary {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .button--secondary {
    transition: background-color 0.35s ease, color 0.35s ease;
  }
}

/* Hover effects only where there is a real hover: on touch screens a tap
   would leave them stuck on after the finger lifts */
@media (hover: hover) {
  .button--primary:hover {
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);
  }

  .button--secondary:hover {
    background: var(--tmc-white);
    color: var(--tmc-blue);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button--primary:hover {
    transform: translateY(-2px);
  }
}

/* ---------- Header ----------
   Sticky. Once the page scrolls, JS adds .is-compact and the bar slims
   down. Below 1024px the links move into a panel under the bar.
   scroll-padding keeps anchor targets clear of the compact bar.
   Colours come from --header-* so a section can switch the bar's theme:
   give it data-header-theme="…" and JS sets the same value on the
   header while that section is under the bar. */

.site-header {
  --pad-compact: clamp(12px, 1.4vw, 18px);
  --logo-compact: clamp(32px, 3vw, 44px);
  --header-bg: var(--tmc-blue);
  --header-fg: var(--tmc-white);
  --header-accent: var(--tmc-light-blue);
  --header-rule: var(--tmc-blue-80);
  /* Cursor follows the bar: light blue on blue, dark red on salmon */
  --cursor-color: var(--header-accent);

  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding: var(--header-pad) var(--margin);
  background: var(--header-bg);
  color: var(--header-fg);
}

/* Over section 3 (red): light red bar, red text, red CTA with light red
   text. Red family only. */
.site-header[data-theme="light-red"] {
  --header-bg: var(--tmc-light-red);
  --header-fg: var(--tmc-red);
  --header-accent: var(--tmc-red);
  --header-rule: color-mix(in srgb, var(--tmc-red) 20%, var(--tmc-light-red));
}

.site-header .button--primary {
  color: var(--header-bg);
}

.site-header[data-theme="light-red"] .button--primary {
  background: var(--tmc-red);
  color: var(--tmc-light-red);
}

/* Compact bar height: padding plus the taller of logo and CTA button (46px) */
html {
  scroll-padding-top: calc(2 * clamp(12px, 1.4vw, 18px) + max(clamp(32px, 3vw, 44px), 46px));
}

.site-header.is-compact {
  padding-block: var(--pad-compact);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);
}

.site-header.is-compact .logo {
  height: var(--logo-compact);
}

.site-header__home {
  display: block;
  color: inherit;
}

.logo {
  display: block;
  height: var(--logo-h);
  width: auto;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  list-style: none;
}

/* Underline is a line under the link that draws in from the left on
   hover and leaves to the right. The active section keeps it. */
.site-nav__menu a:not(.button) {
  --line-gap: -6px;

  position: relative;
  color: var(--header-fg);
  font-size: 16px;
  text-decoration: none;
}

.site-nav__menu a:not(.button)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--line-gap);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
}

.site-nav__menu a:not(.button):focus-visible::after,
.site-nav__menu a[aria-current]::after {
  transform: none;
  transform-origin: left;
}

/* Real hover only: after a tap the underline would stay on */
@media (hover: hover) {
  .site-nav__menu a:not(.button):hover::after {
    transform: none;
    transform-origin: left;
  }
}

/* The section currently in view */
.site-nav__menu a[aria-current] {
  color: var(--header-accent);
}

/* Hamburger: three CSS lines that fold into a cross when open */
.site-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--header-fg);
  cursor: pointer;
}

.site-nav__toggle-icon,
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
}

.site-nav__toggle-icon {
  position: relative;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.site-nav__toggle-icon::before { top: -8px; }
.site-nav__toggle-icon::after  { top: 8px; }

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
  background: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before {
  transform: translateY(8px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 1023px) {
  .js .site-nav__toggle {
    display: grid;
    place-items: center;
    margin-right: -9px; /* line the icon up with the page margin */
  }

  /* Panel fills the rest of the screen under the bar */
  .js .site-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    visibility: hidden;
    opacity: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: calc(100svh - 100%);
    overflow-y: auto;
    padding: 8px var(--margin) 40px;
    background: var(--header-bg);
  }

  /* Hidden with visibility, not display, so closing can animate too */
  .js .site-nav__menu.is-open {
    visibility: visible;
    opacity: 1;
  }

  .js .site-nav__menu li {
    border-bottom: 1px solid var(--header-rule);
  }

  .js .site-nav__menu li:last-child {
    margin-top: auto;
    padding-top: 32px;
    border-bottom: 0;
  }

  .js .site-nav__menu a:not(.button) {
    --line-gap: 14px;

    display: block;
    width: fit-content;
    padding: 18px 0;
    font-size: clamp(24px, 5vw, 32px);
  }

  .js .site-nav__menu .button {
    display: block;
    text-align: center;
    padding-block: 16px;
    font-size: 17px;
  }

  /* No page scrolling behind the open panel */
  html.menu-open {
    overflow: hidden;
  }

  /* Without JS the links simply wrap under the logo */
  html:not(.js) .site-header {
    position: relative;
    flex-wrap: wrap;
  }

  html:not(.js) .site-nav__menu {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header,
  .logo {
    transition:
      padding 0.3s var(--ease-out),
      height 0.3s var(--ease-out),
      box-shadow 0.3s var(--ease-out),
      background-color 0.4s ease,
      color 0.4s ease;
  }

  .site-nav__menu a:not(.button),
  .site-nav__toggle {
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .site-nav__menu a:not(.button)::after {
    transition: transform 0.4s var(--ease-out);
  }

  .site-nav__toggle-icon,
  .site-nav__toggle-icon::before,
  .site-nav__toggle-icon::after {
    transition: transform 0.3s var(--ease-out), background-color 0.2s ease;
  }

  /* Opening: panel fades in, links rise in one by one.
     Closing plays the same motion backwards: links drop out last-first,
     then the panel fades and only then becomes hidden. */
  @media (max-width: 1023px) {
    .js .site-nav__menu {
      --menu-step: 0.04s;
      transition:
        opacity 0.35s var(--ease-out) calc(4 * var(--menu-step)),
        visibility 0s linear calc(4 * var(--menu-step) + 0.35s);
    }

    .js .site-nav__menu.is-open {
      transition: opacity 0.35s var(--ease-out), visibility 0s;
    }

    .js .site-nav__menu li {
      --i: 0;
      opacity: 0;
      transform: translateY(12px);
      transition:
        opacity 0.4s var(--ease-out) calc((4 - var(--i)) * var(--menu-step)),
        transform 0.4s var(--ease-out) calc((4 - var(--i)) * var(--menu-step));
    }

    .js .site-nav__menu.is-open li {
      opacity: 1;
      transform: none;
      transition-duration: 0.5s;
      transition-delay: calc(var(--i) * var(--menu-step));
    }

    .js .site-nav__menu li:nth-child(2) { --i: 1; }
    .js .site-nav__menu li:nth-child(3) { --i: 2; }
    .js .site-nav__menu li:nth-child(4) { --i: 3; }
    .js .site-nav__menu li:nth-child(5) { --i: 4; }
  }
}

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

.hero {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  min-height: calc(100svh - 2 * var(--header-pad) - var(--logo-h));
  padding: clamp(16px, 2vw, 32px) var(--margin) clamp(48px, 6vw, 96px);
  background: var(--tmc-blue);
  color: var(--tmc-white);
}

.hero__text {
  grid-column: 1 / span 3;
  /* Stop short of the composition to leave breathing room */
  padding-right: calc(var(--gutter) * 2);
}

.hero .eyebrow {
  color: var(--tmc-light-blue);
  margin-bottom: clamp(16px, 2vw, 28px);
}

.hero__title {
  font-weight: 800;
  font-size: clamp(40px, 4.3vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero__title-light {
  display: block;
  font-weight: 200;
}

.hero__body {
  max-width: 46ch;
  margin-top: clamp(20px, 2vw, 32px);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: clamp(24px, 2.6vw, 40px);
}

/* ---------- Pillars: one Employeneurship composition ----------
   3 × 4 graphic grid. Three rectangles side by side form one block,
   two circles ("the dots") sit at opposite ends against it.

       col 1        col 2       col 3
   1   Innovation   Business    ●
   2   Innovation   Business    Funding
   3   Innovation   Business    Funding
   4   ●            Business    Funding

   10 rectangle cells, 2 rounded corners, both outer corners and away
   from the circles. No rounding where a rectangle meets a circle. */

.pillars {
  grid-column: 4 / span 3;
}

.pillars__grid {
  display: grid;
  /* Outer columns as a registered property, so the middle-pillar hover
     can animate it (grid tracks themselves don't transition everywhere) */
  grid-template-columns: var(--pillar-side) 1fr var(--pillar-side);
  grid-template-rows: repeat(4, 1fr);
  height: clamp(340px, calc((100svh - var(--header-h)) * 0.52), 580px);
  container-type: size;
  /* Circle diameter: one row high, never wider than a column */
  --dot: min(25cqh, 100cqw / 3);
  /* On hover a circle shrinks to this share of its size */
  --dot-hover: 0.6;
}

.pillars__list {
  grid-area: 1 / 1 / -1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  list-style: none;
}

.pillar {
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 1.6vw, 24px);
  color: var(--tmc-white);
}

.pillar--innovation {
  grid-area: 1 / 1 / 4 / 2;
  background: var(--tmc-blue-90);
  border-top-left-radius: var(--radius);
}

.pillar--business {
  grid-area: 1 / 2 / 5 / 3;
  background: var(--tmc-white);
  color: var(--tmc-blue);
}

.pillar--funding {
  grid-area: 2 / 3 / 5 / 4;
  background: var(--tmc-blue-80);
  border-bottom-right-radius: var(--radius);
}

.pillar__number {
  font-size: 14px;
  letter-spacing: 0.08em;
  margin-bottom: auto;
  padding-bottom: 16px;
}

.pillar__label {
  font-weight: 800;
  font-size: clamp(17px, 1.7vw, 26px);
  line-height: 1.1;
}

.pillar__question {
  margin-top: 6px;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.35;
}

.pillars__dot {
  display: block;
  width: min(var(--dot), 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tmc-light-blue);
}

.pillars__dot--start {
  grid-area: 4 / 1;
  place-self: start center;
}

.pillars__dot--end {
  grid-area: 1 / 3;
  place-self: end center;
}

.pillars__caption {
  margin-top: clamp(20px, 2vw, 28px);
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tmc-white);
}

.pillars__caption-rest {
  display: block;
  font-weight: 400;
  font-size: 0.7em;
  letter-spacing: 0;
  color: var(--tmc-light-blue);
}

/* Hover: outer pillars grow into their circle's cell, the circle shrinks
   by exactly that amount so the two keep touching. The middle pillar
   widens and the outer columns give way. */

@media (hover: hover) {
  .pillars__grid:has(.pillar--business:hover) {
    --pillar-side: 25%;
  }

  .pillar--innovation:hover {
    margin-bottom: calc(var(--dot) * (var(--dot-hover) - 1));
  }

  .pillar--funding:hover {
    margin-top: calc(var(--dot) * (var(--dot-hover) - 1));
  }

  .pillars__dot--start {
    transform-origin: bottom center;
  }

  .pillars__dot--end {
    transform-origin: top center;
  }

  .pillars__grid:has(.pillar--innovation:hover) .pillars__dot--start,
  .pillars__grid:has(.pillar--funding:hover) .pillars__dot--end {
    scale: var(--dot-hover);
  }
}

/* Stacked: text first, composition below */

@media (max-width: 899px) {
  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 56px;
    min-height: 0;
  }

  .hero__text,
  .pillars {
    grid-column: 1;
  }

  .hero__text {
    padding-right: 0;
  }

  .pillars__grid {
    height: auto;
    aspect-ratio: 1;
    max-height: 560px;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__text > * {
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero__text > :nth-child(2) { animation-delay: 0.06s; }
  .hero__text > :nth-child(3) { animation-delay: 0.12s; }
  .hero__text > :nth-child(4) { animation-delay: 0.18s; }

  .pillar {
    animation: grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    transform-origin: bottom;
  }
  .pillar--innovation { transform-origin: top; animation-delay: 0.2s; }
  .pillar--business { animation-delay: 0.3s; }
  .pillar--funding { animation-delay: 0.4s; }

  .pillars__dot {
    animation: pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both;
    transition: scale 0.5s cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  .pillars__grid {
    transition: --pillar-side 0.5s cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  .pillar--innovation,
  .pillar--funding {
    transition: margin 0.5s cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  @keyframes rise {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  @keyframes grow {
    from { transform: scaleY(0); }
    to   { transform: none; }
  }
  @keyframes pop {
    from { transform: scale(0); }
    to   { transform: none; }
  }
}

/* ---------- Questions (section 2) ----------
   White section after the blue hero. Intro on text columns 1–3,
   the numbered questions on 4–6, separated by thin blue-tint rules. */

.questions {
  --rule: color-mix(in srgb, var(--tmc-blue) 20%, var(--tmc-white));

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  align-content: center;
  /* Full screen, so the hand-off to the next section starts cleanly.
     min-height, not height: content never gets cut off. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: clamp(72px, 10vw, 160px) var(--margin);
  background: var(--tmc-white);
  color: var(--tmc-blue);
}

.questions__intro {
  grid-column: 1 / span 3;
  /* Same breathing room as the hero text */
  padding-right: calc(var(--gutter) * 2);
}

.questions .eyebrow {
  margin-bottom: clamp(16px, 2vw, 28px);
}

.questions__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 3.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* Ultralight is display-only; the title clamp never goes below 40px */
.questions__title-light {
  display: block;
  font-weight: 200;
}

.questions__body {
  max-width: 44ch;
  margin-top: clamp(20px, 2vw, 32px);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
}

.questions__list {
  grid-column: 4 / span 3;
  list-style: none;
  counter-reset: question;
  border-top: 1px solid var(--rule);
}

.questions__list li {
  counter-increment: question;
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 80px) 1fr;
  align-items: baseline;
  padding: clamp(18px, 1.8vw, 28px) 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
}

.questions__list li::before {
  content: counter(question, decimal-leading-zero);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
}

@media (max-width: 899px) {
  .questions {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .questions__intro,
  .questions__list {
    grid-column: 1;
  }

  .questions__intro {
    padding-right: 0;
  }
}

/* Stack reveal: the questions unfold downwards one by one, each
   dropping out from under the one above. Uses the shared reveal layer. */
.questions__list {
  --reveal-stagger: 0.14s;
  --reveal-distance: -24px;
}

@media (prefers-reduced-motion: no-preference) {
  /* Start the stack once the intro is mostly in */
  .js .questions__list > * {
    transition-delay: calc(0.25s + var(--reveal-index, 0) * var(--reveal-stagger));
  }
}

/* Hover: the question nudges left. Not a link, so no pointer,
   underline or weight change. */
.questions__text {
  display: inline-block;
}

@media (hover: hover) {
  .questions__list li:hover .questions__text {
    transform: translateX(-8px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .questions__text {
    transition: transform 0.35s var(--ease-out);
  }
}

/* ---------- Expertise (section 3) ----------
   Red section: the page's one step into the red family. Intro on text
   columns 1–3 (same breathing room as the hero), the aside on 4–6.
   Below, one Employeneurship composition: three rectangles stepping
   down like a staircase onto one shared baseline, with a light-red
   circle resting on the last. Kept compact so the tallest block
   fits on screen together with the intro.

       Innovation
       Innovation   Business      ●
       Innovation   Business   Funding
       Innovation   Business   Funding

   Light red · red 80% tint · white. 3 rectangle cells, 2 rounded corners
   (outer top-left, outer bottom-right). Funding's top edge meets the
   circle, so it stays square. */

.expertise {
  --tmc-red-80: color-mix(in srgb, var(--tmc-red) 80%, var(--tmc-white));
  --step: clamp(32px, 4vw, 72px);
  --cursor-color: var(--tmc-light-red);

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  align-items: end;
  padding: clamp(64px, 7vw, 120px) var(--margin);
  background: var(--tmc-red);
  color: var(--tmc-white);
}

.expertise__intro {
  grid-column: 1 / span 3;
  padding-right: calc(var(--gutter) * 2);
}

.expertise .eyebrow {
  margin-bottom: clamp(16px, 2vw, 28px);
  color: var(--tmc-light-red);
}

.expertise__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 3.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* Ultralight is display-only; the title clamp never goes below 40px */
.expertise__title-light {
  display: block;
  font-weight: 200;
  color: var(--tmc-light-red);
}

.expertise__aside {
  grid-column: 4 / span 3;
  max-width: 30ch;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.35;
  color: var(--tmc-light-red);
}

.expertise__composition {
  grid-column: 1 / -1;
  position: relative;
  margin-top: clamp(32px, 4vw, 64px);
}

.expertise__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  list-style: none;
}

/* The staircase: each perspective starts one step lower, all end level */
.perspective--business { margin-top: var(--step); }
.perspective--funding  { margin-top: calc(var(--step) * 2); }

.expertise__dot {
  position: absolute;
  top: 0;
  /* Centred on the Funding column, resting on its top edge */
  right: calc(100% / 6 - var(--step));
  width: calc(var(--step) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tmc-light-red);
}

.perspective {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 32px);
}

/* --panel-bg / --panel-fg: each block's own pair, so the action link
   can invert into it on hover */
.perspective {
  background: var(--panel-bg);
  color: var(--panel-fg);
}

.perspective--innovation {
  --panel-bg: var(--tmc-light-red);
  --panel-fg: var(--tmc-red);
  --cursor-color: var(--tmc-red);
  border-top-left-radius: var(--radius);
}

.perspective--business {
  --panel-bg: var(--tmc-red-80);
  --panel-fg: var(--tmc-white);
}

.perspective--funding {
  --panel-bg: var(--tmc-white);
  --panel-fg: var(--tmc-red);
  --cursor-color: var(--tmc-red);
  border-bottom-right-radius: var(--radius);
}

.perspective__number {
  margin-bottom: clamp(16px, 1.8vw, 28px);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.perspective__area {
  font-weight: 400;
}

.perspective__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.perspective__question {
  margin-top: 4px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.35;
}

.perspective__body {
  margin-top: clamp(12px, 1.2vw, 16px);
  font-size: 15px;
  line-height: 1.5;
}

.perspective__services {
  margin-top: clamp(14px, 1.4vw, 20px);
  /* Pushes the link to the bottom so the three line up */
  margin-bottom: auto;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.perspective__services li {
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  font-size: 15px;
  line-height: 1.4;
}

/* Action: an outlined bar across the block with the arrow in a circle.
   On hover the colour floods in from the left, the text and arrow
   circle invert, then the arrow circle pulses once. */
.perspective__link {
  --cursor-color: var(--panel-bg);

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(18px, 1.8vw, 28px);
  padding: 10px 10px 10px 18px;
  overflow: hidden;
  border: 1.5px solid var(--panel-fg);
  border-radius: var(--radius-button);
  color: var(--panel-fg);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none;
}

.perspective__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--panel-fg);
  transform: scaleX(0);
  transform-origin: left;
}

.perspective__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--panel-fg);
  color: var(--panel-bg);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}

.perspective__link:focus-visible {
  color: var(--panel-bg);
}

.perspective__link:focus-visible::before {
  transform: none;
}

.perspective__link:focus-visible .perspective__arrow {
  background: var(--panel-bg);
  color: var(--panel-fg);
}

/* Same as focus, but only with a real hover (not stuck on after a tap) */
@media (hover: hover) {
  .perspective__link:hover {
    color: var(--panel-bg);
  }

  .perspective__link:hover::before {
    transform: none;
  }

  .perspective__link:hover .perspective__arrow {
    background: var(--panel-bg);
    color: var(--panel-fg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hover: the fill eases in and out over --link-fill */
  .perspective__link {
    --link-fill: 0.5s;
    --link-ease: cubic-bezier(0.65, 0, 0.35, 1);
    transition: color var(--link-fill) var(--link-ease);
  }

  .perspective__link::before {
    transition: transform var(--link-fill) var(--link-ease);
  }

  .perspective__arrow {
    transition:
      background-color var(--link-fill) var(--link-ease),
      color var(--link-fill) var(--link-ease);
  }

  /* Once the fill is complete the arrow circle swells and settles */
  .perspective__link:focus-visible .perspective__arrow {
    animation: arrow-pulse 0.5s var(--link-ease) var(--link-fill);
  }

  @media (hover: hover) {
    .perspective__link:hover .perspective__arrow {
      animation: arrow-pulse 0.5s var(--link-ease) var(--link-fill);
    }
  }

  @keyframes arrow-pulse {
    50% { scale: 1.2; }
  }

  /* Perspectives come in one after another, a beat slower than default;
     the circle lands once the staircase is built */
  .expertise__list {
    --reveal-stagger: 0.12s;
  }

  .js .expertise__dot {
    transition-delay: 0.45s;
  }
}

@media (max-width: 899px) {
  .expertise {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .expertise__intro,
  .expertise__aside,
  .expertise__composition {
    grid-column: 1;
  }

  .expertise__intro {
    padding-right: 0;
  }

  /* Stacked: no staircase. The circle floats free above the first block,
     since it shares Innovation's colour and would merge into it. */
  .expertise__composition {
    margin-top: 0;
    padding-top: 112px;
  }

  .expertise__list {
    grid-template-columns: 1fr;
  }

  .perspective--business,
  .perspective--funding {
    margin-top: 0;
  }

  .expertise__dot {
    right: 0;
    width: 88px;
  }
}

/* ---------- Proof (section 4) ----------
   Light red (salmon) section after the dark red of section 3: same red
   family, so the two read as one chapter. Red text on light red; on the
   red blocks white numbers and light red labels (DESIGN.md pairs).
   The four results on columns 1–3 as one Employeneurship composition,
   the intro on 4–6:

       50%             50%
   1   4×              ●
   2   €2–3M  (60%)        €10M (40%)
   3   Incubation → Series B

   Red · white · red 80% tint · red. 4 rectangles, 2 rounded corners
   (outer top-left, outer bottom-right). The circle sits directly against
   4× and on top of €10M, so neither rounds a corner there. */

.proof {
  --tmc-red-80: color-mix(in srgb, var(--tmc-red) 80%, var(--tmc-white));
  --cursor-color: var(--tmc-red);

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  align-content: center;
  /* Full screen, like section 2. min-height, so content never gets cut off */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: clamp(64px, 7vw, 120px) var(--margin);
  background: var(--tmc-light-red);
  color: var(--tmc-red);
}

.proof__intro {
  grid-column: 4 / span 3;
  grid-row: 1;
  /* Same breathing room as the hero text, on the composition side */
  padding-left: calc(var(--gutter) * 2);
}

.proof .eyebrow {
  margin: 0 0 clamp(16px, 2vw, 28px);
  font-weight: 400;
}

.proof__lead {
  font-weight: 800;
  font-size: clamp(32px, 3vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.proof__clients {
  max-width: 44ch;
  margin-top: clamp(20px, 2vw, 32px);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
}

.proof__composition {
  --proof-h: clamp(360px, calc((100svh - var(--header-h)) * 0.58), 560px);
  /* Circle diameter: one row high, never wider than a column */
  --proof-dot: min(50cqw, var(--proof-h) / 3);

  grid-column: 1 / span 3;
  grid-row: 1;
  position: relative;
  container-type: inline-size;
}

.proof__results {
  display: grid;
  /* Tenths, so 4× can take half and €2–3M a bit more than half.
     minmax(0, …): long numbers must not push the columns apart */
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  height: var(--proof-h);
  list-style: none;
}

.result {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(14px, 1.6vw, 24px);
}

.result__number {
  font-weight: 800;
  /* Sized by the composition, so €2–3M fits its block */
  font-size: clamp(26px, 8cqw, 72px);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.03em;
}

.result__label {
  margin-top: 8px;
  max-width: 22ch;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.35;
}

.result--portfolio {
  grid-area: 1 / 1 / 2 / 6;
  background: var(--tmc-red);
  border-top-left-radius: var(--radius);
}

.result--grants {
  grid-area: 2 / 1 / 3 / 7;
  background: var(--tmc-white);
}

.result--eic {
  grid-area: 2 / 7 / 3 / 11;
  background: var(--tmc-red-80);
}

.result--journey {
  grid-area: 3 / 1 / 4 / 11;
  background: var(--tmc-red);
  border-bottom-right-radius: var(--radius);
}

/* On the red blocks: white numbers, light red labels (on the lighter
   80% tint the label stays white, like section 3) */
.result--portfolio,
.result--eic,
.result--journey {
  --cursor-color: var(--tmc-light-red);
  color: var(--tmc-white);
}

.result--portfolio .result__label,
.result--journey .result__label {
  color: var(--tmc-light-red);
}

.result--journey .result__number {
  font-size: clamp(24px, 6.4cqw, 52px);
}

/* Circle: right half of row 1, directly against 4× and resting on row 2 */
.proof__dot {
  position: absolute;
  top: calc(var(--proof-h) / 3 - var(--proof-dot));
  left: 50%;
  width: var(--proof-dot);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tmc-white);
}

@media (prefers-reduced-motion: no-preference) {
  .proof__results {
    --reveal-stagger: 0.12s;
  }

  .js .proof__dot {
    transition-delay: 0.5s;
  }
}

@media (max-width: 899px) {
  .proof {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .proof__intro,
  .proof__composition {
    grid-column: 1;
  }

  .proof__intro {
    grid-row: auto;
    padding-left: 0;
  }

  .proof__composition {
    grid-row: auto;
  }

  .proof__results {
    height: auto;
    aspect-ratio: 1;
    max-height: 520px;
  }

  .proof__dot {
    top: 0;
    width: calc(100% / 3);
  }
}

/* ---------- Why Sentinel (section 5) ----------
   Back to TMC Blue after the red chapter: white text, light blue accents
   (blue family only). The header keeps its default blue bar here, so no
   data-header-theme. Kept calm on purpose: intro on text columns 1–3
   (same width as the hero), the three sources on 4–6 as a plain list
   between thin rules, and one small Employeneurship accent under it:

   [ Technical depth. Strategic perspective. ] ●

   Light blue rectangle with a white circle directly against its right
   edge. 1 rectangle, 1 rounded corner (outer top-left); the corners
   against the circle stay square. Part of TMC follows under a rule. */

.why {
  --cursor-color: var(--tmc-light-blue);
  --rule: var(--tmc-blue-80);
  --why-dot: clamp(64px, 6vw, 88px);
  --why-runway: 10vh;
  --parallax-out-distance: 10vh;

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  /* Extra runway under the content: the next section arrives later, so
     you scroll "too far" past Why Sentinel before Contact comes over it */
  padding: clamp(48px, 4.2vw, 80px) var(--margin) calc(clamp(48px, 4.2vw, 80px) + var(--why-runway));
  background: var(--tmc-blue);
  color: var(--tmc-white);
}

.why__content {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}

.why__intro {
  grid-column: 1 / span 3;
  padding-right: calc(var(--gutter) * 2);
}

.why .eyebrow {
  margin-bottom: clamp(16px, 2vw, 28px);
  color: var(--tmc-light-blue);
}

.why__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 3.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* Ultralight is display-only; the title clamp never goes below 40px */
.why__title-light {
  display: block;
  font-weight: 200;
  color: var(--tmc-light-blue);
}

.why__body {
  max-width: 46ch;
  margin-top: clamp(20px, 2vw, 32px);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
}

.why__evidence {
  grid-column: 4 / span 3;
}

.why__sources {
  list-style: none;
  border-top: 1px solid var(--rule);
}

.source {
  padding: clamp(12px, 1.1vw, 16px) 0;
  border-bottom: 1px solid var(--rule);
}

.source__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.source__body {
  margin-top: 4px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.45;
  color: var(--tmc-light-blue);
}

.why__summary {
  display: grid;
  grid-template-columns: 1fr var(--why-dot);
  align-items: end;
  margin-top: clamp(20px, 2vw, 28px);
}

.why__panel {
  min-height: var(--why-dot);
  padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.8vw, 24px);
  background: var(--tmc-light-blue);
  color: var(--tmc-blue);
  --cursor-color: var(--tmc-blue);
  border-top-left-radius: var(--radius);
  font-size: 15px;
  line-height: 1.4;
}

.why__panel-title {
  display: block;
  margin-bottom: 4px;
  font-weight: 800;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.2;
}

/* Circle: directly against the panel's right edge, on its baseline */
.why__dot {
  width: var(--why-dot);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tmc-white);
}

@media (prefers-reduced-motion: no-preference) {
  .js .why__dot {
    transition-delay: 0.3s;
  }
}

/* ---------- Part of TMC ---------- */

.why__tmc {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  margin-top: clamp(36px, 3.6vw, 60px);
  padding-top: clamp(24px, 2.4vw, 36px);
  border-top: 1px solid var(--tmc-blue-80);
}

.why__tmc-intro {
  grid-column: 1 / span 3;
  padding-right: calc(var(--gutter) * 2);
}

.why__tmc .eyebrow {
  margin-bottom: clamp(12px, 1.4vw, 20px);
}

.why__tmc-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.why__tmc-text {
  grid-column: 4 / span 3;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
}

.why__tmc-figure {
  margin-top: 12px;
  color: var(--tmc-light-blue);
}

.why__tmc-figure strong {
  font-weight: 800;
  color: var(--tmc-white);
}

/* Link: outlined bar with the arrow in a circle, as in section 3.
   On hover white floods in from the left and the text turns blue. */
.why__link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(18px, 1.8vw, 24px);
  padding: 10px 10px 10px 18px;
  overflow: hidden;
  border: 1.5px solid var(--tmc-white);
  border-radius: var(--radius-button);
  color: var(--tmc-white);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none;
  --cursor-color: var(--tmc-light-blue);
}

.why__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tmc-white);
  transform: scaleX(0);
  transform-origin: left;
}

.why__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tmc-white);
  color: var(--tmc-blue);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}

.why__link:focus-visible {
  color: var(--tmc-blue);
}

.why__link:focus-visible::before {
  transform: none;
}

.why__link:focus-visible .why__arrow {
  background: var(--tmc-blue);
  color: var(--tmc-white);
}

/* Same as focus, but only with a real hover (not stuck on after a tap) */
@media (hover: hover) {
  .why__link:hover {
    color: var(--tmc-blue);
  }

  .why__link:hover::before {
    transform: none;
  }

  .why__link:hover .why__arrow {
    background: var(--tmc-blue);
    color: var(--tmc-white);
  }
}

/* Same motion as the action links in section 3: the fill eases in over
   --link-fill; once it is complete the arrow circle swells once and
   settles (arrow-pulse, defined with those links). */
@media (prefers-reduced-motion: no-preference) {
  .why__link {
    --link-fill: 0.5s;
    --link-ease: cubic-bezier(0.65, 0, 0.35, 1);
    transition: color var(--link-fill) var(--link-ease);
  }

  .why__link::before {
    transition: transform var(--link-fill) var(--link-ease);
  }

  .why__arrow {
    transition:
      background-color var(--link-fill) var(--link-ease),
      color var(--link-fill) var(--link-ease);
  }

  .why__link:focus-visible .why__arrow {
    animation: arrow-pulse 0.5s var(--link-ease) var(--link-fill);
  }

  @media (hover: hover) {
    .why__link:hover .why__arrow {
      animation: arrow-pulse 0.5s var(--link-ease) var(--link-fill);
    }
  }
}

@media (max-width: 899px) {
  .why {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .why__content {
    row-gap: 48px;
  }

  .why__intro,
  .why__evidence,
  .why__tmc,
  .why__tmc-intro,
  .why__tmc-text {
    grid-column: 1;
  }

  .why__intro,
  .why__tmc-intro {
    padding-right: 0;
  }

  .why__tmc {
    grid-template-columns: 1fr;
    row-gap: 20px;
    margin-top: 0;
  }

  .why__link {
    display: flex;
    justify-content: space-between;
  }
}

/* ---------- FAQ (between Why Sentinel and Contact) ----------
   White: a calm break between the blue Why section and light blue
   Contact. Blue family only, blue text (DESIGN.md pair). From 1024px the
   photo sits on columns 1–3, masked into brand shapes; intro above the
   questions on 4–6. Below that the photo is hidden and everything stacks.
   Questions are native <details>, one open at a time (name="faq"). The
   toggle is an outlined blue circle that fills when its answer is open;
   its plus folds into a minus.

   Photo mask: one image shown through three shapes on a 2 × 2 grid,
   each shape showing its own part of the same picture:

       ┌──────┬──────┐
       │ tall │ top  │   2 rounded corners (outer top-left, outer
       │      ├──────┤   top-right) on 4 occupied cells. The circle
       │      │  ●   │   sits against both rectangles, so those
       └──────┴──────┘   sides stay square. */

.faq {
  --rule: color-mix(in srgb, var(--tmc-blue) 20%, var(--tmc-white));
  --faq-toggle: clamp(32px, 2.6vw, 40px);
  --cursor-color: var(--tmc-blue);

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: clamp(64px, 7vw, 120px) var(--margin);
  background: var(--tmc-white);
  color: var(--tmc-blue);
}

.faq__intro {
  grid-column: 4 / -1;
  align-self: end;
  margin-bottom: clamp(32px, 3vw, 56px);
}

.faq__visual {
  /* Square: as wide as the columns allow, never taller than the screen */
  --size: min(100%, calc(100svh - var(--header-h) - 2 * clamp(64px, 7vw, 120px)));
  /* The photo's crop: the person centred in the tall rectangle */
  --img-x: -64.5cqi;

  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: var(--size);
  aspect-ratio: 1;
  container-type: inline-size;
}

/* Every shape shows the same photo at the size of the whole square,
   shifted back by the shape's own position (--x, --y), so the three
   pieces line up into one picture. */
.faq__shape {
  --x: 0cqi;
  --y: 0cqi;

  background: url('../assets/img/FAQ-img-2000.jpg') no-repeat;
  background-size: auto 100cqi;
  background-position: calc(var(--img-x) - var(--x)) calc(-1 * var(--y));
}

.faq__shape--tall {
  grid-column: 1;
  grid-row: 1 / span 2;
  border-top-left-radius: var(--radius);
}

.faq__shape--top {
  --x: 50cqi;

  grid-column: 2;
  grid-row: 1;
  border-top-right-radius: var(--radius);
}

.faq__shape--dot {
  --x: 50cqi;
  --y: 50cqi;

  grid-column: 2;
  grid-row: 2;
  border-radius: 50%;
}

.faq .eyebrow {
  margin-bottom: clamp(16px, 2vw, 28px);
}

.faq__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 3.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* Ultralight is display-only; the title clamp never goes below 40px */
.faq__title-light {
  display: block;
  font-weight: 200;
}

.faq__list {
  grid-column: 4 / -1;
  align-self: start;
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding: clamp(18px, 1.8vw, 28px) 0;
  font-weight: 800;
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}

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

.faq__question:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.faq__toggle {
  position: relative;
  flex: none;
  width: var(--faq-toggle);
  height: var(--faq-toggle);
  border: 1px solid var(--tmc-blue);
  border-radius: 50%;
  color: var(--tmc-blue);
}

.faq__toggle::before,
.faq__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36%;
  height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
}

.faq__toggle::after {
  rotate: 90deg;
}

.faq__item[open] .faq__toggle {
  background: var(--tmc-blue);
  color: var(--tmc-white);
}

.faq__item[open] .faq__toggle::after {
  rotate: 0deg;
}

.faq__answer {
  max-width: 52ch;
  padding: 0 calc(var(--faq-toggle) + var(--gutter)) clamp(20px, 2vw, 32px) 0;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.55;
}

@media (prefers-reduced-motion: no-preference) {
  /* Fill and plus → minus take as long as the answer takes to slide
     open (0.5s), so the circle doesn't snap ahead of the content */
  .faq__toggle,
  .faq__toggle::after {
    transition:
      background-color 0.6s var(--ease-out),
      color 0.6s var(--ease-out),
      rotate 0.6s var(--ease-out);
  }

  /* Real hover only: after a tap on a touch screen the filled circle
     would stay on and read as "open" */
  @media (hover: hover) {
    .faq__question:hover .faq__toggle {
      background: var(--tmc-blue);
      color: var(--tmc-white);
    }
  }

  /* The answer slides open where the browser can animate to auto height */
  @supports (interpolate-size: allow-keywords) {
    .faq__item {
      interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
      height: 0;
      overflow: clip;
      transition:
        height 0.5s var(--ease-out),
        content-visibility 0.5s allow-discrete;
    }

    .faq__item[open]::details-content {
      height: auto;
    }
  }
}

/* Tablet and phone: no photo, intro above the questions */
@media (max-width: 1023px) {
  .faq {
    align-content: center;
  }

  .faq__visual {
    display: none;
  }

  .faq__intro,
  .faq__list {
    grid-column: 1 / -1;
  }
}

/* ---------- Contact (section 6) ----------
   Light blue: same family as the blue sections around it, blue text
   (DESIGN.md pair). No form: one general address and two people with
   their phone numbers. Intro on text columns 1–3 (same width as the
   hero), the composition on 4–6:

       sentinel@tmceurope.com  →
       Jesséy        Adonis        ●

   White · blue · blue 80% tint · blue circle. 3 rectangles,
   2 rounded corners (outer top-left, outer bottom-left). Adonis sits
   directly against the circle, so that side stays square.
   White text on the blue blocks. */

.contact {
  --tmc-blue-80: color-mix(in srgb, var(--tmc-blue) 80%, var(--tmc-white));
  --cursor-color: var(--tmc-blue);

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  /* Full screen, like the questions section. min-height, not height:
     content never gets cut off. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: clamp(64px, 7vw, 120px) var(--margin);
  background: var(--tmc-light-blue);
  color: var(--tmc-blue);
}

.contact__intro {
  grid-column: 1 / span 3;
  /* Same breathing room as the hero text */
  padding-right: calc(var(--gutter) * 2);
}

.contact .eyebrow {
  margin-bottom: clamp(16px, 2vw, 28px);
}

.contact__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 3.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* Ultralight is display-only; the title clamp never goes below 40px */
.contact__title-light {
  display: block;
  font-weight: 200;
}

.contact__body {
  max-width: 46ch;
  margin-top: clamp(20px, 2vw, 32px);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
}

.contact__social {
  display: inline-block;
  margin-top: clamp(20px, 2vw, 32px);
  color: inherit;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  .contact__social:hover {
    text-decoration-thickness: 2px;
  }
}

.contact__composition {
  grid-column: 4 / span 3;
  display: grid;
  grid-template-columns: 2fr 1fr;
  container-type: inline-size;
}

.contact__email {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: calc(100cqw / 3);
  padding: clamp(18px, 2vw, 28px);
  border-top-left-radius: var(--radius);
  background: var(--tmc-white);
  color: var(--tmc-blue);
  text-decoration: none;
}

.contact__email-address {
  font-weight: 800;
  /* Sized by the composition, so the address always fits on one line */
  font-size: clamp(18px, 6.2cqw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.contact__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(36px, 3vw, 48px);
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 18px;
}

@media (hover: hover) {
  .contact__email:hover .contact__arrow {
    background: var(--tmc-blue);
    color: var(--tmc-white);
  }
}

.contact__people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
}

.person {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.6vw, 24px);
  font-size: 15px;
  line-height: 1.35;
}

.person--jessey,
.person--adonis {
  --cursor-color: var(--tmc-white);
  --panel-fg: var(--tmc-white);
  color: var(--tmc-white);
}

.person--jessey {
  --panel-bg: var(--tmc-blue);
  background: var(--tmc-blue);
  border-bottom-left-radius: var(--radius);
}

.person--adonis {
  --panel-bg: var(--tmc-blue-80);
  background: var(--tmc-blue-80);
}

.person__name {
  font-weight: 800;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.15;
}

.person__role {
  margin-top: 6px;
}

.person__phone {
  margin-top: auto;
  padding-top: 20px;
  color: inherit;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

/* "Get in touch": the expertise action bar (.perspective__link, same
   hover flood and arrow pulse), scaled down to fit the narrow block */
.person__action {
  margin-top: 14px;
  padding: 6px 6px 6px 12px;
  gap: 8px;
  font-size: 14px;
  white-space: nowrap;
}

.person__action .perspective__arrow {
  width: 30px;
  font-size: 16px;
}

@media (hover: hover) {
  .person__phone:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* Circle: one column wide, directly against Adonis */
.contact__dot {
  --cursor-color: var(--tmc-white);
  align-self: end;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tmc-blue);
}

@media (prefers-reduced-motion: no-preference) {
  .contact__arrow {
    transition: background-color 0.35s ease, color 0.35s ease, translate 0.35s var(--ease-out);
  }

  @media (hover: hover) {
    .contact__email:hover .contact__arrow {
      translate: 4px 0;
    }
  }

  .js .contact__people > * {
    transition-delay: calc(0.15s + var(--reveal-index, 0) * 0.12s);
  }

  .js .contact__dot {
    transition-delay: 0.45s;
  }
}

/* Composition under the intro, still capped so the blocks keep their shape */
@media (max-width: 1099px) {
  .contact {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .contact__intro,
  .contact__composition {
    grid-column: 1;
  }

  .contact__intro {
    padding-right: 0;
  }

  .contact__composition {
    max-width: 720px;
  }

  /* Stacked, the address block only needs a low bar */
  .contact__email {
    min-height: calc(100cqw / 5);
  }
}

/* Phones: Jesséy on a full row, Adonis beside the circle */
@media (max-width: 599px) {
  /* The circle shares row 2 with the list and sits beside Adonis */
  .contact__people {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 1fr;
  }

  .person--jessey {
    border-bottom-left-radius: 0;
  }

  .person--adonis {
    width: calc(200% / 3);
    min-height: calc(100cqw / 3);
    border-bottom-left-radius: var(--radius);
  }

  .contact__dot {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ---------- Footer ----------
   The sign-off: TMC Blue, white logo lock-up, light blue accents (blue
   family only, DESIGN.md pairs). Brand on columns 1–3, links on 4,
   entity on 5–6. Under a rule, the pay-off in Ultralight with a small
   Employeneurship composition: a blue 80% tint rectangle with a light
   blue circle directly against its right edge. 1 rectangle, 1 rounded
   corner (outer top-left); the corners against the circle stay square. */

.site-footer {
  --cursor-color: var(--tmc-light-blue);
  --footer-dot: clamp(56px, 6.5vw, 104px);

  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(40px, 5vw, 72px);
  padding: clamp(64px, 7vw, 120px) var(--margin) clamp(32px, 3vw, 48px);
  background: var(--tmc-blue);
  color: var(--tmc-white);
  font-size: 16px;
  line-height: 1.5;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

@media (hover: hover) {
  .site-footer a:hover {
    color: var(--tmc-light-blue);
    text-decoration-color: currentColor;
  }
}

.site-footer__brand {
  grid-column: 1 / span 3;
}

.site-footer__home {
  display: inline-block;
}

.site-footer .site-footer__logo {
  height: clamp(56px, 5.6vw, 84px);
}

.site-footer__tagline {
  margin-top: clamp(16px, 1.6vw, 24px);
  color: var(--tmc-light-blue);
}

/* Privacy statement and cookie settings: small links under the tagline.
   "Cookie settings" is a button (it reopens the banner) styled as a link. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 8px;
  font-size: 0.875em;
}

.site-footer__cookies {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  cursor: pointer;
}

@media (hover: hover) {
  .site-footer__cookies:hover {
    color: var(--tmc-light-blue);
    text-decoration-color: currentColor;
  }
}

.site-footer__nav {
  grid-column: 4;
}

.site-footer__nav ul {
  display: grid;
  gap: 10px;
  list-style: none;
}

.site-footer__entity {
  grid-column: 5 / span 2;
  font-style: normal;
}

.site-footer__entity-name {
  display: block;
  font-weight: 800;
}

.site-footer__entity a {
  display: inline-block;
  margin-top: 10px;
}

.site-footer__signoff {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--tmc-blue-80);
}

/* Ultralight is display-only; the clamp never goes below 40px */
.site-footer__payoff {
  font-weight: 200;
  font-size: clamp(40px, 5.6vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.site-footer__shapes {
  display: flex;
  flex: 0 0 auto;
  width: calc((100% - 5 * var(--gutter)) / 3 + var(--gutter));
}

.site-footer__block {
  flex: 1;
  height: var(--footer-dot);
  background: var(--tmc-blue-80);
  border-top-left-radius: var(--radius);
}

.site-footer__dot {
  flex: 0 0 var(--footer-dot);
  height: var(--footer-dot);
  border-radius: 50%;
  background: var(--tmc-light-blue);
}

@media (prefers-reduced-motion: no-preference) {
  .site-footer a,
  .site-footer__cookies {
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
  }

  .js .site-footer__dot {
    transition-delay: 0.3s;
  }
}

@media (max-width: 899px) {
  .site-footer {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__brand,
  .site-footer__signoff {
    grid-column: 1 / -1;
  }

  .site-footer__nav {
    grid-column: 1;
  }

  .site-footer__entity {
    grid-column: 2;
  }

  .site-footer__signoff {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .site-footer__shapes {
    width: 100%;
  }
}

@media (max-width: 479px) {
  .site-footer__nav,
  .site-footer__entity {
    grid-column: 1 / -1;
  }
}

/* ---------- Cookie banner ----------
   Consent for Google Analytics, shown by js/script.js until a choice is
   saved and reopened by any [data-cookie-settings]. A compact TMC Blue
   panel, no overlay: bottom right on desktop, full width with a 16px
   margin on phones. White text, light blue accents (blue family only).
   .has-details shows the categories and the "Save choice" button. */

.cookie-banner {
  --cursor-color: var(--tmc-light-blue);

  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 50;
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--tmc-blue);
  color: var(--tmc-white);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.24);
  font-size: 15px;
  line-height: 1.5;
}

.cookie-banner[hidden],
.cookie-banner__details[hidden] {
  display: none;
}

@media (min-width: 600px) {
  .cookie-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: min(480px, calc(100vw - 48px));
    padding: 28px;
  }
}

.cookie-banner__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.cookie-banner__title:focus {
  outline: none;
}

.cookie-banner a {
  color: var(--tmc-light-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cookie-banner__details {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  border-top: 1px solid var(--tmc-blue-80);
}

.cookie-banner__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tmc-blue-80);
}

.cookie-banner__option-text {
  color: var(--tmc-light-blue);
  font-size: 14px;
}

.cookie-banner__option-text strong {
  display: block;
  color: var(--tmc-white);
  font-size: 15px;
  font-weight: 800;
}

/* Switch: a CSS-only track and knob on the checkbox itself.
   Off: blue tint track, white knob. On: light blue track, blue knob. */
.cookie-banner__switch {
  flex: 0 0 auto;
  appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  margin: 0;
  border-radius: 12px;
  background: var(--tmc-blue-80);
  cursor: pointer;
}

.cookie-banner__switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tmc-white);
}

.cookie-banner__switch:checked {
  background: var(--tmc-light-blue);
}

.cookie-banner__switch:checked::before {
  background: var(--tmc-blue);
  translate: 20px 0;
}

.cookie-banner__switch:disabled {
  opacity: 0.6;
  cursor: default;
}

.cookie-banner__switch:focus-visible {
  outline: 2px solid var(--tmc-white);
  outline-offset: 3px;
}

/* Decline and Accept side by side at the same size; Settings above them,
   Save choice below them across the width once the details are open */
.cookie-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.cookie-banner__actions .button {
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}

.cookie-banner__actions .button--secondary {
  background: transparent;
}

/* Same fill as the hero's secondary button (see Buttons); the transparent
   reset above would otherwise win over .button--secondary:hover.
   Keyboard focus gets the fill too. */
.cookie-banner__actions .button--secondary:focus-visible {
  outline-color: var(--tmc-white);
  background: var(--tmc-white);
  color: var(--tmc-blue);
}

@media (hover: hover) {
  .cookie-banner__actions .button--secondary:hover {
    background: var(--tmc-white);
    color: var(--tmc-blue);
  }
}

.cookie-banner__toggle {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--tmc-white);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* Chevron: two borders of a small square, turned to point down or up */
.cookie-banner__toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
}

.cookie-banner__toggle[aria-expanded="true"]::after {
  margin-top: 4px;
  rotate: 225deg;
}

.cookie-banner__save {
  grid-column: 1 / -1;
}

.cookie-banner:not(.has-details) .cookie-banner__save {
  display: none;
}

@media (hover: hover) {
  .cookie-banner__toggle:hover {
    color: var(--tmc-light-blue);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cookie-banner {
    transition: opacity 0.4s var(--ease-out), translate 0.4s var(--ease-out);
  }

  .cookie-banner:not(.is-visible) {
    opacity: 0;
    translate: 0 var(--reveal-distance);
  }

  .cookie-banner__switch::before {
    transition: translate 0.2s var(--ease-out), background-color 0.2s ease;
  }

  .cookie-banner__switch {
    transition: background-color 0.2s ease;
  }
}

/* ---------- Privacy page (privacy.html) ----------
   A plain reading page: blue bar with the logo, one text column on
   white, a blue footer. Blue on white throughout. */

.legal-header,
.legal-footer {
  --cursor-color: var(--tmc-light-blue);

  padding: var(--header-pad) var(--margin);
  background: var(--tmc-blue);
  color: var(--tmc-white);
}

.legal-header__home {
  display: inline-block;
  color: inherit;
}

.legal {
  max-width: 72ch;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--margin) clamp(64px, 7vw, 120px);
  box-sizing: content-box;
  font-size: 17px;
  line-height: 1.6;
}

/* Ultralight is display-only; the clamp never goes below 40px */
.legal h1 {
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.legal h2,
.legal h3,
.legal h4 {
  font-weight: 800;
  line-height: 1.25;
}

.legal h2 {
  margin: 2em 0 0.6em;
  padding-top: 1em;
  border-top: 1px solid color-mix(in srgb, var(--tmc-blue) 20%, var(--tmc-white));
  font-size: clamp(22px, 2vw, 28px);
}

.legal h3 {
  margin: 1.6em 0 0.4em;
  font-size: 19px;
}

.legal h4 {
  margin: 1.2em 0 0.3em;
  font-size: 17px;
}

.legal p,
.legal ul,
.legal ol,
.legal table {
  margin: 0 0 1em;
}

.legal ul,
.legal ol {
  padding-left: 1.25em;
}

.legal ol ol {
  margin: 0.3em 0 0;
}

.legal__address {
  margin-bottom: 1em;
  font-style: normal;
}

.legal li + li {
  margin-top: 0.3em;
}

.legal a {
  color: inherit;
  text-underline-offset: 4px;
}

.legal section {
  scroll-margin-top: 24px;
}

.legal__table-wrap {
  overflow-x: auto;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.legal th,
.legal td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tmc-blue) 20%, var(--tmc-white));
  text-align: left;
  vertical-align: top;
}

.legal th {
  font-weight: 800;
}

.legal td:first-child {
  white-space: nowrap;
}

/* The cookie settings button on white: blue fill, white text */
.legal .button--cookies {
  border: 0;
  background: var(--tmc-blue);
  color: var(--tmc-white);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px var(--gutter);
  font-size: 15px;
  line-height: 1.5;
}

.legal-footer a,
.legal-footer button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.legal-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

@media (hover: hover) {
  .legal-footer a:hover,
  .legal-footer button:hover {
    color: var(--tmc-light-blue);
  }
}

/* ---------- Tablet (600–1024px) ----------
   Tablet-only fixes, kept together so phones (below 600px) and desktop
   stay untouched. Portrait tablets up to 1024px wide (iPad Pro) get the
   stacked layout; landscape tablets keep the desktop layout. */

/* Results, stacked: the composition takes the full width at a fixed
   height, and the circle uses the desktop formula again, so it sits
   in row 1 against 4× and rests on €10M instead of overlapping it */
@media (min-width: 600px) and (max-width: 899px),
       (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  .proof__composition {
    --proof-h: clamp(380px, 52vw, 520px);
  }

  .proof__results {
    height: var(--proof-h);
    aspect-ratio: auto;
    max-height: none;
  }

  .proof__dot {
    top: calc(var(--proof-h) / 3 - var(--proof-dot));
    width: var(--proof-dot);
  }
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  /* Hero: text on top, the composition fills the rest of the first
     screen at full width, so the whole hero fits without scrolling */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: stretch;
    row-gap: clamp(40px, 5vw, 56px);
    min-height: calc(100svh - 2 * var(--header-pad) - var(--logo-h));
  }

  .hero__text,
  .pillars {
    grid-column: 1;
  }

  .hero__text {
    padding-right: 0;
  }

  .hero__title {
    font-size: clamp(40px, 6.4vw, 64px);
  }

  .pillars {
    display: flex;
    flex-direction: column;
  }

  .pillars__grid {
    flex: 1 1 auto;
    height: auto;
    min-height: 340px;
    aspect-ratio: auto;
    max-height: none;
  }
}

@media (min-width: 900px) and (max-width: 1024px) and (orientation: portrait) {
  .proof {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .proof__intro,
  .proof__composition {
    grid-column: 1;
    grid-row: auto;
  }

  .proof__intro {
    padding-left: 0;
  }

  /* Expertise: intro across the width (title on two lines, not four),
     the aside below it; the staircase stays */
  .expertise {
    row-gap: 24px;
  }

  .expertise__intro {
    grid-column: 1 / span 5;
    padding-right: 0;
  }

  .expertise__aside {
    grid-column: 1 / span 4;
  }
}

/* Expertise staircase at 900–1024px: three narrow blocks, so a tighter
   action bar keeps its label to two lines */
@media (min-width: 900px) and (max-width: 1024px) {
  .perspective__link {
    gap: 10px;
    padding: 8px 8px 8px 14px;
    font-size: 15px;
  }

  .perspective__arrow {
    width: 34px;
    font-size: 18px;
  }
}

/* ---------- Mobile (phones) ----------
   Phone-only fixes (≤599px), kept together so the tablet block above and
   desktop stay untouched. */

@media (max-width: 599px) {
  /* Hero: the two actions as equal full-width bars, one above the other,
     instead of two buttons of different widths */
  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .button {
    text-align: center;
  }
}