/* ==========================================================================
   Nriched Consulting
   Design system: Antimetal (base) + Ventriloc (structure)

   Rules inherited from the Antimetal reference — do not break these:
   - Serif display at weight 400 ONLY. Never bold.
   - Never pure white, never pure black. The warm cast is the signature.
   - Dashed 1px hairlines for content dividers; solid only for buttons/nav.
   - Signal gold is the accent, with amber as its secondary. Used across the
     page rather than rationed to two appearances (changed deliberately).
   - No drop shadows. Depth comes from warm-gray layering only.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Accent — signal gold, with amber as the supporting tone */
  --accent:      #f2b43c;  /* signal gold — primary accent */
  --accent-deep: #b8763a;  /* burnt amber — secondary, for depth in artwork */
  --accent-text: #8a5a24;  /* bronze — gold AS TEXT. Bright gold on parchment is
                              1.28:1 and unreadable; this is 4.07:1. Never set
                              type in --accent. */

  /* Neutrals (warm) */
  --bistre:      #1a1614;  /* primary text, dark buttons */
  --ash:         #2a2724;  /* hover/pressed on dark */
  --slate:       #53504c;  /* tertiary text, sub-labels */
  --graphite:    #66635f;  /* secondary body, nav labels */
  --flint:       #a8a7a1;  /* dividers, disabled — never body text */
  --parchment:   #d7d7d0;  /* page canvas */
  --quill:       #e3e3de;  /* hairlines, ghost borders, nav capsule */
  --cream:       #f7f6f3;  /* primary surface */
  --bone:        #fdfcfa;  /* elevated surface */

  --hairline:    1px dashed rgba(26, 22, 20, 0.10);

  /* Type */
  --serif: "Newsreader", "Noto Serif", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Spacing — base unit 4px */
  --maxw:        1200px;
  --section-gap: 120px;
  --card-pad:    40px;
  --gap:         16px;
  --gutter:      32px;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; display: block; }
html { scroll-behavior: smooth; }

body {
  background: var(--parchment);
  color: var(--bistre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;            /* non-negotiable — never bold the serif */
  margin: 0;
  line-height: 1.1;
}

.display    { font-size: clamp(34px, 5.4vw, 54px); letter-spacing: -0.037em; line-height: 1.05; }
.heading-lg { font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.021em; }
.heading    { font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -0.014em; }
.heading-sm { font-size: 24px; line-height: 1.2; letter-spacing: 0; }
.subheading { font-size: 20px; line-height: 1.5; letter-spacing: 0; }

p { margin: 0; }
.lede  { font-size: 20px; line-height: 1.5; color: var(--slate); }
.body  { font-size: 16px; color: var(--graphite); }
.small { font-size: 14px; color: var(--graphite); }

/* Mono markers — the only text that announces itself through tracking */
.marker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* --- Layout --------------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--section-gap); }
.band--canvas { background: var(--parchment); }
.band--cream  { background: var(--cream); }

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 56px;
}
.section-head__title { max-width: 22ch; }
.section-head__note  { max-width: 46ch; }

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 64px;
  }
  .section-head__note { justify-self: end; }
}

/* --- Navigation ----------------------------------------------------------- */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 20px var(--gutter);
  background: linear-gradient(to bottom, var(--parchment) 55%, rgba(215, 215, 208, 0));
}
.nav {
  max-width: var(--maxw);
  margin-inline: auto;
  background: var(--quill);
  border: 1px solid rgba(26, 22, 20, 0.08);
  border-radius: 82px;              /* nav capsule */
  padding: 12px 12px 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
/* Wordmark — Inter, the body face, but at 700 against body copy at 400.
   Weight and size are what separate it, since it shares a typeface with the
   running text. The descriptor sits in the serif so the lockup still has two
   voices rather than one face at two sizes.

   Authored as "Nriched" with the real spelling intact. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  /* Inter is drawn to tighten at display sizes; without this it reads loose. */
  letter-spacing: -0.035em;
  color: var(--bistre);
}
.wordmark__desc {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0;
  color: var(--slate);
}

@media (max-width: 559px) {
  .wordmark__desc { display: none; }
  .wordmark__name { font-size: 23px; }
}

.nav-links {
  display: none;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--graphite);
  text-decoration: none;
  transition: color .18s ease;
}
.nav-links a:hover { color: var(--bistre); }

@media (min-width: 860px) { .nav-links { display: flex; } }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 13px 24px;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
/* Filled dark pill — never more than one per viewport */
.btn--solid {
  background: var(--bistre);
  color: var(--cream);
  border: 1px solid var(--bistre);
}
.btn--solid:hover { background: var(--ash); border-color: var(--ash); }

/* Ghost — always paired with the solid pill */
.btn--ghost {
  background: transparent;
  color: var(--bistre);
  border: 1px solid rgba(26, 22, 20, 0.25);
}
.btn--ghost:hover { border-color: var(--bistre); background: rgba(26, 22, 20, 0.04); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-top: 72px; padding-bottom: 96px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
/* the single accent dot */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--accent);
  flex: none;
}

.hero__title { max-width: 17ch; }
.hero__lede  { max-width: 52ch; margin-top: 32px; }
.hero__cta   { margin-top: 44px; }

/* Ventriloc-borrowed data cards */
.datarow {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 88px;
  border-top: var(--hairline);
}
.datacard {
  padding: 32px 0;
  border-bottom: var(--hairline);
}
.datacard__value {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: block;
  margin: 14px 0 10px;
}
.datacard__note { max-width: 34ch; }

@media (min-width: 800px) {
  .datarow { grid-template-columns: repeat(3, 1fr); border-bottom: var(--hairline); }
  .datacard { padding: 36px 40px 40px 0; border-bottom: 0; }
  .datacard + .datacard { border-left: var(--hairline); padding-left: 40px; }
}

/* --- Statement (drop cap) -------------------------------------------------- */
.statement { max-width: 68ch; }
.statement p + p { margin-top: 24px; }
.statement__first {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--bistre);
}
.statement__first::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 78px;
  line-height: 0.78;
  padding: 6px 14px 0 0;
  color: var(--bistre);
}

/* Statement illustration — see CLAUDE.md for the generation spec.
   Art is authored at 4:3 and rendered at 440px wide, so the source must read
   clearly at 440x330. On desktop it sits LEFT of the copy: the hero already
   carries art on the right, and repeating that immediately below reads as a
   template rather than a rhythm. DOM order keeps the copy first so the drop
   cap still opens the section on mobile. */
.statement__art {
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-top: 40px;
}

@media (min-width: 900px) {
  .statement-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: center;
  }
  .statement { max-width: none; }
  .statement__art { order: -1; margin-top: 0; justify-self: start; }
}

/* --- Focus grid ------------------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--hairline);
}
.card {
  background: transparent;
  border-bottom: var(--hairline);
  padding: 40px 0;
}
.card__index { display: block; margin-bottom: 20px; }
.card__title { margin-bottom: 14px; }
.card__outcome {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--slate);
  max-width: 34ch;
}
.card__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.card__list li {
  font-size: 14px;
  color: var(--graphite);
  padding: 9px 0 9px 18px;
  border-top: var(--hairline);
  position: relative;
}
/* Gold bullet separates the supporting lines from the outcome line above them.
   Small and low-saturation at this size — a larger dot starts competing with
   the heading treatment rather than supporting it. */
.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--accent);
}

@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 40px var(--card-pad) 48px 0; }
  .grid .card:nth-child(2n) { padding-left: var(--card-pad); border-left: var(--hairline); }
}
@media (min-width: 1060px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid .card:nth-child(2n) { padding-left: 0; border-left: 0; }
  .grid .card { padding-right: var(--card-pad); }
  .grid .card:not(:nth-child(3n+1)) { padding-left: var(--card-pad); border-left: var(--hairline); }
}

/* --- Outcomes -------------------------------------------------------------- */
.outcomes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 760px) { .outcomes { grid-template-columns: repeat(2, 1fr); } }

.outcome {
  background: var(--bone);
  border: 1px solid rgba(26, 22, 20, 0.07);
  border-radius: 4px;                 /* cards stay near-rectangular */
  padding: var(--card-pad);
}
.outcome__title { margin-bottom: 12px; }

/* Pull quote — carries the one highlight wash */
.quote {
  margin: 96px auto 0;
  max-width: 26ch;
  text-align: center;
}
.quote__text {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.mark {
  background: var(--accent);
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Lower-band variant. The solid wash earns its keep on a single pull quote,
   but repeated across a six-card grid it reads as highlighter marks rather
   than design. This covers only the bottom of the text, so the gold still
   registers at a glance while the serif stays legible on the cream. */
.mark--low {
  background: linear-gradient(to top,
              var(--accent) 0 38%,
              transparent 38%);
  padding: 0 .1em .02em;
}
.quote__attrib { margin-top: 28px; }

/* --- Track record ----------------------------------------------------------
   Portrait left, biography right. The photo is the only photographic element
   on the page, so it stays rectangular at the card radius and takes a hairline
   border rather than a shadow — a drop shadow here would be the one place the
   no-elevation rule got broken, and it would show.
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
.about__photo {
  width: 100%;
  max-width: 320px;
  /* height:auto is load-bearing. The <img> carries width/height attributes so
     the layout doesn't shift while it loads, but those are presentational
     hints: without this, width:100% shrinks the box to 320px while height
     stays pinned at 768 and the portrait stretches vertically. */
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(26, 22, 20, 0.12);
  background: var(--bone);
}
.about__body p + p { margin-top: 22px; }
.about__body { max-width: 62ch; }

@media (min-width: 860px) {
  .about { grid-template-columns: 320px 1fr; gap: 64px; }
}

/* Metrics — same hairline logic as the hero data row, four across. */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 72px;
  border-top: var(--hairline);
}
.metric {
  padding: 28px 20px 28px 0;
  border-bottom: var(--hairline);
}
.metric:nth-child(2n) { padding-left: 20px; border-left: var(--hairline); }
.metric__value {
  display: block;
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--accent-text);   /* bronze — gold as type is unreadable on cream */
  margin-bottom: 12px;
}
.metric__note { max-width: 30ch; }

@media (min-width: 800px) {
  .metrics { grid-template-columns: repeat(4, 1fr); border-bottom: var(--hairline); }
  .metric { padding: 32px 28px 36px 0; border-bottom: 0; }
  .metric:nth-child(2n) { padding-left: 0; border-left: 0; }
  .metric + .metric { border-left: var(--hairline); padding-left: 28px; }
}

/* The attribution line. Centred under the metrics so it reads as a caption to
   the whole row rather than a note attached to the first figure.

   It is NOT fine print. It is the reason the numbers above it are credible, so
   it stays at graphite (#66635f, 5.5:1 on cream). Do not lighten it to flint —
   that lands at 2.2:1 and fails contrast outright. If it needs to feel lighter,
   cut words rather than contrast; that is what was done here. */
.metrics__note {
  margin: 30px auto 0;
  max-width: 62ch;
  text-align: center;
}

/* --- Process --------------------------------------------------------------- */
.steps { border-top: var(--hairline); }
.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 40px 0;
  border-bottom: var(--hairline);
}
/* Step titles carry this section, so they sit a full scale step above the card
   headings (36px vs 24px). At that size the mono step marker floats above the
   serif's cap height, so it gets a small optical nudge down to line up. */
.step__title { max-width: 14ch; }

@media (min-width: 860px) {
  .step > .marker { margin-top: 7px; }
}

.step__body { max-width: 58ch; }
.step__meta { margin-top: 14px; }

@media (min-width: 860px) {
  .step {
    grid-template-columns: 90px 1fr 1.15fr;
    gap: 48px;
    align-items: start;
    padding: 48px 0;
  }
}

/* --- Engagements ----------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  background: var(--cream);
  border: 1px solid rgba(26, 22, 20, 0.07);
  border-radius: 4px;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
}
.band--cream .plan { background: var(--bone); }
.plan__title { margin: 18px 0 14px; }
.plan__desc { flex: 1; }
.plan__list { list-style: none; margin: 26px 0 0; padding: 0; }
.plan__list li {
  font-size: 14px;
  color: var(--graphite);
  padding: 9px 0;
  border-top: var(--hairline);
}
.plan__fee { margin-top: 26px; padding-top: 20px; border-top: var(--hairline); }

/* --- FAQ ------------------------------------------------------------------- */
.faq { border-top: var(--hairline); max-width: 900px; }
.faq details { border-bottom: var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 28px 44px 28px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 22px;
  color: var(--graphite);
}
.faq details[open] summary::after { content: "\2013"; }
.faq__answer { padding: 0 0 30px; max-width: 66ch; }

/* --- Contact --------------------------------------------------------------- */
.contact { text-align: center; }
.contact__title { max-width: 20ch; margin-inline: auto; }
.contact__lede  { max-width: 50ch; margin: 28px auto 0; }
.contact__cta   { margin-top: 44px; justify-content: center; }
/* Replaced the display email address. No inbox is published anywhere on this
   site by design — booking goes through the scheduling link, which keeps the
   address private and removes a round trip on the primary action. This note
   just tells the reader what the button does before they click it. */
.contact__note { margin-top: 26px; }

/* --- Footer ---------------------------------------------------------------- */
.footer {
  background: var(--parchment);
  padding: 48px 0;
  border-top: var(--hairline);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}

/* --- Motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* --- Focus visibility ------------------------------------------------------ */
a:focus-visible, summary:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--bistre);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Process illustrations -------------------------------------------------
   Schematic marks, one per step. They carry the same ink as the type and sit
   in a fourth column at the outer edge, like a margin figure in print.
   Rules held: no shadow, no fill, no accent — the accent budget is untouched.
   -------------------------------------------------------------------------- */
.step__art {
  width: 100%;
  max-width: 320px;
  height: auto;
  opacity: 1;             /* full strength — these carry colour now */
}

@media (min-width: 860px) {
  .step { grid-template-columns: 90px 1fr 1.15fr 240px; }
  .step__art { justify-self: end; }
}

@media (max-width: 859px) {
  .step__art { max-width: 220px; margin-top: 8px; }
}

/* --- Hero illustration -----------------------------------------------------
   Sits in the hero's right column. Motion (draw-in, then a 120s drift) lives
   inside assets/hero.svg so the page can load it as a plain <img>; the SVG
   carries its own prefers-reduced-motion guard.
   -------------------------------------------------------------------------- */
.hero__art { width: 100%; max-width: 460px; height: auto; justify-self: end; }

@media (min-width: 900px) {
  .hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
  .hero__copy { min-width: 0; }
  .hero .datarow { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .hero__art { max-width: 340px; margin: 40px auto 0; justify-self: center; }
}

/* --- Data card icons -------------------------------------------------------
   Solid single-colour glyphs, one per claim. Sized optically rather than by
   frame: each source viewBox is fitted to its own drawn bounds first.
   -------------------------------------------------------------------------- */
.datacard__icon {
  width: 30px;
  height: 30px;
  display: block;
  margin-bottom: 18px;
  opacity: .88;
}

/* --- The accent thread -----------------------------------------------------
   Gold appears in two forms, and they are not interchangeable:

     --accent      #f2b43c   SHAPES ONLY. Fills, marks, rules, icon details.
                             Contrast rules do not apply to non-text.
     --accent-text #8a5a24   TEXT ONLY. Bright gold on parchment is 1.28:1 —
                             invisible. This is 4.07:1, which clears the 3:1
                             floor for large text.

   The thread has a job: it marks the turn in the argument. One gold moment per
   section, on the phrase or number that carries the point. Adding a second in
   the same section spends the emphasis rather than doubling it.
   -------------------------------------------------------------------------- */

/* The recurring gesture: the clause that carries the point, in italic
   bronze. Used once per section heading — never twice inside one. */
.phrase {
  font-style: italic;
  color: var(--accent-text);
}

/* section markers get a gold tick rather than gold type: at 12px, bronze
   would sit under the 4.5:1 body threshold */
/* data cards already carry a glyph icon; a tick there would be a third
   signal for one label */
.section-head .marker::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  vertical-align: 1px;
  background: var(--accent);
}

/* the primary CTA warms to gold on hover — ink on gold is high contrast */
.btn--solid:hover {
  background: var(--accent);
  color: var(--bistre);
  border-color: var(--accent);
}

/* --- Featured engagement ---------------------------------------------------
   Fractional Partner is the tier to steer toward, so gold does a job here:
   it guides the choice rather than decorating the card. A rule and a label,
   no shadow — depth still comes from surface layering.

   The label says "Recommended" (the firm's own stance) and NOT "most popular"
   or similar, which would be a fabricated claim — there are no clients yet.
   -------------------------------------------------------------------------- */
.plan--featured {
  position: relative;
  border-color: rgba(26, 22, 20, 0.14);
}
.plan--featured::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
}
.plan__flag {
  color: var(--accent-text);   /* 5.5:1 on the card surface — passes body text */
  float: right;
}