/* ============================================================
   ALLTINE Group — production interaction + responsive layer.
   The page markup keeps the design prototype's inline styles
   (the approved desktop design); this sheet adds the mobile
   nav, responsive grid collapse, type scaling, and form/modal
   polish on top, using injected classes + attribute selectors.
   ============================================================ */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { max-width: 100%; }
[id] { scroll-margin-top: 90px; }

/* ---------- hamburger (injected) ---------- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer;
  padding: 11px 10px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; height: 2px; width: 22px; border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
.hdr-dark  .nav-toggle span { background: #C2A063; }
.hdr-light .nav-toggle span { background: #0E2336; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* header height token per theme (for the mobile dropdown offset) */
.hdr-dark  { --navh: 78px; }
.hdr-light { --navh: 74px; }

/* ---------- contact form status line ---------- */
.form-status { display: none; font: 500 13px/1.5 Archivo, sans-serif; margin: 0; }
.form-status.show { display: block; }
.form-status.ok  { color: #2f7d4f; }
.form-status.err { color: #b3402f; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: ease side padding + drop 4/3-col grids to 2-col */
@media (max-width: 1024px) {
  [style*="max-width:1280px"], [style*="max-width:1240px"] { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 1024px) and (min-width: 741px) {
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile nav */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-header .nav-links {
    position: fixed; top: var(--navh); left: 0; right: 0;
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    padding: 8px 0 18px !important;
    transform: translateY(-140%);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1);
    box-shadow: 0 24px 44px rgba(8, 20, 32, .28);
    max-height: calc(100vh - var(--navh)); overflow-y: auto;
  }
  .hdr-dark  .site-header.hdr-dark .nav-links,
  .hdr-dark  .nav-links { background: #0E2336; border-bottom: 1px solid rgba(194, 160, 99, .22); }
  .hdr-light .nav-links { background: #FAF8F3; border-bottom: 1px solid #E4DECF; }
  .site-header .nav-links.open { transform: translateY(0); }
  .site-header .nav-links > a { padding: 15px 28px !important; }
  .hdr-dark  .nav-links > a { border-top: 1px solid rgba(255, 255, 255, .06); }
  .hdr-light .nav-links > a { border-top: 1px solid #E4DECF; }
  body.nav-open { overflow: hidden; }
}

/* Phone: single column + scaled display type + tighter sections */
@media (max-width: 740px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="max-width:1280px"], [style*="max-width:1240px"] { padding-left: 20px !important; padding-right: 20px !important; }
  h1[style] { font-size: 40px !important; line-height: 1.05 !important; }
  h2[style] { font-size: 30px !important; line-height: 1.12 !important; }
  h3[style] { font-size: 24px !important; }
  section[style*="110px"] { padding-top: 66px !important; padding-bottom: 66px !important; }
  section[style*="96px"]  { padding-top: 60px !important; padding-bottom: 60px !important; }
  /* let flex header rows (heading + CTA) wrap cleanly */
  [style*="justify-content:space-between"][style*="display:flex"] { flex-wrap: wrap; gap: 20px; }
}

/* Small phone */
@media (max-width: 460px) {
  h1[style] { font-size: 34px !important; }
  h2[style] { font-size: 26px !important; }
  [style*="max-width:1280px"], [style*="max-width:1240px"] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}