/* services.css: /services, the work QuanterLab does for firms (2026-10-06).

   The page wears the research desk (research-desk.css, desk-page.css) and adds the few pieces a
   services page needs that a prose page does not: a first screen with two actions and the report
   it sells, the services (six since the evening of 10-06: three pairs) and the form beside the company's details
   (the documents grid below is unused since model validation left the page, 10-06). Set like a
   firm's capabilities page, not a product page: plain nouns for headings, each service under a
   hairline rather than in a box, one quiet link to enquire. Load AFTER desk-page.css; every colour
   is a desk token or the paper's own cream for the one filled button. The only shadow is under the
   report page, which sits on the desk like paper. */

.sv .dp-h1 { font-size: 2.8rem; }

/* ---- the first screen: what is offered, two actions, the deliverable -------------------- */
.sv-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 56px;
           align-items: center; padding: 6px 0 10px; }
.sv-hero .dp-lede { margin: 0 0 28px; max-width: 54ch; }
.sv-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-hero-doc { display: block; text-decoration: none !important; }
.sv-hero-doc img { display: block; width: 100%; height: auto; border-radius: 3px; background: #fff;
                   box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .7), 0 2px 10px rgba(0, 0, 0, .35); }
.sv-hero-cap { display: block; margin-top: 12px; font-size: .82rem; color: var(--text-tertiary); }
.sv-hero-doc:hover .sv-hero-cap { color: var(--text-secondary); }

/* ---- the buttons: the paper's cream for the one filled action, a hairline for the other -- */
.sv-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
          height: 44px; padding: 0 22px; border-radius: 8px; border: 1px solid rgba(242, 239, 232, .28);
          background: transparent; color: var(--text-primary) !important; font: inherit; font-size: .95rem;
          font-weight: 500; text-decoration: none !important; white-space: nowrap; cursor: pointer;
          transition: background-color .15s ease, border-color .15s ease; }
.sv-btn:hover { border-color: rgba(242, 239, 232, .55); background: rgba(242, 239, 232, .05); }
.sv-btn--primary { background: #F2EFE8; border-color: #F2EFE8; color: #14181f !important; font-weight: 600; }
.sv-btn--primary:hover { background: #ffffff; border-color: #ffffff; }
.sv-btn:focus-visible, .sv-link:focus-visible, .sv-doc:focus-visible, .sv-hero-doc:focus-visible {
          outline: 2px solid #3fae7f; outline-offset: 3px; }

/* ---- the services: a capabilities grid, two a row, each under a hairline ------------------ */
.sv-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; padding-top: 6px; }
.sv-service { display: flex; flex-direction: column; align-items: flex-start; padding-top: 20px;
              border-top: 1px solid rgba(242, 239, 232, .22); }
/* the first row sits under the section's own rule, so it carries none of its own */
.sv-service:nth-child(-n+2) { padding-top: 0; border-top: 0; }
.sv-service-title { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: 1.62rem;
                    font-weight: 600; line-height: 1.15; color: var(--paper-cream, #fbfaf6); margin: 0 0 6px; }
.sv-service-text { font-size: .95rem; line-height: 1.62; color: var(--text-secondary); margin: 4px 0 16px; max-width: 60ch; }
.sv .sv-link { margin-top: auto; font-size: .92rem; font-weight: 600; color: var(--text-primary); text-decoration: none;
               border-bottom: 1px solid rgba(242, 239, 232, .35); padding-bottom: 2px; }
.sv .sv-link:hover { border-bottom-color: var(--text-primary); }

/* ---- the three documents ------------------------------------------------------------------------ */
.sv-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sv .sv-doc { display: flex; flex-direction: column; border: 1px solid var(--border-primary); border-radius: 10px;
              overflow: hidden; background: rgba(0, 0, 0, .14); color: var(--text-primary); text-decoration: none;
              transition: border-color .15s ease; }
.sv .sv-doc:hover { border-color: rgba(242, 239, 232, .32); }
.sv-doc-img { display: block; height: 170px; overflow: hidden; background: #fff; border-bottom: 1px solid var(--border-primary); }
.sv-doc-img img { display: block; width: 100%; height: auto; }
.sv-doc-title { display: block; padding: 14px 18px 4px; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
                font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--paper-cream, #fbfaf6); }
.sv-doc-meta { display: block; padding: 0 18px 16px; font-size: .84rem; line-height: 1.5; color: var(--text-tertiary); }

/* ---- contact: the form beside the company's details ------------------------------------------ */
.sv-contact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.sv-contact-side .dp-p { max-width: 42ch; }
.sv-company { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-primary); }
.sv-company p { margin: 0 0 3px; font-size: .86rem; line-height: 1.5; color: var(--text-tertiary); }
.sv-company p:first-child { color: var(--text-secondary); font-weight: 500; }
.sv-company p.sv-about { margin-top: 12px; max-width: 42ch; }
.sv-form { max-width: none; margin-top: 0; }
.sv-form .sv-btn { margin-top: 6px; }

.sv-boundary { margin: 64px 0 0; padding-top: 18px; border-top: 1px solid var(--border-primary); max-width: 92ch;
               font-size: .8rem; line-height: 1.6; color: var(--text-tertiary); }

@media (max-width: 1000px) {
  .sv-hero { grid-template-columns: 1fr; gap: 36px; }
  .sv-hero-doc { max-width: 520px; }
  .sv-contact { grid-template-columns: 1fr; gap: 8px; }
  .sv-contact-side .dp-p { max-width: 68ch; }
}
@media (max-width: 760px) {
  .sv .dp-h1 { font-size: 2.2rem; }
  .sv-services, .sv-docs { grid-template-columns: 1fr; }
  .sv-services { gap: 32px; }
  .sv-service:nth-child(2) { padding-top: 20px; border-top: 1px solid rgba(242, 239, 232, .22); }
  .sv-doc-img { height: 150px; }
}
@media (max-width: 560px) {
  .sv-actions .sv-btn { flex: 1 1 100%; }
}