/* ================================================================
   The Big City Group — Responsive layer
   Overrides the fixed-width desktop inline styles for tablet & mobile.

   NOTE: the page runtime (support.js) re-serializes every inline style
   through the CSSOM, so `font-size:76px` becomes `font-size: 76px` and
   `repeat(4,minmax(0,1fr))` becomes `repeat(4, minmax(0px, 1fr))`.
   Selectors below therefore match serialization-INVARIANT substrings
   (no reliance on colon/comma spacing). !important beats inline.
   Desktop (>1024px) is untouched.
   ================================================================ */

*{ box-sizing:border-box; }
img, image-slot{ max-width:100%; }
html, body{ max-width:100%; overflow-x:hidden; }

/* kill the desktop min-width so phones never side-scroll */
[style*="1280px"]{ min-width:0 !important; }

/* ============================ TABLET  (≤1024px) ============================ */
@media (max-width:1024px){
  /* tighten the 56px horizontal gutters everywhere (invariant: " 56px") */
  [style*=" 56px"]{ padding-left:40px !important; padding-right:40px !important; }

  header nav{ gap:24px !important; font-size:13px !important; }
  header img[src*="logo-stacked"]{ height:104px !important; }

  /* 4-up and 3-up grids → 2-up */
  [style*="repeat(4"]{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  [style*="repeat(3"]{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }

  /* gentle hero-headline reduction */
  [style*="font-size:86px"],[style*="font-size: 86px"]{ font-size:60px !important; }
  [style*="font-size:76px"],[style*="font-size: 76px"]{ font-size:54px !important; }
  [style*="font-size:72px"],[style*="font-size: 72px"]{ font-size:52px !important; }

  /* hard-coded paragraph box */
  [style*="686px"]{ width:auto !important; height:auto !important; max-width:100% !important; }
}

/* ================= MOBILE NAV — hamburger (≤900px) ================= */
@media (max-width:900px){
  header{ position:relative !important; flex-direction:row !important; align-items:center !important; }
  header img[src*="logo-stacked"]{ height:74px !important; }

  #tbcgBurger{ display:inline-flex !important; }
  #tbcgBurger span{ transition:transform .25s var(--ease,ease), opacity .2s ease; }
  header.nav-open #tbcgBurger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  header.nav-open #tbcgBurger span:nth-child(2){ opacity:0; }
  header.nav-open #tbcgBurger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  /* the nav collapses into a dropdown panel under the header bar */
  #tbcgNav{
    display:none !important;
    position:absolute; top:calc(100% + 8px); left:0; right:0;
    flex-direction:column !important; align-items:stretch !important;
    gap:0 !important;
    background:rgba(16,17,19,.98);
    padding:4px 24px 14px; z-index:60;
    border-top:1px solid rgba(232,211,174,.22);
    box-shadow:0 26px 50px rgba(0,0,0,.5);
  }
  header.nav-open #tbcgNav{ display:flex !important; }
  #tbcgNav a{
    padding:16px 2px !important; font-size:14px !important;
    color:rgba(255,255,255,.9) !important;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  #tbcgNav a:last-child{ border-bottom:0 !important; }
}

/* ============================ MOBILE  (≤640px) ============================ */
@media (max-width:640px){
  [style*=" 56px"]{ padding-left:22px !important; padding-right:22px !important; }

  /* trim the tall top paddings (invariant substrings) */
  [style*="100px 56px"]{ padding-top:44px !important; }
  [style*="120px 56px"]{ padding-top:56px !important; padding-bottom:56px !important; }

  /* heroes size to content instead of a fixed px height */
  [data-screen-label$="ero"]{ height:auto !important; min-height:auto !important; overflow:visible !important; padding-bottom:52px; }

  /* every multi-column grid → single column (minmax(0,1fr) so image cards
     can shrink below their intrinsic width instead of overflowing) */
  [style*="1fr 1fr"],
  [style*="repeat(2"],
  [style*="repeat(3"]{ grid-template-columns:minmax(0, 1fr) !important; }
  /* … except the 4-up value/stat row → keep 2×2 */
  [style*="repeat(4"]{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }

  /* footer 3-col (text | divider | contact) → stack, drop the hairline divider */
  [style*="1fr 1px 1fr"]{ grid-template-columns:minmax(0, 1fr) !important; gap:40px !important; }
  [style*="1fr 1px 1fr"] > div:nth-child(2){ display:none !important; }

  /* headline downscaling + tighter tracking so long words fit */
  [style*="font-size:86px"],[style*="font-size: 86px"]{ font-size:clamp(28px,8vw,44px) !important; letter-spacing:.02em !important; overflow-wrap:break-word; }
  [style*="font-size:76px"],[style*="font-size: 76px"]{ font-size:clamp(26px,7.4vw,42px) !important; letter-spacing:.02em !important; overflow-wrap:break-word; }
  [style*="font-size:72px"],[style*="font-size: 72px"]{ font-size:clamp(26px,7.2vw,40px) !important; letter-spacing:.02em !important; overflow-wrap:break-word; }
  [style*="font-size:52px"],[style*="font-size: 52px"]{ font-size:clamp(28px,7vw,40px) !important; }
  [style*="font-size:46px"],[style*="font-size: 46px"]{ font-size:clamp(26px,6.6vw,38px) !important; }
  [style*="font-size:44px"],[style*="font-size: 44px"]{ font-size:clamp(26px,6.6vw,36px) !important; }
  [style*="font-size:34px"],[style*="font-size: 34px"]{ font-size:clamp(23px,5.6vw,30px) !important; }

  /* fixed inner widths → fluid */
  [style*="686px"]{ width:auto !important; height:auto !important; max-width:100% !important; }
  [style*="max-width:940px"],[style*="max-width: 940px"],
  [style*="max-width:760px"],[style*="max-width: 760px"],
  [style*="max-width:720px"],[style*="max-width: 720px"]{ max-width:100% !important; }

  /* inline spec rows (DESIGN BUILD | CONSULTING | MANAGEMENT · LODGING | … ) wrap */
  [style*="gap:26px"],[style*="gap: 26px"]{ flex-wrap:wrap !important; }

  /* section header rows that use space-between → allow wrap */
  [style*="space-between"][style*="baseline"]{ flex-wrap:wrap !important; gap:16px !important; }
  /* footer legal row wraps */
  [style*="26px 56px"]{ flex-wrap:wrap !important; gap:14px !important; }
}