/* ─── Pamusha responsive overlay (rewrite v2) ─────────────────────────────────
   Loaded last; uses higher-specificity selectors and !important strategically
   to win against existing media queries in components.css and shop.css.

   Breakpoints (matches the project spec):
     mobile   320 – 480px   1 column, hamburger nav, touch-comfortable
     small    481 – 767px   1 column, looser spacing
     tablet   768 – 1024px  2 columns
     desktop  1025px+       existing layout untouched
   ────────────────────────────────────────────────────────────────────────── */

/* Overline label variants: mobile-only text hidden by default (desktop shows
   the standard overline). The @media (max-width: 767px) block flips these. */
.overline--desktop { display: inline; }
.overline--mobile { display: none; }

:root {
    --touch-min: 44px;
    --touch-comfortable: 48px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, video, picture, iframe {
    max-width: 100%;
    height: auto;
}

/* Inputs never below 16px (prevents iOS zoom on focus). */
input, select, textarea, button { font-size: max(16px, 1em); }

/* Touch-target safety net. */
.btn, button[type="submit"], button[type="button"], a.btn,
.cart-item-remove, .nav-toggle, .nav-cart {
    min-height: var(--touch-min);
}

/* Touch devices: kill hover-only image swap. */
@media (hover: none) {
    .product-card-alt { display: none !important; }
    .product-card-main { opacity: 1 !important; }
}

/* Accessibility: respect prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ═══ MOBILE  320 – 767px ════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Tighten the page-side padding token so everything fits nicely. */
    :root {
        --edge: 1.25rem !important;
        --gutter: 1rem !important;
        --section-margin: 2.5rem !important;
        /* Scale down the large spacing steps proportionally so the big
           section/vertical gaps (5–7.5rem on desktop) don't leave huge empty
           bands on a phone. Small steps (xxs–md) are left as-is. */
        --space-xl: 2rem !important;      /* was 3rem   */
        --space-xxl: 3rem !important;     /* was 5rem   */
        --space-xxxl: 3.5rem !important;  /* was 6.25rem */
        --space-xxxxl: 4rem !important;   /* was 7.5rem  */
    }

    /* Force product grids into a single column on mobile.
       Beats components.css's `.product-grid { 2 cols }` and any sibling rule. */
    .product-grid,
    .product-grid-shop,
    .marketplace-grid,
    .shop-grid,
    .collection-grid {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
    }

    .product-card { width: 100%; }
    .product-card-image { aspect-ratio: auto; }
    .product-card-name { font-size: 1.1rem; }
    .product-card-tagline { font-size: 0.95rem; }
    .product-card-price { font-size: 1rem; }

    /* Typography — MOBILE (≤767px). Small, compact scale.
       hero ≈ 16px, section ≈ 12.5px, h3 ≈ 10.5px, body ≈ 11.5px @390px.
       Desktop is untouched (this whole block is inside @media max-width:767px). */
    h1, .page-heading, .hero-heading {
        font-size: clamp(0.95rem, 4vw, 1.25rem) !important;
        line-height: 1.22 !important;
        letter-spacing: 0.01em !important;
    }
    h2, .section-heading {
        font-size: clamp(0.8rem, 3.2vw, 1rem) !important;
        line-height: 1.3 !important;
    }
    h3 { font-size: clamp(0.72rem, 2.7vw, 0.85rem) !important; line-height: 1.35 !important; }
    p, .hero-subtitle, .product-description, .matisse-block-text, .matisse-block-text p {
        font-size: max(11px, 0.72rem) !important;   /* body copy floored to 11px min */
        line-height: 1.55 !important;
    }

    /* CRITICAL: justified text breaks on narrow screens — it stretches ~6 words
       across the full width with ugly gaps, which reads as "oversized / unscaled".
       Force ONLY justified body copy to left-aligned on mobile. Centred intros
       (.text-align-center / .hero-subtitle) are deliberately left untouched. */
    .text-align-justify,
    .text-align-justify p,
    .matisse-block-text.text-align-justify,
    .matisse-block-text.text-align-justify p {
        text-align: left !important;
    }

    /* Large decorative "display" page headings (Marketplace / Thread / Directory /
       Artisans) are set to var(--text-display) with !important in the per-page
       CSS that loads after this file. Doubled class selectors raise specificity so
       these mobile-only sizes win the cascade and scale to the hero size. */
    .page-heading.page-heading--cursive-large,
    .page-heading.page-heading--titlecase,
    .page-heading.page-heading--script,
    .artisans-heading.artisans-heading {
        font-size: clamp(1rem, 4.2vw, 1.35rem) !important;
        line-height: 1.2 !important;
    }

    /* Small labels — proportional to the small mobile scale. */
    .footer-meta { font-size: 0.56rem !important; }
    .filter-link { font-size: 0.58rem !important; }
    .form-label, .form-radio-text, label { font-size: 0.66rem !important; }
    .variant-dropdown-current, .variant-dropdown-item { font-size: 0.66rem !important; }
    .overline { font-size: 0.58rem !important; }

    /* Header — sticky on scroll. No shadow / border so it blends seamlessly
       into the page background. */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--ivory);
        box-shadow: none;
    }
    .nav-container {
        padding: 0.75rem 1.25rem !important;
        min-height: 56px;
    }
    .announcement-bar { font-size: 0.7rem; padding: 0.5rem 1.25rem; }

    /* Hero — single column */
    .hero {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem;
    }
    .hero-image-wrapper { aspect-ratio: 4 / 3; width: 100%; }
    .hero-content { text-align: center; padding: 0 1.25rem; }
    .hero-cta { display: flex; flex-direction: column; gap: 0.75rem; }
    .hero-cta .btn,
    .btn-full { width: 100% !important; }

    /* Buttons sized for thumb */
    .btn, .btn-primary, .btn-secondary, .btn-light {
        min-height: var(--touch-comfortable);
        padding: 0.85rem 1.4rem !important;
        font-size: 0.95rem !important;
        border-radius: 8px;
    }

    /* Product detail — stack image stack + info vertically */
    .product-detail-grid,
    .product-detail-layout,
    .product-detail {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem;
    }
    .product-image-main { width: 100%; }
    .product-info { padding: 0; }
    .product-add-form { display: flex; flex-direction: column; gap: 0.75rem; }
    .quantity-control { display: flex; align-items: center; gap: 0.75rem; }
    .quantity-input {
        width: 5rem;
        min-height: var(--touch-comfortable);
    }

    /* Cart — vertical stack per item */
    .cart-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem;
    }
    .cart-items { display: flex; flex-direction: column; }
    .cart-item {
        display: grid !important;
        grid-template-columns: 88px 1fr;
        grid-template-areas:
            "img info"
            "qty qty"
            "sub remove";
        gap: 0.75rem;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(45, 36, 26, 0.08);
    }
    .cart-item-image { grid-area: img; }
    .cart-item-image img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 6px;
    }
    .cart-item-info { grid-area: info; }
    .cart-item-info h3 { font-size: 1rem; margin: 0 0 4px; }
    .cart-item-quantity {
        grid-area: qty;
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    .cart-item-subtotal {
        grid-area: sub;
        font-weight: 700;
        align-self: center;
    }
    .cart-item-remove {
        grid-area: remove;
        justify-self: end;
        align-self: center;
        background: transparent;
        border: 0;
        font-size: 1.4rem;
        color: #6b5e4c;
        line-height: 1;
        min-width: var(--touch-min);
    }
    .cart-summary {
        border-top: 1px solid rgba(45, 36, 26, 0.12);
        padding-top: 1rem;
    }
    .cart-total {
        display: flex;
        justify-content: space-between;
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    /* Checkout / shipping form */
    .checkout-page,
    .cart-page {
        margin: 2rem 0 !important;
        padding: 0 1.25rem !important;
    }
    .checkout-page form > div[style*="flex"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    .checkout-page input,
    .checkout-page textarea,
    .checkout-page select {
        width: 100% !important;
        min-height: var(--touch-comfortable);
        padding: 0.75rem 0.85rem !important;
    }

    /* Opening splash "PAMUSHA" — sized so it fits the phone screen even at the
       breathing animation's peak (scale 1.4 + wider letter-spacing). The old
       18vw made it ~67px and ~545px wide at peak (off-screen by 170px). */
    .splash-name {
        font-size: clamp(1.6rem, 9vw, 2.8rem) !important;
        white-space: nowrap;
    }
    .splash-locations { font-size: 0.8rem; }

    /* Loading-overlay "PAMUSHA" — also kept comfortably within the screen. */
    .loading-logo {
        font-size: clamp(1.5rem, 7vw, 2.4rem) !important;
    }

    /* Decorative scrolling ticker — kept in line with the smaller mobile scale. */
    .marquee-text { font-size: 0.85rem !important; }

    /* Pamusha pillars (Our Story page) — single column */
    .pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* PamushaEDIT collage — single column with comfortable tiles */
    .edit-collage,
    .pamushaedit-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Footer */
    .footer-grid,
    .footer-cols {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}


/* ═══ TABLET  768 – 1024px ═══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

    :root {
        --edge: 2rem !important;
    }

    /* Typography — TABLET/iPad. Clearly smaller than desktop:
       hero ≈ 24px, section ≈ 18px, h3 ≈ 15px, body ≈ 13px. */
    h1, .page-heading, .hero-heading {
        font-size: clamp(1.3rem, 3vw, 1.8rem) !important;
        line-height: 1.18 !important;
    }
    h2, .section-heading {
        font-size: clamp(1rem, 2.3vw, 1.4rem) !important;
        line-height: 1.25 !important;
    }
    h3 { font-size: clamp(0.9rem, 1.9vw, 1.1rem) !important; }
    p, .hero-subtitle, .product-description,
    .matisse-block-text, .matisse-block-text p {
        font-size: 0.8rem !important;      /* ~13px */
        line-height: 1.6 !important;
    }
    .page-heading.page-heading--cursive-large,
    .page-heading.page-heading--titlecase,
    .page-heading.page-heading--script,
    .artisans-heading.artisans-heading {
        font-size: clamp(1.3rem, 3vw, 1.8rem) !important;
    }
    .marquee-text { font-size: clamp(1.1rem, 2.2vw, 1.6rem) !important; }

    /* Opening splash "PAMUSHA" — comfortably within the iPad screen at the
       animation peak (scale 1.4 + wider letter-spacing). */
    .splash-name {
        font-size: clamp(1.8rem, 4.5vw, 3rem) !important;
        white-space: nowrap;
    }
    .loading-logo {
        font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
    }

    /* Same justify fix as mobile — no rivers/gaps on the tablet canvas either. */
    .text-align-justify,
    .text-align-justify p,
    .matisse-block-text.text-align-justify,
    .matisse-block-text.text-align-justify p {
        text-align: left !important;
    }

    /* Two-column product grid on tablet (overrides components.css 3-col rule). */
    .product-grid,
    .product-grid-shop,
    .marketplace-grid,
    .shop-grid,
    .collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.75rem !important;
    }

    /* The hamburger + full-screen overlay for tablet is now defined once,
       together with mobile, in components.css (@media max-width:1024px), so the
       menu behaves identically on both — including the bars morphing into an X.
       The old tablet-only overlay rules that used to live here were removed. */

    /* Pamusha pillars: 2 cols */
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.5rem !important;
    }

    /* Product detail: image left / info right is fine, but tighten gaps */
    .product-detail-grid {
        gap: 2rem !important;
    }

    /* Footer: 2 cols */
    .footer-grid,
    .footer-cols {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    /* Cart: keep flex layout but tighter */
    .cart-item {
        gap: 1rem !important;
    }
}


/* ═══ DESKTOP  1025px+ ═══════════════════════════════════════════════════ */
/* Existing rules in shop.css and components.css govern this range.
   We only step in for very small desktop (1025–1279) to avoid 4-col cramping. */
@media (min-width: 1025px) and (max-width: 1279px) {
    .product-grid,
    .product-grid-shop {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* ═══ MOBILE / TABLET NAV DROPDOWNS — tap-to-expand accordion ═════════════════
   The hamburger menu is used on phones AND both iPad orientations (≤1024px).
   Touch devices have no :hover, so the desktop hover dropdowns never open and
   their sub-items (Founder, Form, Drape, Directory …) are unreachable.
   Here each dropdown becomes a collapsible accordion: collapsed by default,
   expanded when main.js adds `.open` to the parent on tap. Desktop (≥1025px,
   mouse) is untouched and keeps its hover dropdowns. */
@media (max-width: 1024px) {
    .nav-dropdown {
        width: 100%;
        text-align: center;
    }

    /* Let the full-screen menu scroll if an opened dropdown makes it tall. */
    .nav-links {
        overflow-y: auto !important;
    }

    /* Sub-menu: inline (not absolutely positioned), collapsed by default. */
    .nav-dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        margin: 0;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        text-align: center;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.32s ease;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        max-height: 60vh;
        padding: var(--space-xs) 0 var(--space-sm) !important;
    }

    /* Items are opacity:0 by default (desktop stagger). Force them visible so
       the expanded accordion never shows blank rows. */
    .nav-dropdown-menu li {
        opacity: 1 !important;
        transform: none !important;
    }

    .nav-dropdown-menu a {
        display: block;
        font-size: var(--text-sm) !important;
        letter-spacing: var(--letters-wide);
        padding: 0.5rem 0 !important;
    }

    /* Caret affordance below each expandable parent so it reads as tappable.
       Absolutely centred under the label; thin open chevron (not a solid dot).
       Extra specificity (.nav-links …) beats the .nav-links a::after underline
       rule, which is display:none on mobile. */
    .nav-links .nav-dropdown-toggle {
        position: relative;
    }
    /* Neutralise the desktop hover-bridge pseudo-element so nothing but the
       single chevron below can render on the toggle in the hamburger menu —
       guards against any stray box/diamond/line at tablet widths. */
    .nav-links .nav-dropdown-toggle::before {
        display: none !important;
    }
    .nav-links .nav-dropdown-toggle::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -0.7em;
        width: 0.5em;
        height: 0.5em;
        margin-left: -0.3em;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.25s ease, bottom 0.25s ease;
        opacity: 0.55;
    }
    .nav-links .nav-dropdown.open .nav-dropdown-toggle::after {
        bottom: -0.45em;
        transform: rotate(-135deg);
    }
}

/* ═══ MOBILE / TABLET / iPad NAV — centre every item & match logo typography ══
   Scoped ≤1024px so desktop (≥1025px, horizontal nav) is untouched. Dropdown
   parents ("About Pamusha", "Shop Living", "Marketplace") no longer stretch
   full-width and left-align while single links centre — everything is centred
   as a group AND individually, in the Cormorant Garamond wordmark face. */
@media (max-width: 1024px) {
    .nav-links {
        align-items: center !important;
        text-align: center !important;
        gap: 1.6rem !important;
    }

    /* Every top-level item (dropdown parents included) sizes to its content and
       centres — overrides the earlier .nav-dropdown { width:100% } rule. */
    .nav-links > li {
        width: auto !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Top-level links + dropdown toggles in the logo face. */
    .nav-links a,
    .nav-links .nav-dropdown-toggle {
        font-family: var(--font-header) !important;
        font-weight: 300 !important;
        font-size: 1.05rem !important;
        letter-spacing: 0.15rem !important;
        text-transform: uppercase !important;
        color: var(--chestnut) !important;
    }

    /* Sub-menu container centres its items rather than stretching full width.
       (max-height accordion collapse from the block above still governs open/close.) */
    .nav-dropdown-menu {
        width: auto !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* Sub-items: smaller + softer to read as a hierarchy level below the parent. */
    .nav-dropdown-menu li {
        width: auto !important;
    }
    .nav-dropdown-menu a {
        font-family: var(--font-header) !important;
        font-weight: 300 !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.1rem !important;
        text-transform: uppercase !important;
        color: var(--chestnut) !important;
        opacity: 0.7 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BODY-COPY MINIMUM SIZE — running text never renders below 11px, all pages.
   Only paragraph / running copy is floored; labels, overlines, captions,
   prices, nav links and form controls keep their own (smaller) sizes.
   `max()` leaves any size already above 11px untouched. This lives in the
   last-loaded stylesheet so it wins the cascade over the page stylesheets.
   ═══════════════════════════════════════════════════════════════════════ */
.intro-size-xxs { font-size: max(11px, calc(var(--text-xs) * 0.85)); }
.intro-size-xs  { font-size: max(11px, var(--text-xs)); }
.about-copy p,
.about-text p,
.founder-copy p,
.pillar-item p,
.booking-intro p,
.form-direct-note { font-size: max(11px, calc(var(--text-md) - 0.25rem)); }
.thread-intro { font-size: max(11px, var(--text-sm)); }

/* ═══════════════════════════════════════════════════════════════════
   PAMUSHA STORY PAGE + FOUNDER PAGE — MOBILE/TABLET RESPONSIVE FIXES
   ═══════════════════════════════════════════════════════════════════ */

/* ── GLOBAL: fully justify all Story-page body text with straight edges ── */
.matisse-block-text p,
.matisse-block-text.intro-size-xxs p,
.matisse-block-text.intro-size-xs p,
.matisse-block-text.intro-size-sm p,
.matisse-block-text.intro-size-md p {
  text-align: justify !important;
  text-align-last: auto !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* ── STORY PAGE: MOBILE ≤ 767px ── */
@media (max-width: 767px) {

  /* IMAGE REORDER: on mobile each section must read
     overline → heading → IMAGE → body text (image above the text, below the title).
     display:contents dissolves the wrapper div so header + textBlock become direct
     grid children of the section, letting CSS `order` slot the image between them. */
  .matisse-block-intro-split .matisse-block-body {
    display: contents !important;
  }
  .matisse-block-intro-split:not(.image-left) .matisse-block-inline-header { order: 1 !important; }
  .matisse-block-intro-split:not(.image-left) .matisse-block-image { order: 2 !important; }
  .matisse-block-intro-split:not(.image-left) .matisse-block-text-block { order: 3 !important; }
  .matisse-block-intro-split.image-left .matisse-block-inline-header { order: 1 !important; }
  .matisse-block-intro-split.image-left .matisse-block-image { order: 2 !important; }
  .matisse-block-intro-split.image-left .matisse-block-text-block { order: 3 !important; }

  /* SECTION SEPARATION: the second section's wrapper has a desktop-only
     margin-top: -132px (overlap trick) that must be cancelled on mobile.
     Add a moderate 80px total gap between the two sections (not more —
     a larger 128px gap was tried and found too big) so they read as
     clearly separate without an oversized empty void. */
  .matisse-block.matisse-block-first:has(.matisse-block-intro-split.image-left) {
    margin-top: 0 !important;
    padding-top: var(--space-md) !important;
  }
  .matisse-block.matisse-block-first:has(.matisse-block-intro-split:not(.image-left)) {
    padding-bottom: var(--space-md) !important;
  }

  /* Section padding: equal left/right so the text column is centered
     on screen instead of only having padding on one side. */
  .matisse-block-first,
  .matisse-block-wide,
  .matisse-block-intro-split {
    padding-right: var(--edge) !important;
    padding-left: var(--edge) !important;
    box-sizing: border-box !important;
  }

  /* Heading size — match the generic h1/.page-heading/.hero-heading scale so
     shared matisse header blocks (Story "PAMUSHA", Interiors, etc.) render the
     same size as the Founder page heading on mobile. */
  .matisse-block-inline-header .page-heading,
  .matisse-block-header-hero .page-heading {
    font-size: clamp(0.95rem, 4vw, 1.25rem) !important;
    line-height: 1.22 !important;
    letter-spacing: 0.01em !important;
  }

  /* Reduce excessive top padding on the first block */
  .matisse-block-first {
    padding-top: calc(var(--space-xxxxl) * 0.65) !important;
  }

  /* Body text size: this is 20% SMALLER than an earlier "+2pt" iteration.
     Final value: clamp(0.77rem, 3.36vw, 0.88rem). Fully justified with
     hyphens so both edges are straight (no ragged/gappy justification). */
  .matisse-block-text.intro-size-xxs,
  .matisse-block-text.intro-size-xxs p,
  .matisse-block-text.intro-size-xs,
  .matisse-block-text.intro-size-xs p,
  .matisse-block-text p {
    font-size: clamp(0.77rem, 3.36vw, 0.88rem) !important;
    line-height: 1.68 !important;
    text-align: justify !important;
    text-align-last: auto !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  /* Fix text-align-last:right bug on the image-left variant */
  .matisse-block-intro-split.image-left .matisse-block-text p,
  .matisse-block-intro-split.image-left .matisse-block-text.text-align-justify p {
    text-align: justify !important;
    text-align-last: auto !important;
  }

  /* Cap image heights on mobile so they don't dominate the viewport */
  .matisse-block-intro-split .matisse-block-image img {
    max-height: 60vw !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Overline sizing */
  .matisse-block-inline-header .overline {
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
  }

  /* Section bottom padding */
  .matisse-block.section-padding {
    padding-bottom: var(--space-xl) !important;
  }
}

/* ── STORY PAGE: TABLET 768px–1024px ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .matisse-block-first,
  .matisse-block-wide {
    padding-right: var(--edge) !important;
  }

  /* Match the generic tablet h1/.page-heading scale (see the 768–1024 block
     near the top of this file) so shared matisse header blocks stay consistent
     with the Founder page heading on tablet/iPad. */
  .matisse-block-inline-header .page-heading,
  .matisse-block-header-hero .page-heading {
    font-size: clamp(1.3rem, 3vw, 1.8rem) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.01em !important;
  }

  .matisse-block-text.intro-size-xxs,
  .matisse-block-text.intro-size-xxs p,
  .matisse-block-text.intro-size-xs,
  .matisse-block-text.intro-size-xs p,
  .matisse-block-text p {
    font-size: clamp(0.96rem, 1.35vw, 1.09rem) !important;
    line-height: 1.72 !important;
    text-align: justify !important;
    text-align-last: auto !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  /* Tablet now collapses the split into a single column and reorders exactly
     like mobile: overline/heading → image → justified body text, centered.
     `display: contents` dissolves the body wrapper so the header, image and
     text-block become direct grid children that `order` can slot. */
  .matisse-block-intro-split,
  .matisse-block-intro-split.image-left {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }

  .matisse-block-intro-split .matisse-block-body {
    display: contents !important;
    text-align: center !important;
  }

  .matisse-block-intro-split:not(.image-left) .matisse-block-inline-header { order: 1 !important; }
  .matisse-block-intro-split:not(.image-left) .matisse-block-image { order: 2 !important; }
  .matisse-block-intro-split:not(.image-left) .matisse-block-text-block  { order: 3 !important; }

  .matisse-block-intro-split.image-left .matisse-block-inline-header { order: 1 !important; }
  .matisse-block-intro-split.image-left .matisse-block-image { order: 2 !important; }
  .matisse-block-intro-split.image-left .matisse-block-text-block  { order: 3 !important; }

  .matisse-block-intro-split.image-left .matisse-block-text p,
  .matisse-block-intro-split.image-left .matisse-block-text.text-align-justify p {
    text-align: justify !important;
    text-align-last: auto !important;
  }

  .matisse-block-image img {
    max-height: 500px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .matisse-block-first {
    padding-top: calc(var(--space-xxxxl) * 0.85) !important;
  }

  .matisse-block-inline-header .overline {
    font-size: 0.72rem !important;
    letter-spacing: 0.14em !important;
  }
}

/* ── STORY PAGE: ALL NON-DESKTOP ≤1024px ── */
@media (max-width: 1024px) {
  .matisse-block-intro-split.image-left .matisse-block-text.text-align-justify p,
  .matisse-block-intro-split.image-left .matisse-block-text p {
    text-align-last: auto !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }
}

/* ── FOUNDER / ABOUT PAGE (/About/): MOBILE ≤767px ONLY ──
   Fixes a broken layout: .about-split-reverse uses `direction: rtl` as a
   desktop-only column-swap trick, which resolves to a broken 800px/0px
   grid on mobile (image overflowing at 800px wide, text crushed to 117px).
   Also fixes a 160px hero top-padding gap that left the page looking blank. */
@media (max-width: 767px) {

  .about-hero {
    padding-top: 80px !important;
    padding-bottom: var(--space-md) !important;
  }

  .about-content {
    padding-top: 0 !important;
    padding-left: var(--edge) !important;
    padding-right: var(--edge) !important;
  }

  /* Single column, reset the RTL trick so DOM/visual order match */
  .about-split {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: var(--space-md) !important;
    max-width: 100% !important;
  }
  .about-split-reverse { direction: ltr !important; }
  .about-split-reverse > * { direction: ltr !important; }

  /* Image FIRST (below the title, above the body text), full width, capped height */
  .about-image {
    order: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  .about-image img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /* Text SECOND, full width */
  .about-text {
    order: 2 !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: var(--space-md) 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Body text: justified with straight edges (hyphens) */
  .about-text p,
  .about-copy p,
  .founder-copy p {
    font-size: clamp(0.77rem, 3.36vw, 0.88rem) !important;
    line-height: 1.7 !important;
    text-align: justify !important;
    text-align-last: auto !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  .about-text .section-heading {
    font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
    letter-spacing: 0.10em !important;
    margin-bottom: var(--space-xs) !important;
  }

  .about-text .overline {
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    margin-bottom: var(--space-xs) !important;
  }

  /* Overline label swap: "Founder" (desktop) → "Meet the Founder" (mobile) */
  .overline--desktop { display: none !important; }
  .overline--mobile { display: inline !important; }

  .about-text .section-subtitle {
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: var(--space-sm) !important;
  }
}

/* ── FOUNDER / ABOUT PAGE: MOBILE + TABLET/iPad ≤1024px ── */
@media (max-width: 1024px) {
  /* FIX 1: Show the founder photo at its full length/aspect ratio on mobile & tablet/iPad
     (previously cropped via max-height + object-fit: cover) */
  .about-split { grid-template-columns: 1fr !important; }
  .about-image {
    order: -1 !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .about-image img {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  /* FIX 2: Remove the duplicate "Founder" label that was showing above
     "Meet the Founder" on mobile & tablet/iPad — keep only "Meet the Founder" */
  .overline--desktop {
    display: none !important;
  }
}

/* FIX 3: Reduce the founder/about body paragraph text by exactly 1pt smaller
   than its current size, on mobile... */
@media (max-width: 767px) {
  .about-text p, .about-copy p, .founder-copy p {
    font-size: calc(clamp(0.77rem, 3.36vw, 0.88rem) - 1pt) !important;
  }
}
/* ...and on tablet/iPad */
@media (min-width: 768px) and (max-width: 1024px) {
  .about-text p, .about-copy p, .founder-copy p {
    font-size: calc(0.8rem - 1pt) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE / TABLET (≤900px): fully justify body copy so paragraphs, list
   items, blockquotes, figcaptions and editorial overlines get straight
   left/right edges. Headings (h1–h6) and nav links are intentionally
   excluded. Desktop alignment is untouched (this is inside the query).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body :is(p, li, blockquote, figcaption, .thread-editorial-overline, .thread-editorial-caption-label, .thread-editorial-caption-text) {
    text-align: justify !important;
    text-justify: inter-word !important;
  }
  /* Exception: the homepage splash's "London | Harare | Dubai" line should
     stay centered on mobile/tablet, not justified. */
  .splash-locations {
    text-align: center !important;
    font-family: var(--font-header) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT PAGE — mobile & tablet (≤1024px) fine-tuning. Loaded last so these
   win over components.css / services.css and the generic .btn touch-size rule.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  h1.page-heading.booking-brand-heading {
    font-size: 18.24px !important;   /* Pamusha heading, 20% bigger */
    margin-bottom: 40px !important;  /* more space below heading, before body text */
  }

  .booking-intro p {
    font-size: 10px !important;      /* body intro text, one size smaller */
  }

  .btn-contact {
    font-size: 8.093px !important;   /* Send Message button + text, enlarged */
    padding: 7.240px 11.926px !important;
    min-height: 26.62px !important;  /* overrides default 44px min tap-target */
    min-width: 0 !important;
  }
}