/* Designed Culture. Fluid between the 390 and 1440 references. */

:root {
  --blue: #2D3D4C;
  --cream: #F5F6F1;
  --moss: #6B7A5A;
  /* Moss Green fails AA as small text on cream (4.24:1); this darker moss is used for text only. */
  --moss-text: #5C6A4E;
  --gold: #D4A24E;
  --grey: #C2C7CD;
  /* the navy the claim-card watercolors are painted on, a shade off Mountain Blue, so the image squares disappear */
  --band: #33404F;
  /* the flat ground of the "What you leave with" illustration, so the image dissolves into its band */
  --band-warm: #FDF9F0;
  --hairline-dark: rgba(194, 199, 205, 0.28);

  --font: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Role tokens from the 2026-09 design review. Same brand hexes, named by the one job each does. */
  --ink: var(--blue);                          /* headings, dark bands, structure */
  --ground: var(--cream);                      /* the light page background */
  --hairline: var(--grey);                     /* dividers and card rules only */
  --on-ink: var(--cream);                      /* headings on a dark band */
  --on-ink-body: rgba(245, 246, 241, 0.88);    /* body copy on a dark band: cream at 88% */
  --gold-on-dark: var(--gold);                 /* eyebrow text on a dark band; 4.6:1 on the band */
  --gold-ink: #86662C;                         /* Solar Gold darkened to text contrast: eyebrows on cream, link hover; 4.9:1 */

  /* Type steps. Six, and nothing sits between them. Each is a font shorthand, fluid from 390
     to 1440 where the step scales; letter-spacing rides alongside where a step needs it. */
  --t-display: 700 clamp(34px, 2.095vw + 25.83px, 56px)/1.02 var(--font);   /* hero headline only */
  --track-display: -0.025em;
  --t-section: 700 clamp(28px, 0.571vw + 25.77px, 34px)/1.15 var(--font);   /* section titles */
  --track-section: -0.015em;
  --t-card: 600 clamp(19px, 0.286vw + 17.89px, 22px)/1.22 var(--font);      /* card and sub-section titles */
  --t-lead: 400 clamp(17px, 0.19vw + 16.26px, 19px)/1.55 var(--font);       /* section intro paragraphs */
  --t-body: 400 16px/1.62 var(--font);                                        /* all running copy */
  --t-eyebrow: 500 12px/1.4 var(--font);                                      /* section eyebrows */
  --track-eyebrow: 0.16em;

  /* 24px at 390, 96px at 1440, then centers a 1248px column on wider screens */
  --gutter: max(clamp(24px, 6.857vw - 2.74px, 96px), calc((100vw - 1248px) / 2));
  /* Three vertical rhythms, fluid from 390 to 1440: 48 to 88 between sections,
     64 to 120 before the closing band, 28 inside a card. */
  --space-section: clamp(48px, 3.81vw + 33.14px, 88px);
  --space-close: clamp(64px, 5.333vw + 43.2px, 120px);
  --space-card: 28px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--blue);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; text-wrap: pretty; }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; transition: color 120ms ease, border-color 120ms ease; }
a:hover { color: var(--gold-ink); }
/* the one inline link treatment: a hairline under the text, gold on hover */
.text-link, .about-body a { border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.text-link:hover, .about-body a:hover { border-color: var(--gold-ink); }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.call :focus-visible { outline-color: var(--gold); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  padding: 10px 16px; background: var(--blue); color: var(--cream); border-radius: 4px;
}
.skip:focus { top: 12px; color: var(--cream); }

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

/* Shared pieces */

.stack { display: flex; flex-direction: column; gap: 20px; }

.rule { width: 56px; height: 4px; background: var(--gold); }

.label {
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--gold-ink);
}

.muted { color: var(--moss-text); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(16px, 0.19vw + 15.26px, 18px) clamp(24px, 0.762vw + 21.03px, 32px);
  background: var(--gold); color: var(--blue);
  font-size: 16px; font-weight: 600; line-height: 1.2;
  border-radius: 4px;
  transition: color 120ms ease, background-color 120ms ease;
}
.btn:hover { color: var(--blue); background: #C8963F; }
.btn-sm { padding: 12px 22px; }

.text-link { font-weight: 600; font-size: 16px; line-height: 1.4; align-self: flex-start; }

h2 { font: var(--t-section); letter-spacing: var(--track-section); }
h3 { font: var(--t-card); }

/* Top bar */

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: clamp(13px, 1.238vw + 8.17px, 26px);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--grey);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand:hover { color: var(--blue); }
.logo { display: block; width: 56px; height: 28px; flex: none; }
.brand-name { font-weight: 600; line-height: 1.2; }
nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.nav-link { font-size: 16px; font-weight: 600; white-space: nowrap; }

/* 1. Hero */

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 4vw, 64px); align-items: center;
  padding-block: clamp(40px, 3.05vw + 28.1px, 72px) clamp(32px, 2.29vw + 23.1px, 56px);
  padding-inline: var(--gutter);
}
.hero .stack { gap: 28px; position: relative; z-index: 1; max-width: 1100px; }
.hero .btn { align-self: flex-start; margin-top: 4px; }
.eyebrow { display: flex; flex-direction: column; gap: 14px; }
.hero h1 {
  font: var(--t-display); letter-spacing: var(--track-display); max-width: 1100px;
}
.lede { font: var(--t-lead); max-width: 820px; }
/* Multiply plus a lift in brightness lets the watercolor paper melt into the cream page. */
.hero-img {
  display: block; width: clamp(220px, 26vw, 400px); height: auto;
  mix-blend-mode: multiply; filter: brightness(1.08) contrast(1.04);
}

/* 2. Beats: the three claims. */

/* 2. Thesis band. The ground is the sampled mean of the three illustrations' own navy
   (#333F4D, #364252, #31404E), so the image edges dissolve into it. */

.thesis {
  background: var(--band);
  color: var(--on-ink);
}
.thesis-inner {
  /* same gutter as every other section, so the three columns line up with the page */
  padding-inline: var(--gutter);
  padding-block: var(--space-section);
  display: grid;
  /* min() keeps a column from forcing overflow on viewports narrower than 280px + padding */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(28px, 3.5vw, 44px);
}
.thesis-col { display: flex; flex-direction: column; gap: 14px; }
/* the images sit on the band's own color, so no blending here; they render whole, uncropped */
.thesis-img {
  display: block; width: 100%; height: auto;
  border-radius: 4px; margin-bottom: 6px;
}
.thesis-eyebrow {
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--gold-on-dark);
}
.thesis h2 {
  margin: 0;
  font-size: clamp(22px, 0.381vw + 20.51px, 26px); line-height: 1.18;
  font-weight: 600; letter-spacing: -0.012em; text-wrap: pretty;
  color: var(--on-ink);
}
.thesis p {
  margin: 0;
  font: var(--t-body); line-height: 1.68;
  color: var(--on-ink-body); max-width: 42ch; text-wrap: pretty;
}

/* Category layout, used by 404.html */

.category {
  display: flex; flex-direction: column; gap: 48px;
  padding-block: var(--space-section); padding-inline: var(--gutter);
}
.category-intro { gap: 16px; max-width: 980px; }
.category-intro h1 { font: var(--t-section); letter-spacing: var(--track-section); }
.category-intro p { font: var(--t-lead); }

/* 3. Where Change Begins: intro above, three moments as cards. Uses the .work layout. */

/* 3, 4, 5. Heading and lede, then three cards; "What you leave with" adds a closing line */

.work {
  display: flex; flex-direction: column; gap: clamp(40px, 2.286vw + 31.1px, 64px);
  padding-block: var(--space-section); padding-inline: var(--gutter);
}
.work-head { max-width: 900px; }
.work-head .lede { max-width: 62ch; }
/* Section heads: eyebrow, title and lede on the left, illustration on the right */
.work-split {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
/* every head image fills the same frame, so the three section heads stay level; the two 3:2
   illustrations lose a sliver at each side to the crop */
.work-img {
  display: block; width: 100%; aspect-ratio: 1200 / 848; object-fit: cover;
  mix-blend-mode: multiply; filter: brightness(1.08) contrast(1.04);
}
/* "What you leave with" runs on the illustration's own ground; the image sits on it unblended */
.band-warm { background: var(--band-warm); }
.band-warm .work-img { mix-blend-mode: normal; filter: none; }
/* inside a split the lede runs the full text column rather than stopping at 62ch */
.work-split .work-head .lede { max-width: none; }
.work-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3.048vw + 20.1px, 64px);
  align-items: stretch;
}
/* each card carries its own rule, so the three end level and read as a set */
.work-col {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--hairline); padding-top: var(--space-card);
}
/* closing line: full width at lead size, with the hairline under it */
.work-close {
  font: var(--t-lead);
  border-bottom: 1px solid var(--hairline); padding-bottom: var(--space-card);
}

/* 5. Start an exploration */

.exploration { padding-block: var(--space-section); padding-inline: var(--gutter); }
.exploration .stack { max-width: 820px; gap: 24px; }
.exploration .btn { align-self: flex-start; margin-top: 4px; margin-bottom: 24px; }
.exploration-alt { color: var(--moss-text); }

/* 6. About */

.about {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 80px; align-items: start;
  padding-block: var(--space-section) var(--space-close); padding-inline: var(--gutter);
}
.about-body { gap: 22px; }

/* 7. Request an exploration */

.call {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding-block: var(--space-section);
  padding-inline: max(var(--gutter), clamp(24px, 16.76vw - 41.4px, 200px));
  /* same sampled navy as the claims band, so the page runs on one dark ground until the
     transparent image exports let both bands move to Mountain Blue together */
  background: var(--band); color: var(--on-ink); text-align: center;
}
.call p { font: var(--t-lead); max-width: 760px; }

.call-form {
  display: flex; flex-direction: column; gap: 20px;
  width: 100%; max-width: 560px; text-align: left;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; }
.field input, .field textarea, .subscribe input {
  width: 100%; padding: 12px 14px;
  font: inherit; line-height: 1.4;
  color: var(--blue); background: var(--cream);
  border: 1px solid var(--grey); border-radius: 4px;
}
.field textarea { resize: vertical; min-height: 120px; }
.call-form .btn { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; }
.call-form .btn:disabled { opacity: 0.7; cursor: default; }
.call .call-status:empty { display: none; }
.call-status { font-weight: 600; }
/* Newsletter band: one email field and the button, posting to Substack's own no-script endpoint */
.subscribe {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; max-width: 560px; text-align: left;
}
.subscribe label { font-weight: 600; }
.subscribe-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.subscribe .btn { border: 0; cursor: pointer; font-family: inherit; }
/* small print at eyebrow size, in the band's body color, with the site's link rule */
.call .subscribe-note { font: var(--t-eyebrow); color: var(--on-ink-body); max-width: 560px; }
.subscribe-note a { color: inherit; border-bottom: 1px solid var(--hairline-dark); }
.subscribe-note a:hover { color: var(--gold-on-dark); border-color: var(--gold-on-dark); }

/* Footer */

.footer {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px;
  padding-block: clamp(28px, 2.667vw + 17.6px, 56px); padding-inline: var(--gutter);
  border-top: 1px solid var(--grey);
}
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col:first-child { gap: 10px; }

/* Under 1000px the four nav links no longer fit beside the logo; the Book a call button stays */

@media (max-width: 999px) {
  nav .nav-link { display: none; }
}

/* Under 900px: one column. Both dark bands stack in the same order. */

@media (max-width: 899px) {
  .about { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .work-cols { grid-template-columns: minmax(0, 1fr); }
  .work-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .work-img { max-width: 560px; }
  .footer { grid-template-columns: minmax(0, 1fr); }
  .footer { gap: 32px; }
}

/* Under 600px */

@media (max-width: 599px) {
  /* on phones the image sits under the text */
  .hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hero-img { width: min(70vw, 300px); justify-self: center; }

  .call .btn, .exploration .btn, .hero .btn { display: flex; width: 100%; align-self: stretch; }
  .subscribe-row { grid-template-columns: minmax(0, 1fr); }

  /* "Start an exploration" is too long to sit beside the wordmark on a phone.
     The mark carries the brand here; the link keeps its accessible name. */
  .topbar .brand-name { display: none; }
  .topbar .btn-sm { white-space: nowrap; }
}