/* A0018998 — shared public service hero system.
   Visual reference: /services/ and the Small Business Software & AI service hub.
   Variants share one geometry, type rhythm, image treatment, CTA hierarchy and contrast contract. */

.yitm-service-hero-enabled{
  --yitm-hero-ink:#10233f;
  --yitm-hero-copy:#42566f;
  --yitm-hero-green:#246645;
  --yitm-hero-line:rgba(16,35,63,.11);
  --yitm-hero-shadow:0 22px 58px rgba(16,35,63,.09);
  --yitm-hero-canvas:linear-gradient(135deg,#fffaf0 0%,#f8fbf6 56%,#eef7f8 100%);
}

.yitm-service-hero-shell{
  position:relative!important;
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto 30px!important;
  padding:clamp(28px,4vw,46px)!important;
  border:1px solid var(--yitm-hero-line)!important;
  border-radius:34px!important;
  background:var(--yitm-hero-canvas)!important;
  box-shadow:var(--yitm-hero-shadow)!important;
  overflow:hidden!important;
  color:var(--yitm-hero-ink)!important;
}

.yitm-service-hero-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 8%,rgba(232,176,40,.14),transparent 25%),
    radial-gradient(circle at 92% 10%,rgba(45,113,126,.10),transparent 28%);
}

.yitm-service-hero-shell > *,
.yitm-service-hero-shell > .wrap{
  position:relative;
  z-index:1;
}

.yitm-service-hero-shell > .wrap{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

/* Shared two-column geometry. Review metadata always follows the visual row instead of pushing the image down. */
.yitm-service-hero-shell :is(.hero-grid,.yitm-ndis-hero-grid){
  display:grid!important;
  grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr)!important;
  gap:clamp(28px,4.5vw,54px)!important;
  align-items:start!important;
}
.yitm-service-hero-shell :is(.hero-grid,.yitm-ndis-hero-grid) > :first-child{
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
}
.yitm-service-hero-shell :is(.hero-grid,.yitm-ndis-hero-grid) > :is(.hero-img-col,.hero-image,figure):not(.yitm-review-strip){
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:stretch!important;
  min-width:0!important;
}
.yitm-service-hero-shell :is(.hero-grid,.yitm-ndis-hero-grid) > .yitm-review-strip{
  grid-column:1 / -1!important;
  grid-row:2!important;
  margin-top:4px!important;
}

/* Direct-grid legacy hero shapes. */
.yitm-service-hero-shell:is(.yitm-hero,.vm-hero,.lre-hero){
  display:grid!important;
  grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr)!important;
  gap:clamp(28px,4.5vw,54px)!important;
  align-items:start!important;
}
.yitm-service-hero-shell.yitm-hero > :not(.yitm-hero-img),
.yitm-service-hero-shell.vm-hero > :first-child,
.yitm-service-hero-shell.lre-hero > :first-child{
  grid-column:1!important;
}
.yitm-service-hero-shell.yitm-hero > .yitm-hero-img,
.yitm-service-hero-shell.vm-hero > .vm-hero-img,
.yitm-service-hero-shell.lre-hero > img{
  grid-column:2!important;
  grid-row:1 / span 8!important;
  align-self:start!important;
}
.yitm-service-hero-shell.vm-hero > .yitm-review-strip{
  grid-column:1 / -1!important;
  grid-row:2!important;
}

/* Consistent hierarchy: service/location title first, differentiation in the supporting copy. */
.yitm-service-hero-shell :is(h1,.hero-h1,.yitm-ndis-hero-title){
  max-width:18ch!important;
  margin:.55rem 0 1rem!important;
  color:var(--yitm-hero-ink)!important;
  -webkit-text-fill-color:var(--yitm-hero-ink)!important;
  font-family:"Barlow Condensed",Barlow,sans-serif!important;
  font-size:clamp(2.6rem,4.45vw,4.55rem)!important;
  line-height:.99!important;
  letter-spacing:-.042em!important;
  text-wrap:balance!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.yitm-service-hero--support :is(h1,.hero-h1,.yitm-ndis-hero-title){max-width:18ch!important;}
.yitm-service-hero--business :is(h1,.hero-h1){max-width:17ch!important;}
.yitm-service-hero--hub :is(h1,.hero-h1){max-width:20ch!important;}

.yitm-service-hero-shell :is(.hero-intro,.hero-copy,.lead,.vm-lead,.yitm-ndis-hero-intro,.yitm-ndis-hero-subtitle) {
  max-width:62ch!important;
  margin-top:.9rem!important;
  color:var(--yitm-hero-copy)!important;
  -webkit-text-fill-color:var(--yitm-hero-copy)!important;
  font-size:clamp(1.04rem,1.35vw,1.18rem)!important;
  line-height:1.62!important;
  text-wrap:pretty!important;
}
.yitm-service-hero-shell .yitm-ndis-hero-subtitle{
  max-width:42ch!important;
  color:#294963!important;
  font-weight:850!important;
  line-height:1.35!important;
}
.yitm-service-hero-shell .local-proof{
  max-width:62ch!important;
  margin-top:1rem!important;
  color:#5a6b7b!important;
  -webkit-text-fill-color:#5a6b7b!important;
  font-size:.96rem!important;
  line-height:1.55!important;
}

/* One shared pill treatment. Dark pill always means light foreground. */
.yitm-service-hero-shell :is(.eyebrow,.hero-badge-pill,.vm-kicker,.service-hero-kicker,.yitm-ndis-hero-badge){
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:36px!important;
  margin:0 0 .65rem!important;
  padding:.5rem .9rem!important;
  border:1px solid #10233f!important;
  border-radius:999px!important;
  background:#10233f!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:.82rem!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  line-height:1.2!important;
  text-transform:uppercase!important;
  text-shadow:none!important;
  box-shadow:0 10px 24px rgba(16,35,63,.11)!important;
}
.yitm-service-hero-shell :is(.eyebrow,.hero-badge-pill,.vm-kicker,.service-hero-kicker,.yitm-ndis-hero-badge) *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Flatten old card-inside-card hero copy so the first screen reads like one editorial composition. */
.yitm-service-hero-shell :is(.ux-copy-panel--hero,.reading-split.ux-copy-panel--hero){
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.yitm-service-hero-shell .ux-copy-panel--hero > :is(.ux-copy-card,.reading-card){
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.yitm-service-hero-shell .answer-block{
  max-width:62ch!important;
  margin:1rem 0 0!important;
  padding:14px 16px!important;
  border:1px solid rgba(16,35,63,.10)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.68)!important;
  color:var(--yitm-hero-copy)!important;
  line-height:1.55!important;
}
.yitm-service-hero-shell .answer-block strong{color:var(--yitm-hero-ink)!important;-webkit-text-fill-color:var(--yitm-hero-ink)!important;}

/* Image geometry is shared even when legacy pages use different wrapper names. */
.yitm-service-hero-shell :is(.hero-img-col,.hero-image,.yitm-ndis-hero-media,figure,.vm-hero-img){
  min-width:0!important;
  padding-top:0!important;
}
.yitm-service-hero-shell :is(.hero-img,.yitm-hero-img,.hero-image img,.feature-img-card img,figure img,.vm-hero-img img,.lre-hero>img){
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:470px!important;
  aspect-ratio:4 / 3!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:26px!important;
  background:#eef3f6!important;
  box-shadow:0 18px 42px rgba(16,35,63,.14)!important;
}
.yitm-service-hero-shell .feature-img-card{
  overflow:hidden!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 18px 42px rgba(16,35,63,.12)!important;
}
.yitm-service-hero-shell .feature-img-card img{border-radius:0!important;box-shadow:none!important;}
.yitm-service-hero-shell .img-caption{padding:10px 12px!important;color:#52657a!important;-webkit-text-fill-color:#52657a!important;font-size:.9rem!important;line-height:1.45!important;}

/* CTAs: one primary and one secondary visual role. */
.yitm-service-hero-shell :is(.hero-ctas,.actions,.vm-actions,.hub-actions,.article-hero-actions,.lre-actions){
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.75rem!important;
  margin-top:1.35rem!important;
}
.yitm-service-hero-shell :is(.btn,.vm-btn,.hub-action,.lre-btn){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:48px!important;
  padding:.78rem 1.2rem!important;
  border-radius:999px!important;
  font-weight:900!important;
  line-height:1.2!important;
  text-decoration:none!important;
}
.yitm-service-hero-shell :is(.btn-primary,.btn.primary,.vm-btn:not(.secondary),.hub-action.primary,.lre-btn-primary){
  border:1px solid #10233f!important;
  background:#10233f!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 12px 26px rgba(16,35,63,.16)!important;
}
.yitm-service-hero-shell :is(.btn-secondary,.btn-outline,.vm-btn.secondary,.hub-action:not(.primary),.lre-btn-secondary){
  border:2px solid #10233f!important;
  background:#fff!important;
  color:#10233f!important;
  -webkit-text-fill-color:#10233f!important;
  box-shadow:none!important;
}
.yitm-service-hero-shell :is(.btn-primary,.btn.primary,.vm-btn:not(.secondary),.hub-action.primary,.lre-btn-primary):is(:hover,:focus-visible){transform:translateY(-1px);}
.yitm-service-hero-shell :is(.btn,.vm-btn,.hub-action,.lre-btn):focus-visible{outline:3px solid #e8b028!important;outline-offset:3px!important;}

/* Compact smart/support note: useful context without adding another hero card hierarchy. */
.yitm-service-hero-shell .yitm-service-hero-note,
.yitm-service-hero-shell .yitm-ndis-hero-match{
  max-width:62ch!important;
  margin-top:1rem!important;
  padding:12px 14px!important;
  border:1px solid #c9ddd2!important;
  border-radius:15px!important;
  background:#f7fbf8!important;
  color:#355646!important;
  -webkit-text-fill-color:#355646!important;
  box-shadow:none!important;
  font-size:.96rem!important;
  line-height:1.55!important;
}
.yitm-service-hero-shell .yitm-service-hero-note strong,
.yitm-service-hero-shell .yitm-ndis-hero-match strong{color:#173f2d!important;-webkit-text-fill-color:#173f2d!important;}

/* Follow-up rails may exist on support heroes, but they are visually separated from the first-screen decision. */
.yitm-service-hero-shell :is(.yitm-ndis-facts,.yitm-ndis-hero-status,.local-strip,.trust-strip,.family-start-here){
  position:relative!important;
  z-index:1!important;
  margin-top:24px!important;
}
.yitm-service-hero-shell :is(.yitm-ndis-facts,.local-strip,.trust-strip,.family-start-here){
  border-top:1px solid rgba(16,35,63,.10)!important;
  padding-top:20px!important;
}

/* Review provenance should not disrupt the image/text balance. */
.yitm-service-hero-shell .yitm-review-strip{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr)) auto!important;
  gap:14px!important;
  align-items:center!important;
  width:100%!important;
  padding:14px 16px!important;
  border:1px solid rgba(16,35,63,.09)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:none!important;
}

/* Permanent release blocker: known branded dark surfaces always receive a readable light foreground. */
.yitm-service-hero-enabled :is(
  .dark-panel,.dark-card,.navy-panel,.cta-dark,.signature-band,.feature-band,.primary-start,
  .yitm-service-handoff,.post-footer-cta,.review-proof,.scam-post-hero,.scam-safety-hero,
  .pricing-kicker-strip,.pricing-action-strip
){color:#fff!important;-webkit-text-fill-color:#fff!important;}
.yitm-service-hero-enabled :is(
  .dark-panel,.dark-card,.navy-panel,.cta-dark,.signature-band,.feature-band,.primary-start,
  .yitm-service-handoff,.post-footer-cta,.review-proof,.scam-post-hero,.scam-safety-hero,
  .pricing-kicker-strip,.pricing-action-strip
) :is(h1,h2,h3,h4,h5,h6,p,li,small,label,strong,em,span,a:not(.btn):not([class*="btn"])){
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* Hub pages can legitimately be single-column and may have more utility actions. */
.yitm-service-hero--hub{max-width:1120px!important;}
.yitm-service-hero--hub:not(:has(img)){padding-right:clamp(28px,7vw,86px)!important;}

@media(max-width:900px){
  .yitm-service-hero-shell :is(.hero-grid,.yitm-ndis-hero-grid),
  .yitm-service-hero-shell:is(.yitm-hero,.vm-hero,.lre-hero){grid-template-columns:1fr!important;gap:24px!important;}
  .yitm-service-hero-shell :is(.hero-grid,.yitm-ndis-hero-grid) > :first-child,
  .yitm-service-hero-shell :is(.hero-grid,.yitm-ndis-hero-grid) > :is(.hero-img-col,.hero-image,figure):not(.yitm-review-strip),
  .yitm-service-hero-shell :is(.hero-grid,.yitm-ndis-hero-grid) > .yitm-review-strip,
  .yitm-service-hero-shell.yitm-hero > :not(.yitm-hero-img),
  .yitm-service-hero-shell.yitm-hero > .yitm-hero-img,
  .yitm-service-hero-shell.vm-hero > :first-child,
  .yitm-service-hero-shell.vm-hero > .vm-hero-img,
  .yitm-service-hero-shell.vm-hero > .yitm-review-strip,
  .yitm-service-hero-shell.lre-hero > :first-child,
  .yitm-service-hero-shell.lre-hero > img{
    grid-column:1!important;
    grid-row:auto!important;
  }
  .yitm-service-hero-shell :is(h1,.hero-h1,.yitm-ndis-hero-title){max-width:20ch!important;font-size:clamp(2.35rem,7vw,3.55rem)!important;}
  .yitm-service-hero-shell :is(.hero-img,.yitm-hero-img,.hero-image img,.feature-img-card img,figure img,.vm-hero-img img,.lre-hero>img){max-height:420px!important;aspect-ratio:16 / 10!important;}
  .yitm-service-hero-shell .yitm-review-strip{grid-template-columns:1fr 1fr!important;}
  .yitm-service-hero-shell .yitm-review-date{grid-column:1 / -1!important;}
}

@media(max-width:620px){
  .yitm-service-hero-shell{
    margin-bottom:22px!important;
    padding:24px 18px!important;
    border-radius:24px!important;
  }
  .yitm-service-hero-shell :is(h1,.hero-h1,.yitm-ndis-hero-title){
    max-width:none!important;
    margin-top:.35rem!important;
    font-size:clamp(2.15rem,10.6vw,3rem)!important;
    line-height:1.02!important;
  }
  .yitm-service-hero-shell :is(.hero-ctas,.actions,.vm-actions,.hub-actions,.article-hero-actions,.lre-actions){display:grid!important;grid-template-columns:1fr!important;}
  .yitm-service-hero-shell :is(.btn,.vm-btn,.hub-action,.lre-btn){width:100%!important;text-align:center!important;}
  .yitm-service-hero-shell :is(.hero-img,.yitm-hero-img,.hero-image img,.feature-img-card img,figure img,.vm-hero-img img,.lre-hero>img){max-height:330px!important;aspect-ratio:4 / 3!important;border-radius:20px!important;}
  .yitm-service-hero-shell .yitm-review-strip{grid-template-columns:1fr!important;padding:14px!important;}
  .yitm-service-hero-shell .yitm-review-date{grid-column:auto!important;}
  .yitm-service-hero-shell :is(.yitm-ndis-facts,.local-strip,.trust-strip,.family-start-here){margin-top:18px!important;padding-top:16px!important;}
}

@media(prefers-reduced-motion:reduce){
  .yitm-service-hero-shell *{transition:none!important;animation:none!important;}
}

/* A0018996 final cascade guard: legacy page themes must not recenter or stagger the shared first-screen grid. */
.yitm-service-hero-enabled .yitm-service-hero-shell .hero-grid,
.yitm-service-hero-enabled .yitm-service-hero-shell .yitm-ndis-hero-grid{
  align-items:start!important;
}
.yitm-service-hero-enabled .yitm-service-hero-shell .hero-grid > :first-child,
.yitm-service-hero-enabled .yitm-service-hero-shell .yitm-ndis-hero-grid > :first-child{
  grid-column:1!important;
  grid-row:1!important;
  align-self:start!important;
}
.yitm-service-hero-enabled .yitm-service-hero-shell .hero-grid > :is(.hero-img-col,.hero-image,figure),
.yitm-service-hero-enabled .yitm-service-hero-shell .yitm-ndis-hero-grid > :is(.hero-img-col,.hero-image,figure){
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  margin:0!important;
  padding-top:0!important;
  transform:none!important;
}
.yitm-service-hero-enabled .yitm-service-hero-shell .hero-grid > .yitm-review-strip,
.yitm-service-hero-enabled .yitm-service-hero-shell .yitm-ndis-hero-grid > .yitm-review-strip{
  grid-column:1 / -1!important;
  grid-row:2!important;
  align-self:start!important;
  margin-top:4px!important;
}

/* One recognisable service eyebrow. High specificity protects it from older page-theme colour rules. */
.yitm-service-hero-enabled .yitm-service-hero-shell :is(.eyebrow,.hero-badge-pill,.vm-kicker,.service-hero-kicker,.yitm-ndis-hero-badge){
  border-color:#10233f!important;
  background:#10233f!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Some older used-laptop pages called a wrapper "dark-panel-wrap" even after its background became light.
   In the shared service hero it is normalised to the light editorial canvas so white-on-white cannot occur. */
.yitm-service-hero-enabled .yitm-service-hero-shell .dark-panel-wrap{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--yitm-hero-copy)!important;
  -webkit-text-fill-color:var(--yitm-hero-copy)!important;
}
.yitm-service-hero-enabled .yitm-service-hero-shell .dark-panel-wrap :is(h1,h2,h3,h4,h5,h6,strong){
  color:var(--yitm-hero-ink)!important;
  -webkit-text-fill-color:var(--yitm-hero-ink)!important;
}
.yitm-service-hero-enabled .yitm-service-hero-shell .dark-panel-wrap :is(p,li,small,label,em,a:not(.btn):not([class*="btn"])){
  color:var(--yitm-hero-copy)!important;
  -webkit-text-fill-color:var(--yitm-hero-copy)!important;
}
.yitm-service-hero-enabled .yitm-service-hero-shell .dark-panel-wrap :is(.eyebrow,.hero-badge-pill){
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Final specificity lock for legacy themes that used !important on service pills. */
.yitm-service-hero-enabled .yitm-service-hero-shell.yitm-service-hero-shell :is(.eyebrow,.hero-badge-pill,.vm-kicker,.service-hero-kicker,.yitm-ndis-hero-badge),
.yitm-service-hero-enabled .yitm-service-hero-shell.yitm-service-hero-shell .dark-panel-wrap :is(.eyebrow,.hero-badge-pill){
  border-color:#10233f!important;
  background:#10233f!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Final mobile lock: old page themes must not retain a ghost second grid column. */
@media(max-width:900px){
  .yitm-service-hero-enabled .yitm-service-hero-shell.yitm-service-hero-shell .hero-grid,
  .yitm-service-hero-enabled .yitm-service-hero-shell.yitm-service-hero-shell .yitm-ndis-hero-grid{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
  }
  .yitm-service-hero-enabled .yitm-service-hero-shell.yitm-service-hero-shell .hero-grid > *,
  .yitm-service-hero-enabled .yitm-service-hero-shell.yitm-service-hero-shell .yitm-ndis-hero-grid > *{
    grid-column:1!important;
    grid-row:auto!important;
    min-width:0!important;
    align-self:start!important;
  }
}

/* Pages with legacy #main/#main-content !important paragraph rules must still expose white text on navy hero pills. */
body.yitm-service-hero-enabled :is(#main,#main-content) .yitm-service-hero-shell :is(.eyebrow,.hero-badge-pill,.vm-kicker,.service-hero-kicker,.yitm-ndis-hero-badge){
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:#10233f!important;
  border-color:#10233f!important;
}