/* Gate 3 — homepage conversion order, spacing/type budgets, LCP hero
   + 2026-08-02 desktop alignment polish (carousel shell, proof, grids) */

:root{
  --section-y:clamp(56px,6vw,96px);
  --home-gap:clamp(16px,2.2vw,28px);
}

/* Commercial hero: copy + one authentic image (not award carousel) */
.hero-commercial{
  padding:clamp(48px,6.5vw,88px) 0 clamp(36px,5vw,56px);
  background:
    linear-gradient(180deg, #fff 0%, #f7f8fb 55%, #fff 100%);
}
.hero-commercial-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.5vw,56px);
  align-items:center;
}
.hero-commercial .hero-eyebrow{
  margin-bottom:10px;
}
.hero-commercial #hero-title,
.hero-commercial h1{
  max-width:18ch;
  letter-spacing:-.02em;
  line-height:1.12;
}
.hero-commercial .hero-lede{
  max-width:38ch;
  font-size:clamp(16px,1.15vw,18px);
  line-height:1.55;
  color:var(--muted-2);
  margin-top:14px;
}
.hero-commercial .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.hero-commercial .hero-microcopy{
  margin-top:16px;
  max-width:42ch;
}
.hero-lcp-figure{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--soft-shadow);
  background:#0b1524;
}
.hero-lcp-img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}

/* Proof strip — compact, verified-only language */
.proof-strip-section{
  padding:clamp(22px,3.2vw,32px) 0;
  border-block:1px solid var(--line);
  background:#fbfcfe;
}
.proof-strip{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}
.proof-strip li,
.proof-strip a{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:4px clamp(12px,1.6vw,22px);
  border-right:1px solid var(--line);
}
.proof-strip li:first-child,
.proof-strip a:first-child{
  padding-left:0;
}
.proof-strip li:last-child,
.proof-strip > a:last-child,
.proof-strip li:last-of-type{
  border-right:0;
  padding-right:0;
}
.proof-strip strong{
  font-family:var(--title);
  font-size:14px;
  letter-spacing:.01em;
  color:var(--dark);
}
.proof-strip span{
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
}
.proof-strip a:hover strong{
  color:var(--red);
}
.proof-strip-note{display:none!important;}

/* Pathways / sectors / packages */
.pathway-grid,
.sector-card-grid,
.package-preview-grid,
.insights-grid{
  display:grid;
  gap:var(--home-gap);
}
.pathway-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.sector-card-grid,
.package-preview-grid,
.insights-grid{grid-template-columns:repeat(3,minmax(0,1fr));}

.pathway-card,
.sector-card,
.package-preview-card,
.insight-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:22px 20px;
  border:1px solid rgba(16,24,40,.12);
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 22px rgba(16,24,40,.045);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.pathway-card:hover,
.sector-card:hover,
.insight-card:hover,
.package-preview-card:hover{
  border-color:rgba(237,0,0,.32);
  box-shadow:0 2px 4px rgba(16,24,40,.05),0 12px 28px rgba(16,24,40,.07);
  transform:translateY(-2px);
}
.pathway-card h3,
.sector-card h3,
.package-preview-card h3,
.insight-card h3{
  margin:10px 0 6px;
  font-size:clamp(16px,1.1vw,18px);
  line-height:1.25;
  color:var(--dark);
}
.pathway-card p,
.sector-card p,
.package-preview-card p,
.insight-card p{
  margin:0;
  font-size:14.5px;
  line-height:1.5;
  color:var(--muted-2);
}
.package-preview-card.featured{
  border-color:rgba(237,0,0,.45);
  background:linear-gradient(180deg,#fff,#fff5f5);
}
.package-price{
  font-family:var(--title);
  font-weight:800;
  color:var(--red);
  margin:0 0 8px !important;
  font-size:18px !important;
}

/* =========================================================================
   SECTION HEADS — ONE stacked left pattern (kills 2-col grid disease)
   site.css uses display:grid; 2 cols → eyebrow left, h2 right, lede left.
   Home forces: eyebrow → headline → supporting sentence → content.
   ========================================================================= */
html body.home-page #main .section-head,
html body.home-page main .section-head,
html body.home-page .section-head,
html body.home-page #home-carousel .section-head,
html body.home-page #main .section-head.compact,
html body.home-page .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;
  grid-template-rows:none!important;
  max-width:40rem!important;
  width:100%!important;
  margin:0 0 clamp(18px,2.4vw,28px)!important;
  padding-left:0!important;
  padding-right:0!important;
  text-align:left!important;
}
html body.home-page #main .section-head .eyebrow,
html body.home-page .section-head .eyebrow,
html body.home-page #home-carousel .section-head .eyebrow{
  margin:0 0 12px!important;
  align-self:flex-start!important;
  justify-self:start!important;
}
html body.home-page #main .section-head h2,
html body.home-page .section-head h2,
html body.home-page #home-carousel .section-head h2,
html body.home-page #main .section-head .eyebrow + h2,
html body.home-page .section-head .eyebrow + h2{
  display:block!important;
  width:100%!important;
  max-width:22ch!important;
  margin:0 0 12px!important;
  margin-top:0!important;
  letter-spacing:-.02em!important;
  line-height:1.15!important;
  text-align:left!important;
  align-self:flex-start!important;
  justify-self:start!important;
}
html body.home-page #main .section-head > p,
html body.home-page .section-head > p,
html body.home-page #home-carousel .section-head > p,
html body.home-page #main .section-head:not(.center):not(.compact)>p,
html body.home-page .section-head:not(.center):not(.compact)>p,
html body.home-page #main .section-head.compact > p,
html body.home-page .section-head.compact > p{
  display:block!important;
  border-left:0!important;
  padding-left:0!important;
  padding-top:0!important;
  margin:0!important;
  max-width:52ch!important;
  width:100%!important;
  color:var(--muted-2)!important;
  line-height:1.55!important;
  font-size:clamp(15px,1.05vw,17px)!important;
  text-align:left!important;
  align-self:flex-start!important;
  justify-self:start!important;
}

/* Recognition: head + carousel share full shell width */
html body.home-page #home-carousel .section-head,
html body.home-page #home-carousel .section-head.compact{
  max-width:100%!important;
}
html body.home-page #home-carousel .section-head h2{
  max-width:28ch!important;
}

/* File steps */
.file-steps{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  counter-reset:file-step;
  align-items:stretch;
}
.file-steps li{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:18px 14px 16px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(16,24,40,.12);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 20px rgba(16,24,40,.04);
  counter-increment:file-step;
}
.file-steps li::before{
  content:counter(file-step);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-bottom:10px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:13px;
  font-weight:700;
}
.file-steps strong{
  display:block;
  font-size:15px;
  color:var(--dark);
  margin-bottom:4px;
}
.file-steps span{
  display:block;
  font-size:13.5px;
  line-height:1.45;
  color:var(--muted);
}

.concern-grid-compact{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.section-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
  padding-top:4px;
}

/* Disciplines strip — named roles early (existing people only) */
.desk-disciplines{
  list-style:none;
  margin:clamp(22px,2.8vw,32px) 0 0;
  padding:16px 0 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 18px;
  border-top:1px solid rgba(16,24,40,.1);
}
.desk-disciplines li{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(16,24,40,.1);
}
.desk-disciplines-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--red);
}
.desk-disciplines strong{
  font-size:14.5px;
  color:var(--dark);
  font-weight:700;
  line-height:1.3;
}

.leadership-preview-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,3.2vw,36px);
  align-items:start;
}
.leadership-preview-copy > .eyebrow{
  margin-bottom:12px;
}
.leadership-preview-copy > h2{
  margin:0 0 12px;
  max-width:18ch;
  letter-spacing:-.02em;
  line-height:1.15;
}
.leadership-preview-copy > p{
  margin:0;
  max-width:46ch;
  color:var(--muted-2);
  line-height:1.55;
  font-size:clamp(15px,1.05vw,17px);
}
.leadership-preview-list{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.leadership-preview-list li{
  display:grid;
  gap:2px;
  padding:12px 14px 12px 16px;
  border-left:3px solid var(--red);
  background:#fff;
  border-radius:0 12px 12px 0;
  border:1px solid rgba(16,24,40,.1);
  border-left:3px solid var(--red);
  font-size:14px;
  color:var(--muted-2);
}
.leadership-preview-list .leadership-role{
  font-size:11px;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--red);
}
.leadership-preview-list strong{
  font-size:15px;
  color:var(--dark);
  font-weight:750;
  line-height:1.3;
}
.leadership-preview-visual{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(16,24,40,.1);
  box-shadow:0 8px 28px rgba(7,17,31,.1);
}
.leadership-preview-visual img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  object-position:center 18%;
  aspect-ratio:5/4;
  display:block;
}

/* Recognition carousel — aligned shell (head + frame share one column) */
.home-carousel-demoted{
  padding-top:clamp(32px,4.5vw,56px);
  padding-bottom:clamp(32px,4.5vw,56px);
}
.home-carousel-shell{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2vw,20px);
}
.home-carousel-demoted .section-head h2{
  font-size:clamp(24px,2.6vw,34px);
  color:var(--dark);
  letter-spacing:-.02em;
  line-height:1.15;
  max-width:22ch;
}
.home-carousel-demoted .section-head > p{
  max-width:48ch;
  margin:0;
  font-size:clamp(15px,1.05vw,17px);
  color:var(--muted-2);
}
.home-carousel-demoted .home-hero-photo-carousel{
  width:100%;
  max-width:none;
}
.visually-quiet{
  font-size:clamp(20px,2.2vw,28px);
  color:var(--dark);
}

.faq-preview-grid{
  max-width:none;
  margin-inline:0;
  width:100%;
}
html body.home-page #faq-preview details,
html body.home-page .faq-preview-grid details{
  border:1px solid rgba(16,24,40,.12);
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.04);
}

/* WhatsApp green only on WA CTAs / status — do not bleed brand */
a.js-wa.btn-primary,
.floating-whatsapp,
a[href*="wa.me"] .wa-green{--wa-green:#25D366;}

/* =========================================================================
   CTA glow dial-back + conversion band tighten (beats ui-force-nav-wa)
   ========================================================================= */
html body.home-page .btn-primary,
html body.home-page a.btn-primary,
html body.home-page .nav-cta .btn-primary,
html body.home-page .hero-actions .btn-primary,
html body.home-page .conversion-band .btn-primary,
html body.home-page #final-cta .btn-primary,
html body.home-page #top .btn-primary{
  box-shadow:0 4px 12px rgba(237,0,0,.16)!important;
}
html body.home-page .btn-primary:hover,
html body.home-page a.btn-primary:hover,
html body.home-page .nav-cta .btn-primary:hover,
html body.home-page .hero-actions .btn-primary:hover,
html body.home-page .conversion-band .btn-primary:hover{
  box-shadow:0 6px 16px rgba(237,0,0,.2)!important;
}
html body.home-page .btn.js-wa,
html body.home-page a.btn.js-wa,
html body.home-page .btn-primary.js-wa,
html body.home-page a.btn-primary.js-wa,
html body.home-page .conversion-band a.js-wa,
html body.home-page #final-cta a.js-wa,
html body.home-page .floating-whatsapp,
html body.home-page a.floating-whatsapp{
  box-shadow:0 4px 12px rgba(6,118,71,.16)!important;
}
html body.home-page .btn.js-wa:hover,
html body.home-page a.btn.js-wa:hover,
html body.home-page .conversion-band a.js-wa:hover,
html body.home-page .floating-whatsapp:hover{
  box-shadow:0 6px 14px rgba(6,118,71,.2)!important;
}

/* Vertical rhythm — less sparse empty bands between sections */
html body.home-page #main > .section,
html body.home-page main > .section{
  padding-top:clamp(44px,5vw,72px)!important;
  padding-bottom:clamp(44px,5vw,72px)!important;
}
html body.home-page #proof-strip.section,
html body.home-page .proof-strip-section{
  padding-top:clamp(20px,2.6vw,28px)!important;
  padding-bottom:clamp(20px,2.6vw,28px)!important;
}
html body.home-page #final-cta.conversion-band,
html body.home-page .conversion-band{
  padding-top:clamp(28px,3.6vw,48px)!important;
  padding-bottom:clamp(28px,3.6vw,48px)!important;
}
html body.home-page .conversion-band-shell{
  gap:clamp(16px,2.4vw,28px)!important;
  padding:clamp(22px,2.8vw,32px)!important;
  border-radius:20px!important;
  box-shadow:0 10px 32px rgba(7,17,31,.06)!important;
}
html body.home-page .conversion-band h2{
  margin:10px 0 10px!important;
  max-width:18ch!important;
}
html body.home-page .conversion-band p{
  margin:0!important;
  max-width:48ch!important;
}

/* Hero commercial: left-stack copy for coherent head pattern */
html body.home-page #top.hero-commercial .hero-editorial-copy,
html body.home-page #top.hero-commercial .hero-copy{
  align-items:flex-start!important;
  text-align:left!important;
}
html body.home-page #top.hero-commercial .hero-eyebrow,
html body.home-page #top.hero-commercial #hero-title,
html body.home-page #top.hero-commercial .hero-lede,
html body.home-page #top.hero-commercial .hero-microcopy{
  text-align:left!important;
  margin-left:0!important;
  margin-right:0!important;
  align-self:flex-start!important;
  justify-self:start!important;
}
html body.home-page #top.hero-commercial .hero-actions{
  justify-content:flex-start!important;
}
html body.home-page #top.hero-commercial .hero-lcp-figure{
  border:1px solid rgba(16,24,40,.1);
  box-shadow:0 12px 36px rgba(7,17,31,.1);
}

/* Desktop: keep carousel frame inside the shared shell width */
@media (min-width:981px){
  html body.home-page #home-carousel.home-carousel-section,
  html body #home-carousel.home-carousel-section{
    padding:clamp(36px,4.5vw,60px) 0!important;
  }
  html body.home-page #home-carousel .home-carousel-shell.container,
  html body #home-carousel .home-carousel-shell.container{
    max-width:1200px!important;
    width:100%!important;
    margin-inline:auto!important;
  }
  html body.home-page #home-carousel .home-hero-photo-carousel.zatra-staff-frame,
  html body #home-carousel .home-hero-photo-carousel.zatra-staff-frame{
    --carousel-h:clamp(400px,40vw,540px);
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    border-radius:18px!important;
    box-shadow:0 14px 40px rgba(7,17,31,.14)!important;
  }
  .pathway-card .icon-badge,
  .sector-card .icon-badge{
    margin-bottom:2px;
  }
}

@media (max-width:980px){
  .hero-commercial-grid,
  .leadership-preview-layout{
    grid-template-columns:1fr;
  }
  .hero-lcp-figure{order:-1;}
  .proof-strip{
    grid-template-columns:1fr 1fr;
    gap:14px 18px;
  }
  .proof-strip li,
  .proof-strip a{
    border-right:0;
    padding:0;
  }
  .pathway-grid,
  .sector-card-grid,
  .package-preview-grid,
  .insights-grid,
  .concern-grid-compact,
  .file-steps,
  .desk-disciplines{
    grid-template-columns:1fr 1fr;
  }
  /* Mobile: section head stays padded; frame can go edge-to-edge via home-restore */
  html body.home-page #home-carousel .home-carousel-shell.container,
  html body #home-carousel .home-carousel-shell.container{
    max-width:100%!important;
    width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html body.home-page #home-carousel .section-head,
  html body #home-carousel .section-head{
    padding-left:16px!important;
    padding-right:16px!important;
    margin-bottom:12px!important;
  }
  html body.home-page #top.hero-commercial .hero-editorial-copy,
  html body.home-page #top.hero-commercial .hero-copy{
    align-items:center!important;
    text-align:center!important;
  }
  html body.home-page #top.hero-commercial .hero-eyebrow,
  html body.home-page #top.hero-commercial #hero-title,
  html body.home-page #top.hero-commercial .hero-lede,
  html body.home-page #top.hero-commercial .hero-microcopy{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    align-self:center!important;
  }
  html body.home-page #top.hero-commercial .hero-actions{
    justify-content:center!important;
  }
}
@media (max-width:640px){
  .proof-strip,
  .pathway-grid,
  .sector-card-grid,
  .package-preview-grid,
  .insights-grid,
  .concern-grid-compact,
  .file-steps,
  .desk-disciplines{
    grid-template-columns:1fr;
  }
  .hero-commercial .hero-lede{max-width:none;}
  .hero-commercial #hero-title,
  .hero-commercial h1{max-width:none;}
  html body.home-page #main .section-head h2,
  html body.home-page .section-head h2{
    max-width:none!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .pathway-card,
  .sector-card,
  .insight-card,
  .package-preview-card{
    transition:none;
  }
}