:root{
  --navy:#1e2c4b; --navy-2:#2a3b61; --orange:#d1833c; --orange-d:#a95f22;
  --teal:#307d86; --teal-l:#d7ebec; --cream:#f7f2ea; --sand:#efe6d8;
  --ink:#1b2236; --muted:#5a6175; --line:#e3d9c8; --white:#fff;
  --radius:16px; --shadow:0 10px 30px rgba(30,44,75,.10);
  --serif:"Fraunces",Georgia,serif; --sans:"Manrope",system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
a:hover{color:var(--navy)}
h1,h2,h3{font-family:var(--serif);color:var(--navy);line-height:1.15;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem);letter-spacing:-.02em}
h1 em{font-style:normal;color:var(--orange-d)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.01em;max-width:24ch}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}
.narrow{width:min(760px,100% - 32px)}
.center{text-align:center}
.small{font-size:.9rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 12px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* buttons */
.btn{display:inline-block;background:var(--orange);color:var(--navy);font-weight:700;text-decoration:none;padding:14px 24px;border-radius:999px;border:2px solid var(--orange);transition:transform .15s,background .15s;cursor:pointer;font:700 1rem var(--sans)}
.btn:hover{background:#e0954f;color:var(--navy);transform:translateY(-1px)}
.btn-sm{padding:9px 18px;font-size:.92rem}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-ghost-light{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);padding:10px 20px;border-radius:999px;font:600 .95rem var(--sans);cursor:pointer}
.link-arrow{font-weight:700;text-decoration:none;color:var(--teal)}
.link-arrow::after{content:" →"}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,242,234,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font:600 1.15rem var(--serif)}
.brand b{font-weight:500;color:var(--teal)}
.brand.light{color:#fff}.brand.light b{color:#9fd3d8}
nav{margin-left:auto}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
nav a:hover{color:var(--teal)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:600 .9rem var(--sans);color:var(--navy)}

/* hero */
.hero{padding:72px 0 56px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--teal);margin-bottom:14px}
.eyebrow.light{color:#9fd3d8}
.lede{font-size:1.2rem;color:var(--muted);max-width:56ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 14px}
.hero-note{font-size:.92rem;color:var(--muted)}
.hero-art{position:relative}
.noise-svg{width:90%;overflow:visible}
.noise path{fill:none;stroke-width:2;stroke-linecap:round;opacity:.55;animation:calm 6s ease-in-out infinite alternate}
.noise path:nth-child(1){stroke:var(--orange)}.noise path:nth-child(2){stroke:var(--teal)}.noise path:nth-child(3){stroke:var(--navy)}
.noise path:nth-child(4){stroke:var(--orange)}.noise path:nth-child(5){stroke:var(--teal)}
.signal{stroke:var(--navy);stroke-width:4;fill:none;stroke-dasharray:440;stroke-dashoffset:440;animation:draw 6s ease-in-out infinite alternate}
.nodes circle{fill:var(--cream);stroke:var(--navy);stroke-width:3;opacity:0;animation:pop 6s ease-in-out infinite alternate}
.nodes .end{display:none}
.hero-logo{position:absolute;left:86.25%;top:50%;width:104px;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 16px rgba(30,44,75,.18));animation:arrive 6s ease-in-out infinite alternate}
@keyframes arrive{0%,55%{transform:translate(-50%,-50%) scale(.75) rotate(-40deg)}85%,100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes calm{0%,15%{opacity:.6;transform:none}85%,100%{opacity:.12;transform:scaleY(.08);transform-origin:center 200px}}
@keyframes draw{0%,35%{stroke-dashoffset:440}85%,100%{stroke-dashoffset:0}}
@keyframes pop{0%,60%{opacity:0}85%,100%{opacity:1}}

/* proof */
.proof{background:var(--navy);color:#dfe5f1;padding:40px 0 28px}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.proof strong{display:block;font:600 2.2rem var(--serif);color:var(--orange)}
.proof span{font-size:.92rem}
.creds{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;color:#aab4c9;text-align:center}

/* sections */
.section{padding:96px 0}
.tinted{background:var(--sand)}
.section-lede{font-size:1.1rem;color:var(--muted);max-width:62ch}
.symptoms{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:32px 0}
.symptom{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:22px}
.symptom p{color:var(--muted);margin:0;font-size:.97rem}

.insight{background:var(--navy);color:#dfe5f1}
.insight h2{color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:36px 0}
.stats figure{margin:0;padding:22px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.04)}
.stats strong{display:block;font:600 2.4rem var(--serif);color:var(--orange)}
.stats figcaption{font-size:.92rem}
.stats a{color:#9fd3d8;font-size:.8rem}
.insight-line{font-size:1.15rem;max-width:70ch;color:#fff}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 24px;background:#fff;border:1px solid var(--line);padding:6px;border-radius:999px;width:fit-content}
.tabs button{border:0;background:none;padding:11px 20px;border-radius:999px;font:700 .95rem var(--sans);color:var(--muted);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff}
.panel-intro{font-size:1.1rem;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border-top:4px solid var(--teal)}
#panel-ops .card{border-top-color:var(--orange)}
.card p{color:var(--muted);font-size:.96rem;margin:0}
.combo{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.combo li{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative}
.combo span{flex:none;width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 1.1rem var(--serif)}
.combo li:nth-child(3) span{background:var(--orange);color:var(--navy)}
.combo p{color:var(--muted);margin:0}

/* golden circle */
.gc-grid,.ppt-grid,.rhythm-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hint{font-size:.88rem;color:var(--teal);font-weight:700}
.gc-panel,.ppt-panel{background:#fff;border-radius:var(--radius);padding:22px 24px;border:1px solid var(--line);min-height:150px}
.gc{width:100%;max-width:440px;margin-inline:auto;display:block}
.ring{cursor:pointer;stroke:var(--cream);stroke-width:3;transition:filter .2s,transform .2s}
.ring-where{fill:#e9dcc6}.ring-what{fill:var(--teal)}.ring-how{fill:var(--navy-2)}.ring-why{fill:var(--orange)}
.ring:hover,.ring:focus{filter:brightness(1.08)}
.ring.is-active{stroke:var(--navy);stroke-width:5}
.ring-why.is-active,.ring-how.is-active{stroke:#fff}
.gc-label{text-anchor:middle;font:700 15px var(--sans);letter-spacing:.12em;fill:#fff;pointer-events:none}
.gc-label:last-of-type{fill:var(--navy)}

/* stepper */
.stepper{display:grid;grid-template-columns:300px 1fr;gap:32px;margin-top:36px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;position:relative}
.steps button{width:100%;text-align:left;background:none;border:0;border-left:3px solid var(--line);padding:12px 16px;font:600 1rem var(--sans);color:var(--muted);cursor:pointer;display:flex;gap:12px;align-items:baseline}
.steps button span{font:600 .85rem var(--serif);color:var(--orange-d)}
.steps button[aria-selected=true]{border-left-color:var(--orange);color:var(--navy);background:#fff;border-radius:0 10px 10px 0}
.step-panel{background:#fff;border-radius:var(--radius);padding:36px;box-shadow:var(--shadow);border:1px solid var(--line);min-height:260px;animation:fade .3s}
.step-panel p{color:var(--muted);font-size:1.05rem}
.deliverable{border-top:1px dashed var(--line);padding-top:14px;color:var(--teal)!important;font-weight:700;font-size:.97rem!important}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* venn */
.ppt{width:100%;max-width:440px;margin-inline:auto;display:block}
.venn{cursor:pointer;fill-opacity:.55;stroke:#fff;stroke-width:2;transition:fill-opacity .2s}
.v-people{fill:var(--orange)}.v-process{fill:var(--teal)}.v-tech{fill:var(--navy-2)}
.venn.is-active{fill-opacity:.9}
.venn-core{fill:#fff;stroke:var(--navy);stroke-width:2;cursor:pointer}
.venn-core.is-active{fill:var(--orange)}
.venn-label{text-anchor:middle;font:700 16px var(--sans);fill:#fff;pointer-events:none}
.venn-label.small{font-size:12px;fill:var(--navy)}

/* flow */
.switch-row{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--muted);margin:20px 0}
.switch{width:58px;height:32px;border-radius:999px;border:0;background:#cdbfa8;position:relative;cursor:pointer}
.switch span{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s}
.switch[aria-checked=true]{background:var(--teal)}
.switch[aria-checked=true] span{left:30px}
.flow{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;overflow-x:auto}
.flow-svg{min-width:680px;width:100%}
.fbox rect{fill:var(--cream);stroke:var(--navy);stroke-width:2}
.fbox text{text-anchor:middle;font:600 15px var(--sans);fill:var(--navy)}
.flow path{fill:none;stroke:var(--navy);stroke-width:2}
.arrowhead{fill:var(--navy)}
.flow .loop{stroke:#c0392b;stroke-dasharray:6 5;animation:dash 1.2s linear infinite}
.tag{font:700 13px var(--sans);text-anchor:middle}
.tag.bad{fill:#b03a2e}.tag.good{fill:var(--teal)}
.gate circle{fill:var(--teal)}
.gate text{text-anchor:middle;fill:#fff;font:700 16px var(--sans)}
.gate .tag{fill:var(--teal);font-size:13px}
.after-only,.before-only{transition:opacity .4s}
.flow[data-state=before] .after-only{opacity:0}
.flow[data-state=after] .before-only{opacity:0}
@keyframes dash{to{stroke-dashoffset:-22}}

/* rhythm */
.rhythm-list{list-style:none;padding:0;margin:20px 0 0}
.rhythm-list li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.rhythm-list b{color:var(--navy)}
.rhythm{width:100%;max-width:420px;margin-inline:auto;display:block}
.orbit{fill:none;stroke:#cdbfa8;stroke-width:2;stroke-dasharray:3 6}
.dot{stroke:#fff;stroke-width:3}
.d1{fill:var(--orange)}.d2{fill:var(--teal)}.d3{fill:var(--navy-2)}.d4{fill:var(--orange-d)}
.spin{transform-origin:200px 200px;animation:spin linear infinite}
.s1{animation-duration:4s}.s2{animation-duration:9s}.s3{animation-duration:16s}.s4{animation-duration:28s}
.r-center{text-anchor:middle;font:600 16px var(--serif);fill:var(--navy)}
@keyframes spin{to{transform:rotate(360deg)}}

/* value chain */
.chain{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:c}
.chain li{position:relative;padding:22px 18px 22px 22px;background:#fff;border:1px solid var(--line);margin-right:-1px}
.chain li:nth-child(odd){background:#fffaf2}
.chain li:last-child{background:var(--navy);border-color:var(--navy)}
.chain li:last-child b{color:var(--orange)}.chain li:last-child span{color:#dfe5f1}
.chain b{display:block;font:600 1.15rem var(--serif);color:var(--navy)}
.chain span{font-size:.9rem;color:var(--muted)}
.chain li::before{counter-increment:c;content:counter(c,decimal-leading-zero);font:700 .75rem var(--sans);color:var(--orange-d);display:block;margin-bottom:6px}

/* quiz */
.quiz-section{background:linear-gradient(160deg,var(--navy),#16213a);color:#dfe5f1}
.quiz-section h2{color:#fff}
.quiz{margin-top:28px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:28px}
.q-progress{height:6px;background:rgba(255,255,255,.12);border-radius:9px;overflow:hidden}
.q-progress span{display:block;height:100%;width:0;background:var(--orange);transition:width .3s}
.q-count{font-size:.85rem;color:#9fd3d8;margin:14px 0 6px}
.q-text{font:500 1.35rem/1.4 var(--serif);color:#fff;margin-bottom:20px}
.q-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.q-options button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:12px;padding:14px 10px;font:600 .95rem var(--sans);cursor:pointer}
.q-options button:hover,.q-options button:focus{background:var(--orange);color:var(--navy);border-color:var(--orange)}
.quiz-nav{margin-top:18px}
.quiz-result{margin-top:28px;background:#fff;color:var(--ink);border-radius:20px;padding:32px}
.quiz-result h3{font-size:1.5rem}
.bars{margin:20px 0}
.bar{display:grid;grid-template-columns:110px 1fr 48px;gap:12px;align-items:center;margin:10px 0;font-weight:700}
.bar i{display:block;height:12px;border-radius:9px;background:var(--line);overflow:hidden}
.bar i b{display:block;height:100%;background:var(--teal);transition:width .6s}
.bar.top i b{background:var(--orange)}

/* about */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.portrait{margin:0;position:sticky;top:100px}
.portrait img{border-radius:50%;box-shadow:0 0 0 10px var(--sand),0 0 0 12px var(--orange)}
.about-grid p{color:#3a4157}
.badges{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.badges li{background:var(--teal-l);color:#1d5359;border-radius:999px;padding:7px 14px;font-size:.86rem;font-weight:700}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:28px}
.quote{background:#fff;border-radius:var(--radius);padding:28px;border:1px solid var(--line)}
.quote p{font:500 1.1rem/1.55 var(--serif);color:var(--navy)}
.quote cite{font-style:normal;font-weight:700;color:var(--muted);font-size:.9rem}

/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font:600 1.12rem var(--serif);color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--orange-d);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:12px 0 0;color:var(--muted)}

/* contact */
.contact{background:var(--navy);color:#dfe5f1}
.contact h2{color:#fff}
.contact a:not(.btn){color:#9fd3d8}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-form{background:#fff;border-radius:20px;padding:30px;color:var(--ink);display:grid;gap:14px}
.contact-form label{display:grid;gap:6px;font-weight:700;font-size:.92rem;color:var(--navy)}
.contact-form input,.contact-form textarea{font:400 1rem var(--sans);padding:12px 14px;border:1px solid #cfc4b1;border-radius:10px;background:#fffdf9}
.opt{font-weight:400;color:var(--muted)}
.hp{position:absolute;left:-5000px}
.form-status{margin:0;font-weight:700}
.form-status.ok{color:var(--teal)}.form-status.err{color:#b03a2e}

/* footer */
.site-footer{background:#141d33;color:#aab4c9;padding:36px 0;font-size:.9rem}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:24px;justify-content:space-between}
.site-footer ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.site-footer a{color:#dfe5f1;text-decoration:none}
.site-footer p{margin:0}

/* simple pages */
.page{padding:64px 0}
.page h2{font-size:1.4rem;margin-top:1.6em}

/* responsive */
@media (max-width:960px){
  .hero-grid,.gc-grid,.ppt-grid,.rhythm-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .proof-grid,.stats{grid-template-columns:repeat(2,1fr)}
  .symptoms{grid-template-columns:repeat(2,1fr)}
  .stepper{grid-template-columns:1fr}
  .steps{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .steps button{border-left:0;border-bottom:3px solid var(--line);white-space:nowrap}
  .steps button[aria-selected=true]{border-bottom-color:var(--orange);border-radius:10px 10px 0 0}
  .chain{grid-template-columns:repeat(3,1fr)}
  .combo{grid-template-columns:1fr}
  .portrait{position:static;max-width:320px}
  .hero-art{max-width:480px}
  .ppt-wrap{order:2}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  nav{position:absolute;top:72px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);display:none}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;padding:8px 16px}
  nav li a{display:block;padding:12px 0}
  .header-row .btn-sm{display:none}
  .section{padding:68px 0}
  .symptoms{grid-template-columns:1fr}
  .q-options{grid-template-columns:repeat(2,1fr)}
  .chain{grid-template-columns:1fr 1fr}
  .tabs{border-radius:16px;width:100%}
  .tabs button{flex:1 1 auto}
  .bar{grid-template-columns:90px 1fr 40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .noise path{opacity:.15}.signal{stroke-dashoffset:0}.nodes circle{opacity:1}
}
