/* ================================================================
   Tuesdays — CREATE DEMAND page styles
   Shared tokens/nav/footer/buttons live in shared.css.
   Force tints reuse The Fluid Approach's pastel family (sand / sage /
   sky / lavender) so the page sits inside the existing palette.
   Close band is page-scoped pastel purple (client dislikes black),
   same reasoning as mediapods.css / fluid-approach.css.
   ================================================================ */
:root{
  --brand-tint:#F7EEDB;  --brand-ink:#8A6A2E;
  --content-tint:#E6EEE5;--content-ink:#4C7A5C;
  --perf-tint:#DFEAF1;   --perf-ink:#2F5C82;
  --infl-tint:#EAE4EE;   --infl-ink:#7A5A94;
  /* one vertical rhythm for every section on this page */
  --cd-gap:clamp(72px,8vw,120px);
}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ---------- HERO ---------- */
.cd-hero{position:relative;padding-top:150px;padding-bottom:0;overflow:hidden}
.cd-section{padding-top:var(--cd-gap)}
.cd-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,60px);align-items:center}
.cd-hero .crumb{margin-bottom:28px}
.cd-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.025em;max-width:14ch}
.cd-hero h1 .word{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .14em;margin:-.08em -.14em}
.cd-hero h1 .word i{display:inline-block;font-style:normal}
.cd-hero h1 em{font-style:italic;color:var(--accent)} /* same treatment as Services hero */
.cd-hero .sub{margin-top:26px;max-width:50ch;font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--ink-soft);line-height:1.6}
.cd-hero .sub strong{color:var(--ink);font-weight:600}
.cd-strap{margin-top:30px;font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.75rem);letter-spacing:-.01em;display:flex;flex-wrap:wrap;gap:.35em}
.cd-strap span:first-child{color:var(--ink)}
.cd-strap span:last-child{color:var(--accent);font-style:italic}
.engine-wrap{position:relative;width:100%;aspect-ratio:1/1;max-width:540px;margin:0 auto}
.engine-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:900px){.cd-hero-grid{grid-template-columns:1fr;gap:20px}.engine-wrap{max-width:420px}}

/* ---------- SECTION HEADINGS ---------- */
.cd-h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.05;letter-spacing:-.025em;max-width:20ch}

/* ---------- SHARED MEDIA SLOT ----------
   A tinted, softly-animated fallback sits under every <img>. If the image
   file is missing, the img removes itself (onerror) and the fallback shows,
   so the page never displays a broken-image icon. */
.media{position:relative;overflow:hidden;border-radius:24px;background:var(--paper-2)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.media-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media-fallback::before,.media-fallback::after{content:'';position:absolute;border-radius:50%;opacity:.55;animation:blob 14s ease-in-out infinite alternate}
.media-fallback::before{width:70%;aspect-ratio:1;left:-12%;top:-18%;background:rgba(255,255,255,.55)}
.media-fallback::after{width:55%;aspect-ratio:1;right:-10%;bottom:-20%;background:rgba(255,255,255,.35);animation-delay:-6s}
@keyframes blob{to{transform:translate(12%,10%) scale(1.12)}}
.media-fallback .ico{position:relative;z-index:1;font-size:clamp(64px,9vw,120px);stroke-width:1}
.media[data-tone="brand"]{background:var(--brand-tint);color:var(--brand-ink)}
.media[data-tone="content"]{background:var(--content-tint);color:var(--content-ink)}
.media[data-tone="performance"]{background:var(--perf-tint);color:var(--perf-ink)}
.media[data-tone="influence"]{background:var(--infl-tint);color:var(--infl-ink)}
.media[data-tone="entry"],.media[data-tone="penetration"],.media[data-tone="pipeline"],.media[data-tone="authority"]{background:var(--accent-tint);color:var(--accent-deep)}

/* ---------- FOUR FORCES ---------- */
.forces{margin-top:clamp(40px,5vw,70px);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,80px)}
.force-stage{position:relative}
.force-stage-in{position:sticky;top:110px;height:calc(100vh - 150px);max-height:640px}
.force-stage .media{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.force-stage .media.is-on{opacity:1;transform:none}
.stage-badge{position:absolute;left:24px;bottom:24px;z-index:3;width:64px;height:64px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:28px;box-shadow:0 14px 30px -14px rgba(22,24,29,.35);transition:transform .5s var(--ease)}
.stage-badge.pop{animation:badgePop .6s var(--ease)}
@keyframes badgePop{0%{transform:scale(.6) rotate(-30deg)}100%{transform:none}}

.force{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.3;transition:opacity .6s var(--ease)}
.force.is-active{opacity:1}
.force:last-child{min-height:0;padding-bottom:0;padding-top:clamp(60px,12vh,140px)}
.force .media--inline{display:none}
.force-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:9px 18px 9px 12px;border-radius:100px;align-self:flex-start}
.force-label .ico{font-size:20px}
.force[data-tone="brand"] .force-label{background:var(--brand-tint);color:var(--brand-ink)}
.force[data-tone="content"] .force-label{background:var(--content-tint);color:var(--content-ink)}
.force[data-tone="performance"] .force-label{background:var(--perf-tint);color:var(--perf-ink)}
.force[data-tone="influence"] .force-label{background:var(--infl-tint);color:var(--infl-ink)}
.ico.draw{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.2s var(--ease) .1s}
.force.is-active .ico.draw{stroke-dashoffset:0}
.force h3{margin-top:22px;font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.02em;max-width:18ch}
.force p{margin-top:16px;max-width:50ch;color:var(--ink-soft);font-size:1.06rem;line-height:1.65}

.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.tags li{font-size:.86rem;font-weight:500;padding:8px 14px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--ink);transition:border-color .3s var(--ease),color .3s var(--ease)}
.tags li:hover{border-color:var(--accent);color:var(--accent)}
.force .tags li{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.force.is-active .tags li{opacity:1;transform:none}

@media(max-width:900px){
  .forces{grid-template-columns:1fr;gap:0}
  .force-stage{display:none}
  .force{min-height:0;opacity:1;padding:34px 0;border-top:1px solid var(--line)}
  .force:first-child{border-top:none}
  .force .media--inline{display:block;aspect-ratio:16/10;margin-bottom:24px}
  .force .tags li{opacity:1;transform:none}
  .force .ico.draw{stroke-dashoffset:0}
}

/* ---------- TWO JOBS ---------- */
.jobs{position:relative;margin-top:clamp(40px,5vw,64px);display:flex;min-height:clamp(420px,52vw,560px);border-radius:28px;overflow:hidden;background:var(--paper-2)}
.jobs canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.job{position:relative;z-index:1;flex:1 1 0;padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;justify-content:flex-start;transition:flex-grow .7s var(--ease)}
.job--capture{justify-content:flex-end;text-align:right;align-items:flex-end}
.job--create{background:linear-gradient(90deg,rgba(247,238,219,.55),transparent)}
.job--capture{background:linear-gradient(270deg,rgba(253,237,232,.7),transparent)}
.jobs.lean-create .job--create,.jobs.lean-capture .job--capture{flex-grow:1.45}
.job h3{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,5vw,4rem);line-height:1;letter-spacing:-.03em}
.job--capture h3{color:var(--accent)}
.job p{margin-top:16px;max-width:34ch;color:var(--ink-soft);font-size:1.04rem;line-height:1.6}
.formula{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.job--capture .formula{justify-content:flex-end}
.formula span{font-size:.88rem;font-weight:600;padding:8px 14px;border-radius:100px;background:rgba(255,255,255,.85);backdrop-filter:blur(4px)}
.formula b{font-family:var(--serif);font-weight:500;color:var(--accent);font-size:1.2rem}
.jobs .formula span,.jobs .formula b{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.jobs.in .formula span,.jobs.in .formula b{opacity:1;transform:none}
@media(max-width:760px){
  .jobs{flex-direction:column;min-height:0}
  .job,.job--capture{text-align:left;align-items:flex-start;justify-content:flex-start;padding:32px 26px}
  .job--capture{padding-top:150px}
  .job--capture .formula{justify-content:flex-start}
  .job--create{padding-bottom:150px;background:none}.job--capture{background:none}
}

/* ---------- COMMERCIAL MOMENTUM (pinned horizontal scroll) ----------
   JS sets the section's height so vertical scroll maps to the track's
   horizontal travel. Without JS / on mobile / reduced motion it simply
   stacks vertically. */
.cd-moment{position:relative}
.moment-sticky{position:relative}
.cd-moment.is-pinned .moment-sticky{position:sticky;top:var(--nav-h,80px);display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
.moment-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:clamp(26px,3vw,40px)}
.moment-progress{flex:0 0 clamp(120px,18vw,240px);height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:12px}
.moment-progress span{display:block;height:100%;width:0;background:var(--accent)}
.moment-viewport{padding:0 var(--gutter)}
.moment-track{display:flex;gap:clamp(18px,2.4vw,32px);will-change:transform}
.moment{flex:0 0 min(80vw,1040px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:center;background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(14px,1.4vw,18px)}
.moment-media{aspect-ratio:4/4.2;max-height:58vh;width:100%;border-radius:20px}
.moment-media img{transform:scale(1.15);transition:transform .2s linear}
.moment-body{padding:clamp(10px,2vw,30px) clamp(10px,2vw,30px) clamp(10px,2vw,30px) 0}
.moment-label{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.moment-label .ico{font-size:22px}
.moment h3{margin-top:18px;font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.12;letter-spacing:-.02em}
.moment p{margin-top:16px;color:var(--ink-soft);font-size:1.02rem;line-height:1.62;max-width:46ch}
.moment .tags{margin-top:22px}
.moment .tags li{background:var(--bg)}
@media(max-width:900px){
  .moment-head{display:block}.moment-progress{display:none}
  .moment-track{flex-direction:column}
  .moment{flex:none;grid-template-columns:1fr}
  .moment-media{aspect-ratio:16/10;max-height:none}
  .moment-media img{transform:none}
  .moment-body{padding:6px 10px 18px}
}

/* ---------- CLOSE (pastel purple) ---------- */
.cd-close{position:relative;overflow:hidden;background:var(--cta-purple);color:var(--cta-ink);margin-top:var(--cd-gap);text-align:center}
.cd-close-in{position:relative;z-index:1}
.cd-close h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,5vw,4rem);line-height:1.06;letter-spacing:-.025em;max-width:20ch;margin:0 auto}
.cd-close p{margin:24px auto 0;max-width:48ch;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;opacity:.85}
.cd-close .cta-row{margin-top:40px}
.close-orbit{position:absolute;width:min(980px,130vw);left:50%;top:50%;transform:translate(-50%,-50%);opacity:.4;pointer-events:none}
.co-ring{fill:none;stroke:var(--cta-ink);stroke-opacity:.18;stroke-dasharray:3 7}
.co-spin{transform-origin:200px 200px;animation:coSpin 26s linear infinite}
.co-spin circle{fill:#fff}
.co-spin circle:nth-child(1){fill:var(--brand-ink)}.co-spin circle:nth-child(2){fill:var(--content-ink)}
.co-spin circle:nth-child(3){fill:var(--perf-ink)}.co-spin circle:nth-child(4){fill:var(--infl-ink)}
.co-core{fill:var(--accent);opacity:.25;transform-origin:200px 200px;animation:coPulse 3s ease-in-out infinite}
@keyframes coSpin{to{transform:rotate(360deg)}}
@keyframes coPulse{50%{transform:scale(1.35);opacity:.12}}
button.btn{border:none;cursor:pointer;font-family:var(--sans)}

/* focus visibility for keyboard users */
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

@media(prefers-reduced-motion:reduce){
  .force{opacity:1}.force .tags li{opacity:1;transform:none}.ico.draw{stroke-dashoffset:0}
  .jobs .formula span,.jobs .formula b{opacity:1;transform:none}
}