/* 3Tier — responsive overrides.
   The site is styled inline; these attribute-selector rules adapt layout per breakpoint. */

/* ---------- global guards ---------- */
html, body { overflow-x: clip; }
img { max-width: 100%; }

/* ---------- ≤1080px: collapse asymmetric two-column grids ---------- */
@media (max-width: 1080px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 5fr 6fr"],
  [style*="grid-template-columns: 7fr 4fr"],
  [style*="grid-template-columns: minmax(0, 600px) 1fr"],
  [style*="grid-template-columns: 1fr 480px"],
  [style*="grid-template-columns: 1fr 440px"],
  [style*="grid-template-columns: minmax(0, 1fr) 300px"],
  [style*="grid-template-columns: 300px 1fr"],
  [style*="grid-template-columns: 260px 1fr"],
  [style*="grid-template-columns: 360px 1fr"],
  [style*="grid-template-columns: 1fr 360px"],
  [style*="grid-template-columns: 380px 1fr"],
  [style*="grid-template-columns: 220px 1fr"] { grid-template-columns: 1fr !important; }
  [style*="position: sticky; top: 100px"],
  [style*="position: sticky; top: 96px"] { position: static !important; }
  [style*="gap: 72px"] { gap: 40px !important; }
  [style*="gap: 64px"] { gap: 36px !important; }
}

/* ---------- ≤900px: 3-col → 2-col; stepper stacks ---------- */
@media (max-width: 900px) {
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: 1fr auto 1fr auto 1fr"] { grid-template-columns: 1fr !important; justify-items: start !important; row-gap: 10px !important; }
  [style*="grid-template-columns: 1fr auto 1fr auto 1fr"] > svg { transform: rotate(90deg); margin-left: 10px; }
  /* Services stepper: journey stacks vertically, connectors become short vertical lines */
  [style*="grid-template-columns: auto 1fr auto 1fr auto"] { grid-template-columns: auto !important; justify-items: start !important; row-gap: 10px !important; }
  [data-step-connector] { min-width: 0 !important; width: 1px !important; height: 26px !important; margin-left: 19px; background: var(--ink-200); }
  [data-step-connector] > * { display: none !important; }
}

/* ---------- ≤720px: single column, type + padding scale ---------- */
@media (max-width: 720px) {
  [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: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="columns: 2"] { columns: 1 !important; }

  /* button rows and chip rows wrap instead of overflowing */
  [style*="display: flex"][style*="gap: 14px"] { flex-wrap: wrap !important; }
  [style*="display: flex"][style*="gap: 22px"] { flex-wrap: wrap !important; }

  [style*="font-size: 60px"] { font-size: 38px !important; }
  [style*="font-size: 56px"] { font-size: 36px !important; }
  [style*="font-size: 54px"] { font-size: 34px !important; }
  [style*="font-size: 48px"] { font-size: 31px !important; }
  [style*="font-size: 46px"] { font-size: 30px !important; }
  [style*="font-size: 42px"] { font-size: 28px !important; }
  [style*="font-size: 34px"] { font-size: 27px !important; }
  [style*="font-size: 32px"] { font-size: 26px !important; }
  [style*="font-size: var(--text-display-lg-size)"] { font-size: 30px !important; }
  [style*="font-size: var(--text-display-md-size)"] { font-size: 25px !important; }

  [style*="padding: 96px 32px"],
  [style*="padding: 88px 32px"],
  [style*="padding: 80px 32px"],
  [style*="padding: 76px 32px"],
  [style*="padding: 72px 32px"],
  [style*="padding: 64px 32px"],
  [style*="padding: 56px 32px"],
  [style*="padding: 48px 32px"] { padding-left: 20px !important; padding-right: 20px !important; padding-top: 48px !important; }
  [style*="padding: 56px 48px"],
  [style*="padding: 36px 40px"] { padding: 26px 20px !important; }
  [style*="padding: 30px 32px"] { padding: 22px 18px !important; }
  [style*="padding: 44px 48px"],
  [style*="padding: 40px 48px"],
  [style*="padding: 40px 44px"],
  [style*="padding: 44px 48px"] { padding: 28px 22px !important; }
  [style*="padding: 32px;"] { padding: 24px 20px !important; }

  [style*="font-size: 19px; line-height: 1.6"] { font-size: 17px !important; }

  /* dark CTA band: center + shrink globe */
  canvas[data-globe] { width: min(84vw, 400px) !important; height: min(84vw, 400px) !important; }
  [style*="margin-right: -40px"] { margin-right: 0 !important; justify-content: center !important; }

  /* dynamic post cover */
  [role="img"][style*="height: 440px"] { height: 240px !important; }

  /* hero alignment field shrinks */
  svg[style*="max-height: 540px"] { max-height: 340px !important; }

  /* Value Overview: hide background flow motif; shrink alignment motif */
  svg[data-vo-deco] { display: none !important; }
  svg[style*="width: 200px"] { width: 160px !important; }

  /* Services: hide phase-identity motifs on small screens */
  svg[data-phase-deco] { display: none !important; }

  /* Framework: Automation Enablement band */
  [style*="grid-template-columns: 88px 1fr"] { grid-template-columns: 1fr !important; }

  /* image slots scale to container */
  image-slot { max-width: 100% !important; }
}

/* ---------- CMS (Blog CMS / Careers CMS): table-style grids scroll horizontally
   instead of squeezing illegible columns ---------- */
@media (max-width: 900px) {
  [style*="border-radius: 16px; overflow: hidden; animation: tierFadeUp"] { overflow-x: auto !important; }
  [style*="grid-template-columns: 2.4fr 2.6fr 110px 130px 210px"],
  [style*="grid-template-columns: 2.6fr 1.6fr 110px 130px 210px"] { min-width: 700px; }
  /* CMS top nav: allow the link row to wrap instead of overflowing */
  header[style*="position: sticky; top: 0; z-index: 50; background: var(--green-900)"] [style*="height: 60px"] {
    height: auto !important; flex-wrap: wrap !important; padding-top: 10px !important; padding-bottom: 10px !important;
  }
}
@media (max-width: 480px) {
  /* CMS admin login / editor cards: fixed 400px width → fluid */
  [style*="width: 400px; background: #FFFFFF; border: 1px solid var(--border-default); border-radius: 16px; padding: 40px"] {
    width: 100% !important; padding: 28px !important;
  }
}

/* ---------- Private Equity (redesign): hero, approach, impact, engage, portfolio ---------- */
@media (max-width: 1080px) {
  [data-pe-principles] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  [data-pe-principles] > div { border-right: none !important; padding: 0 !important; }
  [data-pe-steps] { grid-template-columns: 1fr 1fr !important; gap: 40px 28px !important; }
  [data-pe-steps-line] { display: none !important; }
  [data-pe-portfolio] { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 900px) {
  [data-pe-hero] { grid-template-columns: 1fr !important; padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-pe-hero] h1 { font-size: 44px !important; }
  [data-pe-approach] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-pe-impact-head] { grid-template-columns: 1fr !important; gap: 20px !important; }
  [data-pe-metric-grid] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
  [data-pe-principles] { grid-template-columns: 1fr !important; }
  [data-pe-steps] { grid-template-columns: 1fr !important; }
  [data-pe-hero] h1 { font-size: 37px !important; }
}
@media (max-width: 560px) {
  [data-pe-metric-grid] { grid-template-columns: 1fr !important; }
  [data-pe-portfolio] > div:last-child { grid-template-columns: 1fr !important; }
  [data-pe-pillar] { border-right: none !important; }
}

/* ---------- Methodology (redesign): hero, phases, SCO, OKR ---------- */
@media (max-width: 1080px) {
  [data-meth-sco] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-meth-sco] > div:first-child { position: static !important; }
}
@media (max-width: 900px) {
  [data-meth-hero] { grid-template-columns: 1fr !important; padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-meth-hero-art] img { max-width: 420px !important; }
  [data-meth-okr] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-meth-hero] h1 { font-size: 46px !important; }
}
@media (max-width: 720px) {
  [data-meth-phases] { grid-template-columns: 1fr !important; gap: 48px !important; }
  [data-meth-connector] { display: none !important; }
  [data-meth-guide] { display: none !important; }
  [data-meth-pointer] { display: none !important; }
  [data-meth-sco-list] { padding-left: 0 !important; }
  [data-meth-sco] [style*="grid-template-columns: 66px 1fr"] { grid-template-columns: 1fr !important; }
  [data-meth-hero] h1 { font-size: 38px !important; }
}

/* ---------- Services (redesign): hero, approach, deliver, outcomes, impact ---------- */
@media (max-width: 1080px) {
  [data-svc-deliver] { grid-template-columns: 1fr !important; }
  [data-svc-arrow] { display: none !important; }
  [data-svc-impact] { grid-template-columns: 1fr !important; }
  [data-svc-impact] > div:first-child { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid var(--green-100); padding-bottom: 24px; }
}
@media (max-width: 900px) {
  [data-svc-hero] { grid-template-columns: 1fr !important; padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-svc-approach] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-svc-outcomes] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-svc-metric-grid] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
  [data-svc-principles] { grid-template-columns: 1fr !important; gap: 24px !important; }
  [data-svc-connector] { display: none !important; }
  [data-svc-deliver-head] > div:last-child { display: none !important; }
  [data-svc-hero] h1 { font-size: 42px !important; }
}
@media (max-width: 560px) {
  [data-svc-metric-grid] { grid-template-columns: 1fr !important; }
  [data-svc-hero] h1 { font-size: 36px !important; }
}

@media (max-width: 900px) {
  [data-vo-chips] { flex-wrap: wrap !important; }
}

/* ---------- Home: framework white panel (cards + radial diagram) ---------- */
@media (max-width: 1080px) {
  [data-fw-grid] { grid-template-columns: 1fr 1fr !important; }
  [data-fw-card] { grid-column: auto !important; grid-row: auto !important; }
  [data-fw-diagram] { grid-column: 1 / -1 !important; grid-row: auto !important; order: -1; }
}
@media (max-width: 720px) {
  [data-fw-grid] { grid-template-columns: 1fr !important; }
  /* framework white panel padding */
  [style*="border-radius: 24px; padding: 40px"] { padding: 20px 14px !important; }
  /* automation enablement band */
  [style*="grid-template-columns: 64px 1fr"] { grid-template-columns: 1fr !important; }
  [style*="padding: 32px 40px"] { padding: 24px 20px !important; }
  /* impact metric cards: icon circles overlap the top edge — keep the pulled-up margin working */
  [style*="padding: 34px 24px 30px"] { padding: 30px 18px 26px !important; }
  /* value-overview chip row: connectors hide, chips wrap */
  [style*="padding: 8px 22px 8px 10px"] { padding: 6px 16px 6px 8px !important; }
}

/* ---------- Framework radial burst diagram: shrink padding so it stays centered on small screens ---------- */
@media (max-width: 900px) {
  [style*="background: var(--green-900); border-radius: 24px; padding: 48px 24px 40px"] { padding: 32px 16px 28px !important; }
}
@media (max-width: 560px) {
  [style*="background: var(--green-900); border-radius: 24px; padding: 48px 24px 40px"] { padding: 24px 10px 20px !important; }
}

/* ---------- ≤560px: last details ---------- */
@media (max-width: 560px) {
  [style*="grid-template-columns: 140px 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="font-size: 60px"] { font-size: 33px !important; }
  [style*="font-size: 54px"] { font-size: 30px !important; }
  [style*="font-size: 48px"] { font-size: 28px !important; }
  [style*="height: 68px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="width: 380px; height: 540px"] { width: 100% !important; height: 420px !important; }
  [style*="width: 360px; height: 520px"] { width: 100% !important; height: 420px !important; }
}

/* ---------- Insights: typographic post covers ---------- */
@media (max-width: 1140px) {
  [data-post-cover] { padding: 20px 22px !important; gap: 8px !important; }
  [data-post-cover-title] { font-size: 17px !important; max-width: 88% !important; }
}
@media (max-width: 900px) {
  [data-post-cover] { padding: 24px 26px !important; }
  [data-post-cover-title] { font-size: 20px !important; max-width: 70% !important; }
}
@media (max-width: 720px) {
  [data-post-cover-title] { font-size: 19px !important; max-width: 80% !important; }
}
