/* ============================================================================
   Shared page furniture for the product landing pages — Tours, Visas, Cruise,
   Sightseeing, Destinations — plus the account entry pages.

   These class names predate the design system. They were defined across
   flight-search.css and hotel-search.css, which were the two always-loaded
   sheets before the flights vertical and the hotel API were removed; deleting
   those files took the shared hero, search card, "popular" carousel and offers
   grid with them, leaving five landing pages rendering as unstyled HTML.

   Rebuilt here in the new design language rather than restored from the old
   one. The names are kept exactly as the partials already use them so no markup
   had to change, but everything below resolves to the tokens in theme.css — so
   these pages now match the rebuilt homepage and hotel pages instead of
   carrying the previous navy-and-gold styling forward.
   ========================================================================== */

/* ------------------------------------------------------ landing hero ----- */

/* Each product sheet supplies its own .{product}-hero background; this is the
   layout and typography they share. */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 46rem;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem .9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--pt-blue-200);
    border-radius: var(--pt-radius-pill);
    background: var(--pt-blue-050);
    color: var(--pt-blue-700);
    font-size: var(--pt-text-xs);
    font-weight: 600;
    letter-spacing: .02em;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pt-lime-500);
    /* A slow pulse rather than a static dot — the only motion in the hero, and
       it reads as "live" without being a spinner. */
    animation: pt-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes pt-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: .55; }
}

.flight-hero-title {
    font-family: var(--pt-font-display);
    font-size: var(--pt-h1);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--pt-heading);
    margin: 0 0 .75rem;
    text-wrap: balance;
}

/* The same serif-italic accent the rebuilt pages use on one word of the
   headline — it is what ties these pages to the new homepage. */
.flight-hero-title em {
    font-family: var(--pt-font-accent);
    font-style: italic;
    font-weight: 400;
    color: var(--pt-blue-600);
}

.flight-hero-subtitle {
    font-size: clamp(1rem, .5vw + .95rem, 1.15rem);
    color: var(--pt-text-muted);
    max-width: 36rem;
    margin: 0 0 1.75rem;
    text-wrap: pretty;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--pt-gap);
    padding-top: var(--pt-gap-lg);
    border-top: 1px solid var(--pt-line);
}

.hero-stat { display: flex; align-items: center; gap: .65rem; }

.hero-stat svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--pt-blue-600);
}

.hero-stat strong {
    display: block;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-lg);
    font-weight: 700;
    color: var(--pt-heading);
    line-height: 1.2;
}

.hero-stat span {
    display: block;
    font-size: var(--pt-text-xs);
    color: var(--pt-text-faint);
}

/* ------------------------------------------------------- search card ----- */

.flight-search-card {
    position: relative;
    z-index: 5;
    max-width: var(--pt-container);
    /* No negative top margin of its own: the enclosing *-search-wrapper already
       applies --hero-card-overlap, and having both pull meant the card rose
       twice as far as intended. */
    margin: 0 auto var(--pt-gap-xl);
    padding: clamp(1.1rem, 2vw, 1.5rem);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--pt-radius-xl);
    box-shadow: var(--pt-shadow-xl);
}

.trip-fields-simple {
    display: grid;
    gap: .6rem;
    grid-template-columns: 1fr;
    align-items: end;
}

@media (min-width: 760px) {
    .trip-fields-simple { grid-template-columns: 2fr 1fr 1fr auto; }
}

.field-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    min-height: 62px;
    padding: .55rem .85rem;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    background: var(--pt-paper);
    transition: border-color .2s var(--pt-ease), box-shadow .2s var(--pt-ease);
}

.field-box:focus-within { border-color: var(--pt-blue-500); box-shadow: var(--pt-ring); }

.field-label {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.field-select {
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    color: var(--pt-heading);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-md);
    font-weight: 600;
}

.field-select:focus { outline: none; }
.field-select::placeholder { color: var(--pt-slate-400); font-weight: 500; }

.search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 62px;
    padding: 0 1.75rem;
    border: 0;
    border-radius: var(--pt-radius);
    background: linear-gradient(135deg, var(--pt-blue-600), var(--pt-blue-700));
    color: #fff;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-base);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(27, 95, 170, .28);
    transition: transform .2s var(--pt-ease), box-shadow .2s var(--pt-ease);
}

.search-btn:hover { transform: translateY(-2px); box-shadow: var(--pt-shadow-lg); color: #fff; }

/* Same reasoning as .pt-searchform__submit: full width while the fields are
   stacked, intrinsic once they sit in a row. */
.search-btn { width: 100%; }

@media (min-width: 760px) { .search-btn { width: auto; } }

/* Pill variant of the search button. Lives here rather than in visa-search.css
   because the enquiry forms on Tours, Cruise and Sightseeing carry it too, and
   that sheet is only loaded for the Visas controller — so on the other three it
   was a class that resolved to nothing. */
.visa-search-btn { border-radius: var(--pt-radius-pill); }
.search-btn svg { width: 18px; height: 18px; }

/* --------------------------------------------------- section headings ---- */

.section-heading { max-width: 46rem; margin-bottom: var(--pt-gap-xl); }

.section-heading h2 {
    font-family: var(--pt-font-display);
    font-size: var(--pt-h2);
    font-weight: 700;
    letter-spacing: -0.028em;
    color: var(--pt-heading);
    margin: 0 0 .4rem;
}

.section-heading p { color: var(--pt-text-muted); font-size: var(--pt-text-lg); margin: 0; }

.section-view-all {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--pt-font-display);
    font-weight: 600;
    color: var(--pt-blue-600);
}

.section-view-all svg { width: 15px; height: 15px; transition: transform .25s var(--pt-ease); }
.section-view-all:hover svg { transform: translateX(3px); }

/* ------------------------------------------- "popular" carousel cards ---- */

.routes-section { padding-block: var(--pt-section-y); }

.routes-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pt-gap-lg);
    margin-bottom: var(--pt-gap-xl);
}

.routes-heading .section-heading { margin-bottom: 0; }

.routes-nav { display: flex; gap: .5rem; }

.routes-nav-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--pt-line);
    border-radius: 50%;
    background: var(--pt-paper);
    color: var(--pt-slate-700);
    cursor: pointer;
    transition: background .2s var(--pt-ease), color .2s var(--pt-ease), border-color .2s var(--pt-ease), opacity .2s var(--pt-ease);
}

.routes-nav-btn:hover:not(:disabled) { background: var(--pt-blue-600); border-color: var(--pt-blue-600); color: #fff; }
.routes-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.routes-nav-btn svg { width: 17px; height: 17px; }

/* Horizontal snap rail on phones, a plain grid from tablet up — the same
   behaviour as .pt-rail, applied to the older markup. */
.routes-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 80vw);
    gap: var(--pt-gap-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: .5rem;
    scrollbar-width: none;
}

.routes-track::-webkit-scrollbar { display: none; }
.routes-track > * { scroll-snap-align: start; }

@media (min-width: 900px) {
    .routes-track {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
        overflow: visible;
    }
}

/* The four "Popular …" carousels all render the same shape: an <a> carrying the
   photograph as an inline background-image, an empty scrim span over it, and
   the copy stacked at the bottom. Styling it as an image-on-top card is what
   left the text sitting across the middle of the picture. */
.route-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 330px;
    padding: 0;
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    background-color: var(--pt-ink-700);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    transition: transform .35s var(--pt-ease-out), box-shadow .35s var(--pt-ease-out);
}

.route-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pt-shadow-xl);
}

/* The scrim is its own element in the markup, so the zoom-on-hover has to live
   on the card's background rather than on an <img>. */
.route-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(5, 12, 24, .12) 28%, rgba(5, 12, 24, .55) 58%, rgba(5, 12, 24, .92));
    transition: background .4s var(--pt-ease);
}

.route-card:hover .route-card-overlay {
    background: linear-gradient(180deg, rgba(14, 58, 114, .3) 20%, rgba(5, 12, 24, .68) 55%, rgba(5, 12, 24, .95));
}

.route-ribbon {
    position: absolute;
    top: .875rem;
    left: .875rem;
    z-index: 3;
    padding: .3rem .7rem;
    border-radius: var(--pt-radius-pill);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    color: var(--pt-ink-800);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.route-card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: var(--pt-gap-lg);
    color: #fff;
}

.route-cities {
    display: block;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-lg);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-wrap: balance;
}

.route-tagline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(255, 255, 255, .76);
    font-size: var(--pt-text-sm);
    line-height: 1.5;
}

.route-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pt-gap);
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.route-price {
    display: flex;
    flex-direction: column;
    font-family: var(--pt-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.route-price small {
    font-family: var(--pt-font-body);
    font-size: var(--pt-text-xs);
    font-weight: 500;
    color: rgba(255, 255, 255, .66);
    letter-spacing: 0;
}

.route-cta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 600;
    color: var(--pt-lime-500);
    white-space: nowrap;
}

.route-cta svg { width: 15px; height: 15px; transition: transform .25s var(--pt-ease); }
.route-card:hover .route-cta svg { transform: translateX(3px); }

/* -------------------------------------------------------- offers grid ---- */

.offers-grid {
    display: grid;
    gap: var(--pt-gap-lg);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.offer-stub {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: var(--pt-gap-lg);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-paper);
    overflow: hidden;
    transition: transform .3s var(--pt-ease-out), box-shadow .3s var(--pt-ease-out), border-color .3s var(--pt-ease);
}

/* The perforated left edge that makes it read as a torn-off coupon. */
.offer-stub::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--pt-lime-500), var(--pt-blue-500));
}

.offer-stub:hover {
    transform: translateY(-5px);
    border-color: var(--pt-blue-200);
    box-shadow: var(--pt-shadow-lg);
}

.offer-badge {
    align-self: flex-start;
    padding: .28rem .7rem;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-lime-100);
    color: var(--pt-lime-700);
    font-size: var(--pt-text-xs);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.offer-title {
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-lg);
    font-weight: 700;
    color: var(--pt-heading);
    margin: 0;
    line-height: 1.3;
}

.offer-description { color: var(--pt-text-muted); font-size: var(--pt-text-sm); margin: 0; }

.offer-code {
    align-self: flex-start;
    margin-top: auto;
    padding: .4rem .85rem;
    border: 1px dashed var(--pt-blue-200);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-blue-050);
    color: var(--pt-blue-700);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 700;
    letter-spacing: .08em;
}

/* -------------------------------------------- "types" / process blocks --- */

.tour-types-section,
.cruise-types-section,
.sightseeing-types-section,
.tour-destinations-section,
.cruise-destinations-section,
.sightseeing-destinations-section,
.visa-destinations-section,
.cruise-process-section,
.sightseeing-process-section {
    padding-block: var(--pt-section-y);
}

/* Alternating surfaces so a long landing page reads as bands rather than one
   continuous scroll. */
.cruise-types-section,
.sightseeing-types-section,
.tour-types-section {
    background: var(--pt-paper);
}

.why-us-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--pt-gap);
    border-radius: 13px;
    background: linear-gradient(135deg, var(--pt-blue-100), var(--pt-lime-100));
    color: var(--pt-blue-700);
    transition: background .35s var(--pt-ease), color .35s var(--pt-ease), transform .35s var(--pt-ease-out);
}

.why-us-icon svg { width: 21px; height: 21px; }

/* ------------------------------------------------------ listing facets --- */

.lst-facet-sec + .lst-facet-sec {
    margin-top: var(--pt-gap-lg);
    padding-top: var(--pt-gap-lg);
    border-top: 1px solid var(--pt-line-soft);
}

.lst-facet-sec > h3,
.lst-facet-sec > strong {
    display: block;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    margin-bottom: .65rem;
}

.lst-facet-options { display: grid; gap: .15rem; max-height: 260px; overflow-y: auto; }

/* --------------------------------------------------------- star fills ---- */

/* The legacy listing markup marks a filled star with .filled rather than using
   the _Stars partial. */
.filled { color: var(--pt-lime-600); fill: currentColor; }

/* ------------------------------------------------ account entry pages ---- */

/* Login and Register: brand panel beside the form. */
.acc-bleed {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: var(--pt-sand);
}

.acc-split {
    display: grid;
    grid-template-columns: 1fr;
    max-width: var(--pt-container);
    margin-inline: auto;
    min-height: min(78vh, 720px);
}

@media (min-width: 900px) {
    .acc-split { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.acc-brand {
    position: relative;
    display: none;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: linear-gradient(140deg, var(--pt-ink-900), var(--pt-blue-800));
    color: #fff;
    overflow: hidden;
    border-radius: var(--pt-radius-xl) 0 0 var(--pt-radius-xl);
}

@media (min-width: 900px) { .acc-brand { display: flex; align-items: center; } }

.acc-brand-deco {
    position: absolute;
    inset: auto -20% -35% auto;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    pointer-events: none;
}

.acc-brand-deco::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1px solid rgba(196, 214, 62, .22);
}

.acc-brand-inner { position: relative; z-index: 1; }
.acc-brand-logo { height: 44px; width: auto; margin-bottom: var(--pt-gap-lg); filter: brightness(0) invert(1) opacity(.94); }

.acc-brand-title {
    font-family: var(--pt-font-display);
    font-size: var(--pt-h2);
    font-weight: 700;
    letter-spacing: -0.028em;
    color: #fff;
    margin: 0 0 .5rem;
}

.acc-brand-title em {
    font-family: var(--pt-font-accent);
    font-style: italic;
    font-weight: 400;
    color: var(--pt-lime-500);
}

.acc-brand-sub { color: rgba(255, 255, 255, .72); margin-bottom: var(--pt-gap-lg); }

.acc-brand-points { list-style: none; margin: 0 0 var(--pt-gap-lg); padding: 0; display: grid; gap: .7rem; }

.acc-brand-points li {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255, 255, 255, .82);
    font-size: var(--pt-text-base);
}

.acc-brand-points svg { width: 17px; height: 17px; color: var(--pt-lime-500); flex: none; }

.acc-brand-quote {
    padding-top: var(--pt-gap-lg);
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-family: var(--pt-font-accent);
    font-style: italic;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .88);
}

.acc-formside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 4vw, 3.5rem);
    background: var(--pt-paper);
    border-radius: var(--pt-radius-xl);
}

@media (min-width: 900px) { .acc-formside { border-radius: 0 var(--pt-radius-xl) var(--pt-radius-xl) 0; } }

.acc-title { font-size: var(--pt-h3); margin-bottom: .3rem; }
.acc-sub { color: var(--pt-text-muted); margin-bottom: var(--pt-gap-lg); }

.acc-error {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .9rem;
    margin-bottom: var(--pt-gap);
    border-radius: var(--pt-radius);
    background: var(--pt-danger-soft);
    color: var(--pt-danger);
    font-size: var(--pt-text-sm);
    font-weight: 600;
}

.acc-error svg { width: 16px; height: 16px; flex: none; }

.acc-terms {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: var(--pt-text-sm);
    color: var(--pt-text-muted);
}

.acc-terms input { margin-top: .2rem; accent-color: var(--pt-blue-600); width: 16px; height: 16px; flex: none; }

.acc-submit-text { display: inline-flex; align-items: center; gap: .45rem; }

.acc-switch {
    margin-top: var(--pt-gap-lg);
    padding-top: var(--pt-gap);
    border-top: 1px solid var(--pt-line-soft);
    text-align: center;
    font-size: var(--pt-text-base);
    color: var(--pt-text-muted);
}

/* Password reveal toggle: exactly one of the two glyphs is shown at a time. */
.acc-eye-off { display: none; }
[data-visible="true"] .acc-eye-on { display: none; }
[data-visible="true"] .acc-eye-off { display: inline; }

/* ------------------------------------------------------------- misc ------ */

.vd-overview-toggle-label { cursor: pointer; color: var(--pt-blue-600); font-weight: 600; }

/* ------------------------------------------------- "what we handle" grid -- */

/* The Tours, Cruise, Sightseeing and Visas landing pages all render their
   service list through this one shell. Its styling lived in the original
   home-sections.css, which was replaced wholesale by the new design system —
   leaving four pages showing a bare stack of text with an unsized icon above
   each item. Rebuilt here to match .pt-feature, which is the same component in
   the new vocabulary. */

/* Constrains itself rather than relying on a wrapper: the markup in the four
   *TypesSection partials has no .container inside it, and now that the product
   landing pages render full-bleed (their hero needs the full width) there is no
   outer column either — so the grid ran edge to edge. */
.why-us-section {
    /* Full width so the section's own background paints edge to edge, with the
       content still centred on the container. max-width would have worked for
       the grid but left the white band floating as an inset panel with page
       colour either side of it. */
    padding-block: var(--pt-section-y);
    padding-inline: max(clamp(1rem, 4vw, 2rem), calc((100% - var(--pt-container)) / 2));
}

.why-us-grid {
    display: grid;
    gap: var(--pt-gap-lg);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.why-us-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: var(--pt-gap-lg);
    background: var(--pt-paper);
    border: 1px solid var(--pt-line-soft);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform .3s var(--pt-ease-out), box-shadow .3s var(--pt-ease-out), border-color .3s var(--pt-ease);
}

/* Same growing accent rule as .pt-feature, so the two read as one component. */
.why-us-card::after {
    content: "";
    position: absolute;
    left: var(--pt-gap-lg);
    bottom: 0;
    width: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--pt-lime-500), var(--pt-blue-500));
    transition: width .4s var(--pt-ease-out);
}

/* A quiet radial glow that blooms in from the icon corner on hover — the
   detail that stops the lift feeling like a generic "card hover" and ties the
   motion to the icon rather than the whole rectangle. */
.why-us-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -40%;
    right: -30%;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--pt-blue-100), transparent 70%);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .4s var(--pt-ease), transform .4s var(--pt-ease-out);
    pointer-events: none;
}

/* Above the glow, which is positioned and would otherwise paint over these
   static-flow children. */
.why-us-card > .why-us-icon { position: relative; z-index: 1; }

.why-us-card:hover {
    transform: translateY(-6px);
    border-color: var(--pt-blue-200);
    box-shadow: var(--pt-shadow-lg);
}

.why-us-card:hover::after { width: 44px; }
.why-us-card:hover::before { opacity: 1; transform: scale(1); }

.why-us-card:hover .why-us-icon {
    background: linear-gradient(135deg, var(--pt-blue-600), var(--pt-blue-700));
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
}

/* Three accent hues cycled across the grid rather than one repeated colour —
   a six-tile grid in a single tone reads flat; rotating blue / lime / ink gives
   each card its own identity while staying inside the brand palette. */
.why-us-grid .why-us-card:nth-child(3n+2):hover .why-us-icon {
    background: linear-gradient(135deg, var(--pt-lime-500), var(--pt-lime-600));
    color: var(--pt-ink-800);
}

.why-us-grid .why-us-card:nth-child(3n+3):hover .why-us-icon {
    background: linear-gradient(135deg, var(--pt-ink-800), var(--pt-ink-600));
    color: #fff;
}

.why-us-grid .why-us-card:nth-child(3n+2):hover::after { background: linear-gradient(90deg, var(--pt-lime-600), var(--pt-lime-400)); }
.why-us-grid .why-us-card:nth-child(3n+3):hover::after { background: linear-gradient(90deg, var(--pt-ink-800), var(--pt-blue-700)); }

.why-us-card strong {
    position: relative;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-lg);
    font-weight: 700;
    color: var(--pt-heading);
    line-height: 1.3;
}

.why-us-card p {
    position: relative;
    margin: 0;
    color: var(--pt-text-muted);
    font-size: var(--pt-text-base);
    line-height: 1.6;
}

/* -- clickable variant: cards that lead somewhere real ------------------- */

.why-us-card--link { cursor: pointer; }

.why-us-card__go {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 600;
    color: var(--pt-blue-600);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .3s var(--pt-ease), transform .3s var(--pt-ease-out);
}

.why-us-card__go svg { width: 15px; height: 15px; transition: transform .25s var(--pt-ease); }

.why-us-card--link:hover .why-us-card__go { opacity: 1; transform: none; }
.why-us-card--link:hover .why-us-card__go svg { transform: translateX(3px); }

.why-us-grid .why-us-card:nth-child(3n+2):hover .why-us-card__go { color: var(--pt-lime-700); }
.why-us-grid .why-us-card:nth-child(3n+3):hover .why-us-card__go { color: var(--pt-ink-800); }

/* ============================================================================
   Process steps and the enquiry block.

   Both carry visa-* class names for historical reasons — they were written for
   the Visas page first — but all four product landing pages (Tours, Cruise,
   Sightseeing, Visas) render the same markup. Their styling lived in
   visa-search.css, which the layout only loads for the Visas controller, so on
   the other three the steps rendered as a bare numbered list and the enquiry
   form as unstyled inputs. Defined here instead: one source of truth, loaded
   globally, so all four pages look identical.
   ========================================================================== */

/* -------------------------------------------------------- process steps --- */

.visa-process-section { padding-block: var(--pt-section-y); }

.visa-steps {
    display: grid;
    gap: var(--pt-gap-lg);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    counter-reset: visa-step;
    position: relative;
}

.visa-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: var(--pt-gap-lg);
    background: var(--pt-paper);
    border: 1px solid var(--pt-line-soft);
    border-radius: var(--pt-radius-lg);
    transition: transform .3s var(--pt-ease-out), box-shadow .3s var(--pt-ease-out), border-color .3s var(--pt-ease);
}

.visa-step:hover {
    transform: translateY(-4px);
    border-color: var(--pt-blue-200);
    box-shadow: var(--pt-shadow-lg);
}

.visa-step-num {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: .5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pt-ink-800), var(--pt-ink-600));
    color: #fff;
    font-family: var(--pt-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    /* Above the connector line drawn behind the row. */
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 5px var(--pt-paper);
}

.visa-step strong {
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-lg);
    font-weight: 700;
    color: var(--pt-heading);
    line-height: 1.3;
}

.visa-step p {
    margin: 0;
    color: var(--pt-text-muted);
    font-size: var(--pt-text-base);
    line-height: 1.6;
}

/* A dashed thread between the numbers, desktop only — on a stacked mobile
   layout a horizontal rule would point nowhere. */
@media (min-width: 900px) {
    .visa-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: calc(var(--pt-gap-lg) + 23px);
        left: calc(var(--pt-gap-lg) + 46px);
        right: calc(-1 * var(--pt-gap-lg));
        border-top: 2px dashed var(--pt-line);
        z-index: 0;
    }
}

/* ------------------------------------------------------------- enquiry --- */

.visa-consultation-section { padding-block: var(--pt-section-y); }

.visa-consultation-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 3vw, 3rem);
    padding: clamp(1.75rem, 3.5vw, 3.25rem);
    border-radius: var(--pt-radius-xl);
    background: linear-gradient(140deg, var(--pt-ink-900), var(--pt-ink-700) 55%, var(--pt-blue-800));
    color: rgba(255, 255, 255, .78);
    box-shadow: var(--pt-shadow-xl);
    position: relative;
    overflow: hidden;
}

/* Same concentric-ring motif as the homepage CTA, so the two read as one system. */
.visa-consultation-card::before,
.visa-consultation-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
    pointer-events: none;
}

.visa-consultation-card::before { width: 420px; height: 420px; top: -190px; right: -130px; }
.visa-consultation-card::after { width: 280px; height: 280px; bottom: -150px; left: -70px; border-color: rgba(196, 214, 62, .18); }

@media (min-width: 900px) {
    .visa-consultation-card { grid-template-columns: 1fr 1.15fr; align-items: start; }
}

.visa-consultation-intro,
.visa-consultation-form { position: relative; z-index: 1; }

.visa-consultation-intro .section-eyebrow {
    font-family: var(--pt-font-accent);
    font-style: italic;
    font-size: 1.0625rem;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--pt-lime-500);
}

.visa-consultation-intro h2 {
    font-family: var(--pt-font-display);
    font-size: var(--pt-h2);
    font-weight: 700;
    letter-spacing: -0.028em;
    color: #fff;
    margin: .35rem 0 .6rem;
}

.visa-consultation-intro p {
    color: rgba(255, 255, 255, .72);
    font-size: var(--pt-text-lg);
    margin-bottom: var(--pt-gap-lg);
}

.visa-consultation-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .65rem;
}

.visa-consultation-points li {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255, 255, 255, .86);
    font-size: var(--pt-text-base);
}

.visa-consultation-points .icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--pt-lime-500);
}

/* The form sits on paper inside the dark card — it is the one thing on the
   panel a visitor has to actually read and type into. */
.visa-consultation-form {
    padding: clamp(1.25rem, 2.5vw, 1.85rem);
    background: var(--pt-paper);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-lg);
}

.visa-form-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, 1fr);
}

.visa-form-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.visa-form-field.wide { grid-column: 1 / -1; }

.visa-form-field label {
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.visa-form-field input,
.visa-form-field select,
.visa-form-field textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-paper);
    color: var(--pt-text);
    font-family: inherit;
    font-size: var(--pt-text-base);
    transition: border-color .18s var(--pt-ease), box-shadow .18s var(--pt-ease);
}

.visa-form-field textarea { min-height: 92px; resize: vertical; }

.visa-form-field select {
    appearance: none;
    background-image: 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='%2374819A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2.25rem;
}

.visa-form-field input:focus,
.visa-form-field select:focus,
.visa-form-field textarea:focus {
    outline: none;
    border-color: var(--pt-blue-500);
    box-shadow: var(--pt-ring);
}

.visa-form-submit { width: 100%; margin-top: var(--pt-gap); }

.visa-form-success {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: var(--pt-gap-lg);
    border-radius: var(--pt-radius);
    background: var(--pt-success-soft);
    color: var(--pt-success);
}

.visa-form-success .icon { width: 22px; height: 22px; flex: none; margin-top: .1rem; }
.visa-form-success strong { display: block; font-family: var(--pt-font-display); font-size: var(--pt-text-lg); }
.visa-form-success p { margin: .2rem 0 0; font-size: var(--pt-text-base); color: var(--pt-slate-700); }

@media (max-width: 560px) {
    .visa-form-grid { grid-template-columns: 1fr; }
}