/* ===========================
   INJURY & CLAIM DESIGN SYSTEM
   =========================== */

:root {
  /* Brand */
  --iac-navy:      #12263F;
  --iac-navy-dk:   #0B1A2D;
  --iac-navy-lt:   #1E3A5C;
  --iac-gold:      #C8992E;
  --iac-gold-dk:   #A87D1F;
  --iac-gold-lt:   #F5E9CC;

  /* Status. Green is reserved for money and success only. */
  --iac-green:     #1F7A4C;
  --iac-green-lt:  #E6F4EC;
  --iac-red:       #B3261E;
  --iac-red-lt:    #FCEAE9;
  --iac-amber:     #B7791F;
  --iac-amber-lt:  #FDF6E7;

  /* Testimonial quote backgrounds. Two languages, two tints, so a
     reader can tell at a glance which is English and which is Pidgin. */
  --iac-quote-en:     #EDF3FA;
  --iac-quote-pidgin: #FDF3E6;

  /* Neutrals */
  --iac-text:      #1C1C1E;
  --iac-muted:     #6B7280;
  --iac-border:    #E5E7EB;
  --iac-surface:   #F7F8FA;
  --iac-white:     #FFFFFF;

  /* Type */
  --font-heading:  'Lora', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* Shape */
  --radius:        8px;
  --radius-lg:     14px;
  --shadow:        0 2px 12px rgba(18, 38, 63, 0.08);
  --shadow-md:     0 4px 24px rgba(18, 38, 63, 0.12);

  /* Layout */
  --container:     1200px;
  --nav-height:    76px;
}

/* ===========================
   RESET
   =========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* The browser's own [hidden] rule is display:none, but any class in
   this file that sets its own display will out-rank it and the
   element stays visible. This guard makes the hidden attribute
   reliable everywhere. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--iac-text);
  background: var(--iac-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Long unbroken strings (email addresses, file paths, URLs) would
     otherwise push past the viewport edge on narrow phones. */
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }

/* ===========================
   TYPOGRAPHY
   =========================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--iac-navy);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2.125rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

a { color: var(--iac-navy); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--iac-gold-dk); }

/* ===========================
   ACCESSIBILITY
   =========================== */
/* Visible only once focused, lets keyboard users jump the navbar. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--iac-navy);
  color: var(--iac-white);
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--iac-white);
}

/* Consistent, high-contrast focus ring on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--iac-gold);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===========================
   LAYOUT
   =========================== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 80px 0; }
.section-grey { background: var(--iac-surface); }
.section-navy { background: var(--iac-navy); color: var(--iac-white); }
.section-navy h2 { color: var(--iac-white); }

.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.section-subtitle {
  color: var(--iac-muted);
  font-size: 1.0625rem;
  margin-top: 12px;
}

/* ===========================
   BUTTONS
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--iac-navy);
  color: var(--iac-white);
  border-color: var(--iac-navy);
}

.btn-primary:hover {
  background: var(--iac-navy-dk);
  border-color: var(--iac-navy-dk);
  color: var(--iac-white);
}

.btn-gold {
  background: var(--iac-gold);
  color: var(--iac-navy-dk);
  border-color: var(--iac-gold);
}

.btn-gold:hover {
  background: var(--iac-gold-dk);
  border-color: var(--iac-gold-dk);
  color: var(--iac-white);
}

.btn-outline {
  background: transparent;
  color: var(--iac-navy);
  border-color: var(--iac-border);
}

.btn-outline:hover {
  border-color: var(--iac-navy);
  color: var(--iac-navy);
}

/* For use on navy backgrounds */
.btn-white {
  background: var(--iac-white);
  color: var(--iac-navy);
  border-color: var(--iac-white);
}

.btn-white:hover { background: var(--iac-gold-lt); color: var(--iac-navy-dk); }

.btn-white-outline {
  background: transparent;
  color: var(--iac-white);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-white-outline:hover {
  border-color: var(--iac-white);
  background: rgba(255, 255, 255, 0.1);
  color: var(--iac-white);
}

.btn-sm { padding: 9px 18px; font-size: 0.875rem; }
.btn-block { width: 100%; }

.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ─── LOADING STATE ────────────────────────────────────
   Markup carries two spans, .btn-text and .btn-loading. main.js
   swaps which is visible and disables the button, so a double
   click cannot submit twice. */
.btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.spinner { animation: spin 1s linear infinite; }

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

/* ===========================
   NAVBAR
   =========================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--iac-white);
  border-bottom: 1px solid var(--iac-border);
}

.nav-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ─── LOGO ─────────────────────────────────────────────
   Placeholder: inline SVG scales mark + type lockup.
   To use a real asset, swap the .nav-logo contents for
   <img src="/images/logo.svg" alt="Injury & Claim" class="nav-logo-img" />
*/
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-logo-img { height: 52px; width: auto; }

.nav-logo-mark {
  width: 38px;
  height: 38px;
  color: var(--iac-gold);
  flex-shrink: 0;
}

.nav-logo-text { display: flex; flex-direction: column; line-height: 1.1; }

.nav-wordmark {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--iac-navy);
}

.nav-tagline {
  font-size: 0.625rem;
  color: var(--iac-muted);
  font-style: italic;
  letter-spacing: 0.02em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-link {
  color: var(--iac-text);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

.nav-link:hover { color: var(--iac-gold-dk); }

.nav-link-active { color: var(--iac-navy); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: 12px; }

/* ─── MOBILE TOGGLE ───────────────────────────────────*/
.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
  padding: 9px 11px;
  cursor: pointer;
  color: var(--iac-navy);
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle-bar + .nav-toggle-bar { margin-top: 4px; }

/* ===========================
   FOOTER
   =========================== */
.footer {
  background: var(--iac-navy-dk);
  color: rgba(255, 255, 255, 0.75);
  padding: 64px 0 0;
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-badges { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

/* Image slots. Drop the real files into public/images/ and
   these fill in automatically, no markup change needed. */
.footer-badge {
  width: 92px;
  height: 92px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.45);
  padding: 8px;
  overflow: hidden;
}

.footer-badge img { width: 100%; height: 100%; object-fit: contain; }

.footer-heading {
  color: var(--iac-white);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  margin-bottom: 18px;
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 11px; }

.footer-links a,
.footer-contact a { color: rgba(255, 255, 255, 0.75); }

.footer-links a:hover,
.footer-contact a:hover { color: var(--iac-gold); }

.footer-contact { display: flex; flex-direction: column; gap: 11px; }
.footer-contact span { display: block; }
.footer-contact strong { color: var(--iac-white); font-weight: 500; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.875rem;
}

.footer-social { display: flex; gap: 20px; list-style: none; }
.footer-legal { display: flex; gap: 20px; list-style: none; }

/* ===========================
   ERROR PAGES
   =========================== */
.error-page {
  max-width: 620px;
  margin: 0 auto;
  padding: 96px 24px;
  text-align: center;
}

.error-code {
  font-family: var(--font-heading);
  font-size: 5rem;
  color: var(--iac-gold);
  line-height: 1;
}

.error-page h1 { margin: 12px 0 16px; }
.error-page p { color: var(--iac-muted); margin-bottom: 32px; }

/* ===========================
   PAGE HEADER (interior pages)
   =========================== */
.page-header {
  background: var(--iac-navy);
  padding: 72px 0;
  text-align: center;
}

.page-header-title {
  color: var(--iac-white);
  font-size: 2.75rem;
}

.page-header-sub {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 12px;
  font-size: 1.0625rem;
}

/* ===========================
   SPLIT SECTIONS (text + media)
   =========================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split-text h2 { margin-bottom: 20px; }

.split-text p {
  color: var(--iac-muted);
  margin-bottom: 16px;
}

.split-text p:last-child { margin-bottom: 0; }

.split-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ─── BULLET LIST ──────────────────────────────────────*/
.about-list {
  list-style: none;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-list li {
  position: relative;
  padding-left: 26px;
  color: var(--iac-text);
  font-size: 0.9375rem;
}

/* Gold marker instead of a browser bullet */
.about-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--iac-gold);
}

/* ===========================
   EXPERT CARDS
   =========================== */
.expert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.expert-card {
  background: var(--iac-white);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.expert-card:hover {
  border-color: var(--iac-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.expert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--iac-navy);
  color: var(--iac-gold);
}

.expert-icon .icon { width: 28px; height: 28px; }

.expert-title {
  font-size: 1.0625rem;
  margin-bottom: 12px;
}

.expert-desc {
  color: var(--iac-muted);
  font-size: 0.9375rem;
}

/* ===========================
   NAMED STEPS (About procedure)
   =========================== */
/* Left aligned rather than centred, because these carry more text
   than the homepage steps and read better as a document. */
.about-procedure-head {
  max-width: 760px;
  margin-bottom: 40px;
}

.about-procedure-head .section-subtitle { margin-top: 10px; }

.named-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.named-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.named-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--iac-navy);
  color: var(--iac-gold);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.named-step-content { flex: 1; min-width: 0; }

.named-step-title {
  font-size: 1.125rem;
  margin-bottom: 6px;
}

.named-step-body {
  color: var(--iac-muted);
  font-size: 0.9375rem;
}

/* ===========================
   FORMS
   =========================== */
.form-group { margin-bottom: 18px; }

.form-label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--iac-navy);
}

.req { color: var(--iac-red); }

.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--iac-text);
  background: var(--iac-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control::placeholder { color: #9CA3AF; }

.form-control:focus {
  outline: none;
  border-color: var(--iac-gold);
  box-shadow: 0 0 0 3px rgba(200, 153, 46, 0.18);
}

textarea.form-control { resize: vertical; min-height: 120px; }

/* Two fields side by side, collapsing to one column on mobile. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Honeypot: off-screen rather than display:none, because some bots
   skip hidden inputs but will happily fill a positioned one. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── ALERTS ───────────────────────────────────────────*/
.alert {
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 0.9375rem;
  border-left: 3px solid transparent;
}

.alert-success {
  background: var(--iac-green-lt);
  border-left-color: var(--iac-green);
  color: #14532D;
}

.alert-error {
  background: var(--iac-red-lt);
  border-left-color: var(--iac-red);
  color: #7F1D1D;
}

/* For things an admin should notice but that are not errors, such as every
   matching expert being at their case limit. */
.alert-warning {
  background: var(--iac-amber-lt);
  border-left-color: var(--iac-amber);
  color: #78350F;
}

/* ===========================
   CONTACT PAGE
   =========================== */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  align-items: start;
}

/* Info cards pair up beside each other, third wraps underneath,
   matching the arrangement on the current site. */
.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.info-card {
  background: var(--iac-white);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.info-card:hover {
  border-color: var(--iac-gold);
  box-shadow: var(--shadow);
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--iac-gold-lt);
  color: var(--iac-gold-dk);
  margin-bottom: 14px;
}

.info-icon .icon { width: 20px; height: 20px; }

.info-title {
  font-size: 1rem;
  margin-bottom: 8px;
}

.info-line {
  color: var(--iac-muted);
  font-size: 0.9375rem;
}

.info-label { color: var(--iac-text); font-weight: 500; }

/* ─── FORM CARD ────────────────────────────────────────*/
.contact-form-card {
  background: var(--iac-white);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  box-shadow: var(--shadow);
}

.contact-form-title { font-size: 1.5rem; }

.contact-form-sub {
  color: var(--iac-muted);
  font-size: 0.9375rem;
  margin: 8px 0 24px;
}

/* ─── MAP ──────────────────────────────────────────────*/
.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--iac-border);
  box-shadow: var(--shadow);
  aspect-ratio: 21 / 8;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ─── ASSISTANCE BAND ──────────────────────────────────*/
.assistance { text-align: center; }
.assistance .section-head { margin-bottom: 24px; }

.assistance-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 600;
}

.assistance-icon {
  display: inline-flex;
  color: var(--iac-gold-dk);
}

.assistance-icon .icon { width: 22px; height: 22px; }

/* ===========================
   MODAL
   =========================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(11, 26, 45, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  /* The panel can be taller than the viewport on small screens, so
     the backdrop scrolls rather than clipping the submit button. */
  overflow-y: auto;
}

.modal-panel {
  position: relative;
  background: var(--iac-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 460px;
  padding: 34px 32px;
  margin: auto;
  animation: modal-in 0.18s ease-out;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--iac-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
}

.modal-close:hover { color: var(--iac-navy); }

/* ===========================
   AUTH
   =========================== */
.auth-title { font-size: 1.5rem; }

.auth-sub {
  color: var(--iac-muted);
  font-size: 0.9375rem;
  margin: 8px 0 22px;
}

/* ─── ROLE TABS ────────────────────────────────────────*/
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--iac-surface);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
  padding: 5px;
  margin-bottom: 16px;
}

.auth-tab {
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--iac-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.auth-tab.is-active {
  background: var(--iac-navy);
  color: var(--iac-white);
}

/* Explains that picking Expert only files an application */
.auth-role-note {
  background: var(--iac-gold-lt);
  border-left: 3px solid var(--iac-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 11px 14px;
  font-size: 0.8125rem;
  color: var(--iac-navy-dk);
  margin-bottom: 16px;
}

/* ─── FEEDBACK ─────────────────────────────────────────
   Empty by default and given a modifier class by main.js, so it
   takes no vertical space until there is something to say. */
.form-message:empty { display: none; }

.form-message {
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 0.875rem;
  border-left: 3px solid transparent;
}

.form-message-success {
  background: var(--iac-green-lt);
  border-left-color: var(--iac-green);
  color: #14532D;
}

.form-message-error {
  background: var(--iac-red-lt);
  border-left-color: var(--iac-red);
  color: #7F1D1D;
}

.form-message-info {
  background: var(--iac-surface);
  border-left-color: var(--iac-navy-lt);
  color: var(--iac-navy-dk);
}

/* ─── CHECKBOX ─────────────────────────────────────────*/
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.8125rem;
  color: var(--iac-muted);
}

.form-check input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--iac-navy);
}

.form-check a { text-decoration: underline; }

.form-hint {
  font-size: 0.75rem;
  color: var(--iac-muted);
  margin-top: 5px;
}

/* ─── OTP INPUT ────────────────────────────────────────*/
/* Wide letter spacing so six digits read as separate characters. */
.otp-input {
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  text-align: center;
  font-weight: 600;
  padding: 14px;
}

.otp-input::placeholder { letter-spacing: 0.5em; color: #D1D5DB; }

/* ─── SWITCH LINKS ─────────────────────────────────────*/
.auth-switch {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--iac-border);
  font-size: 0.875rem;
  color: var(--iac-muted);
  text-align: center;
}

.auth-forgot {
  text-align: right;
  font-size: 0.8125rem;
  margin: -8px 0 18px;
}

.auth-secondary {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--iac-border);
  text-align: center;
}

.auth-secondary p {
  font-size: 0.8125rem;
  color: var(--iac-muted);
  margin-bottom: 12px;
}

/* A button that reads as a link, for actions that must be POSTed */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: inherit;
  color: var(--iac-navy);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.link-btn:hover { color: var(--iac-gold-dk); }

.inline-form { display: inline; }
.nav-logout-form { display: inline-flex; }

/* ─── AUTH PAGES (not the modal) ───────────────────────*/
.auth-page { padding: 64px 0 80px; }

.auth-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--iac-white);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 34px 32px;
}

/* ===========================
   DASHBOARD (placeholder)
   =========================== */
.dash-sub {
  color: var(--iac-muted);
  margin: 10px 0 28px;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.dash-card {
  background: var(--iac-white);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}

.dash-card-title {
  font-size: 1.0625rem;
  margin-bottom: 18px;
}

/* Label above value, so long emails do not squash into a column */
.dash-list dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--iac-muted);
  margin-top: 14px;
}

.dash-list dt:first-child { margin-top: 0; }

.dash-list dd {
  font-size: 0.9375rem;
  margin-top: 3px;
}

.capitalize { text-transform: capitalize; }

.dash-todo {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.dash-todo li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9375rem;
  color: var(--iac-muted);
}

.dash-todo li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--iac-border);
}

.dash-logout { margin-top: 8px; }

/* ─── BADGES ───────────────────────────────────────────*/
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-success { background: var(--iac-green-lt); color: var(--iac-green); }
.badge-warning { background: var(--iac-amber-lt); color: var(--iac-amber); }
.badge-info { background: var(--iac-quote-en); color: var(--iac-navy); }

.alert-info {
  background: var(--iac-surface);
  border-left-color: var(--iac-navy-lt);
  color: var(--iac-navy-dk);
}

/* ===========================
   SHARED PAGE FURNITURE
   =========================== */
.container-narrow { max-width: 720px; }

/* Between narrow and full. A claim page has too many cards to read as one tall
   column at 720px, but full width leaves the text lines uncomfortably long. */
.container-claim { max-width: 980px; }

.lead {
  color: var(--iac-muted);
  font-size: 1.0625rem;
  margin: 10px 0 28px;
  max-width: 620px;
}

.muted-note {
  color: var(--iac-muted);
  font-size: 0.875rem;
}

.back-link {
  margin-top: 28px;
  font-size: 0.9375rem;
}

.empty-state {
  background: var(--iac-surface);
  border: 1px dashed var(--iac-border);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  color: var(--iac-muted);
}

/* Alert with a button on the right, stacking on narrow screens */
.alert-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.badge-muted { background: var(--iac-border); color: var(--iac-muted); }
.badge-error { background: var(--iac-red-lt); color: var(--iac-red); }

.btn-danger {
  background: var(--iac-red);
  color: var(--iac-white);
  border-color: var(--iac-red);
}

.btn-danger:hover {
  background: #8F1E17;
  border-color: #8F1E17;
  color: var(--iac-white);
}

/* ===========================
   FORM CARD + STATUS CARDS
   =========================== */
.form-card {
  background: var(--iac-white);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 28px;
}

.form-card-title {
  font-size: 1.1875rem;
  margin-bottom: 20px;
}

.form-card-sub {
  font-size: 0.9375rem;
  color: var(--iac-muted);
  margin-bottom: 20px;
}

/* The title already reserves 20px beneath it, which is too much when a
   subtitle follows, so close the gap back up. */
.form-card-title + .form-card-sub { margin-top: -12px; }

/* Used for the four KYC states. The left edge carries the meaning,
   so the state is readable without relying on colour alone. */
.status-card {
  background: var(--iac-surface);
  border: 1px solid var(--iac-border);
  border-left: 4px solid var(--iac-amber);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 26px 26px;
  margin-bottom: 28px;
}

.status-card-success { border-left-color: var(--iac-green); }
.status-card-error { border-left-color: var(--iac-red); }

.status-title {
  font-size: 1.1875rem;
  margin: 12px 0 10px;
}

.status-card p { color: var(--iac-muted); margin-bottom: 10px; }
.status-card .btn { margin-top: 8px; }

.reject-reason {
  background: var(--iac-red-lt);
  border-left: 3px solid var(--iac-red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 13px 15px;
  color: #7F1D1D;
  font-size: 0.9375rem;
}

/* ===========================
   FILE INPUTS
   =========================== */
.file-input {
  padding: 10px 12px;
  cursor: pointer;
  background: var(--iac-surface);
}

.file-input::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
  background: var(--iac-white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--iac-navy);
  cursor: pointer;
}

.file-input::file-selector-button:hover {
  border-color: var(--iac-gold);
}

.file-feedback:empty { display: none; }

.file-feedback {
  margin-top: 7px;
  font-size: 0.8125rem;
}

.file-feedback-ok { color: var(--iac-green); }
.file-feedback-error { color: var(--iac-red); }

/* Reassurance next to the upload fields. People are handing over an
   ID document, so it earns visual weight. */
.privacy-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--iac-surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 22px;
}

.privacy-note p {
  font-size: 0.8125rem;
  color: var(--iac-muted);
}

.privacy-icon {
  color: var(--iac-gold-dk);
  flex-shrink: 0;
}

.privacy-icon .icon { width: 20px; height: 20px; }

/* ===========================
   ADMIN: TABS, TABLE, REVIEW
   =========================== */
/* Queue tabs.
 *
 * These were an underline tab — a bottom border on the active one and nothing
 * else — which read as plain text with a number beside it rather than as
 * something clickable. Now pills with a real border, radius and a filled active
 * state, so it is obvious both that they can be clicked and which one you are on.
 *
 * Shared by five screens: the committee queue, the officer caseload, and the
 * admin KYC, expert and claim lists. One tab style across the product rather
 * than two that disagree. */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--iac-border);
  border-radius: 999px;
  background: var(--iac-white);
  color: var(--iac-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.admin-tab:hover {
  border-color: var(--iac-navy-lt);
  background: var(--iac-surface);
}

.admin-tab.is-active {
  background: var(--iac-navy);
  border-color: var(--iac-navy);
  color: var(--iac-white);
}

/* Keyboard users get the same signal mouse users get on hover. */
.admin-tab:focus-visible {
  outline: 2px solid var(--iac-gold);
  outline-offset: 2px;
}

.admin-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--iac-surface);
  color: var(--iac-muted);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.admin-tab.is-active .admin-tab-count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--iac-white);
}

/* Tables do not reflow well, so on small screens the wrapper scrolls
   sideways rather than crushing the columns. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--iac-white);
}

.data-table thead {
  background: var(--iac-surface);
}

.data-table th {
  text-align: left;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--iac-muted);
  font-weight: 600;
  white-space: nowrap;
}

.data-table td {
  padding: 14px 16px;
  border-top: 1px solid var(--iac-border);
  vertical-align: middle;
}

.data-table tbody tr:hover { background: var(--iac-surface); }

.cell-sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--iac-muted);
  margin-top: 2px;
}

.cell-action { text-align: right; white-space: nowrap; }

/* ─── REVIEW SCREEN ────────────────────────────────────*/
.review-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.doc-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--iac-surface);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.9375rem;
}

.doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

.doc-item { min-width: 0; }

.doc-side {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--iac-muted);
  margin-bottom: 8px;
}

.doc-image {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--iac-border);
  background: var(--iac-surface);
}

.doc-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  border: 1px dashed var(--iac-border);
  border-radius: var(--radius);
  background: var(--iac-surface);
  font-size: 0.875rem;
  font-weight: 500;
}

.doc-pdf:hover { border-color: var(--iac-gold); }
.doc-pdf .icon { width: 26px; height: 26px; color: var(--iac-gold-dk); }

.doc-meta {
  font-size: 0.75rem;
  color: var(--iac-muted);
  margin-top: 7px;
}

.decision-card { border-top: 3px solid var(--iac-gold); }

.decision-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-section {
  border: none;
  border-top: 1px solid var(--iac-border);
  padding: 26px 0 0;
  margin: 0 0 26px;
}

.form-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.form-section-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--iac-navy);
  padding: 0;
  margin-bottom: 18px;
}

.form-prefill {
  background: var(--iac-surface);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 0.8125rem;
  color: var(--iac-muted);
  margin-bottom: 18px;
}

.radio-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9375rem;
  cursor: pointer;
}

.radio-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--iac-navy);
  cursor: pointer;
}

.guarantor-block {
  background: var(--iac-surface);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
  padding: 20px 20px 4px;
  margin-bottom: 18px;
}

.guarantor-title {
  font-size: 0.9375rem;
  margin-bottom: 16px;
  color: var(--iac-navy);
}

.declaration-block {
  background: var(--iac-surface);
  border-left: 3px solid var(--iac-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 20px;
}

.declaration-block > p {
  font-size: 0.875rem;
  color: var(--iac-muted);
  margin-bottom: 18px;
}

.cert-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cert-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
  background: var(--iac-surface);
  flex-wrap: wrap;
}

.cert-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 500;
  min-width: 0;
}

.cert-link .icon { width: 18px; height: 18px; color: var(--iac-gold-dk); flex-shrink: 0; }

.cert-name { overflow-wrap: anywhere; }

.cert-meta {
  font-size: 0.75rem;
  color: var(--iac-muted);
  white-space: nowrap;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}

.guarantor-card {
  background: var(--iac-surface);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.case-block {
  border-left: 3px solid var(--iac-border);
  padding: 4px 0 4px 14px;
  margin: 14px 0;
}

.case-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--iac-muted);
  margin-bottom: 4px;
}

.case-block p:last-child {
  font-size: 0.9375rem;
  color: var(--iac-text);
}

.admin-links {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

.toast-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--iac-white);
  border-left: 4px solid var(--iac-navy-lt);
  box-shadow: var(--shadow-md);
  font-size: 0.9375rem;
  pointer-events: auto;
  animation: toast-in 0.22s ease-out;
}

.toast-success { border-left-color: var(--iac-green); }
.toast-error { border-left-color: var(--iac-red); }
.toast-info { border-left-color: var(--iac-navy-lt); }

.toast-text { flex: 1; min-width: 0; }

.toast-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--iac-muted);
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}

.toast-close:hover { color: var(--iac-navy); }

.toast.is-leaving { animation: toast-out 0.2s ease-in forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(24px); }
}

.confirm-backdrop { align-items: center; }

.confirm-panel {
  background: var(--iac-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 420px;
  padding: 30px 28px 26px;
  margin: auto;
  text-align: center;
  animation: modal-in 0.18s ease-out;
}

.confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
}

.confirm-icon-primary { background: var(--iac-gold-lt); color: var(--iac-gold-dk); }
.confirm-icon-danger { background: var(--iac-red-lt); color: var(--iac-red); }

.confirm-title { font-size: 1.1875rem; margin-bottom: 10px; }

.confirm-body {
  color: var(--iac-muted);
  font-size: 0.9375rem;
}

.confirm-note {
  margin-top: 14px;
  padding: 11px 14px;
  background: var(--iac-gold-lt);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--iac-navy-dk);
  font-weight: 500;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.confirm-actions .btn { flex: 1; }

.doc-group { margin-bottom: 26px; }
.doc-group-desc { margin-bottom: 18px; }

.active-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--iac-surface);
  border: 1px solid var(--iac-border);
  border-left: 4px solid var(--iac-green);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.active-doc-name {
  font-weight: 600;
  margin: 8px 0 4px;
  font-size: 0.9375rem;
}

.doc-upload {
  border-top: 1px solid var(--iac-border);
  padding-top: 20px;
}

.version-history {
  margin-top: 20px;
  border-top: 1px solid var(--iac-border);
  padding-top: 16px;
}

.version-history summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--iac-navy);
  margin-bottom: 14px;
}

.version-history summary:hover { color: var(--iac-gold-dk); }

.version-history .cell-action {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ===========================
   ICONS
   =========================== */
/* Inline SVGs from views/partials/icon.ejs. They inherit colour
   from the parent, so the badge wrappers below set it. */
.icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

/* ===========================
   HERO
   =========================== */
.hero {
  padding: 96px 0 52px;
  text-align: center;
}

.hero-title {
  font-size: 3rem;
  max-width: 900px;
  margin: 0 auto;
}

.hero-sub {
  max-width: 660px;
  margin: 22px auto 0;
  color: var(--iac-muted);
  font-size: 1.125rem;
}

.hero-actions {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── HERO IMAGE ───────────────────────────────────────*/
.hero-image-section { padding-bottom: 80px; }

.hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 21 / 9;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stands in until the real photograph is dropped into
   public/images/. Holds the exact aspect ratio so adding the
   image later does not shift the layout. */
.hero-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--iac-navy) 0%, var(--iac-navy-lt) 55%, var(--iac-gold) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* ===========================
   WHO WE ARE
   =========================== */
.who-we-are-tagline {
  margin-top: 10px;
  font-weight: 600;
  color: var(--iac-navy);
  font-size: 1.0625rem;
}

.who-we-are-body {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: var(--iac-muted);
  font-size: 1.0625rem;
}

/* ===========================
   WHAT WE DO
   =========================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--iac-white);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.service-card:hover {
  border-color: var(--iac-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Soft gold badge behind the icon. Sets the colour the SVG inherits. */
.service-icon,
.review-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--iac-gold-lt);
  color: var(--iac-gold-dk);
  margin-bottom: 18px;
}

.service-title {
  font-size: 1.0625rem;
  margin-bottom: 10px;
}

.service-desc {
  color: var(--iac-muted);
  font-size: 0.9375rem;
}

/* ===========================
   COST & FEES
   =========================== */
.fee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.fee-card {
  background: var(--iac-surface);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  text-align: center;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* Faint gold wash on hover so the card responds without shouting. */
.fee-card:hover {
  background: var(--iac-gold-lt);
  border-color: var(--iac-gold);
  box-shadow: var(--shadow-md);
}

/* The note is normally gold-tinted too, so it would disappear into
   the hovered card. Flip it to white to keep it readable. */
.fee-card:hover .fee-note { background: var(--iac-white); }

/* Navy disc with a gold glyph, the strongest use of the two brand
   colours together on the page. */
.fee-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--iac-navy);
  color: var(--iac-gold);
}

.fee-icon .icon { width: 30px; height: 30px; }

.fee-title { margin-bottom: 14px; }

.fee-desc {
  color: var(--iac-muted);
  font-size: 0.9375rem;
}

/* The acceptance-fee exemptions matter legally, so they are pulled
   out of the paragraph into a callout rather than buried in it. */
.fee-note {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--iac-gold-lt);
  border-left: 3px solid var(--iac-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  text-align: left;
  font-size: 0.875rem;
  color: var(--iac-navy-dk);
}

/* ===========================
   EXPERTS BANNER
   =========================== */
.experts-section { padding: 8px 0 80px; }

.experts-banner {
  background: var(--iac-navy);
  border-radius: var(--radius-lg);
  padding: 52px 40px;
  text-align: center;
}

.experts-title {
  color: var(--iac-white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.75rem;
  margin-bottom: 16px;
}

.experts-body {
  color: rgba(255, 255, 255, 0.85);
  max-width: 780px;
  margin: 0 auto;
}

/* ===========================
   PROCEDURE
   =========================== */
.procedure-list {
  list-style: none;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.procedure-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}

/* Steps alternate gold-tinted and navy so each reads as its own
   panel while the pair still scans as one sequence. */
.procedure-step:nth-child(odd) {
  background: var(--iac-gold-lt);
  border-color: rgba(200, 153, 46, 0.4);
}

.procedure-step:nth-child(even) {
  background: var(--iac-navy);
  border-color: var(--iac-navy);
}

.procedure-step:nth-child(even) .procedure-title { color: var(--iac-white); }
.procedure-step:nth-child(even) .procedure-body { color: rgba(255, 255, 255, 0.85); }

/* Large numeral badge. Colours invert against the panel behind it. */
.procedure-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.procedure-step:nth-child(odd) .procedure-number {
  background: var(--iac-navy);
  color: var(--iac-gold);
}

.procedure-step:nth-child(even) .procedure-number {
  background: var(--iac-gold);
  color: var(--iac-navy-dk);
}

.procedure-content { flex: 1; min-width: 0; }

.procedure-title {
  font-size: 1.1875rem;
  margin-bottom: 8px;
}

.procedure-body { color: var(--iac-muted); }

/* ===========================
   CLAIMANTS REVIEW
   =========================== */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review-card {
  background: var(--iac-white);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

/* Same lift as the What We Do cards, for consistency across the page. */
.review-card:hover {
  border-color: var(--iac-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.review-icon { margin-bottom: 16px; }

.review-category {
  font-size: 1.0625rem;
  margin-bottom: 16px;
}

.review-quote {
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.6;
}

.review-quote + .review-quote { margin-top: 12px; }

/* Curly quotes added in CSS so the content file stays clean text. */
.review-quote p::before { content: '\201C'; }
.review-quote p::after  { content: '\201D'; }

/* English on pale blue, Pidgin on pale peach, each with its own
   accent edge. Mirrors the two-tone treatment on the current site. */
.review-quote-en {
  background: var(--iac-quote-en);
  border-left: 3px solid var(--iac-navy-lt);
  color: var(--iac-navy-dk);
}

.review-quote-pidgin {
  background: var(--iac-quote-pidgin);
  border-left: 3px solid var(--iac-gold);
  color: var(--iac-navy-dk);
}

/* ===========================
   CTA BAND
   =========================== */
.cta-band {
  background: var(--iac-navy);
  padding: 76px 0;
  text-align: center;
}

.cta-title {
  color: var(--iac-white);
  max-width: 760px;
  margin: 0 auto 32px;
}

.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===========================
   CLAIMS
   =========================== */
/* The three steps on the start page. Same shape as .named-step on the
   homepage but tighter, because here the numbers are instructions to
   follow in order rather than a marketing list. */
.claim-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 34px;
}

.claim-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.claim-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--iac-navy);
  color: var(--iac-gold);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.claim-step-body { flex: 1; min-width: 0; }

.claim-step-title {
  font-size: 1.0625rem;
  margin-bottom: 6px;
}

.claim-step-body p {
  color: var(--iac-muted);
  font-size: 0.9375rem;
  margin-bottom: 12px;
}

.claim-step-body p:last-child { margin-bottom: 0; }

/* Sits under the download button, so it must not read as body copy */
.download-meta {
  font-size: 0.75rem;
  margin-top: 10px;
  margin-bottom: 0;
}

/* The tracking code is the one thing a claimant needs to keep, and they
   read it out over the phone, so it is set large and monospaced with
   generous letter spacing. */
.tracking-header {
  text-align: center;
  padding: 26px 20px;
  margin-bottom: 26px;
  background: var(--iac-navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.tracking-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--iac-gold);
  margin-bottom: 8px;
}

.tracking-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--iac-white);
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.tracking-header .badge { margin: 0 3px; }

/* Same code inside the admin table, where it has to stay compact */
.tracking-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--iac-navy);
  white-space: nowrap;
}

.status-headline {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--iac-text);
  margin-bottom: 8px;
}

/* Progress timeline. The line is drawn on .timeline as a left border
   and the dots straddle it, so the line ends exactly at the last item
   instead of running past it. */
.timeline {
  list-style: none;
  border-left: 2px solid var(--iac-border);
  margin-left: 6px;
  padding-left: 0;
}

.timeline-item {
  position: relative;
  padding: 0 0 22px 24px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--iac-border);
  border: 2px solid var(--iac-white);
}

.timeline-item.is-current .timeline-dot {
  background: var(--iac-gold);
  box-shadow: 0 0 0 3px var(--iac-gold-lt);
}

.timeline-body { min-width: 0; }

.timeline-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--iac-text);
  margin-bottom: 3px;
}

.timeline-title .muted-note {
  display: inline;
  font-weight: 400;
  margin-bottom: 0;
}

.timeline-note {
  font-size: 0.875rem;
  color: var(--iac-text);
  background: var(--iac-surface);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin: 6px 0;
  overflow-wrap: anywhere;
}

.timeline-time {
  font-size: 0.75rem;
  color: var(--iac-muted);
}

/* Closing note with the phone number, on both the claimant detail page
   and anywhere a claimant might get stuck */
.help-note {
  border: 1px dashed var(--iac-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 26px;
  background: var(--iac-surface);
}

.help-note p {
  font-size: 0.9375rem;
  color: var(--iac-muted);
}

/* Existing claims listed inside an alert on the start page */
.open-claims {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.open-claims li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.open-claims a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Marks the signed questionnaire apart from supporting files in a
   document list, so a reviewer can find it without reading names */
.doc-kind-badge {
  margin-left: 8px;
  vertical-align: middle;
}

/* Claim list on the claimant dashboard */
.claim-summary-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.claim-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--iac-border);
  border-left: 3px solid var(--iac-border);
  border-radius: var(--radius);
  background: var(--iac-surface);
}

/* Open claims get a gold edge so they stand out from closed ones */
.claim-summary.is-open { border-left-color: var(--iac-gold); }

.claim-summary-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  font-weight: 600;
}

.claim-summary-meta {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--iac-muted);
}

/* Public tracking lookup. The code field is monospaced and spaced out
   because people copy it off an email or read it off a note. */
.tracking-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tracking-input::placeholder {
  letter-spacing: 0.08em;
  text-transform: none;
}

.track-more {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
  background: var(--iac-surface);
}

.track-more p {
  font-size: 0.9375rem;
  color: var(--iac-muted);
  margin-bottom: 16px;
}

.track-more-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===========================
   EXPERT ASSIGNMENT
   =========================== */
/* The expert currently holding the case. Gold left edge marks it as the
   live one, distinct from the withdrawn rows listed further down. */
.assigned-expert {
  border: 1px solid var(--iac-border);
  border-left: 3px solid var(--iac-gold);
  border-radius: var(--radius);
  background: var(--iac-surface);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.assigned-expert-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.assigned-expert-name {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--iac-navy);
}

.assigned-expert-role {
  font-size: 0.8125rem;
  color: var(--iac-muted);
  margin-top: 2px;
}

/* Taking a case off someone is rare and consequential, so it stays
   collapsed behind a summary rather than sitting open on the page. */
.unassign-block {
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
  padding: 12px 15px;
  margin-bottom: 8px;
}

.unassign-block summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--iac-red);
}

.unassign-block summary:hover { text-decoration: underline; }

.unassign-block[open] summary { margin-bottom: 14px; }

.assign-picker {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--iac-border);
}

.assign-picker-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--iac-navy);
  margin-bottom: 10px;
}

.expert-choices {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 20px;
}

/* Whole row is the label, so the entire card is a click target */
.expert-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.expert-choice:hover { border-color: var(--iac-gold); }

.expert-choice input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--iac-gold-dk);
}

/* Experts at their limit stay visible but read as unavailable, so an
   admin can see who exists and go raise a limit if they want to. */
.expert-choice.is-full {
  background: var(--iac-surface);
  cursor: not-allowed;
  opacity: 0.75;
}

.expert-choice.is-full:hover { border-color: var(--iac-border); }

.expert-choice-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.expert-choice-name {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--iac-text);
}

.expert-choice-meta {
  font-size: 0.8125rem;
  color: var(--iac-muted);
}

.past-assignments { margin-top: 18px; }

/* Sits beside a card heading, so it must not compete with it */
.staff-count {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--iac-muted);
  margin-left: 8px;
  vertical-align: middle;
}

.staff-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Admin pipeline on the dashboard. Each row is a stage of the claim
   journey with a live count, so nothing sits forgotten in a queue. */
.pipeline {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

.pipeline-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--iac-border);
  font-size: 0.9375rem;
}

.pipeline-step:last-child { border-bottom: 0; }

.pipeline-step a {
  color: var(--iac-text);
  text-decoration: none;
}

.pipeline-step a:hover {
  color: var(--iac-gold-dk);
  text-decoration: underline;
}

/* Finished cases, below the stages. Separated and quietened rather than left in
   the run of live work: these are here to be seen, not acted on, and a closed
   case sitting flush against "Ready to pay out" reads like another queue. */
.pipeline-heading {
  margin: 4px 0 2px;
  padding-top: 14px;
  border-top: 1px solid var(--iac-border);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iac-muted);
}

.pipeline-endings .pipeline-step {
  padding: 9px 2px;
  border-bottom: 0;
  font-size: 0.875rem;
}

.pipeline-endings .pipeline-step a { color: var(--iac-muted); }

.pipeline-endings .pipeline-step a:hover { color: var(--iac-gold-dk); }

/* The expert's written assessment. pre-wrap because they type paragraphs
   and line breaks that carry meaning. */
.report-block {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--iac-text);
  background: var(--iac-surface);
  border-left: 3px solid var(--iac-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 15px 17px;
  margin-bottom: 12px;
}

/* Green edge because a returned assessment is progress, distinct from
   the gold of the live assignment above it. */
.expert-report {
  border: 1px solid var(--iac-border);
  border-left: 3px solid var(--iac-green);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 16px;
}

.expert-report .report-block {
  border-left-color: var(--iac-green);
  margin-bottom: 0;
}

.expert-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Closed cases in the expert's own table recede without disappearing */
.is-closed-row { opacity: 0.7; }

.is-closed-row .tracking-cell { color: var(--iac-muted); }

/* ===========================
   RESPONSIVE
   =========================== */
/* Note: .hero-title and .experts-title carry their own font sizes,
   so they must be scaled by class here. The h1/h2 rules below will
   not reach them. */

@media (max-width: 1200px) {
  .hero-title { font-size: 2.625rem; }
  .service-grid { gap: 20px; }
}

@media (max-width: 1024px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.875rem; }
  .section { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  .hero { padding: 72px 0 40px; }
  .hero-title { font-size: 2.25rem; }
  .hero-image { aspect-ratio: 16 / 9; }
  .hero-image-section { padding-bottom: 64px; }

  /* 8 cards drop from 4 across to 2. Fees stay at 3 until 768,
     since splitting 3 into 2 columns leaves an awkward orphan. */
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }

  .experts-section { padding-bottom: 64px; }
  .experts-banner { padding: 40px 28px; }
  .cta-band { padding: 60px 0; }

  .page-header { padding: 56px 0; }
  .page-header-title { font-size: 2.25rem; }

  .split { gap: 36px; }
  .expert-grid { grid-template-columns: repeat(2, 1fr); }

  /* Form column goes full width, info cards sit in a row above it */
  .contact-layout { grid-template-columns: 1fr; gap: 28px; }
  .contact-info { grid-template-columns: repeat(3, 1fr); }
  .map-wrap { aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 32px; }

  .nav-toggle { display: block; }

  /* Menu collapses into a dropdown panel below the bar */
  .nav-menu {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--iac-white);
    border-bottom: 1px solid var(--iac-border);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 20px;
    margin-left: 0;
    display: none;
  }

  .nav-menu.is-open { display: flex; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }

  .nav-links li { border-bottom: 1px solid var(--iac-border); }

  .nav-link { display: block; padding: 14px 0; }

  .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 16px; }

  .nav-tagline { display: none; }

  .footer { padding-top: 48px; }
  .footer-bottom { justify-content: center; text-align: center; }

  /* Everything goes single column on a phone. Most claimants will
     be on one, so this is the layout that matters most. */
  .hero { padding: 56px 0 32px; }
  .hero-title { font-size: 1.875rem; }
  .hero-sub { font-size: 1rem; }
  .hero-image { aspect-ratio: 4 / 3; }
  .hero-image-section { padding-bottom: 48px; }

  .service-grid { grid-template-columns: 1fr; }
  .fee-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }

  .fee-card { padding: 30px 22px; }
  .who-we-are-body { font-size: 1rem; text-align: left; }

  .experts-section { padding-bottom: 48px; }
  .experts-banner { padding: 32px 22px; }
  .experts-title { font-size: 1.375rem; }

  .procedure-step { padding: 22px 20px; gap: 18px; }
  .procedure-number { width: 46px; height: 46px; font-size: 1.25rem; }
  .cta-band { padding: 48px 0; }

  .page-header { padding: 44px 0; }
  .page-header-title { font-size: 1.875rem; }
  .page-header-sub { font-size: 1rem; }

  /* Columns stack. On the reversed section the image would land
     above the heading, so its order is flipped back to keep the
     text first, which is what matters on a phone. */
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split-reverse .split-media { order: 2; }
  .split-reverse .split-text { order: 1; }

  .expert-grid { grid-template-columns: 1fr; }
  .about-procedure-head { margin-bottom: 28px; }
  .named-steps { gap: 22px; }

  .claim-steps { gap: 20px; }
  /* Stacked so neither action is cramped on a phone */
  .track-more-actions .btn { width: 100%; }

  /* Name and status badge stop competing for one line */
  .assigned-expert-head { flex-direction: column; gap: 8px; }
  .expert-choice { padding: 12px 13px; }
  .tracking-header { padding: 22px 16px; }
  .tracking-code { font-size: 1.5rem; letter-spacing: 0.1em; }
  /* Full width so the code and the badge do not fight for one line */
  .claim-summary-code { flex-basis: 100%; }

  .contact-info { grid-template-columns: 1fr 1fr; }
  .contact-form-card { padding: 26px 22px; }
  .contact-form-title { font-size: 1.25rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .map-wrap { aspect-ratio: 4 / 3; }

  .dash-grid { grid-template-columns: 1fr; }
  .auth-page { padding: 40px 0 56px; }
  .review-layout { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .container, .nav-container { padding: 0 16px; }
  h1 { font-size: 1.625rem; }
  .btn { padding: 12px 20px; width: 100%; }
  .nav-wordmark { font-size: 1.125rem; }
  .nav-logo-mark { width: 32px; height: 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .error-code { font-size: 3.5rem; }
  .error-page { padding: 64px 16px; }

  .hero { padding: 44px 0 28px; }
  .hero-title { font-size: 1.5rem; }
  .hero-image { aspect-ratio: 3 / 2; }

  /* Buttons are full width at this size, so stack them */
  .hero-actions,
  .cta-actions { flex-direction: column; }

  .service-card { padding: 22px 20px; }
  .review-card { padding: 22px 20px; }
  .fee-card { padding: 26px 20px; }
  .review-quote { padding: 14px 15px; }
  .experts-banner { padding: 26px 18px; }
  .experts-title { font-size: 1.25rem; }

  /* Badge sits above the text on a narrow screen rather than
     stealing half the width from it. */
  .procedure-step {
    flex-direction: column;
    gap: 14px;
    padding: 22px 18px;
  }

  .procedure-number { width: 42px; height: 42px; font-size: 1.125rem; }

  .page-header-title { font-size: 1.625rem; }
  .expert-card { padding: 26px 20px; }

  .contact-info { grid-template-columns: 1fr; }
  .contact-form-card { padding: 22px 18px; }
  .map-wrap { aspect-ratio: 1 / 1; }

  .form-card { padding: 22px 18px; }
  .status-card { padding: 20px 18px; }
  .doc-grid { grid-template-columns: 1fr; }
  .decision-actions { flex-direction: column; }
  .alert-action { flex-direction: column; align-items: stretch; }

  .guarantor-block { padding: 16px 16px 2px; }
  .declaration-block { padding: 16px 16px; }

  .toast-stack { top: auto; bottom: 12px; left: 12px; right: 12px; max-width: none; }
  .confirm-panel { padding: 24px 20px 22px; }
  .confirm-actions { flex-direction: column-reverse; }
  .radio-row { gap: 14px; }
  .cert-list li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .admin-links { display: flex; }
  .admin-links .btn { flex: 1; }

  /* Modal fills the screen on a phone. Registration has six fields
     plus a checkbox, so a floating card would be cramped. */
  .modal-backdrop { padding: 0; }

  .modal-panel {
    max-width: none;
    min-height: 100%;
    border-radius: 0;
    padding: 52px 20px 32px;
  }

  .auth-card { padding: 24px 20px; border-radius: var(--radius); }
  .auth-title { font-size: 1.25rem; }
  .auth-tab { font-size: 0.8125rem; padding: 9px 8px; }
  .otp-input { font-size: 1.25rem; letter-spacing: 0.35em; }
  .dash-card { padding: 22px 18px; }

  /* Submit button is full width here because .btn is at this size */
  .assistance-phone { font-size: 0.9375rem; }
  .named-step { gap: 14px; }
  .named-step-number { width: 36px; height: 36px; font-size: 1rem; }

  .claim-step { gap: 13px; }
  .claim-step-number { width: 30px; height: 30px; font-size: 0.875rem; }
  .claim-step-title { font-size: 1rem; }
  /* Smallest phones cannot hold IC-2026-XXXXXX at 1.5rem on one line */
  .tracking-code { font-size: 1.25rem; letter-spacing: 0.08em; }
  .timeline-item { padding-left: 18px; padding-bottom: 18px; }
  .help-note { padding: 14px 15px; }

  .assigned-expert { padding: 14px 15px; }
  .assigned-expert-name { font-size: 1rem; }
  .expert-choices { gap: 8px; }
  .expert-choice { gap: 10px; }
  .assign-picker { margin-top: 16px; padding-top: 16px; }
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }

  /* Colour and shadow still change on hover, but nothing moves. */
  .service-card:hover,
  .review-card:hover,
  .expert-card:hover { transform: none; }

  /* The modal appears instantly rather than sliding in. */
  .modal-panel { animation: none; }
}

/* ===========================
   COMMITTEE AND ENGAGEMENT OFFICER
   Phase 8. The committee sits at the front of the pipeline, so these
   screens carry the same table and case-file furniture as the admin
   screens and only add what is genuinely new: stacked choices, the
   recommendation panel and the money-free officer contact card.
   =========================== */

/* Stacked, selectable option rows.
   Distinct from .radio-row, which is a HORIZONTAL container of
   .radio-option pills. These are full-width cards because each one
   can carry a line of explanation underneath the label. */
.choice-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.choice-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
  background: var(--iac-white);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.choice-row:hover { border-color: var(--iac-navy-lt); }

.choice-row input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--iac-navy);
  cursor: pointer;
}

/* :has lets the whole card show the selection, not just the dot.
   Browsers without it simply keep the plain border, so nothing breaks. */
.choice-row:has(input:checked) {
  border-color: var(--iac-navy);
  background: var(--iac-quote-en);
}

.choice-row:has(input:focus-visible) {
  outline: 2px solid var(--iac-gold);
  outline-offset: 2px;
}

.choice-body { display: flex; flex-direction: column; gap: 3px; }

.choice-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--iac-text);
}

.choice-hint {
  font-size: 0.8125rem;
  color: var(--iac-muted);
  line-height: 1.5;
}

/* The on-behalf confirmation. Deliberately heavier than a plain
   checkbox: ticking it is an assertion that the whole committee agreed,
   and the database refuses the row without it. */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--iac-gold);
  border-left-width: 3px;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--iac-gold-lt);
  font-size: 0.9375rem;
  line-height: 1.55;
  cursor: pointer;
}

.checkbox-row input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--iac-navy);
  cursor: pointer;
}

.checkbox-row:has(input:focus-visible) {
  outline: 2px solid var(--iac-gold-dk);
  outline-offset: 2px;
}

/* The committee position panel, on both the case file and the admin
   claim detail. A gold left edge marks it as the thing being decided. */
.position-panel {
  border-left: 3px solid var(--iac-gold);
  background: var(--iac-surface);
  padding: 18px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 20px;
}

/* Queue and caseload tables carry more columns than the admin ones, so
   they need to stay readable rather than wrap into mush. */
.data-table .tracking-cell {
  font-size: 0.8125rem;
  white-space: nowrap;
}

.doc-kind-badge { text-transform: capitalize; }

/* Contact links in the officer's caseload and case file. The officer is
   the only person who phones the claimant, so these are the primary
   action on the row and should look clickable. */
.officer-contact a {
  color: var(--iac-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--iac-border);
}

.officer-contact a:hover {
  color: var(--iac-gold-dk);
  border-bottom-color: currentColor;
}

@media (max-width: 720px) {
  .choice-row { padding: 12px 13px; }
  .checkbox-row { padding: 12px 13px; }
  .position-panel { padding: 14px 15px; }
}

/* ==========================================================================
   CLAIM WORKSPACE — cards, money and the document stage
   Phases 10 to 13.

   Two ideas here.

   1. .claim-grid lets cards sit side by side WITHOUT the templates having to
      pair them up by hand. Most of these cards appear conditionally — an
      acceptance fee panel only once a claim is accepted, a compensation panel
      only once money arrives — so any hardcoded left/right pairing would leave
      a half-width card stranded next to a gap the moment one of them is absent.
      auto-fit solves that: cards flow into two columns when there is room, one
      when there is not, and a card on its own simply fills the row.

   2. Green is money and success only, per the note at the top of this file.
      Amounts, received states and payouts are green. Anything internal is
      neutral. Nothing decorative borrows it.
   ========================================================================== */

.claim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 24px;
  /* Without this every card stretches to the height of the tallest one in its
     row, which leaves a lot of white space under the short ones. */
  align-items: start;
  margin-bottom: 28px;
}

/* Cards that genuinely need the full width: forms with side-by-side fields,
   tables, timelines, and anything holding a long paragraph of claimant text. */
.claim-grid > .is-wide {
  grid-column: 1 / -1;
}

/* ---- Money figures -------------------------------------------------------- */

.fee-amount-label {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iac-muted);
}

.fee-amount {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--iac-navy);
  /* Tabular figures stop the number jumping about as it is typed into the
     live split preview. */
  font-variant-numeric: tabular-nums;
}

/* The amount a claimant is actually receiving, and a confirmed payout. */
.fee-card .fee-amount,
.money-positive .fee-amount {
  color: var(--iac-green);
}

/* ---- Account numbers and references -------------------------------------- */

/* Monospace so a claimant reading ten digits back over the phone, or an admin
   checking them against a bank statement, can see each character distinctly.
   0 and O, 1 and l are the pairs that cause wrong transfers. */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375em;
  letter-spacing: 0.04em;
  color: var(--iac-text);
}

/* ---- Internal notes ------------------------------------------------------- */

/* Visibly different from claimant-facing copy, so staff can tell at a glance
   that a note is theirs and not something the claimant has read. */
.internal-note {
  background: var(--iac-surface);
  border-left: 3px solid var(--iac-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px;
  font-size: 0.9375rem;
  color: var(--iac-text);
  white-space: pre-wrap;
}

.report-body {
  background: var(--iac-surface);
  border-left: 3px solid var(--iac-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ---- Decision blocks ------------------------------------------------------ */

/* Separates one action from the next inside a card that offers several —
   confirm or reject a payment, accept or send back a form. Without a divider
   the two sets of fields read as one form. */
.decide-block {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--iac-border);
}

.decide-block:first-of-type {
  margin-top: 18px;
}

.decide-block .form-card-title {
  margin-top: 0;
}

/* ---- Radio rows ----------------------------------------------------------- */

.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 8px;
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.radio-row:hover {
  border-color: var(--iac-navy-lt);
  background: var(--iac-surface);
}

.radio-row input {
  margin-top: 3px;
  flex-shrink: 0;
}

.radio-row:has(input:checked) {
  border-color: var(--iac-navy);
  background: var(--iac-surface);
}

.radio-row .cell-sub {
  display: block;
  margin-top: 2px;
}

/* Keyboard users need the same affordance mouse users get on hover. */
.radio-row:focus-within {
  outline: 2px solid var(--iac-gold);
  outline-offset: 2px;
}

/* ---- Supporting document guidance ---------------------------------------- */

.doc-guide {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.doc-guide li {
  padding: 10px 0;
  border-bottom: 1px solid var(--iac-border);
  font-size: 0.9375rem;
}

.doc-guide li:last-child {
  border-bottom: none;
}

.doc-guide strong {
  color: var(--iac-navy);
}

/* Finance queue tabs were a separate .queue-tab ruleset that duplicated
   .admin-tab above. Deleted rather than kept in step: two definitions of the
   same component drift apart the first time only one of them gets touched. The
   finance view now uses .admin-tabs like every other queue screen. */

/* ---- Live split preview --------------------------------------------------- */

/* Green because it is showing money, and because the figure a claimant will
   receive is the number worth drawing the eye to before saving. */
.split-preview {
  margin: 0 0 18px;
  padding: 13px 15px;
  background: var(--iac-green-lt);
  border-left: 3px solid var(--iac-green);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.split-preview .form-hint {
  margin: 0;
  color: var(--iac-text);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* ---- Bank details --------------------------------------------------------- */

/* Set apart from the rest of a card, because these are the digits money moves
   on and they deserve to look like a distinct block rather than another row. */
.fee-bank {
  padding: 16px 18px;
  margin: 0 0 18px;
  background: var(--iac-surface);
  border: 1px solid var(--iac-border);
  border-radius: var(--radius);
}

.fee-bank dt:first-child,
.fee-bank dd:first-of-type {
  margin-top: 0;
}

/* ==========================================================================
   RESPONSIVE
   The grid above already collapses on its own through auto-fit. These rules
   handle the things auto-fit cannot: type that is too large on a phone, and a
   forced full-width card that should stop being forced.
   ========================================================================== */

@media (max-width: 768px) {
  .claim-grid {
    /* Below this width two columns would each be too narrow to read, and
       minmax alone would still try. One column, explicitly. */
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .fee-amount {
    font-size: 1.625rem;
  }

  .admin-tabs {
    /* Scrolls sideways rather than stacking into a tall pile of pills. */
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .admin-tab {
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .fee-amount {
    font-size: 1.4375rem;
  }

  .radio-row {
    padding: 10px 11px;
  }

  .fee-bank {
    padding: 13px 14px;
  }
}