/* ==========================================================================
   Nevus CC — design system
   Palette sampled directly from the Nevus wordmark:
   #593F87 (violet) -> #412D63 (plum) -> #1E1430 (aubergine)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand ramp */
  --plum-900: #150c24;
  --plum-800: #1e1430;
  --plum-700: #2a1d42;
  --plum-600: #34234f;
  --plum-500: #412d63;
  --plum-400: #593f87;
  --plum-300: #7a5ea8;
  --plum-200: #b1a0c9;
  --plum-100: #ded4ee;
  --plum-050: #f1ecf9;

  /* Neutrals — violet-tinted, deliberately not cream */
  --canvas: #fbfafd;
  --canvas-soft: #f3f1f8;
  --surface: #ffffff;
  --hairline: #e0d9ee;
  --hairline-strong: #c9bede;
  --ink: #170e27;
  --ink-2: #4a3e5e;

  /* On dark */
  --on-dark: #ffffff;
  --on-dark-2: #cabee0;
  --hairline-dark: rgba(255, 255, 255, 0.16);

  /* Accents — amber is reserved for money figures, nothing else */
  --amber: #b57d20;
  --amber-bright: #e0a94a;
  --amber-soft: #f8f0dd;
  --green: #14704e;
  --green-soft: #e3f2ec;
  --red: #a5231c;
  --red-soft: #fbeceb;

  /* Type */
  --f-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing — 4px base */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 2.75rem;
  --s8: 3.5rem;
  --s9: 4.5rem;
  --s10: 6rem;
  --s11: 8rem;

  /* Radius — three values plus pill */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Elevation — plum-tinted, never neutral grey */
  --e1: 0 1px 2px rgba(21, 12, 36, 0.06), 0 2px 6px rgba(21, 12, 36, 0.05);
  --e2: 0 2px 4px rgba(21, 12, 36, 0.06), 0 10px 24px rgba(21, 12, 36, 0.08);
  --e3: 0 4px 10px rgba(21, 12, 36, 0.08), 0 20px 48px rgba(21, 12, 36, 0.12);
  --e4: 0 12px 28px rgba(21, 12, 36, 0.12), 0 40px 84px rgba(21, 12, 36, 0.2);

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  color: inherit;
}

p {
  margin: 0 0 var(--s4);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--plum-500);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--plum-400);
}

ul,
ol {
  margin: 0 0 var(--s4);
  padding-left: 1.15rem;
}

li {
  margin-bottom: var(--s2);
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--s7) 0;
}

strong {
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--plum-400);
  outline-offset: 2px;
  border-radius: 3px;
}

.on-dark :focus-visible,
.band--deep :focus-visible {
  outline-color: var(--amber-bright);
}

::selection {
  background: var(--plum-100);
  color: var(--ink);
}

.skip {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 999;
  padding: var(--s3) var(--s5);
  background: var(--plum-500);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}

.skip:focus {
  top: var(--s4);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Typography scale
   -------------------------------------------------------------------------- */
.d-xl,
.d-lg,
.d-md,
.d-sm {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.d-xl {
  font-size: clamp(2.5rem, 5.6vw, 4.15rem);
  line-height: 1.04;
}

.d-lg {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.d-md {
  font-size: clamp(1.6rem, 2.7vw, 2.2rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
}

.d-sm {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.24;
  letter-spacing: -0.018em;
}

.h-md {
  font-family: var(--f-body);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.014em;
}

.h-sm {
  font-family: var(--f-body);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
}

.lede {
  font-size: clamp(1.125rem, 1.7vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.lede--dark {
  color: var(--on-dark-2);
}

.body-lg {
  font-size: 1.08rem;
  line-height: 1.68;
}

.small {
  font-size: 0.9rem;
  line-height: 1.6;
}

.micro {
  font-size: 0.85rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

/* Client wall gets a real header rather than a stray caption */
.clients-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3) var(--s6);
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--hairline-strong);
}

.clients-head h2 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.022em;
}

.clients-head p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.muted {
  color: var(--ink-2);
}

/* Secondary text has to flip on dark ground or it disappears into it. */
.band--deep .muted,
.form--dark .muted,
.panel--dark .muted,
.site-footer .muted {
  color: var(--on-dark-2);
}

/* ...but not inside a light card that happens to sit on a dark band. */
.band--deep .panel .muted,
.band--deep .calc .muted,
.band--deep .post-card .muted,
.band--deep .step .muted {
  color: var(--ink-2);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.amber {
  color: var(--amber);
}

.amber-bright {
  color: var(--amber-bright);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
}

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.section {
  padding: var(--s10) 0;
}

.section--tight {
  padding: var(--s8) 0;
}

.section--flush-top {
  padding-top: 0;
}

.band {
  background: var(--canvas-soft);
}

.band--white {
  background: var(--surface);
}

.band--deep {
  position: relative;
  background:
    radial-gradient(120% 140% at 10% 0%, #4b3273 0%, rgba(75, 50, 115, 0) 55%),
    linear-gradient(158deg, var(--plum-700) 0%, var(--plum-900) 100%);
  color: var(--on-dark);
  overflow: hidden;
}

.band--deep::after {
  /* fine grain so the large dark areas have texture instead of flat fill */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.band--deep a:not(.btn) {
  color: var(--amber-bright);
}

.band > *,
.band--deep > * {
  position: relative;
  z-index: 1;
}

.section-head {
  margin-bottom: var(--s8);
  padding-top: var(--s5);
  border-top: 2px solid var(--ink);
}

.section-head > * {
  max-width: 720px;
}

.band--deep .section-head {
  border-top-color: rgba(255, 255, 255, 0.55);
}

.section-head--wide > * {
  max-width: 860px;
}

.section-head p {
  margin-top: var(--s4);
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Brand marker: the three squares from the wordmark, used as a section kicker */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 var(--s4);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum-500);
}

.band--deep .kicker {
  color: var(--amber-bright);
}

.kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 8px;
  background-image: linear-gradient(
    to right,
    currentColor 0 6px,
    transparent 6px 10px,
    currentColor 10px 16px,
    transparent 16px 20px,
    currentColor 20px 26px
  );
}

.section-head--center .kicker {
  justify-content: center;
}

.grid {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    transform 0.12s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary,
.btn--primary:visited {
  background: var(--plum-500);
  color: #fff;
  box-shadow: var(--e2);
}

.btn--primary:hover {
  background: var(--plum-400);
  color: #fff;
  box-shadow: var(--e3);
}

.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background: var(--plum-200);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn--amber,
.btn--amber:visited {
  background: var(--amber-bright);
  color: var(--plum-900);
  box-shadow: var(--e2);
}

.btn--amber:hover {
  background: #eeba60;
  color: var(--plum-900);
  box-shadow: var(--e3);
}

.btn--amber:disabled {
  background: #d9cdb4;
  color: #6c6350;
  box-shadow: none;
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--plum-050);
  border-color: var(--plum-300);
  color: var(--plum-500);
}

.btn--on-dark {
  background: transparent;
  border-color: var(--hairline-dark);
  color: #fff;
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}

.btn--wide {
  width: 100%;
}

.btn--sm {
  min-height: 44px;
  padding: var(--s2) var(--s5);
  font-size: 0.92rem;
}

/* Quiet inline link with an arrow that nudges */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 currentColor;
}

.link-arrow svg {
  transition: transform 0.18s var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow 0.2s var(--ease);
}

.site-header.is-stuck {
  box-shadow: var(--e2);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: var(--s2) 0;
  text-decoration: none;
}

.brand img {
  height: 34px;
  width: auto;
}

.nav {
  display: none;
  align-items: center;
  gap: var(--s2);
}

.nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    color 0.16s var(--ease),
    background-color 0.16s var(--ease);
}

.nav a:not(.btn):hover {
  background: var(--plum-050);
  color: var(--plum-500);
}

.nav a:not(.btn)[aria-current="page"] {
  color: var(--plum-500);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--plum-400);
  border-radius: 0;
}

.header-cta {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--plum-050);
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.2s var(--ease),
    opacity 0.15s var(--ease);
}

.nav-toggle__bar + .nav-toggle__bar {
  margin-top: 5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  padding: var(--s4) 0 var(--s6);
}

.mobile-nav a:not(.btn) {
  display: block;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
}

.mobile-nav a:not(.btn)[aria-current="page"] {
  color: var(--plum-500);
}

.mobile-nav .btn {
  margin-top: var(--s5);
}

@media (min-width: 1000px) {
  .nav,
  .header-cta {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--s9) 0 var(--s10);
}

.hero__grid {
  display: grid;
  gap: var(--s8);
  align-items: center;
}

.hero h1 {
  color: #fff;
  margin-bottom: var(--s5);
}

.hero__lede {
  max-width: 40ch;
  margin-bottom: var(--s6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s6);
}

.hero__trust {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-dark);
  color: var(--on-dark-2);
  font-size: 0.88rem;
  line-height: 1.65;
}

.hero__trust b {
  color: #fff;
  font-weight: 600;
}

@media (min-width: 980px) {
  .hero {
    padding: var(--s10) 0 var(--s11);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: var(--s9);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   8. Levy calculator — the signature element
   -------------------------------------------------------------------------- */
.calc {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--e4);
  overflow: hidden;
  color: var(--ink);
}

.calc h2,
.calc h3 {
  color: var(--ink);
}

.calc__head {
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--hairline);
}

.calc__head h2 {
  font-family: var(--f-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.calc__head p {
  margin: var(--s1) 0 0;
  color: var(--ink-2);
  font-size: 0.86rem;
  line-height: 1.55;
}

.calc__body {
  padding: var(--s5);
}

.calc__field label {
  display: block;
  margin-bottom: var(--s2);
  font-size: 0.9rem;
  font-weight: 600;
}

.calc__input {
  display: flex;
  align-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--canvas);
  transition:
    border-color 0.16s var(--ease),
    box-shadow 0.16s var(--ease);
}

.calc__input:focus-within {
  border-color: var(--plum-400);
  box-shadow: 0 0 0 3px var(--plum-100);
}

.calc__prefix {
  padding: 0 var(--s2) 0 var(--s4);
  color: var(--ink-2);
  font-weight: 600;
}

.calc__input input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--s4) 0 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.calc__input input:focus {
  outline: none;
}

.calc__slider {
  width: 100%;
  margin: var(--s4) 0 var(--s2);
  accent-color: var(--plum-500);
  cursor: pointer;
}

.calc__scale {
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.calc__out {
  margin-top: var(--s5);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s4);
}

.calc__row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) 0;
}

.calc__row + .calc__row {
  border-top: 1px dotted var(--hairline-strong);
}

.calc__row dt {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.calc__row dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc__row--headline {
  margin-top: var(--s2);
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--amber-soft);
  border-top: 0 !important;
}

.calc__row--headline dt {
  color: #6b4d13;
  font-weight: 600;
}

.calc__row--headline dd {
  color: var(--amber);
  font-size: 1.45rem;
}

.calc__note {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--canvas-soft);
  color: var(--ink-2);
  font-size: 0.86rem;
  line-height: 1.55;
}

.calc__note--warn {
  background: var(--amber-soft);
  color: #6b4d13;
}

.calc__foot {
  padding: var(--s5);
  border-top: 1px solid var(--hairline);
  background: var(--canvas-soft);
}

.calc__foot p {
  margin: var(--s3) 0 0;
  color: var(--ink-2);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. Client logo wall
   -------------------------------------------------------------------------- */
.clients {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}

.clients__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 134px;
  padding: var(--s5) var(--s6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.clients__tile:hover {
  border-color: var(--plum-200);
  box-shadow: var(--e2);
}

.clients__tile img {
  max-height: 66px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* Portrait marks need more height than wordmarks to sit at the same
   optical weight. */
.clients__tile img[data-tall] {
  max-height: 94px;
}

/* Rainbow's mark is artwork on its own dark panel, so it needs less height
   than the wordmark-only logos to sit at the same optical weight. */
.clients__tile img[data-boxed] {
  max-height: 78px;
  border-radius: 4px;
}

@media (min-width: 620px) {
  .clients {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
  }
}

/* --------------------------------------------------------------------------
   10. Ledger (cost-of-inaction figures)
   -------------------------------------------------------------------------- */
.ledger {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-dark);
}

.ledger__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--hairline-dark);
}

.ledger__fig {
  margin: 0;
  font-family: var(--f-body);
  font-size: 2.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--amber-bright);
  white-space: nowrap;
}

.ledger__body {
  color: var(--on-dark-2);
  font-size: 0.98rem;
  line-height: 1.6;
}

.ledger__body b {
  display: block;
  margin-bottom: var(--s1);
  color: #fff;
  font-weight: 700;
}

@media (min-width: 860px) {
  .ledger {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--s7);
  }

  .ledger__item {
    gap: var(--s2);
    align-content: start;
  }
}

/* --------------------------------------------------------------------------
   11. Services — editorial rows, not icon cards
   -------------------------------------------------------------------------- */
.svc {
  border-top: 1px solid var(--hairline-strong);
}

.svc__row {
  display: grid;
  gap: var(--s3) var(--s7);
  padding: var(--s6) var(--s4);
  margin: 0 calc(var(--s4) * -1);
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: background-color 0.18s var(--ease);
}

.svc__row:hover {
  background: var(--plum-050);
}

.svc__name {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.026em;
}

.svc__row:hover .svc__name {
  color: var(--plum-500);
}

.svc__desc {
  color: var(--ink-2);
  max-width: 62ch;
}

.svc__tag {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s3);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
}

@media (min-width: 860px) {
  .svc__row {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   12. Steps (a real sequence, so numbers are earned)
   -------------------------------------------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--s5);
}

.step {
  position: relative;
  padding: var(--s6) var(--s5) var(--s6) var(--s5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  color: var(--ink);
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--s5);
  border-radius: var(--r-sm);
  background: var(--plum-500);
  color: #fff;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.step h3 {
  margin-bottom: var(--s3);
}

.step p {
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5);
  }
}

/* --------------------------------------------------------------------------
   13. SETA / sector table
   -------------------------------------------------------------------------- */
.seta {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  color: var(--ink);
}

.seta caption {
  text-align: left;
  padding-bottom: var(--s4);
  color: var(--ink-2);
  font-size: 0.92rem;
}

.seta th,
.seta td {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.seta thead th {
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.seta tbody th {
  font-weight: 600;
  color: var(--ink);
  padding-right: var(--s5);
}

.seta td {
  color: var(--ink-2);
}

.seta tbody tr:hover th,
.seta tbody tr:hover td {
  background: var(--plum-050);
}

.seta__code {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-sm);
  background: var(--plum-050);
  border: 1px solid var(--plum-100);
  color: var(--plum-500);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   14. Feature / fact panels
   -------------------------------------------------------------------------- */
.panel {
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--e2);
  color: var(--ink);
}

.panel--soft {
  background: var(--canvas-soft);
  box-shadow: none;
}

.panel--dark {
  background: linear-gradient(155deg, var(--plum-600), var(--plum-800));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--e3);
}

.panel--dark h2,
.panel--dark h3,
.panel--dark h4,
.panel--dark strong {
  color: #fff;
}

.panel--dark p {
  color: var(--on-dark-2);
}

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

.checks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--s3);
  line-height: 1.6;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--plum-400);
  border-bottom: 2px solid var(--plum-400);
  transform: rotate(-45deg);
}

.checks--dark li::before {
  border-color: var(--amber-bright);
}

.checks--tight li {
  margin-bottom: var(--s2);
}

/* --------------------------------------------------------------------------
   15. Article cards
   -------------------------------------------------------------------------- */
.posts {
  display: grid;
  gap: var(--s5);
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: var(--s6);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.post-card:hover {
  transform: translateY(-3px);
  border-color: var(--plum-200);
  box-shadow: var(--e3);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s4);
  color: var(--ink-2);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.post-card__title {
  font-family: var(--f-display);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.022em;
  margin-bottom: var(--s3);
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
}

.post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post-card {
  position: relative;
}

.post-card p {
  color: var(--ink-2);
  margin-bottom: var(--s5);
}

.post-card__more {
  margin-top: auto;
  color: var(--plum-500);
  font-size: 0.92rem;
  font-weight: 600;
}

@media (min-width: 880px) {
  .posts--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .posts--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   16. Article body
   -------------------------------------------------------------------------- */
.article-head {
  padding: var(--s8) 0 var(--s6);
}

.prose {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink);
}

.prose h2 {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.026em;
  margin: var(--s8) 0 var(--s4);
}

.prose h3 {
  font-family: var(--f-body);
  font-size: 1.15rem;
  font-weight: 600;
  margin: var(--s6) 0 var(--s3);
}

.prose ul,
.prose ol {
  margin-bottom: var(--s5);
  padding-left: 1.3rem;
}

.prose li {
  margin-bottom: var(--s3);
}

.prose blockquote {
  margin: var(--s6) 0;
  padding: var(--s5) var(--s6);
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 1.05rem;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s5);
  font-size: 0.95rem;
}

.prose th,
.prose td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.prose thead th {
  border-bottom: 1px solid var(--hairline-strong);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--hairline-strong);
  color: var(--ink);
}

.faq details {
  border-bottom: 1px solid var(--hairline);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  transition: color 0.16s var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--plum-500);
}

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 0.42em;
  border-right: 2px solid var(--plum-400);
  border-bottom: 2px solid var(--plum-400);
  transform: rotate(45deg);
  transition: transform 0.22s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq__answer {
  padding: 0 0 var(--s5);
  max-width: 68ch;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--s4);
}

.form__row {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 620px) {
  .form__row--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.field label,
.fieldset__legend {
  display: block;
  margin-bottom: var(--s2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.field .req {
  color: var(--red);
  margin-left: 2px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.5;
  transition:
    border-color 0.16s var(--ease),
    box-shadow 0.16s var(--ease);
}

.field textarea {
  min-height: 132px;
  padding-top: var(--s3);
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: var(--s8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234a3e5e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  background-size: 14px 9px;
  cursor: pointer;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--plum-300);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--plum-400);
  box-shadow: 0 0 0 3px var(--plum-100);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #6b6183;
}

.field__hint {
  margin-top: var(--s2);
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

.field__error {
  display: none;
  margin-top: var(--s2);
  color: var(--red);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.5;
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--red);
  background: var(--red-soft);
}

.field.is-invalid .field__error {
  display: block;
}

/* Form on a dark panel */
.form--dark .field label,
.form--dark .fieldset__legend {
  color: #fff;
}

.form--dark .field input,
.form--dark .field select,
.form--dark .field textarea {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.form--dark .field input::placeholder,
.form--dark .field textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form--dark .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e6dcf5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  background-size: 14px 9px;
}

.form--dark .field select option {
  background: var(--plum-700);
  color: #fff;
}

.form--dark .field input:focus,
.form--dark .field select:focus,
.form--dark .field textarea:focus {
  border-color: var(--amber-bright);
  box-shadow: 0 0 0 3px rgba(224, 169, 74, 0.25);
}

.form--dark .field__hint {
  color: var(--on-dark-2);
}

.form--dark .field__error {
  color: #ffb4ae;
}

.form--dark .field.is-invalid input,
.form--dark .field.is-invalid select,
.form--dark .field.is-invalid textarea {
  border-color: #ffb4ae;
  background: rgba(255, 120, 110, 0.12);
}

.form--dark .form__legal {
  color: var(--on-dark-2);
}

.form__legal {
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* Honeypot — hidden from people, visible to naive bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form status messages */
.form__status {
  display: none;
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  line-height: 1.6;
}

.form__status.is-visible {
  display: block;
}

.form__status--ok {
  background: var(--green-soft);
  border: 1px solid #b7ddcc;
  color: #0d4d36;
}

.form__status--err {
  background: var(--red-soft);
  border: 1px solid #f0c4c1;
  color: #7d1a15;
}

.form--dark .form__status--ok {
  background: rgba(46, 190, 140, 0.16);
  border-color: rgba(46, 190, 140, 0.45);
  color: #c7f4e2;
}

.form--dark .form__status--err {
  background: rgba(255, 120, 110, 0.14);
  border-color: rgba(255, 150, 142, 0.45);
  color: #ffd5d2;
}

.btn.is-busy {
  pointer-events: none;
  opacity: 0.75;
}

.spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn.is-busy .spinner {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   19. Callback strip
   -------------------------------------------------------------------------- */
.callback__grid {
  display: grid;
  gap: var(--s8);
  align-items: start;
}

@media (min-width: 960px) {
  .callback__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: var(--s9);
  }
}

.callback__card {
  padding: var(--s6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--r-lg);
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   20. Contact details block
   -------------------------------------------------------------------------- */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}

.contact-list li:first-child {
  padding-top: 0;
}

.contact-list dt,
.contact-list__label {
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--s1);
}

.contact-list__value {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 600;
  word-break: break-word;
}

.contact-list__value a {
  display: inline-block;
  min-height: 44px;
  padding: var(--s1) 0;
  color: var(--ink);
  text-decoration-color: var(--plum-300);
}

.contact-list__value a:hover {
  color: var(--plum-500);
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--plum-900);
  color: var(--on-dark-2);
  padding: var(--s9) 0 var(--s6);
}

.footer__grid {
  display: grid;
  gap: var(--s7);
}

.footer__brand img {
  height: 32px;
  width: auto;
  margin-bottom: var(--s4);
}

.footer__brand p {
  max-width: 34ch;
  font-size: 0.92rem;
  line-height: 1.65;
}

.footer__col h3 {
  margin-bottom: var(--s4);
  font-family: var(--f-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.footer__col li {
  margin-bottom: var(--s1);
}

.footer__col a:not(.btn) {
  display: inline-block;
  min-height: 44px;
  padding: var(--s2) 0;
}

.footer__col a:not(.btn) {
  color: var(--on-dark-2);
  font-size: 0.94rem;
  text-decoration: none;
}

.footer__col a:not(.btn):hover {
  color: #fff;
  text-decoration: underline;
}

.footer__bottom {
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3) var(--s6);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-dark);
  font-size: 0.84rem;
}

@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--s6);
  }
}

/* --------------------------------------------------------------------------
   22. Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  padding: var(--s9) 0;
}

.page-head h1 {
  color: #fff;
  max-width: 20ch;
}

.page-head .lede {
  margin-top: var(--s5);
  max-width: 58ch;
}

.crumbs {
  margin-bottom: var(--s5);
  font-size: 0.88rem;
  color: var(--on-dark-2);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark-2);
  text-decoration: none;
}

.crumbs a:hover {
  color: #fff;
  text-decoration: underline;
}

.crumbs span {
  margin: 0 var(--s2);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   23. Reveal on scroll
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

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

/* --------------------------------------------------------------------------
   24. Utilities
   -------------------------------------------------------------------------- */
.stack-4 > * + * {
  margin-top: var(--s4);
}

.stack-5 > * + * {
  margin-top: var(--s5);
}

.stack-6 > * + * {
  margin-top: var(--s6);
}

.mt-5 {
  margin-top: var(--s5);
}

.mt-6 {
  margin-top: var(--s6);
}

.mt-7 {
  margin-top: var(--s7);
}

.mb-0 {
  margin-bottom: 0;
}

.center {
  text-align: center;
}

.nowrap {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   25. Select
   The native control renders an operating-system menu that cannot be styled,
   so it is kept in the DOM as the form value and hidden, and this listbox is
   drawn on top of it. Without JavaScript the native control is shown instead.
   -------------------------------------------------------------------------- */
.sel {
  position: relative;
}

.sel__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sel__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  min-height: 50px;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s var(--ease),
    box-shadow 0.16s var(--ease);
}

.sel__btn:hover {
  border-color: var(--plum-300);
}

.sel__btn[aria-expanded="true"] {
  border-color: var(--plum-400);
  box-shadow: 0 0 0 3px var(--plum-100);
}

.sel__btn.is-placeholder .sel__value {
  color: #6b6183;
  font-weight: 400;
}

.sel__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sel__chev {
  flex: 0 0 auto;
  transition: transform 0.2s var(--ease);
}

.sel__btn[aria-expanded="true"] .sel__chev {
  transform: rotate(180deg);
}

.sel__list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  margin: 0;
  padding: var(--s2);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  box-shadow: var(--e3);
}

.sel__opt {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.4;
  cursor: pointer;
}

.sel__opt:hover,
.sel__opt.is-active {
  background: var(--plum-050);
  color: var(--plum-500);
}

.sel__opt[aria-selected="true"] {
  font-weight: 600;
  color: var(--plum-500);
}

.sel__opt[aria-selected="true"]::after {
  content: "";
  float: right;
  width: 10px;
  height: 6px;
  margin-top: 0.45em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* On the deep plum callback panel */
.form--dark .sel__btn {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.form--dark .sel__btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.form--dark .sel__btn[aria-expanded="true"] {
  border-color: var(--amber-bright);
  box-shadow: 0 0 0 3px rgba(224, 169, 74, 0.25);
}

.form--dark .sel__btn.is-placeholder .sel__value {
  color: rgba(255, 255, 255, 0.55);
}

.form--dark .sel__list {
  background: var(--plum-700);
  border-color: rgba(255, 255, 255, 0.24);
}

.form--dark .sel__opt {
  color: #fff;
}

.form--dark .sel__opt:hover,
.form--dark .sel__opt.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.form--dark .sel__opt[aria-selected="true"] {
  color: var(--amber-bright);
}

/* --------------------------------------------------------------------------
   26. Inline article CTA
   Retention data from the Mantis tracker shows the average reader stops around
   40% of the way down an article, and a quarter of articles lose the average
   reader before 25%. A call to action sitting only at the foot of the page is
   therefore invisible to most of the people who read the piece. This one sits
   just after the opening section, near 18% depth.

   No accent bar on any edge: the box is defined by a full hairline and a tinted
   ground, so it reads as a considered aside rather than an advert break.
   -------------------------------------------------------------------------- */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
  margin: var(--s7) 0;
  padding: var(--s5) var(--s6);
  background: var(--plum-050);
  border: 1px solid var(--plum-100);
  border-radius: var(--r-lg);
}

.cta-inline p {
  flex: 1 1 22ch;
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}

.cta-inline p b {
  font-weight: 700;
}

.cta-inline .btn {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .cta-inline {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .cta-inline .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   27. Levy split figure
   Part-to-whole of one year's skills development levy. Two colours only: amber
   for the portion an employer can get back, plum for the portion that never
   returns. The four sub-parts are separated by a 2px surface gap and carried by
   direct labels rather than by four hues, because the brand palette cannot
   supply four categorical steps that clear CVD separation.

   Palette validated with the dataviz validator: #A8721B / #5B3E90 pass the
   lightness band, chroma floor, CVD separation (dE 20.1 tritan), normal-vision
   floor and 3:1 contrast against the surface.

   Built in HTML rather than SVG so the figures are real text: readable by
   screen readers, selectable, and extractable by AI crawlers.
   -------------------------------------------------------------------------- */
.levy-flow {
  margin: var(--s7) 0;
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}

.levy-flow__title {
  margin: 0 0 var(--s2);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.levy-flow__intro {
  margin: 0 0 var(--s5);
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

.levy-flow__bar {
  display: flex;
  gap: 2px;
  height: 36px;
  margin-bottom: var(--s5);
}

.levy-flow__seg {
  min-width: 0;
  border-radius: 4px;
}

.levy-flow__seg--back {
  background: #a8721b;
}

.levy-flow__seg--gone {
  background: #5b3e90;
}

.levy-flow__key {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.levy-flow__key li {
  display: grid;
  grid-template-columns: 14px auto 1fr;
  align-items: baseline;
  gap: var(--s3);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.levy-flow__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  transform: translateY(2px);
}

.levy-flow__swatch--back {
  background: #a8721b;
}

.levy-flow__swatch--gone {
  background: #5b3e90;
}

.levy-flow__pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.levy-flow__note {
  margin: var(--s5) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.55;
}

@media (max-width: 560px) {
  .levy-flow {
    padding: var(--s5) var(--s4);
  }

  .levy-flow__bar {
    height: 30px;
  }

  .levy-flow__key li {
    grid-template-columns: 14px 1fr;
    row-gap: var(--s2);
  }

  .levy-flow__pct {
    grid-column: 2;
  }

  /* The description is the third child of a two-column grid, so without this it
     is auto-placed into the 14px swatch column and wraps one word per line. */
  .levy-flow__key li > span:last-child {
    grid-column: 1 / -1;
  }
}