/* ============================================================
   STGC / VHT — unified responsive + performance layer
   Desktop (>1024px) is UNTOUCHED.
   Every rule is also gated on html:not([data-view=desktop]) so the
   "DESKTOP VIEW" toggle turns this whole layer off with no JS timing
   involved.
   Keyed on the desktop *values* (56px gutters, sticky panels, 100vh
   panels) and on both `prop:value` and `prop: value`, since React
   re-serializes inline styles with a space after the colon.
   ============================================================ */

@media (max-width: 1024px) {

  /* --- foundations ------------------------------------------------ */
  html:not([data-view=desktop]) *:not([data-exact]):not([data-exact] *),
  html:not([data-view=desktop]) *::before:not([data-exact]):not([data-exact] *),
  html:not([data-view=desktop]) *::after:not([data-exact]):not([data-exact] *) { box-sizing: border-box; }

  html:not([data-view=desktop]):not([data-exact]):not([data-exact] *),
  html:not([data-view=desktop]) body:not([data-exact]):not([data-exact] *) {
    max-width: 100%; overflow-x: hidden;
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  }
  html:not([data-view=desktop]):not([data-exact]):not([data-exact] *) { scroll-behavior: auto; }
  html:not([data-view=desktop]) body:not([data-exact]):not([data-exact] *) { cursor: auto !important; overscroll-behavior-x: none; }
  html:not([data-view=desktop]) x-dc:not([data-exact]):not([data-exact] *) { display: block; width: 100%; max-width: 100%; }
  html:not([data-view=desktop]) img:not([data-exact]):not([data-exact] *),
  html:not([data-view=desktop]) svg:not([data-exact]):not([data-exact] *),
  html:not([data-view=desktop]) video:not([data-exact]):not([data-exact] *),
  html:not([data-view=desktop]) canvas:not([data-exact]):not([data-exact] *),
  html:not([data-view=desktop]) image-slot:not([data-exact]):not([data-exact] *),
  html:not([data-view=desktop]) iframe:not([data-exact]):not([data-exact] *) { max-width: 100%; }
  html:not([data-view=desktop]) image-slot:not([data-exact]):not([data-exact] *) { display: block; width: 100%; height: 100%; }
  html:not([data-view=desktop]) :is(h1:not([data-exact]):not([data-exact] *), h2:not([data-exact]):not([data-exact] *), h3:not([data-exact]):not([data-exact] *), h4:not([data-exact]):not([data-exact] *), p:not([data-exact]):not([data-exact] *), blockquote:not([data-exact]):not([data-exact] *), li:not([data-exact]):not([data-exact] *), div[dir="rtl"]):not([data-exact]):not([data-exact] *) {
    overflow-wrap: break-word; text-wrap: pretty; max-width: 100%;
  }
  html:not([data-view=desktop]) :is(a[href^="mailto"]:not([data-exact]):not([data-exact] *), a[href^="tel"]:not([data-exact]):not([data-exact] *), a[href^="http"]:not([data-exact]):not([data-exact] *), a[href^="www"]):not([data-exact]):not([data-exact] *) {
    overflow-wrap: anywhere;
  }

  /* --- 1. gutters: desktop 40–72px side padding -> 20px ---------- */
  html:not([data-view=desktop]) :is(
    [style*="px 56px"]:not([data-exact]):not([data-exact] *), [style*="0 56px"]:not([data-exact]):not([data-exact] *), [style*="px 48px"]:not([data-exact]):not([data-exact] *), [style*="0 48px"]:not([data-exact]):not([data-exact] *),
    [style*="px 72px"]:not([data-exact]):not([data-exact] *), [style*="0 72px"]:not([data-exact]):not([data-exact] *), [style*="px 40px"]:not([data-exact]):not([data-exact] *), [style*="0 40px"]
  ):not([data-exact]):not([data-exact] *) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- 2. vertical rhythm: keep the design's breathing, less of it */
  html:not([data-view=desktop]) :is(section:not([data-exact]):not([data-exact] *), footer:not([data-exact]):not([data-exact] *), main:not([data-exact]):not([data-exact] *), aside):not([data-exact]):not([data-exact] *) {
    padding-top: 72px !important; padding-bottom: 72px !important;
  }

  /* --- 3. no sticky stacking / no forced full-height panels ------- */
  html:not([data-view=desktop]) :is([style*="position:sticky"]:not([data-exact]):not([data-exact] *), [style*="position: sticky"]):not([data-exact]):not([data-exact] *) {
    position: relative !important; top: auto !important; z-index: auto !important;
  }
  html:not([data-view=desktop]) :is(
    [style*="min-height:100vh"]:not([data-exact]):not([data-exact] *), [style*="min-height: 100vh"]:not([data-exact]):not([data-exact] *),
    [style*="min-height:100dvh"]:not([data-exact]):not([data-exact] *), [style*="min-height: 100dvh"]:not([data-exact]):not([data-exact] *),
    [style*="min-height:calc(100dvh"]:not([data-exact]):not([data-exact] *), [style*="min-height: calc(100dvh"]:not([data-exact]):not([data-exact] *),
    [style*="min-height:calc(100vh"]:not([data-exact]):not([data-exact] *), [style*="min-height: calc(100vh"]
  ):not([data-exact]):not([data-exact] *) { min-height: 0 !important; }

  /* --- 4. every multi-column grid becomes one clean column ------- */
  html:not([data-view=desktop]) [style*="grid-template-columns"]:not([data-exact]):not([data-exact] *) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:not([data-view=desktop]) [style*="grid-template-columns"] > *:not([data-exact]):not([data-exact] *) {
    min-width: 0 !important; max-width: 100% !important;
  }

  /* --- 5. picture blocks kept a real height (they relied on 100vh)  */
  html:not([data-view=desktop]) :is(div:has(> image-slot):not([data-exact]):not([data-exact] *), div:has(> div > image-slot)):not([data-exact]):not([data-exact] *) {
    min-height: 46vh !important;
  }
  html:not([data-view=desktop]) div:has(> image-slot) > image-slot:not([data-exact]):not([data-exact] *) { min-height: 46vh; }

  /* --- 6. header: same identity, phone-sized ---------------------- */
  html:not([data-view=desktop]) header:is([style*="position:fixed"]:not([data-exact]):not([data-exact] *), [style*="position: fixed"]):not([data-exact]):not([data-exact] *) {
    padding: 10px 16px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html:not([data-view=desktop]) header img:not([data-exact]):not([data-exact] *) { height: 46px !important; width: auto !important; flex-shrink: 0; }
  /* the VHT mark sits inside a square canvas with ~55% empty space —
     scaling it visually (not in layout) makes it read at the same weight
     as it does on the laptop */
  html:not([data-view=desktop]) img[src*="vht-logo"]:not([data-exact]):not([data-exact] *) { transform: scale(1.6); transform-origin: left center; }
  html:not([data-view=desktop]) header img[src*="vht-logo"]:not([data-exact]):not([data-exact] *) { height: 44px !important; }
  html:not([data-view=desktop]) header nav:not([data-exact]):not([data-exact] *) { display: none !important; }
  html:not([data-view=desktop]) header [data-menu-btn]:not([data-exact]):not([data-exact] *) { display: flex !important; }
  html:not([data-view=desktop]) [data-mobile-drawer]:not([data-exact]):not([data-exact] *) { overflow-y: auto; }

  /* --- 7. first screen clears the fixed header ------------------- */
  html:not([data-view=desktop]) header:is([style*="position:fixed"]:not([data-exact]):not([data-exact] *), [style*="position: fixed"]) ~ section:first-of-type:not([data-exact]):not([data-exact] *) {
    padding-top: 96px !important;
  }

  /* --- 8. calls to action: thumb-sized, never clipped ------------- */
  html:not([data-view=desktop]) a:is(
    [style*="padding:18px 34px"]:not([data-exact]):not([data-exact] *), [style*="padding: 18px 34px"]:not([data-exact]):not([data-exact] *),
    [style*="padding:20px 36px"]:not([data-exact]):not([data-exact] *), [style*="padding: 20px 36px"]:not([data-exact]):not([data-exact] *),
    [style*="padding:16px 32px"]:not([data-exact]):not([data-exact] *), [style*="padding: 16px 32px"]
  ):not([data-exact]):not([data-exact] *) {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 100% !important; padding: 16px 20px !important; text-align: center;
  }
  html:not([data-view=desktop]) form button[type="submit"]:not([data-exact]):not([data-exact] *) { padding: 20px 22px !important; font-size: 20px !important; }
  html:not([data-view=desktop]) :is(input:not([data-exact]):not([data-exact] *), textarea:not([data-exact]):not([data-exact] *), select:not([data-exact]):not([data-exact] *), button):not([data-exact]):not([data-exact] *) { max-width: 100% !important; }

  /* --- 9. performance: drop what only makes sense with a mouse --- */
  html:not([data-view=desktop]) div[style*="feTurbulence"]:not([data-exact]):not([data-exact] *) { display: none !important; }
  html:not([data-view=desktop]) [data-reveal]:not([data-exact]):not([data-exact] *) { opacity: 1 !important; transform: none !important; transition: none !important; }
  html:not([data-view=desktop]) :is([data-mag]:not([data-exact]):not([data-exact] *), [data-proj]:not([data-exact]):not([data-exact] *), [data-val]):not([data-exact]):not([data-exact] *) { transition: none !important; }
  html:not([data-view=desktop]) [style*="backdrop-filter"]:not([data-exact]):not([data-exact] *) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html:not([data-view=desktop]) :is([style*="background-attachment:fixed"]:not([data-exact]):not([data-exact] *), [style*="background-attachment: fixed"]):not([data-exact]):not([data-exact] *) {
    background-attachment: scroll !important;
  }
  html:not([data-view=desktop]) [data-shard]:not([data-exact]):not([data-exact] *) { translate: none !important; }

  /* the moving vertical band and the red rule stay on mobile — same as desktop.
     The aside keeps a right gutter so the copy clears them. */
  html:not([data-view=desktop]) aside:is(aside):not([data-exact]):not([data-x]) {
    padding-right: 62px !important;
  }

  /* --- 10. flex rows that were sized for a 1440px canvas: let them wrap
       instead of shrinking below their content (that was the footer's
       CR#/copyright collision) ------------------------------------- */
  html:not([data-view=desktop]) :is(footer, section, main, aside) :is(
    [style*="justify-content:space-between"], [style*="justify-content: space-between"]
  ):not([data-exact]):not([data-exact] *) {
    flex-wrap: wrap !important;
    row-gap: 18px !important;
  }
  html:not([data-view=desktop]) :is(footer, section, main, aside) :is(
    [style*="justify-content:space-between"], [style*="justify-content: space-between"]
  ):not([data-exact]):not([data-exact] *) > * {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 1;
  }
  html:not([data-view=desktop]) header:is([style*="position:fixed"], [style*="position: fixed"]):not([data-exact]) {
    flex-wrap: nowrap !important;
  }
  html:not([data-view=desktop]) *:not([data-exact]):not([data-exact] *) { scroll-snap-type: none !important; scroll-snap-align: none !important; }
}

/* --- phones: one notch tighter ----------------------------------- */
@media (max-width: 480px) {
  html:not([data-view=desktop]) :is(
    [style*="px 56px"]:not([data-exact]):not([data-exact] *), [style*="0 56px"]:not([data-exact]):not([data-exact] *), [style*="px 48px"]:not([data-exact]):not([data-exact] *), [style*="0 48px"]:not([data-exact]):not([data-exact] *),
    [style*="px 72px"]:not([data-exact]):not([data-exact] *), [style*="0 72px"]:not([data-exact]):not([data-exact] *), [style*="px 40px"]:not([data-exact]):not([data-exact] *), [style*="0 40px"]
  ):not([data-exact]):not([data-exact] *) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html:not([data-view=desktop]) :is(section:not([data-exact]):not([data-exact] *), footer:not([data-exact]):not([data-exact] *), main:not([data-exact]):not([data-exact] *), aside):not([data-exact]):not([data-exact] *) {
    padding-top: 60px !important; padding-bottom: 60px !important;
  }
  html:not([data-view=desktop]) header img:not([data-exact]):not([data-exact] *) { height: 40px !important; }
  html:not([data-view=desktop]) header img[src*="vht-logo"]:not([data-exact]):not([data-exact] *) { height: 38px !important; }
  html:not([data-view=desktop]) header:is([style*="position:fixed"]:not([data-exact]):not([data-exact] *), [style*="position: fixed"]) ~ section:first-of-type:not([data-exact]):not([data-exact] *) {
    padding-top: 84px !important;
  }
  html:not([data-view=desktop]) :is(div:has(> image-slot):not([data-exact]):not([data-exact] *), div:has(> div > image-slot)):not([data-exact]):not([data-exact] *) {
    min-height: 40vh !important;
  }
}

/* --- inside a desktop-exact scope the layout is the laptop's, sticky
       panel stacking included (that overlap IS the desktop design) ---- */

/* --- quote-page aside: keep the copy clear of the moving band ----- */
@media (max-width: 1024px) {
  html[data-view]:not([data-view=desktop]) aside:not([data-a]):not([data-b]):not([data-c]):not([data-d]):not([data-e]):not([data-f]) {
    padding-right: 62px !important;
  }
  /* email + phone stay on one line */
  html[data-view]:not([data-view=desktop]) aside [style*="white-space:nowrap"],
  html[data-view]:not([data-view=desktop]) aside [style*="white-space: nowrap"] {
    gap: 18px !important;
  }
  html[data-view]:not([data-view=desktop]) aside [style*="white-space:nowrap"] > a,
  html[data-view]:not([data-view=desktop]) aside [style*="white-space: nowrap"] > a {
    font-size: 13px !important; white-space: nowrap !important; overflow-wrap: normal !important;
  }
}

/* --- the drawer only exists for the mobile layout ----------------- */
@media (min-width: 1025px) {
  [data-mobile-drawer], [data-drawer-overlay] { display: none !important; }
}
html[data-view=desktop] { overflow-x: clip; max-width: 100%; }
html[data-view=desktop] [data-mobile-drawer],
html[data-view=desktop] [data-drawer-overlay] { display: none !important; }

/* --- the view toggle: lives on <html>, outside the scaled canvas -- */
[data-view-toggle] {
  position: fixed; right: 12px; bottom: 12px; z-index: 2147483000;
  font-family: 'Space Grotesk', Inter, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; white-space: nowrap; padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(11,11,12,.9); color: #fff; cursor: pointer; border-radius: 0;
}
@media (min-width: 1025px) { html:not([data-view=desktop]) [data-view-toggle] { display: none; } }