/* ==========================================================================
   RC Travels - "Reliable Rides, Anytime"
   --------------------------------------------------------------------------
   THE PALETTE COMES FROM THE LOGO, not from a reference site. The logo has
   exactly three inks, and the whole theme is built from them:

     cyan   #043c5c   the "RC" letters      -> primary brand, buttons, links
     amber  #fcc808   the road and mountain -> accent, highlights, CTAs
     grey   #6D6E71   the logo backdrop     -> dark sections and neutrals

   Two rules that follow from those colours:

   1. Neutrals are a WARM grey scale, not the blue-slate scale used before.
      Blue-grey next to this cyan makes the cyan look dirty, because they sit
      close together in hue and compete.

   2. Amber never carries white text. #fcc808 against white is roughly 1.7:1,
      far below the 4.5:1 minimum, so amber buttons use dark ink instead. Cyan
      is dark enough at this shade to take white safely.

   Loaded AFTER master.css / index.css so it wins on specificity ties without
   needing !important everywhere.
   ========================================================================== */

:root {
    /* ---- brand: deep maroon, taken from rctravels.in --primary ---- */
    --brand:          #043c5c;
    --brand-hover:    #6a1214;
    --brand-alt:      #9c1a1c;
    --brand-tint:     #fbf1f1;
    --brand-tint-2:   #f5e2e2;

    /* ---- accent: the gold used for nav hover on rctravels.in ---- */
    --accent:         #fcc808;
    --accent-hover:   #ad8405;
    --accent-tint:    #fdf7e3;
    --accent-ink:     #241c00;   /* readable text on gold */

    /* ---- neutrals: near-black and the flat #F2F2F2 band ---- */
    --logo-grey:      #6d6e71;
    --ink:            #111111;
    --ink-2:          #1d1d1d;
    --ink-3:          #333333;
    --body:           #4a4a4a;
    --muted:          #6b6b6b;
    --muted-2:        #9a9a9a;

    --line:           #e4e4e4;
    --line-2:         #cccccc;
    --surface:        #ffffff;
    --surface-2:      #f7f7f7;
    --surface-3:      #f2f2f2;

    --ok:             #16a34a;
    --ok-light:       #25d366;   /* the WhatsApp green the reference uses */
    --star:           #fcc808;

    /* Barlow + Ubuntu, the exact pairing rctravels.in loads. */
    --head-font:      'Barlow', 'Segoe UI', sans-serif;
    --body-font:      'Ubuntu', 'Segoe UI', sans-serif;

    --r-sm:  10px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-xl:  28px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow:    0 4px 16px rgba(15, 23, 42, .08);
    --shadow-lg: 0 18px 45px rgba(15, 23, 42, .12);

    --wrap: 1200px;
}

/* ----------------------------------------------------------------- base */

body.gogo {
    font-family: var(--body-font);
    color: var(--body);
    background: var(--surface);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.gogo h1, .gogo h2, .gogo h3, .gogo h4, .gogo h5 {
    font-family: var(--head-font);
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.gogo a { text-decoration: none; color: inherit; }
.gogo img { max-width: 100%; }

.gogo-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
}

/* Focus ring: visible for keyboard users, suppressed for mouse clicks. */
.gogo :focus-visible {
    outline: 3px solid rgba(4, 60, 92, .35);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Screen-reader-only helper for labels the visual design omits. */
.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;
}

/* ------------------------------------------------------------- eyebrow */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-tint);
    color: var(--brand);
    font-family: var(--head-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(4, 60, 92, .16);
}

.eyebrow .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

.eyebrow.live .dot { background: var(--ok-light); animation: pulse 1.8s infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.75); }
}

/* -------------------------------------------------------- section shell */

.gogo-section { padding: 84px 0; }
.gogo-section.tint  { background: var(--surface-2); }
.gogo-section.pink  { background: var(--brand-tint); }
.gogo-section.dark  { background: var(--ink); }

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 52px;
}

.section-head h2 {
    font-size: clamp(26px, 3.4vw, 40px);
    margin: 16px 0 12px;
}

.section-head p {
    color: var(--muted);
    font-size: 16px;
    margin: 0;
}

.gogo-section.dark .section-head h2 { color: #fff; }
.gogo-section.dark .section-head p  { color: var(--muted-2); }

/* -------------------------------------------------------------- buttons */

.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--brand);
    color: #fff;
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 15px;
    padding: 14px 30px;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 8px 22px rgba(4, 60, 92, .26);
}

.btn-brand:hover {
    background: var(--brand-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(4, 60, 92, .34);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: var(--ink);
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 14px;
    padding: 12px 26px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    transition: border-color .18s ease, color .18s ease;
}

.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* --------------------------------------------------------------- header */

.gogo-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.gogo-header .bar {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
    height: 74px;
    display: flex;
    align-items: center;
    gap: 26px;
}

.gogo-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--head-font);
    font-weight: 800;
    font-size: 21px;
    color: var(--ink);
    letter-spacing: -.03em;
    flex: none;
}

.gogo-logo img { height: 40px; width: auto; }
.gogo-logo .mark { color: var(--brand); }

.gogo-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }

.gogo-nav .links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gogo-nav .links a {
    font-family: var(--head-font);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-3);
    padding: 6px 0;
    position: relative;
    transition: color .18s ease;
}

.gogo-nav .links a:hover,
.gogo-nav .links a.active { color: var(--brand); }

.gogo-nav .links a.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
}

.gogo-actions { display: flex; align-items: center; gap: 14px; }

.gogo-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
    white-space: nowrap;
}

.gogo-phone i { color: var(--brand); }
.gogo-phone:hover { color: var(--brand); }

.gogo-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand);
    color: #fff !important;
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    transition: background .18s ease;
    white-space: nowrap;
}

.gogo-login:hover { background: var(--brand-hover); }

.gogo-profile {
    position: relative;
    display: inline-flex;
    width: 42px; height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--line);
}

.gogo-profile img { width: 100%; height: 100%; object-fit: cover; }

.gogo-profile .online-dot {
    position: absolute;
    right: 1px; bottom: 1px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--ok-light);
    border: 2px solid #fff;
}

.gogo-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    margin-left: auto;
}

.gogo-burger span {
    width: 24px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

/* --------------------------------------------------------------- footer */

.gogo-footer { background: var(--ink); color: var(--muted-2); padding: 68px 0 0; }

.gogo-footer .grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 46px;
}

.gogo-footer h4 {
    font-family: var(--head-font);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px;
}

.gogo-footer ul { list-style: none; margin: 0; padding: 0; }
.gogo-footer li { margin-bottom: 11px; }

.gogo-footer li a {
    color: var(--muted-2);
    font-size: 14.5px;
    transition: color .18s ease;
}

.gogo-footer li a:hover { color: var(--brand-alt); }

.gogo-footer .brand-col .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--head-font);
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    margin-bottom: 16px;
}

.gogo-footer .brand-col .logo .mark { color: var(--brand-alt); }
.gogo-footer .brand-col p { font-size: 14.5px; max-width: 340px; margin: 0 0 22px; }

.gogo-footer .contact-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    margin-bottom: 10px;
}

.gogo-footer .contact-line i { color: var(--brand-alt); width: 16px; }

.gogo-social { display: flex; gap: 10px; margin-top: 22px; }

.gogo-social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 15px;
    transition: background .18s ease, transform .18s ease;
}

.gogo-social a:hover { background: var(--brand); transform: translateY(-2px); }

.gogo-footer .legal {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0;
    text-align: center;
    font-size: 13.5px;
}

/* ============================================================ 1. HERO */

.gogo-hero {
    position: relative;
    background:
        radial-gradient(900px 460px at 88% -8%, rgba(4, 60, 92, .10), transparent 70%),
        linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
    padding: 62px 0 0;
    overflow: hidden;
}

.gogo-hero .inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
}

.gogo-hero h1 {
    font-size: clamp(30px, 4.4vw, 52px);
    margin: 20px 0 18px;
}

.gogo-hero h1 .accent { color: var(--brand); }

.gogo-hero .lede {
    font-size: 17px;
    color: var(--muted);
    max-width: 520px;
    margin: 0 0 30px;
}

.hero-usps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.hero-usp {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.hero-usp:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.hero-usp .ico {
    width: 42px; height: 42px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 17px;
}

.hero-usp h3 {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0;
    line-height: 1.35;
    color: var(--ink-2);
}

.gogo-hero .art { position: relative; text-align: center; }
.gogo-hero .art img { border-radius: var(--r-xl); }

/* ================================================== 2. SEARCH WIDGET */

.gogo-search {
    max-width: var(--wrap);
    margin: -40px auto 0;
    padding: 0 20px;
    position: relative;
    z-index: 20;
}

.search-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* trip-type tabs (bound from tbl_CabCategory) */
.trip-strip {
    display: flex;
    gap: 6px;
    padding: 14px 18px 0;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}

.trip-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
    padding: 12px 20px;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    position: relative;
    top: 1px;
    transition: color .16s ease, background .16s ease;
    user-select: none;
}

.trip-pill:hover { color: var(--brand); background: var(--brand-tint); }

.trip-pill.active {
    color: var(--brand);
    background: #fff;
    border-color: var(--line);
}

.trip-pill.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 3px;
    background: var(--brand);
    border-radius: 3px;
}

/* airport sub-tabs */
.airport-strip {
    display: none;
    gap: 8px;
    padding: 16px 22px 0;
    flex-wrap: wrap;
}

.airport-strip.show { display: flex; }

.airport-chip {
    font-family: var(--head-font);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 7px 16px;
    cursor: pointer;
    transition: all .16s ease;
    user-select: none;
}

.airport-chip:hover { border-color: var(--brand); color: var(--brand); }

.airport-chip.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* field grid */
.search-body { padding: 22px; }

.search-grid {
    display: grid;
    grid-template-columns: 1.25fr 44px 1.25fr 1fr 1fr .8fr;
    gap: 14px;
    align-items: end;
}

.field { position: relative; min-width: 0; }

.field > label {
    display: block;
    font-family: var(--head-font);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
}

.field .control {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface-2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.field .control:focus-within {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(4, 60, 92, .1);
}

.field .control > i {
    flex: none;
    width: 40px;
    text-align: center;
    color: var(--brand);
    font-size: 14px;
}

/* ASP.NET renders TextBox as <input> and DropDownList as <select>;
   both are targeted so the redesign does not depend on control type. */
.field .control input,
.field .control select,
.field .control .booking-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--body-font);
    font-size: 14.5px;
    color: var(--ink);
    padding: 0 14px 0 0;
}

.field .control select { padding-right: 10px; cursor: pointer; }
.field .control input::placeholder { color: var(--muted-2); }
.field .control input[readonly] { color: var(--muted); cursor: default; }

/* swap button sits in its own grid column */
.swap-cell { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; }

.swap-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--brand);
    font-size: 15px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .25s ease, border-color .16s ease, background .16s ease;
}

.swap-btn:hover {
    transform: rotate(180deg);
    border-color: var(--brand);
    background: var(--brand-tint);
}

/* autocomplete dropdown */
.ac-list {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    max-height: 268px;
    overflow-y: auto;
    display: none;
    z-index: 3000;
    padding: 6px;
}

.ac-list.show { display: block; }

.ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 14.5px;
    color: var(--ink-2);
}

.ac-item i { color: var(--muted-2); font-size: 13px; }
.ac-item:hover, .ac-item.hot { background: var(--brand-tint); color: var(--brand); }
.ac-item:hover i, .ac-item.hot i { color: var(--brand); }
.ac-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 14px; }

/* route readout strip */
.route-strip {
    display: none;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}

.route-strip.show { display: flex; }

.route-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
}

.route-chip i { color: var(--brand); }
.route-chip input { border: none; background: none; outline: none; width: 92px; font: inherit; color: inherit; }

.search-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.search-note { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.search-note i { color: var(--ok); }

.btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--brand);
    color: #fff !important;
    font-family: var(--head-font);
    font-weight: 800;
    font-size: 16px;
    padding: 15px 46px;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(4, 60, 92, .3);
    transition: background .18s ease, transform .18s ease;
}

.btn-search:hover { background: var(--brand-hover); transform: translateY(-1px); }

/* =========================================== 3. HOW IT WORKS / WELCOME */

.howto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.howto-copy h2 { font-size: clamp(25px, 3.2vw, 37px); margin: 16px 0 18px; }
.howto-copy p { font-size: 16px; color: var(--muted); margin-bottom: 26px; }

.howto-steps { list-style: none; margin: 0 0 28px; padding: 0; }

.howto-steps li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.howto-steps .n {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-family: var(--head-font);
    font-weight: 800;
    font-size: 13px;
    display: grid;
    place-items: center;
}

.howto-steps h4 { font-size: 15.5px; margin: 3px 0 3px; }
.howto-steps p  { font-size: 14.5px; margin: 0; color: var(--muted); }

.howto-art img { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }

/* ==================================== 4. FARE ESTIMATE / ROUTE CARDS */

.gc-fares {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gc-fare {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gc-fare:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(4, 60, 92, .3);
}

.gc-fare-route {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 14px;
}

.gc-fare-route .arrow { color: var(--brand); font-size: 13px; }
.gc-fare-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.gc-fare-meta i { color: var(--brand); margin-right: 4px; }

.gc-fare-price small {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.gc-fare-price .gc-fare-amt {
    font-family: var(--head-font);
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
}

.gc-fare .gc-fare-btn {
    display: block;
    text-align: center;
    margin-top: 16px;
    background: var(--brand-tint);
    color: var(--brand);
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 14px;
    padding: 11px;
    border-radius: var(--r-pill);
    transition: background .18s ease, color .18s ease;
}

.gc-fare .gc-fare-btn:hover { background: var(--brand); color: #fff; }

/* ========================================================= 5. FEATURES */

.feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 22px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.feat-card .ico {
    width: 50px; height: 50px;
    border-radius: var(--r-md);
    background: var(--brand-tint);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.feat-card h3 { font-size: 16px; margin: 0 0 8px; }
.feat-card p  { font-size: 14px; color: var(--muted); margin: 0; }

/* ============================================================ 6. FLEET */

.fleet-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.fleet-tab {
    font-family: var(--head-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--muted);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    padding: 9px 20px;
    cursor: pointer;
    transition: all .16s ease;
}

.fleet-tab:hover { border-color: var(--brand); color: var(--brand); }
.fleet-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.fleet-note {
    text-align: center;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 34px;
}

.fleet-note b { color: var(--ink); font-weight: 700; }

.fleet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.fleet-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.fleet-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(4, 60, 92, .28);
}

.fleet-card h3 { font-size: 18px; margin: 0 0 7px; }
.fleet-card .desc { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; min-height: 40px; }

.fleet-seats {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-2);
    background: var(--surface-3);
    border-radius: var(--r-pill);
    padding: 6px 14px;
    align-self: flex-start;
    margin-bottom: 16px;
}

.fleet-seats i { color: var(--brand); }
.fleet-art { text-align: center; padding: 8px 0 18px; }
.fleet-art img { max-height: 96px; width: auto; object-fit: contain; }

/* two-rate readout: one-way vs round-trip per km */
.fleet-rates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.rate-box { text-align: center; }

.rate-box .lbl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
}

.rate-box .lbl i { color: var(--brand); }

.rate-box .val {
    font-family: var(--head-font);
    font-size: 21px;
    font-weight: 800;
    color: var(--ink);
}

.rate-box .val span { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ============================================== 7. LIVE STATS (dark) */

.stats-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.stat-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-lg);
    padding: 26px 22px;
    text-align: center;
    transition: background .2s ease, transform .2s ease;
}

.stat-card:hover { background: rgba(255, 255, 255, .09); transform: translateY(-3px); }

.stat-card .num {
    font-family: var(--head-font);
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
}

.stat-card .cap {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-top: 7px;
}

.stat-card .sub { font-size: 12.5px; color: var(--muted-2); margin-top: 8px; }
.stat-card .num small { font-size: 15px; color: var(--brand-alt); }

.ratings-row {
    display: flex;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.rating-item { text-align: center; color: #fff; }
.rating-item .score { font-family: var(--head-font); font-size: 22px; font-weight: 800; }
.rating-item .score i { color: var(--star); font-size: 15px; }
.rating-item .who { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* ============================================== 8. APP DOWNLOAD BANNER */

.app-card {
    background: linear-gradient(120deg, var(--brand) 0%, var(--brand-hover) 100%);
    border-radius: var(--r-xl);
    padding: 46px;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 40px;
    align-items: center;
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.app-card h2 { color: #fff; font-size: clamp(24px, 3vw, 35px); margin: 14px 0 12px; }
.app-card > div > p { color: rgba(255, 255, 255, .9); font-size: 15.5px; margin-bottom: 24px; }
.app-card .eyebrow { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .28); }
.app-card .eyebrow .dot { background: #fff; }

.app-offers { display: grid; gap: 12px; }

.app-offer {
    display: flex;
    align-items: center;
    gap: 13px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-md);
    padding: 13px 18px;
}

.app-offer .emo { font-size: 21px; }
.app-offer .t { font-size: 13.5px; color: rgba(255, 255, 255, .88); }
.app-offer .v { font-family: var(--head-font); font-weight: 800; font-size: 16px; margin-left: auto; white-space: nowrap; }

.qr-panel {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 22px;
    text-align: center;
    color: var(--ink);
}

.qr-panel .hint {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}

.qr-row { display: flex; gap: 18px; justify-content: center; }
.qr-cell .box {
    width: 92px; height: 92px;
    border: 2px dashed var(--line-2);
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    color: var(--muted-2);
    font-size: 26px;
    margin-bottom: 8px;
}
.qr-cell .os { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--ink-2); }

/* ============================================= 9. ROUTE LINK DIRECTORY */

.route-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.route-links a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    transition: all .16s ease;
}

.route-links a:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-tint);
}

/* ==================================================== 10. TESTIMONIALS */

.tm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.tm-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.tm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tm-stars { color: var(--star); font-size: 13.5px; margin-bottom: 14px; }
.tm-card blockquote { font-size: 14.5px; color: var(--body); margin: 0 0 20px; flex: 1; line-height: 1.7; }
.tm-card blockquote::before { content: '\201C'; color: var(--brand); font-size: 34px; line-height: 0; vertical-align: -10px; margin-right: 4px; font-family: Georgia, serif; }

.tm-who { display: flex; align-items: center; gap: 12px; }

.tm-who .av {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-family: var(--head-font);
    font-weight: 800;
    font-size: 16px;
}

.tm-who h4 { font-size: 14.5px; margin: 0; }
.tm-who span { font-size: 12.5px; color: var(--muted); }

/* ================================================= 11. DRIVE WITH US */

.drive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.drive-copy h2 { font-size: clamp(25px, 3.2vw, 37px); margin: 16px 0 16px; }
.drive-copy > p { font-size: 16px; color: var(--muted); margin-bottom: 26px; }

.drive-points { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 28px; }
.drive-point .ico {
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--brand-tint);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 16px;
    margin-bottom: 10px;
}
.drive-point h4 { font-size: 14.5px; margin: 0 0 5px; }
.drive-point p { font-size: 13.5px; color: var(--muted); margin: 0; }

.drive-badges { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 26px; }
.drive-badge .n { font-family: var(--head-font); font-size: 22px; font-weight: 800; color: var(--brand); }
.drive-badge .c { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.drive-art img { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }

/* ============================================================ 12. FAQ */

.faq-list { max-width: 840px; margin: 0 auto; }

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.faq-item.open { border-color: rgba(4, 60, 92, .35); box-shadow: var(--shadow); }

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: none;
    text-align: left;
    padding: 19px 22px;
    cursor: pointer;
    font-family: var(--head-font);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
}

.faq-q .pm {
    margin-left: auto;
    flex: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 13px;
    transition: transform .22s ease, background .22s ease, color .22s ease;
}

.faq-item.open .faq-q .pm { transform: rotate(45deg); background: var(--brand); color: #fff; }

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
}

.faq-a p { margin: 0; padding: 0 22px 20px; font-size: 14.5px; color: var(--muted); }

/* ===================================================== 13. RESPONSIVE */

@media (max-width: 1080px) {
    .search-grid { grid-template-columns: 1fr 1fr; }
    .swap-cell { grid-column: span 2; justify-content: flex-start; }
    .gc-fares, .feat-grid { grid-template-columns: repeat(2, 1fr); }
    .fleet-grid, .tm-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-wrap { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .gogo-nav .links,
    .gogo-phone { display: none; }

    .gogo-burger { display: flex; }

    .gogo-nav {
        position: fixed;
        inset: 74px 0 auto 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 20px 20px;
        display: none;
        margin-left: 0;
    }

    .gogo-nav.open { display: flex; }

    .gogo-nav.open .links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .gogo-nav.open .links a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); }
    .gogo-nav.open .links a.active::after { display: none; }
    .gogo-nav.open .gogo-phone { display: inline-flex; padding: 14px 0; }
    .gogo-actions { justify-content: flex-start; padding-top: 12px; }

    .gogo-hero .inner,
    .howto-grid,
    .drive-grid,
    .app-card { grid-template-columns: 1fr; }

    .gogo-hero { padding-top: 40px; }
    .gogo-hero .art { order: -1; }
    .gogo-section { padding: 60px 0; }
    .gogo-footer .grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .drive-points { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .search-grid { grid-template-columns: 1fr; }
    .swap-cell { grid-column: auto; }
    .hero-usps { grid-template-columns: 1fr; }
    .gc-fares, .feat-grid, .fleet-grid, .tm-grid, .stats-wrap { grid-template-columns: 1fr; }
    .gogo-footer .grid { grid-template-columns: 1fr; }
    .app-card { padding: 30px 22px; }
    .btn-search { width: 100%; }
    .search-foot { flex-direction: column; align-items: stretch; }
    .trip-strip { padding: 10px 10px 0; }
    .trip-pill { padding: 10px 14px; font-size: 13px; }
}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .gogo *, .gogo *::before, .gogo *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ============================================== 14. STOPS ("Add Stop") */

.stops-block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.stops-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.stops-rows:empty { display: none; }

.stop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.stop-row .badge-n {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    font-family: var(--head-font);
    font-weight: 800;
    font-size: 11.5px;
    display: grid;
    place-items: center;
}

.stop-row .field { flex: 1 1 auto; }

.stop-row .drop-stop {
    flex: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
    transition: all .16s ease;
}

.stop-row .drop-stop:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

.add-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-tint);
    border: 1.5px dashed rgba(4, 60, 92, .35);
    color: var(--brand);
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 20px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all .16s ease;
}

.add-stop-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.add-stop-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    background: var(--surface-3);
    border-color: var(--line);
    color: var(--muted);
}

.stops-hint { font-size: 12.5px; color: var(--muted); }

/* billing basis + leg breakdown chips */
.route-chip.billing {
    background: var(--brand-tint);
    border-color: rgba(4, 60, 92, .28);
    color: var(--brand);
    font-weight: 700;
}

.route-chip.billing i { color: var(--brand); }

.route-chip.legs {
    background: #fff;
    color: var(--muted);
    font-weight: 500;
    font-size: 12.5px;
}

.route-strip.measuring { opacity: .55; pointer-events: none; }

@media (max-width: 640px) {
    .stop-row { flex-wrap: nowrap; }
    .add-stop-btn { width: 100%; justify-content: center; }
}

/* ==================================== 15. BILLING BASIS (cab list card) */

/* Explains why the charged distance differs from the driving distance,
   e.g. "3 day(s) x 300 km/day = 900 km" against 1,338 km actually driven. */
.billing-basis {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #6b6b6b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 11px;
    margin: 8px 0 10px;
    line-height: 1.4;
}

.billing-basis i { color: #043c5c; font-size: 11px; flex: none; }

/* ==========================================================================
   16. MOBILE HARDENING
   --------------------------------------------------------------------------
   Applies across the whole site, not just the homepage.
   ========================================================================== */

/* Never let a wide element cause horizontal scroll. */
html, body.gogo { max-width: 100%; overflow-x: hidden; }
.gogo * { min-width: 0; }
.gogo img, .gogo table { max-width: 100%; }

/* 16px inputs stop iOS Safari zooming the viewport on focus. Applied to the
   search widget too, which previously used 14.5px. */
@media (max-width: 900px) {
    .gogo input, .gogo select, .gogo textarea { font-size: 16px !important; }
    .field .control input,
    .field .control select,
    .field .control .booking-input { height: 52px; }
}

/* Touch targets: WCAG 2.5.8 asks for at least 24x24 CSS px, and 44px is the
   comfortable figure on phones. */
@media (max-width: 900px) {
    .gogo a, .gogo button, .gogo .trip-pill, .gogo .airport-chip,
    .gogo .fleet-tab, .gogo .faq-q, .gogo .route-links a {
        min-height: 44px;
    }

    .gogo .trip-pill, .gogo .airport-chip, .gogo .fleet-tab,
    .gogo .route-links a {
        display: inline-flex;
        align-items: center;
    }

    .swap-btn, .drop-stop { width: 44px; height: 44px; }
}

/* ---- header: give the burger and login room ---- */
@media (max-width: 900px) {
    .gogo-header .bar { height: 66px; gap: 12px; }
    .gogo-logo { font-size: 19px; }
    .gogo-logo img { height: 34px; }

    /* login button stays visible next to the burger */
    .gogo-nav .gogo-actions { display: none; }

    .gogo-header .bar > .gogo-login-mobile { margin-left: auto; }
    .gogo-nav.open { max-height: calc(100vh - 66px); overflow-y: auto; }
    .gogo-nav { inset: 66px 0 auto 0; }
}

/* ---- trip tabs scroll horizontally instead of wrapping into a stack ---- */
@media (max-width: 720px) {
    .trip-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .trip-strip::-webkit-scrollbar { display: none; }
    .trip-pill { flex: none; }

    .airport-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .airport-strip::-webkit-scrollbar { display: none; }
    .airport-chip { flex: none; }

    .fleet-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
    .fleet-tabs::-webkit-scrollbar { display: none; }
    .fleet-tab { flex: none; }
}

/* ---- search card: full-width fields, swap button repositioned ---- */
@media (max-width: 640px) {
    .gogo-search { margin-top: -18px; padding: 0 14px; }
    .search-card { border-radius: var(--r-lg); }
    .search-body { padding: 16px 14px; }

    .search-grid { gap: 12px; }

    /* Swap sits inline as a labelled control rather than a floating circle
       squeezed between two stacked inputs. */
    .swap-cell { justify-content: stretch; padding-bottom: 0; }

    .swap-btn {
        width: 100%;
        border-radius: var(--r-pill);
        font-size: 13px;
        gap: 8px;
    }

    .swap-btn::after {
        content: 'Swap';
        font-family: var(--head-font);
        font-weight: 700;
        font-size: 13px;
    }

    .swap-btn:hover { transform: none; }

    .route-strip { gap: 8px; }
    .route-chip { font-size: 12.5px; padding: 7px 13px; }
    .route-chip.legs { display: none; }   /* too long to be useful on a phone */
}

/* ---- hero ---- */
@media (max-width: 640px) {
    .gogo-hero { padding-top: 28px; }
    .gogo-hero h1 { font-size: clamp(26px, 8vw, 34px); }
    .gogo-hero .lede { font-size: 15.5px; margin-bottom: 22px; }

    .hero-usps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .hero-usp { padding: 12px 8px; }
    .hero-usp .ico { width: 34px; height: 34px; font-size: 14px; margin-bottom: 7px; }
    .hero-usp h3 { font-size: 11px; }

    .gogo-hero .art { margin-bottom: 4px; }
}

/* ---- sections ---- */
@media (max-width: 640px) {
    .gogo-section { padding: 46px 0; }
    .gogo-wrap { padding: 0 14px; }
    .section-head { margin-bottom: 32px; }
    .section-head h2 { font-size: clamp(22px, 6.4vw, 29px); }
    .section-head p { font-size: 14.5px; }

    .fleet-card, .feat-card, .gc-fare, .tm-card { padding: 18px 16px; }
    .fleet-card .desc { min-height: 0; }

    .stat-card { padding: 20px 16px; }
    .stat-card .num { font-size: 25px; }

    .app-card { padding: 26px 18px; border-radius: var(--r-lg); }
    .qr-panel { padding: 18px; }

    .faq-q { padding: 16px 16px; font-size: 14.5px; }
    .faq-a p { padding: 0 16px 17px; font-size: 14px; }

    .gogo-footer { padding-top: 46px; }
    .gogo-footer .grid { gap: 26px; }
}

/* ---- stops on mobile ---- */
@media (max-width: 640px) {
    .stops-block { gap: 10px; }
    .stop-row { gap: 8px; }
    .stop-row .badge-n { width: 24px; height: 24px; font-size: 11px; }
    .stops-hint { width: 100%; }
}

/* Landscape phones: reclaim vertical space. */
@media (max-height: 480px) and (orientation: landscape) {
    .gogo-hero { padding-top: 20px; }
    .gogo-section { padding: 34px 0; }
}

/* ---- mobile login shortcut in the header ---- */
.gogo-login-mobile { display: none; }

@media (max-width: 900px) {
    .gogo-login-mobile {
        display: inline-flex;
        margin-left: auto;
        padding: 9px 16px;
        font-size: 13.5px;
    }
}

@media (max-width: 400px) {
    .gogo-login-mobile .label { display: none; }
    .gogo-login-mobile { padding: 9px 13px; }
}

/* Header logo weight tuned now that the wordmark is longer. */
.gogo-logo .mark { color: var(--brand); }

/* ============================ 17. LOCATION SEARCH SUGGESTIONS ========== */

/* Suggestions now come from the server and carry a secondary detail line
   ("Latur, Maharashtra, India"), so the row is a 3-column grid. */
.ac-item {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 10px;
}

.ac-item .ac-name {
    font-weight: 600;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-item .ac-detail {
    font-size: 11.5px;
    color: var(--muted-2);
    text-align: right;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-item:hover .ac-name,
.ac-item.hot .ac-name { color: var(--brand); }

/* the "search this location" row sits apart from real matches */
.ac-item.ac-typed {
    border-top: 1px dashed var(--line);
    margin-top: 4px;
    padding-top: 11px;
}

.ac-item.ac-typed .ac-name { font-style: italic; }

/* spinner while a typed place is validated against Distance Matrix */
.field .control input.resolving {
    background-image: linear-gradient(90deg, transparent, rgba(4, 60, 92, .12), transparent);
    background-size: 180% 100%;
    animation: acPulse 1s linear infinite;
}

@keyframes acPulse {
    0%   { background-position: 120% 0; }
    100% { background-position: -60% 0; }
}

/* inline validation message under a field */
.field .control.has-error {
    border-color: #ef4444;
    background: #fef2f2;
}

.field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #b91c1c;
    margin-top: 6px;
    line-height: 1.45;
}

.field-error::before {
    content: '\f06a';                 /* fa-circle-exclamation */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
    flex: none;
    margin-top: 1px;
}

@media (max-width: 640px) {
    .ac-item { grid-template-columns: 18px 1fr; }
    .ac-item .ac-detail { display: none; }
}

/* Throttle / degraded-service notice inside the suggestion dropdown. */
.ac-notice {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--r-sm);
    padding: 8px 10px;
    margin-bottom: 6px;
}

.ac-notice::before {
    content: '\f0e7';                 /* fa-bolt */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    flex: none;
    margin-top: 1px;
}

/* ==================================== 18. LOGO (real brand asset) ====== */

/* The wordmark is now an image, so the text-based logo styling is retired.
   Explicit height with auto width keeps it crisp and stops layout shift. */
.gogo-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    line-height: 0;
}

.gogo-logo img {
    height: 40px;
    width: auto;
    display: block;
}

.gogo-footer .brand-col .logo {
    display: block;
    margin-bottom: 16px;
    line-height: 0;
}

.gogo-footer .brand-col .logo img {
    height: 42px;
    width: auto;
    display: block;
}

.gogo-footer .contact-line a { color: inherit; }
.gogo-footer .contact-line a:hover { color: var(--brand-alt); }

@media (max-width: 900px) {
    .gogo-logo img { height: 34px; }
}

@media (max-width: 400px) {
    .gogo-logo img { height: 30px; }
}

/* ================== 19. HERO / SEARCH OVERLAP + APP SECTION FIXES ====== */

/* The USP cards were colliding with the search card's trip tabs. The hero had
   no bottom padding, so its last row ended exactly where the search card
   starts, and the search card is pulled up 40px on purpose. Give the hero
   clearance instead of removing the overlap, which is what creates the
   "card floating over the hero" effect. */
.gogo-hero { padding: 62px 0 92px; }
.gogo-search { margin-top: -56px; }

@media (max-width: 900px) {
    .gogo-hero  { padding: 40px 0 64px; }
    .gogo-search { margin-top: -40px; }
}

@media (max-width: 640px) {
    .gogo-hero  { padding: 28px 0 52px; }
    .gogo-search { margin-top: -32px; }
}

/* Hero artwork is a wide composite; cap it so it never dwarfs the copy. */
.gogo-hero .art img {
    max-height: 430px;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .gogo-hero .art img { max-height: 300px; }
}

/* ---- app section ---- */

.app-flat {
    font-size: 15px;
    color: rgba(255, 255, 255, .95) !important;
    margin: -6px 0 18px !important;
}

.app-flat b {
    background: rgba(255, 255, 255, .2);
    border-radius: var(--r-sm);
    padding: 2px 9px;
    font-weight: 800;
}

/* QR codes are injected as <img> or <canvas> by qrcodejs. */
.qr-cell .box {
    width: 104px;
    height: 104px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 8px;
    padding: 4px;
}

.qr-cell .box img,
.qr-cell .box canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Until the script runs the box would be an empty hole - show a hint. */
.qr-cell .box:not(.qr-ready)::after {
    content: 'QR';
    font-family: var(--head-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--muted-2);
}

.qr-cell .box.qr-ready::after { content: none; }

.qr-cell .os {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.store-links {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}

.store-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 9px 16px;
    font-family: var(--head-font);
    font-size: 12.5px;
    font-weight: 700;
    min-height: 40px;
    transition: background .18s ease;
}

.store-links a:hover { background: var(--ink-2); color: #fff; }

/* ================== 20. FLOATING CONTACT BUTTONS (radar pulse) ========= */

/* NOTE: .fab here is our own floating-action-button class. Font Awesome 6 uses
   .fa-brands / .fa-solid for icons, so there is no collision with the old
   FA4 .fab shorthand - but the icon classes are always spelled out in full
   above to keep that unambiguous. */
.gogo .fab {
    position: fixed;
    bottom: 24px;
    z-index: 1040;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 25px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}

.gogo .fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .3);
    color: #fff;
}

.gogo .fab:active { transform: translateY(-1px) scale(.98); }

.gogo .fab-whatsapp { left: 24px;  background: #25d366; }
.gogo .fab-call     { right: 24px; background: var(--brand); }

/* icon sits above the pulse rings */
.gogo .fab > i { position: relative; z-index: 2; line-height: 1; }

/* ---- radar sweep ----
   Two expanding rings, the second offset by half the cycle so the pulse
   reads as continuous rather than a single repeating blip. */
.gogo .fab-radar {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 1;
    animation: fabRadar 2.4s cubic-bezier(.24, .76, .35, 1) infinite;
    pointer-events: none;
}

.gogo .fab-radar.delay { animation-delay: 1.2s; }

.gogo .fab-whatsapp .fab-radar { background: rgba(37, 211, 102, .45); }
.gogo .fab-call     .fab-radar { background: rgba(4, 60, 92, .45); }

@keyframes fabRadar {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(2.15); opacity: 0;   }
    100% { transform: scale(2.15); opacity: 0;   }
}

/* A constantly moving element is a vestibular trigger, so honour the OS
   setting and fall back to a static halo. */
@media (prefers-reduced-motion: reduce) {
    .gogo .fab-radar { animation: none; opacity: .3; transform: scale(1.35); }
}

@media (max-width: 640px) {
    .gogo .fab { width: 52px; height: 52px; font-size: 22px; bottom: 18px; }
    .gogo .fab-whatsapp { left: 16px; }
    .gogo .fab-call     { right: 16px; }
}

/* Keep the buttons clear of the sticky summary strip on the results page. */
@media print {
    .gogo .fab { display: none !important; }
}

/* =============== 21. NAV GET APP / SOCIAL / MOBILE OTP INPUT =========== */

/* Get App reads as an action rather than another nav link. */
.gogo-nav .links .nav-getapp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 7px 15px;
    color: var(--ink) !important;
}

.gogo-nav .links .nav-getapp:hover {
    background: var(--brand-tint);
    border-color: rgba(4, 60, 92, .3);
    color: var(--brand) !important;
}

.gogo-nav .links .nav-getapp::after { display: none !important; }
.gogo-nav .links .nav-getapp i { color: var(--brand); }

/* WhatsApp is the only social link now, so it gets a label rather than
   sitting as a lone anonymous circle. */
.gogo-social a {
    width: auto;
    height: auto;
    border-radius: var(--r-pill);
    gap: 8px;
    padding: 9px 18px;
    background: rgba(37, 211, 102, .14);
    color: #25d366;
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 13.5px;
}

.gogo-social a:hover { background: #25d366; color: #fff; transform: translateY(-2px); }
.gogo-social a span { line-height: 1; }

/* Footer socials sat directly beneath the floating WhatsApp button and
   collided with it. Keep the last footer row clear of that corner. */
.gogo-footer .brand-col { padding-bottom: 8px; }

@media (max-width: 900px) {
    .gogo-footer .grid { padding-bottom: 88px; }
}

/* ---- mobile number field in the login modal ---- */

.mobile-group .input-group-text {
    background: #fff;
    border-right: none;
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink-2);
    min-width: 54px;
    justify-content: center;
}

.mobile-group .input-box {
    letter-spacing: .06em;
    font-size: 16px;   /* stops iOS zooming on focus */
}

.login-right label {
    display: block;
    font-family: var(--head-font);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-2);
    margin-bottom: 6px;
}

/* ---- cab list results column ---- */

/* Wrapper added so the Repeater's cards occupy one grid cell instead of
   alternating between the filter and results columns. */
.gogo .cab-results { min-width: 0; }
.gogo .cab-results > .cab-card:last-of-type { margin-bottom: 0; }

/* ==========================================================================
   RC TRAVELS THEME ADDITIONS
   Appended last so these win over the earlier crimson-era rules without
   needing !important.
   ========================================================================== */

/* ------------------------------------------------------- 1. BRAND MARK == */

.gogo .rc-logo,
.rc-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

/* The supplied artwork is portrait (taller than wide), so it is capped by
   HEIGHT and left to find its own width. Capping by width instead made it
   overflow the header vertically. */
.rc-logo-img {
    height: 54px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    display: block;
}

/* ---- fallback wordmark, used only until the artwork is dropped in ---- */

.rc-wordmark {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
}

.rc-wordmark-top {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--head-font);
    font-weight: 800;
    letter-spacing: -.01em;
}

.rc-wordmark .rc {
    color: var(--brand);
    font-size: 30px;
    line-height: 1;
}

.rc-wordmark .travels {
    color: var(--ink);
    font-size: 19px;
    letter-spacing: .10em;
    line-height: 1;
}

.rc-wordmark-tag {
    font-family: var(--body-font);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .045em;
}

@media (max-width: 480px) {
    .rc-logo-img { height: 42px; max-width: 148px; }
    .rc-wordmark .rc { font-size: 24px; }
    .rc-wordmark .travels { font-size: 15px; }
    .rc-wordmark-tag { font-size: 9.5px; }
}

/* --------------------------------------------- 2. AMBER ACCENT BUTTONS == */

/* Dark ink on amber, never white - see the contrast note at the top. */
.gogo .btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 13px 26px;
    border: none;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.gogo .btn-accent:hover {
    background: var(--accent-hover);
    color: var(--accent-ink);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(204, 157, 6, .38);
}

/* ------------------------------------------- 3. DARK SECTIONS USE GREY == */

/* The dark band now uses the logo's own grey rather than near-black slate, so
   the mark sits on a family colour when it appears over dark areas. */
.gogo .gogo-section.dark {
    background: linear-gradient(135deg, #5f6063 0%, var(--logo-grey) 55%, #7b7c80 100%);
}

/* ------------------------------------------------ 4. AMBER TINT PANELS == */

.gogo .gogo-section.amber-tint { background: var(--accent-tint); }

/* --------------------------------------- 5. PRICE CALCULATOR PLACEMENT == */

/*
   The booking widget is now the FIRST thing on the page, above the hero copy,
   because it is the reason people visit. It previously overlapped the hero by
   a negative margin, which only works when something tall sits above it - as
   the first element that pulled it off the top of the page.
*/
.gogo .gogo-search.at-top {
    margin-top: 0;
    padding-top: 26px;
    background: linear-gradient(180deg, var(--brand-tint) 0%, #ffffff 100%);
}

.gogo .gogo-search.at-top .search-card {
    margin-top: 0;
    box-shadow: var(--shadow-lg);
}

.gogo .search-lead {
    max-width: var(--wrap);
    margin: 0 auto 16px;
    padding: 0 20px;
    text-align: center;
}

.gogo .search-lead h1 {
    font-size: clamp(23px, 4vw, 33px);
    margin: 0 0 6px;
}

.gogo .search-lead p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.gogo .search-lead .amber { color: var(--brand); }

/* ------------------------------------------------- 6. LOCAL PACKAGES == */

.gogo .pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}

.gogo .pkg-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.gogo .pkg-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.gogo .pkg-head {
    padding: 16px 18px;
    background: var(--brand-tint);
    border-bottom: 1px solid var(--line);
}

.gogo .pkg-head h3 {
    margin: 0;
    font-size: 19px;
    color: var(--ink);
}

.gogo .pkg-head .km {
    display: inline-block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-hover);
}

.gogo .pkg-rows { padding: 6px 18px 16px; }

.gogo .pkg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--line);
}

.gogo .pkg-row:last-child { border-bottom: none; }

.gogo .pkg-row .name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
}

.gogo .pkg-row .name small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--muted-2);
}

.gogo .pkg-row .price {
    font-family: var(--head-font);
    font-weight: 800;
    font-size: 17px;
    color: var(--brand);
    white-space: nowrap;
}

.gogo .pkg-row .price.tbd {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-2);
}

/* ---------------------------------------------------- 7. RATE STRIP == */

.gogo .rate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
}

.gogo .rate-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: var(--r-md);
    padding: 20px 18px;
    text-align: center;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.gogo .rate-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.gogo .rate-card .ico {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 22px;
}

.gogo .rate-card h3 {
    margin: 0 0 4px;
    font-size: 17px;
}

.gogo .rate-card .models {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--muted);
    min-height: 34px;
}

.gogo .rate-card .rate {
    font-family: var(--head-font);
    font-weight: 800;
    font-size: 26px;
    color: var(--ink);
    line-height: 1.1;
}

.gogo .rate-card .rate span {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.gogo .rate-card .seats {
    margin-top: 9px;
    font-size: 12.5px;
    color: var(--muted);
}

.gogo .rate-card .seats i { color: var(--brand); margin-right: 5px; }

/* --------------------------------------------- 8. PACKAGE FOOTNOTE == */

.gogo .pkg-foot-note {
    margin: 22px auto 0;
    max-width: 780px;
    text-align: center;
    font-size: 13.5px;
    color: var(--muted);
}

/* ------------------------------- 9. SINGLE-RATE TARIFF CARD LAYOUT == */

/* When one way and round trip are the same rate the card shows one box, so it
   must span the full width instead of leaving a gap where the second was. */
.gogo .fleet-rates .rate-box.wide { grid-column: 1 / -1; }

/* ------------------------------------- 10. FOOTER BRAND MARK SIZING == */

.gogo .rc-logo-footer { display: inline-flex; margin-bottom: 14px; }

.gogo .rc-logo-footer .rc-logo-img { height: 60px; max-width: 200px; }

/* On the dark footer the wordmark must not use near-black ink. */
.gogo .rc-logo-footer .rc-wordmark .travels { color: #ffffff; }
.gogo .rc-logo-footer .rc-wordmark-tag { color: rgba(255, 255, 255, .72); }

/* ----------------------------------- 11. RETIRED APP-INSTALL STYLES == */

/* The app banner, its QR panel and the nav "Get App" pill were removed from
   the markup. These rules are neutralised rather than deleted so that any
   legacy stylesheet still targeting them cannot resurrect an empty box. */
.gogo .app-card,
.gogo .qr-panel,
.gogo .qr-row,
.gogo .qr-cell,
.gogo .store-links,
.gogo .app-offers,
.gogo-nav .links .nav-getapp { display: none; }

/* ------------------------------ 12. PRIMARY CTA USES THE LOGO AMBER == */

/*
   In the logo, amber is the road - the element the eye lands on - while cyan
   carries the name. The interface follows the same division: cyan is the
   identity (links, headings, tints, icons) and amber is the one action we most
   want taken. Making both cyan left the page with no focal point.

   Dark ink on amber, never white: #fcc808 against white is about 1.7:1, well
   under the 4.5:1 minimum, so white label text would be unreadable.
*/
.gogo .btn-search {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 10px 26px rgba(204, 157, 6, .38);
}

.gogo .btn-search:hover,
.gogo .btn-search:focus {
    background: var(--accent-hover);
    color: var(--accent-ink);
    box-shadow: 0 14px 32px rgba(204, 157, 6, .46);
}

.gogo .btn-search i { color: var(--accent-ink); }

/* The trip-type pill for the selected tab keeps cyan, so the active tab and
   the submit button are not competing for the same visual weight. */

/* ------------------------------------- 13. AMBER UNDERLINE ON HEADINGS == */

/* A short amber rule under section headings echoes the road in the mark and
   ties the two brand colours together on every page. */
.gogo .section-head h2::after,
.gogo .search-lead h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 100%);
}

/* --------------------------------------------- 14. FOCUS RING RECOLOUR == */

/* Was a crimson ring; now cyan, and thick enough to be obvious on the amber
   button where a thin ring would disappear into the glow. */
.gogo :focus-visible {
    outline: 3px solid rgba(4, 60, 92, .55);
    outline-offset: 2px;
}

/* ==========================================================================
   RCTRAVELS.IN LOOK
   --------------------------------------------------------------------------
   Palette and type now match the live site: maroon #043c5c primary, gold
   #CC9D06 for hover and accents, near-black #111 for dark bands, the flat
   #F2F2F2 grey for alternating sections, Barlow headings over Ubuntu body.

   The reference's structure is followed too: a dark header with white nav
   links that turn gold, maroon buttons with white labels, and content in
   alternating white / #F2F2F2 bands.
   ========================================================================== */

/* --------------------------------------------------- 15. DARK HEADER == */

.gogo .gogo-header {
    background: #111111;
    border-bottom: 3px solid var(--brand);
}

.gogo .gogo-nav .links > li > a {
    color: #ffffff;
    text-transform: uppercase;
    font-family: var(--head-font);
    font-weight: 600;
    letter-spacing: .03em;
    font-size: 14px;
}

/* Gold on hover, exactly as the reference does it. */
.gogo .gogo-nav .links > li > a:hover,
.gogo .gogo-nav .links > li > a.active {
    color: var(--accent);
}

.gogo .gogo-phone { color: #ffffff; }
.gogo .gogo-phone:hover { color: var(--accent); }
.gogo .gogo-phone i { color: var(--accent); }

/* The logo sits on black now, so it needs breathing room, not a border. */
.gogo .rc-logo-img { height: 58px; max-width: 170px; }

/* Wordmark fallback on the dark bar. */
.gogo .gogo-header .rc-wordmark .travels { color: #ffffff; }
.gogo .gogo-header .rc-wordmark-tag { color: rgba(255, 255, 255, .70); }
.gogo .gogo-header .rc-wordmark .rc { color: var(--accent); }

.gogo .gogo-burger span { background: #ffffff; }

@media (max-width: 991px) {
    /* Collapsed menu panel is dark too, so it does not flash white. */
    .gogo .gogo-nav { background: #1d1d1d; }
    .gogo .gogo-nav .links > li > a { color: #ffffff; }
}

/* ------------------------------- 16. HEADER ACTIONS (WHATSAPP BUTTON) == */

.gogo .rc-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 18px;
    border-radius: var(--r-pill);
    background: var(--ok-light);
    color: #ffffff;
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: background .18s ease, transform .18s ease;
}

.gogo .rc-wa-btn:hover {
    background: #1eb955;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Mobile call shortcut that replaced the login button. */
.gogo .rc-call-mobile {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    margin-right: 10px;
    padding: 8px 14px;
    min-height: 42px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #ffffff;
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 14px;
}

.gogo .rc-call-mobile:hover { background: var(--brand-hover); color: #fff; }

/* ------------------------------------------------ 17. HERO ON MAROON == */

.gogo .gogo-hero {
    background:
        linear-gradient(135deg, #111111 0%, #2a0a0b 45%, var(--brand) 100%);
    padding: 58px 0;
    color: #ffffff;
}

.gogo .gogo-hero h1 { color: #ffffff; }
.gogo .gogo-hero h1 .accent { color: var(--accent); }
.gogo .gogo-hero .lede { color: rgba(255, 255, 255, .86); }

.gogo .gogo-hero .eyebrow {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
    color: #ffffff;
}

.gogo .gogo-hero .eyebrow .dot { background: var(--accent); }

.gogo .gogo-hero .hero-usp {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-md);
    padding: 14px 12px;
}

.gogo .gogo-hero .hero-usp h3 { color: #ffffff; font-size: 14px; }
.gogo .gogo-hero .hero-usp .ico { background: var(--accent); color: #241c00; }

/* ---- the panel that replaced the deleted app screenshot ---- */

.gogo .hero-panel {
    background: #ffffff;
    border-radius: var(--r-lg);
    padding: 24px 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.gogo .hero-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.gogo .hero-panel-head i {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 19px;
}

.gogo .hero-panel-head .lbl {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.gogo .hero-panel-head .num {
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 23px;
    color: var(--ink);
}

.gogo .hero-panel-head .num:hover { color: var(--brand); }

.gogo .hero-panel-list {
    list-style: none;
    margin: 16px 0 20px;
    padding: 0;
}

.gogo .hero-panel-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 14.5px;
    color: var(--body);
}

.gogo .hero-panel-list i {
    color: var(--ok);
    margin-top: 4px;
    font-size: 12px;
    flex: none;
}

.gogo .hero-panel-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.gogo .hero-panel-actions .btn-brand,
.gogo .hero-panel-actions .btn-wa {
    flex: 1 1 auto;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: var(--r-sm);
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 14.5px;
}

.gogo .hero-panel-actions .btn-wa {
    background: var(--ok-light);
    color: #ffffff;
}

.gogo .hero-panel-actions .btn-wa:hover { background: #1eb955; color: #fff; }

/* -------------------------------------- 18. SECTION BANDS AND HEADINGS == */

/* The reference alternates white and a flat #F2F2F2. */
.gogo .gogo-section.tint,
.gogo .gogo-section.amber-tint { background: var(--surface-3); }

.gogo .gogo-section.dark {
    background: linear-gradient(135deg, #111111 0%, #2a0a0b 60%, var(--brand) 100%);
}

.gogo .section-head .eyebrow {
    background: var(--brand-tint);
    border: 1px solid rgba(4, 60, 92, .18);
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}

/* Gold-to-maroon rule under headings, echoing the nav hover colour. */
.gogo .section-head h2::after,
.gogo .search-lead h1::after {
    background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 100%);
}

/* --------------------------------------------- 19. PRIMARY CTA: MAROON == */

/* The reference's buttons are maroon with white labels, so the search CTA
   goes back to the brand colour. Gold is kept for hover states, eyebrows and
   heading rules, where it accents rather than competes. */
.gogo .btn-search {
    background: var(--brand);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 10px 26px rgba(4, 60, 92, .32);
}

.gogo .btn-search:hover,
.gogo .btn-search:focus {
    background: var(--brand-hover);
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(4, 60, 92, .40);
}

.gogo .btn-search i { color: #ffffff; }

/* The calculator band above the fold sits on grey, not a cyan wash. */
.gogo .gogo-search.at-top {
    background: linear-gradient(180deg, var(--surface-3) 0%, #ffffff 100%);
}

/* ------------------------------------------------------ 20. FOOTER == */

.gogo .gogo-footer { background: #111111; }
.gogo .gogo-footer a:hover { color: var(--accent); }
.gogo .gogo-footer h4 { color: #ffffff; }

.gogo .rc-logo-footer .rc-logo-img { height: 64px; max-width: 190px; }