/* =========================================================================
   mobile.css  —  THE PHONE EDITION  ("Ridge Pocket")
   =========================================================================

   WHAT THIS FILE IS
   -----------------
   A complete, separate design for PHONE-SIZED screens (768px and under).
   It is loaded LAST on all five pages, after main.css and home.css, and
   every single rule inside it lives in one big

       @media (max-width: 768px) { ... }

   block. That means:

     * on a laptop or tablet this file does literally nothing — the desktop
       design in main.css / home.css is untouched;
     * on a phone, these rules run last and therefore win, and the site
       switches to an app-style layout instead of a shrunken web page.

   WHAT CHANGES ON A PHONE
   -----------------------
     1. NAVIGATION moves to a fixed bottom tab bar (Home · Raids · Chat ·
        Gallery · About) — the pattern every phone app uses. The cramped
        row of nav pills in the top bar is hidden, and the top bar becomes
        a slim frosted strip with the logo and one "Enquire" button.
     2. LESS SCROLLING is the main goal. Anything that was a tall stack of
        cards becomes a SWIPEABLE SIDEWAYS RAIL (featured raids, upcoming
        departures, the fleet, the reviews, the crew). Long paragraphs are
        clamped to a few lines. Section padding is roughly a third of the
        desktop value. The homepage went from ~19 screens of scrolling to
        about 7.
     3. THE HERO becomes one full-screen photo with the words laid over it,
        instead of a text block above a framed picture.
     4. Cards get bigger corners, deeper shadows and frosted-glass panels,
        which is what makes a phone layout read as "premium".

   HOW TO TUNE IT
   --------------
   The handful of numbers worth touching are the tokens in section 1 —
   page margin, corner radius, the height of the bottom bar. Everything
   else is built from those.

   SECTION INDEX
   -------------
     1.  Tokens + page frame
     2.  Type scale
     3.  Top bar
     4.  Bottom tab bar
     5.  Shared furniture (sections, headings, buttons, rails)
     6.  HOMEPAGE — hero
     7.  HOMEPAGE — marquee + assurances
     8.  HOMEPAGE — featured raids (photo carousel)
     9.  HOMEPAGE — upcoming departures (carousel)
     10. HOMEPAGE — build your raid
     11. HOMEPAGE — the fleet (carousel)
     12. HOMEPAGE — why indian moto adventures (compact bento)
     13. HOMEPAGE — reviews (carousel)
     14. HOMEPAGE — FAQ + closing CTA
     15. INNER PAGES — page hero + CTA band
     16. INNER PAGES — expeditions
     17. INNER PAGES — gallery
     18. INNER PAGES — contact
     19. INNER PAGES — about
     20. Footer
     21. Motion / accessibility
   ========================================================================= */

@media (max-width: 768px) {

  /* ---------- 1. Tokens + page frame ----------
     --m-* names are phone-only. The three you are most likely to want to
     change are the gutter (side margin), the radius (how round cards are)
     and the tab-bar height. */
  :root{
    --m-gutter: 16px;
    --m-r:      22px;   /* big cards / photo cards      */
    --m-r-sm:   14px;   /* small cards, inputs, chips   */
    /* The bottom nav is a floating capsule, so it needs three numbers:
       its own height, how far it clears the screen's bottom edge, and the
       total the page has to keep free underneath so nothing hides behind
       it (the pill's height, its gap, and a little breathing room). */
    --m-tab-h:     62px;
    --m-tab-gap:   12px;
    --m-tab-space: 86px;
    --m-top-h:     54px;   /* top bar height */

    /* Frosted panels on dark photography */
    --m-glass:      rgba(11,24,48,0.62);
    --m-glass-line: rgba(246,243,236,0.16);

    /* One shadow recipe reused by every raised card on a phone: a tight
       contact shadow plus a wide soft one. */
    --m-shadow:
      0 1px 2px rgba(11,24,48,0.06),
      0 10px 22px -12px rgba(11,24,48,0.20),
      0 30px 60px -40px rgba(11,24,48,0.30);

    /* Overrides of main.css's own tokens, so every existing rule that says
       var(--gutter) / var(--section-pad) tightens up automatically. */
    --gutter: var(--m-gutter);
    --section-pad: 2.3rem;
  }

  /* The page sits above the fixed tab bar. env(safe-area-inset-bottom)
     is the extra room iPhones need for the home indicator. */
  body{
    padding-bottom: calc(var(--m-tab-space) + env(safe-area-inset-bottom, 0px));
    -webkit-tap-highlight-color: rgba(207,98,18,.18);
  }

  /* Anchor links (#build-your-raid) must clear the slim top bar, not the
     tall desktop header. */
  :target,
  [id]{ scroll-margin-top: 4.6rem; }

  /* The old floating WhatsApp bubble is replaced by the Chat tab in the
     bottom bar — two green circles in the same corner is clutter. */
  .book-trigger{ display: none !important; }

  /* The thin reading-progress line stays, just slimmer. */
  .scroll-progress{ height: 2px; }


  /* ---------- 2. Type scale ----------
     Phone headlines are set tighter and balanced so they break into even
     lines instead of leaving one orphan word on the last row. */
  .display-1{
    font-size: clamp(2.2rem, 10.5vw, 2.9rem);
    line-height: .98; letter-spacing: -.038em;
    text-wrap: balance;
  }
  .display-2{
    font-size: clamp(1.55rem, 7.4vw, 2rem);
    line-height: 1.02; letter-spacing: -.032em;
    text-wrap: balance;
  }
  .display-3{ font-size: 1.2rem; line-height: 1.25; }
  .eyebrow{ font-size: .62rem; letter-spacing: .16em; gap: .45rem; }
  .lede{ font-size: .95rem; line-height: 1.55; }
  .kicker{ font-size: .88rem; line-height: 1.55; }


  /* ---------- 3. Top bar ----------
     A slim strip: round logo + wordmark on the left, one rust "Enquire"
     pill on the right. The nav links move to the bottom bar (section 4),
     so the pill row and the little sliding capsule behind it are hidden. */
  .site-header{
    padding: .5rem var(--m-gutter);
    height: var(--m-top-h);
    align-items: center;
    justify-content: flex-start;
  }
  .site-header::before{
    /* the frosted plate — invisible over the hero photo, fades in on scroll */
    content: "";
    position: absolute; inset: 0;
    background: rgba(9,18,38,.72);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(246,243,236,.10);
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
  }
  .site-header.is-scrolled::before{ opacity: 1; }

  .header-inner{
    position: relative; z-index: 1;
    width: 100%;
    justify-content: space-between;
    gap: .5rem;
  }

  /* Nearly opaque on purpose: this pill sits over a dark photo on the
     homepage but over the cream page everywhere else, and a
     half-transparent navy turns muddy grey on cream. */
  .site-header .logo{
    height: 38px;
    gap: .45rem;
    padding: 0 .8rem 0 .2rem;
    background: rgba(11,24,48,.86);
    border-color: rgba(246,243,236,.14);
  }
  .site-header .logo-mark{ width: 30px; height: 30px; }
  .site-header .logo-word{ font-size: .66rem; letter-spacing: .03em; }
  /* once the frosted plate behind the whole bar has faded in, the pill can
     step back and let the bar carry the contrast */
  .site-header.is-scrolled .logo{ background: rgba(11,24,48,.35); border-color: transparent; }

  /* Small phones: the logo pill and the "Enquire" button were crowding
     each other with both at full mobile size, so this shrinks the pill
     one step further rather than letting them collide or wrap. */
  @media (max-width: 380px){
    .site-header{ padding-inline: 12px; }
    .site-header .logo{ height: 34px; gap: .35rem; padding: 0 .6rem 0 .16rem; }
    .site-header .logo-mark{ width: 26px; height: 26px; }
    .site-header .logo-word{ font-size: .56rem; letter-spacing: .02em; }
    .m-enquire{ height: 32px; padding: 0 .7rem; font-size: .6rem; }
  }

  /* The nav pill row and the WhatsApp icon both move to the bottom bar. */
  .site-nav,
  .nav-indicator,
  .header-actions .topbar-whatsapp{ display: none; }

  /* The one action kept in the top bar. */
  .header-actions{ gap: .4rem; }
  .m-enquire{
    display: inline-flex; align-items: center; gap: .35rem;
    height: 36px; padding: 0 .95rem;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--dark);
    background: linear-gradient(140deg, #E8A063 0%, var(--rust) 85%);
    border: 1px solid rgba(11,24,48,.18);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      0 4px 14px -4px rgba(207,98,18,.60);
    white-space: nowrap;
  }
  .m-enquire:active{ transform: translateY(1px); }
  .m-enquire svg{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }


  /* ---------- 4. Bottom tab bar — a floating glass pill ----------
     Not a bar welded to the bottom edge: a detached, frosted capsule that
     hovers over the page with the design showing past it on all four
     sides. Five icon-only targets; the current page is marked by a filled
     rust disc behind its icon, and WhatsApp keeps a filled green one
     because it is a permanent action rather than a place you can "be".
     Everything else is a thin cream outline at low opacity.

     Because this is always on screen, a visitor never has to scroll back
     up (or all the way down to the footer) to move around the site —
     which is most of where the old mobile scrolling went. */
  .m-tabbar{
    position: fixed; z-index: 120;
    left: 50%;
    bottom: calc(var(--m-tab-gap) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(360px, calc(100% - var(--m-gutter) * 2));
    height: var(--m-tab-h);
    display: grid; grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 0 .35rem;
    border-radius: 999px;
    /* Glass: a translucent navy plate, a hairline that is brighter along
       the top edge than the bottom (so the capsule reads as lit from
       above), and a wide soft drop shadow to lift it off the page. */
    /* Opaque enough to stay navy: the capsule floats over a dark photo on
       the homepage hero but over the CREAM page nearly everywhere else,
       and a half-transparent navy turns muddy grey on cream. The blur
       still shows shapes drifting behind it as you scroll. */
    background: linear-gradient(165deg, rgba(24,40,72,.88), rgba(10,20,40,.93));
    -webkit-backdrop-filter: blur(24px) saturate(170%);
            backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(246,243,236,.14);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.25),
      0 2px 6px rgba(0,0,0,.28),
      0 18px 40px -14px rgba(0,0,0,.65);
  }

  .m-tab{
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    color: rgba(246,243,236,.62);
    transition: color .25s var(--ease);
  }
  .m-tab svg{
    position: relative; z-index: 1;
    width: 21px; height: 21px;
    fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .3s var(--ease);
  }
  /* Icon-only, like the reference — but the label stays in the markup and
     in the accessibility tree, because an <a> whose only content is
     display:none text has no name for a screen reader to announce. */
  .m-tab span{
    position: absolute;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; white-space: nowrap;
    clip-path: inset(50%); border: 0;
  }

  /* The filled disc. One element does both states — only the fill and the
     glow differ between the active page and the WhatsApp action. */
  .m-tab.is-active::before,
  .m-tab-cta::before{
    content: "";
    position: absolute; z-index: 0;
    top: 50%; left: 50%;
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-radius: 50%;
  }
  .m-tab.is-active{ color: var(--dark); }
  .m-tab.is-active::before{
    background: linear-gradient(150deg, #E8A063 0%, var(--rust) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      0 4px 14px -2px rgba(207,98,18,.6);
  }
  .m-tab.is-active svg{ stroke-width: 1.9; }

  /* WhatsApp — the site's main conversion, in permanent thumb reach. Its
     glyph is a filled path, not a stroke, so it needs fill/stroke flipped. */
  .m-tab-cta{ color: #fff; }
  .m-tab-cta::before{
    background: radial-gradient(120% 120% at 32% 22%, #3ee584 0%, #25d366 48%, #1eb757 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      0 4px 14px -2px rgba(37,211,102,.55);
  }
  .m-tab-cta svg{ width: 22px; height: 22px; fill: currentColor; stroke: none; }

  /* Touch feedback: the icon dips rather than the whole capsule moving. */
  .m-tab:active svg{ transform: scale(.88); }
  .m-tab:not(.is-active):not(.m-tab-cta):active{ color: var(--rust-soft); }
  /* rust-on-navy is muddy; the focus ring on the dark glass is cream */
  .m-tab:focus-visible{ outline-color: var(--dark-ink); outline-offset: -6px; border-radius: 50%; }

  /* Above 768px the bar and the top-bar Enquire pill do not exist at all —
     this is the "off" switch, and it lives outside the media query at the
     very bottom of the file. */


  /* ---------- 5. Shared furniture ---------- */
  .section{ padding-block: 2.3rem; }
  .section-tight{ padding-block: 1.5rem; }

  /* Section headings: the desktop two-column "heading | intro" split
     stacks, the intro is clamped to three lines and the "view all" link
     sits right under it. */
  .px-head,
  .home-v2 .px-head,
  .section-head{ margin-bottom: .9rem; max-width: none; }
  .home-v2 .px-head-split{ display: block; }
  .home-v2 .px-head .display-2{ margin-top: .5rem; }
  .home-v2 .px-head .lede,
  .home-v2 .px-head-split .lede{
    margin-top: .55rem;
    font-size: .85rem; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .home-v2 .px-head-split .text-link{ margin-top: .7rem; font-size: .8rem; }

  /* Buttons: full-width by default, comfortable 48px tap height. */
  .im-btn{ padding: .95rem 1.5rem; font-size: .76rem; letter-spacing: .08em; }
  .im-btn-small{ padding: .68rem 1.1rem; font-size: .7rem; }

  /* ---- THE RAIL ----
     The single most important piece of this file. Any grid tagged below
     turns into a sideways, one-card-per-swipe carousel that bleeds off
     both screen edges, so four cards cost one screen of height instead of
     four. Cards keep a sliver of the next one visible so it is obvious
     there is more to swipe. */
  .home-v2 .px-routes,
  .home-v2 .departures-grid,
  .home-v2 .px-fleet,
  .home-v2 .px-quotes,
  .crew-grid{
    display: flex;
    grid-template-columns: none;
    gap: .7rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--m-gutter);
    margin-inline: calc(var(--m-gutter) * -1);
    padding: .35rem var(--m-gutter) .9rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-v2 .px-routes::-webkit-scrollbar,
  .home-v2 .departures-grid::-webkit-scrollbar,
  .home-v2 .px-fleet::-webkit-scrollbar,
  .home-v2 .px-quotes::-webkit-scrollbar,
  .crew-grid::-webkit-scrollbar{ display: none; }

  .home-v2 .px-routes > *,
  .home-v2 .departures-grid > *,
  .home-v2 .px-fleet > *,
  .home-v2 .px-quotes > *,
  .crew-grid > *{
    flex: 0 0 80%;
    max-width: 320px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* main.css draws a custom scrollbar puck under its own rails; on a phone
     the peeking next card is the affordance, so the puck is dropped. */
  .rail-bar{ display: none !important; }

  /* Cards inside a rail start off-screen to the right, where the reveal
     observer never sees them — so they would stay invisible until swiped.
     js/mobile.js marks them visible; this is the no-JS safety net. */
  html:not(.js) [data-reveal]{ opacity: 1; transform: none; }


  /* =====================================================================
     6. HOMEPAGE — hero
     The desktop hero is a column of words beside a framed photo. On a
     phone it becomes ONE full-screen photograph: departure pill pinned
     under the top bar, headline and buttons over the dark foot of the
     image, and the four numbers fused to the bottom edge as a frosted
     ribbon. One screen instead of two and a half.
     ===================================================================== */
  .home-v2 .px-hero{
    display: flex; flex-direction: column;
    min-height: calc(100svh - var(--m-tab-space));
    padding-top: 0; padding-bottom: 0;
    background: #08111f;
  }
  /* the contour-and-glow backdrop is not needed behind a photo */
  .home-v2 .px-hero-bg{ display: none; }

  .home-v2 .px-hero-grid{
    position: relative;
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 0;
    /* Reserves the top bar plus the departure pill that floats over it.
       In portrait there is room to spare and justify-content:flex-end
       still parks the words at the foot of the photo; in landscape, where
       there is not, this is what stops the headline sliding up under the
       pill — min-height on .px-hero then simply gives way to the content. */
    padding-top: calc(var(--m-top-h) + 122px);
    padding-bottom: 1.4rem;
  }

  /* the photo, promoted from a side element to the whole background */
  .home-v2 .px-hero-media{
    position: absolute; inset: 0; z-index: 0;
    margin: 0;
  }
  .home-v2 .px-hero-frame{
    position: absolute; inset: 0;
    aspect-ratio: auto;      /* home.css pins the frame to 4/3 on phones;
                                here the frame IS the screen */
    padding: 0; border: 0; border-radius: 0; box-shadow: none;
  }
  .home-v2 .px-hero-frame::after{ content: none; }
  .home-v2 .px-hero-frame .hero-media{
    position: absolute; left: 0; right: 0; top: -8%;
    width: 100%; height: 116%;      /* headroom so the parallax never
                                       exposes an edge */
    border-radius: 0;
  }
  .home-v2 .px-hero-frame .hero-media img{
    width: 100%; height: 100%; object-fit: cover;
  }
  /* the wash that makes cream text legible over any photograph */
  .home-v2 .px-hero-media::after{
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(8,17,31,.78) 0%,
      rgba(8,17,31,.16) 22%,
      rgba(8,17,31,.22) 44%,
      rgba(8,17,31,.86) 74%,
      rgba(8,17,31,.97) 100%);
  }
  /* the small overlapping photo and the "Est. 2008" seal have no room */
  .home-v2 .px-hero-inset,
  .home-v2 .px-hero-seal{ display: none; }

  /* "next departure" — a single frosted line pinned under the top bar */
  .home-v2 .hero-dep{
    position: absolute; z-index: 3;
    top: calc(var(--m-top-h) + 8px);
    /* the gutters are set here, not on .im-shell: this wrapper is
       absolutely positioned, so it resolves against the hero's padding
       box and would otherwise run edge to edge */
    left: var(--m-gutter); right: var(--m-gutter);
    bottom: auto;            /* without this the desktop rule's bottom:-1.5rem
                                stretches the wrapper down the whole hero and
                                it swallows taps meant for the photo */
    margin: 0; max-width: none;
  }
  /* THE CARD ITSELF.
     A phone gets no hover and no room for two buttons, so instead of the
     desktop card's "read it, then choose a button" this is one tappable
     summary that answers the four questions a visitor actually has —
     is it urgent, when, which raid, how much — and opens the full
     Next Departure page (raid.html) anywhere you touch it.

     Laid out as an explicit 2-column / 3-row grid rather than left to
     auto-flow, because two of the card's children are hidden here and
     auto-placement would shuffle the rest into the wrong cells. */
  .home-v2 .hero-dep .dep-card{
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .28rem .7rem;
    width: 100%; max-width: none;
    padding: .6rem 2.1rem .65rem .75rem;   /* right gutter clears the chevron */
    border-radius: 18px;
    background: var(--m-glass);
    border: 1px solid var(--m-glass-line);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px -14px rgba(0,0,0,.85);
    overflow: hidden;
    transition: transform .25s var(--ease), border-color .3s var(--ease);
  }
  /* the "there is more behind this" chevron.
     inset:auto first — main.css paints a full-bleed glow with this same
     pseudo-element (inset:0), and its left:0 would otherwise beat the
     right:1rem below and strand the chevron over the raid's name. */
  .home-v2 .hero-dep .dep-card::before{
    content: "";
    position: absolute; z-index: 2;
    inset: auto;
    right: 1rem; top: 50%;
    width: 7px; height: 7px; margin-top: -4px;
    background: none;
    border-right: 2px solid var(--rust-soft);
    border-top: 2px solid var(--rust-soft);
    transform: rotate(45deg);
  }
  /* main.css's diagonal shine band is kept — it is what sweeps across the
     card while the departure is urgent. */

  /* the invisible sheet that makes the whole card one tap target */
  .home-v2 .dep-card-link{
    display: block;
    position: absolute; inset: 0; z-index: 4;
    border-radius: inherit;
  }
  .home-v2 .dep-card-link:focus-visible{ outline-color: var(--dark-ink); outline-offset: -3px; }
  .home-v2 .hero-dep .dep-card:active{ transform: scale(.985); }

  /* row 1 — status pill (left) and departure date (right) */
  .home-v2 .dep-card-badge{
    grid-column: 1; grid-row: 1;
    justify-self: start;
    margin: 0; padding: .18rem .5rem; gap: .3rem;
    font-size: .58rem; letter-spacing: .1em; line-height: 1.1;
    border-radius: 999px;
  }
  .home-v2 .dep-card-date{
    display: block;
    grid-column: 2; grid-row: 1;
    justify-self: end; margin: 0;
    font-size: .64rem; letter-spacing: .04em;
    color: rgba(246,243,236,.72);
  }

  /* row 2 — the raid's name, up to two lines */
  .home-v2 .dep-card h3{
    grid-column: 1 / -1; grid-row: 2;
    min-width: 0; margin: 0;
    font-family: var(--font-display);
    font-size: .95rem; font-weight: 700; line-height: 1.12; letter-spacing: -.01em;
    color: var(--dark-ink);
    white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
  }

  /* row 3 — seats remaining (left) and the from-price (right) */
  .home-v2 .dep-card-seats:not([hidden]){
    grid-column: 1; grid-row: 3;
    margin: 0; font-size: .66rem; white-space: nowrap;
  }
  /* (The urgent seat count turns rust in main.css now, so it matches on a
     laptop too — nothing phone-specific needed here any more.) */
  .home-v2 .dep-card-meta{
    grid-column: 2; grid-row: 3;
    justify-self: end;
    display: flex; align-items: baseline; gap: .3rem;
    margin: 0; padding: 0; border: 0;
  }
  .home-v2 .dep-card-meta .kicker{
    display: inline; font-size: .58rem; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(246,243,236,.55);
  }
  .home-v2 .dep-card-meta .amount{
    font-family: var(--font-display); font-weight: 700;
    font-size: .88rem; color: var(--rust-soft);
    padding: 0; border: 0;
  }

  /* the route line and the two desktop buttons have no room here — the
     page this card opens carries both in full */
  .home-v2 .dep-card-route,
  .home-v2 .dep-card-actions{ display: none; }

  /* ---- "this one is going" ----
     The breathing rust halo and the repeating shine are defined ONCE, in
     main.css, on .hero-dep — so the effect is identical on a phone and on
     a laptop. All that is needed here is the matching corner radius (the
     card is rounder on a phone) and the border colour, since the mobile
     card replaces the desktop card's 3px pine top edge with a hairline. */
  .home-v2 .hero-dep::after{ border-radius: 18px; }
  .home-v2 .hero-dep .dep-card.is-urgent{ border-color: rgba(232,160,99,.42); }
  .home-v2 .hero-dep .dep-card.is-running{ border-color: var(--pine-line); }

  /* the words */
  .home-v2 .px-hero-copy{ position: relative; z-index: 2; }
  .home-v2 .px-hero-eyebrow{ font-size: .58rem; letter-spacing: .18em; }
  .home-v2 .px-hero h1{
    margin-top: .55rem;
    font-size: clamp(2.15rem, 10.2vw, 2.85rem);
    line-height: .96; letter-spacing: -.04em;
  }
  .home-v2 .px-hero .lede{
    margin-top: .7rem; max-width: none;
    font-size: .86rem; line-height: 1.5;
    color: rgba(246,243,236,.74);
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }

  /* two half-width buttons instead of two stacked full-width ones */
  .home-v2 .px-hero-actions{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .55rem; margin-top: 1.1rem;
  }
  .home-v2 .btne,
  .home-v2 .btnr{
    padding: .9rem .5rem;
    font-size: .68rem; letter-spacing: .05em;
    justify-content: center;
  }
  .home-v2 .px-hero-rating{
    margin-top: .85rem;
    font-size: .7rem; line-height: 1.35;
    color: rgba(246,243,236,.62);
  }
  .home-v2 .px-hero-rating .stars{ font-size: .74rem; letter-spacing: .1em; }

  /* the four numbers, fused to the hero's foot as a frosted ribbon */
  .home-v2 .px-hero-ribbon{
    position: relative; z-index: 2;
    background: rgba(8,17,31,.55);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border-top: 1px solid rgba(246,243,236,.13);
  }
  .home-v2 .px-hero-ribbon .im-cols-4{
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .home-v2 .px-hero-ribbon .stat{
    padding: .65rem .25rem;
    text-align: center;
    border-left: 1px solid rgba(246,243,236,.10);
    border-top: 0; padding-left: .25rem;
  }
  .home-v2 .px-hero-ribbon .stat:first-child{ border-left: 0; }
  .home-v2 .px-hero-ribbon .stat .num{
    font-size: 1.02rem; letter-spacing: -.02em; white-space: nowrap;
    color: var(--rust-soft);
  }
  .home-v2 .px-hero-ribbon .stat .label{
    margin-top: .2rem; max-width: none;
    font-size: .5rem; line-height: 1.25; letter-spacing: .02em;
  }


  /* On a short phone (an iPhone SE is only 568px tall) the hero's words
     push the stat ribbon past the bottom of the screen, where the
     floating nav capsule would sit on top of it. Tightening the type
     pulls the whole hero back inside one screen. Placed here, before the
     landscape rules in section 20b, so those still win when the phone is
     turned sideways. */
  @media (max-height: 640px){
    .home-v2 .px-hero h1{ font-size: clamp(1.85rem, 8.6vw, 2.3rem); }
    .home-v2 .px-hero .lede{
      margin-top: .5rem; font-size: .82rem;
      -webkit-line-clamp: 2; line-clamp: 2;
    }
    .home-v2 .px-hero-actions{ margin-top: .8rem; }
    .home-v2 .px-hero-rating{ margin-top: .6rem; }
    .home-v2 .px-hero-ribbon .stat{ padding-block: .5rem; }
  }


  /* ---------- 7. Marquee + assurances ---------- */
  .marquee{ padding-block: .6rem; }
  .marquee-item{ font-size: .72rem; }

  /* Four promises → a 2×2 block of compact glass tiles. */
  .home-v2 .px-assure{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .55rem;
    padding: 0; border: 0; background: none; box-shadow: none;
  }
  .home-v2 .px-assure-item{
    display: block;
    padding: .85rem .8rem;
    border: 1px solid var(--px-line);
    border-left: 1px solid var(--px-line);
    border-radius: var(--m-r-sm);
    background: var(--surface);
    box-shadow: var(--m-shadow);
  }
  .home-v2 .px-assure-item svg{
    width: 20px; height: 20px; margin-bottom: .5rem;
  }
  .home-v2 .px-assure-item h3{
    font-size: .84rem; line-height: 1.2; letter-spacing: -.01em;
  }
  .home-v2 .px-assure-item p{
    margin-top: .3rem;
    font-size: .72rem; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }


  /* =====================================================================
     8. HOMEPAGE — featured raids
     Three wide editorial rows become three swipeable photo cards: the
     picture fills the card, the words sit on the dark foot of it, and the
     "view route" link becomes a round rust arrow button.
     ===================================================================== */
  .home-v2 .card-expedition.px-route{
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    aspect-ratio: 5 / 6;
    grid-template-columns: none; grid-template-areas: none;
    gap: 0;
    padding: .95rem;
    border-radius: var(--m-r);
    border: 1px solid rgba(11,24,48,.18);
    background: #101f3c;
    box-shadow: var(--m-shadow);
    overflow: hidden;
  }
  .home-v2 .card-expedition.px-route::before{ content: none; }

  .home-v2 .card-expedition.px-route .card-art{
    position: absolute; inset: 0; z-index: 0;
    /* width/height/align-self are all needed: the card is a flex column, and
       the desktop rule's align-self:start would otherwise shrink-wrap this
       absolutely-positioned photo to a fraction of the card instead of
       letting inset:0 stretch it. */
    width: 100%; height: 100%; align-self: stretch;
    aspect-ratio: auto; border-radius: 0;
  }
  .home-v2 .card-expedition.px-route .card-art::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
      180deg,
      rgba(8,17,31,.55) 0%,
      rgba(8,17,31,.10) 30%,
      rgba(8,17,31,.72) 66%,
      rgba(8,17,31,.96) 100%);
  }

  .home-v2 .px-route-idx{
    position: absolute; z-index: 2;
    top: .8rem; left: .95rem;
    grid-area: auto; justify-self: auto;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    color: var(--dark-ink); opacity: 1;
    padding: .22rem .5rem;
    border-radius: 999px;
    background: rgba(8,17,31,.5);
    border: 1px solid rgba(246,243,236,.2);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }

  .home-v2 .px-route-body{
    position: relative; z-index: 2;
    grid-area: auto;
  }
  .home-v2 .card-expedition.px-route .card-tags{ gap: .3rem; }
  .home-v2 .card-expedition.px-route .tag{
    font-size: .6rem; padding: .18rem .5rem; border-radius: 999px;
    color: rgba(246,243,236,.82);
    background: rgba(246,243,236,.10);
    border-color: rgba(246,243,236,.18);
  }
  .home-v2 .card-expedition.px-route .tag.rust{
    color: var(--rust-soft);
    background: rgba(207,98,18,.20);
    border-color: rgba(232,160,99,.5);
  }
  .home-v2 .card-expedition.px-route h3{
    margin-top: .45rem;
    font-size: 1.15rem; line-height: 1.1; letter-spacing: -.025em;
    color: var(--dark-ink);
  }
  .home-v2 .card-expedition.px-route .card-meta{
    margin-top: .3rem;
    gap: .15rem .55rem;
    padding-right: 2.9rem;     /* clear of the round arrow button */
    font-size: .66rem; color: rgba(246,243,236,.6);
  }
  /* the blurb is the first thing to go — it is repeated in full on the
     Expeditions page */
  .home-v2 .card-expedition.px-route .kicker{ display: none; }

  .home-v2 .card-expedition.px-route .card-price{
    position: relative; z-index: 2;
    grid-area: auto; justify-self: auto; align-self: auto;
    margin-top: .55rem; padding-right: 3rem;
    text-align: left;
    font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(246,243,236,.6);
  }
  .home-v2 .card-expedition.px-route .card-price b{
    font-size: 1.3rem; color: var(--dark-ink);
  }

  /* "View Route" → a round arrow button in the corner */
  .home-v2 .card-expedition.px-route .text-link{
    position: absolute; z-index: 3;
    right: .95rem; bottom: .95rem;
    grid-area: auto; justify-self: auto; align-self: auto;
    margin: 0;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 0;
    color: var(--dark);
    background: linear-gradient(140deg, #E8A063, var(--rust));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.4),
      0 6px 16px -6px rgba(207,98,18,.7);
  }
  .home-v2 .card-expedition.px-route .text-link::after{ content: none; }
  .home-v2 .card-expedition.px-route .text-link .arrow{ font-size: 1.05rem; }


  /* =====================================================================
     9. HOMEPAGE — upcoming departures
     Four boarding-pass cards, now swiped rather than scrolled.
     ===================================================================== */
  .home-v2 .departure-item{
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow);
  }
  .home-v2 .departure-item .card-art{ aspect-ratio: 16 / 10; }
  .home-v2 .departure-status{
    top: .65rem; left: .65rem;
    font-size: .58rem; padding: .22rem .55rem;
  }
  .home-v2 .departure-body{ padding: .8rem .9rem 1rem; }
  .home-v2 .departure-date{ font-size: .62rem; }
  .home-v2 .departure-item h4{ font-size: .98rem; line-height: 1.15; }
  .home-v2 .departure-item .meta{ font-size: .7rem; margin-top: .25rem; }
  .home-v2 .px-pass-foot{ margin-top: .7rem; padding-top: .7rem; }
  .home-v2 .departure-item .amount{ font-size: 1.15rem; }
  .home-v2 .departure-cta{
    margin-top: .6rem; width: 100%;
    padding: .7rem 1rem; font-size: .68rem;
  }
  .home-v2 .departures-cta,
  .home-v2 .faq-cta{ flex-direction: column; align-items: stretch; }


  /* =====================================================================
     10. HOMEPAGE — build your raid
     The two-column form + sticky estimate stack. The per-step hint lines
     are dropped (four paragraphs of small print cost most of a screen),
     the step numerals shrink into the labels, and the estimate card keeps
     only the total plus the WhatsApp button.
     ===================================================================== */
  /* ONE DARK BOOKING SHEET.
     On a laptop this is a white form card sitting beside a navy estimate
     card. Stacked on a phone that reads as two competing panels with a
     seam between them, so here the WRAPPER becomes the panel: both
     children go transparent and fuse into a single dark sheet — form on
     top, running total below a hairline — which is how a booking flow
     looks in an app, and saves a card's worth of padding and shadow.
     Everything inside therefore has to be re-dressed for a dark ground. */
  .home-v2 .px-build{
    display: block;
    /* One number for the sheet's inset, because the running total below
       has to bleed back out by exactly this much. They used to be two
       hardcoded 1rem values that had to be changed in lockstep. */
    --m-build-pad: .9rem;
    padding: var(--m-build-pad);
    border-radius: var(--m-r);
    color: var(--dark-ink);
    background: linear-gradient(168deg, var(--px-dark-2), var(--dark));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
      0 2px 6px rgba(11,24,48,.18),
      0 30px 60px -30px rgba(11,24,48,.65);
    overflow: hidden;
  }
  .home-v2 .px-build-form{
    padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }

  /* ---- the four steps, on dark ---- */
  .home-v2 .px-step{ border-bottom-color: rgba(255,255,255,.10); }
  .home-v2 .px-step .form-field label{ color: rgba(246,243,236,.62); }
  .home-v2 .px-build .form-field input,
  .home-v2 .px-build .form-field select{
    background-color: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.16);
    color: var(--dark-ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    /* tells the browser to draw the date field's own calendar button and
       picker in dark mode — without it that icon renders near-black and
       vanishes into the panel */
    color-scheme: dark;
    /* Tighter than the site's other forms on purpose: this sheet stacks
       five controls plus a running total, and the sitewide .72rem made it
       taller than the screen. The 16px text is untouched — shrink that and
       iOS zooms the page in the moment a field is tapped. */
    padding-block: .6rem;
  }
  .home-v2 .px-build .form-field input:focus,
  .home-v2 .px-build .form-field select:focus{
    border-color: var(--gold-line);
    outline: none;
  }
  /* Route and package names are long and the field is only a phone wide, so
     the label would otherwise run underneath the chevron. A wider right
     gutter plus an ellipsis trims it cleanly instead — the full text is
     still there the moment the picker opens. (Font stays at 16px: any
     smaller and iOS zooms the page in when the field is tapped.) */
  .home-v2 .px-build .form-field select{
    padding-right: 2.9rem;
    text-overflow: ellipsis;
  }
  /* ---- step spacing ----
     The numbered circle used to sit in its own left-hand column. On a
     360px screen that column plus its gutter cost about 38px of the only
     thing this form is short of — WIDTH — and it showed: every route and
     motorcycle name was truncated to "Khardung La Traverse · $6,…" before
     the picker was even opened. The number is decoration, so it comes out
     of the flow and sits as a quiet marker at the end of the label line,
     handing the full width back to the control. */
  .home-v2 .px-step{
    position: relative;
    display: block;
    padding-bottom: .6rem; margin-bottom: .6rem;
  }
  .home-v2 .px-step-n{
    position: absolute; top: 0; right: 0;
    width: auto; height: auto; margin: 0;
    background: none; border: 0;
    font-size: .58rem; letter-spacing: .1em;
    color: rgba(246,243,236,.36);
  }
  .home-v2 .px-step-hint{ display: none; }
  .home-v2 .px-step .form-field label{
    font-size: .62rem; margin-bottom: .28rem;
    padding-right: 1.8rem;         /* clear of the 01 / 02 marker */
  }
  /* "2" never needs half the row — the date does. And the date is the one
     control on this sheet that will not shrink: WebKit hands it an intrinsic
     width ("dd/mm/yyyy" plus the calendar button) that width:100% does not
     override, so on a 360px screen it ran past its half of the row and the
     sheet's overflow:hidden sliced the year off. Riders is cut back to the
     width of two digits, both fields lose some inner gutter, and the date's
     own minimum is released so it takes the width it is handed. */
  .home-v2 .px-step .im-field-row{
    display: grid;
    /* Riders is capped at 4.4rem but allowed to give ground: if the native
       date control's own minimum is wider than the track it was handed —
       which is what iOS does, and what pushed the field out through the
       sheet's edge — the second track takes the width off the first instead
       of the date spilling out of the panel. 2.6rem is the floor, still wide
       enough for "12". */
    grid-template-columns: minmax(2.6rem, 4.4rem) minmax(min-content, 1fr);
    gap: .5rem;
  }
  .home-v2 .px-step .im-field-row .form-field{ min-width: 0; }
  .home-v2 .px-build .form-field input[type="number"]{ padding-inline: .55rem; }
  .home-v2 .px-build .form-field input[type="date"]{
    -webkit-appearance: none; appearance: none;
    /* an inline-block date field is sized from its content by WebKit; as a
       block it takes the width it is given */
    display: block;
    box-sizing: border-box;
    width: 100%; min-width: 0; max-width: 100%;
    padding-inline: .55rem;
  }
  /* the inner editor carries its own padding on iOS, which is part of what
     makes the control measure wider than the box around it */
  .home-v2 .px-build input[type="date"]::-webkit-datetime-edit{ padding: 0; }
  /* iOS draws the value in its own inline box which keeps default margins and
     centres itself inside the field; pin it left at zero margin so no part of
     the date hangs over the edge, and let the calendar button sit tight
     against it rather than claiming a column of its own. */
  .home-v2 .px-build input[type="date"]::-webkit-date-and-time-value{
    text-align: left; margin: 0; min-width: 0;
  }
  .home-v2 .px-build input[type="date"]::-webkit-calendar-picker-indicator{
    margin: 0 0 0 .15rem; padding: 0; flex: none;
  }

  /* ---- the running total, fused to the foot of the same sheet ---- */
  .home-v2 .px-build-summary{
    position: static;
    /* bleed back out to the sheet's own edges — see --m-build-pad above */
    margin: .85rem calc(var(--m-build-pad) * -1) calc(var(--m-build-pad) * -1);
    padding: .85rem var(--m-build-pad) 1rem;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.14);
    border-radius: 0;
    background: rgba(0,0,0,.18);    /* a shade deeper than the form above */
    box-shadow: none;
  }
  .home-v2 .px-build-summary::before{ content: none; }   /* the desktop glow */
  .home-v2 .px-sum-dates{ margin-top: .6rem; padding: .55rem .7rem; }
  .home-v2 .px-sum-dates .booking-enddate{ font-size: .88rem; }
  .home-v2 .booking-line{ padding: .38rem 0; font-size: .78rem; }
  .home-v2 .booking-line:first-of-type{ margin-top: .55rem; }
  .home-v2 .booking-total{
    margin-top: .6rem; padding-top: .6rem; font-size: .82rem;
  }
  .home-v2 .booking-total span:last-child{ font-size: 1.65rem; }
  .home-v2 .px-build-summary .im-btn-primary{ margin-top: 1rem; }
  .home-v2 .px-build-summary .form-note{ margin-top: .6rem; font-size: .68rem; }

  /* ---- one size down ----
     Four pickers, a date and a running total make this the tallest block on
     the homepage, and on a phone it read as a wall. Heading, sheet inset and
     step rhythm all come in a notch so the sheet lands closer to a single
     screen. Control text stays at 16px throughout: anything smaller and iOS
     zooms the page the moment a field is tapped. */
  #build-your-raid.section{ padding-block: 1.9rem; }
  #build-your-raid .px-head{ margin-bottom: .75rem; }
  #build-your-raid .px-head .display-2{ font-size: clamp(1.4rem, 6.4vw, 1.75rem); }
  #build-your-raid .px-head .lede{ font-size: .82rem; margin-top: .45rem; }
  .home-v2 .px-build{ --m-build-pad: .8rem; }
  /* One height for every control, set on the box instead of left to the text
     inside it: the native date field sizes itself from its own inner editor
     and came out about 2px taller than the pickers above it, which showed as
     a crooked last row. padding-block goes to zero and the height does the
     work, so date, number and select all land on the same line. */
  .home-v2 .px-build .form-field input,
  .home-v2 .px-build .form-field select{ height: 2.7rem; padding-block: 0; }
  .home-v2 .px-step{ padding-bottom: .5rem; margin-bottom: .5rem; }
  .home-v2 .px-step .form-field label{ font-size: .6rem; margin-bottom: .24rem; }
  .home-v2 .px-build-summary{ margin-top: .7rem; padding-bottom: .85rem; }
  .home-v2 .px-sum-dates{ margin-top: .5rem; padding: .5rem .65rem; }
  .home-v2 .px-sum-dates .booking-enddate{ font-size: .82rem; }
  .home-v2 .booking-line{ padding: .34rem 0; font-size: .74rem; }
  .home-v2 .booking-total{ margin-top: .5rem; padding-top: .5rem; }
  .home-v2 .booking-total span:last-child{ font-size: 1.5rem; }
  .home-v2 .px-build-summary .im-btn-primary{ margin-top: .8rem; }

  /* Small phones (iPhone SE / mini, and anything at 360px) — the sheet
     gives back a little more of its inset so the option names inside the
     pickers get the width instead of the padding. */
  @media (max-width: 380px){
    .home-v2 .px-build{ --m-build-pad: .7rem; }
    .home-v2 .px-step{ padding-bottom: .5rem; margin-bottom: .5rem; }
    .home-v2 .px-step .form-field label{ font-size: .6rem; padding-right: 1.6rem; }
    .home-v2 .px-step .im-field-row{ grid-template-columns: 3.9rem minmax(0, 1fr); }
    .home-v2 .px-sum-dates{ padding: .5rem .6rem; }
    .home-v2 .booking-line{ padding: .34rem 0; }
    .home-v2 .booking-total span:last-child{ font-size: 1.4rem; }
  }


  /* =====================================================================
     11. HOMEPAGE — the fleet
     Three stacked cards → three swipeable photo cards, same treatment as
     the featured raids so the two sections rhyme.
     ===================================================================== */
  .home-v2 .fleet-card{
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    aspect-ratio: 5 / 6;
    padding: .95rem;
    border-radius: var(--m-r);
    border: 1px solid rgba(11,24,48,.18);
    background: #101f3c;
    box-shadow: var(--m-shadow);
    overflow: hidden;
  }
  .home-v2 .fleet-card .card-art{
    position: absolute; inset: 0; z-index: 0;
    aspect-ratio: auto; border-radius: 0;
  }
  .home-v2 .fleet-card .card-art::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
      180deg,
      rgba(8,17,31,.30) 0%,
      rgba(8,17,31,.08) 26%,
      rgba(8,17,31,.74) 62%,
      rgba(8,17,31,.96) 100%);
  }
  .home-v2 .fleet-tag{
    position: relative; z-index: 2;
    align-self: flex-start;
    margin: 0 0 auto;
    font-size: .6rem; padding: .22rem .55rem;
    color: var(--rust-soft);
    background: rgba(207,98,18,.2);
    border-color: rgba(232,160,99,.5);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .home-v2 .fleet-card h3{
    position: relative; z-index: 2;
    padding: 0;
    font-size: 1.08rem; line-height: 1.12;
    color: var(--dark-ink);
  }
  .home-v2 .fleet-card p{
    position: relative; z-index: 2;
    padding: 0; margin-top: .35rem;
    font-size: .76rem; line-height: 1.45;
    color: rgba(246,243,236,.72);
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }


  /* =====================================================================
     12. HOMEPAGE — why indian moto adventures
     The six-tile bento keeps its uneven rhythm but at phone scale: a wide
     photo tile on top, four half-width tiles, one wide tile to close.
     ===================================================================== */
  .home-v2 .px-bento{
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
  .home-v2 .px-tile{
    padding: .9rem .85rem;
    border-radius: var(--m-r-sm);
    box-shadow: var(--m-shadow);
  }
  .home-v2 .px-tile h3{ font-size: .92rem; line-height: 1.15; max-width: none; }
  .home-v2 .px-tile p{
    margin-top: .3rem;
    font-size: .74rem; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .home-v2 .px-tile .px-chip{ font-size: .58rem; padding: .2rem .5rem; }
  .home-v2 .px-tile p + .px-chip{ margin-top: .6rem; }
  .home-v2 .px-tile-n{
    font-size: 2.6rem; bottom: -.35rem; right: .6rem;
  }
  .home-v2 .px-tile-photo,
  .home-v2 .px-tile-wide{ grid-column: span 2; }
  .home-v2 .px-tile-photo{
    min-height: 0; aspect-ratio: 16 / 11;
    padding: 1rem;
  }
  /* a brighter photograph needs a heavier wash under the words than the
     desktop tile does, because the tile is half the size here */
  .home-v2 .px-tile-photo::after{
    background: linear-gradient(180deg, rgba(8,17,31,.20) 0%, rgba(8,17,31,.55) 45%, rgba(8,17,31,.95) 100%);
  }
  .home-v2 .px-tile-photo h3{ font-size: 1.12rem; max-width: none; }
  .home-v2 .px-tile-photo p{ -webkit-line-clamp: 2; line-clamp: 2; max-width: none; }


  /* =====================================================================
     13. HOMEPAGE — reviews
     The sticky heading + stacked quotes become a compact head with the
     score on one line, then a swipeable row of quote cards.
     ===================================================================== */
  .home-v2 .px-voices{ display: block; }
  .home-v2 .px-voices-head{ position: static; margin-bottom: 1.1rem; }
  .home-v2 .px-voices-head .display-2{ margin-top: .6rem; }
  .home-v2 .px-score{
    margin-top: 1rem; padding-top: .9rem;
    gap: .8rem; align-items: center;
  }
  .home-v2 .px-score-n{ font-size: 2.4rem; }
  .home-v2 .px-score .review-summary{ font-size: .74rem; }
  .home-v2 .px-score .stars{ font-size: .85rem; letter-spacing: .14em; }

  .home-v2 .px-quotes > *{ flex-basis: 84%; max-width: 330px; }
  .home-v2 .testimonial-strip .testi{
    display: flex; flex-direction: column;
    padding: 1rem;
    border-radius: var(--m-r);
    border-left-width: 3px;
  }
  .home-v2 .testi blockquote{
    margin-top: .6rem;
    font-size: .88rem; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
  }
  .home-v2 .testi figcaption{
    margin-top: auto; padding-top: .8rem; gap: .6rem;
  }
  .home-v2 .testi-avatar{ width: 32px; height: 32px; font-size: .68rem; }
  .home-v2 .testi cite{ font-size: .82rem; }
  .home-v2 .testi .review-tag{ font-size: .66rem; }


  /* =====================================================================
     14. HOMEPAGE — FAQ + closing CTA
     ===================================================================== */
  .home-v2 .px-faq{ display: block; }
  .home-v2 .px-faq-head{ position: static; }
  .home-v2 .px-faq-head .display-2{ margin-top: .6rem !important; }
  .home-v2 .px-faq-card{
    margin-top: 1rem; padding: .9rem 1rem;
    border-radius: var(--m-r-sm);
    box-shadow: var(--m-shadow);
  }
  .home-v2 .px-faq-card h3{ font-size: .92rem; }
  .home-v2 .px-faq-card p{ display: none; }
  .home-v2 .px-faq-actions{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .5rem; margin-top: .8rem;
  }
  .home-v2 .px-faq-actions .im-btn{ padding: .7rem .5rem; font-size: .68rem; }

  .home-v2 .faq-list{ margin-top: 1.1rem; }
  .home-v2 .faq-question{
    padding: .95rem .1rem; gap: .8rem;
    font-size: .9rem; line-height: 1.3;
  }
  .home-v2 .faq-question .plus{ width: 24px; height: 24px; font-size: 1rem; }
  .home-v2 .faq-answer p{
    padding: 0 1.8rem .95rem .1rem;
    font-size: .85rem; line-height: 1.6;
  }

  .home-v2 .px-cta{ padding-block: 2.8rem; }
  .home-v2 .px-cta h2{ margin-top: .7rem; max-width: none; }
  .home-v2 .px-cta p{ margin-top: .6rem; font-size: .86rem; }
  .home-v2 .px-cta-actions{
    display: grid; grid-template-columns: 1fr;
    gap: .55rem; margin-top: 1.2rem;
  }


  /* =====================================================================
     15. INNER PAGES — page hero + CTA band
     The tall cream banner at the top of About / Expeditions / Gallery /
     Contact shrinks to just the eyebrow, the title and two lines of
     intro — enough to orient, not enough to scroll past.
     ===================================================================== */
  .page-hero{
    padding-top: calc(var(--m-top-h) + 1.5rem);
    padding-bottom: 1.4rem;
  }
  .page-hero::before{ background-size: 300px; opacity: .45; }
  .page-hero .eyebrow{ margin-bottom: .6rem; }
  .page-hero .lede{
    margin-top: .65rem; max-width: none;
    font-size: .88rem; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }

  .cta-band{ padding-block: 2.6rem; }
  .cta-band h2{ max-width: none; }
  .cta-band p{ margin-top: .7rem; font-size: .88rem; }
  .cta-band .im-btn-primary{ margin-top: 1.2rem; width: 100%; }


  /* =====================================================================
     16. INNER PAGES — expeditions
     Six full-height editorial rows are the single longest thing on the
     site. Each becomes one card: photo, title, three lines of blurb, a
     2×2 fact grid, a slim elevation strip, the collapsed itinerary and a
     price/enquire foot.
     ===================================================================== */
  .exp-row,
  .exp-row.reverse{
    display: block;
    direction: ltr;
    padding-block: 1.3rem;
  }
  .exp-row .card-art{
    aspect-ratio: 16 / 9; min-height: 0; height: auto;
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow);
  }
  .exp-row > div:last-child{ margin-top: .85rem; }
  .exp-index{ font-size: .64rem; margin-bottom: .4rem; }
  .exp-row h3{ font-size: 1.4rem; letter-spacing: -.03em; }
  .exp-desc{
    margin-top: .5rem; max-width: none;
    font-size: .86rem; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }

  .exp-facts{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .55rem .9rem;
    margin-top: .75rem; padding-top: .75rem;
  }
  .exp-fact .k{ font-size: .56rem; }
  .exp-fact .v{ font-size: .9rem; margin-top: .1rem; }

  /* The elevation profile keeps its place in the design, but js/mobile.js
     moves it inside the "Itinerary & Elevation" <details> — six charts
     permanently open is a screen and a half of scrolling for a graphic
     most readers glance at once. These rules dress it for its new home:
     no rule above it, and breathing room before the day list. */
  .exp-altitude{ margin-top: .75rem; padding-top: .75rem; }
  .exp-altitude-label{ font-size: .56rem; margin-bottom: .2rem; }
  .exp-altitude svg{ height: 74px; }
  .alt-peak-label{ font-size: 16px; }
  .itinerary .exp-altitude{
    margin: .9rem 0 0; padding: 0 .2rem;
    border-top: 0;
  }

  .itinerary{ margin-top: .75rem; }
  .itinerary-toggle{
    padding: .75rem .9rem;
    border-radius: var(--m-r-sm);
    font-size: .8rem;
  }
  .itinerary-days{ border-radius: var(--m-r-sm); margin-top: .6rem; }
  .itinerary-day{
    grid-template-columns: 1fr auto;
    gap: .2rem .7rem;
    padding: .65rem .8rem;
    font-size: .8rem;
  }
  .itinerary-day .d{
    grid-column: 1; grid-row: 1;
    font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rust-text);
  }
  .itinerary-day .t{ grid-column: 1 / -1; grid-row: 2; line-height: 1.45; }
  .itinerary-day .a{ grid-column: 2; grid-row: 1; font-size: .68rem; }

  .exp-price{
    margin-top: .85rem; padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--m-r-sm);
    background: var(--surface);
    flex-wrap: nowrap;
  }
  .exp-price .from{ font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
  .exp-price .amount{ font-size: 1.35rem; }
  .exp-price .im-btn{ flex: none; }


  /* =====================================================================
     17. INNER PAGES — gallery
     The archive mosaic drops to two even columns with a full-width lead
     tile. Touch has no hover, so captions and the play icons are always
     visible rather than hover-revealed.
     ===================================================================== */
  .gal-archive{ padding: 1.15rem 1rem 1.3rem; border-radius: 16px; }
  .gal-ghost{ font-size: 3rem; top: .35rem; right: .8rem; }
  .gal-archive-title{ font-size: 1.5rem; }
  .gal-archive-kicker{ font-size: .9rem; }

  .mosaic-page.is-active{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 128px;
    gap: 8px;
  }
  /* (which tile spans which column is already handled by the two-column
     rule in main.css — this is just the phone sizing) */
  .mosaic-tile{ border-radius: 12px; }
  .mosaic-cap{ padding: .6rem .6rem .55rem; }
  .mosaic-cap-title{ font-size: .74rem; }
  .mosaic-cap-sub{ font-size: .55rem; letter-spacing: .07em; }
  .mosaic-num{ font-size: 1.05rem; top: .35rem; right: .5rem; }

  /* pager: number + arrows on one line, dots dropped (the arrows and a
     swipe are enough, and dots get cramped on a narrow screen) */
  .mosaic-pager{ gap: .8rem; margin-top: 1.1rem; }
  .mosaic-now{ font-size: 1.7rem; }
  .mosaic-arrow{ width: 44px; height: 44px; }
  .mosaic-arrows{ margin-left: auto; }
  .mosaic-dots{ display: none; }

  .lightbox-inner{ padding: 3.2rem .6rem calc(var(--m-tab-space) + 1rem); }
  .lightbox-nav{ width: 42px; height: 42px; }


  /* =====================================================================
     18. INNER PAGES — contact
     One column, 46px controls, hints dropped. The three reassurance chips
     become a single scrollable line.
     ===================================================================== */
  .contact-layout{ display: block; }
  .enquiry-panel{
    padding: 1.1rem 1rem 1.3rem;
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow);
  }
  .enquiry-head .display-3{ margin-top: .5rem; font-size: 1.35rem; }
  .enquiry-head .kicker{
    margin-top: .5rem; max-width: none; font-size: .84rem;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
  .assurance-row{
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* bleeds to the panel's edges and fades out there, so it is obvious
       the third chip is a swipe away rather than clipped by accident */
    margin: 1rem -1rem 1.1rem;
    padding: 0 1rem 1rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
  }
  .assurance-row::-webkit-scrollbar{ display: none; }
  .assurance-row li{ flex: none; font-size: .68rem; padding: .32rem .65rem; }

  .form-field{ margin-bottom: .85rem; }
  .form-field label{ font-size: .64rem; margin-bottom: .3rem; }
  .form-field input,
  .form-field select,
  .form-field textarea{
    padding: .72rem .8rem;
    font-size: 16px;              /* anything smaller makes iOS zoom in */
    border-radius: 10px;
  }
  .form-field textarea{ min-height: 92px; }
  .field-hint{ display: none; }
  .im-field-row{ display: grid; grid-template-columns: 1fr; gap: 0; }
  .form-actions{ display: grid; gap: .6rem; margin-top: .3rem; }
  .form-actions .im-btn{ width: 100%; }
  .form-privacy{ max-width: none; font-size: .7rem; }
  /* the side column of contact details sits below the form */
  .contact-layout > *:last-child{ margin-top: 1rem; }


  /* =====================================================================
     18b. INNER PAGES — next departure (raid.html)
     The page the homepage card opens. Everything stacks; the six-across
     fact strip becomes 2×3, the two "what's included" columns stack, and
     the four packing groups become one column of cards.
     ===================================================================== */
  .raid-hero{
    padding-top: calc(var(--m-top-h) + 1.6rem);
    padding-bottom: 1.5rem;
  }
  /* The headline is far bigger relative to the photo here than on a
     laptop, so it covers the busiest part of the picture — the wash has to
     be heavier to keep the cream type off a bright pass sign. */
  .raid-hero-bg::after{
    background:
      linear-gradient(180deg, rgba(11,24,48,.80) 0%, rgba(11,24,48,.80) 45%, rgba(11,24,48,.96) 100%),
      radial-gradient(80% 55% at 10% 0%, rgba(207,98,18,.20), transparent 62%);
  }
  .raid-hero-inner{ max-width: none; }
  .raid-status{ margin-top: .8rem; font-size: .62rem; padding: .32rem .7rem; }
  .raid-hero h1{ margin-top: .7rem; }
  .raid-route{ margin-top: .55rem; font-size: .88rem; }

  .raid-seats{ margin-top: 1.1rem; padding: .8rem .9rem; border-radius: var(--m-r-sm); }
  .raid-seats-head{
    flex-direction: column; align-items: flex-start; gap: .15rem;
    margin-bottom: .5rem; font-size: .85rem;
  }
  .raid-seats-date{ font-size: .74rem; }
  /* the blocks get a touch shorter and closer together, so twelve of them
     still read as separate seats across a phone's width */
  .raid-seatbar{ height: 9px; gap: 3px; }
  .raid-seat{ border-radius: 2px; }
  .raid-seat-note{ margin-top: .5rem; font-size: .7rem; }
  .raid-hero-actions{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .55rem; margin-top: 1.1rem;
  }
  .raid-hero-actions .im-btn{ padding: .85rem .5rem; font-size: .7rem; }

  .raid-facts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--m-r-sm);
  }
  .raid-fact{ padding: .7rem .8rem; }
  .raid-fact .k{ font-size: .56rem; }
  .raid-fact .v{ font-size: .95rem; margin-top: .15rem; }

  .raid-split{ display: block; }
  .raid-intro{ margin-top: .7rem; font-size: .9rem; }
  .raid-split .kicker{ margin-top: .7rem; }
  .raid-split .text-link{ margin-top: 1rem; font-size: .82rem; }
  .raid-join{
    margin-top: 1.4rem; padding: 1rem;
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow);
  }
  .raid-join h3{ font-size: 1rem; }
  .raid-join-list{ margin-top: .9rem; gap: .8rem; }
  .raid-join-list dt{ font-size: .58rem; }
  .raid-join-list dd{ font-size: .85rem; line-height: 1.5; }

  .raid-incl{ grid-template-columns: 1fr; gap: 1.4rem; }
  .raid-incl-col h3{ font-size: .95rem; padding-bottom: .6rem; }
  .raid-list li{ padding: .55rem 0 .55rem 1.7rem; font-size: .85rem; line-height: 1.45; }
  .raid-list li::before{ top: .6rem; width: 1.05rem; height: 1.05rem; font-size: .64rem; }

  .raid-pack{ grid-template-columns: 1fr; gap: .7rem; }
  .raid-pack-group{
    padding: .95rem 1rem;
    border-radius: var(--m-r-sm);
    box-shadow: var(--m-shadow);
  }
  .raid-pack-group h3{ font-size: .9rem; padding-bottom: .55rem; margin-bottom: .6rem; }
  .raid-pack-group ul{ gap: .45rem; }
  .raid-pack-group li{ font-size: .82rem; line-height: 1.45; padding-left: 1.3rem; }

  .raid-notes{ padding-left: .9rem; }
  .raid-notes li{ padding: .45rem 0; font-size: .85rem; line-height: 1.5; }


  /* =====================================================================
     19. INNER PAGES — about
     ===================================================================== */
  .credential-strip{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .8rem 1rem;
    margin-top: 1.1rem; padding-top: 1rem;
  }
  .cred-value{ font-size: 1.5rem; }
  .cred-label{ font-size: .62rem; }

  .story-split{ display: block; }
  .story-figure{ margin-bottom: .9rem; }
  .story-figure img{ aspect-ratio: 16 / 10; border-radius: var(--m-r); }
  .story-copy p{ font-size: .88rem; line-height: 1.55; }

  .manifesto{ padding-block: 2.2rem; }
  .manifesto::before{ font-size: 8rem; }
  .manifesto blockquote{ font-size: 1.3rem; max-width: none; }
  .manifesto cite{ margin-top: 1rem; font-size: .64rem; }

  .principle-grid{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem .9rem;
  }
  .principle{ padding-top: .8rem; }
  .principle-num{ font-size: 1.7rem; }
  .principle h4{ margin-top: .5rem; font-size: .95rem; }
  .principle p{
    margin-top: .35rem; font-size: .78rem; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
  }

  .rail-timeline{ gap: .85rem; padding-left: 1.5rem; }
  .rail-item{ grid-template-columns: 1fr; gap: .15rem; }
  .rail-item::before{ left: -1.5rem; width: 11px; height: 11px; border-width: 2.5px; }
  .rail-year{ font-size: .9rem; }
  .rail-body{ font-size: .82rem; line-height: 1.45; }
  .rail-body h4{ font-size: 1rem; }

  /* the crew becomes a swipeable row (see the rail rule in section 5) */
  .crew-card{
    padding: 1rem;
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow);
  }
  .crew-monogram,
  .crew-photo{ width: 52px; height: 52px; margin-bottom: .8rem; }
  .crew-card h4{ font-size: 1rem; }
  .crew-role{ font-size: .62rem; }
  .crew-quote{
    margin-top: .6rem; font-size: .82rem; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
  }
  .crew-facts{ gap: 1rem; padding-top: .9rem; font-size: .74rem; }


  /* =====================================================================
     20. Footer
     With every page one tap away in the bottom bar, the four-column
     footer has no navigation job left to do. It collapses to a signature
     block: mark, one line, the newsletter, contact details, copyright.
     914px of scrolling becomes about 300.
     ===================================================================== */
  .site-footer{ padding-block: 1.5rem .9rem; }
  .footer-grid{
    display: block;
    padding-bottom: .9rem;
    text-align: center;
  }
  .footer-brand{ margin-bottom: .9rem; }
  .footer-logo{ width: 42px; height: 42px; margin: 0 auto .5rem; }
  .footer-brand .logo-word{
    display: block;
    font-family: var(--font-display);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
  }
  .footer-brand p{
    margin: .35rem auto 0; max-width: 30ch;
    font-size: .76rem; line-height: 1.4;
  }

  /* The "Explore" column is a duplicate of the bottom tab bar, so it loses
     its heading and lays out as one wrapped line of links. */
  .footer-col h4{
    font-size: .58rem; margin-bottom: .45rem; letter-spacing: .14em;
  }
  .footer-grid .footer-col ul{
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .3rem .85rem;
    font-size: .78rem;
  }
  .footer-col address{
    font-size: .78rem; line-height: 1.5;
  }
  .footer-col + .footer-col{ margin-top: .85rem; }

  /* the newsletter needs its field, not its sales pitch */
  .footer-newsletter p{ display: none; }
  .newsletter-form{
    margin: 0 auto; max-width: 320px;
    border-radius: 999px;
  }
  .newsletter-form input{ padding: .55rem .95rem; font-size: 16px; }
  .newsletter-form button{ padding: .55rem 1.1rem; }

  .footer-bottom{
    justify-content: center; text-align: center;
    gap: .35rem 1.1rem;
    padding-top: .85rem;
    font-size: .68rem;
  }
  .footer-social{ gap: 1rem; }


  /* ---------- 20b. Phone held sideways ----------
     A landscape phone is barely 360px tall. A full-screen hero there is
     mostly wasted, and the stat ribbon would be pushed off the bottom, so
     the hero drops its minimum height and sizes to its content instead. */
  @media (max-height: 520px){
    .home-v2 .px-hero{ min-height: 0; }
    .home-v2 .px-hero-grid{ padding-top: calc(var(--m-top-h) + 34px); padding-bottom: 1rem; }
    .home-v2 .px-hero h1{ font-size: 2rem; }
    .home-v2 .px-hero .lede{ -webkit-line-clamp: 2; line-clamp: 2; }
  }
  /* Below 430px tall, main.css drops the departure pill entirely — so the
     space this reserved for it goes back to the photograph. */
  @media (max-height: 430px){
    .home-v2 .px-hero-grid{ padding-top: calc(var(--m-top-h) + 12px); }
  }


  /* ---------- 21. Motion / accessibility ---------- */
  /* Hover effects never fire on touch but their transitions still cost
     paint work while swiping a rail. */
  .home-v2 .card-expedition.px-route:hover,
  .home-v2 .fleet-card:hover,
  .home-v2 .px-tile:hover,
  .home-v2 .departure-item:hover,
  .home-v2 .testimonial-strip .testi:hover,
  .crew-card:hover{ transform: none; }

  /* (The urgency pulse is switched off for prefers-reduced-motion in
     main.css, alongside the rest of the departure card's animations —
     there is nothing phone-specific left to turn off here.) */

  /* Any card inside a horizontal rail is scrolled sideways into view, not
     down — so its reveal transition is disabled and it simply shows. */
  .home-v2 .px-routes [data-reveal],
  .home-v2 .departures-grid [data-reveal],
  .home-v2 .px-fleet [data-reveal],
  .home-v2 .px-quotes [data-reveal],
  .crew-grid [data-reveal]{ transition-delay: 0s !important; }


  /* =====================================================================
     22. "Where are you riding in from?" panel
     A corner card on a laptop becomes a bottom sheet here — but one that
     stops ABOVE the tab bar and covers only the foot of the screen. That
     is the whole point: Google's mobile guidance penalises pop-ups that
     bury the content someone arrived on from a search result, and a sheet
     this size leaves the page readable behind it. Do not make it taller.
     ===================================================================== */
  .aud-prompt{
    left: var(--m-gutter); right: var(--m-gutter);
    bottom: calc(var(--m-tab-space) + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
  .aud-card{
    padding: 1.1rem 1.15rem 1.05rem;
    border-radius: var(--m-r);
  }
  .aud-title{ font-size: 1.08rem; }
  .aud-body{
    margin-top: .45rem; font-size: .8rem; line-height: 1.5;
    /* two lines is plenty on a phone — the buttons are the point */
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
  .aud-actions{ margin-top: .85rem; gap: .45rem; }
  .aud-actions .im-btn{ padding: .6rem .5rem; font-size: .66rem; }
  .aud-later{ margin-top: .5rem; font-size: .7rem; }

  /* ---- gate mode on a phone ----
     Undoes the bottom-sheet placement above: the gate is centred and covers
     the screen, including the tab bar, so there is genuinely no way past it.
     The two answers stack, because side by side at this width the labels
     shrink to about 10px. */
  .aud-prompt.is-required{
    left: 0; right: 0; bottom: 0;
    padding: var(--m-gutter);
  }
  .aud-prompt.is-required .aud-card{
    padding: 1.5rem 1.25rem 1.4rem;
    border-radius: var(--m-r);
  }
  .aud-prompt.is-required .aud-title{ font-size: 1.32rem; }
  .aud-prompt.is-required .aud-body{
    margin-top: .6rem; font-size: .85rem;
    -webkit-line-clamp: none; line-clamp: none;   /* nothing else to read — show it all */
  }
  .aud-prompt.is-required .aud-actions{
    grid-template-columns: 1fr; gap: .55rem; margin-top: 1.25rem;
  }
  .aud-prompt.is-required .aud-actions .im-btn{
    padding: .8rem .6rem; font-size: .72rem;
  }
}

/* -------------------------------------------------------------------------
   The bottom tab bar and the top-bar "Enquire" pill are phone-only pieces
   of furniture, so they are hidden everywhere else. This rule sits OUTSIDE
   the media query on purpose — it is what stops them appearing on a laptop.
   ------------------------------------------------------------------------- */
@media (min-width: 769px){
  .m-tabbar,
  .m-enquire{ display: none !important; }
}