/* ============================================================
   JOINERY v3 — SHARED WORLD  (load after styles.css)
   cinematic · crafted · funky · growth
   ============================================================ */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");}
body.v3{background:var(--paper);}
@media (hover:hover) and (pointer:fine){
  body.v3{cursor:url("assets/cursor-leaf.png") 3 3, auto;}
  body.v3 a,body.v3 button,body.v3 .v3-mag,body.v3 [data-cursor]{cursor:url("assets/cursor-leaf-red.png") 3 3, pointer;}
}

/* ---------- scroll reveals ---------- */
.v3r{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
.v3r.in{opacity:1;transform:none;}
.v3r2{transition-delay:.08s;} .v3r3{transition-delay:.16s;} .v3r4{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){.v3r{opacity:1;transform:none;}}

/* ---------- display type helpers ---------- */
.v3-display{font-family:var(--serif);font-weight:600;line-height:.92;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;margin:0;}
.v3-xl{font-size:clamp(3.2rem,10vw,9rem);}
.v3-lg{font-size:clamp(2.4rem,6vw,5rem);}
.v3-md{font-size:clamp(2rem,4.6vw,3.6rem);}
.v3-ital{font-style:italic;}
.v3-seeded::after{content:"";display:inline-block;width:.4em;height:.4em;border-radius:50%;background:var(--chartreuse);margin-left:.14em;vertical-align:.06em;}
.v3-lede{font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.5;color:var(--ink-2);}
.v3-mono{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;}

/* ---------- section grounds ---------- */
.v3-sec{padding:clamp(64px,9vw,120px) 0;position:relative;}
.v3-dark{background:var(--ink);color:var(--paper);overflow:hidden;}
.v3-dark .v3-display,.v3-dark h1,.v3-dark h2,.v3-dark h3{color:var(--paper);}
.v3-dark .v3-lede{color:var(--paper-2);}
.v3-grain{position:relative;}
.v3-grain::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.05;mix-blend-mode:screen;pointer-events:none;z-index:0;}
.v3-grain>*{position:relative;z-index:1;}
.v3-tint{background:var(--paper-2);}
.v3-line-top{border-top:var(--line) solid var(--ink);}
.v3-line-bottom{border-bottom:var(--line) solid var(--ink);}

/* ---------- floating chartreuse seeds (cursor parallax) ---------- */
.v3-dots{position:absolute;inset:0;z-index:1;pointer-events:none;}
.v3-dot{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);transform:translate(0,0);transition:transform .9s cubic-bezier(.22,1,.36,1);will-change:transform;}
.v3-dot i{display:block;width:100%;height:100%;border-radius:50%;background:var(--chartreuse);opacity:var(--o,.85);box-shadow:0 0 calc(var(--s)*.7) rgba(201,232,74,.4);animation:v3float var(--fd,7s) ease-in-out infinite;animation-delay:var(--fdl,0s);}
.v3-dot.ring i{background:transparent;border:2px solid var(--chartreuse);box-shadow:none;}
.v3-dot.red i{background:var(--red);box-shadow:0 0 calc(var(--s)*.7) rgba(232,74,50,.35);}
@keyframes v3float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(calc(var(--s)*-.55)) scale(1.05);}}
@media (max-width:760px){.v3-dot[data-hide]{display:none;}.v3-dot{opacity:.55;}}
@media (prefers-reduced-motion:reduce){.v3-dot i{animation:none;}.v3-dot{transition:none;}}

/* ---------- magnetic buttons ---------- */
.v3-mag{display:inline-flex;transition:transform .2s cubic-bezier(.22,1,.36,1);}

/* ---------- pills / tags ---------- */
.v3-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;border:2px solid currentColor;border-radius:999px;padding:6px 13px;}
.v3-chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:7px 13px;border-radius:999px;}

/* ---------- stacked service cards (sticky stack) ---------- */
.v3-cardstack{position:relative;}
.v3-card{position:sticky;top:var(--t,96px);display:flex;flex-direction:column;border-radius:24px;border:var(--line) solid var(--ink);box-shadow:0 -10px 40px rgba(23,23,23,.14);padding:clamp(28px,3.6vw,52px);min-height:clamp(360px,46vw,460px);margin-bottom:26px;text-decoration:none;color:var(--ink);overflow:hidden;}
.v3-card:nth-child(1){--t:92px;}.v3-card:nth-child(2){--t:116px;}.v3-card:nth-child(3){--t:140px;}.v3-card:nth-child(4){--t:164px;}.v3-card:nth-child(5){--t:188px;}.v3-card:nth-child(6){--t:212px;}
.v3-card .ci-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;}
.v3-card .ci-body{margin-top:auto;}
.v3-card h3{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,5vw,3.8rem);line-height:.98;letter-spacing:-.015em;margin:0 0 14px;max-width:16ch;}
.v3-card p{font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.46;max-width:42ch;margin:0;}
.v3-card .ci-go{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:1rem;}
.v3-card .ci-go .arw{transition:transform .25s ease;}
.v3-card:hover .ci-go .arw{transform:translate(4px,-4px);}
.v3-card .ci-dots{display:flex;gap:9px;margin:4px 0 16px;}
.v3-card .ci-dots i{width:15px;height:15px;border-radius:50%;}
.c-web{background:var(--red);color:var(--ink);}.c-web .ci-go{color:var(--ink);}
.c-brand{background:var(--ink);color:var(--paper);}.c-brand .ci-go{color:var(--chartreuse);}
.c-social{background:var(--chartreuse);color:var(--ink);}
.c-consult{background:var(--blue);color:#fff;}.c-consult .ci-go{color:#fff;}
.c-build{background:var(--paper);color:var(--ink);box-shadow:0 -10px 40px rgba(23,23,23,.14),0 0 0 2px var(--ink) inset;}.c-build .ci-top{color:var(--red-ink);opacity:1;}.c-build .ci-go{color:var(--red-ink);}

/* ---------- hover-reveal index (cursor-follow image) ---------- */
.v3-wkx{position:relative;}
.v3-wkx-img{position:fixed;left:0;top:0;max-width:min(230px,34vw);max-height:280px;width:auto;height:auto;object-fit:contain;opacity:0;pointer-events:none;z-index:50;transition:opacity .3s ease;box-shadow:0 20px 56px rgba(0,0,0,.5);will-change:transform;}
.v3-wkx.show .v3-wkx-img{opacity:1;}
.v3-wkrow{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:22px;padding:clamp(18px,2.4vw,28px) 4px;border-top:1px solid rgba(244,239,229,.15);text-decoration:none;color:var(--paper);position:relative;z-index:6;transition:color .3s ease;}
.v3-wkrow:last-of-type{border-bottom:1px solid rgba(244,239,229,.15);}
.v3-wkrow .n{font-family:var(--mono);font-size:.78rem;color:var(--paper-3);transition:color .3s;}
.v3-wkrow .nm{font-family:var(--sans);font-weight:600;font-size:clamp(1.3rem,2.6vw,2.05rem);letter-spacing:-.005em;transition:transform .3s cubic-bezier(.22,1,.36,1),color .3s;}
.v3-wkrow .cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-3);transition:color .3s;}
.v3-wkx.show .v3-wkrow .nm{color:rgba(244,239,229,.32);}
.v3-wkx.show .v3-wkrow .n,.v3-wkx.show .v3-wkrow .cat{color:rgba(244,239,229,.22);}
.v3-wkrow.is-active .nm{color:var(--chartreuse)!important;transform:translateX(14px);}
.v3-wkrow.is-active .n,.v3-wkrow.is-active .cat{color:var(--chartreuse)!important;}
@media (hover:none){.v3-wkx-img{display:none;}.v3-wkrow .nm{color:var(--paper)!important;}}
@media (max-width:640px){.v3-wkx-img{display:none;}.v3-wkrow{grid-template-columns:38px 1fr;gap:14px;}.v3-wkrow .cat{display:none;}}

/* ---------- physics chip playground (matter.js) ---------- */
.v3-physics{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.v3-physics.is-physics{display:block;position:relative;height:clamp(230px,30vw,300px);overflow:hidden;margin-top:26px;cursor:grab;touch-action:none;}
.v3-physics.is-physics:active{cursor:grabbing;}
.v3-physics.is-physics .v3-chip{will-change:transform;user-select:none;}

/* ---------- marquee ---------- */
.v3-marquee{overflow:hidden;border-top:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);padding:0;background:var(--paper);}
.v3-mq-track{display:inline-flex;white-space:nowrap;animation:v3mq 32s linear infinite;}
.v3-mq-track span{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.6rem);padding:20px 0;display:inline-flex;align-items:center;color:var(--ink);}
.v3-mq-track span::after{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--chartreuse);margin:0 34px;}
@keyframes v3mq{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.v3-mq-track{animation:none;}}

/* ---------- reusable CTA band ---------- */
.v3-cta{text-align:center;}
.v3-cta h2{margin:0 0 20px;}
.v3-cta p{color:var(--paper-2);font-size:1.15rem;max-width:48ch;margin:0 auto 32px;}

/* ---------- joining-dots: the connective signature ---------- */
/* the 5 service colors drift together into one cluster, then spread back */
.v3-merge{display:inline-flex;align-items:center;gap:0;height:18px;line-height:0;}
.v3-merge i{display:block;width:17px;height:17px;border-radius:50%;background:var(--c,var(--ink));animation:v3merge var(--md,4.5s) cubic-bezier(.6,0,.4,1) infinite;will-change:transform;}
.v3-merge i:nth-child(1){--c:var(--red);--mx:34px;}
.v3-merge i:nth-child(2){--c:var(--ink);--mx:17px;}
.v3-merge i:nth-child(3){--c:var(--chartreuse);--mx:0px;}
.v3-merge i:nth-child(4){--c:var(--blue);--mx:-17px;}
.v3-merge i:nth-child(5){--c:var(--red-ink);--mx:-34px;}
.v3-merge.on-dark i:nth-child(2){--c:var(--paper);}
.v3-merge.on-dark i:nth-child(4){--c:var(--blue-lite);}
.v3-merge.on-dark i:nth-child(5){--c:#fff;}
.v3-merge.sm i{width:13px;height:13px;}
.v3-merge.sm i:nth-child(1){--mx:26px;}.v3-merge.sm i:nth-child(2){--mx:13px;}.v3-merge.sm i:nth-child(3){--mx:0px;}.v3-merge.sm i:nth-child(4){--mx:-13px;}.v3-merge.sm i:nth-child(5){--mx:-26px;}
@keyframes v3merge{0%,32%{transform:translateX(0);}60%,74%{transform:translateX(var(--mx,0));}100%{transform:translateX(0);}}
@media(prefers-reduced-motion:reduce){.v3-merge i{animation:none;}}

/* ============================================================
   COHESION LAYER — soften every edge to the brand's round language
   (scoped to body.v3 so it reshapes the whole v3 world at once)
   ============================================================ */
:root{--r-sm:12px;--r-md:18px;--r-lg:26px;--r-xl:34px;}

/* buttons → pills, the brand's core shape */
body.v3 .btn{border-radius:999px;}

/* big panels & cards */
body.v3 .tier,body.v3 .care,body.v3 .care--mid,body.v3 .care-fine,body.v3 .care-included,
body.v3 .cfg,body.v3 .vibe-board,body.v3 .router-panel,body.v3 .roadmap,body.v3 .dash-mock,
body.v3 .selfmanage,body.v3 .calc-card,body.v3 .sp-case,body.v3 .cta-band,body.v3 .mstep{
  border-radius:var(--r-lg);overflow:hidden;}
body.v3 .cfg,body.v3 .vibe-board,body.v3 .cal,body.v3 .cfg-step,body.v3 .vb-swatches{overflow:hidden;}

/* medium blocks */
body.v3 .build-card,body.v3 .step,body.v3 .faq-item,body.v3 .bd-readout,body.v3 .calc-out,
body.v3 .cfg-summary,body.v3 .vb-app,body.v3 .vb-post,body.v3 .vibe-note,body.v3 .cal,
body.v3 .care-price,body.v3 .sp-signs>div,body.v3 .process-grid .step{border-radius:var(--r-md);}

/* small controls & chips → soft or pill */
body.v3 .cfg-base,body.v3 .cfg-opt,body.v3 .vibe-opt,body.v3 .router-opt,body.v3 .cal-post,
body.v3 .tier-best,body.v3 .vb-mark,body.v3 .dash-field,body.v3 .dash-area,body.v3 .dash-upload,
body.v3 .dash-publish,body.v3 input,body.v3 textarea,body.v3 select,body.v3 .calc-field input{
  border-radius:var(--r-sm);}
body.v3 .cfg-step,body.v3 .menu-btn,body.v3 .vb-chip,body.v3 .calc-kicker,body.v3 .tier-flag,
body.v3 .tier-eyebrow,body.v3 .pillars button,body.v3 .pill,body.v3 .sm-pick,
body.v3 .cfg-step button{border-radius:999px;}

/* pill the step +/- ends cleanly */
body.v3 .cfg-step{padding:2px;gap:2px;}
body.v3 .cfg-step button{width:36px;}
body.v3 .cfg-step .val{display:flex;align-items:center;}

/* swatches: round the group, square the chips inside */
body.v3 .vb-swatches{border-radius:999px;}
body.v3 .vb-sw:first-child{border-top-left-radius:999px;border-bottom-left-radius:999px;}
body.v3 .vb-sw:last-child{border-top-right-radius:999px;border-bottom-right-radius:999px;}

/* crafted motif: gentle independent bob for floating accent shapes */
body.v3 .sp-motif .bob{animation:spBob 5.4s ease-in-out infinite;transform-origin:center;}
@keyframes spBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@media(prefers-reduced-motion:reduce){body.v3 .sp-motif .bob{animation:none;}}

/* craft: soft lift + warmer shadow on interactive cards */
body.v3 .build-card,body.v3 .tier,body.v3 .sp-case,body.v3 .vibe-opt,body.v3 .router-opt,body.v3 .step{
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,border-color .28s ease;}
body.v3 .build-card:hover,body.v3 .tier:hover,body.v3 .sp-case:hover,body.v3 .step:hover{
  transform:translateY(-5px);}
@media(prefers-reduced-motion:reduce){body.v3 .build-card:hover,body.v3 .tier:hover,body.v3 .sp-case:hover,body.v3 .step:hover{transform:none;}}

/* --- second pass: interior components the first pass missed --- */
/* cards & panels */
body.v3 .notif,body.v3 .train-tier,body.v3 .rm-card,body.v3 .mil,body.v3 .dir-band,
body.v3 .dir-not,body.v3 .addon-block,body.v3 .manifesto,body.v3 .stuck-tally,body.v3 .ladder{
  border-radius:var(--r-lg);overflow:hidden;}
body.v3 .rm-step,body.v3 .rm-room{border-radius:var(--r-md);}
/* icon badges / small toggles → soft rounded squares */
body.v3 .ic{border-radius:13px;}
/* square toggles / checkboxes / timeline nodes → circles */
body.v3 .bx,body.v3 .stuck .box,body.v3 .fn-dot,body.v3 .rm-dot{border-radius:50%;}
/* chips, price pills & inline highlights → pill */
body.v3 .rprice,body.v3 .rm-tag,body.v3 .tt-flag,body.v3 .price-hl,body.v3 .mk,body.v3 .dir-amt,
body.v3 .dir-price,body.v3 .notfor-yes,body.v3 .notfor-no,body.v3 mark{
  border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
/* hover life on the new cards */
body.v3 .notif,body.v3 .train-tier,body.v3 .rm-card,body.v3 .box{
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease;}
body.v3 .notif:hover,body.v3 .train-tier:hover{transform:translateY(-4px);}
@media(prefers-reduced-motion:reduce){body.v3 .notif:hover,body.v3 .train-tier:hover{transform:none;}}

/* --- third pass (2026-10-17): finish the round language site-wide --- */
/* process/step number tiles → uniform chartreuse circles with black numerals */
body.v3 .step .num,body.v3 .process-grid .num{background:var(--chartreuse);color:var(--ink);border-radius:50%;}
/* remaining square symbol marks & icon badges → circles */
body.v3 .vb-mark,body.v3 .lk-mark,body.v3 .ic,body.v3 .notif .ic,body.v3 .qo-key,body.v3 .pb-check{border-radius:50%;}
/* inline text highlights → pills */
body.v3 .web-hl,body.v3 .brand-hl,body.v3 .ai-hl,body.v3 .fl-hl,body.v3 .so-hl,body.v3 .cs-hl,
body.v3 .sm-copy .hl,body.v3 .hl{
  border-radius:999px;padding:.05em .45em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
/* remaining rectangular card containers → rounded edges */
body.v3 .wall-cta,body.v3 .lm-box{border-radius:var(--r-lg);}
/* let overhanging "most popular / most complete" flags show (rounding had added overflow:hidden) */
body.v3 .tier,body.v3 .train-tier{overflow:visible;}

/* intake form shells round like the v3 project form (shared, so per-service forms match) */
body.v3 .form-shell{border-radius:var(--r-lg);overflow:hidden;}
body.v3 .audit-box,body.v3 .wall-cta,body.v3 .notif,body.v3 .svc-sum,body.v3 .svc-body{border-radius:var(--r-md);}

/* page-specific cards on the migrated utility pages (work / builder / audit) → round */
body.v3 .wm-audit,body.v3 .wm-multi,body.v3 .offer,body.v3 .pb-tile,body.v3 .quiz{border-radius:var(--r-lg);overflow:hidden;}
body.v3 .quiz-opt{border-radius:var(--r-md);}
body.v3 .wm-a-btn{border-radius:999px;}
