/* Shared page styles for generated service pages */
  .who-grid, .deliv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-4);
  }
  /* Shared "reactive card" base — cursor-tracking spotlight + lift on hover.
     The spotlight is driven by --mx / --my CSS vars set in JS (site.js
     spotlight initializer). Gracefully degrades to a static glow if JS is off. */
  .who-card, .deliv-card, .process-step, .tier-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
      transform var(--d-1) var(--ease),
      border-color var(--d-1) var(--ease),
      box-shadow var(--d-2) var(--ease);
  }
  .who-card::before, .deliv-card::before, .process-step::before,
  .tier-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
                rgba(20, 197, 197, 0.14), transparent 45%);
    opacity: 0;
    transition: opacity var(--d-2) var(--ease);
    pointer-events: none;
    z-index: -1;
  }
  .who-card:hover::before, .deliv-card:hover::before,
  .process-step:hover::before, .tier-card:hover::before { opacity: 1; }
  .who-card:hover, .deliv-card:hover, .process-step:hover {
    transform: translateY(-4px);
    border-color: var(--teal);
    box-shadow: 0 18px 40px -22px rgba(13, 169, 169, 0.55);
  }
  .tier-card:hover {
    transform: translateY(-4px);
    border-color: var(--teal);
    box-shadow: 0 22px 48px -22px rgba(13, 169, 169, 0.55);
  }

  /* Animated gradient hairline along the top edge — reveals on hover */
  .who-card::after, .deliv-card::after, .process-step::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--teal-glow) 20%,
      var(--teal) 50%,
      var(--teal-glow) 80%,
      transparent 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--d-2) var(--ease);
    pointer-events: none;
  }
  .who-card:hover::after, .deliv-card:hover::after,
  .process-step:hover::after { transform: scaleX(1); }

  .who-card, .deliv-card {
    padding: var(--s-5);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
  }
  .who-card h4, .deliv-card h4 {
    font-size: var(--t-md);
    color: var(--ink);
    margin-bottom: var(--s-2);
  }
  .who-card p, .deliv-card p { font-size: var(--t-sm); color: var(--type-muted); line-height: 1.6; }

  .process-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-5);
    counter-reset: step;
  }
  .process-step {
    padding: var(--s-5);
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
  }
  /* Move the numbered ::before off the shared overlay slot — use a real
     element so it can coexist with the spotlight overlay above. */
  .process-step > h4::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--display);
    font-size: var(--t-2xl);
    color: var(--teal);
    line-height: 1;
    margin-bottom: var(--s-3);
    transition: color var(--d-1) var(--ease),
                text-shadow var(--d-1) var(--ease),
                transform var(--d-1) var(--ease);
    transform-origin: left center;
  }
  .process-step:hover > h4::before {
    color: var(--teal-glow);
    text-shadow: 0 0 24px rgba(20, 197, 197, 0.5);
    transform: scale(1.1);
  }
  .process-step h4 { font-size: var(--t-md); margin-bottom: var(--s-2); }
  .process-step p { font-size: var(--t-sm); color: var(--type-muted); line-height: 1.55; }

  /* Staggered reveal — each sibling enters slightly after the previous so
     grids cascade in rather than all appearing at once. */
  .who-grid .reveal:nth-child(2),
  .deliv-grid .reveal:nth-child(2),
  .process-row .reveal:nth-child(2),
  .tier-row .reveal:nth-child(2) { transition-delay: 80ms; }
  .who-grid .reveal:nth-child(3),
  .deliv-grid .reveal:nth-child(3),
  .process-row .reveal:nth-child(3),
  .tier-row .reveal:nth-child(3) { transition-delay: 160ms; }
  .deliv-grid .reveal:nth-child(4),
  .process-row .reveal:nth-child(4) { transition-delay: 240ms; }
  .deliv-grid .reveal:nth-child(5) { transition-delay: 320ms; }
  .deliv-grid .reveal:nth-child(6) { transition-delay: 400ms; }
  @media (prefers-reduced-motion: reduce) {
    .who-grid .reveal, .deliv-grid .reveal,
    .process-row .reveal, .tier-row .reveal { transition-delay: 0ms !important; }
  }
  details.faq {
    border-bottom: 1px solid var(--line);
    padding: var(--s-4) 0;
  }
  details.faq summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--display);
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  details.faq summary::after {
    content: "+";
    font-size: var(--t-xl);
    color: var(--teal-deep);
    transition: transform var(--d-1) var(--ease);
  }
  details.faq[open] summary::after { transform: rotate(45deg); }
  details.faq p { color: var(--type-muted); margin-top: var(--s-3); line-height: 1.6; }
  .fit-callout {
    background: var(--bg);
    border-left: 4px solid var(--teal);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-6);
    margin: 0 auto;
    max-width: 720px;
  }
  .fit-callout h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); color: var(--teal-deep); }
  .fit-callout p { color: var(--type); }

  /* Quote CTA — used on services without fixed tier pricing.
     A two-column block: explainer copy on the left, big CTA button on the right.
     Stacks on narrow viewports. */
  .quote-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-6) var(--s-7);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    max-width: 880px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  /* Soft teal glow at the top — same energy as the hero radials, scaled down. */
  .quote-cta::before {
    content: "";
    position: absolute;
    inset: -1px;
    background:
      radial-gradient(ellipse 60% 80% at 0% 0%, rgba(20, 197, 197, 0.10), transparent 60%),
      radial-gradient(ellipse 60% 80% at 100% 100%, rgba(13, 169, 169, 0.08), transparent 60%);
    pointer-events: none;
    z-index: -1;
  }
  .quote-cta__copy .kicker {
    font-family: var(--body);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: var(--s-3);
  }
  .quote-cta__copy h3 {
    font-size: var(--t-2xl);
    margin-bottom: var(--s-3);
    color: var(--ink);
  }
  .quote-cta__copy p {
    color: var(--type-muted);
    font-size: var(--t-md);
    line-height: 1.55;
    max-width: 56ch;
  }
  .quote-cta__btn {
    font-size: var(--t-md);
    padding: var(--s-3) var(--s-6);
    white-space: nowrap;
  }
  @media (max-width: 720px) {
    .quote-cta {
      grid-template-columns: 1fr;
      text-align: left;
      padding: var(--s-5);
    }
    .quote-cta__btn { justify-self: start; }
  }
  .prose {
    max-width: 720px;
    margin: 0 auto;
    font-size: var(--t-md);
    line-height: 1.75;
    color: var(--type);
  }
  .prose p, .prose ul, .prose ol { margin-bottom: var(--s-5); }
  .prose ul, .prose ol { padding-left: var(--s-5); }
  .prose li { margin-bottom: var(--s-2); list-style: disc; }
  .prose h2 { margin: var(--s-7) 0 var(--s-4); font-size: var(--t-2xl); }
  .prose h3 { margin: var(--s-6) 0 var(--s-3); font-size: var(--t-xl); }
  .prose strong { color: var(--ink); }
  .prose a { color: var(--teal-deep); border-bottom: 1px solid currentColor; }
  .article-meta {
    color: var(--type-muted);
    font-size: var(--t-sm);
    margin-bottom: var(--s-5);
    text-align: center;
  }
  .article-card {
    display: block;
    padding: var(--s-6);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--type);
    transition: border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
  }
  .article-card:hover { border-color: var(--teal); transform: translateY(-2px); }
  .article-card__date {
    font-family: var(--body);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin-bottom: var(--s-2);
  }
  .article-card h3 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
  .article-card p { font-size: var(--t-sm); color: var(--type-muted); line-height: 1.55; }