/* ============================================================
   Staffing Studio -- styles.css
   Shared stylesheet for index, case-studies, sticky-team-retainer, culture
   Built on the xFusion Design System (warm paper + clay + forest + butter)
   ============================================================ */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* COLOR -- Brand */
  --color-paper:        #F7F2EB;
  --color-paper-2:      #EFE8DD;
  --color-paper-3:      #E6DCCB;

  --color-ink:          #1F1A17;
  --color-ink-2:        #3A322D;
  --color-ink-3:        #6B5F56;
  --color-ink-4:        #9E9388;

  --color-rule:         #D9CFBF;
  --color-rule-strong:  #B7A993;

  --color-clay:         #B8512C;
  --color-clay-hover:   #A0451F;
  --color-clay-press:   #863818;
  --color-clay-soft:    #F2D9CB;

  --color-forest:       #2C4A3E;
  --color-forest-hover: #243C32;
  --color-forest-soft:  #D7E0DC;

  --color-butter:       #F0D9A8;
  --color-butter-soft:  #F8EBC9;

  --color-success:      #3A6B4E;
  --color-warning:      #B8851F;
  --color-danger:       #A8341E;
  --color-info:         #2C4A6B;

  /* Semantic aliases */
  --color-bg:           var(--color-paper);
  --color-bg-alt:       var(--color-paper-2);
  --color-bg-inset:     var(--color-paper-3);
  --color-fg:           var(--color-ink);
  --color-fg-muted:     var(--color-ink-2);
  --color-fg-subtle:    var(--color-ink-3);
  --color-fg-disabled:  var(--color-ink-4);
  --color-border:       var(--color-rule);
  --color-border-strong:var(--color-rule-strong);
  --color-primary:      var(--color-clay);
  --color-primary-hover:var(--color-clay-hover);
  --color-primary-press:var(--color-clay-press);
  --color-link:         var(--color-clay);
  --color-on-primary:   var(--color-paper);
  --color-on-forest:    var(--color-paper);

  /* TYPOGRAPHY */
  --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-caption:   12px;
  --fs-small:     14px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-h5:        20px;
  --fs-h4:        24px;
  --fs-h3:        30px;
  --fs-h2:        38px;
  --fs-h1:        48px;
  --fs-display-2: 64px;
  --fs-display-1: 80px;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --lh-tight:   1.3;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.12em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* SPACING */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  --section-pad-y-mobile:  48px;
  --section-pad-y-desktop: 96px;

  /* RADII */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* SHADOWS */
  --shadow-sm: 0 2px 8px rgba(31, 26, 23, 0.05), 0 1px 2px rgba(31, 26, 23, 0.04);
  --shadow-md: 0 8px 24px rgba(31, 26, 23, 0.08), 0 2px 6px rgba(31, 26, 23, 0.05);
  --shadow-lg: 0 24px 48px rgba(31, 26, 23, 0.10), 0 4px 12px rgba(31, 26, 23, 0.06);

  /* LAYOUT */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter-mobile: 16px;
  --gutter-desktop: 24px;

  /* MOTION */
  --ease-enter:  cubic-bezier(0.2, 0, 0, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-slower:  600ms;

  /* Z-INDEX */
  --z-nav:     50;
  --z-overlay: 80;
  --z-modal:   90;
  --z-toast:   100;
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Typography
   ============================================================ */
.display-1, h1.display, .display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-display-2), 6vw, var(--fs-display-1));
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.display-2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h1), 5vw, var(--fs-display-2));
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h2), 4vw, var(--fs-h1));
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h3), 3.2vw, var(--fs-h2));
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.005em;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
}
p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-4);
  color: var(--color-fg);
  text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.55; }
.body-sm, small { font-size: var(--fs-small); line-height: 1.5; }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--color-fg-subtle); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-clay);
  margin: 0 0 var(--space-4);
}

.lede {
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-body-lg), 1.8vw, 22px);
  line-height: 1.55;
  color: var(--color-fg-muted);
  text-wrap: pretty;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-inout);
}
a:hover { color: var(--color-clay-hover); }

:focus-visible {
  outline: 2px solid var(--color-clay);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}
@media (min-width: 768px) {
  .container { padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); }
}
.container--narrow { max-width: 760px; }
.container--reading { max-width: 720px; }

section {
  padding-top: var(--section-pad-y-mobile);
  padding-bottom: var(--section-pad-y-mobile);
}
@media (min-width: 768px) {
  section { padding-top: var(--section-pad-y-desktop); padding-bottom: var(--section-pad-y-desktop); }
}

.section--alt { background: var(--color-bg-alt); }
.section--inset { background: var(--color-bg-inset); }
.section--forest { background: var(--color-forest); color: var(--color-on-forest); }
.section--forest h1, .section--forest h2, .section--forest h3, .section--forest h4 { color: var(--color-on-forest); }
.section--forest p { color: rgba(247, 242, 235, 0.86); }
.section--forest .eyebrow { color: var(--color-butter); }
.section--forest a { color: var(--color-butter); }

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-rule), transparent);
  border: 0;
  margin: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-inout),
    color var(--dur-fast) var(--ease-inout),
    border-color var(--dur-fast) var(--ease-inout),
    box-shadow var(--dur-fast) var(--ease-inout),
    transform var(--dur-fast) var(--ease-inout);
}
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--sm { padding: 8px 14px; font-size: 14px; }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 1px 0 rgba(31,26,23,0.04), 0 2px 6px rgba(184, 81, 44, 0.18);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
  box-shadow: 0 2px 12px rgba(184, 81, 44, 0.25);
  transform: translateY(-1px);
}
.btn--primary:active {
  background: var(--color-primary-press);
  transform: translateY(0);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule-strong);
}
.btn--outline:hover {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--color-bg-alt);
}

.btn--on-forest.btn--primary {
  background: var(--color-clay);
  color: var(--color-paper);
}
.btn--on-forest.btn--outline {
  color: var(--color-paper);
  border-color: rgba(247, 242, 235, 0.4);
}
.btn--on-forest.btn--outline:hover {
  background: var(--color-paper);
  color: var(--color-forest);
  border-color: var(--color-paper);
}

.btn .btn__arrow {
  transition: transform var(--dur-fast) var(--ease-inout);
}
.btn:hover .btn__arrow { transform: translateX(2px); }

/* ============================================================
   Sticky top nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: rgba(247, 242, 235, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-inout), box-shadow var(--dur-base) var(--ease-inout);
}
.nav.is-scrolled {
  border-bottom-color: var(--color-rule);
  box-shadow: var(--shadow-sm);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .nav__inner { padding: 0 var(--gutter-desktop); }
}

.wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.wordmark-accent { color: var(--color-clay); }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--color-ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-inout);
}
.nav__links a:hover { color: var(--color-ink); }
.nav__links a.is-active { color: var(--color-ink); }

.nav__cta { display: inline-flex; align-items: center; }

.nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-ink);
  margin: 4px 0;
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-inout), opacity var(--dur-fast) var(--ease-inout);
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0; right: 0;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-rule);
    padding: var(--space-5) var(--gutter-mobile);
    gap: var(--space-4);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open .nav__cta {
    display: inline-flex;
    position: absolute;
    top: 320px;
    left: var(--gutter-mobile);
    right: var(--gutter-mobile);
  }
  .nav.is-open .nav__cta .btn { width: 100%; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero { padding-top: var(--space-9); padding-bottom: var(--space-10); }
}
.hero__inner { max-width: 880px; }
.hero__h1 {
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.hero__deck {
  max-width: 720px;
  margin-bottom: var(--space-6);
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}
.hero__sub {
  font-size: var(--fs-small);
  color: var(--color-fg-subtle);
  margin-bottom: 0;
}

.hero__trust {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}
.hero__trust-label {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-fg-subtle);
  margin-bottom: var(--space-3);
}
.hero__trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.hero__trust-logos span.trust-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  opacity: 0.78;
}
.hero__trust-logos .sep {
  color: var(--color-rule-strong);
  font-size: 12px;
  user-select: none;
}

/* ============================================================
   Sections, eyebrows, headings
   ============================================================ */
.section-header { max-width: 760px; margin-bottom: var(--space-7); }
.section-header--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ============================================================
   Problem section -- callouts list
   ============================================================ */
.problem-callouts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (min-width: 768px) { .problem-callouts { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 1024px) { .problem-callouts { grid-template-columns: repeat(4, 1fr); } }

.callout {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.section--alt .callout { background: var(--color-paper); }
.callout__metric {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-clay);
  margin-bottom: var(--space-2);
}
.callout__label {
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  line-height: 1.5;
}

/* ============================================================
   Pillars (3-up feature grid)
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-inout), box-shadow var(--dur-base) var(--ease-inout);
}
.section--alt .pillar { background: var(--color-paper); }
.pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pillar__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-clay-soft);
  color: var(--color-clay);
  margin-bottom: var(--space-4);
}
.pillar__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.pillar h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-3);
}
.pillar p { color: var(--color-fg-muted); }
.pillar p:last-child { margin-bottom: 0; }

/* ============================================================
   Process steps (numbered)
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-7);
  counter-reset: step;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
}
.section--alt .step { background: var(--color-paper); }
.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-forest);
  color: var(--color-on-forest);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-4);
}
.step h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.step p {
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   ICP tiers (Who we serve)
   ============================================================ */
.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.tier__label {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
  background: var(--color-butter-soft);
  color: var(--color-ink);
}
.tier__label--founders { background: var(--color-clay-soft); color: var(--color-clay-press); }
.tier__label--operators { background: var(--color-forest-soft); color: var(--color-forest); }
.tier__label--dept-heads { background: var(--color-butter-soft); color: #6B4F00; }
.tier h3 { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.tier p { color: var(--color-fg-muted); margin: 0; }

/* ============================================================
   Stats bar
   ============================================================ */
.stats-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (min-width: 700px) { .stats-bar { grid-template-columns: repeat(3, 1fr); } }

.stat {
  text-align: left;
  padding: var(--space-5);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
}
.section--alt .stat { background: var(--color-paper); }
.stat__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-clay);
  margin-bottom: var(--space-2);
}
.stat__label {
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  line-height: 1.5;
}

/* ============================================================
   Testimonial cards (butter-soft)
   ============================================================ */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }

.testimonial {
  background: var(--color-butter-soft);
  border: 1px solid color-mix(in srgb, var(--color-butter) 60%, var(--color-rule));
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.testimonial__quote {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.testimonial__quote::before {
  content: '\201C';
  font-family: var(--font-display);
  color: var(--color-clay);
  margin-right: 2px;
}
.testimonial__quote::after {
  content: '\201D';
  font-family: var(--font-display);
  color: var(--color-clay);
  margin-left: 2px;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-butter);
  color: var(--color-clay-press);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
  overflow: hidden;
}
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__name {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: 1.3;
}
.testimonial__title {
  font-size: 13px;
  color: var(--color-fg-subtle);
  line-height: 1.3;
}

/* ============================================================
   Pull quote (inline, single)
   ============================================================ */
.pull-quote {
  margin: var(--space-7) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-clay);
  background: var(--color-butter-soft);
  border-radius: var(--radius-md);
}
.pull-quote__text {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}
.pull-quote__attr {
  font-size: 14px;
  color: var(--color-fg-subtle);
  margin: 0;
}

/* ============================================================
   Pricing card
   ============================================================ */
.pricing-card {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  margin-top: var(--space-6);
}
.pricing-card--featured {
  border-color: var(--color-clay);
  box-shadow: 0 4px 24px rgba(184,81,44,0.10);
}
.pricing-card__eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-clay);
  margin-bottom: var(--space-3);
}
.pricing-card__amount {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.pricing-card__deck { color: var(--color-fg-muted); margin-bottom: var(--space-5); }
.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
}
.pricing-card__list li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-fg-muted);
  font-size: 15px;
  line-height: 1.55;
}
.pricing-card__list li:last-child { border-bottom: 0; }
.pricing-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background-color: var(--color-clay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.5L3.5 8.5L4.5 7.5L6.5 9.5L11.5 4.5L12.5 5.5L6.5 11.5Z' fill='%23F7F2EB'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
}
.pricing-card__list li strong {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

/* Compare grid */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 900px) { .compare { grid-template-columns: repeat(2, 1fr); } }
.compare__cell {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.compare__cell--us {
  background: var(--color-paper);
  border-color: var(--color-clay);
}
.compare__cell h4 {
  font-size: var(--fs-h5);
  margin-bottom: var(--space-2);
  letter-spacing: -0.005em;
}
.compare__cell p {
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  margin: 0;
}

/* ============================================================
   About / Founder block
   ============================================================ */
.founder {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
  align-items: start;
}
@media (min-width: 900px) { .founder { grid-template-columns: 280px 1fr; gap: var(--space-8); } }

.founder__photo {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 700px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
.value {
  padding: var(--space-4) var(--space-5);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
}
.section--alt .value { background: var(--color-paper); }
.value h4 {
  font-size: 16px;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.value p {
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  margin: 0;
  line-height: 1.55;
}

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}
.faq__item {
  border-bottom: 1px solid var(--color-rule);
}
.faq__q {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-inout);
}
.faq__q:hover { color: var(--color-clay); }
.faq__q-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  color: var(--color-ink-3);
  transition: transform var(--dur-base) var(--ease-inout), color var(--dur-fast) var(--ease-inout);
}
.faq__item.is-open .faq__q-icon {
  transform: rotate(180deg);
  color: var(--color-clay);
}
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-inout);
}
.faq__item.is-open .faq__a { max-height: 1200px; }
.faq__a-inner {
  padding: 0 0 var(--space-5) 0;
  background: var(--color-bg-alt);
  margin: 0 calc(var(--space-5) * -1);
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  padding-top: var(--space-3);
  border-radius: var(--radius-md);
}
.faq__a p {
  color: var(--color-fg-muted);
  font-size: 15px;
  line-height: 1.65;
}
.faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
   Final CTA panel (forest)
   ============================================================ */
.final-cta {
  background: var(--color-forest);
  color: var(--color-on-forest);
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-6);
  text-align: center;
  margin-top: var(--space-8);
}
@media (min-width: 768px) { .final-cta { padding: var(--space-10) var(--space-9); } }
.final-cta h2 {
  color: var(--color-on-forest);
  font-size: clamp(28px, 4vw, 44px);
  max-width: 720px;
  margin: 0 auto var(--space-5);
}
.final-cta p {
  color: rgba(247, 242, 235, 0.86);
  max-width: 620px;
  margin: 0 auto var(--space-6);
  font-size: var(--fs-body-lg);
}
.final-cta .btn--primary {
  background: var(--color-clay);
}
.final-cta .btn--primary:hover {
  background: var(--color-clay-hover);
}
.final-cta__sub {
  color: rgba(247, 242, 235, 0.6) !important;
  font-size: var(--fs-small) !important;
  margin-top: var(--space-4) !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--color-paper-2);
  border-top: 1px solid var(--color-rule);
  padding: var(--space-8) 0 var(--space-7);
  margin-top: var(--space-9);
}
.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .footer__inner { padding: 0 var(--gutter-desktop); grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); }
}
.footer__brand .wordmark { font-size: 24px; }
.footer__tagline {
  margin-top: var(--space-3);
  color: var(--color-fg-muted);
  font-size: var(--fs-small);
  max-width: 360px;
}
.footer__col h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-fg-subtle);
  margin-bottom: var(--space-4);
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer__col a {
  color: var(--color-fg-muted);
  text-decoration: none;
  font-size: var(--fs-small);
}
.footer__col a:hover { color: var(--color-ink); text-decoration: underline; }
.footer__bottom {
  max-width: var(--container-max);
  margin: var(--space-7) auto 0;
  padding: var(--space-5) var(--gutter-mobile) 0;
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  color: var(--color-fg-subtle);
  font-size: var(--fs-small);
}
@media (min-width: 768px) { .footer__bottom { padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); } }
.footer__bridge {
  color: var(--color-fg-muted);
}
.footer__bridge a { color: var(--color-clay); font-weight: var(--fw-medium); text-decoration: none; }
.footer__bridge a:hover { text-decoration: underline; }

/* ============================================================
   Case studies grid + detail panels
   ============================================================ */
.cs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 700px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cs-grid { grid-template-columns: repeat(3, 1fr); } }

.cs-tile {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-inout), box-shadow var(--dur-base) var(--ease-inout), border-color var(--dur-base) var(--ease-inout);
  text-decoration: none;
  color: inherit;
  font: inherit;
}
.cs-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-rule-strong);
}
.cs-tile__photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-alt);
  margin-bottom: var(--space-4);
}
.cs-tile__company {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  line-height: 1.2;
  margin-bottom: var(--space-1);
  letter-spacing: -0.01em;
}
.cs-tile__person {
  font-size: var(--fs-small);
  color: var(--color-fg-subtle);
  margin-bottom: var(--space-3);
}
.cs-tile__badge {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-forest-soft);
  color: var(--color-forest);
  margin-bottom: var(--space-4);
}
.cs-tile__outcome {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-fg-muted);
  margin: 0 0 var(--space-5);
  flex: 1;
}
.cs-tile__cta {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--color-clay);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cs-tile:hover .cs-tile__cta { color: var(--color-clay-hover); }

.cs-detail {
  display: none;
}
.cs-detail.is-active {
  display: block;
}
.cs-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 8px 0;
  margin-bottom: var(--space-5);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--color-clay);
}
.cs-detail__back:hover { color: var(--color-clay-hover); }
.cs-detail__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (min-width: 700px) { .cs-detail__header { flex-direction: row; align-items: center; gap: var(--space-6); } }
.cs-detail__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-alt);
  flex-shrink: 0;
}
.cs-detail__title { margin: 0 0 4px; }
.cs-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-fg-subtle);
}

.cs-detail__hero-quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35;
  color: var(--color-ink);
  border-left: 3px solid var(--color-clay);
  padding-left: var(--space-5);
  margin: var(--space-6) 0 var(--space-7);
  text-wrap: pretty;
  letter-spacing: -0.005em;
}
.cs-detail__hero-quote-attr {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-fg-subtle);
  letter-spacing: 0;
}

.cs-detail__body {
  max-width: 760px;
}
.cs-detail__body h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-clay);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.cs-detail__body h3:first-child { margin-top: 0; }
.cs-detail__body p { font-size: var(--fs-body-lg); line-height: 1.65; color: var(--color-fg); }

/* ============================================================
   Sticky-team retainer page bits
   ============================================================ */
.feature-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-top: var(--space-7);
}
@media (min-width: 900px) { .feature-block { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.feature-block__media {
  background: var(--color-butter-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  border: 1px solid color-mix(in srgb, var(--color-butter) 60%, var(--color-rule));
}
.feature-block__media h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
}
.feature-block__media p { color: var(--color-fg-muted); margin: 0; }
.feature-block__copy h2 { margin-bottom: var(--space-4); }
.feature-block__copy p { color: var(--color-fg-muted); }

.included-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}
@media (min-width: 700px) { .included-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .included-list { grid-template-columns: repeat(3, 1fr); } }
.included-list__item {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.section--alt .included-list__item { background: var(--color-paper); }
.included-list__item h4 {
  font-size: 16px;
  margin-bottom: var(--space-2);
  letter-spacing: -0.005em;
}
.included-list__item p {
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  margin: 0;
  line-height: 1.6;
}

/* Reading body */
.reading h2 { margin-top: var(--space-8); }
.reading h2:first-child { margin-top: 0; }
.reading h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  letter-spacing: -0.005em;
}
.reading p, .reading li {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--color-fg);
}
.reading ul { padding-left: 22px; margin: 0 0 var(--space-5); }
.reading ul li { margin-bottom: var(--space-2); }
.reading strong { color: var(--color-ink); }

/* ============================================================
   Fade-in (IntersectionObserver)
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-enter), transform var(--dur-slow) var(--ease-enter);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-delay-1 { transition-delay: 80ms; }
.fade-in-delay-2 { transition-delay: 160ms; }
.fade-in-delay-3 { transition-delay: 240ms; }

/* ============================================================
   Utility
   ============================================================ */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.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;
}