/* =============================================================================
   HERO MOBILE FINAL v=force18
   www.zatra.co — MOBILE ONLY (≤980px) for layout changes.
   Desktop (≥981px) is LOCKED: copy left, photo right, left-aligned text.
   DOM order stays copy → photo so desktop columns never flip.
   Mobile uses order:-1 for photo-first + full centre.
   Load LAST.
   ============================================================================= */

/* --------------------------------------------------------------------------
   DESKTOP LOCK — restore/keep previous design. Do not centre or reorder.
   -------------------------------------------------------------------------- */
@media (min-width:981px){
  html body #top .hero-lcp-figure,
  html body.home-page #top.hero-commercial .hero-lcp-figure,
  html body .it-split-hero .it-split-hero-media,
  html body #page-overview.it-split-hero .it-split-hero-media{
    order:0!important;
  }

  html body.home-page #top.hero-commercial .hero-commercial-grid,
  html body #top.hero-commercial .hero-commercial-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;
    align-items:center!important;
  }

  html body.home-page #top.hero-commercial .hero-copy,
  html body.home-page #top.hero-commercial .hero-editorial-copy,
  html body #top.hero-commercial .hero-copy,
  html body #top.hero-commercial .hero-editorial-copy,
  html body .it-split-hero .it-split-hero-copy,
  html body.services-page .it-split-hero-copy,
  html body.sectors-hub-page .it-split-hero-copy,
  html body.service-page .it-split-hero-copy,
  html body.sector-page .it-split-hero-copy,
  html body.team-page .it-split-hero-copy,
  html body.insights-page .it-split-hero-copy{
    align-items:flex-start!important;
    text-align:left!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  html body.home-page #top.hero-commercial #hero-title,
  html body.home-page #hero-title,
  html body .it-split-hero h1,
  html body .it-split-hero #page-intro-title,
  html body .it-split-hero #insights-h1,
  html body .it-split-hero #team-h1,
  html body .it-split-hero #page-h1,
  html body.services-page .it-split-hero h1,
  html body.sectors-hub-page .it-split-hero h1{
    text-align:left!important;
    align-self:flex-start!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  html body.home-page #top.hero-commercial .hero-eyebrow,
  html body.home-page #top.hero-commercial .hero-lede,
  html body.home-page #top.hero-commercial .hero-actions,
  html body .it-split-hero .it-kicker,
  html body .it-split-hero .it-split-hero-lede,
  html body .it-split-hero .it-split-hero-contact,
  html body .it-split-hero .it-split-hero-actions{
    text-align:left!important;
    align-self:flex-start!important;
    margin-left:0!important;
    margin-right:0!important;
    justify-content:flex-start!important;
  }

  html body.home-page #top.hero-commercial .hero-actions,
  html body .it-split-hero .it-split-hero-actions{
    flex-direction:row!important;
    flex-wrap:wrap!important;
    width:auto!important;
    max-width:none!important;
    align-items:flex-start!important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE ONLY — photo first + centre everything in heroes
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  :root{
    /* Hero H1 only — do NOT inflate section H2/H3 */
    --zatra-h1-size:clamp(2.33rem,8.7vw,2.93rem)!important;
    --zatra-h1:var(--zatra-h1-size)!important;
    --zatra-h1-lh:1.14!important;
    --zatra-h1-ls:-.032em!important;
  }

  html body #top .hero-commercial-grid,
  html body.home-page #top .hero-commercial-grid,
  html body.home-page #top.hero-commercial .hero-commercial-grid,
  html body #top.hero-commercial .hero-commercial-grid,
  html body #top .hero-editorial-grid,
  html body .it-split-hero,
  html body #page-overview.it-split-hero,
  html body.services-page .it-split-hero,
  html body.sectors-hub-page .it-split-hero,
  html body.service-page .it-split-hero,
  html body.sector-page .it-split-hero,
  html body.team-page .it-split-hero,
  html body.insights-page .it-split-hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    align-items:stretch!important;
    gap:18px!important;
    width:100%!important;
    min-height:0!important;
  }

  /* Photo first via CSS order only (DOM stays copy→photo for desktop) */
  html body #top .hero-lcp-figure,
  html body.home-page #top.hero-commercial .hero-lcp-figure{
    order:-1!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
  html body #top .hero-lcp-img,
  html body.home-page #top .hero-lcp-img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
    object-position:center 32%!important;
    display:block!important;
    margin:0 auto!important;
  }

  html body .it-split-hero .it-split-hero-media,
  html body #page-overview.it-split-hero .it-split-hero-media,
  html body.services-page .it-split-hero-media,
  html body.sectors-hub-page .it-split-hero-media,
  html body.service-page .it-split-hero-media,
  html body.sector-page .it-split-hero-media,
  html body.team-page .it-split-hero-media,
  html body.insights-page .it-split-hero-media{
    order:-1!important;
    position:relative!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:16/10!important;
    margin:0 auto!important;
  }
  html body .it-split-hero .it-split-hero-media img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  html body .it-split-hero .it-split-hero-media::after{
    display:none!important;
  }

  /* Page-fill / about / legal / pricing: photo band on TOP */
  html body .page-hero-fill,
  html body #page-overview.page-hero-fill,
  html body #pricing-overview.page-hero-fill,
  html body .legal-hero.page-hero-fill,
  html body #page-overview.about-premium-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
    padding:0 0 clamp(28px,7vw,40px)!important;
    background-color:#fff!important;
    background-image:none!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  /* Absolute about photo when var resolves from this sheet */
  html body #page-overview.about-premium-hero{
    --about-hero-photo:url("/assets/zatra-hero-about.jpg")!important;
  }

  html body .page-hero-fill::before,
  html body #page-overview.page-hero-fill::before,
  html body #pricing-overview.page-hero-fill::before,
  html body .legal-hero.page-hero-fill::before,
  html body #page-overview.about-premium-hero::before{
    content:""!important;
    position:relative!important;
    inset:auto!important;
    display:block!important;
    order:-1!important;
    width:100%!important;
    height:clamp(140px,38vw,200px)!important;
    min-height:140px!important;
    max-height:210px!important;
    margin:0 0 14px!important;
    z-index:0!important;
    pointer-events:none!important;
    background-color:#dbe4ee!important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.22)),var(--hero-fill-image,var(--about-hero-photo,none))!important;
    background-size:cover!important;
    background-position:center 28%!important;
    background-repeat:no-repeat!important;
    border:0!important;
    border-radius:0!important;
    opacity:1!important;
    visibility:visible!important;
  }

  html body .page-hero-fill > *,
  html body #page-overview.page-hero-fill > *,
  html body #pricing-overview.page-hero-fill > *,
  html body .legal-hero.page-hero-fill > *,
  html body #page-overview.about-premium-hero > *{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    padding-left:var(--zatra-mobile-gutter,16px)!important;
    padding-right:var(--zatra-mobile-gutter,16px)!important;
  }

  /* Centre ALL hero copy — beats services-overview / insights HL1 */
  html body #top .hero-copy,
  html body #top .hero-editorial-copy,
  html body.home-page #top.hero-commercial .hero-copy,
  html body.home-page #top.hero-commercial .hero-editorial-copy,
  html body .it-split-hero .it-split-hero-copy,
  html body #page-overview.it-split-hero .it-split-hero-copy,
  html body.services-page .it-split-hero .it-split-hero-copy,
  html body.services-page .it-split-hero-copy,
  html body.sectors-hub-page .it-split-hero .it-split-hero-copy,
  html body.sectors-hub-page .it-split-hero-copy,
  html body.service-page .it-split-hero .it-split-hero-copy,
  html body.sector-page .it-split-hero .it-split-hero-copy,
  html body.insights-page .it-split-hero .it-split-hero-copy,
  html body.team-page .it-split-hero .it-split-hero-copy,
  html body #page-overview .page-intro-shell,
  html body .page-intro-shell,
  html body #pricing-overview .pricing-decision-hero,
  html body.pricing-page main #pricing-overview .pricing-decision-hero,
  html body #page-overview.about-premium-hero .about-hero-shell,
  html body #page-overview.about-premium-hero .about-hero-copy,
  html body .legal-hero,
  html body .legal-hero.page-hero-fill{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    justify-items:center!important;
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-inline:auto!important;
    max-width:100%!important;
    padding:clamp(.85rem,3vw,1.25rem) var(--zatra-mobile-gutter,16px)!important;
    box-sizing:border-box!important;
  }

  html body #top .hero-eyebrow,
  html body #top .eyebrow,
  html body.home-page #top.hero-commercial .hero-eyebrow,
  html body.home-page #top.hero-commercial .hero-editorial-copy > .eyebrow,
  html body.home-page #top.hero-commercial .hero-editorial-copy > .hero-eyebrow,
  html body .it-split-hero .it-kicker,
  html body .it-split-hero .eyebrow,
  html body .it-split-hero .retention-kicker,
  html body.services-page .it-split-hero .it-kicker,
  html body.sectors-hub-page .it-split-hero .it-kicker,
  html body .page-intro-shell .retention-kicker,
  html body .page-intro-shell .eyebrow,
  html body .pricing-decision-hero .retention-kicker,
  html body .pricing-decision-hero .eyebrow,
  html body .about-hero-copy .retention-kicker,
  html body .about-hero-copy .eyebrow,
  html body .legal-hero .legal-meta,
  html body .legal-hero .eyebrow{
    display:inline-flex!important;
    width:max-content!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-inline:auto!important;
    align-self:center!important;
    justify-self:center!important;
    text-align:center!important;
    float:none!important;
    transform:none!important;
  }

  html body #top #hero-title,
  html body #top.hero #hero-title,
  html body.home-page #top.hero-commercial #hero-title,
  html body.home-page #top #hero-title,
  html body.home-page #hero-title,
  html body .it-split-hero h1,
  html body .it-split-hero #page-intro-title,
  html body .it-split-hero #insights-h1,
  html body .it-split-hero #team-h1,
  html body .it-split-hero #page-h1,
  html body.services-page .it-split-hero h1,
  html body.services-page .it-split-hero #page-intro-title,
  html body.sectors-hub-page .it-split-hero h1,
  html body.sectors-hub-page .it-split-hero #page-intro-title,
  html body.service-page .it-split-hero h1,
  html body.sector-page .it-split-hero h1,
  html body.team-page .it-split-hero h1,
  html body.insights-page .it-split-hero h1,
  html body #page-intro-title,
  html body #about-hero-title,
  html body #pricing-page-title,
  html body .page-intro-shell h1,
  html body .about-hero-copy h1,
  html body .pricing-decision-hero h1,
  html body .legal-hero h1{
    display:block!important;
    width:100%!important;
    max-width:18ch!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-inline:auto!important;
    text-align:center!important;
    align-self:center!important;
    justify-self:center!important;
    font-size:clamp(2.33rem,8.7vw,2.93rem)!important;
    line-height:1.18!important;
    letter-spacing:-.03em!important;
    font-weight:800!important;
    text-wrap:balance!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }

  html body.home-page #hero-title .hero-h1-line,
  html body.home-page #top.hero-commercial #hero-title .hero-h1-line,
  html body #top #hero-title .hero-h1-line{
    display:block!important;
    width:100%!important;
    white-space:normal!important;
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html body #top .hero-lede,
  html body.home-page #top.hero-commercial .hero-lede,
  html body.home-page #top.hero-commercial .hero-editorial-copy > p.hero-lede,
  html body .it-split-hero .it-split-hero-lede,
  html body.services-page .it-split-hero-lede,
  html body.sectors-hub-page .it-split-hero-lede,
  html body .it-split-hero .it-split-hero-copy > p,
  html body .it-split-hero .it-split-hero-contact,
  html body .page-intro-shell > p,
  html body .pricing-decision-hero > p,
  html body .about-hero-copy > p,
  html body .legal-hero > p,
  html body #top .hero-microcopy{
    display:block!important;
    width:100%!important;
    max-width:34ch!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-inline:auto!important;
    text-align:center!important;
    align-self:center!important;
  }

  html body #top .hero-actions,
  html body.home-page #top.hero-commercial .hero-actions,
  html body .it-split-hero .it-split-hero-actions,
  html body .page-intro-actions,
  html body .pricing-primary-actions,
  html body .about-hero-actions{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:center!important;
    align-self:center!important;
    width:100%!important;
    max-width:16.5rem!important;
    margin-left:auto!important;
    margin-right:auto!important;
    gap:10px!important;
    text-align:center!important;
  }

  html body #top .hero-actions .btn,
  html body.home-page #top.hero-commercial .hero-actions .btn,
  html body .it-split-hero .it-split-hero-actions .btn,
  html body .page-intro-actions .btn,
  html body .pricing-primary-actions .btn,
  html body .about-hero-actions .btn{
    width:100%!important;
    max-width:16.5rem!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    justify-content:center!important;
    align-items:center!important;
    min-height:0!important;
    height:auto!important;
    padding:.72rem 1.05rem!important;
    font-size:.9rem!important;
    font-weight:700!important;
    line-height:1.2!important;
    letter-spacing:.01em!important;
    box-sizing:border-box!important;
  }

  /* Trust / achievement badges: centre the CARD only; keep inner layout left */
  html body #proof-strip .hero-trust-strip,
  html body .home-trust-badges .hero-trust-strip{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    width:100%!important;
    gap:10px!important;
  }
  html body #proof-strip .hero-trust-card,
  html body .home-trust-badges .hero-trust-card,
  html body.home-page .home-trust-badges .hero-trust-card{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    align-items:start!important;
    align-content:start!important;
    gap:12px 14px!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:left!important;
  }
  html body #proof-strip .hero-trust-card .hero-trust-icon,
  html body .home-trust-badges .hero-trust-card .hero-trust-icon{
    margin-left:0!important;
    margin-right:0!important;
    align-self:start!important;
    justify-self:start!important;
  }
  html body #proof-strip .hero-trust-card strong,
  html body #proof-strip .hero-trust-card small,
  html body .home-trust-badges .hero-trust-card strong,
  html body .home-trust-badges .hero-trust-card small{
    text-align:left!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  html body .about-premium-hero .about-hero-side{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    width:100%!important;
    gap:12px!important;
  }
  html body .about-premium-hero .about-badge-card,
  html body #page-overview.about-premium-hero .about-badge-card{
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    align-items:start!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:left!important;
  }
  html body .about-premium-hero .about-badge-card .icon-badge,
  html body .about-premium-hero .about-badge-card strong,
  html body .about-premium-hero .about-badge-card small,
  html body .about-premium-hero .about-badge-card h3,
  html body .about-premium-hero .about-badge-card p{
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
    align-self:start!important;
  }


  /* force18 — HERO H1 only (section H2/H3 use type-scale) */
  html body #top #hero-title,
  html body.home-page #hero-title,
  html body .it-split-hero h1,
  html body .it-split-hero #page-intro-title,
  html body .it-split-hero #insights-h1,
  html body .it-split-hero #team-h1,
  html body .it-split-hero #page-h1,
  html body #page-overview.page-hero-fill #page-intro-title,
  html body #page-overview.about-premium-hero #about-hero-title,
  html body #pricing-overview #pricing-page-title,
  html body .page-intro-shell h1,
  html body .about-hero-copy h1,
  html body .pricing-decision-hero h1,
  html body .legal-hero h1{
    font-size:clamp(2.33rem,8.7vw,2.93rem)!important;
    line-height:1.14!important;
  }

}

@media (max-width:420px){
  html body #top #hero-title,
  html body.home-page #hero-title,
  html body .it-split-hero h1,
  html body #page-intro-title,
  html body #about-hero-title,
  html body #pricing-page-title,
  html body .legal-hero h1{
    font-size:clamp(2.18rem,9.75vw,2.7rem)!important;
    max-width:100%!important;
  }
  html body .page-hero-fill::before,
  html body #page-overview.about-premium-hero::before,
  html body .legal-hero.page-hero-fill::before{
    height:clamp(128px,40vw,180px)!important;
    min-height:128px!important;
  }
}