/* =============================================================================
   Zatra site-ui-unify — whole-site UI pass
   Roles: Systems UI · Typography · Icon alignment · Desktop density
   Scope: ALL pages · desktop AND mobile
   Cache ?v=20260806unify1
   ============================================================================= */

:root{
  --zatra-h2-weight:800;
  --zatra-h3-weight:750;
  --zatra-h4-size:clamp(1.05rem,1.4vw,1.2rem);
  --zatra-h4-lh:1.3;
  --zatra-h4-ls:-.02em;
  --zatra-lede:clamp(15px,1.05vw,17px);
  --zatra-lede-lh:1.55;
  --zatra-body:1.05rem;
  --zatra-body-lh:1.65;
  --zatra-card-title:clamp(1rem,1.15vw,1.12rem);
  --zatra-card-title-w:750;
  --zatra-card-copy:.9375rem;
  --zatra-section-y-tight:clamp(40px,4.5vw,68px);
}

/* =============================================================================
   1) ICON + CARD ALIGNMENT — icon beside title/copy (not stacked above)
   ============================================================================= */
html body .pathway-card:has(> .icon-badge),
html body .services-overview-grid .pathway-card:has(> .icon-badge),
html body.home-page .pathway-card:has(> .icon-badge),
html body.services-page .pathway-card:has(> .icon-badge),
html body.sectors-hub-page .pathway-card:has(> .icon-badge){
  display:grid !important;
  grid-template-columns:40px minmax(0,1fr) !important;
  column-gap:14px !important;
  row-gap:4px !important;
  align-items:start !important;
  flex-direction:unset !important;
}
html body .pathway-card > .icon-badge,
html body .services-overview-grid .pathway-card > .icon-badge,
html body.home-page .pathway-card > .icon-badge,
html body.services-page .pathway-card > .icon-badge,
html body.sectors-hub-page .pathway-card > .icon-badge{
  grid-row:1 / span 2 !important;
  grid-column:1 !important;
  margin:2px 0 0 !important;
  width:40px !important;
  height:40px !important;
  flex-shrink:0 !important;
  align-self:start !important;
}
html body .pathway-card > h3,
html body .services-overview-grid .pathway-card > h3,
html body.home-page .pathway-card > h3,
html body.services-page .pathway-card > h3,
html body.sectors-hub-page .pathway-card > h3{
  grid-column:2 !important;
  grid-row:1 !important;
  margin:0 0 4px !important;
  align-self:center !important;
  font-size:var(--zatra-card-title) !important;
  font-weight:var(--zatra-card-title-w) !important;
  letter-spacing:-.02em !important;
  line-height:1.25 !important;
}
html body .pathway-card > p,
html body .services-overview-grid .pathway-card > p,
html body.home-page .pathway-card > p,
html body.services-page .pathway-card > p,
html body.sectors-hub-page .pathway-card > p{
  grid-column:2 !important;
  grid-row:2 !important;
  margin:0 !important;
  font-size:var(--zatra-card-copy) !important;
  line-height:1.5 !important;
}

/* About values / VM / feature articles with leading icon-badge */
html body .about-vm-grid article:has(> .icon-badge),
html body .about-values-grid article:has(> .icon-badge),
html body .about-feature-grid article:has(> .icon-badge):not(.about-badge-card){
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  column-gap:14px !important;
  row-gap:4px !important;
  align-items:start !important;
}
html body .about-vm-grid article > .icon-badge,
html body .about-values-grid article > .icon-badge,
html body .about-feature-grid article > .icon-badge{
  grid-row:1 / span 2 !important;
  margin:2px 0 0 !important;
  margin-bottom:0 !important;
}
html body .about-vm-grid article > h3,
html body .about-values-grid article > h3,
html body .about-feature-grid article > h3{
  grid-column:2 !important;
  margin:0 0 4px !important;
}
html body .about-vm-grid article > p,
html body .about-values-grid article > p,
html body .about-feature-grid article > p{
  grid-column:2 !important;
  margin:0 !important;
}

/* Answer / optional / media-service / addon cards */
html body .answer-card:has(> .icon-badge),
html body .answer-card.executive-answer:has(> .icon-badge),
html body .optional-card:has(> .icon-badge),
html body .addon-card:has(> .icon-badge),
html body .media-service:has(> .icon-badge){
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  column-gap:14px !important;
  row-gap:6px !important;
  align-items:start !important;
}
html body .answer-card > .icon-badge,
html body .optional-card > .icon-badge,
html body .addon-card > .icon-badge,
html body .media-service > .icon-badge{
  grid-row:1 / span 2 !important;
  margin:2px 0 0 !important;
  margin-bottom:0 !important;
}
html body .answer-card > h3,
html body .optional-card > h3,
html body .addon-card > h3,
html body .media-service > h3{
  grid-column:2 !important;
  margin:0 0 6px !important;
}
html body .answer-card > p,
html body .optional-card > p,
html body .addon-card > p,
html body .media-service > p{
  grid-column:2 !important;
}

/* Fallback for browsers without :has — keep badge from pushing copy */
html body .pathway-card .icon-badge,
html body .answer-card .icon-badge,
html body .optional-card .icon-badge,
html body .addon-card .icon-badge,
html body .about-vm-grid .icon-badge,
html body .about-values-grid .icon-badge{
  margin-bottom:0 !important;
}

/* =============================================================================
   2) TYPOGRAPHY UNIFORMITY — H1–H4, lede, body
   ============================================================================= */
html body main h2,
html body .section-head h2,
html body .lp-head h2,
html body .lf-head h2,
html body .it-hub h2,
html body .conversion-band h2{
  font-weight:var(--zatra-h2-weight) !important;
}

html body main h3:not(.nav-mega-link h3):not(footer h3),
html body .pathway-card h3,
html body .sector-card h3,
html body .package-card h3,
html body .package-preview-card h3,
html body .insight-card h3,
html body .concern-card h3,
html body .answer-card h3,
html body .optional-card h3{
  font-weight:var(--zatra-h3-weight) !important;
  letter-spacing:var(--zatra-h3-ls, -.02em) !important;
}

html body main h4,
html body .section h4{
  font-family:var(--zatra-font-display, var(--title), Montserrat, sans-serif) !important;
  font-size:var(--zatra-h4-size) !important;
  font-weight:700 !important;
  line-height:var(--zatra-h4-lh) !important;
  letter-spacing:var(--zatra-h4-ls) !important;
  color:var(--ink, #101828) !important;
  margin:0 0 .5rem !important;
}

/* Section lede (subtitle under H2) */
html body .section-head > p,
html body .section-head:not(.center):not(.compact) > p,
html body .lp-head > p,
html body .lf-head > p{
  font-size:var(--zatra-lede) !important;
  line-height:var(--zatra-lede-lh) !important;
  font-weight:450 !important;
  color:var(--muted-2, #475467) !important;
  max-width:52ch !important;
  border-left:0 !important;
  padding-left:0 !important;
  padding-top:0 !important;
}

html body .lander-core > p,
html body .lf-mid-copy .lander-core p,
html body main .section > .container > p:not(.section-cta-row):not(.it-split-hero-contact){
  font-size:var(--zatra-body) !important;
  line-height:var(--zatra-body-lh) !important;
}

/* Eyebrow / kicker uniformity */
html body .eyebrow,
html body .section-head .eyebrow,
html body .it-kicker,
html body .retention-kicker{
  font:800 .6875rem/1.2 var(--title, Montserrat, sans-serif) !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--red, #ed0000) !important;
}

/* Card titles site-wide (sector cards without icons included) */
html body .sector-card h3,
html body .package-preview-card h3,
html body .insight-card h3,
html body .concern-card h3,
html body .lp-related .card-title,
html body .lf-related .card-title{
  font-size:var(--zatra-card-title) !important;
  font-weight:var(--zatra-card-title-w) !important;
  line-height:1.25 !important;
}
html body .sector-card p,
html body .package-preview-card p,
html body .insight-card p,
html body .lp-related p,
html body .lf-related p{
  font-size:var(--zatra-card-copy) !important;
  line-height:1.5 !important;
}

/* =============================================================================
   3) SECTION-HEAD STACK — kill 2-col zigzag site-wide (desktop + keep mobile)
   ============================================================================= */
html body .section-head:not(.center),
html body .section-head.compact{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:0 !important;
  grid-template-columns:none !important;
  max-width:42rem !important;
  width:100% !important;
  text-align:left !important;
}
html body .section-head:not(.center) > .eyebrow,
html body .section-head.compact > .eyebrow{
  margin:0 0 10px !important;
}
html body .section-head:not(.center) > h2,
html body .section-head.compact > h2{
  margin:0 0 12px !important;
  max-width:min(100%, 34ch) !important;
  width:100% !important;
  text-align:left !important;
}
html body .section-head.center{
  align-items:center !important;
  text-align:center !important;
  max-width:48rem !important;
  margin-inline:auto !important;
}
html body .section-head.center > h2,
html body .section-head.center > p{
  text-align:center !important;
  margin-inline:auto !important;
}

/* =============================================================================
   4) DESKTOP DENSITY — reduce idle vertical air (≥981px)
   ============================================================================= */
@media (min-width:981px){
  html body:not(.home-page) main > .section,
  html body:not(.home-page) main > section.section{
    padding-top:var(--zatra-section-y-tight) !important;
    padding-bottom:var(--zatra-section-y-tight) !important;
  }

  /* Related / hub grids: avoid orphan single cards */
  html body.sectors-hub-page #related-services .services-overview-grid,
  html body.sectors-hub-page #related-services .hub-related-grid,
  html body .lp-related,
  html body .lf-related{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  html body.home-page .pathway-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
  html body.services-page #core-services .services-overview-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
  @media (min-width:1100px){
    html body.services-page #core-services .services-overview-grid{
      grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    }
  }
}

/* =============================================================================
   5) MOBILE — icon row stays readable; type already via type-scale
   ============================================================================= */
@media (max-width:980px){
  html body .pathway-card:has(> .icon-badge),
  html body .services-overview-grid .pathway-card:has(> .icon-badge),
  html body.home-page .pathway-card:has(> .icon-badge){
    grid-template-columns:36px minmax(0,1fr) !important;
    column-gap:12px !important;
    padding:1rem 1.05rem !important;
  }
  html body .pathway-card > .icon-badge,
  html body .services-overview-grid .pathway-card > .icon-badge{
    width:36px !important;
    height:36px !important;
  }
  html body .section-head:not(.center),
  html body .section-head.compact{
    max-width:100% !important;
  }
  html body .section-head:not(.center) > h2{
    max-width:100% !important;
  }
}