/* Sila mobile layer: full-bleed editorial rhythm inspired by the Okamura mobile experience. */
@media (max-width: 767px) {
  :root { --sila-mobile-gutter: 22px; }
  html, body { max-width: 100%; overflow-x: clip !important; }
  body { -webkit-tap-highlight-color: transparent; }

  [data-site-header] {
    min-height: 64px !important;
    padding: 0 var(--sila-mobile-gutter) !important;
    gap: 12px !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }
  [data-site-header] > a,
  [data-menu-toggle] {
    min-width: 44px !important;
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  [data-site-header] > a { padding: 0 !important; font-size: 1.3rem !important; }
  [data-menu-toggle] { width: 44px !important; }
  [data-menu-toggle]::before,
  [data-menu-toggle]::after { inset-inline: 6px !important; }
  [data-menu-toggle]::before { top: 18px !important; }
  [data-menu-toggle]::after { top: 26px !important; }
  html[data-js] [data-menu][data-open],
  html[data-js][data-menu-open] [data-menu],
  html[data-js] [data-menu].is-open {
    padding: 92px var(--sila-mobile-gutter) 40px !important;
    background: #292a2a !important;
  }
  html[data-js] [data-menu][data-open] ul,
  html[data-js][data-menu-open] [data-menu] ul,
  html[data-js] [data-menu].is-open ul { gap: 12px !important; }
  html[data-js] [data-menu][data-open] a,
  html[data-js][data-menu-open] [data-menu] a,
  html[data-js] [data-menu].is-open a {
    min-height: 52px !important;
    font-size: clamp(1.75rem, 8vw, 2.6rem) !important;
  }

  /* Mobile hero is a horizontal snap-style editorial slider, never a squeezed desktop split. */
  [data-hero] {
    min-height: 100svh !important;
    height: 100svh !important;
    touch-action: pan-y !important;
  }
  [data-hero-track] {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transition: none !important;
  }
  [data-hero-panel="seating"],
  [data-hero-panel="philosophy"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: opacity 420ms ease, transform 620ms cubic-bezier(.2,.7,.2,1) !important;
  }
  [data-hero-panel="seating"] { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; }
  [data-hero][data-active-panel="philosophy"] [data-hero-panel="seating"] { opacity: 0 !important; transform: translate3d(-100%, 0, 0) !important; }
  [data-hero][data-active-panel="philosophy"] [data-hero-panel="philosophy"] { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; }
  [data-hero-panel] > img,
  [data-hero-panel] > video { object-position: center !important; }
  [data-hero-panel] > span { inset-inline-start: var(--sila-mobile-gutter) !important; inset-block-end: 22px !important; }
  [data-hero-copy-primary],
  [data-hero-copy-secondary] {
    inset-inline-start: 50% !important;
    width: calc(100% - 44px) !important;
    transform: translate(-50%, -50%) !important;
  }
  [data-hero-copy-primary] h1,
  [data-hero-copy-secondary] p { margin: 0 !important; font-size: clamp(1.05rem, 4.6vw, 1.35rem) !important; line-height: 1.65 !important; }
  [data-hero][data-active-panel="philosophy"] [data-hero-copy-primary] { opacity: 0 !important; }
  [data-hero][data-active-panel="philosophy"] [data-hero-copy-secondary] { opacity: 1 !important; }
  [data-hero-scroll] { inset-inline-end: 16px !important; height: 42px !important; }

  /* Okamura-like scroll choreography: reveal content, then let the image drift behind it. */
  [data-motion-state="ready"] {
    opacity: 0 !important;
    clip-path: inset(0 0 14% 0) !important;
    transform: translate3d(0, 24px, 0) !important;
    transition: opacity 760ms ease, clip-path 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1) !important;
    will-change: opacity, clip-path, transform;
  }
  [data-motion-state="in-view"] {
    opacity: 1 !important;
    clip-path: inset(0) !important;
    transform: none !important;
  }
  [data-mobile-parallax] {
    transform: translate3d(0, var(--mobile-parallax-y, 0px), 0) scale(1.055) !important;
    transition: transform 80ms linear !important;
    will-change: transform;
  }
  [data-product-record] {
    transition: background-color 500ms ease, transform 700ms cubic-bezier(.2,.7,.2,1) !important;
  }
  [data-product-record][data-mobile-active] {
    background: color-mix(in srgb, var(--color-paper) 92%, #857b73 8%) !important;
  }
  [data-product-record][data-mobile-active] [data-product-cutout] {
    transform: translate3d(0, -8px, 0) scale(1.025) !important;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1) !important;
  }
  [data-product-record]:not([data-mobile-active]) [data-product-cutout] {
    transform: translate3d(0, 8px, 0) scale(.985) !important;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1) !important;
  }
  [data-mobile-progress] {
    position: fixed;
    inset-inline-start: 12px;
    inset-block-start: 50%;
    z-index: 20;
    width: 2px;
    height: 72px;
    overflow: hidden;
    background: rgb(39 39 39 / 20%);
    pointer-events: none;
  }
  [data-mobile-progress]::after {
    position: absolute;
    inset: 0 0 auto;
    height: var(--mobile-progress, 0%);
    background: currentColor;
    content: "";
    transition: height 240ms ease;
  }

  /* Keep existing editorial sections readable and image-led on narrow screens. */
  [data-feature], [data-event-copy], [data-closing], [data-closing] > div { min-height: 92svh !important; }
  [data-event-copy], [data-closing] > div { padding: 76px var(--sila-mobile-gutter) 48px !important; }
  [data-event-copy] h2, [data-closing] h2 { font-size: clamp(1.65rem, 7vw, 2.15rem) !important; line-height: 1.35 !important; }
  [data-event-copy] p, [data-philosophy] p { max-width: 34rem; font-size: .94rem !important; line-height: 1.9 !important; }
  [data-philosophy] { display: flex !important; flex-direction: column !important; min-height: auto !important; }
  [data-philosophy] > div { min-height: auto !important; padding: 60px var(--sila-mobile-gutter) 72px !important; }
  [data-philosophy-media] { order: -1 !important; height: 66svh !important; }

  [data-product-stage] { display: block !important; min-height: 0 !important; }
  [data-product-environments] { display: none !important; }
  [data-product-record] { min-height: 0 !important; padding: 0 0 54px !important; }
  [data-product-mobile-environment] { display: block !important; height: 68svh !important; }
  [data-product-mobile-environment] img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  [data-product-copy] { padding-inline: var(--sila-mobile-gutter) !important; }

  [data-site-footer] { grid-template-columns: 1fr !important; gap: 30px !important; padding: 54px var(--sila-mobile-gutter) 24px !important; }
  [data-footer-primary] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [data-footer-secondary] { grid-column: 1 !important; justify-self: start !important; }
  [data-footer-secondary] > p { font-size: clamp(2.25rem, 14vw, 4rem) !important; }
  [data-footer-bottom] { grid-column: 1 !important; flex-direction: column !important; gap: 10px !important; }

  /* Independent information pages already carry their own markup; these rules unify their rhythm. */
  .sila-contact-page, .sila-directory, .sila-about-page { overflow: clip !important; }
  .sila-contact-hero, .sila-directory__hero, .sila-about-hero { display: flex !important; flex-direction: column !important; min-height: auto !important; }
  .sila-contact-hero__media, .sila-directory__media, .sila-about-hero__media { order: -1 !important; min-height: 66svh !important; max-height: none !important; }
  .sila-contact-hero__copy, .sila-directory__copy, .sila-about-hero__copy { min-height: auto !important; padding: 42px var(--sila-mobile-gutter) 58px !important; }
  .sila-contact-hero h1, .sila-directory__copy h1, .sila-about-hero h1 { max-width: none !important; font-size: clamp(2.55rem, 13vw, 4.4rem) !important; line-height: 1.08 !important; }
  .sila-contact-quick { grid-template-columns: 1fr !important; }
  .sila-contact-quick a { min-height: 88px !important; padding: 18px var(--sila-mobile-gutter) !important; }
  .sila-contact-rail, .sila-locations, .sila-about-story, .sila-about-goals { grid-template-columns: 1fr !important; gap: 38px !important; padding: 68px var(--sila-mobile-gutter) !important; }
  .sila-contact-rail__intro, .sila-locations__intro { position: static !important; }
  .sila-contact-row { grid-template-columns: 38px 1fr auto !important; gap: 10px !important; min-height: 116px !important; }
  .sila-location { grid-template-columns: 38px 1fr !important; gap: 10px !important; min-height: auto !important; padding: 24px 0 !important; }
  .sila-location a { grid-column: 2 !important; margin-top: 8px !important; }
  .sila-dealer-grid { grid-template-columns: 1fr !important; }
  .sila-directory__body { padding: 68px var(--sila-mobile-gutter) 84px !important; }
  .sila-directory__tools { display: block !important; }
  .sila-directory__filters { margin-bottom: 16px !important; }
  .sila-directory__search-wrap { width: 100% !important; }
  .sila-directory__search { width: 100% !important; }
  .sila-dealer-card { min-height: 260px !important; padding: 22px !important; }
  .sila-blog-page, .sila-single-post { padding-inline: var(--sila-mobile-gutter) !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-hero-panel="seating"], [data-hero-panel="philosophy"] { transition: none !important; }
  [data-motion-state="ready"], [data-motion-state="in-view"] { opacity: 1 !important; clip-path: none !important; transform: none !important; transition: none !important; }
  [data-mobile-parallax], [data-product-record][data-mobile-active] [data-product-cutout], [data-product-record]:not([data-mobile-active]) [data-product-cutout] { transform: none !important; transition: none !important; }
}