/* ============================================================================
   Phillips Group Development — shared responsive & accessibility layer
   ----------------------------------------------------------------------------
   Loaded AFTER each page's inline <style>, so these rules win by source order
   without needing !important. This file is ADDITIVE: it refines responsiveness
   and touch/accessibility behaviour only — it does not change the navy + gold
   "drawing set" visual identity. Breakpoints are content-driven, not device-
   specific. Edit responsive behaviour here once, and it applies to every page.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Architectural frame — scale its inset down as the screen narrows so it
      never eats usable width on phones (was a fixed 14px on every size).
   --------------------------------------------------------------------------- */
.sheet { inset: clamp(10px, 2.4vw, 14px); }

/* ---------------------------------------------------------------------------
   2. Homepage navigation — hand off to the hamburger BEFORE the bar crowds.
      The desktop nav previously stayed until 720px, but the logo already
      overlapped the links by ~820px. Switch at 1000px (a content condition:
      logo + 4 links + coordinate label + CTA stop fitting comfortably).
   --------------------------------------------------------------------------- */
.nav-controls { display: flex; align-items: center; gap: 22px; }

@media (max-width: 1000px) {
  .nav .nav-links,
  .nav .nav-tag,
  .nav .nav-cta { display: none; }          /* hide desktop links, coords, CTA */
  .nav .burger  { display: flex; }           /* reveal hamburger earlier        */
  .nav {                                      /* keep clear of the notch/safe area */
    padding: 14px max(18px, env(safe-area-inset-right))
             14px max(18px, env(safe-area-inset-left));
  }
}

/* Hamburger + close: guaranteed 44x44 touch target with a centred glyph */
.burger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.mmenu .mclose {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Mobile menu respects the safe area at the top/right */
.mmenu {
  padding-top: max(20px, env(safe-area-inset-top));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* ---------------------------------------------------------------------------
   3. Fixed drawing-sheet rail label — a secondary registration detail. Hide it
      on small screens where it can sit over content near the bottom-left.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) { .sheetlabel { display: none; } }

/* ---------------------------------------------------------------------------
   4. Contact form — collapse to a single column on phones, and guarantee 16px
      inputs so iOS Safari never auto-zooms the viewport on focus.
   --------------------------------------------------------------------------- */
@media (max-width: 520px) { .cform { grid-template-columns: 1fr; } }

.cform input, .cform select, .cform textarea,
.field input, .field select, .field textarea { font-size: max(16px, 1rem); }

/* ---------------------------------------------------------------------------
   5. Touch devices — never depend on hover to reveal essential content.
      On hover-less pointers, show service descriptions and the row arrow, and
      drop hover-scale transforms that can't be triggered anyway.
   --------------------------------------------------------------------------- */
@media (hover: none) {
  .srow p   { max-height: none; opacity: .78; margin-top: 12px; }
  .srow .sgo { opacity: 1; }
  .pcard:hover img,
  .grid figure:hover img,
  .projgrid a:hover img,
  .sheetpanel:hover .splate img { transform: none; }
}

/* ---------------------------------------------------------------------------
   6. Reduced motion — pause the continuous marquee and drop the custom cursor
      for users who ask for less motion. (The existing .rv reveal already has a
      reduced-motion fallback; this covers the always-on animations.)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .cursor { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   7. Hero — use small-viewport-height units where supported so the first
      screen is reliable on mobile browsers (avoids the 100vh address-bar jump
      and short-landscape clipping). Falls back to the existing height if unsupported.
   --------------------------------------------------------------------------- */
@supports (height: 100svh) {
  .hero-full { min-height: 100svh; }
}