/* =====================================================================
   John's Final Touch — responsive layer
   The design is authored with inline styles, so these rules use
   attribute selectors + !important to override them at breakpoints.
   Desktop (>1024px) is untouched.
   ===================================================================== */

/* ---- mobile-nav elements: inert on desktop ---- */
#nav-toggle{
  display:none; align-items:center; justify-content:center; flex-direction:column;
  gap:5px; width:44px; height:44px; background:none; border:none; cursor:pointer; padding:0;
}
#nav-toggle span{ display:block; width:26px; height:2px; background:var(--ink);
  transition:transform .22s ease, opacity .2s ease; }
#nav-toggle[data-open="1"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#nav-toggle[data-open="1"] span:nth-child(2){ opacity:0; }
#nav-toggle[data-open="1"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
#nav-toggle[data-open="1"] span{ background:var(--cream) !important; }
#mobile-menu{ display:none; }
#mobile-menu span{ cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:19px;
  font-weight:600; letter-spacing:.14em; color:var(--cream); }
#mobile-menu span.mm-cta{ margin-top:10px; color:var(--ink); background:var(--accent);
  border:2px solid var(--cream); box-shadow:4px 4px 0 var(--cream); padding:14px 28px; }

/* ============================= TABLET ============================= */
@media (max-width:1024px){
  #site-nav{ padding-left:26px !important; padding-right:26px !important; }
  section{ padding-left:30px !important; padding-right:30px !important; }
  /* 3-up grids (gallery, story) -> 2-up */
  [style*="repeat(3,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ============================= MOBILE ============================= */
@media (max-width:860px){
  /* --- nav becomes hamburger --- */
  #nav-links{ display:none !important; }
  #nav-toggle{ display:flex; }
  #site-nav{ padding:12px 18px !important; }
  #mobile-menu{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
    position:fixed; inset:0; z-index:95; background:var(--ink);
    opacity:0; pointer-events:none;
  }

  /* --- stack every multi-column grid --- */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  /* keep gallery/story 2-up on larger phones (overrides the line above) */
  [style*="repeat(3,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }

  /* --- spacing --- */
  section{ padding-left:22px !important; padding-right:22px !important;
    padding-top:66px !important; padding-bottom:66px !important; }
  /* ticker strip: stay thin (blanket section padding above would balloon it) */
  [style*="padding:15px 0"]{ padding:14px 0 !important; }
  [style*="gap:80px"]{ gap:34px !important; }
  [style*="gap:70px"]{ gap:32px !important; }
  [style*="gap:64px"]{ gap:30px !important; }
  [style*="gap:56px"]{ gap:30px !important; }
  [style*="gap:44px"]{ gap:26px !important; }

  /* --- hero: clear the fixed nav, allow natural height ---
     NOTE: scope to the <section> only. The page's outer <div> wrapper also
     has min-height:100vh, so a bare [style*="min-height:100vh"] would pad the
     whole page down 104px under the fixed nav (huge gap + tick strip pushed
     below the header). Targeting section[...] fixes that. */
  section[style*="min-height:100vh"]{ min-height:auto !important;
    padding-top:90px !important; padding-bottom:48px !important; }
  #wall-outer{ height:180vh !important; padding:0 !important; }
  /* commercial "bid list" band: full-bleed + tighter above/inside on mobile */
  section[style*="margin-top:90px"]{ margin-top:0 !important; padding:0 !important; }
  [style*="padding:110px 40px 130px"]{ padding:56px 22px 64px !important; }
  /* about: "the last 2% is the job" card flows under the portrait on mobile (was absolute-overlapping) */
  [style*="grid-template-columns:1.05fr"] > *:last-child > *:last-child{ position:static !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; transform:none !important; margin:16px 0 0 !important; display:inline-block !important; }
  [style*="grid-template-columns:1.25fr"] > *:last-child{ order:-1 !important; min-height:360px !important; margin-top:0 !important; margin-bottom:34px !important; }

  /* --- hide vertical 'SHEET 0X' margin notes --- */
  [style*="writing-mode:vertical-rl"]{ display:none !important; }

  /* --- fan deck -> 2-col grid on mobile (no horizontal scroll / scrollbar) --- */
  [style*="display:flex; gap:20px; align-items:flex-start"]{
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; overflow:visible !important; align-items:stretch !important;
  }
  [style*="display:flex; gap:20px; align-items:flex-start"] > div{
    transform:none !important; height:auto !important; min-height:190px !important; }

  /* --- shrink fixed-size display type --- */
  [style*="font-size:82px"],[style*="font-size: 82px"],[style*="font-size:76px"],[style*="font-size: 76px"],[style*="font-size:70px"],[style*="font-size: 70px"],[style*="font-size:68px"],[style*="font-size: 68px"]{ font-size:44px !important; }
  [style*="font-size:58px"],[style*="font-size: 58px"],[style*="font-size:56px"],[style*="font-size: 56px"]{ font-size:37px !important; }
  [style*="font-size:44px"],[style*="font-size: 44px"]{ font-size:31px !important; }
  [style*="font-size:38px"],[style*="font-size: 38px"]{ font-size:27px !important; }
  [style*="font-size:34px"],[style*="font-size: 34px"],[style*="font-size:33px"],[style*="font-size: 33px"]{ font-size:23px !important; }
  [style*="font-size:30px"],[style*="font-size: 30px"]{ font-size:23px !important; }

  /* --- shrink fluid clamp() headings (their min values are too big for phones) --- */
  [style*="clamp(88px"]{ font-size:clamp(46px,12vw,80px) !important; }
  [style*="clamp(76px"]{ font-size:clamp(40px,10vw,68px) !important; }
  [style*="clamp(70px"]{ font-size:clamp(38px,9vw,62px) !important; }
  [style*="clamp(64px"]{ font-size:clamp(36px,8.5vw,56px) !important; }
  [style*="clamp(60px"]{ font-size:clamp(34px,8vw,54px) !important; }
  [style*="clamp(56px"]{ font-size:clamp(32px,7.5vw,50px) !important; }
  [style*="clamp(40px"]{ font-size:clamp(25px,6vw,40px) !important; }

  /* --- list rows (services/process/scopes): wrap, drop the dotted leader --- */
  [style*="align-items:baseline"],[style*="align-items: baseline"]{ flex-wrap:wrap !important; gap:4px 14px !important; }
  [style*="border-bottom:2px dotted"]{ display:none !important; }

  /* --- big card/form paddings --- */
  [style*="padding:56px 60px"],[style*="padding: 56px 60px"]{ padding:30px 22px !important; }
  [style*="padding:54px 52px 46px"],[style*="padding: 54px 52px 46px"]{ padding:34px 22px !important; }
  [style*="padding:48px 52px"],[style*="padding: 48px 52px"]{ padding:30px 24px !important; }
  [style*="padding:40px 46px"],[style*="padding: 40px 46px"]{ padding:28px 22px !important; }
}

/* ========================== SMALL PHONE ========================== */
@media (max-width:560px){
  #site-nav{ padding:10px 14px !important; }
  section{ padding-left:15px !important; padding-right:15px !important; }
  [style*="repeat(3,1fr)"]{ grid-template-columns:1fr !important; }
  /* fan deck 2-col grid is set in the 860px block */
  [style*="margin-left:44px"]{ margin-left:0 !important; }
  [style*="margin-left:34px"]{ margin-left:0 !important; }
  [style*="margin-left:26px"]{ margin-left:0 !important; }
  #mobile-menu span{ font-size:17px; }
}