.service-hero { padding-top: 9rem; padding-bottom: 4rem; }
.service-hero .hero-content { margin-inline: auto; }
.service-hero h1 { font-size: clamp(2.8rem, 5.8vw, 5.8rem); }
.breadcrumbs { margin-bottom: 3rem; font-size: .82rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: .6rem; opacity: .6; }
.breadcrumbs a, .text-link { text-decoration: underline; text-underline-offset: .25em; }
.text-link { display: inline-block; padding-block: .4rem; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.content-block { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 1.5rem; }
.content-block h3, .steps h3 { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 550; line-height: 1.2; letter-spacing: -.02em; }
.content-block p, .content-block li, .steps p { color: rgba(255, 255, 255, .9); line-height: 1.75; text-wrap: pretty; }
.content-block p { margin: 0 0 1rem; }
.content-block ul { margin: 1rem 0; padding-left: 1.2rem; }
.content-block li + li { margin-top: .6rem; }
.section-intro { max-width: 52rem; margin: -1rem 0 2.5rem; color: rgba(255, 255, 255, .9); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.75; text-wrap: pretty; }
.offer-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.offer-card { display: flex; min-height: 25rem; flex-direction: column; overflow: hidden; padding: 1.2rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 1.5rem; background: rgba(13, 12, 28, .32); box-shadow: inset 0 1px rgba(255, 255, 255, .08); backdrop-filter: blur(16px); }
.offer-card--wide { grid-column: span 2; }
.offer-card-copy { position: relative; z-index: 1; }
.offer-card-label { margin: 0 0 .8rem; color: rgba(255, 255, 255, .64); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.offer-card h3 { max-width: 28rem; margin: 0 0 .8rem; font-size: clamp(1.45rem, 2.3vw, 2.1rem); font-weight: 550; line-height: 1.12; letter-spacing: -.025em; }
.offer-card-copy > p:last-child { max-width: 36rem; margin: 0; color: rgba(255, 255, 255, .84); line-height: 1.65; text-wrap: pretty; }
.offer-visual { display: grid; flex: 1; align-content: center; margin-top: 1.2rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 1rem; background: rgba(255, 255, 255, .07); }
.offer-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.offer-scope span, .offer-seo span, .offer-followup span { padding: .8rem; border-radius: .7rem; background: rgba(255, 255, 255, .09); font-size: .82rem; }
.offer-budget { align-content: end; }
.offer-budget strong { display: block; font-size: clamp(2.1rem, 4vw, 3.7rem); font-weight: 600; letter-spacing: -.05em; }
.offer-budget span { max-width: 13rem; margin-top: .5rem; color: rgba(255, 255, 255, .7); font-size: .8rem; line-height: 1.5; }
.offer-payment { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .6rem 1rem; }
.offer-payment strong { font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 600; letter-spacing: -.05em; }
.offer-payment span { color: rgba(255, 255, 255, .7); font-size: .8rem; }
.offer-seo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.offer-followup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 5rem); }
.faq-item { padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .3); }
.faq-item h3 { margin: 0 0 .8rem; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 550; line-height: 1.35; }
.faq-item p { margin: 0; color: rgba(255, 255, 255, .86); line-height: 1.75; text-wrap: pretty; }
.proof-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .7fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid rgba(255, 255, 255, .22); border-radius: 1.5rem; background: rgba(13, 12, 28, .32); box-shadow: inset 0 1px rgba(255, 255, 255, .08); backdrop-filter: blur(16px); }
.proof-card-copy h3 { max-width: 38rem; margin: 0 0 1rem; font-size: clamp(1.8rem, 3.5vw, 3.3rem); font-weight: 550; line-height: 1.08; letter-spacing: -.035em; }
.proof-card-copy > p:not(.offer-card-label) { max-width: 43rem; margin: 0 0 1.5rem; color: rgba(255, 255, 255, .86); line-height: 1.75; text-wrap: pretty; }
.proof-features { display: grid; align-content: center; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.proof-features li { padding: .9rem 1rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: .8rem; background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .88); font-size: .88rem; line-height: 1.4; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 1.5rem; }
.steps li::before { content: "0" counter(step); display: block; margin-bottom: 1rem; font-size: .78rem; letter-spacing: .14em; opacity: .75; }
.steps p { margin: 0; }
.service-contact { text-align: center; }
.service-contact h2 { font-size: clamp(2.6rem, 5.6vw, 5.5rem); }
.service-contact > p { max-width: 42rem; margin: 1.5rem auto; line-height: 1.75; text-wrap: pretty; }
.related-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; margin-top: 2rem; }
.guide-byline { margin-top: 1.5rem; font-size: .85rem; }
.guide-body { max-width: 48rem; }
.guide-body section { padding-block: 2.5rem; border-top: 1px solid rgba(255, 255, 255, .3); }
.guide-body h2 { margin-bottom: 1.5rem; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.guide-body p, .guide-body li { line-height: 1.8; text-wrap: pretty; }
.guide-body p { margin-bottom: 1.25rem; }
.guide-body ol { padding-left: 1.4rem; }
.guide-body li + li { margin-top: .8rem; }
.project-evidence { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 2rem; margin-block: 3rem; }
.project-evidence figure { margin: 0; }
.project-evidence img { max-width: 230px; }
.project-evidence figcaption { margin-top: .8rem; font-size: .8rem; }
.project-evidence h3 { font-size: 1.5rem; line-height: 1.3; }
@media (max-width: 620px) {
  .service-page .page-shell { width: 90vw; }
  .service-hero { padding-top: 7rem; padding-bottom: 2rem; }
  .service-hero h1 { font-size: clamp(2.4rem, 10vw, 3.8rem); }
  .breadcrumbs { margin-bottom: 2.5rem; }
  .content-grid, .steps, .project-evidence, .offer-bento, .proof-card, .faq-list { grid-template-columns: 1fr; }
  .offer-card--wide { grid-column: auto; }
  .offer-card { min-height: auto; }
  .offer-visual { min-height: 9rem; }
  .offer-seo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-evidence figure { max-width: 230px; margin-inline: auto; }
}
