/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    --font-primary: 'Aktiv Grotesk', Arial, Helvetica, sans-serif;

    --color-primary: #FEBC17; /* the only yellow used on the site */
    --color-dark: #0b0b0b;
    --content-w: calc(1400px + 6vw); /* 1400px of content inside the 3vw side padding */
    --color-text: #333333;
    --color-light: #ffffff;
    --color-border: #e5e5e5;

    --container-width: 1200px;
}

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

html {
    scroll-behavior: smooth;
}

/* GSAP ScrollSmoother does the smoothing, so the browser's own must be off while it runs */
html.has-smoother {
    scroll-behavior: auto;
}

/* Page content wrapper (smooth scrolling): behaves like the body did, a full-height column */
#smooth-wrapper,
#smooth-content {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 100vh;
}

/* Keep the promoted fixed photo behind the normal scrolling page layer. */
#smooth-wrapper {
    position: relative;
    z-index: 1;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

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

ul,
ol {
    list-style: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    color: var(--color-dark);
}

h1 { font-size: 60px; font-weight: 400; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
    font-size: 18px;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
}

/* Full-width container with side spacing only */
.container-fluid {
    width: 100%;
    padding: 0 3vw;
}

/* Main fills the screen above the footer, so the hero + footer fit one screen */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.section {
    padding: 80px 0;
}

/* ==========================================================================
   Header - "Made in India" | phone grouped top right, logo centered below
   ========================================================================== */
.site-header {
    position: relative;
    z-index: 10;
    padding: 15px 0;
    background-color: var(--color-dark);
    color: var(--color-light);
}

/* On the home page the header sits on top of the hero image */
.home .site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
}

.header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.logo {
    display: block;
    order: 2;
    margin-top: 10px;
}

.logo img {
    width: 300px;
    height: auto;
}

.header-contact {
    order: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    font-size: 14px;
}

.made-in-india {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-divider {
    width: 1px;
    height: 26px;
    background-color: rgba(255, 255, 255, 0.6);
}

/* Hours hang below the number so "Made in India" lines up with the number itself */
.header-phone {
    position: relative;
    text-align: right;
}

.header-phone small {
    position: absolute;
    top: 100%;
    right: 0;
    white-space: nowrap;
    font-size: 15px;
    opacity: 0.8;
}

.header-phone a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
}

/* Phone number: each character swells in turn, left to right, and the rest
   stay normal; loops. Every character runs the same animation (one full cycle
   = one slot per character), offset by its position. */
.phone-number {
    --slot: 0.5s;
    white-space: pre;
}

.phone-char {
    display: inline-block;
    transform-origin: 50% 60%;
    animation: phone-swell calc(var(--slot) * var(--phone-count)) ease-in-out infinite;
    animation-delay: calc(var(--slot) * var(--i));
}

@keyframes phone-swell {
    0%      { transform: scale(1);   color: var(--color-light); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    3.85%   { transform: scale(1.8); color: var(--color-primary); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    7.7%    { transform: scale(1);   color: var(--color-light); }
    100%    { transform: scale(1);   color: var(--color-light); }
}

@media (prefers-reduced-motion: reduce) {
    .phone-char {
        animation: none;
    }
}

.header-phone svg {
    color: var(--color-primary);
}

/* Back links (inner pages) sit together on the left */
.header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-right: auto;
}

.header-nav .header-back {
    margin-right: 0;
}

/* Optional "Back to Home" link (inner pages): sits on the left */
.header-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    transition: color 0.2s ease;
}

.header-back:hover {
    color: var(--color-primary);
}

/* Visually hidden but read by screen readers and search engines */
.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;
}


/* ==========================================================================
   Buttons: gold pill with a dark knob that sweeps in to fill it on hover
   ========================================================================== */
.btn {
    /* Diameter of the dark knob = the button's own inner (inside-the-border)
       height, so the knob is always a perfect circle, at any font size or
       breakpoint - never wider or taller than it is tall. The knob's height
       comes from top/bottom:0 below, never from this variable, so growing
       its width on hover can't stretch it into a blob. */
    --btn-size: 46px;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: calc(var(--btn-size) + 6px);
    padding-left: 32px;
    padding-right: calc(var(--btn-size) + 16px);
    border: 3px solid var(--color-primary);
    border-radius: 50px;
    background-color: var(--color-primary);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--btn-size);
    border-radius: 50px;
    background-color: var(--color-dark);
    transition: width 0.6s ease;
}

.btn span {
    position: relative;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-dark);
    transition: color 0.3s ease 0.25s;
    font-size: 14px;
}

/* Arrow sits centred in the knob's rest position, which is always dark
   (idle knob, or the fully-swept fill after hover) - so its own colour
   never needs to change, only nudge sideways on hover. */
.btn > svg {
    position: absolute;
    top: 50%;
    right: calc(var(--btn-size) / 2);
    transform: translate(50%, -50%);
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.btn:hover::before {
    width: 100%;
}

.btn:hover span {
    color: var(--color-primary);
}

.btn:hover > svg {
    transform: translate(50%, -50%) translateX(3px);
}

.btn:active {
    transform: scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn::before,
    .btn span,
    .btn > svg {
        transition: none;
    }
}

/* ==========================================================================
   Title reveal: every title on the site starts soft-blurred and fades into
   sharp focus as a block. Wrap each visual line of a title in
   <span class="reveal-title"> (add reveal-title--delay to a later line so it
   starts after the first); main.js adds .is-visible once the line scrolls
   into view.
   ========================================================================== */
.reveal-title {
    display: inline-block;
    opacity: 0;
    filter: blur(16px);
    transition: opacity 1.1s ease, filter 1.1s ease;
}

.reveal-title.is-visible {
    opacity: 1;
    filter: blur(0);
}

.reveal-title--delay {
    transition-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-title {
        opacity: 1;
        filter: none;
        transition: none;
    }
}

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 180px;
    color: var(--color-light);
    background-color: var(--color-dark);
    background-image:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 70%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 100%);
    background-size: cover;
    background-position: center;
}

.hero.has-fixed-banner {
    background-color: transparent;
    background-image: none;
}

/*
 * Photo banner (includes/hero-banner.php): one SVG in the photo's own
 * coordinates, cropped like object-fit: cover, so the light effects
 * always line up with the photo.
 */
.banner-stage {
    /* The travel scene is a viewport background; page sections scroll above it. */
    position: fixed !important;
    inset: 0 !important;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.banner-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Overlay that keeps the headline and cards readable over the photo */
.banner-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 35%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.55) 100%);
}

/* Car tail lights: slow breathing glow */
.banner-taillight {
    mix-blend-mode: screen;
    animation: banner-breathe 2.4s ease-in-out infinite alternate;
}

/*
 * Light streaks: a short bright dash races along each path.
 * pathLength="100" on the paths, so dash sizes are percentages of the path.
 */
.banner-streak {
    stroke: #FEBC17;
    stroke-width: 4;
    stroke-dasharray: 12 100;
    stroke-dashoffset: 12;
    mix-blend-mode: screen;
    animation: banner-streak-run 3.2s linear infinite both;
}

.banner-streak--road {
    stroke: #fff4d1;
    stroke-width: 5;
    animation-duration: 1.4s;
}

.banner-streak--late {
    animation-delay: -0.7s;
}

.banner-streak--kerb {
    stroke: #fff8df;
    stroke-width: 5;
    animation-duration: 1.15s;
    animation-delay: -0.35s;
}

.banner-streak--trail {
    stroke: #ffc21c;
    mix-blend-mode: normal;
    stroke-width: 2.5;
    stroke-dasharray: 16 100;
    stroke-dashoffset: 16;
    animation: banner-trail-run 1.8s linear infinite;
}

.banner-plane-beacon,
.banner-plane-strobe {
    animation: banner-wingtip-blink 1.6s steps(1, end) infinite;
}

.banner-star--twinkle {
    animation: banner-star-twinkle ease-in-out infinite;
}

@keyframes banner-star-twinkle {
    0%, 100% {
        opacity: var(--peak);
    }
    50% {
        opacity: calc(var(--peak) * 0.2);
    }
}

/* Two short, synchronized flashes on both wings, followed by a pause. */
@keyframes banner-wingtip-blink {
    0%, 18% {
        opacity: 1;
    }
    7%, 25%, 100% {
        opacity: 0;
    }
}

@keyframes banner-breathe {
    from {
        opacity: 0.35;
    }
    to {
        opacity: 1;
    }
}

@keyframes banner-streak-run {
    0% {
        stroke-dashoffset: 12;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -100;
        opacity: 0;
    }
}

@keyframes banner-trail-run {
    0% {
        stroke-dashoffset: 16;
        opacity: 1;
    }
    10%, 85% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -100;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner-taillight,
    .banner-streak,
    .banner-plane-beacon,
    .banner-plane-strobe,
    .banner-star--twinkle {
        animation: none;
    }

    .banner-streak {
        opacity: 0;
    }

    .banner-star--twinkle {
        opacity: var(--peak);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 0;
}

.hero-content > .btn > span {
    font-size: 18px;
}

.hero-title {
    font-size: 52px;
    font-weight: 400;
    color: var(--color-light);
}

.hero-title-accent {
    display: block;
    color: var(--color-primary);
}

.hero-text {
    margin-top: 20px;
    font-size: 20px;
    opacity: 0;
    translate: 0 16px;
    animation: hero-text-in 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) 0.6s forwards;
}

@keyframes hero-text-in {
    to {
        opacity: 0.9;
        translate: 0 0;
    }
}

.hero-options {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin: 30px 0;
}

/* Animatable angle for the light that travels around the card border */
@property --option-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/*
 * Option cards:
 * - rise in one after the other on load (uses `translate` so it doesn't clash with the tilt `transform`)
 * - a gold light travels around the border
 * - a gold spotlight follows the cursor (--mx / --my set in main.js)
 * - the card tilts toward the cursor (transform set in main.js)
 */
.hero-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 40%;
    max-width: 400px;
    padding: 18px 24px;
    text-align: left;
    border: 1px solid rgba(254, 188, 23, 0.35);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    translate: 0 30px;
    transform-style: preserve-3d;
    transition: transform 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    animation: option-rise 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) 0.8s forwards;
}

.hero-option:nth-child(2) {
    animation-delay: 1s;
}

/* Travelling border light */
.hero-option::before {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--option-angle), transparent 0deg, transparent 220deg, var(--color-primary) 330deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: option-border-spin 4s linear infinite;
    pointer-events: none;
}

.hero-option:nth-child(2)::before {
    animation-delay: -2s;
}

/* Cursor spotlight */
.hero-option::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(254, 188, 23, 0.16) 0%, transparent 45%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hero-option:hover {
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.hero-option:hover::after {
    opacity: 1;
}

.hero-option > span {
    position: relative;
    z-index: 1;
}

/* Icon badge: fills gold on hover */
.hero-option-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(254, 188, 23, 0.5);
    border-radius: 50%;
    color: var(--color-primary);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.hero-option-icon {
    width: 30px;
    height: 30px;
}

.hero-option:hover .hero-option-badge {
    background-color: var(--color-primary);
    color: var(--color-dark);
    transform: scale(1.06);
}

.hero-option-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
}

.hero-option-text strong {
    display: block;
    white-space: nowrap;
    font-size: 18px;
    color: var(--color-primary);
}

/* Arrow: slides forward into a filled gold circle on hover */
.hero-option-go {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--color-primary);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.hero-option:hover .hero-option-go {
    background-color: var(--color-primary);
    color: var(--color-dark);
    transform: translateX(6px);
}

@keyframes option-rise {
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes option-border-spin {
    to {
        --option-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-text {
        opacity: 0.9;
        translate: none;
        animation: none;
    }

    .hero-option {
        opacity: 1;
        translate: none;
        animation: none;
    }

    .hero-option::before {
        animation: none;
    }
}

/* Travelling border light relies on dual mask syntax (-webkit-mask-composite:
   xor alongside the modern mask:...exclude) to punch a ring out of the conic
   gradient. That combination doesn't render consistently on every touch/mobile
   browser - it can come out as an unmasked solid block with a gold edge instead
   of a thin ring on :hover/:active. It's also a mouse-hover flourish with no
   real payoff on a device that can't hover anyway, so skip it there instead of
   risking the broken render. */
@media (hover: none), (pointer: coarse) {
    .hero-option::before {
        display: none;
    }
}

/* Stats bar (used as the site footer) with gold lines on both sides */
.hero-stats {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 20px 3vw;
}

.hero-stats::before,
.hero-stats::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 100%);
}

.hero-stats::after {
    background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 20px;
    white-space: nowrap;
}

/* Stats keep their own size instead of the default paragraph size */
.hero-stat p {
    font-size: inherit;
}

.hero-stat svg {
    color: var(--color-primary);
}

.hero-stat strong {
    font-size: 26px;
    color: var(--color-primary);
}

.counter {
    font-variant-numeric: tabular-nums;
}

.hero-stat-divider {
    width: 1px;
    height: 36px;
    background-color: var(--color-primary);
}

/* ==========================================================================
   Booking hero video background
   ========================================================================== */
.booking-hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.booking-hero-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .booking-hero-video-el {
        display: none;
    }
}

/* ==========================================================================
   taxi-booking.php: headline + feature strip + ride cards, all on one
   continuous video background
   ========================================================================== */
.tb-page {
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-light);
    background-color: var(--color-dark);
    /* Clears the logo in the header (its tagline ends ~150px down) */
    padding: 158px 0 12px;
}

/* The shared photo banner is promoted outside ScrollSmoother's content wrapper. */
.tb-page.has-fixed-banner {
    background-color: transparent;
}

.tb-hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--content-w);
    margin: 0 auto;
    text-align: center;
}

.tb-hero-content .hero-title {
    line-height: 1.2;
}

.tb-hero-text {
    max-width: 640px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

/* Wide enough screens: the intro sentence stays on a single line */
@media (min-width: 992px) {
    .tb-hero-text {
        max-width: none;
        white-space: nowrap;
    }
}

.tb-card-form {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-card-form-row {
    display: flex;
    gap: 8px;
}

/* Input with its leading icon */
.tb-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.tb-field:focus-within {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tb-field svg {
    flex: none;
}

.tb-field input {
    flex: 1;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--color-light);
    font-size: 12px;
    font-family: inherit;
}

.tb-field input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.tb-field input:focus {
    outline: none;
}

.btn.tb-card-cta {
    --btn-size: 34px;
    margin-top: 4px;
    padding: 0 calc(var(--btn-size) + 12px) 0 18px;
}

.btn.tb-card-cta > span {
    font-size: 13px;
}

.btn.tb-card-cta > svg {
    width: 16px;
    height: 12px;
}

@media (max-width: 767px) {
    .tb-page {
        display: block;
        padding-top: 140px;
    }

    .tb-card-form-row {
        flex-direction: column;
    }
}

/* ==========================================================================
   Hero skyline - night towers behind the content, fading towards the centre
   ========================================================================== */
.hero-skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: 70vh;
    pointer-events: none;
    /* fade out towards the top */
    -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
    mask-image: linear-gradient(to top, #000 45%, transparent 100%);
    opacity: 0;
    translate: 0 40px;
    animation: skyline-rise 1.6s ease-out 0.1s forwards;
}

.hero-skyline svg {
    position: absolute;
    bottom: 0;
    height: 100%;
}

/* fade out towards the centre so the headline and cards stay clear */
.hero-skyline-left {
    left: 0;
    width: 32%;
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
    mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}

.hero-skyline-right {
    right: 0;
    width: 40%;
    -webkit-mask-image: linear-gradient(to left, #000 65%, transparent 100%);
    mask-image: linear-gradient(to left, #000 65%, transparent 100%);
}

.skyline-twinkle {
    animation: skyline-twinkle 6s ease-in-out infinite;
}

.skyline-beacon {
    animation: plane-strobe 2s steps(1) infinite;
}

/* Control tower radar sweeping round (flattening sideways reads as rotation) */
.airport-radar {
    transform-box: fill-box;
    transform-origin: center;
    animation: airport-radar 3s linear infinite;
}

/* Runway lights chase toward the runway */
.runway-light {
    opacity: 0.15;
    animation: runway-chase 1.6s linear infinite;
}

@keyframes airport-radar {
    0% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(-1);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes runway-chase {
    0% {
        opacity: 1;
    }
    25%,
    100% {
        opacity: 0.15;
    }
}

@keyframes skyline-rise {
    to {
        opacity: 0.85;
        translate: 0 0;
    }
}

@keyframes skyline-twinkle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-skyline {
        opacity: 1;
        translate: none;
        animation: none;
    }

    .skyline-twinkle,
    .skyline-beacon,
    .airport-radar,
    .runway-light {
        animation: none;
    }
}

/* ==========================================================================
   Hero taxi animation - car drives in along the road on page load
   ========================================================================== */
.hero-road {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 45%;
    height: 200px;
    pointer-events: none;
}

.hero-car {
    position: absolute;
    left: 2vw;
    bottom: 0;
    width: 420px;
    height: auto;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.8));
    transform: translateX(-130%);
    animation: taxi-drive-in 2.4s cubic-bezier(0.22, 0.9, 0.3, 1) 0.3s forwards;
}

/* Wheels spin while the car moves and stop when it parks (same timing as the drive) */
.hero-car-wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: taxi-wheel-spin 2.4s cubic-bezier(0.22, 0.9, 0.3, 1) 0.3s both;
}

@keyframes taxi-drive-in {
    0% {
        transform: translateX(-130%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes taxi-wheel-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1440deg);
    }
}

/* ==========================================================================
   Hero plane animation - flies in from bottom right, then floats
   ========================================================================== */
.hero-plane {
    position: absolute;
    top: 15vh;
    right: 6vw;
    z-index: 1;
    width: 320px;
    pointer-events: none;
    transform: translate(45vw, 60vh);
    animation: plane-fly-in 3s cubic-bezier(0.25, 0.8, 0.3, 1) 0.5s forwards;
}

/* Nose raised slightly for a climbing look; gentle float once it arrives */
.hero-plane-body {
    display: block;
    width: 100%;
    height: auto;
    transform: rotate(8deg);
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.7));
    animation: plane-float 4s ease-in-out 3.5s infinite alternate;
}

.hero-plane-strobe {
    animation: plane-strobe 1.2s steps(1) infinite;
}

.hero-plane-beacon {
    animation: plane-strobe 1.6s steps(1) 0.6s infinite;
}

@keyframes plane-fly-in {
    0% {
        transform: translate(45vw, 60vh);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes plane-float {
    0% {
        transform: rotate(8deg) translateY(0);
    }
    100% {
        transform: rotate(6deg) translateY(-10px);
    }
}

@keyframes plane-strobe {
    0% {
        opacity: 1;
    }
    15% {
        opacity: 0;
    }
}

/* Respect users who turn off animations: show the car parked and the plane in place */
@media (prefers-reduced-motion: reduce) {
    .hero-plane,
    .hero-plane-body,
    .hero-plane-strobe,
    .hero-plane-beacon {
        animation: none;
    }

    .hero-plane {
        transform: none;
    }

    .hero-car,
    .hero-car-wheel {
        animation: none;
        transform: none;
    }
}

/* ==========================================================================
   Individual booking page - service wheel
   ========================================================================== */
.booking-wheel {
    display: block;
    width: min(580px, 90vw); /* scales with browser zoom without a viewport-height cap */
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

.booking-wheel text {
    font-family: var(--font-primary);
}

.wheel-ring {
    filter: drop-shadow(0 0 10px rgba(254, 188, 23, 0.5));
}

/* Light travelling round the outer ring */
.wheel-ring-spin {
    transform-box: view-box;
    transform-origin: 300px 300px;
    filter: drop-shadow(0 0 6px var(--color-primary));
    animation: wheel-spin 8s linear infinite;
}

/* Each sector pops in, then grows slightly on hover / keyboard focus */
.wheel-sector {
    cursor: pointer;
    outline: none;
    transform-box: view-box;
    transform-origin: 300px 300px;
    opacity: 0;
    transition: transform 0.35s ease, filter 0.35s ease;
    animation: wheel-sector-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

/* Held until the page has fully loaded (see individual-booking.php), so the
   entrance never plays while images are still decoding and stutters */
.booking-wheel:not(.is-ready) .wheel-sector {
    animation-play-state: paused;
}

/* Hovering (or keyboard-focusing) one sector embosses it - brighter and
   lifted with a gold glow - while the other three dim back, so attention
   lands on the one you're about to pick. No transform/scale here: a pie
   slice scaled from the wheel's centre pushes its outer curved edge past
   the fixed gold ring, showing a dark crescent of overshoot outside it. */
.booking-wheel:has(.wheel-sector:hover, .wheel-sector:focus-visible) .wheel-sector {
    filter: brightness(0.55) saturate(0.75);
}

.booking-wheel:has(.wheel-sector:hover, .wheel-sector:focus-visible) .wheel-sector:hover,
.booking-wheel:has(.wheel-sector:hover, .wheel-sector:focus-visible) .wheel-sector:focus-visible {
    filter: brightness(1.12) saturate(1.12) contrast(1.03) drop-shadow(0 0 10px rgba(254, 188, 23, 0.35));
}

.wheel-sector--taxi {
    animation-delay: 0.1s;
}

.wheel-sector--hotel {
    animation-delay: 0.3s;
}

.wheel-sector--flight {
    animation-delay: 0.5s;
}

.wheel-sector--holiday {
    animation-delay: 0.7s;
}

/* Photography within each service sector. Zooming the photo itself (not the
   sector shape) gives the "pop" without ever exceeding the fixed pie slice
   it's clipped to. */
.sector-art {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0.85;
    transition: opacity 0.35s ease, transform 0.5s ease;
}

.wheel-sector:hover .sector-art,
.wheel-sector:focus-visible .sector-art {
    opacity: 1;
    transform: scale(1.12);
}

/* Dark overlay above the photo so the icon, label and arrow stay legible */
.sector-shade {
    fill: #000000;
    fill-opacity: 0.5;
    transition: fill-opacity 0.35s ease;
}

.wheel-sector:hover .sector-shade,
.wheel-sector:focus-visible .sector-shade {
    fill-opacity: 0.35;
}

/* Dark gap between sectors */
.sector-gap {
    fill: none;
    stroke: #0b0b0b;
    stroke-width: 8;
}

/* Gold border + glow for the hovered sector (drawn in a layer above all sectors) */
.wheel-highlights {
    pointer-events: none;
}

.sector-border {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 7;
}

.wheel-highlight {
    opacity: 0;
    filter: drop-shadow(0 0 2px rgba(254, 188, 23, 0.8)) drop-shadow(0 0 6px rgba(254, 188, 23, 0.35));
    transition: opacity 0.35s ease;
}

.booking-wheel:has(.wheel-sector--taxi:hover, .wheel-sector--taxi:focus-visible) .wheel-highlight--taxi,
.booking-wheel:has(.wheel-sector--flight:hover, .wheel-sector--flight:focus-visible) .wheel-highlight--flight,
.booking-wheel:has(.wheel-sector--hotel:hover, .wheel-sector--hotel:focus-visible) .wheel-highlight--hotel,
.booking-wheel:has(.wheel-sector--holiday:hover, .wheel-sector--holiday:focus-visible) .wheel-highlight--holiday {
    opacity: 1;
}

.sector-icon-img {
    /* Two tight gold glows fatten the hairline strokes without softening them;
       the dark shadow keeps the artwork readable over the photos */
    filter:
        drop-shadow(0 0 0.5px var(--color-primary))
        drop-shadow(0 0 0.5px var(--color-primary))
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
}

.sector-icon {
    color: var(--color-primary);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.wheel-sector:hover .sector-icon,
.wheel-sector:focus-visible .sector-icon {
    transform: scale(1.15) translateY(-2px);
}

.sector-label {
    fill: var(--color-light);
    font-size: 24px;
    font-weight: 700;
    paint-order: stroke fill;
    stroke: rgba(0, 0, 0, 0.8);
    stroke-width: 3px;
    stroke-linejoin: round;
    filter: url(#sector-label-shadow);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.wheel-sector:hover .sector-label,
.wheel-sector:focus-visible .sector-label {
    transform: scale(1.06);
}

.sector-label--multiline {
    font-size: 20px;
}

.sector-go {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.sector-go circle {
    fill: var(--color-primary);
}

.sector-go path {
    stroke: var(--color-dark);
}

.wheel-sector:hover .sector-go,
.wheel-sector:focus-visible .sector-go {
    transform: scale(1.2);
}

.wheel-center-text {
    fill: var(--color-light);
    font-size: 22px;
}

@keyframes wheel-sector-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes wheel-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wheel-sector {
        opacity: 1;
        animation: none;
        transition: none;
    }

    .wheel-ring-spin {
        animation: none;
    }
}

/* ==========================================================================
   Preloader (home page)
   ========================================================================== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background-color: #000000;
    color: var(--color-light);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.9s;
    /* Failsafe: never block the page for more than 14 seconds */
    animation: preloader-failsafe 0.7s ease 14s forwards;
}

.preloader.is-done {
    opacity: 0;
    visibility: hidden;
}

/* Keep the page still (and unscrollable) behind the preloader */
.preloading {
    overflow: hidden;
}

.preloading .hero *,
.preloading .hero *::before,
.preloading .hero *::after {
    animation-play-state: paused !important;
}

.preloader-logo {
    width: 240px;
    height: auto;
    opacity: 0;
    animation: preloader-fade-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* Taxi -> Aeroplane -> Hotel -> Vacation: four real flat-icon SVGs take turns,
   crossfading, to signal the business books more than just taxis. Timing is
   fixed (not tied to the preloader's minimum display time) so the full loop
   is visible even on a short repeat-visit preload. */
.preloader-icons {
    position: relative;
    width: min(230px, 62vw);
    aspect-ratio: 240 / 84;
}

.preloader-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    overflow: visible;
    filter: drop-shadow(0 0 5px rgba(254, 188, 23, 0.45));
}

/* Each icon plays once, in order (Taxi, Aeroplane, Hotel, Vacation), 0.6s
   apiece; the last one holds until the preloader lifts. */
.preloader-icon--1 { animation: preloader-icon-once 0.6s linear 0.22s both; }
.preloader-icon--2 { animation: preloader-icon-once 0.6s linear 0.82s both; }
.preloader-icon--3 { animation: preloader-icon-once 0.6s linear 1.42s both; }
.preloader-icon--4 { animation: preloader-icon-last 0.6s linear 2.02s both; }

/* The artwork has different proportions, so object-fit: contain makes the
   near-square Hotel and Vacation drawings far smaller than the wide taxi and
   aeroplane; scale them up so all four look the same size. */
.preloader-icon--3 { scale: 1.4; }
.preloader-icon--4 { scale: 1.5; }

/* Gold loading bar pinned to the bottom of the screen; main.js completes it on load */
.preloader-loadbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: rgba(254, 188, 23, 0.15);
    overflow: hidden;
}

.preloader-loadbar span {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
    transform: scaleX(var(--preloader-progress, 0));
    transform-origin: left;
    transition: transform 0.12s linear;
}

.preloader.is-loaded .preloader-loadbar span {
    transform: scaleX(1);
    transition: transform 0.4s ease;
}

@keyframes preloader-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shared by all three icons (each offset via animation-delay): fades in for
   its turn, holds, fades out, then waits for the other two before repeating. */
@keyframes preloader-icon-last {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes preloader-icon-once {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes preloader-icon-cycle {
    0% {
        opacity: 0;
    }
    3% {
        opacity: 1;
    }
    22% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes preloader-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .preloader-icon {
        animation: none;
    }

    /* Just the taxi, at rest - no cycling through the others */
    .preloader-icon--1 {
        opacity: 1;
    }

    .preloader-icon--2,
    .preloader-icon--3,
    .preloader-icon--4 {
        display: none;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    position: relative;
    background-color: var(--color-dark);
    color: var(--color-light);
}

/* Gold line along the top edge of the page's bottom bar, fading out at the far ends */
.page-strip {
    position: relative;
    background-color: var(--color-dark);
    color: var(--color-light);
}

.page-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100%);
    box-shadow: 0 0 8px var(--color-primary);
}

/* ==========================================================================
   Desktop: header + hero scaled to match the 742 x 420 design mockup.
   --u = one design pixel. It scales with the viewport so the whole design
   fits the screen (width-limited or height-limited, whichever is smaller).
   ========================================================================== */
@media (min-width: 992px) {
    :root {
        --u: min(0.1348vw, 0.238vh);
    }

    /* Fixed-size text (60px h1), so the column is sized in px, not scaled */
    .hero-content {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
    }

    .hero {
        padding-top: 170px;
    }

    .hero-title {
        line-height: 1.2;
    }

    .hero-text {
        margin-top: calc(7 * var(--u));
    }

    .hero-options {
        gap: calc(16 * var(--u));
        margin: calc(16 * var(--u)) 0 calc(20 * var(--u));
    }

    .hero-option {
        width: calc(194 * var(--u));
        max-width: none;
        height: calc(55 * var(--u));
        gap: calc(9 * var(--u));
        padding: 0 calc(12 * var(--u));
        border-radius: calc(6 * var(--u));
    }

    .hero-option-badge {
        width: calc(28 * var(--u));
        height: calc(28 * var(--u));
    }

    .hero-option-icon {
        width: calc(15 * var(--u));
        height: calc(15 * var(--u));
    }

    .hero-option-text {
        font-size: max(12px, calc(8 * var(--u)));
    }

    .hero-option-text strong {
        font-size: max(14px, calc(9.5 * var(--u)));
    }

    .hero-option-go {
        width: calc(20 * var(--u));
        height: calc(20 * var(--u));
    }

    .hero-option-arrow {
        width: calc(10 * var(--u));
        height: calc(10 * var(--u));
    }

    .btn {
        --btn-size: calc(30 * var(--u) - 6px);
        padding-left: calc(24 * var(--u));
        font-size: max(13px, calc(9 * var(--u)));
    }

    .btn svg {
        width: calc(11 * var(--u));
        height: calc(11 * var(--u));
    }

    .hero-road {
        height: calc(120 * var(--u));
    }

    .hero-car {
        width: calc(200 * var(--u));
    }

    .hero-plane {
        width: calc(150 * var(--u));
    }

    .hero-stats {
        height: calc(34 * var(--u));
        padding: 0;
        gap: calc(24 * var(--u));
    }

    .hero-stat {
        gap: calc(10 * var(--u));
        font-size: max(14px, calc(11 * var(--u)));
    }

    .hero-stat svg {
        width: calc(22 * var(--u));
        height: calc(22 * var(--u));
    }

    .hero-stat strong {
        font-size: max(18px, calc(14 * var(--u)));
    }

    .hero-stat-divider {
        height: calc(22 * var(--u));
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
    h1 { font-size: 38px; }
    h2 { font-size: 30px; }

    .section {
        padding: 60px 0;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-option {
        width: 50%;
    }

    .hero-side,
    .hero-road,
    .hero-plane,
    .hero-skyline {
        display: none;
    }
}

@media (max-width: 767px) {
    h1 { font-size: 30px; }
    h2 { font-size: 24px; }

    .section {
        padding: 40px 0;
    }

    .logo img {
        width: 180px;
    }

    .header-contact {
        justify-content: center;
        gap: 12px;
        font-size: 12px;
    }

    .header-divider {
        height: 22px;
    }

    .header-phone a {
        font-size: 14px;
    }

    /* Narrow screens crop the photo: keep the car in view */
    /* Hours on their own line so they can't overlap the logo */
    .header-phone small {
        position: static;
        display: block;
        font-size: 9px;
    }

    /* Not enough room for the divider alongside everything else on one line:
       back link + phone share the top row, "Made in India" wraps onto its own row below. */
    .header-contact {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .header-nav {
        order: 1;
    }

    .header-nav ~ .header-phone {
        order: 2;
        margin-left: auto;
    }

    .header-nav ~ .header-divider {
        display: none;
    }

    .header-nav ~ .made-in-india {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
    }


    .hero {
        padding-top: 170px;
    }

    .home .hero-content {
        transform: translateY(-40px);
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-options {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .hero-option {
        width: 100%;
    }

    .hero-stats {
        flex-direction: column;
        gap: 12px;
    }

    .hero-stats::before,
    .hero-stats::after,
    .hero-stat-divider {
        display: none;
    }

    .hero-stat {
        font-size: 16px;
    }

    .hero-stat strong {
        font-size: 20px;
    }
}

/* ==========================================================================
   Cursor dot (see main.js): white dot that trails the pointer
   ========================================================================== */
.cursor-dot {
    position: fixed;
    top: -8px;
    left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ffffff;
    pointer-events: none;
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: transform;
}

.cursor-dot.is-visible {
    opacity: 1;
}

/* Booking form: country-code picker, field errors and the result message */
.tb-field--phone select {
    flex: none;
    max-width: 78px;
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--color-light);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.tb-field--phone select:focus {
    outline: none;
}

.tb-field--phone select option {
    color: #0b0b0b;
}

.tb-field--phone input {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 8px;
}

.tb-field.is-invalid {
    border-color: #ff5a5a;
    color: #ff5a5a;
}

.tb-card-status {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

.tb-card-status.is-error {
    color: #ff7a7a;
}

.tb-card-status.is-success {
    color: #6fdc8c;
}

/* WhatsApp code step */
.tb-card-verify {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-card-verify-links {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.tb-card-verify-links button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.tb-field input:disabled,
.tb-field select:disabled {
    opacity: 0.6;
}

/* display: flex above would otherwise override the hidden attribute */
.tb-card-verify[hidden] {
    display: none;
}

/* Wide screens: the hero content runs wider */
@media (min-width: 1200px) {
    .tb-hero-content {
        max-width: var(--content-w);
    }
}

/* ==========================================================================
   flight-booking.php: savings headline, 3 steps, CTA and review carousel on
   the same hero banner as the home page
   ========================================================================== */
.fb-hero {
    max-width: var(--content-w);
}

.fb-hero .hero-title {
    line-height: 1.1;
}

.fb-accent {
    font-weight: 400;
    color: var(--color-primary);
}

.fb-page > * {
    flex-shrink: 0;
}

.fb-kicker {
    margin-top: 0;
    margin-bottom: 26px;
    font-size: 26px;
    line-height: 1.2;
    color: var(--color-primary);
}

.fb-steps {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
    max-width: var(--content-w);
    margin: 0 auto;
}

.fb-step {
    position: relative;
    flex: 1 1 0;
    max-width: 410px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 250px;
    padding: 16px 18px 32px;
    /* Clips the phone at the card's rounded bottom but lets the number badge sit over the top edge */
    clip-path: inset(-20px 0 0 0 round 16px);
    text-align: center;
    border-radius: 16px;
    border: 1px solid rgba(254, 188, 23, 0.35);
    background-color: rgba(11, 11, 11, 0.82);
}

.fb-step-num {
    position: absolute;
    top: -1px;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 18px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    font-weight: 700;
    color: var(--color-dark);
    background-color: var(--color-primary);
}

.fb-step-title {
    margin-top: 6px;
    font-size: 19px;
    font-weight: 600;
    color: var(--color-light);
}

.fb-step-text {
    font-size: 16px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.75);
}

.fb-step-text--small {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.65);
}

.fb-step-art {
    height: 46px;
    margin: 4px 0 2px;
    color: var(--color-primary);
}

.fb-step-arrow {
    align-self: center;
    font-size: 30px;
    line-height: 1;
    color: var(--color-primary);
}

/* Phone mock-up in step 1 */
.fb-phone {
    width: 170px;
    margin: 8px 0 -36px;
    padding: 8px 8px 0;
    border-radius: 18px 18px 0 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-bottom: 0;
    background-color: #f4f5f7;
    color: #222;
    text-align: left;
}

.fb-phone-route {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 2px 0 6px;
    font-size: 12px;
}

.fb-fare {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-top: 1px solid #dcdee3;
}

.fb-fare-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 3px;
}

.fb-fare-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.15;
}

.fb-fare-info b {
    font-size: 10px;
}

.fb-fare-info small {
    font-size: 9px;
    color: #666;
}

.fb-fare-price {
    font-size: 11px;
    font-weight: 700;
}

.fb-cta-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.btn.fb-cta {
    --btn-size: 52px;
    padding: 0 calc(var(--btn-size) + 18px) 0 32px;
}

.btn.fb-cta > span {
    font-size: 20px;
}

.fb-stories {
    position: relative;
    z-index: 2;
    max-width: var(--content-w);
    margin: 30px auto 0;
    text-align: center;
}

.fb-stories-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;
}

.fb-stories-title::before,
.fb-stories-title::after {
    content: "";
    width: 40px;
    height: 2px;
    background-color: #ffffff;
}

.fb-stories-sub {
    margin-top: 2px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75);
}

.fb-carousel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.fb-carousel-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.fb-carousel-track {
    display: flex;
    gap: 14px;
}

.fb-carousel-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--color-light);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(11, 11, 11, 0.6);
    cursor: pointer;
}

.fb-review {
    flex: 0 0 calc((100% - 28px) / 3);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px;
    text-align: left;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background-color: rgba(11, 11, 11, 0.82);
}

.fb-review-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    align-self: flex-start;
    font-size: 14px;
    border-radius: 50%;
    font-weight: 600;
    color: var(--color-dark);
    background-color: var(--color-primary);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.fb-review blockquote {
    font-size: 16px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
}

.fb-review-mark {
    margin-right: 4px;
    font-size: 26px;
    line-height: 0;
    vertical-align: -8px;
    color: var(--color-primary);
}

.fb-review-stars svg {
    width: 16px;
    height: 16px;
}

.fb-review-stars {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    color: var(--color-primary);
}

.fb-review figcaption {
    margin-top: 2px;
    font-size: 16px;
    color: var(--color-light);
}

.fb-review figcaption small {
    display: inline;
    margin-left: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}

.fb-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.fb-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
}

.fb-dots button.is-active {
    background-color: var(--color-primary);
}

@media (max-width: 991px) {
    .fb-steps {
        flex-direction: column;
        align-items: center;
    }

    .fb-step {
        width: 100%;
        max-width: 420px;
    }

    .fb-step-arrow {
        rotate: 90deg;
    }

    .fb-review {
        flex-basis: 100%;
    }

    .fb-kicker {
        font-size: 22px;
    }
}

/* hotel-booking.php additions (shares the fb-* layout with flight-booking.php) */
.fb-hero .hero-title .fb-accent {
    font-weight: 400;
}

.fb-kicker--white {
    color: var(--color-light);
}

.fb-hotel {
    display: flex;
    gap: 8px;
    padding-bottom: 6px;
}

.fb-hotel-photo {
    width: 46px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, #c9a56a, #5b4a35);
}

.fb-hotel-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.fb-hotel-info b {
    font-size: 11px;
}

.fb-hotel-info small,
.fb-hotel-price small {
    font-size: 9px;
    color: #666;
}

.fb-hotel-perks {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid #dcdee3;
    font-size: 9px;
    color: #2a5db0;
}

.fb-hotel-price {
    display: flex;
    flex-direction: column;
    padding: 4px 0 8px;
    border-top: 1px solid #dcdee3;
}

.fb-hotel-price b {
    font-size: 16px;
}

.fb-icon-row {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin: 12px 0 8px;
    list-style: none;
    color: var(--color-primary);
}

.fb-icon-row svg {
    width: 46px;
    height: 46px;
}

.fb-icon-row li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Hotel booking step icons: small loops keep the highlighted actions alive. */
.fb-icon-row svg {
    overflow: visible;
    transform-box: view-box;
    transform-origin: 50% 50%;
}

.fb-icon-row li:nth-child(1) svg {
    animation: fb-hotel-calendar 3s ease-in-out infinite;
}

.fb-icon-row li:nth-child(1) svg path:last-child {
    stroke-dasharray: 18;
    stroke-dashoffset: 18;
    animation: fb-hotel-calendar-days 3s ease-in-out infinite;
}

.fb-icon-row li:nth-child(2) svg {
    animation: fb-hotel-room 3.2s ease-in-out infinite;
}

.fb-icon-row li:nth-child(3) svg {
    animation: fb-hotel-persons 3.4s ease-in-out infinite;
}

@keyframes fb-hotel-calendar {
    0%, 70%, 100% { transform: translateY(0); }
    15% { transform: translateY(-3px); }
    30% { transform: translateY(0) rotate(-4deg); }
}

@keyframes fb-hotel-calendar-days {
    0%, 12% { stroke-dashoffset: 18; }
    38%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 18; }
}

@keyframes fb-hotel-room {
    0%, 65%, 100% { transform: translateX(0) rotate(0); }
    18% { transform: translateX(2px) rotate(3deg); }
    35% { transform: translateX(0) rotate(-2deg); }
}

@keyframes fb-hotel-persons {
    0%, 65%, 100% { transform: translateY(0) scale(1); }
    20% { transform: translateY(-3px) scale(1.06); }
    38% { transform: translateY(0) scale(1); }
}

/* The price tag tilts, then gives its rupee mark a quick pop. */
.fb-step-art {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: fb-hotel-tag 3s ease-in-out infinite;
}

.fb-step-art text {
    transform-box: fill-box;
    transform-origin: center;
    animation: fb-hotel-price-mark 3s ease-in-out infinite;
}

@keyframes fb-hotel-tag {
    0%, 68%, 100% { transform: rotate(0deg) translateY(0); }
    18% { transform: rotate(-7deg) translateY(-3px); }
    36% { transform: rotate(5deg) translateY(0); }
}

@keyframes fb-hotel-price-mark {
    0%, 45%, 100% { transform: scale(1); }
    55% { transform: scale(1.15); }
    65% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .fb-icon-row svg,
    .fb-icon-row svg path,
    .fb-step-art,
    .fb-step-art text {
        animation: none;
    }
}

/* Detailed hotel icon animation pass: animate the icon parts themselves rather
   than only moving the complete SVG from side to side. */
.fb-icon-row li:nth-child(1) svg {
    animation: none;
}
.fb-icon-row li:nth-child(1) svg rect {
    stroke-dasharray: 54;
    stroke-dashoffset: 54;
    animation: fb-draw-calendar 3.4s ease-in-out infinite;
}
.fb-icon-row li:nth-child(1) svg path:first-of-type {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: fb-draw-calendar-header 3.4s ease-in-out infinite;
}
.fb-icon-row li:nth-child(1) svg path:last-of-type {
    stroke-dasharray: 18;
    stroke-dashoffset: 18;
    animation: fb-draw-calendar-days 3.4s ease-in-out infinite;
}

.fb-icon-row li:nth-child(2) svg {
    animation: none;
}
.fb-icon-row li:nth-child(2) svg path {
    stroke-dasharray: 56;
    stroke-dashoffset: 56;
    animation: fb-draw-bed 3.4s ease-in-out infinite;
}
.fb-icon-row li:nth-child(2) svg circle {
    transform-box: view-box;
    transform-origin: 7px 11px;
    animation: fb-bed-pillow 3.4s ease-in-out infinite;
}

.fb-icon-row li:nth-child(3) svg circle {
    transform-box: view-box;
    transform-origin: center;
    animation: fb-person-pop 3.4s ease-in-out infinite;
}
.fb-icon-row li:nth-child(3) svg circle:nth-child(2) { animation-delay: .12s; }
.fb-icon-row li:nth-child(3) svg circle:nth-child(3) { animation-delay: .24s; }
.fb-icon-row li:nth-child(3) svg path {
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
    animation: fb-draw-people 3.4s ease-in-out infinite;
}

.fb-step-art {
    width: 60px;
    height: 52px;
    animation: none;
}
.fb-step-art path {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: fb-draw-tag 3.6s ease-in-out infinite;
}
.fb-step-art circle {
    transform-box: view-box;
    transform-origin: 58px 17px;
    animation: fb-tag-hole 3.6s ease-in-out infinite;
}
.fb-step-art text {
    animation: fb-tag-currency 3.6s ease-in-out infinite;
}

@keyframes fb-draw-calendar {
    0%, 8% { stroke-dashoffset: 54; }
    32%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 54; }
}
@keyframes fb-draw-calendar-header {
    0%, 20% { stroke-dashoffset: 30; }
    42%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 30; }
}
@keyframes fb-draw-calendar-days {
    0%, 30% { stroke-dashoffset: 18; }
    52%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 18; }
}
@keyframes fb-draw-bed {
    0%, 8% { stroke-dashoffset: 56; }
    38%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 56; }
}
@keyframes fb-bed-pillow {
    0%, 35%, 78%, 100% { transform: scale(1); }
    48% { transform: scale(1.2); }
}
@keyframes fb-person-pop {
    0%, 20%, 78%, 100% { transform: scale(.55); opacity: .25; }
    38%, 62% { transform: scale(1); opacity: 1; }
}
@keyframes fb-draw-people {
    0%, 30% { stroke-dashoffset: 42; }
    52%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 42; }
}
@keyframes fb-draw-tag {
    0%, 8% { stroke-dashoffset: 180; }
    40%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 180; }
}
@keyframes fb-tag-hole {
    0%, 40%, 78%, 100% { transform: scale(.4); opacity: .3; }
    52%, 68% { transform: scale(1); opacity: 1; }
}
@keyframes fb-tag-currency {
    0%, 45%, 78%, 100% { transform: scale(.6); opacity: .3; }
    56%, 68% { transform: scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fb-icon-row svg,
    .fb-icon-row svg *,
    .fb-step-art,
    .fb-step-art * {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
        transform: none;
    }
}

.fb-icon-row span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   taxi-booking.php: hero + feature slider, fleet, enquiry form, reviews
   ========================================================================== */
.tbn-page {
    position: relative;
    flex: 1;
    color: var(--color-light);
}

/* The home banner and its effects stay fixed to the screen while the page scrolls over them */
.tbn-page > .banner-stage,
.legal-page > .banner-stage,
body > .banner-stage {
    position: fixed;
}

.tbn-hero,
.tbn-section {
    position: relative;
    z-index: 1;
}

.tbn-hero {
    /* Clears the logo in the header (its tagline ends ~150px down) */
    padding: 168px 0 34px;
    text-align: center;
}

.tbn-hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--content-w);
    margin: 0 auto;
}

.tbn-hero .hero-title {
    line-height: 1.12;
}

.tbn-hero .hero-title-accent {
    font-weight: 400;
}

.tbn-rule {
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 48px;
    background-color: var(--color-primary);
}

/* Shared slider (feature strip + reviews) */
.tbn-slider {
    --gap: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tbn-features {
    --per-view: 3;
}

.tbn-reviews-slider {
    --per-view: 3;
}

.tbn-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.tbn-track {
    display: flex;
    gap: var(--gap);
    list-style: none;
}

.tbn-track > * {
    flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
}

.tbn-arrow {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: var(--color-light);
    border: 1px solid rgba(255, 255, 255, 0.55);
    background-color: rgba(11, 11, 11, 0.6);
    cursor: pointer;
}

.tbn-arrow:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tbn-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.tbn-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
}

.tbn-dots button.is-active {
    background-color: var(--color-primary);
}

/* Feature strip */
.tbn-features .tbn-viewport {
    border-radius: 18px;
    border: 1px solid rgba(254, 188, 23, 0.55);
    background-color: rgba(11, 11, 11, 0.72);
    box-shadow: 0 0 22px rgba(254, 188, 23, 0.12);
}

.tbn-features .tbn-track {
    gap: 0;
}

.tbn-features .tbn-track > * {
    flex: 0 0 calc(100% / var(--per-view));
}

.tbn-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    text-align: left;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.tbn-feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid rgba(254, 188, 23, 0.6);
    background-color: rgba(254, 188, 23, 0.08);
    color: var(--color-primary);
}

.tbn-feature strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
}

.tbn-feature small {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.7);
}

/* Section scaffolding */
.tbn-section {
    padding: 14px 0;
}

.tbn-title,
.tbn-car-name,
.tbn-enquiry-title {
    color: var(--color-light);
}

.tbn-wrap {
    max-width: var(--content-w);
    margin: 24px auto 0px auto;
}

.tbn-heading {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}

.tbn-title {
    position: relative;
    padding-bottom: 8px;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap;
}

.tbn-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 2px;
    background-color: var(--color-primary);
}

.tbn-title span {
    color: var(--color-primary);
}

.tbn-lead {
    max-width: 330px;
    padding-bottom: 8px;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
}

.tbn-heading--split {
    align-items: flex-end;
    justify-content: space-between;
}

.tbn-trusted {
    font-size: 16px;
    line-height: 1.35;
    text-align: right;
    color: rgba(255, 255, 255, 0.75);
}

.tbn-trusted strong {
    color: var(--color-primary);
}

/* Fleet */
.tbn-fleet-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.tbn-car {
    display: flex;
    flex-direction: column;
    padding: 0 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background-color: rgba(11, 11, 11, 0.82);
}

.tbn-car-art {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 190px;
    margin: 0 -16px 12px;
    padding: 12px 10px 0;
}

.tbn-car-art img,
.tbn-car-art svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tbn-car-name {
    font-size: 21px;
    font-weight: 600;
}

.tbn-car-seats {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 16px;
    color: var(--color-light);
}

.tbn-car-seats svg {
    color: var(--color-primary);
}

.tbn-car-points {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    list-style: none;
}

.tbn-car-points li {
    position: relative;
    margin-top: 6px;
    padding-left: 16px;
    font-size: 16px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.8);
}

.tbn-car-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

/* Enquiry */
.tbn-enquiry-card {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: center;
    padding: 30px 36px;
    overflow: visible; /* lets the city suggestion list extend past the card */
    border-radius: 18px;
    border: 1px solid rgba(254, 188, 23, 0.6);
    background-color: rgba(11, 11, 11, 0.92);
}

.tbn-enquiry-title {
    font-size: 36px;
    font-weight: 400;
    line-height: 1.12;
}

.tbn-enquiry-title span {
    color: var(--color-primary);
}

.tbn-enquiry-intro p {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
}

.tbn-form {
    max-width: 640px;
    margin-top: 0;
    gap: 12px;
}

.tbn-form .tb-card-form-row {
    gap: 12px;
}

.tbn-form .tb-field {
    padding: 0 14px;
    border-radius: 10px;
}

.tbn-form .tb-field input,
.tbn-form .tb-field select {
    padding: 14px 0;
    font-size: 16px;
}

.tbn-form .tb-field select {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--color-light);
    font-family: inherit;
    cursor: pointer;
}

.tbn-form .tb-field select:focus {
    outline: none;
}

.tbn-form .tb-field select option {
    color: #0b0b0b;
}

.tbn-form .tb-field--phone select {
    flex: none;
    max-width: 96px;
}

.tbn-form input[type="date"],
.tbn-form input[type="time"] {
    color-scheme: dark;
}

.tbn-form .tb-card-status {
    font-size: 15px;
}

.tbn-form .tb-card-verify-links {
    font-size: 15px;
}

.tbn-form .btn.tb-card-cta {
    --btn-size: 44px;
    margin-top: 2px;
    padding: 0 calc(var(--btn-size) + 14px) 0 24px;
}

.tbn-form .btn.tb-card-cta > span {
    font-size: 18px;
}

.tbn-assure {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    margin-top: 8px;
    list-style: none;
}

.tbn-assure li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
}

.tbn-assure svg {
    color: var(--color-primary);
    overflow: visible;
    transform-box: view-box;
    transform-origin: 50% 50%;
}

/* Enquiry-card assurances: each highlighted icon has a distinct, low-key loop. */
.tbn-assure li:nth-child(1) svg { animation: tbn-assure-response 2.8s ease-in-out infinite; }
.tbn-assure li:nth-child(2) svg { animation: tbn-assure-tag 3s ease-in-out infinite; }
.tbn-assure li:nth-child(3) svg path:first-child {
    transform-box: view-box;
    transform-origin: 12px 12px;
    animation: tbn-assure-shield 2.8s ease-in-out infinite;
}
.tbn-assure li:nth-child(3) svg path:nth-child(2) {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    animation: tbn-assure-check 2.8s ease-in-out infinite;
}

@keyframes tbn-assure-response {
    0%, 70%, 100% { transform: translateY(0); }
    15% { transform: translateY(-3px); }
    30% { transform: translateY(0) rotate(-3deg); }
}
@keyframes tbn-assure-tag {
    0%, 65%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-12deg); }
    30% { transform: rotate(8deg); }
    45% { transform: rotate(-3deg); }
}
@keyframes tbn-assure-shield {
    0%, 60%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
}
@keyframes tbn-assure-check {
    0%, 12% { stroke-dashoffset: 10; }
    35%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 10; }
}

@media (prefers-reduced-motion: reduce) {
    .tbn-assure li:nth-child(1) svg,
    .tbn-assure li:nth-child(2) svg,
    .tbn-assure li:nth-child(3) svg path {
        animation: none;
    }
}

/* Reviews */
.tbn-review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background-color: rgba(11, 11, 11, 0.82);
}

.tbn-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tbn-review-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-weight: 600;
    color: var(--color-dark);
    background-color: var(--color-primary);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.tbn-review figcaption strong {
    display: block;
    font-size: 16px;
    line-height: 1.2;
}

.tbn-review figcaption small {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.tbn-review-stars {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    color: var(--color-primary);
}

.tbn-review blockquote {
    font-size: 16px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 1199px) {
    .tbn-fleet-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tbn-features {
        --per-view: 2;
    }

    .tbn-reviews-slider {
        --per-view: 2;
    }

    .tbn-enquiry-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .tbn-hero {
        padding-top: 150px;
    }

    .tbn-fleet-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tbn-features,
    .tbn-reviews-slider {
        --per-view: 1;
    }

    .tbn-heading,
    .tbn-heading--split {
        flex-direction: column;
        align-items: flex-start;
    }

    .tbn-trusted {
        text-align: left;
    }

    .tbn-title {
        white-space: normal;
        font-size: 30px;
    }

    .tbn-enquiry-card {
        padding: 22px 18px;
    }

    .tbn-form .tb-card-form-row {
        flex-direction: column;
    }

    .tbn-assure {
        flex-direction: column;
    }

    .tbn-arrow {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .tbn-fleet-grid {
        grid-template-columns: 1fr;
    }
}

.booking-page {
    background-color: var(--color-dark);
}

/* Enquiry form: match the design mock-up */
.tbn-enquiry-card {
    grid-template-columns: 250px 1fr;
}

.tbn-form {
    max-width: 640px;
}

.tbn-form .tb-field {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
}

.tbn-form .tb-field input,
.tbn-form .tb-field select {
    font-size: 16px;
}

.tbn-form .tb-field select:invalid {
    color: rgba(255, 255, 255, 0.45);
}

.tbn-form .tb-field--phone {
    gap: 10px;
}

.tbn-form .tb-field--phone .tbn-flag {
    flex: none;
    width: 24px;
    height: 16px;
}

.tbn-form .tb-field--phone select {
    max-width: 92px;
}

.tbn-row-city .tb-field:first-child {
    flex: 0.85;
}

.tbn-row-city .tb-field:last-child {
    flex: 1.15;
}

.tbn-row-three .tb-field:last-child {
    flex: 1.2;
}

.tbn-form .btn.tb-card-cta {
    width: 100%;
    justify-content: center;
    border-radius: 999px;
}

.tbn-assure li + li {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.tbn-assure li span {
    max-width: 96px;
}

.tbn-form .btn.tb-card-cta {
    padding: 0 calc(var(--btn-size) + 14px);
}

/* ==========================================================================
   corporate-mobility.php: headline, coupon offer + form, why-us row and a
   client logo strip on the same hero banner as the home page
   ========================================================================== */
.ct-hero {
    max-width: var(--content-w);
}

.ct-sub {
    margin-top: 10px;
    margin-bottom: 22px;
    font-size: 24px;
    line-height: 1.3;
    color: var(--color-light);
}

.ct-sub strong {
    font-weight: 600;
    color: var(--color-primary);
}

.ct-page > * {
    flex-shrink: 0;
}

.ct-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--content-w);
    margin: 0 auto;
}

.ct-offer {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 36px;
    align-items: center;
    margin-top: 12px;
    padding: 22px 32px;
    border-radius: 18px;
    border: 1px solid rgba(254, 188, 23, 0.6);
    background-color: rgba(11, 11, 11, 0.85);
}

.ct-offer-title {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-light);
}

.ct-offer-title span {
    display: block;
    color: var(--color-primary);
}

.ct-offer-text {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.85);
}

.ct-offer-text svg {
    flex-shrink: 0;
    color: var(--color-primary);
    overflow: visible;
    transform-box: view-box;
    transform-origin: 50% 75%;
    animation: ct-gift-bounce 3.2s ease-in-out infinite;
}

.ct-offer-text svg path {
    stroke-dasharray: 115;
    stroke-dashoffset: 115;
    animation: ct-gift-draw 3.2s ease-in-out infinite;
}

@keyframes ct-gift-draw {
    0%, 10% { stroke-dashoffset: 115; }
    36%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 115; }
}

@keyframes ct-gift-bounce {
    0%, 70%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 transparent); }
    18% { transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 0 7px rgba(254, 188, 23, .8)); }
    34% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 2px rgba(254, 188, 23, .35)); }
}

@media (prefers-reduced-motion: reduce) {
    .ct-offer-text svg,
    .ct-offer-text svg path {
        animation: none;
        stroke-dashoffset: 0;
        filter: none;
    }
}

.ct-offer-text strong {
    color: var(--color-primary);
}

.ct-form {
    margin-top: 0;
    padding-left: 36px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.ct-form .tb-card-form-row {
    gap: 12px;
}

.ct-form .tb-field {
    padding: 0 14px;
    border-radius: 10px;
}

.ct-form .tb-field input,
.ct-form .tb-field select {
    padding: 13px 0;
    font-size: 16px;
}

.ct-form .tb-field--phone select {
    max-width: 92px;
}

.ct-form .tb-field select {
    min-width: 0;
}

.ct-form .tb-card-status,
.ct-form .tb-card-verify-links {
    font-size: 15px;
}

.ct-form .btn.tb-card-cta {
    --btn-size: 36px;
    flex: 1;
    margin-top: 0;
    padding: 0 calc(var(--btn-size) + 12px) 0 20px;
    justify-content: center;
    border-radius: 12px;
}

.ct-form .btn.tb-card-cta > span {
    font-size: 16px;
}

/* Why corporates choose us */
.ct-why {
    margin-top: 12px;
}

.ct-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 22px;
    font-weight: 400;
    color: var(--color-light);
}

.ct-heading::before,
.ct-heading::after {
    content: '';
    width: 60px;
    height: 1px;
    background-color: var(--color-primary);
}

.ct-heading--small {
    font-size: 18px;
}

.ct-reasons {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    margin-top: 14px;
    list-style: none;
}

.ct-reason {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    text-align: center;
}

.ct-reason + .ct-reason {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.ct-reason-icons {
    display: flex;
    gap: 8px;
}

.ct-reason-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.ct-reason-label {
    font-size: 16px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.9);
    max-width: 150px;
}

/* Client logos */
.ct-clients {
    margin-top: 12px;
    padding: 12px 20px 16px;
    border-radius: 14px;
    border: 1px solid rgba(254, 188, 23, 0.4);
    background-color: rgba(11, 11, 11, 0.85);
}

.ct-slider {
    --per-view: 9;
    --gap: 10px;
    margin-top: 10px;
}

.ct-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 8px;
    overflow: hidden;
    border-radius: 4px;
    background-color: #e3e6eb;
    color: #1c2a4a;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

/* Every logo sits in the same box, scaled to fit without distortion */
.ct-logo img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6px 0;
    box-sizing: border-box;
    object-fit: contain;
}

@media (max-width: 1199px) {
    .ct-offer {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ct-form {
        padding-left: 0;
        border-left: 0;
    }

    .ct-reasons {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 24px;
    }

    .ct-reason:nth-child(5) {
        border-left: 0;
    }

    .ct-slider {
        --per-view: 5;
    }
}

@media (max-width: 767px) {
    .ct-sub {
        font-size: 18px;
    }

    .ct-offer {
        padding: 18px;
    }

    .ct-offer-title {
        font-size: 32px;
    }

    .ct-form .tb-card-form-row {
        flex-direction: column;
    }

    .ct-reasons {
        grid-template-columns: repeat(2, 1fr);
    }

    .ct-reason:nth-child(odd) {
        border-left: 0;
    }

    .ct-slider {
        --per-view: 2;
    }
}

/* The logo strip is its own bordered box, so it takes the 1400px itself */
.ct-wrap.ct-clients {
    width: calc(100% - 6vw);
    max-width: 1400px;
}

/* Dark backing so the reasons stay readable over the bright road */
.ct-wrap.ct-why {
    width: calc(100% - 6vw);
    max-width: 1400px;
    padding: 12px 20px 14px;
    border-radius: 14px;
    border: 1px solid rgba(254, 188, 23, 0.4);
    background-color: rgba(11, 11, 11, 0.85);
}

/* Slider arrows: draw the chevron so it sits in the exact centre of the circle */
.tbn-arrow {
    position: relative;
    padding: 0;
    font-size: 0;
}

.tbn-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    rotate: 45deg;
    translate: -50% -50%;
}

.tbn-arrow[data-prev]::before {
    rotate: -135deg;
}

/* A chevron's visual centre sits towards its tail, so nudge it back to the middle */
.tbn-arrow[data-next]::before {
    translate: -62% -50%;
}

.tbn-arrow[data-prev]::before {
    translate: -38% -50%;
}

/* Offer form: field and button heights match, as in the design mock-up */
.ct-form .tb-card-form-row {
    align-items: stretch;
}

.ct-form .tb-field {
    min-height: 54px;
}

.ct-form .tb-field svg {
    width: 20px;
    height: 20px;
}

.ct-form .btn.tb-card-cta {
    height: auto;
    min-height: 54px;
    align-self: stretch;
}

.ct-form {
    border-left-color: rgba(254, 188, 23, 0.35);
}

.ct-offer-text {
    font-size: 18px;
}

.ct-offer-text svg {
    width: 56px;
    height: 56px;
}

.ct-offer-text strong {
    font-weight: 700;
}

/* Phone field: breathing room around the divider between the country code and the number */
.tb-field--phone select {
    padding-right: 10px;
}

.tb-field--phone input {
    padding-left: 14px;
}


/* Section headings get a dark backing so they never blend into the photo behind them */
.tbn-heading {
    width: fit-content;
    max-width: 100%;
    padding: 12px 22px 6px;
    border-radius: 14px;
    background-color: rgba(11, 11, 11, 0.8);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.tbn-heading--split {
    width: 100%;
}

.tbn-title::after {
    left: 0;
}

/* Corporate form: standard site button (pill, dark knob) at the same height as the fields */
.ct-form .btn.tb-card-cta {
    --btn-size: 48px;
    flex: 1;
    height: calc(var(--btn-size) + 6px);
    min-height: 0;
    align-self: center;
    padding: 0 calc(var(--btn-size) + 14px) 0 24px;
    border-radius: 50px;
    justify-content: flex-start;
}

.ct-form .btn.tb-card-cta > span {
    font-size: 16px;
    line-height: 1;
}

/* Phone number sits clear of the country-code divider (these forms override the field padding) */
.ct-form .tb-field--phone input,
.tbn-form .tb-field--phone input {
    padding-left: 14px;
}

.ct-form .tb-field--phone select,
.tbn-form .tb-field--phone select {
    padding-right: 10px;
}

/* Corporate form: every row splits into two equal halves, so the phone field and the button line up with the fields above */
.ct-form .tb-card-form-row > * {
    flex: 1 1 0;
    min-width: 0;
}

/* Equal halves need the same box model on both items (the button's padding was being added on top) */
.ct-form .tb-card-form-row > * {
    box-sizing: border-box;
    flex: 1 1 0;
    width: 0;
}

/* Corporate form rows are a two-column grid, so both columns are exactly the same width whatever is inside them */
.ct-form .tb-card-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ct-form .tb-card-form-row > * {
    width: auto;
    min-width: 0;
    box-sizing: border-box;
}

.ct-form .btn.tb-card-cta {
    width: 100%;
}

@media (max-width: 767px) {
    .ct-form .tb-card-form-row {
        grid-template-columns: 1fr;
    }
}

/* Scroll entrance animations (taxi-booking page; classes are added by main.js) */
.reveal-on-scroll.is-revealed {
    will-change: auto;
}

.reveal-on-scroll {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.7, 0.25, 1);
    will-change: opacity, transform;
}

.reveal-up {
    transform: translateY(40px);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: none;
}

/* Stagger delay comes from --d so it only affects the entrance, never hover */
.reveal-on-scroll {
    transition: opacity 0.7s ease var(--d, 0ms), transform 0.7s cubic-bezier(0.22, 0.7, 0.25, 1) var(--d, 0ms);
}

/* Fleet cards: the car drives in from the left once its card appears, then the card just glows on hover */
.tbn-car {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tbn-car.reveal-on-scroll {
    transition:
        opacity 0.7s ease var(--d, 0ms),
        transform 0.7s cubic-bezier(0.22, 0.7, 0.25, 1) var(--d, 0ms),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.tbn-car:hover {
    border-color: rgba(254, 188, 23, 0.6);
    box-shadow: 0 10px 30px rgba(254, 188, 23, 0.18);
}

.tbn-car.reveal-on-scroll .tbn-car-art img,
.tbn-car.reveal-on-scroll .tbn-car-art svg {
    opacity: 0;
    transform: translateX(-70px) scale(0.95);
    transition:
        transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--d, 0ms) + 250ms),
        opacity 0.6s ease calc(var(--d, 0ms) + 250ms);
}

.tbn-car.is-revealed .tbn-car-art img,
.tbn-car.is-revealed .tbn-car-art svg {
    opacity: 1;
    transform: none;
}

/* Each bullet slides in after the car arrives */
.tbn-car.reveal-on-scroll .tbn-car-points li {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.tbn-car.is-revealed .tbn-car-points li {
    opacity: 1;
    transform: none;
}

.tbn-car.is-revealed .tbn-car-points li:nth-child(1) { transition-delay: calc(var(--d, 0ms) + 650ms); }
.tbn-car.is-revealed .tbn-car-points li:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 780ms); }
.tbn-car.is-revealed .tbn-car-points li:nth-child(3) { transition-delay: calc(var(--d, 0ms) + 910ms); }

/* Before main.js sets up the entrance animations, keep those blocks hidden so they never flash */
.reveal-ready .tbn-fleet .tbn-heading:not(.reveal-on-scroll),
.reveal-ready .tbn-car:not(.reveal-on-scroll),
.reveal-ready .tbn-enquiry-intro:not(.reveal-on-scroll),
.reveal-ready .tbn-form:not(.reveal-on-scroll),
.reveal-ready .tbn-reviews .tbn-heading:not(.reveal-on-scroll),
.reveal-ready .tbn-reviews-slider:not(.reveal-on-scroll),
.reveal-ready .tbn-reviews .tbn-dots:not(.reveal-on-scroll) {
    opacity: 0;
}

/* Smoother fleet entrance: fewer moving pieces, each on its own compositor layer */
.tbn-car.reveal-on-scroll .tbn-car-points li,
.tbn-car.is-revealed .tbn-car-points li {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
}

.tbn-car.reveal-on-scroll .tbn-car-art img,
.tbn-car.reveal-on-scroll .tbn-car-art svg {
    transform: translate3d(-50px, 0, 0);
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition:
        transform 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0ms) + 200ms),
        opacity 0.8s ease calc(var(--d, 0ms) + 200ms);
}

.tbn-car.is-revealed .tbn-car-art img,
.tbn-car.is-revealed .tbn-car-art svg {
    transform: translate3d(0, 0, 0);
}

.reveal-up {
    transform: translate3d(0, 30px, 0);
}

.reveal-left {
    transform: translate3d(-30px, 0, 0);
}

.reveal-right {
    transform: translate3d(30px, 0, 0);
}

.reveal-on-scroll {
    backface-visibility: hidden;
    transition:
        opacity 0.9s ease var(--d, 0ms),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}

.tbn-car.reveal-on-scroll {
    transition:
        opacity 0.9s ease var(--d, 0ms),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.reveal-on-scroll.is-revealed {
    transform: translate3d(0, 0, 0);
}

/* Same hidden start state for the flight, hotel and corporate pages (see main.js) */
.reveal-ready .fb-hero:not(.reveal-on-scroll),
.reveal-ready .fb-steps:not(.reveal-on-scroll),
.reveal-ready .fb-cta-wrap:not(.reveal-on-scroll),
.reveal-ready .fb-stories:not(.reveal-on-scroll),
.reveal-ready .ct-hero:not(.reveal-on-scroll),
.reveal-ready .ct-offer:not(.reveal-on-scroll),
.reveal-ready .ct-why:not(.reveal-on-scroll),
.reveal-ready .ct-clients:not(.reveal-on-scroll) {
    opacity: 0;
}

/* Corporate page: blocks glide in from the left, a little further so the motion reads clearly */
.ct-page .reveal-left {
    transform: translate3d(-90px, 0, 0);
}

.ct-page .reveal-on-scroll.is-revealed {
    transform: translate3d(0, 0, 0);
}

/* Flight and hotel pages: same glide in from the left as the corporate page */
.fb-page .reveal-left {
    transform: translate3d(-90px, 0, 0);
}

.fb-page .reveal-on-scroll.is-revealed {
    transform: translate3d(0, 0, 0);
}

/* Step cards: even side padding so text never runs up to the card edge */
.fb-step {
    padding-left: 36px;
    padding-right: 36px;
}

.fb-step > p {
    max-width: 100%;
}

/* Reviews heading: dark backing so it never blends into the photo (same treatment as the taxi page) */
.fb-stories-head {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 28px 8px;
    border-radius: 14px;
    background-color: rgba(11, 11, 11, 0.8);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Enquiry form fills the whole space to the right of the intro text */
.tbn-form {
    max-width: none;
    width: 100%;
}

/* Enquiry card: intro column takes 2 parts, the form 3 parts (about 525px and 800px) */
.tbn-enquiry-card {
    grid-template-columns: 2fr 3fr;
    gap: 24px;
}

@media (max-width: 1199px) {
    .tbn-enquiry-card {
        grid-template-columns: 1fr;
    }
}

/* Enquiry intro: larger text so it fills the left column */
.tbn-enquiry-title {
    font-size: 52px;
}

.tbn-enquiry-intro p {
    font-size: 24px;
    max-width: 480px;
}

.tbn-enquiry-intro p br {
    display: none;
}

@media (max-width: 767px) {
    .tbn-enquiry-title {
        font-size: 36px;
    }

    .tbn-enquiry-intro p {
        font-size: 18px;
    }
}

/* Enquiry intro: back to the normal text size, each text on a single line */
.tbn-enquiry-title {
    font-size: 48px;
    line-height: 1.4;
    white-space: nowrap;
}

.tbn-enquiry-intro p {
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.5;
    max-width: none;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .tbn-enquiry-title,
    .tbn-enquiry-intro p {
        white-space: normal;
    }
}

/* The intro is only as wide as its text; the form takes all the rest of the card */
.tbn-enquiry-card {
    grid-template-columns: auto 1fr;
    gap: 32px;
}

@media (max-width: 1199px) {
    .tbn-enquiry-card {
        grid-template-columns: 1fr;
    }
}

/* Pickup City and Drop City split the row evenly, matching the fields above */
.tbn-row-city .tb-field:first-child,
.tbn-row-city .tb-field:last-child {
    flex: 1 1 0;
}

/* Custom date and time pickers */
.dp-pop {
    position: absolute;
    z-index: 4000;
    width: 300px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(254, 188, 23, 0.45);
    background-color: rgba(18, 18, 18, 0.98);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    color: var(--color-light);
    animation: dp-in 0.18s ease-out;
}

.dp-pop[hidden] {
    display: none;
}

@keyframes dp-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.dp-head strong {
    font-size: 16px;
    font-weight: 600;
}

.dp-nav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--color-light);
    background-color: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.dp-nav:hover {
    color: var(--color-dark);
    background-color: var(--color-primary);
}

.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.dp-week span {
    padding: 4px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.dp-day {
    height: 36px;
    border-radius: 50%;
    font-size: 15px;
    color: var(--color-light);
    background: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dp-day:hover:not(:disabled) {
    background-color: rgba(254, 188, 23, 0.2);
}

.dp-day.is-today {
    box-shadow: inset 0 0 0 1px rgba(254, 188, 23, 0.7);
}

.dp-day.is-selected {
    font-weight: 600;
    color: var(--color-dark);
    background-color: var(--color-primary);
}

.dp-day:disabled {
    color: rgba(255, 255, 255, 0.22);
    cursor: not-allowed;
}

.dp-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dp-foot button {
    font-size: 15px;
    color: var(--color-primary);
    background: none;
    cursor: pointer;
}

.dp-pop--time {
    width: 190px;
    padding: 8px;
}

.dp-times {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(254, 188, 23, 0.5) transparent;
}

.dp-time {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 15px;
    text-align: left;
    color: var(--color-light);
    background: none;
    cursor: pointer;
}

.dp-time:hover {
    background-color: rgba(254, 188, 23, 0.2);
}

.dp-time.is-selected {
    font-weight: 600;
    color: var(--color-dark);
    background-color: var(--color-primary);
}

.tb-field input[data-picker] {
    cursor: pointer;
}

/* Custom dropdowns */
.dd-btn {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 14px 22px 14px 0;
    overflow: hidden;
    font-family: inherit;
    font-size: 16px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-light);
    background: none;
    cursor: pointer;
}

.dd-btn.is-placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.dd-btn::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    translate: 0 -75%;
    rotate: 45deg;
    transition: rotate 0.2s ease;
}

.dd-btn.is-open::after {
    rotate: 225deg;
    translate: 0 -25%;
}

.tb-field--phone .dd-btn {
    flex: none;
    width: 72px;
    padding-right: 24px;
}

.dd-pop {
    width: auto;
    padding: 8px;
}

.dd-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(254, 188, 23, 0.5) transparent;
}

.dd-opt {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 15px;
    text-align: left;
    color: var(--color-light);
    background: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dd-opt:hover {
    background-color: rgba(254, 188, 23, 0.2);
}

.dd-opt.is-selected {
    font-weight: 600;
    color: var(--color-dark);
    background-color: var(--color-primary);
}

/* Assurance row: each label on a single line */
.tbn-assure li span {
    max-width: none;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .tbn-assure li span {
        white-space: normal;
    }
}

/* ==========================================================================
   about-us.php: intro, highlights row and "Our Journey" card on the same hero
   banner as the home page
   ========================================================================== */
.about-page {
    justify-content: flex-start;
}

.about-page > * {
    flex-shrink: 0;
}

.ab-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--content-w);
    margin: 0 auto;
}

.ab-intro {
    text-align: left;
}

.ab-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.ab-kicker span {
    width: 34px;
    height: 2px;
    background-color: var(--color-primary);
}

.ab-intro .hero-title {
    margin-top: 6px;
    line-height: 1.1;
}

.ab-intro .hero-title-accent {
    font-weight: 400;
}

.ab-copy {
    max-width: 700px;
    margin-top: 14px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.ab-copy p {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.ab-copy p + p {
    margin-top: 10px;
}

/* Highlights row */
.ab-highlights {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid rgba(254, 188, 23, 0.4);
    background-color: rgba(11, 11, 11, 0.8);
    list-style: none;
}

.ab-highlights li {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-primary);
}

.ab-highlights li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.ab-highlights strong {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-light);
}

/* About-page highlight icons: animate the illustration details, not just the box. */
.ab-highlights svg {
    overflow: visible;
    transform-box: view-box;
    transform-origin: 50% 50%;
}
.ab-highlights li:nth-child(1) svg circle { animation: ab-persons-pop 3s ease-in-out infinite; }
.ab-highlights li:nth-child(1) svg circle:nth-child(2) { animation-delay: .12s; }
.ab-highlights li:nth-child(1) svg circle:nth-child(3) { animation-delay: .24s; }
.ab-highlights li:nth-child(1) svg path { animation: ab-persons-draw 3s ease-in-out infinite; }
.ab-highlights li:nth-child(1) svg {
    animation: ab-customers-icon 3.2s ease-in-out infinite;
}
.ab-highlights li:nth-child(1) svg * {
    animation: none;
    opacity: 1;
    transform: none;
}
.ab-highlights li:nth-child(2) svg path,
.ab-highlights li:nth-child(3) svg path,
.ab-highlights li:nth-child(4) svg path,
.ab-highlights li:nth-child(5) svg path { stroke-dasharray: 70; stroke-dashoffset: 70; animation: ab-icon-draw 3.4s ease-in-out infinite; }
.ab-highlights li:nth-child(3) svg circle { animation: ab-pin-pulse 3.4s ease-in-out infinite; }
.ab-highlights li:nth-child(4) svg path:nth-child(2) { stroke-dasharray: 10; stroke-dashoffset: 10; animation: ab-check-draw 3.4s ease-in-out infinite; }
.ab-highlights li:nth-child(2) svg path,
.ab-highlights li:nth-child(3) svg path,
.ab-highlights li:nth-child(5) svg path { stroke-dasharray: none; stroke-dashoffset: 0; }
.ab-highlights li:nth-child(2) svg path { animation: ab-building-glow 3.2s ease-in-out infinite; }
.ab-highlights li:nth-child(5) svg path { animation: ab-star-twinkle 3.2s ease-in-out infinite; }

@keyframes ab-persons-pop { 0%, 20%, 80%, 100% { transform: scale(.55); opacity: .25; } 38%, 65% { transform: scale(1); opacity: 1; } }
@keyframes ab-persons-draw { 0%, 25% { opacity: .25; } 45%, 80% { opacity: 1; } 100% { opacity: .25; } }
@keyframes ab-customers-icon {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 transparent); }
    20% { transform: translateY(-3px) scale(1.05); filter: drop-shadow(0 0 5px rgba(254, 188, 23, .7)); }
    40% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 2px rgba(254, 188, 23, .35)); }
}
@keyframes ab-icon-draw { 0%, 12% { stroke-dashoffset: 70; } 38%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 70; } }
@keyframes ab-building-glow { 0%, 100% { opacity: .7; transform: translateY(0); } 25% { opacity: 1; transform: translateY(-2px); } 50% { opacity: .85; } }
@keyframes ab-pin-pulse { 0%, 38%, 78%, 100% { transform: scale(1); } 52% { transform: scale(1.25); } }
@keyframes ab-check-draw { 0%, 20% { stroke-dashoffset: 10; } 42%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 10; } }
@keyframes ab-star-twinkle { 0%, 45%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 0 transparent); } 58% { transform: scale(1.18) rotate(8deg); filter: drop-shadow(0 0 7px var(--color-primary)); } 72% { transform: scale(1) rotate(0); } }

.ab-address svg { transform-box: view-box; transform-origin: 50% 100%; animation: ab-address-pin 3s ease-in-out infinite; }
@keyframes ab-address-pin { 0%, 70%, 100% { transform: translateY(0); } 15% { transform: translateY(-5px); } 30% { transform: translateY(0) rotate(-5deg); } }

@media (prefers-reduced-motion: reduce) {
    .ab-highlights svg, .ab-highlights svg *, .ab-address svg { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; filter: none; }
}

.ab-highlights small {
    display: block;
    font-size: 16px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.75);
}

/* Our Journey card */
.ab-journey {
    display: grid;
    grid-template-columns: 300px 1fr 1fr;
    gap: 32px;
    align-items: center;
    margin-top: 14px;
    padding: 16px 24px 16px 16px;
    border-radius: 16px;
    border: 1px solid rgba(254, 188, 23, 0.5);
    background-color: rgba(11, 11, 11, 0.88);
}

.ab-journey-photo {
    height: 100%;
    min-height: 200px;
    overflow: hidden;
    border-radius: 12px;
}

.ab-journey-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;
}

.ab-journey-title {
    margin: 6px 0 8px;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-light);
}

.ab-journey-title em {
    font-style: normal;
    color: var(--color-primary);
}

.ab-journey-text p:not(.ab-kicker) {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.ab-journey-text p + p {
    margin-top: 8px;
}

.ab-quote {
    position: relative;
    padding: 4px 8px 4px 34px;
    border-left: 1px solid rgba(254, 188, 23, 0.5);
}

.ab-quote-mark {
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 54px;
    line-height: 1;
    color: var(--color-primary);
}

.ab-quote p {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

.ab-quote footer {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-light);
}

@media (max-width: 1199px) {
    .ab-journey {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .ab-journey-photo {
        min-height: 180px;
    }

    .ab-quote {
        padding-left: 28px;
    }

    .ab-highlights {
        flex-wrap: wrap;
        row-gap: 14px;
    }

    .ab-highlights li {
        flex: 1 1 33%;
    }

    .ab-highlights li + li {
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .ab-highlights li {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

/* Entrance animation: blocks glide in from the left, like the other pages */
.reveal-ready .ab-kicker:not(.reveal-on-scroll),
.reveal-ready .ab-copy p:not(.reveal-on-scroll),
.reveal-ready .ab-highlights:not(.reveal-on-scroll),
.reveal-ready .ab-journey:not(.reveal-on-scroll) {
    opacity: 0;
}

.ab-page .reveal-left {
    transform: translate3d(-90px, 0, 0);
}

.ab-page .reveal-on-scroll.is-revealed {
    transform: translate3d(0, 0, 0);
}

/* About intro text runs wider (about 1200px), as marked */
.ab-copy {
    max-width: 1200px;
}

/* Our Journey card: shorter. The photo follows the text height, and the text gets more width so it wraps less */
.ab-journey {
    grid-template-columns: 240px 1.5fr 1fr;
    gap: 24px;
    margin-top: 12px;
    padding: 10px 20px 10px 10px;
}

.ab-journey-photo {
    position: relative;
    align-self: stretch;
    min-height: 0;
}

.ab-journey-photo img {
    position: absolute;
    inset: 0;
}

.ab-journey-title {
    margin: 4px 0 6px;
    font-size: 26px;
}

.ab-journey-text p + p {
    margin-top: 6px;
}

@media (max-width: 1199px) {
    .ab-journey {
        grid-template-columns: 1fr;
    }

    .ab-journey-photo {
        min-height: 180px;
    }
}

.ab-journey-title {
    white-space: nowrap;
}

@media (max-width: 767px) {
    .ab-journey-title {
        white-space: normal;
    }
}

/* Quote: gold opening and closing marks, italic text, short gold rule above the signature */
.ab-quote {
    padding: 8px 56px 8px 72px;
    border-left: 1px solid rgba(254, 188, 23, 0.7);
}

.ab-quote-mark {
    top: 0;
    left: 18px;
    font-size: 84px;
    font-weight: 700;
    font-style: normal;
    line-height: 0.9;
}

.ab-quote-mark--end {
    top: auto;
    left: auto;
    right: 6px;
    bottom: 34px;
}

.ab-quote p {
    font-style: italic;
}

.ab-quote footer {
    position: relative;
    margin-top: 22px;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 500;
}

.ab-quote footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background-color: var(--color-primary);
}

@media (max-width: 1199px) {
    .ab-quote {
        padding: 8px 48px 8px 64px;
    }
}

/* About page: each piece travels a clear distance */
.ab-page .reveal-right {
    transform: translate3d(90px, 0, 0);
}

.ab-page .reveal-up {
    transform: translate3d(0, 40px, 0);
}

/* "Our Fleet" title and its intro line: more space between them */
.tbn-fleet .tbn-heading {
    width: 100%;
    justify-content: space-between;
    gap: 80px;
}

/* Our Fleet note: right-aligned at the right edge of the full-width bar, like the cities heading */
.tbn-fleet .tbn-lead {
    margin-left: auto;
    text-align: right;
}

/* Company address, under the quote signature */
.ab-address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-size: 16px;
    font-style: normal;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

.ab-address svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-primary);
}

/* Address: a divider line above it, and a larger pin on the left, centred beside the text */
.ab-address {
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.ab-address svg {
    margin-top: 0;
}

/* Closing quote mark sits at the end of the quote text, not down by the signature */
.ab-quote-mark--end {
    top: 96px;
    bottom: auto;
    right: 6px;
}

/* Location pin sits in the left margin under the opening quote mark; the address text lines up with the quote text */
.ab-address {
    position: relative;
}

.ab-address svg {
    position: absolute;
    left: -54px;
    top: 50%;
    translate: 0 -50%;
}

/* Corporate phone field: India flag, same as the taxi enquiry form */
.ct-form .tb-field--phone {
    gap: 10px;
}

.ct-form .tb-field--phone .tbn-flag {
    flex: none;
    width: 24px;
    height: 16px;
}

img.tbn-flag {
    flex: none;
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

/* ==========================================================================
   Taxi enquiry: WhatsApp number with an inline OTP step. Send Enquiry stays
   disabled until the number is verified.
   ========================================================================== */
.tbn-row-phone {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

.tbn-row-phone > * {
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .tbn-row-phone {
        grid-template-columns: 1fr;
    }
}

.tbn-wa {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbn-wa .tb-field {
    flex: none;
}

.tbn-wa [hidden] {
    display: none;
}

.tbn-otp-field,
.tbn-form .tb-field.tbn-otp-field {
    padding-right: 0;
    overflow: hidden;
}

.tbn-otp-btn {
    flex: none;
    align-self: stretch;
    padding: 0 16px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    background: none;
    color: var(--color-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.tbn-otp-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.06);
}

.tbn-otp-btn:disabled {
    color: rgba(255, 255, 255, 0.45);
    cursor: not-allowed;
}

.tbn-wa.is-verified .tbn-otp-field {
    border-color: #6fdc8c;
}

.tbn-wa.is-verified .tbn-otp-btn:disabled {
    color: #6fdc8c;
}

.tbn-wa-msg {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

.tbn-wa-msg.is-error {
    color: #ff7a7a;
}

.tbn-wa-msg.is-success {
    color: #6fdc8c;
}

.tbn-form .btn.tb-card-cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.4);
}

/* Pickup / drop place suggestions */
.tbn-form .tb-field:has(.tbn-suggest) {
    position: relative;
}

.tbn-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 8px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(254, 188, 23, 0.5) transparent;
    border: 1px solid rgba(254, 188, 23, 0.45);
    border-radius: 16px;
    background-color: rgba(18, 18, 18, 0.98);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    animation: dp-in 0.18s ease-out;
}

.tbn-suggest[hidden] {
    display: none;
}

.tbn-suggest li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--color-light);
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tbn-suggest li small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
}

.tbn-suggest li:hover,
.tbn-suggest li.is-active {
    background-color: rgba(254, 188, 23, 0.2);
}

/* Browser autofill paints a light-blue box with dark text; keep the dark theme instead */
.tb-field input:-webkit-autofill,
.tb-field input:-webkit-autofill:hover,
.tb-field input:-webkit-autofill:focus,
.tb-field input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-light);
    caret-color: var(--color-light);
    -webkit-box-shadow: 0 0 0 1000px #181818 inset;
    box-shadow: 0 0 0 1000px #181818 inset;
    border-radius: 8px;
    transition: background-color 9999s ease-in-out 0s;
}

.tb-field input:autofill {
    color: var(--color-light);
    box-shadow: 0 0 0 1000px #181818 inset;
}


/* ==========================================================================
   404 page: big "4 [wheel] 4" over the home-page banner
   ========================================================================== */
.nf-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.04em;
    font-size: clamp(120px, 23vw, 270px);
    font-weight: 700;
    line-height: 1;
    animation: nf-rise 0.9s ease-out both;
}

.nf-digit {
    text-shadow: none;
    background: linear-gradient(180deg, #ffe083 0%, #febc17 55%, #c98f00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 22px rgba(254, 188, 23, 0.25));
}

.nf-wheel {
    flex: none;
    width: 0.86em;
    height: 0.86em;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.7));
}

.nf-wheel {
    border-radius: 50%;
    animation: nf-turn 1.1s linear infinite;
}

@keyframes nf-turn {
    to { transform: rotate(360deg); }
}

@keyframes nf-rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

.nf-title {
    margin-top: 10px;
    font-size: clamp(26px, 3.6vw, 44px);
    line-height: 1.2;
}

.nf-text {
    max-width: 560px;
    margin-bottom: 26px;
}

.nf-content .btn {
    margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .nf-wheel,
    .nf-code {
        animation: none;
    }
}
/* "Why to choose The SMART Taxi?" heading above the feature strip (taxi-booking) */
.tbn-why {
    width: 100%;
    gap: 40px;
    margin-bottom: 12px;
}

/* "Send Us An Enquiry" title block sits at the top of the card, level with the first field */
.tbn-enquiry-card {
    align-items: flex-start;
}

/* "Your Discount is Waiting Here" text block: centred vertically in the card (desktop; stacked layouts keep it on top) */
@media (min-width: 1200px) {
    .tbn-enquiry-card {
        align-items: center;
    }
}

/* Less space between the feature strip and "Our Fleet" */
.tbn-hero {
    padding-bottom: 6px;
}

.tbn-fleet {
    padding-top: 10px;
}

.tbn-why .tbn-lead {
    max-width: 520px;
    margin-left: auto;
    text-align: right;
}

@media (max-width: 767px) {
    .tbn-why {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .tbn-why .tbn-title {
        font-size: 26px;
        white-space: normal;
    }

    .tbn-why .tbn-lead {
        max-width: none;
        margin-left: 0;
        font-size: 14px;
        text-align: left;
    }
}

/* Taxi enquiry: note for the chosen service, full width under the Pickup City row */
.tbn-offer-note {
    margin: 0;
    padding: 4px 0 4px 14px;
    border-left: 2px solid rgba(254, 188, 23, 0.55);
    font-size: 17px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.6);
}

.tbn-offer-note.is-set {
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 767px) {
    .tbn-offer-note {
        font-size: 16px;
    }
}
/* Cities we operate in (taxi-booking): heading like "What Our Customers Say", chips in a panel below */
.tbn-cities-head {
    margin-bottom: 14px;
}

.tbn-cities-kicker {
    margin: 0 0 4px;
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.tbn-cities-note strong {
    font-weight: 400;
}

.tbn-cities-card {
    padding: 22px 20px;
    border-radius: 14px;
    border: 1px solid rgba(254, 188, 23, 0.4);
    background-color: rgba(11, 11, 11, 0.85);
}

.tbn-city-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The chip's gold fill and its dark text/pin are both driven by one animated radius (--cr), so the text turns dark
   exactly where the gold has reached, spreading in and draining out. main.js sets --mx / --my on enter and leave. */
@property --cr {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

.tbn-city-list li {
    position: relative;
    --cp: 11px 20px 11px 16px;
    --cg: 10px;
    display: inline-flex;
    align-items: center;
    padding: var(--cp);
    border-radius: 12px;
    border: 1px solid rgba(254, 188, 23, 0.28);
    background: linear-gradient(135deg, rgba(254, 188, 23, 0.1) 0%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.05) 100%);
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-light);
    cursor: default;
    overflow: hidden;
    isolation: isolate;
    transition: --cr 1.1s cubic-bezier(0.45, 0.05, 0.35, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.tbn-city-list li:hover {
    --cr: 400px;
    border-color: var(--color-primary);
    box-shadow: 0 10px 24px rgba(254, 188, 23, 0.28);
}

/* The gold */
.tbn-city-list li::before {
    content: '';
    position: absolute;
    left: var(--mx, 50%);
    top: var(--my, 50%);
    z-index: -1;
    width: calc(var(--cr) * 2);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd458 0%, var(--color-primary) 100%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* The content: normal copy (light text, gold pin), plus a dark copy on top that is only visible inside the gold */
.tbn-city-list .cc {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--cg);
}

.tbn-city-list .cc--on {
    position: absolute;
    inset: 0;
    padding: var(--cp);
    color: var(--color-dark);
    clip-path: circle(var(--cr) at var(--mx, 50%) var(--my, 50%));
    pointer-events: none;
}

.tbn-city-list svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.tbn-city-list .cc--on svg {
    color: var(--color-dark);
}

.tbn-city-list .cc--on svg circle {
    fill: #ffc21c;
}
/* Chips pop in one after another when the list scrolls into view (main.js adds the classes) */
.tbn-city-list.is-armed li {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
}

.tbn-city-list.is-in li {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease calc(var(--i) * 30ms), transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1.2) calc(var(--i) * 30ms), --cr 1.1s cubic-bezier(0.45, 0.05, 0.35, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.tbn-city-list.is-in li:hover {
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .tbn-city-list.is-armed li {
        opacity: 1;
        transform: none;
    }
}
@media (max-width: 767px) {
    .tbn-cities-card {
        padding: 16px 12px;
    }

    .tbn-cities-head {
        align-items: flex-start;
    }

    .tbn-cities-note {
        text-align: left;
    }

    .tbn-city-list {
        gap: 8px;
    }

    .tbn-city-list li {
        --cp: 8px 12px 8px 10px;
        --cg: 7px;
        font-size: 15px;
    }

    .tbn-city-list svg {
        width: 18px;
        height: 18px;
    }
}

/* Hotel steps 2 and 3: content sits in the vertical middle of the card (step 1 keeps its screenshot flush to the bottom) */
.fb-step:nth-of-type(n+2) {
    justify-content: flex-start;
}

/* Hotel step 1: the phone mock-up sits flush on the card's bottom edge and the text is centred in the space above it */
.fb-step:first-of-type {
    padding-bottom: 0;
}

.fb-step:first-of-type .fb-phone {
    margin: auto 0 0;
}

/* About us: legal disclaimer under the journey card. Other pages get ~160px of space before the
   footer from a section this page doesn't have, so add the missing 100px here to match. */
.ab-disclaimer {
    margin: 14px 0px 34px 0px;
    padding: 12px 18px;
    border-radius: 12px;
    background-color: rgba(11, 11, 11, 0.72);
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.ab-disclaimer a {
    color: var(--color-primary);
    white-space: nowrap;
}

.ab-disclaimer a:hover {
    text-decoration: underline;
}

/* Thank-you page */
.ty-text {
    max-width: 600px;
    margin-bottom: 26px;
}


/* 404 and thank-you pages: dark backing so the text stays readable over the photo (same treatment as the section headings) */
.msg-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 28px 44px 32px;
    border-radius: 18px;
    background-color: rgba(11, 11, 11, 0.8);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.ty-lottie {
    width: min(100%, 300px);
    aspect-ratio: 1 / 1;
    margin: -30px auto -90px;
}

.ty-lottie svg {
    display: block;
}

@media (max-width: 767px) {
    .msg-panel {
        padding: 20px 16px 24px;
    }
}


/* Taxi page footer: pumping heart, tagline, divider and the "More Than a Ride" signature */
.tf-tag p {
    font-size: inherit;
}

.tf-heart {
    color: var(--color-primary);
    transform-origin: 50% 55%;
    animation: tf-pump 1.2s ease-in-out infinite;
}

@keyframes tf-pump {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.35); }
    30% { transform: scale(1); }
    45% { transform: scale(1.35); }
    65% { transform: scale(1); }
}

.tf-script {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-primary);
    font-family: 'Yellowtail', 'Brush Script MT', cursive;
    font-size: 26px;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(-5deg);
}

.tf-script span:last-of-type {
    margin-left: 14px;
}

.tf-script svg {
    width: 110px;
    height: 10px;
    margin: 2px 0 0 18px;
}

@media (prefers-reduced-motion: reduce) {
    .tf-heart {
        animation: none;
    }
}

@media (max-width: 767px) {
    .tf-bar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px 24px;
    }

    .tf-bar .hero-stat-divider {
        display: none;
    }

    .tf-script {
        font-size: 22px;
    }
}
/* About us: closing tagline stands out in gold with a bar beside it */
.ab-copy p.ab-tagline {
    display: inline-block;
    margin-top: 16px;
    padding-left: 14px;
    border-left: 3px solid var(--color-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-light);
}

.ab-copy p.ab-tagline span {
    color: var(--color-primary);
}
/* Call / WhatsApp / email icons in "Why corporates choose" are real links: they fill gold on hover */
.ct-reason-icon--link {
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ct-reason-icon--link:hover,
.ct-reason-icon--link:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-dark);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(254, 188, 23, 0.35);
    outline: none;
}
/* Small message shown when an email link finds no mail app */
.mail-toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    z-index: 5000;
    max-width: min(92vw, 520px);
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid rgba(254, 188, 23, 0.6);
    background-color: rgba(11, 11, 11, 0.95);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-light);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mail-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* "Discount" on the taxi enquiry card: letters rise and glow one after another, forever */
.tbn-wave {
    display: inline-block;
}

.tbn-wave i {
    display: inline-block;
    font-style: normal;
    will-change: transform;
    animation: tbn-wave 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    animation-delay: calc(var(--i) * 0.16s);
}

/* A long, gentle rise and fall; the colour eases with it, so nothing snaps */
@keyframes tbn-wave {
    0% { transform: translateY(0) scale(1); color: var(--color-primary); text-shadow: 0 0 0 rgba(254, 188, 23, 0); }
    18% { transform: translateY(-7px) scale(1.08); color: #ffe083; text-shadow: 0 0 12px rgba(254, 188, 23, 0.7); }
    36% { transform: translateY(0) scale(1); color: var(--color-primary); text-shadow: 0 0 0 rgba(254, 188, 23, 0); }
    100% { transform: translateY(0) scale(1); color: var(--color-primary); text-shadow: 0 0 0 rgba(254, 188, 23, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tbn-wave i {
        animation: none;
    }
}
/* Live email check message (corporate form): sits just under the red field */
.tb-field {
    position: relative;
}

.tb-field-error {
    position: absolute;
    left: 4px;
    top: calc(100% + 3px);
    font-size: 12.5px;
    line-height: 1.2;
    color: #ff6b6b;
    white-space: nowrap;
    pointer-events: none;
}

.tb-field-error[hidden] {
    display: none;
}

.tb-field.is-invalid {
    z-index: 3;
}

/* Make room for the message so the next row does not sit on top of it */
.ct-form .tb-card-form-row:has(.tb-field-error:not([hidden])) {
    margin-bottom: 14px;
}

.tb-field.is-invalid input::placeholder {
    color: rgba(255, 107, 107, 0.7);
}
/* ==========================================================================
   Page transition: a dark curtain with the logo grows out from the centre to cover the page
   when a link is clicked, and shrinks back to the centre on the next page (see main.js)
   ========================================================================== */
html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #0b0b0b url('../images/the-smart-taxi-logo.svg') center / min(260px, 55vw) auto no-repeat;
    clip-path: inset(0 50% 0 50%);
    pointer-events: none;
    will-change: clip-path;
    backface-visibility: hidden;
}

/* Leaving: curtain grows from the middle out to both sides */
html.pt-out::before {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.45s cubic-bezier(0.7, 0, 0.2, 1);
    pointer-events: all;
}

/* Arriving: the page starts covered... */
html.pt-enter::before {
    clip-path: inset(0 0 0 0);
}

/* ...then the curtain closes back into the middle, uncovering the page from the sides */
html.pt-open::before {
    clip-path: inset(0 50% 0 50%);
    transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    html::before {
        display: none;
    }
}
/* Discount badge icon beside the word "Discount" (drawn as a gold mask of assets/images/discount.svg) */
.tbn-disc-icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin: 0 0 0 12px;
    vertical-align: -0.2em;
    background-color: var(--color-primary);
    -webkit-mask: url('../images/discount.svg') center / contain no-repeat;
    mask: url('../images/discount.svg') center / contain no-repeat;
    /* drop-shadow works after the mask, so the glow follows the badge's shape */
    filter: drop-shadow(0 0 6px rgba(254, 188, 23, 0.85)) drop-shadow(0 0 14px rgba(254, 188, 23, 0.5));
    animation: tbn-disc-badge 2.8s ease-in-out infinite;
}

@keyframes tbn-disc-badge {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 0 4px rgba(254, 188, 23, 0.7)) drop-shadow(0 0 9px rgba(254, 188, 23, 0.35)); }
    22% { transform: translateY(-4px) rotate(-7deg) scale(1.08); }
    44% { transform: translateY(0) rotate(5deg) scale(1); }
    58% { filter: drop-shadow(0 0 8px rgba(255, 214, 90, 1)) drop-shadow(0 0 20px rgba(254, 188, 23, 0.7)); }
}

@media (prefers-reduced-motion: reduce) {
    .tbn-disc-icon {
        animation: none;
    }
}
/* Hotel page headline: the second sentence starts on its own line */
.fb-newline {
    display: block;
}

/* Corporate page reviews: more room between the quote and the name / job title */
.ct-page .fb-review figcaption {
    margin-top: 14px;
}

/* The brand name, wherever it appears in text (added automatically by includes/brand.php) */
.brand-name {
    color: var(--color-primary);
}

/* Draggable review sliders */
.is-draggable {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.is-dragging {
    cursor: grabbing;
}

/* Hotel step cards: title and text start at the same height in all three, with even gaps below them */
.fb-step {
    padding-top: 32px;
}

.fb-step-title {
    margin-bottom: 6px;
}

.fb-step:nth-of-type(n+2) .fb-step-text + * {
    margin-top: 18px;
}

.fb-step-art + .fb-step-text {
    margin-top: 14px;
}

.fb-step:first-of-type .fb-step-text {
    margin-bottom: 16px;
}

/* ==========================================================================
   Space between sections: the same on every page (the taxi-booking spacing)
   ========================================================================== */
:root {
    --section-gap: 68px;
}

/* corporate-mobility: icons row -> form -> client logos -> reviews */
.ct-page .ct-offer,
.ct-page .ct-clients,
.ct-page .fb-stories {
    margin-top: 50px;
}

/* hotel-booking and flight-booking: steps + button -> reviews */
.fb-page .fb-stories {
    margin-top: var(--section-gap);
}

/* about-us: intro -> numbers row -> Our Journey card (the small disclaimer stays close under its card) */
.ab-page .ab-highlights,
.ab-page .ab-journey {
    /* margin-top: var(--section-gap); */
}

@media (max-width: 767px) {
    :root {
        --section-gap: 40px;
    }
}
/* More room between the logo / header and the page's main heading (inner pages) */
.tbn-hero {
    padding-top: 193px;
}

.ct-hero,
.fb-hero,
.ab-page .ab-intro {
    margin-top: 35px;
}

/* Hotel and flight: room between the headline text and the step cards (their number badges stick out above the cards) */
.fb-hero {
    margin-bottom: 48px;
}

@media (max-width: 767px) {
    .tbn-hero {
        padding-top: 170px;
    }

    .ct-hero,
    .fb-hero,
    .ab-page .ab-intro {
        margin-top: 20px;
    }
}
/* ==========================================================================
   Site footer: one compact row (logo | page links | contact) and a slim legal bar
   ========================================================================== */
.site-info {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(254, 188, 23, 0.25);
    background-color: #070707;
    color: var(--color-light);
}

.site-info-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
    padding-top: 16px;
    padding-bottom: 12px;
}

.site-info-logo img {
    width: 170px;
    height: auto;
}

.site-info-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 52px;
    list-style: none;
}

.site-info a {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s ease;
}

.site-info-links a:hover {
    color: var(--color-primary);
}

.site-info-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-info-legal-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.site-info-legal p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.75);
}

.site-info-legal-links {
    display: flex;
    justify-content: flex-end;
    gap: 28px;
    list-style: none;
}

.site-info-legal-links a {
    display: inline-block;
    font-size: 17px;
    line-height: 1;
}

.site-info-legal-links a:hover {
    color: var(--color-primary);
}

@media (max-width: 1024px) {
    .site-info-grid {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo social"
            "legal legal";
        gap: 14px;
    }

    .site-info-logo {
        grid-area: logo;
    }

    .site-info-social {
        grid-area: social;
        justify-content: flex-end;
    }

    .site-info-links {
        justify-content: flex-start;
    }

    .site-info-legal-links {
        grid-area: legal;
        justify-content: flex-end;
    }
}

@media (max-width: 767px) {
    .site-info-grid {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    .site-info-logo,
    .site-info-social,
    .site-info-legal-links {
        grid-area: auto;
    }

    .site-info-legal-links {
        justify-content: flex-start;
    }

}

/* 60px of the page's background shows between the last content of every page and the footer */
main > section:last-of-type,
main > div:last-of-type {
    padding-bottom: 30px;
}

/* Bottom-bar handwriting: first line, second line, then the underline swash - hold, fade, repeat */
.tf-w1,
.tf-w2 {
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.tf-w1 { animation-name: tf-write-1; }
.tf-w2 { animation-name: tf-write-2; }

.tf-script svg path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tf-swash 7s infinite linear;
}

@keyframes tf-write-1 {
    0%   { clip-path: inset(-10px 100% -10px -6px); opacity: 1; }
    22%  { clip-path: inset(-10px -6px -10px -6px); opacity: 1; }
    88%  { clip-path: inset(-10px -6px -10px -6px); opacity: 1; }
    96%  { clip-path: inset(-10px -6px -10px -6px); opacity: 0; }
    100% { clip-path: inset(-10px 100% -10px -6px); opacity: 0; }
}

@keyframes tf-write-2 {
    0%, 22% { clip-path: inset(-10px 100% -10px -6px); opacity: 1; }
    56%     { clip-path: inset(-10px -6px -10px -6px); opacity: 1; }
    88%     { clip-path: inset(-10px -6px -10px -6px); opacity: 1; }
    96%     { clip-path: inset(-10px -6px -10px -6px); opacity: 0; }
    100%    { clip-path: inset(-10px 100% -10px -6px); opacity: 0; }
}

@keyframes tf-swash {
    0%, 56% { stroke-dashoffset: 1; opacity: 1; }
    70%     { stroke-dashoffset: 0; opacity: 1; }
    88%     { stroke-dashoffset: 0; opacity: 1; }
    96%     { stroke-dashoffset: 0; opacity: 0; }
    100%    { stroke-dashoffset: 1; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tf-w1,
    .tf-w2,
    .tf-script svg path {
        animation: none;
        clip-path: none;
        stroke-dashoffset: 0;
    }
}

/* Longer handwritten lines on the hotel, flight and corporate bottom bars */
.tf-bar--hotel .tf-script,
.tf-bar--flight .tf-script,
.tf-bar--corp .tf-script {
    font-size: 24px;
}

.tf-bar--hotel .tf-script span:last-of-type,
.tf-bar--flight .tf-script span:last-of-type,
.tf-bar--corp .tf-script span:last-of-type {
    margin-left: 22px;
}

.tf-bar--hotel .tf-script svg,
.tf-bar--flight .tf-script svg,
.tf-bar--corp .tf-script svg {
    width: 170px;
    margin-left: 24px;
}

/* Hotel page bottom bar: piggy bank that hops while a coin drops in */
.hero-stat svg.tf-piggy {
    flex-shrink: 0;
    width: 40px;
    height: 36px;
    overflow: visible;
    color: var(--color-primary);
}

.tf-pig {
    transform-origin: 50% 90%;
    animation: tf-pig-hop 2s ease-in-out infinite;
}

.tf-coin {
    animation: tf-coin-drop 2s ease-in infinite;
}

@keyframes tf-coin-drop {
    0%   { transform: translateY(-4px); opacity: 0; }
    12%  { transform: translateY(-4px); opacity: 1; }
    48%  { transform: translateY(9px); opacity: 1; }
    56%  { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(10px); opacity: 0; }
}

@keyframes tf-pig-hop {
    0%, 50%  { transform: translateY(0) scale(1, 1); }
    58%      { transform: translateY(1px) scale(1.06, 0.92); }
    70%      { transform: translateY(-3px) scale(0.97, 1.05); }
    84%, 100% { transform: translateY(0) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
    .tf-pig,
    .tf-coin {
        animation: none;
    }

    .tf-coin {
        opacity: 0;
    }
}

/* Flight page bottom bar: plane climbing away with speed lines */
.hero-stat svg.tf-plane-icon {
    flex-shrink: 0;
    width: 44px;
    height: 36px;
    overflow: visible;
    color: var(--color-primary);
}

.tf-plane {
    animation: tf-takeoff 2.6s cubic-bezier(0.5, 0, 0.75, 0.4) infinite;
}

.tf-speed {
    animation: tf-speed 2.6s ease-out infinite;
}

@keyframes tf-takeoff {
    0%        { transform: translate(-4px, 6px); opacity: 0; }
    10%       { transform: translate(-3px, 5px); opacity: 1; }
    60%       { transform: translate(7px, -4px); opacity: 1; }
    82%       { transform: translate(20px, -15px); opacity: 0; }
    100%      { transform: translate(20px, -15px); opacity: 0; }
}

@keyframes tf-speed {
    0%, 8%    { transform: translateX(6px); opacity: 0; }
    30%       { transform: translateX(0); opacity: 0.95; }
    70%       { transform: translateX(-8px); opacity: 0.4; }
    82%, 100% { transform: translateX(-10px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tf-plane,
    .tf-speed {
        animation: none;
        opacity: 1;
    }
}

/* Corporate page bottom bar: briefcase with a lift and a twinkling sparkle */
.hero-stat svg.tf-case-icon {
    flex-shrink: 0;
    width: 44px;
    height: 36px;
    overflow: visible;
    color: var(--color-primary);
}

.tf-case {
    transform-origin: 50% 100%;
    animation: tf-case-lift 2.4s ease-in-out infinite;
}

.tf-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: tf-spark 2.4s ease-in-out infinite;
}

@keyframes tf-case-lift {
    0%, 55%, 100% { transform: translateY(0) rotate(0); }
    20%           { transform: translateY(-4px) rotate(-3deg); }
    38%           { transform: translateY(0) rotate(1.5deg); }
}

@keyframes tf-spark {
    0%, 12%   { transform: scale(0) rotate(0); opacity: 0; }
    30%       { transform: scale(1.25) rotate(45deg); opacity: 1; }
    52%       { transform: scale(0.7) rotate(90deg); opacity: 0.9; }
    70%, 100% { transform: scale(0) rotate(135deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tf-case,
    .tf-spark {
        animation: none;
    }

    .tf-spark {
        opacity: 1;
    }
}

/* Legal pages (privacy policy): a readable panel in the middle of the page, text left aligned, on a dark overlay */
.legal-page {
    padding-top: 198px;
    padding-bottom: 12px;
}

.legal-wrap {
    position: relative;
    z-index: 2;
    padding-top: 40px;
    padding-bottom: 20px;
}

.legal-panel {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 36px 44px 40px;
    border-radius: 18px;
    border: 1px solid rgba(254, 188, 23, 0.35);
    background-color: rgba(11, 11, 11, 0.86);
    text-align: left;
    color: rgba(255, 255, 255, 0.88);
}

.legal-title {
    margin-top: 6px;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-primary);
}

.legal-intro {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
}

.legal-section {
    margin-top: 26px;
}

.legal-section h2 {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 500;
    color: var(--color-primary);
}

.legal-section p {
    font-size: 15px;
    line-height: 1.6;
}

.legal-section p + ul,
.legal-section ul + p {
    margin-top: 8px;
}

.legal-section ul {
    margin: 0;
    padding-left: 22px;
    list-style: none;
}

.legal-section li {
    position: relative;
    font-size: 15px;
    line-height: 1.6;
}

.legal-section li + li {
    margin-top: 4px;
}

.legal-section li::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.legal-updated {
    margin-top: 30px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 767px) {
    .legal-panel {
        padding: 22px 18px 26px;
    }

    .legal-title {
        font-size: 32px;
    }

    .legal-section h2 {
        font-size: 20px;
    }

    .legal-intro,
    .legal-section p,
    .legal-section li {
        font-size: 15px;
    }
}

/* "Why to choose The SMART Taxi?" feature icons: each one has its own small looping animation, plus a soft ring that pulses outwards */
.tbn-feature-icon {
    position: relative;
}

.tbn-feature-icon::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(254, 188, 23, 0.7);
    opacity: 0;
    animation: tbn-ico-ring 3s ease-out infinite;
    pointer-events: none;
}

@keyframes tbn-ico-ring {
    0%, 55% { transform: scale(1); opacity: 0; }
    62%     { opacity: 0.7; }
    100%    { transform: scale(1.4); opacity: 0; }
}

.tbn-feature-icon svg {
    overflow: visible;
}

.tbn-feature-icon svg * {
    transform-box: view-box;
}

/* 1 Well Maintained Cars: shield pulses, the tick draws itself */
.tbn-ico-0 svg path:first-child {
    transform-origin: 12px 12px;
    animation: tbn-ico-pulse 2.6s ease-in-out infinite;
}

.tbn-ico-0 svg path:nth-child(2) {
    stroke-dasharray: 10;
    animation: tbn-ico-tick 2.6s ease-in-out infinite;
}

@keyframes tbn-ico-pulse {
    0%, 60%, 100% { transform: scale(1); }
    30%           { transform: scale(1.1); }
}

@keyframes tbn-ico-tick {
    0%, 8%  { stroke-dashoffset: 10; }
    35%, 85% { stroke-dashoffset: 0; }
    100%    { stroke-dashoffset: 10; }
}

/* 2 Courteous & Trusted Drivers: a polite nod */
.tbn-ico-1 svg {
    transform-origin: 50% 90%;
    animation: tbn-ico-nod 2.8s ease-in-out infinite;
}

@keyframes tbn-ico-nod {
    0%, 55%, 100% { transform: translateY(0) rotate(0); }
    15%           { transform: translateY(2px) rotate(6deg); }
    30%           { transform: translateY(0) rotate(-3deg); }
}

/* 3 24x7 Customer Support: the headset gives a little ring-ring wiggle */
.tbn-ico-2 svg {
    transform-origin: 50% 60%;
    animation: tbn-ico-ring-wiggle 2.8s ease-in-out infinite;
}

@keyframes tbn-ico-ring-wiggle {
    0%, 45%, 100% { transform: rotate(0); }
    8%            { transform: rotate(-14deg); }
    16%           { transform: rotate(12deg); }
    24%           { transform: rotate(-9deg); }
    32%           { transform: rotate(6deg); }
    40%           { transform: rotate(0); }
}

/* 4 Multiple Payment Modes: the card flips over */
.tbn-ico-3 svg {
    animation: tbn-ico-flip 3.2s ease-in-out infinite;
}

@keyframes tbn-ico-flip {
    0%, 55%, 100% { transform: perspective(120px) rotateY(0); }
    25%           { transform: perspective(120px) rotateY(180deg); }
}

/* 5 OTP Based KM Verification: the clock hand keeps time */
.tbn-ico-4 svg path {
    transform-origin: 12px 12px;
    animation: tbn-ico-clock 3s linear infinite;
}

@keyframes tbn-ico-clock {
    to { transform: rotate(360deg); }
}

/* 6 Clear Communication: the three dots bounce in turn */
.tbn-ico-5 svg circle {
    animation: tbn-ico-dot 1.6s ease-in-out infinite;
}

.tbn-ico-5 svg circle:nth-of-type(2) { animation-delay: 0.18s; }
.tbn-ico-5 svg circle:nth-of-type(3) { animation-delay: 0.36s; }

@keyframes tbn-ico-dot {
    0%, 40%, 100% { transform: translateY(0); }
    20%           { transform: translateY(-2.6px); }
}

/* 7 Complimentary Water & Snacks: the bottle sways */
.tbn-ico-6 svg {
    transform-origin: 40% 90%;
    animation: tbn-ico-sway 3s ease-in-out infinite;
}

@keyframes tbn-ico-sway {
    0%, 100% { transform: rotate(-7deg); }
    50%      { transform: rotate(7deg); }
}

/* 8 Computer Generated Billing: the bill floats up and settles */
.tbn-ico-7 svg {
    animation: tbn-ico-float 2.6s ease-in-out infinite;
}

@keyframes tbn-ico-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    40%      { transform: translateY(-3px) rotate(-4deg); }
    70%      { transform: translateY(0) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tbn-feature-icon::after,
    .tbn-feature-icon svg,
    .tbn-feature-icon svg * {
        animation: none;
    }
}

/* Step cards: the capsule says "Step-N"; the first line of text follows directly below it */
.fb-step {
    padding-top: 36px;
}

.fb-step > .fb-step-text:first-of-type {
    margin-top: 6px;
}

/* Step cards: the content sits in the vertical middle of each card (step 1: centred in the space above its phone picture) */
.fb-step:nth-of-type(n+2) {
    justify-content: center;
}

.fb-step:first-of-type > .fb-step-text:first-of-type {
    margin-top: auto;
    margin-bottom: auto;
}

.fb-step:first-of-type .fb-phone {
    margin: 0;
}

/* Hotel / flight headline: room between the big title and the line under it */
.fb-hero .fb-kicker {
    margin-top: 18px;
}

/* "Why corporates choose The SMART Taxi": every icon has its own small looping animation and a soft ring that pulses outwards */
.ct-reason-icon {
    position: relative;
}

.ct-reason-icon::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(254, 188, 23, 0.7);
    opacity: 0;
    animation: ct-ico-ring 3.2s ease-out infinite;
    pointer-events: none;
}

.ct-reason:nth-child(2n) .ct-reason-icon::after { animation-delay: 0.8s; }
.ct-reason:nth-child(3n) .ct-reason-icon::after { animation-delay: 1.6s; }

@keyframes ct-ico-ring {
    0%, 55% { transform: scale(1); opacity: 0; }
    62%     { opacity: 0.7; }
    100%    { transform: scale(1.45); opacity: 0; }
}

.ct-reason-icon svg {
    overflow: visible;
}

/* Give the animated line details enough weight to remain visible at icon size. */
.ct-reason-icon svg g[stroke="currentColor"] {
    stroke-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ct-reason-icon::after {
        animation: none !important;
    }
}

/* Corporate "Why choose us" icons v2: the parts inside each icon move (wheels turn, bars grow, lines are written ...) */
.ct-reason-icon svg * {
    transform-box: fill-box;
}

/* 1 Car */
.ai-bob { animation: ai-bob 0.5s ease-in-out infinite alternate; }
.ai-wheel { transform-origin: center; animation: ai-spin 0.7s linear infinite; }
.ai-speed { stroke-dasharray: 3 2.4; animation: ai-speed 0.6s linear infinite; }

@keyframes ai-bob   { to { transform: translateY(-0.7px); } }
@keyframes ai-spin  { to { transform: rotate(360deg); } }
@keyframes ai-speed { to { stroke-dashoffset: 10.8; } }

/* 2 Pin */
.ai-pin { transform-origin: 50% 100%; animation: ai-drop 2.4s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
.ai-ripple { transform-origin: center; opacity: 0; animation: ai-ripple 2.4s ease-out infinite; }

@keyframes ai-drop {
    0%   { transform: translateY(-9px); opacity: 0; }
    12%  { opacity: 1; }
    34%  { transform: translateY(0) scale(1.1, 0.88); }
    44%  { transform: translateY(-3.4px) scale(0.96, 1.06); }
    54%  { transform: translateY(0) scale(1.04, 0.95); }
    62%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes ai-ripple {
    0%, 32% { transform: scale(0.3); opacity: 0; }
    38%     { opacity: 0.9; }
    80%, 100% { transform: scale(1.9); opacity: 0; }
}

/* 3 Person with verified badge */
.ai-nod { transform-origin: 50% 100%; animation: ai-nod 3s ease-in-out infinite; }
.ai-badge { transform-origin: center; animation: ai-badge 3s ease-in-out infinite; }
.ai-tick { stroke-dasharray: 7; animation: ai-tick 3s ease-in-out infinite; }

@keyframes ai-nod {
    0%, 55%, 100% { transform: rotate(0); }
    12% { transform: rotate(5deg) translateY(1px); }
    26% { transform: rotate(-3deg); }
}

@keyframes ai-badge {
    0%, 20%   { transform: scale(0); }
    34%       { transform: scale(1.25); }
    44%, 86%  { transform: scale(1); }
    96%, 100% { transform: scale(0); }
}

@keyframes ai-tick {
    0%, 38%   { stroke-dashoffset: 7; }
    56%, 86%  { stroke-dashoffset: 0; }
    96%, 100% { stroke-dashoffset: 7; }
}

/* 4 Headset */
.ai-wave { opacity: 0; animation: ai-wave 2s ease-out infinite; }
.ai-wave.w2 { animation-delay: 0.3s; }

@keyframes ai-wave {
    0%, 10% { opacity: 0; }
    30%     { opacity: 1; }
    70%, 100% { opacity: 0; }
}

/* 5 Bill */
.ai-line { stroke-dasharray: 8; animation: ai-write 3.2s ease-in-out infinite; }
.ai-line.l2 { animation-delay: 0.35s; }
.ai-line.l3 { animation-delay: 0.7s; }
.ai-stamp { transform-origin: center; animation: ai-stamp 3.2s ease-in-out infinite; }

@keyframes ai-write {
    0%      { stroke-dashoffset: 8; }
    25%, 82% { stroke-dashoffset: 0; }
    96%, 100% { stroke-dashoffset: 8; }
}

@keyframes ai-stamp {
    0%, 55%  { transform: scale(0); opacity: 0; }
    66%      { transform: scale(1.7); opacity: 1; }
    76%, 82% { transform: scale(1); opacity: 1; }
    96%, 100% { transform: scale(0); opacity: 0; }
}

/* 6 Chart */
.ai-bar { transform-origin: 50% 100%; animation: ai-bar 3s ease-in-out infinite; }
.ai-bar.b2 { animation-delay: 0.18s; }
.ai-bar.b3 { animation-delay: 0.36s; }
.ai-trend { stroke-dasharray: 22; animation: ai-trend 3s ease-in-out infinite; }

@keyframes ai-bar {
    0%      { transform: scaleY(0); }
    30%, 80% { transform: scaleY(1); }
    94%, 100% { transform: scaleY(0); }
}

@keyframes ai-trend {
    0%, 26% { stroke-dashoffset: 22; }
    55%, 82% { stroke-dashoffset: 0; }
    94%, 100% { stroke-dashoffset: 22; }
}

/* 7 Card */
.ai-shine { animation: ai-shine 2.6s ease-in-out infinite; }
.ai-coin { transform-origin: center; animation: ai-coin 2.6s ease-in-out infinite; }

@keyframes ai-shine {
    0%, 20% { transform: translateX(0); }
    70%, 100% { transform: translateX(32px); }
}

@keyframes ai-coin {
    0%, 40%, 100% { transform: scale(1); }
    55%           { transform: scale(1.35); }
}

/* 8a Phone: rings, with waves sent out */
.ai-handset { transform-origin: 30% 70%; animation: ai-ring 2.4s ease-in-out infinite; }
.ai-arc { opacity: 0; animation: ai-arc 2.4s ease-out infinite; }
.ai-arc.a2 { animation-delay: 0.22s; }

@keyframes ai-ring {
    0%, 40%, 100% { transform: rotate(0); }
    6%  { transform: rotate(-16deg); }
    12% { transform: rotate(14deg); }
    18% { transform: rotate(-12deg); }
    24% { transform: rotate(9deg); }
    30% { transform: rotate(-5deg); }
}

@keyframes ai-arc {
    0%, 4% { opacity: 0; }
    16%    { opacity: 1; }
    42%, 100% { opacity: 0; }
}

/* 8b WhatsApp: the chat pops while a ring spreads out */
.ai-chat { transform-origin: 50% 80%; animation: ai-chat 2.4s ease-in-out infinite; }
.ai-pulse { transform-origin: center; opacity: 0; animation: ai-pulse 2.4s ease-out infinite; }

@keyframes ai-chat {
    0%, 55%, 100% { transform: scale(1); }
    15% { transform: scale(1.15); }
    30% { transform: scale(0.97); }
}

@keyframes ai-pulse {
    0%, 8% { transform: scale(0.8); opacity: 0.9; }
    60%, 100% { transform: scale(1.6); opacity: 0; }
}

/* 8c Email: the flap opens and a new-mail dot pops up */
.ai-flap { transform-origin: 50% 0; animation: ai-flap 2.8s ease-in-out infinite; }
.ai-dot { transform-origin: center; animation: ai-dot 2.8s ease-in-out infinite; }

@keyframes ai-flap {
    0%, 45%, 100% { transform: scaleY(1); }
    20%           { transform: scaleY(-0.7); }
}

@keyframes ai-dot {
    0%, 30%   { transform: scale(0); }
    42%       { transform: scale(1.4); }
    52%, 85%  { transform: scale(1); }
    95%, 100% { transform: scale(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ct-reason-icon svg * {
        animation: none !important;
    }

    .ai-wave,
    .ai-arc,
    .ai-ripple,
    .ai-pulse {
        opacity: 0;
    }
}

/* Footer: social links (icon + name) in the middle of the top row */
.site-info-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 40px;
    list-style: none;
}

.site-info-social a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: color 0.2s ease;
}

.site-info-social li,
.site-info-legal-links li {
    display: flex;
    align-items: center;
    line-height: 1;
}

.site-info-social span {
    line-height: 1;
    position: relative;
    top: 1px;
}

.site-info-social svg {
    display: block;
    flex-shrink: 0;
    color: var(--color-primary);
    transition: transform 0.25s ease;
}

.site-info-social a:hover {
    color: var(--color-primary);
}

.site-info-social a:hover svg {
    transform: translateY(-2px) scale(1.12);
}

@media (max-width: 1024px) {
    .site-info-social {
        justify-content: flex-start;
    }
}

/* Home hero fills the whole screen; the trust bar and footer sit below it and are reached by scrolling */
.home .hero--banner {
    min-height: 100vh;
    min-height: 100svh;
}

/* Trust bar icons: the three people take turns to pop up, and the windows of the building light up one after another */
.st-people .st-mid,
.st-people .st-side {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.st-people .st-mid   { animation: st-hop 2.8s ease-in-out infinite; }
.st-people .st-left  { animation: st-hop 2.8s ease-in-out 0.35s infinite; }
.st-people .st-right { animation: st-hop 2.8s ease-in-out 0.7s infinite; }

@keyframes st-hop {
    0%, 40%, 100% { transform: translateY(0) scale(1); }
    14%           { transform: translateY(-2.6px) scale(1.12); }
    28%           { transform: translateY(0) scale(0.97); }
}

.st-building .st-win {
    stroke-width: 2.2;
    animation: st-light 3.2s ease-in-out infinite;
}

.st-building .w1 { animation-delay: 0s; }
.st-building .w2 { animation-delay: 0.3s; }
.st-building .w3 { animation-delay: 0.6s; }
.st-building .w4 { animation-delay: 0.9s; }
.st-building .w5 { animation-delay: 1.2s; }

@keyframes st-light {
    0%, 55%, 100% { opacity: 0.25; }
    12%, 40%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .st-people .st-mid,
    .st-people .st-side,
    .st-building .st-win {
        animation: none;
        opacity: 1;
    }
}

/* Animated four-icon SVG (taxi, aeroplane, hotel, vacation) inside the first "Why corporates choose us" circle */
.ct-reason-icon--img {
    overflow: visible;
}

.ct-reason-icon--img img {
    display: block;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    object-fit: cover;
}

/* Home option cards: the person waves hello (head pops, shoulders draw in, a ring pulses); the building draws itself and its windows light up */
.hero-option-icon .hi-head,
.hero-option-icon .hi-ring {
    transform-box: fill-box;
    transform-origin: center;
}

.hero-option-icon .hi-head { animation: hi-pop 3s ease-in-out infinite; }

.hero-option-icon .hi-ring {
    opacity: 0;
    animation: hi-ring 3s ease-out infinite;
}

.hero-option-icon .hi-body {
    stroke-dasharray: 22;
    animation: hi-draw 3s ease-in-out infinite;
}

@keyframes hi-pop {
    0%, 55%, 100% { transform: translateY(0) scale(1); }
    12%           { transform: translateY(-1.4px) scale(1.14); }
    26%           { transform: translateY(0) scale(0.96); }
    38%           { transform: translateY(-0.6px) scale(1.04); }
}

@keyframes hi-ring {
    0%, 14% { transform: scale(1); opacity: 0.8; }
    60%, 100% { transform: scale(1.7); opacity: 0; }
}

@keyframes hi-draw {
    0%      { stroke-dashoffset: 22; }
    30%, 82% { stroke-dashoffset: 0; }
    96%, 100% { stroke-dashoffset: 22; }
}

.hero-option-icon .hi-build {
    stroke-dasharray: 60;
    animation: hi-build 3.6s ease-in-out infinite;
}

.hero-option-icon .hi-win {
    stroke-width: 2.2;
    animation: hi-light 3.6s ease-in-out infinite;
}

.hero-option-icon .hi-win.w1 { animation-delay: 0.1s; }
.hero-option-icon .hi-win.w2 { animation-delay: 0.4s; }
.hero-option-icon .hi-win.w3 { animation-delay: 0.7s; }
.hero-option-icon .hi-win.w4 { animation-delay: 1s; }
.hero-option-icon .hi-win.w5 { animation-delay: 1.3s; }

@keyframes hi-build {
    0%      { stroke-dashoffset: 60; }
    28%, 86% { stroke-dashoffset: 0; }
    98%, 100% { stroke-dashoffset: 60; }
}

@keyframes hi-light {
    0%, 22% { opacity: 0; }
    38%, 80% { opacity: 1; }
    96%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-option-icon .hi-head,
    .hero-option-icon .hi-ring,
    .hero-option-icon .hi-body,
    .hero-option-icon .hi-build,
    .hero-option-icon .hi-win {
        animation: none;
        stroke-dashoffset: 0;
    }

    .hero-option-icon .hi-ring {
        opacity: 0;
    }
}

/* Taxi enquiry on small phones: the number box gets the full width of its field, "Send OTP" drops to a full-width row underneath */
@media (max-width: 480px) {
    .tbn-wa .tb-field.tb-field--phone.tbn-otp-field {
        flex-wrap: wrap;
        padding-bottom: 0;
    }

    .tbn-wa .tb-field--phone input[name="whatsapp"] {
        flex: 1 1 0;
        min-width: 0;
    }

    .tbn-wa .tb-field--phone.tbn-otp-field > .tbn-otp-btn[data-send-otp] {
        flex: 1 1 100%;
        min-height: 44px;
        margin: 4px -14px 0 -14px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
}

/* Taxi enquiry: Quick Response / Best Rates / Safe & Reliable stack as an even, left-aligned list on phones (no leftover side dividers or indent) */
@media (max-width: 767px) {
    .tbn-assure {
        align-items: stretch;
        gap: 0;
    }

    .tbn-assure li {
        padding: 10px 0;
        text-align: left;
    }

    .tbn-assure li + li {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .tbn-assure li span {
        max-width: none;
    }
}

/* Phones: the feature strip and "Our Fleet" get the same space between them as the other taxi-page sections */
@media (max-width: 767px) {
    .tbn-hero {
        padding-bottom: 34px;
    }

    .tbn-fleet {
        padding-top: 34px;
    }
}

/* Phones: the "Why to choose", "Our Fleet" and cities headings stack as title, then note, everything left-aligned (same as at 375px) */
@media (max-width: 767px) {
    .tbn-why,
    .tbn-fleet .tbn-heading,
    .tbn-cities-head {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }

    .tbn-why .tbn-title,
    .tbn-fleet .tbn-title,
    .tbn-cities-head .tbn-title {
        text-align: left;
        white-space: normal;
    }

    .tbn-why .tbn-lead,
    .tbn-fleet .tbn-lead,
    .tbn-cities-note {
        max-width: none;
        margin-left: 0;
        text-align: left;
    }
}

/* Tablet: "Why to choose" is laid out like "Our Fleet" - title on the left (it may wrap to two lines), note on the right, right-aligned */
@media (min-width: 768px) and (max-width: 1024px) {
    .tbn-why .tbn-title {
        white-space: normal;
        text-align: left;
    }

    .tbn-why .tbn-lead {
        flex: 0 0 340px;
        max-width: 340px;
        margin-left: auto;
        text-align: right;
    }
}

/* Tablet (768px - 991px): hotel / flight / corporate review sliders show two testimonials at a time, not one */
@media (min-width: 768px) and (max-width: 991px) {
    .fb-review {
        flex-basis: calc((100% - 14px) / 2);
    }
}

/* Phones and tablets: the corporate-page section titles are centred, also when they wrap onto several lines */
@media (max-width: 1024px) {
    .ct-heading,
    .ct-heading span,
    .fb-stories-title,
    .fb-stories-title span,
    .fb-stories-sub {
        text-align: center;
    }

    .ct-heading span {
        flex: 0 1 auto;
    }
}

/* About us intro: dark backing so the text stays readable over the bright photo (same treatment as the other sections).
   No width override here - it stays the plain .container-fluid.ab-wrap width, same as the highlights bar and the
   journey card below it, so all three sections line up edge to edge. */
.ab-page .ab-intro {
    padding: 28px 16px 32px;
    border-radius: 18px;
    background-color: rgba(11, 11, 11, 0.8);
    text-shadow: none;
}

@media (max-width: 768px) {
    .ab-page .ab-intro {
        padding-top: 22px;
        padding-bottom: 24px;
    }
}

/* Closing quote mark: tied to the last line of the quote text (not a fixed distance from the top), so it stays at the end of the text at every screen width */
.ab-quote p {
    position: relative;
}

.ab-quote p .ab-quote-mark--end {
    top: auto;
    left: auto;
    right: -44px;
    bottom: -34px;
}

/* About us numbers row on tablets and small laptops: all five items on one line, with breathing room that scales with the viewport */
@media (min-width: 768px) and (max-width: 1199px) {
    .ab-highlights {
        flex-wrap: nowrap;
        row-gap: 0;
        gap: clamp(12px, 3vw, 28px);
        padding: clamp(18px, 3vw, 28px) clamp(16px, 3vw, 32px);
    }

    .ab-highlights li {
        flex: 1 1 0;
        min-width: 0;
        gap: 10px;
        justify-content: center;
    }

    .ab-highlights li + li {
        padding-left: clamp(12px, 3vw, 28px);
        border-left: 1px solid rgba(255, 255, 255, 0.15);
    }

    .ab-highlights svg {
        width: clamp(22px, 2.6vw, 28px);
        height: clamp(22px, 2.6vw, 28px);
        flex-shrink: 0;
    }

    .ab-highlights strong {
        font-size: clamp(16px, 1.7vw, 19px);
    }

    .ab-highlights small {
        font-size: clamp(12px, 1.2vw, 14px);
        line-height: 1.3;
        white-space: normal;
    }

    .ab-highlights li > span {
        min-width: 0;
    }
}

/* =========================
   RESPONSIVE BREAKPOINTS
   (all pages - keep at the bottom of this file so they override the rules above)
   ========================= */

/* Small desktop / laptop - 1600px: content was tuned for large screens, so at this width (and
   when zoomed in, which shrinks the effective viewport the same way) the 1400px container and
   full-size titles left too much padding and oversized headings. Narrow the container and step
   titles down a notch; the 1440px/1024px/768px blocks below take over for smaller widths. */
@media screen and (max-width: 1600px) {
    :root {
        --content-w: 1100px;
        --container-width: 1100px;
    }

    .section {
        padding: 56px 0;
    }

    .tbn-section {
        padding: 0px 0;
    }

    p {
        font-size: 16px;
    }

    h1,
    .hero-title {
        font-size: 46px;
    }

    h2,
    .tbn-title,
    .tbn-enquiry-title,
    .fb-stories-title,
    .ct-offer-title,
    .ab-journey-title,
    .legal-title {
        font-size: 34px;
    }

    h3 {
        font-size: 24px;
    }

    /* These two use a hardcoded 1400px instead of var(--content-w), so the :root override above
       doesn't reach them - match it explicitly here. */
    .ct-wrap.ct-clients,
    .ct-wrap.ct-why {
        max-width: 1100px;
    }

    .tf-script {
        font-size: 20px;
    }
}

/* Laptop L - 1440px */
@media screen and (max-width: 1440px) {
    /* Every paragraph: 16px on 1440px and 1024px screens (this block covers both, and 768px and below) */
    p {
        font-size: 16px !important;
    }


    .hero-option {
    width: calc(200 * var(--u));
    max-width: none;
    height: calc(65 * var(--u));
    gap: calc(9 * var(--u));
    padding: 0 calc(12 * var(--u));
    border-radius: calc(6 * var(--u));
    }

}

/* Home hero option card text: 16px between 1025px and 1440px (smaller screens have their own sizes) */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .hero-options .hero-option .hero-option-text,
    .hero-options .hero-option .hero-option-text strong {
        font-size: 20px;
        font-weight: 400;
    }
}


/* Laptop - 1024px */
@media screen and (max-width: 1024px) {
    /* Every h2 / section title: 35px on 1024px and 768px screens (the 768px block below overrides nothing; 425px and smaller use 30px) */
    h2,
    .tbn-title,
    .tbn-enquiry-title,
    .fb-stories-title,
    .ct-heading,
    .ct-offer-title,
    .ab-journey-title,
    .tbn-cities-title,
    .legal-section h2 {
        font-size: 35px !important;
    }


    /* Header: hours sit under the number in the flow so they never overlap the logo */
    /* Hours: two lines, larger so they are readable */
    .header-phone small {
        position: static;
        display: block;
        white-space: normal;
        max-width: 300px;
        margin-left: auto;
        font-size: 15px;
        line-height: 1.35;
        text-align: right;
    }

    .logo img {
        width: 260px;
    }

    .hero-title {
        font-size: 45px;
    }

    .hero-stats {
    height: calc(57 * var(--u));
    padding: 0;
    gap: calc(24 * var(--u));
    }

    /* Home hero option cards: larger on tablet landscape (above the 768px stacked layout) */
    @media (min-width: 769px) {
        .hero-options {
            gap: 20px;
        }

        .hero-option {
            width: 340px;
            height: auto;
            min-height: 76px;
            gap: 14px;
            padding: 12px 18px;
            border-radius: 8px;
        }

        .hero-option-badge {
            width: 46px;
            height: 46px;
        }

        .hero-option-icon {
            width: 24px;
            height: 24px;
        }

        .hero-options .hero-option .hero-option-text {
            font-size: 15px;
        }

        .hero-options .hero-option .hero-option-text strong {
            font-size: 19px;
        }

        .hero-option-go {
            width: 30px;
            height: 30px;
        }

        .hero-option-arrow {
            width: 16px;
            height: 16px;
        }
    }

}


/* Tablet - 768px */
@media screen and (max-width: 768px) {
    /* Every section: 15px of space on the left and right on 768px screens and smaller */
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* the two boxed cards on the corporate page sit 15px from each edge as well */
    .ct-wrap.ct-why,
    .ct-wrap.ct-clients {
        width: calc(100% - 30px);
    }


    /* Header */
    .header-contact {
        gap: 14px;
        font-size: 13px;
    }

    .header-phone a {
        font-size: 16px;
    }

    /* Hours: two lines, larger so they are readable */
    .header-phone small {
        white-space: normal;
        max-width: 260px;
        margin-left: auto;
        font-size: 14px;
        line-height: 1.35;
        text-align: right;
    }

    .logo {
        margin-top: 12px;
    }

    .logo img {
        width: 220px;
    }
    /* Home hero: 15px gutters left and right (also applies to every smaller screen) */
    .hero-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Home hero option cards: stacked, full width, matches the large-screen cards */
    .hero-options {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .hero-options .hero-option {
        width: 62%;
        min-width: 340px;
        max-width: 480px;
        height: auto;
        min-height: 100px;
        gap: 18px;
        padding: 16px 12px;
        border-radius: 14px;
    }

    .hero-options .hero-option .hero-option-badge {
        width: 56px;
        height: 56px;
    }

    .hero-options .hero-option .hero-option-icon {
        width: 28px;
        height: 28px;
    }

    .hero-options .hero-option .hero-option-text {
        font-size: 16px;
    }

    .hero-options .hero-option .hero-option-text strong {
        font-size: 19px;
    }

    .hero-options .hero-option .hero-option-go {
        width: 30px;
        height: 30px;
    }

    .hero-options .hero-option .hero-option-arrow {
        width: 16px;
        height: 16px;
    }

    .hero-title {
        font-size: 38px;
    }

    .hero-stats {
    height: calc(57 * var(--u));
    padding: 15px 0px;
    gap: calc(24 * var(--u));
    }

    .hero-title {
        margin-top: 50px;
    }
}


/* Mobile L - 425px */
@media screen and (max-width: 425px) {
    /* Tighten vertical rhythm across the taxi-booking sections on 425px and smaller. */
    .tbn-page .tbn-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .tbn-page .tbn-hero {
        padding-bottom: 12px;
    }

    .tbn-page .tbn-fleet {
        padding-top: 12px;
    }

    /* Keep Send OTP on a compact, full-width row at the bottom of the WhatsApp field. */
    .tbn-wa .tb-field.tb-field--phone.tbn-otp-field {
        flex-wrap: wrap;
        row-gap: 0;
        column-gap: 10px;
        padding-bottom: 0;
    }

    .tbn-wa .tb-field--phone.tbn-otp-field > .tbn-otp-btn[data-send-otp] {
        flex: 1 0 100%;
        min-height: 44px;
        margin: 0 -14px 0;
        padding: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 0;
        font-size: 13px;
    }

    /* Trust bar ("Trusted by 16000+ Customers / 40+ Corporates") shown above the footer on every
       page: an earlier --u-scaled rule zeroes its padding at this width, leaving the icon/text
       touching the box's top and bottom edges. Restore some breathing room here. */
    .hero-stats {
        padding: 18px 16px;
    }

    /* Hotel / flight / corporate footer bar: the long "Best Deals on Hotels across India and
       Abroad" style sentence was forced onto one line (inherited from .hero-stat's nowrap, meant
       for short text like "16,000+ Customers") and overflowed its box at this width. Let it wrap. */
    .tf-tag {
        white-space: normal;
    }

    .tf-tag p {
        white-space: normal;
    }

    /* Feature strip and reviews slider: the prev/next arrows move off the card's edges and sit
       together in their own row BELOW the dots, instead of crowding the card. .tbn-slider becomes
       a transparent pass-through (display:contents) so its arrow buttons and the viewport join the
       dots as direct items of .tbn-slider-group, which is what lets all four be freely reordered.
       (This block covers 425px, 375px and 320px together.) */
    .tbn-slider-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "viewport viewport"
            "dots     dots"
            "prev     next";
        gap: 10px 12px;
    }

    .tbn-slider-group .tbn-slider {
        display: contents;
    }

    .tbn-slider-group .tbn-viewport {
        grid-area: viewport;
    }

    .tbn-slider-group .tbn-dots {
        grid-area: dots;
        margin-top: 0;
    }

    .tbn-slider-group [data-prev] {
        grid-area: prev;
        justify-self: end;
    }

    .tbn-slider-group [data-next] {
        grid-area: next;
        justify-self: start;
    }

    /* Hotel / flight / corporate review carousels: same treatment - arrows move off the card's
       edges into their own row BELOW the dots, instead of crowding the card. .fb-carousel's own
       margin-top (which normally gives the space below "Real Stories.") stops applying once it
       becomes display:contents below, so that 20px gap has to move onto this wrapper instead. */
    .fb-carousel-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "viewport viewport"
            "dots     dots"
            "prev     next";
        gap: 10px 12px;
        margin-top: 20px;
    }

    .fb-carousel-group .fb-carousel {
        display: contents;
    }

    .fb-carousel-group .fb-carousel-viewport {
        grid-area: viewport;
    }

    .fb-carousel-group .fb-dots {
        grid-area: dots;
        margin-top: 0;
    }

    .fb-carousel-group [data-prev] {
        grid-area: prev;
        justify-self: end;
    }

    .fb-carousel-group [data-next] {
        grid-area: next;
        justify-self: start;
    }

    /* .site-header {
        margin-bottom: 40px;
    } */

    /* Every h2 / section title: 30px on 425px, 375px and 320px screens (this block covers all three) */
    h1,
    .hero-title {
        font-size: 28px !important;
    }

    h2,
    .tbn-title,
    .tbn-enquiry-title,
    .fb-stories-title,
    .ct-heading,
    .ct-offer-title,
    .ab-journey-title,
    .tbn-cities-title,
    .legal-section h2 {
        font-size: 24px !important;
    }


    /* Compact two-row header on narrow screens. */
    .header-contact {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "home phone"
            "prev india";
        align-items: center;
        justify-content: stretch;
        column-gap: 8px;
        row-gap: 6px;
        font-size: 14px;
    }

    .header-nav {
        display: contents;
    }

    .header-contact .header-nav .header-back:not(.header-prev) {
        grid-area: home;
    }

    .header-contact .header-nav .header-prev {
        grid-area: prev;
    }

    .header-contact .header-back {
        gap: 3px;
        margin: 0;
        font-size: 14px;
        white-space: nowrap;
    }

    .header-nav .header-back svg {
        width: 14px;
        height: 14px;
    }

    .header-contact > .header-phone {
        grid-area: phone;
        justify-self: end;
        margin: 0;
    }

    .header-contact > .made-in-india {
        grid-area: india;
        justify-content: flex-end;
        white-space: nowrap;
        font-size: 14px;
    }

    /* Pages without Back/Previous links: put the India note beside the phone number at the left. */
    .header-contact:not(:has(.header-nav)) {
        grid-template-columns: 1fr auto;
        grid-template-areas: "india phone";
        justify-content: space-between;
        column-gap: 12px;
    }

    .header-contact:not(:has(.header-nav)) > .made-in-india {
        justify-self: start;
        justify-content: flex-start;
    }

    .header-contact:not(:has(.header-nav)) > .header-divider {
        display: none;
    }

    .made-in-india {
        align-items: flex-start;
        gap: 6px;
        line-height: 1.3;
    }

    .made-in-india .flag {
        margin-top: 1px;
    }

    .header-phone a {
        font-size: 14px;
        gap: 4px;
    }

    /* Hours: two lines, larger so they are readable (also applies to 375px and 320px) */
    .header-phone small {
        white-space: normal;
        max-width: 200px;
        margin-left: auto;
        font-size: 11px;
        line-height: 1.35;
        text-align: right;
    }

    .logo img {
        width: 180px;
    }

    /* Keep the requested 40px gap directly between the header logo and taxi-page H1. */
    .tb-hero {
        padding-top: 158px;
    }

    .tb-hero .hero-title {
        margin-top: 40px;
    }

    .hero-title {
    font-size: 32px;
    }

    /* Phones: the option cards use the full width */
    .hero-options .hero-option {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .booking-wheel {
    display: block;
    width: min(600px, calc(100vh - 310px), 98vw);
    height: auto;
    margin: 0 auto;
    overflow: visible;
    }

    .site-info-social {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    list-style: none;
    gap: 15px;
    }

    /* Keep footer social icons visible without their labels on narrow screens. */
    .site-info-social span {
        display: none;
    }

    /* Place the icon-only social links opposite Privacy Policy on the footer's second row. */
    .site-info-grid {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo logo"
            "legal social";
        align-items: center;
        column-gap: 12px;
    }

    .site-info-logo {
        grid-area: logo;
    }

    .site-info-social {
        grid-area: social;
        justify-content: flex-end;
        gap: 12px;
    }

    .site-info-legal-links {
        grid-area: legal;
    }

    .hero-title {
         margin-top: 30px !important;
    }


    .tbn-car-name {
    font-size: 19px;
    font-weight: 400;
    }

}

@media screen and (max-width: 480px) {

    .header-contact:not(:has(.header-nav)) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "india phone";
    justify-content: space-between !important;
    column-gap: 12px;
    }

    .hero-title {
        margin-top: 80px;
    }

}

/* Mobile/tablet (everything but desktop): the browser UI changes the visual
   viewport while scrolling. Keep the fixed travel scene at a stable height so
   the background crop does not jump when the address bar appears or
   disappears.
   (overscroll-behavior-y: none was tried here to also stop the end-of-scroll
   rubber-band bounce from exposing a sliver below the scene, but it blocks
   overscroll at the TOP too - there's no top/bottom-only variant - which is
   exactly the gesture pull-to-refresh relies on. Dropped: a broken native
   refresh gesture is worse than the rare cosmetic sliver.) */
@media screen and (max-width: 1199px) {
    .banner-stage {
        /* lvh is stable (doesn't recalculate as the address bar animates, which
           is what caused the flicker) but, unlike svh, tall enough to still
           cover the viewport once the browser chrome retracts on scroll - so no
           gap opens up below the scene. */
        height: 100lvh !important;
        bottom: auto !important;
    }
}

/* Footer layout from the mobile design: logo first, then the legal/social row.
   Keep the social names on larger phones; the compact icon-only treatment is
   reserved for the narrowest screens. */
@media screen and (min-width: 426px) and (max-width: 767px) {
    .site-info-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "social"
            "legal";
        gap: 10px;
        padding: 16px 16px 12px;
    }

    .site-info-logo img {
        width: 170px;
    }

    .site-info-social {
        justify-content: flex-start;
        gap: 8px 28px;
    }

    .site-info-social span {
        display: inline;
    }

    .site-info-legal-links {
        justify-content: flex-start;
    }
}

/* Compact footer treatment through 480px: names are hidden and the three
   social icons sit opposite the Privacy Policy link. */
@media screen and (max-width: 480px) {
    /* Inner-page mobile header: navigation on the left, contact details on
       the right, matching the compact 425/480px reference layout. */
    .header-contact:has(.header-nav) {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "home phone"
            "prev india";
        align-items: center;
        column-gap: 8px;
        row-gap: 6px;
        width: 100%;
    }

    .header-contact:has(.header-nav) .header-nav {
        display: contents;
    }

    .header-contact:has(.header-nav) .header-back:not(.header-prev) {
        grid-area: home;
    }

    .header-contact:has(.header-nav) .header-prev {
        grid-area: prev;
    }

    .header-contact:has(.header-nav) > .header-phone {
        grid-area: phone;
        justify-self: end;
    }

    .header-contact:has(.header-nav) > .made-in-india {
        grid-area: india;
        justify-self: end;
    }

    .site-info-grid {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo logo"
            "legal social";
        gap: 12px;
        padding: 16px 16px 12px;
    }

    .site-info-logo {
        grid-area: logo;
        align-self: center;
    }

    .site-info-social {
        grid-area: social;
        align-self: center;
    }

    .site-info-legal-links {
        grid-area: legal;
    }

    .site-info-social {
        justify-content: flex-end;
        gap: 16px;
    }

    .site-info-social span {
        display: none;
    }

    .site-info-legal-links {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 425px) {
    .site-info-grid {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo logo"
            "legal social";
        gap: 12px;
        padding: 16px 16px 12px;
    }

    .site-info-logo img {
        width: 170px;
    }

    .site-info-social {
        justify-content: flex-end;
        gap: 16px;
    }

    .site-info-social span {
        display: none;
    }

    .site-info-legal-links {
        justify-content: flex-start;
    }
}


/* Mobile M - 375px */
@media screen and (max-width: 375px) {

    /* Header */
    .header-contact {
        gap: 8px;
    }

    .header-phone a {
        font-size: 14px;
        gap: 4px;
    }

    .logo img {
        width: 160px;
    }

    .booking-wheel {
    display: block;
    width: min(600px, calc(100vh - 310px), 98vw);
    height: auto;
    margin: 0 auto;
    overflow: visible;
    }

    .tbn-why .tbn-title {
    font-size: 26px;
    white-space: normal;
    text-align: left;
    }

    .tbn-fleet .tbn-heading {
    width: 100%;
    /* justify-content: space-between; */
    /* gap: 80px; */
    gap: 8px;
    }

    .tbn-fleet .tbn-lead {
    margin-left: auto;
    text-align: left;
    }

    .tbn-why .tbn-lead {
    max-width: none;
    margin-left: 0;
    font-size: 16px;
    text-align: left;
    }

    .hero-title {
         margin-top: 30px !important;
    }

    .tbn-car-name {
    font-size: 19px;
    font-weight: 400;
    }

}


/* Mobile S - 320px */
@media screen and (max-width: 320px) {

    /* Header */
    .header-contact {
        gap: 6px;
        font-size: 11px;
    }

    .header-phone a {
        font-size: 12px;
    }

    .header-phone small {
        max-width: 170px;
        font-size: 10px;
    }

    .logo img {
        width: 140px;
    }

}

/* Desktop/tablet individual-booking logo scales with the same viewport height as its service wheel. */
@media screen and (min-width: 768px) {
    .logo img {
        width: clamp(120px, calc(62.5vh - 193.75px), 300px);
    }
}

@media screen and (min-width: 426px) and (max-width: 1024px) {
    .header-contact:not(:has(.header-nav)) {
        justify-content: flex-end;
    }
}

@media screen and (max-width: 425px) {
    .banner-stage {
        transform: none;
    }

    .banner-taillight,
    .banner-streak,
    .banner-plane-beacon,
    .banner-plane-strobe,
    .banner-star--twinkle {
        animation: none !important;
    }

    .banner-taillight {
        opacity: 0.65;
    }

    .banner-streak {
        /* Without the animation, the 12/16-unit dash just sits invisibly at the
           very start of its path - show the full glowing line instead. */
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        opacity: 0.8;
    }

    .banner-plane-beacon,
    .banner-plane-strobe {
        opacity: 1;
    }

    .banner-star--twinkle {
        opacity: var(--peak);
    }
}

/* Keep the service-wheel landing hero within one viewport on every device. */
.home.booking-page .booking-hero {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding-top: clamp(200px, 26svh, 250px);
}

.home.booking-page .booking-hero .hero-content {
    min-height: 0;
    padding: 0 15px 12px;
    transform: translateY(20px);
}

.home.booking-page .booking-wheel {
    width: min(90vw, clamp(600px, 28vw, 620px));
    max-width: 100%;
}

.home.booking-page .page-strip {
    margin-top: 20px;
}

/* Service-wheel landing hero: padding-top reserves room for the logo above, but 26svh leaves a
   big empty gap under the tagline at small-to-medium desktop widths - tighten it there. */
@media screen and (max-width: 1600px) {
    .home.booking-page .booking-hero {
        padding-top: clamp(150px, 18svh, 190px);
    }
}


.ab-journey.small-desktop-devices {
    grid-template-columns: 1fr 1fr;
    padding: 20px;
}

.small-desktop-devices .ab-quote {
    border-left: none;
    border-top: 1px solid rgba(254, 188, 23, 0.7);
    padding-top: 20px;
    margin-top: 20px;
}

.small-desktop-devices .ab-quote-mark{
    top: 16px;
}

/* Two Our Journey blocks exist in the markup: the normal one and .small-desktop-devices.
   Only one shows at a time - the small-desktop-devices version only between 1200px and 1600px,
   the normal version everywhere else (including tablets/phones, which already have their own
   responsive rules for it above). */
.ab-journey.small-desktop-devices {
    display: none;
}

@media (min-width: 1200px) and (max-width: 1600px) {
    .ab-journey:not(.small-desktop-devices) {
        display: none;
    }

    .ab-journey.small-desktop-devices {
        display: grid;
    }
}

/* Corporate mobility "Why corporates choose us" strip: 8-across is too cramped at this width
   (laptop zoom range). Same 4-column, 2-row layout the 1199px breakpoint already uses below. */
@media (min-width: 1200px) and (max-width: 1600px) {
    .ct-reasons {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 24px;
    }

    .ct-reason:nth-child(5) {
        border-left: 0;
    }
}

/* 480/425/375px: .hero's base "flex: 1 1 0%" makes the explicit height above a no-op
   (flex-basis:0% ignores it), so the hero was sized by its content instead of the
   viewport and the next section bled into view. Switch the wheel to a height-driven
   size (letting it crop at the sides - .hero already has overflow:hidden) so the hero
   fills exactly one screen on these phones. */
@media screen and (max-width: 480px) {
    .home.booking-page .booking-hero {
        flex: none;
    }

    .home.booking-page .booking-wheel {
        width: auto;
        max-width: none;
        /* height: calc(100svh - clamp(200px, 26svh, 250px) - 32px); */
    }

    .home.booking-page .page-strip {
        margin-top: 0;
    }
}