/* FLOW — mobile pass (2026-10-07)
   Loaded LAST on every page so these rules win over the per-page sheets
   without !important wars. Everything here is scoped to phone/tablet widths
   or to touch input; desktop rendering is untouched.

   What this file fixes, found by rendering every page at 320 / 375 / 768px:
     1. Sideways scroll on the three product pages (hidden swatch tooltip
        stretched the layout to 414px) and on Vision at 320px (the
        "Configure yours" menu had a fixed 300px min-width).
     2. Tap targets under 44px — the menu button was 26×22, the
        Inside-FLOW component ticks 18×20, footer links 26px tall, the
        Where-to-Buy territory chips 35px, standalone text CTAs ~19px.
     3. Text set at 8.5–9.5px (HUD labels, form labels, gallery captions,
        territory chips) — unreadable on a phone. Floor is now 10.5px for
        spaced-caps labels and 11px+ for anything you have to read.
     4. Small layout breaks: gallery thumbs wrapping 4+1, the Ecologi
        project card overlapping the bottom of the world map, the hero
        scroll cue hidden on phones (first screen had no hint to scroll).
   Plus touch affordances: product links inside the mobile menu, and
   "hover" copy swapped for "tap" copy on touch devices. */

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

/* ---------- 0 · Shared hero height ----------
   100vh on iOS includes the area under the collapsing address bar, so the
   pinned hero jumped as the bar hid/showed. svh = the small, stable
   viewport height; 100vh stays first as the fallback. */
.hero{height:100vh;height:100svh;}

/* ---------- 1 · Nav (≤900px hamburger) ---------- */
@media (max-width:900px){
  /* 44×44 hit area, same three lines in the same visual spot: the button
     grows around the lines and the negative margin pulls it back so the
     icon still sits 24px from the edge. */
  .nav-toggle{width:44px;height:44px;margin:-11px -9px -11px 0;padding:0 9px;}
  .nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* The products dropdown is hover-only on desktop and was hidden outright
     on mobile, so reaching a product page took two taps via the hub. In the
     slide-down panel it's now shown as a plain, always-open sub-list under
     "Products" — no hover state involved, so the iOS double-tap problem the
     original comment warns about doesn't apply. */
  .nav .links .nav-dropdown{display:block;position:static;padding:0 0 10px;opacity:1;visibility:visible;transform:none;transition:none;}
  .nav .links .nav-dropdown-inner{min-width:0;padding:0;background:none;border:0;}
  .nav .links .nav-dropdown-inner a{padding:11px 0 11px 18px;border-bottom:0;font-size:13px;letter-spacing:.06em;text-transform:none;font-weight:500;color:rgba(255,255,255,.66);}
  .nav .links .nav-item-dropdown > a{border-bottom:0;padding-bottom:8px;}
  .nav .links .nav-item-dropdown{border-bottom:1px solid rgba(255,255,255,.14);}
  body.on-light .nav .links .nav-dropdown-inner a, body.nav-light .nav .links .nav-dropdown-inner a{color:rgba(0,0,0,.6);}
  body.on-light .nav .links .nav-item-dropdown, body.nav-light .nav .links .nav-item-dropdown{border-bottom-color:rgba(0,0,0,.1);}
  .nav .links{max-height:100vh;max-height:100dvh;overscroll-behavior:contain;}
}

/* ---------- 2 · Footer ---------- */
@media (max-width:700px){
  /* line-height:2 at 13px gave 26px-tall links; padding brings each to 44px
     while keeping roughly the same rhythm. */
  footer .cols{gap:40px 56px;}
  footer .cols a{line-height:1.5;padding:12px 0;}
  footer .cols .col-title{margin-bottom:4px;}
}

/* ---------- 3 · Standalone text CTAs ----------
   Underlined caps links ("Read the vision", "Directions", "Configure" …)
   were ~19px tall. Extra padding ABOVE the text with a matching negative
   margin enlarges the tappable box without moving the text or the
   underline (which is the bottom border, so padding-bottom must stay). */
@media (hover:none) and (pointer:coarse){
  .page-home .fd-link,.page-home .rc-link,.wt-link,.s-link,.v-link,.pd-cta-secondary,.pd-commission-link,.cmp-trigger:not(.cmp-trigger-big .cmp-trigger),.fx-br-link{
    padding-top:14px;margin-top:-14px;
  }
  .pd-cta-secondary{display:inline-block;}
}

/* ---------- 4 · Home ---------- */
@media (max-width:900px){
  /* Scroll cue back on phones: without it the first screen is an amp on
     black with no headline and no hint that the page reveals on scroll.
     It fades out by ~30% of the runway, before the bottom caption fades in,
     so the two never overlap. */
  .fx-cue{display:flex;bottom:28px;font-size:10.5px;}
  .fx-cue i{height:34px;}
  .fx-br-el{font-size:10.5px;}
  .fx-br-link{font-size:11px;}
  .page-home .flow-listening figcaption,.page-home .flow-listening figcaption a{font-size:11px;}
  .rg-price span{font-size:11px;}
  .rg-link,.page-home .rc-link{font-size:11px;}
}

/* Hero, phone layout — rebuilt 2026-10-07 (evening) from Marton's iPhone
   screenshot. Problems it fixes:
   · the amp video was 118vw wide, so the copper frame (16px inset) sliced
     through the chassis;
   · "Sound, naturally." sat on top of the amp, fighting it for attention;
   · the Harmony / FLOW One / Discover block was centred with a transform,
     which the reduced-motion rule (transform:none !important) cancels —
     so on any phone with Reduce Motion on it slid half off-screen;
   · the scroll cue sat inside the frame, colliding with that block.
   New stack, top to bottom: tagline → amp → model block (all inside the
   frame), and the scroll cue on its own below the frame. */
@media (max-width:700px){
  .fx-frame{inset:84px 16px 92px;}
  .fx-title{top:108px;transform:none;font-size:16.5vw;line-height:.98;}
  .fx-l{margin-left:9vw;} .fx-r{margin-right:8vw;}
  /* shorter slide-in so the words assemble inside the frame, not off-screen */
  .fx-l{transform:translate3d(calc((1 - min(1, var(--fx-p,0) * 1.45)) * -12vw),0,0);}
  .fx-r{transform:translate3d(calc((1 - min(1, var(--fx-p,0) * 1.45)) * 12vw),0,0);}
  .fx-media{width:92vw;top:54%;}
  .fx-br{left:0;right:0;bottom:116px;margin:0 auto;width:max-content;max-width:calc(100vw - 48px);transform:none;}
  .fx-cue{bottom:14px;gap:8px;}
  .fx-cue i{height:30px;}
}
/* very short phones (SE, landscape-ish): keep the amp clear of the tagline */
@media (max-width:700px) and (max-height:640px){
  .fx-title{font-size:13vw;}
  .fx-media{width:80vw;top:56%;}
}

/* ---------- 5 · Product pages ---------- */
@media (max-width:700px){
  /* (a) Swatch tooltip — the cause of the sideways scroll. It was a 320px
     box anchored to the swatch's left edge; even while invisible it still
     takes up layout, so on the second Signature swatch it reached x=414
     and widened the whole page. On phones it now anchors to the full
     swatch row instead, and the pointer arrow is dropped (it can't point
     at both swatches from one fixed spot). */
  .pd-tier .swatch-row{position:relative;}
  .swatch.has-tip{position:static;}
  .sw-tip{left:0;right:0;width:auto;max-width:none;}
  .sw-tip::after{display:none;}
  .sw-tip-eye{font-size:10.5px;}

  /* (b) Inside FLOW — component ticks were 18×20. Same visual dash, 44px
     tall hit zone; arrows keep their 36px circle with an invisible 44px
     ring around it. */
  .pd-eng-tick{padding:21px 0;}
  .pd-eng-arrow{position:relative;}
  .pd-eng-arrow::before{content:"";position:absolute;inset:-4px;}

  /* (c) Gallery — five thumbs wrapped 4 + 1 with a lone thumb on its own
     row. Now one row that scrolls sideways (the last thumb peeks in to
     show there's more), and the hero image itself takes left/right
     swipes (pd-gallery.js). */
  .pd-gallery-thumbs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:12px;margin-left:-22px;margin-right:-22px;padding:0 22px 6px;scroll-snap-type:x proximity;scroll-padding:0 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .pd-gallery-thumbs::-webkit-scrollbar{display:none;}
  .pd-gallery-thumb{flex:none;width:80px;scroll-snap-align:start;}
  .pd-gallery-thumb-img{width:68px;height:68px;}
  .pd-gallery-thumb-label{font-size:10.5px;letter-spacing:.04em;line-height:1.35;text-align:center;}
  .pd-gallery-hero{touch-action:pan-y;}
}
/* (d) Readability floor — phones and tablets */
@media (max-width:900px){
  .pd-price span{font-size:11px;}
  .pd-configurator-caption{font-size:11px;}
  .pd-configurator-drag-hint{font-size:11px;}
  .sp-cell dt{font-size:11px;letter-spacing:.2em;}
  .pd-tier-head h4,.pd-tier-price{font-size:11.5px;}
  .pd-gallery-thumb-label{font-size:10.5px;}
  .pd-configurator-placeholder p,.pd-configurator-placeholder span{font-size:11px;}
}

/* ---------- 6 · Vision (story.html) ---------- */
@media (max-width:900px){
  .vb-conf-menu{min-width:0;width:min(300px,calc(100vw - 44px));}
  .vb-conf-menu a{gap:12px;padding:17px 16px;}
  .vb-conf-el{letter-spacing:.16em;}
  .vb-conf-btn{padding-top:14px;margin-top:-14px;}
  .vb-conf-el{font-size:10.5px;}
  .vf-ax{font-size:10.5px;}
  .vf-hint-touch{font-size:11px;}
  .vn-el,.vb-tier{font-size:11px;}
  .vl-hud,.vl-status{font-size:10px;letter-spacing:.16em;}
  .vi-hint{font-size:11px;}
  .vh-cue span{font-size:10.5px;}
}

/* ---------- 7 · Sustainability ---------- */
/* "Hover a point" copy only makes sense with a mouse — touch devices get
   tap copy (same pattern as the Vision page's .vf-hint-fine/.vf-hint-touch). */
.sm-hint-touch{display:none;}
@media (hover:none){.sm-hint-fine{display:none;}.sm-hint-touch{display:inline;}}
/* Project picker — built by sustainability.js from the map pins. On a
   phone the map is ~330px wide and the three East-African pins sit ~7px
   apart, so they can't be tapped reliably; these chips are the touch way
   to pick a project. Hidden on desktop, where hovering the map works. */
.sm-chips{display:none;}
@media (max-width:900px){
  .sm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
  .sm-chip{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid #ddd6cc;color:#555;font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .sm-chip.is-on{border-color:var(--copper);color:#111;background:rgba(153,102,50,.08);}
  /* The project card used to be absolutely positioned at the bottom of a
     150px box; taller cards grew upward and covered the bottom of the map
     (South America and southern Africa were hidden). Stacking every card
     in one grid cell lets the box size to the tallest card instead. */
  .sm-cards{display:grid;min-height:0;margin-top:14px;}
  .sm-card{position:relative;inset:auto;grid-area:1 / 1;}
  .sg-lab,.sg-cue{font-size:11px;}
}

/* ---------- 8 · Where to Buy (contact.html) ---------- */
@media (max-width:900px){
  .wt-chip{min-height:44px;font-size:10.5px;letter-spacing:.12em;}
  .wt-field span,.wt-details dt{font-size:11px;letter-spacing:.24em;}
  .wt-tag{font-size:11px;}
  .wt-legend span,.wt-key span{font-size:10.5px;}
  /* phone / web links in the dealer card were 19px tall */
  .wt-details dd a{display:inline-block;padding:12px 0;margin:-12px 0;}
}

/* ---------- 9 · Products hub ---------- */
@media (max-width:700px){
  .products-grid-panel .cmp-trigger-big .cmp-trigger{padding:16px 22px;}
}

/* ---------- 10 · Products hub: model logos instead of typed names ----------
   (2026-10-07, Marton) The cards read "FLOW One MK2" in plain Montserrat
   while every other mention of a model on the site uses its logotype.
   Same white MK2 logos as the homepage range and product heroes; the
   alt text keeps the name for screen readers and search. */
.page-products .p-card .p-meta h3.p-logo{line-height:0;margin:0 0 14px;}
.page-products .p-card .p-meta h3.p-logo img{height:24px;width:auto;max-width:100%;}
@media (max-width:700px){.page-products .p-card .p-meta h3.p-logo img{height:21px;}}

/* ---------- 11 · Product hero (phones): lift the amp ----------
   (2026-10-07, Marton) the amp + reflection ran straight into the
   "Harmony of the Forest" line. Whole stage moves up a touch and the
   name block gets real breathing room below the horizon line. */
@media (max-width:900px){
  .pd-hero{padding-top:86px;}
  /* pass 2 (Marton's iPhone screenshot): the amp sits directly under the
     ghost model word, and the whole stack (amp → horizon → name → price →
     audition button) closes up so the button rises with it */
  .pd-hero:not(.pd-hero-short) .pd-product{bottom:1vw;}
  .pd-hero:not(.pd-hero-short) .pd-stage{height:calc(100vw * 0.62 + 6vw);}
  .pd-hero-bar{margin-top:22px;gap:20px;}
}
/* Specification heading + model logo, +20% on phones (Marton, 2026-10-07):
   30px → 36px and 20px → 24px — they read as a footnote, not a section. */
@media (max-width:900px){
  .pd-spec .sp-eyebrow{font-size:36px;}
  .sp-logo{height:24px;}
}

/* ---------- 12 · Vision page, phones (2026-10-07, pass 2) ---------- */
/* oscilloscope: hint under the screen (all widths — tapping works on desktop
   too), and a taller screen on phones so the wave reads */
.vl-hint{margin:16px auto 0;max-width:1080px;text-align:center;font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4);}
@media (max-width:900px){
  .vl-scope{height:210px;}
  /* flow field: the Flow / Anxiety / Boredom readout now sits under the
     chart (moved there by vision-interactive.js) — tighten its spacing */
  .vf-chart-wrap .vf-read{margin-top:30px;padding-top:24px;min-height:170px;}
  .vf-chart-wrap .vf-cite{margin-top:24px;}
  /* soldering: the scene was a 78vw strip with the iron cropped off the
     top; a taller window shows iron, board and parts together */
  .vm-trace{height:118vw;max-height:620px;}
}

/* ---------- 13 · Sustainability: plant your own tree ----------
   Once the forest is grown the cue changes from "Scroll to plant" to the
   tap/click prompt (text comes from data-plant, set by sustainability.js)
   and fades away after the first tree is planted. */
.sg-cue{pointer-events:none;white-space:nowrap;}
.sg.is-done .sg-cue[data-plant]{opacity:1;font-size:0;letter-spacing:0;}
.sg.is-done .sg-cue[data-plant]::after{content:attr(data-plant);font-size:10.5px;letter-spacing:.26em;color:var(--copper);padding:9px 16px;background:rgba(247,244,238,.92);border:1px solid rgba(153,102,50,.35);}
.sg.is-done.has-mine .sg-cue{opacity:0;}
@media (max-width:900px){
  .sg.is-done .sg-cue[data-plant]::after{font-size:11px;}
  /* a little more runway after the forest completes, so there's time to
     notice the prompt and plant before the section scrolls away */
  .sg{height:205vh;}
}

/* ---------- 14 · Homepage review quote (phones) ----------
   "and not obsess about the kit." was left-aligned with the closing mark
   stranded at the far right; it now ends flush right, against the mark. */
@media (max-width:700px){
  .flow-listening-ending{text-align:right;margin-right:34px;}
}

/* ---------- 15 · Product hero: room under the audition button ----------
   The bar also carries .wrap, and the later `.wrap{padding:0 22px}` reset
   its 56px bottom padding to 0 — the button was actually being clipped by
   a few px at the hero's bottom edge. Higher-specificity fix. */
@media (max-width:900px){
  .pd-hero .pd-hero-bar{padding-bottom:52px;}
}

/* ---------- 16 · Product review quotes ----------
   (Marton, 2026-10-07) Same face as the homepage's "relax into the music":
   Cormorant Garamond italic — Liberation Serif read heavier and more
   generic. Cormorant sets smaller on the body, hence the ~12% size bump.
   The reviewer line gets a soft black pool behind it so it stays legible
   over the brighter parts of the forest / wave / mountain photographs. */
.pd-elemental-quote blockquote{font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(26px,3.5vw,45px);line-height:1.22;letter-spacing:-.01em;}
.pd-quote-one blockquote{font-size:clamp(33px,4.5vw,58px);}
.pd-elemental-quote figcaption{position:relative;isolation:isolate;padding:14px 28px;}
.pd-elemental-quote figcaption::before{content:"";position:absolute;inset:-18px -40px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.78),rgba(0,0,0,.5) 55%,rgba(0,0,0,0));}
.pd-elemental-contained .pd-elemental-quote figcaption::before{display:none;}

/* ---------- 17 · Distribution map (contact.html), phones ----------
   (Marton, 2026-10-07: "territories when clicked don't stay in the map
   widget and bug all over")
   · The territory card was a position:fixed bottom sheet. It covered the
     "Browse territories" button and half the page, and on iOS Safari the
     page's own text painted on top of it (fixed element inside an
     isolated, overflow:hidden section). It now opens IN the map widget:
     a full-width panel directly under the map, in normal page flow, and
     contact-page.js scrolls it into view.
   · The Browse list was anchored to the right edge of its 176px button,
     so its 300px menu opened half off-screen to the left. It now spans the
     full width under the button row. */
@media (max-width:900px){
  .wt-pop{position:relative;left:auto !important;top:auto !important;right:auto;bottom:auto;width:auto;max-height:none;overflow:visible;margin:12px 12px 0;padding:32px 22px 30px;box-shadow:0 20px 60px rgba(0,0,0,.7);}
  .wt-tools{position:relative;}
  .wt-browse{position:static;}
  .wt-list{left:0;right:0;width:auto;max-height:55vh;}
  .wt-list button{min-height:44px;font-size:13px;}
  .wt-pop-x{width:44px;height:44px;right:4px;top:2px;}
}