/* DDS motion language: framed light, deliberate entrances, direct feedback.
   Base content is always visible. No JS-dependent opacity or display rules. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
.main-header{background:var(--deep)}
.hero{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(ellipse at 85% 65%,#7144dd55,transparent 55%),linear-gradient(120deg,#391c8f 2%,#5424ce 60%,#391c8f);padding-bottom:66px}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 49.9%,#ffffff05 50%,transparent 50.1%);background-size:96px 100%}
.hero-art{position:absolute;z-index:-1;pointer-events:none;width:min(55vw,780px);height:auto;right:-3%;top:-17%;color:#c4abff;opacity:.38;overflow:visible}
.hero-art .accent{stroke:var(--yellow);opacity:.9}
.hero-title{position:relative}.hero h1{max-width:1100px}.hero h1 em{position:relative;display:inline-block}
.hero h1 em::after{content:'';position:absolute;left:0;right:2%;bottom:-10px;height:2px;background:linear-gradient(90deg,var(--yellow),#f7e96c00);transform-origin:left}
.hero-title{margin-bottom:46px}
.hero-vsl{position:relative;isolation:isolate}
.hero-vsl::before{content:'';position:absolute;inset:-11px -11px 32px;border:1px solid #d6c1ff52;border-radius:21px;z-index:-1;background:linear-gradient(135deg,#ffffff0c,#ffffff00 60%);box-shadow:0 24px 60px #24105240;pointer-events:none}
.vsl-player{border-color:#dccaff88;border-radius:13px;box-shadow:0 12px 30px #28145030}
.vsl-caption{padding-left:3px}.vsl-caption h2::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--yellow);margin-right:9px;vertical-align:2px}
.vsl-play{box-shadow:0 5px 20px #25134650;transition:transform .3s var(--ease-out),box-shadow .3s}
.vsl-player{container-type:inline-size}
.vsl-player .vsl-play:not([hidden]){left:16px;bottom:16px;background:#391C8F;color:#FCFBF7;border-color:#8860FA;max-width:48%;min-height:44px;padding:6px 10px 6px 6px;gap:6px}
.vsl-player .vsl-play strong{font-size:clamp(10px,2.2cqw,13px);white-space:nowrap}
.vsl-player .vsl-play>span{width:clamp(24px,5.5cqw,32px);height:clamp(24px,5.5cqw,32px);flex-shrink:0}
@media(max-width:600px){.vsl-player .vsl-play:not([hidden]){left:10px;bottom:10px}}
.button{border-radius:9px;position:relative;transition:transform .3s var(--ease-out),box-shadow .3s,background .2s}
.button.primary{box-shadow:0 4px 0 #b29b3430,0 8px 25px #27115318}
.button>span,.text-link>span,.hero-work-link>span,.work-sample-caption>a>span{display:inline-block;transition:transform .3s var(--ease-out)}
.main-header nav a{position:relative}.main-header>nav a::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.video-cover,.testimonial-cover,.work-sample-cover{transition:box-shadow .35s,border-color .3s;isolation:isolate}
.testimonial-cover img,.work-sample-cover img{transition:transform .65s var(--ease-out)}
.play{transition:transform .35s var(--ease-out),box-shadow .35s,background .25s}
.testimonial-cover .play{box-shadow:0 0 0 7px #ffffff20,0 5px 22px #391c8f25}
.james-video{box-shadow:0 14px 34px #391c8f15}.james-result{position:relative}.james-result::before{content:'';position:absolute;top:-1px;left:0;width:82px;height:2px;background:var(--purple);transform-origin:left}
.demonstration{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(ellipse at 100% 0,#8057db45,transparent 54%),linear-gradient(135deg,#391c8f,#4821a8);color:var(--paper)}
.demonstration .work-heading .eyebrow{color:var(--yellow)}.demonstration .work-heading em{color:var(--yellow)}.demonstration .work-heading>p{color:#e6dcf6}
.work-sample-cover{border-color:#c4a3ff55;border-radius:13px;box-shadow:0 16px 28px #21104a35}
.work-sample-caption p{color:#e2d5f8}.work-sample-caption>a{color:var(--yellow)}
.demonstration>.work-explainer{border-color:#c4a3ff55}.demonstration>.work-explainer>summary{color:#f2eaff}.demonstration>.work-explainer .media-credit,.demonstration>.work-explainer .work-service{color:#e2d5f8}.demonstration>.work-explainer .media-credit strong{color:var(--paper)}
.process-flow{color:var(--ink);background:var(--paper);border:1px solid #ffffff80;border-radius:19px;padding:36px;margin-top:44px;box-shadow:0 20px 55px #21104a20}
.process-cards{position:relative;padding-top:21px;gap:18px}
.process-cards::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),#a084dd 50%,var(--purple));transform-origin:left}
.process-cards>li::before{content:'';position:absolute;top:-25px;left:24px;width:8px;height:8px;background:var(--purple);border:3px solid var(--paper);box-sizing:content-box;border-radius:50%}
.process-cards>li{box-shadow:0 6px 18px #391c8f06;transition:box-shadow .3s,border-color .3s}
.process-cards>li.process-record::before{top:-28px;background:var(--yellow);box-shadow:0 0 0 1px #a08d37}
.process-cards>li.process-finish{background:linear-gradient(135deg,var(--purple),var(--deep))}
.process-number{display:grid;place-items:center;border:1px solid #d4c9e8;border-radius:50%;width:33px;height:33px;background:#efebf866}.process-finish .process-number{background:#ffffff0a;border-color:#ffffff40}
.process-responsibility{padding:15px 0 0}
.quote-highlights figure{position:relative}.quote-highlights figure::before{content:'';display:block;width:32px;height:3px;background:var(--purple);margin-bottom:19px;transform-origin:left}
.message-card button{transition:box-shadow .3s,border-color .3s}.gallery-controls button{transition:background .2s,color .2s,border-color .2s}
.package-full{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(ellipse at top right,#956de145,transparent 60%),linear-gradient(135deg,var(--purple),var(--deep));border:1px solid #8d69db;border-radius:16px;box-shadow:0 18px 46px #391c8f1a}
.package-full::before{content:'';position:absolute;top:0;left:9%;width:65%;height:2px;background:linear-gradient(90deg,transparent,var(--yellow),transparent);pointer-events:none}
.editing-rail{border-radius:14px}.faq-list summary{transition:color .2s}.faq-list details[open]>summary{color:var(--purple)}summary>span{transition:transform .3s var(--ease-out)}
.final-cta{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(ellipse at 80% 80%,#7950d980,transparent 65%),linear-gradient(115deg,var(--deep),var(--purple))}
.final-cta::before,.final-cta::after{content:'';position:absolute;z-index:-1;pointer-events:none;width:580px;height:580px;border:1px solid #c8adff33;border-radius:90px;right:-180px;top:-110px;transform:rotate(-24deg)}
.final-cta::after{right:-215px;top:-75px;border-color:#f7e96c38}
.call-action{position:relative}.final-cta .button{box-shadow:0 10px 35px #1c0d4b30}
dialog[open]{animation:dialog-in .24s var(--ease-out)}
@keyframes dialog-in{from{transform:translateY(10px)}to{transform:translateY(0)}}
@keyframes frame-draw{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
@keyframes accent-draw{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
@keyframes light-arrive{from{transform:translate(18px,-12px)}to{transform:translate(0,0)}}
@media(prefers-reduced-motion:no-preference){
 .hero-art rect{stroke-dasharray:1600;animation:frame-draw 2s var(--ease-out) both}
 .hero-art rect:nth-child(2){animation-delay:.1s}.hero-art rect:nth-child(3){animation-delay:.2s}
 .hero-art{animation:light-arrive 2.4s var(--ease-out) both}
 .hero h1 em::after{animation:accent-draw .8s .1s var(--ease-out) both}
 .process-flow.motion-seen .process-cards::before{animation:accent-draw .9s var(--ease-out) both}
 .james-result.motion-seen::before,.quote-highlights.motion-seen figure::before{animation:accent-draw .7s var(--ease-out) both}
}
@media(hover:hover) and (pointer:fine){
 .button:hover,.button:focus-visible{transform:translateY(-3px);box-shadow:0 9px 24px #391c8f26}
 .button:hover>span,.button:focus-visible>span,.text-link:hover>span,.work-sample-caption>a:hover>span{transform:translate(3px,-3px)}
 .hero-work-link:hover>span{transform:translateY(4px)}
 .main-header>nav a:hover::after,.main-header>nav a:focus-visible::after{transform:scaleX(1)}
 .work-sample-cover:hover,.work-sample-cover:focus-visible{border-color:var(--yellow);box-shadow:0 20px 34px #21104a60}
 .work-sample-cover:hover img,.testimonial-cover:hover img{transform:scale(1.035)}
 .work-sample-cover:hover .play,.testimonial-cover:hover .play,.video-cover:hover .play{transform:translate(-50%,-50%) scale(1.09);box-shadow:0 0 0 9px #ffffff25}
 .vsl-play:hover{transform:translateY(-2px);box-shadow:0 8px 25px #25134665}
 .process-cards>li:hover{box-shadow:0 10px 26px #391c8f12;border-color:#a98bdc}
 .message-card button:hover{box-shadow:0 7px 20px #391c8f13}
 .faq-list summary:hover{color:var(--purple)}
}
@media(max-width:900px){.hero-art{width:70vw;right:-20%;opacity:.24}.hero-title{margin-bottom:36px}.hero-vsl::before{inset:-7px -7px 31px;border-radius:18px}.process-flow{padding:27px}}
@media(max-width:700px){.process-flow{padding:25px 20px}.process-cards{padding-top:0;gap:18px}.process-cards::before{left:16px;top:0;bottom:0;right:auto;width:2px;height:auto;background:#d4c9e8}.process-cards>li{margin-left:0}.process-cards>li::before{display:none}.process-card-top{margin-bottom:20px}.process-flow.motion-seen .process-cards::before{animation:none}.process-number{width:29px;height:29px}.hero{padding-bottom:42px}.hero-title{margin-bottom:30px}.hero h1 em::after{bottom:-6px}.final-cta::before,.final-cta::after{opacity:.5}.work-sample-caption h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.button:hover,.button:focus-visible,.vsl-play:hover,.work-sample-cover:hover img,.testimonial-cover:hover img{transform:none}.button:hover>span,.button:focus-visible>span,.text-link:hover>span,.hero-work-link:hover>span,.work-sample-caption>a:hover>span{transform:none}.work-sample-cover:hover .play,.testimonial-cover:hover .play,.video-cover:hover .play{transform:translate(-50%,-50%)}}