/* ════════════════════════════════════════════════════════
   WellPathBookd Digital — Shared Stylesheet

   Typography (3 sizes — no exceptions):
   H1  clamp(2.75rem, 5.5vw, 4.5rem) · weight 800 · ls -0.03em
   H2  clamp(1.25rem, 2.5vw, 1.875rem) · weight 700 · ls -0.02em
   B1  1rem (16px) · weight 400/500/600
════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────── */
:root {
  --white:      #ffffff;
  --off-white:  #fafafa;
  --black:      #0a0a0a;
  --text:       #111111;
  --muted:      #71717a;
  --border:     #e5e5e5;
  --border-dk:  rgba(255,255,255,0.1);

  --h1: clamp(2.75rem, 5.5vw, 4.5rem);
  --h2: clamp(1.25rem, 2.5vw, 1.875rem);
  --b1: 1rem;

  --radius:  4px;
  --max-w:   1200px;
  --nav-h:   64px;
  --section: 7rem;
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Focus (keyboard navigation) ────────────────────── */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.dark :focus-visible { outline-color: var(--white); }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--b1);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font-family: inherit; }

/* ── Typography ──────────────────────────────────────── */
h1 {
  font-size: var(--h1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: inherit;
}
h2 {
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: inherit;
}
p {
  font-size: var(--b1);
  line-height: 1.7;
}

/* ── Layout ──────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 640px) {
  .container { padding: 0 1.25rem; }
}

/* Two jobs. An email address is a single unbreakable token, and on a narrow
   viewport at 200% zoom one alone is wider than the screen. Less obviously,
   "anywhere" also lowers every element's min-content width, which is what
   actually lets the grids shrink instead of forcing the document sideways.
   Removing it put three pages back over the viewport at 200% zoom. */
body { overflow-wrap: anywhere; }

/* Large display numbers are the exception, and they are the reason this rule
   cannot simply be left on everything: "anywhere" means anywhere, so a figure
   like "+28" or "0.9s" breaks mid-number and renders on two lines at full
   width. A display number is short, so it never needed the help.
   The four price selectors that used to be listed here went with the prices
   themselves on 5 August 2026; the rule stays for the homepage result metrics
   and the sourced statistics on /search-guide. */
.case-metric,
.stat-note p { overflow-wrap: normal; }

/* ── Section spacing ─────────────────────────────────── */
section { padding: var(--section) 0; }
section.tight { padding: 4rem 0; }
section.dark  { background: var(--black); color: var(--white); }
section.off   { background: var(--off-white); }

.section-head {
  margin-bottom: 3.5rem;
}
.section-head p {
  color: var(--muted);
  max-width: 36rem;
  margin-top: 1rem;
}
.section-head.centered {
  text-align: center;
}
.section-head.centered p {
  margin-left: auto;
  margin-right: auto;
}

/* ── Section label (B1 muted uppercase) ──────────────── */
.label {
  font-size: var(--b1);
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 1.25rem;
}
.label.light { color: rgba(255,255,255,0.45); }

/* ── Divider ─────────────────────────────────────────── */
.divider { width: 100%; height: 1px; background: var(--border); }
.divider.dark { background: var(--border-dk); }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--b1);
  font-weight: 600;
  padding: 0.8125rem 1.625rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease;
  text-decoration: none;
  line-height: 1.15;
  /* A nowrap button sized by its own text cannot shrink, so at 200% zoom on
     a 390px screen the longer labels pushed the whole document sideways.
     Capped and allowed to wrap: a two-line button is worse-looking than a
     one-line one, and better than a page that scrolls horizontally. Labels
     are short enough that this only ever happens at extreme zoom. */
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}
.btn:hover { opacity: 0.75; }
.btn-primary   { background: var(--text); color: var(--white); border-color: var(--text); }
.btn-invert    { background: var(--white); color: var(--text); border-color: var(--white); }
.btn-outline   { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-outline-dk{ background: transparent; color: var(--text);  border-color: var(--text); }

/* ── Sticky Navigation ───────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.nav-logo span { color: var(--muted); font-weight: 400; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: var(--b1);
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 1.25rem; }

/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--text);
}
.nav-mobile-menu {
  display: none;
  position: absolute;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 1.25rem;
  flex-direction: column;
  gap: 1.25rem;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  font-size: var(--b1);
  font-weight: 500;
  color: var(--muted);
}

/* ── Footer ──────────────────────────────────────────── */
footer {
  background: var(--black);
  color: var(--white);
  padding: 5rem 0 2.5rem;
}
.footer-grid {
  display: grid;
  /* minmax(0, …) rather than bare fr units: a bare fr track is min-content
     sized, so it refuses to go narrower than its longest word and overflows
     instead. This was pushing every page past the viewport at 200% zoom. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  padding-bottom: 3.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-dk);
}
.footer-brand h2 {
  font-size: var(--b1);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.625rem;
  color: var(--white);
}
.footer-brand p { color: rgba(255,255,255,0.45); }
/* Footer alpha values are contrast-bound, not taste-bound. Measured against the
   #0a0a0a footer on 5 August 2026: 0.35 gives 3.14:1 and 0.4 gives 3.77:1, both
   under the 4.5:1 that WCAG AA wants for body text, and the site commits to
   2.1 AA. 0.45 lands exactly on 4.5:1, which is no margin at all, so the floor
   here is 0.5 (5.33:1). Links stay at 0.6 (7.30:1) so the hierarchy of
   label < link survives the correction. Do not dim any of these back. */
.footer-col-head {
  font-size: var(--b1);
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
}
/* gap trimmed by the padding added below, so the text rhythm is unchanged
   while each link's hit area grows from 20px to 24px (WCAG 2.5.8). */
.footer-col ul { display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col a {
  font-size: var(--b1);
  color: rgba(255,255,255,0.6);
  transition: color 0.15s;
  display: inline-block;
  padding: 0.125rem 0;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copy { font-size: var(--b1); color: rgba(255,255,255,0.5); }
/* The Privacy Policy link sat at the paragraph's own colour, so it was both
   under contrast and visually indistinguishable from the sentence around it.
   It now matches the other footer links, which separates it from the copy and
   gives it the same 24px target. */
.footer-copy a {
  color: rgba(255,255,255,0.6);
  transition: color 0.15s;
  display: inline-block;
  padding: 0.125rem 0;
}
.footer-copy a:hover { color: var(--white); }

/* ── Cards ───────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ── Guarantee line (risk reversal) ──────────────────── */
.guarantee {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--b1);
  color: var(--muted);
  line-height: 1.4;
}
.guarantee svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text);
}
.guarantee strong { color: var(--text); font-weight: 600; }
.guarantee.light { color: rgba(255,255,255,0.6); }
.guarantee.light svg { color: var(--white); }
.guarantee.light strong { color: var(--white); }

/* ── Case-study metric (reuses H1 scale — no new size) ─ */
.case-metric {
  font-size: var(--h1);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.case-context {
  font-size: var(--b1);
  color: var(--muted);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* ── Long-form prose ─────────────────────────────────────
   Shared by /seo and /search-guide. These four were page-scoped
   inside seo.html until that page split in two; they are here
   because both halves need them and nothing else on the site
   defines them. Deliberately NOT promoted alongside them:
   .page-hero and .cta-strip-*, which are already forked across
   five and three pages respectively with genuinely different
   values (portfolio's hero is 5rem/18ch, seo's is 4.5rem/26ch;
   index stacks its CTA strip at 640px, seo at 900px). Unifying
   those is a site-wide refactor, not part of a page split. */

/* 36rem is ~72ch at 16px, inside the 65-75ch reading measure,
   and it matches the .section-head p measure already in use, so
   long-form copy reads at the same width as every other section. */
.prose { max-width: 36rem; }
.prose p { color: var(--muted); margin-bottom: 1.25rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }
/* The only in-prose link style on the site. It was inline on the
   one link seo.html had, which meant the next one would not have
   matched it. Underlined rather than colour-only: colour alone is
   not a sufficient distinction under WCAG 1.4.1. */
.prose a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.prose a:hover { color: var(--muted); }

/* The recurring device for a sourced finding. The same 2px top
   rule as .feature rather than a tinted accent edge: the site
   already has a grammar for "this block is separate". The
   SOURCE comment for each sits in the HTML above it, not on the
   page. Percentages must not break after the decimal point, so
   it joins the overflow-wrap exemption list above. */
.stat-note {
  border-top: 2px solid var(--text);
  padding-top: 1.25rem;
  margin: 2.5rem 0;
  max-width: 34rem;
}
.stat-note p { color: var(--text); margin-bottom: 0; }

/* The trades-list grammar from the homepage: rule above the
   list, rule under each row. Inline strong, not block: the copy
   punctuates these lead-ins three different ways, and forcing a
   break after the bold would break the ones that run straight on
   as a single sentence. */
.spec-list { border-top: 1px solid var(--border); }
.spec-list li {
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
  color: var(--muted);
}
.spec-list li strong { color: var(--text); font-weight: 600; }
/* Held to the reading measure when the list sits in running copy
   rather than inside a column that already constrains it. */
.spec-list--measure { max-width: 36rem; }

/* More space above a heading than below it. */
.seo-section h2 { margin-bottom: 1.5rem; }
.seo-section h3 { margin-top: 3rem; margin-bottom: 1rem; }
.seo-section .prose + .stat-note,
.seo-section .stat-note + .prose { margin-top: 2.5rem; }

/* ── Responsive ──────────────────────────────────────── */
/* The nav switches to the hamburger EARLIER than everything else, at 815px
   rather than 768px, because it now carries five links.

   Measured in Chromium with Inter loaded, 2 August 2026. The five labels plus
   four 2rem gaps need 358px. At a 769px viewport only 359px is available, and
   1px is not slack: body carries overflow-wrap:anywhere, so at sub-pixel
   margins every label breaks and the whole bar renders two lines deep (each
   item 51px tall instead of 26px). Shortening "Our Work" to "Work" bought
   33px, which was not enough on its own.

   Clean from 800px (30px slack, no wrapping) and comfortable from 816px
   (46px). The breakpoint is set at 815 so the desktop bar only ever appears
   where it has been measured to fit. Re-measure before adding a sixth link or
   lengthening a label; the numbers live in CLAUDE.md. */
@media (max-width: 815px) {
  .nav-links,
  .nav-right .btn { display: none; }
  .nav-toggle { display: block; }
}

@media (max-width: 768px) {
  :root { --section: 4.5rem; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── Screen-reader only ──────────────────────────────────
   Visible to assistive tech, painted nowhere. Used where a
   visible label is already short enough for sighted users
   but too terse read out of context. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}