/* Site-wide responsive corrections.
   ------------------------------------------------------------------------
   The pages carry their layout in inline styles, so the only way to adapt
   them per breakpoint is to match on those inline values. Two things to know
   before editing this file:

   1. support.js re-serialises every inline style when it renders. The DOM
      therefore carries a NORMALISED spelling: a space after the colon, a
      leading zero (.9fr -> 0.9fr) and a space after commas inside repeat().
      Rules below list both spellings so they hold whether or not a given
      value passes through the renderer.

   2. Pages with their own @media blocks (Home, WMS, Keynote, Careers,
      Contact) already handle their specific layouts. This file is the shared
      baseline underneath them; it is linked first so a page can still
      override it.

   Breakpoints: 1100 (small laptop) / 900 (tablet) / 620 (large phone) /
   420 (small phone), plus a 1700 rule for large monitors. */

/* ---------- Large screens ---------- */
/* The 1440px containers leave a lot of margin on a 27" monitor. Widen them
   slightly rather than letting the page float in the middle of the screen. */
@media (min-width: 1700px) {
  [style*="max-width:1440px"],
  [style*="max-width: 1440px"] { max-width: 1600px; }
  [style*="max-width:1240px"],
  [style*="max-width: 1240px"] { max-width: 1360px; }
}

/* ---------- Small laptop ---------- */
@media (max-width: 1100px) {
  /* Asymmetric two-column splits stop being readable well before they get
     narrow enough to wrap on their own. */
  [style*="grid-template-columns:1.3fr 0.7fr 1.6fr"],
  [style*="grid-template-columns: 1.3fr 0.7fr 1.6fr"],
  [style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  /* Even two-column blocks: side by side at 900px means ~430px columns of
     body copy, which is past comfortable. */
  main [style*="grid-template-columns:1fr 1fr"],
  main [style*="grid-template-columns: 1fr 1fr"],
  main [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"],
  main [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"],
  main [style*="grid-template-columns:repeat(2,minmax(0,1fr))"],
  main [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  /* Number/icon gutter columns: the narrow first track wastes width on a
     tablet, so the label stacks above its content instead. */
  main [style*="grid-template-columns:44px 1fr"],
  main [style*="grid-template-columns: 44px 1fr"],
  main [style*="grid-template-columns:44px 1fr 24px"],
  main [style*="grid-template-columns: 44px 1fr 24px"],
  main [style*="grid-template-columns:64px minmax(0,1fr) 24px"],
  main [style*="grid-template-columns: 64px minmax(0, 1fr) 24px"],
  main [style*="grid-template-columns:1fr auto 24px"],
  main [style*="grid-template-columns: 1fr auto 24px"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Hero blocks carry 160-172px of top padding for the fixed nav. That is
     most of a phone screen before any content shows. */
  main section[style*="padding:170px"],  main section[style*="padding: 170px"],
  main section[style*="padding:172px"],  main section[style*="padding: 172px"],
  main section[style*="padding:160px"],  main section[style*="padding: 160px"],
  main [style*="padding:172px 32px 90px"], main [style*="padding: 172px 32px 90px"],
  main [style*="padding:170px 32px 88px"], main [style*="padding: 170px 32px 88px"],
  main [style*="padding:170px 32px 92px"], main [style*="padding: 170px 32px 92px"],
  main [style*="padding:170px 32px 80px"], main [style*="padding: 170px 32px 80px"],
  main [style*="padding:170px 32px 30px"], main [style*="padding: 170px 32px 30px"],
  main [style*="padding:160px 32px 90px"], main [style*="padding: 160px 32px 90px"] {
    padding-top: 122px !important;
  }
}

/* ---------- Large phone ---------- */
@media (max-width: 620px) {
  /* 32px each side is a tenth of a 360px screen. Pull the gutters in and let
     the content take the width back. */
  main section > div[style*="padding"],
  main section[style*="padding"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  main [style*="padding:170px"], main [style*="padding: 170px"],
  main [style*="padding:172px"], main [style*="padding: 172px"],
  main [style*="padding:160px"], main [style*="padding: 160px"] {
    padding-top: 104px !important;
  }

  /* Vertical rhythm: 90-130px gaps between sections are tuned for a desktop
     viewport and read as dead space on a phone. */
  main [style*="padding:90px 32px"],  main [style*="padding: 90px 32px"],
  main [style*="padding:100px 32px"], main [style*="padding: 100px 32px"],
  main [style*="padding:110px 32px"], main [style*="padding: 110px 32px"],
  main [style*="padding:130px 32px"], main [style*="padding: 130px 32px"] {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  /* Any remaining multi-column grid goes single column. */
  main [style*="grid-template-columns:repeat(3"],
  main [style*="grid-template-columns: repeat(3"],
  main [style*="grid-template-columns:repeat(4"],
  main [style*="grid-template-columns: repeat(4"],
  main [style*="grid-template-columns:repeat(5"],
  main [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: 1fr !important;
  }

  /* Oversized display type: clamp() handles most headings, but the fixed
     sizes left on a few pages overflow narrow screens. */
  main h1 { font-size: clamp(28px, 8.4vw, 44px) !important; line-height: 1.06 !important; }
  main h2 { font-size: clamp(23px, 6.4vw, 34px) !important; line-height: 1.14 !important; }

  /* Long unbroken strings (emails, URLs) must not push the page sideways. */
  main a[href^="mailto:"], main a[href^="tel:"] { word-break: break-word; }
}

/* ---------- Small phone ---------- */
@media (max-width: 420px) {
  main section > div[style*="padding"],
  main section[style*="padding"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Pill rows and button pairs wrap instead of overflowing. */
  main [style*="display:flex"][style*="gap"],
  main [style*="display: flex"][style*="gap"] { flex-wrap: wrap; }
}

/* ---------- Everywhere ---------- */
/* Nothing should be able to scroll the page sideways.
   Keep `overflow-x` on <html> ONLY. Putting it on <body> as well used to break
   every scroll-driven effect on the site: per spec, when one axis is `hidden`
   the other computes to `auto`, so <body> became its own scroll container and
   did the scrolling instead of the document. window.scrollY then stayed at 0
   forever and `window.addEventListener('scroll', …)` never fired — killing the
   WMS dashboard story, the scroll-spy nav and the reveal animations. */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; }
img, video, svg, canvas { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ---------- Site Nav / Site Footer hover states ---------- */
/* Both fragments are pulled into all 15 pages with <dc-import> and have no
   <helmet> of their own, so their CSS lives here — this file is linked by
   every page.

   These were authored as `style-hover="…"` attributes. That attribute is
   implemented nowhere in support.js or the design-system bundle, so all 48
   declarations were inert on every page of the site. Ported verbatim, with
   two necessary changes:

   1. `!important` — each element sets the same property in its own inline
      style, and an inline style outranks any class selector. Without it the
      rules below would be just as dead as the attributes they replace.
   2. Wrapped in `(hover: hover)` so a tap on a touch screen cannot leave the
      state stuck on after the finger lifts. */
@media (hover: hover) {
  .ac-nvh-1, .ac-nvh-2, .ac-nvh-3, .ac-nvh-4, .ac-nvh-5, .ac-fth-1 {
    transition: background-color .2s ease, color .2s ease,
                border-color .2s ease, box-shadow .2s ease;
  }

  /* Burger toggle */
  .ac-nvh-1:hover { background: rgba(17, 17, 17, .09) !important; }
  /* Top-level items: Programs / Consulting / Testimonials / WMS / Tribe /
     Conclave / Keynote / Careers */
  .ac-nvh-2:hover { background: rgba(17, 17, 17, .05) !important; }
  /* Dropdown rows inside the mega-menus */
  .ac-nvh-3:hover { background: rgba(224, 0, 0, .07) !important; }
  /* "See the proof" ghost button */
  .ac-nvh-4:hover {
    border-color: #595959 !important;
    background: rgba(17, 17, 17, .04) !important;
  }
  /* "Book a discovery call" primary CTA */
  .ac-nvh-5:hover {
    background: #ff2b2b !important;
    box-shadow: 0 14px 34px rgba(224, 0, 0, .32) !important;
  }

  /* Every footer link lifts from 72% white to solid white */
  .ac-fth-1:hover { color: #ffffff !important; }
}

/* Tap targets on touch devices: 44px is the accessibility floor and several
   nav pills and inline links sit under it. */
@media (hover: none) and (pointer: coarse) {
  main a[style*="border-radius:999px"],
  main a[style*="border-radius: 999px"],
  main button { min-height: 44px; }
}