/* ==========================================================================
   Client site stylesheet — TEMPLATE.

   THE ONLY PLACE A REBRAND HAPPENS IS THIS TOKEN BLOCK. Swap the five colour
   values for the client's palette and the whole site follows; nothing below
   the block should name a raw colour. (This is the lesson the flagship site's
   portal.css learned the hard way — undefined tokens fail silently, so use
   exactly these names and the template's test will catch a typo.)

   Every derived shade below the block is computed from the five with
   color-mix(), so the "five colours in, whole site out" promise survives the
   2026-08-12 design pass — tints, shadows, focus rings and the footer band
   all follow the brand automatically.

   Layout mirrors the flagship's conventions: mobile-first (CLAUDE.md §10),
   modifier classes for variants (§4), system fonts, no frameworks.
   ========================================================================== */

:root {
  /* ----- brand tokens: EDIT THESE PER CLIENT --------------------------- */
  --bg:      #f4f8f8;   /* page background */
  --ink:     #0f2e33;   /* headlines and body text */
  --accent:  #0e7c86;   /* buttons and highlights — used sparingly */
  --ink-70:  #44646a;   /* secondary text — keep ≥4.5:1 on --bg */
  --line:    #d8e6e6;   /* card borders and hairlines */
  /* --------------------------------------------------------------------- */

  /* Derived — never edit per client, they follow the five above. */
  --tint:        color-mix(in srgb, var(--accent) 6%, var(--bg));
  --tint-strong: color-mix(in srgb, var(--accent) 12%, var(--bg));
  --card-line:   color-mix(in srgb, var(--line) 70%, var(--bg));
  --focus:       color-mix(in srgb, var(--accent) 45%, transparent);
  --footer-text: color-mix(in srgb, var(--bg) 82%, transparent);

  --measure: 68ch;
  --radius: 14px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
               0 8px 24px -16px color-mix(in srgb, var(--ink) 35%, transparent);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.wrap--narrow { max-width: var(--measure); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.25rem); margin: 0.25rem 0 1rem; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.1875rem; }
a { color: inherit; }

.section { padding: 3.75rem 0; }

/* The page-top band. A gentle brand tint behind the headline is the single
   cheapest thing that separates "designed" from "typed" — and because it is
   mixed from the accent, every client's band is automatically theirs. */
.section--hero {
  background: linear-gradient(180deg, var(--tint-strong), var(--bg));
  padding: 4.5rem 0 3.75rem;
}
.section--hero h1 { max-width: 22ch; }
.section--hero .muted { font-size: 1.1875rem; max-width: 52ch; }

.section--tint { background: var(--tint); }

.eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-70);
}

/* ----- header ------------------------------------------------------------ */

.site-header {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--card-line);
  background: var(--bg);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nav__name { font-weight: 800; font-size: 1.1875rem; text-decoration: none; letter-spacing: -0.01em; }
/* The accent dot after the business name — a tiny signature that makes the
   wordmark read as a logo even for a client who has none. */
.nav__name::after { content: "."; color: var(--accent); }
/* When the client has a logo: drop it in assets/ and put
   <img class="nav__mark" src="/assets/logo.svg" alt="" width="28" height="28">
   inside the nav__name anchor, before the text. The wordmark stays — a mark
   alone identifies nobody at 28px. No logo? The accent-dot wordmark above
   already reads as one; do not invent a logo the client does not have. */
.nav__name { display: inline-flex; align-items: center; }
.nav__mark { display: block; border-radius: 8px; margin-right: 0.625rem; }

.nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a { text-decoration: none; font-weight: 550; font-size: 0.9375rem; }
.nav a:hover { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }

/* ----- buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 0.8125rem 1.75rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform 120ms ease, filter 120ms ease;
}
.btn:hover { filter: brightness(0.94); transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--ink); box-shadow: none; }
.btn--secondary:hover { background: var(--tint); filter: none; }

/* ----- cards -------------------------------------------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

/* A short accent rule under card headings — the restrained cousin of an icon
   set. Enough to look intentional; no image assets for a client to supply. */
.card > h3 { margin-top: 0; }
.card > h3::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-top: 0.625rem;
}

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 44rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.muted { color: var(--ink-70); }

.hint {
  font-size: 0.875rem;
  color: var(--ink-70);
  margin-top: 0.375rem;
}

/* ----- the lead form ------------------------------------------------------ */

.field { margin-bottom: 1.125rem; }
.field label { display: block; font-weight: 650; margin-bottom: 0.375rem; }
.field input,
.field textarea {
  width: 100%;
  padding: 0.8125rem 1rem;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) / 1.6);
  background: #fff;
}
.field input:focus,
.field textarea:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--accent);
}
.field textarea { min-height: 7rem; resize: vertical; }

/* Visually gone, still in the DOM — bots fill it, people never see it. Same
   mechanism as the flagship site. Do not use display:none: some bots skip
   fields that are display:none, and aria-hidden already hides it from
   assistive tech. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status { margin-top: 1rem; font-weight: 600; }
.form__status--error { color: #a4262c; }

/* ----- footer -------------------------------------------------------------- */

/* A solid ink band. The strongest single "finished website" signal on the
   page, and it costs nothing: the text colour is the page background mixed
   toward transparent, so it works on any client's dark ink. */
.site-footer {
  margin-top: 3rem;
  padding: 2.5rem 0;
  background: var(--ink);
  color: var(--footer-text);
  font-size: 0.9375rem;
}
.site-footer strong { color: color-mix(in srgb, var(--bg) 96%, transparent); }
.site-footer a { color: inherit; }
.site-footer p { margin: 0.375rem 0; }