@import url('/assets/styles/fonts.css');

/* =============================================================================
   WECGROUPS — design system
   Ported from the "wecgroups template" Figma file.

   Canvas 1920px wide, 1800px content column, 60px gutters.
   Palette, type scale and the square-cornered component style all come straight
   from the file's COLOR STYLE, TYPOGRAPHY and COMPONENT frames.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

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

ul[class], ol[class] { list-style: none; padding: 0; }

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Colour styles 01–07, verbatim from the Figma file. */
  --c-black:      #000000;
  --c-white:      #ffffff;
  --c-grey-dark:  #4d4d4d;
  --c-yellow:     #fec702;
  --c-orange:     #fe5e02;
  --c-mint:       #57ffad;
  --c-grey-light: #f2f2f2;

  /*
   * The brand orange is only 3.08:1 on white and 2.75:1 on the grey band, so it
   * fails WCAG AA for small text. This is the same hue darkened to 74%, which
   * clears AA on both (5.23:1 and 4.67:1). Use it for small text on light
   * backgrounds; --c-orange stays for fills, borders, large type and dark bands.
   */
  --c-orange-text: #bc4601;

  /* Derived neutrals, used only for hairlines and quiet text. */
  --c-line:       #d9d9d9;
  --c-line-soft:  #e8e8e8;
  --c-muted:      #4d4d4d;
  --c-muted-dark: #b3b3b3;

  --ink: var(--c-black);
  --bg: var(--c-white);

  /* Type. Chivo for headings, Manrope for everything else. */
  --font-display: 'Chivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Scale anchored on the Figma sizes at a 1920px canvas, fluid below that. */
  --fs-display: clamp(2.75rem, 8.75vw, 10.5rem);   /* 168px */
  --fs-h1:      clamp(2.125rem, 5vw, 6rem);        /*  96px */
  --fs-h2:      clamp(1.625rem, 2.5vw, 3rem);      /*  48px */
  --fs-h3:      clamp(1.25rem, 1.46vw, 1.75rem);   /*  28px */
  --fs-lead:    clamp(1.0625rem, 1.25vw, 1.5rem);  /*  24px */
  --fs-body:    clamp(1rem, 0.94vw, 1.125rem);     /*  18px */
  --fs-small:   clamp(0.875rem, 0.83vw, 1rem);     /*  16px */

  /* Layout */
  --container: 1800px;
  --gutter: clamp(1.25rem, 3.125vw, 3.75rem);      /*  60px */
  --section-y: clamp(3.5rem, 6.25vw, 7.5rem);      /* 120px */
  --gap: clamp(1.5rem, 2.5vw, 3rem);

  --header-h: 104px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }
}

/* --- Base ----------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h3, h4 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }

p { text-wrap: pretty; }

strong, b { font-weight: 700; }

:where(a):hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 3px;
}

::selection { background: var(--c-yellow); color: var(--c-black); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--c-black);
  color: var(--c-white);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

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

/* Unfilled configuration values, so they cannot ship unnoticed. */
.todo {
  padding: 0.05em 0.4em;
  background: color-mix(in srgb, var(--c-yellow) 45%, transparent);
  border-bottom: 2px dotted var(--c-orange);
  font-family: var(--font-body);
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 1100px; }
.container--wide { max-width: calc(1920px); }

.section { padding-block: var(--section-y); }
.section--muted { background: var(--c-grey-light); }
.section--dark { background: var(--c-black); color: var(--c-white); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-white); }
.section--accent { background: var(--c-yellow); }

.section__head { max-width: 960px; margin-bottom: clamp(2rem, 3.5vw, 3.75rem); }
.section__head--center { max-width: 1120px; margin-inline: auto; text-align: center; }
.section__head--center .section__lede { margin-inline: auto; }
.section__title { font-size: var(--fs-h1); }
.section__lede {
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-muted);
  max-width: 68ch;
}
.section--dark .section__lede { color: #cfcfcf; }

.eyebrow {
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-orange-text);
}

.lead-in {
  margin-bottom: 1.5rem;
  font-size: var(--fs-lead);
  font-weight: 600;
}

.prose > * + * { margin-top: 1.25rem; }
.prose h2 { margin-top: 3rem; font-size: var(--fs-h2); }
.prose h3 { margin-top: 2.5rem; font-size: var(--fs-h3); }
.prose p, .prose li { color: var(--c-muted); }
.prose strong { color: var(--ink); }
.prose a { color: var(--ink); text-decoration-color: var(--c-orange); text-underline-offset: 3px; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-black);
  --btn-fg: var(--c-white);
  --btn-bd: var(--c-black);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: 0;            /* the design is square-cornered throughout */
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { flex: none; }

.btn--primary:hover { --btn-bg: var(--c-orange); --btn-bd: var(--c-orange); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--c-black); --btn-bd: var(--c-black); }
.btn--outline:hover { --btn-bg: var(--c-black); --btn-fg: var(--c-white); }

/* On dark bands: a white button, and a ghosted outline. */
.btn--light { --btn-bg: var(--c-white); --btn-fg: var(--c-black); --btn-bd: var(--c-white); }
.btn--light:hover { --btn-bg: var(--c-yellow); --btn-bd: var(--c-yellow); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-white); --btn-bd: var(--c-white); }
.btn--ghost:hover { --btn-bg: var(--c-white); --btn-fg: var(--c-black); }

.btn--wide { width: 100%; justify-content: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-row--hero { margin-top: clamp(2rem, 3vw, 3rem); }
.btn-row--center { justify-content: center; margin-top: clamp(2.5rem, 4vw, 4rem); }
.btn-row--cta { flex: none; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--c-line-soft);
  box-shadow: 0 6px 24px rgb(0 0 0 / 6%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.75rem);
  min-height: var(--header-h);
}

.logo { display: inline-flex; flex: none; text-decoration: none; }
.logo__img { width: auto; }
.site-header__logo .logo__img { width: clamp(88px, 8vw, 124px); }

.site-nav__list { display: flex; align-items: center; gap: clamp(1rem, 1.75vw, 2.25rem); }

.site-nav__link {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.site-nav__link:hover { color: var(--c-black); }
.site-nav__link.is-active { color: var(--c-black); font-weight: 700; }

/* The rule that fills the gap between the nav and the button, as in the design. */
.site-header__rule {
  flex: 1 1 auto;
  min-width: 2rem;
  height: 1px;
  background: var(--c-black);
}

.site-header__cta { flex: none; }
.site-header__cta .btn { padding: 0.875rem 1.5rem; }

.site-nav__mobileCta { display: none; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 2px solid var(--c-black);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 5px; justify-items: center; }
.nav-toggle__bars span {
  display: block;
  width: 20px; height: 2px;
  background: var(--c-black);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .site-header__rule { display: none; }
}

@media (max-width: 1024px) {
  .nav-toggle { display: grid; place-items: center; }
  .site-header__cta { display: none; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 40;
    display: grid;
    align-content: start;
    gap: 0.25rem;
    padding: 1.5rem var(--gutter) 3rem;
    background: var(--c-white);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur);
  }
  .site-nav.is-open { transform: translateX(0); visibility: visible; }

  .site-nav__list { display: grid; gap: 0; }
  .site-nav__item { border-bottom: 1px solid var(--c-line-soft); }
  .site-nav__link { display: block; padding: 1.125rem 0; font-size: 1.25rem; }

  .site-nav__mobileCta { display: block; margin-top: 2rem; }
  .site-nav__mobileCta .btn { width: 100%; justify-content: center; }

  body.nav-open { overflow: hidden; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 5.5rem) clamp(3rem, 6vw, 7rem);
  overflow: hidden;
}
/*
 * The Figma hero headline is five words at 168px. Ours is eleven, so it takes
 * the same display treatment one step down the scale — three lines at desktop
 * rather than a wall of type.
 */
.hero__title {
  font-size: clamp(2.5rem, 5.6vw, 6.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  max-width: 20ch;
}
/* The design highlights one word with a yellow block behind its lower half. */
.hero__mark {
  background-image: linear-gradient(var(--c-yellow), var(--c-yellow));
  background-repeat: no-repeat;
  background-size: 100% 0.34em;
  background-position: 0 82%;
}
/* Shapes left, copy centre, disc cluster right — the arrangement in the design. */
.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 4rem);
}
.hero__lede { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-muted); }
.hero__support { margin-top: 1.25rem; font-size: var(--fs-body); color: var(--c-muted); }

@media (max-width: 1200px) {
  .hero__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
@media (max-width: 900px) {
  .hero__body { grid-template-columns: 1fr; }
}

/* --- Page hero (interior pages) ------------------------------------------- */
.page-hero { position: relative; padding-block: clamp(2rem, 4vw, 4.5rem) clamp(2.5rem, 5vw, 5.5rem); overflow: hidden; }
.page-hero--dark { background: var(--c-black); color: var(--c-white); }
.page-hero__inner { display: grid; gap: var(--gap); align-items: center; }
.page-hero--art .page-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.page-hero__title { font-size: var(--fs-h1); max-width: 18ch; }
.page-hero__lede { margin-top: 1.5rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-muted); max-width: 62ch; }
.page-hero--dark .page-hero__lede { color: #cfcfcf; }
.page-hero__lede > * + * { margin-top: 1rem; }

@media (max-width: 900px) {
  .page-hero--art .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__art { display: none; }
}

.breadcrumb { margin-bottom: 1.5rem; }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--fs-small); color: var(--c-muted); }
.breadcrumb__item + .breadcrumb__item::before { content: '/'; margin-right: 0.5rem; color: var(--c-line); }
.breadcrumb__item a { text-decoration: none; }
.breadcrumb__item a:hover { text-decoration: underline; }
.breadcrumb__item[aria-current] { color: var(--c-black); font-weight: 600; }

/* --- Split section (heading left, media right) ---------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__title { font-size: var(--fs-h1); max-width: 14ch; }
.split__body { margin-top: 1.75rem; color: var(--c-muted); }
.split__body > * + * { margin-top: 1rem; }
.split--dark .split__body { color: #cfcfcf; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* --- Cards ---------------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2vw, 2.25rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { border-color: var(--c-black); transform: translateY(-4px); box-shadow: 0 18px 40px rgb(0 0 0 / 8%); }
.section--muted .card { background: var(--c-white); border-color: transparent; }
.section--muted .card:hover { border-color: var(--c-black); }

.card__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  background: var(--c-yellow);
  color: var(--c-black);
}
.card__title { font-size: var(--fs-h3); }
.card__link { text-decoration: none; }
.card__link::after { content: ''; position: absolute; inset: 0; }
.card { position: relative; }
.card__body { color: var(--c-muted); }
.card__body > * + * { margin-top: 0.75rem; }
.card__note { font-size: var(--fs-small); }
.card__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: auto; padding-top: 0.5rem;
  font-size: var(--fs-small); font-weight: 700;
}
.card:hover .card__cta { color: var(--c-orange-text); }

/* Feature column with a large disc above it, from the third band. */
/* align-content: start stops the inner rows absorbing the slack when the card
   is stretched to match a taller sibling — without it each column's title sits
   at a different height depending on how long its own body copy is. */
.feature { text-align: center; display: grid; justify-items: center; align-content: start; gap: 1.25rem; }
.feature__art { width: clamp(180px, 16vw, 264px); aspect-ratio: 1; }
.feature__title { font-size: var(--fs-h3); max-width: 16ch; }
.feature__body { color: var(--c-muted); max-width: 34ch; font-size: var(--fs-small); }

/* --- Lists ---------------------------------------------------------------- */
.icon-list { display: grid; gap: 0.875rem; }
.icon-list--columns { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.icon-list__item { display: flex; gap: 0.75rem; align-items: flex-start; }
.icon-list__marker {
  display: grid; place-items: center;
  flex: none;
  width: 26px; height: 26px;
  margin-top: 0.15em;
  background: var(--c-mint);
  color: var(--c-black);
}
.icon-list--negative .icon-list__marker { background: var(--c-orange); color: var(--c-white); }
.icon-list--neutral .icon-list__marker { background: var(--c-grey-light); }
.section--dark .icon-list--neutral .icon-list__marker { background: var(--c-grey-dark); color: var(--c-white); }

/* --- Steps ---------------------------------------------------------------- */
.steps { display: grid; gap: 0; counter-reset: step; }
.steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
  border-top: 1px solid var(--c-line);
}
.steps__item:last-child { border-bottom: 1px solid var(--c-line); }
.steps__marker { display: flex; align-items: flex-start; }
.steps__number {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-orange);
}
.steps__title { font-size: var(--fs-h3); }
.steps__body { margin-top: 0.75rem; color: var(--c-muted); }
.steps__body > * + * { margin-top: 0.75rem; }

/* --- Accordion ------------------------------------------------------------ */
.accordion { border-top: 1px solid var(--c-line); }
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.125rem, 2vw, 1.75rem);
  cursor: pointer;
  list-style: none;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__question {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.accordion__chevron {
  display: grid; place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border: 2px solid var(--c-black);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.accordion__item[open] .accordion__chevron { background: var(--c-black); color: var(--c-white); transform: rotate(180deg); }
.accordion__summary:hover .accordion__chevron { background: var(--c-yellow); }
.accordion__item[open] .accordion__summary:hover .accordion__chevron { background: var(--c-black); }
.accordion__panel { padding-bottom: clamp(1.25rem, 2vw, 1.75rem); }
.accordion__answer { max-width: 80ch; color: var(--c-muted); }
.accordion__answer > * + * { margin-top: 1rem; }

/* --- Callout -------------------------------------------------------------- */
.callout {
  display: flex;
  gap: 1rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--c-grey-light);
  border-left: 4px solid var(--c-orange);
}
.callout--positive { border-left-color: var(--c-mint); }
.callout--warning { border-left-color: var(--c-yellow); }
.callout__icon { flex: none; color: var(--c-orange-text); }
.callout--positive .callout__icon { color: var(--c-black); }
.callout__title { font-weight: 700; margin-bottom: 0.35rem; }
.callout__body { color: var(--c-muted); }
.callout__body > * + * { margin-top: 0.75rem; }
.section--dark .callout { background: var(--c-grey-dark); }
.section--dark .callout__body { color: #e0e0e0; }

/* --- Detail list ---------------------------------------------------------- */
.details { display: grid; gap: 0; }
.details--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .details--2 { grid-template-columns: 1fr; } }
.details__row { padding-block: 1.25rem; border-top: 1px solid var(--c-line); }
.details--2 .details__row { padding-right: 2rem; }
.details__term { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.details__icon { color: var(--c-orange-text); display: inline-grid; place-items: center; }
.details__value { margin-top: 0.35rem; color: var(--c-muted); }

/* --- Fees ----------------------------------------------------------------- */
.fees { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .fees { grid-template-columns: 1fr; } }
.fees__figure { padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--c-grey-dark); }
.fees__amount { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--c-yellow); }
.fees__unit { margin-top: 0.75rem; color: #d5d5d5; }
.fees__text > * + * { margin-top: 1.25rem; }
.fees__text p { color: #cfcfcf; font-size: var(--fs-lead); line-height: 1.5; }
.fees__text strong { color: var(--c-white); }

/* --- Rate breakdown ------------------------------------------------------- */
.rate-art { margin: 0; }
.rate-art__top, .rate-art__foot { padding: 1rem 1.25rem; background: var(--c-black); color: var(--c-white); }
.rate-art__topLabel { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; }
.rate-art__bands { display: grid; }
.rate-art__band { padding: 0.9rem 1.25rem; border: 1px solid var(--c-line); border-top: none; font-weight: 600; }
.rate-art__band--orange { background: var(--c-orange); color: var(--c-white); border-color: var(--c-orange); }
.rate-art__band--mint { background: var(--c-mint); }
.rate-art__band--yellow { background: var(--c-yellow); }
.rate-art__band--dark { background: var(--c-white); }
.rate-art__foot { font-size: var(--fs-small); }
.rate-art__footLabel { color: #d5d5d5; }
.rate-art__caption { margin-top: 1rem; font-size: var(--fs-small); color: var(--c-muted); }

/* --- Testimonial / quote -------------------------------------------------- */
.quote { font-size: clamp(1.25rem, 1.9vw, 2rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--c-muted); }
.quote__cite { display: block; margin-top: 1.75rem; font-style: normal; }
.quote__name { font-weight: 700; color: var(--c-black); }
.quote__role { font-size: var(--fs-small); color: var(--c-muted); }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { padding-block: var(--section-y) 0; background: var(--c-black); color: var(--c-white); overflow: hidden; }
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
}
.cta-band__title { font-size: var(--fs-h1); max-width: 14ch; }
.cta-band__body { font-size: var(--fs-lead); line-height: 1.5; color: #cfcfcf; max-width: 46ch; }
.cta-band__text + .btn-row { margin-top: 0; }
@media (max-width: 900px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* --- Footer --------------------------------------------------------------- */
.site-footer { padding-block: var(--section-y) 2.5rem; background: var(--c-grey-light); }
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.9fr)) minmax(0, 1.3fr);
  gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 1200px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .site-footer__top { grid-template-columns: 1fr; } }

.site-footer__logo .logo__img { width: clamp(150px, 14vw, 200px); }
.site-footer__blurb { margin-top: 1.5rem; color: var(--c-muted); font-size: var(--fs-small); max-width: 46ch; }
.site-footer__heading { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; margin-bottom: 1.5rem; }
.site-footer__list { display: grid; gap: 0.875rem; font-size: var(--fs-small); }
.site-footer__list a { color: var(--c-muted); text-decoration: none; }
.site-footer__list a:hover { color: var(--c-black); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__list--contact li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--c-muted); }
.site-footer__icon { flex: none; margin-top: 0.15em; color: var(--c-orange-text); }
.site-footer__contactRow { display: grid; }
.site-footer__contactLabel { font-weight: 700; color: var(--c-black); }

.social { display: flex; gap: 0.75rem; margin-top: 1.75rem; }
.social__link {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--c-black);
  border-radius: 50%;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social__link:hover { background: var(--c-black); color: var(--c-white); }

.site-footer__legal { margin-top: clamp(2.5rem, 4vw, 4rem); font-size: var(--fs-small); color: var(--c-muted); }
.site-footer__legal p + p { margin-top: 0.75rem; }

.site-footer__bar {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.site-footer__policies { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-footer__policies a { text-decoration: none; }
.site-footer__policies a:hover { color: var(--c-black); text-decoration: underline; text-underline-offset: 3px; }

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: 1.5rem; max-width: 720px; }
.form__row { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.5rem; }
.field__label { font-weight: 700; font-size: var(--fs-small); }
.field__req { color: var(--c-orange-text); }
.field__hint { font-size: var(--fs-small); color: var(--c-muted); }
.field__control {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--c-white);
  border: 2px solid var(--c-black);
  border-radius: 0;
  font-size: var(--fs-body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__control:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-orange) 25%, transparent); }
textarea.field__control { min-height: 160px; resize: vertical; }
.field__error { font-size: var(--fs-small); font-weight: 600; color: #b3300b; }
.field.is-invalid .field__control { border-color: #b3300b; }
.field__error[hidden] { display: none; }

.form__status { padding: 1rem 1.25rem; font-weight: 600; border-left: 4px solid var(--c-mint); background: var(--c-grey-light); }
.form__status--error { border-left-color: #b3300b; }
.form__status[hidden] { display: none; }

/* --- Artwork -------------------------------------------------------------- */
.disc {
  display: block;
  width: var(--disc-size, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.disc--yellow { background: conic-gradient(from 200deg, #fff8d6, var(--c-yellow) 38%, #fdb700 62%, #fff8d6); }
.disc--orange { background: conic-gradient(from 190deg, #ffe3d0, var(--c-orange) 34%, #ff8a3d 66%, #ffe3d0); }
.disc--mint   { background: conic-gradient(from 210deg, #e8fff4, var(--c-mint) 40%, #17e08a 68%, #e8fff4); }
.disc--cream  { background: conic-gradient(from 220deg, #ffffff, #fff6cf 45%, var(--c-yellow) 72%, #ffffff); }
.disc--sky    { background: conic-gradient(from 180deg, #fdfbe8, #d9f7ef 30%, #cfeffb 55%, #fdf6c8 80%, #fdfbe8); }
.disc--dark   { background: var(--c-grey-dark); }
.disc--star   { background: var(--c-grey-dark); position: relative; }
.disc--star::after {
  content: '';
  position: absolute; inset: 18%;
  background:
    linear-gradient(var(--c-mint), var(--c-mint)) center/1.5px 100% no-repeat,
    linear-gradient(var(--c-mint), var(--c-mint)) center/100% 1.5px no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.75px), var(--c-mint) 50%, transparent calc(50% + 0.75px)),
    linear-gradient(-45deg, transparent calc(50% - 0.75px), var(--c-mint) 50%, transparent calc(50% + 0.75px));
}
.disc--wedge {
  -webkit-mask-image: conic-gradient(from var(--wedge-from, 0deg), transparent 0 var(--wedge-sweep, 90deg), #000 0);
  mask-image: conic-gradient(from var(--wedge-from, 0deg), transparent 0 var(--wedge-sweep, 90deg), #000 0);
}

.diagonal {
  display: block;
  width: 1px;
  height: var(--diag-len, 260px);
  background: var(--c-black);
  transform: rotate(var(--diag-angle, 45deg));
  transform-origin: top center;
}
.section--dark .diagonal, .cta-band .diagonal { background: var(--c-orange); }

.chart-disc {
  display: block;
  width: var(--disc-size, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-grey-dark);
  overflow: hidden;
}
.chart-disc svg { width: 100%; height: 100%; }

.gauge { display: block; width: var(--gauge-size, 300px); }
.gauge svg { width: 100%; height: auto; }

.panel-art { display: block; width: 100%; aspect-ratio: 16 / 11; }
.panel-art--sunrise { background: conic-gradient(from 210deg at 60% 55%, #ffb300, var(--c-orange) 25%, #ffd54a 55%, #d6f5a8 75%, #ffb300); }

.arrow-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  aspect-ratio: 16 / 7;
  background: var(--c-grey-dark);
}
.arrow-panel svg { width: 100%; height: 100%; }
.arrow-panel__glow { background: radial-gradient(120% 90% at 50% 100%, var(--c-yellow), #fff3b0); }
@media (max-width: 700px) { .arrow-panel { grid-template-columns: minmax(0, 1fr) 90px; } }

.bar-chart { display: block; width: 100%; max-width: 320px; }
.orbit-disc { display: block; width: 100%; max-width: 560px; }
.contour-disc { display: block; width: var(--disc-size, 240px); aspect-ratio: 1; }

/* Hero composition */
.hero-art__left { display: grid; gap: 1.5rem; justify-items: start; }
.hero-art__left .disc { width: clamp(140px, 13vw, 240px); }
.hero-art__right {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1.25rem);
  align-items: center;
}
.hero-art__right .disc,
.hero-art__right .chart-disc { width: 100%; }
/*
 * These live after the base rules above so they actually win the cascade —
 * the hero's own media queries appear earlier in the file.
 */
@media (max-width: 1200px) {
  .hero-art__left { display: none; }
}
@media (max-width: 900px) {
  .hero-art__right { max-width: 480px; }
}
@media (max-width: 560px) {
  .hero-art__right { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 320px; }
}

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover { transform: none; }
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .btn-row, .closing-art, .hero-art { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
}

/* =============================================================================
   Page-level compositions
   ========================================================================== */

/* --- Services: jump list -------------------------------------------------- */
.jump__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; margin-bottom: 1.5rem; }
.jump__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.75rem; }
.jump__link {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: var(--c-white);
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.jump__link:hover { border-color: var(--c-black); transform: translateX(4px); }
.jump__link > .icon:last-child { margin-left: auto; color: var(--c-orange-text); }
.jump__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; background: var(--c-yellow); }

/* --- Services: one service block ------------------------------------------ */
.service {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.service__media { display: grid; justify-items: center; }
.service__media > * { width: 100%; max-width: 320px; }
.service__title { font-size: var(--fs-h2); margin-bottom: 2rem; }
.service__block + .service__block { margin-top: 2rem; }
.service__label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-orange-text);
  margin-bottom: 0.875rem;
}
.service__block p { color: var(--c-muted); }
.service__block--paid { padding: 1.25rem 1.5rem; background: var(--c-black); }
.service__block--paid .service__label { color: var(--c-yellow); }
.service__block--paid p { color: var(--c-white); font-weight: 600; }
.section--muted .service__block--paid { background: var(--c-black); }
.service .callout { margin-top: 2rem; }
.section--muted .service .callout { background: var(--c-white); }
@media (max-width: 900px) {
  .service { grid-template-columns: 1fr; }
  .service__media { justify-items: start; }
}

/* --- Agencies: two-column prose ------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.two-col__text p { color: #cfcfcf; }
.two-col__text .lead-in { color: var(--c-white); }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* --- Contractors: numbered list ------------------------------------------- */
.numbered { counter-reset: n; display: grid; gap: 0.875rem; padding: 0; list-style: none; }
.numbered li { display: flex; gap: 0.875rem; align-items: flex-start; counter-increment: n; }
.numbered li::before {
  content: counter(n);
  display: grid; place-items: center;
  flex: none;
  width: 28px; height: 28px;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
}
.split--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .split--wide { grid-template-columns: 1fr; } }

/* --- Contact -------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr; } }
.contact__heading { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.contact__heading + .details { margin-bottom: 3rem; }
.contact__formLede { margin-bottom: 2rem; color: var(--c-muted); }
.details__hint { display: block; font-size: var(--fs-small); color: var(--c-muted); }

/* --- Home: compliance details --------------------------------------------- */
.compliance-details { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.compliance-prose { max-width: 90ch; }
.prose--dark p { color: #cfcfcf; }
.prose--dark strong { color: var(--c-white); }
.section--dark .prose a { color: var(--c-white); }

/* --- Feature discs -------------------------------------------------------- */
.feature__art > .disc,
.feature__art > .chart-disc { width: 100%; }

/* --- Cards: negative icon chip -------------------------------------------- */
.card__icon--negative { background: var(--c-orange); color: var(--c-white); }

/* --- Legal pages ---------------------------------------------------------- */
.legal__meta { font-size: var(--fs-small); color: var(--c-muted); padding-bottom: 1.5rem; border-bottom: 1px solid var(--c-line); }
.legal__section { margin-top: 3rem; }
.legal__section h2 { margin-top: 0; font-size: var(--fs-h2); }
.legal__section > * + * { margin-top: 1.25rem; }
.legal ul, .legal ol { display: grid; gap: 0.75rem; padding-left: 1.5rem; color: var(--c-muted); }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li::marker { color: var(--c-orange); }

/* On dark bands the brand orange already clears AA (6.82:1), so use it there. */
.section--dark .eyebrow,
.page-hero--dark .eyebrow,
.cta-band .eyebrow { color: var(--c-orange); }

/* =============================================================================
   Feature discs, sectors, closing row
   ========================================================================== */

/* --- Feature discs ---------------------------------------------------------
   The angular gradient is seamed at twelve o'clock: saturated down the right,
   fading round to white on the left, exactly as the design draws it. The line
   motif sits over the top and fades as it descends.
   -------------------------------------------------------------------------- */
.feature-disc {
  position: relative;
  display: block;
  width: 100%;
  max-width: 264px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.feature-disc svg {
  position: relative;
  width: 100%;
  height: 100%;
}

.feature-disc--mint {
  background: conic-gradient(from 0deg, #57ffad 0deg, #57ffad 70deg, #93ffc8 160deg, #d9fff0 250deg, #ffffff 350deg, #57ffad 360deg);
}
.feature-disc--orange {
  background: conic-gradient(from 0deg, #fe5e02 0deg, #fe5e02 70deg, #fd9557 160deg, #ffdcc6 250deg, #ffffff 350deg, #fe5e02 360deg);
}
.feature-disc--yellow {
  background: conic-gradient(from 0deg, #fec702 0deg, #fec702 70deg, #fdd94f 160deg, #fdf0bd 250deg, #ffffff 350deg, #fec702 360deg);
}

/* --- Sectors ---------------------------------------------------------------
   A fixed three-column grid rather than a wrapping pill row, so the cards line
   up in even rows instead of leaving an orphan centred on its own line.
   -------------------------------------------------------------------------- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  max-width: 1180px;
  margin-inline: auto;
  text-align: left;
}
@media (max-width: 900px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sector-grid { grid-template-columns: 1fr; } }

.sector {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.125rem, 1.6vw, 1.5rem);
  background: var(--c-white);
  border: 1px solid transparent;
  font-weight: 600;
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}
.sector:hover {
  border-color: var(--c-black);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgb(0 0 0 / 7%);
}
.sector__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  background: var(--c-yellow);
  color: var(--c-black);
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sector:hover .sector__icon { background: var(--c-orange); color: var(--c-white); }
.sector__label { line-height: 1.35; }

/* --- Closing row -----------------------------------------------------------
   Four cells on one baseline with the rule threading through their centres.

   Each shape carries `closing-art__item` on the element itself, so the row
   height is set there and the shapes size from it via aspect-ratio. Using
   `height: 100%` instead would resolve against an indefinite grid area, fall
   back to the intrinsic size, and leave the shapes taller than their own row —
   which is what pushed the brand mark off the rule.
   -------------------------------------------------------------------------- */
.closing-art {
  /* One length drives the row height, the rule position and the mark cap, so
     the four shapes and the line through them can never drift apart. */
  --closing-size: clamp(140px, 17vw, 260px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  justify-items: center;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: var(--section-y);
}

.closing-art__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--closing-size) / 2);
  height: 1px;
  background: var(--c-white);
  opacity: 0.45;
}

.closing-art__item {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--closing-size);
}

/* Round shapes take their width from the row height, so all three match. */
.closing-art .disc,
.closing-art .contour-disc {
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
}
.closing-art .contour-disc svg { width: 100%; height: 100%; }

/* The panel is deliberately shorter than the discs, as in the design. */
.closing-art__panel {
  height: auto;
  width: 100%;
  aspect-ratio: 16 / 11;
}

/* Capped against the shared length, not 100% — a percentage max-height on a
   centred grid item is treated as indefinite by Chrome and left the mark
   overflowing its row at the intrinsic 512px ratio. */
.closing-art__mark img {
  width: auto;
  height: auto;
  max-height: var(--closing-size);
  max-width: 100%;
}

@media (max-width: 800px) {
  .closing-art { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .closing-art__rule { display: none; }
}


/* =============================================================================
   Motion
   ---------------------------------------------------------------------------
   Entrances ease out, exits ease in, position changes ease in and out. Nothing
   runs longer than 400ms except the hero's one-off load sequence, which is
   choreographed and finishes inside 700ms. Related items stagger 45ms apart.

   The whole layer is gated on `html.js`, so the site renders complete without
   JavaScript, and it is switched off entirely under prefers-reduced-motion.
   Only opacity and transform are animated, so everything stays on the compositor.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 90ms;
  --dur-short: 200ms;
  --dur-med: 380ms;
  --dur-long: 620ms;
}

/* --- Scroll reveal ---------------------------------------------------------
   The hidden state is declared against real selectors rather than an attribute
   the script adds later, so it applies at first paint and nothing flashes in
   and back out. Keep this list in step with REVEAL_SELECTORS in site.js.

   :where() rather than :is() — :is() takes the specificity of its most specific
   argument, which would let this rule out-rank `.is-revealed` and leave elements
   stuck at opacity 0. :where() contributes nothing, so the reveal always wins.
   -------------------------------------------------------------------------- */
.js :where(
  .page-hero__text,
  .page-hero__art,
  .section__head,
  .split__text,
  .split__media,
  .card,
  .feature,
  .steps__item,
  .fees__figure,
  .fees__text,
  .service__media,
  .service__text,
  .jump__link,
  .details__row,
  .accordion__item,
  .sector,
  .rate-art,
  .callout,
  .two-col__text,
  .two-col__aside,
  .cta-band__text,
  .closing-art__item,
  .legal__section,
  .contact-grid__details,
  .contact-grid__form,
  .icon-list--columns .icon-list__item
) {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-med) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-med) var(--ease-out) var(--reveal-delay, 0ms);
}
.js .is-revealed {
  opacity: 1;
  transform: none;
}

/* Media panels arrive from the side they sit on, so the eye tracks inward. */
.js .split__media,
.js .service__media { transform: translate3d(-24px, 12px, 0); }
.js .split--reverse .split__media { transform: translate3d(24px, 12px, 0); }
.js .split__media.is-revealed,
.js .service__media.is-revealed { transform: none; }

/* Sector cards are small and numerous, so they scale up rather than travel. */
.js .sector { transform: translate3d(0, 10px, 0) scale(0.96); }
.js .sector.is-revealed { transform: none; }

/* --- Hero load choreography ------------------------------------------------ */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.js .hero__title,
.js .hero__lede,
.js .hero__support,
.js .hero .btn-row,
.js .hero-art__left,
.js .hero-art__right > * {
  animation: rise var(--dur-long) var(--ease-out) both;
}
.js .hero__title   { animation-delay: 60ms; }
.js .hero__lede    { animation-delay: 160ms; }
.js .hero__support { animation-delay: 210ms; }
.js .hero .btn-row { animation-delay: 260ms; }
.js .hero-art__left { animation-delay: 300ms; }

/* The disc cluster resolves last, one shape at a time. */
.js .hero-art__right > * { animation-name: riseIn; }
.js .hero-art__right > *:nth-child(1) { animation-delay: 300ms; }
.js .hero-art__right > *:nth-child(2) { animation-delay: 340ms; }
.js .hero-art__right > *:nth-child(3) { animation-delay: 380ms; }
.js .hero-art__right > *:nth-child(4) { animation-delay: 420ms; }
.js .hero-art__right > *:nth-child(5) { animation-delay: 460ms; }
.js .hero-art__right > *:nth-child(6) { animation-delay: 500ms; }

/* The yellow highlight wipes in behind the word once the headline has landed. */
@keyframes markWipe {
  from { background-size: 0 0.34em; }
  to   { background-size: 100% 0.34em; }
}
.js .hero__mark {
  background-size: 0 0.34em;
  animation: markWipe var(--dur-med) var(--ease-out) 420ms forwards;
}

/* --- Navigation ------------------------------------------------------------ */
.site-nav__link { position: relative; }
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 2px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-short) var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { transform: scaleX(1); }
.site-nav__link.is-active::after { transform: scaleX(1); background: var(--c-black); }

/* The header tightens once the page has moved. */
.site-header__inner { transition: min-height var(--dur-med) var(--ease-in-out); }
.site-header.is-stuck .site-header__inner { min-height: calc(var(--header-h) - 16px); }

/* Mobile panel: links arrive after the panel itself has opened. */
@media (max-width: 1024px) {
  .js .site-nav.is-open .site-nav__item,
  .js .site-nav.is-open .site-nav__mobileCta { animation: rise var(--dur-med) var(--ease-out) both; }
  .js .site-nav.is-open .site-nav__item:nth-child(1) { animation-delay: 60ms; }
  .js .site-nav.is-open .site-nav__item:nth-child(2) { animation-delay: 100ms; }
  .js .site-nav.is-open .site-nav__item:nth-child(3) { animation-delay: 140ms; }
  .js .site-nav.is-open .site-nav__item:nth-child(4) { animation-delay: 180ms; }
  .js .site-nav.is-open .site-nav__item:nth-child(5) { animation-delay: 220ms; }
  .js .site-nav.is-open .site-nav__item:nth-child(6) { animation-delay: 260ms; }
  .js .site-nav.is-open .site-nav__mobileCta { animation-delay: 300ms; }
}

/* --- Buttons, cards, shapes ------------------------------------------------ */
.btn__icon { transition: transform var(--dur-short) var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(4px); }

.card__icon { transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.card:hover .card__icon { transform: translateY(-3px) scale(1.06); background: var(--c-orange); color: var(--c-white); }
.card__cta .icon { transition: transform var(--dur-short) var(--ease-out); }
.card:hover .card__cta .icon { transform: translateX(5px); }

.feature__art > * { transition: transform var(--dur-med) var(--ease-out); }
.feature:hover .feature__art > * { transform: scale(1.04) rotate(-3deg); }

.jump__icon { transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.jump__link:hover .jump__icon { background: var(--c-orange); color: var(--c-white); }


.steps__number { display: inline-block; transition: transform var(--dur-med) var(--ease-out); }
.steps__item:hover .steps__number { transform: translateX(6px); }

.site-footer__list a,
.site-footer__policies a { transition: color var(--dur-micro) var(--ease-out); }

.social__link { transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.social__link:hover { transform: translateY(-3px); }

/* --- Accordion ------------------------------------------------------------- */
@keyframes panelIn {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to   { opacity: 1; transform: none; }
}
.js .accordion__item[open] .accordion__panel { animation: panelIn 280ms var(--ease-out) both; }
.accordion__chevron {
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-in-out);
}

/* --- Form ------------------------------------------------------------------ */
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.js .form__status:not([hidden]) { animation: rise var(--dur-short) var(--ease-out) both; }
.js .field.is-invalid .field__control { animation: nudge 180ms var(--ease-in-out); }

/* --- Reduced motion: show everything, animate nothing ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .js :is(
    .page-hero__text, .page-hero__art, .section__head, .split__text, .split__media, .card, .feature,
    .steps__item, .fees__figure, .fees__text, .service__media, .service__text, .jump__link, .details__row,
    .accordion__item, .sector, .rate-art, .callout, .two-col__text, .two-col__aside, .cta-band__text,
    .closing-art__item, .legal__section, .contact-grid__details, .contact-grid__form,
    .icon-list--columns .icon-list__item
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .hero__title,
  .js .hero__lede,
  .js .hero__support,
  .js .hero .btn-row,
  .js .hero-art__left,
  .js .hero-art__right > *,
  .js .hero__mark,
  .js .site-nav.is-open .site-nav__item,
  .js .site-nav.is-open .site-nav__mobileCta,
  .js .accordion__item[open] .accordion__panel,
  .js .field.is-invalid .field__control,
  .js .form__status:not([hidden]) { animation: none !important; }
  .js .hero__mark { background-size: 100% 0.34em; }
  .btn:hover .btn__icon,
  .card:hover .card__icon,
  .card:hover .card__cta .icon,
  .feature:hover .feature__art > *,
  .sector:hover,
  .social__link:hover,
  .steps__item:hover .steps__number { transform: none; }
  .site-header.is-stuck .site-header__inner { min-height: var(--header-h); }
}