/* The services page (#1042), at the front address. Loaded after landing.css, whose
   header it shares. Served by routes_services, never inline
   (production's CSP is default-src 'self'). No font or image comes from anywhere
   else: system fonts and the page's own CSS shapes.

   Bright on purpose (owner, 12 Nov 2026: "positive and modern, not a dark utility
   page"): the page is always light, whatever the visitor's scheme, so landing.css's
   dark values are put back here. The footer is the one dark band, ink with white
   text. Every text pairing used below is checked to 4.5:1 in
   tests/test_services_page.py: --ink or --muted on --paper, --white, --tint, --sun,
   --mint or --field; --white on --ink; --on-accent on --accent. One column on a
   phone; services and steps side by side when there is room. */

:root {
  color-scheme: light;
  --accent: #2458db;
  --on-accent: #ffffff;
  --paper: #f8faff;
  --white: #ffffff;
  --ink: #1a1a1a;
  --muted: #444b57;
  --line: #d5ddeb;
  --tint: #edf2ff;
  --sun: #fff1cf;
  --mint: #dcf5e9;
  --field: #f3f4f6;
  --field-line: #6b7280;
  --corner: 6px;
}

.sv-main { line-height: 1.6; }
.sv-main p, .sv-main li { line-height: 1.6; }
.sv-wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.15rem; }
.sv-main h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 .5rem; letter-spacing: -.03em; }
.sv-main h3 { color: var(--ink); }
.sv-sub { margin: 0 0 1.6rem; color: var(--muted); font-size: 1.05rem; max-width: 40rem; }
.sv-section { padding: 3rem 0; }
.sv-band { background: var(--tint); border-block: 1px solid var(--line); }

.sv-nav { margin-left: auto; display: flex; gap: 1.2rem; font-weight: 600; font-size: .98rem; }
.sv-nav a { text-decoration: none; padding: .5rem 0; }
.sv-nav a:hover { text-decoration: underline; }

/* The opening band: a soft wash of blue into warm, with large plain type. */
.sv-hero {
  padding: 3.5rem 0 3.25rem;
  background: linear-gradient(135deg, var(--tint) 0%, var(--white) 52%, var(--sun) 100%);
  border-bottom: 1px solid var(--line);
}
.sv-hero h1 {
  font-size: clamp(2.1rem, 7vw, 3.4rem); line-height: 1.08;
  margin: 0 0 1rem; max-width: 16em; letter-spacing: -.04em;
}
.sv-lead { font-size: clamp(1.1rem, 2.6vw, 1.3rem); max-width: 36rem; margin: 0 0 1.6rem; }
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin: 0; }
.sv-more { font-weight: 600; }
.sv-main .lp-cta { border-radius: var(--corner); }

/* One look for every card: a light border and a soft shadow. */
.sv-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.sv-card, .sv-step {
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--corner);
  box-shadow: 0 1px 3px rgba(26, 26, 26, .08);
}
.sv-card { padding: 1.5rem 1.4rem 1.4rem; }
.sv-card h3 { margin: 0 0 .5rem; font-size: 1.3rem; letter-spacing: -.02em; }
.sv-line { margin: 0 0 1rem; }
.sv-examples { margin: 0; padding-left: 1.15rem; color: var(--muted); }
.sv-examples li + li { margin-top: .3rem; }

.sv-steps {
  list-style: none; margin: 1.4rem 0 0; padding: 0; counter-reset: step;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.sv-step { position: relative; counter-increment: step; padding: 3.6rem 1.3rem 1.3rem; }
.sv-step::before {
  content: counter(step);
  position: absolute; top: 1.1rem; left: 1.3rem;
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--sun); color: var(--ink); font-weight: 800;
}
.sv-step:nth-child(2)::before { background: var(--mint); }
.sv-step:nth-child(3)::before { background: var(--tint); }
.sv-step h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.sv-step p { margin: 0; }

.sv-contact { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 52rem) {
  .sv-contact { grid-template-columns: 1fr 1.3fr; }
}

.sv-form {
  padding: 1.3rem 1.35rem 1.4rem;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--corner);
  box-shadow: 0 1px 3px rgba(26, 26, 26, .08);
}
.sv-form label { display: block; font-weight: 600; margin: .9rem 0 .4rem; }
.sv-form label:first-child { margin-top: 0; }
/* Light grey fields that turn white, with a brand-colour border, when used. */
.sv-form input[type="text"], .sv-form input[type="email"], .sv-form textarea {
  display: block; width: 100%; min-height: 48px;
  padding: .6rem .8rem;
  border: 1px solid var(--field-line); border-radius: var(--corner);
  background: var(--field); color: var(--ink);
  font: inherit;
}
.sv-form textarea { resize: vertical; min-height: 9rem; }
.sv-form input:focus-visible, .sv-form textarea:focus-visible {
  background: var(--white); border-color: var(--accent);
  outline: 3px solid var(--accent); outline-offset: 0;
}
.sv-form button.lp-cta { margin-top: 1.2rem; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.sv-hint { margin: .5rem 0 0; color: var(--muted); font-size: .95rem; }
.sv-privacy { margin-top: 1rem; }

/* The honeypot: off the page, not display:none (some bots skip hidden fields),
   and not in the tab order. A person never reaches it. */
.sv-extra { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.sv-result {
  margin: 0 0 1rem; padding: 1rem 1.25rem;
  background: var(--mint); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--corner);
}
.sv-result h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.sv-result p { margin: 0; }
.sv-problem { background: var(--sun); border: 2px solid var(--muted); }

.sv-main a { color: var(--ink); }
.sv-main a.lp-cta { color: var(--on-accent); }
.sv-main :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* The footer: the one dark band. Who we are, and the few places to go. */
.sv-footer { background: var(--ink); color: var(--white); padding: 1.8rem 0; }
.sv-footer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; }
.sv-company { margin: 0; font-size: .95rem; }
.sv-footer nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .95rem; }
.sv-footer a { color: var(--white); }
.sv-footer a:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }