/* ═══════════════════════════════════════════════════════════════
   BlueStone Business Coach: site stylesheet
   Navy and ink for weight, warm concrete neutrals for surfaces, one
   amber accent for the primary action. Archivo for headings and labels,
   Public Sans for reading.

   Every token and component here is documented on /style-guide/.
   When you change this file, update content/style-guide.md to match.
   ═══════════════════════════════════════════════════════════════ */

/* Self-hosted fonts (latin subset, variable). Served from our own origin and
   cached immutably (see static/_headers), so there is no third-party request
   or render-blocking external stylesheet. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/public-sans-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Headshots: every portrait on the site uses this width and crop ── */
  --headshot-w: 280px;
  --headshot-ratio: 4 / 5;

  /* ── Brand blues ── */
  --ink:        #102331;   /* darkest: footer, closing band */
  --navy:       #16384f;   /* brand navy: headings, hero bands */
  --blue:       #1e6f9f;   /* link hover, focus ring */
  --blue-600:   #185c83;   /* links, small labels (7:1 on white) */
  --blue-100:   #cfe3ef;   /* form focus halo */

  /* ── Safety amber: the one accent. Reserved for the primary action on a
     screen (.btn-primary). Never used for text on white: it fails contrast. ── */
  --amber:      #e8943a;
  --amber-600:  #cf7d27;
  --amber-200:  #f6d9b4;   /* text selection, focus ring on dark bands */

  /* ── Warm concrete neutrals ── */
  --bg:         #ffffff;
  --paper:      #f5f2ec;   /* alternate section surface */
  --paper-2:    #efeae1;
  --line:       #e4ddd2;   /* hairline rules */
  --line-strong:#cbc2b3;   /* rules that separate content, input borders */

  /* ── Text ── */
  --text:       #1f2c36;
  --muted:      #5c6a75;   /* secondary text (5.6:1 on white) */
  --muted-soft: #8593a0;   /* list markers, placeholders only; not for text */
  --label:      var(--blue-600);
  --on-dark:       #ffffff;
  --on-dark-muted: rgba(255,255,255,.78);

  /* ── Focus ring (swapped to a light tone on dark bands) ── */
  --focus:      var(--blue);

  /* ── Type ──
     The scale steps by roughly 1.25 at desktop; clamp() keeps it fluid. */
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --fs-display: clamp(2.4rem, 1.6rem + 3.4vw, 3.9rem);  /* page H1 */
  --fs-h2:      clamp(1.7rem, 1.35rem + 1.5vw, 2.4rem); /* section heading */
  --fs-h3:      1.3rem;                                  /* item heading */
  --fs-lead:    clamp(1.1rem, 1rem + .4vw, 1.25rem);    /* intro paragraph */
  --fs-body:    1.0625rem;                               /* 17px */
  --fs-small:   .9rem;
  --fs-label:   .75rem;                                  /* uppercase labels */

  --lh-tight:   1.08;
  --lh-heading: 1.15;
  --lh-body:    1.65;

  --measure:    66ch;                                    /* max reading line */

  /* ── Space and layout ── */
  --max:        1180px;
  --gutter:     clamp(1.5rem, 4vw, 3.5rem);   /* column gap in split layouts */
  --pad-x:      1.5rem;                       /* page side padding */
  --section:    clamp(3.5rem, 7vw, 6rem);     /* default section padding */
  --section-sm: clamp(2.5rem, 5vw, 4rem);     /* tighter section */
  --radius:     4px;                          /* buttons, inputs, price cards */

  --ease: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

::selection { background: var(--amber-200); color: var(--ink); }

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue); }
/* Links inside running text are underlined so they do not rely on color. */
main p a:not([class]), main li a:not([class]), .prose a:not([class]) { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.hero, .band--navy, .band--ink, .site-footer { --focus: var(--amber-200); }

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ═══════════════ Type ═══════════════ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  font-weight: 650;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: 0; }
p, li { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
  display: block;
  margin-bottom: .9rem;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: .5rem; }
.prose li::marker { color: var(--muted-soft); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }

/* ═══════════════ Layout ═══════════════ */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }

.section { padding: var(--section) 0; }
.section--sm { padding: var(--section-sm) 0; }
.section--flush-top { padding-top: 0; }
.band--paper { background: var(--paper); }
.band--navy { background: var(--navy); color: var(--on-dark); }
.band--ink  { background: var(--ink);  color: var(--on-dark); }
.band--navy h2, .band--ink h2, .band--navy h3, .band--ink h3 { color: var(--on-dark); }
.band--navy .eyebrow, .band--ink .eyebrow { color: var(--on-dark-muted); }

/* Asymmetric two-column layouts. The narrow column usually holds the
   heading; the wide column holds the substance. */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--wide-left { grid-template-columns: 8fr 4fr; }
.split--center { align-items: center; }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .lead, h2 + .lead { margin-top: 1rem; }

/* ═══════════════ Header ═══════════════ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--max); margin: 0 auto;
  padding: .85rem var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.logo { display: flex; align-items: center; }
.logo img { height: 58px; width: auto; }
.nav-links { display: flex; align-items: center; list-style: none; gap: 2rem; }
.nav-links > li > a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--navy);
  padding: .4rem 0;
  position: relative;
}
.nav-links > li > a:hover { color: var(--blue); }
.nav-links > li > a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: currentColor;
}
.nav-cta { margin-left: .25rem; }
.nav-cta .btn { padding: .7rem 1.25rem; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; display: block; width: 24px; height: 2px; background: var(--navy);
  transition: transform .2s var(--ease), background-color .2s;
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top: 7px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════ Buttons and links ═══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.2;
  padding: .85rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-lg { padding: 1rem 1.8rem; font-size: 1.05rem; }
/* Primary: amber, once per screen. */
.btn-primary { background: var(--amber); color: var(--ink); }
.btn-primary:hover { background: var(--amber-600); color: var(--ink); }
/* Secondary on light surfaces. */
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
/* Secondary on dark surfaces. */
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { border-color: #fff; color: #fff; }

/* Text link with an arrow: the quiet alternative to a second button. */
.link-arrow {
  font-family: var(--font-display); font-weight: 600;
  color: var(--blue-600); text-decoration: none;
  display: inline-block;
}
.link-arrow::after { content: "\00a0\2192"; }
.link-arrow:hover { color: var(--blue); text-decoration: underline; text-underline-offset: .18em; }
.band--navy .link-arrow, .band--ink .link-arrow, .hero .link-arrow { color: #fff; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

/* ═══════════════ Hero ═══════════════ */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--on-dark); }
.hero-inner { max-width: var(--max); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad-x) clamp(3rem, 6vw, 5rem); }
.hero h1 {
  color: #fff;
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  max-width: 21ch;
}
.hero .eyebrow { color: var(--on-dark-muted); margin-bottom: 1.25rem; }
.hero-sub {
  font-size: var(--fs-lead);
  color: var(--on-dark-muted);
  max-width: 54ch;
  margin-top: 1.5rem;
  line-height: 1.55;
}
.hero--compact .hero-inner { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.hero--compact h1 { max-width: 24ch; }

/* Photo hero: the scrim is the one gradient on the site. It exists so white
   text stays readable over a photo, and fades right so the photo shows. */
.hero--photo { background: var(--ink); }
.hero--photo .hero-inner { min-height: 440px; display: flex; flex-direction: column; justify-content: center; }
.hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(13,28,40,.93) 0%, rgba(13,28,40,.78) 45%, rgba(13,28,40,.35) 100%);
}

/* Home hero: a larger headline set as two clean lines. */
.hero--home .hero-inner { padding-top: clamp(3.5rem, 8vw, 7rem); }
.hero--home h1 { font-size: clamp(2.6rem, 1.2rem + 4vw, 4.4rem); max-width: none; line-height: 1.02; }
.hero--home .hero-line { display: block; }

/* Home hero footer line: industries served. */
.hero-trades {
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.2);
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: baseline;
  font-size: var(--fs-small); color: var(--on-dark-muted);
}
.hero .hero-trades .eyebrow { margin: 0; }

/* ═══════════════ Home: pain questions ═══════════════ */
.statement {
  font-size: var(--fs-lead); line-height: 1.55;
  color: var(--text); max-width: 46ch; margin-top: 1.75rem;
}
.question-list { list-style: none; border-top: 1px solid var(--line-strong); }
.question-list li {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--navy); line-height: 1.3;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line-strong);
}

/* ═══════════════ People ═══════════════ */
/* Portraits set directly on the page with a caption, not in cards. Both
   headshots are the same size and crop (--headshot-w, --headshot-ratio). */
.headshot { width: 100%; aspect-ratio: var(--headshot-ratio); object-fit: cover; object-position: center 25%; background: var(--paper-2); }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, var(--headshot-w))); gap: 1.5rem var(--gutter); align-items: start; }
.people figcaption { margin-top: 1rem; }
.people figcaption h3 { font-size: 1.25rem; }
.role {
  font-family: var(--font-display); font-weight: 650; font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--label);
  margin: .25rem 0 .6rem;
}
.people figcaption p:last-child { color: var(--muted); max-width: 44ch; }

/* ═══════════════ Home: grouped focus areas ═══════════════ */
.topic-rows { border-top: 1px solid var(--line-strong); }
.topic-row {
  display: grid; grid-template-columns: 12rem 1fr; gap: 1rem var(--gutter);
  padding: 1.25rem 0; border-bottom: 1px solid var(--line-strong);
}
.topic-row h3 { font-size: .8rem; color: var(--label); text-transform: uppercase; letter-spacing: .12em; font-weight: 650; padding-top: .35rem; }
.topic-row ul { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 2.25rem; }
.topic-row li { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--navy); }

/* ═══════════════ Testimonials ═══════════════ */
.quote { border-left: 3px solid var(--navy); padding-left: clamp(1.25rem, 3vw, 2rem); max-width: 52rem; }
.quote blockquote p {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); line-height: 1.45; color: var(--navy);
}
/* Curly quotation marks come from CSS so every testimonial gets them. The
   opening mark hangs into the padding so the text edge stays aligned. */
.quote blockquote { quotes: "\201C" "\201D"; }
.quote blockquote p { text-indent: -.42em; }
.quote blockquote p::before { content: open-quote; }
.quote blockquote p::after { content: close-quote; }
.quote--small blockquote p { text-indent: -.36em; }
.quote--small blockquote p { font-family: var(--font-body); font-weight: 400; font-size: 1.1rem; line-height: 1.6; color: var(--text); }
.quote figcaption { margin-top: 1.1rem; font-size: var(--fs-small); color: var(--muted); }
.quote figcaption strong { font-family: var(--font-display); font-weight: 650; color: var(--navy); font-size: 1rem; margin-right: .35rem; }
.quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }

/* ═══════════════ Closing band ═══════════════ */
.close h2 { max-width: 18ch; }
.close p { color: var(--on-dark-muted); max-width: 46ch; font-size: var(--fs-lead); line-height: 1.55; }
.close .actions { margin-top: 1.75rem; }

/* ═══════════════ About: bios ═══════════════ */
.bio { display: grid; grid-template-columns: var(--headshot-w) 1fr; gap: var(--gutter); align-items: start; }
.bio + .bio { margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--line-strong); }
.bio--reverse { grid-template-columns: 1fr var(--headshot-w); }
.bio--reverse .bio-media { order: 2; }
.bio-text h2 { margin-bottom: .25rem; }
.bio-text .role { margin-bottom: 1.25rem; }
.bio-text p + p { margin-top: 1.1rem; }
.bio-text { max-width: var(--measure); }

/* ═══════════════ Pricing ═══════════════ */
/* The one place cards are used: the tiers are discrete and comparable. */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.25rem; align-items: stretch; }
.price-card {
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 2rem 1.75rem; display: flex; flex-direction: column; position: relative;
}
.price-card.featured { border: 2px solid var(--navy); }
.price-card .badge {
  position: absolute; top: -.8rem; left: 1.5rem;
  background: var(--navy); color: #fff;
  font-family: var(--font-display); font-weight: 650; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 2px;
}
.price-card h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.price-card .pc-desc { color: var(--muted); font-size: .98rem; margin-bottom: 1.25rem; }
.price-card ul { list-style: none; margin: 0 0 1.75rem; border-top: 1px solid var(--line); }
.price-card ul li { font-size: .98rem; line-height: 1.45; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.price-amt {
  font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--navy);
  letter-spacing: -.01em; margin-top: auto; line-height: 1.1;
}
.price-amt span { font-family: var(--font-body); font-size: .92rem; font-weight: 400; color: var(--muted); letter-spacing: 0; display: block; margin-top: .2rem; }
.price-amt s { color: var(--muted); font-weight: 500; font-size: .6em; margin-right: .2em; }
.price-card .btn { margin-top: 1.4rem; width: 100%; }
/* Photo header on a price card (CN subscriptions). Sits flush to the card edge. */
.price-media { margin: -2rem -1.75rem 1.5rem; }
.price-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px 2px 0 0; }
/* Price shown after the list, not at the foot of a card. */
.price-card .price-amt--top { margin: 0 0 1.25rem; }

.price-inline { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--navy); line-height: 1.1; margin-top: 1.5rem; }
.price-inline span { display: block; font-family: var(--font-body); font-weight: 400; font-size: .92rem; color: var(--muted); margin-top: .2rem; }

/* ═══════════════ Side-by-side options ═══════════════ */
/* Two options separated by a rule rather than boxed. */
.options { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
.options > * { padding: 1.5rem var(--gutter) 0 0; }
.options > * + * { padding-left: var(--gutter); border-left: 1px solid var(--line-strong); }
.options h3 { margin-bottom: .5rem; }
.options p { color: var(--muted); max-width: 42ch; }
.options .link-arrow { margin-top: 1rem; }
.options p + .link-arrow { margin-top: .9rem; }

/* ═══════════════ Contact details ═══════════════ */
.contact-line { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.contact-line + .contact-line, h2 + .contact-line { margin-top: 1.5rem; }
.contact-line h3 { font-size: 1rem; }
.contact-big {
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); overflow-wrap: break-word; line-height: 1.3;
  display: inline-block; margin-top: .25rem;
}
.phone-row { display: flex; flex-wrap: wrap; gap: 1.5rem var(--gutter); }
.phone-row .contact-line { margin: 0; min-width: 14rem; }

/* ═══════════════ Feature rows (CN) ═══════════════ */
.feature-row { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: center; }
.feature-row--reverse { grid-template-columns: 5fr 7fr; }
.feature-row--reverse .feature-text { order: 2; }
.feature-media img { width: 100%; border-radius: var(--radius); }
.feature-text h2 { margin-bottom: .75rem; }
.feature-text .intro { color: var(--muted); margin-bottom: 1rem; }
.feature-text ul { padding-left: 1.2rem; }
.feature-text li + li { margin-top: .45rem; }
.feature-text li::marker { color: var(--muted-soft); }
.feature-text p + ul, .feature-text ul + p { margin-top: .75rem; }

/* ═══════════════ Link list (404) ═══════════════ */
.link-list { list-style: none; border-top: 1px solid var(--line-strong); max-width: 36rem; }
.link-list li { border-bottom: 1px solid var(--line-strong); }
.link-list a { display: block; padding: 1rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--navy); text-decoration: none; }
.link-list a:hover { color: var(--blue); }

/* ═══════════════ Embeds ═══════════════ */
.embed-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.calendly-inline-widget { min-width: 320px; height: 700px; }
.embed-note { margin-top: 1rem; }

/* ═══════════════ Footer ═══════════════ */
.site-footer { background: var(--ink); color: var(--on-dark-muted); padding: 3.5rem 0 2rem; font-size: .96rem; }
.footer-grid {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: 5fr 7fr; gap: 2rem var(--gutter); align-items: start;
}
.footer-name { font-family: var(--font-display); font-weight: 650; font-size: 1.2rem; color: #fff; }
.footer-tag { margin-top: .5rem; max-width: 36ch; }
.footer-email { display: inline-block; margin-top: 1rem; color: #fff; text-decoration: underline; text-underline-offset: .18em; }
.footer-email:hover { color: var(--amber-200); }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: flex-end; }
.footer-links a { color: var(--on-dark-muted); }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  max-width: var(--max); margin: 2.5rem auto 0; padding: 1.25rem var(--pad-x) 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .85rem; color: rgba(255,255,255,.6);
}

/* ═══════════════ Forms (CN Live signup) ═══════════════ */
.form-wrap { max-width: 620px; }
.signup-form .field { margin-bottom: 1.15rem; }
.signup-form label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--navy); margin-bottom: .4rem; }
.signup-form .req { color: var(--muted); }
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form select {
  width: 100%;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg);
  padding: .8rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.signup-form input::placeholder { color: var(--muted-soft); }
.signup-form input:focus,
.signup-form select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-100);
}
/* Custom caret so the select matches the text inputs across browsers. */
.signup-form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235c6a75' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}
.signup-form select:required:invalid { color: var(--muted); }
.signup-form input:user-invalid { border-color: #b2381c; }

.check-row { display: flex; align-items: flex-start; gap: .6rem; margin: .2rem 0 1.15rem; }
.check-row input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--navy); flex: 0 0 auto; }
.check-row label { margin: 0; font-family: var(--font-body); font-weight: 500; color: var(--text); cursor: pointer; }

.cond {
  margin: -.35rem 0 1.15rem;
  padding: 1.1rem 1.1rem .1rem;
  border-left: 3px solid var(--line-strong);
  background: var(--paper);
}

.turnstile-row { margin: .3rem 0 1.1rem; min-height: 65px; }

.form-status { margin: 0 0 1.1rem; padding: .8rem 1rem; border-radius: var(--radius); font-size: .95rem; line-height: 1.5; }
.form-status--pending { background: var(--paper-2); color: var(--muted); }
.form-status--success { background: #e7f4ec; color: #1f6b40; border: 1px solid #b9e0c8; }
.form-status--error { background: #fbeae6; color: #a5341c; border: 1px solid #f0c4b8; }

.signup-form .btn-lg { width: 100%; }
.form-fineprint { margin-top: 1.1rem; font-size: var(--fs-small); color: var(--muted); }

/* Honeypot: off-screen for humans, tempting for bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══════════════ Style guide page only (/style-guide/) ═══════════════ */
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--paper-2); padding: .1em .35em; border-radius: 2px; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1.5rem 1.25rem; font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
.sg-swatch span { display: block; height: 4.5rem; border: 1px solid var(--line); margin-bottom: .6rem; }
.sg-swatch strong { display: block; color: var(--text); font-family: var(--font-display); font-weight: 650; }
.sg-note { margin-top: 2rem; }
.sg-type { border-top: 1px solid var(--line-strong); }
.sg-type-row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem 2rem; align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid var(--line-strong); }
.sg-type-row > code { justify-self: start; }
.sg-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.015em; color: var(--navy); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.sg-dark { margin-top: 1.25rem; padding: 1.5rem; --focus: var(--amber-200); }
.sg-label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; margin: 3rem 0 1rem; }
.sg-label:first-of-type { margin-top: 0; }
.sg-narrow { max-width: 28rem; }
.sg-narrow-grid { max-width: 44rem; margin-top: 1.5rem; }
@media (max-width: 760px) { .sg-type-row { grid-template-columns: 1fr; gap: .5rem; } }

/* ═══════════════ Responsive ═══════════════ */
@media (max-width: 900px) {
  .split, .split--even, .split--wide-left,
  .bio, .bio--reverse, .feature-row, .feature-row--reverse,
  .quote-pair, .footer-grid { grid-template-columns: 1fr; }
  .bio--reverse .bio-media, .feature-row--reverse .feature-text { order: 0; }
    .bio-media { max-width: var(--headshot-w); }
  .footer-links { justify-content: flex-start; }
}
@media (max-width: 760px) {
  :root { --fs-body: 1rem; }
  .nav-toggle { display: flex; }
  .nav { display: contents; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line-strong);
    padding: .5rem var(--pad-x) 1.2rem;
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .25s var(--ease), visibility 0s linear .25s;
  }
  .nav-links.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .25s var(--ease); }
  .nav-links > li > a { display: block; padding: .85rem 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-links > li > a.active::after { display: none; }
  .nav-links > li:last-child { padding-top: .9rem; }
  .nav-cta { width: 100%; margin: 0; }
  .nav-cta .btn { width: 100%; }
  .logo img { height: 48px; }

  .people { grid-template-columns: minmax(0, var(--headshot-w)); gap: 2.5rem; }
  .topic-row { grid-template-columns: 1fr; gap: .5rem; }
  .topic-row ul { flex-direction: column; }
  .options { grid-template-columns: 1fr; }
  .options > * + * { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-strong); margin-top: 1.5rem; }
  .options > * { padding-right: 0; }
  .hero--photo .hero-inner { min-height: 0; }
}

/* Motion is limited to state changes (mobile menu, form fields). Turn it
   off entirely for people who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}