/* =========================================================
   RURAL & CO. — DESIGN SYSTEM v1.0
   Built for ruraland.co
   Hosted on Netlify
   ========================================================= */

/* --- Google Fonts ---------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');

/* --- Design Tokens --------------------------------------- */
:root {
  --red:        #c10202;
  /* Rural red is built for light surfaces. On near-black it measures 2.63:1,
     which is why red labels on the dark cards read as faint rather than
     confident. This is the same red, lifted until it clears AA on dark
     (4.74:1 on #1d1d1d, 5.04:1 on #171717). Use it anywhere red sits on a
     dark surface; keep --red everywhere else. */
  --red-bright: #e8574d;
  --black:      #1d1d1d;
  --charcoal:   #36454f;
  --clay:       #d4583b;
  --gray-light: #f4f4f4;
  --gray-rule:  #dddddd;
  /* Was #999999, which fails WCAG AA badly: 2.85:1 on white and 2.60:1 on
     cream, against a 4.5:1 requirement. This token carries most of the
     descriptive copy on the site (offering-desc, tier-desc, engine-desc,
     stack-desc, cap-desc), so that was a lot of unreadable body text, not
     just dim captions. #6a6a6a clears AA on both surfaces (5.41:1 and
     4.93:1) and holds the same warm neutral. */
  --gray-meta:  #6a6a6a;
  /* The light-surface meta grey inverted for dark cards, where #6a6a6a only
     manages 3.31:1. */
  --meta-on-dark: #a8a8a8;
  --white:      #ffffff;
  --cream:      #f7f4ef;

  --font-serif:   'Cal Sans', system-ui, sans-serif;
  --font-serif-2: 'Cal Sans', system-ui, sans-serif;
  --font-sans:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  /* --font-mono retired July 2026. Inconsolata was carrying the small
     uppercase labels and the index numerals, which made a warm editorial brand
     read as a technical one in exactly the places a reader scans first. Labels
     now use --font-sans and figures use Cal Sans, so the whole site runs on the
     two faces the brand actually owns. Do not reintroduce a mono face without
     a reason that is stronger than "it looks precise". */

  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-5xl: 160px;
  --space-6xl: 220px;

  --container-max:    1200px;
  --container-narrow: 800px;
  --nav-height:       76px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Reset ---------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--black);
  background-color: var(--white);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

/* --- Typography ----------------------------------------- */

.cal-sans-regular {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.heading-display {
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 4.8vw, 3.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--black);
}

.heading-1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.8vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--black);
}

.heading-2 {
  font-family: var(--font-serif-2);
  font-size: clamp(1.5rem, 2.8vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--black);
}

.heading-3 {
  font-family: var(--font-serif-2);
  font-size: clamp(1.15rem, 2vw, 22px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--charcoal);
}

/* Cal Sans runs tight at heading sizes. Give bare <h3> elements (component  */
/* headings that don't carry a .heading-* class) the same tracking as the    */
/* heading scale. Class-based headings keep their own values via specificity. */
h3 {
  letter-spacing: 0.02em;
  color: var(--charcoal);
}

/*
   Micro-labels were set at 11px with 0.09em tracking. Uppercase text at that
   size, spaced out, stops being a label and starts being texture: the reader's
   eye skips it. Every one of these carries real information (what the section
   is, what the thing costs you in time, what the number means), so they need to
   be readable at a glance rather than decorative.

   13px with slightly tighter tracking holds the same editorial restraint and
   actually gets read. This is the base for every uppercase label on the site.
*/
.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: var(--space-md);
  line-height: 1.4;
}

/* Red eyebrows on dark surfaces need the lifted red, or they disappear.
   (.eyebrow.on-dark is deliberately NOT listed here: it's the cream variant,
   defined further down, and most dark sections use that instead.) */
.section-dark .eyebrow,
.eyebrow.is-red-on-dark {
  color: var(--red-bright);
}

.body-large {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--black);
}

.body-text {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--black);
}

/*
   Stacked prose needs air between it. There was a rule for .body-text following
   .body-text, but none for the other three pairings, so any section that opened
   with a .body-large lede and dropped into .body-text ran the two together with
   no gap at all. Cover every combination rather than the one that came up first.
*/
.body-text + .body-text,
.body-large + .body-text,
.body-text + .body-large,
.body-large + .body-large {
  margin-top: var(--space-md);
}

.text-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--gray-meta);
  line-height: 1.5;
}

/* Color utilities */
.text-white  { color: var(--white)  !important; }
.text-cream  { color: var(--cream)  !important; }
.text-red    { color: var(--red)    !important; }
.text-meta-c { color: var(--gray-meta) !important; }
.text-light  { color: #f2f2f2       !important; }

/* Heading white variants */
.heading-display.on-dark,
.heading-1.on-dark { color: var(--cream); }
.eyebrow.on-dark   { color: rgba(247, 244, 239, 0.7); }

/* --- Buttons -------------------------------------------- */

.btn-primary {
  display: inline-block;
  background-color: var(--red);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  padding: 15px 44px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.22s ease, transform 0.22s var(--ease-out), box-shadow 0.22s ease;
  margin-top: var(--space-lg);
  white-space: nowrap;
}

.btn-primary:hover {
  background-color: #a00101;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(193, 2, 2, 0.22);
}

.btn-secondary {
  display: inline-block;
  background-color: transparent;
  color: var(--red);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  padding: 14px 44px;
  border-radius: 9999px;
  border: 1px solid var(--red);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.22s ease;
  margin-top: var(--space-lg);
  white-space: nowrap;
}

.btn-secondary:hover {
  background-color: var(--red);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-white {
  display: inline-block;
  background-color: var(--white);
  color: var(--red);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  padding: 15px 44px;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.22s ease;
  margin-top: var(--space-lg);
}

.btn-white:hover {
  background-color: var(--cream);
  transform: translateY(-2px);
}

/* --- Layout Containers ---------------------------------- */

.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
  width: 100%;
}

.container-narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
  width: 100%;
}

/* --- Sections ------------------------------------------- */

.section {
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
  background-color: var(--white);
}

.section-alt {
  /* Same white background — alternation removed for open feel */
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
  background-color: var(--white);
}

.section-dark {
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
  background-color: var(--black);
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--gray-rule);
  border: none;
  display: block;
}

/* --- Navigation ----------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--white);
  border-bottom: 1px solid var(--gray-rule);
  transition: box-shadow 0.3s ease;
  height: var(--nav-height);
  display: flex;
  align-items: center;
}

.nav.scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,0.07);
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.nav-logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.nav-logo img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

/* Cal Sans sets wider than system-ui, and six items plus a CTA already filled
   the row. Tighten the gutters before the desktop nav gets narrow enough to
   push the CTA out of the container. */
@media (max-width: 1100px) {
  .nav-links { gap: var(--space-lg); }
}

@media (max-width: 940px) {
  .nav-links { gap: var(--space-md); }
}

/*
   Cal Sans, matching the mobile nav (which already used it) and the headings.
   The desktop nav was the last place on the site still running system-ui, so
   it was the one row of type that didn't look like it belonged to the brand.

   Cal Sans is a single weight (400), so the old `font-weight: 500` was asking
   the browser to synthesise a bold that doesn't exist. It has a taller x-height
   than system-ui, so 15px here reads about the same size as the old 14px.
*/
.nav-link {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--black);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  /* Six items plus a CTA is a full row. Without this, "RHTP Funding" and
     "Parcel Post" break across two lines and the nav loses its baseline. */
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--red);
  transition: width 0.25s var(--ease-out);
}

.nav-link:hover { color: var(--red); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--red); }
.nav-link.active::after { width: 100%; }

.nav-cta {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  padding: 11px 28px;
  background-color: var(--red);
  color: var(--white);
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  margin-left: var(--space-md);
}

.nav-cta:hover {
  background-color: #a00101;
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--black);
  transition: all 0.3s ease;
  transform-origin: center;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav Overlay */
.nav-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white);
  z-index: 999;
  flex-direction: column;
  padding: var(--space-2xl) var(--space-xl);
  overflow-y: auto;
}

.nav-mobile.open { display: flex; }

.nav-mobile-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: var(--space-2xl);
}

.nav-mobile-close {
  font-size: 24px;
  color: var(--black);
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.nav-mobile-link {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--black);
  text-decoration: none;
  line-height: 1.2;
  border-bottom: 1px solid var(--gray-rule);
  padding-bottom: var(--space-lg);
  transition: color 0.2s ease;
}

.nav-mobile-link:hover { color: var(--red); }

/* --- Hero Section --------------------------------------- */

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 120px;
  padding-bottom: var(--space-4xl);
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Cover the wrapper (full hero height, which can exceed the viewport)
     while keeping the iframe box locked to 16:9 so the player never letterboxes. */
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.hero .eyebrow { color: rgba(247, 244, 239, 0.72); }
.hero .heading-display { color: var(--cream); margin-bottom: var(--space-lg); }
.hero .body-large { color: rgba(247, 244, 239, 0.88); max-width: 600px; margin-bottom: var(--space-lg); }

/* Sub-page hero (photo bg) */
.hero-sub {
  position: relative;
  width: 100%;
  background-color: var(--black);
  overflow: hidden;
}

.hero-sub-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/*
   About hero. The source is a 4320x5400 portrait, so on a wide hero `cover`
   crops away most of its height. Anchoring to the bottom keeps the ground and
   the horizon in frame instead of centring on empty sky.

   Served as webp with a jpeg fallback via image-set. The plain url() below is
   the first declaration on purpose: browsers that don't understand image-set
   drop the second and keep it.
*/
.hero-sub-bg.is-autumn {
  background-image: url('/assets/bg-rural-autumn-opt.jpg');
  background-image: image-set(
    url('/assets/bg-rural-autumn.webp') type('image/webp'),
    url('/assets/bg-rural-autumn-opt.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: bottom;
}

.hero-sub-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
}

.hero-sub-content {
  position: relative;
  z-index: 2;
}

/* --- Logo Carousel -------------------------------------- */

/* The logo strip and the "The Work" copy beneath it are one unit: the logos
   are the evidence, the paragraph is what they prove.

   They still need air between them, though. Pulled too close, the copy read as
   a caption clamped to the underside of the logos rather than as the statement
   they support. This gives the strip room to be its own object first. */
.carousel-section {
  padding: var(--space-2xl) 0 clamp(72px, 8vw, 112px);
  overflow: hidden;
  /* No background, no borders — floats in the open page */
}

.work-copy {
  padding-bottom: clamp(64px, 8vw, 112px);
}

.carousel-label {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray-meta);
  margin-bottom: var(--space-xl);
}

.carousel-track-wrapper {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.carousel-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: carousel-scroll 80s linear infinite;
}

.carousel-track:hover {
  animation-play-state: paused;
}

.carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2xl);
  flex-shrink: 0;
}

.client-logo {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(1) contrast(0.7);
  opacity: 0.42;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

.carousel-item:hover .client-logo {
  filter: grayscale(0) contrast(1);
  opacity: 1;
}

/* --- Services Card Grid ---------------------------------- */

.services-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
}

.service-item {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 6px rgba(0, 0, 0, 0.06);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: box-shadow 0.3s ease, transform 0.3s var(--ease-out), border-color 0.3s ease;
}

.service-item:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07);
  transform: translateY(-3px);
}

.service-num {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gray-meta);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

/* --- Pull Quotes ----------------------------------------- */

.pull-quote {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--gray-rule);
}

.pull-quote:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* --- Testimonial fade carousel ---------------------------- */

.testimonial-carousel {
  display: grid;
  position: relative;
}

.testimonial-carousel .testimonial-slide {
  grid-row: 1;
  grid-column: 1;
  border-top: none;
  padding-top: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease-in-out, visibility 0s linear 700ms;
}

.testimonial-carousel .testimonial-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms ease-in-out, visibility 0s linear 0s;
}

.pull-quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: var(--space-xl);
}

.pull-quote-attr {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--gray-meta);
  letter-spacing: 0.04em;
}

@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Offerings / Ecosystem ------------------------------ */

.offerings-section {
  background-color: var(--cream);
}

.offerings-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: end;
  margin-bottom: var(--space-3xl);
}

.offerings-header .body-text {
  max-width: 480px;
}

.offerings-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--gray-rule);
}

.offering-item {
  padding: var(--space-2xl) var(--space-xl) var(--space-2xl) 0;
  border-right: 1px solid var(--gray-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: background-color 0.3s ease;
}

.offering-item:last-child {
  border-right: none;
  padding-right: 0;
}

.offering-item:first-child {
  padding-left: 0;
}

.offering-item:not(:first-child) {
  padding-left: var(--space-xl);
}

.offering-num {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--gray-meta);
  letter-spacing: 0.06em;
  display: block;
}

.offering-name {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--black);
  letter-spacing: -0.01em;
}

.offering-role {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--red);
}

.offering-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--black);
  flex: 1;
}

.offering-link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-rule);
  padding-bottom: 2px;
  display: inline-block;
  transition: border-color 0.2s ease, color 0.2s ease;
  align-self: flex-start;
}

.offering-link:hover {
  color: var(--red);
  border-color: var(--red);
}

/* --- Trailguide doctrine feature block ------------------ */

.doctrine-block {
  background-color: var(--black);
  padding: clamp(64px, 10vw, 120px) 0;
}

.doctrine-block .eyebrow {
  color: rgba(247,244,239,0.55);
}

.doctrine-block .heading-1 {
  color: var(--cream);
}

.doctrine-block .body-text {
  color: rgba(247,244,239,0.80);
}

.doctrine-block .body-text + .body-text {
  margin-top: var(--space-md);
}

.doctrine-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--space-lg);
}

.doctrine-stat-val {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1;
  letter-spacing: 0;
}

.doctrine-stat-label {
  font-size: 13px;
  color: rgba(247,244,239,0.55);
  line-height: 1.5;
}

.doctrine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: start;
  margin-top: var(--space-3xl);
}

.doctrine-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl) var(--space-2xl);
}

/* --- Pull quote (homepage testimonials) ----------------- */

.pull-quote {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--gray-rule);
}

.pull-quote:last-child {
  border-bottom: 1px solid var(--gray-rule);
}

.pull-quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--black);
  margin-bottom: var(--space-sm);
}

.pull-quote-attr {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--gray-meta);
  letter-spacing: 0.04em;
}

/* --- Grid Layouts --------------------------------------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl);
}

/* --- Service Item Cards --------------------------------- */

.tier-list {
  margin-top: var(--space-2xl);
}

.tier-item {
  border-bottom: 1px solid var(--gray-rule);
  padding: var(--space-2xl) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-xl);
  align-items: start;
}

.tier-item:first-child {
  border-top: 1px solid var(--gray-rule);
}

.tier-body { display: flex; flex-direction: column; gap: var(--space-sm); }

.tier-name {
  font-family: var(--font-serif-2);
  font-size: 22px;
  font-weight: 400;
  color: var(--black);
  letter-spacing: 0.02em;
}

.tier-name em {
  color: var(--red);
  font-style: italic;
}

.tier-tagline {
  font-size: 15px;
  color: var(--gray-meta);
  font-style: italic;
}

.tier-desc {
  font-size: 15px;
  color: var(--black);
  line-height: 1.65;
  max-width: 560px;
}

/* --- Tier carousel (StoryFoundry / StoryFoundry Essentials toggle) --- */

.tier-carousel {
  position: relative;
  border-bottom: 1px solid var(--gray-rule);
  padding: var(--space-2xl) 0 calc(var(--space-2xl) + 28px);
  display: grid;
}

.tier-carousel:first-child {
  border-top: 1px solid var(--gray-rule);
}

.tier-slide {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-xl);
  align-items: start;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 600ms ease-in-out, visibility 0s linear 600ms;
}

.tier-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 600ms ease-in-out, visibility 0s linear 0s;
}

.tier-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.tier-meta .tier-range {
  margin-bottom: var(--space-md);
}

.tier-nav {
  border-top: 1px solid var(--gray-rule);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
}

.tier-nav-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--black);
  text-align: right;
  margin: 0 0 var(--space-md);
  line-height: 1.4;
}

.tier-nav-label em {
  font-style: italic; /* keep the same sans family as the rest of the label */
}

.tier-nav-arrows {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.tier-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--gray-rule);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  padding: 0;
  transition: background 200ms ease, transform 120ms ease;
}

/* Hover fades the gray (non-current) button to red */
.tier-arrow:hover:not(:disabled):not(.is-active) {
  background: var(--red);
}

.tier-arrow:active:not(:disabled) {
  transform: scale(0.94);
}

/* The current-slide button: red. Disabled state still applies (no click) but
   the active red fill takes visual priority. */
.tier-arrow.is-active {
  background: var(--red);
}

.tier-arrow:disabled {
  cursor: default;
}

.tier-arrow i {
  display: inline-flex;
}

.tier-dots {
  position: absolute;
  bottom: var(--space-lg);
  left: 0;
  display: flex;
  gap: 8px;
}

.tier-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gray-rule);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease;
}

.tier-dot:hover {
  background: var(--gray-meta);
}

.tier-dot.is-active {
  background: var(--red);
}

@media (max-width: 768px) {
  .tier-slide {
    grid-template-columns: 1fr;
  }
  .tier-nav-label {
    text-align: left;
  }
  .tier-nav-arrows {
    justify-content: flex-start;
  }
}

.tier-illustration {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.tier-illustration img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .tier-illustration {
    justify-content: flex-start;
    margin-top: var(--space-md);
  }
  .tier-illustration img {
    max-width: 180px;
  }
}

.tier-price {
  color: var(--red);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.tier-range {
  font-size: 12px;
  color: var(--gray-meta);
  text-align: right;
  margin-top: 4px;
  line-height: 1.5;
}

/* --- Testimonials (legacy, kept for other pages) ---------- */

.testimonial {
  border-top: 2px solid var(--red);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.testimonial-quote {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.65;
  color: var(--black);
  margin-bottom: var(--space-md);
}

/* --- Vince Section -------------------------------------- */

/* --- Trailguide Hero ------------------------------------ */

.tg-hero {
  position: relative;
  padding-top: calc(var(--nav-height) + clamp(64px, 10vw, 128px));
  padding-bottom: clamp(80px, 12vw, 160px);
  background-image:
    linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.52)),
    url('/assets/trailguide.webp');
  background-size: cover;
  background-position: center 40%;
}

.tg-hero-content {
  position: relative;
  z-index: 2;
}

/* --- Vince Section -------------------------------------- */

.section-vince {
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
  background-image:
    linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.58)),
    url('https://cdn.prod.website-files.com/69c60967bbdfbb60cbfe89e2/69cd5ff695678f283e6c3b64_hero_3.jpg');
  background-size: cover;
  background-position: 50% 40%;
}

.section-vince .eyebrow { color: rgba(247,244,239,0.7); }
.section-vince .heading-1 { color: var(--cream); }
.section-vince .body-text { color: rgba(247,244,239,0.88); }

/* --- Parcel Post Section -------------------------------- */

.section-pp {
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
  background-color: var(--black);
  /* Raised from 0.45 for the same reason as .section-for: the cloud photo has
     bright regions where light text dropped to roughly 3:1. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.62)),
    url('/assets/background-parcel-post.webp');
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.pp-stripe {
  position: absolute;
  left: 0;
  width: 100%;
  height: 14px;
  z-index: 2;
  background-image: repeating-linear-gradient(
    -45deg,
    #c10202 0px 10px,
    #ffffff 10px 16px,
    #1d3c9e 16px 26px,
    #ffffff 26px 32px
  );
}

.pp-stripe-top    { top: 0; }
.pp-stripe-bottom { bottom: 0; }

.section-pp .container-narrow { position: relative; z-index: 3; }
.section-pp .eyebrow   { color: #c10202; }
.section-pp .heading-1 { color: #f2f2f2; }
.section-pp .body-text { color: #f2f2f2; }

/* --- Shared interior hero sizing (matches Trailguide) --- */

.hero-interior {
  padding-top: calc(var(--nav-height) + clamp(64px, 10vw, 128px));
  padding-bottom: clamp(80px, 12vw, 160px);
}

/* --- Section: "Built for organizations..." -------------- */

.section-for {
  position: relative;
  overflow: hidden;
}

.section-for {
  background-color: var(--black);
}

.section-for::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Overlay raised from 0.45 to 0.65. The barn photo has a bright sky, and at
     0.45 the cream body copy landed around 3.15:1 over those regions, under
     the 4.5:1 floor. At 0.65 the worst region clears 6.3:1. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)),
    url('/assets/bg-barn.webp');
  background-repeat: no-repeat;
  /* Anchored right so the windmill sits in the margin rather than directly
     behind the copy, where it was competing with the text it's meant to
     support. */
  background-position: right center;
  background-size: cover;
  background-attachment: fixed;
  pointer-events: none;
  z-index: 1;
}

/* Mobile Safari handles `background-attachment: fixed` poorly. Fall back to
   normal scrolling behavior on small viewports. */
@media (max-width: 768px) {
  .section-for::before { background-attachment: scroll; }
}

.section-for .container-narrow {
  position: relative;
  z-index: 2;
}

/* Text colors switched to cream so contrast holds over the dark photograph */
.section-for .heading-1 { color: var(--cream); }
.section-for .body-text { color: rgba(247, 244, 239, 0.92); }
.section-for .eyebrow { color: rgba(247, 244, 239, 0.7); }

/* The ICP block inherits --black and --gray-meta by default, which is right on
   a light surface and catastrophic here: black on this photograph measured
   1.48:1, i.e. invisible. Anything the ICP block renders inside .section-for
   has to flip to cream. */
.section-for .icp-list li { border-top-color: rgba(247, 244, 239, 0.22); }
.section-for .icp-who { color: var(--cream); }
.section-for .icp-what { color: rgba(247, 244, 239, 0.72); }
.section-for .icp-count { color: var(--red-bright); }
.section-for .icp-fit { color: rgba(247, 244, 239, 0.82); border-top-color: rgba(247, 244, 239, 0.22); }
.section-for .icp-source { color: rgba(247, 244, 239, 0.6); border-top-color: rgba(247, 244, 239, 0.22); }
.section-for .icp-source a { color: rgba(247, 244, 239, 0.6); border-bottom-color: rgba(247, 244, 239, 0.3); }
.section-for .icp-source a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.section-for .icp-fit strong { color: var(--cream); }

/* --- Footer --------------------------------------------- */

.footer {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  background-color: var(--red);
  border-top: none;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-logo-link {
  display: block;
  line-height: 0;
  margin-bottom: var(--space-xs);
}

.footer-logo-link img {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-brand {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.03em;
}

.footer-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
}

.footer-copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: var(--space-sm);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px 48px;
  justify-content: end;
  justify-items: start;
}

.footer-link {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.footer-link:hover { color: var(--white); }

/* --- StoryFoundry Pillars ------------------------------- */

.sf-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

/* Five-across variant: all five Throughline elements on one row.
   Tighter gap + edge-to-edge pillars + slightly smaller body so the
   narrower columns read comfortably rather than cramped. Falls back to
   3-up below 1180px, then inherits the .sf-pillars 2-up / 1-up steps. */
.sf-pillars-five {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}
.sf-pillars-five .sf-pillar {
  padding-left: 0;
  padding-right: 0;
}
.sf-pillars-five .body-text {
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 1180px) {
  .sf-pillars-five { grid-template-columns: repeat(3, 1fr); }
}

.sf-pillar {
  padding: var(--space-lg) var(--space-sm);
  border-top: 2px solid var(--gray-rule);
  transition: border-top-color 0.3s ease;
}

.sf-pillar:hover {
  border-top-color: var(--red);
}

.sf-number {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--gray-meta);
  margin-bottom: var(--space-sm);
  display: block;
  letter-spacing: 0.05em;
}

/* --- Hugeicons utility ---------------------------------- */

.rc-icon {
  display: block;
  align-self: flex-start;
  font-size: 32px;
  line-height: 1;
  color: var(--red);
  margin-bottom: var(--space-md);
}

/* Legacy alias — kept identical to .rc-icon for backwards compat */
.rc-icon-lg {
  font-size: 32px;
  margin-bottom: var(--space-md);
}

.rc-icon-muted {
  color: var(--gray-meta);
}

/* --- Contact Form --------------------------------------- */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-md);
}

.form-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--gray-rule);
  background-color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--black);
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(29,29,29,0.06);
}

.form-textarea {
  min-height: 148px;
  resize: vertical;
  line-height: 1.65;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--gray-meta); }

/* --- Scroll Reveal Animations (Framer-style) ------------ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.72s var(--ease-out), transform 0.72s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.28s; }
.reveal-delay-4 { transition-delay: 0.38s; }
.reveal-delay-5 { transition-delay: 0.48s; }

/* Fade only variant */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}

.reveal-fade.visible { opacity: 1; }

/* --- Utility -------------------------------------------- */

.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

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

/* --- Responsive ----------------------------------------- */

@media (max-width: 991px) {
  .grid-3           { grid-template-columns: repeat(2, 1fr); }
  .sf-pillars       { grid-template-columns: repeat(2, 1fr); }
  .services-list    { grid-template-columns: repeat(2, 1fr); }
  .nav-links        { gap: var(--space-xl); }
  .tier-item        { grid-template-columns: 1fr; gap: var(--space-sm); }
  .tier-price       { text-align: left; }
  .tier-range       { text-align: left; }
  .offerings-header { grid-template-columns: 1fr; gap: var(--space-lg); }
  .offerings-list   { grid-template-columns: 1fr; border-top: none; }
  .offering-item    {
    border-right: none;
    border-top: 1px solid var(--gray-rule);
    padding-left: 0 !important;
    padding-right: 0;
  }
  .doctrine-grid  { grid-template-columns: 1fr; gap: var(--space-3xl); }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cta   { display: none; }
  .nav-toggle { display: flex; }

  .grid-3,
  .grid-2,
  .services-list { grid-template-columns: 1fr; gap: var(--space-xl); }

  .sf-pillars { grid-template-columns: 1fr 1fr; }

  .footer-inner { flex-direction: column; gap: var(--space-xl); }
  .footer-links { justify-content: start; }

  .hero {
    padding-top: 80px;
    padding-bottom: var(--space-3xl);
  }

  /* Mobile: swap the video for a static image */
  .hero-video-wrap iframe { display: none; }

  .hero-video-wrap {
    background-image: url('/assets/bg-rht.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .container,
  .container-narrow {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .nav-inner {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .section-pp { background-attachment: scroll; }
}

@media (max-width: 480px) {
  .sf-pillars { grid-template-columns: 1fr; }

  .btn-primary,
  .btn-secondary,
  .btn-white {
    width: 100%;
    text-align: center;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* --- FAQ -------------------------------------------------- */
.faq-list {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--gray-rule);
}

.faq-item {
  border-bottom: 1px solid var(--gray-rule);
  padding: var(--space-lg) 0;
}

.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  outline: none;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1;
  color: var(--red, #b1442a);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
  margin-left: var(--space-md);
}

.faq-item[open] > summary::after { content: "\2013"; }

.faq-item .faq-answer {
  padding-top: var(--space-md);
  max-width: 68ch;
}

.faq-item .faq-answer p { margin: 0; }

/* Smooth open/close animation on FAQ items.
   Uses ::details-content + interpolate-size to transition block-size to auto.
   Browsers without support (older Firefox, etc.) simply snap as before. */
.faq-list {
  interpolate-size: allow-keywords;
}

.faq-item::details-content {
  opacity: 0;
  block-size: 0;
  overflow: clip;
  transition:
    content-visibility 220ms allow-discrete,
    opacity 180ms ease-out,
    block-size 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item[open]::details-content {
  opacity: 1;
  block-size: auto;
}

/* Dark-background FAQ treatment (when wrapped in .doctrine-block) */
.doctrine-block .faq-list {
  border-top-color: rgba(247, 244, 239, 0.18);
}

.doctrine-block .faq-item {
  border-bottom-color: rgba(247, 244, 239, 0.18);
}

.doctrine-block .faq-question h3 {
  color: var(--cream);
}

.doctrine-block .faq-item .faq-answer p {
  color: rgba(247, 244, 239, 0.85);
}

.doctrine-block .faq-item .faq-answer a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: rgba(247, 244, 239, 0.4);
  text-underline-offset: 2px;
}

.doctrine-block .faq-item .faq-answer a:hover {
  text-decoration-color: var(--cream);
}

.doctrine-block .faq-item > summary::after {
  color: var(--cream);
}

/* --- Footer meta line ------------------------------------ */
.footer-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-sm);
  line-height: 1.6;
}

.footer-link-inline {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-link-inline:hover { color: var(--white); }

/* =========================================================
   SITE REORIENTATION (July 2026)
   Two doors, one ladder. Components introduced by the
   Trailhead plan: the door block, the ICP block, the
   receipts strip, the RHTP pathways, and the honest
   proof caption.
   ========================================================= */

/* --- The two paths -------------------------------------- */
/*
   Sits directly under the hero. Its whole job is to sort a visitor into
   "funded buyer" or "clarity buyer" before they scroll past anything else.

   The first pass was two symmetric rounded rectangles of text, and it fell
   flat: nothing to catch the eye, nothing to reward the hover, and the CTA
   read as a footnote. This version gives each card
     - an oversized outlined mark bled off the corner, for texture,
     - a red rule that draws itself across the top on hover,
     - a "who this is for" line, because specificity is warmth,
     - and a CTA that actually behaves like a target.
   Asymmetric grid on purpose: the funded path carries more weight this year.
*/

.paths {
  background-color: var(--cream);
  border-bottom: 1px solid var(--gray-rule);
  padding: var(--space-3xl) 0;
}

.paths-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}

@media (max-width: 860px) {
  .paths-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.path {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-rule);
  border-radius: 18px;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s ease;
  box-shadow: 0 1px 2px rgba(29, 29, 29, 0.03);
}

/* The rule that draws itself across the top edge on hover. */
.path::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}

.path:hover::before { transform: scaleX(1); }

.path:hover {
  transform: translateY(-5px);
  border-color: rgba(29, 29, 29, 0.16);
  box-shadow: 0 24px 52px -20px rgba(29, 29, 29, 0.22);
}

/* The oversized mark. Bled off the bottom-right corner so it reads as
   texture rather than as an icon sitting in a box. */
.path-mark {
  position: absolute;
  right: -18px;
  bottom: -22px;
  font-size: 150px;
  line-height: 1;
  color: var(--black);
  opacity: 0.05;
  pointer-events: none;
  transition: transform 0.6s var(--ease-out), opacity 0.6s ease;
}

.path:hover .path-mark {
  transform: translate(-6px, -6px) rotate(-4deg);
  opacity: 0.08;
}

.path-primary {
  background: var(--black);
  border-color: var(--black);
}

.path-primary::before { background: var(--red-bright); }

.path-primary:hover {
  border-color: var(--black);
  box-shadow: 0 28px 60px -20px rgba(29, 29, 29, 0.5);
}

.path-primary .path-mark { color: var(--cream); opacity: 0.07; }
.path-primary:hover .path-mark { opacity: 0.11; }

.path-eyebrow {
  position: relative;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-sm);
}

.path-primary .path-eyebrow { color: var(--red-bright); }

.path-name {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--black);
  margin: 0 0 var(--space-md);
}

.path-primary .path-name { color: var(--cream); }

.path-desc {
  position: relative;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray-meta);
  margin: 0 0 var(--space-lg);
}

.path-primary .path-desc { color: rgba(247, 244, 239, 0.8); }

/* Who it's for. Specificity is warmth, and it lets the reader self-select
   without us having to enumerate anything. */
.path-for {
  position: relative;
  margin: 0 0 var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-rule);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--gray-meta);
}

.path-primary .path-for {
  border-top-color: rgba(247, 244, 239, 0.18);
  color: rgba(247, 244, 239, 0.66);
}

.path-cta {
  position: relative;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--red);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(193, 2, 2, 0.25);
  transition: border-color 0.3s ease;
}

.path-arrow {
  display: inline-block;
  transition: transform 0.35s var(--ease-out);
}

.path:hover .path-cta { border-bottom-color: var(--red); }
.path:hover .path-arrow { transform: translateX(5px); }

.path-primary .path-cta {
  color: var(--cream);
  border-bottom-color: rgba(247, 244, 239, 0.3);
}

.path-primary:hover .path-cta { border-bottom-color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .path, .path::before, .path-mark, .path-arrow { transition: none; }
  .path:hover { transform: none; }
  .path:hover .path-mark { transform: none; }
  .path:hover .path-arrow { transform: none; }
}

/* --- The ICP block -------------------------------------- */
/* Who the work is for, said out loud. Appears on Home,
   Diagnostic, and Services. Deliberately a list, not a
   grid of cards: this is a roll call, not a feature row. */

.icp {
  margin-top: var(--space-xl);
}

.icp-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-2xl);
}

@media (max-width: 700px) {
  .icp-list { grid-template-columns: 1fr; }
}

/*
   Was a flat two-column list of text. The market sizing is what makes it land:
   the counts turn a list of categories into a demonstration that we know this
   sector, and they give the eye something to grab. Mono numerals in red,
   because these are citations doing persuasive work.
*/
/* Stacked, not side-by-side. With the figure sitting above the copy rather
   than in its own narrow column, every entry gets the same display treatment,
   including the two that carry a word instead of a number. The scale reads as
   a deliberate choice rather than a number that failed to load. */
.icp-list li {
  display: block;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--gray-rule);
}

/* The counts are the whole point of this block: they turn a list of categories
   into evidence that we know this sector. At 17px mono they were a footnote.
   At display scale they carry the section. */
.icp-count {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--red);
  line-height: 1.05;
  margin-bottom: var(--space-sm);
}

.icp-who {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--black);
}

.icp-what {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-meta);
  margin-top: 6px;
}

/* Attribution for the counts. Small, but present: a figure with a source
   behind it is evidence, and the same figure without one is a claim. */
.icp-source {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-rule);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--gray-meta);
}

.icp-source a {
  color: var(--gray-meta);
  border-bottom: 1px solid var(--gray-rule);
}

.icp-source a:hover { color: var(--black); border-bottom-color: var(--black); }

.icp-fit {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-rule);
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-meta);
  max-width: 68ch;
}

.icp-fit strong { color: var(--black); font-weight: 600; }

/* --- The receipts strip --------------------------------- */
/* Third-party numbers on rural America. Mono figures, because
   these are citations and should read like citations. */

.receipts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

@media (max-width: 760px) {
  .receipts { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.receipt {
  padding-top: var(--space-lg);
  /* Hairline, not a 2px black bar. The rule should sit behind the figure, not
     compete with it. */
  border-top: 1px solid var(--gray-rule);
}

.receipt-val {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 4.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  /* Rural red. These figures are the one place on the homepage where a number
     is doing the persuading, so they get the accent. 5.84:1 on cream, which
     clears AA comfortably at this size. */
  color: var(--red);
  margin-bottom: var(--space-sm);
}

.receipt-label {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-meta);
}

.receipts-source {
  margin-top: var(--space-xl);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--gray-meta);
}

.receipts-source a {
  color: var(--gray-meta);
  border-bottom: 1px solid var(--gray-rule);
}

.receipts-source a:hover { color: var(--black); border-bottom-color: var(--black); }

/* --- The honest proof caption --------------------------- */
/* Borrowed proof, framed honestly, reads as experience.
   Framed ambiguously, it reads as inflation. */

.proof-caption {
  max-width: 62ch;
  margin: var(--space-xl) auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-meta);
}

/* --- RHTP pathways -------------------------------------- */

.pathways { margin-top: var(--space-xl); }

.pathway {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--gray-rule);
}

.pathway:last-child { border-bottom: 1px solid var(--gray-rule); }

@media (max-width: 600px) {
  .pathway { grid-template-columns: 1fr; gap: var(--space-xs); }
}

.pathway-num {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--red);
  padding-top: 2px;
}

.pathway-name {
  font-family: var(--font-serif-2);
  font-size: 24px;
  font-weight: 400;
  color: var(--black);
  margin: 0 0 6px;
}

.pathway-desc {
  font-size: 16px;
  color: var(--gray-meta);
  line-height: 1.65;
  margin: 0;
}

/* --- The clock ------------------------------------------ */
/*
   The deadline block on the RHTP page.

   This used to be a card with a red bar down its left edge. That device is
   everywhere in machine-generated layouts and reads as one on sight, which is
   a bad thing to be on the page where we are asking a state agency to take us
   seriously. Removed here and everywhere else on the site.

   What replaces it is the device the rest of the site already runs on: a
   hairline rule, generous space, and a red label doing the work. The date is
   the loudest thing in the block, which is correct, because the date is the
   argument.
*/
.clock {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-rule);
  max-width: 68ch;
}

.clock-date {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-sm);
}

.clock-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--black);
  margin: 0;
}

/* --- Quiet door ----------------------------------------- */
/* One line, low contrast, for the offer that should be
   findable but not competing. Used for the practitioner
   track and the Trailguide cross-link. */

.quiet-note {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-rule);
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-meta);
  max-width: 68ch;
}

.quiet-note a {
  color: var(--red);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.quiet-note a:hover { border-bottom-color: var(--red); }

/* --- Throughline before/after --------------------------- */
/*
   Stands in for a case study until a real one exists: one solved problem,
   shown honestly.

   Two things were wrong with the first pass. It sat in .container-narrow, so
   two columns of quoted copy squeezed into ~370px each and the sentences
   wrapped every four words, which is a poor way to show off writing. And the
   numerals were absolutely positioned against a padded blockquote, so they
   collided with the first word instead of sitting beside it.

   The "after" side is now a real <ol>, and each item is its own grid: a fixed
   numeral column and a quote column. They cannot overlap.
*/
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  align-items: stretch;
}

@media (max-width: 860px) {
  .ba-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.ba-col {
  display: flex;
  flex-direction: column;
  padding: var(--space-2xl);
  border-radius: 18px;
  border: 1px solid var(--gray-rule);
  background: var(--gray-light);
}

.ba-col.is-after {
  background: var(--black);
  border-color: var(--black);
}

/* The label is a heading now, not a caption. It is naming the two halves of
   the argument, so it should carry the weight of one. */
.ba-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ba-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0;
}

.ba-col.is-after .ba-heading { color: var(--cream); }

.ba-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-meta);
  margin: var(--space-sm) 0 var(--space-xl);
}

.ba-col.is-after .ba-sub { color: var(--red-bright); }

.ba-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gray-meta);
  flex-shrink: 0;
}

.ba-col.is-after .ba-dot { background: var(--red-bright); }

/* The ordered list. Each item is a two-column grid, so the numeral has its own
   track and can never run into the quote. */
.ba-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ba-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  column-gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.ba-item:last-child { margin-bottom: 0; }

/* These numerals mark the three Throughline elements the "after" is built
   from, so they're the method showing its work, not a bullet. At 14px they
   read as a footnote clinging to the quote. Set at display scale they sit as
   a proper column and the eye tracks 01 / 02 / 03 down the card. */
.ba-num {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--red-bright);
}

@media (max-width: 520px) {
  .ba-item { grid-template-columns: 48px 1fr; }
  .ba-num { font-size: 24px; }
}

.ba-line {
  font-family: var(--font-serif-2);
  font-size: clamp(1.1rem, 1.55vw, 1.3rem);
  line-height: 1.55;
  color: var(--black);
  margin: 0;
}

.ba-col.is-after .ba-line { color: var(--cream); }

.ba-verdict {
  margin: auto 0 0;
  padding-top: var(--space-xl);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gray-meta);
}

.ba-col.is-after .ba-verdict { color: var(--red-bright); }

.ba-note {
  margin-top: var(--space-2xl);
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-meta);
  max-width: 70ch;
}

/* --- Subscribe form (first-party, Parcel Post) ---------- */
/* The sitewide primary CTA for cold traffic. It cannot route
   through someone else's platform, so it lives here. */

/*
   The Beehiiv embed renders its own consent line ("I consent to receive
   newsletters... Terms of Use and Privacy Policy") in near-black, and it is
   served cross-origin, so we cannot restyle its internals. Dropped straight
   onto the dark hero photograph, that text was black-on-black and effectively
   invisible.

   Rather than fight it, we give the embed the light surface it was designed
   for: a cream card that sits on the photo. The consent line gets its contrast
   back, the form reads as a deliberate object rather than floating widgetry,
   and we stop depending on a third party's colour choices.
*/
.subscribe {
  margin-top: var(--space-xl);
  max-width: 560px;
  background: var(--cream);
  border-radius: 14px;
  padding: var(--space-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

/* The note under the form now sits on cream, not on the photo. */
.subscribe .subscribe-note {
  color: var(--gray-meta) !important;
  margin-bottom: 0;
}

.subscribe-row {
  display: flex;
  gap: var(--space-sm);
}

@media (max-width: 560px) {
  .subscribe-row { flex-direction: column; }
}

.subscribe-row .form-input { flex: 1; margin: 0; }

.subscribe-row button { white-space: nowrap; }

.subscribe-note {
  margin-top: var(--space-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-meta);
}

/* --- Speaking / talks (About) --------------------------- */
/*
   Was three undifferentiated rows of running text, each cramming a title and
   its description into one sentence, so nothing was scannable and no talk had
   a name you could remember or repeat. A conference programmer skims this
   looking for a session title. Now they get one: mono index, a real title,
   and a line that tells them who the room is for.
*/
.talks { margin-top: var(--space-xl); }

.talk {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--gray-rule);
  transition: border-color 0.3s ease;
}

.talk:last-child { border-bottom: 1px solid var(--gray-rule); }
.talk:hover { border-top-color: var(--red); }

.talk-num {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--red);
}

.talk-title {
  font-family: var(--font-serif-2);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--black);
  margin: 0 0 6px;
}

.talk-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray-meta);
  margin: 0;
}

@media (max-width: 600px) {
  .talk { grid-template-columns: 1fr; gap: var(--space-xs); }
}

/* --- The agent answers (homepage, "The Moment") --------- */
/*
   The AI-agents argument is the sharpest thing we have to say, and it was
   losing its own case by being delivered as prose. These two cards show the
   answer an agent actually returns about a muddled organization and a clear
   one. The reader gets the point before they finish reading, which is exactly
   what the section is arguing about.

   Deliberately restrained: no chat-bubble skeuomorphism, no fake UI chrome,
   no robot icons. It's an editorial quotation, set like one.
*/
.agent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

@media (max-width: 860px) {
  .agent-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.agent {
  padding: var(--space-xl);
  border-radius: 16px;
  background: var(--gray-light);
  border: 1px solid var(--gray-rule);
}

.agent.is-clear {
  background: var(--black);
  border-color: var(--black);
}

/* The label and the verdict were set as captions (12px / 15px) and read as
   fine print, which is backwards: the verdict IS the argument. The label now
   carries real weight, and the verdict lands at heading scale, because
   "You were the answer" is the sentence the whole section exists to deliver. */
.agent-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-meta);
  margin-bottom: var(--space-lg);
}

.agent.is-clear .agent-label { color: rgba(247, 244, 239, 0.78); }

.agent-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gray-meta);
  flex-shrink: 0;
}

.agent.is-clear .agent-dot { background: var(--red-bright); }

.agent-answer {
  font-family: var(--font-serif-2);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.55;
  color: var(--black);
  margin: 0 0 var(--space-xl);
}

.agent.is-clear .agent-answer { color: var(--cream); }

.agent-verdict {
  display: flex;
  align-items: center;
  /* Generous, so the mark reads as a stamp on the statement rather than as
     punctuation stuck to the last word. */
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-rule);
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0;
}

/* The mark sits after the statement and is deliberately NOT the same colour as
   the text it follows: red against the dark verdict on the left, cream against
   the red verdict on the right. Each one has to be the thing your eye lands on
   after the sentence, not a repeat of it. */
.agent-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--red);
}

.agent.is-clear .agent-verdict {
  border-top-color: rgba(247, 244, 239, 0.18);
  color: var(--red-bright);
}

.agent.is-clear .agent-icon { color: var(--cream); }

/* --- Attribution stamp (/work) -------------------------- */
/*
   The attribution discipline used to be explained on the page as a four-layer
   system, which is why the page read like an internal ops guide. The discipline
   is better demonstrated than described: it now shows up as a stamp on the case
   study, doing its job without narrating itself. Same information, none of the
   lecture.
*/
/* --- Awards + particulars (About) ----------------------- */
/*
   Awards set as one quiet line, not a badge row. A wall of award logos is the
   SaaS "social proof strip" move the design system bans, and these carry more
   weight stated plainly than they would as trophies.
*/
.awards {
  font-family: var(--font-serif-2);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--black);
  max-width: 66ch;
  margin: 0;
}

/*
   The paperwork. Dry on purpose: a state procurement officer needs the CSB
   status and the wvOASIS vendor number, and they should be able to find both
   without emailing anyone. Nothing here is trying to persuade, so nothing here
   is styled to.
*/
.particulars {
  margin-top: var(--space-2xl);
  max-width: 66ch;
}

.particulars-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--gray-rule);
}

.particulars-row:last-child { border-bottom: 1px solid var(--gray-rule); }

/* Sits under the particulars as the last word of that block, not as its own
   thing. It previously used .quiet-note, which carries its own top rule, so
   the closing rule of the table and the rule above this line stacked with a
   gap between them and read as an empty row. */
.particulars-note {
  margin-top: var(--space-lg);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-meta);
}

@media (max-width: 600px) {
  .particulars-row { grid-template-columns: 1fr; gap: 4px; }
}

.particulars-key {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--red);
  line-height: 1.5;
  margin: 0;
}

.particulars-val {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-meta);
  margin: 0;
}

/* --- The founder's letter (About) ----------------------- */
/*
   First-person, so it's set like a letter rather than a marketing section.
   Slightly larger body, more generous leading, and a narrower measure than the
   default, because a personal story should read at the pace of someone talking
   to you across a table.

   No pull-quote treatment. The letter used to stage two one-line paragraphs at
   lede scale as dramatic beats, which is the LinkedIn post shape. It reads as
   continuous prose now.
*/
.letter .body-text {
  font-size: 17px;
  line-height: 1.85;
  max-width: 66ch;
}

.letter-close {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-rule);
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--black);
  max-width: 66ch;
}

.letter-close a {
  color: var(--red);
  border-bottom: 2px solid rgba(193, 2, 2, 0.28);
  transition: border-color 0.3s ease;
}

.letter-close a:hover { border-bottom-color: var(--red); }

/* --- The engagement stamp (/work) ----------------------- */
/*
   Two rewrites in. The first set the keys at 13px mono and the second put the
   whole thing in a cream card, which turned the block into a bento box with
   red fine print in it: exactly the machine-design look we've been pulling out
   of the rest of the site.

   No panel now. Three columns under hairline rules, the same device the
   principles, assets, and talks all use, so it reads as part of the system
   rather than a widget dropped into the page. The labels are real headings at
   real size. The block has room to breathe and it scans in one pass.
*/
.stamp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin: var(--space-3xl) 0 0;
}

@media (max-width: 860px) {
  .stamp { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.stamp-item {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-rule);
}

.stamp-icon {
  display: block;
  font-size: 30px;
  line-height: 1;
  color: var(--red);
  margin-bottom: var(--space-md);
}

.stamp-key {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0 0 var(--space-sm);
}

.stamp-val {
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-meta);
  margin: 0;
}

/* --- Principles row (/work) ----------------------------- */
/*
   Lives in the full container, not .container-narrow. At 800px these three
   columns landed around 230px each and every line broke after four words,
   which made a set of confident principles look cramped and unsure.
*/
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-3xl);
}

@media (max-width: 860px) {
  .principles { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.principle {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-rule);
}

.principle-icon {
  display: block;
  font-size: 32px;
  line-height: 1;
  color: var(--red);
  margin-bottom: var(--space-md);
}

.principle-name {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0 0 var(--space-sm);
}

.principle-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-meta);
  margin: 0;
}

/* --- Spec list ------------------------------------------ */
/*
   The Diagnostic's price, set as a fact rather than a pitch.

   Working a figure into a sentence always ends up either apologising for it
   or selling it. A definition list does neither: it puts the number where a
   buyer expects to find it, lets them check it and move on, and treats the
   price as unremarkable, which is the most confident thing you can do with it.

   Lives on .doctrine-block (dark), hence the cream treatment.
*/
.spec {
  margin-top: var(--space-2xl);
  max-width: 520px;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(247, 244, 239, 0.18);
}

.spec-row:last-child { border-bottom: 1px solid rgba(247, 244, 239, 0.18); }

.spec-key {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.6);
  margin: 0;
}

.spec-val {
  font-family: var(--font-serif-2);
  font-size: 19px;
  line-height: 1.3;
  color: var(--cream);
  margin: 0;
  text-align: right;
}

/* --- The five Build assets (StoryFoundry) --------------- */
/*
   Was a bare .grid-2 of headings and paragraphs, which made the deliverable
   stack (the thing a $20K buyer is actually evaluating) read as a wall of
   text. Icons give the eye something to land on and let someone scanning the
   page work out what they get without reading five paragraphs.

   Three columns, so the fifth asset doesn't sit alone on its own row the way
   an odd item does in a two-up grid.
*/
.assets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl) var(--space-xl);
  margin-top: var(--space-3xl);
}

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

@media (max-width: 600px) {
  .assets-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.asset {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-rule);
}

.asset-icon {
  display: block;
  font-size: 30px;
  line-height: 1;
  color: var(--red);
  margin-bottom: var(--space-md);
}

.asset-name {
  font-family: var(--font-serif-2);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--black);
  margin: 0 0 var(--space-xs);
}

.asset-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-meta);
  margin: 0;
}

/* --- Founding engagement (StoryFoundry) ----------------- */
/*
   No discount. The founding engagement is the same price as any Build, and
   what makes it worth claiming is the published case study, framed as the
   thing the client walks away with rather than the thing we extract from them.
   It gets its own surface because it's an offer, and offers shouldn't live in
   grey 14px type under a price.
*/
/* No left accent bar. It's a machine-design tell, and it's been removed
   sitewide. The cream surface and the red label carry this on their own. */
.founding {
  margin-top: var(--space-2xl);
  padding: var(--space-2xl);
  border-radius: 18px;
  background: var(--cream);
  border: 1px solid var(--gray-rule);
}

.founding-body { max-width: 72ch; }

.founding-eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 var(--space-sm);
}

.founding-name {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0 0 var(--space-md);
}

.founding-desc {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-meta);
  margin: 0 0 var(--space-md);
}

.founding-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--red);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(193, 2, 2, 0.25);
  transition: border-color 0.3s ease;
}

.founding-cta:hover { border-bottom-color: var(--red); }
.founding-cta:hover .path-arrow { transform: translateX(5px); }

@media (max-width: 600px) {
  .founding { padding: var(--space-xl); }
}

/* --- The deliverable (Diagnostic) ----------------------- */
/*
   Three things land in the inbox, so this is three columns. The old two-column
   list left an orphan on its own row and read as an afterthought, when it's
   actually the answer to the only question the buyer has at this point in the
   page: what do I get?
*/
.deliverable-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

@media (max-width: 860px) {
  .deliverable-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.deliverable {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-rule);
}

.deliverable .rc-icon {
  color: var(--red);
  margin-bottom: var(--space-md);
}

.deliverable-name {
  font-family: var(--font-serif-2);
  font-size: 22px;
  font-weight: 400;
  color: var(--black);
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-xs);
}

.deliverable-desc {
  font-size: 16px;
  color: var(--gray-meta);
  line-height: 1.65;
  margin: 0;
}

/* --- CTA row -------------------------------------------- */
/*
   The buttons carry an intrinsic `margin-top: var(--space-lg)` so that a bare
   CTA sitting straight after a paragraph still breathes. That's fine on its
   own. The problem was that nearly every CTA on the site was also wrapped in a
   div with its own inline `margin-top: var(--space-xl)`, so the real gap came
   out at 48px + 32px + the paragraph's own bottom margin. Copy and CTA drifted
   apart, and the button stopped reading as the answer to the sentence above it.

   .cta-row owns that spacing in one place and zeroes the buttons' own margin,
   which also keeps a two-button row properly aligned.
*/
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.cta-row .btn-primary,
.cta-row .btn-secondary,
.cta-row .btn-white {
  margin-top: 0;
}

/* --- Place line (About) --------------------------------- */

.place-line {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-meta);
  margin-top: var(--space-md);
}

/* The place line now signs off the founder's letter, so it needs the space a
   signature gets rather than sitting on the heels of the closing sentence. */
.letter .place-line {
  margin-top: var(--space-2xl);
}