/* =============================================================================
   GUERRIER CAPACITY NAVIGATOR — interface

   §22: deep navy and black, gold, white, institutional typography, very
   restrained animation. No cartoon robot, no glowing brain, no "ask AI
   anything". This should feel closer to entering an institutional advisory
   process than opening a chat product, so the conversation is set in a document
   column rather than a message stream, and nothing bounces, pulses or animates
   except a single quiet progress rule.

   The palette is the website's, so the Navigator reads as part of Guerrier
   rather than a bolted-on tool.
   ========================================================================== */

:root {
  /* -------------------------------------------------------------- palette
     THE APPROVED CAPACITY PARTNERS GROUP PALETTE.

     Five values and no more. A product that grows a sixth colour for a status
     chip and a seventh for a warning stops reading as one institution and
     starts reading as a dashboard; the restraint is the direction, not an
     omission. The derived tokens below are tints of these five for rules,
     muted text and hover states — not new brand colours. */
  --navy: #0A1E3A;
  --blue: #1E3A5F;
  --gold: #C9A15A;
  --gold-deep: #8A6B32;
  --gold-pale: #E6D5B2;
  --paper: #F7F7F6;
  --paper-2: #E7E5E2;
  --soft: #FFFFFF;
  --ink: #17202B;
  --muted: #5A6673;
  --on-navy-muted: #8FA0B5;
  --line: #DCD9D4;
  /* Refined serif for the institution, clean sans for the interface. Both are
     already loaded from the same font host these pages have always used, so
     the approved typography costs no new request origin. */
  --serif: "Playfair Display", "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max: 720px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ header */
.masthead {
  background: var(--navy);
  color: #E7E3D9;
  padding: 18px 0;
  border-bottom: 1px solid #1B2A3A;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: inherit; }
.brand .name {
  font-family: var(--serif);
  font-size: 1.28rem;
  letter-spacing: .01em;
  color: #F2EEE4;
}
.brand .product {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.masthead a.exit {
  color: var(--on-navy-muted);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
}
.masthead a.exit:hover { color: #fff; }

/* ---------------------------------------------------------------- progress */
.progress { background: var(--navy); padding: 0 0 20px; }
.progress .wrap { display: flex; flex-direction: column; gap: 10px; }
.progress .stage {
  font-size: .68rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.bar { height: 2px; background: #1E3247; position: relative; overflow: hidden; }
.bar span {
  display: block;
  height: 100%;
  background: var(--gold);
  width: 0;
  transition: width .5s ease;   /* the only animation in the interface */
}

/* -------------------------------------------------------------------- main */
main { padding: 52px 0 96px; }

.turn { margin-bottom: 40px; }

.said {
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 18px;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: .93rem;
}
.said .lbl {
  display: block;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 4px;
}

.ask {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.28;
  color: var(--navy);
  margin: 0 0 26px;
  font-weight: 500;
}
.ask.small { font-size: 1.24rem; }

.prelude { color: var(--muted); margin: 0 0 18px; }

/* ------------------------------------------------------------------ inputs */
.options { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
.opt {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  padding: 15px 18px;
  font: inherit;
  font-size: .96rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.opt:hover { border-color: var(--gold); background: var(--soft); }
.opt:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.opt[aria-pressed="true"] { border-color: var(--navy); background: var(--paper-2); }

textarea.answer {
  width: 100%;
  min-height: 132px;
  padding: 16px 18px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  resize: vertical;
}
textarea.answer:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(7,17,28,.07); }

.row { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  padding: 14px 30px;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
}
.btn:hover { background: var(--blue); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-pale); border-color: var(--gold-pale); }
.btn-quiet {
  background: none;
  border-color: transparent;
  color: var(--muted);
  padding-left: 6px;
  padding-right: 6px;
  letter-spacing: .1em;
}
.btn-quiet:hover { background: none; color: var(--navy); text-decoration: underline; }

.hint { font-size: .84rem; color: var(--muted); margin-top: 10px; }

/* ------------------------------------------------------------------ status */
.thinking {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.notice {
  background: var(--soft);
  border-left: 3px solid var(--gold);
  padding: 16px 20px;
  margin: 0 0 26px;
}
.notice .lbl {
  display: block;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 6px;
}
.notice p { margin: 0 0 8px; }
.notice p:last-child { margin: 0; }

/* ----------------------------------------------------------------- snapshot */
.doc { background: #fff; border: 1px solid var(--line); padding: 44px 44px 40px; margin-bottom: 34px; }
.doc-head { border-bottom: 2px solid var(--navy); padding-bottom: 20px; margin-bottom: 30px; }
.doc-head .eyebrow {
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin: 0 0 8px;
}
.doc-head h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 0;
  font-weight: 500;
}
.doc-head .meta { font-size: .78rem; color: var(--muted); margin: 12px 0 0; }

.sec { margin-bottom: 32px; }
.sec:last-child { margin-bottom: 0; }
.sec h2 {
  font-family: var(--serif);
  font-size: 1.36rem;
  color: var(--navy);
  margin: 0 0 12px;
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.sec p { margin: 0 0 12px; }
.sec ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
.sec li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  line-height: 1.55;
}
.sec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 1px;
  background: var(--gold);
}

/* The two sections that carry the most weight get a quiet visual anchor. */
.sec.weighted { background: var(--soft); padding: 24px 26px; border-left: 3px solid var(--gold); }
.sec.weighted h2 { border-bottom-color: var(--paper-2); }

/* ------------------------------------------------------------------- offer */
.offer { background: var(--navy); color: #D3DAE2; padding: 40px 44px; }
.offer .eyebrow {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin: 0 0 10px;
}
.offer h2 {
  font-family: var(--serif); font-size: 1.9rem; line-height: 1.2;
  color: #F2EEE4; margin: 0 0 6px; font-weight: 500;
}
.offer .price { font-family: var(--serif); font-size: 2.4rem; color: var(--gold); margin: 0 0 18px; }
.offer p { color: #C3CCD7; }
.offer ul { list-style: none; padding: 0; margin: 18px 0 26px; columns: 2; column-gap: 32px; }
.offer li {
  position: relative; padding-left: 18px; margin-bottom: 7px;
  font-size: .88rem; color: #C3CCD7; break-inside: avoid;
}
.offer li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 7px; height: 1px; background: var(--gold);
}
.offer .fineprint { font-size: .78rem; color: var(--on-navy-muted); margin-top: 18px; }
.offer a { color: var(--gold-pale); }

/* ------------------------------------------------------------------ halted */
/* The safety response. Plain, unhurried, and carrying no commercial element
   whatever — no price, no button, no next step into the funnel. */
.halted { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 40px 44px; }
.halted h1 {
  font-family: var(--serif); font-size: 1.7rem; color: var(--navy);
  margin: 0 0 20px; font-weight: 500;
}
.halted p { margin: 0 0 16px; font-size: 1.03rem; }
.resources { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 22px; }
.resources h2 {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700; margin: 0 0 14px;
}
.resource { margin-bottom: 14px; }
.resource strong { display: block; color: var(--navy); font-size: 1.02rem; }
.resource .contact { font-family: var(--serif); font-size: 1.24rem; color: var(--navy); }
.resource .note { font-size: .84rem; color: var(--muted); }

/* ------------------------------------------------------------------ footer */
.foot {
  border-top: 1px solid var(--line);
  padding: 26px 0 60px;
  font-size: .78rem;
  color: var(--muted);
}
.foot p { margin: 0 0 8px; max-width: 62ch; }
.foot a { color: var(--gold-deep); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 640px) {
  .doc, .offer, .halted { padding: 28px 22px; }
  .offer ul { columns: 1; }
  .wrap { padding: 0 18px; }
  main { padding: 36px 0 64px; }
}

/* Respect a stated preference for less motion. */
@media (prefers-reduced-motion: reduce) {
  .bar span { transition: none; }
}

/* ------------------------------------------------- the commercial step (§4)
   Six structured questions, asked after the Snapshot. The visual register is
   deliberately quieter than the Navigator's: this is a form about scope, not a
   conversation, and dressing it up as a conversation would be dishonest about
   what it is.                                                               */

.grid-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 22px 0 8px;
}
.grid-fields .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .86rem;
  color: var(--muted);
}
.grid-fields .field input {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 12px;
  width: 100%;
}
.grid-fields .field input:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 1px;
}

/* A selected option in a multi-select. Contrast checked against --paper:
   #715D33 on #F3F0E8 is 5.9:1, which clears AA for the 1rem label. */
.choice.is-on {
  border-color: var(--gold-deep);
  background: var(--paper-2);
  box-shadow: inset 3px 0 0 var(--gold-deep);
}
.choice.is-on::after { content: " ✓"; color: var(--gold-deep); }

/* The line under a tier heading: duration and scope, on the dark offer panel.
   --on-navy-muted is the 5.08:1 token added during the website contrast pass;
   do not substitute --muted here, which fails on navy. */
.offer .sub {
  color: var(--on-navy-muted);
  font-size: .9rem;
  margin: -6px 0 18px;
}
.offer h3 {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin: 22px 0 10px;
}

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

/* ------------------------------------------------------------------- brand
   THE APPROVED EMBLEM, USED AS PROVIDED.

   THE EMBLEM IS NAVY ON LIGHT. There is no reversed version in the approved
   brand material, and lightening the ink to make one would be redesigning the
   mark rather than applying it. So on the navy masthead it sits on a light
   disc — the same relationship the approved business card uses. Nothing here
   draws, traces or approximates the emblem: it is an image file, and this is a
   container for it.

   `object-fit: contain` and a fixed box mean the mark keeps its proportions
   whatever the file's pixel dimensions are, so a later production-quality
   export drops in without touching this. */
.brand-emblem {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper);
  padding: 3px;
  object-fit: contain;
  box-shadow: 0 0 0 1px rgba(201, 161, 90, .55);
}

/* The wordmark, set the way the brand board sets it: the name in the serif,
   letterspaced, with the group line beneath in small caps. Live text rather
   than a picture of text, so it stays crisp at any size and remains
   selectable, searchable and readable to a screen reader. */
.brand-mark { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand-mark .formal {
  font-family: var(--serif);
  font-size: 1.16rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--paper);
}
.brand-mark .group {
  font-family: var(--serif);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

/* THE PROMISE, USED SPARINGLY.
   One brand moment and one point of reassurance. Restraint is what keeps it
   meaning something; under every button it would mean nothing. */
.tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  letter-spacing: .01em;
}

/* What the company does, for somebody who has never heard of it. */
.descriptor {
  font-size: .64rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--on-navy-muted, var(--muted));
  font-weight: 600;
}

/* The brand moment in the footer: the formal identity, what the company does,
   and the promise — in that order, because a first-time reader needs to know
   who and what before a promise means anything. */
.brand-foot { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-bottom: 18px; }
.brand-foot .formal-name {
  font-family: var(--serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}