/* =========================================================================
   PULSE SITE — shared subpage patterns
   Loads after colors_and_type.css + homepage.css (nav, buttons, wrap,
   sections, footer, cta-band checker all come from there).
   ========================================================================= */

/* nav active state */
.nav-links a.active { color: var(--fg-1); font-weight: var(--weight-semibold); }

/* ---------------------------------------------------------------- hero
   HERO VARIANTS (86ahzzky6) — every page's first section is one of these:
   1. hero--home   (index only)    display hero, grid + cube,
                                   padding --space-20 / --space-24
   2. page-hero    "default"       narrative pages (services, about),
                                   inner padding --space-20 / --space-20
   3. page-hero--compact           listing/conversion/utility pages
      "conversion"                 (our-work, contact, book-my-poc,
                                   thank-you) + case studies,
                                   inner padding --space-16 / --space-16
   Alignment rule: heroes are LEFT-aligned sitewide; only case-study pages
   (body.case-page) center their hero and article column. Eyebrow: block,
   margin-bottom --space-5 on every variant. H1 sizes come from the scale
   in colors_and_type.css — no per-page hero padding or h1 size overrides. */
.page-hero { background: var(--bg); border-bottom: 1px solid var(--ink-150); }
.page-hero-inner { padding-top: var(--space-20); padding-bottom: var(--space-20); max-width: 880px; }
.page-hero .eyebrow { display: block; margin-bottom: var(--space-5); }
.page-hero h1 {
  font-size: var(--text-4xl); font-weight: var(--weight-black);
  line-height: 1.1; letter-spacing: var(--tracking-tight);
  color: var(--fg-1); margin: 0 0 var(--space-5);
}
.page-hero .sub {
  font-size: var(--text-md); line-height: var(--leading-loose);
  color: var(--fg-2); margin: 0 0 var(--space-8); max-width: 58ch;
}
.page-hero--compact .page-hero-inner { padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* navy checker hero — same faded-checker nod to the cube as the homepage CTA band.
   A background-only MODIFIER on page-hero--compact (used on Our Work); it does not
   change spacing or type, so it stays within the variant system above. */
.page-hero--checker-navy {
  background-color: var(--ink-50);
  background-image:
    radial-gradient(ellipse 75% 110% at 50% 50%, var(--ink-50) 30%, rgba(250, 250, 248, 0.88) 60%, rgba(250, 250, 248, 0) 100%),
    repeating-conic-gradient(rgba(181, 194, 216, 0.45) 0% 25%, rgba(250, 250, 248, 0) 0% 50%);
  background-size: auto, 72px 72px;
}
.page-hero--compact .sub { margin-bottom: 0; }
.hero-cta-row { display: flex; align-items: center; gap: 14px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--coral-press); border: 1px solid var(--coral-200);
  border-radius: var(--radius-pill); padding: 10px 16px; background: var(--coral-50);
}

/* hero with broken cube */
.page-hero-grid { max-width: none; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.page-hero-grid > div:first-child { max-width: 640px; }
.section-grid-cube { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.cube.cube--still { animation: none; }
.cube-scene--hero .cube { transform: rotateX(-24deg) rotateY(-36deg) scale(0.82); margin-top: 48px; }
.cube-scene--hero .cube-shadow { margin-top: 76px; }

/* ---------------------------------------------------------------- process scroll story */
.process-scroll { height: 520vh; position: relative; background: var(--bg-brand-soft); }
.process-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
  box-sizing: border-box; padding-top: 64px; /* clear the sticky nav */
}
.process-frame { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; width: 100%; }
.process-head h2 { font-size: var(--text-3xl); margin: 0; }
.process-dots { display: flex; gap: 10px; margin-top: var(--space-10); }
.pdot {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: 9px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--ink-200); background: transparent; color: var(--fg-3);
  cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.pdot:hover { border-color: var(--coral-300); color: var(--coral-press); }
.pdot.active { background: var(--coral-cta); border-color: var(--coral-cta); color: #FFFFFF; }
.process-stage { position: relative; min-height: 420px; }
.pstep {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(28px); pointer-events: none;
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.pstep.active { opacity: 1; transform: none; pointer-events: auto; }
.pstep-num {
  font-family: var(--font-mono); font-weight: var(--weight-semibold);
  font-size: var(--text-6xl); line-height: 1; color: var(--coral-200);
  margin-bottom: var(--space-5);
}
.pstep h3 { font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.pstep-title { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--space-4); }
.pstep-title h3 { margin: 0; }
.phase-pill {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase; white-space: nowrap;
  color: var(--coral-press); background: var(--coral-50);
  border: 1px solid var(--coral-200); border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.pstep p { font-size: var(--text-md); max-width: 52ch; margin: 0; }

/* centered section variant */
.section-center { text-align: center; }
.section-center .eff-table-wrap { margin-left: auto; margin-right: auto; text-align: left; }
.section-center .eff-note { text-align: center; max-width: none; }

/* ---------------------------------------------------------------- efficiency table */
.eff-table-wrap {
  background: var(--ink-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-10);
  margin-top: var(--space-10); max-width: 880px;
}
.eff-table { width: 100%; border-collapse: collapse; }
.eff-table th {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase; color: var(--fg-4);
  text-align: left; padding: 0 18px 14px; border-bottom: 1px solid var(--ink-200);
}
.eff-table td {
  padding: 18px; border-bottom: 1px solid var(--ink-150);
  font-size: var(--text-base); color: var(--fg-2);
}
.eff-table tbody tr:last-child td { border-bottom: none; }
.eff-table td:first-child { font-weight: var(--weight-semibold); color: var(--fg-1); }
.eff-table .us { background: var(--coral-50); }
.eff-table td.us { color: var(--coral-press); font-weight: var(--weight-bold); white-space: nowrap; }
.eff-table th.us { color: var(--coral-press); border-bottom-color: var(--coral-200); }

/* ---------------------------------------------------------------- efficiency chart */
.eff-chart {
  background: var(--ink-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-10);
  margin-top: var(--space-10); max-width: 980px;
}
.eff-legend { display: flex; gap: 28px; margin-bottom: var(--space-6); }
.eff-legend span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.04em; color: var(--fg-3);
}
.eff-swatch { width: 22px; height: 10px; border-radius: 5px; display: inline-block; }
.eff-swatch--them { background: var(--ink-200); }
.eff-swatch--us { background: var(--coral-500); }
.eff-row { padding: var(--space-5) 0; border-top: 1px solid var(--ink-150); }
.eff-label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.eff-label .eff-name { font-weight: var(--weight-semibold); color: var(--fg-1); }
.eff-label .eff-delta {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--coral-press);
  white-space: nowrap;
}
.eff-bars { display: flex; flex-direction: column; gap: 7px; }
.eff-bar { height: 14px; border-radius: 7px; width: 0; transition: width 900ms var(--ease-out); }
.eff-bar--them { background: var(--ink-200); }
.eff-bar--us { background: var(--coral-500); }
.eff-chart.in-view .eff-bar { width: var(--w); }
@media (prefers-reduced-motion: reduce) {
  .eff-bar { width: var(--w); transition: none; }
}
.eff-note { margin: var(--space-6) 0 0; font-size: var(--text-sm); color: var(--fg-3); max-width: 64ch; }

/* ---------------------------------------------------------------- bullet rows */
.x-rows, .check-rows { display: flex; flex-direction: column; margin-top: var(--space-8); }
.x-row, .check-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: var(--space-4) 0; border-top: 1px solid var(--ink-150);
}
.x-row svg { flex: none; margin-top: 3px; color: var(--ink-300); }
.check-row svg { flex: none; margin-top: 3px; color: var(--coral-500); }
.x-row p, .check-row p { margin: 0; font-size: var(--text-base); color: var(--fg-2); }
.check-row .lead-in, .x-row .lead-in { font-weight: var(--weight-bold); color: var(--fg-1); }
.closing-line {
  margin-top: var(--space-8);
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  color: var(--fg-1); letter-spacing: var(--tracking-snug);
}

/* ---------------------------------------------------------------- timeline */
.steps { display: flex; flex-direction: column; margin-top: var(--space-10); max-width: 760px; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 24px; position: relative; padding-bottom: var(--space-10); }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ""; position: absolute; left: 23px; top: 48px; bottom: 0;
  width: 2px; background: var(--ink-150);
}
.step:last-child::before { display: none; }
.step-num {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral-50); border: 1px solid var(--coral-200);
  font-family: var(--font-mono); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: var(--coral-press);
  position: relative; z-index: 1;
}
.step h3 { margin: 10px 0 var(--space-2); }
.step p { margin: 0; max-width: 56ch; }
.step .phase-tag {
  display: block; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono-label); text-transform: uppercase;
  color: var(--fg-4); margin-top: 12px;
}

/* ---------------------------------------------------------------- cards */
.snap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: var(--space-10); }
.snap-card {
  background: var(--ink-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.snap-card h3 { margin: 0; }
.snap-card p { margin: 0; }
.snap-metric { margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--ink-150); }
.snap-metric .metric { font-size: var(--text-3xl); color: var(--coral-500); }
.snap-metric .metric-label { display: block; margin-top: var(--space-2); }

.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: var(--space-10); }
.cap-card {
  background: var(--ink-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.cap-card svg { color: var(--coral-500); }
.cap-card h3 { margin: 0; } /* size via .h4 utility on the element */
.cap-card p { margin: 0; font-size: var(--text-sm); color: var(--fg-3); }

/* ---------------------------------------------------------------- split cols */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: var(--space-10); }
.split-col { border-radius: var(--radius-lg); padding: var(--space-8); }
.split-col .vs-head { margin-bottom: var(--space-4); }
.split-col--strong { background: var(--ink-0); box-shadow: var(--shadow-md); }
.split-col--quiet { border: 1px solid var(--ink-150); }
.split-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: var(--space-4) 0; border-top: 1px solid var(--ink-150);
}
.split-row svg { flex: none; margin-top: 3px; }
.split-row p { margin: 0; font-size: var(--text-base); color: var(--fg-1); }
.split-col--quiet .split-row p { color: var(--fg-3); }
.split-col--strong .split-row svg { color: var(--coral-500); }
.split-col--quiet .split-row svg { color: var(--ink-300); }

/* ---------------------------------------------------------------- proof band */
.proof-band { background: var(--bg-brand-soft); }
.proof-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: var(--space-10); }
.proof-metric .metric { font-size: var(--text-4xl); color: var(--coral-500); }
.proof-metric .metric-label { display: block; margin-top: var(--space-3); }
.proof-band .text-link { margin-top: var(--space-8); }
.proof-band .pull-quote { border-left: 2px solid var(--coral-500); padding-left: var(--space-6); max-width: 720px; margin-top: var(--space-8); }
.proof-band .pull-quote .q { color: var(--fg-1); font-size: var(--text-lg); font-weight: var(--weight-medium); font-style: italic; line-height: 1.5; margin: 0 0 var(--space-3); }
.proof-band .pull-quote .attr { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--fg-4); }

/* ---------------------------------------------------------------- run log card */
.section-runlog { background: var(--coral-100); border-top: 1px solid var(--coral-200); border-bottom: 1px solid var(--coral-200); }
.section-runlog .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.section-runlog .eyebrow { color: var(--coral-press); }
.runlog {
  background: var(--ink-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); width: 640px; max-width: 100%;
  padding: 40px 44px; margin-top: var(--space-8);
  font-family: var(--font-mono); text-align: left;
}
.runlog-head {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-4); padding-bottom: 16px; border-bottom: 1px dashed var(--ink-200);
}
.runlog-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-bottom: 1px dashed var(--ink-150); font-size: 14px;
}
.runlog-row .k { color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.runlog-row .v { color: var(--fg-1); font-weight: 600; }
.runlog-row .v.hot { color: var(--coral-press); font-size: 20px; font-weight: 600; }
.runlog-stamp { margin-top: 24px; text-align: center; }
.runlog-stamp span {
  display: inline-block; border: 2px solid var(--coral-500); color: var(--coral-press);
  border-radius: 8px; padding: 10px 22px; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  transform: rotate(-3deg);
}

/* ---------------------------------------------------------------- accordion */
.accordion { margin-top: var(--space-8); max-width: 820px; border-bottom: 1px solid var(--ink-150); }
.accordion details { border-top: 1px solid var(--ink-150); }
.accordion summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: var(--space-5) 0;
  font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--fg-1);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .acc-icon {
  flex: none; color: var(--coral-500);
  transition: transform var(--duration-base) var(--ease-out);
}
.accordion details[open] summary .acc-icon { transform: rotate(45deg); }
.accordion details p { margin: 0; padding: 0 0 var(--space-6); max-width: 64ch; }

/* ---------------------------------------------------------------- featured case */
.featured-case {
  background: var(--ink-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-12);
  margin-top: var(--space-10);
}
.featured-case h2 { font-size: var(--text-3xl); margin: var(--space-2) 0 var(--space-2); }
.featured-case .client { font-size: var(--text-md); color: var(--fg-3); margin: 0 0 var(--space-8); }
.case-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-10); }
.case-block .block-label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase; color: var(--coral-press); margin: 0 0 var(--space-2);
}
.case-block p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-loose); }
.case-aside { display: flex; flex-direction: column; gap: var(--space-8); justify-content: center; }
.case-aside .metric { font-size: var(--text-5xl); color: var(--coral-500); }
.case-aside .metric-label { display: block; margin-top: var(--space-2); }
.featured-grid { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: var(--space-12); }
.featured-case .pull-quote { border-left: 2px solid var(--coral-500); padding-left: var(--space-5); }
.featured-case .pull-quote .q { color: var(--fg-2); font-size: var(--text-base); }
.featured-case .pull-quote .attr { color: var(--fg-4); }

.work-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: var(--space-8); }
.work-card {
  background: var(--ink-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column;
}
.work-card .work-body { padding: var(--space-6) var(--space-8) var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.work-card h3 { margin: 0; }
.work-card .work-tag {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono-label); text-transform: uppercase; color: var(--coral-press);
}
.snapshot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: var(--space-8); }
.snapshot-card {
  border: 1px solid var(--ink-150); border-radius: var(--radius-lg);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
}
.snapshot-card h4 { margin: 0; }
.snapshot-card p { margin: 0; font-size: var(--text-sm); }

/* ---------------------------------------------------------------- about */
.manifesto { max-width: 820px; }
.manifesto p {
  font-size: var(--text-xl); line-height: 1.7; color: var(--fg-1);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-6);
}
.princ-row { display: flex; gap: 8px; padding: var(--space-5) 0; border-top: 1px solid var(--ink-150); max-width: 820px; }
.princ-row p { margin: 0; font-size: var(--text-md); }
.princ-row .lead-in { font-weight: var(--weight-bold); color: var(--fg-1); }
.founder-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-16); align-items: center; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: var(--space-10); }
.team-card { display: flex; flex-direction: column; gap: var(--space-3); }
.team-card .t-role {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono-label); text-transform: uppercase; color: var(--coral-press);
}
.team-card h4 { margin: var(--space-2) 0 0; font-size: var(--text-lg); }
.team-card p { margin: 0; font-size: var(--text-sm); color: var(--fg-3); }
.location-strip { background: var(--bg-brand-soft); }
.location-inner {
  display: flex; align-items: center; gap: 20px;
  padding-top: var(--space-12); padding-bottom: var(--space-12);
}
.location-inner svg { color: var(--coral-500); flex: none; }
.location-inner h3 { margin: 0 0 4px; }
.location-inner p { margin: 0; color: var(--fg-3); }

/* ---------------------------------------------------------------- insights */
.post-featured {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10);
  background: var(--ink-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden; margin-top: var(--space-8);
}
.post-featured .pf-body { padding: var(--space-10) var(--space-10) var(--space-10) 0; display: flex; flex-direction: column; gap: var(--space-4); }
.post-featured h2 { margin: 0; font-size: var(--text-2xl); }
.post-featured p { margin: 0; }
.post-meta { font-size: var(--text-xs); color: var(--fg-4); font-family: var(--font-mono); letter-spacing: 0.04em; }
.tag-pill {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono-label); text-transform: uppercase;
  color: var(--coral-press); background: var(--coral-50);
  border-radius: var(--radius-pill); padding: 5px 12px;
}
.pill-row { display: flex; gap: 10px; margin-top: var(--space-12); }
.pill {
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--fg-2); background: transparent;
  border: 1px solid var(--ink-200); border-radius: var(--radius-pill);
  padding: 8px 18px; cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.pill:hover { border-color: var(--coral-300); color: var(--coral-press); }
.pill.active { background: var(--coral-cta); border-color: var(--coral-cta); color: #FFFFFF; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: var(--space-8); }
.post-card {
  background: var(--ink-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column;
}
.post-card .pc-body { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.post-card h3 { margin: 0; font-size: var(--text-md); }
.post-card p { margin: 0; font-size: var(--text-sm); color: var(--fg-3); }
.post-card .post-meta { margin-top: auto; }
.email-row { display: flex; gap: 12px; justify-content: center; margin-top: var(--space-2); }
.email-row input {
  font-family: var(--font-sans); font-size: var(--text-sm);
  padding: 14px 18px; width: 320px;
  border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  background: var(--ink-0); color: var(--fg-1);
}
.email-row input:focus { outline: 2px solid var(--coral-300); outline-offset: 0; border-color: var(--coral-300); }

/* ---------------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: start; }
.calendar-placeholder {
  border: 1px dashed var(--ink-200); border-radius: var(--radius-lg);
  min-height: 520px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3);
  color: var(--fg-4); background: var(--ink-0);
}
.calendar-placeholder svg { color: var(--ink-300); }
.calendar-placeholder .cal-label { font-weight: var(--weight-semibold); color: var(--fg-3); font-size: var(--text-md); }
.calendar-placeholder .cal-note { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-1); }
.field .optional { font-weight: var(--weight-regular); color: var(--fg-4); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-1);
  padding: 13px 16px; border: 1px solid var(--ink-200);
  border-radius: var(--radius-md); background: var(--ink-0);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--coral-300); outline-offset: 0; border-color: var(--coral-300);
}
.reassure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.reassure-card {
  background: var(--ink-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-6);
}
.reassure-title { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg-1); }
.reassure-card p { margin: 0; font-size: var(--text-sm); color: var(--fg-3); }
.alt-contact { display: flex; gap: var(--space-16); align-items: flex-start; }
.alt-contact .block-label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase; color: var(--fg-4); margin: 0 0 var(--space-2);
}
.alt-contact p, .alt-contact address { margin: 0; font-style: normal; font-size: var(--text-base); color: var(--fg-2); }

/* placeholder marker */
.ph {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-medium);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber-500); background: var(--amber-50);
  padding: 2px 8px; border-radius: var(--radius-pill);
  vertical-align: middle;
}

/* ---------------------------------------------------------------- case study articles */
.case-meta { display: flex; gap: 10px; margin-bottom: var(--space-6); flex-wrap: wrap; }
.case-meta span {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase; color: var(--coral-press);
  background: var(--coral-50); border: 1px solid var(--coral-200);
  border-radius: var(--radius-pill); padding: 6px 14px;
}
.case-stats { background: var(--ink-0); border-bottom: 1px solid var(--ink-150); }
.case-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: var(--space-16) var(--space-10); text-align: center; }
.case-stat .num {
  font-weight: var(--weight-black); font-size: var(--text-3xl); line-height: 1.1;
  letter-spacing: var(--tracking-tight); color: var(--coral-500);
  font-feature-settings: "tnum" 1; margin-bottom: var(--space-3);
}
.case-stat .label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono-label); text-transform: uppercase;
  color: var(--fg-4); line-height: 1.6; display: block; max-width: 30ch;
  margin: 0 auto;
}
.article { max-width: 800px; }
.article h2 {
  font-size: var(--text-xl); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug); margin: var(--space-12) 0 var(--space-4);
}
.article h2:first-child { margin-top: 0; }
.article p { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--fg-2); margin: 0 0 var(--space-5); }
.article ol { list-style: none; counter-reset: sol; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.article ol li {
  counter-increment: sol; position: relative; padding-left: 52px;
  font-size: var(--text-md); line-height: var(--leading-loose); color: var(--fg-2);
}
.article ol li::before {
  content: "0" counter(sol);
  position: absolute; left: 0; top: 4px;
  font-family: var(--font-mono); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: var(--coral-press);
}
.article .lead-in { font-weight: var(--weight-semibold); color: var(--fg-1); }
.case-callout {
  background: var(--bg-brand-soft); border-radius: var(--radius-lg);
  padding: var(--space-8); margin: var(--space-8) 0;
}
.case-callout p {
  margin: 0; font-size: var(--text-lg); font-weight: var(--weight-medium);
  line-height: 1.5; color: var(--fg-1); letter-spacing: var(--tracking-snug);
}
.article .pull-quote { border-left: 2px solid var(--coral-500); padding-left: var(--space-6); margin: var(--space-8) 0; }
.article .pull-quote .q { font-size: var(--text-lg); font-weight: var(--weight-medium); font-style: italic; line-height: 1.5; color: var(--fg-1); margin: 0 0 var(--space-3); }
.article .pull-quote .attr { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--fg-4); }
.next-case { background: var(--ink-0); border-top: 1px solid var(--ink-150); }
.next-case-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: var(--space-12); padding-bottom: var(--space-12); }
.next-case-inner h3 { font-size: var(--text-xl); margin: var(--space-2) 0 0; }
.next-case-all {
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--fg-3); text-decoration: none;
}
.next-case-all:hover { color: var(--coral-press); }
.work-cards--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* ---------------------------------------------------------------- centered case pages */
body.case-page .page-hero-inner { text-align: center; }
body.case-page .case-meta { justify-content: center; }
body.case-page .page-hero-inner .sub { margin-left: auto; margin-right: auto; }
body.case-page .article { margin-left: auto; margin-right: auto; text-align: center; }
body.case-page .article ol { align-items: center; }
body.case-page .article ol li { padding-left: 0; max-width: 62ch; }
body.case-page .article ol li::before {
  position: static; display: block; margin-bottom: var(--space-2);
}
body.case-page .article .pull-quote {
  border-left: none; padding-left: 0;
  max-width: 56ch; margin-left: auto; margin-right: auto;
}
body.case-page .case-callout { max-width: 56ch; margin-left: auto; margin-right: auto; }
body.case-page .next-case-inner {
  flex-direction: column; text-align: center; gap: var(--space-6);
}

/* ---------------------------------------------------------------- about: editorial manifesto (A) */
.about-hero { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.about-hero h1 { margin: 0 0 var(--space-10); } /* size/weight from .page-hero h1 */
.about-hero h1 em { font-style: normal; color: var(--coral-500); }
.manifesto-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; max-width: 1000px; }
.manifesto-flow p { font-size: 19px; line-height: var(--leading-loose); color: var(--fg-2); margin: 0; }
.manifesto-flow p:first-child { font-size: 26px; font-weight: var(--weight-semibold); color: var(--fg-1); grid-column: 1 / -1; }
.about-heartbeat { padding-bottom: var(--space-8); }
.about-heartbeat svg { display: block; width: 100%; height: 44px; }

/* principles index */
.princ-index .pi-row { display: grid; grid-template-columns: 80px 340px 1fr; gap: 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--ink-150); }
.princ-index .pi-row:last-child { border-bottom: 1px solid var(--ink-150); }
.princ-index .pi-no { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--coral-press); }
.princ-index .pi-name { font-size: 19px; font-weight: var(--weight-bold); color: var(--fg-1); }
.princ-index .pi-desc { font-size: var(--text-sm); color: var(--fg-3); line-height: 1.6; margin: 0; }

/* pulse-line timeline */
.about-timeline { max-width: 880px; margin: var(--space-10) auto 0; position: relative; }
.about-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--ink-150); }
.tl-item { position: relative; width: 50%; padding: 0 48px 56px; }
.tl-item:nth-child(odd) { left: 0; text-align: right; }
.tl-item:nth-child(even) { left: 50%; text-align: left; }
.tl-item::before { content: ""; position: absolute; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--coral-500); border: 3px solid var(--ink-50); }
.tl-item:nth-child(odd)::before { right: -7.5px; }
.tl-item:nth-child(even)::before { left: -7.5px; }
.tl-item:last-child { padding-bottom: var(--space-4); }
.tl-item .yr { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--coral-press); text-transform: uppercase; display: block; margin-bottom: 8px; }
.tl-item h4 { font-weight: var(--weight-bold); margin: 0 0 8px; }
.tl-item p { font-size: 14.5px; line-height: 1.6; color: var(--fg-3); margin: 0; }
.tl-head { text-align: center; }
.tl-head .eyebrow { display: block; margin-bottom: var(--space-4); }
.tl-head h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); margin: 0; }

/* founder band on white */
.founder-band { background: var(--ink-0); }
.founder-band .founder-band-inner { display: grid; grid-template-columns: 400px 1fr; gap: 56px; align-items: center; padding-top: var(--space-20); padding-bottom: var(--space-20); }
.founder-band h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); margin: var(--space-3) 0 var(--space-4); }
.founder-band p { font-size: var(--text-base); line-height: var(--leading-loose); color: var(--fg-2); margin: 0 0 var(--space-4); }
.founder-band .loc { display: flex; align-items: center; gap: 8px; color: var(--coral-press); font-weight: var(--weight-semibold); font-size: var(--text-sm); margin: 0; }

/* work card graphics */
.work-img { display: block; width: 100%; height: 200px; object-fit: cover; }

/* centered contact form */
.contact-form--centered { max-width: 680px; margin: 0 auto; }
.contact-form--centered .btn { align-self: center; padding-left: 48px; padding-right: 48px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.field .req { color: var(--coral-press); font-weight: var(--weight-bold); }
.radio-field { border: none; margin: 0; padding: 0; }
.radio-field legend { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-1); padding: 0; margin-bottom: 10px; }
.radio-row { display: flex; gap: var(--space-6); }
.radio-opt { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--fg-2); cursor: pointer; }
.radio-opt input { accent-color: var(--coral-500); width: 18px; height: 18px; margin: 0; }

.form-trust { text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--fg-4); margin: var(--space-2) 0 0; }

/* contact hero value points */
.hero-points { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); }
.hero-point { display: flex; align-items: flex-start; gap: 12px; }
.hero-point svg { flex: none; color: var(--coral-500); margin-top: 3px; }
.hero-point p { margin: 0; font-size: var(--text-md); line-height: 1.6; color: var(--fg-2); }

/* ================================================================ mobile */
@media (max-width: 768px) {
  /* page heroes */
  .page-hero { padding-top: var(--space-12); }
  .page-hero h1 { font-size: var(--text-2xl); }
  .page-hero .sub { font-size: var(--text-base); }
  .page-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-cta-row { flex-wrap: wrap; }

  /* decorative cubes: too wide for small screens */
  .cube-scene--hero { display: none; }
  .section-grid-cube { grid-template-columns: 1fr; gap: 0; }
  .section-grid-cube .cube-scene { display: none; }

  /* grids -> single column */
  .snap-grid, .cap-grid, .split-grid, .proof-metrics, .reassure-grid,
  .work-cards, .work-cards--3, .case-blocks, .featured-grid,
  .case-stats-grid, .founder-grid, .founder-band-inner, .field-row,
  .post-grid, .snapshot-grid, .team-grid, .post-featured {
    grid-template-columns: 1fr;
  }
  .proof-metrics { gap: 28px; }
  .case-stats-grid { gap: 32px; padding: var(--space-12) var(--space-4); }
  .founder-band-inner { gap: 32px; }
  .alt-contact { flex-direction: column; gap: var(--space-8); }
  .pill-row { flex-wrap: wrap; }
  .radio-row { flex-direction: column; gap: 12px; }

  /* process scroll story */
  .process-frame { grid-template-columns: 1fr; gap: 24px; }
  .process-head h2 { font-size: var(--text-2xl); }
  .process-dots { margin-top: var(--space-5); flex-wrap: wrap; }
  .process-stage { min-height: 300px; }
  .pstep-num { font-size: var(--text-4xl); margin-bottom: var(--space-3); }
  .pstep h3, .pstep-title h3 { font-size: var(--text-xl); }
  .pstep-title { flex-wrap: wrap; gap: 10px; }

  /* efficiency table */
  .eff-table-wrap { padding: var(--space-5); overflow-x: auto; }
  .eff-table th, .eff-table td { padding: 12px 10px; font-size: var(--text-xs); }

  /* run log */
  .runlog { padding: var(--space-6); }
  .runlog-row { font-size: 13px; gap: 16px; }
  .runlog-row .v { text-align: right; }

  /* articles */
  .article h2 { font-size: var(--text-lg); margin-top: var(--space-10); }
  .article p, .article ol li { font-size: var(--text-base); }
  .next-case-inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  body.case-page .next-case-inner { align-items: center; }

  /* about */
  .manifesto-flow { grid-template-columns: 1fr; gap: 20px; }
  .manifesto-flow p:first-child { font-size: 21px; }
  .princ-index .pi-row { grid-template-columns: 1fr; gap: 6px; }
  .princ-index .pi-no { font-size: var(--text-xs); }
  .about-timeline::before { left: 6px; }
  .tl-item, .tl-item:nth-child(odd), .tl-item:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 0 0 40px 36px; }
  .tl-item:nth-child(odd)::before, .tl-item:nth-child(even)::before { left: 0.5px; right: auto; }
  .location-inner { align-items: flex-start; }
}