/* Two new service pages. The approved support page and its cascade stay intact. */
.seo-service-page .service-breadcrumbs{padding-block:18px 4px;font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.seo-service-page .service-breadcrumbs a{text-decoration:underline;text-underline-offset:3px}
.seo-service-page #main .service-section .section-head{align-items:start;gap:32px;margin-bottom:32px}
.seo-service-page #main .service-section .section-head h2{max-width:750px}
.seo-service-page #main .service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.seo-service-page--sites #scope .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.seo-service-page #main .service-card{min-width:0;padding:26px;background:var(--soft);border-radius:20px;scroll-margin-top:32px}
.seo-service-page #main .section-soft .service-card{background:#fff}
.seo-service-page #main .service-card__number{display:inline-block;margin-bottom:30px;color:var(--color-text-subtle);font-size:13px;font-weight:600}
.seo-service-page #main .service-card h3{margin:0 0 12px}
.seo-service-page #main .service-card p{display:block;margin:0;color:var(--muted)}
.seo-service-page #main .service-card a,.seo-service-page #main .service-case a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* Reuse the support carousel; its original text rules target #articles. */
.seo-service-page--sites #guides.related-articles .related-article h3{margin:0 0 10px;font-size:clamp(20px,1.7vw,24px);font-weight:700;line-height:1.22;letter-spacing:-.035em}
.seo-service-page--sites #guides.related-articles .related-article p{display:-webkit-box;overflow:hidden;margin:0 0 24px;color:var(--muted);font-size:15px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.seo-service-page--sites #guides.related-articles .related-articles__intro{max-width:750px;margin:0 0 25px;color:var(--muted);font-size:15px;line-height:1.56}
.seo-service-page--sites #industries .industry-ribbon{box-shadow:none}
.seo-service-page #main .service-topic-links{margin-top:28px}
.seo-service-page #main .service-copy{max-width:900px}
.seo-service-page #main .service-copy p{margin:0 0 18px}
.seo-service-page #main .service-copy--visual{max-width:none}
.seo-service-page #main .service-handover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.seo-service-page #main .service-handover-card{min-width:0;padding:28px;border-radius:24px;background:#f4f2ed}
.seo-service-page #main .service-handover-card:nth-child(2){background:#ecebea}
.seo-service-page #main .service-handover-card:nth-child(3){background:#e9efeb}
.seo-service-page #main .service-handover-card__visual{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:320/168;margin:0 auto 36px;object-fit:contain}
.seo-service-page #main .service-handover-card h3{margin:0 0 16px;font-size:28px;line-height:1.15;letter-spacing:-.03em}
.seo-service-page #main .service-handover-card p{margin:0;color:var(--muted)}
.seo-service-page #main .service-next-links{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:28px}
.seo-service-page #main .service-next-links a{font-size:16px;font-weight:650;text-decoration:underline;text-underline-offset:5px}
.seo-service-page #main .service-case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.seo-service-page #main .service-case{min-width:0;overflow:hidden;border-radius:20px;background:var(--plate-neutral)}
.seo-service-page #main .service-case img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:top}
.seo-service-page #main .service-case__body{padding:24px}
.seo-service-page #main .service-case h3{margin:0 0 12px}
.seo-service-page #main .service-case p{margin:0;color:var(--muted)}
.seo-service-page--site_1c #main .service-case-grid{grid-template-columns:minmax(0,1fr)}
.seo-service-page--site_1c #main .service-case{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.seo-service-page--site_1c #main .service-case__body{padding:36px}
.seo-service-page #main .service-exchange-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0}
.seo-service-page #main .service-exchange-flow li{position:relative;min-width:0;padding:30px;border-radius:20px;background:var(--plate-neutral)}
.seo-service-page #main .service-exchange-flow li:first-child{background:var(--plate-sand,#e7e4dc)}
.seo-service-page #main .service-exchange-flow li:last-child{background:var(--plate-mint,#dfe7e0)}
.seo-service-page #main .service-exchange-flow li+li::before{content:'↔';position:absolute;left:-24px;top:35px;font-size:24px}
.seo-service-page #main .service-exchange-flow strong{font-size:28px;font-weight:700;line-height:1.15}
.seo-service-page #main .service-exchange-flow p{margin:16px 0 0;color:var(--muted)}
.seo-service-page #main .service-flow-note{margin:22px 0 0;max-width:850px;color:var(--muted)}
.seo-service-page #main .service-faq{max-width:960px}
.seo-service-page #main .service-faq details p{max-width:850px}
.seo-service-page #main :is(section[id],h2[id],h3[id],article[id]){scroll-margin-top:32px}
.seo-service-page .service-portfolio-intro{margin:24px 0 0;color:var(--muted)}
/* Service offers use the support component and its shared layout rules. */
/* Keep the approved labels and arrow apart on the narrowest phones. */
@media(max-width:374px){
 .seo-service-page--sites #main .support-offer--standard .support-offer-card .cta-card__bottom-row a.btn.btn--primary.btn--sm{padding-inline:5px;gap:4px}
}
@media(max-width:1023px){.seo-service-page--sites .rent-hero__content--title-only .rent-hero__title-line{padding-right:0}}
.seo-service-page--site_1c .rent-hero__price-badge{top:0}
@media(max-width:479px){.seo-service-page--site_1c .support-hero .rent-hero__content--title-only .rent-hero__price-badge{top:100%;transform:translateY(-10%)}}
.seo-service-page #main .service-reviews-nav{display:flex;justify-content:flex-end;margin-bottom:24px}
.seo-service-page #main .section--reviews .wrap{min-width:0}
.seo-service-page #main .section--reviews .reviews-track-wrap{max-width:100%;min-width:0}
@media(max-width:1023px){
 .seo-service-page #main .service-section .section-head{display:block}
 .seo-service-page #main .service-section .section-head p{max-width:700px;margin-top:20px}
 .seo-service-page #main .service-grid,.seo-service-page #main .service-case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .seo-service-page--site_1c #main .service-case-grid{grid-template-columns:1fr}
 .seo-service-page #main .service-card{padding:22px}
 .seo-service-page #main .service-handover-grid{grid-template-columns:1fr}
 .seo-service-page #main .service-handover-card{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);column-gap:32px;align-items:start}
 .seo-service-page #main .service-handover-card__visual{grid-row:1/3;margin:0 auto}
}
@media(max-width:600px){
 .seo-service-page .service-breadcrumbs{padding-top:12px;font-size:11px}
 .seo-service-page #main .service-grid,.seo-service-page #main .service-case-grid{grid-template-columns:1fr}
 .seo-service-page--sites #scope .service-grid{grid-template-columns:1fr}
 .seo-service-page #main .service-card{padding:22px}
 .seo-service-page #main .service-card__number{margin-bottom:20px}
 .seo-service-page #main .service-handover-card{display:block;padding:24px}
 .seo-service-page #main .service-handover-card__visual{max-width:300px;margin:0 auto 32px}
 .seo-service-page #main .service-handover-card h3{font-size:26px}
 .seo-service-page #main .service-case{display:block}
 .seo-service-page #main .service-case__body{padding:24px}
 .seo-service-page #main .service-exchange-flow{grid-template-columns:1fr;gap:28px}
 .seo-service-page #main .service-exchange-flow li+li::before{content:'↕';left:calc(50% - 9px);top:-30px}
 .seo-service-page #main .service-section .section-head{margin-bottom:24px}
 .seo-service-page #main .service-next-links{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.seo-service-page{scroll-behavior:auto}}

/* Miniature interfaces echo the illustrated service cards on support. */
.seo-service-page--sites #main :is(#scope,#development) .section-head{margin-bottom:64px}
.seo-service-page--sites :is(#scope,#development) .service-grid{row-gap:58px}
.seo-service-page--sites :is(#scope,#development) .service-card--illustrated{position:relative;isolation:isolate;overflow:visible;--teaser-space-shift:calc(40px * 176 / 240);--teaser-heading-space:30px;padding-top:calc(116px - var(--teaser-space-shift) + var(--teaser-heading-space));padding-bottom:calc(26px + var(--teaser-space-shift) - var(--teaser-heading-space))}
.seo-service-page--sites :is(#scope,#development) .service-card__teaser{position:absolute;top:-34px;left:18px;z-index:1;width:150px;max-width:70%;aspect-ratio:240/176;pointer-events:none}
.seo-service-page--sites :is(#scope,#development) .service-card__teaser img{display:block;width:100%;height:100%;object-fit:contain}
.seo-service-page--sites :is(#scope,#development) .service-card__number{position:absolute;top:24px;right:26px;margin:0}
/* Balance the heading gap and bottom padding to preserve card height. */
@media(max-width:1023px){
 .seo-service-page--sites :is(#scope,#development) .service-card--illustrated{padding-bottom:calc(22px + var(--teaser-space-shift) - var(--teaser-heading-space))}
}
@media(max-width:600px){
 .seo-service-page--sites #main :is(#scope,#development) .section-head{margin-bottom:60px}
 .seo-service-page--sites :is(#scope,#development) .service-grid{row-gap:54px}
 .seo-service-page--sites :is(#scope,#development) .service-card--illustrated{padding-top:calc(106px - var(--teaser-space-shift) + var(--teaser-heading-space))}
 .seo-service-page--sites :is(#scope,#development) .service-card__teaser{top:-28px;left:18px;width:130px}
 .seo-service-page--sites :is(#scope,#development) .service-card__number{top:22px;right:22px}
}