/* ==========================================================================
   Forma Consulting - engagement.html page styles
   Loaded AFTER styles.css; inherits every token and device from it.
   ========================================================================== */

/* ---------- Hero: copy left, build ledger right ---------- */
.eng-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.eng-stage { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---------- The build ledger (hero signature) ---------- */
.bl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.bl-slab { margin-bottom: 0; }
.bl-count {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-dim); display: flex; align-items: baseline; gap: 10px; white-space: nowrap;
}
.bl-day {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 3.2vw, 2.8rem); line-height: 0.9; color: var(--offwhite);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.bl-of { letter-spacing: 0.1em; }

.bl-rule { position: relative; height: 1px; background: var(--hairline-dark); margin: 18px 0 6px; }
.bl-rule i {
  position: absolute; left: 0; top: -1px; height: 2px; width: 50%;
  background: var(--gold); transform-origin: left center;
}
html.motion-ok .build-ledger:not(.booted) .bl-rule i { transform: scaleX(0); }
html.motion-ok .bl-rule i { transition: transform 1.2s var(--ease) 0.9s; }

.bl-steps { display: flex; flex-direction: column; }
.bl-step {
  display: flex; align-items: center; gap: 15px;
  padding: 13px 2px; border-bottom: 1px solid var(--hairline-dark);
}
.bl-step:last-child { border-bottom: 0; }
.bl-mark {
  flex: none; width: 12px; height: 2px; border-radius: 2px;
  background: rgba(244, 241, 236, 0.35);
}
.bl-done .bl-mark { background: var(--gold); }
.bl-now .bl-mark { background: rgba(201, 169, 110, 0.65); }
.bl-body { flex: 1; min-width: 0; }
.bl-body b { display: block; font-size: 0.92rem; font-weight: 700; color: var(--offwhite); line-height: 1.35; }
.bl-body i { display: block; font-style: normal; font-size: 0.75rem; color: var(--paper-dim); }
.bl-state {
  flex: none; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-dim);
}
.bl-done .bl-state { color: rgba(244, 241, 236, 0.7); }
.bl-state-live { color: var(--gold); }

/* Boot: steps arrive once, staggered, motion-gated */
html.motion-ok .bl-step { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
html.motion-ok .build-ledger:not(.booted) .bl-step { opacity: 0; transform: translateY(8px); }
html.motion-ok .build-ledger.booted .bl-step:nth-child(2) { transition-delay: 0.14s; }
html.motion-ok .build-ledger.booted .bl-step:nth-child(3) { transition-delay: 0.28s; }
html.motion-ok .build-ledger.booted .bl-step:nth-child(4) { transition-delay: 0.42s; }
html.motion-ok .build-ledger.booted .bl-step:nth-child(5) { transition-delay: 0.56s; }

/* ---------- The five phases ---------- */
.phases-band { background: var(--offwhite); padding: clamp(104px, 12vw, 180px) 0; }
.journey-inner {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.journey-aside { position: sticky; top: 110px; }
.journey-aside .sec-title { margin-bottom: 16px; }
.journey-lede { color: var(--ink-soft); max-width: 42ch; margin-bottom: 34px; }

.day-dial {
  position: relative;
  display: inline-grid; gap: 2px; min-width: 220px;
  padding: 18px 22px 20px;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 24px 54px -26px rgba(14, 42, 71, 0.3), 0 2px 8px rgba(14, 42, 71, 0.06);
}
/* soft inset ring, replacing the flat gold corner tick every live panel used to carry */
.day-dial::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(14, 42, 71, 0.07);
  pointer-events: none;
}
.dial-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.dial-swap { display: grid; gap: 2px; }
.dial-swap.swap { animation: dial-pop 0.35s var(--ease); }
@keyframes dial-pop {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.dial-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1.05;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.dial-name { font-weight: 700; font-size: 0.975rem; }
.dial-range {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal);
}

/* Timeline: the landing's rail language */
.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px;
  background: var(--hairline-light);
}
/* Round 8: the rail draws itself with your reading (motion only). A teal
   line rides down the spine as you move through the phases, and each phase's
   gold marker ignites as the line reaches it, in step with the day dial.
   Without JS or under reduced motion none of this applies: the rail renders
   in its complete resting state, hairline spine and every marker lit. */
html.motion-ok .timeline.tl-live::after {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px;
  background: var(--teal);
  transform: scaleY(var(--tl, 0)); transform-origin: top center;
}
html.motion-ok .timeline.tl-live .phase::before {
  background: rgba(14, 42, 71, 0.18);
  transform: scaleX(0.5); transform-origin: left center;
  transition: background-color 0.5s var(--ease), transform 0.5s var(--ease);
}
html.motion-ok .timeline.tl-live .phase.ph-lit::before { background: var(--gold); transform: none; }
.phase { position: relative; padding: 0 0 clamp(34px, 3.8vw, 52px); }
.phase:last-child { padding-bottom: 0; }
.phase::before {
  content: ""; position: absolute; left: -34px; top: 11px;
  width: 12px; height: 2px; border-radius: 2px; background: var(--gold);
}
.phase-day {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 8px;
}
.phase h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; margin-bottom: 8px; }
.phase-body > p:not(.phase-get):not(.phase-need) { font-size: 0.975rem; color: var(--ink-soft); max-width: 48ch; }

.phase-get { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.get-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 4px;
}
.get-item { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.get-item + .get-item::before {
  content: "\00B7"; margin-right: 10px;
  color: var(--gold-press); font-weight: 700;
}
.phase-need { margin-top: 12px; font-size: 0.85rem; color: var(--ink-soft); max-width: 46ch; }
.phase-need b { color: var(--navy); font-weight: 700; }

/* ---------- Two operators: navy band, like the landing's founders ---------- */
.operators { background: var(--navy); color: var(--paper-ink); padding: clamp(108px, 13vw, 190px) 0; position: relative; overflow: hidden; }
.operators::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 85% 15%, rgba(20, 51, 82, 0.55) 0%, rgba(20, 51, 82, 0) 60%);
}
.operators-inner {
  position: relative;
  max-width: 720px; margin-inline: auto;
}
.operators .sec-title { color: var(--offwhite); margin-bottom: 26px; }
.operators-text > p { max-width: 56ch; }
.op-quote { margin: 30px 0; }
.op-quote p {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.35; color: var(--offwhite);
  max-width: 26ch;
}
.op-quote p::before { content: "\201C"; color: var(--gold); margin-right: 2px; }
.op-quote p::after { content: "\201D"; color: var(--gold); margin-left: 2px; }
.op-points li {
  position: relative;
  padding: 11px 0 11px 24px; border-top: 1px solid var(--hairline-dark);
  font-size: 0.95rem; color: var(--paper-ink);
}
.op-points li::before {
  content: ""; position: absolute; left: 2px; top: 1.25em;
  width: 12px; height: 2px; border-radius: 2px; background: var(--gold);
}

/* The landing founders' framed treatment, verbatim: two people, not a grid */
.operators-people {
  position: relative; display: flex; flex-wrap: wrap;
  gap: clamp(16px, 1.8vw, 24px); max-width: 396px; justify-self: center;
}
.op-card { position: relative; flex: 1 1 0; min-width: 0; max-width: 180px; margin: 0; }
.op-card:nth-child(2) { transform: translateY(20px); }
.op-frame {
  position: relative; padding: 6px; border-radius: 14px;
  border: 1px solid rgba(244, 241, 236, 0.16);
  background: linear-gradient(160deg, rgba(244, 241, 236, 0.06), rgba(244, 241, 236, 0.015));
  box-shadow: 0 24px 48px -28px rgba(7, 22, 36, 0.85);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.op-frame::after {
  content: ""; position: absolute; inset: 6px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(244, 241, 236, 0.08);
  pointer-events: none;
}
.op-card:hover .op-frame {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 110, 0.38);
  box-shadow: 0 30px 56px -28px rgba(7, 22, 36, 0.9);
}
.op-frame img {
  width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; object-position: center 22%;
  border-radius: 8px; display: block; filter: saturate(0.9) contrast(1.03);
}
.op-card figcaption { margin-top: 12px; font-size: 0.8rem; color: var(--paper-dim); letter-spacing: 0.05em; line-height: 1.5; }
.op-card figcaption b { display: block; font-weight: 700; color: var(--offwhite); font-size: 0.9rem; margin-bottom: 2px; }
/* one aside in the operators' own voice, under the portraits */
.op-note {
  flex: 1 1 100%; margin-top: 30px;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 1rem; line-height: 1.5; color: var(--paper-dim);
}

/* ---------- Fit ---------- */
.fit { background: var(--offwhite); padding: clamp(104px, 12vw, 180px) 0; }
.versus {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px); align-items: stretch;
}
.versus-col { padding: clamp(26px, 3.2vw, 40px); }
.versus-col h3 {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 20px;
}
.versus-without { color: var(--ink-soft); padding-left: 0; padding-right: 0; }
.versus-without h3 {
  color: var(--ink-soft);
  padding-bottom: 10px; border-bottom: 2px solid var(--ink);
}
.versus-without li {
  position: relative;
  padding: 13px 0 13px 24px; border-top: 1px solid var(--hairline-light);
  font-size: 0.95rem;
}
.versus-without li:first-child { border-top: 0; }
.versus-without li::before {
  content: ""; position: absolute; left: 2px; top: 1.4em;
  width: 12px; height: 2px; border-radius: 2px;
  background: rgba(14, 42, 71, 0.3);
}

/* "A strong fit" speaks the summon's language: a navy call sheet cut with the
   button's corner, the gold rule arriving top-left at the decision */
.versus-with {
  position: relative; isolation: isolate;
  background: transparent; box-shadow: none;
}
.versus-with::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: var(--navy);
  background-image:
    radial-gradient(90% 130% at 85% -20%, rgba(20, 51, 82, 0.9) 0%, rgba(20, 51, 82, 0) 55%),
    linear-gradient(rgba(244, 241, 236, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 241, 236, 0.03) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  filter: drop-shadow(0 40px 80px rgba(4, 12, 22, 0.4));
}
.versus-with h3 { color: var(--offwhite); }
.with-step {
  position: relative;
  padding: 13px 0 13px 26px; border-top: 1px solid var(--hairline-dark);
  font-size: 0.975rem; color: var(--offwhite);
}
.with-step:first-child { border-top: 0; }
.with-step::before {
  content: ""; position: absolute; left: 2px; top: 1.4em;
  width: 12px; height: 2px; border-radius: 2px; background: var(--gold);
}
html.js .with-step { opacity: 0; transform: translateY(8px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
html.js .rv-in .with-step { opacity: 1; transform: none; }
html.js .rv-in .with-step:nth-child(2) { transition-delay: 0.18s; }
html.js .rv-in .with-step:nth-child(3) { transition-delay: 0.36s; }
html.js .rv-in .with-step:nth-child(4) { transition-delay: 0.54s; }
.versus-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--hairline-dark);
}
.versus-cta .link-quiet { color: var(--paper-ink); }
.versus-cta .link-quiet:hover { color: var(--white); }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .eng-hero-inner { grid-template-columns: 1fr; gap: 52px; }
  .eng-hero-copy { max-width: 640px; }
  .eng-stage { max-width: 560px; }
}

@media (max-width: 860px) {
  .journey-inner { grid-template-columns: 1fr; }
  .journey-aside { position: static; }
  .versus { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .bl-state { display: none; }
}

/* ---------- Reduced motion: complete still composition ---------- */
@media (prefers-reduced-motion: reduce) {
  html.motion-ok .build-ledger:not(.booted) .bl-step { opacity: 1; transform: none; }
  html.motion-ok .build-ledger:not(.booted) .bl-rule i { transform: none; }
  html.js .with-step { opacity: 1; transform: none; }
  .dial-swap.swap { animation: none !important; }
  html.motion-ok .timeline.tl-live::after { display: none !important; }
  html.motion-ok .timeline.tl-live .phase::before { background: var(--gold); transform: none; }
}