/* ==========================================================================
   Bellwether Professional Services — design tokens
   Palette: "Warm Slate & Clay". Every pair below was verified against
   WCAG AA by calculation, not by eye. Ratios noted for future reference.
   ========================================================================== */

:root {
  /* Core palette */
  --clay:        #9C4F2E; /* accent: 5.88:1 on white, both directions */
  --clay-hover:  #843F22;
  --slate:       #3A3F44; /* headings: 10.64:1 on white */
  --ink:         #2E3236; /* body:    10.70:1 on oatmeal, 12.92:1 on white */
  --muted:       #5F6469; /* meta:     5.98:1 on white, 4.95:1 on oatmeal */
  --oatmeal:     #EFE9E0; /* warm section background */
  --oatmeal-dim: #E5DDD0;
  --paper:       #FFFFFF;
  --cream:       #F7F3EC;
  --border:      #DDD6CA; /* decorative card/section rules only - see note */
  /* Form control borders, which are NOT decorative: WCAG 1.4.11 requires 3:1
     for the visual boundary that identifies an input. --border manages only
     1.31:1 on cream and 1.44:1 on paper and fails that outright. This is the
     lightest warm grey in the same family that clears 3:1 on all three
     surfaces a field can sit on - 3.73:1 on paper, 3.37:1 on cream,
     3.09:1 on oatmeal. Computed, not eyeballed. */
  --field-border: #8D8375;
  /* Structural rules at section boundaries. Same value, different job, so it is
     named separately - changing form-field borders should not silently restyle
     the page's skeleton. Section bands cannot carry this load on their own:
     oatmeal is 1.21:1 against white and cream is 1.11:1, and darkening them to
     fix that pushes muted and clay text below AA while still not reaching a
     visible step. A thin edge with local contrast is detectable where a broad
     low-contrast area step is not. 3.73:1 on white, 3.09:1 on oatmeal. */
  --rule: #8D8375;
  --socket:      #2E3236;

  /* On dark surfaces: clay fails AA on slate (3.93), so links go cream */
  --on-dark:       #EFE9E0; /* 8.81:1 on slate */
  --on-dark-muted: #C9C2B6; /* 7.31:1 on socket */

  /* Type */
  --font-serif: 'Source Serif 4 Variable', Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  /* Fluid scale */
  --step--1: clamp(0.89rem, 0.86rem + 0.15vw, 0.97rem);
  --step-0:  clamp(1.05rem, 1.00rem + 0.25vw, 1.20rem);
  --step-1:  clamp(1.30rem, 1.20rem + 0.50vw, 1.60rem);
  --step-2:  clamp(1.60rem, 1.40rem + 1.00vw, 2.20rem);
  --step-3:  clamp(2.00rem, 1.65rem + 1.75vw, 3.10rem);

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* Applied to the top AND bottom of every .section, so the visible gap between
     two stacked sections is twice this. At the old clamp(3rem, 7vw, 5.5rem)
     that was 176px on a 1440px desktop, which read as dead space rather than
     breathing room. Halving it puts the between-section gap at 96px desktop,
     64px phone. */
  --section-y: clamp(2rem, 3.5vw, 3rem);
  --radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--slate);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); letter-spacing: -0.01em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p, ul, ol { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child, ul:last-child { margin-bottom: 0; }

a { color: var(--clay); text-underline-offset: .18em; text-decoration-thickness: .06em; }
a:hover { color: var(--clay-hover); }

/* Visible focus for keyboard users — important on a site people
   may navigate under stress or with assistive tech. */
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 2px; }

img { max-width: 100%; height: auto; display: block; }

/* ----- Layout primitives ----- */
.wrap { width: min(100% - (var(--gutter) * 2), 68rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 48rem); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--warm { background: var(--oatmeal); }
.section--cream { background: var(--cream); }
/* Every tinted band gets a rule top and bottom. Since tinted and plain sections
   alternate, this puts a visible edge at every boundary on the site. The fill
   still does the warming; the rule does the dividing. Dark sections need no rule
   - they are already a hard edge. */
.section--warm, .section--cream { border-block: 1px solid var(--rule); }
.section--dark { background: var(--slate); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark a { color: var(--on-dark); }

.stack > * + * { margin-top: 1.15em; }
.grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 46em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .75rem;
}

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }

/* ----- Buttons ----- */
.btn {
  display: inline-block;
  background: var(--clay);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 600;
  padding: .8em 1.6em;
  border: 2px solid var(--clay);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--clay-hover); border-color: var(--clay-hover); color: #fff; }

.btn--ghost { background: transparent; color: var(--clay); }
.btn--ghost:hover { background: var(--clay); color: #fff; }

.section--dark .btn { background: var(--paper); color: var(--slate); border-color: var(--paper); }
.section--dark .btn:hover { background: var(--oatmeal); border-color: var(--oatmeal); color: var(--slate); }

/* ----- Utility ----- */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--slate); color: #fff; padding: .75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* ----- Header ----- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--border); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-block: 1rem;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--slate); }
.brand-mark { flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600; }
.brand-sub { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.nav { display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 1.75rem);
       list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a { color: var(--slate); text-decoration: none; font-size: var(--step--1); }
.nav a:hover { color: var(--clay); }
.nav a[aria-current='page'] { color: var(--clay); box-shadow: inset 0 -2px 0 var(--clay); }
.nav-cta, .nav-cta:hover { color: #fff; box-shadow: none; padding: .55em 1.15em; }

@media (max-width: 34em) {
  .header-inner { justify-content: center; text-align: center; }
  .nav { justify-content: center; }
}

/* ----- Hero ----- */
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 52em) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.hero-photo img {
  width: 100%; max-width: 420px; margin-inline: auto;
  border-radius: 2px; object-fit: cover;
  box-shadow: 0 2px 24px rgba(46, 50, 54, .18);
}

/* ----- Form ----- */
.form label { display: block; font-size: var(--step--1); font-weight: 600; margin-bottom: .35rem; }
.form .opt { font-weight: 400; color: var(--muted); }
.form input, .form textarea {
  width: 100%; max-width: 32rem; padding: .7em .85em;
  font: inherit; font-size: var(--step-0); color: var(--ink);
  background: var(--paper); border: 1px solid var(--field-border); border-radius: var(--radius);
}
.form input:focus, .form textarea:focus { border-color: var(--clay); }
.form textarea { resize: vertical; }
.form-note {
  font-size: var(--step--1); color: var(--muted);
  max-width: 32rem; border-left: 3px solid var(--clay); padding-left: .9rem;
}
.form button { cursor: pointer; }

/* ----- Footer ----- */
.site-footer { background: var(--slate); color: var(--on-dark); }
.site-footer .wrap.grid { padding-block: var(--section-y); }
.foot-h {
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted);
  margin-bottom: .9rem;
}
.site-footer p, .site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: #fff; }
.socket { border-top: 1px solid #4A5054; padding-block: 1.5rem; }
.crisis, .fine { font-size: var(--step--1); color: var(--on-dark-muted); }
.fine { margin-bottom: 0; }

/* ==========================================================================
   Sticky chrome
   Header sticks to top; a slim action bar pins to the bottom.
   Both are kept deliberately short - on a phone every pixel of fixed chrome
   is a pixel the actual content doesn't get.
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header .header-inner { padding-block: .6rem; }
.brand-logo { height: 40px; width: auto; display: block; }

/* Bottom action bar: persistent conversion path without eating the viewport. */
.action-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: var(--slate); color: var(--on-dark);
  border-top: 1px solid #4A5054;
  padding: .6rem 0;
}
.action-bar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.action-bar .ab-text { font-size: var(--step--1); color: var(--on-dark); margin: 0; }
.action-bar .ab-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.action-bar a.ab-call { color: var(--on-dark); font-size: var(--step--1); white-space: nowrap; }
.action-bar .btn { padding: .5em 1.15em; font-size: var(--step--1); }

/* Keep the fixed bar from covering the end of the page. Scoped with :has() so
   a page built without the bar (see footer(action_bar=False) in build.py) does
   not reserve space for chrome it never renders. */
body:has(.action-bar) { padding-bottom: 4.5rem; }

@media (max-width: 30em) {
  .action-bar .ab-text { display: none; }
  .action-bar .wrap { justify-content: center; }
}
/* Very short viewports (landscape phones): drop the bar entirely rather than
   leave the user reading through a letterbox. */
@media (max-height: 26em) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ----- Nuggets ----- */
.nugget-list { display: grid; gap: 2rem; }
.nugget-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem 1.75rem;
}
.nugget-card h2 { font-size: var(--step-1); margin-bottom: .25rem; }
.nugget-card h2 a { color: var(--slate); text-decoration: none; }
.nugget-card h2 a:hover { color: var(--clay); text-decoration: underline; }
.nugget-date { font-size: var(--step--1); color: var(--muted); margin-bottom: .75rem; }
.nugget-back { margin-top: 2.5rem; }

.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--clay); color: var(--slate);
  font-family: var(--font-serif); font-size: var(--step-1);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose em { color: var(--muted); }

.nugget-card { padding: 0; overflow: hidden; }
.nugget-card > :not(.nugget-thumb) { margin-inline: 1.75rem; }
.nugget-card > h2 { margin-top: 1.5rem; }
.nugget-card > p:last-child { margin-bottom: 1.5rem; }
.nugget-thumb { display: block; margin: 0; }
.nugget-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.nugget-card:not(:has(.nugget-thumb)) > h2 { margin-top: 1.75rem; }

.nugget-lead {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); margin: 1.5rem 0 2rem;
}

/* ----- Share widget ----- */
.share-widget {
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border);
}
.share-label {
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .85rem;
}
.share-list { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--paper); color: var(--muted);
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.share-btn:hover, .share-btn:focus-visible { background: var(--clay); border-color: var(--clay); color: #fff; }
.share-btn--copy { width: auto; border-radius: 999px; padding-inline: 1rem; }

/* ----- Contact ----- */
.contact-ways { align-items: start; }
.contact-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
  height: 100%;
}
.contact-card h2 { font-size: var(--step-1); margin-bottom: .6rem; }
.contact-big {
  font-family: var(--font-serif); font-size: var(--step-1);
  font-weight: 600; word-break: break-word;
}
.contact-note { font-size: var(--step--1); color: var(--muted); }

/* ----- Per-service enquiry links ----- */
.service-ask {
  display: inline-block; font-weight: 600; font-size: var(--step--1);
  margin-top: .25rem;
}
.service-ask::after { content: " \2192"; }

/* ==========================================================================
   Resource capture page (/resources/verify/)
   Built from the site's existing tokens rather than the worksheet's navy and
   slate. Introducing a second palette on one page would have meant two new
   foreground/background pairs to verify and a page that reads as though it
   came from somewhere else. Ratios for every pair used here are recorded in
   the header comment of this file and were recomputed when this block landed.
   Mobile first throughout: a meaningful share of this page's traffic arrives
   from a phone, and the form must be reachable without a horizontal scroll.
   ========================================================================== */

.capture-items { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 46em) { .capture-items { grid-template-columns: repeat(2, 1fr); } }

.capture-item {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem 1.75rem; height: 100%;
}
.capture-item h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.capture-both { margin-top: 1.5rem; color: var(--muted); font-size: var(--step--1); }

/* ----- The form ----- */
.capture-form { margin-top: 1.5rem; }
.capture-field + .capture-field { margin-top: 1.15rem; }
.capture-field label { margin-bottom: .4rem; }
/* Font size stays at or above 1rem: iOS Safari zooms the viewport on focus for
   anything smaller, which on a capture page reads as the page breaking. */
.capture-form input { font-size: max(1rem, var(--step-0)); }
.capture-submit { margin: 1.5rem 0 1rem; }
.capture-submit .btn { width: 100%; max-width: 32rem; text-align: center; }
@media (min-width: 34em) { .capture-submit .btn { width: auto; } }
.capture-form button[disabled] { opacity: .7; cursor: default; }

.capture-done {
  margin-top: 1.5rem; max-width: 32rem;
  background: var(--oatmeal); border-left: 3px solid var(--clay);
  border-radius: var(--radius); padding: 1.5rem 1.75rem;
}
.capture-done h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.capture-done:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }

/* Build-time guard, not a user-facing state: rendered only while config.KIT
   still holds REPLACE_ME. Loud on purpose. */
.capture-blocked {
  margin-top: 1.5rem;
  background: var(--oatmeal-dim); border: 2px solid var(--clay);
  border-radius: var(--radius); padding: 1.5rem 1.75rem;
}
.capture-blocked code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; background: var(--paper); padding: .1em .35em;
  border-radius: 2px;
}

/* ----- Registration box and lists ----- */
/* The most important block on the page, so it gets a defined edge rather than
   relying on a fill difference to separate it. A hairline border reads at any
   colour perception; a 1.1:1 background step does not. */
.reg-box {
  margin-top: 1.5rem;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.reg-facts { margin: 0 0 1.75rem; display: grid; gap: .75rem; }
.reg-facts > div {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1rem;
  align-items: baseline; padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.reg-facts dt {
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.reg-facts dd { margin: 0; color: var(--ink); }
.reg-submit { margin: 0 0 1rem; }
.reg-submit .btn { width: 100%; max-width: 32rem; text-align: center; }
@media (min-width: 34em) { .reg-submit .btn { width: auto; } }
.reg-list { padding-left: 1.25rem; max-width: var(--measure); }
.reg-list li { margin-bottom: .6em; }

/* Closed, full, or past. Sits above the details block rather than replacing it:
   someone who arrives late still wants to see what the session was. */
.reg-closed {
  background: var(--oatmeal); border-left: 3px solid var(--clay);
  border-radius: 0; padding: 1.5rem 1.75rem; margin-bottom: 2rem;
  max-width: 32rem;
}
.reg-closed h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.reg-closed .reg-submit { margin: 1.5rem 0 1rem; }
.reg-closed-note { font-size: var(--step--1); color: var(--muted); margin-bottom: 0; }

/* The three-step sequence after payment. Numbered rather than bulleted on
   purpose: the order is the information. */
.reg-next {
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin: 2rem 0 .75rem;
}
.reg-steps {
  padding-left: 1.25rem; max-width: 32rem;
  font-size: var(--step--1); color: var(--ink);
}
.reg-steps li { margin-bottom: .55em; }
.reg-steps::marker, .reg-steps li::marker { color: var(--muted); }

/* ----- Bio and independence line ----- */
.capture-bio {
  border-left: 3px solid var(--border); padding-left: 1.25rem;
  font-size: var(--step--1); color: var(--muted);
}
.capture-bio strong { color: var(--ink); }
.capture-independence {
  margin-top: 2rem; font-family: var(--font-sans); font-size: var(--step--1);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}