/* ============================================================
   Davis Digital Studio — services.css
   SOLUTIONS-PAGE-ONLY layer, scoped under body[data-page="services"].
   Loaded after styles.css.

   Full visual redesign pass. Copy, pricing, and message are
   unchanged from the approved version — only composition changed.

   - Hero rebuilt as an asymmetric two-column layout (matching the
     sitewide .hero-grid pattern) with a new decorative diagram
     panel previewing the page's own three-step logic. The diagram
     reuses the exact labels that already appear later in the page
     verbatim — no new content invented.
   - The three problems moved from a uniform vertical spine list
     into an asymmetric panel system: a full-width lead panel plus
     a paired 2-up row beneath it, each panel elevated with a large
     ghost-numeral watermark instead of a small badge.
   - A single, restrained radial lavender wash sits behind the
     panel section for atmosphere — one wash, not a gradient on
     every element.
   ============================================================ */

/* ---------------------------------------------------------------
   HERO — asymmetric two-column, matching the sitewide hero-grid
   pattern. Right side is a decorative diagram previewing the
   page's own three-step logic (same labels used verbatim later in
   the page, not new content) so the hero carries real visual
   weight instead of sitting as a plain text block.
   --------------------------------------------------------------- */
body[data-page="services"] .sol-hero-grid{ align-items:start; padding-top:8px; }

body[data-page="services"] .sol-diagram{
  position:relative;
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:24px;
  padding:36px 32px;
  box-shadow:0 34px 64px -36px rgba(43,27,74,.28);
}
body[data-page="services"] .sol-diagram-line{
  position:absolute; left:56px; top:56px; bottom:56px; width:1px;
  background:linear-gradient(var(--p),var(--brass) 55%,var(--hair));
  opacity:.55;
}
body[data-page="services"] .sol-diagram-step{
  position:relative; display:flex; align-items:center; gap:18px;
  padding:20px 0;
}
body[data-page="services"] .sol-diagram-step + .sol-diagram-step{ border-top:none; }
body[data-page="services"] .sol-diagram-num{
  position:relative; z-index:1; flex-shrink:0;
  width:46px; height:46px; border-radius:50%;
  background:var(--p); color:#fff;
  font-family:var(--mono); font-size:13px; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -10px rgba(91,63,160,.55);
}
body[data-page="services"] .sol-diagram-step:nth-child(3) .sol-diagram-num,
body[data-page="services"] .sol-diagram-step:nth-child(4) .sol-diagram-num{
  background:var(--paper); color:var(--brass-deep); border:1.5px solid var(--brass);
  box-shadow:0 6px 16px -8px rgba(27,21,37,.22);
}
body[data-page="services"] .sol-diagram-label{
  font-family:var(--serif); font-size:17px; color:var(--ink); line-height:1.3;
}

/* ---------------------------------------------------------------
   THREE PROBLEMS — asymmetric panel system. A soft, deliberately
   restrained lavender atmosphere sits behind the whole section
   (single radial wash, nowhere near "overuse"); the lead panel
   spans full width, the other two pair beneath it, replacing the
   uniform vertical spine with a real, memorable silhouette.
   --------------------------------------------------------------- */
body[data-page="services"] .sol-spine-section{
  position:relative;
  background:
    radial-gradient(ellipse 900px 480px at 12% 0%, rgba(91,63,160,.055), transparent 62%),
    var(--paper);
}

body[data-page="services"] .sol-panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
body[data-page="services"] .sol-panel-lead{ grid-column:1 / -1; }

body[data-page="services"] .sol-panel{
  position:relative;
  background:#fff;
  border-radius:24px;
  padding:44px 40px 40px;
  box-shadow:0 28px 56px -34px rgba(27,21,37,.24);
  overflow:hidden;
  transition:transform .35s var(--ease-moment,cubic-bezier(.32,.72,0,1)), box-shadow .35s var(--ease-moment,cubic-bezier(.32,.72,0,1));
}
body[data-page="services"] .sol-panel:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 72px -32px rgba(27,21,37,.3);
}
body[data-page="services"] .sol-panel-lead{ padding:52px 48px 48px; }
body[data-page="services"] .sol-panel-lead h3{ max-width:26ch; }
body[data-page="services"] .sol-panel h3{ font-size:24px; margin:12px 0 10px; }
body[data-page="services"] .sol-panel-lead h3{ font-size:29px; }
body[data-page="services"] .sol-panel p{ color:var(--muted); font-size:15.5px; max-width:52ch; }

body[data-page="services"] .sol-panel-num{
  position:absolute;
  top:-6px; right:20px;
  font-family:var(--serif); font-weight:340;
  font-size:110px; line-height:1;
  color:var(--p);
  opacity:.06;
  pointer-events:none; user-select:none;
}
body[data-page="services"] .sol-panel-lead .sol-panel-num{ font-size:150px; top:-16px; right:24px; }

@media(max-width:880px){
  body[data-page="services"] .sol-hero-grid{ grid-template-columns:1fr; gap:32px; }
  body[data-page="services"] .sol-panels{ grid-template-columns:1fr; }
  body[data-page="services"] .sol-panel{ padding:34px 28px 30px; }
  body[data-page="services"] .sol-panel-lead{ padding:38px 30px 34px; }
  body[data-page="services"] .sol-diagram{ padding:28px 24px; }
}