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

/* --- Utility bar --------------------------------------------------------
   The violet strip above the header, carrying the contact details and the
   member-portal action. The live site runs a left-to-right violet gradient
   here, darkest at the left edge. */
.utility-bar {
  position: relative;
  background: linear-gradient(90deg, var(--violet-800) 0%, var(--violet-700) 30%, var(--violet-600) 100%);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--t-sm);
}

.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(--s5);
  flex-wrap: wrap;
}

/* Phone and email, each with a leading icon. The icon is orange to pick up the
   action colour; the text stays near-white so it holds AA on the violet. */
.utility-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 500;
}

.utility-contact > svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--orange-500);
}

.utility-contact:hover > svg {
  color: var(--orange-400);
}

/* The member-portal action. --orange-600 rather than the full-strength orange
   the live site uses: white on #f48000 is 2.65:1, this is 4.72:1. */
.utility-login {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--s4);
  border-radius: var(--r-sm);
  background: var(--orange-600);
  color: var(--white) !important;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
}

.utility-login:hover {
  background: var(--orange-700);
}

@media (max-width: 599px) {
  .utility-bar__inner {
    justify-content: center;
  }

  /* The email address is the first thing to overflow a narrow bar, and the
     footer carries it too, so it steps aside rather than wrapping. */
  .utility-contact--email {
    display: none;
  }
}

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

.gov-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange-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(--violet-800);
  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` — the self-hosted Roboto is the latin subset only and
     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 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(--violet-800);
  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(--violet-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(--violet-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 {
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* An inset bar rather than a padding change: the dropdown panels are dense,
   and shifting the text would make the whole column twitch on hover. */
.nav__sublink:hover {
  background: var(--violet-50);
  color: var(--brand-dark);
  box-shadow: inset 3px 0 0 var(--accent-2);
}

.nav__sublink.is-active {
  background: var(--violet-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);
}


/* --- 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(--violet-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(--violet-800), var(--violet-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.82);
  background: var(--violet-800);
  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(--orange-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 */

/* Full-bleed darker strip closing the footer, as on the live site. */
.footer__bottom-bar {
  margin-top: var(--s5);
  background: var(--violet-900);
}

.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;
}

/* The utility .dim also sets opacity: 0.7, which compounds with any alpha set
   here. At rgba(...,.52) the two together landed this line at 3.28:1 on the
   footer violet — under AA. Opacity is reset so the alpha below is the only
   thing lightening the text: 9.6:1. */
.footer__bottom .dim {
  color: rgba(255, 255, 255, 0.8);
  opacity: 1;
}

/* 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(--violet-50);
  border: 1px solid var(--violet-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 */

.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(--orange-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(--violet-800);
  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(--orange-500);
  border-radius: 50%;
}

.brand__name {
  display: block;
  color: var(--violet-800);
  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(--violet-800);
  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(--violet-800),
      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(--violet-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);
  /* Abstract network-mesh artwork (generated, not a literal map — no
     geography to keep in sync with the real NOC list) in the brand
     violet/orange palette. The gradient over it is opaque where the copy
     sits and clears away toward the mesh, so the white heading holds well
     past AA without hiding the illustration. Purely decorative, so it
     carries no alternative text. */
  background:
    linear-gradient(100deg,
      rgba(22, 7, 46, .93) 0%,
      rgba(35, 12, 78, .88) 30%,
      rgba(52, 14, 112, .55) 52%,
      rgba(52, 14, 112, .12) 72%,
      rgba(52, 14, 112, .04) 100%),
    url('/images/banners/hero-network-mesh.svg') center right / cover no-repeat,
    var(--violet-800);
}

/* Below the two-column breakpoint the map sits behind the copy rather than
   beside it, so the overlay closes up to keep the text legible. */
@media (max-width: 899px) {
  .home-hero {
    background:
      linear-gradient(180deg, rgba(22, 7, 46, .93) 0%, rgba(52, 14, 112, .86) 100%),
      url('/images/banners/hero-network-mesh.svg') center right / cover no-repeat,
      var(--violet-800);
  }
}

.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);
}

.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;
}


.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;
}

/* --- Notice: new-applicants processing-time notice ------------------------
   Requested for this one notice specifically -- justified alignment and
   bold body text, neither of which is a site-wide convention, so scoped to
   this id rather than added to .card__body generally. */
#notice-new-applicants .card__body {
  text-align: justify;
  font-weight: 700;
}

/* --- 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(--violet-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(--violet-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(--violet-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(--violet-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(--violet-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(--violet-800);
  border-color: var(--violet-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(--violet-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(--violet-400);
  box-shadow: 0 16px 36px rgba(20, 25, 70, .12);
  transform: translateY(-3px);
}

.task-card--primary {
  color: var(--white);
  background: linear-gradient(140deg, var(--violet-800), var(--violet-600));
  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(--violet-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(--orange-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(--orange-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(--violet-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(--violet-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(--orange-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(--orange-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(--violet-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 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));
  }


  .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) {
}

/* High contrast drops the artwork entirely: a flat violet ground carries the
   white heading at 19:1, where the photographic banner cannot be guaranteed. */
[data-contrast='high'] .home-hero {
  background: var(--violet-900);
}

/* --- 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;
  }

}

@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;
}

/* The NIXI wordmark is 294x133, so it is sized by height and left to find its
   own width — a square box would letterbox it down to a third of its size. */
.brand__symbol {
  height: 50px;
  flex: none;
}

.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: auto;
  height: 100%;
}

/* The live footer carries a solid white NIXI wordmark straight on the violet,
   with no tile behind it. The source PNG is the full-colour mark, so it is
   knocked out to white here rather than shipping a second image file. */
.footer__brand-symbol {
  display: block;
  height: 58px;
}

.footer__brand-symbol img {
  width: auto;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.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(--violet-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(--violet-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);
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Border and shadow only, deliberately no lift: the card holds links but is
   not itself one, and a lift would imply the whole panel is clickable. */
.enquiry-card:hover {
  border-color: var(--violet-400);
  box-shadow: var(--sh-md);
}

.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(--violet-50);
  border-radius: var(--r);
}

/* Same tricolour rotation as the homepage task cards. Ink-on-tint keeps every
   pairing above 4.5:1. */
.enquiry-card:nth-child(3n + 1) .enquiry-card__number {
  color: var(--accent-1-ink);
  background: var(--orange-50);
}

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

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

.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;
}


/* ==========================================================================
   NIXI IX specific components
   Generic look-and-feel lives in theme.css; these are the content families
   this site has and irinn.in does not: the homepage stat band, the gallery,
   news cards, and the filter above the long member/NOC tables.
   ========================================================================== */

/* Homepage stat band -------------------------------------------------------
   Sits inside .service-facts (dark indigo), so everything here is light-on-dark. */
.fact-row {
  gap: var(--s4);
}

.fact-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s5) var(--s5) var(--s5) var(--s6);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 3px 0 0 var(--accent-1);
  color: var(--white);
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}

.fact-row > .fact-tile:nth-child(3n + 2) {
  box-shadow: inset 3px 0 0 var(--white);
}

.fact-row > .fact-tile:nth-child(3n) {
  box-shadow: inset 3px 0 0 var(--accent-3);
}

.fact-tile:hover,
.fact-tile:focus-visible {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}

.fact-tile__num {
  font-size: clamp(2rem, 4vw, 2.875rem);
  line-height: 1;
  letter-spacing: -.03em;
}

.fact-tile__label {
  color: rgba(255, 255, 255, .82);
  font-size: var(--t-sm);
}

@media (prefers-reduced-motion: reduce) {
  .fact-tile {
    transition: none;
  }

  .fact-tile:hover,
  .fact-tile:focus-visible {
    transform: none;
  }
}


/* News cards -------------------------------------------------------------- */
.news-card__date {
  margin: 0 0 var(--s2);
  color: var(--accent-2);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.news-card h2,
.news-card h3 {
  margin-top: 0;
}

/* "Read more" affordance on linked cards. Orange, as on the live site, using
   the text-safe orange rather than the decorative one. */
.card__more {
  display: inline-block;
  margin-top: var(--s3);
  color: var(--accent-1-ink);
  font-size: var(--t-sm);
  font-weight: 500;
}

/* Filter above the long data tables --------------------------------------- */
.table-filter {
  max-width: 32rem;
  margin-bottom: var(--s5);
}

/* --- News ticker (homepage) -----------------------------------------------
   Replaces the static "Latest News" card grid. Content comes from
   src/data/news.json via build.mjs (see renderNewsTicker) -- the same data
   backs the /news accordion, so a new notice is one JSON edit + a rebuild,
   not two pages kept in sync by hand.

   The track is rendered twice back-to-back at build time and animated with
   translateY(-50%), which loops seamlessly regardless of how many items
   there are -- one item or twenty, the seam is invisible.

   Auto-scrolling content that runs longer than 5s must be pausable (WCAG
   2.2.2): hover/focus already pause it, and the explicit toggle button below
   covers touch and keyboard-only visitors who can't hover. Reduced motion is
   handled by the site-wide rule in theme.css, which caps every animation to
   one 0.01ms iteration -- so this settles instantly on its second (identical)
   copy instead of looping. */
.news-ticker-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.news-ticker__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--t-sm);
  cursor: pointer;
}

.news-ticker__toggle:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.news-ticker__toggle::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.news-ticker {
  position: relative;
  height: 7rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  /* Soft top/bottom fade so items don't hard-clip mid-scroll. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
}

.news-ticker__track {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: news-ticker-scroll 18s linear infinite;
}

.news-ticker:hover .news-ticker__track,
.news-ticker:focus-within .news-ticker__track,
.news-ticker.is-paused .news-ticker__track {
  animation-play-state: paused;
}

.news-ticker__item {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.news-ticker__item a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  color: inherit;
  text-decoration: none;
}

.news-ticker__date {
  flex: none;
  color: var(--accent-2);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.news-ticker__title {
  color: var(--ink);
  font-weight: 600;
}

.news-ticker__item a:hover .news-ticker__title,
.news-ticker__item a:focus-visible .news-ticker__title {
  color: var(--brand);
  text-decoration: underline;
}

@keyframes news-ticker-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

/* No notices to scroll — show one static, centered line instead of an
   empty box, and drop the now-meaningless pause/play control. */
.news-ticker-section.is-empty .news-ticker__toggle {
  display: none;
}

.news-ticker-section.is-empty .news-ticker__track {
  animation: none;
  height: 100%;
  display: flex;
  align-items: center;
}

.news-ticker__item--empty {
  width: 100%;
  border-bottom: none;
  text-align: center;
}

/* --- /news accordion --------------------------------------------------- */
.news-accordion__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}

/* --- Brand/logo grid (CDNs page) ----------------------------------------
   Replaces a bare list of company names running down the page. Each tile is
   a fixed-height logo area (object-fit: contain, so source images of very
   different native sizes -- some are 16-32px favicons, a couple are proper
   180px+ marks -- all sit at the same visual weight) plus a text name below,
   matching the footer partner-logo strip's pattern. The name is always shown
   as real text rather than relying on the logo alone, so the two CDNs with no
   reliable official logo asset (their sites don't serve one reachable
   without a browser) still read as a normal entry, just without an image;
   the image itself carries alt="" since the adjacent name already labels it. */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--s4);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}

.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}

.brand-tile__logo {
  display: grid;
  place-items: center;
  height: 44px;
}

.brand-tile__logo img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
}

.brand-tile__logo--none {
  height: 0;
}

.brand-tile__name {
  color: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
}

@media (max-width: 599px) {
  .brand-grid {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--s3);
  }
}