/* Services page polish. Scoped to this page; shared navigation stays unchanged. */
.services-page .page-hero { padding-top: clamp(40px, 7vw, 80px); padding-bottom: 24px; }
.services-page .page-hero .panel { max-width: none; }
.services-page .page-hero h1 { max-width: 19ch; }
.services-page .page-hero .lede { max-width: 46ch; margin-bottom: 0; }
.services-page .section-tight { padding: clamp(28px, 4vw, 48px) 0; }
.services-page main section[id] { scroll-margin-top: 88px; }
.services-page .panel { background-color: rgba(15, 18, 22, .94); }
/* Keep the build fee distinction visible before visitors reach monthly prices. */
.services-page .service-fee-note { max-width: 64ch; margin: 18px 0 0; color: var(--ink-soft); font-size: .95rem; }
.services-page .existing-site-note { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--ink); font-size: .95rem; }
.services-page .steps li::before { font-family: var(--sans); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.services-page .service-actions { margin-top: 24px; }
.services-page .service-jumps { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.services-page .service-jumps a { display: inline-flex; align-items: center; min-height: 44px; color: var(--champagne-hi); font-size: .9rem; text-decoration: none; }
.services-page .service-jumps a:hover { text-decoration: underline; }
.services-page .section-summary { max-width: 63ch; }
.services-page .build-pricing { margin-top: 26px; }
.services-page .build-pricing h3,
.services-page .build-includes h3,
.services-page .care-notes h3 { font: 600 .82rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--champagne); }
.services-page .build-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; list-style: none; padding: 0; margin: 16px 0; }
.services-page .build-prices > li { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #11151a; }
.services-page .build-price, .services-page .build-card-heading { display: grid; align-items: center; gap: 0 10px; }
.services-page .build-price { grid-template-columns: max-content minmax(0, 1fr); }
.services-page .build-price > span { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-soft); }
.services-page .build-prices strong { display: block; font: 500 clamp(1.55rem, 3.4vw, 2.7rem)/1.1 var(--sans); color: var(--champagne-hi); }
.services-page .build-prices .flip-card-toggle { justify-self: start; width: auto; min-width: 44px; min-height: 44px; padding: 0 2px; gap: 5px; border: 0; border-radius: 3px; background: transparent; color: var(--champagne); font-size: .78rem; line-height: 1.3; text-align: left; }
.services-page .build-prices .flip-card-toggle > span:not([aria-hidden]) { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .18em; }
.services-page .build-prices .flip-card-toggle:hover { background: transparent; color: var(--champagne-hi); }
.services-page .build-prices [data-flip-heading], .services-page .build-prices .flip-card-toggle, .services-page .build-foundation { scroll-margin-top: 96px; }
.services-page .build-prices > :not(.flip-card-ready) .build-card-back { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.services-page .build-card-heading { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 6px; }
.services-page .build-card-back h4 { margin: 0; color: var(--champagne-hi); font: 500 1.25rem/1.25 var(--display); }
.services-page .build-card-list { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: .88rem; line-height: 1.55; }
.services-page .build-card-list li + li { margin-top: 6px; }
.services-page .build-foundation { margin-top: 14px; border-top: 1px solid var(--line); }
.services-page .build-foundation summary { min-height: 44px; padding: 12px 0; color: var(--champagne-hi); cursor: pointer; }
.services-page .pricing-note { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
.services-page .build-includes { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.services-page .build-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; margin: 16px 0 0; }
.services-page .print-note { margin-top: 16px; }
.services-page .care-intro { margin-bottom: 20px; }
.services-page .care-intro p:last-child { max-width: 68ch; margin-bottom: 0; }
.services-page .care-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.services-page .care-grid .price-card { padding: clamp(22px, 2.6vw, 30px); }
/* Care borders progress from the existing Essential edge to a brighter Complete edge. */
.services-page .care-grid .care-enhanced { border-color: rgba(220, 196, 151, .48); }
.services-page .care-grid .care-complete { border-color: rgba(227, 177, 95, .88); box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(230, 238, 246, .05), 0 0 0 1px rgba(227, 177, 95, .14); }
.services-page .care-grid .tier { margin-bottom: 8px; line-height: 1.3; }
.services-page .care-grid .price { margin-top: 8px; font-family: var(--sans); font-weight: 500; font-size: clamp(2.2rem, 4.2vw, 2.8rem); }
.services-page .care-grid .price small { color: var(--ink-soft); }
.services-page .care-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--champagne-hi); }
.services-page .care-time strong { font: 500 2.2rem/1 var(--sans); }
.services-page .care-time span { color: var(--ink-soft); font-size: .9rem; }
.services-page .care-extra { margin: 18px 0 0; font-size: .9rem; color: var(--ink-soft); }
.services-page .care-notes { margin-top: 22px; background: #11151a; }
.services-page .care-notes ul { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.services-page .care-notes li { font-size: .95rem; line-height: 1.7; color: var(--ink-soft); }
.services-page .care-notes strong { color: var(--ink); font-weight: 600; }
/* Card flips are enabled only when the controls are ready. */
.services-page .flip-card-ready { perspective: 1500px; }
.services-page .flip-card-ready .flip-card-rotor { position: relative; display: grid; height: 100%; transform-style: preserve-3d; transition: transform .45s var(--ease); }
.services-page .flip-card-ready[data-flipped="true"] .flip-card-rotor { transform: rotateY(180deg); }
.services-page .flip-card-front, .services-page .flip-card-back { min-width: 0; }
.services-page .flip-card-ready .flip-card-front,
.services-page .flip-card-ready .flip-card-back { grid-area: 1 / 1; display: flex; flex-direction: column; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.services-page .flip-card-ready [data-flip-on-tap] { cursor: pointer; }
.services-page .flip-card-ready .flip-card-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.services-page .flip-card-ready[data-flipped="true"] .flip-card-front { position: absolute; inset: 0; }
.services-page .flip-card-ready[data-flipped="true"] .flip-card-back { position: relative; inset: auto; }
.services-page .flip-card-ready [aria-hidden="true"] { pointer-events: none; }
.services-page .care-time-explainer { margin: 16px 0 18px; font-size: .87rem; line-height: 1.6; color: var(--ink-soft); }
.services-page .care-card-includes { margin: 0; }
.services-page .care-card-includes li { font-size: .9rem; line-height: 1.55; margin-bottom: 10px; }
.services-page .flip-card-actions { margin-top: auto; padding-top: 22px; }
.services-page .flip-card-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(220, 196, 151, .06); color: var(--champagne-hi); font: 600 .88rem/1.4 var(--sans); cursor: pointer; }
.services-page .flip-card-toggle[hidden] { display: none; }
.services-page .flip-card-toggle:hover { background: rgba(220, 196, 151, .12); border-color: var(--champagne); }
.services-page .flip-card-toggle:focus-visible, .services-page .care-terms-link:focus-visible, .services-page .care-detail-row summary:focus-visible, .services-page .build-foundation summary:focus-visible { outline: 2px solid var(--champagne-hi); outline-offset: 4px; }
.services-page .care-back-eyebrow { margin: 0 0 10px; color: var(--champagne); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.services-page .care-back-title { font-size: 1.5rem; margin: 0 0 16px; }
.services-page .care-back-summary { font-size: .95rem; line-height: 1.65; color: var(--ink-soft); }
.services-page .care-back-summary strong { color: var(--ink); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.services-page .care-back-list { padding-left: 18px; margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.6; }
.services-page .care-back-list li + li { margin-top: 10px; }
.services-page .care-terms-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; font-size: .88rem; line-height: 1.5; }
/* A legible progression: muted gold, warmer gold, then a light metallic highlight. */
.services-page .care-essential .care-time strong { color: #bca98b; }
.services-page .care-enhanced .care-time strong { color: #e4c77f; }
.services-page .care-complete .care-time strong { color: #ffe9ac; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .services-page .care-complete .care-time strong { background: linear-gradient(180deg, #fff5d5 0%, #ffe5a0 44%, #ddb36b 70%, #ffecb8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.services-page #care-details { scroll-margin-top: 88px; }
.services-page .care-notes-intro { margin: 10px 0 18px; color: var(--ink-soft); font-size: .9rem; }
.services-page .care-detail-row { border-top: 1px solid var(--line); }
.services-page .care-detail-row > summary, .services-page .care-detail-static { display: grid; grid-template-columns: 140px minmax(0, 1fr) 18px; align-items: start; gap: 18px; min-height: 64px; padding: 20px 0; }
.services-page .care-detail-row > summary { cursor: pointer; list-style: none; }
.services-page .care-detail-row summary::-webkit-details-marker { display: none; }
.services-page .care-detail-label { color: var(--ink); font-size: .95rem; font-weight: 600; line-height: 1.6; }
.services-page .care-detail-summary { color: var(--ink-soft); font-size: .92rem; line-height: 1.65; font-variant-numeric: lining-nums tabular-nums; }
.services-page .care-detail-icon { position: relative; width: 16px; height: 16px; margin-top: 4px; }
.services-page .care-detail-icon::before, .services-page .care-detail-icon::after { content: ""; position: absolute; background: var(--champagne); border-radius: 1px; }
.services-page .care-detail-icon::before { left: 1px; right: 1px; top: 7px; height: 2px; }
.services-page .care-detail-icon::after { top: 1px; bottom: 1px; left: 7px; width: 2px; }
.services-page .care-detail-row[open] .care-detail-icon::after, .services-page .care-detail-static .care-detail-icon::after { display: none; }
.services-page .care-detail-static .care-detail-icon::before { background: var(--ink-soft); }
.services-page .care-detail-body { padding: 0 36px 20px 158px; }
.services-page .care-detail-body p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
@media (max-width: 760px) {
  .services-page .care-detail-row > summary, .services-page .care-detail-static { grid-template-columns: minmax(0, 1fr) 18px; gap: 5px 14px; padding: 18px 0; }
  .services-page .care-detail-label { grid-column: 1; }
  .services-page .care-detail-summary { grid-column: 1; }
  .services-page .care-detail-icon { grid-column: 2; grid-row: 1; }
  .services-page .care-detail-body { padding: 0 28px 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .services-page .flip-card-ready .flip-card-rotor { transition: none; }
}
@media (forced-colors: active) {
  .services-page .care-grid .care-time strong { background: none; color: CanvasText; }
  .services-page .flip-card-toggle { border-color: ButtonText; }
  .services-page .care-detail-icon::before, .services-page .care-detail-icon::after { background: CanvasText; }
}

/* Use lining figures for consistent digit height and tabular widths for prices. */
.services-page .build-prices strong,
.services-page .care-grid .price,
.services-page .care-time strong { font-variant-numeric: lining-nums tabular-nums; }

@media (max-width: 980px) {
  .services-page .care-grid { grid-template-columns: 1fr; }
  .services-page .care-grid .price-card { display: block; }
  .services-page .care-card-metrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .services-page .care-grid .tier { grid-column: 1 / -1; }
  .services-page .care-grid .price { display: block; margin: 8px 0 0; }
  .services-page .care-grid .price small { display: block; margin-top: 8px; font-size: .82rem; line-height: 1.4; }
  .services-page .care-time { display: block; margin: 8px 0 0; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 16px; }
  .services-page .care-time span { display: block; margin-top: 8px; font-size: .82rem; line-height: 1.4; }
  .services-page .care-extra { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .services-page .page-hero h1 { max-width: none; }
  .services-page .build-features { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .services-page .build-prices { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 520px) {
  .services-page .service-jumps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
  .services-page .service-actions .btn { padding-left: 18px; padding-right: 18px; font-size: .76rem; letter-spacing: .1em; max-width: 100%; text-align: center; line-height: 1.4; }
}
@media print {
  .services-page .panel, .services-page .build-prices > li { background: #fff; }
  .services-page .flip-card-ready .flip-card-rotor { display: block; transform: none !important; }
  .services-page .flip-card-ready .flip-card-front, .services-page .flip-card-ready .flip-card-back { position: static !important; transform: none !important; }
  .services-page .care-grid .flip-card-back, .services-page .flip-card-actions, .services-page .build-prices .flip-card-toggle { display: none !important; }
  .services-page .care-grid .care-time strong { background: none; color: #000; }
  .services-page .care-time, .services-page .care-time span, .services-page .care-notes li, .services-page .care-notes strong, .services-page .build-prices strong, .services-page .build-price > span, .services-page .build-card-back h4, .services-page .build-card-list, .services-page .pricing-note { color: #000; }
}