/*
 * SEO reference hero alignment
 * Applies only to pages explicitly tagged with .seo-reference-ui.
 * Goal: mirror seo-services.html heading + wide image placement without
 * changing the page's body content/cards/sections.
 */
.seo-reference-ui .docx-hero{
  display:block !important;
  grid-template-columns:none !important;
  min-height:0 !important;
  margin:0 0 34px !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.seo-reference-ui .docx-hero-copy{
  position:relative;
  display:block !important;
  padding:46px 0 0 !important;
  background:transparent !important;
  isolation:auto !important;
}

.seo-reference-ui .docx-hero-copy::before,
.seo-reference-ui .docx-hero-copy::after{
  display:none !important;
  content:none !important;
}

/* Match the small category line used by seo-services.html. */
.seo-reference-ui .docx-kicker{
  display:block !important;
  width:auto !important;
  margin:0 0 20px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--svc-accent-deep,#0A5C46) !important;
  font-family:inherit !important;
  font-size:.85rem !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
}
.seo-reference-ui .docx-kicker::before{display:none !important;content:none !important;}

/* Same scale/measure as .page-hero h1 on seo-services.html. */
.seo-reference-ui .docx-title{
  max-width:760px !important;
  margin:0 0 24px !important;
  color:var(--ink) !important;
  font-size:clamp(2rem,7.5vw,3.6rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.02em !important;
  text-wrap:balance;
}
.seo-reference-ui .docx-title strong{font-weight:inherit !important;}

.seo-reference-ui .docx-subtitle{
  max-width:520px !important;
  margin:0 !important;
  color:var(--ink-soft) !important;
  font-size:1.15rem !important;
  font-weight:400 !important;
  line-height:1.6 !important;
}
.seo-reference-ui .docx-subtitle strong{font-weight:inherit !important;}

/* Main visual: wide, directly below heading copy, matching SEO reference ratio. */
.seo-reference-ui .docx-hero-media{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:560px !important;
  aspect-ratio:1200 / 560 !important;
  margin-top:40px !important;
  overflow:hidden !important;
  border-radius:var(--radius-lg,16px) var(--radius-lg,16px) 0 0 !important;
  background:linear-gradient(135deg,var(--svc-accent,#007CA5),var(--svc-accent-deep,#005A78)) !important;
  box-shadow:none !important;
}
.seo-reference-ui .docx-hero-media::before,
.seo-reference-ui .docx-hero-media::after{
  display:none !important;
  content:none !important;
}
.seo-reference-ui .docx-hero-media img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  filter:none !important;
  transition:transform .7s cubic-bezier(.2,.7,.3,1) !important;
}
.seo-reference-ui .docx-hero:hover .docx-hero-media img{transform:scale(1.03) !important;}

@media (max-width:760px){
  .seo-reference-ui .docx-hero-copy{padding-top:28px !important;}
  .seo-reference-ui .docx-title{
    margin-bottom:18px !important;
    font-size:clamp(2rem,10vw,3rem) !important;
  }
  .seo-reference-ui .docx-subtitle{font-size:1rem !important;}
  .seo-reference-ui .docx-hero-media{
    margin-top:22px !important;
    aspect-ratio:1200 / 560 !important;
    border-radius:16px 16px 0 0 !important;
  }
}
.seo-reference-ui .docx-hero-copy .docx-title:last-child{margin-bottom:0 !important;}

/* =========================================================
   Shared spacing & alignment polish for the 30 service pages
   Keeps content/theme intact; normalizes rhythm and geometry.
   ========================================================= */
.seo-reference-ui.docx-page{
  padding:36px 0 104px !important;
}

.seo-reference-ui.docx-page > .wrap,
.seo-reference-ui.docx-page .wrap{
  width:min(100% - 64px, 1200px) !important;
  max-width:1200px !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.seo-reference-ui .docx-article{
  width:100% !important;
  max-width:1200px !important;
  margin-inline:auto !important;
}

.seo-reference-ui .docx-breadcrumb{
  margin:0 0 18px !important;
  line-height:1.3 !important;
}

.seo-reference-ui .docx-breadcrumb a{
  min-height:36px !important;
  padding:7px 13px !important;
}

.seo-reference-ui .docx-hero{
  width:100% !important;
  margin:0 0 40px !important;
}

.seo-reference-ui .docx-hero-copy{
  width:100% !important;
  max-width:100% !important;
  padding:34px 0 0 !important;
}

.seo-reference-ui .docx-kicker{
  margin-bottom:16px !important;
}

.seo-reference-ui .docx-title{
  max-width:820px !important;
  margin:0 0 20px !important;
}

.seo-reference-ui .docx-subtitle{
  max-width:650px !important;
  margin:0 !important;
  line-height:1.62 !important;
}

.seo-reference-ui .docx-hero-media{
  margin-top:32px !important;
  border-radius:18px !important;
}

.seo-reference-ui .docx-intro{
  width:min(100%, 1040px) !important;
  max-width:1040px !important;
  margin:0 auto 30px !important;
  padding:24px 28px 24px 30px !important;
}

.seo-reference-ui .docx-intro p{
  margin-bottom:13px !important;
}

.seo-reference-ui .docx-section{
  width:100% !important;
  margin-top:24px !important;
  padding:clamp(34px, 4vw, 48px) !important;
}

.seo-reference-ui .docx-section:first-of-type{
  margin-top:0 !important;
}

.seo-reference-ui .docx-section h2{
  margin-bottom:20px !important;
}

.seo-reference-ui .docx-section > p{
  max-width:960px !important;
  margin-bottom:15px !important;
}

.seo-reference-ui .docx-section > p + p{
  margin-top:2px !important;
}

.seo-reference-ui .docx-list{
  gap:11px 14px !important;
  margin:18px 0 !important;
}

.seo-reference-ui .docx-capability,
.seo-reference-ui .docx-service-card,
.seo-reference-ui .docx-step,
.seo-reference-ui .docx-faq,
.seo-reference-ui .docx-solution-line{
  margin:10px 0 !important;
}

.seo-reference-ui .docx-capability,
.seo-reference-ui .docx-service-card,
.seo-reference-ui .docx-faq{
  padding:20px 22px 20px 24px !important;
}

.seo-reference-ui .docx-callout{
  margin-top:20px !important;
  padding:22px 26px !important;
}

.seo-reference-ui .docx-actions{
  margin-top:28px !important;
}

@media (min-width:860px){
  .seo-reference-ui .docx-section:has(.docx-capability),
  .seo-reference-ui .docx-section:has(.docx-service-card),
  .seo-reference-ui .docx-section:has(.docx-step),
  .seo-reference-ui .docx-section:has(.docx-faq){
    gap:14px 16px !important;
    align-items:stretch !important;
  }

  .seo-reference-ui .docx-section:has(.docx-capability) .docx-capability,
  .seo-reference-ui .docx-section:has(.docx-service-card) .docx-service-card,
  .seo-reference-ui .docx-section:has(.docx-step) .docx-step,
  .seo-reference-ui .docx-section:has(.docx-faq) .docx-faq{
    margin:0 !important;
    height:100% !important;
  }
}

@media (max-width:980px){
  .seo-reference-ui.docx-page > .wrap,
  .seo-reference-ui.docx-page .wrap{
    width:min(100% - 44px, 1200px) !important;
  }
  .seo-reference-ui .docx-section{
    padding:32px !important;
  }
}

@media (max-width:760px){
  .seo-reference-ui.docx-page{
    padding:22px 0 72px !important;
  }

  .seo-reference-ui.docx-page > .wrap,
  .seo-reference-ui.docx-page .wrap{
    width:min(100% - 30px, 1200px) !important;
  }

  .seo-reference-ui .docx-breadcrumb{
    margin-bottom:12px !important;
  }

  .seo-reference-ui .docx-hero{
    margin-bottom:28px !important;
  }

  .seo-reference-ui .docx-hero-copy{
    padding-top:24px !important;
  }

  .seo-reference-ui .docx-kicker{
    margin-bottom:12px !important;
  }

  .seo-reference-ui .docx-title{
    margin-bottom:15px !important;
    line-height:1.08 !important;
  }

  .seo-reference-ui .docx-subtitle{
    line-height:1.55 !important;
  }

  .seo-reference-ui .docx-hero-media{
    margin-top:20px !important;
    border-radius:14px !important;
  }

  .seo-reference-ui .docx-intro{
    width:100% !important;
    margin-bottom:22px !important;
    padding:19px 18px 19px 20px !important;
  }

  .seo-reference-ui .docx-section{
    margin-top:16px !important;
    padding:25px 20px !important;
  }

  .seo-reference-ui .docx-section h2{
    margin-bottom:17px !important;
  }

  .seo-reference-ui .docx-list{
    gap:8px !important;
    margin:15px 0 !important;
  }

  .seo-reference-ui .docx-capability,
  .seo-reference-ui .docx-service-card,
  .seo-reference-ui .docx-step,
  .seo-reference-ui .docx-faq,
  .seo-reference-ui .docx-solution-line{
    margin:8px 0 !important;
  }

  .seo-reference-ui .docx-callout{
    margin-top:17px !important;
    padding:20px !important;
  }
}

@media (max-width:420px){
  .seo-reference-ui.docx-page > .wrap,
  .seo-reference-ui.docx-page .wrap{
    width:min(100% - 22px, 1200px) !important;
  }

  .seo-reference-ui .docx-title{
    font-size:clamp(1.95rem, 10vw, 2.65rem) !important;
  }

  .seo-reference-ui .docx-section{
    padding:22px 17px !important;
  }
}

/* Some industry/reference pages use lead paragraphs directly under the hero. */
.seo-reference-ui .docx-article > p{
  width:min(100%, 1040px) !important;
  max-width:1040px !important;
  margin:0 auto 14px !important;
  color:var(--ink-soft) !important;
  font-size:1.045rem !important;
  line-height:1.76 !important;
}
.seo-reference-ui .docx-article > p strong{color:var(--ink) !important;}
.seo-reference-ui .docx-article > p + .docx-section{margin-top:30px !important;}
@media(max-width:760px){
  .seo-reference-ui .docx-article > p{
    font-size:.98rem !important;
    line-height:1.7 !important;
    margin-bottom:12px !important;
  }
  .seo-reference-ui .docx-article > p + .docx-section{margin-top:22px !important;}
}