/* ==========================================================================
   Hartwell & Co. — brand system
   Spec: docs/site-redesign/specs/00-foundation-brand-nav.spec.md

   Confirmed brand tokens (do not adjust — see DESIGN.md §2):
     --teal, --cream, --gold, --bronze

   Background/panel/ink neutrals below are DERIVED, not confirmed by Mary —
   sanity-check against her brand guide before treating them as final:
     --bg     #FAF7F0  near-white cream, derived by lightening --cream
     --panel  #FFFFFF  card/panel background
     --border #E3D9C3  derived from --cream, for hairline rules/card borders
     --ink        #142621  derived dark teal-black, body/heading text
     --ink-soft   #4B5D57  derived muted teal-gray, secondary text

   Do not reuse the pre-rebrand palette from the current site/index.html
   (--green-900: #0e3b2e, --gold: #c9a66b, etc.) — that system is replaced,
   not a reference point, by this rebuild.
   ========================================================================== */

:root {
  /* Confirmed brand tokens — final, do not adjust */
  --teal: #0E4B45;
  --cream: #E4CDA0;
  --gold: #B8935A;
  --bronze: #8A6A3C;

  /* Derived neutrals — reasonable engineering judgment, flagged for Mary */
  --bg: #FAF7F0;
  --panel: #FFFFFF;
  --border: #E3D9C3;
  --ink: #142621;
  --ink-soft: #4B5D57;

  /* Type system — brief's reference pair (Fraunces/Libre Franklin),
     swappable per DESIGN.md §2, not locked */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 6px;
  --max-width: 1160px;
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--teal);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

a { color: inherit; }

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

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bronze);
  margin-bottom: 0.75rem;
}

hr.rule {
  border: none;
  border-top: 2px solid var(--gold);
  width: 48px;
  margin: 1.25rem 0;
}

/* --------------------------------------------------------------------------
   CTA button — THE shared component (spec-contract.md §4's canonical
   example of "one flexible component behind several entry points").

   Resolved by specs/07-social-proof-cta-system.spec.md: rather than build a
   second system from scratch, this is confirmed as the one component every
   page's CTA uses. "Labeled variants" (Talk to Mary · Bring Hartwell & Co.
   In · Book Mary to Speak · Request an AI Readiness Conversation · Explore
   the Governance Framework · Read the Latest Insight) means the LABEL TEXT
   changes per context, not the visual system — .btn-primary/.btn-outline/
   .btn-gold below are the only three visual variants, chosen by the
   background they sit on, same as specs 0/1/2/3 already use them. If
   you're adding a CTA on a new page, reuse one of these three classes with
   your own label + href; don't add a fourth.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--teal);
  color: var(--cream);
  border-color: var(--teal);
}
.btn-primary:hover { background: #0B3A35; }

.btn-outline {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.btn-outline:hover { background: var(--teal); color: var(--cream); }

/* High-contrast variant for CTAs placed on a dark/teal background (e.g.
   the Home hero, closing CTA bands) — .btn-primary's teal-on-cream loses
   contrast there. Confirmed as the third and final visual variant by
   spec 07 — don't add a fourth. */
.btn-gold {
  background: var(--gold);
  color: var(--teal);
  border-color: var(--gold);
}
.btn-gold:hover { background: var(--cream); }

/* --------------------------------------------------------------------------
   Global header / nav
   Markup lives in site/assets/partials/header.html — copy byte-for-byte
   into every page (no build step / includes; see DESIGN.md §4). Keep this
   CSS and that markup in sync.
   -------------------------------------------------------------------------- */

header.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 247, 240, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 0;
  position: relative; /* anchors the mobile dropdown below */
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  min-width: 0; /* allow this flex child to shrink/truncate instead of
                   pushing the toggle/CTA off-screen on narrow viewports */
  flex: 1 1 auto;
}

.site-brand img {
  /* Logo PNG is the full lockup (mark + wordmark + tagline baked in, per
     its 2750x750 source aspect ratio) — no separate text is rendered
     alongside it. height is fixed on larger screens; the mobile media
     query below shrinks it so it can never force horizontal overflow next
     to the nav controls. */
  height: 48px;
  width: auto;
  max-width: 100%;
}

/* Toggle + persistent mobile CTA are a fixed-size group that never shrinks,
   so they can't be squeezed off-screen by a long brand name/tagline. */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

nav.site-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

nav.site-links a:not(.btn) {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
nav.site-links a:not(.btn):hover { color: var(--teal); }

nav.site-links a.btn { padding: 0.6rem 1.25rem; font-size: 0.88rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle svg { display: block; width: 26px; height: 26px; stroke: var(--teal); }

/* Always-visible mobile "Let's Talk" shortcut — a sibling of nav.site-links,
   not inside it, so it stays reachable without opening the menu (spec 0
   §Navigation is explicit about this). Hidden on desktop, where the full
   nav already shows Let's Talk. */
.nav-cta-mobile { display: none; }

/* Mobile nav: collapses at phone widths; "Let's Talk" stays visible outside
   the collapsed menu per spec 0 §Navigation. */
@media (max-width: 760px) {
  .site-brand img { height: 38px; } /* reclaim width for nav controls */

  nav.site-links { display: none; }

  nav.site-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem 1.5rem;
    gap: 1rem;
    z-index: 30;
  }

  nav.site-links.is-open a.btn { align-self: flex-start; }

  .nav-toggle { display: block; }

  .nav-cta-mobile { display: inline-block; padding: 0.55rem 1rem; font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   Global footer
   Markup lives in site/assets/partials/footer.html — same copy-paste rule
   as the header.
   -------------------------------------------------------------------------- */

footer.site-footer {
  background: var(--teal);
  color: var(--cream);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}

footer.site-footer .footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(228, 205, 160, 0.25);
}

footer.site-footer .footer-tagline {
  font-family: var(--font-display);
  font-size: 1.05rem;
  max-width: 32ch;
  color: var(--cream);
}

footer.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

footer.site-footer nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.9rem;
  opacity: 0.9;
}
footer.site-footer nav a:hover { opacity: 1; text-decoration: underline; }

footer.site-footer .footer-bottom {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: rgba(228, 205, 160, 0.75);
}

/* --------------------------------------------------------------------------
   Reusable visual motif library
   2-3 brand-consistent treatments for reuse across Insights articles and
   Speaking topic cards (spec 0 §Reusable visual motif library) — not a full
   illustration system at launch, just shared visual language so later specs
   don't each invent their own. Icon glyphs referenced via assets/icons.svg
   (see that file's <symbol> ids).
   -------------------------------------------------------------------------- */

/* 1. Pull-quote card — a bordered card carrying a single statement, in the
   vein of Mary's "Who's Minding the Farm?"-style LinkedIn posts. The fuller
   pull-quote component (with citation/attribution slot) is built out in
   specs/03-governance-method.spec.md — this is the shared visual shell. */
.motif-quote-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 2rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--teal);
  max-width: 60ch;
}

.motif-quote-card .motif-quote-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* 2. Stat-callout block — a single large figure + label, for pulling out a
   number (an ROI stat, a regulatory figure) inside body copy. */
.motif-stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: inline-block;
  min-width: 180px;
}

.motif-stat .motif-stat-figure {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--teal);
  line-height: 1;
}

.motif-stat .motif-stat-label {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

.motif-stat .motif-stat-source {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Grid wrapper for laying out multiple .motif-stat cards side by side
   (e.g. supporting-evidence sections) — reuses the same card, just adds
   layout, per spec-contract §4 (don't rebuild the card for a grid). */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.stat-grid .motif-stat { display: block; width: 100%; }

/* 3. Simple line-icon set — see assets/icons.svg. Styled uniformly here so
   every use (Insights category tags, Speaking topic cards, etc.) matches. */
.motif-icon {
  width: 32px;
  height: 32px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 1.5;
}

/* --------------------------------------------------------------------------
   Page-section rhythm — generic spacing/background primitives, first needed
   by specs/01-home.spec.md but sitewide (every later page uses these, not
   just Home).
   -------------------------------------------------------------------------- */

.section { padding: 4.5rem 0; }
.section-alt { background: var(--panel); }

.section-head {
  max-width: 62ch;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.section-head p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

/* --------------------------------------------------------------------------
   Recurring brand statement
   "Governance isn't what slows AI down. It's what lets you scale it." —
   sitewide brand statement (DESIGN.md §2), not a one-off homepage line.
   Used standalone (Home hero) and inside the footer partial; every later
   spec that closes a page/section should consider reusing this class
   rather than a new one-off treatment.
   -------------------------------------------------------------------------- */

.brand-statement {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--teal);
  border-top: 2px solid var(--gold);
  padding-top: 1.25rem;
  margin-top: 2rem;
  max-width: 42ch;
}

/* --------------------------------------------------------------------------
   Closing CTA band
   Generic page-ending CTA band, reusing the shared .btn system (see CTA
   button base above). Distinct from specs/04-insights.spec.md's per-article
   end-of-article CTA (task 20) — that one carries a custom line per
   article; this is the plain sitewide closer.
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--teal);
  color: var(--cream);
  text-align: center;
  padding: 4rem 0;
}

.cta-band h2 { color: var(--cream); }

.cta-band p {
  color: #D7E6E1;
  max-width: 52ch;
  margin: 0 auto 2rem;
}

.cta-band .btn-primary {
  background: var(--cream);
  color: var(--teal);
  border-color: var(--cream);
}
.cta-band .btn-primary:hover { background: #fff; }

/* --------------------------------------------------------------------------
   Step flow — simple N-step numbered process graphic.
   First built by specs/02-advisory.spec.md (Assess -> Build -> Advise), which
   explicitly asks for this to be reusable, not page-specific. DESIGN.md §3
   doesn't list it — check there before adding a duplicate if you're
   implementing Home or Governance Method and want a similar 3-step visual.
   -------------------------------------------------------------------------- */

.step-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}

.step-flow .step {
  text-align: center;
  padding: 1.5rem;
}

.step-flow .step .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
}

.step-flow .step h3 { margin-bottom: 0.5rem; }

.step-flow .step p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* --------------------------------------------------------------------------
   Method flow — vertical N-stage diagram, connected by a rule.
   First built by specs/03-governance-method.spec.md (the 6-stage Hartwell
   Governance Method™). DESIGN.md §3 flags this as a possible visual anchor
   on Home/Advisory too — reuse this implementation there, don't rebuild it.
   -------------------------------------------------------------------------- */

.method-flow {
  max-width: 480px;
  margin: 0 auto;
}

.method-flow .method-stage {
  position: relative;
  padding: 0 0 2.5rem 3rem;
  border-left: 2px solid var(--border);
}

.method-flow .method-stage:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.method-flow .method-stage::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid var(--bg);
}

.method-flow .method-stage h3 {
  margin: 0;
  font-size: 1.2rem;
}

/* --------------------------------------------------------------------------
   Pull-quote — headline-weight core-belief statement, with optional
   attribution. First built by specs/03-governance-method.spec.md.

   NOT the same component as spec 0's .motif-quote-card (a lighter,
   bordered-card treatment for Insights/Speaking's visual motif library).
   This one is heavier-weight — a standalone editorial statement, no card/
   border chrome — for a page's single core-belief moment. When
   specs/04-insights.spec.md needs a quote inside an article, check which
   weight actually fits before picking one; don't build a third variant.
   -------------------------------------------------------------------------- */

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--teal);
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
  line-height: 1.25;
}

.pull-quote cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bronze);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Experience-across strip — social proof, launch version (text-only).
   First built by specs/07-social-proof-cta-system.spec.md. Deliberately
   plain markup (a wrapped list of text items) so PHASE 2 (client logos
   where permitted, testimonials, podcast/press logos — headlined "Trusted
   by leaders navigating complex data and AI transformations") can swap
   .experience-item text spans for <img> logos or add a testimonial variant
   inside this same container, without restructuring the section around it.
   Do not fill these in with fabricated logos/testimonials before that
   content is real — spec-contract.md §2 (PHASE 2).
   -------------------------------------------------------------------------- */

.experience-strip { text-align: center; }

.experience-strip .eyebrow { display: block; }

.experience-strip .experience-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--teal);
}

/* --------------------------------------------------------------------------
   Manifesto — large, stacked editorial statements. First built by
   specs/06-about-mary-what-i-believe.spec.md ("What I Believe"). Not a
   bulleted list — each line is its own visual moment, generous vertical
   rhythm, separated by a thin rule rather than list markup. DESIGN.md §3
   doesn't list this as reused elsewhere yet, but it's built as a shared
   primitive (not page-specific CSS) in case a later spec wants the same
   treatment for its own stacked statements.
   -------------------------------------------------------------------------- */

.manifesto {
  background: var(--teal);
  color: var(--cream);
  padding: 6rem 0;
}

.manifesto .manifesto-statement {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.5vw, 2.75rem);
  line-height: 1.3;
  text-align: center;
  max-width: 20ch;
  margin: 0 auto;
  padding: 2rem 0;
}

.manifesto .manifesto-statement + .manifesto-statement {
  border-top: 1px solid rgba(228, 205, 160, 0.25);
}

/* --------------------------------------------------------------------------
   Content placeholder — a visibly distinct block for content that isn't
   real yet (a pending narrative paragraph, a photo not yet supplied).
   Reuses the same dashed-border language as the Frameworks "coming soon"
   cards (specs/03-governance-method.spec.md) so "this isn't final" reads
   consistently sitewide, rather than each page inventing its own way to
   flag a placeholder.
   -------------------------------------------------------------------------- */

.content-placeholder {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  color: var(--ink-soft);
  font-style: italic;
  background: var(--panel);
}

.content-placeholder .placeholder-flag {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.photo-placeholder {
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  padding: 1.5rem;
}