/* ============================================================
   Cognis — responsive structure layer (v2, fluid foundation).
   Typography, gutters and spacers are now FLUID AT THE SOURCE
   (inline clamp() values anchored at 1440px), so this file only
   handles what genuinely needs breakpoint re-layout: grid/flex
   structure, the mobile nav, and a few bespoke components.
   Breakpoints follow the reference template: 991 / 767 / 479.
   ============================================================ */

/* Never allow sideways scroll. */
html, body { max-width: 100%; overflow-x: hidden; }
#dc-root { overflow-x: hidden; }

/* Mobile nav chrome (hidden on desktop; shown in the <=991px block). */
[data-cg-hamburger] {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  background: transparent; border: none; cursor: pointer;
  border-radius: 10px;
}
[data-cg-hamburger] span {
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
  margin: 0 auto;
}
[data-cg-hamburger][aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-cg-hamburger][aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-cg-hamburger][aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

[data-cg-menu] {
  position: fixed; inset: 0; z-index: 2147483000;
  background: #0D0D0C; color: #fff;
  display: flex; flex-direction: column;
  padding: 88px 28px 40px;
  gap: 4px;
  transform: translateY(-100%);
  transition: transform .34s cubic-bezier(.22,1,.36,1), visibility .34s;
  overflow-y: auto;
  visibility: hidden;
}
[data-cg-menu].cg-open { transform: translateY(0); visibility: visible; }
[data-cg-menu] a {
  color: #fff !important; text-decoration: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
[data-cg-menu] a.cg-menu-cta {
  margin-top: 20px; border: none; text-align: center;
  background: #D6FD70; color: #131313 !important;
  border-radius: 100px; padding: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px; font-size: 15px;
}
body.cg-menu-lock { overflow: hidden; }

/* ---------- TABLET (<= 991px, matches the reference template) ---------- */
@media (max-width: 991px) {
  /* Nav: desktop links -> hamburger */
  [data-cg-navlinks] { display: none !important; }
  [data-cg-hamburger] { display: flex !important; }
  /* Aeline mobile header: logo + hamburger only — the slide-in menu carries
     the Work With Us CTA, so the header pill hides at hamburger widths. */
  [data-cg-headercta] { display: none !important; }

  /* Grid structure: repeat() grids reflow to as many 300px+ columns as fit
     (2-up on tablet). Full-width feature tiles span the whole row so a
     `span 3` can never force phantom tracks. */
  [style*="grid-template-columns: repeat("] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  }
  [style*="grid-column: span"] { grid-column: 1 / -1 !important; }
  /* Asymmetric two-column grids (1.15fr 1fr etc.) stack. */
  [style*="grid-template-columns"]:not([style*="repeat("]) {
    grid-template-columns: 1fr !important;
  }

  /* Wide side-by-side flex rows (heading|copy, split heroes) stack.
     Marquee tracks (width: max-content) are exempt. */
  [style*="display: flex"][style*="gap: 80px"]:not([style*="max-content"]),
  [style*="display: flex"][style*="gap: 64px"]:not([style*="max-content"]),
  [style*="display: flex"][style*="gap: 56px"]:not([style*="max-content"]),
  [style*="display: flex"][style*="gap: 48px"]:not([style*="max-content"]),
  [style*="display: flex"][style*="gap: 44px"]:not([style*="max-content"]),
  [style*="display: flex"][style*="gap: 40px"]:not([style*="max-content"]),
  [style*="display: flex"][style*="gap: 32px"]:not([style*="max-content"]) {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  /* Card rows wrap; icon+word heading rows wrap instead of forcing width. */
  [style*="display: flex"][style*="gap: 24px"],
  [style*="display: flex"][style*="gap: 20px"],
  [style*="display: flex"][style*="gap: 12px"],
  [style*="column-gap: 16px"],
  [style*="column-gap: 14px"],
  [style*="column-gap: 12px"] { flex-wrap: wrap !important; justify-content: center; }
  /* Icon-heading fragments are white-space:nowrap; let them break on phones. */
  [style*="column-gap: 14px"] > [style*="white-space: nowrap"],
  [style*="column-gap: 16px"] > [style*="white-space: nowrap"] { white-space: normal !important; }

  /* Centered shrink-to-fit wrappers: a wide child (card ring, icon heading)
     must not stretch them past the viewport. */
  [style*="max-width: 1280px"], [style*="max-width: 1180px"],
  [style*="max-width: 1100px"], [style*="max-width: 960px"],
  [style*="max-width: 900px"],  [style*="max-width: 880px"],
  [style*="max-width: 860px"],  [style*="max-width: 820px"],
  [style*="max-width: 800px"],  [style*="max-width: 760px"],
  [style*="max-width: 720px"],  [style*="max-width: 700px"],
  [style*="max-width: 680px"],  [style*="max-width: 660px"],
  [style*="max-width: 640px"],  [style*="max-width: 620px"],
  [style*="max-width: 600px"],  [style*="max-width: 580px"],
  [style*="max-width: 560px"],  [style*="max-width: 540px"],
  [style*="max-width: 520px"] { max-width: 100% !important; }
  h1, h2, h3 { overflow-wrap: break-word; }

  /* Fixed-width content blocks go fluid. */
  [style*="width: 900px"], [style*="width: 660px"], [style*="width: 640px"],
  [style*="width: 560px"], [style*="width: 540px"], [style*="width: 520px"],
  [style*="width: 480px"], [style*="width: 440px"], [style*="width: 420px"],
  [style*="width: 380px"], [style*="width: 360px"], [style*="width: 340px"],
  [style*="width: 320px"], [style*="width: 300px"], [style*="width: 275px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Home services accordion: stack the cards; the absolutely-inset video
     (inset ... 315px) cannot fit a narrow card. */
  #services [style*="cursor: pointer"] { flex: 1 0 100% !important; }
  #services [style*="315px"] { display: none !important; }

  /* Hero section: tighter chrome on small screens. */
  [data-screen-label="Hero"] { margin: 8px !important; }
  [data-screen-label="Hero"] [style*="max-width: 900px"] { width: 100% !important; }
}

/* ---------- PHONE (<= 479px) ---------- */
@media (max-width: 479px) {
  /* Grids: single column. */
  [style*="grid-template-columns: repeat("] { grid-template-columns: 1fr !important; }
}