/* Mobile layout fixes — v2 (warm-black palette redesign).
   Applied below 1079px. Overrides inline grid templates from the Claude Design
   templates that don't collapse cleanly on phones. Load this LAST in <head>. */

/* --------------------------------------------------------------
   1. Hard-stop horizontal overflow on every page.
   -------------------------------------------------------------- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}
main, section, header, footer {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
img, svg, video, iframe {
  max-width: 100% !important;
  height: auto;
}
img[aria-hidden="true"][style*="position: absolute"],
img[aria-hidden="true"][style*="position:absolute"] {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* --------------------------------------------------------------
   2. Mobile overrides (phones + small tablets up to 1079px).
      Matches the design's own breakpoint (wide = w >= 1080).
   -------------------------------------------------------------- */
@media (max-width: 1079px) {

  /* --- Headlines wrap, never overflow --- */
  h1 {
    font-size: clamp(38px, 9vw, 68px) !important;
    line-height: 1.02 !important;
    max-width: 100% !important;
    word-break: break-word;
    hyphens: auto;
  }
  h2 {
    font-size: clamp(32px, 7.5vw, 52px) !important;
    line-height: 1.04 !important;
    max-width: 100% !important;
  }
  h3 { font-size: clamp(22px, 5vw, 32px) !important; }

  /* --- Sticky columns go static on mobile --- */
  [style*="position:sticky"],
  [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* --- Commitments 2-col grid (new design: 0.75fr / 1.6fr) collapses --- */
  [style*="minmax(0px, 0.75fr) minmax(0px, 1.6fr)"],
  [style*="minmax(0, 0.75fr) minmax(0, 1.6fr)"],
  [style*="minmax(0,0.75fr) minmax(0,1.6fr)"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* --- Process 5-col grid collapses to single column --- */
  [style*="repeat(5, minmax(0px, 1fr))"],
  [style*="repeat(5,minmax(0,1fr))"],
  [style*="repeat(5, minmax(0, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  /* --- Build Spec 2-col spec dl (box sides / back) stays 2-col but tighter --- */
  [style*="repeat(2, minmax(0px, 1fr))"][style*="border-top:1px solid rgba(242, 237, 228"],
  [style*="repeat(2,minmax(0,1fr))"][style*="border-top:1px solid rgba(242, 237, 228"] {
    gap: 0 !important;
  }

  /* --- Selected Work grid: 1 col on narrow phones, 2 on tablets --- */
  [style*="repeat(2, minmax(0px, 1fr))"][style*="gap: 4px"] {
    grid-template-columns: 1fr !important;
  }

  /* --- Heritage seal shrinks on mobile --- */
  img[src*="heritage-seal"] {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
  }

  /* --- Logo in nav scales down --- */
  nav img[src*="logo-reversed"] {
    width: 150px !important;
    height: 38px !important;
    max-width: 150px !important;
  }
  /* Footer logo stays slightly larger */
  footer img[src*="logo-reversed"] {
    width: 180px !important;
    height: 45px !important;
    max-width: 180px !important;
  }

  /* --- Hero tighter top padding (nav takes vertical space) --- */
  main > section:first-of-type [style*="padding: 200px"],
  main > section:first-of-type [style*="padding:200px"] {
    padding-top: 130px !important;
  }

  /* --- Hero stats row: 2 columns instead of 4 --- */
  main section:first-of-type [style*="repeat(auto-fit, minmax(200px, 1fr))"],
  main section:first-of-type [style*="repeat(auto-fit,minmax(200px,1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }
  main section:first-of-type [style*="repeat(auto-fit, minmax(200px, 1fr))"] > div,
  main section:first-of-type [style*="repeat(auto-fit,minmax(200px,1fr))"] > div {
    padding: 24px 12px 32px 0 !important;
  }

  /* --- Footer: 1 column stacked --- */
  footer [style*="repeat(auto-fit, minmax(min(100%, 220px"],
  footer [style*="repeat(auto-fit,minmax(min(100%,220px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* --- Section horizontal padding safety --- */
  section > div[style*="padding:0"],
  section > div[style*="padding: 0 clamp"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Contact form grid collapses --- */
  form fieldset[style*="grid-template-columns:repeat(2"],
  form fieldset[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  form fieldset {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* --- Build Spec app layout: panel + viewer stack --- */
  .app { grid-template-columns: 1fr !important; height: auto !important; }
  .app .panel { max-height: none !important; border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; }
  .app .viewer { height: 60vh !important; min-height: 400px !important; }

  /* --- Force reveal animations to visible (anti-blank-screen on mobile) --- */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* --- Any element with inline width > screen gets contained --- */
  img[width][height][style*="max-width:none"],
  img[width][height][style*="max-width: none"] {
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------
   3. Really narrow phones (under 440px)
   -------------------------------------------------------------- */
@media (max-width: 440px) {
  h1 { font-size: clamp(32px, 10vw, 52px) !important; }
  h2 { font-size: clamp(26px, 8vw, 40px) !important; }
  nav img[src*="logo-reversed"] {
    width: 130px !important;
    height: 33px !important;
    max-width: 130px !important;
  }
  /* Build Spec 2-col dl collapses on tiny phones */
  [style*="repeat(2, minmax(0px, 1fr))"][style*="border-top:1px solid rgba(242, 237, 228"] {
    grid-template-columns: 1fr !important;
  }
}