/* Shared mobile hero alignment. Desktop layouts, wording and images are unchanged. */
@media(max-width:767px){
 .sm-mobile-hero-layout main :is(.hero-copy,.sd-hero-copy,.bs-hero-copy,.po-hero-copy,.pf-hero-copy,.ct-hero-copy,.sv-hero-copy,.about-intro-copy,.pt-hero-copy,.j-hero-copy,.rs-hero>div:first-child,.bl-intro>div:first-child){text-align:center;min-width:0}
 .sm-mobile-hero-layout main :is(.hero-copy,.sd-hero-copy,.bs-hero-copy,.po-hero-copy,.pf-hero-copy,.ct-hero-copy,.sv-hero-copy,.about-intro-copy,.pt-hero-copy,.j-hero-copy,.rs-hero>div:first-child,.bl-intro>div:first-child) h1{font-size:clamp(26px,7.2vw,30px);line-height:1.2;letter-spacing:-.4px;text-align:center;text-wrap:balance;white-space:normal;max-width:100%;margin-inline:auto}
 .sm-mobile-hero-layout main :is(.hero-copy,.sd-hero-copy,.bs-hero-copy,.po-hero-copy,.pf-hero-copy,.ct-hero-copy,.sv-hero-copy,.about-intro-copy,.pt-hero-copy,.j-hero-copy,.rs-hero>div:first-child,.bl-intro>div:first-child) h1 :is(span,.orange,.sd-accent){font-size:inherit;line-height:inherit;white-space:normal}
 .sm-mobile-hero-layout main :is(.sd-eyebrow,.rs-eyebrow,.j-eyebrow,.bs-eyebrow,.po-eyebrow){margin-inline:auto;text-align:center}
 .sm-mobile-hero-layout main :is(.about-eyebrow,.sd-trust,.sv-tech,.pt-meta,.pt-breadcrumb,.about-breadcrumb,.ct-breadcrumb,.sv-breadcrumb,.j-breadcrumb){justify-content:center}
 .sm-mobile-hero-layout main :is(.sd-eyebrow,.rs-eyebrow,.j-eyebrow,.bs-eyebrow,.po-eyebrow):after{right:50%;left:auto;transform:translateX(50%)}
 .sm-mobile-hero-layout main :is(.hero-actions,.sd-hero-actions,.bs-actions,.sv-hero-actions,.rs-actions,.j-actions,.j-hero-actions){justify-content:center;margin-inline:auto}
 .sm-mobile-hero-layout main :is(.hero-actions,.sd-hero-actions,.bs-actions,.sv-hero-actions,.rs-actions,.j-actions,.j-hero-actions):has(>.button:nth-child(2)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;align-items:stretch}
 .sm-mobile-hero-layout main :is(.hero-actions,.sd-hero-actions,.bs-actions,.sv-hero-actions,.rs-actions,.j-actions,.j-hero-actions):has(>.button:nth-child(2))>.button{display:flex;align-items:center;justify-content:center;align-self:stretch;width:100%;max-width:100%;min-width:0;min-height:48px;height:auto;box-sizing:border-box;padding:10px 7px;gap:5px;font-size:clamp(13px,3.65vw,15px);line-height:1.3;text-align:center;white-space:normal}
 .sm-mobile-hero-layout main :is(.hero-actions,.sd-hero-actions,.bs-actions,.sv-hero-actions,.rs-actions,.j-actions,.j-hero-actions):has(>.button:nth-child(2))>.button svg{width:17px;height:17px;flex:0 0 17px}
 .sm-mobile-hero-layout main :is(.sd-hero-copy,.bs-hero-copy,.po-hero-copy,.pf-hero-copy,.ct-hero-copy,.sv-hero-copy,.about-intro-copy,.pt-hero-copy,.j-hero-copy)>p{margin-inline:auto}
 /* This legacy template uses ID selectors, so its mobile overrides need the same scope. */
 .sm-mobile-hero-layout #responsive-main .rs-hero h1{font-size:clamp(26px,7.2vw,30px);line-height:1.2;text-align:center;text-wrap:balance}
 .sm-mobile-hero-layout #responsive-main .rs-hero h1 span{font-size:inherit;line-height:inherit}
 .sm-mobile-hero-layout #responsive-main .rs-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;align-items:stretch}
 .sm-mobile-hero-layout #responsive-main .rs-actions>.button{display:flex;align-items:center;justify-content:center;align-self:stretch;width:100%;max-width:100%;min-width:0;min-height:48px;height:auto;box-sizing:border-box;padding:10px 7px;gap:5px;font-size:clamp(13px,3.65vw,15px);line-height:1.3;text-align:center;white-space:normal}
}

/* Use the website-planning hero as the shared mobile type reference. */
@media(max-width:767px){
 .sm-mobile-hero-layout main :is(.hero-copy,.sd-hero-copy,.bs-hero-copy,.po-hero-copy,.pf-hero-copy,.ct-hero-copy,.sv-hero-copy,.about-intro-copy,.pt-hero-copy,.j-hero-copy,.rs-hero>div:first-child,.bl-intro>div:first-child) h1{font-weight:800;letter-spacing:-.4px}
 .sm-mobile-hero-layout #portals-main .po-hero-copy h1{font-size:clamp(26px,7.2vw,30px);line-height:1.2;font-weight:800;letter-spacing:-.4px;margin:0 0 18px}
 .sm-mobile-hero-layout #portals-main .po-hero-copy h1 span{font-size:inherit;line-height:inherit}
 .sm-mobile-hero-layout #portals-main .po-hero-copy .po-lead{font-size:18px;line-height:1.5;margin:0 0 24px}
 .sm-mobile-hero-layout #portals-main .po-hero-copy .po-eyebrow{display:table;position:relative;font-size:18px;line-height:1.3;font-weight:700;margin:0 auto 16px;padding-bottom:10px}
 .sm-mobile-hero-layout #portals-main .po-hero-copy .po-eyebrow:before{display:none}
 .sm-mobile-hero-layout #portals-main .po-hero-copy .po-eyebrow:after{content:'';position:absolute;bottom:0;right:50%;left:auto;transform:translateX(50%);width:100px;height:2px;background:#ff7500}
 .sm-mobile-hero-layout #responsive-main .rs-hero h1{letter-spacing:-.4px}
 .sm-mobile-hero-layout main :is(.hero-copy,.sd-hero-copy,.bs-hero-copy,.po-hero-copy,.pf-hero-copy,.ct-hero-copy,.sv-hero-copy,.about-intro-copy,.pt-hero-copy,.j-hero-copy,.rs-hero>div:first-child,.bl-intro>div:first-child)>p:not(.sd-eyebrow,.bs-eyebrow,.po-eyebrow,.about-eyebrow,.j-eyebrow,.rs-eyebrow,.pf-hero-note){font-size:18px;line-height:1.5}
 .sm-mobile-hero-layout main :is(.sd-eyebrow,.bs-eyebrow,.po-eyebrow,.about-eyebrow,.j-eyebrow,.rs-eyebrow){font-size:18px;line-height:1.3;font-weight:700}
 .sm-mobile-hero-layout #responsive-main .rs-hero .rs-lead{font-size:18px;line-height:1.5}
 .sm-mobile-hero-layout #responsive-main .rs-hero .rs-eyebrow{font-size:18px;line-height:1.3;font-weight:700}
}

/* Keep existing orange dividers centered with their centered mobile hero text. */
@media(max-width:767px){
 body.sm-mobile-hero-layout.post-template-page.post-shared-template .pt-intro h1:after{margin-inline:auto}
 body.sm-mobile-hero-layout.sd-seo .so-page .so-hero h1:after{right:50%;left:auto;transform:translateX(50%)}
 .sm-mobile-hero-layout main .bs-hero-copy .bs-eyebrow,.sm-mobile-hero-layout main .about-intro-copy .about-eyebrow{flex-direction:column-reverse;align-items:center;justify-content:center;gap:10px}
}

/* Remove side ornaments from mobile section headings so they cannot squeeze the title. */
@media(max-width:767px){
 .sm-mobile-hero-layout main .pf-work-heading h2:before,
 .sm-mobile-hero-layout main .pf-process h2:before,
 .sm-mobile-hero-layout main .bs-story h2:after,
 .sm-mobile-hero-layout main .service-content-design.service-content-design h2:after,
 .sm-mobile-hero-layout main.so-page h2:after,
 .sm-mobile-hero-layout main .hp-intro h2:after,
 .sm-mobile-hero-layout main .section-heading:before,
 .sm-mobile-hero-layout main .section-heading:after,
 .sm-mobile-hero-layout.post-template-page.post-shared-template main .pt-related>h2:after{content:none;display:none}
}

@media(max-width:767px){
 .sm-mobile-hero-layout main :is(.pt-breadcrumb,.about-breadcrumb,.bl-breadcrumb,.ct-breadcrumb,.sv-breadcrumb,.j-breadcrumb,.sd-breadcrumb,.bs-breadcrumb,.po-breadcrumb),
 .sm-mobile-hero-layout.post-template-page.post-shared-template main .pt-breadcrumb,
 .sm-mobile-hero-layout.post-template-page.post-shared-template main .pt-meta{justify-content:center;align-items:center;flex-wrap:wrap;text-align:center;width:100%;box-sizing:border-box;margin-inline:auto}
}