/* JAS Cleaning service-detail page styles — ported verbatim from the shared <style> block in
   src/website/services/*.html (all 5 service pages ship a byte-identical block). Linked from the
   Next /services/[serviceSlug] route via PageStyles (precedence jas-4-page) so each service page
   renders pixel-for-pixel like its finalized static page. */
  .svc-page-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; padding: 56px 56px 48px; align-items: center; }
  .svc-page-hero h1 { font-family: var(--display); font-size: 88px; line-height: 0.95; letter-spacing: -0.02em; font-weight: 400; }
  .svc-page-hero h1 em { color: var(--leaf); font-style: italic; }
  .svc-page-hero .lead { font-size: 18px; color: var(--ink-2); line-height: 1.5; max-width: 560px; margin-top: 18px; }
  .svc-page-hero .price-card { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: 36px; }
  .svc-page-hero .price-card .from { font-family: var(--mono); font-size: 11px; color: var(--leaf-soft); letter-spacing: 0.16em; text-transform: uppercase; }
  .svc-page-hero .price-card .big { font-family: var(--display); font-size: 88px; line-height: 0.9; letter-spacing: -0.04em; margin-top: 8px; }
  .svc-page-hero .price-card .big em { color: var(--leaf-soft); font-style: italic; font-size: 56px; vertical-align: top; line-height: 1.5; }
  .svc-page-hero .price-card ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: rgba(244,239,230,0.78); }
  .svc-page-hero .price-card ul li { display: flex; gap: 10px; }
  .svc-page-hero .price-card ul li::before { content: "✓"; color: var(--leaf-soft); font-weight: 700; }
  .svc-page-hero .price-card .ctas { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
  .svc-page-hero .price-card .ghost-on-dark { background: transparent; color: var(--paper); border-color: rgba(244,239,230,0.3); }

  .svc-content { padding: 48px 56px; max-width: 1100px; margin: 0 auto; }
  .svc-content .eb { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; }
  .svc-content h2 { font-family: var(--display); font-size: 44px; line-height: 1; letter-spacing: -0.02em; margin: 8px 0 22px; font-weight: 400; }
  .svc-content h2 em { color: var(--leaf); font-style: italic; }
  .svc-content p { font-size: 16px; color: var(--ink-2); line-height: 1.65; margin-bottom: 14px; max-width: 760px; }

  .checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; margin-top: 24px; }
  .checklist-grid span { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-2); }
  .checklist-grid span::before { content: "✓"; color: var(--leaf); font-weight: 700; flex-shrink: 0; }

  .when-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
  .when-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
  .when-card .ic { font-family: var(--display); font-size: 28px; color: var(--leaf); }
  .when-card h4 { font-family: var(--display); font-size: 20px; margin-top: 8px; letter-spacing: -0.01em; }
  .when-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-top: 8px; }

  .price-table { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 24px; }
  .price-table .row { display: grid; grid-template-columns: 1fr 120px 160px; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); align-items: center; }
  .price-table .row:last-child { border-bottom: 0; }
  .price-table .row.head { background: var(--surface-2); font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; }
  .price-table .row .price { font-family: var(--mono); color: var(--ink); font-weight: 600; }
  .price-table .row .size { font-weight: 500; }
  /* Optional-extras line (Pricing section): the $ amounts mirror the booking wizard's
     ADDONS catalog and are pinned to it by scripts/pricing-seed-parity.mjs via
     [data-addon-price]. */
  .svc-extras [data-addon-price] { font-family: var(--mono); font-weight: 600; color: var(--ink); }

  .area-strip { padding: 32px 56px; background: var(--paper); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .area-strip h3 { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.16em; text-transform: uppercase; }
  .area-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
  .area-strip-link { padding: 14px 18px; background: var(--bone); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); display: flex; justify-content: space-between; align-items: center; font-size: 14px; transition: border-color var(--t-fast) ease; }
  .area-strip-link:hover { border-color: var(--leaf); color: var(--leaf); }

  .svc-cta { padding: 48px 56px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
  .svc-cta h2 { font-family: var(--display); font-size: 40px; line-height: 1.05; color: var(--paper); font-weight: 400; letter-spacing: -0.02em; }
  .svc-cta h2 em { color: var(--leaf-soft); font-style: italic; }
  .svc-cta .ghost-on-dark { background: transparent; color: var(--paper); border-color: rgba(244,239,230,0.3); }

  @media (max-width: 900px) {
    .svc-page-hero { grid-template-columns: 1fr; padding: 32px 24px; }
    .svc-page-hero h1 { font-size: 52px; }
    .svc-page-hero .price-card { padding: 28px; }
    .svc-page-hero .price-card .big { font-size: 64px; }
    .svc-content { padding: 32px 24px; }
    .checklist-grid { grid-template-columns: 1fr; }
    .when-grid { grid-template-columns: 1fr; }
    .price-table .row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
    .area-strip { padding: 24px; }
    .area-strip-grid { grid-template-columns: 1fr 1fr; }
    .svc-cta { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
  }