/* Mobile layer for the marketing site. Inline styles in the screens win by default,
   so the phone breakpoint overrides them by matching the inline patterns. */
@media (max-width: 860px) {
  :root { --space-3xl: 28px; --space-xxl: 24px; --space-xl: 18px; --container-max: 100%;
    --display-xl: 38px; --display-lg: 30px; --display-md: 26px; --display-sm: 22px;
    --title-lg: 19px; --title-md: 17px;
    --ls-display-xl: -0.6px; --ls-display-lg: -0.4px; }
  /* every editorial / product grid becomes a single column */
  [style*="repeat(3,"], [style*="repeat(2,"], [style*="1fr 1fr"], [style*="1.1fr 1fr"], [style*="1.5fr 1fr"], [style*="1.4fr repeat(4"] { grid-template-columns: 1fr !important; }
  [style*="repeat(4,"] { grid-template-columns: repeat(2, 1fr) !important; }
  .oly-thumbs { grid-template-columns: repeat(4, 1fr) !important; }
  .oly-photos { grid-template-columns: repeat(2, 1fr) !important; }
  .oly-pieces { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  /* filter rails and step rails scroll sideways instead of wrapping */
  .oly-scroll-row { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .oly-scroll-row::-webkit-scrollbar { display: none; }
  .oly-scroll-row > button, .oly-scroll-row > a { min-height: 44px !important; }
  .oly-scroll-row > * { flex: 0 0 auto; }
  .oly-slots { grid-template-columns: repeat(2, 1fr) !important; }
  .oly-name-phone { grid-template-columns: 1fr !important; }
  .oly-new-grid { grid-template-columns: 1fr !important; }
  .oly-look-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .oly-consult-band { aspect-ratio: 4 / 5 !important; }
  /* Bespoke hero: on a phone the photo sits behind the headline instead of beside it. */
  .oly-bespoke-hero { position: relative; grid-template-columns: 1fr !important; }
  .oly-bespoke-hero .oly-bespoke-shot { position: absolute !important; inset: 0; min-height: 0 !important; z-index: 0; }
  .oly-bespoke-hero .oly-bespoke-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,19,15,0) 0%, rgba(22,19,15,0) 28%, rgba(22,19,15,.7) 45%, rgba(22,19,15,.9) 100%); }
  .oly-bespoke-hero .oly-bespoke-copy { position: relative; z-index: 1; padding: 64px var(--space-xl) 72px !important; min-height: 78vh; display: flex; flex-direction: column; justify-content: flex-end; }
  .oly-bespoke-hero .oly-bespoke-copy h1 { font-size: 42px !important; }
  .oly-bespoke-hero .oly-bespoke-copy { text-shadow: 0 1px 18px rgba(22,19,15,.55); }
  .oly-bespoke-hero .oly-bespoke-copy p { color: rgba(250,247,241,.86) !important; }
  .oly-contact-lines, .oly-contact-visit { grid-template-columns: 1fr !important; }
  .oly-contact-visit { gap: var(--space-xl) !important; }
  .oly-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 18px !important; }
  .oly-footer-cols img { max-width: 150px; }
  /* link columns lead, brand block sits under them */
  .oly-footer-brand { order: 2; grid-column: 1 / -1; margin-top: 16px; padding-top: 20px; border-top: 1px solid rgba(250,247,241,.14); text-align: center; }
  .oly-footer-brand img { margin: 0 auto; }
  .oly-footer-brand p { max-width: 100% !important; }
  .oly-footer-brand > div:last-child { justify-content: center; gap: 10px !important; }
  .oly-footer-brand > div:last-child a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* section headings stack above their action link instead of sharing a row */
  [style*="align-items: flex-end"][style*="space-between"] { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  [style*="align-items: flex-end"][style*="space-between"] > div { max-width: 100% !important; }
  a[style*="text-transform: uppercase"][style*="inline-flex"] { min-height: 44px; }
  .oly-footer-cols a { min-height: 44px; display: flex; align-items: center; }
  .oly-footer-cols > div > div { gap: 0 !important; }
  /* thumb-sized tap targets */
  .oly-slots > * { min-height: 44px !important; }
  button[style*="width: 40px"][style*="height: 40px"] { width: 44px !important; height: 44px !important; }
  button[style*="width: 36px"][style*="height: 36px"] { width: 44px !important; height: 44px !important; }
  button[style*="min-width: 36px"], button[style*="height: 36px"], button[style*="height: 34px"], a[style*="height: 34px"], button[style*="height: 38px"], button[style*="height: 42px"], a[style*="height: 42px"] { min-height: 44px !important; height: 44px !important; }
  .oly-strip button[style*="height: 3px"] { height: 3px !important; min-height: 0 !important; }
  /* generous desktop padding is too much on a 390px screen */
  [style*="padding: 96px"], [style*="padding: 80px"] { padding: 56px 18px !important; }
  [style*="96px var(--space-xl)"], [style*="var(--space-xxl) var(--space-xl) 96px"], [style*="var(--space-xl) var(--space-xl) 0"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding-bottom: 96px"], [style*="0px var(--space-xl) 96px"] { padding-bottom: 56px !important; }
  [style*="margin-top: 96px"] { margin-top: 56px !important; }
  /* tall split-panel images collapse to a band */
  [style*="min-height: 720px"], [style*="min-height: 760px"] { min-height: 320px !important; }
  /* display type */
  [style*="font-size: 58px"] { font-size: 34px !important; line-height: 1.1 !important; letter-spacing: -0.4px !important; }
  h1 { font-size: 34px; }
  [style*="max-width: 520px"], [style*="max-width: 460px"], [style*="max-width: 440px"], [style*="max-width: 860px"], [style*="max-width: 820px"] { max-width: 100% !important; }
  .oly-row-wrap { flex-wrap: wrap !important; }
  .oly-row-wrap > * { flex: 1 1 auto; }
  .oly-footer-note { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center; gap: 8px !important; text-align: center; font-size: 12px !important; }
  .oly-footer-note > span { font-size: 12px; white-space: nowrap; }
  /* the hero reel becomes a swipeable strip instead of three slivers */
  .oly-strip { overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .oly-strip::-webkit-scrollbar { display: none; }
  .oly-strip > div { flex: 0 0 84vw !important; height: 62vh !important; scroll-snap-align: center; }
  /* photo carousel arrows sit inside the frame on narrow screens */
  section img, section video { max-width: 100%; }
}