/* Stage */
.josh-story{margin:0;width:100%;min-width:0;--scene-progress:0%;--loop:running;color:#293e35}
.josh-story.is-paused{--loop:paused}
.story-art{container-type:inline-size;position:relative;width:100%;aspect-ratio:1;isolation:isolate;font:16px/1.3 Arial,sans-serif}
.story-art:before{content:"";position:absolute;inset:6% 2% 1%;border-radius:49% 51% 47% 53%;background:radial-gradient(ellipse at 60% 25%,#f4f6e9 0,#e4ebdc 70%);border:1px solid #d8dfd0;z-index:-2}
.story-art:after{content:"";position:absolute;left:14%;right:14%;bottom:5%;height:7%;border-radius:50%;background:#3657410d;z-index:-1}
.story-organize .story-art:before{background:radial-gradient(ellipse at 60% 25%,#faf5e6 0,#ece5d2 75%);border-color:#e0d8c4}
.story-scenery{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:50%}.story-scenery span{position:absolute;width:6%;height:13%;border-radius:100% 0 100% 0;background:#7f9c7223;bottom:10%;left:6%;transform:rotate(-18deg)}.story-scenery span:nth-child(2){left:9%;bottom:5%;transform:rotate(33deg);height:18%}.story-scenery span:nth-child(3){left:auto;right:4%;bottom:15%;transform:rotate(7deg);height:19%}.story-organize .story-scenery span{background:#b09b7420}
.scene-bit{position:absolute;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;pointer-events:none}
.scene-bit.is-on{opacity:1;visibility:visible;transition-delay:.15s}

/* Cast */
.story-person{position:absolute;left:50%;top:50%;width:22%;translate:-50% -50%;z-index:6;transition:left .9s cubic-bezier(.45,0,.2,1),top .9s cubic-bezier(.45,0,.2,1),width .9s cubic-bezier(.45,0,.2,1),opacity .5s,translate .9s cubic-bezier(.45,0,.2,1)}
.story-person.is-away{opacity:0;scale:.6}
.portrait{position:relative;aspect-ratio:1;border:max(3px,.9cqw) solid #fff;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 1.2cqw 3cqw #28483830;transition:box-shadow .3s}
.portrait svg{display:block;width:100%;height:100%}
.josh-story[data-speaker="owner"] .person-owner .portrait,.josh-story[data-speaker="josh"] .person-josh .portrait{box-shadow:0 0 0 1.3cqw #ffffffb8,0 1.2cqw 3.4cqw #28483838;animation:talk 1.4s ease-in-out infinite;animation-play-state:var(--loop)}
.person-name{position:absolute;left:50%;top:calc(100% + 1.3cqw);translate:-50% 0;font:600 3cqw/1 Arial,sans-serif;color:#536657;white-space:nowrap;transition:opacity .3s}
.story-organize[data-step="0"] .person-owner .person-name,.story-detective[data-step="1"] .person-name{opacity:0}
.mood{display:none}
[data-mood="listen"] .mood-listen,[data-mood="think"] .mood-think,[data-mood="happy"] .mood-happy,[data-mood="curious"] .mood-curious,[data-mood="worried"] .mood-worried{display:inline}
.eye{transform-box:fill-box;transform-origin:center;animation:blink 5.2s infinite;animation-play-state:var(--loop)}
.person-owner .eye{animation-delay:-2.4s}
.person-prop{position:absolute;pointer-events:none;opacity:0;z-index:2;transition:opacity .25s,transform .65s cubic-bezier(.2,1.45,.35,1)}
.person-prop svg{display:block;width:100%;height:auto;overflow:visible}
.person-prop.is-on{opacity:1}
.hat-detective{left:5%;top:-16%;width:90%;transform:translateY(-70%) scale(.7)}
.hat-detective.is-on{transform:none}
.story-detective[data-step="3"] .hat-detective{animation:hat-tip 1.1s 1.1s ease-in-out both}
.hat-wizard{left:11%;top:-36%;width:78%;transform:translateY(-40%) scale(.6)}
.hat-wizard.is-on{transform:none}
.magnifier{left:70.6%;top:22.6%;width:70%;transform-origin:22% 82%;transform:rotate(30deg) scale(.3)}
.magnifier.is-on{transform:rotate(-15deg)}
.story-detective[data-step="1"] .magnifier.is-on{animation:lens-look 1.1s ease-in-out infinite alternate;animation-play-state:var(--loop)}
.wand{left:-40.6%;top:22.6%;width:70%;transform-origin:78% 82%;transform:rotate(-30deg) scale(.3)}
.wand.is-on{transform:rotate(18deg)}
.story-organize[data-step="1"] .hat-wizard.is-on{transition-delay:1.4s}
.story-organize[data-step="1"] .wand.is-on{transition-delay:1.8s;animation:wand-flick 1s 2.1s ease-in-out both}
.story-organize[data-step="2"] .wand.is-on{animation:wand-point 1.6s ease-in-out infinite alternate;animation-play-state:var(--loop)}
.person-badge{position:absolute;display:grid;place-items:center;width:36%;aspect-ratio:1;background:#fff;border:.5cqw solid #dfe7dc;border-radius:30%;box-shadow:0 .8cqw 2cqw #28483825;font-size:4.4cqw;line-height:1;opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s cubic-bezier(.2,1.7,.4,1);z-index:3}
.person-badge.is-on{opacity:1;transform:none;transition-delay:.5s}
.reaction{right:-12%;top:-8%;border-radius:50%;color:#3c7052;font-weight:700}
.person-josh .reaction.is-on{transition-delay:1.6s}
.notes{right:-14%;bottom:-2%;border-color:#7da78a}
.notes i{position:absolute;right:-12%;top:-14%;width:.9cqw;height:.9cqw;border-radius:50%;background:#426c51;box-shadow:0 0 0 .5cqw #fff;animation:dot .9s ease-in-out infinite;animation-play-state:var(--loop)}
.notes i:nth-of-type(2){right:6%;animation-delay:.15s}.notes i:nth-of-type(3){right:24%;animation-delay:.3s}

/* Speech: one bubble, labeled, tail pointing to whoever is talking. */
.story-speech{position:absolute;left:6%;top:3%;width:88%;z-index:8;pointer-events:none}
.speech-bubble{position:relative;padding:3.5cqw 4.4cqw 3.3cqw;background:#fffdf8;border:1px solid #d5ddcf;border-radius:4cqw;box-shadow:0 1.2cqw 3.6cqw #3347371c;text-align:center;animation:speech-pop .55s cubic-bezier(.18,.9,.25,1.2) both}
.speech-bubble:after{content:"";position:absolute;left:var(--tail);bottom:-2cqw;width:3.6cqw;height:3.6cqw;translate:-50% 0;rotate:45deg;background:inherit;border-right:1px solid #d5ddcf;border-bottom:1px solid #d5ddcf}
.speech-bubble p{margin:0;font:500 4.6cqw/1.3 Arial,sans-serif;color:#273d33;letter-spacing:-.02em;text-wrap:balance}
.speaker{position:absolute;left:var(--tail);top:0;translate:-50% -55%;padding:.8cqw 2.2cqw;border-radius:9cqw;background:#355c49;color:#fff;font:700 2.4cqw/1 Arial,sans-serif;letter-spacing:.3cqw}
.from-owner .speaker{background:#a4583f}

/* Detective: goal, clues, the connection, the recommendation. */
.shop{left:50%;top:41%;width:42%;translate:-50% -50%}
.shop svg{display:block;width:100%;height:auto}
.shop.is-on{animation:rise .6s .1s cubic-bezier(.2,1.3,.3,1) both}
.clues{inset:0}
.clue-card{position:absolute;top:25%;left:var(--x);width:26%;height:22%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9cqw;background:#fffdf8;border:1px solid #d4dece;border-radius:3cqw;box-shadow:0 1cqw 0 #2d47300d;text-align:center}
.clue-card>span{font-size:5.4cqw;line-height:1}
.clue-card strong{font:700 3.5cqw/1.1 Arial,sans-serif}
.clue-card em{font:600 3.2cqw/1.2 Arial,sans-serif;color:#9a5a37;font-style:normal}
.clue-mark{position:absolute;top:-2.2cqw;right:-2.2cqw;display:grid;place-items:center;width:6.4cqw;height:6.4cqw;border:.5cqw solid #fffdf8;border-radius:50%;color:#fff;font:700 3.4cqw/1 Arial,sans-serif}
.clue-mark.good{background:#4f7f5a}.clue-mark.flag{background:#c0673f}
.clues.is-on .clue-card{animation:pop .5s calc(.1s + var(--i) * .12s) both}
.clues.is-on .clue-card em{animation:reveal .4s calc(1.8s + var(--i) * 1.7s) both}
.clues.is-on .clue-mark{animation:stamp .45s calc(1.9s + var(--i) * 1.7s) cubic-bezier(.2,1.8,.4,1) both}
.story-detective[data-step="1"] .person-josh{animation:sleuth 5.6s .45s ease-in-out both}
.evidence{inset:0}
.evidence-card{position:absolute;top:26%;width:41%;height:37%;display:flex;flex-direction:column;align-items:center;gap:1.2cqw;padding:6cqw 2.4cqw 3cqw;background:#fffdf8;border:1px solid #d4dece;border-radius:3cqw;box-shadow:0 1.4cqw 0 #2d47300d;text-align:center}
.evidence-card.reviews{left:5%;rotate:-3deg}.evidence-card.site{right:5%;rotate:2.5deg}
.evidence-card small{font:700 2.3cqw/1.2 Arial,sans-serif;letter-spacing:.25cqw;color:#6f8070}
.stars{font-size:4.4cqw;letter-spacing:.2cqw;color:#c39139;line-height:1}
.evidence-card q{display:block;font:italic 3.5cqw/1.25 Georgia,serif;color:#2f4638;quotes:"“" "”"}
.site-line{display:block;width:80%;height:1.4cqw;border-radius:1cqw;background:#dfe5d8}.site-line.short{width:55%}
.site-photos{display:flex;gap:1.4cqw;margin-top:.6cqw}.site-photos i{display:grid;place-items:center;width:8cqw;height:6.4cqw;border:.4cqw dashed #c9b59b;border-radius:1cqw;font:700 3cqw/1 Arial,sans-serif;color:#c0673f;font-style:normal}
.evidence-card em{font:600 3.1cqw/1.2 Arial,sans-serif;font-style:normal;color:#9a5a37}
.evidence.is-on .evidence-card{animation:pop .55s both}.evidence.is-on .site{animation-delay:.25s}
.evidence.is-on .site-photos i{animation:wiggle .5s calc(1.5s + var(--n,0) * .1s) both}
.evidence-string{position:absolute;left:25%;top:27%;width:50%;height:4%;overflow:visible;z-index:2}
.evidence-string path{fill:none;stroke:#c0673f;stroke-width:2.2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.evidence.is-on .evidence-string{animation:draw 1s 1.1s ease-out both}
.pin{position:absolute;top:26%;width:3.6cqw;height:3.6cqw;translate:-50% -30%;border-radius:50%;background:#c0673f;box-shadow:inset -.6cqw -.6cqw 0 #0002,0 .5cqw .8cqw #0002;z-index:3}.pin-a{left:25%}.pin-b{left:75%}
.evidence.is-on .pin{animation:stamp .4s .9s cubic-bezier(.2,1.8,.4,1) both}.evidence.is-on .pin-b{animation-delay:1.9s}
.case-note{left:8%;top:24.5%;width:84%;padding:3.8cqw 4.8cqw 3.4cqw;background:#fffdf5;border:1px solid #d9d2bd;border-radius:2cqw;box-shadow:0 1.6cqw 3cqw #2c4a3318;rotate:-1.5deg}
.case-note.is-on{animation:pop .6s .1s cubic-bezier(.18,.9,.25,1.2) both}
.note-pin{position:absolute;top:-1.8cqw;left:50%;width:4cqw;height:4cqw;translate:-50% 0;border-radius:50%;background:#c0673f;box-shadow:inset -.6cqw -.6cqw 0 #0002}
.case-note small{display:block;font:700 2.5cqw/1 Arial,sans-serif;letter-spacing:.3cqw;color:#a0613e}
.case-note strong{display:block;margin:1.6cqw 0 1.8cqw;font:400 5cqw/1.15 Georgia,serif;color:#233a30;letter-spacing:-.02em}
.case-note ul{margin:0;padding:0;list-style:none}
.case-note li{position:relative;padding-left:5cqw;font-size:3.6cqw;line-height:1.45;color:#2f4638}
.case-note li:before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:#5a8a62}
.case-note.is-on li{animation:reveal .35s both}.case-note.is-on li:nth-child(1){animation-delay:.55s}.case-note.is-on li:nth-child(2){animation-delay:.8s}.case-note.is-on li:nth-child(3){animation-delay:1.05s}
.case-note p{margin:2cqw 0 0;padding-top:1.8cqw;border-top:1px dashed #ddd5c2;font:italic 3.3cqw/1.3 Georgia,serif;color:#66705e}
.case-note.is-on p{animation:reveal .4s 1.4s both}

/* Wizard: orbiting tasks settle into Keep / First / Later. */
.orbit-ring{left:17%;top:31%;width:66%;height:42%;border:1px dashed #baa88588;border-radius:50%}
.task{position:absolute;left:50%;top:50%;width:25%;height:8.4cqw;translate:-50% -50%;display:flex;align-items:center;justify-content:center;gap:1.3cqw;background:#fffdf8;border:1px solid #ddd5c2;border-radius:2.6cqw;box-shadow:0 1cqw 2.4cqw #5d4c2917;font:600 3.5cqw/1 Arial,sans-serif;color:#3f4b40;white-space:nowrap;z-index:5;transition:left .9s cubic-bezier(.55,0,.2,1),top .9s cubic-bezier(.55,0,.2,1),box-shadow .4s,border-color .4s,background .4s}
.task>span{font-size:4.2cqw}
.ping{position:absolute;right:-1.6cqw;top:-1.9cqw;min-width:4.6cqw;height:4.6cqw;padding:0 .8cqw;border:.5cqw solid #fffdf8;border-radius:3cqw;background:#c9563d;color:#fff;font:700 2.6cqw/3.6cqw Arial,sans-serif;text-align:center;transition:transform .35s cubic-bezier(.5,-.6,.7,.4),opacity .3s}
.story-organize:not(.is-orbiting) .ping{transform:scale(0);opacity:0}
.story-organize.is-orbiting .task{transition:none;animation:jitter 2.2s ease-in-out infinite;animation-delay:calc(var(--n) * -.37s);animation-play-state:var(--loop)}
.story-organize[data-step="0"] .person-owner .portrait{animation:fret 2.4s ease-in-out infinite;animation-play-state:var(--loop)}
.magic-burst{inset:0;z-index:7}
.magic-burst i{position:absolute;font-style:normal;color:#c79a45;font-size:5cqw;line-height:1}
.magic-burst i:nth-child(1){left:12%;top:26%}.magic-burst i:nth-child(2){left:36%;top:50%;font-size:3.6cqw}.magic-burst i:nth-child(3){left:62%;top:25%;font-size:6cqw}.magic-burst i:nth-child(4){left:88%;top:36%}.magic-burst i:nth-child(5){left:70%;top:52%;font-size:3.6cqw;color:#6c9475}
.magic-burst.is-on i{animation:spark .9s both}.magic-burst.is-on i:nth-child(1){animation-delay:2.5s}.magic-burst.is-on i:nth-child(2){animation-delay:2.6s}.magic-burst.is-on i:nth-child(3){animation-delay:2.7s}.magic-burst.is-on i:nth-child(4){animation-delay:2.8s}.magic-burst.is-on i:nth-child(5){animation-delay:2.9s}
.sort-board{left:5%;top:24%;width:90%;height:40.5%;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;z-index:3}
.sort-board.is-on .lane{animation:rise .5s both}.sort-board.is-on .first{animation-delay:.1s}.sort-board.is-on .later{animation-delay:.2s}
.lane{padding:2cqw 1cqw;background:#fffaf0c7;border:1px dashed #cbbd9d;border-radius:3cqw;text-align:center;transition:box-shadow .5s,background .5s}
.lane strong{display:block;font:400 4.4cqw/1.1 Georgia,serif;color:#2f4a3a}
.lane small{display:block;margin-top:.5cqw;font-size:max(9px,2.9cqw);color:#7b7a66}
.lane.first{background:#fcefd9;border:1px solid #e0b979}.lane.first strong{color:#8b5a22}
.story-organize[data-step="3"] .lane.first{box-shadow:0 0 0 1.2cqw #e9c98a50;background:#fbe8c6}
.story-organize[data-step="3"] .lane.keep,.story-organize[data-step="3"] .lane.later{opacity:.85}
.story-organize[data-step="2"] .task:first-of-type,.story-organize[data-step="3"] .task:first-of-type{border-color:#e0b979;box-shadow:0 1cqw 2.4cqw #a6763130}
.handled{left:50%;top:50%;translate:-50% 0;padding:1.2cqw 1.8cqw;border-radius:9cqw;background:#355c49;color:#fff;font:700 2.7cqw/1 Arial,sans-serif;white-space:nowrap;z-index:6}
.handled.is-on{animation:stamp .5s 1.1s cubic-bezier(.2,1.6,.4,1) both}

/* Captions and controls */
.story-caption{text-align:center;font:italic 17px/1.4 Georgia,serif!important;color:var(--ink);min-height:48px;display:flex;align-items:center;justify-content:center;margin-top:12px;padding:0 8px;text-wrap:balance}
.story-controls{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:3px;min-height:44px}.story-controls>button{border:0;background:transparent;color:#637563;padding:11px 8px;min-height:44px;font:12px/1 Arial;white-space:nowrap}.story-controls>button:hover{color:#294335;text-decoration:underline;text-underline-offset:4px}.story-dots{display:flex;gap:0}.story-dots button{position:relative;background:transparent;border:0;padding:16px 6px;min-width:25px;min-height:44px;cursor:pointer}.story-dots span{display:block;width:6px;height:6px;border-radius:50%;background:#cad5c3;transition:width .3s,background .3s;overflow:hidden}.story-dots [aria-pressed="true"] span{width:23px;background:#d7dfcd;position:relative;border-radius:5px}.story-dots [aria-pressed="true"] span:after{content:"";position:absolute;inset:0 auto 0 0;width:max(25%,var(--scene-progress));background:#557553}.story-controls button:focus-visible{outline-offset:0;outline-width:2px;border-radius:4px}
.story-still{position:absolute;inset:17% 12% 5%;display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center}.story-still img{width:42%;height:auto;border:4px solid #fff;border-radius:50%;box-shadow:0 4px 12px #28483830}.story-still strong{font:22px Georgia;max-width:260px}.story-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes speech-pop{0%{opacity:0;transform:translateY(8px) scale(.94)}65%{opacity:1;transform:translateY(-1px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.9)}65%{opacity:1;transform:translateY(-2px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes rise{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
@keyframes reveal{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
@keyframes stamp{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes draw{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes wiggle{0%,100%{transform:none}30%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
@keyframes talk{0%,100%{transform:none}50%{transform:translateY(-.8cqw) rotate(-1.5deg)}}
@keyframes fret{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes blink{0%,93%,100%{transform:none}95%{transform:scaleY(.1)}}
@keyframes dot{0%,70%,100%{transform:translateY(0);opacity:.5}35%{transform:translateY(-.8cqw);opacity:1}}
@keyframes twinkle{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.12);opacity:1}}
@keyframes jitter{0%,100%{transform:rotate(-4deg)}50%{transform:translateY(-.8cqw) rotate(4deg)}}
@keyframes spark{0%{opacity:0;transform:scale(.2) rotate(-40deg)}45%{opacity:1;transform:scale(1.25) rotate(8deg)}100%{opacity:.75;transform:scale(.85)}}
@keyframes lens-look{0%{transform:rotate(-22deg)}100%{transform:rotate(-8deg)}}
@keyframes wand-flick{0%{transform:rotate(18deg)}35%{transform:rotate(40deg)}60%{transform:rotate(0)}100%{transform:rotate(18deg)}}
@keyframes wand-point{0%{transform:rotate(14deg)}100%{transform:rotate(24deg)}}
@keyframes hat-tip{0%,100%{transform:none}40%,60%{transform:translateY(-14%) rotate(-10deg)}}
@keyframes sleuth{0%{left:73%;top:73%}14%,32%{left:12%;top:60%}46%,64%{left:39%;top:60%}80%,100%{left:65%;top:60%}}

@media(prefers-reduced-motion:reduce){.josh-story *{animation:none!important;transition:none!important}}

/* Placement in the connected-journey site. */
.josh.with-story{display:grid;grid-template-columns:minmax(0,850px) 320px;justify-content:space-between;gap:40px;align-items:start}
.josh.with-story .josh-letter{grid-column:1;grid-row:1}
.josh.with-story .josh-story{grid-column:2;grid-row:1;position:sticky;top:calc(var(--header-height,76px) + 20px)}
.contact-heading-scene{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:8px;align-items:center}
.contact-heading-scene .eyebrow{margin-bottom:16px}
@media(max-width:1150px){.contact-heading-scene{display:block}.contact-heading-scene .josh-story{max-width:340px;margin:18px 0 6px}.story-caption{font-size:16px!important}.story-controls{gap:2px}.story-controls>button{font-size:11px;padding-inline:5px}}
@media(max-width:1000px){.josh.with-story{display:block}.josh.with-story .josh-story{position:static;max-width:380px;margin:0 auto 30px}}
@media(max-width:700px){.contact-heading-scene .josh-story{max-width:380px;margin-inline:auto}.story-caption{font-size:17px!important;min-height:44px;margin-top:8px}.story-controls>button{font-size:12px}.story-controls{gap:6px}}

/* Give the homepage story room for readable vector portraits. */
.contact-heading-scene{display:block}
.contact-heading-scene .josh-story{max-width:420px;margin:24px auto}
.contact-heading-scene .story-person{width:24%!important}