/* ============================================================
   VELOCITY X — MOBILE LAYER
   Touch-first redesign of the VELOCITY X experience (<= 820px).
   Desktop layout is untouched above the breakpoint.
   Faithful copy of the design's vx-mobile.css, with vx- classes
   renamed to hm- to match this build's markup.
   ============================================================ */

/* mobile-only furniture is inline display:none — revealed below */
@media (max-width: 820px) {

  /* ---------- 1. GLOBAL RHYTHM ---------- */
  html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  body { font-size: 15.5px; padding-bottom: 0 !important; }
  .hm-scan { opacity: .32 !important; }
  .hm-cursor { display: none !important; }
  ::-webkit-scrollbar { width: 0; height: 0; }

  /* comfortable gutters everywhere */
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }
  section[data-m="services"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* generic desktop grids collapse to a single readable column */
  [style*="grid-template-columns:repeat(12"],
  [style*="grid-template-columns: repeat(12"] {
    display: flex !important; flex-direction: column !important; gap: 26px !important;
    align-items: stretch !important;
  }
  [style*="grid-template-columns:repeat(12"] > *,
  [style*="grid-template-columns: repeat(12"] > * { grid-column: auto !important; width: 100% !important; max-width: none !important; }

  /* both the authored form and the dc runtime's re-serialized form
     (space after ':' and ',') — otherwise 3/4-col grids never collapse */
  [style*="grid-template-columns:repeat(2,1fr"],
  [style*="grid-template-columns: repeat(2, 1fr"],
  [style*="grid-template-columns:repeat(3,1fr"],
  [style*="grid-template-columns: repeat(3, 1fr"],
  [style*="grid-template-columns:repeat(4,1fr"],
  [style*="grid-template-columns: repeat(4, 1fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns: 1fr 1.5fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* nothing sits right-aligned on a phone */
  [style*="text-align:right"],
  [style*="text-align: right"] { text-align: left !important; }
  [style*="justify-content:flex-end"],
  [style*="justify-content: flex-end"] { justify-content: flex-start !important; }

  /* ---------- 2. NAV — compact HUD + drawer ---------- */
  [data-m="nav"] { padding: 12px 16px !important; background: rgba(8,9,11,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(199,204,209,.12) !important; }
  [data-m="navlinks"], [data-m="navcta"] { display: none !important; }
  [data-m="burger"] {
    display: flex !important; flex-direction: column; justify-content: center; gap: 5px;
    width: 48px; height: 48px; margin-right: -10px; padding: 0 11px;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  [data-m="burger"] i { display: block; height: 1.5px; background: #EDF0F2; transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease, width .45s cubic-bezier(.16,1,.3,1); }
  [data-m="burger"] i:nth-child(1) { width: 26px; }
  [data-m="burger"] i:nth-child(2) { width: 17px; margin-left: auto; }
  body[data-menu="1"] [data-m="burger"] i:nth-child(1) { transform: translateY(3.2px) rotate(45deg); background: var(--accent,#18E6E0); }
  body[data-menu="1"] [data-m="burger"] i:nth-child(2) { width: 26px; transform: translateY(-3.2px) rotate(-45deg); background: var(--accent,#18E6E0); }

  [data-m="drawer"] {
    display: flex !important; position: fixed; inset: 0; z-index: 940;
    flex-direction: column; justify-content: space-between;
    padding: 92px 22px calc(30px + env(safe-area-inset-bottom));
    background: #08090B;
    background-image: radial-gradient(90% 60% at 50% 0%, rgba(var(--accent-rgb,24,230,224),.13), transparent 62%);
    opacity: 0; pointer-events: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .72s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  }
  body[data-menu="1"] [data-m="drawer"] { opacity: 1 !important; pointer-events: auto !important; clip-path: inset(0 0 0 0) !important; }
  body[data-menu="1"] { overflow: hidden; }

  [data-m="drawer"] a[data-mi] {
    display: flex; align-items: baseline; gap: 16px;
    padding: 13px 0; border-bottom: 1px solid rgba(199,204,209,.1);
    font-family: 'Saira Condensed'; font-weight: 800; text-transform: uppercase;
    font-size: 2.15rem; line-height: 1; letter-spacing: .01em; color: #EDF0F2;
    opacity: 0; transform: translateY(22px);
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), color .3s;
  }
  [data-m="drawer"] a[data-mi]::before {
    content: attr(data-mi); font-family: 'JetBrains Mono'; font-weight: 400;
    font-size: 10px; letter-spacing: .14em; color: var(--accent,#18E6E0); transform: translateY(-.5em);
  }
  [data-m="drawer"] a[data-mi]:active { color: var(--accent,#18E6E0); }
  body[data-menu="1"] [data-m="drawer"] a[data-mi] { opacity: 1 !important; transform: none !important; }
  body[data-menu="1"] [data-m="drawer"] a[data-mi]:nth-of-type(1) { transition-delay: .10s; }
  body[data-menu="1"] [data-m="drawer"] a[data-mi]:nth-of-type(2) { transition-delay: .16s; }
  body[data-menu="1"] [data-m="drawer"] a[data-mi]:nth-of-type(3) { transition-delay: .22s; }
  body[data-menu="1"] [data-m="drawer"] a[data-mi]:nth-of-type(4) { transition-delay: .28s; }
  body[data-menu="1"] [data-m="drawer"] a[data-mi]:nth-of-type(5) { transition-delay: .34s; }
  body[data-menu="1"] [data-m="drawer"] a[data-mi]:nth-of-type(6) { transition-delay: .40s; }
  body[data-menu="1"] [data-m="drawer"] a[data-mi]:nth-of-type(7) { transition-delay: .46s; }
  [data-m="drawer-foot"] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease .5s, transform .6s cubic-bezier(.16,1,.3,1) .5s; }
  body[data-menu="1"] [data-m="drawer-foot"] { opacity: 1 !important; transform: none !important; }

  /* ---------- 3. THUMB DOCK — persistent actions ---------- */
  [data-m="dock"] {
    display: grid !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 930;
    grid-template-columns: 1fr 1.35fr; gap: 1px;
    background: rgba(199,204,209,.16);
    border-top: 1px solid rgba(199,204,209,.16);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(120%); transition: transform .55s cubic-bezier(.16,1,.3,1);
  }
  body[data-dock="1"] [data-m="dock"] { transform: none !important; }
  body[data-menu="1"] [data-m="dock"] { transform: translateY(120%) !important; }
  [data-m="dock"] a {
    display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 60px;
    font-family: 'JetBrains Mono'; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  }
  [data-m="dock"] a:first-child { background: #0B0D10; color: #EDF0F2; }
  [data-m="dock"] a:last-child { background: var(--accent,#18E6E0); color: #08090B; font-weight: 500; }
  [data-m="dock"] a:active { filter: brightness(.85); }
  [data-m="dockpad"] { display: block !important; height: calc(60px + env(safe-area-inset-bottom)); background: #08090B; }

  /* ---------- 4. HERO ---------- */
  [data-m="hero"] { height: 100svh !important; min-height: 600px !important; }
  [data-m="hero"] .hm-brk { width: 14px; height: 14px; }
  [data-m="hero-rail"] { top: 74px !important; left: 20px !important; right: 20px !important; font-size: 9.5px !important; letter-spacing: .1em !important; }
  [data-m="hero-copy"] { padding: 0 20px 16svh !important; }
  [data-m="hero-copy"] h1 { font-size: clamp(3.4rem, 19vw, 6.2rem) !important; line-height: .84 !important; }
  [data-m="hero-copy"] [data-reveal="rise"][data-delay=".1s"] { font-size: 10px !important; letter-spacing: .22em !important; gap: 10px !important; }
  [data-m="hero-hud"] { left: 20px !important; right: 20px !important; bottom: 92px !important; flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
  [data-m="hero-hud"] p { max-width: 100% !important; font-size: 14.5px !important; line-height: 1.65 !important; }
  [data-m="hero"] [data-m="cue"] { display: none !important; }

  /* ---------- 5. TICKER ---------- */
  [data-m="ticker"] > div { font-size: 15px !important; animation-duration: 22s !important; }

  [style*="hm-ticker"] { font-size: 15px !important; }
  [style*="hm-ticker"] > span { gap: 22px !important; padding-right: 22px !important; }

  /* ---------- 6. EDITORIAL SECTIONS ---------- */
  section { padding-top: clamp(72px, 11vh, 100px) !important; padding-bottom: clamp(72px, 11vh, 100px) !important; }
  [data-m="studio"] { min-height: 0 !important; }
  [data-m="studio"] h2 { font-size: clamp(2.3rem, 10.5vw, 3.6rem) !important; line-height: .94 !important; }
  [data-m="studio"] .hm-glass { padding: 22px !important; }
  h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }

  /* ---------- 7. STATS — 2x2 instrument cluster ---------- */
  [data-m="stats"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; border-top: 1px solid rgba(199,204,209,.14); }
  [data-m="stats"] > div {
    padding: 24px 16px !important; border-left: 1px solid rgba(199,204,209,.14) !important;
    border-bottom: 1px solid rgba(199,204,209,.14);
  }
  [data-m="stats"] > div:nth-child(odd) { border-left: 2px solid var(--accent,#18E6E0) !important; }
  [data-m="stats"] [data-count] { font-size: clamp(2.8rem, 15vw, 4.2rem) !important; }
  [data-m="stats"] span[style*="letter-spacing:.12em"],
  [data-m="stats"] span[style*="letter-spacing: .12em"],
  [data-m="stats"] span[style*="letter-spacing: 0.12em"] { font-size: 9.5px !important; margin-top: 10px !important; }

  /* ---------- 8. SERVICE SCENES — full-bleed vertical posters ---------- */
  [data-m="scene"] { min-height: 78svh !important; }
  [data-m="scene"] > div:last-child { padding: 24px 20px 28px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  [data-m="scene"] h3 { font-size: clamp(2.2rem, 11vw, 3.6rem) !important; line-height: .88 !important; }
  [data-m="scene"] p { font-size: 14.5px !important; }
  [data-m="scene"] > span[style*="-webkit-text-stroke"] { font-size: clamp(4rem, 22vw, 8rem) !important; top: 22px !important; }

  /* ---------- 9. FEATURE MOMENT ---------- */
  [data-m="feature"] { height: 86svh !important; }
  [data-m="feature"] h2 { font-size: clamp(3rem, 16vw, 5.6rem) !important; }
  [data-m="feature"] p { font-size: 15px !important; margin-top: 26px !important; }
  [data-m="feature"] [data-m="coords"] { left: 20px !important; right: auto !important; text-align: left !important; font-size: 9.5px !important; bottom: 22px !important; }

  /* ---------- 10. RAILS — swipeable, snapping, edge-peeking ---------- */
  [data-m="rail"] {
    display: flex !important; overflow-x: auto !important; gap: 14px !important;
    flex-direction: row !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 0 20px 24px !important; margin: 0 -20px !important;
    scrollbar-width: none;
  }
  [data-m="rail"]::-webkit-scrollbar { display: none; }
  [data-m="rail"] > * {
    flex: 0 0 80vw !important; max-width: 340px; scroll-snap-align: center;
    width: auto !important;
  }
  [data-m="railhint"] { display: flex !important; align-items: center; gap: 8px; padding: 0 0 4px; font-family: 'JetBrains Mono'; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(237,240,242,.42); }
  [data-m="railhint"]::before { content: ""; width: 22px; height: 1px; background: var(--accent,#18E6E0); }

  /* ---------- 11. BEFORE / AFTER — portrait scanner ---------- */
  [data-m="ba"] { aspect-ratio: 4/5 !important; }
  [data-m="ba"] div[style*="width:48px"],
  [data-m="ba"] div[style*="width: 48px"] { width: 60px !important; height: 60px !important; }
  [data-m="ba"] div[style*="top:18px"],
  [data-m="ba"] div[style*="top: 18px"] { font-size: 9.5px !important; padding: 5px 8px !important; }

  /* ---------- 12. FILM STRIP ---------- */
  [data-m="strip"] div[style*="aspect-ratio:16/10"],
  [data-m="strip"] div[style*="aspect-ratio: 16/10"] { width: 64vw !important; }

  /* ---------- 13. REVIEWS ---------- */
  [data-m="quote"] h2 { font-size: clamp(1.5rem, 6.4vw, 2.4rem) !important; line-height: 1.06 !important; }
  [data-m="quote"] { text-align: left !important; margin-bottom: 32px !important; }
  [data-m="rail"] .hm-glass { padding: 24px !important; }

  /* ---------- 14. FAQ — big tap rows ---------- */
  [data-m="faq"] > div { padding: 20px 0 !important; gap: 14px !important; grid-template-columns: auto 1fr auto !important; }
  [data-m="faq"] h3 { font-size: 1.15rem !important; line-height: 1.2 !important; }
  [data-m="faq"] p { font-size: 14.5px !important; }
  [data-m="faq"] span[style*="font-size:34px"],
  [data-m="faq"] span[style*="font-size: 34px"] { font-size: 30px !important; }

  /* ---------- 15. CTA ---------- */
  [data-m="cta"] { padding-top: clamp(96px, 16vh, 140px) !important; padding-bottom: clamp(96px, 16vh, 140px) !important; }
  [data-m="cta"] h2 { font-size: clamp(3.2rem, 17vw, 6rem) !important; }
  [data-m="cta"] p { font-size: 15px !important; }
  [data-m="cta"] [data-m="ctabtns"] { flex-direction: column !important; gap: 12px !important; margin-top: 34px !important; }
  [data-m="cta"] [data-m="ctabtns"] a { justify-content: center; width: 100%; min-height: 58px; padding: 0 20px !important; }

  /* ---------- 16. FOOTER ---------- */
  [data-m="footcols"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important; }
  [data-m="footcols"] > *:first-child { grid-column: 1 / -1 !important; }
  [data-m="footcols"] a { padding: 3px 0; }
  [data-m="wordmark"] { font-size: 19vw !important; }
  footer [style*="justify-content:space-between"][style*="font-size:10.5px"],
  footer [style*="justify-content: space-between"][style*="font-size: 10.5px"] { flex-direction: column !important; gap: 6px !important; }

  /* ---------- 16b. INNER PAGES ---------- */
  /* hero: cinematic but never taller than the phone */
  section[style*="min-height:100vh"],
  section[style*="min-height: 100vh"] { min-height: 100svh !important; padding-top: clamp(104px, 17vh, 150px) !important; }
  section[style*="height:clamp(560px,92vh,920px)"],
  section[style*="height: clamp(560px, 92vh, 920px)"] { height: 84svh !important; }

  /* process / stage rows -> compact two-line records */
  [style*="grid-template-columns:auto 1.2fr 2fr"],
  [style*="grid-template-columns: auto 1.2fr 2fr"] { grid-template-columns: auto 1fr !important; gap: 4px 14px !important; align-items: baseline !important; padding: 18px 0 !important; }
  [style*="grid-template-columns:auto 1.2fr 2fr"] > :nth-child(3),
  [style*="grid-template-columns: auto 1.2fr 2fr"] > :nth-child(3) { grid-column: 1 / -1 !important; margin-top: 6px !important; }
  [style*="grid-template-columns:auto 1.2fr 2fr"] > :nth-child(4),
  [style*="grid-template-columns: auto 1.2fr 2fr"] > :nth-child(4) { grid-column: 1 / -1 !important; margin-top: 8px !important; }

  /* two-up comparisons stack */
  [style*="columns:1fr 1.25fr"],
  [style*="columns: 1fr 1.25fr"],
  [style*="columns:1.4fr 1fr"],
  [style*="columns: 1.4fr 1fr"],
  [style*="columns:1.1fr .9fr"],
  [style*="columns: 1.1fr 0.9fr"],
  [style*="columns:auto 1.2fr"],
  [style*="columns: auto 1.2fr"] { grid-template-columns: 1fr !important; }
  [style*="columns:1.1fr .9fr"],
  [style*="columns: 1.1fr 0.9fr"] { gap: 40px !important; }

  /* pricing packages -> swipeable deck */
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
  [style*="minmax(0px, 1fr)"] {
    display: flex !important; flex-direction: row !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 14px !important; padding: 0 20px 22px !important; margin: 0 -20px !important; scrollbar-width: none;
  }
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"]::-webkit-scrollbar,
  [style*="minmax(0px, 1fr)"]::-webkit-scrollbar { display: none; }
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] > *,
  [style*="minmax(0px, 1fr)"] > * {
    flex: 0 0 84vw !important; max-width: 360px; scroll-snap-align: center; padding: 28px 22px !important;
  }
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] ul[style*="grid-template-columns:1fr 1fr"],
  [style*="minmax(0px, 1fr)"] ul[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* booking form: one field per row, thumb-sized */
  form[style*="grid-template-columns:1fr 1fr"],
  form[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 16px !important; }
  form[style*="grid-template-columns"] > * { grid-column: 1 / -1 !important; }
  form label + input, form label + select { margin-top: 6px; }
  form button[type="submit"], form [role="button"] { min-height: 58px; width: 100%; }

  /* faq rows keep index + toggle, tighten the middle */
  [style*="grid-template-columns:auto 1fr auto"],
  [style*="grid-template-columns: auto 1fr auto"] { gap: 12px !important; padding: 20px 0 !important; }
  [style*="grid-template-columns:auto 1fr auto"] h3,
  [style*="grid-template-columns: auto 1fr auto"] h3 { font-size: 1.15rem !important; line-height: 1.2 !important; }

  /* footer becomes a two-column directory */
  footer [style*="grid-template-columns:repeat(12"],
  footer [style*="grid-template-columns: repeat(12"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important; }
  footer [style*="grid-template-columns:repeat(12"] > *:first-child,
  footer [style*="grid-template-columns: repeat(12"] > *:first-child { grid-column: 1 / -1 !important; }
  footer [style*="font-size:clamp(3.6rem,20vw,19rem)"],
  footer [style*="font-size: clamp(3.6rem, 20vw, 19rem)"] { font-size: 19vw !important; }

  /* embedded configurator */
  iframe[title*="configurator" i], iframe[src*="Configurator" i] { min-height: 560px; }

  /* ---------- 16c. IMAGE-SLOT SAFETY ----------
     The image-slot component sizes its <img> via _applyView (inline styles +
     a scale() transform, re-run by ResizeObservers). In mobile in-app webviews
     (Messenger/Instagram) that math can blow up inside an aspect-ratio box, so
     the image renders far larger than its frame and overflows the screen.
     The <img> is exposed as part="image" — force it to a plain cover so it can
     never exceed its frame, regardless of what _applyView computes. */
  image-slot::part(image) {
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    transform: none !important;
    object-fit: cover !important; object-position: center !important;
  }
  image-slot::part(frame) { position: absolute !important; inset: 0 !important; overflow: hidden !important; }

  /* ---------- 16d. TEAM (About §4) — single column, compact photo cards ---------- */
  [data-m="team"] { grid-template-columns: 1fr !important; gap: 26px !important; }
  [data-m="team"] > div > div { aspect-ratio: 4/3 !important; }   /* photo box: compact, not a full-height portrait */
  [data-m="team"] > div > div img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ---------- 17. TOUCH TARGETS + FORMS ---------- */
  a[href^="tel:"], a[href^="mailto:"] { word-break: break-word; }
  input, select, textarea { font-size: 16px !important; min-height: 54px; padding: 14px 16px !important; }
  textarea { min-height: 130px; }
  button, [role="button"] { min-height: 52px; }
  label { font-size: 11px !important; }

  /* ---------- 18. MOTION — lighter on device ---------- */
  [data-reveal] { transition-duration: .8s, .85s, .9s !important; }
  [style*="will-change:transform"],
  [style*="will-change: transform"] { will-change: auto; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  [data-reveal], [data-m="drawer"], [data-m="dock"] { transition: none !important; }
  [style*="animation:hm-ticker"],
  [style*="animation: hm-ticker"] { animation: none !important; }
}