/* =============================================================================
   IMMI RESPONSE — Partner Visa Readiness Audit
   FILE 2 OF 2 · IMPLEMENTATION
   Pages 01–04. Load AFTER immi-audit-tokens.css.

   MARKUP MAP is inline against each block. Where a class does not exist in
   the current build, add it. Where the current build has green, remove it.
   ============================================================================= */


/* =============================================================================
   SHARED · CONTAINER
   ============================================================================= */

.masthead,
.hero,
.steps,
.panel,
.site-footer > .footer-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* =============================================================================
   SHARED · MASTHEAD                                        [pages 01–04]

   <header class="masthead">
     <a class="brand" href="/">
       <img class="brand-logo" src="/assets/images/logo.png" alt="Immi Response">
       <span class="brand-name">Partner Visa Readiness Audit</span>
     </a>
   </header>

   REMOVE: "Australian Migration Solutions" tagline.
   REMOVE: the "Ieva Vaityte · MARN 1466195 / OMARA Registered" block, top right.
           MARN and OMARA live in the footer. One home, not three.
   ============================================================================= */

.masthead {
  display: flex;
  align-items: center;
  padding-block: 1.5rem;
  padding-inline: 0;
  border-bottom: 1px solid var(--rule);
  width: 100%;
}

.brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; }
.brand-logo { display: block; height: 40px; width: auto; }

.brand-name {
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule-strong);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  color: var(--navy);
}


/* =============================================================================
   SHARED · EYEBROW                                         [pages 01–04]
   Navy. Not orange, not teal, not green.
   ============================================================================= */

.eyebrow {
  margin: 0 0 1.75rem;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--navy-45);
}


/* =============================================================================
   SHARED · HEADINGS                                        [pages 01–04]
   Cormorant, both lines. Roman then italic.
   ============================================================================= */

.hero-title,
.panel-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: var(--navy);
  text-wrap: balance;
}

.hero-title  { font-size: var(--t-hero); }
.panel-title { font-size: var(--t-h2); line-height: 1.08; }

.hero-title-sub,
.panel-title-sub {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--navy-70);
}

.hero-lede,
.panel-lede {
  margin: 1.5rem 0 0;
  max-width: var(--measure);
  color: var(--navy-70);
}
.hero-lede  { font-size: 1.0625rem; }
.panel-lede { font-size: var(--t-small); }


/* =============================================================================
   SHARED · STEP RAIL                                       [pages 01–04]

   <nav class="steps" aria-label="Progress">
     <ol>
       <li class="step is-done">   <span class="step-num">01</span><span class="step-name">Overview</span></li>
       <li class="step is-current"><span class="step-num">02</span><span class="step-name">Your details</span></li>
       <li class="step">           <span class="step-num">03</span><span class="step-name">Screening</span></li>
       <li class="step">           <span class="step-num">04</span><span class="step-name">Complete</span></li>
     </ol>
   </nav>

   THE BUG: the current build paints completed steps green WITH a green
   underline, and the current step black WITH a black underline. Two markers.
   A rail has one job — you are here. One marker. Orange. Nothing else.
   ============================================================================= */

.steps ol {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}

.step {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 1.1rem 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--navy-45);
}

.step-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.step-name {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.step.is-done    { color: var(--navy-70); border-bottom-color: transparent; }
.step.is-done .step-num { color: var(--navy-45); }

.step.is-current { color: var(--navy);    border-bottom-color: var(--orange); }


/* =============================================================================
   SHARED · PANEL                                           [pages 01–04]
   ============================================================================= */

.panel {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.25rem);
  margin-block: 2.5rem 4rem;
}


/* =============================================================================
   SHARED · BUTTONS                                         [pages 01–04]
   The primary button is the only orange fill in the build.
   The current build has it black. Fix that first — it is the whole point.
   ============================================================================= */

.btn {
  min-height: var(--tap);
  padding: 0.95rem 2.25rem;
  font-family: var(--body);
  font-size: var(--t-base);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary { background: var(--orange); color: var(--white); }
.btn--primary:hover  { background: var(--orange-press); }
.btn--primary:active { transform: translateY(1px); }
.btn--primary:disabled { background: var(--rule-strong); cursor: not-allowed; }

.btn--ghost {
  background: transparent;
  color: var(--navy-70);
  border-color: var(--rule-strong);
  padding-inline: 1.75rem;
}
.btn--ghost:hover { color: var(--navy); border-color: var(--navy); }


/* =============================================================================
   PAGE 01 · HERO + STATS

   <section class="hero">
     <p class="eyebrow">Pre-lodgement service · 820/801 · 309/100</p>
     <h1 class="hero-title">Partner Visa Readiness Audit.
       <span class="hero-title-sub">Find the gaps before you lodge.</span></h1>
     <p class="hero-lede">…</p>
     <ul class="stats">
       <li class="stat"><span class="stat-value">$550</span><span class="stat-label">Fixed fee · GST incl.</span></li>
       <li class="stat"><span class="stat-value">5 days</span><span class="stat-label">Report turnaround</span></li>
       <li class="stat"><span class="stat-value">4 pillars</span><span class="stat-label">Evidence mapped</span></li>
     </ul>
   </section>

   REMOVE from the stat row: "MARN 1466195 / Agent reviewed".
   A licence is not a product fact and it does not belong next to a price.
   Grid below still handles four items if it goes back in.
   ============================================================================= */

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) 0; }

.stats {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.stat { flex: 1 1 0; min-width: 150px; padding: 1.5rem 1.75rem 1.5rem 0; }
.stat + .stat { border-left: 1px solid var(--rule); padding-left: 1.75rem; }

.stat-value {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--t-small);
  color: var(--navy-45);
}


/* =============================================================================
   PAGE 01 · FEATURES

   <ul class="features">
     <li class="feature">
       <h3 class="feature-name">Four-pillar mapping</h3>
       <p class="feature-body">…</p>
     </li>  ×4
   </ul>

   REMOVE the 01 / 02 / 03 / 04 numbers. Four-pillar mapping, gap
   identification, consistency review and written report are four parallel
   things. Numbering them tells the reader to follow an order that does not
   exist, and burns the one device that carries real meaning in this flow —
   the step rail.
   ============================================================================= */

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: none;
}

.feature {
  background: var(--warm-white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem;
}

/* Hard-kill inherited numbering chrome */
.feature::before,
.feature::after,
.feature .feature-num,
.feature .index { content: none !important; display: none !important; }

.feature-name { margin: 0 0 0.5rem; font-size: var(--t-h3); font-weight: 500; }
.feature-body { margin: 0; font-size: var(--t-small); color: var(--navy-70); line-height: 1.55; }


/* =============================================================================
   PAGE 01 · INCLUSIONS

   <ul class="inclusions"><li>Secure evidence portal…</li> ×4</ul>

   REMOVE the green tick icons. A tick means done — nothing has been done.
   This is a list of what the client receives. Marker is a navy square.
   ============================================================================= */

.inclusions {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.inclusions li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--navy-70);
}

.inclusions li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--navy);
  transform: translateY(-1px);
}


/* =============================================================================
   PAGE 01 · SCOPE NOTICE
   A boundary, not a warning. Navy rule. No fill, no icon, no amber.
   ============================================================================= */

.scope-notice {
  margin: 2.25rem 0 0;
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 2px solid var(--navy);
  max-width: var(--measure);
  font-size: var(--t-small);
  color: var(--navy-70);
}
.scope-notice strong { color: var(--navy); font-weight: 500; }

.panel > .btn--primary { margin-top: 2.5rem; }


/* =============================================================================
   PAGE 02 · FORM

   <form class="form" novalidate>
     <div class="field">
       <label class="field-label" for="name">Full legal name</label>
       <input class="input" id="name" type="text" autocomplete="name" required>
       <p class="field-error" hidden>Enter your full legal name.</p>
     </div>
     <div class="field">
       <label class="field-label" for="pathway">Visa pathway</label>
       <div class="select-wrap"><select class="select" id="pathway" required>…</select></div>
     </div>
     <div class="field field--full">…</div>
     <div class="form-actions">
       <button class="btn btn--ghost" type="button">Back</button>
       <button class="btn btn--primary" type="submit">Continue to screening</button>
     </div>
   </form>

   Labels go from UPPERCASE BOLD to sentence case.
   Every field here is required, so nothing is marked. Mark the exception,
   not the rule — the only optional field in the flow is on page 03.
   Validate on blur: set data-touched on the input when it loses focus.
   ============================================================================= */

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.75rem;
  margin-top: 2.5rem;
}

.field { display: flex; flex-direction: column; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field-label {
  margin-bottom: 0.5rem;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
}

.optional {
  margin-left: 0.4rem;
  font-weight: 400;
  font-size: var(--t-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy-45);
}

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.8rem 0.95rem;
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.4;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.input::placeholder, .textarea::placeholder { color: var(--navy-45); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-45); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11, 28, 58, 0.08);
}

/* Browsers paint autofill pale yellow. Not on this page. */
.input:-webkit-autofill,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--navy);
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.textarea { min-height: 130px; resize: vertical; }

/* --- Select: native chevron out, navy caret in --- */

.select-wrap { position: relative; }
.select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select:has(option[value=""]:checked) { color: var(--navy-45); }

.select-wrap::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--navy);
  border-bottom: 1.5px solid var(--navy);
  transform: rotate(45deg);
  pointer-events: none;
}

/* --- Validation: the only place --error appears --- */

.field-error { margin: 0.45rem 0 0; font-size: var(--t-small); color: var(--error); }

.field.has-error .input,
.field.has-error .select { border-color: var(--error); background: var(--error-tint); }
.field.has-error .input:focus,
.field.has-error .select:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.10); }

.input:invalid:not(:focus):not([data-touched]) { border-color: var(--rule-strong); }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}


/* =============================================================================
   PAGE 03 · SCREENING

   <fieldset class="screening-q" data-answered="false">
     <legend class="screening-legend">Has the applicant previously had an Australian visa refused or cancelled?</legend>
     <p class="screening-hint">…</p>                     <!-- omit where absent -->
     <div class="choice-group">
       <input class="choice-input" type="radio" id="q1-no"     name="q1" value="no">
       <label class="choice" for="q1-no">No</label>
       <input class="choice-input" type="radio" id="q1-yes"    name="q1" value="yes">
       <label class="choice" for="q1-yes">Yes</label>
       <input class="choice-input" type="radio" id="q1-unsure" name="q1" value="unsure">
       <label class="choice" for="q1-unsure">Unsure</label>
     </div>
   </fieldset>

   THE ONE THAT MATTERS.
   The selected pill is currently green. Green means safe. On a screen where
   "No" is the easy answer and "Yes" means the RMA has to talk to you, that
   paints a value judgement onto the answer — and the copy directly above it
   says a "Yes" is not a problem. The interface must not argue with the copy.

   Selected is NAVY. The identical navy for No, Yes and Unsure.
   The card takes a thin navy rule when answered. That rule does not vary
   with the value. No flags. No warnings. --error is NOT used on this page.

   JS: set data-answered="true" on the fieldset on change. That is the only
   state change. Do not branch on the value.
   ============================================================================= */

.screening { margin-top: 2.5rem; }

.screening-q {
  position: relative;
  margin: 0 0 1rem;
  padding: 1.6rem;
  background: var(--warm-white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.screening-q::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--navy);
  opacity: 0;
  transition: opacity .18s ease;
}
.screening-q[data-answered="true"]::before { opacity: 1; }

.screening-legend {
  float: left;                /* <legend> + padding is fragile; float keeps flow */
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
}

.screening-hint {
  clear: both;
  margin: -0.5rem 0 1rem;
  max-width: var(--measure);
  font-size: var(--t-small);
  color: var(--navy-45);
}

.choice-group {
  clear: both;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

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

.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.6rem 1rem;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--navy-70);
  cursor: pointer;
  user-select: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.choice:hover { border-color: var(--navy-45); color: var(--navy); }

/* THE SELECTED STATE. Identical for all three answers. No exceptions. */
.choice-input:checked + .choice {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.choice-input:focus-visible + .choice { outline: 2px solid var(--navy); outline-offset: 3px; }

/* Unanswered on submit: prompt, do not scold. Navy, never --error. */
.screening-prompt { display: none; }
.screening-q.needs-answer { border-color: var(--navy); }
.screening-q.needs-answer .screening-prompt {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--t-small);
  color: var(--navy-70);
}


/* =============================================================================
   PAGE 03 · CONSENT
   Two checkboxes carrying legal weight. Give them a real target.
   This is the one place on page 03 --error is allowed — it is a legal gate,
   not a judgement about the client.
   ============================================================================= */

.consent {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--warm-white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  cursor: pointer;
}
.check + .check { margin-top: 1rem; }

.check-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.check-box {
  position: relative;
  width: 20px; height: 20px;
  margin-top: 1px;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  transition: background-color .14s ease, border-color .14s ease;
}

.check-input:checked + .check-box { background: var(--navy); border-color: var(--navy); }

.check-input:checked + .check-box::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
}

.check-input:focus-visible + .check-box { outline: 2px solid var(--navy); outline-offset: 3px; }

.check-text { font-size: var(--t-small); line-height: 1.55; color: var(--navy-70); }
.check-text a { color: var(--navy); text-underline-offset: 3px; }

.consent.has-error { border-color: var(--error); }
.consent-error { display: none; margin: 1rem 0 0; font-size: var(--t-small); color: var(--error); }
.consent.has-error .consent-error { display: block; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* =============================================================================
   PAGE 04 · COMPLETE

   <div class="complete">
     <div class="complete-mark" aria-hidden="true"></div>
     <h2 class="panel-title">Enquiry received.
       <span class="panel-title-sub">The RMA will review it personally.</span></h2>
     <p class="complete-lede">We have securely received your information.
       A copy has been sent to <strong>you@example.com</strong>.
       The RMA will review your enquiry and contact you about suitability
       and the next steps <strong>within 2 business days</strong>.</p>

     <div class="reference">
       <span class="reference-label">Reference</span>
       <span class="reference-code">ENQ-MRIWUXN1-394C</span>
       <button class="reference-copy" type="button">Copy</button>
     </div>

     <ol class="timeline">
       <li class="timeline-step is-done">Initial enquiry received</li>
       <li class="timeline-step">Migration agent suitability review</li>
       <li class="timeline-step">Service Agreement and payment handled in Clio</li>
       <li class="timeline-step">Secure evidence upload link issued</li>
     </ol>

     <a class="btn btn--ghost" href="https://immiresponse.au">Return to Immi Response</a>
   </div>

   REMOVE the green tick disc. A confirmation page is a receipt, not a trophy.
   This person has just disclosed a visa refusal and a health condition and
   does not yet know whether you will take the matter. Understated navy.

   ADD: the confirmation-email line and a timeframe. The page currently
   dead-ends and the client has nothing to do but refresh it.
   ============================================================================= */

.complete { text-align: center; padding-block: 1rem 1rem; }

.complete-mark {
  position: relative;
  width: 44px; height: 44px;
  margin: 0 auto 2rem;
  border: 1px solid var(--navy);
  border-radius: 50%;
}
.complete-mark::after {
  content: '';
  position: absolute;
  left: 16px; top: 12px;
  width: 6px; height: 13px;
  border-right: 1.5px solid var(--navy);
  border-bottom: 1.5px solid var(--navy);
  transform: rotate(45deg);
}

.complete .panel-title { text-wrap: balance; }

.complete-lede {
  margin: 1.5rem auto 0;
  max-width: 52ch;
  font-size: var(--t-small);
  color: var(--navy-70);
}
.complete-lede strong { color: var(--navy); font-weight: 500; }

/* --- Reference: they will need to quote this. Make it copyable. --- */

.reference {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.25rem;
  padding: 0.65rem 0.65rem 0.65rem 1rem;
  background: var(--warm-white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.reference-label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--navy-45);
}

.reference-code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--navy);
  user-select: all;
}

.reference-copy {
  min-height: 34px;
  padding: 0.35rem 0.85rem;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-family: var(--body);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--navy-70);
  cursor: pointer;
}
.reference-copy:hover { color: var(--navy); border-color: var(--navy); }
.reference-copy[data-copied="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* --- Timeline: this IS a real sequence, so a connected rail is honest. --- */

.timeline {
  list-style: none;
  max-width: 460px;
  margin: 3rem auto 0;
  padding: 0;
  text-align: left;
}

.timeline-step {
  position: relative;
  padding: 0 0 1.5rem 1.9rem;
  font-size: var(--t-small);
  color: var(--navy-45);
}
.timeline-step:last-child { padding-bottom: 0; }

/* connector */
.timeline-step::before {
  content: '';
  position: absolute;
  left: 4px; top: 1.15em;
  width: 1px;
  height: calc(100% - 0.6em);
  background: var(--rule-strong);
}
.timeline-step:last-child::before { display: none; }

/* node — navy, never green */
.timeline-step::after {
  content: '';
  position: absolute;
  left: 0; top: 0.45em;
  width: 9px; height: 9px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--white);
}

.timeline-step.is-done { color: var(--navy); font-weight: 500; }
.timeline-step.is-done::after { background: var(--navy); border-color: var(--navy); }

.complete .btn--ghost {
  display: inline-block;
  margin-top: 2.75rem;
  text-decoration: none;
  line-height: 1.4;
}


/* =============================================================================
   SHARED · FOOTER                                          [pages 01–04]

   <footer class="site-footer">
     <div class="footer-inner">
       <p class="footer-credential">
         <strong>Ieva Vaityte</strong> · MARN 1466195 · OMARA Registered · Fixed fees
       </p>
       <nav class="footer-links">
         <a href="https://immiresponse.au/terms-and-conditions/">Terms</a>
         <a href="https://immiresponse.au/privacy-policy/">Privacy</a>
         <a href="https://www.mara.gov.au/using-a-migration-agent/consumer-guide">Consumer Guide</a>
       </nav>
     </div>
   </footer>

   This is the only home for MARN and OMARA. It is trust furniture and it is
   doing real work. Give it a navy field and room to stand.
   ============================================================================= */

.site-footer {
  background: var(--navy);
  color: var(--cream);
  padding-block: 3rem;
  font-size: var(--t-small);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.footer-credential { margin: 0; color: rgba(250, 248, 244, 0.75); }
.footer-credential strong { color: var(--cream); font-weight: 500; }

.footer-links { display: flex; gap: 1.5rem; }
.footer-links a {
  color: var(--cream);
  text-decoration-color: rgba(250, 248, 244, 0.35);
  text-underline-offset: 3px;
}
.footer-links a:hover { text-decoration-color: var(--orange); }


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

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

@media (max-width: 720px) {
  .form { grid-template-columns: 1fr; gap: 1.25rem; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
}

@media (max-width: 640px) {
  .brand-name { display: none; }
  .stats { display: block; }
  .stat { padding-inline: 0; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .step-name { display: none; }          /* numbers only on the mobile rail */
  .step { justify-content: center; }
  .choice-group { grid-template-columns: 1fr; }
  .screening-q { padding: 1.25rem; }
  .panel > .btn--primary { width: 100%; }
  .reference { display: flex; width: 100%; }
  .reference-code { flex: 1; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}