/* ==========================================================================
   IMxplorer: mobile layer (< 700px)
   --------------------------------------------------------------------------
   Loaded after styles.css (and atlas.css on the hub). Every rule in this file
   sits inside the single max-width query below, so tablet and desktop render
   byte-identical with or without it. Spec: docs/mobile-redesign.md.

   One grid for every phone page:
     outer margin  20px (--gutter)          4 columns, 16px column gap
     section       48px top and bottom      dark bands 56px
     type          display 40 / h1 32 / h2 28 / h3 20 / lede 18 / body 17
                   small 15 / caption 13 (nothing readable below 13px)
     targets       44px minimum, primary buttons 48px
   ========================================================================== */

@media (max-width: 699.98px) {

  /* ---- 1. Tokens: the mobile grid ---------------------------------------- */
  :root {
    --gutter: 20px;
    --m-gap: 16px;
    --m-card-pad: 20px;
    --section-y: 48px;
    --section-y-dark: 56px;

    --space-2xs: 0.25rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;

    --text-display: 2.5rem;
    --text-h1: 2rem;
    --text-h2: 1.75rem;
    --text-h3: 1.25rem;
    --text-body-lg: 1.125rem;
    --text-body: 1.0625rem;
    --text-small: 0.9375rem;
    --text-caption: 0.8125rem;

    --tap-min: 44px;
    --tap-primary: 48px;
  }

  /* ---- 2. Global chrome: header, tab bar, cookie banner, safe areas ------ */

  /* Fixed bars pad with the device insets (viewport-fit=cover is on every
     page). --header-height feeds every top offset on the site, so the inset
     rides along with it and nothing slides under a notch. */
  :root {
    --header-height: calc(56px + env(safe-area-inset-top, 0px));
    --tabbar-h: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  .site-header,
  .site-header[data-header-morph] {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .mobile-menu-head {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .site-header .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  body {
    padding-bottom: var(--tabbar-h);
  }

  .tabbar-label {
    font-size: var(--text-caption);
    letter-spacing: 0;
  }

  /* Cookie banner: a compact strip that rests on the tab bar instead of
     covering it, text on top, Reject / Accept side by side at 44px. It sits
     one layer under the tab bar so the raised Plan button overlaps it whole;
     the extra bottom padding is the room that button rises into. */
  .cookie-banner {
    inset: auto 0 var(--tabbar-h) 0;
    z-index: 94;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px var(--gutter) 28px;
    transform: translateY(calc(100% + var(--tabbar-h)));
  }

  .cookie-banner.is-visible {
    transform: translateY(0);
  }

  .cookie-banner-text {
    flex: none;
    font-size: var(--text-caption);
    line-height: 1.4;
  }

  .cookie-banner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .cookie-banner-actions button {
    min-height: 44px;
    padding-block: 0;
    font-size: var(--text-small);
  }

  /* ---- 3. Shared components: sections, buttons, links, cards, rails ------ */

  /* Inline arrow links: a 44px row, with the margin trimmed so the spacing
     around the link reads as it did. */
  .text-link {
    min-height: 44px;
    margin-top: 6px;
  }

  .text-link::after {
    bottom: 10px;
  }

  /* Review dots: the visible dot stays 8px, the hit area grows to 44px. */
  .review-dot {
    width: 44px;
    height: 44px;
    border-width: 18px;
  }

  .review-dots {
    gap: 0;
    margin-top: 0;
  }

  /* ---- 4. Closing CTA band and footer ------------------------------------ */

  /* Closing band: from 692px of photo to a ~420px statement, buttons stacked
     full width. */
  .cta-final.cta-final--media {
    min-height: 0;
    padding-block: 56px 64px;
  }

  .cta-final.cta-final--media .cta-final-title {
    gap: 12px;
  }

  .cta-final.cta-final--media .cta-final-display {
    font-size: var(--text-h1);
  }

  .cta-final.cta-final--media .section-lede {
    margin-top: 12px;
    font-size: var(--text-body-lg);
  }

  .cta-final.cta-final--media .cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }

  .cta-final.cta-final--media .cta-actions .btn {
    width: 100%;
    min-height: var(--tap-primary);
  }

  .cta-final-meta {
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
    font-size: var(--text-caption);
  }

  /* Footer: two link columns (Xplore tall on the left, Corporate over Company on
     the right); voice, contact and the tour-package disclosure keep full width.
     Every link is a 44px row. */
  .site-footer {
    padding-top: 48px;
  }

  .ft-top {
    gap: 28px;
    padding-bottom: 40px;
  }

  .ft .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .ft .brand-logo {
    margin-bottom: 20px;
  }

  .ft-actions {
    flex-direction: column;
    align-self: stretch;
  }

  .ft-btn {
    justify-content: center;
  }

  .ft-cols {
    padding-block: 40px;
    gap: 32px 16px;
  }

  .ft-cols > nav:nth-of-type(1) {
    grid-column: 1;
    grid-row: span 2;
  }

  .ft-cols > nav:nth-of-type(2),
  .ft-cols > nav:nth-of-type(3) {
    grid-column: 2;
  }

  .ft-label {
    margin-bottom: 4px;
  }

  .ft-links li + li,
  .ft-seo-links li + li,
  .ft-contact-list li + li {
    margin-top: 0;
  }

  .ft-links a,
  .ft-seo-links a,
  .ft-legal a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .ft-contact-list li {
    align-items: center;
    min-height: 44px;
  }

  .ft-contact-list li:has(address) {
    align-items: flex-start;
    padding-block: 10px;
  }

  /* Two stacked email rows: the icon pins to the first row, not the gap. */
  .ft-contact-list li:has(a ~ a) {
    align-items: flex-start;
  }

  .ft-contact-list li:has(a ~ a) > svg {
    margin-top: 14px;
  }

  .ft-contact-list li > a,
  .ft-contact-list span:has(> a) a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .ft-contact-list span:has(> a) br {
    display: none;
  }

  .ft-social {
    gap: 8px;
    margin-top: 12px;
  }

  .ft-social a {
    width: 44px;
    height: 44px;
  }

  .ft-seo-grid {
    gap: 24px;
    padding-bottom: 32px;
  }

  .ft-bottom {
    gap: 4px;
  }

  .ft-legal {
    row-gap: 0;
  }

  /* ---- 5. Home ----------------------------------------------------------- */

  /* The lowercase heading voice stays; it just sits on the h2 step. */
  #passport #handle-heading,
  #dest-heading,
  #mice-heading,
  #reviews-heading {
    font-size: var(--text-h2);
    line-height: 1.15;
  }

  .im-cue {
    width: 44px;
    height: 44px;
    bottom: 12px;
  }

  /* Home hero dock + sheet (phone): the title keeps the hero to itself. One glass dock rests above the
     cue ring (which sits above the tab bar); tapping it opens a bottom sheet. The desktop strip and its
     header are not shown here (initHeroSeason builds both; the strip stays in the DOM, hidden). */
  .im-cue.im-cue--ring {
    bottom: calc(var(--tabbar-h) + 16px);
  }

  .im-hero .hero-text-wrapper {
    padding-bottom: 30svh;
  }

  .im-where {
    left: 16px;
    right: 16px;
    bottom: calc(var(--tabbar-h) + 16px + 44px + 10px);
    transition: opacity var(--dur-base) var(--ease), visibility 0s linear 0s;
  }

  /* The cookie banner covers this zone: hold the dock hidden, enter once it is answered. */
  .has-cookie-banner .im-where {
    bottom: calc(var(--tabbar-h) + 16px + 44px + 10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-duration: 0s;
  }

  .im-where-head,
  .im-strip {
    display: none;
  }

  .im-dock {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 88px;
    padding: 0 18px 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    color: var(--color-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.15), 0 24px 60px rgba(20, 14, 8, 0.3);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
  }

  .im-dock:focus-visible,
  .im-sheet button:focus-visible,
  .im-sheet a:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }

  .im-dock-thumbs {
    display: flex;
    flex: none;
    padding-left: 12px;
  }

  .im-dock-thumbs img {
    width: 40px;
    height: 40px;
    margin-left: -12px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    object-fit: cover;
    box-sizing: border-box;
    background: rgba(20, 20, 20, 0.12);
  }

  .im-dock-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .im-dock-month {
    font-size: 17px;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
  }

  .im-dock-sub {
    font-family: var(--font-voice);
    font-size: 1.1875rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.2;
    color: #4A4640;
  }

  .im-dock-chev {
    flex: none;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Entrance: slides up, then the thumbs fan out once. */
  .has-js .im-dock {
    opacity: 0;
    transform: translateY(48px);
  }

  .has-js .im-dock-thumbs img {
    transform: translateX(calc(var(--fan, 0) * -28px));
  }

  .im-dock-thumbs img:nth-child(1) { --fan: 0; }
  .im-dock-thumbs img:nth-child(2) { --fan: 1; }
  .im-dock-thumbs img:nth-child(3) { --fan: 2; }

  .has-js .im-where.is-in .im-dock {
    opacity: 1;
    transform: none;
    transition: opacity 600ms var(--ease), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .has-js .im-where.is-in .im-dock-thumbs img {
    transform: none;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 500ms;
  }

  /* Sheet: same glass, denser for reading; covers the tab bar. */
  .im-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: rgba(10, 8, 6, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms var(--ease), visibility 0s linear 400ms;
  }

  .im-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms var(--ease), visibility 0s;
  }

  .im-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2210;
    max-height: 94svh; /* with the tighter rhythm below, all three cards show without a scroll at 360x640 */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    color: var(--color-ink);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(250, 249, 247, 0.8));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 -24px 60px rgba(20, 14, 8, 0.3);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 400ms;
  }

  .im-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }

  .im-sheet.is-dragging {
    transition: none;
  }

  .im-sheet-grab {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 22px;
    touch-action: none;
    cursor: grab;
  }

  .im-sheet-handle {
    display: block;
    width: 40px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 2px;
    background: rgba(20, 20, 20, 0.28);
  }

  .im-sheet-close {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: var(--color-ink);
    background: transparent;
    cursor: pointer;
  }

  .im-sheet-close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .im-sheet-body {
    padding: 0 16px 8px;
  }

  .im-sheet-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4A4640;
  }

  .im-sheet-line {
    margin: 2px 0 12px;
    font-size: 1.3125rem;
    font-style: italic;
    line-height: 1.15;
  }

  .im-sheet-months {
    display: flex;
    gap: 8px;
    margin: 0 -16px 12px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .im-sheet-months::-webkit-scrollbar {
    display: none;
  }

  .im-sheet-month {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(20, 20, 20, 0.22);
    border-radius: 12px;
    color: var(--color-ink);
    font: inherit;
    font-size: 15px;
    font-weight: var(--weight-medium, 500);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
  }

  .im-sheet-month[aria-pressed="true"] {
    border-color: var(--color-ink);
    color: #fff;
    background: var(--color-ink);
  }

  .im-sheet-list {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
  }

  .im-sr {
    overflow: hidden;
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
  }

  .im-sr-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px;
    color: inherit;
    text-decoration: none;
  }

  .im-sr-link img {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
  }

  .im-sr-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .im-sr-eyebrow {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
  }

  .im-sr-name {
    font-size: 19px;
    font-weight: var(--weight-semibold);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .im-sr-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 14px;
    border-top: 1px solid rgba(20, 20, 20, 0.08);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    text-decoration: none;
  }

  .im-sheet-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    color: #fff;
    font-size: 16px;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    background: var(--color-accent);
  }

  @media (prefers-reduced-motion: reduce) {
    .has-js .im-dock,
    .has-js .im-dock-thumbs img {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .im-sheet,
    .im-sheet.is-open,
    .im-sheet-backdrop,
    .im-sheet-backdrop.is-open {
      transition: none;
    }
  }

  /* Passport: the booklet is frozen, so only the space around it moves. The
     pause control (now a 44px target) hangs below the book; the lede clears
     it instead of running underneath. */
  .pp-auto-pause {
    width: 44px;
    height: 44px;
    bottom: -58px;
  }

  .pp-story-copy {
    margin-top: 72px;
  }

  /* We Care: the scroll track drops from 145vh to 120svh. The words are
     lit from scroll progress over (track - viewport), so 20svh of travel
     still lights all three and lets the last hold on screen. Reduced motion
     keeps the stock auto-height band. */
  @media (prefers-reduced-motion: no-preference) {
    .im-care {
      height: 120svh;
    }

    .im-care-sticky {
      height: 100svh;
    }
  }

  /* Reviews: a peeking snap rail. Cards start on the gutter and the next one
     shows 18% of itself. */
  .review-grid {
    gap: var(--m-gap);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
  }

  .review-card {
    flex: 0 0 82vw;
    scroll-snap-align: start;
    padding: var(--m-card-pad);
  }

  .review-text {
    font-size: var(--text-small);
    line-height: 1.5;
  }

  .review-trip {
    font-size: var(--text-caption);
  }

  /* Within India rail: starts on the gutter, the third card peeks. */
  .dest-grid:not(.dest-grid--featured) {
    gap: var(--m-gap);
  }

  .dest-grid:not(.dest-grid--featured) .dest-card {
    flex: 0 0 40vw;
  }

  /* ---- 6. Interior pages: about, mice, college, contact, plan, blogs ----- */

  /* Type floor for eyebrows and kickers, and the h2 step for card-sheet pages. */
  main .kicker,
  .card-sheet .kicker,
  .spoke-body .kicker,
  .mice-page .kicker {
    font-size: var(--text-caption);
  }

  .card-sheet .section-head > h2 {
    font-size: var(--text-h2);
  }

  .card-sheet .section-lede {
    font-size: var(--text-body-lg);
  }

  /* Card sheet (contact, plan, college): cards sit on the 20px gutter with
     20px inside, instead of 12px sheet + 18px container + wizard padding. The
     first card owns the header clearance on the sheet, not in its padding. */
  .card-sheet {
    gap: var(--m-gap);
    padding: var(--header-height) var(--gutter) var(--gutter);
  }

  .card-sheet > section {
    padding-block: 32px;
  }

  .card-sheet > section.page-no-hero-open {
    padding-block-start: 32px;
  }

  .card-sheet .container {
    padding-inline: var(--m-card-pad);
  }

  /* About: the page is flat bands, so the gutter and rhythm come straight
     from the tokens. */
  body.about-page {
    --ab-pad-x: var(--gutter);
    --ab-gap-y: var(--section-y);
  }

  body.about-page .card-sheet {
    padding: 0;
  }

  body.about-page .card-sheet > section {
    padding-block: var(--section-y);
  }

  /* The shared card border would push every About edge in by 1px. */
  body.about-page .card-sheet > section:not(.section-dark):not(.section-alt):not(.cta-final) {
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  body.about-page .card-sheet > section.about-founder {
    padding-top: 0;
  }

  body.about-page .card-sheet > section.about-proof {
    margin-top: 0;
    padding-block: var(--section-y-dark);
  }

  body.about-page .card-sheet > section.cta-final {
    margin-top: 0;
    padding-block: 56px 64px;
  }

  body.about-page .about-founder .ab-title {
    padding-block: calc(var(--header-height) + 32px) 32px;
  }

  body.about-page .about-founder-name {
    font-size: var(--text-h1);
  }

  body.about-page .about-reviews .review-trip {
    font-size: var(--text-caption);
  }

  body.about-page .about-founder-photo {
    aspect-ratio: 4 / 3;
  }

  body.about-page .about-founder-photo {
    margin-top: 0;
  }

  body.about-page .about-founder-photo img {
    object-position: 50% 18%;
  }

  body.about-page .about-founder .ab-story {
    gap: 32px;
    padding-top: var(--section-y);
  }

  body.about-page .about-founder .ab-story-text p:not([class]),
  body.about-page .ab-what-dek,
  body.about-page .ab-steps p,
  body.about-page .about-diff-item p {
    font-size: var(--text-body);
    line-height: 1.6;
  }

  body.about-page .ab-head {
    margin-bottom: 24px;
  }

  body.about-page .ab-head-link,
  body.about-page .about-reviews-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  body.about-page .about-diff-item {
    padding-block: 24px;
  }

  /* Mice and College: section rhythm back to 48 (dark band 56). */
  .mice-tiles-section,
  .mice-process-section {
    padding-block: var(--section-y);
  }

  .mice-record-band {
    padding-block: var(--section-y-dark);
  }

  .mice-h2,
  .spoke-body .section-head > h2 {
    font-size: var(--text-h2);
  }

  .mice-page .section-lede,
  .spoke-body .section-lede {
    font-size: var(--text-body-lg);
  }

  /* Cards nested in a card-sheet section take 16px inside, so the text keeps
     a readable measure instead of stacking 20 + 24 padding twice. */
  .card-sheet .catalog-card,
  .card-sheet .step,
  .card-sheet .college-narrow-note,
  .card-sheet .contact-method {
    padding: 16px;
  }

  /* Journal article: rhythm and the related-reads panel on the grid. */
  .blog-post-page .jr-body {
    padding-bottom: var(--section-y);
  }

  .blog-post-page .jr-cta-inner {
    padding-block: var(--section-y);
  }

  .blog-post-page .jr-cta h2 {
    font-size: var(--text-h2);
  }

  .blog-post-page .jr-related {
    padding-block: var(--section-y-dark);
  }

  .blog-post-page .jr-panel {
    padding: var(--m-card-pad);
  }

  /* Contact: every method is a 44px-plus row; the in-card links too. */
  .contact-method-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  .contact-method-label {
    font-size: var(--text-caption);
  }

  /* Plan your trip: the wizard borrows the section card instead of drawing a
     second one, and Back / Next / Send sit on one 48px row. */
  .card-sheet .wizard {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .wizard-nav {
    gap: 12px;
  }

  .wizard-nav .btn {
    min-height: var(--tap-primary);
    padding-inline: 20px;
    white-space: nowrap;
  }

  .wizard-nav .btn-next,
  .wizard-nav .btn-submit {
    flex: 1;
  }

  .wizard-alt {
    font-size: var(--text-small);
  }

  /* Blogs: masthead and featured post compact, the page on the gutter. */
  .blogs-page .jr-masthead-inner,
  .blog-post-page .jr-title-inner {
    padding: calc(var(--header-height) + 24px) var(--gutter) 32px;
  }

  .blogs-page .jr-h1,
  .blog-post-page .jr-h1 {
    font-size: var(--text-h1);
    margin-top: 12px;
  }

  .blogs-page .jr-dek,
  .blog-post-page .jr-dek {
    margin-top: 16px;
  }

  .blogs-page .jr-eyebrow,
  .blog-post-page .jr-eyebrow,
  .blog-post-page .jr-meta {
    font-size: var(--text-caption);
  }

  .blogs-page .jr-wide,
  .blog-post-page .jr-wide {
    padding-inline: var(--gutter);
  }

  .blogs-page .jr-featured {
    gap: 32px;
  }

  .blogs-page .jr-lead-media {
    aspect-ratio: 16 / 9;
  }

  .blogs-page .jr-lead-body {
    gap: 8px;
    margin-top: 12px;
  }

  .blogs-page .jr-lead-title {
    font-size: var(--text-h2);
  }

  .blogs-page .jr-lead-excerpt {
    font-size: var(--text-small);
    line-height: 1.5;
  }

  .blogs-page .jr-lead-meta {
    font-size: var(--text-caption);
  }

  .blogs-page .section-head > h2,
  .blogs-page .cta-block > h2 {
    font-size: var(--text-h2);
  }

  .blogs-page .jr-browse {
    padding-block: var(--section-y);
  }

  .blogs-page .jr-chips .chip {
    min-height: var(--tap-min);
  }

  .blogs-page .jr-grid {
    gap: 32px var(--m-gap);
  }

  /* ---- 7. Destinations hub ----------------------------------------------- */

  /* Each region is one horizontal snap rail of portrait tiles. js/main.js
     reorders cards with `order` and hides empty regions with [hidden]; both
     work unchanged on a flex rail. The rail bleeds to the screen edge and
     pads back in, so the first tile sits on the gutter and the last has
     trailing space. */
  .at-region {
    padding-block: 2rem 2.25rem;
  }

  .at-region-head {
    margin-bottom: 1rem;
  }

  .at-grid {
    display: flex;
    gap: var(--m-gap);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .at-grid::-webkit-scrollbar {
    display: none;
  }

  .at-grid > .at-card {
    flex: 0 0 42vw;
    scroll-snap-align: start;
  }

  .at-card-body {
    padding: 0.9rem 0.85rem;
  }

  .at-card-name {
    overflow-wrap: anywhere;
  }

  .at-card .hub-card-answer,
  .at-card-hrs {
    font-size: var(--text-caption);
  }

  .at-card-hrs {
    top: 0.6rem;
    right: 0.6rem;
  }

  /* Filter surfaces: type to the 13px floor, targets to 44px. */
  .page-atlas .hub-seg {
    min-height: var(--tap-min);
    padding-bottom: 0;
    font-size: var(--text-caption);
    letter-spacing: 0.1em;
  }

  .page-atlas .hub-bar-btn,
  .page-atlas .hub-chip {
    min-height: var(--tap-min);
    padding-inline: 0.9rem;
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
  }

  .hub-bar-text {
    font-size: var(--text-caption);
  }

  .page-atlas .hub-bar,
  .page-atlas .hub-chips {
    gap: 0.5rem;
  }

  .page-atlas .hub-reset {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    font-size: var(--text-caption);
  }

  .page-atlas .hub-count {
    font-size: var(--text-caption);
  }

  /* Hero, stats and style tiles keep their look; only the type floor moves. */
  .at-hero .at-eyebrow,
  .at-feature .at-eyebrow,
  .at-meta,
  .at-route,
  .page-atlas .hub-mood-label {
    font-size: var(--text-caption);
  }

  /* ---- 8. Destination spokes (*-tour-packages-from-india) ---------------- */

  /* Title block: long names wrap inside the column, never past it. The
     breadcrumb is 13px with 44px targets. */
  .dest-page .dx-h1 {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .dest-page .dx-eyebrow ol {
    font-size: var(--text-caption);
    letter-spacing: 0.12em;
  }

  .dest-page .dx-eyebrow li a,
  .dest-page .dx-eyebrow li span {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  .dest-page .dx-intro .dx-prose p:first-child {
    font-size: var(--text-body-lg);
  }

  /* Rhythm: 48px above and below, a hairline between sections. */
  .dest-page .dx-sec + .dx-sec {
    margin-top: var(--section-y);
    padding-top: var(--section-y);
    border-top: 1px solid var(--color-border);
  }

  .dest-page .dx-stop:last-child {
    border-bottom: 0;
  }

  /* At a glance: two columns, three rows. */
  .dest-page .dx-know-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px var(--m-gap);
  }

  .dest-page .dx-know-label {
    font-size: var(--text-body);
  }

  .dest-page .dx-know-value {
    overflow-wrap: break-word;
  }

  /* Month chart: labels at the floor, the 6-up grid from styles.css stays. */
  .dest-page .spoke-month-abbr,
  .dest-page .spoke-month-temp,
  .dest-page .spoke-months-key,
  .dest-page .spoke-months-readout-rating {
    font-size: var(--text-caption);
  }

  .dest-page .spoke-month-abbr {
    letter-spacing: 0.04em;
  }

  /* What we can arrange and Destinations like X: snap rails. The mosaic is
     plain markup on desktop (no carousel script), so nothing fights this. */
  .dest-page .dx-mosaic,
  .dest-page .dx-related-grid {
    display: flex;
    gap: var(--m-gap);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .dest-page .dx-mosaic::-webkit-scrollbar,
  .dest-page .dx-related-grid::-webkit-scrollbar {
    display: none;
  }

  .dest-page .dx-mosaic > .dx-tile,
  .dest-page .dx-related-grid > .dx-rcard {
    flex: 0 0 78vw;
    scroll-snap-align: start;
  }

  .dest-page .dx-tile:first-child .dx-tile-media {
    aspect-ratio: 4 / 3;
  }

  .dest-page .dx-tile-title,
  .dest-page .dx-tile:first-child .dx-tile-title {
    font-size: var(--text-h3);
  }

  .dest-page .dx-tile-body p,
  .dest-page .dx-tile:first-child .dx-tile-body p {
    font-size: var(--text-small);
  }

  .dest-page .dx-related {
    padding-block: var(--section-y-dark);
  }

  /* Tap targets: who-it-suits tabs and the in-panel link. */
  .dest-page .spoke-fit-tab {
    min-height: var(--tap-min);
  }

  .dest-page .spoke-fit-cta,
  .dest-page .dx-reads a,
  .dest-page .dx-reads-all a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  .dest-page .dx-kicker,
  .dest-page .dx-tier-flag {
    font-size: var(--text-caption);
  }

  /* ---- 9. Read more: long prose clamps, a text-link button opens it ------- */

  /* initReadMore (js/main.js) adds .rm-solo / .rm-lead / .rm-collapse and
     .clamp-4 / .clamp-5 only to blocks that overflow, and only on phones. */
  .rm-solo.clamp-4:not(.is-open),
  .rm-lead.clamp-4:not(.is-open) > p:first-of-type {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  .rm-solo.clamp-5:not(.is-open),
  .rm-lead.clamp-5:not(.is-open) > p:first-of-type {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
  }

  /* Lead mode: headings, the lead paragraph and the founder pull quote stay
     visible; every other child waits behind the button. */
  .rm-lead:not(.is-open) > :not(h2):not(h3):not(p:first-of-type):not(.about-founder-quote) {
    display: none;
  }

  /* Season list: titles and months stay; descriptions hide through the
     [hidden=until-found] attribute (find-in-page still opens them). */
  .rm-collapse:not(.is-open) .dx-stop-desc {
    margin-top: 0;
  }

  .read-more {
    display: inline-flex;
    margin-top: 4px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-weight: 500;
    color: var(--color-ink);
    text-align: left;
    justify-self: start;
    align-self: flex-start;
    cursor: pointer;
  }

  /* Phones have no hover, so the control carries its affordance at rest: the
     cherry underline stays drawn and a chevron says which way it opens. */
  .read-more.text-link::after {
    transform: scaleX(1);
    right: 20px;
  }

  .read-more::before {
    content: "";
    order: 2;
    width: 7px;
    height: 7px;
    margin: -4px 4px 0 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .read-more[aria-expanded="true"]::before {
    margin-top: 4px;
    transform: rotate(-135deg);
  }

  .section-dark .read-more {
    color: var(--color-accent-on-dark);
  }

  .dest-page .dx-panel > .read-more {
    grid-column: 2;
  }

  /* The founder story is a wrapped flex row with a 32px gap: keep the button
     on the left, close to the text it opens. */
  body.about-page .ab-story > .read-more {
    margin-right: auto;
    margin-top: -20px;
  }

  /* ---- 10. Alignment: 3+ line text is left, heads share its edge ---------- */

  /* Phones: centred is for 1-2 lines. A head that introduces a paragraph goes
     left with it so heading and lede share one edge. Closing CTA bands
     (.cta-final, .jr-cta) and page heroes stay as composed. */
  .section-head--center,
  .section-head--center .section-lede,
  .section-head--center .kicker,
  .section-head--center > h2,
  .college-band-lede,
  .section-dark .section-lede,
  .review-more,
  .jr-dek,
  .dx-title-inner .dx-lede,
  .dx-cta .cta-block,
  .at-cta .cta-block {
    text-align: left;
  }

  .section-head--center > h2,
  .section-head--center .kicker,
  .section-head--center .section-lede,
  .dx-cta .cta-block > *:not(.cta-actions),
  .at-cta .cta-block > *:not(.cta-actions) {
    margin-inline: 0;
  }

  .section-head--center ~ .prose {
    margin-inline: 0;
  }

  .college-split-lead,
  .college-split-lead .section-lede,
  .blogs-page .jr-masthead-inner,
  .blogs-page .jr-eyebrow,
  .blogs-page .jr-h1,
  .blogs-page .jr-dek,
  .dest-page .dx-cta .cta-block,
  .dest-page .dx-cta .dx-kicker,
  .dest-page .dx-cta h2 {
    text-align: left;
  }

  .college-split-lead .section-lede,
  .blogs-page .jr-eyebrow,
  .blogs-page .jr-h1,
  .blogs-page .jr-dek,
  .dest-page .dx-cta h2,
  .dest-page .dx-cta .section-lede {
    margin-inline: 0;
  }

  .dest-page .dx-cta .cta-actions {
    justify-content: flex-start;
  }

  h1, h2, h3 {
    text-wrap: balance;
  }

  p, .section-lede {
    text-wrap: pretty;
  }

  /* ---- 11. Stragglers from the full-site sweep ---------------------------- */

  .spoke-visa-badge-label {
    font-size: var(--text-caption);
  }

  .legal-contact a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  /* The read-more button sits close under the text it opens. */
  .read-more {
    margin-top: -8px;
  }

  /* Heroes whose paragraph runs 3+ lines go left with their title, like the
     plan-your-trip hero already does. */
  .legal-header,
  .page-404 .page-hero-inner {
    text-align: left;
  }

  .legal-header .legal-intro,
  .legal-header .legal-rule,
  .page-404 .page-hero-sub {
    margin-inline: 0;
  }

  .dest-subhead--center {
    justify-content: flex-start;
    text-align: left;
  }

}

/* === DESTINATION RAIL (mobile) ============================================
   Phone grid: 20px gutter, 48px section rhythm, 44px targets. The rail is
   thumb-swiped, so the chevrons are hidden. */
@media (max-width: 699.98px) {
  .dr-band {
    --dr-slide-w: min(78vw, 300px);
    padding-block: var(--section-y);
  }

  .dr-head {
    align-items: flex-start;
    gap: 1rem;
  }

  .dr-title {
    font-size: 1.75rem;
  }

  .dr-lede {
    font-size: 1.25rem;
  }

  .dr-filters {
    margin-block: 1.5rem 1.25rem;
  }

  .dr-nav {
    display: none;
  }
}

/* ==========================================================================
   About on phones (R200)
   The opening leads with the founder: his portrait full width (the sunset
   photo is desktop only), then the name and the story. The outline
   2019 steps aside here (the noir figures band below repeats it). What We
   Do becomes a 3 x 3 grid of icon tiles (the one-line descriptions stay for
   screen readers and on desktop), How We Work compact numbered rows on a
   white band, and the light sections close up their rhythm.
   ========================================================================== */
@media (max-width: 699.98px) {
  /* The founder section flattens its two inner wrappers so the cover, the
     portrait, the name and the story can be ordered as one column. */
  body.about-page .about-founder {
    display: flex;
    flex-direction: column;
  }

  body.about-page .about-founder .ab-story,
  body.about-page .about-founder .ab-story-aside { display: contents; }

  body.about-page .about-founder-photo {
    order: 1;
    width: auto;
    margin: calc(var(--header-height) + 14px) var(--gutter) 0;
    aspect-ratio: 1;
    border-radius: 18px;
  }

  body.about-page .ab-year,
  body.about-page .ab-year-label { display: none; }

  body.about-page .about-founder .ab-title {
    order: 3;
    padding-block: 18px 0;
    text-align: center;
  }

  body.about-page .about-founder .ab-story-text {
    order: 4;
    margin-top: 22px;
    padding-inline: var(--gutter);
  }

  body.about-page .ab-story > .read-more {
    order: 5;
    align-self: flex-start;
    margin: 4px var(--gutter) 0;
  }

  /* Light sections: one closer rhythm. */
  body.about-page .card-sheet > section.about-what,
  body.about-page .card-sheet > section.about-how,
  body.about-page .card-sheet > section.about-diff,
  body.about-page .card-sheet > section.about-partners,
  body.about-page .card-sheet > section.about-corp {
    padding-block: 40px;
  }

  /* What We Do: nine icon tiles, three across. */
  body.about-page .ab-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
  }

  body.about-page .ab-services li {
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 6px 14px;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
  }

  body.about-page .ab-ico { width: 40px; height: 40px; }
  body.about-page .ab-svc { align-items: center; }
  body.about-page .ab-svc strong { font-size: 13.5px; line-height: 1.25; }

  body.about-page .ab-svc > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* How We Work: numbered rows on a white band. */
  body.about-page .card-sheet > section.about-how { background: var(--color-surface); }
  body.about-page .about-how .ab-head { margin-bottom: 8px; }
  body.about-page .ab-steps { gap: 0; }

  body.about-page .ab-steps li {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    align-items: baseline;
    padding: 18px 0;
    border-top: 1px solid var(--color-border);
  }

  body.about-page .ab-steps li:last-child { border-bottom: 1px solid var(--color-border); }

  body.about-page .ab-step-n {
    grid-row: 1 / span 2;
    font-size: 46px;
    -webkit-text-stroke-width: 1.5px;
  }

  body.about-page .ab-steps h3 { margin: 0; font-size: 18px; }
  body.about-page .ab-steps p { grid-column: 2; font-size: 15px; line-height: 1.55; }

  /* What Makes Us Different: the same rows, closer. */
  body.about-page .about-diff-item { padding-block: 18px; }
  body.about-page .about-diff-item h3 { font-size: 17px; }
  body.about-page .about-diff-item p { font-size: 15px; line-height: 1.55; }
}