/* ==========================================================================
   IRINN — header, navigation, footer and homepage components.
   Depends on the tokens declared in theme.css.
   ========================================================================== */

/* --- Utility bar -------------------------------------------------------- */
.utility-bar {
  position: relative;
  background: var(--indigo-900);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--t-sm);
}

/* A 3px tricolour hairline along the very top of the page. Decorative, so it
   is a pseudo-element and carries no text. */
.utility-bar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tricolour);
}

.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 40px;
  padding-block: var(--s1);
}

.utility-bar a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.utility-bar a:hover {
  color: var(--white);
  text-decoration: underline;
}

.utility-bar__group {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.gov-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.gov-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--saffron-500);
  flex: none;
}

/* A- / A / A+ and contrast controls */
.a11y-controls {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.a11y-controls__label {
  color: rgba(255, 255, 255, 0.7);
  margin-right: var(--s1);
}

.a11y-btn {
  min-width: 30px;
  min-height: 30px;
  padding: 0 var(--s2);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-sm);
  cursor: pointer;
  line-height: 1;
}

.a11y-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.a11y-btn[aria-pressed='true'] {
  background: var(--white);
  color: var(--nixi-navy);
  border-color: var(--white);
}

.a11y-btn--lg {
  font-size: var(--t-base);
}

.a11y-btn--sm {
  font-size: var(--t-xs);
}

.social-links {
  display: flex;
  gap: var(--s1);
}

.social-links a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
}

.social-links a:hover {
  background: rgba(255, 255, 255, 0.18);
}

.social-links svg {
  width: 16px;
  height: 16px;
}

/* --- Language switcher (GTranslate) --------------------------------------
   The widget injects its own <select>, so these rules target what it renders
   rather than markup we control. Kept narrow so a widget update is unlikely
   to break the layout: if the selector stops matching, the control falls back
   to the browser default and stays usable. */
.lang-select {
  display: flex;
  align-items: center;
}

.lang-select .gtranslate_wrapper {
  display: flex;
  align-items: center;
}

.lang-select select,
.lang-select .gt_selector {
  min-height: 30px;
  max-width: 160px;
  padding: 0 1.9rem 0 var(--s2);
  /* Not `font: inherit` — Varela Round carries no Devanagari, Bengali,
     Gujarati, Kannada, Malayalam, Gurmukhi, Telugu or Arabic glyphs, and the
     options are rendered in their native scripts. A system stack lets the
     platform pick a face that actually has them. */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  font-size: var(--t-xs);
  line-height: 1;
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-sm);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2 6 8.2l4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 11px;
}

.lang-select select:hover,
.lang-select .gt_selector:hover {
  background-color: rgba(255, 255, 255, 0.24);
}

.lang-select select:focus-visible,
.lang-select .gt_selector:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

/* The open dropdown list renders in the OS palette, so keep it readable. */
.lang-select select option {
  color: var(--ink);
  background: var(--white);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
}

[data-contrast='high'] .lang-select select,
[data-contrast='high'] .lang-select .gt_selector {
  background-color: var(--white);
  color: #000;
  border-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2 6 8.2l4-4' fill='none' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Google Translate injects a top banner that shifts the sticky header. */
body {
  top: 0 !important;
}

.skiptranslate iframe {
  display: none !important;
}

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--header-h);
  padding-block: var(--s2);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  flex: none;
}

.brand__mark {
  height: 46px;
  width: auto;
}

.brand__text {
  display: none;
}

.brand__name {
  display: block;
  font-size: var(--t-lg);
  color: var(--nixi-navy);
  line-height: 1.1;
}

.brand__tag {
  display: block;
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}

@media (min-width: 1100px) {
  .brand__text {
    display: block;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

@media (min-width: 1100px) {
  .accessibility-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .accessibility-toggle,
  .header-language {
    width: 42px;
    min-width: 42px;
    justify-content: center;
    padding-inline: 0;
  }

  .header-language {
    width: auto;
    min-width: 96px;
    padding-inline: .7rem;
  }
}

/* Search */
.header-search {
  display: none;
  position: relative;
}

@media (min-width: 1240px) {
  .header-search {
    display: block;
  }
}

.header-search input {
  min-height: 40px;
  width: 150px;
  padding-left: 2.3rem;
  font-size: var(--t-sm);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  transition: width .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.header-search input:focus {
  width: 230px;
}

.header-search svg {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

/* Mobile nav toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s3);
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__close {
  display: block;
}

@media (min-width: 1100px) {
  .nav-toggle {
    display: none;
  }
}

/* --- Primary navigation ------------------------------------------------- */
.primary-nav {
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .035);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  margin: 0;
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s3) var(--s3);
  min-height: 48px;
  font: inherit;
  font-size: var(--t-base);
  color: var(--body);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nav__link:hover {
  color: var(--brand);
  background: var(--indigo-50);
}

.nav__link.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.nav__chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}

.nav__toggle[aria-expanded='true'] .nav__chevron {
  transform: rotate(180deg);
}

.nav__toggle[aria-expanded='true'] {
  color: var(--brand);
  background: var(--indigo-50);
}

.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 90;
  min-width: 300px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-lg);
}

.nav__panel[hidden] {
  display: none;
}

.nav__panel-inner {
  display: grid;
  gap: var(--s4);
  padding: var(--s4);
}

@media (min-width: 900px) {
  .nav__panel--wide .nav__panel-inner {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

.nav__group-title {
  margin: 0 0 var(--s2);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

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

.nav__group-list li {
  margin: 0;
}

.nav__sublink {
  display: block;
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  color: var(--body);
  text-decoration: none;
  line-height: 1.35;
}

.nav__sublink span {
  display: block;
}

.nav__sublink small {
  display: block;
  font-size: var(--t-xs);
  color: var(--muted);
}

.nav__sublink:hover {
  background: var(--indigo-50);
  color: var(--brand-dark);
}

.nav__sublink.is-active {
  background: var(--indigo-50);
  color: var(--brand);
}

.nav__ext {
  font-size: var(--t-xs);
  color: var(--muted);
}

/* Mobile navigation */
@media (max-width: 1099px) {
  .primary-nav {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    top: var(--header-h);
    z-index: 99;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    box-shadow: var(--sh-lg);
  }

  .primary-nav.is-open {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    padding: var(--s3) var(--s4) var(--s6);
  }

  .mobile-language-slot {
    padding: var(--s3) var(--s4) 0;
  }

  .nav__item {
    border-bottom: 1px solid var(--line);
  }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    border-bottom: 0;
    padding-inline: 0;
  }

  .nav__link.is-active {
    border-left: 3px solid var(--brand);
    padding-left: var(--s3);
  }

  .nav__panel {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: var(--surface-2);
    border-radius: var(--r);
    margin-bottom: var(--s3);
  }

  .nav__panel-inner {
    grid-template-columns: 1fr !important;
  }
}

/* --- Quick actions ------------------------------------------------------ */
.quick-actions {
  margin-top: calc(var(--s6) * -1);
  position: relative;
  z-index: 2;
}

.quick-actions .grid {
  gap: var(--s4);
}

.action-card {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  color: inherit;
}

.action-card--green {
  border-left-color: var(--green-600);
}

.action-card--orange {
  border-left-color: var(--saffron-500);
}

.action-card--navy {
  border-left-color: var(--nixi-navy);
}

.action-card__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--indigo-50);
  color: var(--brand);
}

.action-card--green .action-card__icon {
  background: var(--green-50);
  color: var(--green-700);
}

.action-card--orange .action-card__icon {
  background: #fdf3e7;
  color: #a55a12;
}

.action-card--navy .action-card__icon {
  background: #eceefa;
  color: var(--nixi-navy);
}

.action-card__icon svg {
  width: 20px;
  height: 20px;
}

.action-card b {
  display: block;
  color: var(--ink);
  font-weight: 400;
}

.action-card span {
  display: block;
  font-size: var(--t-sm);
  color: var(--muted);
}

/* --- Feature list ------------------------------------------------------- */
.tick-list {
  list-style: none;
  padding: 0;
}

.tick-list li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}

.tick-list li::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* --- News list ---------------------------------------------------------- */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list li {
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.news-list li:last-child {
  border-bottom: 0;
}

.news-list a {
  display: block;
  padding: var(--s3) 0;
  text-decoration: none;
  color: var(--ink);
}

.news-list a:hover .news-list__title {
  color: var(--brand);
  text-decoration: underline;
}

.news-list__date {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 2px;
}

.news-list__title {
  color: var(--ink);
}

/* --- Partner / related links strip -------------------------------------- */
.link-strip {
  display: grid;
  gap: var(--s3);
}

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

@media (min-width: 1000px) {
  .link-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.link-strip a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--t-base);
}

.link-strip a:hover {
  border-color: var(--brand);
  background: var(--indigo-50);
  color: var(--brand-dark);
}

.link-strip svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
  flex: none;
}

/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  background: linear-gradient(115deg, var(--indigo-800), var(--indigo-600));
  color: var(--white);
  border-radius: var(--r-xl);
  padding: var(--s6);
  display: grid;
  gap: var(--s4);
  align-items: center;
}

@media (min-width: 860px) {
  .cta-band {
    grid-template-columns: 1fr auto;
    padding: var(--s7);
  }
}

.cta-band h2 {
  color: var(--white);
  margin-bottom: var(--s2);
}

.cta-band p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 60ch;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  position: relative;
  margin-top: var(--s8);
  color: rgba(255, 255, 255, 0.78);
  background: var(--indigo-900);
  line-height: 1.55;
}

/* Tricolour band closing the page, mirroring the hairline at the very top. */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--tricolour);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--white);
}

/* --- Government / NIXI-family logo strip ---------------------------------
   White tiles, because the five marks come from five organisations with
   incompatible artwork: NIXI's and .in's are colour-on-white and cannot be
   knocked out, while MeitY's and india.gov.in's ship as white-on-transparent
   and were recoloured to match. A uniform tile is the only treatment that
   renders all five correctly, and it is the convention on Indian government
   sites in any case.

   Each logo is normalised by height, not width, so wordmarks and roundels sit
   on a common baseline instead of one dominating the row. */
.footer__partners {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--s5);
}

.footer__partners-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__partners-list li {
  margin: 0;
}

.footer__partners-list a {
  display: grid;
  place-items: center;
  height: 62px;
  padding: 0 var(--s4);
  background: var(--white);
  border-radius: var(--r);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.footer__partners-list a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.footer__partners-list a:focus-visible {
  outline: 3px solid var(--focus-on-dark);
  outline-offset: 3px;
}

/* height:auto keeps the intrinsic aspect ratio despite the width/height attrs,
   which are present so the browser can reserve space and avoid layout shift. */
.footer__partners-list img {
  width: auto;
  height: 34px;
  max-width: 168px;
  object-fit: contain;
}

/* Wordmarks and squarer marks are balanced by eye rather than by a single
   height, so each occupies a similar area in the row. Aspect ratios differ a
   lot: MeitY 3.03:1, NIXI 2.21:1, Digital India 2.41:1, .in 1:1,
   india.gov.in 1.65:1. The two squarer marks get more height so they do not
   read as half the size of the wordmarks beside them. */
.footer__partners-list li:nth-child(3) img {
  height: 46px;
}

.footer__partners-list li:nth-child(5) img {
  height: 46px;
}

@media (max-width: 599px) {
  .footer__partners {
    padding-block: var(--s4);
  }

  .footer__partners-list {
    gap: var(--s2);
  }

  .footer__partners-list a {
    height: 52px;
    padding: 0 var(--s3);
  }

  .footer__partners-list img {
    height: 26px;
    max-width: 124px;
  }

  .footer__partners-list li:nth-child(3) img {
    height: 34px;
  }

  .footer__partners-list li:nth-child(5) img {
    height: 34px;
  }
}

[data-contrast='high'] .footer__partners-list a {
  border: 2px solid #000;
}

.site-footer h2,
.site-footer h3 {
  margin-bottom: var(--s3);
  color: var(--white);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Main columns */

.footer__main {
  display: grid;
  gap: var(--s4);
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
}

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

@media (min-width: 1060px) {
  .footer__main {
    grid-template-columns:
      minmax(240px, 1.15fr) minmax(160px, 0.72fr) minmax(160px, 0.72fr) minmax(360px, 1.35fr);
    gap: clamp(1.25rem, 2.25vw, 2.25rem);
  }
}

/* Brand */

.footer__brand {
  margin-bottom: var(--s2);
}

.footer__brand-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.footer__brand-mark {
  display: block;
  width: 76px;
  height: 56px;
  margin: 0;
  padding: 8px 10px;
  object-fit: contain;
  background: var(--white);
  border-radius: 8px;
}

.footer__brand-divider {
  width: 1px;
  height: 34px;
  flex: none;
  background: rgba(255, 255, 255, 0.35);
}

.footer__brand-name {
  color: var(--white);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}

.footer__brand-tag {
  max-width: 390px;
  margin: var(--s2) 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.5;
}

.footer__description {
  max-width: 42ch;
  margin-block: var(--s2) var(--s3);
  color: rgba(255, 255, 255, 0.72);
}

/* Lists */

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

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

.footer__list a {
  display: inline-block;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer__list a:hover,
.footer__list a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  transform: translateX(2px);
}

/* Contact */

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

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-bottom: var(--s1);
}

.footer__contact svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--saffron-500);
}

.footer__contact span {
  min-width: 0;
}

.footer__phones {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  white-space: nowrap;
}

.footer__phones a {
  white-space: nowrap;
}

/* Policies */

.footer__policies {
  padding-block: var(--s2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.08);
}

.footer__policies ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s4);
  margin: 0;
  padding: 0;
  font-size: var(--t-sm);
  list-style: none;
}

.footer__policies li {
  margin: 0;
}

.footer__policies a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Bottom */

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s2);
  font-size: var(--t-sm);
}

.footer__bottom p {
  flex: 1 1 520px;
  line-height: 1.45;
}

.footer__bottom .dim {
  color: rgba(255, 255, 255, 0.52);
}

/* Social media */

.footer__social {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__social li {
  margin: 0;
  padding: 0;
}

.footer__social a {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.footer__social a:hover,
.footer__social a:focus-visible {
  color: var(--white);
  background: var(--brand);
  border-color: var(--brand);
  text-decoration: none;
  transform: translateY(-2px);
}

.footer__social a:focus-visible {
  outline: 3px solid var(--focus-on-dark);
  outline-offset: 3px;
}

.footer__social svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Mobile */

@media (max-width: 719px) {
  .footer__main {
    padding-block: var(--s6);
  }

  .footer__bottom {
    align-items: flex-start;
  }

  .footer__bottom p {
    flex-basis: 100%;
  }

  .footer__social {
    width: 100%;
    justify-content: flex-start;
  }

  .footer__policies ul {
    justify-content: flex-start;
  }
}

.back-to-top {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 80;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  box-shadow: var(--sh-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* --- Transfer policy timescales ---------------------------------------- */

.timescale-card {
  border-top: 4px solid var(--brand);
}

.timescale-card .card__head {
  padding: var(--s4) var(--s5);
}

.timescale-card .card__head h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: var(--t-lg);
  text-transform: none;
  letter-spacing: normal;
}

.timescale-card .card__body {
  padding: 0;
}

.timescale-list {
  margin: 0;
}

.timescale-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}

.timescale-list__item:last-child {
  border-bottom: 0;
}

.timescale-list dt {
  min-width: 0;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.45;
}

.timescale-list dd {
  margin: 0;
}

.timescale-list__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 10px;
  color: var(--brand-dark);
  background: var(--indigo-50);
  border: 1px solid var(--indigo-200);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.timescale-list__value--free {
  color: var(--green-700);
  background: var(--green-50);
  border-color: var(--green-200);
}

.timescale-list__item:hover {
  background: var(--surface-2);
}

@media (max-width: 399px) {
  .timescale-list__item {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }

  .timescale-list dd {
    justify-self: start;
  }
}

/* --- FAQ support card --------------------------------------------------- */

.support-card .card__head {
  padding: var(--s4) var(--s5);
}

.support-card .card__head h2 {
  margin: 0;
  color: var(--green-700);
  font-size: var(--t-lg);
  letter-spacing: normal;
  text-transform: none;
}

.support-card__intro {
  margin: 0 0 var(--s4);
  color: var(--muted);
  line-height: 1.6;
}

.support-details {
  display: grid;
  gap: var(--s3);
  margin: 0 0 var(--s4);
}

.support-details__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.support-details__item:hover {
  background: var(--green-50);
  border-color: var(--green-600);
  transform: translateY(-1px);
}

.support-details__icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--green-700);
  background: var(--green-50);
  border-radius: 50%;
}

.support-details__icon svg {
  width: 19px;
  height: 19px;
}

.support-details__item>div {
  min-width: 0;
}

.support-details dt {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.support-details dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.45;
}

.support-details dd a {
  color: var(--brand);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.support-details dd a:hover,
.support-details dd a:focus-visible {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-card__button {
  margin-top: var(--s4);
}

@media (max-width: 399px) {
  .support-card .card__body {
    padding: var(--s4);
  }

  .support-details__item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--s2);
    padding: var(--s3);
  }

  .support-details__icon {
    width: 36px;
    height: 36px;
  }
}

/* --- Improved accessibility and header layout -------------------------- */

/* Accessibility toolbar */

.utility-bar {
  color: rgba(255, 255, 255, 0.92);
  background: var(--nixi-navy);
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
  padding-block: 5px;
}

.a11y-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.a11y-toolbar__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--t-xs);
  font-weight: 600;
}

.a11y-toolbar__title svg {
  width: 18px;
  height: 18px;
  color: var(--saffron-500);
}

.a11y-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.a11y-btn {
  display: inline-flex;
  min-width: 34px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 9px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  font: inherit;
  font-size: var(--t-sm);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.a11y-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.a11y-btn:focus-visible {
  outline: 3px solid var(--focus-on-dark);
  outline-offset: 2px;
}

.a11y-btn[aria-pressed='true'] {
  color: var(--nixi-navy);
  background: var(--white);
  border-color: var(--white);
}

.a11y-btn--sm {
  font-size: var(--t-xs);
}

.a11y-btn--lg {
  font-size: var(--t-base);
}

.a11y-btn--contrast svg {
  width: 17px;
  height: 17px;
}

/* Brand */

/* .site-header__inner {
  min-height: 88px;
} */

.site-header__inner {
  min-height: 72px;
  padding-block: 0.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* .brand__mark {
  width: auto;
  height: 54px;
} */

.brand__mark {
  width: auto;
  height: 46px;
}

.brand__text {
  display: block;
}

.brand__gov {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
}

.brand__gov-dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--saffron-500);
  border-radius: 50%;
}

.brand__name {
  display: block;
  color: var(--nixi-navy);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.1;
}

.brand__tag {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
}

/* Header actions */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* Language selector between search and login */

.header-language {
  position: relative;
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
}

.header-language__icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--brand);
}

.header-language .lang-select,
.header-language .gtranslate_wrapper {
  display: flex;
  align-items: center;
}

.header-language .lang-select select,
.header-language .lang-select .gt_selector {
  width: auto;
  min-width: 92px;
  max-width: 125px;
  min-height: 36px;
  padding: 0 1.7rem 0 4px;
  color: var(--ink);
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    sans-serif;
  font-size: var(--t-sm);
  cursor: pointer;
}

.header-language .lang-select select:hover,
.header-language .lang-select .gt_selector:hover {
  background-color: transparent;
}

.header-language .lang-select select:focus-visible,
.header-language .lang-select .gt_selector:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.header-language .lang-select select option {
  color: var(--ink);
  background: var(--white);
}

/* Responsive header */

@media (max-width: 1099px) {
  .brand__gov {
    display: none;
  }

  .brand__tag {
    display: none;
  }

  .header-language .lang-select select,
  .header-language .lang-select .gt_selector {
    min-width: 80px;
    max-width: 95px;
  }
}

@media (max-width: 819px) {
  .a11y-toolbar__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .brand__text {
    display: none;
  }

  /* Mobile par search aur language control hide honge */
  .header-search,
  .header-language {
    display: none;
  }

  /* Mobile header ki height compact hogi */
  .site-header__inner {
    min-height: 64px;
  }

  /* Mobile logo ka balanced size */
  .brand__mark {
    height: 40px;
  }
}

@media (max-width: 599px) {
  .a11y-btn--contrast span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .header-login {
    padding-inline: var(--s2);
    font-size: var(--t-xs);
  }
}

/* --- Accessibility widget ---------------------------------------------- */

.accessibility-widget {
  position: relative;
  flex: none;
}

.accessibility-toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--nixi-navy);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.accessibility-toggle:hover,
.accessibility-toggle[aria-expanded='true'] {
  color: var(--white);
  background: var(--brand);
  border-color: var(--brand);
}

.accessibility-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.accessibility-toggle svg {
  width: 21px;
  height: 21px;
  flex: none;
}

.accessibility-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 150;
  width: min(360px, calc(100vw - 24px));
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.accessibility-panel[hidden] {
  display: none;
}

.accessibility-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  color: var(--white);
  background: linear-gradient(120deg,
      var(--nixi-navy),
      var(--brand));
}

.accessibility-panel__header h2 {
  margin: 0;
  color: var(--white);
  font-size: var(--t-lg);
  letter-spacing: normal;
  text-transform: none;
}

.accessibility-panel__header p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--t-xs);
}

.accessibility-panel__close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  padding: 0;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
}

.accessibility-panel__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.accessibility-panel__close:focus-visible {
  outline: 3px solid var(--focus-on-dark);
  outline-offset: 2px;
}

.accessibility-panel__close svg {
  width: 17px;
  height: 17px;
}

.accessibility-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: var(--s4);
}

.accessibility-tool {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: var(--body);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font: inherit;
  font-size: var(--t-sm);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.accessibility-tool:hover {
  color: var(--brand-dark);
  background: var(--indigo-50);
  border-color: var(--brand);
  transform: translateY(-1px);
}

.accessibility-tool:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.accessibility-tool[aria-pressed='true'] {
  color: var(--white);
  background: var(--brand);
  border-color: var(--brand);
}

.accessibility-tool__icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  color: var(--brand);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: var(--t-sm);
  font-weight: 700;
}

.accessibility-tool[aria-pressed='true'] .accessibility-tool__icon {
  color: var(--brand);
  background: var(--white);
}

.accessibility-tool--reset {
  grid-column: 1 / -1;
  justify-content: center;
  color: #991b1b;
  background: #fff5f5;
  border-color: #fecaca;
}

.accessibility-tool--reset:hover {
  color: #7f1d1d;
  background: #fee2e2;
  border-color: #ef4444;
}

/* Grayscale */

html[data-a11y-grayscale='true'] {
  filter: grayscale(1);
}

/* High contrast uses existing theme.css high-contrast styles */

/* Negative contrast */

html[data-a11y-mode='negative'] body {
  color: #ffffff;
  background: #000000;
  filter: invert(1) hue-rotate(180deg);
}

html[data-a11y-mode='negative'] img,
html[data-a11y-mode='negative'] picture,
html[data-a11y-mode='negative'] video {
  filter: invert(1) hue-rotate(180deg);
}

/* Light background */

html[data-a11y-mode='light'] {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #111827;
  --body: #1f2937;
  --muted: #374151;
  --line: #cbd5e1;
  --line-strong: #94a3b8;
}

/* Underline all links */

html[data-a11y-links='true'] body a:not(.btn) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* Readable font */

html[data-a11y-font='readable'] body,
html[data-a11y-font='readable'] button,
html[data-a11y-font='readable'] input,
html[data-a11y-font='readable'] select,
html[data-a11y-font='readable'] textarea {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;
  letter-spacing: 0.02em;
}

/* Responsive panel */

@media (max-width: 819px) {
  .accessibility-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    /* clip: rect(0 0 0 0); */
    clip: inset(50%);
    white-space: nowrap;
  }

  .accessibility-toggle {
    width: 42px;
    padding: 0;
  }

  .accessibility-panel {
    position: fixed;
    top: 80px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
}

@media (max-width: 399px) {
  .accessibility-tools {
    grid-template-columns: 1fr;
  }

  .accessibility-tool--reset {
    grid-column: auto;
  }
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* --- Professional homepage refresh ------------------------------------ */
.site-header__inner {
  min-height: 72px;
  padding-block: .5rem;
}

.brand__mark {
  height: 46px;
}

.header-search input {
  width: 170px;
}

.site-footer {
  margin-top: 0;
}

.home-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  /* Indigo ground, with a saffron wash top-right and a green one bottom-left,
     so the tricolour is present in the field itself rather than only in trim. */
  background:
    radial-gradient(ellipse 55% 45% at 88% 6%, rgba(230, 152, 71, .28), transparent 62%),
    radial-gradient(ellipse 50% 50% at 4% 96%, rgba(79, 141, 59, .26), transparent 60%),
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .10), transparent 31rem),
    linear-gradient(120deg, var(--indigo-900) 0%, #3331ad 58%, #5646e7 100%);
}

.home-hero::before {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to right, transparent, #000);
}

/* ==========================================================================
   Animated hero globe
   Replaces the static CSS faux-globe that previously sat here. It echoes
   IRINNLogo.png -- a sphere encircled by saffron, indigo and green orbital
   rings -- and sends data packets around those rings, which is what a registry
   does: route number resources across a connected India.

   All motion is CSS on an inline SVG. No JavaScript and no inline style, so the
   strict CSP holds. Everything freezes under prefers-reduced-motion, where the
   composition still reads as a finished illustration rather than an empty box.
   ========================================================================== */
/* A real grid column, in the slot the resource-panel used to occupy, so the
   whole illustration is visible rather than bleeding off the right edge. */
.home-hero__orbit {
  justify-self: center;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  pointer-events: none;
}

/* Below the two-column breakpoint the globe would push the copy off the first
   screen, so it is dropped rather than stacked. */
@media (max-width: 899px) {
  .home-hero__orbit {
    display: none;
  }
}

.hero-globe {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The sphere breathes, so the piece is never wholly still. */
.hero-globe__sphere {
  animation: globe-breathe 9s ease-in-out infinite;
  transform-origin: 200px 200px;
}

@keyframes globe-breathe {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

/* Latitude lines flatten and swell to imply rotation without redrawing. */
.hero-globe__lat {
  animation: lat-sweep 20s ease-in-out infinite;
  transform-origin: 200px 200px;
}

.hero-globe__lat--b {
  animation-duration: 26s;
  animation-direction: reverse;
}

.hero-globe__lat--c {
  animation-duration: 23s;
  animation-delay: -6s;
}

@keyframes lat-sweep {

  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.55);
  }
}

/* Each ring turns in its own plane, at its own rate, like the logo's rings. */
.hero-globe__ring {
  transform-origin: 200px 200px;
  transform-box: view-box;
}

.hero-globe__ring--saffron {
  animation: ring-spin 24s linear infinite;
}

.hero-globe__ring--indigo {
  animation: ring-spin 34s linear infinite reverse;
}

.hero-globe__ring--green {
  animation: ring-spin 29s linear infinite;
}

@keyframes ring-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Packets travelling the orbits — the routing metaphor.
   offset-path is well supported; where it is not, the dots simply sit at their
   authored position and the rest of the scene still works. */
.hero-globe__packet {
  offset-path: path('M 200 108 A 132 132 0 1 1 199 108');
  offset-rotate: 0deg;
  animation: packet-travel 8s linear infinite;
}

.hero-globe__packet--2 {
  animation-duration: 11s;
  animation-delay: -4s;
}

.hero-globe__packet--3 {
  animation-duration: 14s;
  animation-delay: -9s;
}

@keyframes packet-travel {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

/* Nodes across India light in sequence, like allocations landing. */
.hero-globe__node {
  animation: node-pulse 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-globe__node--2 {
  animation-delay: 0.6s;
}

.hero-globe__node--3 {
  animation-delay: 1.2s;
}

.hero-globe__node--4 {
  animation-delay: 1.8s;
}

.hero-globe__node--5 {
  animation-delay: 2.4s;
}

@keyframes node-pulse {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.8);
  }

  45% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.hero-globe__halo {
  animation: halo-expand 3.6s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-globe__halo--2 {
  animation-delay: 1.2s;
}

.hero-globe__halo--3 {
  animation-delay: 2.4s;
}

@keyframes halo-expand {
  0% {
    opacity: 0.55;
    transform: scale(0.4);
  }

  75% {
    opacity: 0;
    transform: scale(2.8);
  }

  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-globe__sphere,
  .hero-globe__lat,
  .hero-globe__ring,
  .hero-globe__packet,
  .hero-globe__node,
  .hero-globe__halo {
    animation: none !important;
  }

  .hero-globe__halo {
    opacity: 0;
  }

  .hero-globe__node {
    opacity: 1;
  }
}

/* High contrast: the illustration is decorative, so drop it rather than fight
   the contrast requirements with a translucent drawing. */
[data-contrast='high'] .home-hero__orbit {
  display: none;
}

.home-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(4rem, 7vw, 6.25rem);
}

.home-hero__content {
  max-width: 690px;
}

.home-hero__eyebrow,
.home-section-intro__eyebrow {
  margin: 0 0 1rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.home-hero__eyebrow {
  color: rgba(255, 255, 255, .82);
}

.home-hero h1 {
  max-width: 15ch;
  margin-bottom: 1.25rem;
  color: var(--white);
  font-size: clamp(2.5rem, 5vw, 4.55rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.home-hero__lead {
  max-width: 58ch;
  margin-bottom: 1.75rem;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.home-hero__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.4rem;
  margin: 1.5rem 0 0;
  padding: 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--t-sm);
  list-style: none;
}

.home-hero__assurances li {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: 0;
}

.home-hero__assurances li::before {
  width: .45rem;
  height: .45rem;
  content: '';
  background: #63dc92;
  border-radius: 50%;
}

.task-section {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: #f7f8fc;
}

.home-section-intro {
  display: flex;
  gap: 2rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.home-section-intro h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -.025em;
}

.home-section-intro__eyebrow {
  color: var(--brand);
}

.home-section-intro>p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
}

.task-grid {
  display: grid;
  gap: 1rem;
}

/* --- Homepage notice strip -----------------------------------------------
   Horizontally scrolling, auto-advancing every 5s (public/js/site.js);
   pauses on hover, focus, touch and prefers-reduced-motion. --- */
.notice-strip {
  position: relative;
  padding: 1rem 0;
  background: linear-gradient(90deg, rgba(230, 152, 71, .1), rgba(255, 255, 255, .96) 25%, rgba(126, 192, 99, .1));
  border-block: 1px solid var(--line);
}

.notice-strip__layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.25rem;
}

.notice-strip__heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

.notice-strip__heading h2 {
  margin: 0;
  color: var(--indigo-900);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.15;
}

.notice-strip__eyebrow {
  margin: 0 0 .15rem;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.notice-strip__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: var(--white);
  background: var(--indigo-800);
  border-radius: 50%;
  box-shadow: 0 .5rem 1.25rem rgba(51, 39, 121, .18);
}

.notice-strip__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.notice-strip__viewport {
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
}

.notice-strip__track {
  display: flex;
  gap: .75rem;
  margin: 0;
  padding: .25rem 1rem .5rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 39, 121, .35) transparent;
  list-style: none;
}

.notice-strip__track::-webkit-scrollbar {
  height: .3rem;
}

.notice-strip__track::-webkit-scrollbar-thumb {
  background: rgba(51, 39, 121, .35);
  border-radius: 999px;
}

.notice-strip__item {
  display: flex;
  min-width: min(31rem, 78vw);
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .75rem;
  scroll-snap-align: start;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.notice-strip__item:hover {
  border-color: rgba(51, 39, 121, .32);
  box-shadow: 0 .65rem 1.5rem rgba(35, 28, 83, .09);
  transform: translateY(-2px);
}

.notice-strip__item a {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink);
  font-size: .93rem;
  font-weight: 650;
  line-height: 1.45;
  text-decoration: none;
}

.notice-strip__item a:focus-visible {
  border-radius: .25rem;
  outline: 3px solid rgba(230, 152, 71, .45);
  outline-offset: 4px;
}

.notice-strip__tag {
  flex-shrink: 0;
  padding: .35rem .55rem;
  color: var(--indigo-800);
  background: rgba(51, 39, 121, .09);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.notice-strip__tag--important {
  color: var(--accent-1-ink);
  background: rgba(230, 152, 71, .18);
}

.notice-strip__arrow {
  flex-shrink: 0;
  color: var(--indigo-800);
  font-size: 1.15rem;
  transition: transform 180ms ease;
}

.notice-strip__item a:hover .notice-strip__arrow {
  transform: translateX(.25rem);
}

.notice-strip__controls {
  display: flex;
  gap: .4rem;
}

.notice-strip__control {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  place-items: center;
  color: var(--indigo-800);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.notice-strip__control:hover {
  color: var(--white);
  background: var(--indigo-800);
  border-color: var(--indigo-800);
  transform: translateY(-1px);
}

.notice-strip__control:focus-visible {
  outline: 3px solid rgba(230, 152, 71, .45);
  outline-offset: 2px;
}

.notice-strip__all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--indigo-800);
  font-size: .85rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.notice-strip__all:hover {
  text-decoration: underline;
  text-underline-offset: .25rem;
}

@media (max-width: 991px) {
  .notice-strip__layout {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .notice-strip__all {
    grid-column: 2;
    justify-self: end;
  }

  .notice-strip__controls {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 700px) {
  .notice-strip {
    padding: 1rem 0 1.1rem;
  }

  .notice-strip__layout {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
  }

  .notice-strip__heading {
    grid-column: 1;
  }

  .notice-strip__heading h2 {
    font-size: 1.2rem;
  }

  .notice-strip__eyebrow {
    display: none;
  }

  .notice-strip__icon {
    width: 2.4rem;
    height: 2.4rem;
  }

  .notice-strip__viewport {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-inline: -1rem;
  }

  .notice-strip__track {
    padding-inline: 1rem;
  }

  .notice-strip__item {
    min-width: calc(100vw - 3rem);
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
  }

  .notice-strip__item a {
    width: 100%;
    font-size: .9rem;
  }

  .notice-strip__controls {
    grid-column: 2;
    grid-row: 1;
  }

  .notice-strip__all {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: end;
  }
}

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

  .notice-strip__item,
  .notice-strip__arrow,
  .notice-strip__control {
    transition: none;
  }
}


.task-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  min-height: 100%;
  padding: clamp(1.4rem, 3vw, 2rem);
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 8px 28px rgba(20, 25, 70, .06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.task-card:hover {
  color: var(--ink);
  border-color: var(--indigo-400);
  box-shadow: 0 16px 36px rgba(20, 25, 70, .12);
  transform: translateY(-3px);
}

.task-card--primary {
  color: var(--white);
  background: linear-gradient(140deg, #282690, #5141db);
  border-color: transparent;
}

.task-card--primary:hover,
.task-card--primary h3 {
  color: var(--white);
}

.task-card__number {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: var(--brand-dark);
  font-size: var(--t-xs);
  font-weight: 700;
  background: var(--indigo-50);
  border-radius: .75rem;
}

.task-card--primary .task-card__number {
  color: var(--white);
  background: rgba(255, 255, 255, .14);
}

/* Task numerals cycle the tricolour, skipping any card that is already a solid
   primary panel. Ink-on-tint keeps every pairing above 4.5:1. */
.task-card:not(.task-card--primary):nth-child(3n + 1) .task-card__number {
  color: var(--accent-1-ink);
  background: var(--saffron-50);
}

.task-card:not(.task-card--primary):nth-child(3n + 3) .task-card__number {
  color: var(--accent-3-ink);
  background: var(--green-50);
}

.task-card:nth-child(3n + 1):hover {
  border-color: var(--saffron-400);
}

.task-card:nth-child(3n + 3):hover {
  border-color: var(--green-400);
}

.task-card h3 {
  margin-bottom: .6rem;
  font-size: 1.2rem;
}

.task-card p {
  margin-bottom: 1.1rem;
  color: var(--muted);
}

.task-card--primary p {
  color: rgba(255, 255, 255, .82);
}

.task-card__action {
  color: var(--brand-dark);
  font-weight: 700;
}

.task-card--primary .task-card__action {
  color: var(--white);
}

.services-section {
  background: var(--surface);
}

.service-grid {
  display: grid;
  gap: 1rem;
}

.home-service-card,
.tool-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 1.5rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.home-service-card:hover,
.tool-card:hover {
  color: var(--ink);
  border-color: var(--indigo-400);
  box-shadow: var(--sh-lg);
  transform: translateY(-3px);
}

.home-service-card__icon {
  display: grid;
  width: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  padding: .35rem;
  place-items: center;
  margin-bottom: 1rem;
  color: var(--brand-dark);
  background: var(--indigo-50);
  border-radius: .75rem;
}

/* --- Tricolour rotation --------------------------------------------------
   A run of cards cycles saffron / indigo / green, so the flag reads across the
   set rather than each card being colour-coded by hand. Icon tiles use the
   text-safe ink variant on a pale tint, which keeps every pairing above 4.5:1.
   ------------------------------------------------------------------------- */
.home-service-card:nth-child(3n + 1) .home-service-card__icon {
  color: var(--accent-1-ink);
  background: var(--saffron-50);
}

.home-service-card:nth-child(3n + 3) .home-service-card__icon {
  color: var(--accent-3-ink);
  background: var(--green-50);
}

/* A coloured top edge, revealed on hover, ties the card to its accent. */
.home-service-card,
.tool-card,
.task-card {
  position: relative;
}

.home-service-card::before,
.tool-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--accent-2);
  opacity: 0;
  transition: opacity .18s ease;
}

.home-service-card:nth-child(3n + 1)::before,
.tool-card:nth-child(3n + 1)::before {
  background: var(--accent-1);
}

.home-service-card:nth-child(3n + 3)::before,
.tool-card:nth-child(3n + 3)::before {
  background: var(--accent-3);
}

.home-service-card:hover::before,
.tool-card:hover::before,
.home-service-card:focus-visible::before,
.tool-card:focus-visible::before {
  opacity: 1;
}

.home-service-card:nth-child(3n + 1):hover,
.tool-card:nth-child(3n + 1):hover {
  border-color: var(--saffron-400);
}

.home-service-card:nth-child(3n + 3):hover,
.tool-card:nth-child(3n + 3):hover {
  border-color: var(--green-400);
}

.home-service-card__icon svg {
  width: 1.65rem;
  height: 1.65rem;
}

.home-service-card h3,
.tool-card h3 {
  font-size: var(--t-lg);
}

.home-service-card p,
.tool-card p {
  flex: 1;
  color: var(--muted);
  line-height: 1.6;
}

.home-service-card>span:last-child,
.tool-card>span:last-child {
  color: var(--brand-dark);
  font-weight: 700;
}

.service-facts {
  position: relative;
  color: var(--white);
  background:
    radial-gradient(ellipse 60% 100% at 12% 0%, rgba(230, 152, 71, .16), transparent 65%),
    radial-gradient(ellipse 60% 100% at 88% 100%, rgba(79, 141, 59, .18), transparent 65%),
    var(--indigo-900);
}

/* Tricolour hairline across the top of the stat band. */
.service-facts::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tricolour);
}

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

.service-facts__grid>div {
  display: grid;
  gap: .2rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .1);
}

/* Each figure takes a tricolour tint, cycling across the row. */
.service-facts__grid>div:nth-child(3n + 1) strong {
  color: #f5b85c;
}

.service-facts__grid>div:nth-child(3n + 3) strong {
  color: #8fd071;
}

.service-facts strong {
  color: var(--white);
  font-size: var(--t-xl);
}

.service-facts span {
  color: rgba(255, 255, 255, .75);
}

.ipv6-section {
  background: var(--canvas);
}

.ipv6-layout {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.ipv6-layout h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.tool-grid {
  display: grid;
  gap: 1rem;
}

.tool-card__label {
  margin-bottom: 1rem;
  color: var(--brand);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.final-cta-section {
  background: var(--surface);
}

.services-section,
.ipv6-section,
.final-cta-section {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.service-grid--focused .home-service-card {
  padding: clamp(1.5rem, 3vw, 2rem);
}

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

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

  .service-facts__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

@media (min-width: 900px) {
  .home-hero__layout {
    /* Copy left, orbit right. Slightly more room for the illustration than the
       resource-panel needed, since it is now the full composition. */
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  }

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

  .ipv6-layout {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .8fr);
  }
}

@media (max-width: 899px) {
  .home-hero::after {
    right: -14rem;
    width: 680px;
    opacity: .12;
  }
}

@media (max-width: 819px) {
  .header-search {
    display: none;
  }

  .mobile-language-slot .header-language {
    display: flex;
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    background: var(--surface);
  }

  .mobile-language-slot .lang-select,
  .mobile-language-slot .gtranslate_wrapper,
  .mobile-language-slot select {
    width: 100%;
  }

  .mobile-language-slot .header-language .lang-select select,
  .mobile-language-slot .header-language .lang-select .gt_selector {
    width: 100%;
    max-width: none;
  }

  .site-header__inner {
    min-height: 64px;
  }

  .brand__mark {
    height: 40px;
  }

  .accessibility-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 699px) {
  .home-section-intro {
    display: block;
  }

  .home-section-intro>p {
    margin-top: 1rem;
  }

  .home-hero__actions .btn {
    width: 100%;
  }

  .task-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .service-facts__grid {
    grid-template-columns: 1fr;
  }
}

[data-contrast='high'] .home-hero {
  background: #10105e;
}

/* --- Homepage UX refinement ------------------------------------------- */
.accessibility-toggle__short,
.mobile-portal-link {
  display: none;
}

/* Keep the hero statement balanced with the information panel. */
.home-hero h1 {
  max-width: 14ch;
  font-size: clamp(2.5rem, 4.25vw, 4rem);
}

@media (max-width: 819px) {
  .site-header__inner {
    min-height: 68px;
    gap: .5rem;
  }

  .brand {
    min-width: 0;
    gap: .55rem;
  }

  .brand__mark {
    height: 44px;
  }

  .brand__text {
    display: block;
    min-width: 0;
  }

  .brand__name {
    font-size: 1rem;
    letter-spacing: .025em;
  }

  .brand__tag {
    display: none;
  }

  .header-login {
    display: none;
  }

  .accessibility-toggle {
    width: auto;
    min-height: 44px;
    gap: .35rem;
    padding-inline: .6rem;
  }

  .accessibility-toggle__text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-size: .72rem;
  }

  .accessibility-toggle__full {
    display: none;
  }

  .accessibility-toggle__short {
    display: inline;
  }

  .mobile-portal-link {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    padding: .75rem 1rem;
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    background: var(--brand);
    border-radius: var(--r);
  }

  .mobile-portal-link:hover {
    color: var(--white);
    background: var(--brand-dark);
  }

  .home-hero__layout {
    gap: 1.75rem;
    padding-block: 2.6rem 3rem;
  }

  .home-hero h1 {
    max-width: 16ch;
    margin-bottom: 1rem;
    font-size: clamp(2.2rem, 9vw, 3.25rem);
    line-height: 1.02;
  }

  .home-hero__eyebrow {
    margin-bottom: .7rem;
  }

  .home-hero__lead {
    margin-bottom: 1.25rem;
  }

  .home-hero__actions .btn {
    width: auto;
  }

  .home-hero__assurances {
    gap: .45rem 1rem;
    margin-top: 1.1rem;
  }
}

@media (max-width: 699px) {

  .task-section,
  .services-section,
  .ipv6-section,
  .final-cta-section {
    padding-block: 2.75rem;
  }

  .home-section-intro {
    margin-bottom: 1.35rem;
  }

  /* Secondary content stays discoverable without adding several screenfuls. */
  .service-grid--focused,
  .tool-grid--ipv6 {
    grid-template-columns: repeat(3, minmax(78vw, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(78vw, 1fr);
    padding: .15rem .15rem .8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .tool-grid--ipv6 {
    grid-template-columns: repeat(2, minmax(78vw, 1fr));
  }

  .service-grid--focused>*,
  .tool-grid--ipv6>* {
    scroll-snap-align: start;
  }

  .home-service-card,
  .tool-card {
    padding: 1.25rem;
  }

  .ipv6-layout {
    gap: 1.75rem;
  }
}

@media (max-width: 599px) {
  .nav-toggle {
    min-width: 44px;
    padding-inline: .65rem;
  }

  .nav-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .container.site-header__inner {
    padding-inline: .75rem;
  }

  .brand__mark {
    height: 40px;
  }

  .home-hero__layout {
    padding-block: 2.25rem 2.5rem;
  }

  .home-hero h1 {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .home-hero__actions .btn {
    width: 100%;
  }
}

/* --- Official IRINN brand artwork --------------------------------------
   Use the approved transparent stacked logo in full. The coloured "irinn"
   wordmark is part of the artwork and must not be cropped or recreated. */
.brand__symbol,
.footer__brand-symbol {
  display: block;
  flex: none;
}

.brand__symbol {
  width: 64px;
  height: 64px;
}

.brand__descriptor {
  max-width: 380px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.brand__symbol img,
.footer__brand-symbol img {
  display: block;
  width: 100%;
  height: auto;
}

/* The IRINN mark is navy, saffron and green on transparency, so its navy globe
   outline and the navy "i" all but disappear against the dark footer. A white
   tile behind it -- the same treatment as the partner logo strip below -- makes
   the whole mark legible. */
.footer__brand-symbol {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 8px;
  background: var(--white);
  border-radius: var(--r-lg);
}

.footer__brand-symbol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer__brand-divider {
  width: 1px;
  height: 54px;
  flex: none;
  background: rgba(255, 255, 255, .22);
}

.footer__brand-row .footer__brand-tag {
  max-width: 190px;
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 819px) {
  .brand__symbol {
    width: 58px;
    height: 58px;
  }

  .brand__descriptor {
    max-width: 180px;
    font-size: .78rem;
    line-height: 1.25;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .brand__symbol {
    width: 54px;
    height: 54px;
  }

  .brand__descriptor {
    max-width: 122px;
    font-size: .7rem;
  }

  .header-actions {
    gap: .3rem;
  }

  .accessibility-toggle {
    padding-inline: .55rem;
  }

  .accessibility-toggle>svg {
    display: none;
  }
}

/* --- Contact page ------------------------------------------------------ */
.contact-hero__eyebrow {
  margin: 0 0 var(--s3);
  color: rgba(255, 255, 255, .78);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.contact-channels {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--s6) * -1);
}

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

.contact-channel {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0 var(--s3);
  align-items: center;
  min-width: 0;
  padding: var(--s5);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.contact-channel:hover {
  color: var(--ink);
  border-color: var(--indigo-400);
  box-shadow: 0 16px 36px rgba(20, 25, 70, .14);
  transform: translateY(-3px);
}

.contact-channel--primary {
  border-top: 4px solid var(--brand);
}

.contact-channel__icon {
  grid-row: 1 / span 3;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--brand-dark);
  background: var(--indigo-50);
  border-radius: var(--r);
}

.contact-channel__icon svg {
  width: 23px;
  height: 23px;
}

.contact-channel__label {
  color: var(--muted);
  font-size: var(--t-sm);
}

.contact-channel strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: var(--t-lg);
}

.contact-channel__action {
  margin-top: var(--s2);
  color: var(--brand-dark);
  font-size: var(--t-sm);
  font-weight: 700;
}

.contact-main {
  padding-top: var(--s8);
}

.contact-layout {
  display: grid;
  gap: var(--s6);
  align-items: start;
}

.contact-section-intro {
  margin-bottom: var(--s4);
}

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

.enquiry-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}

.enquiry-card__number {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--brand-dark);
  font-size: var(--t-xs);
  font-weight: 700;
  background: var(--indigo-50);
  border-radius: var(--r);
}

.enquiry-card h3 {
  font-size: var(--t-lg);
}

.enquiry-card p {
  color: var(--muted);
}

.enquiry-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: 0;
}

.enquiry-card__links a,
.related-external-link {
  color: var(--brand-dark);
  font-weight: 700;
  text-underline-offset: 3px;
}

.contact-security-note {
  margin-top: var(--s5);
}

.contact-address {
  margin-bottom: var(--s5);
  color: var(--body);
  font-style: normal;
}

.contact-details {
  display: grid;
  gap: 0;
  margin: 0;
}

.contact-details>div {
  padding-block: var(--s3);
  border-top: 1px solid var(--line);
}

.contact-details dt {
  margin-bottom: var(--s1);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.contact-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}

@media (min-width: 700px) {
  .contact-channel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (min-width: 1000px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

@media (max-width: 699px) {
  .contact-channels {
    margin-top: calc(var(--s4) * -1);
  }

  .contact-channel {
    padding: var(--s4);
  }

  .enquiry-card {
    grid-template-columns: 1fr;
  }
}

[data-contrast='high'] .contact-channel,
[data-contrast='high'] .enquiry-card {
  border: 2px solid #000;
  box-shadow: none;
}

.enquiry-form-panel {
  margin-top: var(--s5);
}

.enquiry-consent {
  margin-block: var(--s4);
}

.enquiry-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  align-items: center;
}

.enquiry-form-note {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-sm);
}

.enquiry-form-status {
  min-height: 1.5em;
  margin: var(--s3) 0 0;
  color: var(--brand-dark);
  font-weight: 700;
}