/* ==========================================================================
   Entice — global stylesheet
   Design system: docs/AGENT_DESIGN_CONTEXT_v2.md (mirrored in CLAUDE.md §3)
   Fonts: DM Mono (400/500) for everything, Instrument Serif for hero titles only.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Fonts */
  --font-ui:      'DM Mono', monospace;
  --font-display: 'Instrument Serif', serif;

  /* Core pair */
  --charcoal:    #26262A;
  --chalk:       #F8F8FA;

  /* Accents */
  --burgundy:    #70172D;
  --baby-blue:   #C3E2FF;

  /* Supporting */
  --ink:         #141418;
  --off-white:   #FCFCFD;
  --white:       #FFFFFF;

  /* Ink opacity scale */
  --ink-70: rgba(20, 20, 24, 0.70);
  --ink-50: rgba(20, 20, 24, 0.50);
  --ink-20: rgba(20, 20, 24, 0.20);
  --ink-08: rgba(20, 20, 24, 0.08);
  --ink-04: rgba(20, 20, 24, 0.04);

  /* Derived tints */
  --burgundy-10: rgba(112, 23, 45, 0.10);
  --burgundy-20: rgba(112, 23, 45, 0.20);
  --blue-10:     rgba(195, 226, 255, 0.40);
  --blue-20:     rgba(195, 226, 255, 0.70);

  /* Radius */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Layout */
  --gutter:      24px;
  --max-width:   1120px;
  --header-h:    64px;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Kill default browser bolding — DM Mono max is 500 */
h1, h2, h3, h4, h5, h6,
strong, b, th {
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  margin: 0;
  line-height: 1.15;
}

p, ul, ol {
  margin: 0;
}

ul, ol {
  padding-left: 1.25rem;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a {
  color: var(--burgundy);
  border-bottom: 1px solid rgba(112, 23, 45, 0.30);
  text-decoration: none;
}

a:hover {
  border-bottom-color: var(--burgundy);
}

a:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Type scale utilities
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hero-accent { font-style: italic; }
.h1      { font-family: var(--font-ui);      font-size: 28px; font-weight: 500; line-height: 1.15; }
.h2      { font-family: var(--font-ui);      font-size: 20px; font-weight: 500; line-height: 1.2;  }
.h3      { font-family: var(--font-ui);      font-size: 15px; font-weight: 400; line-height: 1.3;  }
.body    { font-family: var(--font-ui);      font-size: 13px; font-weight: 400; line-height: 1.65; }
.caption {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-50);
}
.mono    { font-family: var(--font-ui); font-size: 11px; font-weight: 400; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.btn:hover  { opacity: 0.9; }
.btn:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }

/* Buttons never get an underline even when they're anchors */
a.btn { border-bottom: 0; }

.btn-primary   { background: var(--charcoal);  color: var(--chalk); }
.btn-highlight { background: var(--burgundy);  color: var(--chalk); }
.btn-calm      { background: var(--baby-blue); color: var(--ink);   }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink-20);
}

/* --------------------------------------------------------------------------
   Skip link (accessibility — first focusable element on every page)
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 8px 12px;
  background: var(--charcoal);
  color: var(--chalk);
  font-family: var(--font-ui);
  font-size: 12px;
  border-bottom: 0;
  border-radius: 0;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Shared header (site nav)
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--off-white);
  border-bottom: 0.5px solid var(--ink-20);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  height: var(--header-h);
}

.site-header__brand {
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  line-height: 0; /* strips the inline gap that image would inherit */
}

/* Brand logo — SVG image, charcoal fill hardcoded in the file.
   Height sets scale; width auto preserves aspect ratio. The source
   SVG has generous whitespace around the wordmark (viewBox 1440×810
   with glyphs occupying roughly the middle half), so the displayed
   height needs to be larger than a typical text wordmark to feel
   comparable in weight. */
.site-brand-logo {
  display: block;
  height: 40px;
  width: auto;
}

.site-brand-logo--footer {
  height: 28px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.site-nav__link {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-70);
  border-bottom: 0;
  padding: 4px 0;
}

.site-nav__link:hover        { color: var(--ink); }
.site-nav__link[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--burgundy);
}

/* Pill variant — used for the Goosebump link only. Points to the product,
   not another agency page, so it reads as a different kind of thing:
   thin ink-20 bordered pill, transparent fill, fills charcoal on hover
   and on the active page (unmistakably "selected" on /goosebump.html).
   Same DM Mono at 12px — only the surface changes. */
.site-nav__link--pill {
  padding: 4px 12px;
  border: 1px solid var(--ink-20);
  border-radius: var(--r-sm);
  background: transparent;
  transition:
    background-color 120ms ease,
    color            120ms ease,
    border-color     120ms ease;
}

.site-nav__link--pill:hover,
.site-nav__link--pill[aria-current="page"] {
  background: var(--charcoal);
  color: var(--chalk);
  border-color: var(--charcoal);
  /* override the plain-nav burgundy underline that .aria-current adds */
  border-bottom: 1px solid var(--charcoal);
}

.site-header__cta {
  padding: 8px 14px;
  font-size: 11px;
}

/* Menu toggle — hidden on desktop, revealed at ≤767px as a hamburger icon
   with a 44×44 minimum tap target. The button contains two inline SVGs
   (hamburger + close); which one shows depends on aria-expanded state. */
.site-header__menu-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.site-header__menu-toggle:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
}

.site-header__menu-toggle .menu-icon {
  display: block;
  color: var(--charcoal);
}

/* Icon swap driven by aria-expanded — no JS needed for the visual state */
.site-header__menu-toggle .menu-icon--close { display: none; }
.site-header__menu-toggle[aria-expanded="true"] .menu-icon--hamburger { display: none; }
.site-header__menu-toggle[aria-expanded="true"] .menu-icon--close { display: block; }

/* CTA has two labels — the short one shows only under ~360px viewports.
   aria-label on the anchor keeps the accessible name consistent
   regardless of which label is visible. */
.site-header__cta-full  { display: inline; }
.site-header__cta-short { display: none; }

/* --------------------------------------------------------------------------
   Shared footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: 96px;
  padding: 48px 0 40px;
  border-top: 0.5px solid var(--ink-20);
  background: var(--off-white);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.site-footer__col p { margin: 0; }
.site-footer__col p + p { margin-top: 8px; }

/* Footer brand link — logo image; strip the default anchor underline
   since the SVG carries the identity. */
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  border-bottom: 0;
  margin-bottom: 12px;
}
.site-footer__brand:hover { border-bottom: 0; }

.site-footer__manifesto {
  color: var(--ink);
}

.site-footer__legal {
  margin-top: 20px;
  font-size: 11px;
  color: var(--ink-50);
}

.site-footer a { color: var(--ink); border-bottom-color: var(--ink-20); }
.site-footer a:hover { color: var(--burgundy); border-bottom-color: var(--burgundy); }

/* --------------------------------------------------------------------------
   Sections & prose
   -------------------------------------------------------------------------- */

.section        { padding: 88px 0; }
.section--tight { padding: 56px 0; }

.prose          { max-width: 640px; }
.prose + .prose { margin-top: 16px; }

/* A caption almost always leads a block; give it default breathing room */
.caption { display: block; margin: 0 0 20px; }

/* --------------------------------------------------------------------------
   Home — hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--chalk);
  padding: 104px 0 120px;
}

.hero .caption { margin-bottom: 14px; }

.hero__rule {
  height: 2px;
  width: 80px;
  background: var(--burgundy);
  margin-bottom: 32px;
  animation: hero-rule-draw 600ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

@keyframes hero-rule-draw {
  from { width: 0; }
  to   { width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__rule { animation: none; }
}

.hero__display {
  margin: 0;
  max-width: 780px;
}

.hero__subhead {
  max-width: 620px;
  margin-top: 24px;
  color: var(--ink-70);
  font-size: 15px;
  line-height: 1.6;
}

.hero__cta {
  margin-top: 40px;
}

.hero__cta-note {
  margin-top: 12px;
  color: var(--ink-50);
  font-size: 11px;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Home — spectrum (five-level progression + attribution)
   -------------------------------------------------------------------------- */

.spectrum-progression {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.spectrum-level { position: relative; }

/* Arrow in the gap between adjacent cells, desktop only */
.spectrum-level:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 2px;
  right: -16px;
  color: var(--ink-20);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1;
}

.spectrum-level__name {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.25;
}

.spectrum-level__desc {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-70);
  line-height: 1.5;
  margin: 0;
}

.spectrum__framing {
  color: var(--ink);
  max-width: 640px;
  margin-bottom: 28px;
}

/* Attribution — visually subordinate to the section it credits */
.attribution {
  max-width: 640px;
  padding-top: 20px;
  border-top: 0.5px solid var(--ink-20);
}

.attribution__body {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-50);
  margin: 0;
}

.attribution__link {
  color: var(--burgundy);
  border-bottom: 0;
}
.attribution__link:hover        { border-bottom: 1px solid var(--burgundy); }
.attribution__link:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Home — four steps
   -------------------------------------------------------------------------- */

.steps__list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  max-width: 720px;
  border-top: 0.5px solid var(--ink-20);
}

.steps__list li {
  padding: 18px 0;
  border-bottom: 0.5px solid var(--ink-20);
  color: var(--ink-70);
}

.steps__name {
  color: var(--ink);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Home — platform teaser
   -------------------------------------------------------------------------- */

.platform .prose { color: var(--ink); }
.platform p + p { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Home — proof strip & closing
   -------------------------------------------------------------------------- */

.proof .prose { color: var(--ink-70); }

.closing .closing__h { margin-bottom: 20px; }
.closing p           { color: var(--ink-70); margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   Metric cards (Audit — What you walk away with)
   -------------------------------------------------------------------------- */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 720px;
}

.metric-card {
  background: var(--ink-04);
  border: 0.5px solid var(--ink-20);
  border-radius: var(--r-md);
  padding: 20px;
}

.metric-card--burgundy {
  background: var(--burgundy-10);
  border-color: var(--burgundy-20);
}

.metric-card--blue {
  background: var(--blue-10);
  border-color: var(--blue-20);
}

.metric-card__title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}

.metric-card__body {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0;
}

/* Transformation grid — 2×2 metric-grid variant with explicit position
   per item. Depth ascends top-to-bottom-left-to-right in visual reading
   order but the ARRAY stays in the natural depth progression (Enhancing
   → Expanding → Enriching → Altering), so future edits to
   howWeWork.theory.transformation.items keep semantic ordering intact
   while the visual grid follows the pattern below.

     Top-left: Expanding      Top-right: Altering
     Bottom-left: Enhancing   Bottom-right: Enriching
*/
.transformation-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.transformation-grid .metric-card:nth-child(1) { grid-column: 1; grid-row: 2; } /* Enhancing → bottom-left */
.transformation-grid .metric-card:nth-child(2) { grid-column: 1; grid-row: 1; } /* Expanding → top-left */
.transformation-grid .metric-card:nth-child(3) { grid-column: 2; grid-row: 2; } /* Enriching → bottom-right */
.transformation-grid .metric-card:nth-child(4) { grid-column: 2; grid-row: 1; } /* Altering → top-right */

/* --------------------------------------------------------------------------
   How We Work — the four-step path
   -------------------------------------------------------------------------- */

.path__steps { max-width: 720px; }

.path-step__title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.35;
}

.path-step p { color: var(--ink-70); }

.path-step + .path-step {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 0.5px solid var(--ink-20);
}

/* --------------------------------------------------------------------------
   How We Work — long-form editorial blocks (Sprint, Canvas, Framework, theory)
   -------------------------------------------------------------------------- */

.theory-block { max-width: 720px; }

.theory-block__title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.35;
}

.theory-block p        { color: var(--ink-70); }
.theory-block > * + *  { margin-top: 16px; }

.theory-block + .theory-block {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 0.5px solid var(--ink-20);
}

/* --------------------------------------------------------------------------
   How We Work — realm / transformation lists (nested inside theory blocks)
   -------------------------------------------------------------------------- */

.realms {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 640px;
}

.realms li {
  padding: 10px 0;
  color: var(--ink-70);
}

.realms li + li { border-top: 0.5px solid var(--ink-20); }

.realms__name { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   How We Work — 24 impressions, 6 clusters — interactive grid
   -------------------------------------------------------------------------- */

.impressions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 780px;
}

.impressions__cluster {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  text-align: left;
  background: var(--ink-04);
  border: 0.5px solid var(--ink-20);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  font-family: var(--font-ui);
}

.impressions__cluster:hover,
.impressions__cluster:focus-visible,
.impressions__cluster.is-open {
  background: var(--burgundy-10);
  border-color: var(--burgundy-20);
}

/* Keyboard users get a real focus ring on top of the reveal state */
.impressions__cluster:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
}

.impressions__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.impressions__items {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-70);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 220ms ease, opacity 180ms ease;
}

.impressions__cluster:hover .impressions__items,
.impressions__cluster:focus-visible .impressions__items,
.impressions__cluster.is-open .impressions__items {
  max-height: 80px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .impressions__items,
  .impressions__cluster { transition: none; }
}

@media (max-width: 767px) {
  .impressions { grid-template-columns: 1fr 1fr; }
}

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

/* --------------------------------------------------------------------------
   Goosebump — dark hero variant (this page only)
   Chalk text on charcoal, baby-blue rule instead of burgundy.
   -------------------------------------------------------------------------- */

.hero--dark {
  background: var(--charcoal);
  color: var(--chalk);
}

.hero--dark .caption       { color: rgba(248, 248, 250, 0.55); }
.hero--dark .hero__subhead { color: rgba(248, 248, 250, 0.70); }
.hero--dark .hero__rule    { background: var(--baby-blue); }

/* --------------------------------------------------------------------------
   Goosebump — the three apps
   -------------------------------------------------------------------------- */

.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
}

.apps-card {
  background: var(--white);
  border: 0.5px solid var(--ink-20);
  border-radius: var(--r-md);
  padding: 20px;
}

.apps-card p {
  color: var(--ink-70);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.apps-card__name {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 767px) {
  .apps-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Accent block — editorial callout (used for the firewall statement)
   -------------------------------------------------------------------------- */

.accent-block {
  border-left: 2.5px solid var(--burgundy);
  background: var(--chalk);
  padding: 20px 20px 20px 22px;
  border-radius: 0;
  max-width: 720px;
}

.accent-block p { color: var(--ink); margin: 0; }

/* --------------------------------------------------------------------------
   Closing actions — button + secondary link side by side
   -------------------------------------------------------------------------- */

.closing__actions {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Who It's For — B2C and B2B path blocks
   B2C sits on plain canvas. B2B is the funded path — tinted, larger,
   more inner padding, so the eye lands on it first even though it comes
   second in reading order.
   -------------------------------------------------------------------------- */

.path-block { max-width: 720px; }

.path-block__frame {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.3;
}

.path-block p { color: var(--ink-70); }

/* B2C and B2B both use plain .path-block inside their highlight sections
   (.section-highlight--blue for B2C, .section-highlight--dark for B2B).
   Same size, same spacing, same type scale — the surface colour is what
   distinguishes them, making the two paths visually co-equal. */

/* --------------------------------------------------------------------------
   Who It's For — self-qualification (two lists side by side)
   -------------------------------------------------------------------------- */

.qualify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 960px;
}

.qualify-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 0.5px solid var(--ink-20);
}

.qualify-list li {
  padding: 14px 0;
  border-bottom: 0.5px solid var(--ink-20);
  color: var(--ink-70);
}

@media (max-width: 767px) {
  .qualify-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   Badges (used on Proof's demonstration cards)
   -------------------------------------------------------------------------- */

.badge {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}

.badge-neutral { background: var(--ink-04); color: var(--ink-50); }

/* --------------------------------------------------------------------------
   Proof — illustrative worlds (demonstration cards)
   -------------------------------------------------------------------------- */

.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
  margin-top: 8px;
}

.demo-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
  border: 0.5px solid var(--ink-20);
  border-radius: var(--r-md);
  padding: 20px;
}

.demo-card__title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}

.demo-card p {
  margin: 0;
  color: var(--ink-70);
  font-size: 12px;
  line-height: 1.6;
}

/* Air between the framing paragraph and the demo grid */
.demo-grid { margin-top: 32px; }

@media (max-width: 767px) {
  .demo-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Book the Audit — form-intro microcopy (inside the hero)
   -------------------------------------------------------------------------- */

.form-intro {
  margin-top: 32px;
  max-width: 620px;
  color: var(--ink-50);
  font-size: 12px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Book the Audit — form structure
   -------------------------------------------------------------------------- */

.audit-form { max-width: 640px; }

.form-block {
  margin: 0;
  padding: 0;
  border: 0;
}

.form-block + .form-block {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 0.5px solid var(--ink-20);
}

.form-block > legend {
  padding: 0;
  margin: 0 0 24px;
  color: var(--ink-50);
}

.form-field { margin-bottom: 24px; }

.form-field label {
  display: block;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
}

.form-req {
  color: var(--burgundy);
  font-weight: 500;
  margin-left: 4px;
}

.form-optional {
  color: var(--ink-50);
  font-weight: 400;
  margin-left: 4px;
  font-size: 11px;
}

.form-hint {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-50);
  margin: 0 0 10px;
  line-height: 1.5;
}

.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--ink-20);
  border-radius: var(--r-md);
  padding: 12px 14px;
  line-height: 1.5;
  transition: border-color 120ms ease;
}

.form-field input:hover,
.form-field textarea:hover {
  border-color: rgba(20, 20, 24, 0.35);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--burgundy);
}

.form-field textarea {
  resize: vertical;
  min-height: 72px;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-50); }

.form-error {
  display: none;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--burgundy);
}

.form-field.has-error input,
.form-field.has-error textarea { border-color: var(--burgundy); }
.form-field.has-error .form-error { display: block; }

/* --------------------------------------------------------------------------
   Book the Audit — submit + privacy microcopy
   -------------------------------------------------------------------------- */

.form-submit { margin-top: 40px; }

.form-submit__btn {
  min-width: 180px;
  padding: 14px 24px;
  font-size: 13px;
}

.form-privacy {
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink-50);
  max-width: 520px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Book the Audit — confirmation + error states
   -------------------------------------------------------------------------- */

.form-state { max-width: 640px; }

.form-state--success .caption { margin-bottom: 14px; }
.form-state__title            { margin: 0 0 20px; }
.form-state--success p        { color: var(--ink-70); }

.form-state--error {
  border-left: 2.5px solid var(--burgundy);
  background: var(--chalk);
  padding: 20px 22px;
  border-radius: 0;
  margin-top: 24px;
}
.form-state--error p { margin: 0; color: var(--ink); }

/* --------------------------------------------------------------------------
   Experience Canvas — assembly animation (How We Work page)
   ---------------------------------------------------------------------------
   The page's signature delight. Labelled fragments arrange onto a canvas
   board on scroll: as the section enters the viewport, each fragment
   fades + slides into position with a small stagger. Position + opacity
   only — no gradients, shadows, or glow. Respects prefers-reduced-motion
   by rendering the assembled state immediately, no motion.

   Default state (no JS, IntersectionObserver unsupported, or reduced-
   motion): assembled and visible. The JS handler opts in by adding
   .canvas-board--pending which hides fragments, then flips to
   .canvas-board--assembled to trigger the CSS transitions.
   -------------------------------------------------------------------------- */

.canvas-board {
  margin-top: 40px;
  max-width: 720px;
  padding: 24px;
  background: var(--chalk);
  border: 0.5px solid var(--ink-20);
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

/* Grid placement — two primary tiles on top, three supporting tiles
   on the denser bottom row. Reads as Journey map + Impressions as the
   two big elements, then the three refinement pieces below. */
.canvas-fragment:nth-child(1) { grid-column: 1 / span 3; grid-row: 1; }
.canvas-fragment:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; }
.canvas-fragment:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
.canvas-fragment:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; }
.canvas-fragment:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; }

.canvas-fragment {
  padding: 18px 16px;
  background: var(--white);
  border: 0.5px solid var(--ink-20);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
}

.canvas-fragment__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

/* Pending — JS just added the class. Fragments off-position and invisible,
   ready to transition when .canvas-board--assembled follows. */
.canvas-board--pending .canvas-fragment {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 600ms ease,
    transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.canvas-board--assembled .canvas-fragment {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger — earlier fragments settle first. Total: 520 + 600 = ~1120ms. */
.canvas-board--assembled .canvas-fragment:nth-child(1) { transition-delay: 0ms;   }
.canvas-board--assembled .canvas-fragment:nth-child(2) { transition-delay: 130ms; }
.canvas-board--assembled .canvas-fragment:nth-child(3) { transition-delay: 260ms; }
.canvas-board--assembled .canvas-fragment:nth-child(4) { transition-delay: 390ms; }
.canvas-board--assembled .canvas-fragment:nth-child(5) { transition-delay: 520ms; }

/* Reduced motion — show assembled state immediately, no transition */
@media (prefers-reduced-motion: reduce) {
  .canvas-board--pending .canvas-fragment,
  .canvas-board--assembled .canvas-fragment {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Reusable highlight sections
   ---------------------------------------------------------------------------
   One deliberately colour-filled section per page — the "surprise" moment
   that breaks the light rhythm as the visitor scrolls. Exactly ONE per
   page; the rarity is what makes it work (see CLAUDE.md § APPLICATION
   CONTEXT).

   Usage: layer the colour class on top of .section so the block still
   has the standard vertical padding. The background is full-bleed; the
   inner .container keeps the reading width normal.

     <section class="section section-highlight section-highlight--dark">
       <div class="container"> … </div>
     </section>

   Both variants keep DM Mono, left alignment, and caption/body scale.
   Only the surface colour changes.
   -------------------------------------------------------------------------- */

/* Dark variant — charcoal surface, chalk text, baby-blue accents */

.section-highlight--dark {
  background: var(--charcoal);
  color: rgba(248, 248, 250, 0.85);
}

.section-highlight--dark .caption {
  color: rgba(248, 248, 250, 0.55);
}

.section-highlight--dark h1,
.section-highlight--dark h2,
.section-highlight--dark h3 {
  color: var(--chalk);
}

.section-highlight--dark p,
.section-highlight--dark .prose {
  color: rgba(248, 248, 250, 0.85);
}

.section-highlight--dark a {
  color: var(--baby-blue);
  border-bottom-color: rgba(195, 226, 255, 0.30);
}
.section-highlight--dark a:hover {
  border-bottom-color: var(--baby-blue);
}

/* Any accent rule inside a dark highlight is baby-blue, never burgundy */
.section-highlight--dark .hero__rule {
  background: var(--baby-blue);
}

/* Blue variant — baby-blue surface, charcoal text, burgundy accents */

.section-highlight--blue {
  background: var(--baby-blue);
  color: var(--charcoal);
}

.section-highlight--blue .caption {
  color: rgba(20, 20, 24, 0.55);
}

.section-highlight--blue p,
.section-highlight--blue .prose {
  color: var(--charcoal);
}

/* Burgundy links + accents (default site behaviour) read natively on
   baby-blue; no override needed. */

/* Metric cards inside any highlight section (both variants): fill with
   off-white so cards read as clean canvas islands on the coloured
   surface, and preserve the card's own text hierarchy (title = ink,
   body = ink-70). Without these overrides the highlight-container's
   colour rules would darken the body copy on blue and chalk-out both
   title and body on dark. */
.section-highlight--blue .metric-card,
.section-highlight--dark .metric-card {
  background: var(--off-white);
}
.section-highlight--blue .metric-card__title,
.section-highlight--dark .metric-card__title {
  color: var(--ink);
}
.section-highlight--blue .metric-card__body,
.section-highlight--dark .metric-card__body {
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   Responsive — the site must render clean at 375px too
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root { --gutter: 18px; }

  /* Header: three-column grid so the logo is truly centered regardless
     of the side widths — menu-toggle left, brand center, CTA right. */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-h);
  }

  .site-header__menu-toggle { display: inline-flex; grid-column: 1; justify-self: start; }
  .site-header__brand       { grid-column: 2; justify-self: center; }
  .site-header__cta         { grid-column: 3; justify-self: end; }

  /* Shrink the CTA on narrow widths so it doesn't crowd the logo */
  .site-header__cta {
    padding: 6px 10px;
    font-size: 10px;
  }

  /* CTA label swap — the shorter label appears only when the viewport
     genuinely can't fit "Book the Audit" cleanly. */
  @media (max-width: 360px) {
    .site-header__cta-full  { display: none; }
    .site-header__cta-short { display: inline; }
  }

  /* Nav becomes a full-viewport overlay panel below the sticky header.
     Off-white surface, 0.5px ink-20 top border, no shadow. Content is
     left-aligned; TO CENTER-ALIGN THE ITEMS INSTEAD, change the single
     `justify-content: flex-start` on .site-nav__link below to `center`. */
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    background: var(--off-white);
    border-top: 0.5px solid var(--ink-20);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 24px var(--gutter);
    overflow-y: auto;
    z-index: 10;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Reduced motion — no slide, just show/hide */
  @media (prefers-reduced-motion: reduce) {
    .site-nav {
      transition: none;
      transform: none;
    }
    .site-nav.is-open { transform: none; }
  }

  .site-nav__link {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* ← change to `center` to center-align menu items */
    width: 100%;
    min-height: 48px;
    padding: 0;
    font-size: 14px;
    color: var(--ink);
    border-bottom: 0;
  }

  .site-nav__link[aria-current="page"] {
    color: var(--burgundy);
    border-bottom: 0;
  }

  /* Pill inside the overlay panel — auto-width so it doesn't stretch
     across the row like the plain text links. */
  .site-nav__link--pill {
    width: auto;
    align-self: flex-start;
    padding: 8px 14px;
    min-height: 0;
    color: var(--ink-70);
  }
  .site-nav__link--pill:hover,
  .site-nav__link--pill[aria-current="page"] {
    background: var(--charcoal);
    color: var(--chalk);
    border-color: var(--charcoal);
  }

  /* Body scroll lock while the menu overlay is open */
  body.menu-open { overflow: hidden; }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  /* .display: clamp() handles fluid sizing (min 40px), so no explicit mobile override */

  .section        { padding: 56px 0; }
  .section--tight { padding: 40px 0; }

  .hero            { padding: 72px 0 84px; }
  .hero__subhead   { font-size: 14px; }
  .hero__display   { max-width: none; }

  /* Spectrum: stack the 5 levels vertically and drop the arrow decoration
     (vertical order is the progression indicator on its own) */
  .spectrum-progression {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .spectrum-level:not(:last-child)::after { display: none; }

  /* Canvas board: stack fragments in source order, drop grid placement */
  .canvas-board {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 10px;
  }
  .canvas-fragment:nth-child(1),
  .canvas-fragment:nth-child(2),
  .canvas-fragment:nth-child(3),
  .canvas-fragment:nth-child(4),
  .canvas-fragment:nth-child(5) {
    grid-column: 1;
    grid-row: auto;
  }

  /* Transformation grid: stack in source order (Enhancing → Expanding
     → Enriching → Altering), drop explicit position placements */
  .transformation-grid {
    grid-template-columns: 1fr;
  }
  .transformation-grid .metric-card:nth-child(1),
  .transformation-grid .metric-card:nth-child(2),
  .transformation-grid .metric-card:nth-child(3),
  .transformation-grid .metric-card:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
  }
}