/* Header — dual crest + logo */
.brand {
  gap: 10px;
}
.brand__samoa-crest,
.brand__mcil-logo {
  height: 64px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}
.brand__samoa-crest {
  border-right: 1px solid var(--c-line);
  padding-right: 10px;
}
.brand__text {
  line-height: 1.2;
  padding-left: 4px;
}
@media (max-width: 700px) {
  .brand__samoa-crest,
  .brand__mcil-logo {
    height: 48px;
  }
  .brand__samoa-crest {
    padding-right: 6px;
  }
}

/* Exposed filter form tweaks */
.doc-filters__form .js-form-item,
.doc-filters__form .form-item {
  margin: 0;
}
.doc-filters__form input[type="submit"],
.doc-filters__form button[type="submit"] {
  display: inline-block;
  padding: 10px 20px;
  background: var(--c-red-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  margin-right: 6px;
}
.doc-filters__form input[type="submit"]:hover,
.doc-filters__form button[type="submit"]:hover {
  background: var(--c-red-700);
}
.doc-filters__form a.button--reset,
.doc-filters__form .button[data-drupal-selector*="reset"] {
  color: var(--c-red-600);
  background: transparent;
  border: none;
  padding: 8px 12px;
  text-decoration: underline;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  font-family: inherit;
}
.doc-filters__actions { border-bottom: none; }

/* Labels inside filter form */
.doc-filters__form label {
  font-size: 0.8125rem;
  color: var(--c-ink-70);
  display: block;
  margin-bottom: 4px;
}

/* Pager */
.pager__items {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 40px; flex-wrap: wrap;
  list-style: none; padding: 0;
}
.pager__item a {
  display: inline-block;
  min-width: 38px; height: 38px; padding: 8px 10px;
  border: 1px solid var(--c-line-dk);
  background: var(--c-paper); color: var(--c-navy-800);
  border-radius: var(--radius-md); font-weight: 500;
  font-size: 0.875rem; text-decoration: none;
  text-align: center;
}
.pager__item a:hover {
  border-color: var(--c-navy-800); background: var(--c-cream);
}
.pager__item--active a,
.pager__item.is-active a {
  background: var(--c-navy-800); color: #fff; border-color: var(--c-navy-800);
}

/* Main nav — tighter spacing so items fit on one row */
.main-nav__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: stretch;
  gap: 0;
}
.main-nav__link {
  padding: 16px 14px;
  font-size: 0.9rem;
  white-space: nowrap;
}
@media (max-width: 1200px) {
  .main-nav__link { padding: 16px 10px; font-size: 0.85rem; }
}

/* Normalise nav item heights so Home aligns with dropdown buttons */
.main-nav__list {
  align-items: center;
  padding: 0;
  margin: 0;
}
.main-nav__item {
  display: flex;
  align-items: stretch;
  list-style: none;
}
.main-nav__link {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  height: auto;
}

/* Prominent red filter button matching prototype brand */
.doc-filters__form input[type="submit"],
.doc-filters__form button[type="submit"] {
  display: inline-block;
  padding: 10px 24px;
  background: var(--c-red-600);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s;
}
.doc-filters__form input[type="submit"]:hover,
.doc-filters__form button[type="submit"]:hover {
  background: var(--c-red-700);
}

/* "Reset" link styling — underlined red like prototype */
.doc-filters__form a[href*="reset"],
.doc-filters__form input[type="submit"][value*="Reset"],
.doc-filters__form .form-actions a {
  display: inline-block;
  background: transparent !important;
  color: var(--c-red-600) !important;
  text-decoration: underline;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 8px 0;
  margin-left: 8px;
}

/* Sort dropdown at top-right */
.doc-results__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--c-ink-70);
}
.doc-results__sort label {
  font-weight: 500;
  color: var(--c-ink-70);
}
.doc-results__sort select {
  padding: 6px 12px;
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--c-paper);
  color: var(--c-navy-800);
  cursor: pointer;
}

/* Date range filters side-by-side labels */
.doc-filters__group input[type="date"] {
  font-size: 0.875rem;
}
.doc-filters__group label {
  font-size: 0.75rem;
  color: var(--c-ink-50);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}

/* Tighten the multiselect lists so they don't take so much vertical space */
.doc-filters__form select[multiple] {
  min-height: 160px;
}

/* Filter form checkboxes */
.doc-filters__form .form-checkboxes,
.doc-filters__form .form-checkboxes .form-item {
  display: block;
  margin-bottom: 6px;
}
.doc-filters__form .form-checkboxes input[type="checkbox"] {
  margin-right: 6px;
  accent-color: var(--c-red-600);
}
.doc-filters__form .form-checkboxes label {
  display: inline;
  font-size: 0.875rem;
  color: var(--c-ink-70);
}
.doc-filters__form .form-checkboxes {
  max-height: 200px;
  overflow-y: auto;
}

/* Nav — no wrap, allow horizontal scroll only on very narrow screens */
@media (min-width: 1024px) {
  .main-nav__list {
    flex-wrap: nowrap;
    overflow-x: visible;
  }
}

/* Clear filters link next to Filter button */
.doc-filters__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.doc-filters__clear {
  color: var(--c-red-600) !important;
  background: transparent !important;
  border: none;
  text-decoration: underline;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 8px 0;
  cursor: pointer;
  font-family: inherit;
}
.doc-filters__clear:hover {
  color: var(--c-red-700) !important;
}

/* Extra-specific button styling — override Drupal defaults */
.doc-filters .form-actions input[type="submit"],
.doc-filters .form-actions .button,
.doc-filters input#edit-submit-document-library {
  background-color: var(--c-red-600) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 24px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.doc-filters .form-actions input[type="submit"]:hover,
.doc-filters .form-actions .button:hover {
  background-color: var(--c-red-700) !important;
}

/* Hide the Filter submit button completely since autosubmit handles it */
.doc-filters__actions input[type="submit"] {
  display: none !important;
}

/* Date range fieldset — lay out From/To inputs cleanly */
.doc-filters__group fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.doc-filters__group fieldset legend {
  display: none;  /* we already have an h3 heading */
}
.doc-filters__group input[type="date"] {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--c-paper);
}
.doc-filters__group .form-item {
  margin-bottom: 6px;
}
.doc-filters__group .form-item label {
  font-size: 0.75rem;
  color: var(--c-ink-50);
  font-weight: 500;
  display: block;
  margin-bottom: 3px;
}

/* Hide the redundant "Keywords" label since h3 already says it */
#edit-keywords--wrapper > label,
.doc-filters__group > .form-item > label[for="edit-keywords"] {
  display: none;
}

/* Hide duplicate "Document type"/"Topic"/"Language" labels inside the group */
.doc-filters__group > .form-item > label {
  display: none;
}

/* Doc-filters group — clean section wrappers */
.doc-filters__group {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
}
.doc-filters__group:last-of-type {
  border-bottom: none;
}
.doc-filters__group h3 {
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-navy-800);
  margin: 0 0 12px;
}

/* Hide Drupal's auto-generated duplicate labels */
.doc-filters__group > .form-item > label,
.doc-filters__group > .js-form-item > label,
.doc-filters__group fieldset > legend {
  display: none !important;
}

/* Keep the From/To sub-labels visible inside date fieldset */
.doc-filters__group fieldset .form-item label {
  display: block !important;
  font-size: 0.75rem;
  color: var(--c-ink-50);
  font-weight: 500;
  margin-bottom: 3px;
}

/* Date fieldset reset */
.doc-filters__group fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.doc-filters__group fieldset .fieldset-wrapper {
  padding: 0;
}
.doc-filters__group input[type="date"] {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--c-paper);
  color: var(--c-ink);
}

/* Checkboxes inside the groups */
.doc-filters__group .form-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.doc-filters__group .form-checkboxes .form-item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.doc-filters__group .form-checkboxes input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--c-red-600);
  margin: 0;
}
.doc-filters__group .form-checkboxes label {
  display: inline !important;
  font-size: 0.875rem;
  color: var(--c-ink-70);
  cursor: pointer;
  margin: 0;
}

/* Radios for Language */
.doc-filters__group .form-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-filters__group .form-radios .form-item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.doc-filters__group .form-radios input[type="radio"] {
  accent-color: var(--c-red-600);
}
.doc-filters__group .form-radios label {
  display: inline !important;
  font-size: 0.875rem;
  color: var(--c-ink-70);
  margin: 0;
}

/* Keywords input full width */
.doc-filters__group input[type="text"],
.doc-filters__group input[name="keywords"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9375rem;
  background: var(--c-paper);
}

/* Clear all filters link */
.doc-filters__actions {
  margin-top: 16px;
}
.doc-filters__clear {
  color: var(--c-red-600) !important;
  background: transparent !important;
  text-decoration: underline;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-block;
  padding: 4px 0;
}
.doc-filters__clear:hover {
  color: var(--c-red-700) !important;
}

/* Date published — match prototype exactly */
.doc-filters__group fieldset .form-item {
  margin-bottom: 10px;
}
.doc-filters__group fieldset .form-item:last-child {
  margin-bottom: 0;
}
.doc-filters__group fieldset .form-item label {
  display: block !important;
  font-size: 0.75rem;
  color: var(--c-ink-50);
  font-weight: 500;
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.doc-filters__group input[type="date"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-line-dk);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9375rem;
  background: var(--c-paper);
  color: var(--c-ink);
  min-height: 42px;
  box-shadow: none;
}
.doc-filters__group input[type="date"]:focus {
  outline: none;
  border-color: var(--c-navy-800);
  box-shadow: 0 0 0 2px var(--c-navy-50);
}
/* Make sure fieldset has no extra padding */
.doc-filters__group fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.doc-filters__group fieldset > legend {
  display: none !important;
}

/* ============ NEWS LISTING PAGE ============ */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 42, 74, 0.1);
}
.news-card__thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-card__body {
  padding: 20px;
  flex: 1;
}
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.news-card__tag {
  background: #FCE6EA;
  color: var(--c-red-700);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
}
.news-card__meta time {
  font-size: 0.8125rem;
  color: var(--c-ink-50);
}
.news-card__title {
  font-family: var(--f-heading);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--c-navy-800);
  margin: 0 0 8px;
}
.news-card__title a {
  color: inherit;
  text-decoration: none;
}
.news-card__title a:hover {
  color: var(--c-red-600);
}
.news-card__summary {
  font-size: 0.875rem;
  color: var(--c-ink-70);
  line-height: 1.5;
  margin: 0;
}

/* ============ NEWS DETAIL PAGE ============ */

.news-detail__date {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  margin: 12px 0 0;
}

.news-detail__body-wrap {
  padding: 48px 0 64px;
}
.news-detail__body {
  max-width: 760px;
  margin: 0 auto;
}
.news-detail__lead {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--c-navy-800);
  font-weight: 500;
  margin: 0 0 32px;
  padding-left: 20px;
  border-left: 3px solid var(--c-red-600);
}
.news-detail__content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-ink);
}
.news-detail__content p {
  margin: 0 0 20px;
}
.news-detail__content h2 {
  font-family: var(--f-heading);
  font-size: 1.5rem;
  color: var(--c-navy-800);
  margin: 32px 0 12px;
}
.news-detail__content h3 {
  font-size: 1.25rem;
  color: var(--c-navy-800);
  margin: 28px 0 10px;
}
.news-detail__content a {
  color: var(--c-red-600);
  text-decoration: underline;
}
.news-detail__content ul,
.news-detail__content ol {
  padding-left: 24px;
  margin: 0 0 20px;
}
.news-detail__content li {
  margin-bottom: 8px;
}
.news-detail__footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.news-detail__footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Page hero breadcrumb — white text on navy */
.page-hero .breadcrumbs {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
  font-size: 0.875rem;
}
.page-hero .breadcrumbs a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.page-hero .breadcrumbs a:hover {
  color: #fff;
  text-decoration: underline;
}


/* ============ SERVICE PAGES — canonical styles ============ */

/* Hero — coloured gradient per service */
.service-hero--red    { background: linear-gradient(135deg, #B32336, #E84057) !important; }
.service-hero--navy   { background: linear-gradient(135deg, #0B2A4A, #123f6a) !important; }
.service-hero--teal   { background: linear-gradient(135deg, #0a5441, #0F6E56) !important; }
.service-hero--siapo  { background: linear-gradient(135deg, #3E2813, #5B3A1F) !important; }
.service-hero--teuila { background: linear-gradient(135deg, #7A1F34, #A03348) !important; }
.service-hero--amber  { background: linear-gradient(135deg, #6B3410, #8C4E21) !important; }

.service-hero .eyebrow { color: #FDF8EC !important; opacity: 0.95; }
.service-hero h1 {
  color: #fff !important;
  display: block !important;
  visibility: visible !important;
  font-size: 3rem;
  line-height: 1.1;
  margin: 0 0 16px;
}
.service-hero .lead {
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 740px;
  font-size: 1.125rem;
  line-height: 1.55;
}

/* Body wrapper */
.service-body-wrap {
  padding: 48px 20px 64px;
}

/* 2-column layout: LEFT side-nav 240px | RIGHT content 1fr */
.service-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .service-layout { grid-template-columns: 1fr; gap: 24px; }
}

/* Left side nav */
.service-side-nav {
  position: sticky;
  top: 24px;
}
.service-side-nav h4 {
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-navy-800);
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.service-side-nav__list,
.service-side-nav__toc ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.service-side-nav__list a,
.service-side-nav__toc a {
  display: block;
  padding: 8px 0;
  color: var(--c-ink-70);
  text-decoration: none;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--c-line);
  transition: color 0.15s;
}
.service-side-nav__list a:hover,
.service-side-nav__toc a:hover {
  color: var(--c-red-600);
}
.service-side-nav__list a.is-active {
  color: var(--c-red-600);
  font-weight: 600;
  border-left: 3px solid var(--c-red-600);
  padding-left: 10px;
  margin-left: -10px;
}
@media (max-width: 900px) {
  .service-side-nav { position: static; }
  .service-side-nav__list a.is-active {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
    border-bottom: 2px solid var(--c-red-600);
  }
}

/* Main content rich body */
.service-content { min-width: 0; }
.service-rich-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-ink);
}
.service-rich-body p { margin: 0 0 16px; }
.service-rich-body h2 {
  font-family: var(--f-heading);
  font-size: 1.5rem;
  color: var(--c-navy-800);
  margin: 36px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-line);
  scroll-margin-top: 80px;
}
.service-rich-body h2:first-child { margin-top: 0; }
.service-rich-body h3 {
  font-size: 1.125rem;
  color: var(--c-navy-800);
  margin: 24px 0 8px;
}
.service-rich-body a {
  color: var(--c-red-600);
  text-decoration: underline;
}
.service-rich-body strong { color: var(--c-navy-800); }
.service-rich-body ul,
.service-rich-body ol { padding-left: 24px; margin: 0 0 16px; }
.service-rich-body li { margin-bottom: 6px; }

/* Callout box */
.service-rich-body .callout {
  background: var(--c-cream);
  border-left: 4px solid var(--c-red-600);
  padding: 16px 20px;
  border-radius: 6px;
  margin: 20px 0;
}
.service-rich-body .callout p { margin: 0; font-size: 0.9375rem; }

/* Subtle blue informational variant. */
.service-rich-body .callout--info {
  background: var(--c-navy-50);
  border-left-color: var(--c-info);
}
.service-rich-body .callout--info a { color: var(--c-navy-700); }

/* Sub-service cards list */
.service-rich-body .sub-service-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}
.service-rich-body .sub-service {
  display: block;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.service-rich-body a.sub-service:hover {
  border-color: var(--c-red-600);
  transform: translateY(-1px);
  text-decoration: none;
}
.service-rich-body .sub-service strong {
  display: block;
  color: var(--c-navy-800);
  font-family: var(--f-heading);
  font-size: 1rem;
  margin-bottom: 4px;
}
.service-rich-body .sub-service span {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-ink-70);
  line-height: 1.45;
}

/* Override active state to match prototype — pink fill with red text */
.service-side-nav__list a.is-active {
  background: #FCE6EA !important;
  color: var(--c-red-600) !important;
  font-weight: 600 !important;
  border-left: none !important;
  border-bottom: 1px solid var(--c-line) !important;
  padding: 10px 12px !important;
  margin-left: 0 !important;
  border-radius: 6px !important;
}

/* Subtle hover for side nav items */
.service-side-nav__list a:not(.is-active):hover {
  background: #F8F5EB;
  padding-left: 12px;
  color: var(--c-red-700);
  border-radius: 6px;
}

/* ============ SERVICE SIDE NAV — final polish to match prototype ============ */

/* Clean base state */
.service-side-nav__list a {
  display: block;
  padding: 10px 14px;
  margin-bottom: 4px;
  color: var(--c-ink-70);
  text-decoration: none;
  font-size: 0.9375rem;
  border: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
}

/* Soft cream hover for non-active items */
.service-side-nav__list a:not(.is-active):hover {
  background: #F8F5EB;
  color: var(--c-ink);
}

/* Active item — pink fill with red vertical bar on left */
.service-side-nav__list a.is-active {
  background: #FCE6EA !important;
  color: var(--c-red-600) !important;
  font-weight: 600;
  border-left: 3px solid var(--c-red-600) !important;
  border-radius: 0 6px 6px 0;
  padding-left: 14px;
}

/* Kill the old bottom borders from the earlier rule */
.service-side-nav__list a,
.service-side-nav__toc a {
  border-bottom: none !important;
}

/* "On this page" TOC — keep clean simple list below */
.service-side-nav__toc a {
  padding: 6px 14px;
  font-size: 0.875rem;
  color: var(--c-ink-70);
}
.service-side-nav__toc a:hover {
  background: #F8F5EB;
  color: var(--c-red-600);
  border-radius: 4px;
}

/* ============ ABOUT PAGES ============ */

/* Dignified navy hero with siapo pattern accent */
.about-hero {
  background: linear-gradient(135deg, #0B2A4A, #123f6a) !important;
  position: relative;
  overflow: hidden;
}
.about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/themes/custom/mcil_theme/img/siapo-pattern.svg');
  background-size: 320px;
  opacity: 0.06;
  pointer-events: none;
}
.about-hero .container {
  position: relative;
  z-index: 1;
}
.about-hero .eyebrow { color: #FDF8EC !important; opacity: 0.95; }
.about-hero h1 {
  color: #fff !important;
  font-size: 3rem;
  line-height: 1.1;
  margin: 0 0 16px;
}
.about-hero .lead {
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 740px;
  font-size: 1.125rem;
  line-height: 1.55;
}

/* ============ STANDALONE PAGES (Contact, Online Services, Legal) ============ */

.standalone-hero {
  background: linear-gradient(135deg, #0B2A4A, #123f6a) !important;
}
.standalone-hero .eyebrow { color: #FDF8EC !important; opacity: 0.95; }
.standalone-hero h1 { color: #fff !important; font-size: 3rem; line-height: 1.1; margin: 0 0 16px; }
.standalone-hero .lead {
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 740px;
  font-size: 1.125rem;
  line-height: 1.55;
}

.standalone-body-wrap {
  padding: 48px 20px 64px;
}
.standalone-body {
  max-width: 820px;
  margin: 0 auto;
}

/* ============ STANDALONE PAGES — type-specific styles ============ */

.standalone-body-wrap {
  padding: 48px 20px 64px;
}

.standalone-page--contact h2 {
  font-family: var(--f-heading);
  font-size: 1.5rem;
  color: var(--c-navy-800);
  margin-top: 0;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-line);
}
.standalone-page--contact h3 {
  font-family: var(--f-heading);
  color: var(--c-navy-800);
}
.standalone-page--contact form input[type="text"],
.standalone-page--contact form input[type="email"],
.standalone-page--contact form input[type="tel"],
.standalone-page--contact form select,
.standalone-page--contact form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9375rem;
  background: #fff;
}
.standalone-page--contact form textarea {
  resize: vertical;
}
.standalone-page--contact form button.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--c-red-600);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.standalone-page--contact form button.btn-primary:hover {
  background: var(--c-red-700);
}

/* Online services — reuse services__grid look */
.standalone-page--online .standalone-body-wrap {
  padding-top: 32px;
}
.standalone-page--online .services__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.standalone-page--online .service-card {
  display: block;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.standalone-page--online .service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 42, 74, 0.08);
}
.standalone-page--online .service-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.standalone-page--online .service-card__accent--red    { background: var(--c-red-600); }
.standalone-page--online .service-card__accent--navy   { background: var(--c-navy-800); }
.standalone-page--online .service-card__accent--teal   { background: #0F6E56; }
.standalone-page--online .service-card__accent--siapo  { background: #5B3A1F; }
.standalone-page--online .service-card__accent--teuila { background: #A03348; }
.standalone-page--online .service-card__accent--amber  { background: #8C4E21; }
.standalone-page--online .service-card h3 {
  font-family: var(--f-heading);
  color: var(--c-navy-800);
  font-size: 1.25rem;
}
.standalone-page--online .service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-red-600);
  font-weight: 600;
  font-size: 0.9375rem;
  margin-top: 8px;
}

/* Legal — with side-nav TOC + rich prose */
.standalone-page--legal .standalone-body-wrap {
  max-width: 1180px;
  margin: 0 auto;
}
.standalone-page--legal .service-rich-body > .page-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .standalone-page--legal .service-rich-body > .page-layout {
    grid-template-columns: 1fr;
  }
}
.standalone-page--legal .side-nav {
  position: sticky;
  top: 24px;
}
.standalone-page--legal .side-nav h4 {
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-navy-800);
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.standalone-page--legal .side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.standalone-page--legal .side-nav li {
  margin: 0;
}
.standalone-page--legal .side-nav a {
  display: block;
  padding: 8px 12px;
  color: var(--c-ink-70);
  text-decoration: none;
  font-size: 0.875rem;
  border-radius: 6px;
}
.standalone-page--legal .side-nav a:hover {
  background: #F8F5EB;
  color: var(--c-red-600);
}
.standalone-page--legal .page-content h2 {
  font-family: var(--f-heading);
  color: var(--c-navy-800);
  font-size: 1.5rem;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-line);
  scroll-margin-top: 80px;
}
.standalone-page--legal .page-content h2:first-child {
  margin-top: 0;
}
.standalone-page--legal .page-content p {
  line-height: 1.7;
  margin-bottom: 16px;
}

/* ============ Contact page H2 — match prototype (Fraunces, no underline) ============ */
.standalone-page--contact .service-rich-body h2 {
  font-family: var(--f-heading) !important;
  font-weight: 600;
  font-size: 2rem;
  color: var(--c-navy-800);
  margin: 0 0 20px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  line-height: 1.2;
}

/* Same for online-services headings */
.standalone-page--online .service-rich-body h2 {
  font-family: var(--f-heading) !important;
  font-weight: 600;
  color: var(--c-navy-800);
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ─────────────────────────────────────────────
   Webform standalone pages (/enquiry-complaint etc.)
   Scoped under .standalone-page--webform so nothing
   else on the site is affected.
   ───────────────────────────────────────────── */
.standalone-page--webform .webform-submission-form .form-item,
.standalone-page--webform .webform-submission-form .js-form-item {
  margin-bottom: 20px;
}
.standalone-page--webform .webform-submission-form label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--c-navy-800);
  margin-bottom: 6px;
}
.standalone-page--webform .webform-submission-form .form-required::after,
.standalone-page--webform .webform-submission-form .js-form-required::after {
  color: var(--c-red-600);
}
.standalone-page--webform .webform-submission-form input[type="text"],
.standalone-page--webform .webform-submission-form input[type="email"],
.standalone-page--webform .webform-submission-form input[type="tel"],
.standalone-page--webform .webform-submission-form input[type="url"],
.standalone-page--webform .webform-submission-form input[type="number"],
.standalone-page--webform .webform-submission-form input[type="date"],
.standalone-page--webform .webform-submission-form textarea,
.standalone-page--webform .webform-submission-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--c-navy-800);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.standalone-page--webform .webform-submission-form textarea {
  min-height: 140px;
  resize: vertical;
}
.standalone-page--webform .webform-submission-form input[type="text"]:focus,
.standalone-page--webform .webform-submission-form input[type="email"]:focus,
.standalone-page--webform .webform-submission-form input[type="tel"]:focus,
.standalone-page--webform .webform-submission-form input[type="url"]:focus,
.standalone-page--webform .webform-submission-form input[type="number"]:focus,
.standalone-page--webform .webform-submission-form input[type="date"]:focus,
.standalone-page--webform .webform-submission-form textarea:focus,
.standalone-page--webform .webform-submission-form select:focus {
  outline: none;
  border-color: var(--c-red-600);
  box-shadow: 0 0 0 3px var(--c-red-50);
}
.standalone-page--webform .webform-submission-form .description,
.standalone-page--webform .webform-submission-form .form-item__description {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--c-ink-70);
}
.standalone-page--webform .webform-submission-form .form-actions {
  margin-top: 28px;
}
.standalone-page--webform .webform-submission-form input[type="submit"],
.standalone-page--webform .webform-submission-form button[type="submit"] {
  display: inline-block;
  padding: 12px 24px;
  background: var(--c-red-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.standalone-page--webform .webform-submission-form input[type="submit"]:hover,
.standalone-page--webform .webform-submission-form button[type="submit"]:hover {
  background: var(--c-red-700);
}
.standalone-page--webform .webform-submission-form fieldset {
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 20px;
}
.standalone-page--webform .webform-submission-form fieldset > legend {
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-navy-800);
  padding: 0 6px;
}
@media (max-width: 600px) {
  .standalone-page--webform .webform-submission-form .webform-flexbox {
    display: block;
  }
  .standalone-page--webform .webform-submission-form .webform-flex {
    width: 100% !important;
    margin: 0 0 20px !important;
  }
}

/* ─────────────────────────────────────────────
   Polynesian-compatible serif fallback chain
   for headings. Fraunces' served Google Fonts
   subset is missing precomposed ā ē ī ō ū, which
   causes single-character fallback with bad
   metrics ("floating macron"). Putting Charis SIL,
   Source Serif Pro, and Georgia early in the chain
   ensures the precomposed glyph is found in a
   font with metrics close to Fraunces.
   ───────────────────────────────────────────── */
.page-hero h1,
.standalone-page h1,
.standalone-hero h1 {
  font-family: 'Fraunces', 'Charis SIL', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
}
.standalone-page h2,
.standalone-page h3,
.standalone-page h4,
.standalone-page--webform .webform-section-title,
.standalone-page--webform fieldset > legend {
  font-family: 'Fraunces', 'Charis SIL', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
}

/* ─────────────────────────────────────────────
   Webform inline confirmation styling.
   The post-submit message (and the "Back to form"
   link) renders inside .webform-confirmation; we
   scope under .standalone-page--webform so only
   our chrome'd webforms get this treatment.
   ───────────────────────────────────────────── */
.standalone-page--webform .webform-confirmation {
  padding: 8px 0 32px;
}
.standalone-page--webform .webform-confirmation__message {
  margin-bottom: 24px;
}
.standalone-page--webform .webform-confirmation__message p {
  margin: 0 0 16px;
  line-height: 1.6;
  font-size: 1rem;
}
.standalone-page--webform .webform-confirmation__message strong {
  color: var(--c-navy-800);
}

/* Back-to-form link rendered as an .btn-primary equivalent. */
.standalone-page--webform .webform-confirmation__back a,
.standalone-page--webform .webform-confirmation__back-link,
.standalone-page--webform a.webform-confirmation-back-link {
  display: inline-block;
  background: var(--c-red-600);
  color: #fff !important;
  border: 0;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 8px;
}
.standalone-page--webform .webform-confirmation__back a:hover,
.standalone-page--webform .webform-confirmation__back-link:hover,
.standalone-page--webform a.webform-confirmation-back-link:hover {
  background: var(--c-red-700);
  color: #fff !important;
}
.standalone-page--webform .webform-confirmation__back a:focus,
.standalone-page--webform .webform-confirmation__back-link:focus,
.standalone-page--webform a.webform-confirmation-back-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-red-50);
}

/* ============================================================
   SITE FOOTER — Charcoal institutional palette
   Politically-neutral palette, BEM naming.
   Replaces deprecated .footer-* rules in mcil.css (kept commented for rollback).
   ============================================================ */
:root {
  --c-footer-bg:        #1F2125;
  --c-footer-bg-2:      #15171A;
  --c-footer-text:      #FFFFFF;
  --c-footer-heading:   #FFFFFF;
  --c-footer-muted:     #FFFFFF;
  --c-footer-border:    #2D3036;
  --c-footer-link-hover: #F5C46B;
}

.site-footer {
  /* Image swap 2026-05-21: added footer_mcil.png banner (1961x802, wide banner → cover+center+no-repeat). Charcoal #1F2125 kept as fallback below the image line in case the image fails to load. */
  background-color: var(--c-footer-bg);
  background-image:
    linear-gradient(rgba(31,33,37,0.55), rgba(31,33,37,0.70)),
    url('../images/footer_mcil.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--c-footer-text);
  padding: 56px 0 0;
  margin-top: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Front page: CTA banner abuts footer directly — no gap between dark surfaces */
.mcil-front + .site-footer {
  margin-top: 0;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--c-footer-border);
}

.site-footer__brand-eyebrow {
  color: var(--c-footer-muted);
  font-size: 0.875rem;
  margin: 0 0 4px;
}

.site-footer__brand-name {
  color: var(--c-footer-heading);
  font-family: 'Fraunces', 'Charis SIL', 'Source Serif Pro', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 16px;
  line-height: 1.3;
}

.site-footer__brand-address {
  margin: 0;
  color: var(--c-footer-text);
}
.site-footer__brand-address a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-footer-muted);
  text-underline-offset: 3px;
}
.site-footer__brand-address a:hover {
  color: var(--c-footer-link-hover);
}

.site-footer__heading {
  color: var(--c-footer-heading);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 0 16px;
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__col li {
  margin-bottom: 8px;
}
.site-footer__col a {
  color: var(--c-footer-text);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer__col a:hover {
  color: var(--c-footer-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Government directory accordion */
.site-footer__directory {
  padding: 32px 0;
  border-bottom: 1px solid var(--c-footer-border);
}
.site-footer__directory-heading {
  color: var(--c-footer-heading);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 0 20px;
}
.site-footer__directory-group {
  border: 1px solid var(--c-footer-border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.site-footer__directory-group[open] {
  background: rgba(255, 255, 255, 0.04);
}
.site-footer__directory-summary {
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--c-footer-heading);
  font-weight: 500;
  list-style: none;
  user-select: none;
}
.site-footer__directory-summary::-webkit-details-marker {
  display: none;
}
.site-footer__directory-summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  margin-left: 12px;
  transition: transform 0.2s;
  color: var(--c-footer-muted);
}
.site-footer__directory-group[open] .site-footer__directory-summary::after {
  content: "−";
}
.site-footer__directory-summary:hover {
  background: rgba(255, 255, 255, 0.03);
}
.site-footer__directory-count {
  color: var(--c-footer-muted);
  font-size: 0.875rem;
  font-weight: 400;
  margin-left: auto;
  margin-right: 12px;
}
.site-footer__directory-list {
  list-style: none;
  padding: 8px 18px 18px;
  margin: 0;
  columns: 2;
  column-gap: 32px;
}
.site-footer__directory-list li {
  margin-bottom: 6px;
  break-inside: avoid;
}
.site-footer__directory-list a {
  color: var(--c-footer-text);
  text-decoration: none;
  font-size: 0.9rem;
}
.site-footer__directory-list a:hover {
  color: var(--c-footer-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__directory-no-link {
  color: var(--c-footer-muted);
  font-size: 0.9rem;
  font-style: italic;
}

/* Tranche M2 — bilingual Ministries directory + samoagovt.ws portal cross-link */
.site-footer__directory-list--bilingual li {
  margin-bottom: 10px;
  line-height: 1.35;
}
.site-footer__directory-list--bilingual a {
  display: block;
}
.site-footer__directory-sm {
  display: block;
  font-size: 0.78rem;
  font-weight: normal;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}
.site-footer__portal-link {
  margin: 20px 18px 0;
  text-align: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}
.site-footer__portal-link a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__portal-link a:hover {
  color: var(--c-footer-link-hover);
}

/* Bottom meta strip */
.site-footer__meta {
  background: var(--c-footer-bg-2);
  margin-left: -24px;
  margin-right: -24px;
  margin-top: 0;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--c-footer-muted);
  font-size: 0.8125rem;
}
.site-footer__copyright,
.site-footer__credit {
  margin: 0;
}
.site-footer__credit strong {
  color: var(--c-footer-text);
  font-weight: 600;
}

/* Legal links: render menu as inline list with " · " separators */
.site-footer__legal ul,
.site-footer__legal .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.site-footer__legal li {
  display: inline-flex;
  align-items: center;
}
.site-footer__legal li:not(:last-child)::after {
  content: " · ";
  color: var(--c-footer-muted);
  margin: 0 8px;
}
.site-footer__legal a {
  color: var(--c-footer-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: color 0.15s;
}
.site-footer__legal a:hover {
  color: var(--c-footer-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 600px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .site-footer__directory-list {
    columns: 1;
  }
  .site-footer__meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   NEWS ARTICLE FIGURES
   .news-figure wraps inline body images on news_article nodes.
   Adds subtle border + rounded corners + hover lift to make
   embedded photos feel like cards instead of bare img elements.
   ============================================================ */
.node--news-article--full .news-figure,
.standalone-page .news-figure,
article .news-figure {
  display: block;
  margin: 32px auto;
  max-width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.node--news-article--full .news-figure:hover,
.standalone-page .news-figure:hover,
article .news-figure:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.node--news-article--full .news-figure img,
.standalone-page .news-figure img,
article .news-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.node--news-article--full .news-figure figcaption,
.standalone-page .news-figure figcaption,
article .news-figure figcaption {
  padding: 12px 16px;
  background: var(--c-cream);
  color: var(--c-ink-70);
  font-size: 0.875rem;
  text-align: center;
  border-top: 1px solid var(--c-line);
}

/* ============================================================
   PHASE E — Related articles sidebar on news detail
   2-column grid (article body left, sidebar right) with sticky
   cream-card sidebar. Stacks below 900px. Scoped under .news-detail
   per the existing template wrapper.
   ============================================================ */
.news-detail .news-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.news-detail .news-detail__body {
  min-width: 0; /* prevent grid blowout from long pre/img content */
}
.news-detail .news-article-sidebar {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: 24px;
}
.news-detail .news-article-sidebar__heading {
  font-family: 'Fraunces', 'Charis SIL', 'Source Serif Pro', Georgia, serif;
  color: var(--c-navy-800);
  font-size: 1.125rem;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-red-600);
}
.news-detail .news-article-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.news-detail .news-article-sidebar__item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
.news-detail .news-article-sidebar__item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.news-detail .news-article-sidebar__link {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}
.news-detail .news-article-sidebar__link:hover {
  opacity: 0.85;
}
.news-detail .news-article-sidebar__link:hover .news-article-sidebar__title {
  color: var(--c-red-600);
  text-decoration: underline;
}
.news-detail .news-article-sidebar__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-line);
}
.news-detail .news-article-sidebar__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-detail .news-article-sidebar__text {
  flex: 1;
  min-width: 0;
}
.news-detail .news-article-sidebar__category {
  display: inline-block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-red-600);
  margin-bottom: 4px;
  font-weight: 600;
}
.news-detail .news-article-sidebar__title {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--c-navy-800);
  font-weight: 600;
  transition: color 0.15s;
}
.news-detail .news-article-sidebar__date {
  font-size: 0.8125rem;
  color: var(--c-ink-70);
}
.news-detail .news-article-sidebar__view-all {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--c-red-600);
  text-decoration: none;
  font-weight: 600;
}
.news-detail .news-article-sidebar__view-all:hover {
  text-decoration: underline;
}
.news-detail .news-article-sidebar__empty {
  color: var(--c-ink-70);
  font-style: italic;
  margin: 0 0 12px;
}

/* Mobile: stack sidebar below article */
@media (max-width: 900px) {
  .news-detail .news-article-layout {
    grid-template-columns: 1fr;
  }
  .news-detail .news-article-sidebar {
    position: static;
  }
}

/* ============================================================
   HOMEPAGE HERO — image swap 2026-05-21: hero-apia-sunset.jpg → home_bg_front.png → home_bg_front_1.png → bg_home.png
   Politically-neutral photographic palette
   Selector: .mcil-front .hero  (front-page <main> wrapper)
   ============================================================ */
.mcil-front .hero {
  background-image:
    linear-gradient(95deg,
      rgba(11, 42, 74, 0.70) 0%,
      rgba(11, 42, 74, 0.45) 30%,
      rgba(11, 42, 74, 0.20) 55%,
      rgba(11, 42, 74, 0.05) 80%,
      rgba(11, 42, 74, 0)   100%),
    url('../images/bg_home.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0B2A4A;
  min-height: 720px;
  color: #fff;
}

.mcil-front .hero .hero__pattern { background-image: none; }

/* Secondary CTA on hero — scrim + white border so the button is legible against the photo/navy backdrop (default .btn-secondary is navy-on-transparent, invisible here). 2026-05-21. */
.mcil-front .hero .btn-secondary {
  background-color: rgba(11, 42, 74, 0.55);
  color: #FFFFFF;
  border-color: #FFFFFF;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mcil-front .hero .btn-secondary:hover {
  background-color: #FFFFFF;
  color: var(--c-navy-900);
  border-color: #FFFFFF;
}

.mcil-front .hero h1.hero__vision,
.mcil-front .hero .eyebrow,
.mcil-front .hero .hero__tagline {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.mcil-front .hero .eyebrow {
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.1em;
}
.mcil-front .hero .hero__tagline {
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 820px) {
  .mcil-front .hero {
    background-image:
      linear-gradient(180deg,
        rgba(11, 42, 74, 0.55) 0%,
        rgba(11, 42, 74, 0.75) 100%),
      url('../images/bg_home.png');
    background-size: contain;
    min-height: 480px;
  }
}

/* =============================================================
   HOLIDAY CALENDAR (nid 73) — HP-3
   ============================================================= */
.holiday-section {
  margin: 0 0 48px;
}
.holiday-section__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-line);
}
.holiday-section__header h2 {
  margin: 0; padding: 0; border: none;
  font-family: var(--f-heading);
  font-size: 1.75rem;
  color: var(--c-navy-800);
}
.holiday-section__year-eyebrow {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--c-ink-50);
}
.holiday-section--past .holiday-section__header h2 { color: var(--c-ink-50); }

.holiday-list {
  list-style: none; padding: 0; margin: 0;
}
.holiday-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fff;
  transition: border-color 0.15s ease;
}
.holiday-card:hover { border-color: var(--c-line-dk); }

.holiday-card__date {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--c-navy-800); color: #fff;
  border-radius: 6px; padding: 10px 8px;
  min-width: 64px; text-align: center;
}
.holiday-card__day {
  font-family: var(--f-heading);
  font-size: 1.5rem; font-weight: 600; line-height: 1;
}
.holiday-card__month {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 4px; opacity: 0.85;
}

.holiday-card__body { min-width: 0; }
.holiday-card__name {
  margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600;
  color: var(--c-ink);
}
.holiday-card__day-of-week {
  margin: 0 0 4px; color: var(--c-ink-70);
  font-size: 0.9375rem;
}
.holiday-card__rule {
  margin: 0; color: var(--c-ink-50); font-size: 0.8125rem;
}
.holiday-card__rule--inlieu {
  color: var(--c-red-600); font-weight: 600; margin-top: 4px;
}
.holiday-card__rule a { color: var(--c-navy-700); }

.holiday-card__status {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 4px;
  white-space: nowrap; align-self: center;
}

.holiday-card--completed { opacity: 0.55; }
.holiday-card--completed .holiday-card__date { background: var(--c-ink-50); }
.holiday-card__status--completed {
  background: transparent;
  border: 1px solid var(--c-ink-50);
  color: var(--c-ink-50);
}

.holiday-card--today {
  border-left: 4px solid var(--c-red-600);
  background: var(--c-cream);
}
.holiday-card__status--today {
  background: var(--c-red-600); color: #fff;
}

.holiday-card--next {
  border-left: 4px solid var(--c-navy-800);
}
.holiday-card__status--next {
  background: var(--c-navy-800); color: #fff;
}

.holiday-card--archived { opacity: 0.50; }
.holiday-card--archived .holiday-card__date { background: var(--c-ink-50); }

.holiday-section--past details {
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-cream);
  overflow: hidden;
}
.holiday-section--past summary {
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--c-ink-70);
  user-select: none;
  list-style: none;
}
.holiday-section--past summary::-webkit-details-marker { display: none; }
.holiday-section--past summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 10px;
  font-size: 0.7rem;
  color: var(--c-ink-50);
  transition: transform 0.15s ease;
}
.holiday-section--past details[open] summary::before { transform: rotate(90deg); }
.holiday-section--past details[open] summary {
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 12px;
}
.holiday-section--past .holiday-list { padding: 0 16px 16px; }
.holiday-section--past .holiday-card { background: transparent; }

@media (max-width: 700px) {
  .holiday-card {
    grid-template-columns: 56px 1fr;
    grid-template-areas: "date body" "status status";
    gap: 14px 16px;
    padding: 14px 16px;
  }
  .holiday-card__date { grid-area: date; min-width: 56px; padding: 8px 6px; }
  .holiday-card__body { grid-area: body; }
  .holiday-card__status { grid-area: status; justify-self: start; }
  .holiday-card__day { font-size: 1.3rem; }
}

@media print {
  .holiday-card { break-inside: avoid; border: 1px solid #ccc; }
  .holiday-card--completed, .holiday-card--archived { opacity: 1; }
  .holiday-section--past details > summary { display: none; }
  .holiday-section--past details { border: none; background: transparent; }
}

/* HP-5 — /about/our-people organisational tier diagram (semantic HTML replacement for inline SVG) */
.org-tiers {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 32px;
  padding: 24px;
  background: var(--c-cream);
  border-radius: var(--radius-lg);
}
.org-tier {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  position: relative;
}
.org-tier:not(:last-child)::after {
  content: "";
  display: block;
  width: 2px;
  height: 16px;
  background: var(--c-line-dk);
  position: absolute;
  bottom: -16px;
  left: 50%;
}
.org-tier--divisions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.org-node {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-align: center;
  border: 1px solid var(--c-line);
  background: #fff;
}
.org-node--minister {
  background: var(--c-navy-800);
  color: #fff;
  border-color: var(--c-navy-800);
  min-width: 260px;
}
.org-node--ceo {
  background: var(--c-red-600);
  color: #fff;
  border-color: var(--c-red-600);
  min-width: 260px;
}
.org-node--associate {
  background: var(--c-cream);
  border: 1px solid var(--c-line-dk);
  color: var(--c-ink);
  font-size: 0.875rem;
  padding: 10px 14px;
  min-width: 220px;
}
.org-node--division {
  font-weight: 500;
  color: var(--c-ink);
  padding: 14px 12px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.org-node__role {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  font-weight: 600;
}
.org-node__name {
  display: block;
  font-weight: 600;
  margin-top: 2px;
}
@media (max-width: 700px) {
  .org-tier--divisions { grid-template-columns: 1fr; }
  .org-node--minister, .org-node--ceo, .org-node--associate { min-width: 0; width: 100%; }
}
@media print {
  .org-tiers { break-inside: avoid; background: transparent; padding: 0; }
  .org-node--minister, .org-node--ceo, .org-node--associate { background: #fff; color: #000; border: 1px solid #000; }
}

/* Render-pathway fix — surface field_service_overview as soft institutional intro on service pages */
.service-overview {
  background: var(--c-cream);
  border-left: 4px solid var(--c-navy-800);
  padding: 24px 28px;
  margin: 24px 0 32px;
  border-radius: var(--radius-sm);
}
.service-overview__inner {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-ink);
}
.service-overview__inner p:last-child { margin-bottom: 0; }
.service-overview__inner strong { color: var(--c-navy-800); }
@media (max-width: 700px) {
  .service-overview { padding: 18px 20px; margin: 16px 0 24px; }
}
@media print {
  .service-overview { background: transparent; border-left-color: #000; }
}

/* /about-page content polish — hoisted from nid 63 inline styles */
.content-list {
  color: var(--c-ink-70);
  line-height: 1.7;
  max-width: 68ch;
}
.motto-saying {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--c-navy-800);
  font-style: italic;
  max-width: 600px;
}
.motto-saying__subtitle {
  margin-top: -0.5em;
}

/* ─────────────────────────────────────────────
   /contact — office cards (Tranche G)
   Follows .quick-task aesthetic but multi-line content.
   ───────────────────────────────────────────── */
.contact-office-cards {
  display: grid;
  gap: 16px;
  margin: 24px 0 32px;
}
.contact-office-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.contact-office-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-office-card__icon svg {
  width: 22px;
  height: 22px;
}
.contact-office-card__icon--navy { background: var(--c-navy-50);  color: var(--c-navy-800); }
.contact-office-card__icon--red  { background: var(--c-red-50);   color: var(--c-red-600);  }
.contact-office-card__icon--teal { background: var(--c-teal-100); color: var(--c-teal-600); }
.contact-office-card__body { flex: 1; min-width: 0; }
.contact-office-card__body h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
  color: var(--c-navy-800);
  font-weight: 600;
}
.contact-office-card__body p {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink-70);
}
.contact-office-card__body p:last-child { margin-bottom: 0; }
.contact-office-card__body a {
  color: var(--c-navy-800);
  text-decoration: none;
}
.contact-office-card__body a:hover {
  color: var(--c-red-600);
  text-decoration: underline;
}
.contact-office-card__body strong {
  color: var(--c-navy-800);
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   /contact — map iframe wrapper (Tranche G)
   ───────────────────────────────────────────── */
.contact-map-embed {
  display: block;
  width: 100%;
  margin-top: 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.contact-map-embed iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}
@media (max-width: 600px) {
  .contact-map-embed iframe { height: 320px; }
}

/* ─────────────────────────────────────────────
   /contact — webform polish (Tranche E residue)
   Scoped under .standalone-page--webform.
   ───────────────────────────────────────────── */
/* Select chevron — replace OS-native arrow */
.standalone-page--webform .webform-submission-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231e3a5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4 L6 8 L10 4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  padding-right: 38px;
}
/* Consent checkbox — custom box + checkmark */
.standalone-page--webform .webform-submission-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  position: relative;
  top: 3px;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.standalone-page--webform .webform-submission-form input[type="checkbox"]:hover {
  border-color: var(--c-red-600);
}
.standalone-page--webform .webform-submission-form input[type="checkbox"]:checked {
  background: var(--c-red-600);
  border-color: var(--c-red-600);
}
.standalone-page--webform .webform-submission-form input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 6 L5 8.5 L9.5 3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.standalone-page--webform .webform-submission-form input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-red-50);
}
/* Error states */
.standalone-page--webform .webform-submission-form .form-item--error input,
.standalone-page--webform .webform-submission-form .form-item--error select,
.standalone-page--webform .webform-submission-form .form-item--error textarea {
  border-color: var(--c-red-600);
  background-color: #fff8f9;
}
.standalone-page--webform .webform-submission-form .form-item--error-message,
.standalone-page--webform .webform-submission-form .form-item__error-message {
  color: var(--c-red-700);
  font-size: 0.875rem;
  margin-top: 6px;
}
.standalone-page--webform .messages--error,
.messages--error.webform-submission-form-error {
  background: var(--c-red-50);
  border: 1px solid var(--c-red-600);
  color: var(--c-red-700);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
/* Submit-button focus ring */
.standalone-page--webform .webform-submission-form input[type="submit"]:focus-visible,
.standalone-page--webform .webform-submission-form button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-red-50), 0 0 0 5px var(--c-red-600);
}

/* ─────────────────────────────────────────────
   /contact — webform markup heading (Tranche G follow-up)
   The "Send us a message" heading now lives INSIDE
   the form (webform_markup element) so it gets
   replaced together with the form on inline confirmation.
   ───────────────────────────────────────────── */
.standalone-page--webform .standalone-page__webform-heading {
  margin: 0 0 24px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-navy-800);
}

/* ─────────────────────────────────────────────
   /contact — inline confirmation card (Tranche G follow-up)
   Replaces the form in-place after successful submission.
   #e8f5ee = soft teal/mint tint — local, no palette token yet
   ───────────────────────────────────────────── */
.standalone-page--webform .webform-confirmation {
  background: #e8f5ee;
  border-left: 4px solid var(--c-teal-600);
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  margin: 24px 0;
}
.standalone-page--webform .webform-confirmation__message {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-navy-800);
}
.standalone-page--webform .webform-confirmation__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-navy-800);
}
.standalone-page--webform .webform-confirmation__heading::before {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background-color: var(--c-teal-600);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8 L7 12 L13 4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.standalone-page--webform .webform-confirmation__message p {
  margin: 0;
  color: var(--c-ink-70);
}
.standalone-page--webform .webform-confirmation__back {
  display: none;
}

/* ============================================================
   HOMEPAGE HERO — Samoa map + live trade flow (Step 3, 2026-05-21)
   Hand-authored simplified silhouettes (Wikimedia-source swap-in later).
   Animation: CSS @keyframes, gated on prefers-reduced-motion.
   ============================================================ */
.mcil-front .hero .hero__visual {
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 8 / 5;
  margin: 0;
  pointer-events: none;
}
.mcil-front .hero .samoa-map {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.25));
}

/* Tranche L3.1 — DROPPED the mobile-hide rule that previously hid .hero__visual
   at ≤820px. With the campaign <picture> as the visual, we want the image to
   remain visible (stacked below text per .hero__inner grid collapse). */

.mcil-front .hero .apia-hub { opacity: 0.85; }
.mcil-front .hero .dot,
.mcil-front .hero .ripple { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {

  .mcil-front .hero .apia-hub {
    animation: hub-pulse 2.5s ease-in-out infinite;
  }
  @keyframes hub-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1.0; }
  }

  .mcil-front .hero .ripple-east   { transform-origin: 710px 270px; animation: ripple 1.17s linear infinite; animation-delay: 3.15s; }
  .mcil-front .hero .ripple-west   { transform-origin: 475px 265px; animation: ripple 1.00s linear infinite; animation-delay: 2.70s; }
  .mcil-front .hero .ripple-savaii { transform-origin: 340px 358px; animation: ripple 1.33s linear infinite; animation-delay: 3.60s; }
  @keyframes ripple {
    0%   { transform: scale(0.5); opacity: 0.7; }
    30%  { transform: scale(2.5); opacity: 0;   }
    100% { transform: scale(2.5); opacity: 0;   }
  }

  .mcil-front .hero .dot-east { animation: flow-east 3.5s linear infinite; }
  .mcil-front .hero .dot-east-2 { animation-delay: 1.17s; }
  .mcil-front .hero .dot-east-3 { animation-delay: 2.33s; }
  @keyframes flow-east {
    0%   { transform: translate(0, 0);        opacity: 0; }
    8%   { opacity: 1; }
    90%  { transform: translate(140px, 47px); opacity: 1; }
    100% { transform: translate(155px, 52px); opacity: 0; }
  }

  .mcil-front .hero .dot-west { animation: flow-west 3.0s linear infinite; }
  .mcil-front .hero .dot-west-2 { animation-delay: 1.00s; }
  .mcil-front .hero .dot-west-3 { animation-delay: 2.00s; }
  @keyframes flow-west {
    0%   { transform: translate(0, 0);        opacity: 0; }
    8%   { opacity: 1; }
    90%  { transform: translate(-72px, 42px); opacity: 1; }
    100% { transform: translate(-80px, 47px); opacity: 0; }
  }

  .mcil-front .hero .dot-savaii { animation: flow-savaii 4.0s linear infinite; }
  .mcil-front .hero .dot-savaii-2 { animation-delay: 1.33s; }
  .mcil-front .hero .dot-savaii-3 { animation-delay: 2.67s; }
  @keyframes flow-savaii {
    0%   { transform: translate(0, 0);           opacity: 0; }
    8%   { opacity: 1; }
    90%  { transform: translate(-193px, 126px);  opacity: 1; }
    100% { transform: translate(-215px, 140px);  opacity: 0; }
  }

  .mcil-front .hero .dot-sw { animation: flow-sw 4.5s linear infinite; }
  .mcil-front .hero .dot-sw-2 { animation-delay: 2.25s; }
  @keyframes flow-sw {
    0%   { transform: translate(0, 0);           opacity: 0;   }
    5%   { opacity: 1; }
    60%  { opacity: 0.6; }
    100% { transform: translate(-535px, 267px);  opacity: 0;   }
  }
}

/* ─────────────────────────────────────────────
   Tranche H.1.2 — /about/legislation styling
   Card grid + topic icons + PDF/external glyphs + callouts.
   Scoped under .about-page--legislation (set by mcil_core preprocess for node 65).
   ───────────────────────────────────────────── */

/* List → card grid */
.about-page--legislation .service-rich-body ul {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 820px) {
  .about-page--legislation .service-rich-body ul {
    grid-template-columns: 1fr;
  }
}

/* Card treatment per <li> + description-text typography */
.about-page--legislation .service-rich-body li {
  margin: 0;
  padding: 20px 22px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-teal-600);
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  color: var(--c-navy-700);
  line-height: 1.55;
  transition: background 180ms ease, box-shadow 180ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .about-page--legislation .service-rich-body li {
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }
  .about-page--legislation .service-rich-body li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(11, 42, 74, 0.08);
    background: #FFFEFA;
  }
}

/* Title (strong) hierarchy inside each card */
.about-page--legislation .service-rich-body li > strong {
  display: block;
  color: var(--c-navy-900);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 8px;
  line-height: 1.35;
}
.about-page--legislation .service-rich-body li > strong a {
  color: inherit;
  text-decoration: none;
}
.about-page--legislation .service-rich-body li > strong a:hover {
  text-decoration: underline;
}

/* Topic icons — Lucide-style 24px-viewBox line glyphs, encoded with navy-700 stroke */
.about-page--legislation .service-rich-body h2[id] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2.5rem;
}
.about-page--legislation .service-rich-body h2[id]::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
/* briefcase */
.about-page--legislation h2#business::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}
/* users */
.about-page--legislation h2#labour::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
/* shield (plain — cleaner than shield-check at 28px) */
.about-page--legislation h2#consumer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}
/* lightbulb */
.about-page--legislation h2#ip::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}
/* building-2 (chosen over factory — reads cleaner at 28px) */
.about-page--legislation h2#industry::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
}

/* PDF affordance on internal /node/ links — file-down glyph, navy-800 stroke */
.about-page--legislation .service-rich-body a[href^="/node/"]::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 5px;
  vertical-align: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='m9 15 3 3 3-3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.65;
}

/* External link glyph on palemene + other https:// links */
.about-page--legislation .service-rich-body a[href^="https://"]::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 4px;
  vertical-align: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* Callouts: paragraphs that lead with a <strong> (Official texts / Legislative review).
   The > p direct-child constraint excludes <li> elements (which sit inside <ul>),
   so card titles aren't matched. */
.about-page--legislation .service-rich-body > p:has(> strong:first-child) {
  padding: 18px 22px;
  background: var(--c-navy-50);
  border-left: 4px solid var(--c-teal-600);
  border-radius: var(--radius-md);
  margin: 24px 0;
}
.about-page--legislation .service-rich-body > p:has(> strong:first-child) > strong:first-child {
  color: var(--c-navy-900);
  font-weight: 600;
}

/* End Tranche H.1.2 */

/* ─────────────────────────────────────────────
   Tranche H.2 Phase 2A.1 — /about/opportunities styling
   Portal CTA button + external-channel card grid + CEO callout.
   Scoped under .about-page--opportunities (set by mcil_core preprocess for node 66).
   ───────────────────────────────────────────── */

/* Card grid for "Other places to find vacancies" — mirrors H.1.2 list-to-grid pattern */
.about-page--opportunities .service-rich-body ul {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 820px) {
  .about-page--opportunities .service-rich-body ul {
    grid-template-columns: 1fr;
  }
}

/* Cards — mirror H.1.2 aesthetic exactly */
.about-page--opportunities .service-rich-body li {
  margin: 0;
  padding: 20px 22px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-teal-600);
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  color: var(--c-navy-700);
  line-height: 1.55;
  transition: background 180ms ease, box-shadow 180ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .about-page--opportunities .service-rich-body li {
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }
  .about-page--opportunities .service-rich-body li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(11, 42, 74, 0.08);
    background: #FFFEFA;
  }
}
.about-page--opportunities .service-rich-body li > strong {
  display: block;
  color: var(--c-navy-900);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 8px;
  line-height: 1.35;
}
.about-page--opportunities .service-rich-body li > strong a {
  color: inherit;
  text-decoration: none;
}
.about-page--opportunities .service-rich-body li > strong a:hover {
  text-decoration: underline;
}

/* External-link arrow on card links — reuse the H.1.2 arrow-up-right glyph */
.about-page--opportunities .service-rich-body li a[href^="https://"]::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 5px;
  vertical-align: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.65;
}

/* Portal CTA — paragraph that wraps the jobs.mcil.gov.ws/employers link as its only content.
   Centred with breathing room; the link itself becomes a primary button matching the
   existing .btn-primary aesthetic from mcil.css (red-600 → red-700 hover, 12px 24px,
   2px transparent border, translateY(-1px) lift, inline-flex). */
.about-page--opportunities .service-rich-body p:has(> strong:only-child > a[href*="jobs.mcil.gov.ws/employers"]) {
  text-align: center;
  margin: 2rem 0;
}
.about-page--opportunities .service-rich-body a[href*="jobs.mcil.gov.ws/employers"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--c-red-600);
  color: #FFFFFF !important;
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--c-red-600);
  transition: all 0.15s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: no-preference) {
  .about-page--opportunities .service-rich-body a[href*="jobs.mcil.gov.ws/employers"]:hover,
  .about-page--opportunities .service-rich-body a[href*="jobs.mcil.gov.ws/employers"]:focus-visible {
    background: var(--c-red-700);
    border-color: var(--c-red-700);
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-page--opportunities .service-rich-body a[href*="jobs.mcil.gov.ws/employers"]:hover,
  .about-page--opportunities .service-rich-body a[href*="jobs.mcil.gov.ws/employers"]:focus-visible {
    background: var(--c-red-700);
    border-color: var(--c-red-700);
    color: #FFFFFF !important;
  }
}

/* CEO contact callout — paragraph leading with <strong> AND having more children beyond the strong.
   The :not(:has(> strong:only-child)) clause excludes the Portal CTA paragraph (where the strong
   is the only direct child of the <p>). */
.about-page--opportunities .service-rich-body > p:has(> strong:first-child):not(:has(> strong:only-child)) {
  padding: 18px 22px;
  background: var(--c-navy-50);
  border-left: 4px solid var(--c-teal-600);
  border-radius: var(--radius-md);
  margin: 24px 0;
}
.about-page--opportunities .service-rich-body > p:has(> strong:first-child):not(:has(> strong:only-child)) > strong:first-child {
  color: var(--c-navy-900);
  font-weight: 600;
}

/* End Tranche H.2 Phase 2A.1 */

/* ─────────────────────────────────────────────
   Tranche H.3 Phase 2D — Fee table styling
   Scoped to service-page bodies (.service-page .service-rich-body) so it applies
   across all 6 service pages, not the about-pages.
   ───────────────────────────────────────────── */

.service-page .service-rich-body .fee-table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-teal-600);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.service-page .service-rich-body .fee-table caption {
  text-align: left;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--c-navy-900);
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line);
  caption-side: top;
}

.service-page .service-rich-body .fee-table thead th {
  padding: 10px 20px;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--c-navy-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.55);
  border-bottom: 1px solid var(--c-line);
}

.service-page .service-rich-body .fee-table thead th:last-child {
  text-align: right;
}

.service-page .service-rich-body .fee-table tbody td {
  padding: 11px 20px;
  font-size: 0.9375rem;
  color: var(--c-navy-800);
  border-bottom: 1px solid var(--c-line);
  line-height: 1.5;
}

.service-page .service-rich-body .fee-table tbody td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
  color: var(--c-navy-900);
}

.service-page .service-rich-body .fee-table tbody tr:last-child td {
  border-bottom: none;
}

@media (prefers-reduced-motion: no-preference) {
  .service-page .service-rich-body .fee-table tbody tr {
    transition: background 120ms ease;
  }
}
.service-page .service-rich-body .fee-table tbody tr:hover {
  background: rgba(255,255,255,0.4);
}

/* Mobile: tighten padding + slightly smaller text */
@media (max-width: 480px) {
  .service-page .service-rich-body .fee-table {
    font-size: 0.875rem;
  }
  .service-page .service-rich-body .fee-table thead th,
  .service-page .service-rich-body .fee-table tbody td,
  .service-page .service-rich-body .fee-table caption {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* End Tranche H.3 Phase 2D */

/* ─────────────────────────────────────────────
   Tranche H.3 Phase 2E — Fee table alignment + #other cards redesign
   ───────────────────────────────────────────── */

/* Fee table: unify thead/tbody padding so column edges align cleanly */
.service-page .service-rich-body .fee-table thead th,
.service-page .service-rich-body .fee-table tbody td {
  padding: 12px 20px;
}

/* Fee table: caption padding aligned to match column padding */
.service-page .service-rich-body .fee-table caption {
  padding: 14px 20px;
}

/* Other Specialist Registries — card grid (mirrors H.1.2 legislation + H.2 opportunities patterns).
   Scoped under .service-page--red so it activates on the Business Registration service page
   (and any other service that adopts the red accent), without disrupting service-pages with
   other accent colours that may rely on the existing .sub-service-list aesthetic. */
.service-page--red .service-rich-body .sub-service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 1.5rem 0;
  list-style: none;
  padding-left: 0;
}
@media (max-width: 820px) {
  .service-page--red .service-rich-body .sub-service-list {
    grid-template-columns: 1fr;
  }
}

/* Individual card — cream + 1px line + 4px teal-600 border-left */
.service-page--red .service-rich-body .sub-service {
  display: block;
  padding: 20px 22px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-teal-600);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--c-navy-700);
  line-height: 1.55;
  font-size: 0.9375rem;
  transition: background 180ms ease, box-shadow 180ms ease;
}

/* Motion-gated hover lift (matches H.1.2 + H.2 motion pattern) */
@media (prefers-reduced-motion: no-preference) {
  .service-page--red .service-rich-body .sub-service {
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }
  .service-page--red .service-rich-body .sub-service:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(11, 42, 74, 0.08);
    background: #FFFEFA;
  }
}

/* Card title — first <strong> child of the card */
.service-page--red .service-rich-body .sub-service > strong:first-child {
  display: block;
  color: var(--c-navy-900);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 10px;
  line-height: 1.35;
}

/* Card body text — the <span> inside */
.service-page--red .service-rich-body .sub-service > span {
  display: block;
  color: var(--c-navy-700);
}

/* Inline Act citation <strong> tags inside the card body — slightly heavier than body text */
.service-page--red .service-rich-body .sub-service > span strong {
  font-weight: 600;
  color: var(--c-navy-800);
}

/* Inline links inside cards (Act PDFs + Forms: row) — teal underline-on-hover */
.service-page--red .service-rich-body .sub-service a {
  color: var(--c-teal-600);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
.service-page--red .service-rich-body .sub-service a:hover,
.service-page--red .service-rich-body .sub-service a:focus-visible {
  border-bottom-color: var(--c-teal-600);
}

/* Forms: row label — small caps treatment with top margin to visually separate from body prose */
.service-page--red .service-rich-body .sub-service > span br + strong {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-navy-700);
  font-weight: 700;
}

/* Phase 2E.1 — Card font parity with H.1.2 / H.2 (override mcil.css inherited values) */
.service-page--red .service-rich-body .sub-service > strong:first-child {
  font-family: inherit;
}
.service-page--red .service-rich-body .sub-service > span {
  font-size: inherit;
  line-height: 1.55;
}

/* End Tranche H.3 Phase 2E */

/* ─────────────────────────────────────────────
   Tranche H.4 Phase 2D — Emergency callout class + wide fee tables
   ───────────────────────────────────────────── */

/* .callout--danger variant for critical/emergency callouts */
.callout.callout--danger {
  border-color: var(--c-red-600);
  background: var(--c-red-50);
}
.callout.callout--danger > p:first-child > strong,
.callout.callout--danger .callout-title {
  color: var(--c-red-700);
}
.callout.callout--danger > p {
  color: var(--c-red-700);
}

/* Wider fee tables (4+ data columns) — allow horizontal scroll on mobile */
.service-page .service-rich-body .fee-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
  .service-page .service-rich-body .fee-table {
    display: table;
    overflow-x: visible;
  }
}

/* End H.4 Phase 2D */

/* ─────────────────────────────────────────────
   Tranche H.4 Phase 2D.1 — Fee-table multi-column polish
   ───────────────────────────────────────────── */

/* Right-align + tabular-nums on all non-first columns (thead + tbody parallel —
   keeps headers aligned with their data columns) */
.service-page .service-rich-body .fee-table thead th:not(:first-child),
.service-page .service-rich-body .fee-table tbody td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Row-header cells (Apprenticeship Level labels) — left-aligned, regular weight,
   matched padding */
.service-page .service-rich-body .fee-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 400;
  padding: 12px 20px;
  color: var(--c-navy-700);
  /* border-top dropped — existing tbody td border-bottom (--c-line) handles row separation cleanly */
}

/* End H.4 Phase 2D.1 */

/* ─────────────────────────────────────────────
   Tranche H.4 Phase 2D.2 — Sidebar TOC sub-list (H3 children under H2 parents)
   ───────────────────────────────────────────── */

/* Qualified selector (.service-side-nav__toc ul.service-side-nav__toc-sub) used to beat
   the existing .service-side-nav__toc ul rule at line 718 (specificity 0,2,1).
   With the qualifier we hit 0,3,1 and win cleanly without modifying the existing rule. */
.service-side-nav__toc ul.service-side-nav__toc-sub {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--c-line);
}
.service-side-nav__toc-sub li {
  margin: 4px 0;
}
.service-side-nav__toc-sub a {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--c-navy-700);
}
.service-side-nav__toc-sub a:hover {
  color: var(--c-teal-600);
}
.service-side-nav__toc-sub a.is-active {
  color: var(--c-teal-600);
  font-weight: 600;
}

/* End H.4 Phase 2D.2 */

/* ─────────────────────────────────────────────
   Phase 2H.1 — Service page sidebar contact card
   Renders below TOC inside .service-side-nav.
   Top-stripe accent tracks field_service_color via
   the .service-page--{color} body modifier.
   ───────────────────────────────────────────── */
.service-contact-card {
  margin-top: 24px;
  padding: 18px 20px 20px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--c-navy-800);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
}
.service-contact-card__heading {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-70);
}
.service-contact-card__division {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-navy-900);
}
.service-contact-card__list { margin: 0; }
.service-contact-card__list dt {
  font-weight: 600;
  color: var(--c-ink-70);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 10px;
}
.service-contact-card__list dt:first-child { margin-top: 0; }
.service-contact-card__list dd {
  margin: 2px 0 0;
  color: var(--c-ink-80);
  line-height: 1.4;
}
.service-contact-card__list dd + dd { margin-top: 2px; }
.service-contact-card__list a {
  color: var(--c-navy-800);
  text-decoration: none;
  word-break: break-word;
}
.service-contact-card__list a:hover {
  color: var(--c-red-600);
  text-decoration: underline;
}

/* Per-service accent on top-stripe */
.service-page--red    .service-contact-card { border-top-color: var(--c-red-600); }
.service-page--navy   .service-contact-card { border-top-color: var(--c-navy-800); }
.service-page--teal   .service-contact-card { border-top-color: var(--c-teal-600); }
.service-page--siapo  .service-contact-card { border-top-color: var(--c-siapo-500); }
.service-page--teuila .service-contact-card { border-top-color: var(--c-teuila); }
.service-page--amber  .service-contact-card { border-top-color: var(--c-amber-600); }

/* ─────────────────────────────────────────────
   Tranche I — /contact body extensions (LEEP office card + team email directory)
   All rules scoped under .standalone-page--contact.
   ───────────────────────────────────────────── */

/* Amber icon variant for LEEP office card */
.standalone-page--contact .contact-office-card__icon--amber {
  background: var(--c-amber-100);
  color: var(--c-amber-600);
}

/* Team email directory section */
.standalone-page--contact .team-email-directory {
  margin: 32px 0;
  padding: 24px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.standalone-page--contact .team-email-directory h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: var(--c-navy-900);
}
.standalone-page--contact .team-email-directory > p {
  margin: 0 0 16px;
  color: var(--c-ink-70);
}
.standalone-page--contact .team-email-list { margin: 0; }
.standalone-page--contact .team-email-list dt {
  font-weight: 600;
  color: var(--c-navy-800);
  font-size: 0.9375rem;
  margin-top: 12px;
}
.standalone-page--contact .team-email-list dt:first-child { margin-top: 0; }
.standalone-page--contact .team-email-list dd {
  margin: 2px 0 0;
  color: var(--c-ink-70);
  font-size: 0.9375rem;
}
.standalone-page--contact .team-email-list a {
  color: var(--c-navy-800);
  text-decoration: none;
}
.standalone-page--contact .team-email-list a:hover {
  color: var(--c-red-600);
  text-decoration: underline;
}

/* Phase J 2A — Homepage news card date chip
   Promotes the existing <time> element in .news-item__meta from plain
   inherited typography to a parallel pill chip alongside .news-item__tag.
   Mixed-case override breaks the meta strip's inherited uppercase so the
   date reads as date-in-prose ("21 April 2026") rather than shouty caps. */
.news-item__date {
  display: inline-block;
  padding: 3px 10px;
  background: var(--c-cream);
  color: var(--c-ink-70);
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Phase J 2B.3 — Standardise rounded corners on news_article body images.
   Matches the site-wide --radius-md token used on .news-item__thumb and
   .news-article-sidebar__thumb. Scoped strictly to .news-detail__content
   so it doesn't bleed into header/footer chrome or the related-articles
   sidebar (which has its own wrapper-based radius via overflow:hidden). */
.news-detail__content img {
  border-radius: var(--radius-md);
  display: block;
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────
   Tranche K Phase 2 — /contact two-column grid + full-bleed map band
   ───────────────────────────────────────────── */
.standalone-page--contact .contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
  margin: 48px 0;
}
@media (max-width: 900px) {
  .standalone-page--contact .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.standalone-page--contact .contact-grid__form h2,
.standalone-page--contact .contact-grid__sidebar h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
  color: var(--c-navy-900);
  border-bottom: none;
  padding-bottom: 0;
}
.standalone-page--contact .contact-grid__sidebar .contact-office-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Map full-bleed band — escapes .container width, butts against dark footer */
.contact-map-band {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--c-paper);
  line-height: 0;
}
.contact-map-band iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}
@media (max-width: 768px) {
  .contact-map-band iframe { height: 360px; }
}

/* ─────────────────────────────────────────────
   Tranche L1 mobile — drawer + in-drawer mega-menu accordion
   ─────────────────────────────────────────────
   Pairs with js/mobile-menu.js (hamburger toggle + close handlers).
   mega-menu.js already wires parent-button click → aria-expanded + .is-open
   on the mega-menu div; these rules just let those .is-open mega-menus
   render inline-stacked inside the drawer at ≤1024px (where the base rule
   in mcil.css:1171 forcibly hides .mega-menu site-wide). */
@media (max-width: 1024px) {
  /* Hamburger touch target — WCAG 2.5.5 minimum 44×44 (was ~38×38) */
  .mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 11px;
  }

  /* Stack drawer items: each <li> is full-width, no flex inheritance */
  .main-nav__list.is-mobile-open .main-nav__item {
    display: block;
    width: 100%;
  }

  /* Mega-menu, when in-drawer + open, renders as inline static accordion */
  .main-nav__list.is-mobile-open .mega-menu {
    display: none !important;
  }
  .main-nav__list.is-mobile-open .mega-menu.is-open {
    display: block !important;
    position: static !important;
    top: auto; left: auto; right: auto; bottom: auto;
    width: auto;
    padding: 8px 0 12px 12px;
    margin: 0;
    background: transparent;
    border-top: none;
    border-bottom: none;
    border-left: 3px solid var(--c-red-600);
    box-shadow: none;
    animation: none;
    z-index: auto;
  }
  .main-nav__list.is-mobile-open .mega-menu .container {
    padding: 0;
    max-width: none;
  }
  .main-nav__list.is-mobile-open .mega-menu__grid {
    display: block;
    grid-template-columns: none;
    gap: 0;
  }
  .main-nav__list.is-mobile-open .mega-menu__cols {
    display: block;
    grid-template-columns: none;
    gap: 0;
  }
  .main-nav__list.is-mobile-open .mega-menu__col {
    margin-bottom: 12px;
  }
  .main-nav__list.is-mobile-open .mega-menu__col:last-child {
    margin-bottom: 0;
  }
  .main-nav__list.is-mobile-open .mega-menu__col h4 {
    font-size: 0.7rem;
    margin: 8px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--c-line);
  }
  .main-nav__list.is-mobile-open .mega-menu__links li {
    margin-bottom: 4px;
  }
  .main-nav__list.is-mobile-open .mega-menu__links a {
    padding: 8px 0;
    font-size: 0.875rem;
    border-bottom: none;
  }
  .main-nav__list.is-mobile-open .mega-menu__links .mega-desc {
    font-size: 0.75rem;
  }
  .main-nav__list.is-mobile-open .mega-menu__featured {
    margin-top: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--c-red-600);
  }
  .main-nav__list.is-mobile-open .mega-menu__featured h4 {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }
  .main-nav__list.is-mobile-open .mega-menu__featured p {
    font-size: 0.8125rem;
    margin-bottom: 8px;
  }
}

/* Body scroll lock while drawer open (any viewport with drawer-capable breakpoint) */
body.is-mobile-menu-open {
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   Tranche L1.2 — disable sticky positioning on sidebars at mobile viewport.
   Sticky positioning makes single-column collapsed sidebars overlap or obscure
   content on small screens (Iz phone-test report: "all over the place"). Below
   900px the sidebar should scroll normally with the page.
   Covers: .doc-filters (doc library), .service-side-nav (service pages),
   .side-nav (generic page-layout sidebar; includes .standalone-page--legal
   variant), .news-article-sidebar (news detail related articles).
   Excluded: .site-header (intentional sticky header — different concern).
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .doc-filters,
  .service-side-nav,
  .side-nav,
  .standalone-page--legal .side-nav,
  .news-article-sidebar {
    position: static !important;
    top: auto !important;
  }
}

/* ─────────────────────────────────────────────
   Tranche L1.3 — mobile menu close (×) button.
   Hidden by default; appears only inside the open mobile drawer at ≤1024px,
   positioned absolute top-right. Pairs with js/mobile-menu.js close-button
   click handler. The × is U+00D7 MULTIPLICATION SIGN, rendered as a 1.75rem
   light-weight glyph for a mature mobile-pattern look.
   ───────────────────────────────────────────── */
.main-nav__close-item {
  display: none;
}
.main-nav__close {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px 12px;
  min-width: 44px;
  min-height: 44px;
  color: var(--c-navy-800);
  font-weight: 300;
}
.main-nav__close:hover,
.main-nav__close:focus {
  color: var(--c-red-600);
  outline: none;
}
@media (max-width: 1024px) {
  .main-nav__list.is-mobile-open .main-nav__close-item {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: auto;
  }
  .main-nav__list.is-mobile-open {
    padding-top: 60px;
  }
}

/* ─────────────────────────────────────────────
   Tranche L2 P0 — prevent iOS Safari auto-zoom on form input tap.
   iOS zooms in when input font-size is below 16px. The site uses 0.9375rem
   (15px) defaults on form fields; bump to 16px at mobile breakpoint.
   Covers: /contact webform, /document-library filter form + sort dropdown.
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .standalone-page--webform .webform-submission-form input[type="text"],
  .standalone-page--webform .webform-submission-form input[type="email"],
  .standalone-page--webform .webform-submission-form input[type="tel"],
  .standalone-page--webform .webform-submission-form input[type="url"],
  .standalone-page--webform .webform-submission-form input[type="number"],
  .standalone-page--webform .webform-submission-form input[type="date"],
  .standalone-page--webform .webform-submission-form textarea,
  .standalone-page--webform .webform-submission-form select,
  .doc-filters input[type="text"],
  .doc-filters input[type="date"],
  .doc-filters select,
  .doc-results__sort select {
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────────
   Tranche L2 P1-1 — finger-friendly touch targets on inline content links.
   Bumps tap area on doc-card titles, news-card titles, homepage news-item
   titles, and inline service-rich-body list links toward the WCAG 2.5.5
   44×44 minimum at mobile viewports.
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .service-rich-body ul li a,
  .service-rich-body ol li a {
    display: inline-block;
    padding: 6px 0;
    min-height: 36px;
    line-height: 1.5;
  }
  .doc-card__title a {
    display: inline-block;
    padding: 8px 0;
    min-height: 44px;
    line-height: 1.4;
  }
  .news-card__title a,
  .news-item h3 a {
    display: inline-block;
    padding: 6px 0;
    min-height: 44px;
    line-height: 1.4;
  }
}

/* Tranche L2 P1-2 + L2.1 — REVERTED by L2.2 on 2026-05-27. The <details>
   wrapper approach for mobile sidebar accordion was abandoned; templates now
   render plain <aside class="service-side-nav">. Future accordion attempt
   tracked as (bd) — button + JS toggle, NOT <details>. */

/* ─────────────────────────────────────────────
   Tranche L3.6 — Hero with image full-bleed + LEFT-aligned overlay at original
   large font sizes. Vision text + CTAs sit on the LEFT half of the hero,
   vertically centered. Left-to-right gradient darkens left side for text
   legibility while letting the right side of the image show through cleanly.
   Mobile: gradient flips to bottom-dark, content shifts to bottom (better for
   portrait phone image which is tall).
   Supersedes L3.5 bottom-anchored overlay.
   ───────────────────────────────────────────── */
.hero--image-only {
  display: grid;
  grid-template-areas: "stack";
  grid-template-columns: 1fr;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  overflow: hidden;
  position: relative;
  min-height: 480px;
}

.hero--image-only > .hero__picture {
  grid-area: stack;
  z-index: 1;
  display: block;
  width: 100%;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.hero--image-only > .hero__picture img,
.hero--image-only .hero__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  margin: 0;
}

.hero--image-only > .hero__overlay {
  grid-area: stack;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.55) 25%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.05) 70%,
    transparent 85%
  );
  padding: 0;
  margin: 0;
  position: static !important;
  inset: auto !important;
}

.hero__overlay > .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  pointer-events: auto;
}

.hero__overlay-content {
  padding: 3rem 0;
  max-width: 600px;
  color: #fff;
  text-align: left;
}

.hero--image-only .hero__eyebrow {
  display: inline-block;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #ffd95c;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero--image-only .hero__vision {
  font-size: clamp(1.85rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero--image-only .hero__tagline {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 2rem;
  max-width: 540px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.hero--image-only .hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.hero--image-only .hero__cta {
  min-width: 180px;
  text-align: center;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
}

@media (max-width: 1024px) {
  .hero--image-only {
    min-height: 420px;
  }
  .hero--image-only .hero__vision {
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  }
  .hero__overlay-content {
    padding: 2.5rem 0;
    max-width: 520px;
  }
}

@media (max-width: 820px) {
  .hero--image-only {
    min-height: 380px;
  }
  .hero--image-only > .hero__overlay {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 30%,
      rgba(0, 0, 0, 0.4) 55%,
      rgba(0, 0, 0, 0.8) 100%
    );
    align-items: flex-end;
    justify-content: center;
  }
  .hero__overlay > .container {
    padding: 0 20px;
  }
  .hero__overlay-content {
    padding: 1.75rem 0 2rem;
    max-width: 100%;
    text-align: left;
  }
  .hero--image-only .hero__vision {
    font-size: 1.5rem;
  }
  .hero--image-only .hero__tagline {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 600px) {
  .hero--image-only .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero--image-only .hero__cta {
    width: 100%;
  }
}

/* L2.1 desktop-sidebar !important patch — REVERTED by L2.2; no longer needed
   because the <details> wrapper no longer exists in templates. */

/* ─────────────────────────────────────────────
   Tranche M1 — Search results page styling on /search/node.
   Wires up Drupal core search; styles result cards to match the .doc-card
   pattern from /document-library. Theme override at templates/search-result.html.twig.
   ───────────────────────────────────────────── */
.search-results,
ol.search-results {
  list-style: none;
  padding: 0;
  margin: 32px 0;
  display: grid;
  gap: 16px;
}

.search-result {
  padding: 20px 24px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.search-result:hover {
  border-color: var(--c-red-600);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.search-result__type {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-red-600);
  font-weight: 700;
  margin-bottom: 6px;
}

.search-result__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 8px;
}
.search-result__title a {
  color: var(--c-navy-800);
  text-decoration: none;
}
.search-result__title a:hover {
  color: var(--c-red-600);
  text-decoration: underline;
}

.search-result__snippet {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-ink-70);
  margin-bottom: 8px;
}
.search-result__snippet strong {
  background: rgba(212, 160, 23, 0.18);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}

.search-result__meta {
  font-size: 0.85rem;
  color: var(--c-ink-50);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Search form on the results page itself */
.search-form {
  margin: 24px 0;
}
.search-form input[type="search"] {
  font-size: 1rem;
  padding: 10px 16px;
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius-pill);
  width: 100%;
  max-width: 480px;
}

/* No-results message */
.search-results-empty,
.search-no-results {
  padding: 32px;
  text-align: center;
  color: var(--c-ink-70);
  font-size: 1rem;
}

/* Pager spacing */
.search-results + .pager,
nav.pager {
  margin-top: 32px;
}

/* ─────────────────────────────────────────────
   Tranche M1.1 — Search results page polish.
   Page-hero (breadcrumb + eyebrow + H1 + "N results found" subtitle) renders
   via mcil_theme_preprocess_page → page.html.twig conditional block. On-page
   Drupal search form restyled to site conventions; results h2 hidden (hero
   already announces); no-results panel with helpful tips.
   No search-page.html.twig override — Drupal 11 core search doesn't define
   that theme hook; tried it, didn't pick up; switched to preprocess_page
   injection.
   ───────────────────────────────────────────── */
.page-hero--search {
  background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-paper) 100%);
  padding: 32px 0 24px;
}

.page-hero--search .page-hero__eyebrow {
  color: var(--c-red-600);
}

.page-hero--search .page-hero__subtitle {
  color: var(--c-ink-70);
  font-size: 1rem;
  margin-top: 8px;
}

/* On-page Drupal search form (id="search-form" class="search-form") — NOT to
   be confused with the header search-box. Restyle to site conventions. */
.search-form {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--c-cream);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
}

.search-form .container-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.search-form label[for="edit-keys"] {
  display: none;
}

.search-form input[type="search"],
.search-form input.form-search {
  flex: 1 1 240px;
  font-size: 1rem;
  padding: 10px 16px;
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius-pill);
  max-width: none;
  background: var(--c-paper);
}

.search-form input[type="submit"],
.search-form .form-submit {
  padding: 10px 24px;
  background: var(--c-red-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}

.search-form input[type="submit"]:hover,
.search-form .form-submit:hover {
  background: var(--c-red-700);
}

.search-form .search-help-link {
  display: none;
}

/* Hide Drupal's stock <h2>Search results</h2> (page-hero already announces) */
.mcil-main > #block-mcil-theme-content h2:first-of-type,
ol.search-results + h2,
h2 + ol.search-results {
  /* placeholder anchor; actual h2-hide handled below */
}
#block-mcil-theme-content > h2 {
  display: none;
}

/* No-results tips panel (rendered in page.html.twig when is_search_page +
   search_term + search_result_count == 0) */
.search-no-results {
  margin: 24px auto 64px;
  padding: 32px 24px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--c-ink-70);
  max-width: 720px;
}

.search-no-results p {
  font-size: 1.05rem;
  margin: 0 0 16px;
}

.search-no-results__tips {
  display: inline-block;
  text-align: left;
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0;
}

.search-no-results__tips li {
  margin: 6px 0;
  font-size: 0.95rem;
}

.search-no-results__tips a {
  color: var(--c-red-600);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────
   Tranche Q1 Part B — Hide mega-menu featured panel inside mobile drawer.
   The "Ministerial crest" panel and equivalents clutter the drawer at narrow
   viewports; cards/links are sufficient. Desktop hover/click unaffected.
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .main-nav__list.is-mobile-open .mega-menu__featured {
    display: none;
  }
}

/* ─────────────────────────────────────────────
   Tranche Q1 Part C — Doc-library filter mobile accordion.
   At ≤900px the filter sidebar collapses to a tap-to-expand header bar; tap
   toggles .is-open via js/doc-filters-mobile.js. Desktop ≥901px: form renders
   normally (no override). Uses existing theme tokens (cream / line / navy /
   ink-70) not the spec's --c-paper-muted etc which don't exist.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .doc-filters {
    position: relative;
    padding: 0;
    margin-bottom: 24px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  /* Default state: form collapsed. */
  .doc-filters > form {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  /* Header bar — always visible, click target for toggle */
  .doc-filters::before {
    content: 'Filter documents';
    display: block;
    padding: 14px 44px 14px 16px;
    background: var(--c-cream);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--c-navy-800);
    border-bottom: 1px solid var(--c-line);
    cursor: pointer;
    position: relative;
  }
  .doc-filters::after {
    content: '▾';
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 0.85rem;
    color: var(--c-ink-70);
    pointer-events: none;
    transition: transform 0.2s;
  }

  /* When toggled open via JS */
  .doc-filters.is-open > form {
    max-height: 2000px;
    padding: 16px;
  }
  .doc-filters.is-open::after {
    transform: rotate(180deg);
  }
}

/* ─────────────────────────────────────────────
   Tranche Q1.1 — Mobile search-box: own row below brand/hamburger.
   Header structure is .header-inner > .brand + .header-tools, where
   .header-tools contains both .search-box and .mobile-menu-btn.
   At ≤700px we flatten .header-tools via display: contents so its children
   become direct flex items of .header-inner; then order: 99 + flex-basis:100%
   on .search-box wraps it to its own full-width row below brand + hamburger.
   ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .header-inner {
    flex-wrap: wrap !important;
  }
  .header-tools {
    display: contents;
  }
  .search-box {
    order: 99;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 4px;
    padding: 0;
    box-sizing: border-box;
    position: relative;
  }
  .search-box input[type="search"],
  .search-box input#site-search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px 10px 40px;
    font-size: 16px;
    border-radius: 22px;
  }
  .search-box svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

/* ─────────────────────────────────────────────
   Tranche Q2 — Share buttons on news articles. 6 platform-colored circular
   icon buttons (WhatsApp / Facebook / X / LinkedIn / Email / Copy link),
   Samoa-prioritized order (WhatsApp first per messaging dominance). Pure CSS
   hover states; tiny JS (article-share.js) handles the Copy button via
   navigator.clipboard.writeText + "Copied!" feedback.
   ───────────────────────────────────────────── */
.article-share {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 16px;
  padding: 16px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.article-share__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-ink-70);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.article-share__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
  flex-wrap: wrap;
}
.article-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-navy-800);
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  text-decoration: none;
  position: relative;
}
.article-share__btn:hover,
.article-share__btn:focus {
  transform: translateY(-2px);
}
.article-share__btn--whatsapp:hover  { background: #25d366; color: #fff; border-color: #25d366; }
.article-share__btn--facebook:hover  { background: #1877f2; color: #fff; border-color: #1877f2; }
.article-share__btn--twitter:hover   { background: #000;    color: #fff; border-color: #000; }
.article-share__btn--linkedin:hover  { background: #0077b5; color: #fff; border-color: #0077b5; }
.article-share__btn--email:hover     { background: var(--c-red-600); color: #fff; border-color: var(--c-red-600); }
.article-share__btn--copy:hover      { background: var(--c-navy-800); color: #fff; border-color: var(--c-navy-800); }

.article-share__btn.is-copied {
  background: #28a745;
  color: #fff;
  border-color: #28a745;
}
.article-share__btn.is-copied::after {
  content: 'Copied!';
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  white-space: nowrap;
  color: #28a745;
  font-weight: 600;
}

.article-share__btn svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 600px) {
  .article-share {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .article-share__list {
    width: 100%;
    justify-content: space-between;
  }
}

/* ─────────────────────────────────────────────
   Tranche M27.3 Part D — Style standalone-page primary-button anchor links.
   /accessibility has <a class="btn btn-primary"> "Send accessibility feedback"
   pointing to /contact. No site-wide rule for a.btn-primary existed (only the
   contact form's <button>.btn-primary at L1000), so the link rendered unstyled.
   Reuses the red-600/white CTA aesthetic from the contact form button + about-
   page jobs-portal button — site CTA design system.
   Scoped to .standalone-page--accessibility primarily; .standalone-body-wrap as
   a safety net catches any other standalone page using the same pattern.
   ───────────────────────────────────────────── */
.standalone-page--accessibility a.btn.btn-primary,
.standalone-body-wrap a.btn.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--c-red-600);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  margin: 16px 0;
  transition: background 0.2s ease;
}
.standalone-page--accessibility a.btn.btn-primary:hover,
.standalone-body-wrap a.btn.btn-primary:hover {
  background: var(--c-red-700);
  color: #fff !important;
}

/* ─────────────────────────────────────────────
   Tranche M27.3 Part E — Search hero color overrides.
   M1.1 set .page-hero--search background to cream gradient but left the title
   + breadcrumbs inheriting white/pale-blue from base .page-hero (invisible on
   cream). Fill in the missing overrides. Specificity 0,2,0 > base 0,1,1 so
   no !important needed. Eyebrow + subtitle already covered by M1.1.
   ───────────────────────────────────────────── */
.page-hero--search .page-hero__title { color: var(--c-navy-800); }
.page-hero--search .breadcrumbs { color: var(--c-ink-70); }
.page-hero--search .breadcrumbs a { color: var(--c-navy-800); text-decoration: none; }
.page-hero--search .breadcrumbs a:hover { color: var(--c-navy-800); text-decoration: underline; }
.page-hero--search .breadcrumbs__separator { color: var(--c-ink-50, #888); }
.page-hero--search .breadcrumbs__current { color: var(--c-ink-70); }