/* ============================================================
   Maintain PM — responsive layer
   Loaded after styles.css. Owns the header/menu layout and the
   breakpoints the handoff didn't cover.

   Ladder:  1240 container · 1180 hide header phone · 1024 hamburger
            900 two-col sections stack · 720 · 560 · 400
   ============================================================ */

:root {
  --header-h: 92px;
}
@media (max-width: 1180px) { :root { --header-h: 86px; } }
@media (max-width: 1024px) { :root { --header-h: 80px; } }
@media (max-width: 560px)  { :root { --header-h: 68px; } }

/* Nothing should ever be able to push the page sideways. */
img, svg, video, canvas { max-width: 100%; }

/* ---------- header bar ----------------------------------------------------
   Three columns rather than space-between, so the nav is centred on the page
   itself and not merely on whatever is left over between logo and buttons. */
.header-bar {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  transition: height var(--dur-base) var(--ease-out);
}

.header-logo {
  justify-self: start;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.header-logo img {
  display: block;
  width: auto;
  height: clamp(30px, 3.4vw, 46px);
  transition: height var(--dur-base) var(--ease-out);
}

.header-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.4rem);
  white-space: nowrap;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
.header-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  text-decoration: none;
}

/* Below the container width the phone number is the first thing to go —
   the quote button and the tap-to-call in the menu both still cover it. */
@media (max-width: 1180px) {
  .header-phone { display: none; }
}

/* ---------- hamburger ---------------------------------------------------- */
.header-burger {
  display: none;
  justify-self: end;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  /* 44px hit target, pulled flush to the gutter optically. */
  padding: 13px;
  margin-right: -13px;
  transition: color var(--dur-base) var(--ease-out);
}
.burger-box {
  position: relative;
  display: block;
  width: 26px;
  height: 18px;
}
.burger-box span {
  position: absolute;
  left: 0;
  height: 2.5px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) linear,
              width var(--dur-base) var(--ease-out);
}
.burger-box span:nth-child(1) { top: 0; }
.burger-box span:nth-child(2) { top: 50%; margin-top: -1.25px; width: 76%; }
.burger-box span:nth-child(3) { bottom: 0; }

.site-header.is-open .burger-box span:nth-child(1) { transform: translateY(7.75px) rotate(45deg); }
.site-header.is-open .burger-box span:nth-child(2) { opacity: 0; width: 0; }
.site-header.is-open .burger-box span:nth-child(3) { transform: translateY(-7.75px) rotate(-45deg); }

/* Swap to the hamburger while the inline nav still has room to breathe,
   rather than waiting until it is visibly crowded. */
@media (max-width: 1024px) {
  .header-nav,
  .header-actions { display: none; }
  .header-burger { display: inline-flex; }
  .header-bar { grid-template-columns: 1fr auto; }
}

/* ---------- slide-down menu panel ---------------------------------------- */
.header-panel {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 5vw, 2.25rem) var(--gutter) calc(var(--gutter) + 0.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.header-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
@media (min-width: 1025px) {
  .header-panel { display: none; }
}

/* The scroll lock is gated on the same breakpoint as the panel, so widening
   the window past the hamburger releases the page whether or not any resize
   event reaches the script. Correct by construction rather than by listener. */
@media (max-width: 1024px) {
  html.menu-open,
  html.menu-open body { overflow: hidden; }
}

.panel-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-inverse);
}
.panel-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-inverse);
  cursor: pointer;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6.5vw, 2.2rem);
  letter-spacing: -0.03em;
  padding: clamp(0.75rem, 2.6vw, 1.05rem) 0;
  transition: color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
}
.panel-link:hover,
.panel-link:focus-visible { color: var(--signal-400); padding-left: 0.4rem; }
.panel-link.is-active { color: var(--signal-400); }
.panel-link .idx {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-300);
}

.panel-foot {
  margin-top: auto;
  padding-top: clamp(1.5rem, 6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.panel-phone {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 5.5vw, 1.8rem);
  letter-spacing: -0.02em;
}
.panel-phone:hover { color: var(--signal-400); }
.panel-note {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-300);
}

/* ---------- marquee band --------------------------------------------------
   Was nowrap inside an overflow:hidden parent, which silently cut three of the
   six terms off on a phone. Wrap instead of clip. */
.marquee-band {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--gutter);
}
@media (max-width: 1024px) {
  .marquee-band {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 1.15rem var(--gutter);
  }
}

/* ---------- section rhythm on mid-size screens ---------------------------- */
@media (max-width: 1024px) and (min-width: 901px) {
  .hero-grid,
  .diff-grid,
  .feature-grid,
  .faq-grid,
  .contact-grid { gap: var(--space-7); }
}

/* ---------- small phones -------------------------------------------------- */
@media (max-width: 400px) {
  .panel-link { font-size: 1.45rem; }
  .marquee-band { font-size: 0.92em; }
}

/* Keyboard users need to see where they are on the dark panel. */
.panel-link:focus-visible,
.panel-phone:focus-visible,
.header-burger:focus-visible {
  outline: 2px solid var(--signal-500);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .header-panel,
  .burger-box span,
  .panel-link,
  .header-logo img,
  .header-bar { transition: none; }
}