/* ============================================================
   The CV Method — Discovery Journey (/start) styles.
   Rebuilt 2026-09-23 (CV batch 2, Part 1): the journey sits on the site's dark
   navy "stage"; answers, the form and results stay on light Canvas Mute panels
   (the same light-panel-on-dark system as the rest of the site). Imagery lives
   in /assets/img/discovery/. EVERY selector is scoped under `.discovery` (or
   `dj-*`) so nothing collides with the site's global .btn/.card/.eyebrow.
   ============================================================ */

.discovery{
  --dur:240ms; --ease:cubic-bezier(.65,0,.35,1);
  --stage-text:#EAF1F7; --stage-muted:#A9B6CF; --stage-line:rgba(255,255,255,.12);
  background:
    radial-gradient(70% 50% at 85% 0%, rgba(46,224,154,.08), transparent 60%),
    linear-gradient(180deg,var(--ink-900,#0A1836),#070f24);
  color:var(--stage-text);
}
.discovery .mono{ font-family:var(--font-mono); letter-spacing:.06em; }
.dj-fallback{ max-width:640px; margin:0 auto; padding:40px 24px; text-align:center; color:var(--stage-text); }
.dj-fallback a{ color:var(--accent); font-weight:600; }

/* /start hero: the same size as every other interior page (2026-09-27, CV). The old
   compact override (40vh, 44px foot) was dropped so the page matches the rest of the site. */

/* ---- Journey column ---- */
#discovery-mount{ max-width:1160px; margin:0 auto; padding:72px 24px 88px; position:relative; }
@media (max-width:820px){ #discovery-mount{ padding-top:56px; } }
/* The under-divider glow (page.css .page-hero + *) is an inset shadow; on this 1160px
   column it ended short of both edges and framed the quiz like a box. Run it full-bleed. */
.discovery{ overflow-x:clip; }
#discovery-mount{ box-shadow:none; }
#discovery-mount::before{ content:""; position:absolute; top:0; left:50%; width:100vw; margin-left:-50vw; height:26px;
  background:linear-gradient(180deg, rgba(46,224,154,.08), transparent); pointer-events:none; }
.discovery .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-ink); font-weight:600; }
.discovery .card{ background:var(--panel,#EEF2F7); color:var(--text-body); border:1px solid var(--panel-edge,#CDD6E4); border-radius:var(--r-lg); box-shadow:0 18px 40px rgba(4,9,22,.45); padding:26px 26px 24px; }
.discovery .card + .card{ margin-top:16px; }

/* ---- Labeled progress bar ---- */
.discovery .stepper{ margin:0 0 26px; }
.discovery .stepper__segs{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; list-style:none; margin:0; padding:0; }
.discovery .stepper__seg{
  all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:3px; width:100%;
  padding:10px 4px 2px; min-height:44px; border-top:3px solid rgba(255,255,255,.14);
  transition:border-color var(--dur) var(--ease);
}
.discovery .stepper__seg.done{ border-top-color:var(--green); }
.discovery .stepper__seg.cur{ border-top-color:var(--accent); }
.discovery .stepper__seg.is-skipped{ border-top-style:dashed; }
.discovery .stepper__n{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--stage-muted); font-weight:600; white-space:nowrap; }
.discovery .stepper__seg.cur .stepper__n{ color:var(--accent); }
.discovery .stepper__a{ font-size:12.5px; color:var(--stage-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.discovery .stepper__seg.is-clickable{ cursor:pointer; }
.discovery .stepper__seg.is-clickable:hover .stepper__n,
.discovery .stepper__seg.is-clickable:hover .stepper__a{ color:var(--mint); }
.discovery .stepper__seg:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.discovery .stepper__meta{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:12px; }
.discovery .stepper__count{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--stage-muted); }
.discovery .stepper__restart{ all:unset; cursor:pointer; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--accent); padding:6px 2px; border-bottom:1px solid rgba(46,224,154,.45); }
.discovery .stepper__restart:hover{ color:var(--mint); }
.discovery .stepper__restart:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:760px){
  .discovery .stepper__segs{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
  .discovery .stepper__l{ display:none; } /* phones: numbers only */
  .discovery .stepper__a{ display:none; }
}

/* ---- Steps ---- */
/* page.css has a legacy global .step (old home "process" card) — neutralize it here */
.discovery .step{ display:none; padding:0; border:0; border-radius:0; background:none; }
.discovery .step.is-active{ display:block; animation:dj-stepIn .36s var(--ease); }
@keyframes dj-stepIn{ from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:none} }
.discovery .step__head{ margin-bottom:18px; }
.discovery .step__q{ font-family:var(--font-display); color:#fff; letter-spacing:-.025em; font-size:clamp(26px,3.4vw,40px); line-height:1.08; margin:0 0 8px; }
.discovery .step__help{ color:var(--stage-muted); font-size:15.5px; line-height:1.55; max-width:60ch; margin:0; }
.discovery .ack{ display:flex; gap:7px; align-items:center; color:var(--accent); font-size:13.5px; font-weight:500; margin:12px 0 0; min-height:20px; }
.discovery .ack svg{ flex:none; }

/* step 1: image tiles */
.discovery .tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.discovery .tile{
  all:unset; box-sizing:border-box; position:relative; display:block; cursor:pointer;
  aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden; background:#12224f;
  outline:3px solid transparent; outline-offset:-3px;
  transition:transform var(--dur) var(--ease), outline-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.discovery .tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.78); transition:transform .6s var(--ease), filter var(--dur) var(--ease); }
/* scrim floor: fixed-height dark base so the label always reads, however pale the photo */
.discovery .tile::after{ content:""; position:absolute; inset:auto 0 0 0; height:62%; background:linear-gradient(to top, rgba(5,11,24,.95) 0, rgba(5,11,24,.9) 72px, rgba(5,11,24,0) 100%); pointer-events:none; }
.discovery .tile__lab{ position:absolute; left:16px; right:16px; bottom:14px; z-index:1; display:flex; flex-direction:column; gap:3px; }
.discovery .tile__t{ font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.2; color:#fff; }
.discovery .tile__s{ font-size:13px; line-height:1.4; color:#C6D1E4; }
.discovery .tile__check{ position:absolute; top:12px; right:12px; z-index:1; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:2px solid rgba(255,255,255,.75); color:transparent; background:rgba(5,11,24,.35); transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.discovery .tile:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(4,9,22,.55); }
.discovery .tile:hover img{ transform:scale(1.05); filter:saturate(1) brightness(.9); }
.discovery .tile.is-sel{ outline-color:var(--accent); }
.discovery .tile.is-sel img{ filter:saturate(1.05) brightness(.95); }
.discovery .tile.is-sel .tile__check{ background:var(--accent); border-color:var(--accent); color:#04101f; }
.discovery .tile:focus-visible{ outline-color:var(--mint); }
/* tablets + landscape phones: keep 4 across (2×2 squares were a lot of scrolling) */
@media (max-width:900px){ .discovery .tiles{ gap:10px; } .discovery .tile{ aspect-ratio:4/5; } .discovery .tile__t{ font-size:16px; } .discovery .tile__s{ font-size:12.5px; } }
@media (max-width:599px){ .discovery .tiles{ grid-template-columns:repeat(2,1fr); } .discovery .tile{ aspect-ratio:1/1; } }

/* steps 2–7 + contact: image panel beside the answers */
.discovery .split{ display:grid; grid-template-columns:5fr 7fr; gap:22px; align-items:stretch; }
.discovery .visual{ position:relative; min-height:440px; border-radius:var(--r-lg); overflow:hidden; background:#12224f; }
.discovery .visual__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.8); animation:dj-fade .5s var(--ease); }
.discovery .visual__img--art{ object-position:74% 42%; filter:none; }
@keyframes dj-fade{ from{opacity:0} to{opacity:1} }
.discovery .visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,11,24,.96) 30%, rgba(5,11,24,.25) 100%); }
.discovery .visual__in{ position:absolute; left:26px; right:26px; bottom:26px; z-index:1; }
.discovery .visual__tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
.discovery .visual .step__help{ color:#C6D1E4; }
.discovery .split__side{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.discovery .split > .card{ align-self:center; }
@media (max-width:900px){
  .discovery .split{ grid-template-columns:1fr; gap:14px; }
  .discovery .visual{ min-height:220px; }
  .discovery .visual__in{ left:18px; right:18px; bottom:18px; }
}

/* tabs (step 2) */
.discovery .tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.discovery .tab{ all:unset; cursor:pointer; font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:var(--r-pill); color:var(--stage-text); background:rgba(255,255,255,.06); border:1px solid var(--stage-line); }
.discovery .tab:hover{ border-color:rgba(255,255,255,.3); }
.discovery .tab.is-on{ background:var(--panel,#EEF2F7); color:var(--ink-text); border-color:transparent; }
.discovery .tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.discovery .tab__n{ display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:4px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11.5px; background:var(--green-ink); color:#fff; }

/* answer options (light panels on the dark stage) */
.discovery .opts{ display:grid; gap:10px; }
.discovery .opts--two{ grid-template-columns:1fr 1fr; }
.discovery .opts--one{ grid-template-columns:1fr; }
.discovery .opt{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; border-radius:var(--r-md); background:var(--panel,#EEF2F7); border:2px solid transparent; color:var(--ink-text); transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.discovery .opt--radio{ padding:18px 20px; }
.discovery .opt:hover{ transform:translateY(-2px); border-color:var(--panel-edge,#CDD6E4); }
.discovery .opt.is-sel{ border-color:var(--green-ink); background:#E3F6EE; }
.discovery .opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.discovery .opt__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.discovery .opt__title{ font-weight:600; font-size:15px; line-height:1.3; color:var(--ink-text); }
.discovery .opt--radio .opt__title{ font-size:16.5px; }
.discovery .opt__sub{ font-size:13px; color:var(--text-body); line-height:1.45; }
.discovery .opt__check{ flex:none; width:22px; height:22px; border-radius:var(--r-pill); border:1.5px solid var(--border-strong); display:grid; place-items:center; color:#fff; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.discovery .opt.is-sel .opt__check{ background:var(--green-ink); border-color:var(--green-ink); }
.discovery .opt__check svg{ opacity:0; transition:opacity var(--dur) var(--ease); }
.discovery .opt.is-sel .opt__check svg{ opacity:1; }
@media (max-width:600px){ .discovery .opts--two{ grid-template-columns:1fr; } }

.discovery .stepnav{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; gap:12px; flex-wrap:wrap; }
.discovery .stepnav__hint{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--stage-muted); }
/* ghost buttons sit on the dark stage (inside panels they flip back — below) */
.discovery .step .btn--ghost{ border-color:rgba(255,255,255,.38); color:#fff; }
.discovery .step .btn--ghost:hover{ border-color:#fff; }

/* contact form (inside the split) */
.discovery .form__q{ font-family:var(--font-display); color:var(--ink-text); font-size:22px; letter-spacing:-.015em; margin:0 0 4px; }
.discovery .form__help{ color:var(--text-body); font-size:14px; margin:0 0 18px; }

/* result shot */
.discovery .primary-card.has-shot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.discovery .primary-card.has-shot .steps3{ grid-column:1 / -1; }
.discovery .res-shot{ margin:0; }
.discovery .res-shot img{ display:block; width:100%; border-radius:var(--r-md); border:1px solid var(--panel-edge,#CDD6E4); box-shadow:0 12px 28px rgba(4,9,22,.25); }
.discovery .res-shot figcaption{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--text-muted); margin-top:8px; }
.discovery .strat9{ margin:12px 0 0; padding-left:20px; columns:2; column-gap:24px; font-size:13.5px; color:var(--text-body); }
.discovery .strat9 li{ margin-bottom:4px; break-inside:avoid; }
@media (max-width:760px){ .discovery .primary-card.has-shot{ grid-template-columns:1fr; } .discovery .strat9{ columns:1; } }

/* buttons (rectangular per CV; fully overrides the site's pill .btn within .discovery) */
.discovery .stepnav{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; gap:12px; flex-wrap:wrap; }
.discovery .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:var(--hit-min); padding:12px 22px; border:none; border-radius:var(--r-xs); font-family:var(--font-body); font-size:14.5px; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; transition:transform 160ms var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease); }
.discovery .btn--primary{ position:relative; color:var(--ink-900); background-image:none; background-color:var(--green); box-shadow:var(--shadow-md); } /* solid green like the site (2026-09-26) */
.discovery .btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); background-color:var(--accent); }
.discovery .btn--primary[disabled]{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.discovery .btn--ghost{ background:transparent; border:1.5px solid var(--border-strong); color:var(--text-strong); }
.discovery .btn--ghost:hover{ transform:translateY(-2px); border-color:var(--ink-600); }
.discovery .btn--link{ background:none; color:var(--text-muted); padding:12px 6px; }
.discovery .btn--link:hover{ color:var(--text-strong); }

/* ---- Results ---- */
.discovery .results{ display:none; animation:dj-stepIn .34s var(--ease); }
.discovery .results.is-active{ display:block; }
.discovery .res-top{ text-align:center; padding:6px 0 4px; }
.discovery .tierbadge{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin-bottom:12px; }
.discovery .tier-hot{ background:#FEF0E7; color:#C2410C; }
.discovery .tier-warm{ background:var(--green-soft); color:var(--green-ink); }
.discovery .tier-nurture{ background:var(--canvas-mute); color:var(--text-muted); }
.discovery .tier-unq{ background:var(--canvas-mute); color:var(--text-faint); }
.discovery .tier-scope{ background:var(--orchid-soft); color:var(--orchid-ink); }
.discovery .res-title{ font-family:var(--font-display); color:var(--text-strong); letter-spacing:-.02em; font-size:clamp(22px,3.2vw,30px); }
.discovery .res-summary{ color:var(--text-muted); font-size:14.5px; max-width:56ch; margin:8px auto 0; }
.discovery .primary-card{ position:relative; overflow:hidden; padding-left:28px; }
.discovery .primary-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background-image:var(--grad-method); }
.discovery .primary-card h3{ font-family:var(--font-display); color:var(--text-strong); font-size:22px; margin:6px 0 6px; }
.discovery .primary-card .why{ color:var(--text-body); font-size:15px; margin:0; }
.discovery .primary-card .whymini{ color:var(--text-muted); font-size:13px; margin:8px 0 0; }
.discovery .steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.discovery .mini{ background:var(--canvas-soft); border:1px solid var(--border); border-radius:var(--r-md); padding:13px; }
.discovery .mini .n{ font-family:var(--font-mono); font-size:12px; color:var(--green-ink); font-weight:600; }
.discovery .mini .t{ font-weight:600; font-size:13.5px; margin-top:4px; color:var(--text-strong); }
.discovery .mini .d{ font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.discovery .blocklabel{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
.discovery .also__list{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.discovery .also__item{ display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--canvas-soft); }
.discovery .also__item .ico{ flex:none; width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--green-soft); color:var(--green-ink); }
.discovery .also__item .nm{ font-weight:600; font-size:13.5px; color:var(--text-strong); }
.discovery .also__item .wy{ font-size:12px; color:var(--text-muted); }
.discovery .cta-card{ text-align:center; }
.discovery .cta-card h4{ font-family:var(--font-display); color:var(--text-strong); font-size:17px; margin-bottom:4px; }
.discovery .cta-card p{ font-size:13.5px; color:var(--text-muted); margin:0 0 14px; }
.discovery .cta-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; }

/* ---- Capture + confirm ---- */
.discovery .capture, .discovery .confirm{ display:none; animation:dj-stepIn .3s var(--ease); }
.discovery .capture.is-active, .discovery .confirm.is-active{ display:block; }
/* invalid capture field (2026-09-26) */
.discovery .field [aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(220,38,38,.14); }
/* result-first (2026-09-25): the form follows the on-screen result, so give it air */
.discovery .results.is-active + .capture.is-active{ margin-top:28px; }
.discovery .field{ margin-bottom:14px; }
.discovery .field label{ display:block; font-weight:600; font-size:13.5px; color:var(--text-strong); margin-bottom:6px; }
.discovery .field input, .discovery .field textarea, .discovery .field select{ width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:var(--r-sm); font:inherit; color:var(--text-strong); background:var(--canvas); }
.discovery .field input:focus, .discovery .field textarea:focus, .discovery .field select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(23,184,122,.13); }
.discovery .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.discovery .consent{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--text-body); margin-bottom:10px; }
.discovery .consent input{ margin-top:2px; width:17px; height:17px; flex:none; accent-color:var(--green); }
.discovery .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.discovery .cf-turnstile{ margin:4px 0 16px; }
.discovery .cap-status{ font-size:13px; color:var(--danger); min-height:18px; margin:2px 0 8px; }
.discovery .confirm{ text-align:center; }
/* call-recording notice under the booking CTA (2026-09-25); --text-muted on --panel = 4.88:1 */
.discovery .confirm .rec-note{ max-width:52ch; margin:14px auto 0; font-size:13.5px; line-height:1.5; color:var(--text-muted); }
.discovery .confirm .seal{ width:60px; height:60px; border-radius:var(--r-pill); background:var(--green-soft); color:var(--green-ink); display:grid; place-items:center; margin:0 auto 14px; }

/* Option A — capture-before-results: confirmation banner on the result screen */
.discovery .confirm-banner{ display:flex; gap:12px; align-items:flex-start; }
.discovery .confirm-banner .seal-sm{ color:var(--green); flex:0 0 auto; line-height:1; margin-top:2px; }

/* Result/confirm cards are light panels: primary-card accent bar replaced by the shot layout */
.discovery .primary-card{ padding-left:26px; }
.discovery .primary-card::before{ display:none; }
.discovery .res-summary{ color:var(--text-body); }
.discovery .res-title, .discovery .primary-card h3, .discovery .cta-card h4{ color:var(--ink-text); }
.discovery #stage > .results{ max-width:980px; margin:0 auto; }

/* Inline-style replacements (CSP style-src 'self' drops style="" — 2026-09-23). */
.discovery .opt-note{ color:var(--text-muted); font-weight:400; }
.discovery .link-green{ color:var(--green-ink); }
.discovery .req{ color:var(--danger); }

@media (max-width:600px){
  .discovery .also__list, .discovery .steps3, .discovery .grid2{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .discovery *{ animation:none !important; transition:none !important; } }

/* result banner: left-aligned beside its check */
.discovery .confirm-banner .res-summary{ margin:0; max-width:none; text-align:left; }
/* step 2: the image panel stays in view (sticky, capped height) while the list scrolls */
@media (min-width:901px){
  .discovery .step--pains .visual{ position:sticky; top:96px; align-self:start; height:min(560px, calc(100vh - 128px)); min-height:420px; }
}
/* after a submit the answer steps are locked (read-only summary) */
.discovery .stepper.is-locked .stepper__seg{ cursor:default; }
/* very narrow phones (≤400px): names only on the tiles so labels never crowd the check */
@media (max-width:400px){ .discovery .tile__s{ display:none; } .discovery .tile__t{ font-size:15px; } .discovery .tile__lab{ left:12px; right:12px; bottom:12px; } .discovery .tile__check{ width:24px; height:24px; top:10px; right:10px; } }

/* Reserve the journey's first-step height before discovery.js renders it
   (2026-09-26): the footer used to jump when the step appeared (CLS 0.17
   desktop / 0.28 phone). Values measured from the rendered step 1. */
.discovery #stage{ min-height:760px; }
@media (max-width:820px){ .discovery #stage{ min-height:910px; } }

/* P3 polish (2026-09-26): 44px tap targets, readable disabled state */
.discovery .stepper__restart{ min-height:44px; padding-inline:8px; }
.discovery .btn--primary[disabled]{ opacity:1; background-color:rgba(23,184,122,.22); color:rgba(255,255,255,.72); box-shadow:none; }