/* =========================================================
   Components — Mixed Living Knowledge Platform
   ========================================================= */

/* -------------------------------------------------------
   Buttons
   ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:hover {
  text-decoration: none;
}

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

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--color-accent-500);
  color: white;
  border-color: var(--color-accent-500);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.btn--primary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-primary-700);
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-xs);
}

.btn--secondary:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-600);
  color: var(--color-primary-800);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.btn--sm {
  min-height: 36px;
  padding: 0 var(--space-4);
  font-size: var(--text-xs);
}

.btn--lg {
  min-height: 52px;
  padding: 0 var(--space-6);
  font-size: var(--text-base);
}

/* -------------------------------------------------------
   Cards
   ------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition:
    box-shadow var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.card--interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary-200);
  color: inherit;
}

.card--interactive:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

.card--selected {
  border-color: var(--color-primary-500);
  box-shadow: var(--ring);
}

.card__body {
  padding: var(--space-6);
}

.card__header {
  padding: var(--space-6) var(--space-6) 0;
}

.card__footer {
  padding: 0 var(--space-6) var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

/* -------------------------------------------------------
   Badge / tag
   ------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3em 0.7em;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
}

.badge--neutral {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.badge--primary {
  background: var(--color-primary-100);
  color: var(--color-primary-800);
}

.badge--role {
  color: white;
}

.badge--phase {
  color: white;
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

/* Role-specific badge colours */
.badge--role[data-role="care-provider"] { background: var(--role-care-provider); }
.badge--role[data-role="housing-provider"] { background: var(--role-housing-provider); }
.badge--role[data-role="local-authority"] { background: var(--role-local-authority); }
.badge--role[data-role="residents"] { background: var(--role-residents); }
.badge--role[data-role="community-professional"] { background: var(--role-community-professional); }

/* Phase-specific colours */
.badge--phase[data-phase="1"] { background: var(--phase-1); }
.badge--phase[data-phase="2"] { background: var(--phase-2); }
.badge--phase[data-phase="3"] { background: var(--phase-3); }
.badge--phase[data-phase="4"] { background: var(--phase-4); }
.badge--phase[data-phase="5"] { background: var(--phase-5); }

/* -------------------------------------------------------
   Search input
   ------------------------------------------------------- */

.search-box {
  position: relative;
  width: 100%;
}

.search-box__input {
  width: 100%;
  height: 50px;
  padding: 0 var(--space-10) 0 calc(var(--space-10) + 2px);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-box__input:hover {
  border-color: var(--color-primary-300);
}

.search-box__input::-webkit-search-cancel-button {
  display: none;
}

.search-box__input::placeholder {
  color: var(--color-text-light);
}

.search-box__input:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--ring);
  outline: none;
}

.search-box__icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary-600);
  pointer-events: none;
  width: 18px;
  height: 18px;
}

.search-box__clear {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-text-light);
  display: none;
  border-radius: var(--radius-full);
}

.search-box__clear:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.search-box__input:not(:placeholder-shown) ~ .search-box__clear {
  display: flex;
}

/* -------------------------------------------------------
   Language toggle
   ------------------------------------------------------- */

.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
}

.language-toggle__btn {
  min-width: 40px;
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.language-toggle__btn:hover {
  color: var(--color-primary-700);
}

.language-toggle__btn.is-active {
  background: var(--color-surface);
  color: var(--color-primary-700);
  box-shadow: var(--shadow-sm);
}

.language-toggle__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------
   Filter chip
   ------------------------------------------------------- */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 34px;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.filter-chip:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
  color: var(--color-text);
}

.filter-chip.is-active {
  background: var(--color-primary-50);
  border-color: var(--color-primary-600);
  color: var(--color-primary-800);
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 0 0 0 1px var(--color-primary-600);
}

.filter-chip.is-active::before {
  content: "✓";
  font-weight: var(--font-weight-bold);
}

.filter-chip:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------
   Phase step / breadcrumb
   ------------------------------------------------------- */

.phase-steps {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  padding: var(--space-1);
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface-2);
  scrollbar-width: none;
}

.phase-steps::-webkit-scrollbar {
  display: none;
}

.phase-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
  white-space: nowrap;
  flex: 1 0 auto;
  justify-content: center;
  background: transparent;
  position: relative;
}

.phase-step:last-child {
  border-right: none;
}

.phase-step:hover {
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.phase-step.is-active {
  color: white;
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}

.phase-step.is-active[data-phase="1"] { background: var(--phase-1); border-color: var(--phase-1); }
.phase-step.is-active[data-phase="2"] { background: var(--phase-2); border-color: var(--phase-2); }
.phase-step.is-active[data-phase="3"] { background: var(--phase-3); border-color: var(--phase-3); }
.phase-step.is-active[data-phase="4"] { background: var(--phase-4); border-color: var(--phase-4); }
.phase-step.is-active[data-phase="5"] { background: var(--phase-5); border-color: var(--phase-5); }

.phase-step:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.phase-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  background: rgb(0 0 0 / 0.08);
  flex-shrink: 0;
}

.phase-step.is-active .phase-step__number {
  background: rgb(255 255 255 / 0.22);
}

/* -------------------------------------------------------
   Role selector
   ------------------------------------------------------- */

.role-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.role-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.role-btn:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
  color: var(--color-text);
}

.role-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.role-btn.is-active {
  color: white;
  border-color: transparent;
  background: var(--color-primary-600);
  box-shadow: var(--shadow-sm);
}

.role-btn.is-active[data-role="care-provider"]         { background: var(--role-care-provider); }
.role-btn.is-active[data-role="housing-provider"]      { background: var(--role-housing-provider); }
.role-btn.is-active[data-role="local-authority"]       { background: var(--role-local-authority); }
.role-btn.is-active[data-role="residents"]             { background: var(--role-residents); }
.role-btn.is-active[data-role="community-professional"] { background: var(--role-community-professional); }

.role-btn__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* -------------------------------------------------------
   Phase content items
   ------------------------------------------------------- */

.phase-item {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-3);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.phase-item:hover {
  box-shadow: var(--shadow-sm);
}

.phase-item[data-type="task"] {
  border-left-color: var(--color-primary-400);
}

.phase-item[data-type="result"] {
  border-left-color: var(--brand-yellow);
  background: var(--brand-yellow-100);
}

.phase-item[data-type="resource"] {
  border-left-color: var(--color-neutral-400);
  background: var(--color-neutral-50);
}

.phase-item__type-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
}

.phase-item__general {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.phase-item__shared {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.phase-item__role-text {
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}

.phase-item__role-text.is-highlighted {
  border: 1px solid currentColor;
  background: white;
}

.phase-item__role-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.journey-phase-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 1024px) {
  .journey-phase-layout {
    grid-template-columns: 1fr;
  }

  .journey-phase-menu {
    position: static;
  }
}
.journey-phase-menu {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.journey-menu-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
}

.journey-menu-card--nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.journey-menu-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  margin-bottom: var(--space-3);
}

.journey-menu-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.journey-menu-link {
  width: 100%;
  text-align: left;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.journey-menu-link:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-800);
}

.journey-menu-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.journey-menu-list {
  margin: 0;
  padding-left: var(--space-4);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.journey-menu-card .btn {
  margin-top: var(--space-3);
}

/* Role choice in the narrow phase sidebar: a vertical option list */
.journey-menu-card .role-selector {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.journey-menu-card .role-btn {
  justify-content: flex-start;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-align: left;
  line-height: var(--line-height-snug);
}

.journey-menu-card--nav .btn {
  margin-top: 0;
}

.journey-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.journey-phase-workspace {
  min-width: 0;
}

.phase-workspace-section {
  margin-bottom: var(--space-10);
}

.phase-workspace-section__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.phase-summary-list {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.phase-expandable {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  transition: border-color var(--transition-fast);
}

.phase-expandable:hover {
  border-color: var(--color-primary-200);
}

.phase-expandable summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

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

.phase-expandable__preview {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.phase-expandable__more,
.phase-expandable__less {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-700);
  white-space: nowrap;
}

.phase-expandable__less {
  display: none;
}

.phase-expandable[open] .phase-expandable__more {
  display: none;
}

.phase-expandable[open] .phase-expandable__less {
  display: inline;
}

.phase-expandable__content {
  padding: 0 var(--space-4) var(--space-4);
}

/* -------------------------------------------------------
   Journey overview and phase heading
   ------------------------------------------------------- */

.journey-how {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.journey-how__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.journey-how__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--brand-blue-100);
  color: var(--color-primary-800);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

.journey-how__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}

.role-selection-bar {
  margin-bottom: var(--space-10);
}

.role-selection-bar__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.phases-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.phase-card {
  border-left: 4px solid var(--phase-color);
}

.phase-card:hover {
  border-left-color: var(--phase-color);
}

.phase-card__body {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.phase-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--phase-color);
  color: white;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
}

.phase-card__text {
  flex: 1;
  min-width: 0;
}

.phase-card__title {
  font-size: var(--text-lg);
  color: var(--color-heading);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-snug);
}

.phase-card__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.phase-card__chevron {
  flex-shrink: 0;
  color: var(--color-text-light);
  transition: transform var(--transition-normal), color var(--transition-normal);
}

.phase-card:hover .phase-card__chevron {
  transform: translateX(4px);
  color: var(--phase-color);
}

.breadcrumb {
  padding-top: var(--space-8);
}

.phase-steps {
  margin-bottom: var(--space-4);
}

.phase-heading {
  padding-top: var(--space-6);
}

.phase-heading__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--phase-color);
  margin-bottom: var(--space-2);
}

.phase-heading .page-heading__title {
  padding-left: var(--space-5);
  border-left: 4px solid var(--phase-color);
}

.error-state .btn {
  margin-top: var(--space-5);
}

@media (max-width: 768px) {
  .journey-how {
    grid-template-columns: 1fr;
  }

  .phase-card__body {
    gap: var(--space-4);
  }

  .phase-card__number {
    width: 44px;
    height: 44px;
    font-size: var(--text-xl);
  }
}

/* -------------------------------------------------------
   Empty state
   ------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: var(--space-20) var(--space-6);
  max-width: 480px;
  margin: 0 auto;
}

.empty-state__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-6);
  color: var(--color-text-light);
}

.empty-state__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-3);
}

.empty-state__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  max-width: none;
}

/* -------------------------------------------------------
   Loading / skeleton
   ------------------------------------------------------- */

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  gap: var(--space-3);
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary-600);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    border-top-color: var(--color-primary-600);
  }
}

/* -------------------------------------------------------
   Error state
   ------------------------------------------------------- */

.error-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  max-width: 480px;
  margin: 0 auto;
}

.error-state__title {
  font-size: var(--text-xl);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-3);
}

.error-state__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}

/* -------------------------------------------------------
   Project card
   ------------------------------------------------------- */

.project-card {
  cursor: pointer;
  margin-bottom: var(--space-3);
  border-left: 4px solid transparent;
}

.project-card:hover {
  border-color: var(--color-primary-200);
  border-left-color: var(--brand-blue);
}

.project-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.project-card .card__body {
  padding: var(--space-4) var(--space-5);
}

.project-card--active,
.project-card--active:hover {
  border-color: var(--color-primary-300);
  border-left-color: var(--brand-teal);
  background: var(--color-primary-50);
}

.project-card__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.project-card__name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-snug);
}

.project-card__location {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.project-card__location svg {
  color: var(--brand-salmon-700);
  flex-shrink: 0;
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.project-card__no-coords {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  margin-top: var(--space-2);
}

.project-card__meta {
  display: grid;
  gap: 2px;
  margin-top: var(--space-2);
}

.project-card__meta-label {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.project-card__meta-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

.project-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 36px;
  margin-bottom: var(--space-3);
}

.project-list-header__count {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-700);
}

.project-empty-state {
  padding: var(--space-10);
}

.project-filters__empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.filter-group {
  margin-bottom: var(--space-5);
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-group__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Collapsible filter panel in the project explorer */
.filter-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.filter-panel__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-4);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-700);
  transition: background-color var(--transition-fast);
}

.filter-panel__summary::-webkit-details-marker {
  display: none;
}

.filter-panel__summary:hover {
  background: var(--color-primary-50);
}

.filter-panel__summary svg {
  flex-shrink: 0;
}

.filter-panel__chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
}

.filter-panel[open] .filter-panel__chevron {
  transform: rotate(180deg);
}

.filter-panel[open] .filter-panel__summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid var(--color-border);
}

.filter-panel__body {
  padding: var(--space-5) var(--space-4);
}

.resources-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.project-explorer__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.project-explorer__header .page-heading__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}

.project-search-filter-bar {
  display: grid;
  gap: var(--space-3);
  margin-bottom: 0;
}

.project-detail-panel {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.project-detail-panel__empty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-muted);
  background: var(--color-bg);
  font-size: var(--text-sm);
}

.project-detail-panel.is-open {
  animation: panel-in var(--transition-slow) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .project-detail-panel.is-open {
    animation: none;
  }
}

.project-detail-panel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.project-detail-panel__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.project-detail-panel__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

.project-detail-panel__location {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.project-detail-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.project-detail-panel__close:hover {
  color: var(--color-text);
  background: var(--color-neutral-200);
  transform: rotate(90deg);
}

.project-detail-media {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-surface));
  border: 1px solid var(--color-primary-100);
}

.project-detail-media p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: none;
}

.project-detail-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.project-detail-section {
  margin-bottom: 0;
}

.project-detail-section__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-3);
  color: var(--color-heading);
}

.project-detail-section__row-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.project-detail-section__row-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.project-detail-links {
  display: grid;
  gap: var(--space-2);
}

.project-detail-comparable__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-3);
}

.project-detail-comparable .card__body {
  padding: var(--space-4);
}

@media (max-width: 768px) {
  .project-map-note {
    display: none;
  }

  .project-detail-panel__header-row,
  .project-detail-panel__actions,
  .project-card__header-row,
  .project-list-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -------------------------------------------------------
   Map container
   ------------------------------------------------------- */

.map-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: var(--color-surface-2);
  position: relative;
  overflow: hidden;
}

.map-svg {
  width: 100%;
  height: 100%;
}

.map-province {
  fill: var(--color-primary-100);
  stroke: white;
  stroke-width: 1;
  transition: fill var(--transition-fast);
  cursor: default;
}

.map-province:hover {
  fill: var(--color-primary-200);
}

.map-marker {
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.map-marker circle {
  fill: var(--marker-fill, var(--color-primary-600));
  stroke: white;
  stroke-width: 2;
  transition: transform var(--transition-fast), fill var(--transition-fast);
  transform-origin: center;
  transform-box: fill-box;
}

.map-marker:hover circle,
.map-marker:focus circle {
  transform: scale(1.3);
}

.map-marker.is-selected circle {
  stroke: var(--color-accent-500);
  stroke-width: 4;
  transform: scale(1.2);
}

.map-marker:focus {
  outline: none;
}

.map-marker:focus circle {
  stroke: var(--color-accent-500);
  stroke-width: 3;
}

.map-tooltip {
  position: absolute;
  background: var(--color-neutral-900);
  color: white;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  line-height: var(--line-height-normal);
  pointer-events: none;
  max-width: 300px;
  white-space: normal;
  text-align: left;
  z-index: var(--z-raised);
  box-shadow: var(--shadow-xl);
}

.map-tooltip.is-below {
  transform: none;
}

.map-tooltip__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.map-tooltip__line {
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 0.9);
}

.map-tooltip__line + .map-tooltip__line {
  margin-top: 2px;
}

/* Legend: a bar below the map, so it never covers markers */
.map-legend {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.map-legend:empty {
  display: none;
}

.map-legend__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-700);
}

.map-legend__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.map-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-text-muted);
}

.map-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--legend-color);
  flex-shrink: 0;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--space-4);
  color: var(--color-text-muted);
  padding: var(--space-8);
  text-align: center;
}

.map-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--color-text-light);
}

.project-map-note {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  max-width: 280px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--line-height-normal);
  box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------
   Section header
   ------------------------------------------------------- */

.section-header {
  margin-bottom: var(--space-8);
}

.section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary-600);
  margin-bottom: var(--space-3);
}

.section-header__eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--brand-salmon);
}

.section-header__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-tight);
}

.section-header__desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: var(--line-height-relaxed);
}

/* -------------------------------------------------------
   Hero section
   ------------------------------------------------------- */

.hero {
  background: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-600) 50%, var(--color-primary-500) 100%);
  color: white;
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero__inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary-200);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
  color: white;
  margin-bottom: var(--space-5);
  max-width: 16ch;
  line-height: 1.05;
}

.hero__desc {
  font-size: var(--text-xl);
  color: var(--color-primary-100);
  max-width: 50ch;
  margin-bottom: var(--space-8);
  line-height: var(--line-height-relaxed);
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__actions .btn--ghost {
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
}

.hero__actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: white;
}

.hero--home {
  padding-bottom: var(--space-20);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
  gap: var(--space-8);
  align-items: end;
}

.hero-panel {
  position: relative;
  z-index: 1;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.08));
  border: 1px solid rgb(255 255 255 / 0.22);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(12px);
}

.hero-panel__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
  margin-bottom: var(--space-4);
}

.hero-panel__stats {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-3);
  color: white;
}

.hero-panel__stats li {
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
}

.hero-panel__note {
  margin-top: var(--space-6);
  color: var(--color-primary-100);
  font-size: var(--text-sm);
}

/* -------------------------------------------------------
   Entry point cards (home page)
   ------------------------------------------------------- */

.entry-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal);
  cursor: pointer;
}

.entry-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-200);
  transform: translateY(-4px);
  color: inherit;
  text-decoration: none;
}

.entry-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-xl);
}

.entry-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--color-primary-600);
  flex-shrink: 0;
}

.entry-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-3);
}

.entry-card__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  flex: 1;
  max-width: none;
}

.entry-card__arrow {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-600);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--transition-normal);
}

.entry-card:hover .entry-card__arrow {
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .entry-cards {
    grid-template-columns: 1fr;
  }

  .home-hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    padding: var(--space-6);
  }
}

.home-band {
  background: linear-gradient(180deg, var(--color-surface-2), rgb(255 255 255 / 0));
}

.home-sequence-grid,
.home-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.home-support-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-sequence-card .card__body,
.home-support-grid .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-step {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.home-support-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}

.home-support-desc {
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  max-width: none;
  flex: 1;
}

@media (max-width: 960px) {
  .home-sequence-grid,
  .home-support-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------
   Inline chip/indicator row
   ------------------------------------------------------- */

.chip-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* -------------------------------------------------------
   Resource item
   ------------------------------------------------------- */

.resource-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.resource-item:hover {
  border-color: var(--color-border-strong);
}

.resource-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.resource-item__body {
  flex: 1;
  min-width: 0;
}

.resource-item__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.resource-item__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: none;
}

.resource-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-link);
  margin-top: var(--space-2);
  font-weight: var(--font-weight-medium);
}

/* -------------------------------------------------------
   Comparison selection panel
   ------------------------------------------------------- */

.compare-bar {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-neutral-900);
  color: white;
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-overlay);
  max-width: calc(100vw - 2 * var(--space-4));
  flex-wrap: wrap;
  justify-content: center;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.compare-bar.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(100%);
  pointer-events: none;
}

/* -------------------------------------------------------
   Tabs
   ------------------------------------------------------- */

.tabs {
  border-bottom: var(--border-width) solid var(--color-border);
  display: flex;
  gap: 0;
  margin-bottom: var(--space-6);
}

.tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.tab:hover {
  color: var(--color-text);
}

.tab.is-active {
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-600);
  font-weight: var(--font-weight-semibold);
}

.tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* -------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.breadcrumb__sep {
  color: var(--color-text-light);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-link);
}

/* -------------------------------------------------------
   Page heading area
   ------------------------------------------------------- */

.page-heading {
  padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
}

.page-heading__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  max-width: 28ch;
}

.page-heading__desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 62ch;
}

/* -------------------------------------------------------
   Info list (project detail)
   ------------------------------------------------------- */

.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.info-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.info-item__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  padding-top: 2px;
}

.info-item__value {
  font-size: var(--text-sm);
  color: var(--color-text);
}

@media (max-width: 480px) {
  .info-item {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* -------------------------------------------------------
   Notification / alert
   ------------------------------------------------------- */

.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border: var(--border-width) solid transparent;
}

.alert--info {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
  color: var(--color-primary-800);
}

.alert--warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.alert--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* =========================================================
   Gemengd Wonen brand components (supplied mock-ups)
   ========================================================= */

.notice {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgb(124 205 216 / 0.6);
  border-left: 4px solid var(--brand-blue);
  background: var(--brand-blue-100);
  border-radius: var(--radius-md);
  color: var(--color-primary-800);
  font-size: var(--text-sm);
  max-width: none;
}

.link-pending {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.photo-credit {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.btn--on-dark {
  background: transparent;
  color: white;
  border-color: rgb(255 255 255 / 0.7);
}

.btn--on-dark:hover {
  background: rgb(255 255 255 / 0.14);
  color: white;
  border-color: white;
}

/* Home hero: teal band with the definition in the brand monospace */
.home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--brand-teal);
  color: white;
  padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* Decorative circles in the brand colours, echoing the round logo */
.home-hero::before,
.home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.home-hero::before {
  width: 520px;
  height: 520px;
  right: -140px;
  top: -160px;
  background: radial-gradient(circle at 30% 70%, rgb(124 205 216 / 0.22), rgb(124 205 216 / 0) 70%);
}

.home-hero::after {
  width: 340px;
  height: 340px;
  right: 12%;
  bottom: -190px;
  border: 44px solid rgb(212 148 120 / 0.2);
}

.home-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.home-hero__title {
  color: white;
  font-size: var(--text-5xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

.home-hero__definition {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  line-height: 1.6;
  max-width: 60ch;
  color: rgb(255 255 255 / 0.94);
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  border-left: 3px solid var(--brand-salmon);
}

.home-hero .badge {
  margin-bottom: var(--space-4);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* Photo strip: salmon-framed project photos (keyboard-scrollable, no autoplay) */
.photo-strip {
  padding: var(--section-space) 0 var(--space-4);
}

.photo-strip__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.photo-strip__header .section-header__title {
  margin-bottom: var(--space-2);
}

.photo-strip__controls {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.photo-strip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--brand-teal);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-xs);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.photo-strip__btn:hover {
  background: var(--brand-teal);
  border-color: var(--brand-teal);
  color: white;
}

.photo-strip__list {
  --strip-inset: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
  list-style: none;
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--strip-inset);
  padding: var(--space-2) var(--strip-inset) var(--space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.photo-card {
  flex: 0 0 auto;
  width: min(340px, 78vw);
  scroll-snap-align: start;
}

.photo-card__link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--brand-salmon);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.photo-card__link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.photo-card__link img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.photo-card__caption {
  display: block;
  padding: var(--space-3) var(--space-1) var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  color: var(--color-primary-900);
}

.photo-card__credit {
  display: block;
  margin-top: var(--space-2);
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Entry cards in brand tones */
.entry-card__title {
  color: var(--color-heading);
}

.entry-card__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  color: var(--color-primary-800);
  transition: transform var(--transition-normal);
}

.entry-card:hover .entry-card__icon {
  transform: scale(1.06);
}

.entry-card--salmon .entry-card__icon { background: var(--brand-salmon-100); }
.entry-card--blue .entry-card__icon { background: var(--brand-blue-100); }
.entry-card--yellow .entry-card__icon { background: var(--brand-yellow-100); }

.entry-card__arrow {
  color: var(--color-link);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

.home-support-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-support-grid .card__body > .btn {
  align-self: flex-start;
}

/* Key advice */
.advice-band {
  background: var(--brand-salmon-100);
}

.advice-list {
  counter-reset: advice;
  list-style: none;
  margin: var(--space-6) 0 var(--space-8);
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 80ch;
}

.advice-list li {
  counter-increment: advice;
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 40px);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.advice-list li::before {
  content: counter(advice);
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--brand-salmon-100);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  color: var(--brand-burgundy);
}

.advice-list--columns {
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  column-gap: var(--space-4);
}

.advice-panel {
  margin-top: var(--space-16);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--radius-xl);
  background: var(--brand-salmon-100);
  border-top: 6px solid var(--brand-salmon);
}

.advice-panel__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.advice-panel__intro {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.journey-advice-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-link);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: var(--space-4);
  text-align: left;
}

.journey-advice-link:hover {
  color: var(--color-link-hover);
}

/* Project panel (mock-up "Voorbeeld projectpagina") */
.project-explorer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.project-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--brand-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.project-panel-header__logo {
  width: 64px;
  height: auto;
  flex-shrink: 0;
}

.project-panel-header__text {
  flex: 1;
  min-width: 0;
}

.project-panel-header__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-800);
}

.project-panel-header__title {
  font-size: var(--text-3xl);
  color: var(--color-primary-800);
  overflow-wrap: anywhere;
}

.project-panel-header__title:focus {
  outline: none;
}

.project-panel-header .project-detail-panel__close {
  background: rgb(255 255 255 / 0.6);
  color: var(--color-primary-800);
}

.project-panel-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.project-text p {
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-3);
  max-width: none;
}

.project-text__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.project-text__source {
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted);
}

.project-panel-media {
  display: grid;
  gap: var(--space-3);
}

.project-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-sm);
}

.project-photo-placeholder {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.project-photo-placeholder img {
  width: 56px;
  opacity: 0.55;
}

.fact-tiles {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.fact-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.fact-tile:hover {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow-sm);
}

.fact-tile__icon {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-2);
}

.fact-tile__label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-700);
}

.fact-tile__value {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.fact-tile__value.is-unknown {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.fact-tile--links .fact-tile__value {
  display: grid;
  gap: var(--space-1);
}

.project-more {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.project-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  transition: background-color var(--transition-fast);
}

.project-more > summary::-webkit-details-marker {
  display: none;
}

.project-more > summary::after {
  content: "+";
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-primary-600);
}

.project-more[open] > summary::after {
  content: "−";
}

.project-more > summary:hover {
  background: var(--color-primary-50);
}

.project-more > .info-list {
  padding: var(--space-2) var(--space-5) var(--space-5);
}

.project-more .info-item {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.project-more .info-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Map pins, group markers and popover */
.map-province {
  fill: var(--brand-blue-100);
  stroke: white;
  stroke-width: 1.2;
}

.map-province:hover {
  fill: #cdecf0;
}

.map-pin__shape,
.map-group__shape {
  transition: transform var(--transition-fast);
}

.map-pin__shape > path:first-child {
  stroke: white;
  stroke-width: 1.5;
}

.map-pin:hover .map-pin__shape,
.map-pin:focus-visible .map-pin__shape,
.map-group:hover .map-group__shape,
.map-group:focus-visible .map-group__shape {
  transform: scale(1.25);
}

.map-pin.is-selected .map-pin__shape {
  transform: scale(1.4);
}

.map-pin.is-selected .map-pin__shape > path:first-child,
.map-pin:focus-visible .map-pin__shape > path:first-child {
  stroke: var(--brand-yellow);
  stroke-width: 3;
}

.map-group__shape circle {
  fill: var(--brand-teal);
  stroke: var(--brand-salmon);
  stroke-width: 3;
}

.map-group.is-selected .map-group__shape circle,
.map-group:focus-visible .map-group__shape circle {
  stroke: var(--brand-yellow);
  stroke-width: 4;
}

.map-group__shape text {
  fill: white;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.map-marker:focus {
  outline: none;
}

.map-group-popover {
  position: absolute;
  z-index: var(--z-dropdown);
  width: min(320px, calc(100% - 24px));
  max-height: min(360px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--brand-salmon);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.map-group-popover[hidden] {
  display: none;
}

.map-group-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4);
}

.map-group-popover__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  font-size: var(--text-sm);
}

.map-group-popover__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  font-size: 1.3rem;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  transition: background-color var(--transition-fast);
}

.map-group-popover__close:hover {
  background: var(--color-neutral-200);
  color: var(--color-text);
}

.map-group-popover__list {
  list-style: none;
  padding: 0 var(--space-2) var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.map-group-popover__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background-color var(--transition-fast);
}

.map-group-popover__item:hover,
.map-group-popover__item.is-selected {
  background: var(--brand-blue-100);
}

.map-group-popover__item svg {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.map-group-popover__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.map-group-popover__name {
  font-weight: var(--font-weight-semibold);
}

.map-group-popover__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.map-legend__item svg {
  flex-shrink: 0;
  width: auto;
  height: 16px;
}

.map-legend__group {
  fill: var(--brand-teal);
  stroke: var(--brand-salmon);
  stroke-width: 2.5;
}

.map-legend__group-text {
  fill: white;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
}

.map-legend__note {
  margin-left: auto;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--color-text-light);
}

/* Over ons page */
.about-page,
.contact-page {
  max-width: 1080px;
}

.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-10);
  align-items: start;
  margin-bottom: var(--space-16);
}

.about-intro__text p {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-neutral-800);
}

.about-intro__text p + p {
  margin-top: var(--space-5);
}

.about-links-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--brand-blue-100);
  border-top: 4px solid var(--brand-blue);
}

.about-links-card__title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary-700);
  margin-bottom: var(--space-4);
}

.about-links {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.about-block {
  margin-bottom: var(--space-16);
}

.about-block__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-6);
}

.about-definition {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.6;
  padding: var(--space-5);
  border-left: 4px solid var(--brand-salmon);
  background: var(--brand-salmon-100);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Accordion (background texts, closed by default) */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.accordion__item + .accordion__item {
  border-top: 1px solid var(--color-border);
}

.accordion__item:focus {
  outline: none;
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-4) var(--space-6);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  transition: background-color var(--transition-fast);
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--color-primary-600);
  border-bottom: 2px solid var(--color-primary-600);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--transition-fast);
}

.accordion__item[open] > .accordion__summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.accordion__summary:hover {
  background: var(--color-primary-50);
}

.accordion__summary:focus-visible {
  outline-offset: -3px;
}

.accordion__content {
  padding: 0 var(--space-6) var(--space-6);
  max-width: 78ch;
}

.accordion__content h3 {
  font-size: var(--text-lg);
  margin: var(--space-5) 0 var(--space-2);
}

.accordion__content p,
.accordion__content li {
  margin-bottom: var(--space-3);
}

.accordion__content ul {
  margin-bottom: var(--space-4);
}

.team-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-5);
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.team-card__img,
.team-card__initials {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.team-card__img {
  object-fit: cover;
  border: 4px solid var(--brand-salmon);
}

.team-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-blue-100);
  border: 4px solid var(--brand-blue);
  color: var(--color-primary-800);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
}

.team-card__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  color: var(--color-heading);
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

.team-card .photo-credit {
  margin-top: var(--space-2);
}

.about-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--brand-teal);
  color: white;
}

.about-cta__text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: white;
}

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.contact-card--accent {
  background: var(--brand-salmon-100);
  border-color: transparent;
  border-top: 4px solid var(--brand-salmon);
}

.contact-card__title {
  font-size: var(--text-2xl);
}

.contact-card p {
  color: var(--color-neutral-800);
}

.contact-list {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.contact-list div {
  display: grid;
  gap: 2px;
}

.contact-list dt {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.contact-list dd {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  overflow-wrap: anywhere;
}

.placeholder-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Example documents */
.resource-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.resources-context {
  display: inline-flex;
  margin-bottom: var(--space-5);
}

.resources-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}

.resources-list .resource-card,
.resources-list .resource-item {
  height: 100%;
}

.resources-list .resource-item {
  display: flex;
  padding: 0;
  border-radius: var(--radius-lg);
}

.resources-list .resource-item .card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.resources-list .resource-item__title {
  font-size: var(--text-lg);
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}

.resource-doc-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-blue-100);
  color: var(--brand-teal);
  margin-bottom: var(--space-2);
}

.resource-item__meta {
  margin: var(--space-2) 0 0;
}

.resource-item__status {
  margin-top: auto;
  padding-top: var(--space-3);
}

@media (max-width: 1024px) {
  .about-intro {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .home-support-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: var(--space-6);
  }

  .about-cta {
    padding: var(--space-6);
  }
}

@media (max-width: 640px) {
  .photo-strip__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-hero::before,
  .home-hero::after {
    display: none;
  }

  .project-panel-header__logo {
    width: 48px;
  }

  .project-panel-header__title {
    font-size: var(--text-2xl);
  }

  .accordion__summary {
    padding: var(--space-4);
    font-size: var(--text-base);
  }

  .accordion__content {
    padding: 0 var(--space-4) var(--space-5);
  }
}

/* =========================================================================
   Version 5: light hero, step-plan stepper, compact project facts
   ========================================================================= */

/* Home hero: light background, short text left, project photo right */
.home-hero {
  background: var(--color-primary-50);
  color: var(--color-text);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0;
}

.home-hero::before,
.home-hero::after {
  display: none;
}

.home-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.home-hero__title {
  color: var(--color-primary-700);
  margin-bottom: var(--space-4);
}

.home-hero__lead {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.55;
  max-width: 34ch;
  color: var(--color-text);
}

.home-hero__actions {
  margin-top: var(--space-6);
}

.home-hero__media {
  margin: 0;
}

.home-hero__media img {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.home-hero__caption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .home-hero__inner {
    grid-template-columns: 1fr;
  }

  .home-hero__media img {
    max-height: 300px;
  }
}

.photo-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.photo-card__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-700);
}

.photo-card__place {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.photo-card__summary {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}

.photo-strip__footer {
  margin-top: var(--space-6);
}

/* Research advice as compact cards (one consistent list from site-content.json) */
.advice-cards {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4);
}

.advice-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.advice-card p {
  margin: 0;
  line-height: 1.5;
}

.advice-card__number {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-600);
  color: white;
  font-weight: var(--font-weight-bold);
}

.home-register__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  background: var(--color-primary-50);
  border-radius: var(--radius-xl);
}

.home-register__title {
  margin-bottom: var(--space-2);
  color: var(--color-primary-700);
}

/* Step plan: all phases always visible */
.journey-stepper__list {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  counter-reset: none;
}

.journey-step {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  text-decoration: none;
}

.journey-step:hover {
  border-color: var(--phase-color);
  color: var(--color-text);
}

.journey-step.is-active {
  background: var(--color-surface);
  border-color: var(--phase-color);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.journey-step__number {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-neutral-300);
  color: white;
  font-weight: var(--font-weight-bold);
}

.journey-step.is-active .journey-step__number {
  background: var(--phase-color);
}

.journey-step__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.journey-step__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.journey-step__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .journey-stepper__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 70vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
  }

  .journey-stepper__item {
    scroll-snap-align: start;
  }
}

.journey-panel {
  border-top: 4px solid var(--phase-color);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6) clamp(1rem, 0.5rem + 2vw, 2rem);
  box-shadow: var(--shadow-sm);
}

.journey-panel__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
}

.journey-panel__title:focus {
  outline: none;
}

.journey-panel__phase {
  display: block;
  font-size: var(--text-sm);
  color: var(--phase-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.journey-roles {
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.journey-roles__label {
  font-weight: var(--font-weight-bold);
}

.journey-roles__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.role-btn.is-inactive {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}

.journey-only-mine {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.journey-block {
  margin-top: var(--space-6);
}

.journey-block__title {
  font-size: var(--text-lg);
  color: var(--color-primary-700);
  margin-bottom: var(--space-3);
}

details.journey-block > summary {
  cursor: pointer;
}

.journey-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.journey-task {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.journey-task__topic {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.journey-task__text {
  margin: 0;
  white-space: pre-line;
}

.journey-role-group,
.journey-result__role {
  border-left: 4px solid var(--role-color);
  padding-left: var(--space-4);
  margin-top: var(--space-4);
  transition: opacity var(--transition-fast);
}

.journey-role-group__title,
.journey-result__role-label {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.journey-role-group.is-highlighted .journey-task {
  border-color: var(--role-color);
  background: var(--color-primary-50);
}

.journey-role-group.is-dimmed,
.journey-result__role.is-dimmed {
  opacity: 0.5;
}

.journey-result {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.journey-result__title {
  font-weight: var(--font-weight-bold);
}

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

.journey-docs {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.journey-doc {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}

.journey-doc__roles {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.journey-panel__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* Project facts as a compact key-value table */
.fact-table {
  margin: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.fact-table__row {
  display: grid;
  grid-template-columns: minmax(9rem, 38%) 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.fact-table dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-700);
}

.fact-table dt .fact-tile__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.fact-table dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.fact-table dd.is-unknown {
  color: var(--color-text-light);
}

.credits-list div {
  display: grid;
  grid-template-columns: minmax(10rem, 30%) 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.credits-list dt {
  font-weight: var(--font-weight-bold);
}

.credits-list dd {
  margin: 0;
}

.site-footer__cta {
  margin-top: var(--space-3);
}

.site-footer__credits {
  font-size: var(--text-xs);
}

.site-footer__legal {
  display: inline-flex;
  gap: var(--space-5);
}

/* Map in house colours: blue water, warm light land, so the teal/burgundy pins stand out */
.map-container {
  background: linear-gradient(165deg, #d3eef2 0%, #a9dde5 100%);
}

.map-province {
  fill: #fffaf2;
  stroke: var(--brand-salmon-700);
  stroke-opacity: 0.45;
  stroke-width: 1.2;
}

.map-province:hover {
  fill: var(--brand-yellow-100);
}

.map-legend {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

/* Soft colour bands from the house style */
.home-hero {
  background: linear-gradient(120deg, var(--brand-blue-100) 0%, #f3fafb 55%, var(--brand-salmon-100) 100%);
}

.advice-band {
  background: var(--brand-yellow-100);
}

.advice-card {
  border-color: rgb(233 183 25 / 0.45);
}

.home-register__card {
  background: var(--brand-salmon-100);
  border-left: 6px solid var(--brand-salmon);
}

.layout-split__list {
  background: linear-gradient(180deg, var(--color-surface) 0%, #f7fbfc 100%);
}

/* =========================================================================
   Colour system (house colours only): teal, light blue, salmon, yellow, burgundy.
   Large areas get light tints; full colours are reserved for accents and CTAs.
   ========================================================================= */

:root {
  --brand-stripe: linear-gradient(90deg,
    var(--brand-teal) 0 20%, var(--brand-blue) 20% 40%, var(--brand-salmon) 40% 60%,
    var(--brand-yellow) 60% 80%, var(--brand-burgundy) 80% 100%);
}

/* Five-colour stripe echoing the round logo */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--brand-stripe);
}

.section-header__eyebrow {
  color: var(--brand-burgundy);
}

/* Hero: light and fresh, with brand shapes and a framed photo */
.home-hero::before,
.home-hero::after {
  display: block;
}

.home-hero::before {
  width: 460px;
  height: 460px;
  right: -140px;
  top: -170px;
  background: var(--brand-salmon);
  opacity: 0.3;
}

.home-hero::after {
  width: 220px;
  height: 220px;
  left: -80px;
  bottom: -110px;
  border: 30px solid var(--brand-yellow);
  background: none;
  opacity: 0.5;
}

.home-hero__title::after {
  content: "";
  display: block;
  width: 76px;
  height: 6px;
  margin-top: var(--space-3);
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand-salmon), var(--brand-yellow));
}

.home-hero__media {
  padding: 0 18px 18px 0;
}

.home-hero__media img {
  box-shadow: 18px 18px 0 0 var(--brand-yellow), var(--shadow-lg);
}

/* Featured projects: white cards with a colour accent per card */
.photo-strip {
  background: var(--color-surface);
  padding-bottom: var(--section-space);
}

.photo-card__link {
  padding: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 6px solid var(--card-accent, var(--brand-teal));
}

.photo-card__link img {
  border-radius: 0;
}

.photo-card:nth-child(5n + 2) { --card-accent: var(--brand-salmon); }
.photo-card:nth-child(5n + 3) { --card-accent: var(--brand-burgundy); }
.photo-card:nth-child(5n + 4) { --card-accent: var(--brand-blue-700); }
.photo-card:nth-child(5n + 5) { --card-accent: var(--brand-yellow); }

.photo-card__name {
  font-size: var(--text-lg);
  color: var(--color-primary-800);
}

.photo-card__place {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-burgundy);
}

/* Research advice: yellow band, cards with rotating brand accents */
.advice-card {
  border: 0;
  border-left: 5px solid var(--card-accent, var(--brand-teal));
  box-shadow: var(--shadow-sm);
}

.advice-card__number {
  background: var(--card-accent, var(--brand-teal));
}

.advice-card:nth-child(5n + 2) { --card-accent: var(--brand-burgundy); }
.advice-card:nth-child(5n + 3) { --card-accent: var(--brand-salmon-700); }
.advice-card:nth-child(5n + 4) { --card-accent: var(--brand-blue-700); }
.advice-card:nth-child(5n + 5) { --card-accent: var(--brand-yellow-700); }

/* Register CTA: the one dark brand block on the page */
.home-register__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--brand-teal);
  border-left: 0;
  color: white;
}

.home-register__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -70px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--brand-salmon);
  opacity: 0.4;
}

.home-register__title {
  color: white;
}

.home-register__card p {
  color: rgb(255 255 255 / 0.92);
}

.home-register__card .btn--primary {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--color-primary-900);
}

.home-register__card .btn--primary:hover {
  background: #f3c73a;
  border-color: #f3c73a;
  color: var(--color-primary-900);
}

/* Step plan: phase colours carry through the stepper and panel */
.journey-step.is-active {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface) 70%, var(--brand-blue-100) 100%);
}

.journey-roles {
  background: var(--brand-yellow-100);
}

@media (prefers-reduced-motion: no-preference) {
  .photo-card__link,
  .advice-card {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  }

  .advice-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}