/* ===========================================================================
   Section styles, in page order. One block per section — find the section by
   its comment heading.
   =========================================================================== */

/* ---- header -------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.5rem var(--space-m);
  background: transparent;
  transition: background var(--transition), padding var(--transition);
}
/* JS adds .is-scrolled past 40px, mirroring the original's behaviour. */
.header.is-scrolled { background: var(--primary); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.header__logo { flex: none; width: 22rem; }
.header__logo img { width: 100%; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin: 0; padding: 0; list-style: none;
}
.nav__link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--text-m); font-weight: 400; color: var(--white);
  text-decoration: none !important;
}
.nav__link:hover { color: var(--tertiary); }
.nav__item--dropdown { position: relative; }
.nav__caret { width: 1.2rem; height: 1.2rem; transition: transform var(--transition); }
.nav__item--dropdown[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__submenu {
  position: absolute; top: 100%; left: 0; min-width: 24rem;
  margin: 1rem 0 0; padding: 1.2rem; list-style: none;
  background: var(--white); border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-0.6rem);
  transition: all var(--transition);
}
.nav__item--dropdown:hover .nav__submenu,
.nav__item--dropdown:focus-within .nav__submenu {
  opacity: 1; visibility: visible; transform: none;
}
.nav__submenu a { display: block; padding: 0.6rem 1rem; font-size: var(--text-m); color: var(--primary); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 5.6rem; height: 4.4rem; padding: 0.8rem;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 3px; margin: 7px 0; background: var(--white); transition: var(--transition); }

/* MOBILE THEME NOTE: the original's mobile header is WHITE with the colour
   logo and a dark hamburger, and its menu is a white offcanvas sliding in
   from the LEFT with dark links — not a blue panel. Don't re-theme this to
   the desktop blue. */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .header, .header.is-scrolled { background: var(--white); }
  .nav-toggle span { background: var(--primary); }
  .header__logo { width: 15rem; }
  .nav {
    position: fixed; inset: 0 auto 0 0; width: min(88vw, 36rem);
    margin: 0; padding: calc(var(--header-h) + 2rem) var(--space-m) var(--space-m);
    background: var(--white);
    box-shadow: 0 0 40px rgba(0, 0, 0, .15);
    transform: translateX(-100%); transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-s); }
  .nav__link { color: var(--primary); }
  .nav__submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding-left: 1.4rem; }
  .nav__submenu a { color: var(--primary); }
  /* the Doe mee pill moves into the panel: blue fill on white, as on the
     original's offcanvas (the white pill is a desktop-header-only style) */
  .header__cta { display: block; }
  .header__cta .btn { background: var(--primary); color: var(--white); }
}

/* ---- hero ----------------------------------------------------------------
   The text is anchored to the BOTTOM of the photo (flex-end + fixed bottom
   padding, measured 40px on the original). That anchor is what keeps the
   heading steady while the window resizes — don't change it to `center`,
   centred text drifts with every height change. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 66.1rem;
  padding: var(--header-h) var(--space-m) 4rem;
  background-color: var(--quinary);
  background-image: var(--hero-image);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 247px 50%;
  overflow: hidden;
}
.hero__inner { width: 100%; max-width: var(--container-narrow); margin-inline: auto; }
.hero__heading { max-width: 50rem; }
/* the lead is DIN Pro 600 on the original, not 400 */
.hero__lead { max-width: 50rem; margin-top: var(--space-s); color: var(--white); font-weight: 600; }
/* a link to #change-collective, hugging the right edge as on the original */
.hero__arc { position: absolute; right: var(--space-m); top: 46%; width: 20rem; height: 20rem; text-decoration: none !important; }

/* MOBILE (767px, the original's breakpoint): photo becomes a 550px cover — NO
   colour overlay (the original has none) — and the text centres horizontally.
   It stays bottom-anchored, same as desktop, so nothing jumps on resize. */
@media (max-width: 767px) {
  .hero {
    background-position: 45% center; background-size: cover;
    min-height: 55rem;
    padding-bottom: 6rem;
  }
  .hero__inner { text-align: center; }
  .hero__heading, .hero__lead { max-width: 100%; margin-inline: auto; }
}
/* the arc badge needs room; hide it before the layout gets tight */
@media (max-width: 900px) {
  .hero__arc { display: none; }
}

/* Arc title — the circular "CHANGE COLLECTIVE" badge in the hero.
   Each character is centred on the circle's midpoint, then rotated and pushed
   outwards by --arc-radius. JS reads --arc-radius, so the two stay in sync —
   change it here only. */
.arc { --arc-radius: 78px; position: relative; }
.arc__ring { position: absolute; inset: 0; }
.arc__ring span {
  position: absolute; top: 50%; left: 50%;
  transform-origin: center center;
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green);
}
/* the small dot in the middle of the badge, as on the original */
.arc::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 5.6rem; height: 5.6rem; margin: -2.8rem 0 0 -2.8rem;
  background: url("/assets/img/arc-dot.png") center / contain no-repeat;
}

/* ---- intro (two-tone heading + partner logo marquee) --------------------- */
.intro { background: var(--quinary); text-align: center; }
.intro__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-l);
  max-width: var(--container); margin-inline: auto;
}
/* 700px measured on the original — controls where the lines break. */
.intro__heading { font-size: var(--text-3xl); max-width: 70rem; }
.intro__heading span { color: var(--secondary); }
.intro__body { max-width: 62ch; }

/* The logo strip: a CSS-animated marquee. The track is duplicated in the
   template so the loop is seamless; JS only pauses it on hover. */
.marquee { width: 100%; max-width: 64.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 4rem; width: max-content; animation: marquee 45s linear infinite; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__item { flex: none; display: grid; place-items: center; height: 5rem; }
.marquee__item img { width: auto; max-height: 5rem; object-fit: contain; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- impact (stat carousel) ---------------------------------------------
   The original is not a normal carousel. Eight cards (the four stats, twice)
   are absolutely positioned 130px apart — far less than their 380px width —
   so they overlap into a fan. z-index descends left-to-right, so the leftmost
   card sits on top and the rest trail off to the right, spilling out of the
   container. Every card is opacity .85; only the background colour marks the
   active one. All numbers below are measured, not chosen.
   ---------------------------------------------------------------------- */
.impact { background: var(--white); overflow: hidden; }
.impact__inner {
  display: grid; grid-template-columns: 36rem minmax(0, 1fr);
  column-gap: 15.83rem; align-items: center;
  max-width: var(--container); margin-inline: auto;
}
@media (max-width: 1100px) {
  .impact__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-l); }
}

.stats { --stat-step: 130px; position: relative; height: 22rem; }
.stats__track { position: relative; height: 100%; }
.stat {
  position: absolute; top: 0; left: 0;
  width: 38rem; height: 22rem;
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 6rem;
  background: var(--green-card);
  /* the parallelogram, from the original's SVG clipPath (see base.html) */
  clip-path: url(#stat-card-shape);
  transition: background var(--transition);
  /* transform / z-index / opacity are set by initStats in site.js — the
     cards are pinned in place; only their text content rotates */
}
.stat.is-active { background: var(--green-stat); }
.stat__value, .stat__label { transition: opacity 0.28s ease; }
.stat--fade .stat__value, .stat--fade .stat__label { opacity: 0; }
.stat__value { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1; color: var(--primary); }
.stat__label { margin-top: 0.8rem; font-size: var(--text-s); font-weight: 700; color: var(--primary); }

@media (max-width: 700px) {
  .stats { --stat-step: 100px; height: 20rem; }
  .stat { width: 30rem; height: 20rem; padding: 3.4rem 4rem; }
}

/* ---- results ------------------------------------------------------------
   Deliberately asymmetric, as on the original: the first card is wide (896px)
   with the image beside the text, the second is narrow (356px) with the image
   stacked above it. Corner radius here is 40px, not the 32px used elsewhere.
   ---------------------------------------------------------------------- */
.results { background: var(--quinary); }
.results__grid {
  display: grid;
  grid-template-columns: minmax(0, 896fr) minmax(0, 356fr);
  gap: var(--space-m); margin-top: var(--space-xl);
}
@media (max-width: 1100px) { .results__grid { grid-template-columns: minmax(0, 1fr); } }

.result-card {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: 4rem; overflow: hidden;
}
/* the featured first card: image left, text right */
.result-card--wide { flex-direction: row; }
.result-card--wide .result-card__media { flex: 0 0 45%; aspect-ratio: auto; }
.result-card--wide .result-card__body { flex: 1; justify-content: center; }
@media (max-width: 1100px) {
  .result-card--wide { flex-direction: column; }
  .result-card--wide .result-card__media { flex: none; aspect-ratio: 16 / 9; }
}

.result-card__media { position: relative; aspect-ratio: 4 / 3; }
.result-card__media img { width: 100%; height: 100%; object-fit: cover; }
.result-card__badge {
  position: absolute; top: 2rem; left: 2rem;
  padding: 0.6rem 1.6rem; border-radius: var(--radius-full);
  background: var(--quaternary); color: var(--white);
  font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.result-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); padding: 2.8rem; }
.result-card__metric { font-size: var(--text-s); font-weight: 700; color: var(--green); }
.result-card__heading { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.1; text-transform: none; }
.result-card .btn { align-self: flex-start; margin-top: var(--space-2xs); }

/* ---- about / collective --------------------------------------------------
   STRUCTURE: these two look related but are built differently on the
   original. About is a single centred column (no image). Collective is the
   split: text + mini-columns + button on one side, phone mockup on the other,
   on the darker blue tint (quinary). */
.feature { background: var(--white); }
.feature--quinary { background: var(--quinary); }
.feature__solo { max-width: 84rem; margin-inline: auto; }
.feature__media img { border-radius: var(--radius-xl); }
.feature--flip .feature__media { order: -1; }
@media (max-width: 900px) { .feature--flip .feature__media { order: 0; } }

/* the Positioneer / Communiceer mini-columns */
.feature__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m); width: 100%;
}
.feature__cols h4 { margin-bottom: 0.4rem; }
.feature__cols p { margin: 0; }
@media (max-width: 700px) { .feature__cols { grid-template-columns: minmax(0, 1fr); } }

/* ---- benefits & news (stacking cards) ----------------------------------- */
.cards { background: var(--white); }
.cards__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 64rem;
  gap: var(--space-m); align-items: start;
  max-width: var(--container); margin-inline: auto;
}
@media (max-width: 1100px) { .cards__inner { grid-template-columns: minmax(0, 1fr); } }

/* The intro column sticks while the cards scroll past it. */
.cards__intro { position: sticky; top: calc(var(--header-h) + var(--space-l)); }
@media (max-width: 1100px) { .cards__intro { position: static; } }

.cards__list { display: grid; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.cards__item { position: sticky; top: var(--card-stick-top); }
@media (max-width: 900px) { .cards__item { position: static; } }

.card {
  display: flex; flex-direction: column; gap: 1.4rem;
  padding: 2.8rem;
  background: var(--green-card);
  border-radius: var(--radius-xl);
}
.card__icon { width: 4.8rem; height: 4.8rem; color: var(--green); }
.card__heading { font-size: var(--text-l); font-weight: 600; color: var(--text-body); text-transform: none; }
.card__heading a { color: inherit; }

/* news-specific additions on top of .card */
.card__meta {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary);
}
.card__meta .sep { opacity: .45; }
.card__badge { padding: 0.3rem 1rem; border-radius: var(--radius-full); background: var(--green); color: var(--white); }
.card__more { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--primary); }

/* ---- pricing ------------------------------------------------------------- */
.pricing { background: var(--tertiary); }
.pricing__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-l); max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
.price-card {
  width: 100%;
  padding: var(--space-l);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  text-align: left;
}
.price-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); flex-wrap: wrap; }
.price-card__tier,
.price-card__price { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1; color: var(--primary); text-transform: none; }
.price-card__note { margin-top: 0.6rem; font-size: var(--text-s); font-weight: 700; color: var(--quaternary); }
.price-card__rule { height: 1px; margin: var(--space-s) 0; background: var(--quaternary); border: 0; }
.price-card .btn { width: 100%; justify-content: center; margin-top: var(--space-s); }

/* ---- testimonial --------------------------------------------------------- */
.testimonial { background: var(--primary); color: var(--white); text-align: center; }
.testimonial__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); max-width: var(--container-narrow); margin-inline: auto; }
.testimonial__logo { width: 10rem; border-radius: var(--radius-s); }
/* DIN Pro 500 / 24px on the original */
.testimonial__quote { max-width: 62ch; margin: 0; font-size: var(--text-l); font-weight: 500; line-height: 1.4; }
.testimonial__avatar { width: 6.4rem; height: 6.4rem; border-radius: 50%; object-fit: cover; }
.testimonial__author { font-weight: 700; }
.testimonial__role { font-size: var(--text-s); opacity: .85; }

/* ---- signup form --------------------------------------------------------- */
.signup { background: var(--tertiary); }
.signup__inner { display: grid; gap: var(--space-l); max-width: var(--container-narrow); margin-inline: auto; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
.field { display: flex; flex-direction: column; gap: 0.6rem; }
.field--full, .form__foot { grid-column: 1 / -1; }
@media (max-width: 700px) { .form { grid-template-columns: minmax(0, 1fr); } }

.field label { font-size: var(--text-m); }
.field input {
  height: 4.2rem; padding: 0 1.2rem;
  font: inherit; font-size: var(--text-m);
  background: var(--white); color: var(--text-body);
  border: 1px solid var(--bg-body, #e6e6e6); border-radius: var(--radius-m);
}
.field input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.consent { display: flex; align-items: flex-start; gap: 1rem; grid-column: 1 / -1; }
.consent input { width: 1.8rem; height: 1.8rem; flex: none; margin-top: 0.4rem; }
.form__note { grid-column: 1 / -1; font-size: var(--text-s); color: var(--primary); }

/* ---- contact ----------------------------------------------------------------
   White section. STRUCTURE: no card, no shadow — a large rounded-square
   portrait next to a column of name / role / mail button, the whole group
   centred. (An earlier version wrongly boxed this in a white card.) */
.contact { background: var(--white); }
.contact__inner { display: grid; gap: var(--space-xl); max-width: var(--container-narrow); margin-inline: auto; }
.person {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2xl);
}
.person__photo {
  width: 20rem; height: 23rem;
  border-radius: 2.4rem;
  object-fit: cover; flex: none;
}
.person__info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.person__name {
  margin: 0;
  font-family: var(--font-body); font-weight: 700;
  font-size: 2.8rem; color: var(--primary); text-transform: none;
}
.person__role { margin: 0; font-size: var(--text-s); color: var(--primary); }
.person__info .btn { margin-top: var(--space-s); }
@media (max-width: 767px) {
  .person { flex-direction: column; gap: var(--space-s); text-align: center; }
  .person__info { align-items: center; }
}

/* ---- footer ----------------------------------------------------------------
   STRUCTURE, matching the original: two blocks side by side. Left: tagline,
   the link columns and the legal line. Right: a lighter-blue panel with the
   big SafeCare logo, whose left edge is cut at an angle by a skewed ::before
   (skewX(-15deg), 100px wide, pulled 80px left — the original's own numbers). */
.footer { position: relative; background: var(--primary); color: var(--white); overflow: hidden; }
.footer__inner {
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--space-m);
}
.footer__content {
  /* leave room for the logo panel overlaying the right side */
  max-width: 96rem;
  display: flex; flex-direction: column; gap: var(--space-l);
  padding-block: var(--space-2xl);
  position: relative; z-index: 1;
}
.footer__tagline { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1.3; color: var(--white); text-transform: none; margin: 0; }
.footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-l); align-items: flex-start; }
.footer h4 { color: var(--white); margin-bottom: var(--space-3xs); }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.footer a { color: var(--white); }
/* the original underlines its external links here, not the mailto */
.footer__cols a[target="_blank"] { text-decoration: underline; }
.footer__anbi img { width: 8rem; }
.footer__legal { margin: 0; font-size: var(--text-s); opacity: .85; }
.footer__legal a { text-decoration: none; margin-left: 0.4rem; }
.footer__legal a:hover { text-decoration: underline; }

/* The lighter-blue logo panel: bleeds to the viewport's right edge, full
   height, its left edge cut as ONE clean diagonal by a clip-path (an earlier
   skewed ::before left a visible seam — don't reintroduce it). */
.footer__logo-panel {
  position: absolute; inset: 0 0 0 auto;
  width: clamp(32rem, 32vw, 62rem);
  display: grid; place-items: center;
  background: var(--secondary);
  clip-path: polygon(9rem 0, 100% 0, 100% 100%, 0 100%);
  padding: var(--space-l) var(--space-l) var(--space-l) 12rem;
}
.footer__logo-panel img { width: 22rem; max-width: 100%; }
@media (max-width: 900px) {
  .footer__logo-panel {
    position: static; width: auto; clip-path: none;
    padding: var(--space-m); justify-items: start;
  }
  .footer__logo-panel img { width: 16rem; }
}

/* ---- news article page --------------------------------------------------- */
.article { background: var(--white); }
.article__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-xl); max-width: var(--container); margin-inline: auto; align-items: start; }
@media (max-width: 900px) { .article__inner { grid-template-columns: minmax(0, 1fr); } }
.article__aside { position: sticky; top: calc(var(--header-h) + var(--space-l)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }
@media (max-width: 900px) { .article__aside { position: static; } }
.article__back { font-weight: 600; }
.article__body h2, .article__body h3 { margin: 1.6em 0 .5em; font-size: var(--text-l); }
.article__body h2:first-child, .article__body h3:first-child { margin-top: 0; }
.article__body ul { margin: 0 0 1.4em; padding-left: 2rem; }
.article__body li { margin-bottom: .5em; }
.article__body blockquote {
  margin: 1.8em 0; padding: 1.4rem 2rem;
  background: var(--green-card); border-left: 4px solid var(--green);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-size: var(--text-l); line-height: 1.4;
}
.article__body blockquote p { margin: 0; }