/* ===========================================================================
   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: 4.4rem; height: 4.4rem; padding: 1rem;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--white); transition: var(--transition); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .header { background: var(--primary); }
  .header__logo { width: 15rem; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 36rem);
    margin: 0; padding: calc(var(--header-h) + 2rem) var(--space-m) var(--space-m);
    background: var(--primary);
    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__submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding-left: 1.4rem; }
  .nav__submenu a { color: var(--tertiary); }
  .header__cta { display: none; }
}

/* ---- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 66.1rem;
  padding: var(--header-h) var(--space-m) 0;
  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; }

@media (max-width: 1100px) {
  .hero { background-position: 65% 50%; background-size: cover; min-height: 52rem; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,85,143,.75), rgba(0,85,143,.15)); }
  .hero__inner { position: relative; z-index: 1; }
  .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%;
  transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
}
.stats__track.is-snapping { transition: none; }
.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);
  opacity: 0.85;
  /* the parallelogram, from the original's SVG clipPath (see base.html) */
  clip-path: url(#stat-card-shape);
  transition: background var(--transition);
}
.stat.is-active { background: var(--green-stat); }
.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 card ---------------------------------------------------------
   White section — the tinted background ends with the form above it. */
.contact { background: var(--white); }
.contact__inner { display: grid; gap: var(--space-l); max-width: var(--container-narrow); margin-inline: auto; }
.person { display: flex; align-items: center; gap: var(--space-s); padding: var(--space-m); background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.person__photo { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; flex: none; }
.person__name { font-family: var(--font-display); font-weight: 500; font-size: var(--text-l); text-transform: none; }
.person__role { font-size: var(--text-s); }

/* ---- 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 { background: var(--primary); color: var(--white); overflow: hidden; }
.footer__inner {
  display: flex; align-items: stretch; gap: var(--space-l);
  max-width: var(--container); margin-inline: auto;
  padding-left: var(--space-m);
}
.footer__content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-l);
  padding: var(--space-2xl) 0;
}
.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); }
.footer__anbi img { width: 8rem; }
.footer__legal { margin: 0; font-size: var(--text-s); opacity: .85; }
.footer__legal a { text-decoration: underline; }

.footer__logo-panel {
  position: relative;
  flex: 0 0 32rem;
  display: grid; place-items: center;
  background: var(--secondary);
  padding: var(--space-l);
  z-index: 1;
}
.footer__logo-panel::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -8rem;
  width: 10rem;
  background: inherit;
  transform: skewX(-15deg);
  z-index: -1;
}
.footer__logo-panel img { width: 20rem; }
@media (max-width: 900px) {
  .footer__inner { flex-direction: column; padding-right: var(--space-m); }
  .footer__logo-panel { flex: none; padding: var(--space-m); }
  .footer__logo-panel::before { display: none; }
}

/* ---- 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; }