/* ============================================================
   KALVARO DESIGN SYSTEM: COMPONENTS
   Every component required by Web Pack §4, with every listed state.
   ============================================================ */

/* ============================================================
   BUTTONS
   States: default, hover, focus, pressed, disabled, loading.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--control-h-md);
  padding: 0 var(--space-7);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background-color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn .icon { flex: none; }

.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-5); font-size: var(--text-small); }
.btn--lg { min-height: var(--control-h-lg); padding: 0 var(--space-8); }
.btn--block { width: 100%; }

/* Primary */
.btn--primary {
  background: var(--color-action);
  color: var(--color-action-label);
  box-shadow: var(--shadow-xs);
}
.btn--primary:hover { background: var(--color-action-hover); color: var(--color-action-label); }
.btn--primary:active { background: var(--color-action-pressed); transform: translateY(1px); }

/* Secondary: white/transparent with navy border */
.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn--secondary:hover { background: rgba(15, 29, 46, .04); color: var(--color-text); }
.btn--secondary:active { background: rgba(15, 29, 46, .08); transform: translateY(1px); }

/* Inverse: for use on navy */
.btn--inverse {
  background: var(--k-white);
  color: var(--k-navy-800);
}
.btn--inverse:hover { background: var(--k-off-white); color: var(--k-navy-800); }

.on-dark .btn--secondary,
.section--navy .btn--secondary,
.hero .btn--secondary,
.page-hero .btn--secondary,
.cta-band .btn--secondary {
  color: var(--k-white);
  border-color: rgba(255, 255, 255, .45);
}
.on-dark .btn--secondary:hover,
.section--navy .btn--secondary:hover,
.hero .btn--secondary:hover,
.page-hero .btn--secondary:hover,
.cta-band .btn--secondary:hover { background: rgba(255, 255, 255, .10); color: var(--k-white); }

/* Tertiary / text link button */
.btn--text {
  /* Padded rather than bare, so Edit and Remove reach a usable target size. */
  padding: var(--space-3) var(--space-4);
  margin: calc(var(--space-3) * -1) calc(var(--space-4) * -1);
  min-height: 36px;
  color: var(--color-action-text);
  font-weight: var(--fw-bold);
}
.btn--text:hover { color: var(--color-action-pressed); text-decoration: underline; }

/* Disabled + loading */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--k-grey-200);
  border-color: var(--k-grey-200);
  /* These buttons stay operable so the user can discover why they cannot
     continue, which makes them active controls that must meet 4.5:1. */
  color: var(--k-slate-500);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn[data-loading="true"] { cursor: progress; pointer-events: none; }
.btn[data-loading="true"] .btn__spinner { display: inline-block; }
.btn__spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: k-spin .7s linear infinite;
}
@keyframes k-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .btn--responsive-block { width: 100%; }
}

/* ============================================================
   LINKS
   ============================================================ */
.link {
  color: var(--color-action-text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
}
.link:hover { border-bottom-color: currentColor; }
.on-dark .link, .section--navy .link, .hero .link, .page-hero .link { color: var(--k-emerald-500); }

.link-arrow { display: inline-flex; align-items: center; gap: var(--space-3); }
.link-arrow svg { transition: transform var(--dur-micro) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface-inverse);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-micro) var(--ease);
}
.site-header[data-scrolled="true"] { box-shadow: var(--shadow-lg); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  min-height: 76px;
}
.site-header[data-scrolled="true"] .site-header__inner { min-height: 64px; }
.site-header__inner { transition: min-height var(--dur-micro) var(--ease); }

.brand { display: inline-flex; align-items: center; gap: var(--space-4); text-decoration: none; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name {
  font-size: 1.375rem;
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  color: var(--k-white);
}

.nav { display: flex; align-items: center; gap: var(--space-8); }
.nav__link {
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: var(--text-small);
  padding: var(--space-3) 0;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--k-white); border-bottom-color: rgba(255, 255, 255, .4); }
.nav__link[aria-current="page"] {
  color: var(--k-white);
  font-weight: var(--fw-bold);
  border-bottom-color: var(--k-emerald-500);
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--k-white);
}
.nav-toggle:hover { background: rgba(255, 255, 255, .10); }

@media (max-width: 1023px) {
  .nav--desktop { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Compact primary CTA kept in the header on mobile, so Discuss My Project
   is always reachable without opening the menu. */
.nav--mobile-only { display: none; }
@media (max-width: 1023px) { .nav--mobile-only { display: inline-flex; } }
@media (max-width: 400px)  { .nav--mobile-only { display: none; } }

/* Mobile panel */
.nav-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 88vw);
  background: var(--color-surface-inverse);
  z-index: var(--z-panel);
  padding: var(--space-7) var(--space-7) var(--space-10);
  transform: translateX(100%);
  /* Hidden from the tab order and the accessibility tree while closed.
     A transform alone leaves six focusable links off screen, which a keyboard
     user tabs through on every page while focus is invisible. */
  visibility: hidden;
  transition: transform var(--dur-panel) var(--ease), visibility var(--dur-panel);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.nav-panel[data-open="true"] { transform: translateX(0); visibility: visible; }
.nav-panel__head { display: flex; justify-content: flex-end; margin-bottom: var(--space-5); }
.nav-panel a.nav__link {
  display: block;
  padding: var(--space-5) var(--space-4);
  min-height: 44px;
  border-bottom: 1px solid var(--color-border-inverse);
  font-size: var(--text-body);
}
.nav-panel .btn { margin-top: var(--space-7); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 21, 33, .5);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-panel) var(--ease), visibility var(--dur-panel);
}
.nav-overlay[data-open="true"] { opacity: 1; visibility: visible; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-11);
  align-items: center;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
}
.hero__title { color: var(--k-white); }
.hero__copy { color: var(--color-text-inverse-secondary); font-size: var(--text-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-8); }
.hero__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 3;
  background: var(--k-navy-700);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  /* Two-column hero becomes one column, TEXT BEFORE IMAGE */
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .hero__body { order: 1; }
  .hero__media { order: 2; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .hero__actions .btn { width: 100%; }
}

/* Compact page hero for interior pages */
.page-hero {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding-block: clamp(2.5rem, 2rem + 4vw, 4.5rem);
}
.page-hero h1 { color: var(--k-white); }
.page-hero p { color: var(--color-text-inverse-secondary); }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb { font-size: var(--text-small); margin-bottom: var(--space-5); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; }
.breadcrumb a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.breadcrumb a:hover { color: var(--k-white); text-decoration: underline; }
.breadcrumb li::after { content: "/"; margin-left: var(--space-3); color: rgba(255, 255, 255, .35); }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, .5); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease);
}
.card--flat { box-shadow: none; }
.card--inverse {
  background: var(--color-surface-inverse-alt);
  border-color: var(--color-border-inverse);
  color: var(--color-text-inverse);
}

/* Whole-card link */
.card--link { position: relative; padding: 0; overflow: hidden; }
.card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-border-strong); }
.card--link:focus-within { box-shadow: var(--focus-ring); }
.card__stretch::after { content: ""; position: absolute; inset: 0; }
.card__stretch { text-decoration: none; color: var(--color-text); }
.card--link:hover .card__stretch { color: var(--color-action-text); }
/* The outline is suppressed on the stretched link only because the parent
   card already paints the focus ring via :focus-within. Removing that
   parent rule would leave this element with no visible focus at all. */
.card__stretch:focus-visible { outline: none; }

/* Service card */
.service-card__media { aspect-ratio: 16 / 10; background: var(--k-grey-100); overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: var(--space-6); display: flex; gap: var(--space-5); align-items: flex-start; }
.service-card__body h3 { font-size: 1.0625rem; margin-bottom: var(--space-2); }
.service-card__body p { font-size: var(--text-small); color: var(--color-text-secondary); line-height: var(--lh-base); }

/* Icon badge */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-action-subtle);
  color: var(--color-action-text);
}
.icon-badge--sm { width: 40px; height: 40px; }
.on-dark .icon-badge, .section--navy .icon-badge, .card--inverse .icon-badge,
.hero .icon-badge, .page-hero .icon-badge {
  background: rgba(23, 178, 106, .16);
  color: var(--k-emerald-500);
}

/* Benefit card */
.benefit { text-align: left; }
.benefit h3 { font-size: 1.0625rem; margin: var(--space-5) 0 var(--space-3); }
.benefit p { font-size: var(--text-small); color: var(--color-text-secondary); line-height: var(--lh-base); }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip {
  position: relative;
  margin-top: calc(var(--space-10) * -1);
  z-index: 2;
}
.trust-strip__inner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}
.trust-strip__item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-7);
  border-right: 1px solid var(--color-border);
}
.trust-strip__item:last-child { border-right: none; }
.trust-strip__item h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.trust-strip__item p { font-size: var(--text-small); color: var(--color-text-secondary); line-height: var(--lh-base); }

@media (max-width: 900px) {
  .trust-strip { margin-top: var(--space-9); }
  .trust-strip__inner { grid-template-columns: minmax(0, 1fr); }
  .trust-strip__item { border-right: none; border-bottom: 1px solid var(--color-border); }
  .trust-strip__item:last-child { border-bottom: none; }
}

/* ============================================================
   STEPS (How It Works)
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
  counter-reset: step;
}
.step { position: relative; text-align: center; }
.step__icon { margin-inline: auto; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-action);
  color: var(--color-action-label);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  margin-right: var(--space-3);
  margin-top: 2px;
  flex: none;
}
.step h3 {
  font-size: 1.0625rem;
  margin: var(--space-6) 0 var(--space-3);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  min-height: 2.7em;
}
.step p { font-size: var(--text-small); color: var(--color-text-secondary); line-height: var(--lh-base); margin-inline: auto; }

/* Connector line between steps on desktop */
.steps--connected .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(50% + 34px);
  /* The 34px clears the icon badge; subtracting the grid gap corrects for
     column centres being one gap further apart than 50% of a column implies.
     Without it every dash stops a gap short of the next badge. */
  right: calc(-50% + 34px - var(--space-7));
  border-top: 2px dashed var(--color-border-strong);
}

@media (max-width: 900px) {
  /* Horizontal timeline becomes vertical; step numbers stay visible */
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .step { text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); }
  .step__icon { grid-row: span 2; margin-inline: 0; }
  .step h3 { justify-content: flex-start; margin-top: 0; }
  .step p { margin-inline: 0; }
  .steps--connected .step:not(:last-child)::after { content: none; }
}

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.accordion { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.accordion + .accordion { margin-top: var(--space-4); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  min-height: 56px;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--text-body);
  color: var(--color-text);
}
.accordion__trigger:hover { background: var(--color-surface-inset); }
.accordion__trigger:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.accordion__icon { flex: none; transition: transform var(--dur-micro) var(--ease); color: var(--color-action-text); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { padding: 0 var(--space-6) var(--space-6); }
.accordion__panel p { font-size: var(--text-small); color: var(--color-text-secondary); }
.accordion__panel[hidden] { display: none; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field {
  /* A flex column with the control pushed to the bottom, so that two fields
     sitting side by side in a grid keep their inputs on the same line even
     when one has a two-line hint and the other has none. */
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-7);
}
.field > .input,
.field > .textarea,
.field > .select { margin-top: auto; }
.field__label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.field__required { color: var(--color-error); margin-left: 2px; }
.field__hint {
  display: block;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  line-height: var(--lh-base);
}

.input, .textarea, .select {
  width: 100%;
  min-height: var(--control-h-md);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  color: var(--color-text);
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--k-slate-400); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-action);
  box-shadow: var(--focus-ring);
}
.textarea { min-height: 132px; resize: vertical; line-height: var(--lh-base); padding-block: var(--space-4); }

.select {
  appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-5) center;
}

.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--color-surface-inset);
  color: var(--color-text-muted);
  cursor: not-allowed;
  border-color: var(--color-border);
}

/* Error state: border, icon and message, never colour alone */
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .textarea,
.field[data-invalid="true"] .select {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
}
.field[data-invalid="true"] .input:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .25); }
.field__error {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  color: var(--color-error);
}
.field[data-invalid="true"] .field__error { display: flex; }

.field__counter { display: block; margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-text-muted); }
.field__counter[data-under="true"] { color: var(--color-warning); font-weight: var(--fw-semibold); }

/* Checkbox */
.checkbox { display: flex; gap: var(--space-4); align-items: flex-start; cursor: pointer; padding: var(--space-2) 0; }
.checkbox input[type="checkbox"] {
  appearance: none;
  width: 20px; height: 20px;
  flex: none;
  margin-top: 2px;
  border: 1.5px solid var(--color-border-control);
  border-radius: 5px;
  background: var(--color-surface);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.checkbox input[type="checkbox"]:checked {
  background: var(--color-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center no-repeat;
  border-color: var(--color-action);
}
.checkbox input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.checkbox__label { font-size: var(--text-small); line-height: var(--lh-base); color: var(--color-text-secondary); }

/* Choice card: whole card clickable, selection never by colour alone */
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 900px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .choice-grid { grid-template-columns: minmax(0, 1fr); } }

.choice {
  position: relative;
  display: block;
  border: 1.5px solid var(--color-border-control);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease);
}
.choice:hover { border-color: var(--k-slate-400); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
.choice__media { aspect-ratio: 16 / 10; background: var(--k-grey-100); }
.choice__media img { width: 100%; height: 100%; object-fit: cover; }
.choice__body {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--fw-semibold);
  font-size: var(--text-small);
}
.choice__tick {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex: none;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-control);
  color: transparent;
  transition: all var(--dur-micro) var(--ease);
}
.choice:has(input:checked) { border-color: var(--color-action); border-width: 2.5px; box-shadow: var(--shadow-md); }
.choice:has(input:checked) .choice__tick {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--k-white);
}

/* File uploader */
.uploader {
  border: 2px dashed var(--color-border-control);
  border-radius: var(--radius-lg);
  background: var(--color-surface-inset);
  padding: var(--space-11) var(--space-7);
  text-align: center;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.uploader[data-dragover="true"] { border-color: var(--color-action); background: var(--color-action-subtle); }
.uploader h3 { font-size: 1.0625rem; margin-bottom: var(--space-3); }
.uploader p { font-size: var(--text-small); color: var(--color-text-secondary); margin-inline: auto; }
.uploader__browse { margin-top: var(--space-6); }

.file-list { list-style: none; padding: 0; margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.file-item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.file-item__name { font-size: var(--text-small); font-weight: var(--fw-semibold); }
.file-item__meta { font-size: var(--text-small); color: var(--color-text-muted); }
.file-item[data-state="error"] { border-color: var(--color-error-border); background: var(--color-error-bg); }
.file-item[data-state="error"] .file-item__meta { color: var(--color-error); }
.progress-bar { height: 6px; border-radius: var(--radius-full); background: var(--k-grey-200); overflow: hidden; margin-top: var(--space-3); }
.progress-bar__fill { height: 100%; background: var(--color-action); border-radius: var(--radius-full); transition: width var(--dur-panel) var(--ease); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--text-small);
  line-height: var(--lh-base);
}
.alert h4 { font-size: var(--text-small); margin-bottom: var(--space-2); }
.alert p { max-width: none; }
.alert__icon { flex: none; margin-top: 1px; }
.alert--success { background: var(--color-success-bg); border-color: var(--k-emerald-100); color: var(--color-action-text-tint); }
.alert--info    { background: var(--color-info-bg);    border-color: #B2DDFF;             color: var(--color-info); }
.alert--warning { background: var(--color-warning-bg); border-color: #FEDF89;             color: var(--color-warning); }
.alert--error   { background: var(--color-error-bg);   border-color: var(--color-error-border); color: var(--color-error); }
.alert h4 { color: inherit; }

/* ============================================================
   PROGRESS (journey steps)
   ============================================================ */
.progress { padding-block: var(--space-6); }
.progress__steps { display: flex; align-items: center; gap: var(--space-2); list-style: none; padding: 0; }
.progress__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); min-width: 0; }
.progress__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--k-grey-200);
  color: var(--k-slate-500);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  flex: none;
}
.progress__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.progress__step[data-state="current"] .progress__dot { background: var(--color-action); color: var(--color-action-label); }
.progress__step[data-state="current"] .progress__label { color: var(--color-text); font-weight: var(--fw-bold); }
.progress__step[data-state="done"] .progress__dot { background: var(--k-emerald-100); color: var(--color-action-text-tint); }
.progress__step[data-state="done"] .progress__label { color: var(--color-text-secondary); }
@media (max-width: 767px) { .progress__label { display: none; } }

/* ============================================================
   STATUS PILLS (admin): label + colour, never colour alone
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 3px var(--space-4);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  border: 1px solid;
  white-space: nowrap;
}
.pill--new     { background: var(--color-info-bg);    border-color: #B2DDFF;                   color: var(--color-info); }
.pill--review  { background: var(--color-warning-bg); border-color: #FEDF89;                   color: var(--color-warning); }
.pill--ready   { background: var(--color-success-bg); border-color: var(--k-emerald-100);      color: var(--color-action-text-tint); }
.pill--closed  { background: var(--color-surface-inset); border-color: var(--color-border);    color: var(--color-text-secondary); }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
/* Given tabindex="0" in the markup so it can be scrolled by keyboard. */
.table-wrap:focus-visible { box-shadow: var(--focus-ring); }
.table { font-size: var(--text-small); min-width: 560px; }
.table th, .table td { padding: var(--space-5) var(--space-6); text-align: left; vertical-align: top; }
.table thead th { background: var(--color-surface-inset); font-weight: var(--fw-bold); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.table tbody tr + tr td { border-top: 1px solid var(--color-border); }

/* ============================================================
   CTA BANDS
   ============================================================ */
.cta-band {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--space-9);
  align-items: center;
}
.cta-band h2 { color: var(--k-white); }
.cta-band p { color: var(--color-text-inverse-secondary); }
@media (max-width: 767px) {
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .cta-band .btn { width: 100%; }
}

.final-cta { text-align: center; }
.final-cta p { margin-inline: auto; }
.final-cta .cluster { justify-content: center; margin-top: var(--space-8); }
@media (max-width: 560px) { .final-cta .cluster .btn { width: 100%; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--k-navy-900);
  color: var(--color-text-inverse-secondary);
  padding-block: var(--space-12) var(--space-8);
  font-size: var(--text-small);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--space-9);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border-inverse);
}
@media (max-width: 1023px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

.site-footer h2 {
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-white);
  margin-bottom: var(--space-5);
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.site-footer a { color: var(--color-text-inverse-secondary); text-decoration: none; }
.site-footer a:hover { color: var(--k-white); text-decoration: underline; }
.site-footer p { color: var(--color-text-inverse-secondary); }

.social { display: flex; gap: var(--space-4); margin-top: var(--space-7); }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-inverse);
  color: var(--color-text-inverse-secondary);
}
.social a:hover { background: var(--color-surface-inverse-alt); color: var(--k-white); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-7);
  font-size: 0.8125rem;
}

/* ============================================================
   COOKIE BANNER: Reject and Accept equally accessible
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-toast);
  max-width: 900px;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7);
  align-items: center;
}
.cookie-banner p { font-size: var(--text-small); }
.cookie-banner .cluster .btn { flex: 1; }
@media (max-width: 767px) {
  .cookie-banner { grid-template-columns: minmax(0, 1fr); }
  .cookie-banner .cluster .btn { width: 100%; }
}

/* ============================================================
   JOURNEY LAYOUT
   ============================================================ */
.journey { background: var(--color-bg); min-height: 70vh; padding-block: var(--space-9) var(--space-12); }
.journey__layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
}
@media (max-width: 900px) {
  .journey__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}
.journey__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
}
.journey__actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 560px) {
  .journey__actions { flex-direction: column-reverse; }
  .journey__actions .btn { width: 100%; }
}

.reassure {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-6);
  background: var(--color-surface-inset);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
}

/* ============================================================
   DESIGN SYSTEM REFERENCE PAGE ONLY
   ============================================================ */
.ds-nav {
  position: sticky;
  top: 76px;
  z-index: 10;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-4);
}
.ds-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; }
.ds-nav a {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-surface-inset);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.ds-nav a:hover { background: var(--color-action-subtle); color: var(--color-action-text); }

.ds-block { padding-block: var(--space-10); border-top: 1px solid var(--color-border); }
.ds-block > h2 { margin-bottom: var(--space-3); }
.ds-block > .lead { margin-bottom: var(--space-9); }
.ds-label {
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.ds-row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; margin-bottom: var(--space-8); }
.ds-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}
.ds-panel--navy { background: var(--color-surface-inverse); border-color: var(--color-border-inverse); }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-5); }
.swatch { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.swatch__chip { height: 76px; }
.swatch__meta { padding: var(--space-4) var(--space-5); }
.swatch__name { font-size: var(--text-small); font-weight: var(--fw-bold); }
.swatch__hex { font-size: 0.75rem; color: var(--color-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.type-spec { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-5); padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.type-spec__meta { font-size: 0.75rem; color: var(--color-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-left: auto; white-space: nowrap; }

.space-demo { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.space-demo__item { text-align: center; }
.space-demo__bar { background: var(--color-action); border-radius: 3px; width: 26px; }
.space-demo__label { font-size: 0.6875rem; color: var(--color-text-muted); margin-top: var(--space-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.shadow-demo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-8); }
.shadow-demo__box { height: 88px; background: var(--color-surface); border-radius: var(--radius-md); margin-bottom: var(--space-4); }

/* ============================================================
   ILLUSTRATIONS
   Bespoke SVG scenes from src/partials/illustrations.html.
   These are brand artwork, not photography, and never pretend
   to be a photograph of a partner's completed work.
   ============================================================ */
.illus {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--k-navy-800);
  line-height: 0;
}
.illus svg {
  display: block;
  width: 100%;
  height: auto;
  /* The scenes are composed with breathing room. A small scale-up lets them
     fill the frame without cropping, because the artwork's own background
     rectangle scales with it and no gap can appear at the edges. */
  transform: scale(1.06);
  transform-origin: center;
}

.illus--hero { box-shadow: var(--shadow-xl); }

/* Inside a card, the illustration is the media band, so it follows
   the card's own corner radius rather than carrying its own. */
.illus--card {
  border-radius: 0;
  aspect-ratio: 16 / 10;
}
.illus--card svg { width: 100%; height: 100%; object-fit: cover; }

.illus--tile {
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
}
.illus--tile svg { width: 100%; height: 100%; object-fit: cover; }

/* A caption sitting over the artwork, for the honest photography note. */
.illus__note {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-6);
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--lh-base);
  color: rgba(255, 255, 255, .58);
}

/* ============================================================
   SCROLL REVEAL
   Enhancement only. Without JavaScript, or with reduced motion,
   everything is visible and static.
   ============================================================ */
[data-reveal] {
  opacity: 1;
  transform: none;
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   STAGGERED REVEAL
   When a reveal target is a grid, its children arrive in sequence
   rather than the block arriving as one slab. The container itself
   is never hidden, so nothing is withheld if the sequence fails.
   The transition is removed once finished, which hands the cards
   back their stock hover lift.
   ============================================================ */
.js [data-reveal][data-stagger] { opacity: 1; transform: none; }

.js [data-reveal][data-stagger]:not(.is-done) > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: var(--stagger-delay, 0ms);
}
.js [data-reveal][data-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}
.js [data-reveal][data-stagger].is-done > * { transition: none; }

/* ============================================================
   SCROLL-DRAWN PROCESS LINE
   An emerald fill laid exactly over the dashed connector in
   .steps--connected, plus activation on each numbered dot.
   Purely decorative: with no JavaScript the fill stays at
   scaleX(0) and the stock dashed connector carries on alone,
   so the process is never dependent on motion to be legible.
   ============================================================ */
.steps--connected { position: relative; }

.steps__line {
  position: absolute;
  /* Matches .steps--connected .step::after: first and last column
     centres, inset by the 34px badge gap. The 25px is 34px minus the
     9px by which true column centres sit inside 12.5%, from the gaps. */
  top: 24px;
  left: calc(12.5% + 25px);
  right: calc(12.5% + 25px);
  height: 2px;
  border-radius: var(--radius-full);
  pointer-events: none;
}
.steps__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--k-emerald-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
/* The fill passes behind the icon badges, exactly as the dashes do. */
.steps--connected .step__icon { position: relative; z-index: 1; }

/* Numbered dots stay neutral until the line reaches them. The emerald
   layer is a pseudo-element animated on opacity only, so the digit
   stays white and passes contrast against both fills. */
.js .steps--connected .step__num {
  position: relative;
  isolation: isolate;
  background: var(--k-slate-500);
}
.js .steps--connected .step__num::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--color-action);
  opacity: 0;
  z-index: -1;
  transition: opacity 200ms var(--ease);
}
.js .steps--connected .step__num.is-active::after { opacity: 1; }

@media (max-width: 900px) {
  /* The connector is not drawn on the stacked layout, so nor is the fill.
     Dot activation still runs, which suits the vertical rhythm. */
  .steps__line { display: none; }
}

/* ============================================================
   READING PROGRESS
   Only added by the script, and only on pages long enough to
   warrant it. Fixed above the sticky header, transform-scaled
   so it can never cause layout shift.
   ============================================================ */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
  background: transparent;
}
.read-progress__fill {
  display: block;
  height: 100%;
  background: var(--k-emerald-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ============================================================
   Reduced motion switches all three off and leaves everything
   visible. The script bails too; this is belt and braces for a
   preference changed mid-session.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal][data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .steps__line,
  .read-progress { display: none !important; }
  .js .steps--connected .step__num { background: var(--color-action); }
  .js .steps--connected .step__num::after { opacity: 0 !important; }
}