@charset "UTF-8";
/* ==========================================================================
   W20 — SUPPORTING + LEGAL FAMILY LAYER (body class "sp"; /about/, /contact/, /privacy/,
   /terms/, /disclaimer/). CSS only; no copy changed.
     sp-about   = transparency + site role (designed page)
     sp-contact = direct action: phone primary (navy card), form secondary (warm, strong)
     sp-legal   = restrained document system: light header, readable measure, TOC as navigation
   Roles: garnet = phone call; ink = form submit (not a call); blue = links/focus; warm = surfaces.
   ========================================================================== */
.sp main { --cloud: #F7F3ED; --stone: #EFE8DD; --line: #E6E0D5; color: var(--p-text); }
.sp main .eyebrow { color: var(--p-sub); }
.sp main .eyebrow::before { background: linear-gradient(90deg, #A8304A, #E4677F 45%, #6FA0EE 60%, #1D5BC7); }
.sp main .eyebrow--light { color: #C9D2E5; }

/* ---------- Shared light page header (replaces dark navy pheads) ---------- */
.sp .phead { background: var(--p-warm); color: var(--p-text); border-bottom: 1px solid var(--p-warm-line); }
.sp .phead .airflow { display: none; }
.sp .phead h1 { color: var(--ink); font-weight: 850; letter-spacing: -0.034em; }
.sp .phead .lede { color: var(--p-text); }
.sp .phead .crumbs--light ol, .sp .phead .crumbs--light a { color: var(--muted); }
.sp .phead .crumbs--light li + li::before { color: #9AA5BC; }
.sp .phead .eyebrow--light { color: var(--p-sub); }

/* ---------- Designed pages: type + calls ---------- */
.sp-about main h2, .sp-contact main h2 { font-weight: 800; letter-spacing: -0.026em; text-wrap: balance; }
.sp-about main .btn-call, .sp-contact main .btn-call, .sp-about main .btn-white { background: var(--p-act); color: #fff; box-shadow: 0 8px 20px rgba(168,48,74,.2); }
.sp-about main .btn-call:hover, .sp-contact main .btn-call:hover, .sp-about main .btn-white:hover { background: var(--p-act-deep); color: #fff; }

/* ======================================================================
   ABOUT — transparency + site role
   ====================================================================== */
.sp-about .phead { padding: 56px 0 64px; }
.sp-about .phead h1 { font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.7rem); max-width: 18ch; }
.sp-about .phead .lede { font-size: 1.18rem; max-width: 60ch; }
.sp-about .about-intro { background: #fff; }
.sp-about .about-grid .ph { border-radius: 18px; box-shadow: 0 20px 44px rgba(23,33,58,.12); }
.sp-about .big { color: var(--ink); }
.sp-about .svc-rows li { border-color: var(--p-warm-line); }
/* Who does the work: the site's truthful role, as a deliberate navy reset (not fine print) */
.sp-about .about-work { background: var(--ink); color: #C9D2E5; position: relative; }
.sp-about .about-work::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #A8304A, #E4677F 45%, #6FA0EE 60%, #1D5BC7); }
.sp-about .about-work h2 { color: #fff; }
.sp-about .about-work .eyebrow { color: #C9D2E5; }
.sp-about .about-work .lead { color: #E6EBF5; font-size: 1.2rem; line-height: 1.6; }
.sp-about .hire-note { background: rgba(255,255,255,.06); border-left-color: var(--sky); border-radius: 0 12px 12px 0; }
.sp-about .hire-note h3 { color: #fff; }
.sp-about .hire-note p { color: #D5DCEB; }
.sp-about .hire-note a { color: var(--sky); }
/* How information is prepared: quiet editorial note */
.sp-about .about-src { background: var(--p-warm); }
/* Closing: calm white, heat/cool rule */
.sp-about .closing { background: #fff; color: var(--p-sub); }
.sp-about .closing::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #A8304A, #E4677F 45%, #6FA0EE 60%, #1D5BC7); }
.sp-about .closing .airflow { display: none; }
.sp-about .closing h2 { color: var(--ink); }
.sp-about .closing p { color: var(--p-sub); }

/* ======================================================================
   CONTACT — phone primary, form secondary but strong
   ====================================================================== */
.sp-contact .phead { padding: 48px 0 56px; }
.sp-contact .phead h1 { font-size: clamp(2.3rem, 1.5rem + 2.3vw, 3.4rem); }
.sp-contact .contact-main { padding-top: 72px; }
.sp-contact .phone-card { border-top: 5px solid var(--heat); border-radius: 20px; }
.sp-contact .phone-card .airflow { display: none; }
.sp-contact .big-phone svg { color: var(--heat-soft); }
.sp-contact .big-phone:hover span { text-decoration: underline; text-underline-offset: 6px; }
.sp-contact .mention .tick-list li { border-top-color: var(--p-warm-line); }
.sp-contact .mention .tick-list svg { color: var(--cobalt); }
.sp-contact .contact-form { background: var(--p-warm); padding: 88px 0 96px; }
.sp-contact .form-card { border: 1px solid var(--p-warm-line); border-radius: 20px; padding: 40px 40px 34px; box-shadow: 0 2px 6px rgba(23,33,58,.05); }
.sp-contact .req-form input[type="text"], .sp-contact .req-form input[type="tel"], .sp-contact .req-form input[type="email"], .sp-contact .req-form textarea { border-color: #A59D90; background: #FFFEFC; min-height: 52px; }
.sp-contact .req-form .choice { border-color: #A59D90; background: #FFFEFC; }
.sp-contact .req-form .req, .sp-contact .req-form .opt { color: var(--p-sub); }
.sp-contact .req-form .hint, .sp-contact .form-privacy { color: var(--p-sub); }
/* Submit is a form action, not a phone call: ink, not garnet */
.sp-contact .req-form .btn-call { background: var(--ink); box-shadow: none; }
.sp-contact .req-form .btn-call:hover { background: #0F1628; }
.sp-contact .form-alt a { color: var(--p-act); font-weight: 700; }
.sp-contact .contact-more { background: var(--p-warm); padding-bottom: 96px; }
.sp-contact .contact-more > .wrap > * { background: #fff; border-color: var(--p-warm-line); }

/* ======================================================================
   LEGAL DOCUMENTS — restrained, readable
   ====================================================================== */
.sp-legal .phead--legal { padding: 44px 0 40px; background: var(--p-warm); }
.sp-legal .phead--legal h1 { font-size: clamp(2.1rem, 1.5rem + 1.6vw, 2.8rem); }
.sp-legal .phead--legal p { color: var(--p-sub); margin: 0; }
.sp-legal .legal { background: #fff; padding-top: 56px; }
.sp-legal .legal-grid { grid-template-columns: 250px minmax(0, 68ch); gap: 72px; justify-content: start; }
.sp-legal .toc { padding: 20px 20px 16px; background: var(--p-warm); border-radius: 14px; }
.sp-legal .toc a { color: var(--p-text); }
.sp-legal .toc a:hover { color: var(--cobalt); }
.sp-legal .prose { max-width: 68ch; font-size: 1.04rem; line-height: 1.72; }
.sp-legal .prose h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.015em; padding-top: 28px; border-top: 1px solid var(--p-warm-line); margin-top: 40px; }
.sp-legal .prose > h2:first-child, .sp-legal .prose > .lead-box + h2 { border-top: 0; padding-top: 0; }
.sp-legal .prose h3 { font-size: 1.08rem; font-weight: 800; color: var(--ink); }
.sp-legal .prose a { font-weight: 600; }
.sp-legal .lead-box { background: var(--p-warm); border-left-color: var(--ink); }

@media (max-width: 1024px) {
  .sp-legal .legal-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .sp-about .phead, .sp-contact .phead { padding: 28px 0 40px; }
  .sp-about .phead h1 { font-size: 2.3rem; }
  .sp-contact .contact-form { padding: 56px 0 64px; }
  .sp-contact .form-card { padding: 26px 18px 22px; }
  .sp-contact .contact-main { padding-top: 48px; }
  .sp-legal .legal { padding-top: 32px; }
  .sp-legal .prose { font-size: 1rem; }
}