/* About — match Home: contained photo frame, compact glass cards
   Loads after zatra-authority. No full-bleed fill-hero.
   v=20260817home1
   ============================================================================= */

html body.about-page #page-overview.about-home-hero,
html body.about-page #page-overview.about-premium-hero{
  --about-hero-photo:none!important;
  --about-hero-wash:none!important;
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#fff!important;
  background-image:none!important;
  min-height:0!important;
  padding:52px 0 28px!important;
}

html body.about-page #page-overview.about-home-hero::before,
html body.about-page #page-overview.about-premium-hero::before{
  display:none!important;
  content:none!important;
  background:none!important;
}

html body.about-page #page-overview.about-home-hero .about-home-hero-inner{
  width:min(100% - 32px, var(--za-shell, 1200px))!important;
  max-width:var(--za-shell, 1200px)!important;
  margin:0 auto!important;
  padding:0!important;
}

html body.about-page #page-overview.about-home-hero .about-home-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important;
  gap:42px!important;
  align-items:center!important;
  width:100%!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  text-align:left!important;
  gap:.7rem!important;
  max-width:36rem!important;
  margin:0!important;
  padding:8px 0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

html body.about-page #page-overview.about-home-hero .retention-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 6px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#ed0000!important;
  font-family:Montserrat,sans-serif!important;
  font-size:.82rem!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

html body.about-page #page-overview.about-home-hero .retention-kicker::before{
  content:""!important;
  display:block!important;
  width:10px!important;
  height:10px!important;
  border-radius:999px!important;
  background:#ed0000!important;
  box-shadow:0 0 0 6px rgba(237,0,0,.08)!important;
}

html body.about-page #page-overview.about-home-hero #about-hero-title{
  margin:0!important;
  max-width:14ch!important;
  text-align:left!important;
  color:#0c111b!important;
  text-shadow:none!important;
  font-family:Montserrat,"Segoe UI",sans-serif!important;
  font-weight:800!important;
  font-size:clamp(2.35rem,4vw,3.1rem)!important;
  line-height:1.12!important;
  letter-spacing:-.042em!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-copy > p{
  margin:0!important;
  max-width:42ch!important;
  color:#4f5562!important;
  text-align:left!important;
  text-shadow:none!important;
  font:400 1.05rem/1.55 Inter,system-ui,sans-serif!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  gap:12px!important;
  margin-top:.45rem!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-actions .btn{
  min-height:52px!important;
  padding:0 22px!important;
  border-radius:999px!important;
}

/* Contained photo — Home framed media, not page-width wash */
html body.about-page #page-overview.about-home-hero .about-hero-media{
  min-width:0!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-visual{
  position:relative!important;
  display:block!important;
  padding:10px 0 18px 12px!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-panel{
  position:absolute!important;
  inset:0 0 12px 18px!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,#c5171c,#ab1015)!important;
  box-shadow:0 20px 50px rgba(17,17,17,.08)!important;
  z-index:0!important;
  pointer-events:none!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-photo-frame{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  margin:0 18px 0 0!important;
  overflow:hidden!important;
  border-radius:22px!important;
  background:#dbe4ee!important;
  box-shadow:0 20px 50px rgba(17,17,17,.12)!important;
  max-height:420px!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-photo-frame img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:280px!important;
  max-height:420px!important;
  object-fit:cover!important;
  object-position:center 22%!important;
}

/* Direct answer — keep air above/below so hero, DA and story do not stack */
html body.about-page #quick-answer{
  padding-top:clamp(2.6rem,5.5vw,4.25rem)!important;
  padding-bottom:clamp(2.6rem,5.5vw,4.25rem)!important;
}

html body.about-page:not(.post-page) #page-answer-engine,
html body.about-page:not(.post-page) #quick-answer .quick-answer,
html body.about-page .about-da-card,
html body.about-page #page-answer-engine{
  display:block!important;
  flex-direction:unset!important;
  grid-template-columns:none!important;
  align-items:stretch!important;
  gap:.55rem!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:clamp(1.15rem,2.5vw,1.5rem) clamp(1.15rem,3vw,1.75rem)!important;
  border-left:3px solid #ed0000!important;
  border-radius:0 12px 12px 0!important;
}

html body.about-page .quick-answer.page-answer-engine::before,
html body.about-page #page-answer-engine::before,
html body.about-page .quick-answer.page-answer-engine::after,
html body.about-page #page-answer-engine::after{
  display:none!important;
  content:none!important;
  background:none!important;
}

/* Compact glass cards — 3-col grid with gap, not one slab */
html body.about-page .about-strengths-band{
  padding-top:clamp(1.35rem,3vw,2.1rem)!important;
  padding-bottom:clamp(1.5rem,3.2vw,2.35rem)!important;
}

html body.about-page .about-strengths-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
  max-width:100%!important;
}

html body.about-page .about-strengths-grid .about-badge-card,
html body.about-page .about-vm-grid article,
html body.about-page .about-values-grid article,
html body.about-page .about-feature-grid article,
html body.about-page .about-method-grid article,
html body.about-page .about-answer-grid article,
html body.about-page .about-impact-grid article,
html body.about-page .about-quote-card{
  height:100%!important;
  padding:1.1rem 1.15rem!important;
  border:1px solid rgba(255,255,255,.62)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:0 10px 32px rgba(15,23,42,.07)!important;
  backdrop-filter:blur(18px) saturate(1.4)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.4)!important;
}

html body.about-page .about-strengths-grid .about-badge-card{
  display:flex!important;
  gap:12px!important;
  align-items:flex-start!important;
}

html body.about-page .about-strengths-grid .icon-badge,
html body.about-page .about-vm-grid .icon-badge,
html body.about-page .about-values-grid .icon-badge,
html body.about-page .about-feature-grid .icon-badge,
html body.about-page .about-method-icon,
html body.about-page .about-answer-icon,
html body.about-page .about-impact-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:2.35rem!important;
  height:2.35rem!important;
  min-width:2.35rem!important;
  border-radius:12px!important;
  background:rgba(237,0,0,.08)!important;
  color:#ed0000!important;
}

html body.about-page .about-vm-grid,
html body.about-page .about-values-grid,
html body.about-page .about-feature-grid,
html body.about-page .about-method-grid,
html body.about-page .about-answer-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
}

html body.about-page .about-feature-grid,
html body.about-page .about-method-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

html body.about-page .container.about-impact-shell,
html body.about-page .about-impact-shell,
html body.about-page .container.about-answer-shell,
html body.about-page .about-answer-shell{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  align-items:flex-start!important;
  gap:18px!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
}

html body.about-page .about-impact-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  max-width:44rem!important;
}

html body.about-page .about-answer-shell > div:first-child{
  position:static!important;
}

/* Conversion + recommended — compact glass, not full-width bars */
html body.about-page section.conversion-band,
html body.about-page .conversion-band{
  background:transparent!important;
  background-image:none!important;
}

html body.about-page .about-convert-card,
html body.about-page .conversion-band-shell.about-convert-card,
html body.about-page .conversion-band .conversion-band-shell{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  align-items:flex-start!important;
  gap:16px!important;
  width:min(100%,40rem)!important;
  max-width:40rem!important;
  margin:0!important;
  padding:1.35rem 1.4rem!important;
  border:1px solid rgba(255,255,255,.62)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:0 10px 36px rgba(15,23,42,.08)!important;
}

html body.about-page .conversion-band-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}

html body.about-page .conversion-band-actions .btn,
html body.about-page .about-hero-actions .btn,
html body.about-page .about-cta-actions .btn{
  min-height:44px!important;
}

html body.about-page aside.recommended-next,
html body.about-page .recommended-next{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
  max-width:var(--za-shell,1200px)!important;
  margin:0 auto clamp(1.5rem,3vw,2.4rem)!important;
  padding:0 clamp(18px,4vw,34px)!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body.about-page .recommended-next-links{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}

html body.about-page .recommended-next-links a{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:52px!important;
  padding:.9rem 1.1rem!important;
  border:1px solid rgba(255,255,255,.62)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.06)!important;
  text-decoration:none!important;
  color:#0c111b!important;
  font-family:Montserrat,sans-serif!important;
  font-weight:750!important;
}

/* Story + CTA photos stay inside rounded wells */
html body.about-page .about-story-beat-card{
  overflow:hidden!important;
  border-radius:18px!important;
}

html body.about-page .about-story-beat-media{
  max-height:168px!important;
  min-height:140px!important;
  overflow:hidden!important;
  border-radius:0!important;
}

html body.about-page .about-story-beat-media img{
  width:100%!important;
  height:100%!important;
  min-height:140px!important;
  max-height:168px!important;
  object-fit:cover!important;
  object-position:center 22%!important;
}

html body.about-page .about-story-beat-glass{
  background:#fff!important;
  backdrop-filter:none!important;
}

html body.about-page .about-cta-section,
html body.about-page #about-start{
  background:transparent!important;
  background-image:none!important;
  color:#0c111b!important;
}

html body.about-page .about-cta-shell,
html body.about-page .container.about-cta-shell{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr)!important;
  gap:28px!important;
  align-items:center!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  color:#0c111b!important;
  overflow:visible!important;
  padding:0 clamp(18px,4vw,34px)!important;
  max-width:var(--za-shell,1200px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

html body.about-page .about-cta-shell::before,
html body.about-page .about-cta-shell::after{
  display:none!important;
  content:none!important;
}

html body.about-page .about-cta-copy,
html body.about-page .about-cta-copy h2,
html body.about-page .about-cta-copy #about-cta-title{
  color:#0c111b!important;
}
html body.about-page .about-cta-copy p{
  color:#4f5562!important;
}

html body.about-page .about-cta-photo{
  margin:0!important;
  overflow:hidden!important;
  border-radius:22px!important;
  max-height:320px!important;
  box-shadow:0 18px 40px rgba(17,17,17,.1)!important;
}

html body.about-page .about-cta-photo img{
  width:100%!important;
  height:100%!important;
  max-height:320px!important;
  object-fit:cover!important;
  object-position:center 22%!important;
  display:block!important;
}

html body.about-page .about-cta-photo figcaption{
  padding:.75rem 1rem 1rem!important;
  display:flex!important;
  flex-direction:column!important;
  gap:.2rem!important;
}

html body.about-page .about-feature-grid article{
  display:grid!important;
  grid-template-columns:2.35rem minmax(0,1fr)!important;
  column-gap:12px!important;
  row-gap:.3rem!important;
  align-items:start!important;
}
html body.about-page .about-feature-grid article .icon-badge{
  grid-column:1!important;
  grid-row:1 / span 2!important;
}
html body.about-page .about-feature-grid article h3{
  grid-column:2!important;
  grid-row:1!important;
  margin:0!important;
}
html body.about-page .about-feature-grid article p{
  grid-column:2!important;
  grid-row:2!important;
  margin:0!important;
}

html body.about-page .about-story-metrics{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:18px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body.about-page .about-story-metrics article{
  display:flex!important;
  flex-direction:column!important;
  gap:.35rem!important;
  padding:1rem 1.1rem!important;
  border:1px solid rgba(255,255,255,.62)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.06)!important;
}
html body.about-page .about-story-metrics article strong{
  color:#ed0000!important;
  font-family:Montserrat,sans-serif!important;
  font-size:1.05rem!important;
  font-weight:800!important;
}

html body.about-page .insights-desk-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
html body.about-page .insights-desk-list a{
  border-radius:16px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(255,255,255,.62)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.06)!important;
}

@media (max-width:980px){
  html body.about-page #page-overview.about-home-hero{
    padding:28px 0 20px!important;
  }
  html body.about-page #page-overview.about-home-hero .about-home-hero-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:22px!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-media{
    order:0!important;
    width:100%!important;
  }
  html body.about-page .about-cta-shell,
  html body.about-page .container.about-cta-shell{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }
  html body.about-page .about-cta-copy,
  html body.about-page .about-cta-copy h2,
  html body.about-page .about-cta-copy #about-cta-title,
  html body.about-page .about-cta-copy p{
    color:#0c111b!important;
  }
  html body.about-page .about-cta-copy p{
    color:#4f5562!important;
  }
  html body.about-page #page-overview.about-home-hero #about-hero-title{
    font-size:var(--zatra-h1-size, clamp(2.4rem,10vw,3.5rem))!important;
    font-weight:900!important;
    line-height:var(--zatra-h1-lh,.98)!important;
    letter-spacing:var(--zatra-h1-ls,-.05em)!important;
    text-align:left!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-copy{
    align-items:flex-start!important;
    text-align:left!important;
    max-width:100%!important;
  }
  html body.about-page #page-overview.about-home-hero #about-hero-title,
  html body.about-page #page-overview.about-home-hero .about-hero-copy > p,
  html body.about-page #page-overview.about-home-hero .retention-kicker{
    text-align:left!important;
    margin-left:0!important;
    margin-right:0!important;
    max-width:100%!important;
    align-self:flex-start!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-actions{
    justify-content:flex-start!important;
    flex-direction:row!important;
    width:auto!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-actions .btn{
    width:auto!important;
    justify-content:center!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-photo-frame,
  html body.about-page #page-overview.about-home-hero .about-hero-photo-frame img{
    max-height:none!important;
    min-height:0!important;
  }
  html body.about-page:not(.post-page) #page-answer-engine,
  html body.about-page .about-da-card,
  html body.about-page #page-answer-engine,
  html body.about-page .about-convert-card,
  html body.about-page .conversion-band .conversion-band-shell{
    width:100%!important;
    max-width:100%!important;
  }
  html body.about-page .about-strengths-grid,
  html body.about-page .about-vm-grid,
  html body.about-page .about-values-grid,
  html body.about-page .about-feature-grid,
  html body.about-page .about-method-grid,
  html body.about-page .about-answer-grid,
  html body.about-page .about-impact-grid,
  html body.about-page .about-story-metrics,
  html body.about-page .insights-desk-list,
  html body.about-page .recommended-next-links{
    grid-template-columns:1fr!important;
  }
  html body.about-page .about-story-beat-media,
  html body.about-page .about-story-beat-media img{
    min-height:160px!important;
    max-height:190px!important;
  }
}

/* =============================================================================
   Hero photo benchmark alignment (Home is the reference; Home is not touched).
   About previously sat on an offset red gradient panel with a 22px radius and a
   420px height cap. Home's frame is a plain 28px-radius photo with only the
   0 20px 50px rgba(17,17,17,.12) lift, sized by the copy column. Match it.
   ============================================================================= */
html body.about-page #page-overview.about-home-hero .about-hero-panel{
  display:none!important;
  content:none!important;
  background:none!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-visual{
  padding:0!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-photo-frame{
  margin:0!important;
  border-radius:28px!important;
  background:transparent!important;
  box-shadow:0 20px 50px rgba(17,17,17,.12)!important;
  max-height:none!important;
}

html body.about-page #page-overview.about-home-hero .about-hero-photo-frame img{
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
}

@media (min-width:1201px){
  html body.about-page #page-overview.about-home-hero .about-home-hero-grid{
    align-items:stretch!important;
    gap:42px!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-media,
  html body.about-page #page-overview.about-home-hero .about-hero-visual{
    display:flex!important;
    flex-direction:column!important;
    align-self:stretch!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-visual{
    flex:1 1 auto!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-photo-frame{
    flex:1 1 auto!important;
    min-height:380px!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-photo-frame img{
    position:absolute!important;
    inset:0!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:var(--hero-photo-pos,center 42%)!important;
  }
}

@media (max-width:680px){
  html body.about-page #page-overview.about-home-hero .about-hero-photo-frame{
    border-radius:22px!important;
  }
}

/* =============================================================================
   About split + photo overlay cards (20260819aboutfix1)
   Fill right-side voids. One brand-red CTA per converting section.
   ============================================================================= */

html body.about-page .about-story-section .about-story-shell,
html body.about-page .container.about-story-shell{
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr)!important;
  grid-template-areas:
    "copy photo"
    "metrics metrics"!important;
  align-items:stretch!important;
  gap:28px 36px!important;
  width:100%!important;
  max-width:var(--za-shell,1200px)!important;
}

html body.about-page .about-story-copy{
  grid-area:copy!important;
  max-width:none!important;
  width:100%!important;
}

html body.about-page .about-story-photo{
  grid-area:photo!important;
  min-height:100%!important;
}

html body.about-page .about-story-metrics{
  grid-area:metrics!important;
  width:100%!important;
  margin-top:0!important;
}

html body.about-page .about-impact-shell,
html body.about-page .container.about-impact-shell,
html body.about-page .about-answer-shell,
html body.about-page .container.about-answer-shell{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr)!important;
  grid-template-areas:
    "copy photo"
    "cards cards"!important;
  align-items:stretch!important;
  gap:22px 32px!important;
  width:100%!important;
  max-width:var(--za-shell,1200px)!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

html body.about-page .about-impact-shell > .about-split-copy,
html body.about-page .about-answer-shell > .about-split-copy{
  grid-area:copy!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.45rem!important;
  max-width:38rem!important;
  position:static!important;
}

/* Eyebrows in the split shells: same flat red mark as the rest of About.
   Mobile CSS otherwise paints a red pill, which the red text sits inside. */
html body.about-page .about-answer-shell .retention-kicker,
html body.about-page .about-impact-shell .retention-kicker,
html body.about-page .conversion-band .retention-kicker{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  border-radius:0!important;
  color:#ed0000!important;
  -webkit-text-fill-color:#ed0000!important;
}

html body.about-page .about-answer-shell,
html body.about-page .container.about-answer-shell{
  color:#101828!important;
}

html body.about-page .about-impact-photo,
html body.about-page .about-answer-photo{
  grid-area:photo!important;
}

html body.about-page .about-impact-grid,
html body.about-page .about-answer-grid{
  grid-area:cards!important;
  width:100%!important;
  max-width:none!important;
}

html body.about-page .about-cta-shell,
html body.about-page .container.about-cta-shell{
  align-items:stretch!important;
}
html body.about-page .about-cta-shell .about-cta-copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

html body.about-page .about-convert-split{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr)!important;
  align-items:stretch!important;
  gap:28px 36px!important;
  width:100%!important;
}

html body.about-page .about-convert-split .about-cta-copy{
  max-width:38rem!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  height:100%!important;
}

html body.about-page .about-convert-card,
html body.about-page .conversion-band-shell.about-convert-card,
html body.about-page .conversion-band .conversion-band-shell{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

html body.about-page .about-photo-overlay,
html body.about-page figure.about-photo-overlay,
html body.about-page .about-cta-photo.about-photo-overlay{
  position:relative!important;
  display:block!important;
  margin:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  min-height:340px!important;
  height:100%!important;
  max-height:none!important;
  border-radius:22px!important;
  background:#101828!important;
  box-shadow:0 18px 48px rgba(7,17,31,.12)!important;
}

html body.about-page .about-photo-overlay img,
html body.about-page .about-cta-photo.about-photo-overlay img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 18%!important;
  filter:saturate(.94) contrast(1.04)!important;
}

html body.about-page .about-photo-overlay::after{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0 0!important;
  height:42%!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,transparent 0%,transparent 18%,rgba(7,17,31,.10) 62%,rgba(7,17,31,.40) 100%)!important;
}

html body.about-page .about-photo-caption,
html body.about-page .about-photo-overlay figcaption.about-photo-caption{
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  bottom:16px!important;
  z-index:2!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  margin:0!important;
  padding:16px 18px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.55)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 12px 32px rgba(7,17,31,.16)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:#0c111b!important;
}

html body.about-page .about-photo-caption .about-quote-label,
html body.about-page .about-photo-caption strong{
  display:block!important;
  width:auto!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  border-radius:0!important;
  color:#ed0000!important;
  -webkit-text-fill-color:#ed0000!important;
  font-family:Montserrat,sans-serif!important;
  font-size:.72rem!important;
  font-weight:800!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
}

html body.about-page .about-photo-caption p,
html body.about-page .about-photo-caption span:not(.about-quote-label){
  margin:0!important;
  color:#1f2937!important;
  font-family:Inter,system-ui,sans-serif!important;
  font-size:15px!important;
  font-weight:500!important;
  line-height:1.45!important;
  text-align:left!important;
}

html body.about-page .about-photo-caption .about-quote-author{
  display:flex!important;
  flex-direction:column!important;
  gap:1px!important;
  margin-top:6px!important;
}

html body.about-page .about-photo-caption .about-quote-author strong{
  font-size:.92rem!important;
  letter-spacing:-.02em!important;
  text-transform:none!important;
  color:#0c111b!important;
}

html body.about-page .about-photo-caption .about-quote-author span{
  color:#667085!important;
  font-size:13px!important;
  font-weight:500!important;
}

html body.about-page .about-cta-actions,
html body.about-page .about-hero-actions,
html body.about-page .conversion-band-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}

html body.about-page .js-wa.btn,
html body.about-page a.btn[href*="wa.me"]{
  display:none!important;
}

html body.about-page .about-story-beat-card,
html body.about-page .about-story-beat-media{
  max-height:none!important;
}
html body.about-page .about-story-beat-glass{
  background:transparent!important;
  padding:0!important;
  border:0!important;
}

html body.about-page .floating-whatsapp,
html body.about-page a.floating-whatsapp,
html body.about-page a.floating-whatsapp.js-wa,
html body.about-page.show-sticky .floating-whatsapp{
  display:none!important;
}

html body.about-page #about-story.about-story-section{
  padding-top:clamp(2.4rem,5vw,3.75rem)!important;
}

@media (max-width:980px){
  html body.about-page .about-story-section .about-story-shell,
  html body.about-page .container.about-story-shell,
  html body.about-page .about-impact-shell,
  html body.about-page .container.about-impact-shell,
  html body.about-page .about-answer-shell,
  html body.about-page .container.about-answer-shell,
  html body.about-page .about-convert-split,
  html body.about-page .about-cta-shell,
  html body.about-page .container.about-cta-shell{
    grid-template-columns:1fr!important;
    grid-template-areas:none!important;
    gap:22px!important;
  }
  html body.about-page .about-story-copy,
  html body.about-page .about-story-photo,
  html body.about-page .about-story-metrics,
  html body.about-page .about-impact-shell > .about-split-copy,
  html body.about-page .about-answer-shell > .about-split-copy,
  html body.about-page .about-impact-photo,
  html body.about-page .about-answer-photo,
  html body.about-page .about-impact-grid,
  html body.about-page .about-answer-grid{
    grid-area:auto!important;
  }
  html body.about-page .about-split-copy,
  html body.about-page .about-convert-split .about-cta-copy{
    max-width:100%!important;
  }

  /* Same reading order as desktop: copy, then photo */
  html body.about-page #page-overview.about-home-hero .about-hero-media{
    order:0!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-photo-frame{
    position:relative!important;
    min-height:280px!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-photo-frame img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center 30%!important;
    filter:none!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-actions{
    flex-direction:row!important;
    justify-content:flex-start!important;
    width:auto!important;
  }
  html body.about-page #page-overview.about-home-hero .about-hero-actions .btn{
    width:auto!important;
    justify-content:center!important;
  }

  /* Tall photo well: overlay lives in the lower third only */
  html body.about-page .about-photo-overlay,
  html body.about-page figure.about-photo-overlay,
  html body.about-page .about-cta-photo.about-photo-overlay{
    min-height:480px!important;
    height:480px!important;
    max-height:none!important;
  }
  html body.about-page .about-photo-overlay img,
  html body.about-page .about-cta-photo.about-photo-overlay img{
    min-height:0!important;
    max-height:none!important;
    filter:none!important;
    object-position:center 16%!important;
  }
  html body.about-page .about-photo-overlay::after{
    inset:auto 0 0 0!important;
    height:26%!important;
    background:linear-gradient(180deg,transparent 0%,transparent 36%,rgba(7,17,31,.08) 78%,rgba(7,17,31,.28) 100%)!important;
  }
  html body.about-page .about-photo-caption,
  html body.about-page .about-photo-overlay figcaption.about-photo-caption{
    top:auto!important;
    bottom:10px!important;
    left:10px!important;
    right:10px!important;
    max-height:none!important;
    overflow:visible!important;
    padding:12px 14px!important;
    gap:4px!important;
    background:#fff!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.about-page .about-photo-caption>*{
    flex:0 0 auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  html body.about-page .about-photo-caption p{
    font-size:13px!important;
    line-height:1.4!important;
    display:block!important;
    -webkit-line-clamp:none!important;
    -webkit-box-orient:horizontal!important;
    overflow:visible!important;
    height:auto!important;
    max-height:none!important;
  }
  /* Founder note is the longest caption — give its photo more room */
  html body.about-page figure.about-story-photo.about-photo-overlay{
    min-height:560px!important;
    height:560px!important;
  }
  /* Split shells are containers: keep the page gutter on phones */
  html body.about-page .about-answer-shell,
  html body.about-page .container.about-answer-shell,
  html body.about-page .about-impact-shell,
  html body.about-page .container.about-impact-shell{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    padding-left:var(--zatra-mobile-gutter,20px)!important;
    padding-right:var(--zatra-mobile-gutter,20px)!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  /* Solid titles — kill wash, clip and fade */
  html body.about-page #about-hero-title,
  html body.about-page #about-hero-title .hero-h1-line,
  html body.about-page #about-hero-title .hero-h1-line--lead,
  html body.about-page #about-hero-title .hero-h1-line--accent,
  html body.about-page .about-story-copy h2,
  html body.about-page .about-split-copy h2,
  html body.about-page .about-cta-copy h2{
    opacity:1!important;
    text-shadow:none!important;
    background-image:none!important;
    -webkit-background-clip:border-box!important;
    background-clip:border-box!important;
  }
  html body.about-page #about-hero-title .hero-h1-line--lead{
    color:#0c111b!important;
    -webkit-text-fill-color:#0c111b!important;
  }
  html body.about-page #about-hero-title .hero-h1-line--accent{
    color:#ed0000!important;
    -webkit-text-fill-color:#ed0000!important;
  }
  html body.about-page .about-story-punch,
  html body.about-page .about-story-beat-card,
  html body.about-page .about-story-copy .about-story-flow > span{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    visibility:visible!important;
  }

  html body.about-page .mobile-action-bar{
    display:none!important;
  }
}