/* ============================================================
   mobile-fixes.css
   Seriously, Wow — Mobile art-direction pass
   ============================================================
   RULES:
   - All rules scoped inside @media (max-width: 768px)
   - DO NOT use global selectors — always scope to mobile breakpoint
   - Desktop layout is frozen — no shared selectors without mobile scope
   - Prefer flex/grid alignment over magic margins
   - No transform hacks unless absolutely unavoidable
   - Page-specific section rules MUST use page id (#mobile-home,
     #mobile-about, etc.) — never bare .mobile-only > section:nth-child(N)
     as that bleeds across all pages
   ============================================================ */

@media (max-width: 768px) {

  /* ── Global: mobile nav height reduction ─────────────────────── */
  /* nav-mobile was padding:35px → 155px total height.
     Reduce to 12px top/bottom, logo 56px → 80px total.
     All page wrappers updated from 160px → 100px to match. */
  .nav-mobile {
    padding: 12px 16px !important;
  }
  .nav-mobile__logo {
    height: 56px !important;
  }

  /* Logo image: remove negative left offset and oversized width that push
     the wordmark rightward away from the content gutter.
     object-position:left center anchors the wordmark to the container's
     left edge, aligning it with the 16px page content gutter. */
  .nav-mobile__logo img {
    left: 0 !important;
    width: 100% !important;
    object-position: left center !important;
  }

  /* #mobile-home uses inline padding-top:120px — override to 100px */
  #mobile-home {
    padding-top: 100px !important;
  }


  /* ── Batch 1: Fix hard-coded 390px page widths ────────────────── */

  /* main.css sets .page { width: 390px } in the mobile media query.
     Override to fluid so the page doesn't overflow narrower viewports. */
  .page {
    width: 100% !important;
  }

  /* All mobile content wrappers have inline style="width:390px;..."
     !important is required to override inline styles. */
  .page-content-mobile {
    width: 100% !important;
  }


  /* ── Batch 2: Homepage mobile — art-direction pass ────────────── */
  /*                                                                  */
  /* Sections are direct children of #mobile-home in index.html:     */
  /*   nth-child(1) HERO                                             */
  /*   nth-child(2) CACTUS                                           */
  /*   nth-child(3) SERVICES  (no changes — matches Figma)           */
  /*   nth-child(4) GALLERY SCROLL                                   */
  /*   nth-child(5) FLOWER / NO LOGISTICS                            */
  /*   nth-child(6) VALUE PROP                                       */
  /*   nth-child(7) CTA                                              */
  /*   nth-child(8) CLOSING                                          */


  /* 1a. HERO VIDEO — mobile crop adjustment.
     Default object-fit:cover centers the frame (center center).
     Bias to upper portion of video so subject is more likely visible. */
  #mobile-home > section:nth-child(1) > div > video {
    object-position: center 20% !important;
  }

  /* 1. HERO — reorder caption under image, scale headline
     --------------------------------------------------------
     DOM order: div(image) › p:nth-child(2)(headline) › p:nth-child(3)(caption)
     Target:    image → caption → headline
     Use flex + order to reorder without touching HTML. */
  #mobile-home > section:nth-child(1) {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Image: first */
  #mobile-home > section:nth-child(1) > div {
    order: 1 !important;
    margin-bottom: 0 !important; /* clear inline 24px; caption handles gap */
  }

  /* Caption: second — tight to image, space before headline */
  #mobile-home > section:nth-child(1) > p:nth-child(3) {
    order: 2 !important;
    font-size: 15px !important;
    margin-top: 8px !important;
    margin-bottom: 20px !important;
  }

  /* Headline: third */
  #mobile-home > section:nth-child(1) > p:nth-child(2) {
    order: 3 !important;
    font-size: 40px !important;
    line-height: 40px !important;
  }


  /* 2. CACTUS — scale copy from 50px → 40px/40lh (Figma)
     ------------------------------------------------------ */
  #mobile-home > section:nth-child(2) > div:nth-child(2) {
    font-size: 40px !important;
    line-height: 40px !important;
  }


  /* 4. GALLERY SCROLL — orange italic header, smaller cards, iOS scroll
     -------------------------------------------------------- */
  /* Enable momentum scrolling on iOS; section overflow:hidden was set
     inline — the inner flex div handles horizontal scroll. */
  #mobile-home > section:nth-child(4) > div {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: auto !important;
  }

  #mobile-home > section:nth-child(4) > p {
    color: #db7637 !important;
    font-style: italic !important;
  }

  /* Card links: shrink to Figma ~170px wide */
  #mobile-home > section:nth-child(4) a {
    width: 170px !important;
  }

  /* Card image containers */
  #mobile-home > section:nth-child(4) a > div {
    width: 170px !important;
    height: 263px !important;
  }

  /* Card title */
  #mobile-home > section:nth-child(4) a > p:nth-child(2) {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  /* Card subtitle */
  #mobile-home > section:nth-child(4) a > p:nth-child(3) {
    font-size: 10px !important;
    line-height: 12px !important;
  }


  /* 5. FLOWER / NO LOGISTICS — Figma: 265px image left-anchored,
     text inset to x:109 below. Override flex → block layout.
     ------------------------------------------------------------ */
  #mobile-home > section:nth-child(5) {
    display: block !important;
    padding: 47px 0 0 !important; /* padding-top prevents margin collapse */
    min-height: 560px !important;
  }

  /* Image: 265×355px, left-anchored at x:16, y:47 (via section padding) */
  #mobile-home > section:nth-child(5) > div {
    width: 265px !important;
    height: 355px !important;
    margin: 0 0 0 16px !important;
  }

  /* "No Logistics..." copy: inset from x:109, 13px below image */
  #mobile-home > section:nth-child(5) > p {
    font-size: 40px !important;
    line-height: 40px !important;
    margin: 13px 16px 0 109px !important;
    padding: 0 !important;
  }


  /* 6. VALUE PROP — Figma: narrow right column from x:204
     ------------------------------------------------------ */
  #mobile-home > section:nth-child(6) {
    padding-left: 0 !important;
  }

  #mobile-home > section:nth-child(6) > p {
    font-size: 40px !important;
    line-height: 40px !important;
    margin-left: 204px !important;
    text-align: left !important;
  }


  /* 7. CTA — full-width VHS, hide agency text, overlay copy, email
     --------------------------------------------------------------- */

  /* Remove section padding — spacing handled per child */
  #mobile-home > section:nth-child(7) {
    padding: 0 0 40px !important;
  }

  /* Hide "If you're an agency..." — not in Figma */
  #mobile-home > section:nth-child(7) > p:nth-child(1) {
    display: none !important;
  }

  /* VHS image container:
     Figma: left:16, w:359, h:457 — almost full-bleed.
     position:relative enables the "Pro Synthetic." overlay. */
  #mobile-home > section:nth-child(7) > div:nth-child(2) {
    width: calc(100% - 32px) !important;
    height: 457px !important;
    margin: 6px 16px 0 !important;
    position: relative !important;
  }

  /* "Start a project" — Figma gap: 97px below image bottom */
  #mobile-home > section:nth-child(7) > p:nth-child(3) {
    margin-top: 97px !important;
    padding-left: 16px !important;
  }

  /* Overlay copy: "Pro Synthetic. Anti Slop." — center horizontally
     inside the VHS container. At 40px the text fills ~349px of 358px,
     leaving no visible centering margin. 32px brings it to ~280px
     so the centering is clearly readable. */
  #mobile-home > section:nth-child(7) > div:nth-child(2) > p {
    text-align: center !important;
    font-size: 32px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Email link — Figma: 25px, purple. Push down 24px from "Start a project". */
  #mobile-home > section:nth-child(7) > a {
    font-size: 25px !important;
    line-height: normal !important;
    letter-spacing: -1.25px !important;
    margin-top: 24px !important;
    padding-left: 16px !important;
  }


  /* 8. CLOSING — hotdog section restructure
     ─────────────────────────────────────────
     Goal: text ABOVE image in black; WOW logo centered inside image.

     Strategy: flex-column the section so static children stack
     vertically. Override absolute inline positioning on all three
     children. Logo stays absolute but anchored at bottom:140px
     (= 280px image height ÷ 2), transform:translate(-50%,50%)
     centres it in both axes within the image area regardless of
     text reflow.
     --------------------------------------------------------------- */

  /* Section: flex column, natural height (text + 280px image) */
  #mobile-home > section:nth-child(8) {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Hotdog image: pull out of absolute, become a static flex item */
  #mobile-home > section:nth-child(8) > img:nth-child(1) {
    position: static !important;
    order: 2 !important;
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    inset: auto !important;
    z-index: 0 !important;
  }

  /* Text: override absolute, go static above image, black */
  #mobile-home > section:nth-child(8) > p:nth-child(2) {
    position: static !important;
    order: 1 !important;
    color: #000 !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 30px !important;
    letter-spacing: -1px !important;
    text-align: center !important;
    padding: 24px 16px 20px !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* WOW logo: keep absolute, centre in the 280px image area.
     bottom:140px = midpoint of 280px image from section bottom.
     translateY(50%) shifts the logo's centre onto that midpoint. */
  #mobile-home > section:nth-child(8) > img:nth-child(3) {
    position: absolute !important;
    left: 50% !important;
    bottom: 140px !important;
    top: auto !important;
    transform: translate(-50%, 50%) !important;
    width: 80% !important;
    z-index: 1 !important;
  }


  /* ── Batch 3: About page mobile — refinement pass ─────────────── */
  /*                                                                  */
  /* Sections are direct children of #mobile-about in about.html:    */
  /*   nth-child(1) ABOUT INTRO                                      */
  /*   nth-child(2) CACTUS FRAME                                     */
  /*   nth-child(3) ABOUT CONT                                       */
  /*   nth-child(4) FOUNDERS                                         */
  /*   nth-child(5) TEAM                                             */
  /*   nth-child(6) WHERE WE CREATE                                  */
  /*   nth-child(7) CTA                                              */


  /* GLOBAL: overflow clip + nav clearance
     padding-top overrides the 120px inline style — 160px gives ~60px
     of clear air between the sticky nav bottom and the first headline. */
  #mobile-about {
    overflow-x: hidden !important;
    padding-top: 100px !important;
  }

  /* Section breathing room — inline is 30px, 48px is a slight step up
     that preserves editorial pacing without normalising into a grid. */
  #mobile-about > section {
    padding-bottom: 48px !important;
  }


  /* 1. ABOUT INTRO — "Image production has changed." needs 40px/40lh.
     HTML is set at 50px but that's oversized for 390px; 40px matches
     the typographic weight of the adjacent body blocks.
     Headline ("Seriously, why?") gets more space before the image —
     inline margin-bottom:16px → 48px for editorial breathing room.
     ----------------------------------------------------------------- */
  #mobile-about > section:nth-child(1) > p:nth-child(1) {
    margin-bottom: 48px !important;
  }

  #mobile-about > section:nth-child(1) > p:nth-child(3) {
    font-size: 40px !important;
    line-height: 40px !important;
    letter-spacing: -2px !important;
  }


  /* 2. CACTUS FRAME — "We don't generate images..." at 50px runs wide
     on 390px with the right-offset image. Scale to 40px/40lh to match
     the visual weight of similar editorial blocks across the page.
     ----------------------------------------------------------------- */
  #mobile-about > section:nth-child(2) > div:nth-child(2) {
    font-size: 40px !important;
    line-height: 40px !important;
  }


  /* 3. ABOUT CONT — "At a time when..." runs at 50px/50lh.
     Same treatment — scale to 40px/40lh.
     ----------------------------------------------------------------- */
  #mobile-about > section:nth-child(3) > p:nth-child(2) {
    font-size: 40px !important;
    line-height: 40px !important;
    letter-spacing: -2px !important;
  }


  /* 5. TEAM — image+overlay block: ensure position:relative is
     inherited so the absolute job-title column stays anchored.
     Role list (absolutely positioned div at right:0) hidden on mobile —
     overlaps image and creates visual clutter on narrow viewports.
     ----------------------------------------------------------------- */
  #mobile-about > section:nth-child(5) > div:nth-child(2) {
    position: relative !important;
    width: 100% !important;
  }

  #mobile-about > section:nth-child(5) > div:nth-child(2) > div:nth-child(2) {
    display: none !important;
  }


  /* 6. WHERE WE CREATE — workspace image is 100% wide with a fixed
     height of 201px. Right-aligned body text needs max-width to
     prevent full-bleed line lengths that kill readability.
     ----------------------------------------------------------------- */
  #mobile-about > section:nth-child(6) > p:nth-child(3) {
    max-width: 320px !important;
    margin-left: auto !important;
  }


  /* 7. CTA — "Start a project" at 100px/80lh is the centrepiece.
     Keep it. Lock email to 25px (clamp() is unpredictable) and push
     it down from "Start a project" — 16px inline was too tight.
     ----------------------------------------------------------------- */
  #mobile-about > section:nth-child(7) > a {
    font-size: 25px !important;
    line-height: normal !important;
    letter-spacing: -1.25px !important;
    margin-top: 32px !important;
  }


  /* ── Batch 4: How/Much page mobile (#mobile-how) ─────────────── */
  /*                                                                  */
  /* Sections are direct children of #mobile-how in how.html:        */
  /*   nth-child(1) HOW INTRO (Seriously, what?)                     */
  /*   nth-child(2) SERVICES (Photography / Moving Image / Illus.)   */
  /*   nth-child(3) HOW WE MAKE IT (Seriously, how + 4 blocks)       */
  /*   nth-child(4) SERIOUSLY CHEAP (pricing cards)                  */
  /*   nth-child(5) CTA                                              */

  /* Header clearance — matches About's 160px treatment */
  #mobile-how {
    overflow-x: hidden !important;
    padding-top: 100px !important;
  }

  /* Global section breathing — slightly more than the 30px inline */
  #mobile-how > section {
    padding-bottom: 48px !important;
  }

  /* 1. HOW INTRO — scale hero copy from 50px → 40px/40lh
     Same treatment as About sections for visual consistency */
  #mobile-how > section:nth-child(1) > p:nth-child(4) {
    font-size: 40px !important;
    line-height: 40px !important;
    letter-spacing: -2px !important;
  }

  /* 2. SERVICES — more vertical separation between service blocks */
  #mobile-how > section:nth-child(2) p:nth-child(odd) {
    margin-bottom: 4px !important;
  }
  #mobile-how > section:nth-child(2) p:nth-child(even) {
    margin-bottom: 24px !important;
  }
  /* Last caption: no extra margin */
  #mobile-how > section:nth-child(2) p:last-child {
    margin-bottom: 0 !important;
  }

  /* 3. HOW WE MAKE IT — headline block and methodology spacing */
  /* Extra space below "how" + subtitle block before numbered list */
  #mobile-how > section:nth-child(3) > div:nth-child(2) {
    margin-bottom: 40px !important;
  }
  /* More breathing between methodology blocks */
  #mobile-how > section:nth-child(3) > div:nth-child(3),
  #mobile-how > section:nth-child(3) > div:nth-child(4),
  #mobile-how > section:nth-child(3) > div:nth-child(5) {
    margin-bottom: 32px !important;
  }

  /* 4. SERIOUSLY CHEAP — headline and intro text breathing */
  #mobile-how > section:nth-child(4) > p:nth-child(1) {
    margin-bottom: 24px !important;
  }
  #mobile-how > section:nth-child(4) > p:nth-child(2) {
    margin-bottom: 24px !important;
  }

  /* "No locations" overlay: inline top:22px touches image top.
     Push down to sit comfortably inside the boots image. */
  #mobile-how > section:nth-child(4) > div:nth-child(3) > p {
    top: 56px !important;
  }
  /* More gap between pricing cards */
  #mobile-how > section:nth-child(4) > div:not(:last-child) {
    margin-bottom: 20px !important;
  }
  /* Internal card padding: slightly more vertical room */
  #mobile-how > section:nth-child(4) > div {
    padding: 28px 17px !important;
  }

  /* 5. CTA — "If you're an agency..." section breathing */
  #mobile-how > section:nth-child(5) > p:nth-child(1) {
    margin-bottom: 24px !important;
  }
  /* Gap between image and "Start a project".
     Height increase: inline 355px → 420px reveals more of the nun/basketball
     subject. img uses height:100% so it scales to fill the taller container. */
  #mobile-how > section:nth-child(5) > div {
    margin-bottom: 32px !important;
    height: 420px !important;
  }
  /* Email: lock to 25px and add visible gap from headline */
  #mobile-how > section:nth-child(5) > a {
    font-size: 25px !important;
    line-height: normal !important;
    letter-spacing: -1.25px !important;
    margin-top: 24px !important;
  }

  /* ── Batch 8: FAQ page mobile (#mobile-faq) ─────────────────────
     ──────────────────────────────────────────────────────────────
     DOM structure inside .m-faq:
       h1.m-faq__heading   — "Seriously, wise." 100px/80px
       p.m-faq__sub        — subtitle 25px
       15× .m-faq-item     — border-top + .m-faq-q (40px) + .m-faq-a
       .m-cactus           — div[265×318 right-aligned image] + inline <p>

     Key issues:
       — No header clearance. .m-faq has padding:40px top — same
         double-stack issue as contact. Zero inner, keep 160px wrapper.
       — .m-faq__sub has no line-height — implicit leading is tight.
       — .m-faq-item padding-top:20px and margin-bottom:32px are slightly
         compressed; bump both for more breathing around divider lines.
       — .m-faq-a line-height:24px is acceptable; 26px is a small gain.
       — .m-cactus margin-top:40px — increase for cleaner section break.
     ─────────────────────────────────────────────────────────────── */

  /* 1. HEADER CLEARANCE + OVERFLOW CLIP */
  #mobile-faq {
    overflow-x: hidden !important;
    padding-top: 100px !important;
  }

  /* .m-faq has padding:40px top — zero it so wrapper's 160px
     is the sole nav clearance source, preventing double-stacking. */
  #mobile-faq .m-faq {
    padding-top: 0 !important;
  }

  /* 2. PAGE TITLE — 100px/80px. If "Seriously," clips at 100px on
     358px content area, reduce to 80px/80px here. Checked in QA. */
  #mobile-faq .m-faq__heading {
    font-size: 80px !important;
    line-height: 80px !important;
  }

  /* 3. INTRO SUBTITLE — explicit line-height for 25px serif.
     Implicit leading is browser-default (~1.2 = 30px) — 32px is
     more considered. Keep margin-bottom:40px as-is. */
  #mobile-faq .m-faq__sub {
    line-height: 32px !important;
  }

  /* 4+7. FAQ ITEMS — more breathing above dividers, more below items.
     20→24px top padding; 32→36px bottom margin. Modest but visible. */
  #mobile-faq .m-faq-item {
    padding-top: 24px !important;
    margin-bottom: 36px !important;
  }

  /* 6. ANSWER TEXT — 24→26px line-height: slight improvement.
     95px left indent preserved — editorial asymmetry, matches Figma. */
  #mobile-faq .m-faq-a {
    line-height: 26px !important;
  }

  /* 8. CACTUS SECTION — more top breathing from the last FAQ item.
     40→56px. The cactus image (265×318, right-aligned) and inline
     statement <p> (50px/50px right-aligned) are both within safe
     bounds for 375px — no width fix needed. */
  #mobile-faq .m-cactus {
    margin-top: 56px !important;
  }


  /* ── Batch 7: Contact page mobile (#mobile-contact) ─────────────
     ──────────────────────────────────────────────────────────────
     DOM structure inside .m-contact:
       h1.m-contact__heading   — "Seriously, willing." 80px/80px
       p.m-contact__intro      — inline style="width:293px"
       form#contact-form-mobile — labels + inputs + textarea + send
       div (no class)          — inline style="width:357px;height:532px" image

     Key issues:
       — No header clearance: .m-contact has padding:40px top internally.
         Adding 160px to wrapper + zeroing inner 40px = 160px total.
       — .m-cf-input margin-bottom:8px → too tight between fields.
       — .m-cf-textarea height:50px → too small for Note field.
       — image div width:357px > 343px content area at 375px → overflow.
     ─────────────────────────────────────────────────────────────── */

  /* 1. HEADER CLEARANCE + OVERFLOW CLIP */
  #mobile-contact {
    overflow-x: hidden !important;
    padding-top: 100px !important;
  }

  /* .m-contact adds its own padding:40px top. Remove it to prevent
     double-stacking — wrapper's 160px is the sole nav clearance source. */
  #mobile-contact .m-contact {
    padding-top: 0 !important;
  }

  /* 2. HERO TITLE — keep 80px editorial scale. No type change.
     Current margin-bottom:24px is correct. No override needed. */

  /* 3. INTRO COPY — 24→26px line-height, tighten gap to form slightly.
     293px width is intentional editorial asymmetry — preserved. */
  #mobile-contact .m-contact__intro {
    line-height: 26px !important;
    margin-bottom: 32px !important;
  }

  /* 4. FORM FIELD SPACING — 8px inter-field margin reads cramped.
     20px gives visible breathing between label/input pairs. */
  #mobile-contact .m-cf-input,
  #mobile-contact .m-cf-textarea {
    margin-bottom: 20px !important;
  }

  /* Note textarea: slightly more height for message entry */
  #mobile-contact .m-cf-textarea {
    height: 64px !important;
  }

  /* 5. SEND BUTTON — current margin-top:16px is appropriate. No change. */

  /* 6. JUMPING IMAGE — max-width:100% caps the 357px div at the 343px
     content area on 375px viewports (padding 16px each side).
     At 390px content = 358px, so 357px still renders as-intended.
     margin-top: inline 24px → 40px for clearer breathing from Send. */
  #mobile-contact .m-contact > div {
    max-width: 100% !important;
    margin-top: 40px !important;
  }


  /* ── Batch 6: Case study pages mobile — system pass ─────────────
     ──────────────────────────────────────────────────────────────
     Architecture: [id^="mobile-case"] shared attribute selector
     covers all 9 case pages without per-page rule repetition.

     Two HTML systems exist inside the wrapper:

     FULL CASE (7 pages — blue, food, red-room, smokers, water,
     wizards, oranges): uses .m-chead + .m-crow* + .m-casenav
     Defined in per-page <style> blocks. Key issues:
       — .m-chead__img img: fixed 358×240px → fluid + taller
       — .m-crow-wide img: fixed 358px → overflows at 375px
       — row padding-bottom: 8px → thumbnail-tight
       — .m-casenav: 24px top margin → too compressed

     STUB CASE (2 pages — mtb, open-wide): uses .m-case + .m-case-nav
     Different DOM, no gallery rows. Minor breathing fix only.
     ─────────────────────────────────────────────────────────────── */

  /* 1. HEADER CLEARANCE + OVERFLOW CLIP
     Matches About/How/Gallery treatment. Wrapper has no inline
     padding-top, so this is the sole source of nav clearance. */
  [id^="mobile-case"] {
    overflow-x: hidden !important;
    padding-top: 100px !important;
  }

  /* 2. HERO IMAGE — fluid + taller crop.
     Fixed 358px → width:100% prevents any overflow edge cases.
     240→300px height gives the hero more editorial weight. */
  [id^="mobile-case"] .m-chead__img img {
    width: 100% !important;
    height: 300px !important;
  }

  /* 3. HERO TEXT BLOCK — more breathing above and below the copy block */
  [id^="mobile-case"] .m-chead__text {
    padding: 16px 15px 32px !important;
  }

  /* 4. HERO TITLE — modest gap increase to subtitle */
  [id^="mobile-case"] .m-chead__title {
    margin-bottom: 8px !important;
  }

  /* 5. HERO SUBTITLE — line-height was 17px (= font-size, no air).
     22px restores the italic's natural optical weight. */
  [id^="mobile-case"] .m-chead__sub {
    line-height: 22px !important;
    margin-bottom: 16px !important;
  }

  /* 6. BODY COPY — 24→26px: small but legible improvement */
  [id^="mobile-case"] .m-chead__desc {
    line-height: 26px !important;
  }

  /* 7. IMAGE GRID RHYTHM — all row types share the same 8px
     bottom padding. Doubling to 16px reads editorial, not
     thumbnail-pack. Asymmetric layouts are preserved. */
  [id^="mobile-case"] .m-crow,
  [id^="mobile-case"] .m-crow-4,
  [id^="mobile-case"] .m-crow-6,
  [id^="mobile-case"] .m-crow-8,
  [id^="mobile-case"] .m-crow-wide {
    padding-bottom: 16px !important;
  }

  /* 8. WIDE IMAGE FLUID FIX — 358px fixed overflows at 375px viewport
     (.m-crow-wide has 15px horizontal padding → content = 345px < 358px).
     Base rule: width:100%, keep 240px landscape crop height.
     Tall/land modifier rules follow after and have same specificity —
     cascade order means they win on height:auto for their variants. */
  [id^="mobile-case"] .m-crow-wide img {
    width: 100% !important;
    height: 240px !important;
  }
  [id^="mobile-case"] .m-crow-wide--tall img {
    height: auto !important;
  }
  [id^="mobile-case"] .m-crow-wide--land img {
    height: auto !important;
  }

  /* 9. PAGINATION — full case pages
     24→40px top margin puts clear air above the border-top separator.
     Internal padding increased slightly for comfort. */
  [id^="mobile-case"] .m-casenav {
    margin-top: 40px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* 10. PAGINATION — stub case pages (mtb, open-wide)
     .m-case-nav sits immediately after body copy; breathing fix. */
  [id^="mobile-case"] .m-case-nav {
    margin-top: 16px !important;
    padding-top: 28px !important;
  }


  /* ── Batch 5: Gallery page mobile (#mobile-gallery) ─────────────
     Structure (direct children):
       div:nth-child(1) — card container (flex column, 7× <a> cards)
       div:nth-child(2) — CTA block
       footer           — .footer-mobile (covered by global rules)

     Cards use absolute positioning internally:
       div   — image (position:absolute; top:15px)
       p:nth-child(2) — title (position:absolute; top:264px)
       p:nth-child(3) — subtitle (position:absolute; top:294px)
     ────────────────────────────────────────────────────────────── */

  /* Header clearance + overflow clip — same treatment as About/How */
  #mobile-gallery {
    overflow-x: hidden !important;
    padding-top: 100px !important;
  }

  /* Card container: remove default padding-top (8px inline) */
  #mobile-gallery > div:nth-child(1) {
    padding-top: 0 !important;
  }

  /* Cards: increase height from 315px → 360px for more image/title breathing.
     Add 20px gap between cards (inline uses 8px). */
  #mobile-gallery > div:nth-child(1) > a {
    height: 360px !important;
    margin-bottom: 20px !important;
  }

  /* Card title: shift down with the increased card height.
     264→268 keeps the visual relationship with the 240px image. */
  #mobile-gallery > div:nth-child(1) > a > p:nth-child(2) {
    top: 268px !important;
    line-height: 27px !important;
  }

  /* Card subtitle: follow the title shift. 294→302 maintains the
     tight pairing while clearing multi-line title overflow. */
  #mobile-gallery > div:nth-child(1) > a > p:nth-child(3) {
    top: 302px !important;
    line-height: 20px !important;
  }

  /* CTA block: push down from last card with more breathing room */
  #mobile-gallery > div:nth-child(2) {
    padding-top: 32px !important;
  }

  /* Agency text: more gap before smoke image */
  #mobile-gallery > div:nth-child(2) > p:first-child {
    margin-bottom: 24px !important;
  }

  /* psmoke image: 8px from agency text, 32px before "Start a project" */
  #mobile-gallery > div:nth-child(2) > div {
    margin-top: 8px !important;
    margin-bottom: 32px !important;
  }

  /* Email link: lock to 25px — matches How/About CTA treatment */
  #mobile-gallery > div:nth-child(2) > a {
    font-size: 25px !important;
    line-height: normal !important;
    letter-spacing: -1.25px !important;
    margin-top: 24px !important;
  }


  /* ── Footer refinements — GLOBAL (all mobile pages) ─────────────
     Applied to .footer-mobile__* directly; scoped inside
     @media (max-width: 768px) so desktop is never affected.
     ────────────────────────────────────────────────────────────── */

  /* Guild title: 18px Jacquard reads too small. 22px holds its own. */
  .footer-mobile__easter-egg-title {
    font-size: 22px !important;
    line-height: 24px !important;
  }

  /* Credits list: 12px is too fine. 15px is readable without competing. */
  .footer-mobile__credits {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  /* Book icon: 32px feels decorative. 44px anchors the notes block. */
  .footer-mobile__book img {
    width: 44px !important;
  }

  /* Notes label: 10px is invisible. 13px is subtle but legible. */
  .footer-mobile__book p {
    font-size: 13px !important;
    line-height: 16px !important;
    width: auto !important;
  }

  /* Tagline row: flex so text and Silly Wizards logo share a baseline.
     space-between aligns logo to the same right rhythm as the wordmark. */
  .footer-mobile__tagline {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Silly Wizards logo: 24px inline is too small. 32px matches context. */
  .footer-mobile__tagline img {
    height: 32px !important;
    margin-left: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Wordmark logo: constrain to footer content width so it doesn't
     overflow on narrow viewports (e.g. 375px). height:auto preserves
     aspect ratio when the image is narrower than 361px. */
  .footer-mobile__wordmark img {
    max-width: 100% !important;
    height: auto !important;
  }

}

/* ── Mobile portrait only: hero video full-frame ─────────────────────
   object-fit:cover (inline) crops the video. Override to contain so the
   full video is visible without cropping in portrait orientation.
   Desktop is unaffected — #mobile-home is display:none on desktop.     */
@media (max-width: 768px) and (orientation: portrait) {
  #mobile-home video {
    object-fit: contain !important;
  }
}