/*
Theme Name:   Ignition Canvas
Description:  Ignition Canvas — fully custom standalone theme.
Version:      1.0.0
Text Domain:  ignition-canvas
*/

/* ===========================================================
   Self-hosted fonts — Outfit, Source Sans 3, JetBrains Mono
   latin-ext covers accented Latin characters (é, ñ, etc.)
   latin  covers standard ASCII + common symbols
   =========================================================== */

/* Outfit — latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Outfit — latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/outfit-latin.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;
}

/* Source Sans 3 — latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Sans 3 — latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/source-sans-3-latin.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;
}

/* JetBrains Mono — latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono — latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin.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;
}

/* ===========================================================
   WordPress block-theme / global-styles reset
   Must come first so our component rules win cleanly.
   =========================================================== */

/* Reset global styles that WordPress core injects via theme.json,
   so they don't override our custom design. */
body,
.wp-site-blocks,
.wp-block-group,
.wp-block-template-part,
.entry-content,
.wp-block-post-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  background: transparent !important;
}

/* WordPress block-theme adds a --wp--style--root--padding that pushes
   content inward. Neutralize it completely. */
:root {
  --wp--style--root--padding-top: 0 !important;
  --wp--style--root--padding-right: 0 !important;
  --wp--style--root--padding-bottom: 0 !important;
  --wp--style--root--padding-left: 0 !important;
}

/*
 * WordPress core applies text-decoration: underline to anchors globally.
 * Strip it from every element that should look like a button or nav link.
 */
a.btn,
a.btn:visited,
a.btn:hover,
a.btn:focus,
a.btn:active,
.nav__cta,
.nav__cta:visited,
.nav__cta:hover,
.nav__link,
.nav__link:visited,
.nav__dropdown a,
.nav__dropdown a:visited,
.mobile-drawer__list a,
.mobile-drawer__list a:visited,
.mobile-drawer__cta,
.mobile-drawer__cta:visited,
.sticky-cta,
.sticky-cta:visited,
.footer__links a,
.footer__links a:visited {
  text-decoration: none;
}


/* ===========================================================
   Homepage Redesign
   Direction A — single-page marketing layout, fluidly responsive
   between 1280px desktop and 375px mobile.
   =========================================================== */

/* -----------------------------------------------------------
   Tokens
   ----------------------------------------------------------- */
:root {
  /* Brand palette */
  --white:       #ffffff;
  --ink:         #43352F;
  --cream:       #F7F4E0;
  --paper:       #F4F2EC;
  --beige:       #B5AC8D;
  --mustard:     #FFD365;
  --accent:      #E36038;
  --accent-warm: #EE7728;
  --amber:       #F39200;
  --evergreen:   #6A7A5C;
  --muted:       #6e6258;

  --gradient-accent: linear-gradient(135deg, #CC4A1A 0%, #E8742A 50%, #F5A030 100%);

  /* Shadows */
  --shadow-card:    0 1px 2px rgba(67,53,47,0.04), 0 8px 24px  rgba(67,53,47,0.06);
  --shadow-card-md: 0 2px 4px rgba(67,53,47,0.06), 0 16px 40px rgba(67,53,47,0.10);
  --shadow-card-lg: 0 4px 12px rgba(67,53,47,0.08), 0 24px 64px rgba(67,53,47,0.14);
  --shadow-btn:     0 1px 0 rgba(0,0,0,0.04), 0 6px 14px  rgba(227,96,56,0.18);
  --shadow-btn-lg:  0 1px 0 rgba(0,0,0,0.04), 0 12px 28px rgba(227,96,56,0.28);

  /* Derived */
  --hairline:        rgba(67, 53, 47, 0.07);
  --hairline-cream:  rgba(247, 244, 224, 0.13);
  --canvas-bg:       url('assets/canvas-bg-1024.webp');

  /* Layout */
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4rem, 6vw + 1rem, 7.5rem);
}

/* -----------------------------------------------------------
   Base
   ----------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html,
body {
  margin: 0;
  /* Canvas texture on both so nothing can paint a dark colour behind .page.
     !important beats the block-theme transparent reset earlier in this file. */
  background:
    linear-gradient(rgba(244,242,236,0.25), rgba(244,242,236,0.25)),
    var(--canvas-bg) !important;
  background-size:     cover, 100% auto !important;
  background-position: center, top left !important;
  background-repeat:   no-repeat, repeat-y !important;
  color: var(--ink);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; }

h1 { font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem); }

.page {
  width: 100%;
  background: transparent;
  color: var(--ink);
  position: relative;
  overflow-x: clip;               /* prevent horizontal scroll from full-bleed subway map */
}

/* -----------------------------------------------------------
   Reveal-on-scroll
   Default state shows everything — JS opts in to the hidden state
   by adding .ic-reveal-ready to <html>. That way content is visible
   even if main.js fails to load or run for any reason.
   ----------------------------------------------------------- */
.ic-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity     700ms cubic-bezier(.2,.7,.2,1),
    transform   700ms cubic-bezier(.2,.7,.2,1);
}
.ic-reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ic-reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
  .ic-chev-anim,
  .ic-orbit { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* -----------------------------------------------------------
   Animated chevron mark (used in hero + final CTA)
   ----------------------------------------------------------- */
@keyframes ic-chev-float {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(-2deg); }
}
@keyframes ic-chev-pulse {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(227,96,56,0));    }
  50%       { filter: drop-shadow(0 8px 18px rgba(227,96,56,0.35)); }
}
.ic-chev-anim {
  animation:
    ic-chev-float 4.5s ease-in-out infinite,
    ic-chev-pulse 4.5s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, filter;
}

/* -----------------------------------------------------------
   Canvas-paper texture (hero shell + final CTA)
   ----------------------------------------------------------- */
.hero-shell,
.final-cta,
.canvas-bg {
  background: transparent;
}

/* -----------------------------------------------------------
   Headline gradient — orange → amber, painted via background-clip
   ----------------------------------------------------------- */
.gradient-head {
  background-image: linear-gradient(180deg,
    var(--accent)      0%,
    var(--accent)      30%,
    var(--accent-warm) 55%,
    var(--amber)       100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  padding-bottom: 0.12em;          /* keep descenders from clipping */
}

/* -----------------------------------------------------------
   Buttons
   ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: none;
  border-radius: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 150ms ease,
    box-shadow 200ms ease,
    filter 150ms ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px var(--accent),
    0 1px 0 rgba(0,0,0,0.04),
    0 6px 14px rgba(227,96,56,0.18);
}
.btn--accent {
  background: var(--gradient-accent);
  box-shadow: var(--shadow-btn);
}
.btn--lg {
  padding: 20px 36px;
  font-size: 18px;
  border-radius: 6px;
  box-shadow: var(--shadow-btn-lg);
}
.btn__arrow { font-size: 16px; line-height: 1; }

.link-underline {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  cursor: pointer;
  transition: color 150ms ease;
}
.link-underline:hover         { color: var(--accent); }
.link-underline:focus-visible {
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* -----------------------------------------------------------
   Eyebrow / kicker (mono, uppercase, tracked)
   ----------------------------------------------------------- */
.eyebrow,
h1.eyebrow,
.kicker {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0;
}
.eyebrow,
h1.eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 24px;
}
.kicker {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 12px;
}
.kicker--spaced { margin-top: 28px; }

/* -----------------------------------------------------------
   Sticky nav (rendered by header.php)
   ----------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background:
    linear-gradient(rgba(244,242,236,0.25), rgba(244,242,236,0.25)),
    var(--canvas-bg);
  background-size:     cover, 100% auto;
  background-position: center, top left;
  background-repeat:   no-repeat, repeat-y;
  border-bottom: 1px solid rgba(67,53,47,0.06);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 16px var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
}
.nav__logo-link { display: inline-flex; }
.nav__logo      { height: clamp(90px, 4.925rem + 1.25vw, 112.5px); width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
}
.nav__link:hover         { color: var(--accent); }
.nav__link:focus-visible {
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.nav__caret {
  font-size: 11px;
  line-height: 1;
  color: rgba(67,53,47,0.5);
  transition: transform 200ms ease;
}
.nav__item--has-dropdown:hover       .nav__caret,
.nav__item--has-dropdown:focus-within .nav__caret { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 10;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid rgba(67,53,47,0.08);
  border-radius: 10px;
  box-shadow:
    0 12px 30px rgba(67,53,47,0.10),
    0 2px 6px   rgba(67,53,47,0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity   180ms ease,
    transform 180ms ease,
    visibility 180ms;
}
.nav__item--has-dropdown:hover       > .nav__dropdown,
.nav__item--has-dropdown:focus-within > .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
.nav__dropdown a:hover {
  background: rgba(227,96,56,0.08);
  color: var(--accent);
}

.nav__cta { text-decoration: none; }

/* Hamburger — hidden on desktop, shown on mobile */
.nav__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease, width 200ms ease;
}
.nav__hamburger span:nth-child(2) { width: 16px; }
.nav__hamburger.is-open span:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}
.nav__hamburger.is-open span:nth-child(2) {
  width: 22px;
  transform: translateY(-4px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 16px var(--gutter) 24px;
  background: var(--paper);
  border-bottom: 1px solid rgba(67,53,47,0.08);
  box-shadow: 0 12px 30px rgba(67,53,47,0.12);
}
.mobile-drawer[hidden]    { display: none; }
.mobile-drawer.is-open    { display: block; }
.mobile-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-drawer__list li         { border-bottom: 1px solid rgba(67,53,47,0.06); }
.mobile-drawer__list li:last-child { border-bottom: none; }
.mobile-drawer__list a {
  display: block;
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-display);
  color: var(--ink);
  text-decoration: none;
}
.mobile-drawer__sub a {
  padding-left: 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}
.mobile-drawer__cta {
  display: inline-flex;
  margin-top: 18px;
  text-decoration: none;
}

/* -----------------------------------------------------------
   Section primitives — used by sections 3-7
   ----------------------------------------------------------- */
.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 24px;
}
.section-label--mustard { color: var(--mustard); }

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1rem + 2.6vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 760px;
  color: var(--ink);
  padding-bottom: 0.08em;
}
.section-title--cream    { color: var(--cream); }
.section-title--centered {
  font-size: clamp(2.5rem, 1rem + 3.6vw, 4.5rem);
  margin: 0 auto;
  text-align: center;
  line-height: 1.05;
  letter-spacing: -0.018em;
}

.section-lede {
  font-size: clamp(0.95rem, 0.7rem + 0.4vw, 1.0625rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 640px;
  margin: 24px 0 0;
}
.section-lede--cream     { color: #cdc6b8; }
.section-lede--centered  {
  margin: 24px auto clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

/* -----------------------------------------------------------
   SECTION 2 · HERO
   ----------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem) var(--gutter) var(--section-y);
  max-width: 1280px;
  margin-inline: auto;
}

.hero__corner {
  position: absolute;
  top: 0.5rem;
  right: -2rem;
  width: clamp(56px, 5vw + 1.5rem, 92px);
  height: auto;
  z-index: 3;
}
.hero__corner:hover {
  animation-play-state: paused;
  transform: translateY(-6px) rotate(-4deg) scale(1.06);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}

.hero__lead { position: relative; min-width: 0; }

.headline,
h2.headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

.subhead {
  margin-top: clamp(1rem, 1.5vw, 2rem);
  font-size: clamp(1rem, 0.7rem + 0.5vw, 1.1875rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 540px;
}

.hero__ctas {
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__callout {
  margin-top: 88px;
  padding: 24px 26px 26px;
  background: rgba(247, 244, 224, 0.72);
  border: 1px solid rgba(227, 96, 56, 0.19);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  box-shadow:
    0 1px 0  rgba(255,255,255,0.6) inset,
    0 10px 24px rgba(67,53,47,0.06);
}
.hero__callout-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* -----------------------------------------------------------
   SECTION 3 · PROCESS  (dark surface)
   ----------------------------------------------------------- */
.process {
  position: relative;
  overflow: hidden;
  padding:
    clamp(5rem, 7vw, 7.5rem)
    var(--gutter)
    clamp(5rem, 7vw, 8rem);
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%,
      rgba(227,96,56,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 10% 100%,
      rgba(255,211,101,0.10) 0%, transparent 50%),
    linear-gradient(180deg, #312822 0%, #221a16 100%);
  color: var(--cream);
}
.process__texture {
  position: absolute;
  inset: 0;
  background-image:  var(--canvas-bg);
  background-size:   100% auto;
  background-repeat: repeat-y;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
}
.process__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin-inline: auto;
}

/* Subway map host — full-bleed within the section, aspect-locked to the SVG. */
.process__map {
  position: relative;
  margin: 56px calc(-1 * var(--gutter)) 32px;
  width: calc(100% + 2 * var(--gutter));
  aspect-ratio: 1200 / 480;
  max-height: 540px;
  pointer-events: none;
}
.process__map svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tab strip + panel */
.process__tabs-wrap { display: block; }

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px 4px 0;
  background: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(247, 244, 224, 0.10);
  border-radius: 8px 8px 0 0;
}
.tab {
  flex: 1;
  text-align: left;
  padding: 22px 24px;
  background: transparent;
  border: none;
  border-top: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  color: inherit;
  cursor: pointer;
  margin-bottom: -1px;
  transition: all 200ms ease;
}
.tab.is-active {
  background: linear-gradient(180deg,
    rgba(247,244,224,0.97),
    rgba(247,244,224,0.93));
  border-top-color: var(--accent);
}
.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.tab__num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(247,244,224,0.47);
  margin-bottom: 6px;
}
.tab__title {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: rgba(247,244,224,0.8);
}
.tab.is-active .tab__num   { color: var(--accent); }
.tab.is-active .tab__title { color: var(--ink); }

.tab-panel {
  background: var(--cream);
  border: 1px solid rgba(67, 53, 47, 0.08);
  border-top: none;
}
.tab-body {
  margin: 0;
  padding: 40px 32px 36px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 760px;
}
.is-hidden { display: none; }

/* Mobile vertical timeline — replaces map+tabs at the breakpoint. */
.process__timeline {
  display: none;
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  position: relative;
}
.process__timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--accent) 0%,
    rgba(227,96,56,0.4) 50%,
    rgba(255,211,101,0.25) 100%);
}
.timeline-step {
  position: relative;
  padding: 0 0 32px 60px;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step__dot {
  position: absolute;
  left: 4px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid rgba(247,244,224,0.25);
  background: rgba(247,244,224,0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--cream);
}
.timeline-step.is-active .timeline-step__dot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  box-shadow: 0 0 0 6px rgba(227,96,56,0.15);
}
.timeline-step__youhere {
  position: absolute;
  left: 4px;
  top: -22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
  opacity: 0.9;
}
.timeline-step__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
}
.timeline-step__body {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #cdc6b8;
}

/* -----------------------------------------------------------
   SECTION 4 · DIFFERENTIATORS  (evergreen surface)
   ----------------------------------------------------------- */
.diff {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 7vw, 7.5rem) var(--gutter);
  background: var(--evergreen);
  color: var(--cream);
}
.diff__inner {
  max-width: 1280px;
  margin-inline: auto;
}
.diff__bg-mark {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,211,101,0.13) 0%, transparent 60%);
  pointer-events: none;
}

.diff__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1rem + 3.2vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 760px;
  color: var(--cream);
}
.diff__lede {
  margin: 24px 0 0;
  max-width: 580px;
  font-size: clamp(0.95rem, 0.7rem + 0.4vw, 1.0625rem);
  line-height: 1.55;
  color: #dcdac4;
}

.diff__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.5rem, 4vw, 4rem);
  border-top: 1px solid var(--hairline-cream);
}
.diff__card {
  position: relative;
  padding: 40px 32px 8px 0;
  border-right: 1px solid var(--hairline-cream);
}
.diff__card:not(:first-child) { padding-left: 32px; }
.diff__card--last             { border-right: none; }

.diff__num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mustard);
  margin-bottom: 20px;
}
.diff__card-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--cream);
}
.diff__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #e3e1cc;
}

/* -----------------------------------------------------------
   SECTION 5 · CASES  (selected work)
   ----------------------------------------------------------- */
.cases {
  position: relative;
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.cases__inner {
  max-width: 1280px;
  margin-inline: auto;
}
.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
.case {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(67, 53, 47, 0.09);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.case__img {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid rgba(67, 53, 47, 0.09);
}
.case__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.case__img-label {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.case__industry {
  margin: 0 0 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
}
.case__client {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.18;
}
.case__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px 28px 36px;
}
.case__tag {
  margin: 0 0 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.case__result {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.5rem + 2vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.case__metric {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
}

/* -----------------------------------------------------------
   SECTION 6 · GUARANTEE  (dark band, 90-day promise)
   ----------------------------------------------------------- */
.guarantee {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 7vw, 7rem) var(--gutter);
  background:
    radial-gradient(ellipse 70% 80% at 18% 50%,
      rgba(227,96,56,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 60% 90% at 90% 30%,
      rgba(255,211,101,0.12) 0%, transparent 55%),
    linear-gradient(180deg, #2E2520 0%, var(--ink) 100%);
  color: var(--cream);
}

.guarantee__content {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  max-width: 1280px;
  margin-inline: auto;
}
.guarantee__badge-wrap {
  display: flex;
  justify-content: flex-start;
}
.guarantee__badge {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Animated dashed orbit ring */
@keyframes ic-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ic-orbit { animation: ic-orbit-spin 22s linear infinite; }

.guarantee__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,211,101,0.33);
  background: conic-gradient(from 220deg,
    rgba(227,96,56,0)    0deg,
    rgba(227,96,56,0.33) 60deg,
    rgba(255,211,101,0.67) 130deg,
    rgba(227,96,56,0)    220deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 100%);
          mask: radial-gradient(circle, transparent 60%, #000 61%, #000 100%);
}
.guarantee__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(255,211,101,0.19);
  background:
    radial-gradient(circle at 30% 30%, rgba(227,96,56,0.31) 0%, transparent 65%),
    rgba(0,0,0,0.25);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.guarantee__num {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  background-image: linear-gradient(180deg,
    var(--mustard) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  padding-bottom: 0.06em;
}
.guarantee__day {
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mustard);
}

.guarantee__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 760px;
  color: var(--cream);
}
.guarantee__lede {
  margin: 24px 0 0;
  max-width: 640px;
  font-size: clamp(0.95rem, 0.7rem + 0.4vw, 1.0625rem);
  line-height: 1.55;
  color: #a59889;
}

/* -----------------------------------------------------------
   SECTION 7 · FINAL CTA
   ----------------------------------------------------------- */
.final-cta {
  padding:
    clamp(5rem, 8vw, 8rem)
    var(--gutter)
    clamp(6rem, 9vw, 9rem);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.final-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.final-cta__headline-wrap {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
.final-cta__chev {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  display: block;
  pointer-events: none;
  transform: translate(95%, -80%);
}

/* -----------------------------------------------------------
   CONTACT PAGE (page-contact.php)
   ----------------------------------------------------------- */
.contact {
  min-height: calc(100vh - 80px);
  padding: var(--section-y) var(--gutter);
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.contact__title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 24px;
}

.contact__body {
  font-size: clamp(0.95rem, 0.7rem + 0.4vw, 1.0625rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
  margin: 0 0 16px;
}

.contact__sub-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--evergreen);
  margin: 48px 0 16px;
}

.contact__details {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--evergreen);
}
.contact__details p { margin: 0 0 8px; }
.contact__details a {
  color: var(--evergreen);
  text-decoration: none;
}
.contact__details a:hover { text-decoration: underline; }

/* Mobile stacking at the 860px breakpoint */
@media (max-width: 860px) {
  .contact { min-height: auto; }
  .contact__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact__body  { max-width: none; }
}

/* -----------------------------------------------------------
   INTERIOR PAGE HERO (page.php)
   ----------------------------------------------------------- */
.page-hero {
  padding: clamp(2.5rem, 1.5rem + 2vw, 4.5rem) var(--gutter) clamp(3.5rem, 5vw, 6rem);
  max-width: 860px;
  margin-inline: auto;
}

.page-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

.page-hero__lede {
  margin-top: clamp(1rem, 1.5vw, 1.75rem);
  font-size: clamp(1rem, 0.7rem + 0.5vw, 1.1875rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 600px;
}

/* -----------------------------------------------------------
   INTERIOR PAGE CONTENT BODY (page.php)
   ----------------------------------------------------------- */
.page-content {
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--hairline);
}

.page-content__inner {
  max-width: 760px;
  margin: 0 auto;
}

.page-content__body > * + * { margin-top: 1.5rem; }
.page-content__body > * { margin-top: 0; }

.page-content__body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 0.75rem + 1.8vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(2rem, 3vw, 3rem) 0 0.75rem;
}

.page-content__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.75rem + 0.9vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
  margin: clamp(1.5rem, 2vw, 2rem) 0 0.5rem;
}

.page-content__body p {
  font-size: clamp(0.9375rem, 0.7rem + 0.4vw, 1.0625rem);
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 1rem;
}

.page-content__body ul,
.page-content__body ol {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}

.page-content__body li {
  font-size: clamp(0.9375rem, 0.7rem + 0.4vw, 1.0625rem);
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.page-content__body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(227,96,56,0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms ease;
}

.page-content__body a:hover {
  text-decoration-color: var(--accent);
}

.page-content__body blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--accent);
  background: rgba(227,96,56,0.04);
  border-radius: 0 8px 8px 0;
}

.page-content__body blockquote p {
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}

.page-content__body hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: clamp(2rem, 3vw, 3rem) 0;
}

@media (max-width: 860px) {
  .page-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
  .page-hero .eyebrow { display: block; }
  .page-content__inner { max-width: none; }
}

/* -----------------------------------------------------------
   FOOTER (rendered by footer.php)
   ----------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: rgba(247,244,224,0.70);
  font-size: 15px;
}

/* Top: three-column grid */
.footer__top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 48px var(--gutter);
  border-bottom: 1px solid rgba(247,244,224,0.1);
  max-width: 1100px;
  margin-inline: auto;
}
.footer__col-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247,244,224,0.4);
  margin-bottom: 14px;
}
.footer__address {
  font-style: normal;
  line-height: 1.7;
  margin: 0 0 8px;
}
.footer__phone {
  color: rgba(247,244,224,0.70);
  text-decoration: none;
  transition: color 150ms ease;
}
.footer__phone:hover { color: var(--cream); }
.footer__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__menu a {
  display: block;
  color: rgba(247,244,224,0.70);
  text-decoration: none;
  padding: 4px 0;
  transition: color 150ms ease;
}
.footer__menu a:hover { color: var(--cream); }

/* Bottom: logo + copyright + utility links */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px var(--gutter);
  max-width: 1100px;
  margin-inline: auto;
}
.footer__brand { display: flex; align-items: center; gap: 16px; }
.footer__logo  { height: 27.5px; opacity: 0.85; filter: brightness(1.15); }
.footer__links { display: flex; flex-wrap: wrap; gap: 28px; }
.footer__links a {
  color: rgba(247,244,224,0.70);
  text-decoration: none;
  transition: color 150ms ease;
}
.footer__links a:hover { color: var(--cream); }

/* -----------------------------------------------------------
   Sticky bottom CTA — mobile only (rendered by footer.php)
   ----------------------------------------------------------- */
.sticky-cta {
  display: none;                   /* shown on mobile via breakpoint */
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 18px;
  z-index: 100;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 16px;
  font-family: var(--font-display);
  text-decoration: none;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.25),
    0 2px 0     rgba(0,0,0,0.04);
}
.sticky-cta__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247,244,224,0.5);
}
.sticky-cta__title {
  font-size: 15px;
  font-weight: 600;
  margin-top: 2px;
}
.sticky-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--accent);
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  border-radius: 999px;
}

/* -----------------------------------------------------------
   Mobile breakpoint — nav + hero only for now;
   per-section mobile rules land in the mobile pass.
   ----------------------------------------------------------- */
@media (max-width: 860px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__hamburger { display: flex; }

  .hero__corner { right: 0; top: 1rem; }
  .hero .eyebrow,
  .hero h1.eyebrow { display: none; }
  .hero__lead    { padding-right: 72px; }

  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: clamp(1rem, 2vw, 2rem);
    padding-bottom: 24px;
    align-items: start;
  }
  .hero__callout {
    margin-top: 32px;
    padding: 22px;
    background: rgba(67,53,47,0.04);
    border: 1px solid rgba(227,96,56,0.30);
    border-left: 3px solid var(--accent);
    border-radius: 14px;
  }

  .process { padding-top: 64px; padding-bottom: 76px; }
  .process__map,
  .process__tabs-wrap { display: none; }
  .process__timeline  { display: block; }

  .diff__grid { grid-template-columns: 1fr; }
  .diff__card,
  .diff__card:not(:first-child) {
    padding: 32px 0 8px 0;
    border-right: none;
    border-bottom: 1px solid var(--hairline-cream);
  }
  .diff__card--last { border-bottom: none; }

  .cases__grid { grid-template-columns: 1fr; gap: 20px; }

  .guarantee {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .guarantee__content {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 32px;
  }
  .guarantee__badge { width: 220px; height: 220px; }
  .guarantee__inner { width: 170px; height: 170px; }
  .guarantee__num   { font-size: 76px; }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 110px;          /* room for sticky-cta */
  }

  .sticky-cta { display: flex; }
}

@media (max-width: 480px) {
  .hero__corner       { width: 56px; }
  .hero__ctas,
  .hero__ctas .btn--accent { width: 100%; }
  .hero__ctas .btn--accent { justify-content: center; }

  .final-cta__inner .btn--lg { width: 100%; max-width: 360px; justify-content: center; }
  .final-cta__chev           { width: 44px; height: 44px; }
}


/* ===========================================================
   CASE STUDIES — SHARED COMPONENTS
   =========================================================== */

/* Breadcrumb nav */
.cs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(2rem, 3vw, 3rem);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.cs-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease;
}
.cs-breadcrumb a:hover { color: var(--ink); }

/* Pull-quote — shared across all CS pages */
.cs-pullquote {
  margin: clamp(2rem, 3vw, 2.5rem) 0 0;
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  background: rgba(67, 53, 47, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
}
.cs-pullquote__text {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.75rem + 0.75vw, 1.375rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
}
.cs-pullquote__attribution {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}
.cs-pullquote__attribution cite { font-style: normal; }

/* Light pullquote (on canvas-bg sections) */
.cs-pullquote--light {
  background: rgba(255, 255, 255, 0.70);
  border-left-color: var(--accent);
}

/* Cream pullquote (on dark sections) */
.cs-pullquote--cream {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--mustard);
}
.cs-pullquote--cream .cs-pullquote__text        { color: var(--cream); }
.cs-pullquote--cream .cs-pullquote__attribution { color: rgba(247,244,224,0.50); }

/* Results pullquote (on results dark section) */
.cs-pullquote--results {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--accent);
}
.cs-pullquote--results .cs-pullquote__text        { color: var(--cream); }
.cs-pullquote--results .cs-pullquote__attribution { color: rgba(247,244,224,0.50); }

/* "View all case studies" footer link inside .cases section */
.cases__footer {
  margin-top: clamp(2rem, 3vw, 2.5rem);
  display: flex;
  justify-content: center;
}


/* ===========================================================
   CASE STUDIES LISTING PAGE
   =========================================================== */

.cs-listing-hero {
  position: relative;
  padding: clamp(3rem, 5vw, 5rem) var(--gutter) clamp(3.5rem, 6vw, 6rem);
}
.cs-listing-hero__inner { max-width: 860px; margin-inline: auto; }
.cs-listing-hero__intro {
  margin: 1rem 0 0;
  font-size: clamp(0.9375rem, 0.75rem + 0.35vw, 1.0625rem);
  line-height: 1.7;
  color: var(--muted);
  max-width: 68ch;
}
.cs-listing-hero__intro + .cs-listing-hero__intro { margin-top: 0.75rem; }
.cs-listing-hero__title {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

/* Intro section */
.cs-listing-intro {
  padding: clamp(3rem, 5vw, 5rem) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.cs-listing-intro__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3vw, 3rem);
  max-width: 1120px;
  margin-inline: auto;
}
.cs-listing-intro__body {
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.1875rem);
  line-height: 1.7;
  color: var(--muted);
  max-width: 72ch;
}
.cs-listing-intro__body p { margin: 0 0 1rem; }
.cs-listing-intro__body p:last-child { margin-bottom: 0; }
.cs-listing-intro__callouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.cs-listing-intro__callout {
  padding: 1.25rem 1.5rem;
  background: rgba(67, 53, 47, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: clamp(0.875rem, 0.7rem + 0.3vw, 1rem);
  line-height: 1.6;
  color: var(--muted);
}
.cs-listing-intro__callout strong {
  color: var(--ink);
  display: block;
  margin-bottom: 0.35rem;
  font-size: clamp(0.9375rem, 0.75rem + 0.3vw, 1.0625rem);
}
.cs-listing-intro__close {
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.1875rem);
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--hairline);
  max-width: 72ch;
}

/* Listing-page case card additions */
.cases--listing {
  border-top: none;
  /* Sage green band — cards (white/cream) pop off the green like
     the about-team photo cards do on their evergreen background. */
  background: var(--evergreen);
}

/* The two .canvas-bg text-only cards (Varra, Phoenix Masonry) use
   transparent backgrounds so the page texture shows through. On a
   sage green section that would let the green bleed through the card
   top. Restore a cream top so those cards stay distinct on green. */
.cases--listing .case__img--text.canvas-bg {
  background: var(--cream);
}

/* Intro chevron accents
   ------------------------------------------------------------
   Three small ic-corner.png chevrons scattered in the right-side
   whitespace next to the 540px .about-intro__copy column.
   Decorative texture reinforcing the brand mark — not section
   markers. The .cs-intro class scopes the position:relative to the
   case-studies listing so it doesn't bleed into the about page. */
.cs-intro .about-intro__inner { position: relative; }
.cs-intro__accents {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cs-intro__accent {
  position: absolute;
  display: block;
  height: auto;
}
/* Hand-picked positions for an organic-not-gridded scatter.
   All three keep the default orientation (point goes up-right). */
.cs-intro__accent--1 { top: 8%;  right: 7%;  width: clamp(40px, 4vw, 64px); }
.cs-intro__accent--2 { top: 40%; right: 26%; width: clamp(48px, 5vw, 78px); }
.cs-intro__accent--3 { top: 72%; right: 12%; width: clamp(36px, 3.5vw, 56px); }

/* Hide accents on mobile — right-side whitespace disappears when the
   intro collapses below 720px. Matches the about page's behavior
   for .about-narrative__accents. */
@media (max-width: 720px) {
  .cs-intro__accents { display: none; }
}

.case__hook {
  margin: 0 0 20px;
  font-size: clamp(0.9375rem, 0.75rem + 0.25vw, 1.0625rem);
  line-height: 1.55;
  color: var(--muted);
}
.case__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: gap 150ms ease;
}
.case__cta:hover { gap: 10px; }

.case--linked  { cursor: pointer; }
.case__img-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.case__img--text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 220px;
  position: relative;
  border-bottom: 1px solid rgba(67, 53, 47, 0.09);
  /* .canvas-bg provides the texture */
}


/* ===========================================================
   CASE STUDY DETAIL PAGES — shared sections
   =========================================================== */

/* Hero */
.cs-hero {
  position: relative;
  padding: clamp(3rem, 5vw, 5rem) var(--gutter) clamp(3.5rem, 6vw, 6rem);
}
.cs-hero__corner {
  position: absolute;
  top: clamp(0.75rem, 1vw, 1.5rem);
  right: var(--gutter);
  width: clamp(48px, 4vw + 1rem, 72px);
  height: auto;
  z-index: 3;
}
.cs-hero__corner:hover {
  animation-play-state: paused;
  transform: translateY(-6px) rotate(-4deg) scale(1.06);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.cs-listing-hero .cs-hero__corner {
  right: max(var(--gutter), calc(50% - 430px));
}
.cs-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 4vw, 5rem);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
}
.cs-hero__inner--full {
  grid-template-columns: 1fr;
  max-width: 860px;
  margin-inline: auto;
}
.cs-hero__headline {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.cs-hero__lead {
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.1875rem);
  line-height: 1.65;
  color: var(--muted);
}
.cs-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1.75rem;
}
.cs-tag {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(67, 53, 47, 0.07);
  border: 1px solid rgba(67, 53, 47, 0.10);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.cs-tag--muted { background: transparent; color: var(--muted); }
.cs-hero__img-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 4px 12px rgba(67, 53, 47, 0.08),
    0 20px 48px rgba(67, 53, 47, 0.12);
}
.cs-hero__img { width: 100%; height: auto; display: block; }

/* Overview */
.cs-overview {
  padding: clamp(4rem, 6vw, 6rem) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.cs-overview__inner { max-width: 1120px; margin-inline: auto; }
.cs-overview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  margin-top: clamp(2rem, 3vw, 2.5rem);
}
.cs-overview__card {
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  background: var(--white);
  border: 1px solid rgba(67, 53, 47, 0.09);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(67, 53, 47, 0.05);
}
.cs-overview__card--ic {
  background: rgba(227, 96, 56, 0.04);
  border-color: rgba(227, 96, 56, 0.15);
}
.cs-overview__card-label {
  margin: 0 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.cs-overview__card-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.75rem + 0.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}
.cs-overview__card-body {
  margin: 0;
  font-size: clamp(0.875rem, 0.7rem + 0.3vw, 1rem);
  line-height: 1.65;
  color: var(--muted);
}

/* Challenge — dark surface */
.cs-challenge {
  position: relative;
  padding: clamp(4rem, 6vw, 7rem) var(--gutter);
  background:
    radial-gradient(ellipse 80% 60% at 90% 40%,
      rgba(227,96,56,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #211a16 0%, #1a1210 100%);
  color: var(--cream);
  overflow: hidden;
}
.cs-challenge__texture {
  position: absolute;
  inset: 0;
  background: var(--canvas-bg);
  background-size: 100% auto;
  background-repeat: repeat-y;
  opacity: 0.04;
  pointer-events: none;
}
.cs-challenge__inner { max-width: 760px; margin-inline: auto; }
.cs-challenge__inner p {
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.1875rem);
  line-height: 1.7;
  color: rgba(247,244,224,0.75);
  margin: 0 0 1.25rem;
}

/* First Call / Solution — canvas-bg light */
.cs-firstcall {
  padding: clamp(4rem, 6vw, 7rem) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.cs-firstcall__inner { max-width: 1120px; margin-inline: auto; }
.cs-firstcall__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2rem, 3vw, 2.5rem);
  align-items: start;
}
.cs-firstcall__copy {
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.1875rem);
  line-height: 1.7;
  color: var(--muted);
}
.cs-firstcall__copy p { margin: 0 0 1.25rem; }
.cs-firstcall__copy p:last-child { margin-bottom: 0; }

/* Work — dark evergreen surface */
.cs-work {
  padding: clamp(4rem, 6vw, 7rem) var(--gutter);
  background:
    radial-gradient(ellipse 70% 70% at 10% 80%,
      rgba(106,122,92,0.22) 0%, transparent 55%),
    linear-gradient(180deg, #1c2219 0%, #161c13 100%);
  color: var(--cream);
}
.cs-work__inner { max-width: 1120px; margin-inline: auto; }
.cs-work__dashboard-wrap {
  margin: clamp(2rem, 3vw, 3rem) 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.cs-work__dashboard-img { width: 100%; height: auto; display: block; }
.cs-work__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 3vw, 3rem);
  margin-top: clamp(2rem, 3vw, 3rem);
  align-items: start;
}

/* Deliverable list */
.cs-deliverable-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(247,244,224,0.10);
}
.cs-deliverable-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(247,244,224,0.10);
  font-size: clamp(0.9375rem, 0.75rem + 0.3vw, 1.0625rem);
  line-height: 1.5;
  color: rgba(247,244,224,0.80);
  padding-left: 1.5rem;
  position: relative;
}
.cs-deliverable-item::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--mustard);
  font-weight: 600;
}

/* Results — dark surface */
.cs-results {
  padding: clamp(4rem, 6vw, 7rem) var(--gutter);
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%,
      rgba(227,96,56,0.10) 0%, transparent 55%),
    linear-gradient(180deg, #211a16 0%, #1a1210 100%);
  color: var(--cream);
}
.cs-results__inner { max-width: 1120px; margin-inline: auto; }
.cs-results__outcomes {
  margin: clamp(2rem, 3vw, 3rem) 0;
  border-top: 1px solid rgba(247,244,224,0.10);
}
.cs-outcome {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1rem;
  padding: 20px 0;
  border-bottom: 1px solid rgba(247,244,224,0.10);
  align-items: start;
}
.cs-outcome__mark {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
  line-height: 1.5;
}
.cs-outcome__text {
  margin: 0;
  font-size: clamp(1rem, 0.75rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
  color: rgba(247,244,224,0.85);
}
.cs-results__quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 3vw, 3rem);
}

/* Overview card — colored top accent bar */
.cs-overview__card     { border-top: 3px solid var(--hairline); }
.cs-overview__card--ic { border-top: 3px solid var(--accent); }

/* Stat callout grid — results section */
.cs-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2rem);
  margin: clamp(2.5rem, 4vw, 4rem) 0;
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid rgba(247,244,224,0.10);
}
.cs-stat__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 2.5vw, 4.5rem);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}
.cs-stat__label {
  display: block;
  margin: 0.75rem 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.6875rem, 0.6rem + 0.15vw, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(247,244,224,0.60);
  line-height: 1.45;
}

/* First Call — evergreen variant */
.cs-firstcall--evergreen {
  background: var(--evergreen);
  border-top: none;
}
.cs-firstcall--evergreen .cs-firstcall__copy { color: rgba(247,244,224,0.75); }
.cs-firstcall--evergreen .cs-pullquote--light {
  background: rgba(255,255,255,0.08);
  border-left-color: var(--mustard);
}
.cs-firstcall--evergreen .cs-pullquote--light .cs-pullquote__text        { color: var(--cream); }
.cs-firstcall--evergreen .cs-pullquote--light .cs-pullquote__attribution { color: rgba(247,244,224,0.50); }

/* Final CTA — remove top border when following a dark section */
.cs-final-cta { border-top: none; }


/* ===========================================================
   RESPONSIVE — case study pages
   =========================================================== */

@media (max-width: 860px) {
  .cs-hero__inner           { grid-template-columns: 1fr; gap: 2rem; }
  .cs-overview__grid        { grid-template-columns: 1fr; }
  .cs-firstcall__grid       { grid-template-columns: 1fr; }
  .cs-work__grid            { grid-template-columns: 1fr; }
  .cs-results__quotes       { grid-template-columns: 1fr; }
  .cs-stat-grid             { grid-template-columns: repeat(2, 1fr); }
  .cs-listing-intro__callouts { grid-template-columns: 1fr; }
  .case__img--text          { height: 180px; }
}

@media (max-width: 480px) {
  .cs-listing-hero { padding-top: 2rem; }
  .cs-hero         { padding-top: 2rem; }
}


/* ===========================================================
   BLOG LISTING  (home.php)
   =========================================================== */

.cs-listing-hero__lead {
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--muted);
  max-width: 60ch;
}

.blog-listing {
  padding: clamp(3rem, 5vw, 5rem) var(--gutter) clamp(4rem, 6vw, 6rem);
  border-top: 1px solid var(--hairline);
}
.blog-listing__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.blog-listing__empty {
  text-align: center;
  color: var(--muted);
  padding: 4rem 0;
  font-size: 1.125rem;
}

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

/* Card */
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  transition: box-shadow 280ms ease, transform 280ms ease;
}
.blog-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Card image */
.blog-card__img-link { display: block; }
.blog-card__img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--canvas);
}
.blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.blog-card:hover .blog-card__img img { transform: scale(1.03); }
.blog-card__img-placeholder { width: 100%; height: 100%; }
.blog-card__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(30,22,18,0.18) 100%);
}

/* Card body */
.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
  gap: 0.25rem;
}
.blog-card__tag {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.875rem + 0.35vw, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
  margin: 0.35rem 0 0;
}
.blog-card__title a {
  color: var(--ink);
  text-decoration: none;
}
.blog-card__title a:hover { color: var(--accent); }
.blog-card__excerpt {
  font-size: clamp(0.875rem, 0.75rem + 0.2vw, 0.9375rem);
  line-height: 1.6;
  color: var(--muted);
  margin: 0.5rem 0 0;
  flex: 1;
}
.blog-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.blog-card__date {
  font-size: 0.8125rem;
  color: var(--muted);
  opacity: 0.7;
}
.blog-card__cta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.blog-card__cta:hover { text-decoration: underline; }

/* Pagination */
.blog-pagination {
  margin-top: clamp(2rem, 4vw, 4rem);
  display: flex;
  justify-content: center;
}
.blog-pagination .page-numbers {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.blog-pagination .page-numbers li a,
.blog-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--hairline);
  transition: background 180ms, border-color 180ms;
}
.blog-pagination .page-numbers li a:hover { background: rgba(67,53,47,0.05); }
.blog-pagination .page-numbers li span.current {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}


/* ===========================================================
   SINGLE POST  (single.php)
   =========================================================== */

.post-hero {
  padding: clamp(2.5rem, 4vw, 4.5rem) var(--gutter) clamp(3rem, 5vw, 5rem);
}
.post-hero__inner {
  max-width: 860px;
  margin: 0 auto;
}
.post-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0.5rem 0 1rem;
  padding-bottom: 0.06em;
}
.post-hero__meta {
  font-size: 0.9375rem;
  color: var(--muted);
  opacity: 0.7;
  margin: 0;
}

.post-featured {
  max-width: 1120px;
  margin: 0 auto clamp(2rem, 4vw, 4rem);
  padding: 0 var(--gutter);
}
.post-featured__img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.post-body {
  padding: 0 var(--gutter) clamp(4rem, 6vw, 6rem);
}
.post-body__inner {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(1rem, 0.875rem + 0.25vw, 1.125rem);
  line-height: 1.75;
  color: var(--ink);
}
.post-body__inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem);
  font-weight: 500;
  margin: 2.5rem 0 0.75rem;
  color: var(--ink);
}
.post-body__inner h3 {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.875rem + 0.6vw, 1.375rem);
  font-weight: 500;
  margin: 2rem 0 0.5rem;
  color: var(--ink);
}
.post-body__inner p { margin: 0 0 1.5rem; }
.post-body__inner p:last-child { margin-bottom: 0; }
.post-body__inner a { color: var(--accent); }
.post-body__inner a:hover { text-decoration: underline; }
.post-body__inner ul,
.post-body__inner ol { padding-left: 1.5rem; margin: 0 0 1.5rem; }
.post-body__inner li { margin-bottom: 0.5rem; }
.post-body__inner blockquote {
  border-left: 3px solid var(--accent);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: rgba(67,53,47,0.04);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--muted);
}
.post-body__inner img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.5rem 0;
  display: block;
}

@media (max-width: 860px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .blog-grid            { grid-template-columns: 1fr; }
  .blog-card__foot      { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}


/* ===========================================================
   RESOURCES HUB PAGE
   =========================================================== */

.res-cat {
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.res-cat--alt { background: var(--paper); }

.res-cat__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.res-cat__hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

.res-cat__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1rem + 2.5vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0.4rem 0 0;
}

.res-cat__desc {
  font-size: clamp(0.9375rem, 0.75rem + 0.3vw, 1.0625rem);
  line-height: 1.65;
  color: var(--muted);
  margin: 0.75rem 0 0;
  max-width: 52ch;
}

.res-cat__view-all {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: gap 150ms ease;
}
.res-cat__view-all:hover { gap: 10px; }

/* Section number (01/02/03) — sits above the eyebrow in each .res-cat__hd.
   Mirrors .wp-card__num so the hub's section breaks read like the
   whitepapers listing's card heads — display font, oversized, beige. */
.res-cat__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 2vw, 4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--beige);
  margin: 0 0 0.25rem;
}

/* Intro chevron accents (Resources hub).
   ------------------------------------------------------------
   Three small ic-corner.png chevrons scattered in the right-side
   whitespace next to the 540px .about-intro__copy column.
   Decorative texture reinforcing the brand mark — not section
   markers. The .res-intro class scopes the position:relative
   to the resources hub so it doesn't bleed into the about page.
   Mirrors the .cs-intro pattern on page-case-studies. */
.res-intro .about-intro__inner { position: relative; }
.res-intro__accents {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.res-intro__accent {
  position: absolute;
  display: block;
  height: auto;
}
.res-intro__accent--1 { top: 8%;  right: 7%;  width: clamp(40px, 4vw, 64px); }
.res-intro__accent--2 { top: 40%; right: 26%; width: clamp(48px, 5vw, 78px); }
.res-intro__accent--3 { top: 72%; right: 12%; width: clamp(36px, 3.5vw, 56px); }

@media (max-width: 720px) {
  .res-intro__accents { display: none; }
}

/* Whitepaper teaser list (hub) */
.wp-teaser-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.wp-teaser {
  border-bottom: 1px solid var(--hairline);
}

.wp-teaser__link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  text-decoration: none;
  color: inherit;
  transition: gap 150ms ease;
}
.wp-teaser__link:hover { gap: 2rem; }
.wp-teaser__link:hover .wp-teaser__title { color: var(--accent); }

.wp-teaser__type {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  min-width: 120px;
}

.wp-teaser__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.875rem + 0.3vw, 1.125rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  transition: color 150ms ease;
}

.wp-teaser__arrow {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--accent);
  opacity: 0.5;
  transition: opacity 150ms ease;
}
.wp-teaser__link:hover .wp-teaser__arrow { opacity: 1; }

@media (max-width: 860px) {
  .res-cat__hd { flex-direction: column; align-items: flex-start; }
  .res-cat__view-all { margin-top: 0.25rem; }
  .wp-teaser__type { min-width: 90px; }
}

@media (max-width: 540px) {
  .wp-teaser__link { flex-wrap: wrap; gap: 0.25rem; }
  .wp-teaser__arrow { display: none; }
}


/* ===========================================================
   WHITEPAPERS LISTING PAGE
   =========================================================== */

.wp-listing {
  padding: clamp(3rem, 5vw, 5rem) var(--gutter) clamp(4rem, 6vw, 6rem);
  border-top: 1px solid var(--hairline);
}
.wp-listing__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Grid */
.wp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}

/* Card */
.wp-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  transition: box-shadow 280ms ease, transform 280ms ease;
}
.wp-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.wp-card__head {
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--paper);
  border-bottom: 3px solid var(--accent);
}
.wp-card__type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.wp-card__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 2vw, 4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--beige);
  margin: 0.5rem 0 0;
  letter-spacing: -0.03em;
}

.wp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}
.wp-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.875rem + 0.35vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.wp-card__desc {
  font-size: clamp(0.875rem, 0.75rem + 0.2vw, 0.9375rem);
  line-height: 1.65;
  color: var(--muted);
  margin: 0.65rem 0 0;
  flex: 1;
}
.wp-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: gap 150ms ease;
}
.wp-card__cta:hover { gap: 10px; }

@media (max-width: 860px) {
  .wp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .wp-grid { grid-template-columns: 1fr; }
}


/* ===========================================================
   SECTION 9 · CEO GUIDE
   Token aliases, hub page, subpages, and page-specific components.
   Nav and html/body/page base resets live in the theme above;
   guide.css versions of those rules are intentionally excluded.
   =========================================================== */

/* ── Token aliases ─────────────────────────────────────────
   Guide CSS uses --ic-* prefixed names. Map them to theme tokens.
   ────────────────────────────────────────────────────────── */
:root {
  --ic-ink:            var(--ink);
  --ic-cream:          var(--cream);
  --ic-paper:          var(--paper);
  --ic-beige:          var(--beige);
  --ic-mustard:        var(--mustard);
  --ic-accent:         var(--accent);
  --ic-amber:          var(--amber);
  --ic-evergreen:      var(--evergreen);
  --ic-muted:          var(--muted);
  --ic-hairline:       var(--hairline);
  --ic-hairline-cream: var(--hairline-cream);
  --ic-canvas-bg:      var(--canvas-bg);

  --fg-primary:   var(--ink);
  --fg-secondary: var(--muted);
  --fg-on-dark:   var(--cream);
  --fg-accent:    var(--accent);
  --bg-page:      var(--paper);
  --bg-surface:   var(--white)fff;
  --bg-cream:     var(--cream);
  --bg-dark:      #221a16;
  --bg-evergreen: var(--evergreen);
  --bg-ink:       var(--ink);
  --border-soft:  var(--hairline);

  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --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;

  --r-xs: 2px; --r-sm: 6px; --r-md: 10px;
  --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  --shadow-card:
    0 1px 2px  rgba(67,53,47,0.04),
    0 8px 24px rgba(67,53,47,0.06);
  --shadow-cta-sm:
    0 1px 0 rgba(0,0,0,0.04),
    0 6px 14px rgba(227,96,56,0.18);
  --shadow-cta-lg:
    0 1px 0 rgba(0,0,0,0.04),
    0 12px 28px rgba(227,96,56,0.28);

  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-in-out:   cubic-bezier(0.65,0,0.35,1);
  --t-fast: 150ms; --t-medium: 200ms; --t-slow: 700ms;

  --page-max: 1280px;
}

/* ---------- Paper shell (canvas-textured background for guide sections) ---------- */
.paper-shell {
  background: rgba(244,242,236,0.25);
}

/* ---------- Hub hero ---------- */
.hub-hero {
  padding: clamp(2rem, 3vw, 3rem) var(--gutter) clamp(1.5rem, 2.5vw, 2.5rem);
}
.hub-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.hub-hero__lead { min-width: 0; }
.hub-hero__breadcrumb { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-muted); margin-bottom: 14px; }
.hub-hero__breadcrumb .sep { color: rgba(67,53,47,0.35); margin: 0 10px; }

.hub-hero__url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
.hub-hero__url-label { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; font-size: 11px; color: var(--ic-muted); }
.hub-hero__url-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgba(67,53,47,0.12); border-radius: 6px; background: rgba(255,255,255,0.55); color: var(--ic-ink); transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.hub-hero__url-link:hover { color: var(--ic-accent); border-color: rgba(227,96,56,0.45); background: rgba(255,255,255,0.85); transform: translateY(-1px); }
.hub-hero__url-arrow { font-size: 11px; color: rgba(67,53,47,0.5); transition: color 150ms ease; }
.hub-hero__url-link:hover .hub-hero__url-arrow { color: var(--ic-accent); }

.hub-hero__eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 22px; }
.hub-hero__h1 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.hub-hero__subtitle {
  margin: 22px 0 0;
  font-size: clamp(1rem, 0.7rem + 0.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--ic-muted);
  max-width: 36ch;
}
.hub-hero__byline { margin-top: 22px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ic-ink); }
.hub-hero__byline .by { color: var(--ic-muted); margin-right: 8px; }

/* ---------- PDF card + HubSpot embed wrapper ---------- */
.pdf-card {
  position: relative;
  padding: 22px 24px 20px;
  background: rgba(247,244,224,0.78);
  border: 1px solid rgba(227,96,56,0.22);
  border-left: 3px solid var(--ic-accent);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 24px rgba(67,53,47,0.06);
}
.pdf-card__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 10px; }
.pdf-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.2; margin: 0 0 8px; color: var(--ic-ink); letter-spacing: -0.01em; }
.pdf-card__body { font-size: 13.5px; line-height: 1.5; color: var(--ic-muted); margin: 0 0 16px; }
.pdf-card__hs { margin-top: 8px; }
.pdf-card__hs .hs-form { font-family: var(--font-body); font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.pdf-card__hs .hs-form-field { flex: 1; min-width: 0; margin-bottom: 0 !important; }
.pdf-card__hs .hs-form .field { margin-bottom: 0 !important; }
.pdf-card__hs label { display: none; }
.pdf-card__hs .hs-error-msgs { margin: 4px 0 0; padding: 0; list-style: none; }
.pdf-card__hs .hs-error-msgs li { font-size: 12px; color: #c0392b; }
.pdf-card__hs .hs-button,
.pdf-card__hs input[type="submit"] {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 11px 18px !important; border: none !important;
  border-radius: 0 !important; background: var(--ic-accent) !important; color: var(--white) !important;
  font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important;
  cursor: pointer !important; white-space: nowrap !important;
  transition: transform 150ms ease, filter 150ms ease !important;
}
.pdf-card__hs .hs-button:hover,
.pdf-card__hs input[type="submit"]:hover { transform: translateY(-1px) !important; filter: brightness(1.04) !important; }
.pdf-card__hs .hs-input {
  width: 100%; padding: 11px 14px; border: 1px solid rgba(67,53,47,0.18);
  border-radius: 0; background: var(--white); font-family: var(--font-body);
  font-size: 14px; color: var(--ic-ink); outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pdf-card__hs .hs-input:focus { border-color: var(--ic-accent); box-shadow: 0 0 0 3px rgba(227,96,56,0.18); }

/* ---------- Trail map block ---------- */
.trail-section {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 6vw, 6rem) var(--gutter) clamp(3rem, 5vw, 5rem);
  background: linear-gradient(180deg, #312822 0%, #221a16 100%);
  color: var(--cream);
}
.trail-section__frame {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(67,53,47,0.10);
  background: linear-gradient(rgba(244,242,236,0.85), rgba(244,242,236,0.92));
  box-shadow: 0 1px 2px rgba(67,53,47,0.04), 0 12px 32px rgba(67,53,47,0.07);
  overflow: hidden;
}
.trail-section__caption-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
  padding: 18px 22px 8px;
  border-bottom: 1px solid rgba(67,53,47,0.07);
}
.trail-section__caption { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ic-muted); }
.trail-section__caption .accent { color: var(--ic-accent); }
.trail-section__legend { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-muted); display: flex; gap: 18px; }
.trail-section__legend .dot { display: inline-block; width: 10px; height: 10px; vertical-align: middle; border-radius: 50%; margin-right: 6px; }
.trail-section__legend .dot--marker { background: var(--ic-accent); border: 1px solid rgba(67,53,47,0.4); }
.trail-section__legend .dot--trail { background: transparent; border: 1px dashed var(--ic-accent); }
.trail-section__legend .dot--warn { background: transparent; border: 1px dashed rgba(67,53,47,0.55); }

.tm-map { position: relative; width: 100%; }
.tm-svg { display: block; width: 100%; height: auto; }

.tm-marker { cursor: pointer; outline: none; }
.tm-marker__halo { transition: fill-opacity 200ms ease, r 200ms ease; }
.tm-marker:hover .tm-marker__halo,
.tm-marker.is-hover .tm-marker__halo,
.tm-marker:focus-visible .tm-marker__halo { fill-opacity: 0.22; }
.tm-marker__num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; fill: #F7F4E0; }
.tm-marker__label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; fill: var(--ic-ink); }
.tm-marker__pill { transition: fill 150ms ease, stroke-opacity 150ms ease; }
.tm-marker:hover .tm-marker__pill,
.tm-marker.is-hover .tm-marker__pill { fill: var(--white); stroke-opacity: 0.4; }
.tm-marker:focus-visible > circle:nth-of-type(2) { stroke: var(--ic-accent); stroke-width: 2.5; }

.tm-place-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; fill: var(--ic-ink); }
.tm-place-sub { font-family: var(--font-body); font-size: 11px; font-style: italic; fill: var(--ic-muted); }
.tm-compass__n { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; fill: var(--ic-muted); }

@keyframes tm-trail-march { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
.tm-trail { animation: tm-trail-march 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .tm-trail { animation: none; } }

.tm-waste { fill: none; stroke: rgba(138, 100, 31, 0.38); stroke-width: 1.5; }

.tm-warn { cursor: pointer; outline: none; opacity: 0.78; transition: opacity 180ms ease; }

/* ── Mobile station list ───────────────────────────────────── */
.tm-list { display: none; padding: 20px 20px 28px; }

.tm-list__trail {
  position: relative;
  padding-left: 52px;
}
.tm-list__trail::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 18px;
  bottom: 18px;
  border-left: 2px dashed rgba(227,96,56,0.40);
}
.tm-list__row {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.tm-list__row--trailhead,
.tm-list__row--summit { padding: 4px 0; }
.tm-list__row--station {
  padding: 11px 0;
  border-bottom: 1px solid rgba(67,53,47,0.08);
  text-decoration: none;
}
.tm-list__row--station:last-of-type { border-bottom: none; }
.tm-list__col-marker {
  position: absolute;
  left: -52px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tm-list__node {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(247,244,224,0.92);
  border: 1.5px solid rgba(67,53,47,0.45);
  display: flex; align-items: center; justify-content: center;
}
.tm-list__node--start::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #43352F;
}
.tm-list__node--summit {
  background: var(--ic-accent);
  border-color: var(--ic-accent);
}
.tm-list__node--summit::after {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #fff;
}
.tm-list__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ic-accent);
  border: 2px solid rgba(67,53,47,0.18);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: #fff;
}
.tm-list__col-content { flex: 1; min-width: 0; }
.tm-list__place {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ic-ink);
}
.tm-list__place-sub {
  font-family: var(--font-body);
  font-size: 11px; font-style: italic;
  color: var(--ic-muted); margin-left: 8px;
}
.tm-list__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ic-ink);
}
.tm-list__title {
  display: block;
  font-size: 13px; line-height: 1.4;
  color: var(--ic-muted); margin-top: 2px;
}
.tm-list__arrow {
  font-size: 16px; color: var(--ic-accent); flex-shrink: 0;
}
.tm-list__offpath {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(138,100,31,0.35);
}
.tm-list__row--warn { text-decoration: none; padding: 6px 0 0; }
.tm-list__warn-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(244,242,236,0.92);
  border: 1.5px solid rgba(138,100,31,0.40);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #8A641F;
  line-height: 1;
}
.tm-list__warn-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #8A641F;
}
.tm-list__warn-sub {
  display: block;
  font-size: 12px; font-style: italic;
  color: rgba(138,100,31,0.75); margin-top: 2px;
}
.tm-list__arrow--warn { color: #8A641F; }
.tm-warn:hover, .tm-warn.is-hover, .tm-warn:focus-visible { opacity: 1; }
.tm-warn__label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; fill: #8A641F; }
.tm-warn__sub { font-family: var(--font-body); font-size: 11px; font-style: italic; fill: #8A641F; opacity: 0.85; }

/* Hover preview card */
.trail-preview {
  position: absolute; left: 22px; bottom: 22px;
  width: 320px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid rgba(67,53,47,0.12);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(67,53,47,0.04), 0 12px 28px rgba(67,53,47,0.10);
  pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.trail-preview.is-on { opacity: 1; transform: translateY(0); }
.trail-preview__num { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: var(--ic-accent); margin: 0 0 4px; }
.trail-preview__name { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ic-ink); }
.trail-preview__sub { font-size: 14px; line-height: 1.45; color: var(--ic-muted); margin: 0 0 12px; }
.trail-preview__cta { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-accent); }
.trail-preview__cta::after { content: " →"; }

/* ---------- Opening / article prose ---------- */
.prose {
  max-width: 700px; margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter);
}
.prose p { font-size: 17px; line-height: 1.7; color: var(--ic-ink); margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose .lede { font-size: 19px; line-height: 1.6; }

/* ---------- Principles card grid ---------- */
.principles {
  padding: clamp(4rem, 6vw, 6rem) var(--gutter) clamp(4rem, 6vw, 6rem);
  background: var(--evergreen);
  color: var(--cream);
}
.principles__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.principles__label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-mustard); margin: 0 0 14px; }
.principles__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.012em; margin: 0; max-width: 24ch; color: var(--cream); }
.principles__hint { font-size: 14px; color: rgba(247,244,224,0.7); max-width: 32ch; line-height: 1.55; margin: 0; }
.principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.principles__grid--5across { grid-template-columns: repeat(5, 1fr); gap: 16px; }

.principle {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px 24px;
  background: var(--white);
  border: 1px solid rgba(67,53,47,0.10);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(67,53,47,0.04), 0 8px 24px rgba(67,53,47,0.05);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.principle:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-lg);
  border-color: rgba(227,96,56,0.35);
}
.principle__head { display: flex; align-items: center; gap: 12px; }
.principle__num {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(227,96,56,0.10);
  color: var(--ic-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  flex-shrink: 0;
}
.principle__shortname { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-muted); }
.principle__title { font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; margin: 0; color: var(--ic-ink); text-wrap: balance; }
.principle__body { font-size: 14.5px; line-height: 1.55; color: var(--ic-muted); margin: 0; flex: 1; }
.principle__cta { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-accent); align-self: flex-start; }
.principle__cta::after { content: " →"; display: inline-block; transition: transform 200ms ease; }
.principle:hover .principle__cta::after { transform: translateX(3px); }

.principle--warn {
  background: #FBF6E8;
  border-style: dashed;
  border-color: #B8893A;
  border-width: 1.5px;
}
.principle--warn:hover { border-color: #8A641F; box-shadow: 0 1px 2px rgba(67,53,47,0.04), 0 16px 36px rgba(184,137,58,0.18); }
.principle__num--warn { background: rgba(184,137,58,0.18); color: #8A641F; font-size: 16px; }
.principle--warn .principle__shortname { color: #8A641F; }
.principle--warn .principle__title { color: #43352F; }
.principle--warn .principle__cta { color: #8A641F; }

/* ---------- Author bio ---------- */
.author-bio {
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter);
  border-top: 1px solid var(--ic-hairline);
  background: transparent;
}
.author-bio__inner {
  max-width: 820px; margin: 0 auto;
  display: grid; grid-template-columns: 140px 1fr;
  gap: 32px; align-items: start;
}
.author-bio__photo { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; background: #F4F2EC; border: 1px solid rgba(67,53,47,0.12); box-shadow: 0 1px 2px rgba(67,53,47,0.04), 0 8px 20px rgba(67,53,47,0.07); }
.author-bio__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-bio__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 10px; }
.author-bio__name { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin: 0; color: var(--ic-ink); }
.author-bio__role { font-size: 14px; color: var(--ic-muted); margin: 4px 0 14px; font-style: italic; }
.author-bio__lede { font-size: 16px; line-height: 1.6; color: var(--ic-ink); margin: 0 0 18px; max-width: 56ch; }
.author-bio__links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 24px; }
.author-bio__link { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ic-accent); display: inline-flex; align-items: center; gap: 6px; }
.author-bio__link:hover { color: var(--ic-ink); }

/* ---------- Closing prose + sign-off ---------- */
.closing {
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid var(--ic-hairline);
}
.closing__inner { max-width: 700px; margin: 0 auto; }
.closing p { font-size: 17px; line-height: 1.7; color: var(--ic-ink); margin: 0 0 1.1em; }
.signoff { margin-top: 1.5em; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ic-ink); }

/* ---------- Guide-specific final CTA additions
   Base .final-cta lives in Section 7 above. The guide uses
   a .final-cta--guide modifier so its padding/background don't
   clobber the theme's section padding on other pages. ---------- */
.final-cta--guide {
  padding: clamp(4rem, 6vw, 6.5rem) var(--gutter) clamp(5rem, 7vw, 7.5rem);
  background: rgba(244,242,236,0.25);
}
.final-cta__label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 18px; }
.final-cta__head-wrap { position: relative; display: inline-block; }
.final-cta__head-wrap .final-cta__chev {
  position: absolute; top: -0.5rem; right: -3.5rem;
  width: 56px; height: 56px;
}
.final-cta__h2 { font-family: var(--font-display); font-size: clamp(2.4rem, 1rem + 3.6vw, 4.25rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.018em; margin: 0; }
.final-cta__lede { margin: 26px auto 36px; max-width: 620px; font-size: 17px; line-height: 1.55; color: var(--ic-muted); }

/* ---------- FAQ accordion ---------- */
.faq {
  padding: clamp(3rem, 5vw, 5rem) var(--gutter);
  border-top: 1px solid var(--ic-hairline);
  background: transparent;
}
.faq__inner { max-width: 820px; margin: 0 auto; }
.faq__label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 14px; }
.faq__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.012em; margin: 0 0 32px; }
.faq__list { border-top: 1px solid var(--ic-hairline); }
.faq__item { border-bottom: 1px solid var(--ic-hairline); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 4px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--ic-ink); transition: color 150ms ease; }
.faq__q:hover { color: var(--ic-accent); }
.faq__icon { width: 24px; height: 24px; flex-shrink: 0; position: relative; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1.5px; background: var(--ic-accent); border-radius: 1px; transition: transform 220ms ease; }
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 280ms ease; }
.faq__item.is-open .faq__a { max-height: 800px; }
.faq__a-inner { padding: 0 4px 24px; font-size: 15.5px; line-height: 1.65; color: var(--ic-muted); }

/* ---------- Subpage: trail strip ---------- */
.trail-strip {
  position: sticky;
  top: 70px;
  z-index: 20;
  background: rgba(244,242,236,0.97);
  border-bottom: 1px solid rgba(67,53,47,0.10);
  backdrop-filter: blur(6px);
}
.trail-strip__inner {
  max-width: 1100px; margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 18px;
}
.trail-strip__back { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-muted); white-space: nowrap; transition: color 150ms ease; }
.trail-strip__back:hover { color: var(--ic-accent); }
.trail-strip__back::before { content: "← "; }
.trail-strip__svg-wrap { flex: 1; min-width: 0; }
.trail-strip__svg { display: block; width: 100%; height: 72px; }

.tstrip-base { stroke: rgba(67,53,47,0.35); stroke-width: 1.2; fill: none; }
.tstrip-trail { stroke: var(--ic-accent); stroke-opacity: 0.55; stroke-width: 1.4; stroke-dasharray: 2 6; fill: none; }
.tstrip-marker { cursor: pointer; }
.tstrip-marker__dot { fill: #F7F4E0; stroke: #43352F; stroke-opacity: 0.55; stroke-width: 1.2; }
.tstrip-marker__inner { fill: rgba(227,96,56,0.35); }
.tstrip-marker.is-current .tstrip-marker__dot { stroke: var(--ic-accent); stroke-width: 2; }
.tstrip-marker.is-current .tstrip-marker__inner { fill: var(--ic-accent); }
.tstrip-marker:hover .tstrip-marker__inner { fill: var(--ic-accent); }
.tstrip-marker__label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; fill: var(--ic-muted); text-transform: uppercase; }
.tstrip-marker.is-current .tstrip-marker__label { fill: var(--ic-ink); }
.tstrip-youarehere { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; fill: var(--ic-accent); text-transform: uppercase; }
.tstrip-warn { cursor: pointer; opacity: 0.85; transition: opacity 150ms ease; }
.tstrip-warn:hover { opacity: 1; }
.tstrip-warn.is-current { opacity: 1; cursor: default; }
.tstrip-warn__glyph { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--ic-ink); }
.tstrip-warn__active-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--ic-ink); }

/* ---------- Subpage hero ---------- */
.sub-hero {
  padding: clamp(3.5rem, 6vw, 6rem) var(--gutter) clamp(1rem, 2vw, 2rem);
}
.sub-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: end;
}
.sub-hero__lead { min-width: 0; }
.sub-hero__breadcrumb { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-muted); margin-bottom: 22px; }
.sub-hero__breadcrumb .sep { color: rgba(67,53,47,0.35); margin: 0 10px; }
.sub-hero__breadcrumb a { color: var(--ic-muted); transition: color 150ms; }
.sub-hero__breadcrumb a:hover { color: var(--ic-accent); }
.sub-hero__principle-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 18px; }
.sub-hero__h1 {
  font-family: var(--font-display); font-weight: 500;
  line-height: 1.05; letter-spacing: -0.018em;
  margin: 0; max-width: 18ch; text-wrap: balance;
}
.sub-hero__subtitle {
  margin: 22px 0 0;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem);
  line-height: 1.45; color: var(--ic-muted); max-width: 38ch;
}

/* ---------- Intro band ---------- */
.intro-band {
  max-width: 760px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.75rem, 3vw, 2.5rem);
  background: rgba(247,244,224,0.55);
  border: 1px solid rgba(67,53,47,0.10);
  border-radius: 14px;
}
.intro-band p { font-size: 17.5px; line-height: 1.65; color: var(--ic-ink); margin: 0; }

/* ---------- Article body ---------- */
.article { padding: clamp(1.5rem, 2.5vw, 2.5rem) var(--gutter) clamp(1.25rem, 2vw, 2rem); }
.article__inner { max-width: 720px; margin: 0 auto; }
.article__inner > p { font-size: 17px; line-height: 1.75; color: var(--ic-ink); margin: 0 0 1.25em; }
.article__inner > p:last-child { margin-bottom: 0; }

/* ---------- Callout box ---------- */
.callout {
  margin: clamp(2rem, 3vw, 3rem) 0;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  background: var(--ic-ink);
  color: var(--ic-cream);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.callout::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 18% 20%, rgba(227,96,56,0.16) 0%, transparent 55%),
              radial-gradient(ellipse 60% 90% at 90% 80%, rgba(255,211,101,0.10) 0%, transparent 55%);
  pointer-events: none;
}
.callout > * { position: relative; z-index: 1; }
.callout__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-mustard); margin: 0 0 12px; }
.callout__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1vw, 1.85rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--ic-cream); }
.callout p { font-size: 16px; line-height: 1.7; color: #dcd6c1; margin: 0 0 1em; }
.callout p:last-child { margin: 0; }

/* ---------- Image stamp (pull-quote + photo) ---------- */
.stamp-figure {
  margin: clamp(2rem, 4vw, 3rem) auto;
  display: grid; grid-template-columns: 220px 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; max-width: 720px;
}
.stamp-figure__img {
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(247,244,224,0.5); border: 1px solid rgba(67,53,47,0.10);
  border-radius: 999px; padding: 18px; position: relative;
}
.stamp-figure__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: rotate(-6deg); filter: contrast(1.05) saturate(0.85); }
.stamp-figure__caption { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.35rem); line-height: 1.45; color: var(--ic-ink); text-wrap: balance; }
.stamp-figure__caption .attr { display: block; margin-top: 12px; font-family: var(--font-mono); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-muted); }

/* ---------- Next-link card ---------- */
.next-link {
  margin: clamp(3rem, 5vw, 4rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--white);
  border: 1px solid rgba(67,53,47,0.10);
  border-left: 3px solid var(--ic-accent);
  border-radius: 14px;
  box-shadow: var(--shadow-card-md);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: transform 200ms ease, box-shadow 200ms ease;
  text-decoration: none; color: inherit;
}
.next-link:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(67,53,47,0.04), 0 18px 36px rgba(67,53,47,0.10); }
.next-link__lead { min-width: 0; }
.next-link__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 8px; }
.next-link__title { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.6vw, 1.6rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--ic-ink); }
.next-link__arrow { font-family: var(--font-display); font-size: 28px; color: var(--ic-accent); transition: transform 200ms ease; flex-shrink: 0; }
.next-link:hover .next-link__arrow { transform: translateX(6px); }

/* ---------- Shiny Objects: moth figure ---------- */
.moth-figure {
  position: relative;
  margin: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) 0;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(67,53,47,0.10);
  box-shadow: 0 1px 2px rgba(67,53,47,0.04), 0 12px 28px rgba(67,53,47,0.10);
  isolation: isolate; aspect-ratio: 5 / 2.4; background: #1a1410;
}
.moth-figure__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.moth-figure__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, rgba(8,8,12,0.82) 0%, rgba(8,8,12,0.55) 30%, rgba(8,8,12,0.05) 60%, rgba(8,8,12,0) 100%),
    linear-gradient(180deg, rgba(8,8,12,0) 60%, rgba(8,8,12,0.4) 100%);
  pointer-events: none;
}
.moth-figure__caption { position: absolute; right: clamp(1.5rem, 3vw, 2.5rem); top: clamp(1.5rem, 3vw, 2.5rem); bottom: clamp(1.5rem, 3vw, 2.5rem); width: min(38%, 360px); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; z-index: 2; color: var(--ic-cream); }
.moth-figure__warn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-mustard); padding: 8px 14px 8px 12px; border: 1px solid rgba(255,211,101,0.45); border-radius: 999px; background: rgba(20,14,10,0.35); backdrop-filter: blur(2px); }
.moth-figure__warn-glyph { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--ic-mustard); color: var(--ic-ink); font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 1; }
.moth-figure__caption-text { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.55rem); line-height: 1.35; margin: 0; text-wrap: balance; max-width: 22ch; color: var(--ic-cream); text-shadow: 0 1px 2px rgba(0,0,0,0.4); text-align: right; }
.moth-figure__stamp { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,244,224,0.7); }

/* Shiny Objects: chaotic vs steady chart */
.shiny-chart { margin: clamp(2rem, 3vw, 3rem) 0; padding: clamp(1.75rem, 2.5vw, 2.25rem); background: var(--white); border: 1px solid rgba(67,53,47,0.10); border-radius: 14px; box-shadow: var(--shadow-card); }
.shiny-chart__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.shiny-chart__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 8px; }
.shiny-chart__title { font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 0.7vw, 1.7rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.012em; margin: 0; color: var(--ic-ink); max-width: 22ch; }
.shiny-chart__legend { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ic-muted); }
.shiny-chart__legend span { display: inline-flex; align-items: center; gap: 8px; }
.shiny-chart__legend .swatch { display: inline-block; width: 22px; height: 2px; }
.shiny-chart__legend .swatch--shiny { background: var(--ic-accent); }
.shiny-chart__legend .swatch--steady { background: var(--ic-ink); }
.shiny-chart__svg { display: block; width: 100%; height: auto; }
.sc-axis { stroke: rgba(67,53,47,0.18); stroke-width: 1; }
.sc-axis-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; fill: var(--ic-muted); text-transform: uppercase; }
.sc-tick { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; fill: rgba(67,53,47,0.55); text-transform: uppercase; }
.sc-shiny-path { fill: none; stroke: var(--ic-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-shiny-pill { fill: var(--ic-accent); }
.sc-shiny-num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; fill: var(--white); }
.sc-steady-path { fill: none; stroke: var(--ic-ink); stroke-width: 1.6; stroke-linecap: round; }
.sc-steady-fill { fill: rgba(67,53,47,0.05); }
.sc-steady-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; fill: var(--ic-ink); text-transform: uppercase; }
.sc-anno { font-family: var(--font-display); font-style: italic; font-size: 13px; fill: var(--ic-muted); }
.shiny-chart__body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.shiny-chart__keys { list-style: none; margin: 4px 0 0; padding: 14px 0 14px 18px; border-left: 1px solid rgba(67,53,47,0.12); display: flex; flex-direction: column; gap: 14px; }
.shiny-chart__key { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.3; color: var(--ic-ink); }
.shiny-chart__key-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--ic-accent); color: var(--white); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.shiny-chart__key-label { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shiny-chart__caption { font-family: var(--font-display); font-style: italic; font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem); line-height: 1.55; color: var(--ic-muted); margin: 16px 0 0; max-width: 60ch; }

/* Shiny Objects: field guide cards */
.shiny-fieldguide { margin: clamp(2rem, 3vw, 3rem) 0; }
.shiny-fieldguide__head { margin-bottom: 18px; }
.shiny-fieldguide__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 8px; }
.shiny-fieldguide__title { font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 0.7vw, 1.7rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.012em; margin: 0 0 8px; color: var(--ic-ink); }
.shiny-fieldguide__lede { font-size: 15px; line-height: 1.6; color: var(--ic-muted); margin: 0; max-width: 60ch; }
.shiny-fieldguide__grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.shiny-card { background: var(--white); border: 1px solid rgba(67,53,47,0.10); border-radius: 12px; padding: 18px 20px; display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: start; }
.shiny-card__seal { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(247,244,224,0.7); border: 1px dashed rgba(67,53,47,0.35); color: var(--ic-muted); text-align: center; line-height: 1.05; padding: 4px; }
.shiny-card__name { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: -0.005em; color: var(--ic-ink); margin: 0 0 4px; }
.shiny-card__pitch { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 8px; }
.shiny-card__truth { font-size: 14px; line-height: 1.55; color: var(--ic-ink); margin: 0; }
.shiny-card__truth strong { font-weight: 600; color: var(--ic-ink); }

/* Shiny Objects: 4-question test */
.shiny-test { margin: clamp(2rem, 3vw, 3rem) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.shiny-test__item { background: rgba(247,244,224,0.55); border: 1px solid rgba(67,53,47,0.10); border-radius: 12px; padding: 22px 24px; }
.shiny-test__num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 10px; }
.shiny-test__q { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; color: var(--ic-ink); margin: 0 0 10px; text-wrap: balance; }
.shiny-test__a { font-size: 14.5px; line-height: 1.6; color: var(--ic-muted); margin: 0; }

/* Shiny Objects: off-path warning eyebrow */
.sub-hero__principle-num--warn { color: var(--ic-ink) !important; display: inline-flex; align-items: center; gap: 8px; }
.sub-hero__principle-num--warn::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--ic-ink); color: var(--ic-mustard); font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0; }

/* ---------- Shiny Objects: editorial full-bleed hero ---------- */
.shiny-ed-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 460px; max-height: 800px; overflow: hidden; isolation: isolate; background: #100906; display: flex; flex-direction: column; justify-content: flex-end; }
.shiny-ed-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.shiny-ed-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,9,6,0.18) 0%, rgba(16,9,6,0.08) 30%, rgba(16,9,6,0.80) 100%), linear-gradient(100deg, rgba(16,9,6,0.42) 0%, rgba(16,9,6,0) 52%); pointer-events: none; }
.shiny-ed-hero__nav { position: absolute; top: clamp(1.25rem, 2.5vw, 2rem); left: var(--gutter); right: var(--gutter); display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,244,224,0.50); z-index: 2; flex-wrap: wrap; }
.shiny-ed-hero__nav a { color: rgba(247,244,224,0.50); text-decoration: none; transition: color 150ms; }
.shiny-ed-hero__nav a:hover { color: var(--ic-mustard); }
.shiny-ed-hero__nav .sep { color: rgba(247,244,224,0.22); }
.shiny-ed-hero__content { position: relative; z-index: 2; padding: 0 var(--gutter) clamp(2rem, 4vw, 3.5rem); }
.shiny-ed-hero__badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-mustard); padding: 7px 14px 7px 10px; border: 1px solid rgba(255,211,101,0.40); border-radius: 999px; background: rgba(16,9,6,0.45); backdrop-filter: blur(3px); margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.shiny-ed-hero__badge-glyph { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--ic-mustard); color: var(--ic-ink); font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 1; }
/* Chapter badge variant — orange accent instead of mustard */
.shiny-ed-hero__badge--ch { color: var(--ic-accent); border-color: rgba(227,96,56,0.40); }
.shiny-ed-hero__badge--ch .shiny-ed-hero__badge-glyph { background: var(--ic-accent); color: var(--ic-cream); }
.shiny-ed-hero__h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 1.25rem + 4vw, 5rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.022em; margin: 0 0 clamp(0.75rem, 1.5vw, 1.1rem); max-width: 18ch; text-wrap: balance; }
.shiny-ed-hero__deck { font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, 0.8rem + 0.65vw, 1.35rem); font-weight: 400; line-height: 1.5; color: rgba(247,244,224,0.78); margin: 0; max-width: 48ch; text-wrap: balance; }
.shiny-ed-pdf { max-width: 760px; margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(0.5rem, 1vw, 1rem); padding: 0 var(--gutter); }

/* Shiny Objects: editorial drop cap */
.shiny-dropcap::first-letter { font-family: var(--font-display); font-size: clamp(3.75rem, 3rem + 2vw, 5.25rem); font-weight: 500; line-height: 0.82; float: left; margin-right: 0.08em; margin-top: 0.09em; color: var(--ic-ink); letter-spacing: -0.02em; }

/* Shiny Objects: two-way breakdown */
.shiny-twoway { margin: clamp(1.5rem, 3vw, 2.5rem) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(67,53,47,0.10); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-card); overflow: hidden; }
.shiny-twoway__col { padding: clamp(1.5rem, 2.5vw, 2rem); }
.shiny-twoway__col + .shiny-twoway__col { border-left: 1px solid rgba(67,53,47,0.10); background: rgba(247,244,224,0.32); }
.shiny-twoway__label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 10px; }
.shiny-twoway__col--ext .shiny-twoway__label { color: var(--ic-accent); }
.shiny-twoway__col--int .shiny-twoway__label { color: var(--ic-mustard); }
.shiny-twoway__head { font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.45vw, 1.3rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.008em; color: var(--ic-ink); margin: 0 0 14px; text-wrap: balance; }
.shiny-twoway__body { font-size: 15px; line-height: 1.65; color: var(--ic-ink); margin: 0; }

/* Shiny Objects: pull quote */
.shiny-pullquote { margin: clamp(2.5rem, 5vw, 4rem) 0; padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-top: 1px solid rgba(67,53,47,0.16); border-bottom: 1px solid rgba(67,53,47,0.16); text-align: center; }
.shiny-pullquote__text { font-family: var(--font-display); font-style: italic; font-size: clamp(1.45rem, 1.1rem + 1vw, 2.1rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.012em; color: var(--ic-ink); margin: 0 auto; max-width: 34ch; text-wrap: balance; }

/* ---------- Pick a Partner: hero photo ---------- */
.hero-photo { margin: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); padding: 0 clamp(1.25rem, 4vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.hero-photo__frame { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(67,53,47,0.06), 0 18px 48px rgba(67,53,47,0.18); aspect-ratio: 16 / 9; background: #2a201c; }
.hero-photo__frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) contrast(1.02); }
.hero-photo__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(67,53,47,0) 0%, rgba(67,53,47,0) 55%, rgba(67,53,47,0.55) 100%), radial-gradient(120% 80% at 80% 10%, rgba(227,96,56,0.10) 0%, rgba(227,96,56,0) 55%); pointer-events: none; }
.hero-photo__credit { position: absolute; left: clamp(14px, 2vw, 22px); bottom: clamp(12px, 1.8vw, 18px); margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ic-cream); opacity: 0.82; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.hero-photo__caption { max-width: 720px; margin: 0 auto; padding: 0 4px; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; letter-spacing: -0.005em; color: var(--ic-ink); opacity: 0.85; }
.hero-photo__kicker { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ic-accent); margin-bottom: 10px; opacity: 1; }

/* Pick a Partner: two-pane model figure */
.model-figure { margin: clamp(2rem, 4vw, 3rem) 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.model-figure__pane { border-radius: 14px; padding: clamp(1.25rem, 2vw, 1.75rem); border: 1px solid rgba(67,53,47,0.10); background: var(--white); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.model-figure__pane--bad { background: rgba(247,244,224,0.45); }
.model-figure__pane--good { background: var(--white); border-left: 3px solid var(--ic-accent); }
.model-figure__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-muted); margin: 0 0 14px; }
.model-figure__pane--good .model-figure__kicker { color: var(--ic-accent); }
.model-svg { display: block; width: 100%; height: auto; margin: 4px 0 14px; }
.model-figure__caption { font-size: 14px; line-height: 1.55; color: var(--ic-muted); margin: 0; }
.ms-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--ic-ink); opacity: 0.75; }
.ms-tick { font-family: var(--font-mono); font-size: 7.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ic-muted); opacity: 0.7; }

/* Pick a Partner: bullet list inside callout */
.callout-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 14px; counter-reset: callout-counter; }
.callout-list li { position: relative; padding-left: 36px; font-size: 16px; line-height: 1.6; color: #dcd6c1; counter-increment: callout-counter; }
.callout-list li::before { content: counter(callout-counter, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--ic-mustard); width: 26px; }
.callout-list li strong { color: var(--ic-cream); font-weight: 600; }

/* ---------- Ground It in Research: notebook figure ---------- */
.notebook-figure { margin: clamp(1rem, 2vw, 1.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(67,53,47,0.10); box-shadow: var(--shadow-card-lg); isolation: isolate; }
.notebook-figure__img { display: block; width: 100%; height: clamp(280px, 42vw, 460px); object-fit: cover; object-position: center 38%; filter: contrast(1.02) saturate(0.92); }
.notebook-figure__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(244,242,236,0) 55%, rgba(244,242,236,0.96) 100%), linear-gradient(95deg, rgba(244,242,236,0.55) 0%, rgba(244,242,236,0) 38%); }
.notebook-figure__caption { position: absolute; left: clamp(1.5rem, 3vw, 2.5rem); bottom: clamp(1.25rem, 2.5vw, 1.75rem); right: clamp(1.5rem, 3vw, 2.5rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; z-index: 2; }
.notebook-figure__caption-text { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem); line-height: 1.4; color: var(--ic-ink); max-width: 36ch; text-wrap: balance; }
.notebook-figure__stamp { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.notebook-figure__stamp::before { content: ""; width: 28px; height: 1px; background: var(--ic-accent); opacity: 0.7; }

/* Pick a Partner: carpenter figure */
.partner-figure { margin: clamp(1rem, 2vw, 1.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(67,53,47,0.10); box-shadow: var(--shadow-card-lg); isolation: isolate; }
.partner-figure__img { display: block; width: 100%; height: clamp(280px, 42vw, 460px); object-fit: cover; object-position: center 40%; filter: contrast(1.02) saturate(0.92); }
.partner-figure__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(244,242,236,0) 55%, rgba(244,242,236,0.96) 100%), linear-gradient(95deg, rgba(244,242,236,0.55) 0%, rgba(244,242,236,0) 38%); }
.partner-figure__caption { position: absolute; left: clamp(1.5rem, 3vw, 2.5rem); bottom: clamp(1.25rem, 2.5vw, 1.75rem); right: clamp(1.5rem, 3vw, 2.5rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; z-index: 2; }
.partner-figure__caption-text { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem); line-height: 1.4; color: var(--ic-ink); max-width: 36ch; text-wrap: balance; }
.partner-figure__stamp { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.partner-figure__stamp::before { content: ""; width: 28px; height: 1px; background: var(--ic-accent); opacity: 0.7; }

/* Ground It in Research: triangulation Venn */
.triangulation { margin: clamp(2rem, 4vw, 3rem) 0; padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--white); border: 1px solid rgba(67,53,47,0.10); border-radius: 14px; box-shadow: var(--shadow-card); }
.triangulation__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.triangulation__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); margin: 0; }
.triangulation__title { font-family: var(--font-display); font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.4rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; margin: 4px 0 0; color: var(--ic-ink); }
.triangulation__svg { display: block; width: 100%; height: auto; margin: 6px 0 14px; }
.triangulation__caption { font-size: 14.5px; line-height: 1.6; color: var(--ic-muted); margin: 0; max-width: 56ch; }
.tri-circle { fill: var(--ic-accent); fill-opacity: 0.10; stroke: var(--ic-accent); stroke-opacity: 0.55; stroke-width: 1.4; }
.tri-circle--b { fill: #6A7A5C; fill-opacity: 0.10; stroke: #6A7A5C; stroke-opacity: 0.55; }
.tri-circle--c { fill: #F39200; fill-opacity: 0.10; stroke: #F39200; stroke-opacity: 0.55; }
.tri-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--ic-ink); }
.tri-sublabel { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ic-muted); }
.tri-center-bg { fill: var(--white); stroke: var(--ic-ink); stroke-width: 1.2; }
.tri-center-label { font-family: var(--font-display); font-size: 14px; font-weight: 500; fill: var(--ic-ink); letter-spacing: -0.01em; }
.tri-center-sub { font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--ic-accent); }

/* Ground It in Research: signal / opinion-vs-evidence */
.signal-figure { margin: clamp(2rem, 4vw, 3rem) 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.signal-pane { border-radius: 14px; padding: clamp(1.25rem, 2vw, 1.75rem); border: 1px solid rgba(67,53,47,0.10); display: flex; flex-direction: column; min-height: 0; }
.signal-pane--opinion { background: rgba(247,244,224,0.45); }
.signal-pane--evidence { background: var(--white); border-left: 3px solid var(--ic-accent); box-shadow: var(--shadow-card); }
.signal-pane__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-muted); margin: 0 0 4px; }
.signal-pane--evidence .signal-pane__kicker { color: var(--ic-accent); }
.signal-pane__title { font-family: var(--font-display); font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.25rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--ic-ink); }
.signal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.signal-list li { font-size: 14.5px; line-height: 1.5; color: var(--ic-ink); position: relative; padding-left: 22px; }
.signal-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--ic-muted); font-family: var(--font-mono); opacity: 0.6; }
.signal-pane--opinion .signal-list li { color: var(--ic-muted); font-style: italic; }
.evidence-checklist { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; counter-reset: ev-counter; }
.evidence-checklist li { position: relative; padding: 14px 14px 14px 50px; background: rgba(67,53,47,0.18); border-radius: 10px; font-size: 15px; line-height: 1.5; color: var(--ic-cream); counter-increment: ev-counter; }
.evidence-checklist li::before { content: counter(ev-counter, decimal-leading-zero); position: absolute; left: 14px; top: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--ic-mustard); }
.evidence-checklist li strong { display: block; color: var(--ic-cream); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.evidence-checklist li span { color: #c9c2ad; font-size: 13.5px; line-height: 1.5; }

/* ---------- Brand Promise: wax figure ---------- */
.wax-figure { margin: clamp(1rem, 2vw, 1.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(67,53,47,0.10); box-shadow: var(--shadow-card-lg); isolation: isolate; }
.wax-figure__img { display: block; width: 100%; height: clamp(300px, 44vw, 480px); object-fit: cover; object-position: center 55%; filter: contrast(1.02) saturate(0.95); }
.wax-figure__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(244,242,236,0) 50%, rgba(244,242,236,0.96) 100%), linear-gradient(95deg, rgba(244,242,236,0.45) 0%, rgba(244,242,236,0) 42%); }
.wax-figure__caption { position: absolute; left: clamp(1.5rem, 3vw, 2.5rem); bottom: clamp(1.25rem, 2.5vw, 1.75rem); right: clamp(1.5rem, 3vw, 2.5rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; z-index: 2; }
.wax-figure__caption-text { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem); line-height: 1.4; color: var(--ic-ink); max-width: 38ch; text-wrap: balance; }
.wax-figure__stamp { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.wax-figure__stamp::before { content: ""; width: 28px; height: 1px; background: var(--ic-accent); opacity: 0.7; }

/* ---------- Measurement: dial figure ---------- */
.dial-figure { margin: clamp(1rem, 2vw, 1.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(67,53,47,0.10); box-shadow: var(--shadow-card-lg); isolation: isolate; aspect-ratio: 5 / 2.4; background: #2a1d14; }
.dial-figure__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; filter: contrast(1.04) saturate(1.02); }
.dial-figure__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,8,0.78) 0%, rgba(20,12,8,0.45) 28%, rgba(20,12,8,0.05) 55%, rgba(20,12,8,0) 100%), linear-gradient(180deg, rgba(20,12,8,0) 60%, rgba(20,12,8,0.35) 100%); pointer-events: none; }
.dial-figure__caption { position: absolute; left: clamp(1.5rem, 3vw, 2.5rem); top: clamp(1.5rem, 3vw, 2.5rem); bottom: clamp(1.5rem, 3vw, 2.5rem); width: min(42%, 380px); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; z-index: 2; color: var(--ic-cream); }
.dial-figure__stamp-top { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-mustard); padding: 8px 14px 8px 12px; border: 1px solid rgba(255,211,101,0.40); border-radius: 999px; background: rgba(20,14,10,0.30); backdrop-filter: blur(2px); }
.dial-figure__stamp-glyph { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--ic-mustard); color: var(--ic-ink); font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 1; }
.dial-figure__caption-text { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.55rem); line-height: 1.35; margin: 0; text-wrap: balance; max-width: 22ch; color: var(--ic-cream); text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.dial-figure__stamp-bot { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,244,224,0.7); }

/* Measurement: four questions card */
.four-q { margin: clamp(2rem, 3.5vw, 3rem) 0; background: var(--white); border: 1px solid rgba(67,53,47,0.12); border-radius: 14px; box-shadow: var(--shadow-card-md); overflow: hidden; position: relative; }
.four-q__head { padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2.25rem) clamp(0.75rem, 1.5vw, 1rem); border-bottom: 1px dashed rgba(67,53,47,0.18); position: relative; }
.four-q__stamp { position: absolute; top: clamp(1.25rem, 2.2vw, 1.75rem); right: clamp(1.25rem, 2.2vw, 1.75rem); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); padding: 6px 11px; border: 1px solid var(--ic-accent); border-radius: 4px; transform: rotate(2deg); background: rgba(227,96,56,0.04); }
.four-q__stamp::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ic-accent); display: inline-block; }
.four-q__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 8px; }
.four-q__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 0.8vw, 1.85rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.012em; margin: 0 0 8px; color: var(--ic-ink); max-width: 22ch; text-wrap: balance; }
.four-q__lede { font-size: 14.5px; line-height: 1.55; color: var(--ic-muted); margin: 0; max-width: 56ch; }
.four-q__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.four-q__item { padding: clamp(1.25rem, 2vw, 1.6rem) clamp(1.5rem, 2.5vw, 2.25rem); border-bottom: 1px dashed rgba(67,53,47,0.12); border-right: 1px dashed rgba(67,53,47,0.12); display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.four-q__item:nth-child(2n) { border-right: none; }
.four-q__item:nth-last-child(-n+2) { border-bottom: none; }
.four-q__num { width: 36px; height: 36px; border-radius: 999px; background: rgba(227,96,56,0.10); border: 1px solid rgba(227,96,56,0.35); color: var(--ic-accent); font-family: var(--font-mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: 0.04em; flex: 0 0 auto; }
.four-q__q { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: -0.005em; color: var(--ic-ink); margin: 0 0 6px; text-wrap: balance; }
.four-q__hint { font-size: 14px; line-height: 1.55; color: var(--ic-muted); margin: 0; }
.four-q__footer { padding: clamp(1rem, 1.6vw, 1.25rem) clamp(1.5rem, 2.5vw, 2.25rem); border-top: 1px dashed rgba(67,53,47,0.18); background: rgba(247,244,224,0.55); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.four-q__footer-text { font-family: var(--font-display); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--ic-ink); margin: 0; max-width: 56ch; }
.four-q__footer-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-muted); white-space: nowrap; }

/* Measurement: networking ledger */
.ledger { margin: clamp(2rem, 3.5vw, 3rem) 0; background: var(--white); border: 1px solid rgba(67,53,47,0.10); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.ledger__head { padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.25rem); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid rgba(67,53,47,0.10); }
.ledger__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 8px; }
.ledger__title { font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 0.7vw, 1.7rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.012em; margin: 0; color: var(--ic-ink); max-width: 22ch; }
.ledger__before { text-align: right; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-muted); }
.ledger__before-num { display: block; font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 500; letter-spacing: -0.015em; color: var(--ic-ink); line-height: 1; margin-bottom: 4px; }
.ledger__funnel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 2.5vw, 2.25rem); background: linear-gradient(rgba(247,244,224,0.4), rgba(247,244,224,0.4)), repeating-linear-gradient(0deg, transparent 0px, transparent 27px, rgba(67,53,47,0.05) 27px, rgba(67,53,47,0.05) 28px); position: relative; }
.ledger__funnel-cell { padding: 6px 14px; position: relative; }
.ledger__funnel-cell + .ledger__funnel-cell::before { content: "→"; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); color: var(--ic-accent); font-family: var(--font-display); font-size: 18px; opacity: 0.6; }
.ledger__funnel-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ic-muted); margin: 0 0 4px; }
.ledger__funnel-value { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 0.8vw, 1.85rem); font-weight: 500; letter-spacing: -0.01em; color: var(--ic-ink); line-height: 1.1; margin: 0 0 2px; }
.ledger__funnel-sub { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--ic-muted); margin: 0; }
.ledger__verdict { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(67,53,47,0.10); }
.ledger__col { padding: clamp(1.25rem, 2vw, 1.6rem) clamp(1.5rem, 2.5vw, 2.25rem); }
.ledger__col + .ledger__col { border-left: 1px solid rgba(67,53,47,0.10); }
.ledger__col--kept { background: rgba(247,244,224,0.4); }
.ledger__col--left { background: rgba(67,53,47,0.025); }
.ledger__col-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 16px; }
.ledger__col-tag::before { content: ""; width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.ledger__col--kept .ledger__col-tag { color: var(--ic-accent); }
.ledger__col--kept .ledger__col-tag::before { background: var(--ic-accent); }
.ledger__col--left .ledger__col-tag { color: var(--ic-muted); }
.ledger__col--left .ledger__col-tag::before { background: rgba(67,53,47,0.35); }
.ledger__col-stat { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
.ledger__col-num { font-family: var(--font-display); font-size: clamp(1.85rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1; color: var(--ic-ink); margin: 0; }
.ledger__col--left .ledger__col-num { color: rgba(67,53,47,0.55); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(67,53,47,0.4); }
.ledger__col-numlbl { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-muted); margin: 0; }
.ledger__col-body { font-size: 14.5px; line-height: 1.55; color: var(--ic-ink); margin: 0; }
.ledger__col--left .ledger__col-body { color: var(--ic-muted); }
.ledger__caption { padding: clamp(0.9rem, 1.5vw, 1.25rem) clamp(1.5rem, 2.5vw, 2.25rem); border-top: 1px solid rgba(67,53,47,0.10); font-family: var(--font-display); font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--ic-muted); margin: 0; background: rgba(247,244,224,0.35); }
.ledger__caption strong { font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-ink); margin-right: 8px; }

/* Measurement: closing pull-quote */
.measure-quote { margin: clamp(2.5rem, 4vw, 3.5rem) 0 clamp(1rem, 2vw, 1.5rem); padding: clamp(1.5rem, 3vw, 2rem) clamp(1.75rem, 3vw, 2.25rem); border-top: 1px solid rgba(67,53,47,0.18); border-bottom: 1px solid rgba(67,53,47,0.18); display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: center; }
.measure-quote__mark { font-family: var(--font-display); font-size: clamp(3.5rem, 2rem + 4vw, 5rem); line-height: 1; color: var(--ic-accent); font-weight: 500; flex-shrink: 0; align-self: flex-start; }
.measure-quote__text { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.012em; color: var(--ic-ink); margin: 0 0 8px; text-wrap: balance; }
.measure-quote__attr { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-muted); }

/* ---------- Hub hero: photo column & PDF wrapper ---------- */
.hub-hero__photo { min-width: 0; display: flex; align-items: center; }
.hub-hero__img { display: block; width: 100%; height: clamp(320px, 44vw, 520px); object-fit: cover; border-radius: 14px; box-shadow: 0 1px 2px rgba(67,53,47,0.06), 0 18px 48px rgba(67,53,47,0.18); }
.hub-hero__pdf-wrap { max-width: 560px; margin: clamp(1.5rem, 3vw, 2.5rem) auto; padding: 0 var(--gutter); }

/* ---------- Trail section header ---------- */
.trail-section__inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.trail-section__hd { max-width: 640px; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.trail-section__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.012em; margin: 0 0 12px; }
.trail-section__desc { font-size: 16px; line-height: 1.6; color: var(--ic-muted); margin: 0; max-width: 54ch; }

/* ---------- Trail map: SVG circle styles ---------- */
.tm-contour { fill: none; stroke: rgba(67,53,47,0.08); stroke-width: 1; }
.tm-marker__ring { fill: rgba(247,244,224,0.9); stroke: rgba(67,53,47,0.45); stroke-width: 1.5; transition: stroke 200ms ease; }
.tm-marker__dot  { fill: var(--ic-accent); }
.tm-marker:hover .tm-marker__ring,
.tm-marker:focus-visible .tm-marker__ring { stroke: var(--ic-accent); stroke-width: 2; }
@keyframes tm-trail-march { to { stroke-dashoffset: -84; } }
.tm-trail { fill: none; stroke: var(--ic-accent); stroke-width: 2; stroke-dasharray: 6 8; opacity: 0.65; animation: tm-trail-march 14s linear infinite; }

/* ---------- Principles section ---------- */
.principles__inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- URL chip ---------- */
.url-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--ic-muted); }
.url-chip__icon { flex-shrink: 0; opacity: 0.7; }
.url-chip__link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgba(67,53,47,0.12); border-radius: 6px; background: rgba(255,255,255,0.55); color: var(--ic-ink); transition: color 150ms ease, border-color 150ms ease; text-decoration: none; word-break: break-all; }
.url-chip__link:hover { color: var(--ic-accent); border-color: rgba(227,96,56,0.45); }

/* ---------- Sub-hero lead column ---------- */
.sub-hero__lead { min-width: 0; }

/* ── Responsive: guide components ────────────────────────── */
@media (max-width: 860px) {
  .hub-hero { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
  .hub-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .hub-hero__h1, .hub-hero__subtitle { max-width: none; }
  .hub-hero__url-link { font-size: 11px; word-break: break-all; padding: 5px 8px; }
  .pdf-card { padding: 18px 18px 16px; }
  .pdf-card__title { font-size: 19px; }
  .trail-section__caption-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px 8px; }
  .trail-section__legend { gap: 12px; flex-wrap: wrap; }
  .tm-map { display: none; }
  .tm-list { display: block; }
  .principles__grid, .principles__grid--5across { grid-template-columns: 1fr; gap: 14px; }
  .principle { padding: 22px 20px; }
  .trail-preview { display: none; }
  .final-cta--guide .final-cta__chev,
  .final-cta__head-wrap .final-cta__chev { width: 36px; height: 36px; right: -2.5rem; top: -0.4rem; }
  .faq__q { font-size: 17px; padding: 18px 2px; gap: 14px; }
  .sub-hero { padding-top: clamp(2rem, 5vw, 3rem); }
  .sub-hero__inner { grid-template-columns: 1fr; }
  .sub-hero__h1, .sub-hero__subtitle { max-width: none; }
  .stamp-figure { grid-template-columns: 1fr; gap: 18px; }
  .stamp-figure__img { width: 180px; height: 180px; margin: 0 auto; }
  .next-link { flex-direction: column; align-items: flex-start; }
  .trail-strip { top: 56px; }
  .trail-strip__inner { padding: 10px var(--gutter); gap: 10px; }
  .trail-strip__svg { height: 56px; }
  .trail-strip__back { font-size: 11px; }
  .article { padding-left: var(--gutter); padding-right: var(--gutter); }
  .intro-band { margin-left: var(--gutter); margin-right: var(--gutter); padding: 1.5rem 1.25rem; }
  .intro-band p { font-size: 16px; }
  .moth-figure { aspect-ratio: 4 / 3; }
  .moth-figure__caption { left: 8%; }
  .moth-figure__caption-text { max-width: 18ch; font-size: 1.15rem; }
  .hero-photo__frame { aspect-ratio: 4 / 3; }
  .model-figure { grid-template-columns: 1fr; }
  .notebook-figure__caption { flex-direction: column; align-items: flex-start; gap: 12px; }
  .signal-figure { grid-template-columns: 1fr; }
  .evidence-checklist { grid-template-columns: 1fr; }
  .triangulation__svg { max-height: 320px; }
  .wax-figure__caption, .notebook-figure__caption { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dial-figure { aspect-ratio: 4 / 3.2; }
  .dial-figure__caption { width: 70%; }
  .dial-figure__caption-text { font-size: 1.15rem; max-width: 18ch; }
  .author-bio__inner { grid-template-columns: 1fr; gap: 20px; }
  .author-bio__photo { width: 110px; height: 110px; }
  .shiny-ed-hero { aspect-ratio: 4 / 3; min-height: 380px; }
  .shiny-ed-hero__nav { display: none; }
  .shiny-twoway { grid-template-columns: 1fr; }
  .shiny-twoway__col + .shiny-twoway__col { border-left: none; border-top: 1px solid rgba(67,53,47,0.10); }
}

@media (max-width: 720px) {
  .shiny-chart__body { grid-template-columns: 1fr; }
  .shiny-chart__keys { border-left: none; border-top: 1px solid rgba(67,53,47,0.12); padding: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .shiny-fieldguide__grid { grid-template-columns: 1fr; }
  .shiny-test { grid-template-columns: 1fr; }
  .four-q__list { grid-template-columns: 1fr; }
  .four-q__item { border-right: none; }
  .four-q__item:nth-last-child(2) { border-bottom: 1px dashed rgba(67,53,47,0.12); }
  .four-q__stamp { position: static; display: inline-flex; margin-bottom: 10px; }
  .ledger__funnel { grid-template-columns: 1fr; }
  .ledger__funnel-cell + .ledger__funnel-cell::before { content: "↓"; left: 50%; top: -10px; transform: translateX(-50%); }
  .ledger__verdict { grid-template-columns: 1fr; }
  .ledger__col + .ledger__col { border-left: none; border-top: 1px solid rgba(67,53,47,0.10); }
  .ledger__head { flex-direction: column; align-items: flex-start; }
  .ledger__before { text-align: left; }
  .measure-quote { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 600px) {
  .trail-strip__svg { height: 48px; }
  .tstrip-marker:not(.is-current) .tstrip-marker__label { display: none; }
}

@media (max-width: 480px) {
  .hub-hero__url { flex-direction: column; align-items: flex-start; }
  .principle__title { font-size: 18px; }
  .next-link { padding: 1.25rem; gap: 12px; }
  .next-link__arrow { font-size: 22px; }
  .callout { padding: 1.5rem 1.25rem; }
  .shiny-ed-hero { aspect-ratio: 3 / 4; min-height: 340px; }
  .shiny-pullquote__text { font-size: 1.35rem; }
  .shiny-dropcap::first-letter { font-size: 3.5rem; }
}


/* ===========================================================
   Rise & Referral landing page
   =========================================================== */

/* -----------------------------------------------------------
   Hero
   ----------------------------------------------------------- */
.rr-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(3rem, 5vw, 5.5rem) var(--gutter) clamp(3.5rem, 6vw, 6rem);
  max-width: 1100px;
  margin: 0 auto;
}

.rr-hero__headline {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 28px;
}

.rr-hero__subhead {
  font-size: clamp(1rem, 0.75rem + 0.5vw, 1.125rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
  margin: 0 0 36px;
}

.rr-hero__ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.rr-hero__callout {
  background: rgba(67, 53, 47, 0.04);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  padding: 2rem 1.75rem;
  margin-top: 1rem;
}

.rr-hero__callout-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 8px;
}

/* -----------------------------------------------------------
   Curriculum — dark surface
   ----------------------------------------------------------- */
.rr-curriculum {
  background: var(--ink);
  padding: var(--section-y) var(--gutter);
  position: relative;
}

.rr-curriculum__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.rr-curriculum__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.rr-module {
  background: rgba(247, 244, 224, 0.05);
  border: 1px solid rgba(247, 244, 224, 0.08);
  padding: 1.75rem 1.5rem;
  transition: background 200ms ease, border-color 200ms ease;
}

.rr-module:hover {
  background: rgba(247, 244, 224, 0.08);
  border-color: rgba(247, 244, 224, 0.14);
}

.rr-module__num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 14px;
}

.rr-module__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--cream);
  margin: 0 0 12px;
}

.rr-module__body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(247, 244, 224, 0.6);
  margin: 0;
}

/* -----------------------------------------------------------
   Bonuses — canvas texture bg
   ----------------------------------------------------------- */
.rr-bonuses {
  padding: var(--section-y) var(--gutter);
}

.rr-bonuses__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.rr-bonuses__header {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.rr-bonuses__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.rr-bonus {
  border-top: 2px solid var(--mustard);
  padding-top: 1.5rem;
}

.rr-bonus__icon {
  font-size: 11px;
  color: var(--mustard);
  margin-bottom: 14px;
  letter-spacing: 6px;
}

.rr-bonus__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--ink);
  margin: 0 0 10px;
}

.rr-bonus__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

/* -----------------------------------------------------------
   Testimonials
   ----------------------------------------------------------- */
.rr-proof {
  padding: var(--section-y) var(--gutter);
  background: var(--paper);
}

.rr-proof__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.rr-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.rr-testimonial {
  margin: 0;
  padding: 2rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.rr-testimonial__quote {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  font-style: normal;
  flex: 1;
}

.rr-testimonial__attribution {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rr-testimonial__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.rr-testimonial__title {
  font-size: 0.8125rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
}

/* -----------------------------------------------------------
   Registration form — canvas texture bg
   ----------------------------------------------------------- */
.rr-register {
  padding: var(--section-y) var(--gutter);
}

.rr-register__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.rr-register__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 24px;
}

.rr-register__body {
  font-size: clamp(0.95rem, 0.7rem + 0.4vw, 1.0625rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
  margin: 0 0 16px;
}

.rr-register__details {
  margin-top: 2rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--evergreen);
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
}

.rr-register__details p { margin: 0 0 6px; }

.rr-register__details a {
  color: var(--evergreen);
  text-decoration: none;
}

.rr-register__details a:hover { text-decoration: underline; }

/* -----------------------------------------------------------
   Responsive breakpoints
   ----------------------------------------------------------- */
@media (max-width: 960px) {
  .rr-curriculum__grid,
  .rr-bonuses__grid,
  .rr-proof__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .rr-hero {
    grid-template-columns: 1fr;
  }

  .rr-hero__callout {
    margin-top: 0;
  }

  .rr-curriculum__grid,
  .rr-bonuses__grid,
  .rr-proof__grid {
    grid-template-columns: 1fr;
  }

  .rr-register__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .rr-register__body {
    max-width: none;
  }
}


/* ===========================================================
   Built on Referrals landing page
   =========================================================== */

/* ---------- Updates opt-in card ---------- */
.bor-updates {
  position: relative;
  padding: 22px 24px 20px;
  background: rgba(247,244,224,0.78);
  border: 1px solid rgba(227,96,56,0.22);
  border-left: 3px solid var(--ic-accent);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 24px rgba(67,53,47,0.06);
  align-self: start;
}
.bor-updates__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 10px; }
.bor-updates__headline { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ic-ink); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 8px; }
.bor-updates__body { font-size: 13.5px; line-height: 1.5; color: var(--ic-muted); margin: 0 0 16px; }
.bor-updates__form { margin-top: 8px; }
.bor-updates__form .hs-form { font-family: var(--font-body); font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.bor-updates__form .hs-form-field { flex: 1; min-width: 0; margin-bottom: 0 !important; }
.bor-updates__form .hs-form .field { margin-bottom: 0 !important; }
.bor-updates__form label { display: none; }
.bor-updates__form .hs-error-msgs { margin: 4px 0 0; padding: 0; list-style: none; }
.bor-updates__form .hs-error-msgs li { font-size: 12px; color: #c0392b; }
.bor-updates__form .hs-button,
.bor-updates__form input[type="submit"] {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 11px 18px !important; border: none !important;
  border-radius: 0 !important; background: var(--ic-accent) !important; color: var(--white) !important;
  font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important;
  cursor: pointer !important; white-space: nowrap !important;
  transition: transform 150ms ease, filter 150ms ease !important;
}
.bor-updates__form .hs-button:hover,
.bor-updates__form input[type="submit"]:hover { transform: translateY(-1px) !important; filter: brightness(1.04) !important; }
.bor-updates__form .hs-input {
  width: 100%; padding: 11px 14px; border: 1px solid rgba(67,53,47,0.18);
  border-radius: 0; background: var(--white); font-family: var(--font-body);
  font-size: 14px; color: var(--ic-ink); outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.bor-updates__form .hs-input:focus { border-color: var(--ic-accent); box-shadow: 0 0 0 3px rgba(227,96,56,0.18); }

/* ---------- Article cards ---------- */
.bor-cards {
  padding: clamp(1rem, 2vw, 1.5rem) var(--gutter) clamp(2rem, 3vw, 3rem);
}
.bor-cards__inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.bor-cards__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.bor-cards__label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-accent); margin: 0 0 14px; }
.bor-cards__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.012em; margin: 0; }

.bor-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bor-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px 24px;
  background: rgba(247,244,224,0.72);
  border: 1px solid rgba(67,53,47,0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(67,53,47,0.04), 0 6px 16px rgba(67,53,47,0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
  color: inherit;
}
.bor-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-lg);
}
.bor-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ic-ink);
  margin: 0;
}
.bor-card__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ic-muted);
  margin: 0;
  flex: 1;
}
.bor-card__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ic-accent);
  align-self: flex-start;
  margin-top: auto;
}
.bor-card__cta::after { content: " →"; display: inline-block; transition: transform 200ms ease; }
.bor-card:hover .bor-card__cta::after { transform: translateX(3px); }

@media (max-width: 1024px) {
  .bor-cards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .bor-updates { padding: 18px 18px 16px; }
}

@media (max-width: 520px) {
  .bor-cards__grid { grid-template-columns: 1fr; gap: 14px; }
  .bor-card { padding: 22px 20px; }
}


/* ===========================================================
   Expertise page — /expertise/
   =========================================================== */

/* -----------------------------------------------------------
   Hero banner — full-bleed orange gradient
   ----------------------------------------------------------- */
.exp-banner {
  background:
    linear-gradient(135deg, rgba(201,66,24,0.88) 0%, rgba(227,96,56,0.88) 35%, rgba(240,128,48,0.88) 65%, rgba(245,165,48,0.88) 100%),
    var(--canvas-bg);
  background-size:     cover, auto;
  background-position: center, top left;
  background-repeat:   no-repeat, repeat;
  min-height: clamp(300px, 32vw, 420px);
}
.exp-banner__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(300px, 32vw, 420px);
  padding: clamp(3rem, 4vw + 1rem, 5rem) var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
}

.exp-banner__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 1.5rem;
}

/* Banner headline — max-width in ch units scales with font size so
   any headline ≤ 28 words (~60–70 chars) fills the banner cleanly.
   Do not switch back to px; px values don't track font size. */
.exp-banner__title {
  font-size: clamp(1.875rem, 2.5vw + 1rem, 3.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 28ch;
  margin: 0;
}

/* -----------------------------------------------------------
   Intro — orange heading, body text, origami bird, crumpled paper
   ----------------------------------------------------------- */
.exp-intro {
  padding: var(--section-y) var(--gutter) 0;
  overflow: hidden;
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "copy bird"
    "paper paper";
  gap: 0 clamp(2rem, 5vw, 5rem);
}

.exp-intro__copy {
  grid-area: copy;
  min-width: 0;
  max-width: 540px;
  align-self: start;
}

.exp-intro__heading {
  font-size: clamp(1.5rem, 2.2vw + 0.75rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.exp-intro__body {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 480px;
  margin: 0;
}

.exp-intro__bird-wrap {
  grid-area: bird;
  align-self: start;
}

.exp-intro__bird {
  width: clamp(220px, 26vw, 360px);
  height: auto;
  display: block;
}

.exp-intro__paper-wrap {
  grid-area: paper;
  margin: 0 calc(-1 * var(--gutter));
}

.exp-intro__paper {
  width: 100%;
  max-width: 100%;
  max-height: clamp(140px, 14vw, 200px);
  height: auto;
  object-fit: contain;
  object-position: left bottom;
  display: block;
}

/* -----------------------------------------------------------
   Services section heading
   ----------------------------------------------------------- */
.exp-services {
  padding: var(--section-y) var(--gutter);
}

.exp-services__inner { max-width: 1100px; margin-inline: auto; }

.exp-services__heading {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 2rem;
}

/* -----------------------------------------------------------
   Accordion
   ----------------------------------------------------------- */
.exp-acc { border-top: 1px solid var(--hairline); }

.exp-acc__item { border-bottom: 1px solid var(--hairline); }

.exp-acc__summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.exp-acc__summary::-webkit-details-marker { display: none; }
.exp-acc__summary::marker              { display: none; }

.exp-acc__icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--evergreen);
  color: var(--white);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: background 180ms ease;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

.exp-acc__icon::before { content: "+"; }

details[open] > .exp-acc__summary .exp-acc__icon {
  background: var(--accent);
}
details[open] > .exp-acc__summary .exp-acc__icon::before { content: "\2212"; }

.exp-acc__title {
  font-size: clamp(1.05rem, 1.1vw + 0.7rem, 1.35rem);
  font-weight: 600;
  color: var(--ink);
  transition: color 180ms ease;
  line-height: 1.25;
}

details[open] > .exp-acc__summary .exp-acc__title { color: var(--accent); }

.exp-acc__summary:hover .exp-acc__title    { color: var(--accent); }
.exp-acc__summary:hover .exp-acc__icon     { background: var(--accent); }

.exp-acc__body {
  padding: 0.25rem 0 2rem calc(26px + 1rem);
  max-width: 860px;
}

.exp-acc__desc {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.exp-acc__includes {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

.exp-acc__list {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.exp-acc__list li {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

.exp-acc__list li::marker { color: var(--accent); }

.exp-acc__link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.exp-acc__link:hover { text-decoration: underline; }

/* -----------------------------------------------------------
   Expertise — category labels (Plan / Execute / Measure)
   ----------------------------------------------------------- */
.exp-cat { margin-bottom: 2.5rem; }
.exp-cat:last-child { margin-bottom: 0; }

.exp-cat__label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 1.25rem 0 0.75rem;
  border-top: 2px solid var(--accent);
  margin-bottom: 0;
}

.exp-cat__num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  line-height: 1;
}

.exp-cat__name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */
@media (max-width: 720px) {
  .exp-intro {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "copy  copy"
      "paper bird";
    gap: 1rem 0;
  }
  .exp-intro__copy { max-width: 100%; }
  .exp-intro__paper-wrap {
    margin: 0 0 0 calc(-1 * var(--gutter));
    align-self: end;
  }
  .exp-intro__paper {
    max-height: clamp(100px, 28vw, 160px);
    object-position: right bottom;
  }
  .exp-intro__bird-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.5rem;
  }
  .exp-intro__bird { width: clamp(100px, 36vw, 160px); }
}

@media (max-width: 480px) {
  .exp-acc__body {
    padding-left: 0;
  }
}


/* ===========================================================
   AEO & SEO service page  (/expertise/execute/aeo-seo/)
   =========================================================== */

/* Breadcrumb strip — slim nav below orange hero */
.aeo-breadcrumb {
  border-bottom: 1px solid var(--hairline);
  padding: 0 var(--gutter);
}
.aeo-breadcrumb__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.aeo-breadcrumb a { color: var(--muted); text-decoration: none; transition: color 150ms; }
.aeo-breadcrumb a:hover { color: var(--accent); }
.aeo-breadcrumb .sep { color: rgba(67,53,47,0.25); }

/* Intro section */
.aeo-intro { padding: clamp(3.5rem, 6vw, 6rem) var(--gutter); }
.aeo-intro__inner { max-width: 820px; margin: 0 auto; }
.aeo-intro__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}
.aeo-intro__deck {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1.5rem;
  max-width: 36ch;
  text-wrap: balance;
}
.aeo-intro__body {
  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  max-width: 58ch;
}

/* Accent divider before pillars */
.aeo-divider-wrap {
  padding: 0 var(--gutter) clamp(2rem, 4vw, 3.5rem);
  max-width: calc(820px + 2 * clamp(1.25rem, 4vw, 4rem));
  margin: 0 auto;
}
.aeo-divider {
  border: none;
  height: 3px;
  width: 64px;
  background: var(--accent);
  border-radius: 2px;
  margin: 0;
}

/* Content pillars */
.aeo-pillar { padding: clamp(3rem, 5vw, 5.5rem) var(--gutter); border-bottom: 1px solid var(--hairline); }
.aeo-pillar--alt { background: rgba(244,242,236,0.55); }
.aeo-pillar__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.aeo-pillar__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.85rem;
}
.aeo-pillar__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1.1rem;
  max-width: 20ch;
  text-wrap: balance;
}
.aeo-pillar__body {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  max-width: 52ch;
}
.aeo-pillar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: center;
}
.aeo-pillar__list li {
  padding: 1rem 0 1rem 1.5rem;
  position: relative;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.aeo-pillar__list li:first-child { border-top: 1px solid var(--hairline); }
.aeo-pillar__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.3rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
}

/* Closing italic note */
.aeo-close {
  padding: clamp(3rem, 5vw, 5rem) var(--gutter);
  text-align: center;
  border-bottom: 1px solid var(--hairline);
}
.aeo-close__text {
  max-width: 62ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 0.85rem + 0.4vw, 1.15rem);
  line-height: 1.7;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 800px) {
  .aeo-pillar__inner { grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
  .aeo-pillar__title { max-width: none; }
  .aeo-pillar__body { max-width: none; }
}


/* ===========================================================
   Built on Referrals — Lesson Article Pages
   Uses standard get_header() / get_footer() — no custom body class.
   hero-shell provides canvas texture; paper-shell holds content.
   =========================================================== */

/* ── Article wrapper ──────────────────────────────────────── */
.lesson {
  width: 100%;
  color: var(--ink);
  font-family: var(--font-body);
}

/* ── Course chrome (sticky, sits below site nav) ─────────── */
/* Nav is ~122-128px tall; chrome sticks just below it.       */
.course-chrome {
  position: sticky;
  top: clamp(122px, calc(4.925rem + 1.25vw + 2rem), 146px);
  z-index: 15;
  background:
    linear-gradient(rgba(244,242,236,0.96), rgba(244,242,236,0.96)),
    url('assets/canvas-bg-1024.webp');
  background-size: cover, 100% auto;
  background-repeat: no-repeat, repeat-y;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(67,53,47,0.07);
}
.course-chrome__progress {
  height: 3px;
  background: rgba(67,53,47,0.08);
  position: relative;
}
.course-chrome__progress::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 7%;
  background: linear-gradient(90deg, var(--accent), var(--amber));
}
.course-chrome__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.course-chrome__brand {
  display: flex; align-items: center; gap: 18px;
}
.course-chrome__brand a { display: flex; align-items: center; }
.course-chrome__brand img { height: 28px; width: auto; display: block; }
.course-chrome__brand-divider {
  width: 1px; height: 22px;
  background: rgba(67,53,47,0.18);
  flex-shrink: 0;
}
.course-chrome__course-name {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.course-chrome__course-name b { color: var(--ink); font-weight: 700; }
.course-chrome__steps {
  display: flex; align-items: center; gap: 10px;
}
.course-chrome__dot {
  width: 28px; height: 4px; border-radius: 2px;
  background: rgba(67,53,47,0.16);
  flex-shrink: 0;
}
.course-chrome__dot.is-active {
  background: var(--accent);
}
.course-chrome__indicator {
  display: none;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.course-chrome__nav {
  display: flex; align-items: center; gap: 14px;
}
.course-chrome__nav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(67,53,47,0.18);
  background: transparent;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: background 150ms var(--ease-standard), color 150ms var(--ease-standard);
}
.course-chrome__nav-btn--next {
  background: var(--ink); color: var(--cream);
  border-color: var(--ink);
}
.course-chrome__nav-btn--next:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.course-chrome__nav-btn--prev:hover { color: var(--ink); }
.course-chrome__nav-btn:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 3px;
}

/* ── Lesson hero (inside hero-shell, centered) ────────────── */
.lesson-hero {
  position: relative;
  padding: clamp(2.5rem, 4vw, 4rem) var(--gutter) clamp(2rem, 3vw, 3rem);
  text-align: center;
}
.lesson-hero__inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
.lesson-hero__chev {
  position: absolute;
  top: 0;
  right: -2rem;
  width: clamp(56px, 6vw, 84px);
  height: auto;
  pointer-events: none;
}
.lesson-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
}
.lesson-hero__bar {
  display: inline-block;
  width: 36px; height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.lesson-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 2rem + 3vw, 4rem);
  line-height: 1.06; letter-spacing: -0.018em;
  margin: 0; color: var(--ink);
  text-wrap: balance;
}
/* gradient-head utility class handles the em gradient */
.lesson-hero__meta {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.lesson-byline {
  display: flex; align-items: center; gap: 12px;
}
.lesson-byline__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(67,53,47,0.18);
  flex-shrink: 0;
}
.lesson-byline__name {
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  color: var(--ink); line-height: 1.2; margin: 0;
  text-align: left;
}
.lesson-byline__role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 4px 0 0;
  text-align: left;
}
.lesson-meta-pip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.lesson-meta-pip::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Lesson body ──────────────────────────────────────────── */
.v1 .lesson-body {
  padding: 64px 110px 88px;
  max-width: 1280px;
  margin: 0 auto;
}
.v1 .prose {
  max-width: 720px;
  margin: 0 auto;
}
.v1 .prose p {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.68; color: #4a4039;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.v1 .prose p.lede {
  font-size: 21px; line-height: 1.55; color: var(--ink);
  margin-bottom: 28px;
}
/* Drop cap */
.v1 .prose p.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  float: left;
  font-size: 96px;
  line-height: 0.85;
  padding: 8px 14px 0 0;
  color: var(--accent);
  letter-spacing: -0.02em;
}

/* Inline link style */
.lesson-inline-link {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  text-decoration: none;
  transition: opacity 150ms;
}
.lesson-inline-link:hover { opacity: 0.75; }

/* Bold ink */
.lesson-strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── Photo row ────────────────────────────────────────────── */
.v1 .photo-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  margin: 40px 0 28px;
}
.photo {
  background: #2c211c;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(67,53,47,0.18);
  isolation: isolate;
}
.photo--portrait { aspect-ratio: 4 / 5; }
.photo::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 28% 32%, rgba(255,180,90,0.22) 0%, transparent 55%),
    radial-gradient(circle at 78% 78%, rgba(255,211,101,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #3a2a22 0%, #1f1612 100%);
}
.photo::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url('assets/canvas-bg-cool.png');
  background-size: 720px 720px;
  background-repeat: repeat;
  opacity: 0.06;
  mix-blend-mode: screen;
}
.photo__corner {
  position: absolute; top: 14px; left: 14px;
  z-index: 2;
  width: 22px; height: 22px;
  border-top: 1px solid rgba(247,244,224,0.45);
  border-left: 1px solid rgba(247,244,224,0.45);
}
.photo__label {
  position: absolute; left: 18px; bottom: 16px; right: 18px;
  z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(247,244,224,0.82);
}

/* ── Pull quote ───────────────────────────────────────────── */
.v1 .pull--big {
  margin: 48px -40px;
  padding: 28px 0 28px 36px;
  border-left: 4px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.v1 .pull--big cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; font-style: normal;
  color: var(--muted);
}

/* ── Section rule ─────────────────────────────────────────── */
.v1 .section-rule {
  display: flex; align-items: center; gap: 18px;
  margin: 56px 0 28px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.v1 .section-rule::after {
  content: ""; flex: 1; height: 1px; background: rgba(67,53,47,0.18);
}

/* ── Pillars block ────────────────────────────────────────── */
.pillars {
  background: #fff;
  border: 1px solid rgba(67,53,47,0.09);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-top: 0;
}
.pillars__head {
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(247,244,224,0.4);
}
.pillars__head .kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 10px;
}
.pillars__head h3 {
  font-family: var(--font-display); font-size: 28px; font-weight: 500;
  margin: 0; color: var(--ink); line-height: 1.18;
  letter-spacing: -0.012em;
}
.pillars__list {
  list-style: none; margin: 0; padding: 0;
}
.pillars__item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 28px;
  align-items: baseline;
  padding: 22px 32px;
  border-bottom: 1px solid var(--hairline);
}
.pillars__item:last-child { border-bottom: none; }
.pillars__item.is-current { background: rgba(227,96,56,0.04); }
.pillars__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 38px; line-height: 1; letter-spacing: -0.02em;
  color: var(--accent);
}
.pillars__num.is-pending { color: rgba(67,53,47,0.28); }
.pillars__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.25;
  color: var(--ink); margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.pillars__q {
  font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0;
}
.pillars__tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.pillars__item.is-current .pillars__tag { color: var(--accent); }

/* ── Reflection card ──────────────────────────────────────── */
.reflection {
  margin-top: 56px;
  background: var(--cream);
  border: 1px solid rgba(227,96,56,0.22);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 36px 40px 40px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 24px rgba(67,53,47,0.06);
}
.reflection__kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 14px;
}
.reflection__title {
  font-family: var(--font-display); font-size: 30px; font-weight: 500;
  margin: 0 0 28px; color: var(--ink); letter-spacing: -0.01em;
  line-height: 1.18;
}
.reflection__qs {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.reflection__q {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(67,53,47,0.10);
  border-radius: 10px;
  padding: 22px 22px 24px;
}
.reflection__q-n {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 12px;
}
.reflection__q-text {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; line-height: 1.28; color: var(--ink);
  margin: 0; letter-spacing: -0.005em;
}
.reflection__lines {
  margin-top: 16px;
  border-top: 1px dashed rgba(67,53,47,0.16);
  padding-top: 12px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; color: rgba(67,53,47,0.32);
}

/* ── CTA card ─────────────────────────────────────────────── */
.cta-card {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 70% at 80% 0%, rgba(227,96,56,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 10% 100%, rgba(255,211,101,0.12) 0%, transparent 50%),
    linear-gradient(180deg, #312822 0%, #221a16 100%);
  color: var(--cream);
}
.cta-card::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url('assets/canvas-bg-cool.png');
  background-size: 720px 720px;
  background-repeat: repeat;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
}
.cta-card__chev {
  position: absolute; top: 28px; right: 32px;
  width: 56px; z-index: 2;
  animation: ic-lesson-float 4.5s ease-in-out infinite,
             ic-lesson-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
.cta-card__copy {
  padding: 44px 48px 48px;
  position: relative; z-index: 1;
}
.cta-card__kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--mustard);
  margin: 0 0 16px;
}
.cta-card__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 34px; line-height: 1.12; letter-spacing: -0.014em;
  color: var(--cream); margin: 0 0 28px; text-wrap: balance;
}
.cta-card__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 28px rgba(227,96,56,0.28);
  transition: transform 150ms var(--ease-standard), filter 150ms var(--ease-standard);
}
.cta-card__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.cta-card__btn:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 4px;
}
.cta-card__side {
  padding: 44px 48px 48px;
  border-left: 1px solid rgba(247,244,224,0.10);
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cta-card__side-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 96px; line-height: 0.9; color: var(--mustard);
  letter-spacing: -0.025em;
  margin: 0;
}
.cta-card__side-tag {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mustard);
  margin: 8px 0 0;
}
.cta-card__side-body {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(247,244,224,0.6);
  max-width: 220px; line-height: 1.5;
  margin: 14px 0 0;
}
.cta-card__side-foot {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(247,244,224,0.45);
  margin-top: 32px;
}

/* ── Lesson footer ────────────────────────────────────────── */
.lesson-foot {
  margin-top: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  flex-wrap: wrap;
  gap: 20px;
}
.lesson-foot__next {
  font-family: var(--font-display);
  font-weight: 500; font-size: 22px;
  color: var(--ink); letter-spacing: -0.005em;
  text-transform: none; text-align: right;
}
.lesson-foot__next small {
  display: block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}

/* ── Responsive — 860px ───────────────────────────────────── */
@media (max-width: 860px) {
  .lesson-hero { text-align: left; }
  .lesson-hero__eyebrow { justify-content: flex-start; }
  .lesson-hero__meta { justify-content: flex-start; }
  .lesson-hero__chev { display: none; }

  .course-chrome { top: clamp(122px, calc(4.925rem + 1.25vw + 2rem), 146px); }
  .course-chrome__row { padding: 14px 24px; gap: 16px; }
  .course-chrome__steps .course-chrome__dot { display: none; }
  .course-chrome__indicator { display: block; }
  .course-chrome__nav-btn--prev { display: none; }
  .course-chrome__course-name { display: none; }

  .v1 .lesson-body { padding: 28px 24px 56px; }
  .v1 .prose { max-width: 100%; }

  .v1 .photo-row { grid-template-columns: 1fr; gap: 16px; }
  .photo--portrait { aspect-ratio: 16 / 10; }

  .v1 .pull--big {
    margin: 32px 0;
    font-size: clamp(1.4rem, 1rem + 2vw, 2rem);
    padding-left: 24px;
  }

  .v1 .section-rule { margin: 40px 0 20px; }

  .pillars__item { grid-template-columns: 60px 1fr; gap: 16px; }
  .pillars__tag  { grid-column: 2; margin-top: 4px; }

  .reflection__qs { grid-template-columns: 1fr; gap: 12px; }
  .reflection { padding: 28px 24px 32px; }
  .reflection__title { font-size: 24px; }

  .cta-card { grid-template-columns: 1fr; }
  .cta-card__side {
    border-left: none;
    border-top: 1px solid rgba(247,244,224,0.10);
    flex-direction: row; align-items: center; gap: 24px;
    padding: 28px 32px;
  }
  .cta-card__side-num { font-size: 64px; }
  .cta-card__side-foot { margin-top: 0; }
  .cta-card__copy { padding: 32px 32px 28px; }
  .cta-card__title { font-size: 26px; }
  .cta-card__chev { display: none; }

  .lesson-foot { flex-direction: column; align-items: flex-start; }
  .lesson-foot__next { text-align: left; }
}

/* ── Responsive — 480px ───────────────────────────────────── */
@media (max-width: 480px) {
  .lesson-hero__meta { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pillars__head h3 { font-size: 22px; }
  .cta-card__side { flex-direction: column; align-items: flex-start; }
}


/* ===========================================================
   ABOUT PAGE (page-about.php)
   =========================================================== */

/* HERO — full-bleed orange→yellow gradient with paint stroke right
   ------------------------------------------------------------- */
.about-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent-warm) 45%,
    var(--mustard) 100%);
  min-height: clamp(480px, 45vw, 720px);
}
.about-banner__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 45vw, 720px);
  padding: clamp(3rem, 4vw + 1rem, 5.5rem) var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
}
.about-banner__copy {
  position: relative;
  z-index: 2;
  /* At ~96px Outfit Regular, "A Marketing Agency" measures ~870px wide.
     Container needs >= 900px to keep it on one line at desktop. The stroke
     is absolute-positioned and overlaps the right side visually — that's fine. */
  max-width: 1100px;
  flex: 1 1 auto;
  min-width: 0;
}
.about-banner__title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  /* Primary headline — bumped to ~96px max for more dramatic presence */
  font-size: clamp(2.5rem, 1.25rem + 4.5vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0;
}
.about-banner__title--accent {
  /* "Not Retainers" — visually subordinate to the primary headline (~half size).
     Also overrides the .about-banner__title font-size on this same element. */
  font-size: clamp(1.5rem, 0.75rem + 2.5vw, 3rem);
  margin-top: clamp(1.75rem, 3.5vw, 3.5rem);
}
.about-banner__stroke {
  /* Anchored to .about-banner__inner (1280px max), top-right.
     The nav uses the same .nav__inner container (also 1280px max),
     so the stroke's right edge tracks the "Book a strategy call" button
     at any viewport width — wider screens just add equal margin on both. */
  position: absolute;
  right: 0;
  top: 0;
  width: clamp(420px, 60%, 820px);
  height: auto;
  /* drop-shadow follows the PNG's alpha channel — box-shadow would draw a rectangle */
  filter: drop-shadow(2px 5px 10px #E36038);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 720px) {
  .about-banner__inner { min-height: clamp(300px, 80vw, 520px); }
  .about-banner__stroke {
    width: 90vw;
    right: -10vw;
    top: auto;
    bottom: 0;
    transform: none;
    opacity: 0.75;
  }
}


/* NARRATIVE wrapper — intro + philosophy share one positioning context
   so the 3 corner accents form a diagonal line across both sections.
   ------------------------------------------------------------- */
.about-narrative {
  position: relative;
}

/* The accents track is an absolute layer sized to the same 1100px max
   the sections use, centered. Its children are positioned in % of the
   wrapper so the diagonal stays proportional at any desktop width. */
.about-narrative__accents {
  position: absolute;
  inset: 0;
  max-width: 1100px;
  margin-inline: auto;
  pointer-events: none;
  z-index: 1;
}
.about-narrative__accent {
  position: absolute;
  /* +50% from previous (40-64px → 60-96px) per design feedback */
  width: clamp(60px, 6vw, 96px);
  height: auto;
  display: block;
}
/* All three accents share the same base orientation (matching #2,
   which the user confirmed reads correctly). Position-only, no rotation. */
.about-narrative__accent--1 {
  top: 6%;
  right: 4%;
}
.about-narrative__accent--2 {
  top: 48%;
  left: 38%;
}
.about-narrative__accent--3 {
  top: 82%;
  left: 12%;
}

@media (max-width: 720px) {
  .about-narrative__accents { display: none; }
}


/* INTRO — copy block left, no accent (accent now in .about-narrative)
   ------------------------------------------------------------- */
.about-intro {
  padding: clamp(3.5rem, 6vw, 6rem) var(--gutter) clamp(2rem, 4vw, 3rem);
}
.about-intro__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.about-intro__copy {
  max-width: 540px;
}
.about-intro__body {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.about-intro__body:last-child { margin-bottom: 0; }


/* PHILOSOPHY — copy block right, no accent (accents now in .about-narrative)
   ------------------------------------------------------------- */
.about-philosophy {
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter);
}
.about-philosophy__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.about-philosophy__copy {
  max-width: 540px;
  margin-left: auto;       /* push copy to the right side */
}
.about-philosophy__heading {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.about-philosophy__body {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.about-philosophy__body:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .about-philosophy__copy { margin-left: 0; }
}


/* HOW WE WORK — left-aligned orange heading + body, chevron right
   ------------------------------------------------------------- */
.about-how {
  padding: clamp(3rem, 5vw, 5.5rem) var(--gutter);
  max-width: 1280px;
  margin-inline: auto;
}
.about-how__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1100px;
  margin: 0 auto;
}
.about-how__copy { max-width: 720px; }
.about-how__chevron {
  width: clamp(72px, 9vw, 130px);
  height: auto;
  display: block;
  align-self: center;
}
@media (max-width: 720px) {
  .about-how__inner { grid-template-columns: 1fr; }
  .about-how__chevron { width: 80px; margin: 0 auto; }
}
.about-how__heading {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0 0 1.5rem;
}
.about-how__body {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.about-how__body:last-child { margin-bottom: 0; }


/* TEAM — sage green bg, heading + intro + 3 cards
   ------------------------------------------------------------- */
.about-team {
  background: var(--evergreen);
  padding: clamp(3.5rem, 6vw, 6.5rem) var(--gutter);
  color: var(--white);
}
.about-team__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.about-team__head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.about-team__heading {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0;
}
.about-team__intro {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--white);
  opacity: 0.92;
  margin: 0;
  max-width: 640px;
}
.about-team__grid {
  /* Single source of truth for spacing between cards. Bracket size and offset
     derive from this so the L's vertical line always lands at the gap midpoint. */
  --team-gap: 5.5rem;
  display: grid;
  /* auto-fit + minmax: 3 cards fill a row evenly; adding a 4th-9th wraps cleanly */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--team-gap);
}
.about-team__card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 56px;
}
.about-team__photo-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 1rem;
  overflow: hidden;
}
.about-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-team__photo--placeholder {
  background: linear-gradient(135deg, #4f5d44 0%, #6A7A5C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}
.about-team__name {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 0.65rem + 0.5vw, 1.25rem);
  color: var(--white);
  margin: 0 0 0.25rem;
}
.about-team__title {
  font-size: clamp(0.8125rem, 0.6rem + 0.3vw, 0.9375rem);
  color: var(--white);
  opacity: 0.78;
  margin: 0 0 0.75rem;
}
/* L-bracket sitting in the gap between cards. Width = half the gap, so the
   vertical line lands at gap midpoint and the horizontal line's right tip
   reaches the photo's left edge. */
.about-team__card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(var(--team-gap) / -2);
  width: calc(var(--team-gap) / 2);
  height: calc(var(--team-gap) / 2);
  border-left: 1px solid #a8a8a8;
  border-bottom: 1px solid #a8a8a8;
}

@media (max-width: 860px) {
  .about-team__head { grid-template-columns: 1fr; }
  /* auto-fit handles wrapping; constrain single-column width for readability */
  .about-team__grid { max-width: 360px; margin-inline: auto; }
  /* Single centered card has no neighbor to point at — keep bracket inside */
  .about-team__card::after { left: 0; }
}


/* TEAM BIOS — "Read bio" link, no-JS inline fallback, and flip-in modal
   -------------------------------------------------------------
   Robustness: .about-team__bio is server-rendered and visible by default so
   the copy is always in the HTML (crawlers / answer engines) and readable
   without JS. main.js adds .ic-bios-enhanced to the grid, which hides the
   inline bio and routes the "Read bio" link to #teamModal instead. */
.about-team__bio-link {
  align-self: flex-start;
  margin-top: auto;            /* pin to the bottom of the flex card for even rows */
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  opacity: 0.92;
  transition: opacity 0.18s ease, gap 0.18s ease;
}
.about-team__bio-link:hover,
.about-team__bio-link:focus-visible { opacity: 1; gap: 0.7em; }
.about-team__bio-arrow { transition: transform 0.18s ease; }
.about-team__bio-link:hover .about-team__bio-arrow,
.about-team__bio-link:focus-visible .about-team__bio-arrow { transform: translateX(2px); }

/* Photo is a secondary (pointer) trigger; the "Read bio" link remains the
   keyboard/screen-reader control. */
.about-team__photo-wrap--clickable { cursor: pointer; }
.about-team__photo-wrap--clickable .about-team__photo { transition: transform 0.35s ease; }
.about-team__photo-wrap--clickable:hover .about-team__photo { transform: scale(1.04); }

.about-team__bio {
  margin-top: 0.85rem;
  color: var(--white);
  opacity: 0.85;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.about-team__bio > p { margin: 0 0 0.75rem; }
.about-team__bio > p:last-child { margin-bottom: 0; }
/* JS present → modal takes over, hide the inline copy */
.ic-bios-enhanced .about-team__bio { display: none; }

/* Modal ----------------------------------------------------- */
.team-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.team-modal[hidden] { display: none; }
.team-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.62);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.team-modal.is-open .team-modal__backdrop { opacity: 1; }
.team-modal__panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(86vh, 760px);
  overflow: hidden;            /* panel stays fixed; the text column scrolls */
  background: var(--white);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  display: grid;
  grid-template-columns: 240px 1fr;
  /* flip-in: the panel turns over like a card before settling flat */
  transform: perspective(1400px) rotateY(-14deg) translateY(14px) scale(0.96);
  transform-origin: center left;
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.team-modal.is-open .team-modal__panel {
  transform: perspective(1400px) rotateY(0) translateY(0) scale(1);
  opacity: 1;
}
.team-modal--no-photo .team-modal__panel { grid-template-columns: 1fr; }
.team-modal--no-photo .team-modal__media { display: none; }
.team-modal__media {
  position: relative;
  align-self: start;           /* size to the photo; don't stretch down the panel */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.team-modal__photo {
  width: 100%;
  aspect-ratio: 1 / 1;         /* show the full square crop (same framing as the card),
                                  not a cropped vertical strip of a tall column */
  height: auto;
  object-fit: cover;
  display: block;
}
.team-modal__body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  overflow-y: auto;            /* scroll long bios inside the body, not the whole panel */
  min-height: 0;               /* allow the grid cell to shrink so overflow engages */
}
.team-modal__name {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  line-height: 1.1;
  margin: 0 0 0.25rem;
  color: var(--ink);
}
.team-modal__title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--orange-dk, #c95208);
  margin: 0 0 1.1rem;
}
.team-modal__bio > p { margin: 0 0 1rem; line-height: 1.65; }
.team-modal__bio > p:last-child { margin-bottom: 0; }
.team-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.team-modal__close:hover,
.team-modal__close:focus-visible { background: #fff; transform: scale(1.06); }

@media (max-width: 640px) {
  .team-modal { padding: 0; }
  .team-modal__panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr); /* media fixed, body takes the rest and scrolls */
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  /* Show a centered square headshot, capped so it doesn't fill the screen */
  .team-modal__media { align-items: center; padding: 14px 0; }
  .team-modal__photo { width: auto; height: min(38vh, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  .team-modal__backdrop,
  .team-modal__panel { transition: opacity 0.2s ease; }
  .team-modal__panel,
  .team-modal.is-open .team-modal__panel { transform: none; }
  .about-team__photo-wrap--clickable .about-team__photo { transition: none; }
  .about-team__photo-wrap--clickable:hover .about-team__photo { transform: none; }
}


/* LOCATION — US map with white speech-bubble callout pointing to Denver
   ------------------------------------------------------------- */
.about-location {
  padding: clamp(3rem, 5vw, 5.5rem) var(--gutter);
}
.about-location__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.about-location__map {
  width: 100%;
  height: auto;
  display: block;
}
.about-location__callout {
  position: absolute;
  /* Box positioned higher; tail extended below to keep tip on Denver. */
  top: 12%;
  left: 16%;
  z-index: 2;
  background: var(--white);
  border: 2px solid var(--ink);
  padding: clamp(1.25rem, 1.75vw, 1.75rem) clamp(1.5rem, 2.25vw, 2.25rem);
  max-width: 560px;
  box-shadow: var(--shadow-card);
}
.about-location__callout::before,
.about-location__callout::after {
  content: "";
  position: absolute;
  border-style: solid;
  /* Tail anchored 42.75% across callout so its tip centers on the Denver dot */
  left: 42.75%;
  transform: translateX(-50%);
}
.about-location__callout::before {
  /* Outer (dark border) triangle — taller so tail visually reaches Denver */
  bottom: -42px;
  border-width: 42px 16px 0 16px;
  border-color: var(--ink) transparent transparent transparent;
}
.about-location__callout::after {
  /* Inner (white fill) triangle, slightly smaller and offset up */
  bottom: -38px;
  border-width: 38px 13px 0 13px;
  border-color: var(--white) transparent transparent transparent;
}
.about-location__heading {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.75rem + 0.6vw, 1.375rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.about-location__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 720px) {
  .about-location__callout {
    position: static;
    margin: 0 auto 1.5rem;
    max-width: none;
  }
  .about-location__callout::before,
  .about-location__callout::after { display: none; }
}


/* FINAL CTA — about page variant
   Design: heading left-aligned, button right-aligned to the heading's
   right edge (not to a wider container's edge). Whole unit centered
   in the section. Overrides .final-cta__inner's center alignment.
   ------------------------------------------------------------- */
.about-cta__inner {
  /* Width matches the heading's max-width so the button anchors to
     the heading's right edge, not far past it. */
  max-width: 760px;
  align-items: flex-start;     /* override .final-cta__inner center */
  text-align: left;
}
.about-cta__heading {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.625rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--accent);
  text-align: left;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.5rem);
  max-width: 760px;
}
.about-cta__inner .btn {
  align-self: flex-end;        /* push button to the right side */
}

@media (max-width: 720px) {
  .about-cta__inner {
    align-items: center;
    text-align: center;
  }
  .about-cta__heading { text-align: center; }
  .about-cta__inner .btn { align-self: center; }
}