/* ==========================================================================
   Townhall Immigration
   Guidance | Trust | New Beginnings

   Palette reconciles two sources:
   - --ink and --gold are sampled from the Townhall logo, so the mark sits
     on brand colour with no clash.
   - --blue keeps the cobalt from the reference site, used only for
     interactive elements (buttons, links, subclass codes).
   ========================================================================== */

:root {
  /* Sampled from the logo */
  --ink:         #002454;
  --ink-2:       #33425C;
  --gold:        #B49048;

  /* Gold derivatives. --gold is a decorative weight only: white on it
     measures 2.99:1 and fails WCAG AA. Use --gold-ink for gold-coloured
     text on light grounds (4.9:1 on cream), and --cream as the ground. */
  --gold-ink:    #7A5F22;
  --cream:       #F7F1E6;

  /* Interactive blue, from the reference site */
  --blue:        #0047AB;
  --blue-bright: #046BD2;
  --blue-deep:   #045CB4;

  /* Neutrals */
  --wash:        #F0F5FA;
  --line:        #D1D5DB;
  --white:       #FFFFFF;
  --black:       #111111;

  /* Derived tints (mixed from the brand values only) */
  --blue-05:  color-mix(in srgb, var(--blue) 5%,  white);
  --blue-10:  color-mix(in srgb, var(--blue) 10%, white);
  --gold-10:  color-mix(in srgb, var(--gold) 12%, white);
  --gold-30:  color-mix(in srgb, var(--gold) 32%, white);
  --ink-70:   color-mix(in srgb, var(--ink) 70%,  white);

  /* Type */
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Scale */
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.11rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.55rem, 1.35rem + 1vw, 2.2rem);
  --step-4:  clamp(1.85rem, 1.45rem + 1.7vw, 2.85rem);

  --wrap: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --rail-pad: var(--gutter);   /* lets the services rail bleed to the wrap edge */
  --radius: 4px;
  --shadow: 0 1px 2px rgba(30, 41, 59, .06), 0 8px 24px -12px rgba(30, 41, 59, .18);
  --shadow-lg: 0 2px 4px rgba(30, 41, 59, .06), 0 24px 48px -20px rgba(30, 41, 59, .28);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p  { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--white);
  padding: .8rem 1.2rem; z-index: 999;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--wash { background: var(--wash); }
.section--ink { background: var(--ink); color: color-mix(in srgb, var(--white) 82%, var(--ink)); }
.section--ink h2, .section--ink h3 { color: var(--white); }

/* Eyebrows are small uppercase text, so they need real contrast.
   Raw --gold on white is only 2.99:1; --gold-ink is 6.02:1. Dark
   grounds flip to the pale --gold-30 (11.1:1 on navy). */
.eyebrow {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .9rem;
}
.section--ink .eyebrow,
.hero .eyebrow,
.cta-band .eyebrow { color: var(--gold-30); }

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-70); }
.section--ink .lede { color: color-mix(in srgb, var(--white) 75%, var(--ink)); }

.head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.head--center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem;
  font-weight: 600; font-size: var(--step-0);
  line-height: 1.2;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
/* Navy label, not white: white on gold is 2.99:1 and fails AA. Navy is 5.09:1. */
.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 700; }
.btn--gold:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--blue); background: var(--blue-05); }
.btn--on-ink { background: transparent; color: var(--white); border-color: color-mix(in srgb, var(--white) 40%, transparent); }
.btn--on-ink:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--ink);
  color: color-mix(in srgb, var(--white) 72%, var(--ink));
  font-size: var(--step--1);
}
.topbar__in {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-block: .55rem;
}
.topbar__contact { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--white); text-decoration: underline; }
.topbar__mara { color: var(--gold-30); font-weight: 600; letter-spacing: .02em; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .9rem; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__mark { width: 50px; height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 1.14rem;
  letter-spacing: .01em; color: var(--ink);
}
.brand__sub {
  font-size: .6rem; font-weight: 600; font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink);
  margin-top: .12rem;
}
@media (max-width: 420px) {
  .brand__mark { width: 40px; }
  .brand__name { font-size: 1rem; }
  .brand__sub { font-size: .53rem; letter-spacing: .1em; }
}

/* Footer uses the full lockup, recoloured for the dark ground */
.footer__logo { width: 230px; height: auto; }

.nav__toggle {
  display: none;
  padding: .55rem .8rem;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.nav__toggle span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav__toggle span + span { margin-top: 5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__link {
  position: relative;
  font-weight: 500; font-size: .97rem;
  color: var(--ink); text-decoration: none;
  padding-block: .35rem;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--blue); font-weight: 600; }
.nav__menu .btn { padding: .65rem 1.15rem; font-size: .93rem; }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: .5rem var(--gutter) 1.25rem;
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__link { padding: .85rem 0; border-bottom: 1px solid var(--wash); }
  .nav__link::after { display: none; }
  .nav__menu .btn { margin-top: 1rem; justify-content: center; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: color-mix(in srgb, var(--white) 80%, var(--ink));
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70ch 55ch at 88% -10%, color-mix(in srgb, var(--blue) 55%, transparent), transparent 70%),
    radial-gradient(50ch 40ch at 2% 105%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { color: var(--white); }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero__copy > * + * { margin-top: 1.35rem; }
.hero .lede { color: color-mix(in srgb, var(--white) 78%, var(--ink)); max-width: 54ch; }

.hero--page { padding-block: clamp(3rem, 6vw, 5rem); }
.hero--page .hero__grid { grid-template-columns: 1fr; }
.hero--page .hero__copy { max-width: 46rem; }

/* Inner-page artwork. Each --hero-navy is sampled from its own image's
   left edge so the scrim meets the artwork with no visible seam. */
.hero--work   { --hero-navy: #001530; }
.hero--pr     { --hero-navy: #041B41; }
.hero--about  { --hero-navy: #0B2342; }

.hero--page:is(.hero--work, .hero--pr, .hero--about) {
  background: var(--hero-navy);
}
.hero--page:is(.hero--work, .hero--pr, .hero--about)::before { background: none; }
.hero--page:is(.hero--work, .hero--pr, .hero--about)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    100deg,
    var(--hero-navy) 0%,
    var(--hero-navy) 38%,
    color-mix(in srgb, var(--hero-navy) 72%, transparent) 55%,
    color-mix(in srgb, var(--hero-navy) 22%, transparent) 72%,
    transparent 86%
  );
}
.hero--page:is(.hero--work, .hero--pr, .hero--about) > .wrap { position: relative; z-index: 2; }

@media (max-width: 880px) {
  .hero--page:is(.hero--work, .hero--pr, .hero--about)::after {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--hero-navy) 90%, transparent) 0%,
      color-mix(in srgb, var(--hero-navy) 86%, transparent) 60%,
      var(--hero-navy) 100%
    );
  }
}

/* ---- Home hero with the Australia artwork ----
   --hero-navy is sampled from the artwork itself so the scrim blends
   into the image with no visible seam. Swap the <picture> sources in
   index.html to change artwork; resample this value if you do. */
.hero--home {
  --hero-navy: #051630;
  background: var(--hero-navy);
  padding-block: clamp(3.25rem, 7vw, 6.5rem);
}
.hero--home::before { background: none; }        /* drop the default radial wash */
.hero--home .hero__grid { grid-template-columns: 1fr; }

/* The artwork's continent occupies the right of the frame, so on desktop the
   copy is given its own grid column and the right column is left empty to
   reserve that space. A real grid track cannot be overrun the way a
   max-width can, so text and artwork can never collide. */
.hero--home h1 {
  font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.hero--home .lede {
  font-size: clamp(.98rem, .95rem + .15vw, 1.05rem);
  line-height: 1.6;
  max-width: none;
}

@media (min-width: 900px) {
  .hero--home .hero__grid {
    grid-template-columns: minmax(0, 47%) minmax(0, 1fr);
    align-items: center;
  }
  .hero--home .hero__copy { grid-column: 1; max-width: 30rem; }
}
@media (max-width: 899px) {
  .hero--home .hero__copy { max-width: 34rem; }
}

.hero > .hero__bg {
  position: absolute; inset: 0; z-index: 0;
  display: block; margin: 0;
}
.hero > .hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
}
.hero--home::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    100deg,
    var(--hero-navy) 0%,
    var(--hero-navy) 34%,
    color-mix(in srgb, var(--hero-navy) 70%, transparent) 50%,
    color-mix(in srgb, var(--hero-navy) 18%, transparent) 68%,
    transparent 82%
  );
}
.hero--home > .wrap { position: relative; z-index: 2; }

/* Below the artwork breakpoint the map would sit behind the headline,
   so the scrim goes near-solid and the image reads as texture only. */
@media (max-width: 880px) {
  .hero > .hero__bg img { object-position: 78% 42%; }
  .hero--home::after {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--hero-navy) 88%, transparent) 0%,
      color-mix(in srgb, var(--hero-navy) 82%, transparent) 55%,
      var(--hero-navy) 100%
    );
  }
}

.crumbs { font-size: var(--step--1); color: color-mix(in srgb, var(--white) 62%, var(--ink)); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs span { margin-inline: .5rem; opacity: .5; }

/* ---------- Pay after visa strip ----------
   Solid gold was dropped: white on #B49048 measures 2.99:1, which fails
   WCAG AA even at large sizes. Cream ground with navy type is 13.5:1,
   and the gold survives where it works — as a rule and an accent. */
.payafter {
  background: var(--cream);
  color: var(--ink-2);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, var(--cream));
}
.payafter__in {
  display: grid; gap: 1.25rem 3rem; align-items: center;
  padding-block: clamp(1.9rem, 3.5vw, 2.6rem);
}
@media (min-width: 860px) { .payafter__in { grid-template-columns: 1fr auto; } }

.payafter .eyebrow { color: var(--gold-ink); margin-bottom: .55rem; }
.payafter h2 {
  color: var(--ink);
  font-size: clamp(1.28rem, 1.08rem + 0.72vw, 1.66rem);
  line-height: 1.28;
  letter-spacing: -0.005em;
  max-width: 26ch;
}
.payafter p {
  color: var(--ink-2);
  font-size: .96rem;
  line-height: 1.6;
  margin-top: .65rem;
  max-width: 56ch;
}
.payafter .btn {
  background: var(--ink); color: var(--white); border-color: var(--ink);
  white-space: nowrap;
}
.payafter .btn:hover { background: var(--blue); border-color: var(--blue); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card > * + * { margin-top: .85rem; }
.card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.card__code {
  display: inline-flex; align-items: baseline; gap: .5rem;
  align-self: flex-start;
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1.6rem; letter-spacing: .02em;
  color: var(--blue);
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--gold);
}
.card__code small { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); }
.card p { font-size: .97rem; }
.card__tag {
  align-self: flex-start;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 2px;
}
.card__tag--sponsored { background: var(--blue-10); color: var(--blue); }
.card__tag--independent { background: var(--gold-10); color: color-mix(in srgb, var(--gold) 80%, black); }
.card__link { margin-top: auto; padding-top: 1.1rem; font-weight: 600; font-size: .95rem; text-decoration: none; }
.card__link:hover { text-decoration: underline; }
.card__link::after { content: " \2192"; }

.card--feature { background: var(--wash); border-color: transparent; }
.card--feature:hover { border-color: var(--line); }

/* Checklist */
.checks > li {
  position: relative;
  padding-left: 1.85rem;
  margin-top: .7rem;
  font-size: .97rem;
}
.checks > li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold);
  transform: rotate(-45deg);
}
.section--ink .checks > li::before { border-color: var(--gold-30); }

/* ---------- Numbered process (a real sequence) ---------- */
.steps { counter-reset: step; display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } }
.steps > li {
  counter-increment: step;
  border-top: 2px solid var(--line);
  padding-top: 1.1rem;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: .8rem; letter-spacing: .12em;
  color: var(--gold-ink);
  margin-bottom: .55rem;
}
.steps h3 { font-size: 1.05rem; font-family: var(--body); font-weight: 600; margin-bottom: .4rem; }
.steps p { font-size: .93rem; }
.section--ink .steps > li { border-top-color: color-mix(in srgb, var(--white) 22%, transparent); }

/* ---------- Fee table ---------- */
.fees { width: 100%; border-collapse: collapse; font-size: .96rem; }
.fees caption { text-align: left; font-size: var(--step--1); color: var(--ink-70); padding-bottom: .9rem; }
.fees th, .fees td { text-align: left; padding: .95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.fees thead th { font-family: var(--body); font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink); background: var(--wash); }
.fees tbody th { font-weight: 600; color: var(--ink); }
.fees td:last-child { white-space: nowrap; font-weight: 600; }
.pill { display: inline-block; padding: .2rem .55rem; border-radius: 2px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pill--after { background: var(--gold-10); color: color-mix(in srgb, var(--gold) 80%, black); }
.pill--upfront { background: var(--wash); color: var(--ink-2); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--display); font-size: var(--step-1); font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--body); font-weight: 400; font-size: 1.6rem; line-height: 1;
  color: var(--gold-ink); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) { padding-bottom: 1.35rem; max-width: 78ch; }
.faq details > p + p { padding-top: .8rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: .82rem; color: var(--ink-70); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .97rem;
  padding: .75rem .9rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline-offset: 1px; }
.field textarea { min-height: 130px; resize: vertical; }
.field--row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .field--row { grid-template-columns: 1fr 1fr; } }
.form__consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; color: var(--ink-70); }
.form__consent input { width: auto; margin-top: .25rem; flex: none; }
.form__note { font-size: .84rem; color: var(--ink-70); }

/* Honeypot: off-screen for people, visible to bots that fill every field. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Submission feedback */
.form__status {
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--blue);
  background: var(--blue-05);
  font-size: .92rem;
  color: var(--ink);
}
.form__status[data-state="ok"]  { border-left-color: var(--gold); background: var(--cream); }
.form__status[data-state="err"] { border-left-color: #B3261E; background: #FDECEA; color: #6B1F17; }
.form .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------- Services scroller ----------
   Horizontal scroll-snap rail. Native scrolling does the work, so it keeps
   touch momentum on mobile and stays keyboard reachable; the arrows are a
   convenience layer and are hidden when everything already fits. */
.scroller__head {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.scroller__head .head { margin-bottom: 0; }

.scroller__nav { display: flex; gap: .6rem; }
.scroller__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.scroller__btn:hover:not(:disabled) { background: var(--ink); color: var(--white); border-color: var(--ink); }
.scroller__btn:disabled { opacity: .35; cursor: default; }
.scroller__btn svg { width: 18px; height: 18px; }

/* Full-bleed rail so cards run to the screen edge, with the gutter
   recreated as padding to keep the first card aligned to the grid. */
.scroller__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(276px, 320px);
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--rail-pad);
  padding: .5rem var(--rail-pad) 1.75rem;
  margin-inline: calc(var(--rail-pad) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.scroller__rail::-webkit-scrollbar { height: 6px; }
.scroller__rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.scroller__rail::-webkit-scrollbar-track { background: transparent; }

.svc {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.svc:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-3px); }

.svc__media { position: relative; background: var(--ink); }
.svc__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Name first, subclass second — a visitor who does not know the codes
   should still be able to read the card. */
.svc__label {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: .85rem;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(0, 20, 45, .95), 0 0 30px rgba(0, 20, 45, .6);
}
.svc__name {
  font-family: var(--body);
  font-size: 1.02rem; font-weight: 700; line-height: 1.25;
  color: var(--white);
  letter-spacing: 0;
}
.svc__sub {
  margin-top: .3rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gold-30);
}
/* Gradient so the label stays legible over any part of the artwork */
.svc__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, rgba(0, 20, 45, .92), rgba(0, 20, 45, 0));
  pointer-events: none;
}
.svc__media picture { position: relative; z-index: 0; }
.svc__label { z-index: 1; }
.svc__body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.35rem 1.5rem; }
.svc__body h3 { font-family: var(--body); font-size: 1.02rem; font-weight: 700; }
.svc__body p { font-size: .93rem; line-height: 1.6; margin-top: .55rem; }
.svc__link { margin-top: auto; padding-top: 1.15rem; font-weight: 600; font-size: .92rem; text-decoration: none; }
.svc__link:hover { text-decoration: underline; }
.svc__link::after { content: " \2192"; }

.scroller__hint { margin-top: .25rem; font-size: var(--step--1); color: var(--ink-70); }

@media (prefers-reduced-motion: reduce) {
  .scroller__rail { scroll-behavior: auto; }
  .svc:hover { transform: none; }
}

/* ---------- Framed figure ---------- */
.figure {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.figure img {
  width: 100%; height: auto;
  display: block;
  background: var(--ink);
}
.figure figcaption {
  padding: 1rem 1.25rem;
  font-size: var(--step--1);
  color: var(--ink-70);
  border-top: 1px solid var(--line);
}

/* ---------- Testimonial cards ---------- */
.tm {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tm:hover { border-color: var(--gold); box-shadow: var(--shadow); }

.tm__photo {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cream);
}
.tm__visa {
  align-self: flex-start;
  margin-top: 1.1rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--gold-10);
  padding: .3rem .6rem;
  border-radius: 2px;
}
.tm blockquote {
  margin: 1rem 0 0;
  font-size: .96rem; line-height: 1.62;
  color: var(--ink-2);
}
.tm blockquote::before { content: "\201C"; }
.tm blockquote::after  { content: "\201D"; }
.tm figcaption {
  margin-top: auto; padding-top: 1.25rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.tm figcaption strong { font-size: .98rem; color: var(--ink); }
.tm figcaption span { font-size: .85rem; color: var(--ink-70); }

/* ---------- Why choose us ---------- */
.reasons > li {
  position: relative;
  padding-left: 2.1rem;
}
.reasons > li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--gold-ink);
  border-bottom: 2.5px solid var(--gold-ink);
  transform: rotate(-45deg);
}
.reasons h3 { font-family: var(--body); font-size: 1.02rem; font-weight: 700; }
.reasons p { font-size: .93rem; margin-top: .35rem; }

/* ---------- Contact info with icons ---------- */
.info-list--icons > div {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .1rem .85rem;
  align-items: start;
}
.info-list--icons .ico {
  grid-row: span 2;
  width: 20px; height: 20px;
  margin-top: .15rem;
  color: var(--gold-ink);
  flex: none;
}
.info-list--icons dt { grid-column: 2; }
.info-list--icons dd { grid-column: 2; }

.topbar__contact .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: .35rem; }
.topbar__contact a { display: inline-flex; align-items: center; }

.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer__contact .ico { width: 16px; height: 16px; margin-top: .18rem; flex: none; color: var(--gold-30); }

/* ---------- Location panel ---------- */
.locate {
  display: grid;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
@media (min-width: 900px) { .locate { grid-template-columns: 1.25fr .75fr; } }
.locate__map { display: block; background: var(--ink); }
.locate__map img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.locate__panel { padding: clamp(1.5rem, 3vw, 2.25rem); }
.locate__panel h3 { font-family: var(--body); font-size: 1.05rem; font-weight: 700; }
.locate__panel address {
  font-style: normal; line-height: 1.7;
  margin-top: .6rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- Contact blocks ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.15fr .85fr; } }
.info-list > div { padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.info-list > div:first-child { padding-top: 0; }
.info-list dt { font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .35rem; }
.info-list dd { margin: 0; color: var(--ink); font-weight: 500; }
.info-list a { color: var(--ink); text-decoration: none; }
.info-list a:hover { color: var(--blue); text-decoration: underline; }

/* ---------- Prose ---------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.9rem; font-family: var(--body); font-weight: 700; font-size: 1.08rem; }
.prose ul { display: grid; gap: .6rem; }
.prose ul > li { position: relative; padding-left: 1.4rem; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }

.note {
  border-left: 3px solid var(--blue);
  background: var(--blue-05);
  padding: 1.15rem 1.35rem;
  font-size: .95rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.note strong { color: var(--ink); }
.note--warn { border-left-color: var(--gold); background: var(--gold-10); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--blue); color: var(--white); }
.cta-band h2 { color: var(--white); }
.cta-band p { color: color-mix(in srgb, var(--white) 85%, var(--blue)); max-width: 58ch; margin-top: .9rem; }
.cta-band .eyebrow { color: var(--gold-30); }
.cta-band__in { display: grid; gap: 1.75rem 3rem; align-items: center; padding-block: clamp(2.75rem, 5vw, 4rem); }
@media (min-width: 880px) { .cta-band__in { grid-template-columns: 1fr auto; } }
.cta-band .btn--gold:hover { background: var(--white); color: var(--blue); border-color: var(--white); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: color-mix(in srgb, var(--white) 66%, var(--ink)); font-size: .93rem; }
.footer__top { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 5vw, 4.5rem); }
@media (min-width: 780px) { .footer__top { grid-template-columns: 1.5fr .8fr 1.3fr; } }
.footer h3 { font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-30); margin-bottom: 1.1rem; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer ul { display: grid; gap: .65rem; }
.footer .brand__name { color: var(--white); }
.footer__about { max-width: 40ch; margin-top: 1.1rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  padding-block: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
  font-size: .84rem;
  color: color-mix(in srgb, var(--white) 55%, var(--ink));
}
.disclaimer {
  padding-block: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
  font-size: .82rem; line-height: 1.65;
  color: color-mix(in srgb, var(--white) 52%, var(--ink));
  max-width: 100ch;
}

/* ---------- Floating WhatsApp ---------- */
.whatsapp {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.15rem;
  background: var(--blue); color: var(--white);
  font-size: .9rem; font-weight: 600; text-decoration: none;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  transition: background-color .18s ease, transform .18s ease;
}
.whatsapp:hover { background: var(--blue-deep); transform: translateY(-2px); }
@media (max-width: 520px) { .whatsapp span { display: none; } .whatsapp { padding: .9rem; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .whatsapp:hover { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .topbar, .whatsapp, .cta-band, .payafter .btn { display: none; }
  body { color: #000; }
}