/* =========================================================================
   IN.SPIRED.it — Responsive overrides for the marketing UI kit.
   The page components use inline styles for layout. These rules override
   them at narrower viewports via attribute selectors + !important.

   Breakpoints:
     ≤ 1024px  — tablet
     ≤ 760px   — mobile
   ========================================================================= */

/* -------- Page background — subtle but noticeable (all viewports) -----
   A faint architectural grid (fine lines on a slightly larger module) plus
   two soft ambient colour washes anchored top-left (teal) and top-right
   (violet). Reads as a quiet engineered surface rather than flat black —
   noticeable, never busy. Fixed so it stays put while scrolling. */
body {
  background-color: var(--ink-900);
  background-image:
    radial-gradient(ellipse 70% 55% at 8% -8%, rgba(31,175,160,0.07), transparent 60%),
    radial-gradient(ellipse 65% 50% at 100% -6%, rgba(155,115,230,0.055), transparent 58%),
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(rgba(31,175,160,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,175,160,0.018) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    64px 64px, 64px 64px,
    16px 16px, 16px 16px;
  background-position:
    0 0, 0 0,
    0 0, 0 0,
    0 0, 0 0;
  background-attachment: fixed;
}
/* Sunken / sub-sections sit on the same texture but a touch darker so the
   alternating bands still read. They declare their own bg inline; this just
   keeps the texture visible through the slightly-translucent dark. */

/* -------- Desktop density (≥ 1025px) ------------------------------
   Pull in the oversized vertical rhythm so PC views aren't mostly air. */
@media (min-width: 1025px) {
  section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* -------- Tablet (≤ 1024px) -------------------------------------- */
@media (max-width: 1024px) {
  /* Container padding shrinks */
  [style*="max-width: 1280"],
  [style*="max-width:1280"],
  [style*="maxWidth: 1280"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Hero font sizes already use clamp — fine */

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

  /* 6-up logo cloud → 3-up */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }

  /* 4-column footer → 2-column */
  [style*="grid-template-columns: 1.4fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }

  /* Big section heading sizes ease down (still readable but less giant) */
  section h1, section h2 {
    font-size: clamp(36px, 5.5vw, 64px) !important;
  }

  /* Service-detail band titles sit in a narrow left column next to their
     icon tile. Keep them compact so they don't balloon to 2–3 lines and
     drift away from the icon above. (Overrides the broad rule above.) */
  section[id] h2 {
    font-size: clamp(28px, 3.4vw, 40px) !important;
  }
}

/* -------- Mobile (≤ 760px) --------------------------------------- */
@media (max-width: 760px) {
  /* Container padding tighter */
  [style*="max-width: 1280"],
  [style*="max-width:1280"],
  [style*="maxWidth: 1280"],
  [style*="max-width: 960"],
  [style*="max-width:960"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Collapse all multi-column grids to single column */
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(6, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1.6fr"],
  [style*="grid-template-columns: auto 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    direction: ltr !important;
  }

  /* Sections: reduce vertical padding */
  section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Hero top padding (anchor to nav) */
  [id="top"] {
    padding-top: 104px !important;
    padding-bottom: 8px !important;
  }

  /* Headline scaling */
  h1, [style*="font-size: clamp(48px"],
  [style*="font-size:clamp(48px"],
  [style*="font-size: clamp(56px"],
  [style*="font-size: clamp(40px"] {
    font-size: clamp(34px, 9vw, 52px) !important;
    line-height: 1 !important;
  }
  h2, [style*="font-size: clamp(36px"] {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.05 !important;
  }
  /* Display lede */
  [style*="font-size: clamp(22px, 2vw, 28px)"],
  [style*="font-size: clamp(24px, 2.4vw, 36px)"] {
    font-size: 20px !important;
  }

  /* Big "25+" callout in hero */
  [style*="fontSize: 22"][style*="fontFamily: var(--font-mono)"] {
    /* keep */
  }

  /* Hero background scene — fully hidden on mobile; a faded, full-width
     stretch of it otherwise reads as a big empty band under the hero text. */
  [aria-hidden="true"][style*="width: 62%"],
  [aria-hidden="true"][style*="width: 58%"] {
    display: none !important;
  }

  /* Buttons: full-width on mobile */
  button[style*="text-transform: uppercase"] {
    width: 100% !important;
    justify-content: center !important;
  }
  /* …unless they're inside the nav (small) */
  nav button, [data-nav] button { width: auto !important; }

  /* Nav links: hide on mobile (the .desktop-nav class hides them; mobile menu replaces them) */
  .desktop-nav { display: none !important; }
  .desktop-cta-row { display: none !important; }

  /* Service Detail icon row: keep number+tile horizontal */
  /* (these are direct children of column 1) */

  /* Force any flex 'between' row to stack on mobile */
  [style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Stat strip in Hero: 4-up → 2x2 */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Contact map / placeholder shrink */
  [style*="height: 392"][style*="ink-800"] { height: 200px !important; }
}

/* -------- Mobile-only: hamburger replaces desktop nav -------- */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg-1);
  padding: 0;
}
.mobile-nav-toggle:hover {
  background: rgba(255,255,255,0.04);
}
@media (max-width: 760px) {
  .mobile-nav-toggle { display: inline-flex; }
}

/* Animated nav-link underline (desktop) */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-link:hover { color: var(--fg-1); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[data-current="true"] { color: var(--fg-1); }
.nav-link[data-current="true"]::after {
  transform: scaleX(1);
  background: var(--brand);
}
.nav-phone:hover {
  border-color: var(--brand) !important;
  background: var(--accent-soft) !important;
}

/* Mobile menu drawer */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: rgba(10,15,16,0.95);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
  z-index: 99;
  padding: 24px 18px 32px;
  flex-direction: column;
  gap: 8px;
}
.mobile-nav-drawer[data-open="true"] { display: flex; }
.mobile-nav-drawer a {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--fg-1);
  text-decoration: none;
  padding: 14px 12px;
  border-radius: 10px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
}
.mobile-nav-drawer a:hover {
  background: var(--bg-elevated);
  border-color: var(--border);
}
.mobile-nav-drawer a[data-current="true"] {
  background: var(--accent-soft);
  border-color: rgba(31,175,160,0.3);
  color: var(--fg-1);
}
.mobile-nav-drawer .remote-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand) !important;
  font-weight: 600;
}
.mobile-nav-drawer .phone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--fg-1);
  margin-top: 8px;
  border-top: 1px solid var(--border);
  text-decoration: none;
}

/* =========================================================================
   Remote Assistance page — grid collapses
   ========================================================================= */
@media (max-width: 1000px) {
  .ra-hero-grid,
  .ra-browser-grid,
  .ra-steps {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ra-hero-art { max-width: 460px; }
}
@media (max-width: 760px) {
  .ra-dl-text + .ra-dl-btn,
  .ra-dl-btn { width: 100%; }
  /* download panel: stack text over button */
  [class*="ra-dl"] { }
}
/* the download PanelCard grid (2-col) → stack on tablet */
@media (max-width: 860px) {
  .ra-hero-grid,
  .ra-browser-grid,
  .ra-dl-panel { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ra-dl-panel .ra-dl-btn { width: 100%; }
}
/* compact browser-thumb row → 1-col on narrow */
@media (max-width: 680px) {
  .ra-browser-row { grid-template-columns: 1fr !important; gap: 16px !important; }
}
/* step rows: always stack text above the screenshot on narrow screens */
@media (max-width: 720px) {
  .ra-step-row { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
  .ra-step-row > div { max-width: 100% !important; flex: 1 1 auto !important; }
}

/* =========================================================================
   Remote Assistance — top-right download pointer cue
   ========================================================================= */
.ra-pointer {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 3000;
  max-width: 300px;
  pointer-events: none;
}
.ra-pointer-card {
  pointer-events: auto;
  background: var(--ink-700);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(20,181,168,0.25);
  animation:
    ra-pointer-in 320ms cubic-bezier(0.2,0.8,0.2,1) both,
    ra-pointer-bounce 1.3s ease-in-out 360ms infinite;
}
.ra-pointer-dismiss {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
}
.ra-pointer-dismiss:hover { background: var(--accent-soft); }
@keyframes ra-pointer-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ra-pointer-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .ra-pointer-card { animation: ra-pointer-in 320ms ease both; }
}

/* =========================================================================
   Mobile layout fixes — June 2026
   ========================================================================= */
html { overflow-x: hidden; }

/* ---- Nav: collapse to hamburger BEFORE the desktop nav (~915px wide) runs
   off the right edge on small tablets / narrow windows (issue 7). --------- */
@media (max-width: 940px) {
  .desktop-nav,
  .desktop-cta-row { display: none !important; }
  .mobile-nav-toggle { display: inline-flex !important; }
}

@media (max-width: 760px) {
  /* ---- Home: testimonial cards — clean single column, sensibly sized
     (issue 2). The generic collapse already stacks them; this tightens the
     spacing and removes the tall min-height so they don't overlap / float. */
  .tst-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .tst-card { min-height: 0 !important; height: auto !important; }
  .tst-card blockquote { font-size: 19px !important; }

  /* ---- Services: anchor pills — compact so they don't eat vertical space
     (issue 3). */
  .svc-anchors { gap: 6px !important; margin-top: 24px !important; }
  .svc-anchor {
    font-size: 11px !important;
    padding: 6px 11px 6px 9px !important;
    gap: 7px !important;
  }
  .svc-anchor > span { width: 15px !important; height: 15px !important; }

  /* ---- Services: tighten the empty space between service bands (issue 4).
     The generic `section{padding:64px}` rule was inflating these bands' inline
     56px padding; pull it right back. */
  .svc-band { padding-top: 28px !important; padding-bottom: 28px !important; }
  .svc-band-divider { margin-bottom: 24px !important; }
  .svc-band-grid { gap: 18px !important; }

  /* ---- Services: "What we put in place" — keep the seamless hairline grid
     as a single column (the generic collapse forced a 24px gap that broke the
     bordered look) and clear the span-2 last cell (issue 5). */
  .svc-stack { grid-template-columns: 1fr !important; gap: 1px !important; }
  .svc-stack > div { grid-column: auto !important; }

  /* ---- About: these 2-column templates weren't in the collapse list, so the
     whole page stayed side-by-side and crushed on mobile (issue 6). */
  [style*="grid-template-columns: 1.25fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* About director note: the signature panel's left border/indent reads wrong
     once stacked — move the rule to the top. */
  .about-sig-panel {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 24px !important;
  }

  /* ---- Contact page: tidy the form on mobile. The reCAPTCHA is a fixed
     ~304px widget. We shrink it with `zoom` (NOT `transform: scale`): zoom
     shrinks the actual LAYOUT box, so the widget can never reach the form's
     clip edge — transform only scales pixels while the box stays 304px wide,
     which is what overflowed/clipped the right edge once Google's iframe
     injected a moment after load. */
  #contact-form { padding: 26px 18px 22px !important; }
  .contact-body-grid > * { min-width: 0 !important; }
  #contact-form { min-width: 0 !important; }
  #contact-form .g-recaptcha {
    display: inline-block;
    vertical-align: top;
    zoom: 0.82;
  }
}

@media (max-width: 360px) {
  #contact-form .g-recaptcha {
    display: inline-block;
    vertical-align: top;
    zoom: 0.74;
  }
}