/* REQ-UX-0001-98c69 / NFR-0001-7cae9: Normal scrolling and one consistent reading column per offer. */
@media screen {
  html { scroll-snap-type: none; }
}
.services-intro { padding-block: .75rem .5rem; }
.services-intro-copy { padding-bottom: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.services-intro-copy p { max-width: none; line-height: 1.5; }
.services-intro-copy .services-audience { font-size: .875rem; margin-top: 0; color: var(--dusk); }
.services-intro h1 { max-width: none; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.15; text-wrap: initial; }
.service-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding-bottom: .75rem; }
.service-card { display: flex; flex-direction: column; border: 1px solid var(--line); padding: .75rem 1.25rem; scroll-margin-top: 1rem; position: relative; }
.service-card h2 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.25; text-wrap: initial; margin-bottom: .25rem; }
.service-card h2 a { text-decoration: none; }
.service-card h2 a:hover { text-decoration: underline; }
.service-card .eyebrow { margin-bottom: .25rem; }
.service-card > p:not(.eyebrow) { line-height: 1.5; }
.service-card h2 a::after { content: ""; position: absolute; inset: 0; }
.service-card:hover, .service-card:focus-within { border-color: var(--accent-dark); }
.service-pricing-note { padding-bottom: .5rem; }
.service-pricing-note p { margin: 0; }
.service-card .card-price { margin-top: auto; padding-top: .5rem; color: var(--accent-dark); font-weight: 600; }
/* One complete overview: the next action belongs with the cards, not a second hero. */
.services-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; padding-block: .5rem 1rem; }
.services-actions .button { margin: 0; }
.services-actions .text-link { margin: 0; }
.nav-link[aria-current="page"] { text-decoration: underline; text-underline-offset: .4em; }
.service-page { max-width: 56rem; min-height: calc(100svh - var(--header-height)); padding-block: 1rem 1.5rem; }
.service-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: .5rem; }
.service-summary .eyebrow { margin-bottom: .5rem; }
.service-summary h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; text-wrap: initial; }
.service-summary .section-lead { max-width: none; margin-block: .75rem; font-size: 1rem; line-height: 1.5; }
.service-price-summary { color: var(--accent-dark); font-weight: 600; }
.service-summary .service-currency { margin-top: .25rem; font-size: .85rem; }
.service-body > .button { margin-block: .75rem 1rem; }
.service-detail { border-bottom: 1px solid var(--line); }
.service-detail:first-of-type { border-top: 1px solid var(--line); }
.service-detail summary { min-height: 44px; padding: .65rem 0; font-size: 1rem; letter-spacing: normal; }
.service-detail-content { padding: .25rem 0 1.25rem; max-width: 70ch; }
.service-detail-content :where(p,ul) { margin-block: 0 1rem; }
.service-detail-content > :last-child { margin-bottom: 0; }
.service-detail-content ul { padding-left: 1.25rem; }
.service-detail-content li + li { margin-top: .5rem; }
.service-page :where(summary,h1,h2) { break-after: avoid; }
.service-page :where(h1,h2,p,li,a), .service-card :where(h2,p,a), .services-intro :where(h1,p), .services-actions a { overflow-wrap: anywhere; }
@media screen and (max-width: 720px) {
  .service-cards { grid-template-columns: 1fr; }
  .services-intro-copy { grid-template-columns: 1fr; gap: .5rem; }
}
@media print {
  .service-cards { display: block; }
  .service-card { margin-bottom: 1rem; break-inside: avoid; }
  .service-page { max-width: none; }
  .service-back { display: none; }
  .service-page h1, .service-page h2 { break-after: avoid; }
}

/* Keep the overview and its next actions in one desktop viewport when they fit.
   A minimum height permits natural growth at zoom and on shorter screens. */
@media screen and (min-width: 1001px) {
  .services-overview { min-height: calc(100svh - var(--header-height)); display: flex; flex-direction: column; }
  .services-overview > * { flex-shrink: 0; }
  .services-actions { margin-top: 0; }
}

/* About uses the shared standalone-page shell and existing founder treatment. */
.about-page { max-width: 64rem; min-height: calc(100svh - var(--header-height)); display: grid; align-content: center; padding-block: 2rem; }
.about-page .founder { grid-template-columns: 13rem minmax(0, 1fr); padding: 0; gap: 3rem; }
.about-page h1 { font-size: clamp(2rem, 3.5vw, 3.2rem); margin-bottom: 1rem; }
.about-page p { overflow-wrap: anywhere; }
@media screen and (max-width: 720px) {
  .about-page .founder { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media print {
  .service-page { min-height: 0; }
  .service-detail::details-content { display: block; content-visibility: visible; }
  .service-detail summary .icon { display: none; }
}

/* REQ-UX-0001-98c69: Spend spare viewport height on readable spacing, not an empty footer gap. */
@media screen and (min-width: 1001px) {
  .services-overview {
    --services-space: clamp(0px, calc(6svh - 39px), 24px);
    --services-half-space: clamp(0px, calc(3svh - 19.5px), 12px);
  }
  .services-intro { padding-top: calc(.75rem + var(--services-space)); padding-bottom: calc(.5rem + var(--services-half-space)); }
  .services-intro-copy { padding-bottom: calc(1rem + var(--services-space)); gap: calc(.75rem + var(--services-half-space)); }
  .service-cards { gap: calc(.75rem + var(--services-half-space)); padding-bottom: calc(.75rem + var(--services-half-space)); }
  .service-card { padding: calc(.75rem + var(--services-space)) calc(1.25rem + var(--services-half-space)); }
  .service-card .eyebrow, .service-card h2 { margin-bottom: calc(.25rem + var(--services-half-space)); }
  .service-card .card-price { padding-top: calc(.5rem + var(--services-half-space)); }
  .services-actions { padding-top: calc(.5rem + var(--services-half-space)); }
}
@media screen and (max-width: 1000px) {
  .services-intro { padding-top: 1.5rem; padding-bottom: 1rem; }
  .services-intro-copy { padding-bottom: 1.5rem; }
  .service-cards { gap: 1rem; padding-bottom: 1rem; }
  .service-card { padding: 1.25rem; }
  .service-card .eyebrow, .service-card h2 { margin-bottom: .5rem; }
  .service-card .card-price { padding-top: 1rem; }
  .services-actions { padding-block: 1rem 1.5rem; }
}
@media screen and (min-width: 721px) and (max-width: 1000px) {
  .services-intro-copy { gap: 1rem; }
}