/* GTM Debug Sprint — premium visual system, August 2026 */
:root {
  /* Palette A: warm paper base, ink text, one blue accent, one warm highlight. */
  --bg: #fcfbf7;
  --paper: #fcfbf7;
  --paper-blue: #f0f7ff;
  --paper-cream: #fff3dc;
  --paper-yellow: #fef07d;
  --ink: #191919;
  --muted: #666861;
  --line: rgba(25, 25, 25, 0.14);
  --line-soft: rgba(25, 25, 25, 0.075);
  --dark: #201f1c;
  --accent: #007eff;
  --blue: #007eff;
  --blue-soft: #f0f7ff;
  /* One warm accent only; the rest collapse into the blue family so no section
     can pull the page toward a rainbow. */
  --amber: #f49a3f;
  --amber-soft: #fff3dc;
  --teal: #007eff;
  --teal-soft: #f0f7ff;
  --violet: #007eff;
  --violet-soft: #f0f7ff;
  --coral: #007eff;
  --coral-soft: #f0f7ff;
  --green: #007eff;
  --green-soft: #f0f7ff;
}

::selection { color: #fff; background: var(--blue); }
:focus-visible { outline-color: var(--blue); }
.h-display .accent,
.h-display .wm.accent,
.kinetic-statement .w.accent { color: var(--blue); }

.btn-filled { background: var(--blue); color: #fff; box-shadow: 0 1.1rem 2.6rem rgba(37, 87, 214, 0.18); }
.btn-filled .ripple span { background: var(--violet); }
.btn-ghost { border-color: rgba(37, 87, 214, 0.56); color: var(--blue); }
.btn-ghost .ripple span { background: var(--blue); }
.form-note { border-left-color: var(--teal); }

/* Editorial hero: photo is the anchor; proof is a deliberately separate artifact. */
.lab-hero {
  background:
    radial-gradient(circle at 88% 8%, rgba(132, 87, 223, 0.10), transparent 25rem),
    radial-gradient(circle at 7% 74%, rgba(12, 156, 145, 0.075), transparent 23rem),
    var(--bg);
}
.lab-hero::after { height: 19%; background: linear-gradient(transparent, var(--bg)); }
@media (min-width: 768px) {
  .lab-hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(5rem, 6vw, 10rem); align-items: stretch; }
  .lab-hero-copy { display: flex; flex-direction: column; justify-content: center; padding-bottom: 8.5rem; }
}
.hero-visual-stack { min-height: clamp(54rem, 56vw, 72rem); padding-bottom: clamp(9rem, 11vw, 14rem); }
.hero-photo {
  position: relative;
  height: 100%;
  min-height: 0;
  border-radius: 3.2rem;
  background: #171d31;
  box-shadow: 0 3.2rem 9rem rgba(18, 26, 59, 0.20);
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: auto 2.2rem 2.2rem auto;
  width: 9rem;
  height: 9rem;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 50%;
  box-shadow: 0 0 0 1.3rem rgba(37, 87, 214, .32), 0 0 0 2.7rem rgba(12, 156, 145, .12);
  pointer-events: none;
}
.hero-photo img { filter: saturate(1.04) contrast(1.05); transform-origin: center center; }
.hero-caption::before { background: var(--amber); box-shadow: 0 0 0 .35rem rgba(244,154,63,.17); }
@media (max-width: 767px) {
  .lab-hero { padding-bottom: 7rem; }
  .hero-visual-stack { min-height: 51rem; padding-bottom: 8.5rem; }
  .hero-photo { border-radius: 2.2rem; }
  .hero-photo::after { width: 6rem; height: 6rem; right: 1.6rem; bottom: 1.6rem; box-shadow: 0 0 0 .9rem rgba(37,87,214,.28), 0 0 0 1.8rem rgba(12,156,145,.10); }
}

/* Existing story chapters pick up a distinct, restrained palette. */
.decision-triad span:first-child { border-color: var(--teal); color: #a6fff2; background: rgba(12,156,145,.14); }
.decision-triad span:nth-child(2) { border-color: var(--amber); color: #ffe2bd; background: rgba(244,154,63,.12); }
.decision-triad span:nth-child(3) { border-color: var(--coral); color: #ffc5bb; background: rgba(231,90,71,.12); }

/* Sample scorecard: meaning is encoded in label, number, fill, and color. */
.sample-scores { display: grid; gap: 1rem; }
.score-row { --score: var(--blue); --score-soft: var(--blue-soft); position: relative; padding: 1.7rem 1.8rem; border: 1px solid transparent; border-radius: 1.2rem; background: var(--score-soft); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.score-row:hover { transform: translateX(.5rem); box-shadow: 0 1.4rem 2.6rem rgba(17,22,42,.07); }
.score-row .micro { color: var(--ink); }
.score-row .num { color: var(--score); }
.score-row .track { background: rgba(17,22,42,.12); }
.score-row .fill { background: var(--score); border-radius: 999px; box-shadow: 0 0 .8rem color-mix(in srgb, var(--score) 50%, transparent); }
.score-row:nth-child(1) { --score: var(--green); --score-soft: var(--green-soft); }
.score-row:nth-child(2) { --score: var(--coral); --score-soft: var(--coral-soft); }
.score-row:nth-child(3) { --score: #c64e38; --score-soft: #fff0ea; }
.score-row:nth-child(4) { --score: #d28520; --score-soft: var(--amber-soft); }

/* Deliverable cards: preserve artifacts, add color through their surrounding system. */
.splitshow { gap: 4.4rem; }
.deliv { --card: var(--blue); --card-soft: var(--blue-soft); position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--card) 30%, white); background: linear-gradient(135deg, var(--card-soft) 0%, #fff 62%); box-shadow: 0 1.4rem 3rem rgba(17,22,42,.04); }
.deliv::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: .7rem; background: var(--card); }
.deliv::after { content: ""; position: absolute; right: -4rem; bottom: -4rem; width: 13rem; height: 13rem; border-radius: 50%; background: var(--card); opacity: .08; pointer-events: none; }
.deliv img { position: relative; z-index: 1; border: 1px solid color-mix(in srgb, var(--card) 24%, white); box-shadow: 0 .9rem 1.8rem color-mix(in srgb, var(--card) 14%, transparent); }
.deliv .num { color: var(--card); }
.deliv:nth-child(2) { --card: var(--teal); --card-soft: var(--teal-soft); }
.deliv:nth-child(3) { --card: var(--violet); --card-soft: var(--violet-soft); }
.deliv:nth-child(4) { --card: var(--amber); --card-soft: var(--amber-soft); }

/* Interactive method: four chapters with a single changing evidence panel. */
.method-experience { margin-top: 5rem; }
.method-rail { margin-top: 0; gap: 1rem; }
.method-rail .method-card { --method: var(--blue); position: relative; min-height: 18rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.6rem; background: #fff; text-align: left; overflow: hidden; transition: transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease); }
.method-rail .method-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: .5rem; background: var(--method); transform: scaleX(.16); transform-origin: left; transition: transform .45s var(--ease); }
.method-rail .method-card:hover,
.method-rail .method-card[aria-selected="true"] { transform: translateY(-.6rem); background: color-mix(in srgb, var(--method) 9%, white); border-color: color-mix(in srgb, var(--method) 38%, white); box-shadow: 0 2rem 4rem color-mix(in srgb, var(--method) 16%, transparent); }
.method-rail .method-card[aria-selected="true"]::after { transform: scaleX(1); }
.method-rail .method-card:nth-child(2) { --method: var(--violet); }
.method-rail .method-card:nth-child(3) { --method: var(--teal); }
.method-rail .method-card:nth-child(4) { --method: var(--amber); }
.method-rail .method-card .method-no { color: var(--method); }
.method-rail .method-card h3 { margin-top: 3rem; }
.method-stage { --method: var(--blue); position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem,4vw,5rem); align-items: center; margin-top: 1.4rem; padding: clamp(2.8rem,5vw,5rem); border: 1px solid color-mix(in srgb, var(--method) 30%, white); border-radius: 2.2rem; background: linear-gradient(120deg, color-mix(in srgb, var(--method) 12%, white), #fff 64%); overflow: hidden; transition: background .45s var(--ease), border-color .45s var(--ease); }
.method-stage::after { content: ""; position: absolute; right: -8rem; top: -8rem; width: 25rem; height: 25rem; border-radius: 50%; background: var(--method); opacity: .09; pointer-events: none; }
.method-orbit { position: relative; width: clamp(8.6rem,11vw,13rem); height: clamp(8.6rem,11vw,13rem); border: 1px solid color-mix(in srgb, var(--method) 42%, white); border-radius: 50%; box-shadow: inset 0 0 0 1.6rem rgba(255,255,255,.52); }
.method-orbit::before,
.method-orbit::after { content: ""; position: absolute; border-radius: 50%; background: var(--method); }
.method-orbit::before { width: 2rem; height: 2rem; top: .6rem; right: 1.6rem; box-shadow: -5.4rem 6.5rem 0 .4rem color-mix(in srgb, var(--method) 52%, white); }
.method-orbit::after { width: .85rem; height: .85rem; left: 1.4rem; top: 2.4rem; box-shadow: 5.3rem 5.8rem 0 .2rem var(--method); }
.method-stage .method-no { color: var(--method); }
.method-stage h3 { margin-top: .8rem; font-family: var(--display); font-weight: 500; font-size: clamp(3rem,4vw,4.8rem); letter-spacing: -.03em; line-height: 1; }
.method-stage p { max-width:55ch; margin-top: 1.2rem; font-size: 1.7rem; line-height:1.5; color: var(--muted); }
.method-evidence { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.method-evidence span { padding:.7rem 1rem; border:1px solid color-mix(in srgb, var(--method) 33%, white); border-radius:999px; color:var(--ink); background:rgba(255,255,255,.66); font-size:1.1rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.process-checkpoints { margin-top: 5rem; }
.process-checkpoints .step { --step: var(--blue); position:relative; padding: 3.2rem 0 3.2rem 3.4rem; transition: padding-left .4s var(--ease); }
.process-checkpoints .step::before { content:""; position:absolute; left:0; top:3.5rem; width:1.2rem; height:1.2rem; border-radius:50%; background:var(--step); box-shadow:0 0 0 .6rem color-mix(in srgb, var(--step) 13%, transparent); }
.process-checkpoints .step:hover { padding-left:4.1rem; }
.process-checkpoints .step:nth-child(2) { --step:var(--teal); }
.process-checkpoints .step:nth-child(3) { --step:var(--violet); }
.process-checkpoints .step .no { color:var(--step); }

/* Investment framing: transparent entry offers and a confident flagship anchor. */
.investment-hero { position:relative; display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:end; margin-top:4.5rem; padding:clamp(3rem,5vw,5.5rem); border-radius:2.4rem; overflow:hidden; color:#fff; background:linear-gradient(135deg,#12213d 0%,#0d3f8f 55%,#1d3a6e 100%); box-shadow:0 2.6rem 5rem rgba(0,126,255,.16); }
.investment-hero::before { content:""; position:absolute; width:34rem; height:34rem; right:-11rem; top:-13rem; border-radius:50%; background:var(--amber); opacity:.22; }
.investment-hero::after { content:""; position:absolute; width:17rem; height:17rem; right:18%; bottom:-10rem; border-radius:50%; border:2rem solid rgba(12,156,145,.34); }
.investment-copy, .investment-side { position:relative; z-index:1; }
.investment-label { color:#cbd9ff; }
.investment-hero h3 { max-width:13ch; margin-top:1.2rem; font-family:var(--display); font-size:clamp(3rem,5vw,5.2rem); font-weight:500; letter-spacing:-.03em; line-height:1; }
.investment-hero p { max-width:52ch; margin-top:1.8rem; color:rgba(255,255,255,.78); font-size:1.6rem; line-height:1.5; }
.investment-price { font-family:var(--display); font-size:clamp(5.8rem,8vw,8.8rem); line-height:.9; letter-spacing:-.05em; text-align:right; }
.investment-side .micro { display:block; margin-top:1rem; color:rgba(255,255,255,.62); text-align:right; }
.investment-side .btn { margin-top:2.4rem; background:#fff; color:var(--blue); box-shadow:none; }
.investment-side .btn .ripple span { background:var(--amber); }
.investment-side .btn:hover { color:var(--ink); }
.entry-options { margin-top:2rem; padding:2.8rem; border:1px solid var(--line); border-radius:2rem; background:#fff; }
.entry-options > .micro { color:var(--violet); }
.entry-options > p { margin-top:.8rem; max-width:56ch; color:var(--muted); font-size:1.6rem; }
.entry-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:2.2rem; }
.entry-card { --entry:var(--teal); padding:2rem; border:1px solid color-mix(in srgb, var(--entry) 30%, white); border-radius:1.4rem; background:color-mix(in srgb, var(--entry) 7%, white); }
.entry-card:nth-child(2) { --entry:var(--violet); }
.entry-card h3 { font-family:var(--display); font-size:2.4rem; font-weight:500; line-height:1; letter-spacing:-.02em; }
.entry-card p { margin-top:.8rem; color:var(--muted); font-size:1.45rem; line-height:1.45; }
.entry-price { display:block; margin-top:1.7rem; color:var(--entry); font-family:var(--display); font-size:3.6rem; line-height:.9; letter-spacing:-.03em; }
.entry-card a { display:inline-block; margin-top:1.5rem; color:var(--ink); font-size:1.25rem; font-weight:500; text-decoration:underline; text-underline-offset:.3em; }
@media (max-width:767px) { .investment-hero { grid-template-columns:1fr; } .investment-price, .investment-side .micro { text-align:left; } .entry-grid { grid-template-columns:1fr; } }

/* Operating diagram: client signal remains visible all the way to decision. */
.operating-diagram { margin-top:5rem; padding:clamp(2.4rem,4vw,4rem); border:1px solid var(--line); border-radius:2.4rem; background:linear-gradient(135deg,#fff 0%,#f6f8ff 100%); overflow:hidden; }
.flow-track { display:grid; grid-template-columns:repeat(13, auto 1fr); align-items:center; gap:.75rem; }
.flow-node { --flow:var(--blue); position:relative; min-width:0; min-height:12rem; padding:1.4rem 1.2rem; border:1px solid color-mix(in srgb,var(--flow) 30%,white); border-radius:1.3rem; background:color-mix(in srgb,var(--flow) 9%,white); }
.flow-node:nth-of-type(3) { --flow:var(--amber); }
.flow-node:nth-of-type(5) { --flow:var(--teal); }
.flow-node:nth-of-type(7) { --flow:var(--violet); }
.flow-node:nth-of-type(9) { --flow:var(--coral); }
.flow-node:nth-of-type(11) { --flow:var(--blue); }
.flow-node .flow-index { display:block; color:var(--flow); font-size:1rem; font-weight:500; letter-spacing:.1em; }
.flow-node strong { display:block; margin-top:1.6rem; font-family:var(--display); font-size:1.75rem; font-weight:500; line-height:1; letter-spacing:-.02em; }
.flow-node small { display:block; margin-top:.6rem; color:var(--muted); font-size:1.12rem; line-height:1.3; }
.flow-node.gate { background:var(--amber-soft); border-color:rgba(244,154,63,.65); box-shadow:0 1.2rem 2.8rem rgba(244,154,63,.15); }
.flow-node.gate::after { content:"approval"; position:absolute; top:-1.1rem; right:.8rem; padding:.35rem .65rem; border-radius:999px; background:var(--amber); color:var(--ink); font-size:.85rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.flow-arrow { width:100%; min-width:1.4rem; height:1px; background:var(--line); position:relative; }
.flow-arrow::after { content:""; position:absolute; right:0; top:50%; width:.55rem; height:.55rem; border-top:1px solid var(--ink); border-right:1px solid var(--ink); transform:translateY(-50%) rotate(45deg); }
.diagram-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.6rem; padding-top:2.4rem; border-top:1px solid var(--line); }
.diagram-note { padding:1.1rem 1.2rem; border-left:3px solid var(--blue); font-size:1.3rem; line-height:1.4; color:var(--muted); }
.diagram-note:nth-child(2) { border-left-color:var(--amber); }
.diagram-note:nth-child(3) { border-left-color:var(--teal); }
.diagram-note strong { display:block; margin-bottom:.35rem; color:var(--ink); font-weight:500; }
.operating-principles { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:2rem; }
.operating-principle { padding:2.2rem; border:1px solid var(--line); border-radius:1.4rem; background:#fff; }
.operating-principle strong { display:block; font-family:var(--display); font-size:2rem; font-weight:500; line-height:1.08; letter-spacing:-.02em; }
.operating-principle p { margin-top:1rem; font-size:1.45rem; line-height:1.45; color:var(--muted); }
@media (max-width:767px) {
  .flow-track { grid-template-columns:1fr; gap:.7rem; }
  .flow-arrow { width:1px; min-width:0; height:1.7rem; margin-left:2rem; }
  .flow-arrow::after { right:auto; left:50%; top:auto; bottom:0; transform:translateX(-50%) rotate(135deg); }
  .flow-node { min-height:0; padding:1.5rem; }
  .flow-node strong { margin-top:.7rem; }
  .diagram-notes, .operating-principles { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .method-stage.is-changing .method-orbit { animation: methodPulse .55s var(--ease); }
  .flow-node { animation: signalIn .7s var(--ease) both; }
  .flow-node:nth-child(1) { animation-delay:.05s; } .flow-node:nth-child(3) { animation-delay:.1s; } .flow-node:nth-child(5) { animation-delay:.15s; } .flow-node:nth-child(7) { animation-delay:.2s; } .flow-node:nth-child(9) { animation-delay:.25s; } .flow-node:nth-child(11) { animation-delay:.3s; } .flow-node:nth-child(13) { animation-delay:.35s; }
  @keyframes methodPulse { 0% { transform:scale(.88); opacity:.4; } 100% { transform:scale(1); opacity:1; } }
  @keyframes signalIn { from { opacity:0; transform:translateY(1rem); } to { opacity:1; transform:translateY(0); } }
}

@media (max-width:767px) {
  .method-rail { grid-template-columns:1fr 1fr; }
  .method-rail .method-card { min-height:15rem; padding:1.6rem; }
  .method-stage { grid-template-columns:1fr; }
  .method-orbit { width:8rem; height:8rem; }
  .process-checkpoints .step { padding-left:2.8rem; }
}

/* Explicit flow colors remain stable regardless of decorative arrows in the diagram. */
.flow-node.client { --flow: var(--blue); }
.flow-node.brief { --flow: var(--violet); }
.flow-node.gate { --flow: var(--amber); }
.flow-node.research { --flow: var(--teal); }
.flow-node.outreach { --flow: var(--violet); }
.flow-node.replies { --flow: var(--coral); }
.flow-node.decision { --flow: var(--blue); }