/* ==========================================================================
   TOWN BUS - MOBILE UI
   All mobile styles for townbus.html live here, separate from the desktop CSS.
   Linked AFTER the page's inline <style>, so rules here win on mobile.
   Desktop/tablet rules stay in townbus.html + css/style.css - do not add them here.
   ========================================================================== */

@media (max-width: 768px) {
    .townbus-page .tb-find-btn {
        top: 78%;
        width: 42%;
        height: 12%;
    }
}

@media (max-width: 576px) {
    .tb-map-title {
        font-size: clamp(12px, 4vw, 22px);
    }
}

@media (max-width: 768px) {
    .tb-blue-band {
        padding: 24px 14px 44px;
    }

    .tb-snacks-heading {
        font-size: 26px;
        margin-bottom: 26px;
    }

    .tb-snacks-grid {
        gap: 8px;
    }

    .tb-snack-card {
        flex: 1 1 30%;
    }

    .tb-snack-card--featured {
        flex: 1 1 34%;
    }

    .tb-snack-label {
        font-size: 16px;
        margin-top: 10px;
        letter-spacing: -0.04em;
    }
}

@media (max-width: 480px) {
    .tb-snacks-heading {
        font-size: 22px;
    }

    .tb-snack-label {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .tb-intro-inner {
        flex-direction: column;
    }

    .tb-intro-bus-col {
        flex: none;
        width: 90%;
    }
}

@media (max-width: 768px) {
    .tb-map-heading {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .tb-hero-home-btn {
        top: 14px;
        right: 12px;
        width: 132px;
        height: 67px;
        font-size: 15px;
        gap: 7px;
    }
}

@media (max-width: 768px) {
    .townbus-footer {
        padding-top: 40px;
    }

    .tb-tagline-main {
        font-size: 22px;
    }

    /* Removed tb-phone-link */

    .tb-footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .tb-footer-links {
        text-align: center;
        display: none;
    }

    .tb-footer-links a {
        margin: 0 10px;
        display: none;
    }
}

@media (max-width: 480px) {
    .tb-tagline-main {
        font-size: 18px;
    }

    .tb-tagline-sub {
        font-size: 14px;
    }

    .tb-footer-logo img {
        max-width: 180px;
    }

    .tb-phone-link {
        font-size: 20px;
    }

    .tb-phone-icon {
        width: 32px;
        height: 32px;
    }

    .tb-footer-links a {
        display: block;
        margin: 5px 0;
    }
}

@media (max-width:768px) {
    .townbus-content {
        max-width: 100%;
        padding: 33px 20px;
        margin: 0 auto;
        right: 0;
    }

    /* Show mobile map image on mobile devices */
    .townbus-full-img {
        content: url('/assets/images/townbus-map-mobile.webp');
    }

    .map-text h2 {
        display: none;
    }

    .snacks-text h2 {
        display: none;
    }

    /* Show mobile CTA image on mobile devices */
    .townbus-page .col-md-12 img[src*="townbus-cta"] {
        content: url('assets/images/cta.webp');
    }

    .townbus-page .why-container {
        flex-direction: column;
    }

    .townbus-page .why-badges-col .badge-item {
        width: 120px !important;
    }

    .townbus-page .why-badges-col {
        min-height: 75px;
    }

    .townbus-page .why-heading {
        text-align: center;
        margin: 0 auto;
        font-size: 28px !important;
    }

    .townbus-page .why-heading br {
        display: none;
    }

    .townbus-page .why-subheading {
        margin: 24px auto 20px;
        font-size: 18px;
    }

    .townbus-page .why-body {
        text-align: center;
        padding: 0 40px;
    }

    /* Footer Alignment Fix for Mobile */
    .townbus-footer-content {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 30px !important;
        flex-wrap: wrap !important;
    }

    .tb-footer-center {
        text-align: center !important;
        padding: 0 !important;
    }

    .tb-footer-cta {
        text-align: center !important;
        align-items: center !important;
        display: flex !important;
        justify-content: center !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    .tb-home-btn {
        /* width: 100% !important; */
        max-width: 320px !important;
        justify-content: center !important;
        font-size: 20px !important;
        padding: 12px 25px !important;
        /* box-shadow: -6px 6px 0px #4558AC !important; */
    }

    .tb-home-btn:hover {
        box-shadow: -6px 6px 0px #4558AC !important;
    }

    .tb-footer-bottom {
        padding: 20px 0 40px;
    }

    .tb-footer-cta {
        margin-top: 0px !important;
    }

    .townbus-page .cta-content {
        display: none;
    }
}

@media (max-width: 768px) {
    .townbus-page #why-town-bus {
        padding: 0px 20px;
        margin: 0;
    }

    .townbus-page .why-heading {
        font-size: 42px;
    }

    .townbus-page .why-badges-col {
        flex-wrap: wrap;
    }

    .townbus-page .badge-item {
        width: 140px;
    }

    .townbus-page .why-text-col {
        padding-right: 0px !important;
    }

    .townbus-page .why-container {
        padding: 60px 0px !important;
    }


}

@media (max-width: 768px) {
    .townbus-page .townbus-footer-content {
        gap: 10px !important;
        padding-bottom: 20px !important;
    }

    .townbus-page .tb-footer-logo img {
        width: 92px !important;
    }

    .townbus-page .tb-tagline-main {
        font-size: 13px !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
    }

    .townbus-page .tb-tagline-sub {
        font-size: 10px !important;
        line-height: 1.3 !important;
        margin-top: 4px !important;
    }

    .townbus-page .tb-home-btn {
        font-size: 12px !important;
        padding: 8px 16px !important;
        gap: 6px !important;
    }

    .townbus-page .tb-home-btn .arrow-icon {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .townbus-page .tb-footer-logo img {
        width: 64px !important;
    }

    .townbus-page .tb-tagline-main {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    .townbus-page .tb-tagline-sub {
        font-size: 8px !important;
    }

    .townbus-page .tb-home-btn {
        font-size: 9px !important;
        padding: 6px 10px !important;
        gap: 4px !important;
    }

    .townbus-page .tb-home-btn .arrow-icon {
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .townbus-page #why-town-bus {
        padding: 40px 16px !important;
    }

    .townbus-page .why-heading {
        font-size: 40px !important;
    }

    .townbus-page .why-subheading {
        font-size: 17px !important;
    }

    .townbus-page .why-body {
        font-size: 16px !important;
        padding: 0 !important;
    }

    .townbus-page .why-badges-col {
        gap: 10px !important;
    }

    .townbus-page .why-badges-col .badge-item {
        max-width: 33% !important;
    }
}

@media (max-width: 480px) {
    .townbus-page .why-heading {
        font-size: 32px !important;
    }

    .townbus-page .why-badges-col {
        gap: 6px !important;
    }
}

@media (max-width: 767px) {
    .grb-footer .col-lg-3 {
        text-align: center;
    }

    .footer-social {
        justify-content: flex-start;
        display: flex;
        margin-left: -8px;
    }

    .footer-logo {
        margin: 0 auto 20px !important;
        display: block;
    }

    .footer-bottom-row {
        text-align: center !important;
    }

    .footer-bottom-row .text-md-end {
        text-align: center !important;
        margin-top: 6px;
    }
}

@media (max-width: 767px) {

    .townbus-page .cta-heading {
        font-size: 32px !important;
        margin-top: 20px;
    }

    /* Intro section — text first, banana chips image below */
    .tb-intro-section {
        padding: 18px 0 14px;
        overflow: hidden;
    }

    .tb-intro-inner {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
    }

    .tb-intro-text-col {
        width: 100%;
        /* text-col is the 2nd child in the HTML (image comes first) -
                   order pulls it ahead so it renders right under the hero */
        order: -1;
        text-align: center;
    }

    .tb-intro-bus-col {
        display: none;
    }

    /*
     * The bowl image is position:absolute with 170% width on desktop which
     * overflows on mobile. We switch the wrapper to a fixed padding-bottom
     * container and keep the bowl absolute but scaled to fit.
     */
    .tb-intro-img-wrap {
        position: relative;
        width: 92%;
        margin: 0;
        overflow: hidden;
        padding-bottom: 37%;
        /* room for bowl that peeks below the bus image */
    }

    .tb-intro-bus-img {
        position: relative;
        z-index: 2;
        width: 100%;
        height: auto;
        display: block;
    }

    .tb-intro-bowl-img {
        position: absolute;
        width: 110%;
        bottom: -5%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    /* Rice Kodubale pack was floated beside the banana chips shot in an
               older, narrower bus-col layout. Now that bus-col is enlarged
               and full-width, its left:130% offset would land off-screen /
               overlap, so keep it hidden on mobile until it gets its own
               mobile placement. */
    .tb-intro-kodubale-img {
        display: none;
    }

    .tb-intro-heading {
        font-size: 30px;
        margin-bottom: 14px;
    }

    .tb-intro-body {
        font-size: 16px;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Mask section - tb-mob-bus-hero is a normal flow image now, so it
       doesn't need the old top padding reserved for the absolutely-
       positioned tb-mob-bg-scene/tb-mask-img. */
    .tb-mask-section {
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        /* desktop's gradient stops at 80%, leaving a solid peach
                   block for the rest of the section - remove it so the
                   plain page background shows instead */
        background: none;
    }

    .tb-mask-img {
        display: none;
    }

    .tb-mob-bus-hero {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        z-index: 2;
    }

    /* Enlarged standalone banana chips pack, layered over the smaller one
       baked into tb-mob-bus-hero at roughly the same spot (bbox measured
       from the source PNG: pack ~30-51% / 4-11% of the hero image). Sized
       and positioned in % so it scales with the hero image across all
       mobile widths. */
    .tb-mob-banana-overlay {
        display: block;
        position: absolute;
        top: -3%;
        left: -3%;
        width: 70%;
        height: auto;
        z-index: 3;
    }

    /* Rice Kodubale pack, to the right of the banana chips overlay */
    .tb-mob-kodubale-overlay {
        display: block;
        position: absolute;
        top: 10%;
        left: 63%;
        width: 26%;
        height: auto;
        z-index: 3;
    }

    /* EXPLORE FLAVOURS ticket button, centered below the bus (bus bbox
       measured at ~20-34% of the hero image height) */
    .tb-mob-explore-btn {
        display: block;
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translateX(-50%);
        width: 36%;
        height: auto;
        z-index: 4;
    }

    .tb-mob-explore-btn svg {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Thenkulal Murukku pack, above the GETTING STARTED text (text bbox
       measured at ~50.6-54.1% top / 58-86% left of the hero image) */
    .tb-mob-thenkulal-overlay {
        display: block;
        position: absolute;
        top: 38%;
        left: 67%;
        width: 30%;
        height: auto;
        z-index: 3;
    }

    /* Flat road accent - removed, was peeking awkwardly at the seam with
       the tall road vector below it in .tb-map */
    .tb-mob-mask-road {
        display: none;
    }

    /* Replaced by tb-mob-bus-hero, which bakes this scene in already */
    .tb-mob-bg-scene {
        display: none;
    }

    /* Replaced by tb-mob-bus-hero, which bakes its own shadow in already */
    .tb-bus-shadow {
        display: none;
    }

    /* Village background scenery hidden on mobile (desktop untouched) */
    .tb-bg-scene,
    .tb-bg-scene-left {
        display: none;
    }

    .tb-floating-product {
        display: none;
    }

    .tb-tyre-smoke {
        width: clamp(36px, 7vw, 60px);
        bottom: 40px;
        left: 24%;
    }

    .tb-explore-btn-wrap {
        top: -6%;
    }

    .tb-explore-btn svg {
        width: clamp(110px, 28vw, 180px);
    }

    .tb-map-title {
        font-size: clamp(10px, 3.8vw, 20px);
        top: 8%;
        left: 4%;
    }

    .tb-map-heading {
        font-size: clamp(16px, 5vw, 28px);
        top: 32%;
        left: 4%;
    }

    /* Road SVGs: clip within the map container, no viewport overflow */
    .tb-map-road {
        width: 110%;
        transform: translate(-10%, -5%);
    }

    .tb-map-road--3 {
        width: 115%;
        left: -10%;
    }

    .tb-map-road--2 {
        width: clamp(200px, 52%, 560px);
    }

    /* Blue band / snacks — prevent right-card scale from overflowing */
    .tb-blue-band {
        padding: 8px 10px 30px;
        overflow: hidden;
    }

    .tb-snacks-heading {
        font-size: 28px;
        margin-bottom: 18px;
        letter-spacing: 0;
    }

    .tb-snacks-grid {
        gap: 4px;
        overflow: visible;
        /* individual card clips handled below */
    }

    .tb-snack-card {
        flex: 1 1 30%;
    }

    .tb-snack-card--featured {
        flex: 1 1 34%;
        margin-left: -8px;
        margin-right: -8px;
    }

    /* Desktop pushes this pouch down 22px to align with the side
               packs - bring it up a little on mobile */
    .tb-snack-card--featured img {
        transform: translateY(8px);
    }

    /* Remove the scale that causes right-card overflow on narrow screens,
               and bring it up a little */
    .tb-snacks-grid .tb-snack-card:last-child img {
        transform: scale(1.0) translateY(4px);
        transform-origin: center bottom;
    }

    .tb-snack-label {
        font-size: 12px;
        margin-top: 6px;
        letter-spacing: -0.03em;
    }

    /* Tighten the ground-shadow pseudo-element on small screens */
    .tb-snack-label::before {
        margin-bottom: 8px;
    }

    /* Re-calibrate right card label pull-up for the now un-scaled image */
    .tb-snacks-grid .tb-snack-card:last-child .tb-snack-label {
        margin-top: clamp(-24px, -4vw, -6px);
    }

    /* Center card's label was inheriting the desktop rule's negative
               pull-up (same specificity beats the generic mobile .tb-snack-label
               rule above), crowding "Homely" up into the image so only
               "Crunches" stayed visible. Give it its own small, positive value. */
    .tb-snacks-grid .tb-snack-card--featured .tb-snack-label {
        margin-top: 6px;
    }

    /* Why Town Bus */
    .townbus-page #why-town-bus {
        padding: 32px 12px !important;
    }

    .townbus-page .why-heading {
        font-size: 28px !important;
    }

    .townbus-page .why-subheading {
        font-size: 14px !important;
    }

    .townbus-page .why-body {
        font-size: 14px !important;
    }

    .townbus-page .why-badges-col .badge-item {
        max-width: 28% !important;
    }

    /* Pre-footer banner */
    .townbus-page .tb-cta-wrap>img {
        width: 60% !important;
    }

    /* Nav / hero home button */
    .tb-hero-home-btn {
        top: 10px;
        right: 8px;
        width: 110px;
        height: 56px;
        font-size: 13px;
        gap: 5px;
    }

    /* General overflow guard */
    .townbus-footer {
        overflow: hidden;
    }
}

@media (max-width: 479px) {

    /* Intro */
    .tb-intro-heading {
        font-size: 26px;
    }

    .tb-intro-body {
        font-size: 14px;
        max-width: 240px;
    }

    /* Mask section */
    .tb-mask-img {
        width: 82%;
        top: 0;
    }

    .tb-bus-shadow {
        width: 86%;
        bottom: 20px;
    }

    .tb-floating-product {
        display: none;
    }

    .tb-tyre-smoke {
        width: clamp(26px, 6vw, 44px);
        bottom: 26px;
        left: 22%;
    }

    .tb-explore-btn-wrap {
        top: -4%;
    }

    .tb-explore-btn svg {
        width: clamp(84px, 24vw, 140px);
    }

    .tb-map-title {
        font-size: clamp(9px, 3.5vw, 16px);
    }

    .tb-map-heading {
        font-size: clamp(13px, 4.5vw, 22px);
    }

    /* Blue band */
    .tb-snacks-heading {
        font-size: 22px;
        margin-bottom: 14px;
    }

    .tb-snack-label {
        font-size: 10px;
    }

    .tb-snack-card--featured {
        margin-left: -4px;
        margin-right: -4px;
    }

    /* Why Town Bus */
    .townbus-page .why-heading {
        font-size: 24px !important;
    }

    .townbus-page .why-badges-col .badge-item {
        max-width: 30% !important;
    }

    .townbus-page .why-body {
        padding: 0 !important;
    }

    /* Pre-footer banner */
    .townbus-page .tb-cta-wrap>img {
        width: 80% !important;
    }
}

/* ==========================================================================
   WHY TOWN BUS - mobile
   Figma order is: heading -> badges -> subheading -> body.
   In the HTML the heading/subheading/body live inside .why-text-col and the
   badges are a sibling column, so plain `order` can't interleave them.
   `display: contents` dissolves .why-text-col's box and promotes its children
   to flex items of .why-container, which lets the badge column be ordered
   between the heading and subheading - no HTML change needed.
   ========================================================================== */
@media (max-width: 767px) {

    .townbus-page .why-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* base rule is space-evenly for the desktop row - in a column that
           spreads the items apart with big gaps. Pack them instead. */
        justify-content: flex-start !important;
        padding: 14px 0 34px !important;
    }

    .townbus-page .why-text-col {
        display: contents !important;
    }

    .townbus-page .why-heading {
        order: 1 !important;
    }

    .townbus-page .why-badges-col {
        order: 2 !important;
    }

    .townbus-page .why-subheading {
        order: 3 !important;
    }

    .townbus-page .why-body {
        order: 4 !important;
    }

    .townbus-page .why-heading {
        margin: 0 0 6px 0 !important;
        font-size: 26px !important;
    }

    /* badges sit in one centered row directly under the heading */
    .townbus-page .why-badges-col {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: -8px 0 6px !important;
    }

    .townbus-page .why-badges-col .badge-item {
        width: 27% !important;
        max-width: 104px !important;
        height: auto !important;
    }

    /* spacing now that the badges sit above these */
    .townbus-page .why-subheading {
        margin: -22px auto 6px !important;
        font-size: 17px !important;
    }

    /* narrower column so the sentence wraps to 3 lines like the Figma frame */
    .townbus-page .why-body {
        margin: -10px auto 0 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        padding: 0 !important;
        max-width: 250px !important;
    }
}

/* ==========================================================================
   PRE-FOOTER BANNER ("READY TO RIDE BACK...") - mobile
   The markup is inline-styled with desktop-fixed values: the ticket is 75%
   wide, the heading has a 32px minimum and the button svg is a hard 220px.
   On a phone that overflows the ticket badly, so everything below is rescaled
   to match the Figma frame. !important is required to beat the inline styles.
   ========================================================================== */
@media (max-width: 767px) {

    /* desktop pulls this up 120px and pads 120px - far too much on a phone.
       0 rather than a negative value, otherwise the banner rides up over the
       "Trusted quality from GRB..." text in the section above. */
    .townbus-page .tb-banner {
        margin-top: 0 !important;
        padding-bottom: 36px !important;
    }

    /* nudge the village illustration down. position/top rather than margin so
       it moves visually without changing the banner's height - that keeps the
       card group above exactly where it is. */
    .townbus-page .tb-banner>img {
        position: relative !important;
        top: 22px !important;
    }

    /* shift the whole card group (ticket + text + button) up together so their
       alignment with each other is preserved */
    .townbus-page .tb-banner-inner {
        transform: translateY(-60px) !important;
    }

    /* ticket artwork - wider so the text has room.
       preserveAspectRatio="none" on the svg lets us set an explicit height here
       to make the orange shape taller than its natural 1380:786 ratio.
       Desktop is unaffected: it has no height set, so it still derives its
       height from the aspect ratio exactly as before. */
    .townbus-page .tb-banner-ticket {
        width: 88% !important;
        height: 240px !important;
    }

    /* text column sits inside the ticket, centered */
    .townbus-page .tb-banner-text {
        width: 68% !important;
        transform: translate(-50%, -58%) !important;
        text-align: center !important;
    }

    /* forces READY TO RIDE BACK / TO YOUR FAVOURITE / FLAVOURS? like the Figma
       frame. The br's are inline display:none so desktop keeps its own wrap. */
    .townbus-page .tb-mob-br {
        display: block !important;
    }

    .townbus-page .tb-banner-text h2 {
        font-size: clamp(15px, 5.4vw, 24px) !important;
        line-height: 1.05 !important;
        margin: 0 0 12px 0 !important;
    }

    /* narrower column above makes this wrap to 3 lines like the Figma frame.
       max-width narrows only the paragraph - the heading keeps the full column
       so its forced line breaks don't wrap. */
    .townbus-page .tb-banner-text p {
        font-size: clamp(8px, 2.8vw, 13px) !important;
        line-height: 1.4 !important;
        max-width: 86% !important;
        margin: 0 auto !important;
    }

    /* let the paragraph wrap naturally instead of the desktop break point */
    .townbus-page .tb-banner-text p br {
        display: none !important;
    }

    /* Button straddles the ticket's bottom edge (~3/4 on the ticket) as in the
       Figma frame. The ticket is flex-centered in .tb-banner-inner, so its
       bottom edge is (ticket height / 2) below the 50% line - anchor to that
       rather than to the banner bottom. */
    .townbus-page .tb-banner-btn {
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, 68px) !important;
    }

    .townbus-page .tb-banner-btn>svg {
        width: 118px !important;
        height: auto !important;
        display: block !important;
    }
}

/* ==========================================================================
   FOOTER - mobile layout
   Reference: logo on the left, tagline on the right (side by side),
   GRB Home button on its own line, centered underneath.
   This block is last on purpose so it overrides the stacked layout above.
   ========================================================================== */
@media (max-width: 767px) {

    .townbus-page .townbus-footer-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        text-align: left !important;
    }

    /* left column - logo */
    .townbus-page .tb-footer-logo {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }

    .townbus-page .tb-footer-logo img {
        width: 100% !important;
        height: auto !important;
    }

    /* right column - tagline */
    .townbus-page .tb-footer-center {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        text-align: left !important;
        padding: 0 !important;
    }

    /* 3 separate lines on mobile: INGREDIENTS. / MEMORIES. / GOOD SNACKS.
       The br is inline display:none so desktop keeps its 2-line wrap untouched. */
    .townbus-page .tb-tagline-mobile-br {
        display: block !important;
    }

    /* main tagline - per Figma spec */
    .townbus-page .tb-tagline-main {
        font-family: 'Black Han Sans', sans-serif !important;
        font-weight: 400 !important;
        font-style: normal !important;
        font-size: 14px !important;
        line-height: 144% !important;
        letter-spacing: 0 !important;
        text-transform: uppercase !important;
    }

    /* Bottom diamond strip - thicker on mobile.
       The svg is viewBox 1536x41 at width:100%, which squashes it to ~10px tall
       on a phone. Setting an explicit height with width:auto scales it
       proportionally (so the diamonds keep their shape) and the wrapper crops
       the extra width. */
    .townbus-page .tb-diamond-strip {
        overflow: hidden !important;
    }

    .townbus-page .tb-diamond-strip>svg {
        width: auto !important;
        height: 24px !important;
        display: block !important;
    }

    /* sub tagline */
    .townbus-page .tb-tagline-sub {
        font-size: 12px !important;
        line-height: 1.45 !important;
        text-align: left !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }

    /* flex-basis 100% forces the button onto its own row, centered */
    .townbus-page .tb-footer-cta {
        flex: 0 0 100% !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 18px !important;
    }

    /* button is an inline svg - scale the svg itself */
    .townbus-page .tb-footer-cta .tb-home-btn svg {
        width: 145px !important;
        height: auto !important;
    }
}

/* ==========================================================================
   HERO SECTION - mobile redesign (matches the Figma mobile hero reference)
   The source hero images (townbus-vector-3/8) are wide desktop banners
   (~2.16:1) with the product pouch in the right half and empty gradient on
   the left. Card is taller than wide (4:4.4) to leave room for the logo,
   3-line title and dots without clipping. object-position is tuned to
   85% so the whole pouch (~48%-98% of the source width) still stays in
   frame at that taller ratio, which reveals a narrower slice of the image.
   ========================================================================== */
@media (max-width: 767px) {

    .townbus-page .hero-section {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 5;
        border-radius: 0;
    }

    .townbus-page .hero-slide {
        object-fit: cover;
        object-position: 70% center;
        /* zoom out a little: shrinks the already-covered image toward center,
           the plain cream page background peeks through the thin edge gap.
           translateX must stay paired here since it also drives the slide
           show/hide (this replaces the base rule's transform entirely). */
        transform: translateX(100%) scale(0.9);
    }

    .townbus-page .hero-slide.active {
        transform: translateX(0) scale(0.9);
    }

    .townbus-page .hero-content-container {
        align-items: flex-start !important;
        padding: 26px 20px 0 !important;
    }

    .townbus-page .hero-content {
        margin: 0 !important;
    }

    .townbus-page .townbus-logo {
        width: 34% !important;
        margin: 0 0 14px !important;
    }

    .townbus-page .hero-title {
        font-size: clamp(34px, 11.5vw, 50px) !important;
        max-width: 82% !important;
        line-height: 0.98 !important;
        letter-spacing: -1px !important;
        margin-bottom: 14px !important;
    }

    .townbus-page .hero-dots {
        margin: 0 !important;
    }

    .townbus-page .dot {
        width: 6px !important;
        height: 6px !important;
        margin-right: 6px !important;
    }

    /* bigger diamond pattern strip, sized to match rakal.html's mobile hero border.
       left: 0 keeps the svg's thick/tapered end anchored to the left edge. A
       smaller scale (130% vs 200%) reveals more of the svg's own taper, so the
       right edge comes down to a thin sharp sliver instead of staying half-thick. */
    .townbus-page .pattern-tilted {
        width: 130% !important;
        left: 0 !important;
        bottom: 0 !important;
    }
}

/* ==========================================================================
   MAP SECTION ("Hop On! The Fun is Just Getting Started") - empty spacer.
   Rebuilding this step by step from screenshots instead of guessing the
   whole layout at once. The section itself now reserves a tall portrait
   block of space (roughly matching the eventual Figma content height) so
   content can be dropped in piece by piece without everything else
   jumping around each time. All of desktop's individual images/text stay
   hidden until each one gets added back deliberately. Desktop untouched.
   ========================================================================== */
@media (max-width: 767px) {
    .townbus-page .tb-map {
        display: block;
        position: relative;
        overflow: hidden;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        min-height: 0;
        padding-bottom: 0;
    }

    /* Tall road accent - superseded by tb-mob-bus-hero */
    .townbus-page .tb-mob-mask-road-tall {
        display: none;
    }

    /* Keep every existing desktop element inside .tb-map hidden until it's
       deliberately added back - otherwise they'd render at their desktop
       (landscape) % positions on top of this empty portrait spacer. */
    .townbus-page .tb-map-road,
    .townbus-page .tb-map-road--2,
    .townbus-page .tb-map-road--3,
    .townbus-page .tb-map-title,
    .townbus-page .tb-explore-btn-wrap,
    .townbus-page .tb-map-bus--1,
    .townbus-page .tb-map-bus--2,
    .townbus-page .tb-map-pack--group,
    .townbus-page .tb-map-pack--group-shadow,
    .townbus-page .tb-map-pack--ellu,
    .townbus-page .tb-map-pack--thenkuzhal,
    .townbus-page .tb-map-pack--thenkuzhal-shadow,
    .townbus-page .tb-map-pack--pack2,
    .townbus-page .tb-map-pack--banana,
    .townbus-page .tb-map-traffic-light,
    .townbus-page .tb-map-traffic-light-shadow,
    .townbus-page .tb-map-tree,
    .townbus-page .tb-map-tree-2,
    .townbus-page .tb-map-tree-3,
    .townbus-page .tb-map-tree-3-shadow,
    .townbus-page .tb-map-tree-4,
    .townbus-page .tb-map-tree-shadow {
        display: none;
    }

    /* Desktop's cloud divider transitions from the map section into the
       blue band - orphaned now that the map is hidden. */
    .townbus-page .tb-blue-cloud-divider {
        display: none;
    }

    /* Orange ground-shadow ellipse under the bus */
    .townbus-page .tb-bus-shadow {
        display: none;
    }

}