:root {
    --ink: #111827;
    --muted: #5b6573;
    --line: #dce5e4;
    --paper: #ffffff;
    --wash: #f6f8f7;
    --night: #151f2a;
    --teal: #0f766e;
    --teal-dark: #0b625b;
    --mint: #dff4ef;
    --shadow: 0 24px 60px rgba(17, 24, 39, .12);
    --radius: 8px;
    --page: min(1600px, calc(100vw - 32px));
}

* {
    box-sizing: border-box;
}

html {
    min-width: 0;
    overflow-x: clip;
    color: var(--ink);
    background: var(--wash);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
}

body {
    min-width: 0;
    margin: 0;
    /* `clip`, not `hidden`: hidden turns the body into a scroll container,
       which silently disables position:sticky on the header inside it. */
    overflow-x: clip;
}

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

a {
    color: inherit;
    text-decoration: none;
}

/* The header and the mobile menu stick together. Only the header used to be
   sticky, so opening the burger while scrolled down unfolded the menu at its
   place in the document — up at the top of the page, out of sight. */
.landing-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
}

.landing-header {
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    width: 100%;
    min-height: 68px;
    padding: 0 max(18px, calc((100vw - 1600px) / 2));
    border-bottom: 1px solid rgba(220, 229, 228, .9);
    background: rgba(246, 248, 247, .92);
    backdrop-filter: blur(14px);
}

.landing-brand {
    display: inline-flex;
    align-items: baseline;
    color: var(--ink);
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
}

.landing-brand strong {
    color: #0075ff;
}

.landing-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    color: #273342;
    font-size: 15px;
    font-weight: 650;
}

.landing-nav a,
.landing-header__cta {
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.landing-nav a:hover {
    color: var(--teal);
}

.landing-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: var(--radius);
    color: #fff;
    background: var(--teal);
    font-weight: 750;
}

.landing-header__cta:hover {
    background: var(--teal-dark);
    transform: translateY(-1px);
}

.home-page {
    width: var(--page);
    margin: 0 auto;
}

.home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items: center;
    gap: 34px;
    width: 100%;
    min-width: 0;
    min-height: 560px;
    margin-top: 28px;
    padding: 46px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--night);
    box-shadow: var(--shadow);
    isolation: isolate;
}

/* ---------- Photo backdrop ---------- */
.home-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.home-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}

.home-hero__slide.is-active { opacity: 1; }

.home-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Keeps white text readable whatever the photo does, and stops the hero
   turning into a postcard with unreadable copy over a bright sky. */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(6, 22, 28, .80) 0%, rgba(6, 22, 28, .55) 34%, rgba(6, 22, 28, .18) 62%, rgba(6, 22, 28, .10) 100%),
        linear-gradient(to top, rgba(6, 22, 28, .40), rgba(6, 22, 28, 0) 45%);
}

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

/* The backdrop rotates, so a later photo may be bright exactly where the
   headline sits. A soft shadow keeps the text legible on any of them. */
.home-hero__content h1,
.home-hero__content .home-lead {
    text-shadow: 0 2px 18px rgba(6, 22, 28, .55);
}

.home-hero__credit {
    position: absolute;
    right: 14px;
    bottom: 10px;
    z-index: 1;
    font-size: 11px;
    color: rgba(255, 255, 255, .55);
}

.home-hero__credit a { color: inherit; text-decoration: underline; }
.home-hero__credit a:hover { color: rgba(255, 255, 255, .85); }

.home-hero__content {
    min-width: 0;
    color: #fff;
}

.home-hero__visual {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--teal);
}

.home-hero__visual img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}

.home-hero-card {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    padding: 18px;
    border-radius: var(--radius);
    color: #fff;
    background: rgba(21, 31, 42, .9);
    backdrop-filter: blur(8px);
}

.home-hero-card strong,
.home-hero-card span {
    display: block;
}

.home-hero-card span {
    margin-top: 5px;
    color: rgba(255, 255, 255, .76);
}

.home-eyebrow,
.home-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #0f5f5a;
    background: var(--mint);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.home-hero .home-eyebrow {
    color: var(--mint);
    background: rgba(223, 244, 239, .16);
}

.home-hero h1 {
    max-width: 720px;
    margin: 22px 0 18px;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.02;
    font-weight: 850;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.home-lead {
    max-width: 660px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 20px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 800;
    line-height: 1.2;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.home-btn:hover {
    transform: translateY(-1px);
}

.home-btn--primary {
    color: #fff;
    background: var(--teal);
    box-shadow: 0 16px 34px rgba(15, 118, 110, .26);
}

.home-btn--primary:hover {
    background: var(--teal-dark);
}

.home-btn--outline {
    color: #fff;
    border-color: rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .1);
}

.home-btn--outline:hover {
    background: rgba(255, 255, 255, .18);
}

.home-btn--wide {
    width: 100%;
}

.home-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.home-hero__meta span,
.home-hero__meta a {
    max-width: 100%;
    padding: 8px 11px;
    overflow-wrap: anywhere;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius);
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .08);
    font-size: 14px;
}

/* The office pill is a link — it has to look like one among the plain ones. */
.home-hero__meta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    border-color: rgba(255, 255, 255, .38);
    transition: background .15s ease, border-color .15s ease;
}
.home-hero__meta a::before { font-size: 13px; }
.home-hero__meta .meta-wa::before  { content: "💬"; }
.home-hero__meta .meta-tg::before  { content: "✈️"; }
.home-hero__meta .meta-map::before { content: "📍"; }
.home-hero__meta a:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); }

.home-trustbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--line);
}

.home-trustbar > div {
    padding: 22px 24px;
    background: var(--paper);
}

.home-trustbar strong {
    display: block;
    color: var(--teal);
    font-size: 30px;
    line-height: 1;
}

.home-trustbar span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}

.home-section {
    padding: 64px 0;
}

.home-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 30px;
}

.home-section__header h2,
.home-panel h2,
.home-review h2 {
    margin: 14px 0 0;
    color: var(--ink);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: 0;
}

.home-section__header p {
    max-width: 430px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
}

.home-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-audience-card,
.home-visa-card,
.home-chat-preview,
.home-process__item,
.home-review,
.home-empty,
.home-faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.home-audience-card {
    min-height: 210px;
    padding: 24px;
}

.home-audience-card h3,
.home-visa-card h3,
.home-faq-item h3,
.home-process__item h3 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0;
}

.home-audience-card p,
.home-visa-card p,
.home-panel p,
.home-review p,
.home-process__item p,
.home-faq-item p {
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.home-visa-grid,
.home-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-visa-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.home-visa-card__image {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #edf2f1;
}

.home-visa-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .24s ease;
}

.home-visa-card:hover .home-visa-card__image img {
    transform: scale(1.04);
}

.home-visa-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.home-visa-card__body > span {
    margin-bottom: 9px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.home-visa-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 18px;
}

.home-visa-card__footer strong {
    color: var(--ink);
    font-size: 15px;
}

.home-visa-card__footer a,
.home-link {
    color: var(--teal);
    font-weight: 800;
}

.home-section--split {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 18px;
}

.home-panel {
    border-radius: var(--radius);
    padding: 36px;
}

.home-panel--dark {
    color: #fff;
    background: var(--night);
}

.home-panel--dark h2 {
    color: #fff;
}

.home-panel--dark p {
    color: rgba(255, 255, 255, .76);
    font-size: 18px;
}

.home-chat-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 28px;
    background: #f5faf9;
}

.home-chat-bubble {
    max-width: 88%;
    padding: 14px 16px;
    border-radius: var(--radius);
    color: #24313c;
    background: #fff;
    box-shadow: 0 10px 28px rgba(23, 32, 42, .08);
}

.home-chat-bubble--user {
    /* A tinted bubble, not a solid teal one: the button below used the exact
       same --teal fill, so the visitor's message and the call to action read
       as one object. Solid brand colour now belongs to the button alone. */
    align-self: flex-end;
    color: #14403c;
    background: #dff2ee;
    border: 1px solid #bfe2db;
    box-shadow: none;
}

.home-section--process {
    border-top: 1px solid #e8eeee;
    border-bottom: 1px solid #e8eeee;
}

.home-process__item {
    padding: 24px;
}

.home-process__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 18px;
    border-radius: 50%;
    color: #fff;
    background: var(--teal);
    font-weight: 850;
}

.home-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.home-faq-item {
    padding: 24px;
}

.home-review {
    padding: 42px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82)),
        url("/images/bali1.jpg") center / cover no-repeat;
}

.home-review .home-btn--outline {
    color: var(--teal);
    border-color: #b9d9d5;
    background: #fff;
}

.home-empty {
    padding: 28px;
    color: var(--muted);
}

.landing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: var(--page);
    margin: 0 auto;
    padding: 34px 0 42px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.landing-footer strong,
.landing-footer span {
    display: block;
}

.landing-footer strong {
    color: var(--ink);
}

.landing-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-weight: 700;
}

.landing-footer__links a:hover {
    color: var(--teal);
}

@media (max-width: 991px) {
    .landing-header {
        grid-template-columns: 1fr auto;
    }

    .landing-nav {
        display: none;
    }

    .home-hero,
    .home-section--split {
        grid-template-columns: 1fr;
    }

    .home-hero {
        min-height: 0;
        padding: 34px;
    }

    .home-section__header {
        display: block;
    }

    .home-section__header p,
    .home-chat-preview {
        margin-top: 20px;
    }

    .home-visa-grid,
    .home-process,
    .home-audience-grid,
    .home-faq-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    :root {
        --page: min(100vw - 30px, 1600px);
    }

    .landing-header {
        min-height: 58px;
        padding: 0 16px;
    }

    .landing-brand {
        font-size: 20px;
    }

    .landing-header__cta {
        min-height: 38px;
        padding: 9px 13px;
    }

    .home-hero {
        margin-top: 14px;
        padding: 24px;
    }

    .home-hero h1 {
        font-size: 39px;
    }

    .home-lead {
        font-size: 17px;
    }

    .home-actions,
    .home-btn {
        width: 100%;
    }

    .home-hero__visual,
    .home-hero__visual img {
        min-height: 300px;
    }

    .home-trustbar,
    .home-visa-grid,
    .home-process,
    .home-audience-grid,
    .home-faq-list {
        grid-template-columns: 1fr;
    }

    .home-section {
        padding: 46px 0;
    }

    .home-panel,
    .home-review,
    .home-chat-preview {
        padding: 24px;
    }

    .home-chat-bubble {
        max-width: 100%;
    }

    .landing-footer {
        display: block;
    }

    .landing-footer__links {
        margin-top: 18px;
    }

    .yii-debug-toolbar {
        display: none !important;
    }
}

/* =====================================================================
   Site-wide nav (dropdown, language switch, burger, mobile menu)
   ===================================================================== */
.landing-nav {
    gap: 20px;
}

.landing-nav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.landing-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #273342;
    font-weight: 650;
}

.landing-nav__link:hover {
    color: var(--teal);
}

/* "You are here", not decoration: only the current section is coloured, and
   the underline makes it readable without relying on colour alone. */
.landing-nav__link.is-here {
    color: var(--teal);
    font-weight: 800;
}

.landing-nav__link.is-here::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 4px;
    border-radius: 2px;
    background: var(--teal);
}

.landing-caret {
    font-size: 11px;
    opacity: .7;
}

.landing-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 480px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
    margin-top: 8px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.landing-nav__item--menu:hover .landing-dropdown,
.landing-nav__item--menu:focus-within .landing-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.landing-dropdown__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.landing-dropdown__title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.landing-dropdown a {
    padding: 3px 0;
    color: #27333f;
    font-weight: 600;
}

.landing-dropdown a:hover {
    color: var(--teal);
}

.landing-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 14px;
}

.lang-switch {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 750;
}

.lang-switch__item {
    text-transform: uppercase;
}

.lang-switch a {
    color: #273342;
}

.lang-switch a:hover {
    color: var(--teal);
}

/* Language switcher — globe + flag dropdown (not a bare menu link) */
.landing-lang {
    position: relative;
}

.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: #273342;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.lang-trigger:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.lang-trigger svg {
    width: 17px;
    height: 17px;
}

.lang-dropdown {
    left: auto;
    right: 0;
    min-width: 210px;
    display: block;
    padding: 8px;
}

.landing-lang:hover .lang-dropdown,
.landing-lang:focus-within .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.lang-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #27333f;
    font-weight: 650;
}

.lang-opt:hover {
    background: var(--wash);
    color: var(--teal);
}

.lang-opt.is-active {
    background: var(--mint);
    color: #0c6b62;
}

.lang-flag {
    font-size: 17px;
    line-height: 1;
}

.landing-auth {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: #273342;
    font-size: 14px;
    font-weight: 700;
    transition: border-color .18s ease, color .18s ease;
}

.landing-auth:hover {
    border-color: var(--teal);
    color: var(--teal);
}

@media (max-width: 991px) {
    .landing-auth {
        display: none;
    }
}

.landing-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 42px;
    height: 38px;
    padding: 9px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.landing-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
}

/* `display: flex` beats the browser's own `[hidden] { display: none }`, so the
   burger toggled the attribute while the menu stayed open regardless. */
.landing-mobile[hidden] {
    display: none;
}

.landing-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px max(18px, calc((100vw - 1600px) / 2)) 18px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.landing-mobile a {
    padding: 12px 8px;
    border-radius: 8px;
    color: #27333f;
    font-weight: 700;
}

.landing-mobile a:hover {
    background: var(--wash);
    color: var(--teal);
}

/* Same rule as the desktop nav: colour means "you are here", not decoration.
   Visa Finder used to carry it permanently on every page. */
.landing-mobile a.is-here {
    color: var(--teal);
    background: var(--wash);
    font-weight: 850;
}

.landing-mobile__lang {
    padding: 10px 8px 0;
    border-top: 1px solid var(--line);
    margin-top: 6px;
}

@media (max-width: 991px) {
    .landing-actions {
        gap: 10px;
    }

    .landing-lang {
        display: none;
    }

    .landing-burger {
        display: flex;
    }
}

@media (min-width: 992px) {
    .landing-mobile {
        display: none !important;
    }
}

/* =====================================================================
   Generic public page scaffolding
   ===================================================================== */
.page {
    width: var(--page);
    margin: 0 auto;
}

.page-head {
    padding: 40px 0 8px;
}

.breadcrumb-trail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.breadcrumb-trail a {
    color: var(--teal);
    font-weight: 650;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #0f5f5a;
    background: var(--mint);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.muted-note {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    background: var(--wash);
}

/* =====================================================================
   Visa detail page
   ===================================================================== */
.visa-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: 28px;
    align-items: center;
    margin-top: 18px;
    padding: 40px;
    border-radius: var(--radius);
    background: var(--night);
    color: #fff;
    box-shadow: var(--shadow);
}

.visa-hero h1 {
    margin: 16px 0 12px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.06;
    font-weight: 850;
}

.visa-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    line-height: 1.55;
}

.visa-hero .home-eyebrow {
    color: var(--mint);
    background: rgba(223, 244, 239, .16);
}

.visa-hero__facts {
    display: grid;
    gap: 10px;
    padding: 22px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
}

.visa-hero__facts div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.visa-hero__facts div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.visa-hero__facts span {
    color: rgba(255, 255, 255, .7);
}

.visa-hero__facts strong {
    text-align: right;
}

.visa-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
    align-items: start;
    padding: 48px 0;
}

.visa-main > section {
    margin-bottom: 30px;
}

.visa-main h2 {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 800;
}

.visa-prose {
    color: #303a45;
    line-height: 1.7;
}

.visa-prose img {
    border-radius: var(--radius);
    margin: 12px 0;
}

.visa-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.visa-list li {
    position: relative;
    padding: 12px 14px 12px 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    line-height: 1.5;
}

.visa-list li::before {
    content: "✓";
    position: absolute;
    left: 14px;
    color: var(--teal);
    font-weight: 850;
}

.visa-faq {
    display: grid;
    gap: 12px;
}

.visa-faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    padding: 0 18px;
}

.visa-faq summary {
    padding: 16px 0;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}

.visa-faq summary::-webkit-details-marker {
    display: none;
}

.visa-faq summary::after {
    content: "+";
    float: right;
    color: var(--teal);
    font-weight: 850;
}

.visa-faq details[open] summary::after {
    content: "–";
}

.visa-faq p {
    margin: 0 0 16px;
    color: var(--muted);
    line-height: 1.6;
}

.visa-aside {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.visa-aside strong {
    font-size: 18px;
}

.visa-aside .home-btn {
    width: 100%;
}

.visa-related {
    padding: 8px 0 60px;
}

.visa-related h2 {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 800;
}

/* =====================================================================
   Visa Finder
   ===================================================================== */
.finder {
    width: min(820px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 40px 0 64px;
}

.finder-intro {
    text-align: center;
    margin-bottom: 26px;
}

.finder-intro h1 {
    margin: 14px 0 10px;
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.05;
    font-weight: 850;
}

.finder-intro p {
    margin: 0 auto;
    max-width: 540px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.55;
}

.finder-card {
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.finder-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 0;
    list-style: none;
}

.finder-dots li {
    width: 26px;
    height: 6px;
    border-radius: 999px;
    background: var(--line);
}

.finder-dots li.is-active,
.finder-dots li.is-done {
    background: var(--teal);
}

.finder--js .finder-step {
    display: none;
}

.finder--js .finder-step.is-active {
    display: block;
}

.finder-step {
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.finder-step legend {
    margin-bottom: 16px;
    padding: 0;
    font-size: 22px;
    font-weight: 800;
}

.finder-step--error legend {
    color: #b42318;
}

.finder-options {
    display: grid;
    gap: 10px;
}

.finder-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.finder-option:hover {
    border-color: var(--teal);
    background: #f5faf9;
}

.finder-option input {
    accent-color: var(--teal);
    width: 18px;
    height: 18px;
}

.finder-option span {
    font-weight: 650;
}

.finder-field input[type="text"] {
    width: 100%;
}

.finder-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.finder-nav .home-btn {
    min-width: 140px;
}

/* Results */
.finder-results {
    display: grid;
    gap: 16px;
    margin-top: 8px;
}

.rec-card {
    display: grid;
    gap: 12px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.rec-card--primary {
    border-color: var(--teal);
    box-shadow: 0 16px 40px rgba(15, 118, 110, .14);
}

.rec-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.rec-card h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 820;
}

.rec-badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mint);
    color: #0f5f5a;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.rec-card__fits {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.rec-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rec-meta span {
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    color: #33414d;
}

.rec-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* =====================================================================
   Forms (order, contact)
   ===================================================================== */
.form-card {
    width: min(660px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.field {
    margin-bottom: 16px;
}

.field > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 14px;
}

.control,
.form-card select,
.form-card input,
.form-card textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    font: inherit;
    color: var(--ink);
}

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

.control:focus,
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
    outline: 2px solid rgba(15, 118, 110, .25);
    border-color: var(--teal);
}

.control.is-invalid,
.is-invalid {
    border-color: #d92d20 !important;
}

.field-hint {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.field-error {
    margin: 6px 0 0;
    color: #b42318;
    font-size: 13px;
}

.landing-alert {
    display: none;
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: var(--radius);
    font-weight: 650;
}

.landing-alert--success {
    color: #075e54;
    background: #def7ec;
    border: 1px solid #84e1bc;
}

.landing-alert--danger {
    color: #9b1c1c;
    background: #fde8e8;
    border: 1px solid #f8b4b4;
}

.flash {
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: var(--radius);
    font-weight: 650;
}

.flash--success {
    color: #075e54;
    background: #def7ec;
    border: 1px solid #84e1bc;
}

.flash--error {
    color: #9b1c1c;
    background: #fde8e8;
    border: 1px solid #f8b4b4;
}

/* =====================================================================
   Reviews
   ===================================================================== */
.reviews-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 30px;
}

.review-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    font-weight: 750;
    color: #27333f;
}

.review-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.review-embed {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
}

.review-embed iframe {
    width: 100%;
    border: 0;
}

.testimonial {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.testimonial p {
    margin: 0 0 12px;
    line-height: 1.6;
}

.testimonial cite {
    color: var(--muted);
    font-style: normal;
    font-weight: 700;
}

@media (max-width: 991px) {
    .visa-hero,
    .visa-layout {
        grid-template-columns: 1fr;
    }

    .visa-aside {
        position: static;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .landing-dropdown {
        min-width: 280px;
    }

    .visa-hero,
    .finder-card,
    .form-card {
        padding: 22px;
    }

    .finder-nav .home-btn {
        min-width: 0;
        flex: 1;
    }

    .rec-card__top {
        flex-direction: column;
        gap: 6px;
    }
}

/* =====================================================================
   Modern polish — typography weight, depth, glass, glow, motion (2024)
   ===================================================================== */
:root {
    --radius: 10px;
    --radius-lg: 18px;
    --shadow-card: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 30px rgba(17, 24, 39, .06);
    --shadow-card-hover: 0 8px 18px rgba(17, 24, 39, .07), 0 26px 52px rgba(17, 24, 39, .13);
}

html {
    scroll-behavior: smooth;
    background:
        radial-gradient(1200px 620px at 80% -12%, #e9f4f1 0%, rgba(233, 244, 241, 0) 60%),
        radial-gradient(900px 520px at 0% 0%, #eef3fb 0%, rgba(238, 243, 251, 0) 55%),
        var(--wash);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Headings: lighter & tighter — premium, not ultra-black "sport" */
.home-hero h1 {
    font-weight: 780;
    letter-spacing: -.022em;
    line-height: 1.03;
}

.home-section__header h2,
.home-panel h2,
.home-review h2,
.visa-main h2,
.finder-intro h1,
.visa-hero h1 {
    font-weight: 720;
    letter-spacing: -.02em;
}

.home-section__header h2,
.home-panel h2,
.home-review h2 {
    font-size: clamp(28px, 3.3vw, 42px);
}

.home-audience-card h3,
.home-visa-card h3,
.home-faq-item h3,
.home-process__item h3 {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Kicker pills: quieter and more refined, with a small dot */
.home-eyebrow,
.home-kicker,
.section-kicker {
    gap: 7px;
    padding: 6px 12px;
    color: #0c6b62;
    background: rgba(15, 118, 110, .09);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .09em;
}

.home-eyebrow::before,
.home-kicker::before,
.section-kicker::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.home-hero .home-eyebrow {
    background: rgba(223, 244, 239, .18);
}

/* Hero: glowing gradient aura behind the dark panel */
.home-hero {
    position: relative;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(760px 460px at 84% 6%, rgba(15, 118, 110, .5), rgba(15, 118, 110, 0) 70%),
        radial-gradient(620px 420px at 4% 98%, rgba(0, 117, 255, .26), rgba(0, 117, 255, 0) 68%),
        var(--night);
}

/* Full-bleed hero band on tablet/desktop (Apple-style edge-to-edge),
   while the inner content stays aligned to the centered container. */
@media (min-width: 768px) {
    .home-hero {
        width: 100vw;
        margin: 0 0 0 calc(50% - 50vw);
        padding: 76px max(24px, calc((100vw - 1600px) / 2));
        min-height: 600px;
        border-radius: 0;
        box-shadow: none;
    }

    .home-trustbar {
        margin-top: 44px;
    }
}

/* Visa grid: keep cards balanced & centered for any count (kills the
   empty third column when only a couple of visas are published). */
.home-visa-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 420px));
    justify-content: center;
}

.home-hero__content,
.home-hero__visual {
    position: relative;
    z-index: 1;
}

/* Glassmorphism on the hero overlay card */
.home-hero-card {
    background: rgba(17, 26, 36, .5);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, .14);
}

/* Cards: soft depth + hover lift */
.home-audience-card,
.home-visa-card,
.home-process__item,
.home-faq-item,
.home-empty {
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.home-audience-card:hover,
.home-process__item:hover,
.home-faq-item:hover,
.home-visa-card:hover {
    transform: translateY(-4px);
    border-color: #cfe3e0;
    box-shadow: var(--shadow-card-hover);
}

.home-trustbar {
    box-shadow: var(--shadow-card);
}

.home-trustbar strong {
    font-weight: 800;
    letter-spacing: -.02em;
}

.home-panel,
.visa-hero {
    border-radius: var(--radius-lg);
}

/* Sticky FAQ heading on desktop (keeps context while scanning answers) */
@media (min-width: 992px) {
    .home-section--faq .home-section__header {
        position: sticky;
        top: 84px;
    }
}

/* Scroll reveal — armed only when JS runs (SEO-safe, no-JS shows everything) */
.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    will-change: opacity, transform;
}

.reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .65s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

/* =====================================================================
   Luxury hero — animated aurora + glass panel (no photo required)
   ===================================================================== */
.home-hero {
    overflow: hidden;
    isolation: isolate;
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(600px 420px at 18% 22%, rgba(15, 118, 110, .42), transparent 60%),
        radial-gradient(620px 440px at 82% 28%, rgba(0, 117, 255, .30), transparent 62%),
        radial-gradient(520px 380px at 60% 92%, rgba(139, 92, 246, .22), transparent 60%);
    filter: blur(14px);
    animation: heroAurora 18s ease-in-out infinite alternate;
}

@keyframes heroAurora {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    100% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero::after { animation: none; }
}

.home-hero__content {
    z-index: 1;
}

.home-hero__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px;
    border-radius: var(--radius-lg);
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.home-hero__panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(223, 244, 239, .16);
    color: var(--mint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-hero__panel-kicker::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.home-hero__panel-title {
    margin: 0;
    font-size: 24px;
    font-weight: 760;
    letter-spacing: -.01em;
}

.home-hero__panel-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-hero__panel-list li {
    position: relative;
    padding-left: 32px;
    color: rgba(255, 255, 255, .86);
    line-height: 1.4;
}

.home-hero__panel-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(15, 118, 110, .9);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.home-hero__panel .home-btn {
    margin-top: 4px;
}

.home-hero__panel-note {
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}

/* =====================================================================
   About / real office section
   ===================================================================== */
.home-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 36px;
    align-items: center;
}

.home-about__media {
    position: relative;
    min-height: 360px;
    height: 100%;
}

.home-about__media img,
.home-about__placeholder {
    width: 100%;
    height: 100%;
    min-height: 360px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.home-about__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    background:
        radial-gradient(420px 280px at 30% 25%, rgba(15, 118, 110, .5), transparent 60%),
        radial-gradient(420px 280px at 80% 80%, rgba(0, 117, 255, .32), transparent 62%),
        var(--night);
    box-shadow: var(--shadow-card);
}

.home-about__placeholder-mark {
    font-size: 46px;
    font-weight: 820;
    letter-spacing: -.02em;
}

.home-about__placeholder span:last-child {
    color: rgba(255, 255, 255, .75);
    font-weight: 650;
}

.home-about__body h2 {
    margin: 14px 0 0;
    color: var(--ink);
    font-size: clamp(28px, 3.3vw, 42px);
    font-weight: 720;
    letter-spacing: -.02em;
    line-height: 1.08;
}

.home-about__body > p {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
}

.home-about__points {
    display: grid;
    gap: 11px;
    margin: 20px 0 26px;
    padding: 0;
    list-style: none;
}

.home-about__points li {
    position: relative;
    padding-left: 30px;
    color: #33414d;
    line-height: 1.5;
}

.home-about__points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: 850;
}

@media (max-width: 991px) {
    .home-about {
        grid-template-columns: 1fr;
    }
}

/* Contact map + directions */
.contact-map-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding-top: 8px;
}

.contact-map {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.contact-map iframe {
    display: block;
    width: 100%;
    min-height: 380px;
    border: 0;
}

.contact-map__info h2 {
    margin: 14px 0 8px;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 720;
    letter-spacing: -.02em;
}

.contact-map__info > p {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
}

.contact-map__info .home-btn {
    margin-top: 14px;
}

@media (max-width: 991px) {
    .contact-map-row {
        grid-template-columns: 1fr;
    }
}

/* ---------- Visa detail: price table and allowed/not-allowed columns ---------- */
.visa-price-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 15px; }
.visa-price-table th,
.visa-price-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.visa-price-table th { font-weight: 700; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.visa-price-table td:nth-child(2),
.visa-price-table th:nth-child(2),
.visa-price-table td:last-child,
.visa-price-table th:last-child { text-align: right; white-space: nowrap; }
.visa-price-table tbody tr:last-child td { border-bottom: 0; font-weight: 700; }

.visa-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .visa-includes { grid-template-columns: 1fr; } }
.visa-list--no li::before { content: "✕"; color: #c0563f; }
.visa-list--no li { background: #fdf7f6; border-color: #efd7d1; }

/* ---------- Contact cards: open in one tap, copy in another ---------- */
.contact-card { display: flex; align-items: center; gap: 10px; }
.contact-card__link { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.contact-card__label { color: var(--teal); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.contact-card__value { margin: 8px 0 0; overflow-wrap: anywhere; }

.contact-card__copy {
    flex: none; width: 38px; height: 38px; padding: 8px;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff; color: var(--muted); cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.contact-card__copy svg { width: 100%; height: 100%; }
.contact-card__copy:hover { color: var(--teal); border-color: #b9d9d5; }

/* Feedback without a popup: the icon turns into a tick for a moment. */
.contact-card__copy.is-copied { color: #fff; background: var(--teal); border-color: var(--teal); }
.contact-card__copy.is-copied svg { display: none; }
.contact-card__copy.is-copied::after { content: "✓"; font-size: 17px; font-weight: 850; line-height: 1; }


/* The footer address opens the office pin — it has to look tappable, or it
   reads as plain text and nobody tries. */
.landing-footer__address {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    color: #7fd4c6;
    text-decoration: none;
    border-bottom: 1px solid rgba(127, 212, 198, .35);
    transition: color .15s ease, border-color .15s ease;
}
.landing-footer__address:hover { color: #a8e6db; border-bottom-color: #a8e6db; }
.landing-footer__address svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }