* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: #FFFFFF; }
  body { font-family: Jost, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; color: #221E1F; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #CAB5A0; }
  img { display: block; }

  /* ---- MOBILE TIER, below 768px. Design System §22. Media queries cannot be
     expressed inline, so the mobile scale lives here and overrides the desktop
     inline styles. Values are the approved second type tier and 80px section
     rhythm — nothing new is introduced. ---- */
  @media (max-width: 767px) {
    /* Gutters and section rhythm */
    section, footer { padding-top: 80px !important; padding-bottom: 80px !important; padding-left: 24px !important; padding-right: 24px !important; }
    section > div, footer > div { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }

    /* Type — second tier */
    h1 { font-size: 44px !important; line-height: 1.05 !important; }
    h2 { font-size: 32px !important; line-height: 1.2 !important; }
    [data-t3] { font-size: 20px !important; }
    [data-body] { font-size: 16px !important; line-height: 1.8 !important; max-width: none !important; }
    section a[style*="0.26em"] { font-size: 10px !important; letter-spacing: 0.24em !important; }
    [data-lbl] { font-size: 10px !important; letter-spacing: 0.24em !important; }
    section [style*="font-size: 15px"], footer [style*="font-size: 15px"] { font-size: 14px !important; }

    /* Buttons — 48px minimum tap height, full column width */
    section a[style*="padding: 18px 44px"] { display: block !important; padding: 16px 32px !important; text-align: center !important; }

    /* Every grid collapses to one column */
    [data-reveal] { grid-template-columns: 1fr !important; gap: 32px !important; }
    footer > div > div:first-child { grid-template-columns: 1fr !important; gap: 40px !important; }
    footer > div > div:last-child { flex-direction: column !important; gap: 24px !important; }
    footer > div > div:last-child span:last-child { text-align: left !important; max-width: none !important; }

    /* Image ratios reduce to 4:5 and 1:1 only */
    div[style*="aspect-ratio: 3 / 4"], div[style*="aspect-ratio: 3 / 2"], div[style*="aspect-ratio: 5 / 4"] { aspect-ratio: 4 / 5 !important; }

    /* Full-bleed bands */
    #top, #dining, #interiors { padding: 0 !important; }
    #top { height: 560px !important; }
    #dining, #interiors { height: 480px !important; }
    #top > div:last-child, #interiors > div:last-child { padding: 0 24px 48px !important; }
    #dining > div:last-child { padding: 0 24px !important; }
    #interiors > div:last-child > div { flex-direction: column !important; align-items: flex-start !important; gap: 32px !important; }

    /* Showroom specification rows stack */
    #showroom div[style*="grid-template-columns: 140px"] { grid-template-columns: 1fr !important; gap: 8px !important; }

    /* Header — 64px, wordmark 24px, drawer replaces the nav */
    [data-om-header] > div:first-child { height: 64px !important; padding: 0 24px !important; grid-template-columns: 1fr auto 1fr !important; column-gap: 16px !important; }
    [data-om-nav] { display: none !important; }
    [data-om-header] a[href="#top"] { grid-column: 2; justify-self: center; }
    [data-om-burger] { display: flex !important; grid-column: 3; justify-self: end; }
    [data-om-logo] { height: 24px !important; }
    [data-om-drawer] a { padding: 4px 0; }
  }

  /* Drawer and burger are desktop-hidden by default */
  [data-om-drawer] { display: none; }

  /* NO transitions on the header's scroll-state properties. Their values come
     from renderVals(), and this runtime re-applies the style object every
     frame — each re-application restarts a CSS transition from its from-value,
     pinning currentTime at 0 so computed style never advances. The swap is
     instant by design; a fade would have to be driven via Web Animations from
     the logic class. */