/* ==========================================================================
   VisaCare Services — stylesheet
   Palette taken from the VisaCare logo: navy bar, US + Indian flag colours.
   ========================================================================== */

:root {
  --navy:        #142551;
  --navy-deep:   #0b1734;
  --navy-soft:   #24417f;
  --rust:        #b34f2b;
  --rust-dk:     #93401f;
  --green:       #3f8c4d;
  --saffron:     #e08a3c;
  --saffron-dk:  #a2501f;
  --red:         #b32134;

  --ink:         #16203a;
  --ink-2:       #404d68;
  --ink-3:       #6c7891;
  --line:        #e2e6ef;
  --line-2:      #eef1f7;
  --bg:          #ffffff;
  --bg-tint:     #f7f8fb;
  --bg-navy-tint:#eef2fa;
  --bg-rust-tint:#fdf4ef;

  --radius:      14px;
  --radius-sm:   10px;
  --shadow-sm:   0 1px 2px rgba(20,37,81,.06), 0 2px 8px rgba(20,37,81,.05);
  --shadow-md:   0 2px 4px rgba(20,37,81,.06), 0 12px 28px rgba(20,37,81,.10);
  --maxw:        1140px;
  --font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); }
h3 { font-size: 1.18rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 22px; }
.narrow { max-width: 820px; }

section { padding-block: clamp(48px, 7vw, 86px); }
.section-tint { background: rgba(20, 37, 81, .028); }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: none;
  color: var(--saffron-dk);
  margin-bottom: .8em;
}
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- Utility bar ---------------------------------------------------- */
.utility {
  background: var(--navy-deep);
  color: #cfe0f7;
  font-size: .845rem;
}
.utility .wrap {
  display: flex;
  gap: 6px 22px;
  align-items: center;
  justify-content: space-between;
  padding-block: 7px;
  /* one line, always — it wrapped into a four-line block of navy on a phone */
  flex-wrap: nowrap;
  white-space: nowrap;
}
.utility a { color: #ffffff; text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility-group { display: flex; gap: 6px 18px; align-items: center; min-width: 0; }
/* thin vertical rules instead of bullet dots — quieter at this size.
   A hidden element is still a sibling, so whichever item is first VISIBLE at
   each width has to have its rule taken off explicitly, or the strip starts
   with a stray line. */
.utility-group > * + * {
  padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .16);
}
.utility .u-city { display: none; }
.utility .u-addr { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Header --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding-block: 12px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { height: 60px; width: auto; }
.brand-fallback { display: flex; flex-direction: column; line-height: 1.1; }
.brand-fallback .bf-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.brand-fallback .bf-name span { color: var(--green); }
.brand-fallback .bf-sub { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: none; color: var(--ink-3); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a.navlink,
.nav .dd > button {
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-2);
  padding: 9px 13px;
  border-radius: 9px;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav a.navlink:hover, .nav .dd > button:hover { background: var(--bg-navy-tint); color: var(--navy); text-decoration: none; }
.nav a.navlink[aria-current="page"] { color: var(--navy); background: var(--bg-navy-tint); }
.nav .caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); }

.dd { position: relative; }
.dd-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: none;
  width: min(1120px, 94vw);
  /* auto-fit rather than a fixed four, so a new service category widens the
     panel instead of wrapping onto a second row. */
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  align-items: start;
  gap: 6px 18px;
}
.dd-panel.open { display: grid; }
.dd-col h4 {
  font-size: .72rem; letter-spacing: .12em; text-transform: none;
  color: var(--ink-3); margin: 6px 0 6px 10px;
}
.dd-panel a {
  display: block; padding: 7px 10px; border-radius: 8px;
  font-size: .9rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.dd-panel a:hover { background: var(--bg-navy-tint); color: var(--navy); text-decoration: none; }

.menu-toggle {
  display: none; border: 1px solid var(--line); background: #fff;
  border-radius: 9px; padding: 9px 11px; cursor: pointer;
}
.menu-toggle span { display: block; width: 19px; height: 2px; background: var(--navy); border-radius: 2px; }
.menu-toggle span + span { margin-top: 4px; }

/* ---------- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .97rem; font-weight: 650;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy-soft); }
.btn-accent { background: var(--rust); color: #fff; }
.btn-accent:hover { background: var(--rust-dk); color: #fff; }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); background: var(--bg-navy-tint); }
.btn-sm { padding: 9px 16px; font-size: .88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero ----------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 420px at 88% -10%, #e6effc 0%, rgba(230,239,252,0) 62%),
    radial-gradient(760px 360px at 4% 8%, rgba(251,240,233,.9) 0%, rgba(251,240,233,0) 60%),
    transparent;
  border-bottom: 1px solid var(--line-2);
  padding-block: clamp(52px, 8vw, 96px);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero h1 .accent { color: var(--navy); }
.hero .tagline {
  font-size: 1.2rem; color: var(--ink-2); max-width: 52ch; margin-bottom: 1.5em;
}
.hero-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.hero-points li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; color: var(--ink-2); }
.check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: #e8f4ea; color: #2f7a3d;
  display: grid; place-items: center; font-size: .7rem; font-weight: 800; margin-top: 2px;
}

.hero-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-md); padding: 26px;
}
.hero-card h3 { margin-bottom: .2em; }
.hero-card .muted { font-size: .9rem; color: var(--ink-3); margin-bottom: 18px; }
.hero-card .field {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0; border-top: 1px solid var(--line-2);
}
.hero-card .field:first-of-type { border-top: 0; }
.hero-card .field .k { font-size: .74rem; letter-spacing: .1em; text-transform: none; color: var(--ink-3); }
.hero-card .field .v { font-weight: 600; font-size: .97rem; }
.hero-card .field .v a { color: var(--navy); }

/* ---------- Trust strip ---------------------------------------------------- */
.trust { background: var(--navy); color: #fff; padding-block: 26px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.trust .n { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; display: block; }
.trust .l { font-size: .84rem; color: #b9cfee; }

/* ---------- Cards ---------------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cfdcf0; text-decoration: none; }
.card h3 { margin-bottom: .3em; font-size: 1.05rem; }
.card p { font-size: .93rem; color: var(--ink-2); margin: 0; }
.card .meta {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: .82rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.card .meta b { color: var(--ink); font-weight: 650; }

.cat-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 42px 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--line-2);
}
.cat-head:first-of-type { margin-top: 0; }
.cat-head h3 { font-size: 1.28rem; margin: 0; }
.cat-head .count { font-size: .84rem; color: var(--ink-3); }

/* ---------- Steps ---------------------------------------------------------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { position: relative; padding-top: 8px; }
.step .num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem; margin-bottom: 14px;
}
.step h3 { font-size: 1.06rem; }
.step p { font-size: .94rem; color: var(--ink-2); margin: 0; }

/* ---------- Notices -------------------------------------------------------- */
.notice {
  border: 1px solid #f0dbcd; background: var(--bg-rust-tint);
  border-left: 4px solid var(--rust);
  border-radius: var(--radius-sm); padding: 18px 20px;
}
.notice h3 { font-size: 1rem; margin-bottom: .4em; }
.notice p, .notice li { font-size: .93rem; color: var(--ink-2); }
.notice ul { margin: 0; padding-left: 20px; }
.notice li + li { margin-top: 6px; }

.notice-navy { border-color: #cfdcf0; background: var(--bg-navy-tint); border-left-color: var(--navy); }

.pay-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pay-badge {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px; font-size: .86rem; font-weight: 600; color: var(--ink-2);
}

/* ---------- Page header (inner pages) -------------------------------------- */
.page-head {
  background: linear-gradient(180deg, rgba(36,65,127,.06) 0%, rgba(255,255,255,0) 100%);
  border-bottom: 1px solid var(--line-2);
  padding-block: clamp(34px, 5vw, 58px);
}
.crumbs { font-size: .86rem; color: var(--ink-3); margin-bottom: 14px; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--navy); }
.crumbs .sep { margin-inline: 8px; color: #b6c2d6; }
.page-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .25em; }
.page-head .lede { font-size: 1.05rem; }

/* ---------- Fact tiles ----------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 0 0 34px; }
.fact {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; background: #fff; box-shadow: var(--shadow-sm);
}
.fact .k { min-height: 2.2em; font-size: .72rem; letter-spacing: .11em; text-transform: none; color: var(--ink-3); margin-bottom: 5px; }
.fact .v { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.fact .n { font-size: .82rem; color: var(--ink-3); margin-top: 3px; }
.fact-accent { border-color: #f0dbcd; background: var(--bg-rust-tint); }

/* ---------- Checklist ------------------------------------------------------ */
.checklist { list-style: none; margin: 0; padding: 0; counter-reset: doc; }
.checklist > li {
  counter-increment: doc;
  position: relative;
  padding: 14px 0 14px 44px;
  border-top: 1px solid var(--line-2);
  font-size: .99rem;
}
.checklist > li:first-child { border-top: 0; }
.checklist > li::before {
  content: counter(doc);
  position: absolute; left: 0; top: 13px;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-navy-tint); color: var(--navy);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
}
.checklist ul { margin: 8px 0 0; padding-left: 20px; }
.checklist ul li { font-size: .93rem; color: var(--ink-2); margin-bottom: 4px; }
.tag-optional {
  display: inline-block; margin-left: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: none;
  color: var(--ink-3); background: var(--bg-tint);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; vertical-align: 2px;
}

.split { display: grid; grid-template-columns: 1.55fr .95fr; gap: clamp(28px, 4vw, 52px); align-items: start; }
.sticky-side { position: sticky; top: 92px; display: grid; gap: 16px; }

.side-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; background: #fff; box-shadow: var(--shadow-sm);
}
.side-card h3 { font-size: 1.02rem; }
.side-card p { font-size: .92rem; color: var(--ink-2); }
.side-card .btn { width: 100%; }

/* ---------- Tables --------------------------------------------------------- */
/* position: relative matters — it makes this the containing block for the
   visually-hidden cell labels, so they are clipped here instead of stretching
   the page out sideways on a phone. */
.table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 560px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
th { background: var(--bg-tint); font-size: .78rem; letter-spacing: .08em; text-transform: none; color: var(--ink-3); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
td a { font-weight: 600; }

/* ---------- Forms ---------------------------------------------------------- */
.form-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px); background: #fff; box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 18px; }
.field-full { grid-column: 1 / -1; }
label { display: block; font-size: .85rem; font-weight: 650; color: var(--ink-2); margin-bottom: 6px; }
label .req { color: var(--red); }
input, select, textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy-soft);
  box-shadow: 0 0 0 3px rgba(26,69,133,.13);
}
textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--ink-3); margin-top: 14px; }

/* ---------- FAQ ------------------------------------------------------------ */
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 20px; background: #fff; margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-weight: 650; font-size: 1rem; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--navy); font-size: 1.3rem; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { font-size: .94rem; color: var(--ink-2); padding-bottom: 16px; margin: 0; }

/* ---------- CTA band ------------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-soft) 100%);
  color: #fff; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #c3d6f2; max-width: 56ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 24px; }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ---------- Footer --------------------------------------------------------- */
.site-footer { background: #0a1d38; color: #a9c0e0; padding-block: 52px 0; font-size: .93rem; }
.site-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: none; margin-bottom: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
.site-footer a { color: #cfe0f7; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-brand p { font-size: .92rem; color: #9db4d6; max-width: 34ch; }
.footer-brand .fb-logo { font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.footer-brand .fb-logo span { color: #6fc07f; }
.footer-bottom {
  margin-top: 42px; border-top: 1px solid rgba(255,255,255,.11);
  padding-block: 20px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .85rem; color: #8aa4c9;
}

/* ---------- Responsive ----------------------------------------------------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 840px) {
  .menu-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    flex-direction: column; align-items: stretch;
    padding: 12px 18px 20px; gap: 2px;
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  .nav.open { display: flex; }
  .site-header .wrap { position: relative; flex-wrap: wrap; }
  .nav a.navlink, .nav .dd > button { width: 100%; justify-content: flex-start; padding: 12px 10px; }
  .dd-panel {
    position: static; transform: none; width: auto;
    box-shadow: none; border: 0; border-top: 1px solid var(--line-2);
    border-radius: 0; padding: 6px 0 12px 10px; grid-template-columns: 1fr;
  }
  .nav .header-cta { width: 100%; margin-top: 12px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .facts { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .utility { font-size: .8rem; }
  .utility .wrap { gap: 0 14px; }
  .utility-group { gap: 0 14px; }
  .utility-group > * + * { padding-left: 14px; }
  .brand img { height: 48px; }
}

@media print {
  .site-header, .utility, .cta-band, .site-footer, .sticky-side, .menu-toggle { display: none !important; }
  body { font-size: 12pt; }
  .split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Motion & visual effects
   Content is fully visible without JavaScript — the reveal styles only apply
   once site.js has added .js-motion to <html>. Everything is disabled under
   prefers-reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Scroll reveals ---------------------------------------------------- */
  .js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
  }
  .js-motion [data-reveal="left"]  { transform: translateX(-20px); }
  .js-motion [data-reveal="right"] { transform: translateX(20px); }
  .js-motion [data-reveal="scale"] { transform: translateY(14px) scale(.985); }

  .js-motion [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity   .62s cubic-bezier(.22,.61,.36,1) var(--d, 0ms),
      transform .62s cubic-bezier(.22,.61,.36,1) var(--d, 0ms);
  }

  /* ---- Hero load sequence ------------------------------------------------ */
  .js-motion .hero [data-lift] {
    opacity: 1;
    transform: translateY(16px);
    animation: lift .72s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: var(--d, 0ms);
  }
  .js-motion .hero .hero-card[data-lift] {
    transform: translateY(22px) scale(.99);
    animation-name: liftCard;
    animation-duration: .85s;
  }
  @keyframes lift     { to { opacity: 1; transform: none; } }
  @keyframes liftCard { to { opacity: 1; transform: none; } }

  /* Soft light drifting behind the hero */
  .hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 130%;
    background:
      radial-gradient(520px 300px at 20% 30%, rgba(179,79,43,.055), transparent 70%),
      radial-gradient(620px 340px at 78% 20%, rgba(36,65,127,.075), transparent 72%);
    animation: drift 26s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
  }
  @keyframes drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, 1.5%, 0) scale(1.05); }
    100% { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  }

  /* ---- Counters ---------------------------------------------------------- */
  .trust .n { transition: opacity .3s ease; }

  /* ---- Checklist rows ---------------------------------------------------- */
  .checklist > li { transition: background .18s ease, padding-left .18s ease; }
  .checklist > li:hover { background: var(--bg-tint); padding-left: 50px; }
  .checklist > li::before { transition: background .18s ease, color .18s ease, transform .18s ease; }
  .checklist > li:hover::before { background: var(--navy); color: #fff; transform: scale(1.06); }
}

/* ---- Hover & focus polish (kept for reduced-motion users, minus movement) - */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }

.card { position: relative; overflow: hidden; }
a.card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--rust), var(--saffron));
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
a.card:hover::after, a.card:focus-visible::after { transform: scaleX(1); }

.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255,255,255,.16);
  transform: translateX(-101%);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(0); }
.btn > * { position: relative; z-index: 1; }
.btn-ghost::after { background: rgba(20,37,81,.05); }
.btn:active { transform: translateY(0) scale(.985); }

.side-card, .fact, .form-card, .notice { transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.side-card:hover, .fact:hover { box-shadow: var(--shadow-md); border-color: #cfdcf0; }

.dd-panel a { transition: background .16s ease, color .16s ease, transform .16s ease; }
.dd-panel a:hover { transform: translateX(3px); }

.nav a.navlink { position: relative; }
.nav a.navlink::after {
  content: "";
  position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px;
  background: var(--rust); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.nav a.navlink:hover::after { transform: scaleX(1); }

.site-header { transition: box-shadow .3s ease, background .3s ease; }
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(20,37,81,.07); }

.faq details { transition: border-color .2s ease, box-shadow .2s ease; }
.faq details[open] { border-color: #cfdcf0; box-shadow: var(--shadow-sm); }
.faq summary::after { transition: transform .25s ease, color .2s ease; }
.faq details[open] summary::after { color: var(--rust); }
.faq summary:hover { color: var(--navy); }

.step .num { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }
.step:hover .num { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20,37,81,.22); }

.pay-badge { transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.pay-badge:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-1px); }

tbody tr { transition: background .16s ease; }
tbody tr:hover { background: var(--bg-tint); }

.site-footer a { transition: color .18s ease, padding-left .18s ease; }
.site-footer li a:hover { padding-left: 4px; }

.brand img { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.brand:hover img { transform: scale(1.03); }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--navy-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Scroll progress bar under the header */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--navy), var(--rust), var(--saffron));
  z-index: 90; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .progress { display: none; }
  .hero::before { display: none; }
}

/* ==========================================================================
   Travel page — world map
   ========================================================================== */
:root {
  --map-ocean-1: #0c1f3f;
  --map-ocean-2: #060f1f;
  --map-land:    #1d3763;
  --map-coast:   #5f93da;
  --map-grid:    #24406c;
  --map-route:   #ffb457;
  --map-glow:    #ffd9a0;
  --map-city:    #ffd9a0;
  --map-label:   #cfe2ff;
}

.mapwrap {
  position: relative;
  border: 1px solid #1d365e;
  border-radius: var(--radius);
  background: var(--map-ocean-2);
  box-shadow: 0 2px 6px rgba(6, 15, 31, .3), 0 18px 40px rgba(6, 15, 31, .28);
  overflow: hidden;
  padding: 0;
}
.mapwrap canvas {
  display: block;
  width: 100%;
  aspect-ratio: 180 / 76;
  height: auto;
}
.map-cap {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
  padding: 10px 8px 2px;
  font-size: .82rem; color: var(--ink-3);
}
.map-key { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.map-key span { display: inline-flex; align-items: center; gap: 6px; }
.map-key i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.map-key .k-hub  { background: var(--map-city); }
.map-key .k-dest { background: var(--map-city); box-shadow: 0 0 6px var(--map-glow); }
.map-key .k-arc  { width: 18px; height: 2px; border-radius: 2px; background: var(--map-route); box-shadow: 0 0 6px var(--map-glow); }

/* Text fallback — visible only when the canvas can't be used */
.map-fallback { font-size: .9rem; color: var(--ink-2); margin: 14px 0 0; }
.js-canvas .map-fallback { display: none; }

.travel-card { display: flex; flex-direction: column; height: 100%; }
.travel-card .ic {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--bg-navy-tint); color: var(--navy);
  display: grid; place-items: center; margin-bottom: 14px;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.travel-card .ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .travel-card .ic, .travel-card:hover .ic { background: var(--navy); color: #fff; transform: translateY(-2px); }
.travel-card ul { margin: 12px 0 0; padding-left: 18px; font-size: .9rem; color: var(--ink-2); }
.travel-card li { margin-bottom: 4px; }

/* On phones the map gets its own horizontal scroller so it stays legible
   instead of shrinking to a sliver. */
.mapscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.map-hint { display: none; }

@media (max-width: 700px) {
  .mapwrap { min-width: 640px; }
  .map-cap { font-size: .78rem; }
  .map-hint {
    display: block; margin: 8px 2px 0;
    font-size: .8rem; color: var(--ink-3);
  }
}

/* ---- Home: services overview (names only, no fees) ------------------------ */
.svc-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 34px;
}
.svc-group h3 {
  font-size: .8rem;
  letter-spacing: .11em;
  text-transform: none;
  color: var(--ink-3);
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li { border-bottom: 1px solid var(--line-2); }
.svc-list li:last-child { border-bottom: 0; }
.svc-list a {
  display: block;
  padding: 9px 2px;
  font-size: .96rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}
.svc-list a:hover { color: var(--navy); padding-left: 6px; text-decoration: none; }

@media (max-width: 960px) { .svc-groups { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .svc-groups { grid-template-columns: 1fr; gap: 22px; } }


/* ---- Ambient background motifs ------------------------------------------- */
.ambient {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) { .ambient { display: none; } }

/* ---- Aircraft details card ------------------------------------------------ */
.map-card {
  position: absolute;
  z-index: 4;
  min-width: 168px;
  max-width: 230px;
  padding: 11px 13px 10px;
  border-radius: 11px;
  background: rgba(7, 17, 34, .93);
  border: 1px solid rgba(255, 217, 160, .42);
  box-shadow: 0 10px 26px rgba(3, 9, 20, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #e6f0ff;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.map-card .mc-top { display: flex; flex-direction: column; gap: 2px; margin-bottom: 9px; }
.map-card .mc-top strong { font-size: 1rem; letter-spacing: -.01em; color: #fff; }
.map-card .mc-top span { font-size: .78rem; color: #ffd9a0; }
.map-card .mc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 0;
  padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.map-card .mc-stats div { min-width: 0; }
.map-card dt {
  font-size: .62rem; letter-spacing: .09em; text-transform: none;
  color: #8fa9cc; margin-bottom: 2px;
}
.map-card dd { margin: 0; font-size: .84rem; font-weight: 650; white-space: nowrap; }

@media (max-width: 700px) {
  .map-card { min-width: 150px; padding: 9px 11px; }
  .map-card .mc-top strong { font-size: .92rem; }
  .map-card dd { font-size: .78rem; }
}
.map-card .mc-note {
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8rem;
  line-height: 1.45;
  color: #b9cfee;
}

/* ==========================================================================
   Site-wide hover & focus
   Every interactive or card-like surface answers the pointer. Movement is
   small and uses transform/colour only, so nothing reflows, and the
   reduced-motion block at the top of this file collapses the transitions.
   ========================================================================== */

/* Cards that are not links still respond — travel services, booking slots,
   contact details, forms panels. */
.card:not(a),
.travel-card,
.form-card {
  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .22s ease,
              border-color .22s ease;
}
.card:not(a):hover,
.travel-card:hover,
.form-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #cfdcf0;
}

/* Notices lift a touch and their accent bar brightens */
.notice { border-left-width: 4px; }
.notice:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-left-color: var(--saffron); }
.notice-navy:hover { border-left-color: var(--navy-soft); }

/* Trust strip */
.trust-grid > div {
  border-radius: 10px;
  padding: 6px 4px;
  transition: background .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.trust-grid > div:hover { background: rgba(255,255,255,.07); transform: translateY(-2px); }
.trust .n { transition: color .22s ease; }
.trust-grid > div:hover .n { color: var(--map-glow, #ffd9a0); }

/* Utility bar links get a quiet pill */
.utility a {
  border-radius: 5px;
  padding: 1px 4px;
  margin-inline: -4px;
  transition: background .18s ease, color .18s ease;
}
.utility a:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* Breadcrumbs */
.crumbs a { transition: color .18s ease; }

/* Service list on the home page */
.svc-list li { transition: background .18s ease; border-radius: 6px; }
.svc-list li:hover { background: var(--bg-navy-tint); }

/* Form fields answer the pointer before they are focused */
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: #c2cfe4;
  background: #fdfeff;
}
label { transition: color .18s ease; }
.form-grid > div:hover > label,
.side-card form > div > div:hover > label { color: var(--navy); }

/* Hero contact rows */
.hero-card .field { border-radius: 8px; transition: background .18s ease; }
.hero-card .field:hover { background: var(--bg-navy-tint); }

/* Payment badges, category heads, footer */
.cat-head { transition: border-color .22s ease; }
.cat-head:hover { border-bottom-color: #cfdcf0; }
.footer-brand .fb-logo { transition: opacity .2s ease; }
.footer-brand:hover .fb-logo { opacity: .88; }

/* The map panel itself */
.mapwrap { transition: box-shadow .3s ease, border-color .3s ease; }
.mapwrap:hover { border-color: #2b4f86; box-shadow: 0 2px 6px rgba(6,15,31,.3), 0 22px 52px rgba(6,15,31,.4); }

/* Legend chips */
.map-key span { transition: color .18s ease; }
.map-key span:hover { color: var(--ink); }

/* Keyboard users get the same treatment as hover, not less */
a.card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step:focus-within .num { transform: translateY(-3px); }
.faq summary:focus-visible { color: var(--navy); }

/* Touch devices: no hover states, so nothing sticks after a tap */
@media (hover: none) {
  .card:not(a):hover, .travel-card:hover, .form-card:hover,
  .notice:hover, .trust-grid > div:hover, .mapwrap:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

/* ---- Travel quote band ---------------------------------------------------- */
.quote-band { padding-block: clamp(38px, 5vw, 62px); }
.tq { margin: 0; text-align: center; }
.tq blockquote {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
  transition: opacity .35s ease;
}
.tq blockquote::before { content: "\201C"; color: var(--rust); margin-right: .05em; }
.tq blockquote::after  { content: "\201D"; color: var(--rust); margin-left: .05em; }
.tq figcaption {
  font-size: .86rem; color: var(--ink-3); letter-spacing: .04em;
  transition: opacity .35s ease;
}
.tq figcaption::before { content: "\2014\00a0"; }
.tq.is-fading blockquote, .tq.is-fading figcaption { opacity: 0; }

.tq-actions { display: flex; justify-content: center; margin-top: 20px; }
.tq-next {
  font: inherit; font-size: .84rem; font-weight: 650;
  color: var(--ink-3); background: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 17px; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.tq-next:hover { color: var(--navy); border-color: var(--navy); background: var(--bg-navy-tint); }

/* ---- When to book --------------------------------------------------------- */
.booknote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 18px;
}
.booknote {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--rust);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-top-color .22s ease;
}
.booknote:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-top-color: var(--saffron); }
.booknote h3 { font-size: 1rem; margin-bottom: .4em; }
.booknote p { font-size: .9rem; color: var(--ink-2); margin: 0; }

@media (hover: none) { .booknote:hover { transform: none; box-shadow: var(--shadow-sm); } }

/* ---- Travel service cards with poster art --------------------------------- */
.travel-card.has-media { padding: 0; overflow: hidden; }
.tc-media { position: relative; aspect-ratio: 1200 / 780; overflow: hidden; background: var(--navy); }
.tc-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.travel-card.has-media:hover .tc-media img { transform: scale(1.045); }
.tc-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(180deg, rgba(11,23,52,0) 0%, rgba(11,23,52,.55) 100%);
}
.tc-media .ic {
  position: absolute; left: 16px; bottom: 14px; z-index: 2; margin: 0;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.92); color: var(--navy);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.travel-card.has-media:hover .tc-media .ic { background: #fff; color: var(--navy); transform: none; }
.tc-body { padding: 20px 22px 22px; }
.tc-body h3 { margin-bottom: .3em; }
.tc-body p { font-size: .93rem; color: var(--ink-2); margin: 0; }
.tc-body ul { margin: 12px 0 0; padding-left: 18px; font-size: .9rem; color: var(--ink-2); }
.tc-body li { margin-bottom: 4px; }

/* ---- Distance tool -------------------------------------------------------- */
.dist-tool {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 3vw, 28px);
}
.dist-picks {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: end;
}
.dist-swap-wrap { padding-bottom: 4px; }
.dist-swap {
  font: inherit; font-size: 1.05rem; line-height: 1;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  cursor: pointer;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), color .18s ease, border-color .18s ease, background .18s ease;
}
.dist-swap:hover { color: var(--navy); border-color: var(--navy); background: var(--bg-navy-tint); transform: rotate(180deg); }

.dist-out {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.dist-out div { text-align: center; }
.dist-out dt {
  font-size: .68rem; letter-spacing: .1em; text-transform: none;
  color: var(--ink-3); margin-bottom: 6px;
}
.dist-out dd {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 700; letter-spacing: -.02em; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.dist-out dd small { font-size: .58em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.dist-note { font-size: .82rem; color: var(--ink-3); margin: 18px 0 0; }

@media (max-width: 620px) {
  .dist-picks { grid-template-columns: 1fr; }
  .dist-swap-wrap { display: flex; justify-content: center; padding: 2px 0; }
  .dist-swap:hover { transform: rotate(90deg); }
  .dist-out { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Travel enquiry: per-service field sets ------------------------------- */
.svc-fields {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 24px 0 0;
  padding: 20px 0 0;
}
.svc-fields:first-of-type { border-top: 0; margin-top: 18px; padding-top: 0; }
.svc-fields > legend {
  padding: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: none;
  color: var(--saffron-dk);
  margin-bottom: 14px;
}
.svc-fields[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .svc-fields.is-new { animation: svcIn .34s cubic-bezier(.22,.61,.36,1); }
  @keyframes svcIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

.label-like {
  display: block; font-size: .85rem; font-weight: 650;
  color: var(--ink-2); margin-bottom: 8px;
}
.opt { font-weight: 500; color: var(--ink-3); font-size: .82em; }

.checkrow { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checkrow label {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; font-size: .92rem; font-weight: 500; color: var(--ink-2);
  cursor: pointer;
}
.checkrow input[type="checkbox"] {
  width: 17px; height: 17px; margin: 0; accent-color: var(--navy); cursor: pointer;
}
.checkrow label:hover { color: var(--navy); }

/* a quote link on each service card */
.tc-body .tc-quote {
  display: inline-block; margin-top: 14px;
  font-size: .88rem; font-weight: 650; color: var(--rust);
  transition: color .18s ease, transform .18s ease;
}
.tc-body .tc-quote:hover { color: var(--rust-dk); transform: translateX(3px); text-decoration: none; }

/* Anchor jumps must clear the sticky header */
#travelForm, .form-card, [id] { scroll-margin-top: 110px; }
@media (max-width: 840px) { #travelForm, .form-card, [id] { scroll-margin-top: 96px; } }

/* ---- VisaCare Form page --------------------------------------------------- */
.formlist { margin: 0; padding-left: 20px; font-size: .93rem; color: var(--ink-2); }
.formlist li { margin-bottom: 9px; }
.formlist strong { color: var(--ink); font-weight: 650; }

.form-preview {
  display: block; position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s ease, border-color .24s ease;
}
.form-preview img { width: 100%; height: auto; display: block; }
.form-preview:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cfdcf0; text-decoration: none; }
.form-preview .fp-tag {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(20,37,81,.92); color: #fff;
  font-size: .8rem; font-weight: 650;
  padding: 7px 16px; border-radius: 999px;
  opacity: 0; transition: opacity .24s ease, transform .24s ease;
}
.form-preview:hover .fp-tag { opacity: 1; transform: translateX(-50%) translateY(-2px); }
@media (hover: none) {
  .form-preview .fp-tag { opacity: 1; }
  .form-preview:hover { transform: none; }
}

/* ---- Cruise season grid --------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.season { }
.season-grid { min-width: 620px; width: 100%; border-collapse: separate; border-spacing: 2px; }
.season-grid thead th {
  background: none; text-transform: none; letter-spacing: 0;
  font-size: .78rem; color: var(--ink-3); padding: 4px 0 8px; text-align: center;
}
.season-grid thead th:first-child { text-align: left; padding-left: 4px; }
.season-grid thead abbr { text-decoration: none; border: 0; }
.season-grid tbody th {
  text-align: left; padding: 8px 14px 8px 4px; border: 0; background: none;
  text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink);
  font-size: .9rem; width: 1%; white-space: nowrap;
}
.sr-region { display: block; }
.sr-note { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-3); white-space: normal; max-width: 30ch; }
.season-grid td { padding: 0; border: 0; height: 30px; border-radius: 4px; }

/* one hue, light to dark, plus a neutral for "not sailing"; the shoulder step
   also carries a hatch so the three levels are not colour alone */
.season-grid td.s0 { background: #edf0f6; }
.season-grid td.s1 {
  background: #dfb078;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.55) 0 3px, rgba(255,255,255,0) 3px 7px);
}
.season-grid td.s2 { background: #b8651b; }

.season-key {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 16px; font-size: .84rem; color: var(--ink-2);
}
.season-key span { display: inline-flex; align-items: center; gap: 8px; }
.season-key i { width: 18px; height: 14px; border-radius: 3px; display: inline-block; }
.season-key .k2 { background: #b8651b; }
.season-key .k1 {
  background: #dfb078;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.55) 0 3px, rgba(255,255,255,0) 3px 7px);
}
.season-key .k0 { background: #edf0f6; border: 1px solid var(--line); }

/* ---- Cabins --------------------------------------------------------------- */
.cabin {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.cabin:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cfdcf0; }
.cabin h3 { font-size: 1.02rem; margin-bottom: .25em; }
.cabin .cabin-what { font-size: .84rem; color: var(--rust); font-weight: 650; margin-bottom: .6em; }
.cabin p { font-size: .9rem; color: var(--ink-2); margin: 0; }

/* ---- In the fare / extra -------------------------------------------------- */
ul.tick, ul.cross { list-style: none; margin: 4px 0 0; padding: 0; font-size: .93rem; color: var(--ink-2); }
ul.tick li, ul.cross li { position: relative; padding-left: 28px; margin-bottom: 9px; }
ul.tick li::before, ul.cross li::before {
  position: absolute; left: 0; top: 0;
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: .68rem; font-weight: 800;
}
ul.tick li::before  { content: "\2713"; background: #e8f4ea; color: #2f7a3d; }
ul.cross li::before { content: "+";     background: var(--bg-rust-tint); color: var(--rust); }

/* ---- Package ideas -------------------------------------------------------- */
.pack {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--navy);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-left-color .22s ease;
}
.pack:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-left-color: var(--rust); }
.pack-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pack-top h3 { font-size: 1.05rem; margin: 0; }
.pack-nights {
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: none;
  color: var(--rust); white-space: nowrap;
}
.pack-where { font-size: .88rem; color: var(--ink-3); margin: 6px 0 10px; }
.pack p { font-size: .92rem; color: var(--ink-2); margin: 0; }

@media (hover: none) { .cabin:hover, .pack:hover { transform: none; box-shadow: var(--shadow-sm); } }
@media (max-width: 900px) { .sr-note { display: none; } }

/* ---- Destination explorer ------------------------------------------------- */
.explorer {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm);
  padding: clamp(20px, 3vw, 28px);
}
.ex-controls { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: end; }
.ppgroup { display: flex; flex-wrap: wrap; gap: 8px; }
.pp {
  font: inherit; font-size: .86rem; font-weight: 600;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.pp:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-navy-tint); }
.pp.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pp.is-on:hover { transform: translateY(-1px); }

.ex-out { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-2); }

.ex-visa {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-tint);
  transition: background .25s ease, border-color .25s ease;
}
.ex-visa .vtag {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.ex-visa .vtag i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ex-visa p { margin: 3px 0 0; font-size: .93rem; color: var(--ink-2); }

.ex-visa.ok    { background: #f0f8f2; border-color: #cfe7d6; }
.ex-visa.ok    .vtag { background: #e0f0e5; color: #26663a; }
.ex-visa.warn  { background: #fffaf0; border-color: #f0e0bd; }
.ex-visa.warn  .vtag { background: #fbedd3; color: #8a6112; }
.ex-visa.act   { background: var(--bg-rust-tint); border-color: #f0dbcd; }
.ex-visa.act   .vtag { background: #f7e0d4; color: var(--rust-dk); }
/* .ask, not .check — .check is the green tick in the hero list, and a bare
   state name here inherits its 20px circle and collapses the whole box. */
.ex-visa.ask { background: var(--bg-navy-tint); border-color: #cfdcf0; }
.ex-visa.ask .vtag { background: #dee8f8; color: var(--navy); }

.ex-facts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; margin: 20px 0 0; }
.ex-facts dt {
  font-size: .68rem; letter-spacing: .1em; text-transform: none;
  color: var(--ink-3); margin-bottom: 5px;
}
.ex-facts dd { margin: 0; font-size: .95rem; color: var(--ink); }
.ex-note { font-size: .82rem; color: var(--ink-3); margin: 20px 0 0; }

@media (max-width: 720px) {
  .ex-controls { grid-template-columns: 1fr; }
  .ex-facts { grid-template-columns: 1fr; }
  .ex-visa { flex-direction: column; gap: 10px; }
}

/* ---- Process timeline ----------------------------------------------------- */
.process {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  position: relative;
}
.process::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 21px; height: 2px;
  background: linear-gradient(90deg, var(--navy), var(--rust));
  opacity: .25;
}
.pstep { position: relative; padding: 0 12px; text-align: center; }
.pstep-dot {
  width: 44px; height: 44px; margin: 0 auto 16px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--navy); color: var(--navy);
  display: grid; place-items: center;
  font-weight: 800; font-size: 1rem;
  position: relative; z-index: 1;
  transition: background .22s ease, color .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
}
.pstep:hover .pstep-dot {
  background: var(--navy); color: #fff;
  transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20,37,81,.22);
}
.pstep h3 { font-size: 1rem; margin-bottom: .35em; }
.pstep p { font-size: .9rem; color: var(--ink-2); margin: 0; }

@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; gap: 26px; }
  .process::before { left: 21px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--navy), var(--rust)); }
  .pstep { display: grid; grid-template-columns: 44px 1fr; gap: 16px; text-align: left; padding: 0; }
  .pstep-dot { margin: 0; }
}

/* ------------------------------------------------------- service page art
   Each service page carries the artwork for its category. Three separate
   motions, all slow and all cheap: the frame breathes, the picture inside it
   drifts a little wider than the frame so the crop keeps changing, and a soft
   sheen crosses it now and then. None of it runs under reduced motion, and
   none of it is load-bearing — the picture is decorative, so the page reads
   exactly the same with the animation off.
   -------------------------------------------------------------------------- */
.ph-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px; align-items: center;
}

.ph-art {
  position: relative; margin: 0;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 30px rgba(11, 23, 52, .28);
  aspect-ratio: 1200 / 780; max-width: 100%;
  animation: ph-float 9s ease-in-out infinite;
}
.ph-art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 58% 46%;
  animation: ph-drift 26s ease-in-out infinite alternate;
}
.ph-art::after {                      /* a hairline so it reads as a framed plate */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); pointer-events: none;
}
.ph-sheen {
  position: absolute; inset: -20% -40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  transform: translateX(-70%);
  animation: ph-sheen 7.5s ease-in-out infinite;
}

@keyframes ph-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ph-drift { from { transform: scale(1.04) translate3d(0, 0, 0); }
                      to   { transform: scale(1.13) translate3d(-1.5%, -1.2%, 0); } }
@keyframes ph-sheen { 0% { transform: translateX(-70%); } 55%, 100% { transform: translateX(70%); } }

.ph-art:hover img { animation-play-state: paused; }

@media (max-width: 860px) {
  .ph-grid { grid-template-columns: 1fr; gap: 26px; }
  .ph-art { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-art, .ph-art img, .ph-sheen { animation: none; }
  .ph-art img { transform: none; }
  .ph-sheen { display: none; }
}

/* The "we can book that for you" note on visa pages — rust rather than navy,
   because it is an offer rather than a caution. */
.notice-travel { border-color: #f0d8c9; background: var(--bg-rust-tint); border-left-color: var(--rust); }
.notice-travel h3 { color: var(--rust-dk); }
.notice-travel:hover { border-left-color: var(--saffron-dk); }

/* Fills the gap beside the last service group instead of leaving three columns
   of white space. Spans the remainder of the row at each breakpoint. */
.svc-fill {
  grid-column: span 3;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px; align-content: start;
  align-self: start;          /* hug its own content, not the row height */
  background: var(--bg-navy-tint); border: 1px solid #dbe4f4;
  border-radius: var(--radius); padding: 26px 28px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.svc-fill:hover { border-color: #c3d2ec; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.svc-fill h3 { font-size: 1rem; color: var(--navy); margin-bottom: .45em; }
.svc-fill p { font-size: .92rem; color: var(--ink-2); margin: 0 0 14px; }
.svc-fill .btn { margin-top: 2px; }

@media (max-width: 960px) { .svc-fill { grid-column: span 1; grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 560px) { .svc-fill { grid-column: span 1; } }

/* "Call an hour ahead" — said once in the top strip on every page, and again in
   the hero card where someone is already reading the address. */
.utility-note { color: var(--saffron); font-weight: 600; }
.callnote {
  margin: 10px 0 18px; padding: 12px 14px;
  background: var(--bg-rust-tint); border-left: 3px solid var(--rust);
  border-radius: var(--radius-sm);
  font-size: .88rem; line-height: 1.55; color: var(--ink-2);
}
.callnote strong { color: var(--rust-dk); }

/* The strip is one line at every width. Things drop off it as the screen
   narrows, in order of how little they are needed up there — the footer, the
   hero card and the contact page carry all of it anyway.
   The full address goes first, replaced by just the town; then the second
   phone number and the email; the "call ahead" note is the last to go. */
@media (max-width: 1020px) {
  .utility .u-addr { display: none; }
  .utility .u-city { display: inline; border-left: 0; padding-left: 0; }
}
@media (max-width: 880px) { .utility .u-min { display: none; } }
@media (max-width: 430px) {
  .utility .u-city { display: none; }
  .utility .u-hours { border-left: 0; padding-left: 0; }
}
/* A hidden element stays hidden even when something else sets a display value
   on it — the travel form relies on this when it disables the fields that do
   not apply to the chosen service. */
[hidden] { display: none !important; }

/* Netlify's honeypot: a field only a bot will fill in. Hidden from people and
   from screen readers, which is the one case where that is the right call. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------- the long online form
   The VisaCare Form, asked in a browser. Numbered sections rather than one wall
   of inputs, so it is obvious how much is left.
   -------------------------------------------------------------------------- */
.bigform { display: grid; gap: 22px; }

.fs {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px 26px; margin: 0; background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fs:focus-within { border-color: #c6d3ea; box-shadow: var(--shadow-md); }
.fs > legend {
  font-size: 1.02rem; font-weight: 800; color: var(--navy);
  padding: 0 10px; margin-left: -10px;
}
.fs-hint { font-size: .88rem; color: var(--ink-3); line-height: 1.55; margin: 8px 0 18px; }
.fs > .fgrid + .fgrid, .fs > div + div, .fs > .tick + .fgrid { margin-top: 14px; }

.fgrid { display: grid; gap: 14px; }
.fgrid.f2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid.f3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid.f21 { grid-template-columns: 2fr 1fr; }

.ticks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px; margin-bottom: 16px;
}
.tick {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; margin: 0;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.tick:hover { border-color: var(--navy-soft); background: var(--bg-navy-tint); color: var(--navy); }
.tick input { width: 17px; height: 17px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--rust); }
.tick:has(input:checked) {
  border-color: var(--rust); background: var(--bg-rust-tint); color: var(--rust-dk); font-weight: 650;
}
.tick-wide { grid-column: 1 / -1; margin: 4px 0 16px; }

.bigform input[type="file"] {
  padding: 10px 12px; background: var(--bg-tint); font-size: .88rem;
}
.bigform-end { text-align: center; padding: 6px 0 4px; }
.bigform-end .btn { font-size: 1.02rem; padding: .95em 2em; }
.bigform-end .form-note { max-width: 48ch; margin-inline: auto; }

@media (max-width: 720px) {
  .fgrid.f2, .fgrid.f3, .fgrid.f21 { grid-template-columns: 1fr; }
  .ticks { grid-template-columns: 1fr; }
  .fs { padding: 20px 18px 22px; }
}

/* Google's address lookup box on the VisaCare Form. The element is Google's
   own custom element, so it is styled from the outside to sit with the rest of
   the form rather than looking bolted on. */
.addr-find { margin-bottom: 4px; }
.addr-slot gmp-place-autocomplete {
  width: 100%;
  --gmp-mat-color-surface: var(--bg);
  --gmp-mat-color-on-surface: var(--ink);
  --gmp-mat-color-outline: var(--line);
  --gmp-mat-color-primary: var(--navy-soft);
}
.addr-slot { margin-bottom: 2px; }
.bigform input.is-filled {
  border-color: var(--green);
  background: rgba(63, 140, 77, .06);
  transition: background .5s ease, border-color .5s ease;
}

/* ------------------------------------------------------------- install bar
   Offered once, low in the corner, and gone for good if dismissed. It sits
   above the fixed footer area on a phone and clears the home indicator.
   -------------------------------------------------------------------------- */
.pwa {
  position: fixed; z-index: 70;
  left: 16px; right: 16px; bottom: 16px;
  margin-inline: auto; max-width: 30rem;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 12px 34px rgba(11, 23, 52, .22);
  animation: pwa-in .3s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes pwa-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pwa img { border-radius: 9px; flex: 0 0 auto; border: 1px solid var(--line-2); }
.pwa-txt { min-width: 0; line-height: 1.35; }
.pwa-txt strong { display: block; font-size: .92rem; color: var(--ink); }
.pwa-txt span { display: block; font-size: .8rem; color: var(--ink-3); }
.pwa .btn { flex: 0 0 auto; margin-left: auto; }
.pwa-x {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
}
.pwa-x:hover { background: var(--bg-tint); color: var(--ink); }
.pwa-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

@media (max-width: 420px) {
  .pwa { gap: 10px; padding-inline: 12px; }
  .pwa-txt span { font-size: .76rem; }
}
@media print { .pwa { display: none; } }
@media (prefers-reduced-motion: reduce) { .pwa { animation: none; } }

/* Keep the full services menu within the header and viewport. */
.site-header .wrap { position: relative; }
.brand { flex-shrink: 0; }
.brand img { height: 88px; width: auto; max-width: 100%; }
.dd { position: static; }
.dd-panel { left: 0; right: 0; top: 100%; transform: none; width: 100%; box-sizing: border-box; grid-template-columns: repeat(5,minmax(0,1fr)); max-height: calc(100dvh - 160px); overflow-y: auto; }
.dd-col { min-width: 0; }
.dd-panel a { overflow-wrap: anywhere; }
.dd-col h4, .eyebrow { text-transform: none; }
@media (max-width: 1440px) {
  .menu-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); flex-direction: column; align-items: stretch; padding: 12px 18px 20px; gap: 2px; max-height: calc(100dvh - 150px); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav a.navlink, .nav .dd > button { width: 100%; justify-content: flex-start; padding: 12px 10px; }
  .dd-panel { position: static; width: 100%; transform: none; box-shadow: none; border: 0; padding: 10px 0; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; overflow: visible; }
  .nav .header-cta { width: 100%; margin-top: 12px; }
}
@media (max-width: 600px) {
  .brand img { height: 70px; }
  .dd-panel { grid-template-columns: 1fr; }
}

/* Larger brand and compact navigation aligned on one desktop row. */
.site-header .wrap { max-width: 1440px; width: calc(100% - 32px); gap: 12px; flex-wrap: nowrap; padding-block: 8px; }
.brand img { height: 112px; width: auto; }
.nav { gap: 2px; flex-wrap: nowrap; }
.nav a.navlink, .nav .dd > button { white-space: nowrap; padding: 9px 8px; font-size: .88rem; }
.nav .header-cta { white-space: nowrap; padding-inline: 12px; }
.hero-card .field .k { text-transform: none; }
.travel-service-list { max-width: 560px; }
@media (min-width: 1441px) { .site-header .wrap { justify-content: flex-start; } }
@media (max-width: 1440px) {
  .site-header .wrap { justify-content: space-between; }
  .brand img { height: 100px; }
  .nav a.navlink, .nav .dd > button { padding: 12px 10px; }
}
@media (max-width: 600px) { .brand img { height: 84px; } }

/* Six service categories share one balanced grid. */
.svc-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.travel-service-list { max-width: none; }
@media (max-width: 960px) { .svc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc-groups { grid-template-columns: 1fr; } }
@media (min-width: 1441px) {
  .site-header .wrap { justify-content: space-between; gap: 18px; }
  .site-header .nav { flex: 1; min-width: 0; justify-content: space-between; }
}

/* Footer Visa word uses the brand orange. */
.footer-brand .fb-logo { color: var(--saffron); }

/* Application tracking options. */
.tracking-grid .card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.tracking-grid .card h2 { font-size: 1.35rem; margin: 0; }
.tracking-grid .card p { flex: 1; margin: 0; }
.tracking-grid .btn { white-space: normal; }

/* Google review slideshow */
.review-summary{font-weight:700;color:#14385f;font-size:1.15rem}.review-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:30px 0 22px}.google-review{background:white;border:1px solid #dbe4ef;border-radius:20px;padding:26px;box-shadow:0 8px 28px #17395e0b;min-width:0;overflow-wrap:anywhere}.review-name{display:block;font-size:1rem}.review-stars{color:#b87800;font-size:1.3rem;margin:10px 0 4px;letter-spacing:2px}.review-date,.review-source,.review-status{color:#586b80;font-size:.85rem}.review-comment{white-space:pre-line;margin:16px 0;line-height:1.7}.review-collapsed{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.review-more{border:0;background:none;color:#174d81;text-decoration:underline;cursor:pointer;padding:0;margin-bottom:16px;font:inherit}.review-source{display:block;margin-top:12px}.review-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.review-controls .btn:disabled{opacity:.45;cursor:default}.review-controls button:focus-visible,.review-more:focus-visible{outline:3px solid #d89a27;outline-offset:4px}@media(max-width:999px){.review-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:649px){.review-cards{grid-template-columns:1fr}.google-review{padding:22px}.review-controls .btn{font-size:.8rem;padding:10px 14px}}

/* Essential homepage content stays visible if animations are blocked. */
.site-header { visibility: visible; opacity: 1; }
.js-motion .hero [data-lift] { opacity: 1; }

/* Show desktop navigation at laptop widths, with room for every link. */
@media (min-width: 1000px) {
  .site-header .wrap { flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
  .site-header .brand { margin-right: auto; }
  .site-header .menu-toggle { display: none; }
  .site-header .nav,
  .site-header .nav.open {
    display: flex; position: static; flex-direction: row; align-items: center;
    justify-content: center; flex: 1 1 920px; flex-wrap: wrap;
    width: auto; max-height: none; overflow: visible;
    background: transparent; border: 0; box-shadow: none; padding: 4px 0; gap: 4px;
  }
  .site-header .nav a.navlink,
  .site-header .nav .dd > button { width: auto; padding: 9px 10px; font-size: .88rem; }
  .site-header .nav .header-cta { width: auto; margin-top: 0; }
  .site-header .dd-panel {
    position: absolute; left: 0; right: 0; top: 100%; width: 100%;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px; box-shadow: var(--shadow-md);
    grid-template-columns: repeat(5,minmax(0,1fr));
    max-height: calc(100dvh - 190px); overflow-y: auto;
  }
}
@media (min-width: 1000px) and (max-width: 1250px) {
  .site-header .brand img { height: 86px; }
  .site-header .nav { flex-basis: 100%; }
}

/* Successful form and appointment confirmation */
.submission-thanks{width:min(520px,calc(100vw - 32px));border:1px solid #dce5dc;border-top:5px solid #b94c24;border-radius:18px;padding:32px;color:#142551;background:#fff;box-shadow:0 24px 80px #14255133;text-align:center;max-height:85vh;overflow:auto}
.submission-thanks::backdrop{background:#14255199}
.submission-thanks h2{margin:16px 0;color:#25633a}
.submission-thanks p{line-height:1.6;margin:12px 0}
.submission-thanks .thanks-mark{margin:auto;width:52px;height:52px;border-radius:50%;background:#eaf3eb;color:#25633a;font-size:30px;font-weight:700;display:grid;place-items:center}
.submission-thanks .thanks-reference{background:#faf5ef;padding:12px;border-radius:8px;overflow-wrap:anywhere;font-size:.9rem}
.submission-thanks button{margin-top:12px}

.submission-thanks .thanks-message{text-transform:none}


/* Compact original header with booking inline */
@media(min-width:1200px){
.site-header .wrap{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:14px;max-width:1560px;width:calc(100% - 32px);padding:12px 0}
.site-header .brand{flex:0 0 auto;margin:0}
.site-header .brand img{height:86px;width:auto}
.site-header .nav,.site-header .nav.open{display:flex;position:static;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:2px;flex:1;min-width:0;width:auto;padding:0;max-height:none;overflow:visible;background:transparent;border:0;box-shadow:none}
.site-header .nav a.navlink{font-size:.78rem;padding:9px 7px;white-space:nowrap;width:auto;line-height:1.4}
.site-header .nav a.navlink[href$="services.html"]{white-space:normal;max-width:235px;text-align:center;justify-content:center}
.site-header .nav .header-cta{flex:0 0 auto;white-space:nowrap;font-size:.78rem;padding:11px 14px;margin:0 0 0 5px;width:auto}
.site-header .menu-toggle{display:none}
}
@media(min-width:1000px) and (max-width:1199px){
.site-header .wrap{flex-wrap:nowrap;justify-content:space-between}
.site-header .menu-toggle{display:block}
.site-header .nav{display:none}
.site-header .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;width:100%;flex-direction:column;align-items:stretch;background:white;padding:16px;box-shadow:var(--shadow-md);max-height:calc(100dvh - 145px);overflow:auto}
.site-header .nav a.navlink{width:100%;padding:12px}
.site-header .nav .header-cta{width:100%;margin-top:10px}
}

/* Full-width header content with evenly distributed desktop navigation */
.site-header{width:100%;background:#fff}
.site-header .wrap{max-width:none;width:calc(100% - 48px)}
@media(min-width:1200px){.site-header .wrap{max-width:none;width:calc(100% - 48px);gap:24px}.site-header .nav,.site-header .nav.open{justify-content:space-between;gap:8px}.site-header .nav a.navlink{font-size:clamp(.78rem,.8vw,.94rem)}.site-header .nav .header-cta{margin-left:8px}}
@media(max-width:600px){.site-header .wrap{width:calc(100% - 28px)}}

/* Larger single-line desktop header options */
@media(min-width:1440px){
.site-header .wrap{gap:20px}
.site-header .nav,.site-header .nav.open{flex-wrap:nowrap;gap:4px}
.site-header .nav a.navlink{font-size:.94rem;padding:10px 8px;white-space:nowrap;flex-shrink:0}
.site-header .nav a.navlink[href$="services.html"]{white-space:nowrap;max-width:none}
.site-header .nav .header-cta{font-size:.9rem;padding:12px 15px;white-space:nowrap}
}
@media(min-width:1200px) and (max-width:1439px){
.site-header .wrap{gap:12px;width:calc(100% - 28px)}
.site-header .brand img{height:70px}
.site-header .nav,.site-header .nav.open{gap:2px;flex-wrap:nowrap}
.site-header .nav a.navlink{font-size:.83rem;padding:10px 5px;white-space:nowrap}
.site-header .nav a.navlink[href$="services.html"]{white-space:nowrap;max-width:none}
.site-header .nav .header-cta{font-size:.8rem;padding:11px 10px;margin-left:4px}
}

/* Larger logo with a deliberate two-line service label */
.site-header .nav a.navlink[href$="services.html"]{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;white-space:nowrap;max-width:none;text-align:center}
.header-price-line{display:block;white-space:nowrap}
@media(min-width:1440px){.site-header .brand img{height:112px;width:auto}.site-header .nav a.navlink{white-space:nowrap}.site-header .nav a.navlink[href$="services.html"]{font-size:.9rem}.site-header .wrap{gap:20px}}
@media(min-width:1200px) and (max-width:1439px){.site-header .brand img{height:92px;width:auto}.site-header .nav a.navlink[href$="services.html"]{font-size:.82rem}.site-header .wrap{gap:12px}}
@media(max-width:1199px){.site-header .brand img{height:100px;width:auto}.site-header .nav a.navlink[href$="services.html"]{align-items:flex-start;text-align:left}}
@media(max-width:600px){.site-header .brand img{height:90px;width:auto}}

.travel-service-options{border:1px solid #dce5dc;border-radius:14px;padding:22px;margin-bottom:24px;background:#f8faf8}.travel-service-options legend{font-weight:700;padding:0 8px;color:var(--navy)}.travel-service-options .checkrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.travel-service-options .checkrow label{display:flex;align-items:center;gap:10px;padding:14px;background:white;border:1px solid #e2e6ef;border-radius:10px;cursor:pointer}.travel-service-options input[type=checkbox]{width:18px;height:18px;accent-color:#287044}.travel-service-options label:has(input:checked){border-color:#287044;background:#edf5ef}

.visa-price-option{display:inline-block;white-space:nowrap}

.whatsapp-chat{position:fixed;right:20px;bottom:22px;z-index:50;background:#237545;color:white;border-radius:28px;padding:13px 20px;font-weight:600;box-shadow:0 5px 18px #14255125}.whatsapp-chat:hover{background:#195d35;color:white;text-decoration:none}.booking-is-open .whatsapp-chat{display:none}@media(max-width:600px){.whatsapp-chat{bottom:80px;right:14px;font-size:.85rem;padding:11px 16px}}@media print{.whatsapp-chat{display:none}}

.passage-visual{max-width:520px;margin:0 0 23px}.passage-visual svg{display:block;width:100%;height:auto;max-height:120px}.passage-visual span{display:block;font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:5px}.passage-visual i{font-style:normal;color:#ed8825;margin:0 10px}.journey-line{animation:journey-flow 16s linear infinite}@keyframes journey-flow{to{stroke-dashoffset:-130}}@media(prefers-reduced-motion:reduce){.journey-line{animation:none}}

/* Keep the homepage visual directly below the header. */
.home-hero{padding-top:18px;padding-bottom:clamp(32px,5vw,64px)}
.home-hero .hero-grid{align-items:start}
.home-hero .passage-visual{margin-top:0}
@media(max-width:640px){.home-hero{padding-top:12px}}

.appointment-panel{max-width:850px;margin:0 auto 48px;scroll-margin-top:150px}.appointment-panel .side-card{padding:clamp(24px,4vw,42px);border-top:4px solid var(--rust);box-shadow:0 14px 40px rgba(25,65,44,.08)}.appointment-panel h2{margin-bottom:10px}.appointment-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.appointment-fields>fieldset,.appointment-fields>div:has(textarea),.appointment-fields>button,.appointment-fields>.form-note{grid-column:1/-1}.booking-page-layout>div:not(.appointment-panel){max-width:1000px;margin:auto}@media(max-width:600px){.appointment-fields{grid-template-columns:1fr}.appointment-panel{scroll-margin-top:110px}}

.doc-card-content{display:flex;flex-direction:column;gap:14px;padding:24px}.doc-grid>a.doc-card{text-decoration:none;color:inherit;display:block}.doc-grid>a.doc-card:hover{border-color:var(--rust);transform:translateY(-3px)}#documents{scroll-margin-top:150px}

.passage-premium{max-width:560px;margin-bottom:20px}.passage-premium svg{max-height:none;aspect-ratio:28/9}.journey-plane{animation:plane-drift 6s ease-in-out infinite}.journey-passport{animation:passport-float 7s ease-in-out infinite}.journey-route-green{animation-direction:reverse}.journey-beacon{animation:beacon-glow 3s ease-in-out infinite}@keyframes plane-drift{50%{transform:translate(5px,-4px)}}@keyframes passport-float{50%{transform:translateY(-4px)}}@keyframes beacon-glow{50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.journey-plane,.journey-passport,.journey-beacon{animation:none}}

.passage-luxe{border-radius:24px;background:#173f33;overflow:hidden;border:1px solid #2f6953;box-shadow:0 14px 35px rgba(20,63,44,.16);transition:box-shadow .3s,transform .3s}.passage-luxe:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(20,63,44,.22)}.passage-luxe svg{display:block;border-radius:24px 24px 0 0}.passage-luxe .journey-caption{position:relative;padding:16px 22px 18px;border-top:1px solid #ffffff18;background:linear-gradient(110deg,#174733,#14372d)}.passage-luxe .journey-caption .journey-kicker{color:#fff3db;font-family:Georgia,serif;font-size:1.15rem;font-weight:500;letter-spacing:.02em;text-transform:none;margin:0}.passage-luxe .journey-caption .journey-services{font-size:.68rem;letter-spacing:.14em;color:#c1d8c8;margin-top:7px}.passage-luxe .journey-services i{color:#edb36d;margin:0 7px}.passage-luxe .journey-caption .journey-seal{position:absolute;right:22px;top:15px;font-size:2rem;line-height:1;color:#edb36d;margin:0}.luxe-satellite{transform-origin:273px 91px;animation:luxe-orbit 28s linear infinite}@keyframes luxe-orbit{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.luxe-satellite{animation:none}.passage-luxe:hover{transform:none}}

/* Flag layer floats independently while the Visa Care lettering stays still. */
.site-header .brand.flag-brand{position:relative;display:block;perspective:650px;overflow:visible}
.site-header .brand.flag-brand img.flag-logo-base{animation:none;transform:none;clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,68.2% 20.5%,68.2% 18%,75% 15%,79% 13.6%,81.3% 15%,85% 19%,90% 14.5%,93% 16%,94.4% 21.4%,93.9% 24.5%,96.8% 32%,94.4% 34.5%,88.5% 41.8%,84.7% 37.3%,81.5% 34%,74.5% 41%,70.4% 38%,68.2% 20.5%)}
.site-header .brand.flag-brand img.flag-logo-air{position:absolute;inset:0;height:100%;width:100%;object-fit:contain;pointer-events:none;clip-path:polygon(68.2% 20.5%,68.2% 18%,75% 15%,79% 13.6%,81.3% 15%,85% 19%,90% 14.5%,93% 16%,94.4% 21.4%,93.9% 24.5%,96.8% 32%,94.4% 34.5%,88.5% 41.8%,84.7% 37.3%,81.5% 34%,74.5% 41%,70.4% 38%,68.2% 20.5%);transform-origin:69% 24%;animation:visacare-flag-breeze 4s ease-in-out infinite;filter:drop-shadow(0 2px 2px #193b3020)}
@keyframes visacare-flag-breeze{0%,100%{transform:translateY(0) rotateY(-3deg) skewY(0)}25%{transform:translateY(-1px) rotateY(5deg) skewY(-.7deg)}50%{transform:translateY(-2px) rotateY(-5deg) skewY(.6deg)}75%{transform:translateY(-1px) rotateY(3deg) skewY(-.4deg)}}
@media(prefers-reduced-motion:reduce){.site-header .brand.flag-brand img.flag-logo-air{animation:none;transform:none}}

/* Soft daylight palette for the homepage journey illustration. */
.passage-luxe{background:#f3faf6;border-color:#d7e9df;box-shadow:0 10px 30px rgba(64,113,88,.08)}
.passage-luxe:hover{box-shadow:0 16px 36px rgba(64,113,88,.12)}
.passage-luxe .journey-caption{background:linear-gradient(110deg,#fff8ee,#edf8f1);border-top:1px solid #dcebe1}
.passage-luxe .journey-caption .journey-kicker{color:#315b49}
.passage-luxe .journey-caption .journey-services{color:#587566}
.passage-luxe .journey-services i,.passage-luxe .journey-caption .journey-seal{color:#ce8a43}

/* Sky and pearl journey theme. */
.passage-luxe{background:#f2f8ff;border-color:#d8e5f3;box-shadow:0 10px 30px rgba(75,111,151,.09)}
.passage-luxe:hover{box-shadow:0 16px 36px rgba(75,111,151,.14)}
.passage-luxe .journey-caption{background:linear-gradient(110deg,#f6fbff,#efedfc);border-top:1px solid #dce6f3}
.passage-luxe .journey-caption .journey-kicker{color:#365979}
.passage-luxe .journey-caption .journey-services{color:#607890}
.passage-luxe .journey-services i,.passage-luxe .journey-caption .journey-seal{color:#d79853}

/* Compact chat button and aqua/champagne homepage visual. */
.whatsapp-chat{padding:8px 12px;font-size:.75rem;line-height:1.4;border-radius:20px;right:16px;bottom:18px;box-shadow:0 3px 10px #14255120}
@media(max-width:600px){.whatsapp-chat{padding:7px 10px;font-size:.72rem;right:12px;bottom:80px}}
.passage-luxe{background:#f2faf6;border-color:#dce9df;box-shadow:0 10px 30px rgba(62,116,99,.08)}
.passage-luxe:hover{box-shadow:0 16px 36px rgba(62,116,99,.12)}
.passage-luxe .journey-caption{background:linear-gradient(110deg,#fff9ed,#edf9f3);border-top:1px solid #e0e9da}
.passage-luxe .journey-caption .journey-kicker{color:#3c655b}
.passage-luxe .journey-caption .journey-services{color:#607d71}
.passage-luxe .journey-services i,.passage-luxe .journey-caption .journey-seal{color:#b9924d}

.journey-document-theme .journey-plane{transform-origin:center;animation:document-plane-drift 6s ease-in-out infinite}
@keyframes document-plane-drift{0%,100%{transform:translate(302px,4px)}50%{transform:translate(309px,0)}}
@media(prefers-reduced-motion:reduce){.journey-document-theme .journey-plane{animation:none;transform:translate(302px,4px)}}

.journey-document-theme .journey-caption .journey-services{margin-top:0}

/* International destination scene, replacing the previous document panel. */
.destination-scene{max-width:560px;margin:0 0 20px;border:1px solid #eadfca;border-radius:22px;overflow:hidden;background:#fff8ef;box-shadow:0 10px 28px rgba(93,116,91,.08)}
.destination-scene svg{display:block;width:100%;height:auto;max-height:none;aspect-ratio:28/11}
.destination-clouds{animation:destination-cloud-drift 12s ease-in-out infinite}
.destination-suitcase{animation:destination-case-float 6s ease-in-out infinite}
@keyframes destination-cloud-drift{50%{transform:translateX(12px)}}
@keyframes destination-case-float{50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.destination-clouds,.destination-suitcase{animation:none}}

/* Slightly smaller WhatsApp chat button. */
.whatsapp-chat{padding:6px 10px;font-size:.7rem;border-radius:18px}
@media(max-width:600px){.whatsapp-chat{padding:6px 9px;font-size:.68rem}}

/* Larger chat button with the WhatsApp mark. */
.whatsapp-chat{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;font-size:.9rem;line-height:1.4;border-radius:26px}
.whatsapp-chat .whatsapp-icon{display:block;width:24px;height:24px;flex:none}
@media(max-width:600px){.whatsapp-chat{padding:10px 15px;font-size:.85rem}.whatsapp-chat .whatsapp-icon{width:22px;height:22px}}

.immigration-news-section{background:#f1f8f3}.immigration-news-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:36px;align-items:start}.immigration-news-card{background:#fff;border:1px solid #dce9df;border-radius:18px;padding:24px;margin-bottom:16px}.immigration-news-card h3{margin:8px 0 12px}.news-source{font-size:.78rem;color:#607567;margin-top:12px}.immigration-news-card a{font-weight:600}@media(max-width:700px){.immigration-news-layout{grid-template-columns:1fr;gap:20px}}

.immigration-live-frame{display:block;width:100%;height:510px;border:0;border-radius:18px;background:#f1f8f3}
@media(max-width:700px){.immigration-live-frame{height:560px}}

/* Appointment calendar and time dropdowns. */
.booking-picker{position:relative;min-width:0}.picker-source{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;padding:0!important;border:0!important;overflow:hidden}
.picker-trigger{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:12px 14px;border:1px solid #cbded2;border-radius:12px;background:linear-gradient(120deg,#fff,#f5faf7);color:#496856;font:inherit;text-align:left;cursor:pointer;box-shadow:0 2px 5px #2c604008}
.picker-trigger svg{width:21px;height:21px;flex:none;color:#458367}.picker-trigger>span:first-of-type{flex:1}.picker-chevron{font-size:18px;color:#62836f}.picker-trigger:hover,.picker-trigger:focus-visible{border-color:#5b9677;outline:3px solid #a5d5b633}.picker-trigger.has-selection{color:#214b35;font-weight:600}.picker-trigger:disabled{background:#f3f5f3;color:#86958b;cursor:default;opacity:.8}
.picker-panel{position:absolute;top:calc(100% + 8px);left:0;width:320px;max-width:calc(100vw - 48px);padding:16px;background:#fff;border:1px solid #d6e6dc;border-radius:18px;box-shadow:0 16px 44px #1b493128;z-index:80}.picker-panel[hidden]{display:none}.calendar-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:16px}.calendar-toolbar button{border:0;border-radius:9px;background:#edf6f0;color:#35694a;font-size:24px;width:32px;height:34px;cursor:pointer}.calendar-toolbar select,.calendar-toolbar input{padding:6px;border:1px solid #e0ebe4;border-radius:8px;margin:0;height:34px;font-size:13px;min-width:0}.calendar-toolbar select{flex:1}.calendar-toolbar input{width:70px}.calendar-toolbar button:disabled{opacity:.3;cursor:default}.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-weekdays{font-size:11px;text-align:center;color:#789181;margin-bottom:7px}.calendar-days button{height:34px;border:0;border-radius:9px;background:transparent;color:#345541;font:inherit;font-size:13px;cursor:pointer}.calendar-days button:hover{background:#eaf5ed}.calendar-days button:disabled{color:#c3cbc5;cursor:default;background:transparent}.calendar-days button[aria-selected=true],.time-options button[aria-selected=true]{background:#347552;color:#fff}.calendar-days button.calendar-today{box-shadow:inset 0 0 0 1px #b7d7c2}.picker-panel button:focus-visible{outline:2px solid #d69047;outline-offset:1px}.picker-panel-title{font-size:12px;font-weight:600;letter-spacing:.04em;color:#55725f;margin:0 0 12px}.time-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:240px;overflow-y:auto;padding:2px}.time-options button{border:1px solid #dce9e1;background:#f6faf7;color:#365b43;padding:10px 6px;border-radius:10px;font:inherit;font-size:13px;cursor:pointer}.time-options button:hover{border-color:#78a58a;background:#edf6ef}.booking-picker:has([name=preferred_time]) .picker-panel{left:auto;right:0}
@media(max-width:480px){.appointment-preference>div{grid-template-columns:1fr!important}.picker-panel{width:100%;max-width:none;box-sizing:border-box}}

.news-source{display:none!important}

/* Use native browser controls for reliable date and available-time selection. */
.appointment-preference input[type=date],.appointment-preference select{display:block;width:100%;min-height:52px;box-sizing:border-box;border:1px solid #bfd7c8;border-radius:12px;padding:12px 14px;background-color:#f6faf7;color:#294f38;font:inherit;cursor:pointer;box-shadow:0 2px 6px #294f3808;color-scheme:light}
.appointment-preference input[type=date]:focus,.appointment-preference select:focus{outline:3px solid #c7e3d2;border-color:#528467}
.appointment-preference select:disabled{background-color:#f1f4f1;color:#77867b;cursor:default}
.appointment-preference input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;padding:4px;opacity:.8}
.appointment-preference select option{background:#fff;color:#294f38;padding:10px}

/* Wider, larger live newsletter. */
.immigration-news-layout{grid-template-columns:1fr;gap:22px}
.immigration-news-layout>div:first-child{max-width:850px}
.immigration-live-frame{height:550px}
@media(max-width:700px){.immigration-live-frame{height:680px}}

/* Compact newsletter with one title and a clean article card. */
.immigration-news-section{background:#f5f8f5;padding:42px 0}
.immigration-news-layout{display:block;max-width:1000px}
.news-section-heading{margin-bottom:22px}
.news-section-heading .eyebrow{font-size:.7rem;margin-bottom:9px}
.news-section-heading h2{font-size:clamp(25px,3vw,34px);line-height:1.2;margin:0 0 12px}
.news-section-heading p{font-size:15px;line-height:1.6;margin:0;color:#647367}
.immigration-live-frame{height:340px;border-radius:16px;background:#f1f8f3}
@media(max-width:700px){.immigration-news-section{padding:30px 0}.immigration-live-frame{height:430px}}

/* Polished native appointment controls. */
.appointment-preference legend{font-weight:600;color:#274832;margin-bottom:14px}
.appointment-preference label{font-size:.8rem;font-weight:600;color:#57715f;margin-bottom:7px;letter-spacing:.02em}
.appointment-preference input[type=date],.appointment-preference select{min-height:58px;border:1px solid #c9decf;border-radius:15px;background-color:#f8fbf8;color:#264f37;font-size:16px;font-weight:500;box-shadow:0 4px 12px rgba(36,82,53,.05);transition:border-color .2s,box-shadow .2s,background-color .2s;accent-color:#347552}
.appointment-preference input[type=date]{padding:14px 16px;background-image:linear-gradient(115deg,#fff,#f0f7f1)}
.appointment-preference select{appearance:none;-webkit-appearance:none;padding:14px 42px 14px 45px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23598469' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23598469' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:15px center,right 15px center;background-size:22px,16px}
.appointment-preference input[type=date]:hover,.appointment-preference select:not(:disabled):hover{border-color:#80ad8d;background-color:#f0f7f1;box-shadow:0 5px 16px rgba(36,82,53,.08)}
.appointment-preference input[type=date]:focus,.appointment-preference select:focus{border-color:#4e8a60;outline:3px solid #d6e9da;outline-offset:2px}
.appointment-preference select:disabled{color:#89988d;background-color:#f1f4f1;box-shadow:none}
.appointment-preference input[type=date]::-webkit-calendar-picker-indicator{padding:7px;background-color:#e6f0e8;border-radius:9px;opacity:1}
.appointment-preference select option{font-size:16px;color:#2b5036;background:#fff}
@media(prefers-reduced-motion:reduce){.appointment-preference input[type=date],.appointment-preference select{transition:none}}

/* Custom date calendar; live time dropdown stays native. */
.appointment-date-button{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:14px 16px;border:1px solid #c9decf;border-radius:15px;background:linear-gradient(115deg,#fff,#f0f7f1);font:inherit;font-size:16px;color:#264f37;cursor:pointer;text-align:left;box-shadow:0 4px 12px #2452350d}
.appointment-date-button svg{width:22px;height:22px;color:#598469}.appointment-date-button span:first-of-type{flex:1}.appointment-date-button:hover{border-color:#80ad8d}.appointment-date-button:focus-visible{outline:3px solid #d6e9da;outline-offset:2px}.appointment-date-button:disabled{opacity:.6;cursor:default}
.appointment-calendar{width:380px;max-width:calc(100vw - 32px);padding:26px;box-sizing:border-box;border:1px solid #d8e5dc;border-radius:22px;background:#fff;color:#254734;box-shadow:0 24px 80px #153b3033}
.appointment-calendar::backdrop{background:#162e294a;backdrop-filter:blur(3px)}.appointment-calendar-heading{display:flex;justify-content:space-between;align-items:start;margin-bottom:22px}.appointment-calendar-heading span{font-size:10px;letter-spacing:.12em;color:#a36336;font-weight:600}.appointment-calendar-heading h3{font-size:23px;margin:6px 0 0;line-height:1.2}.calendar-dismiss{border:0;background:#f0f5f1;color:#688374;border-radius:50%;width:30px;height:30px;font-size:23px;cursor:pointer}
.appointment-calendar-toolbar{display:flex;align-items:center;gap:7px;margin-bottom:20px}.appointment-calendar-toolbar button{height:36px;width:32px;border:0;border-radius:9px;background:#edf5ef;color:#397552;font-size:25px;cursor:pointer}.appointment-calendar-toolbar button:disabled{opacity:.3;cursor:default}.appointment-calendar-toolbar select,.appointment-calendar-toolbar input{min-width:0;height:36px;padding:6px;border:1px solid #dfe9e2;border-radius:8px;font:inherit;font-size:13px;color:#355a42;background:#fff}.appointment-calendar-toolbar select{flex:1}.appointment-calendar-toolbar input{width:66px;box-sizing:border-box}
.appointment-calendar-week,.appointment-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.appointment-calendar-week{text-align:center;font-size:10px;font-weight:600;color:#819687;margin-bottom:10px}.appointment-calendar-grid button{height:39px;padding:0;border:0;border-radius:10px;background:#f7faf7;color:#31533e;font:inherit;font-size:14px;cursor:pointer}.appointment-calendar-grid button:hover{background:#e1efe5}.appointment-calendar-grid button:disabled{color:#bdc7c0;background:transparent;cursor:default}.appointment-calendar-grid button.is-today{box-shadow:inset 0 0 0 1px #b4d3bf}.appointment-calendar-grid button[aria-pressed=true]{background:#347552;color:#fff;box-shadow:0 4px 10px #34755225}.appointment-calendar button:focus-visible{outline:2px solid #cc945e;outline-offset:2px}.appointment-calendar-note{font-size:11px;color:#819284;text-align:center;margin:20px 0 0;line-height:1.5}
@media(max-width:420px){.appointment-calendar{padding:20px}.appointment-calendar-grid button{height:36px}}

#immigration-news-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.immigration-news-card{margin:0;border-top:3px solid #c78143;padding:25px;border-radius:16px;box-shadow:0 5px 18px #2d543509}
.immigration-news-card h3{font-size:23px;line-height:1.3;margin:12px 0}.immigration-news-card p{font-size:16px;line-height:1.65;color:#5c6d60}.news-date{font-size:11px;color:#a45728;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:700px){#immigration-news-list{grid-template-columns:1fr}}