@font-face{font-family:"Plus Jakarta Sans";src:url("assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2");font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("assets/fonts/PlusJakartaSans-Italic-Variable.woff2") format("woff2");font-style:italic;font-weight:200 800;font-display:swap}
:root { --ink:#171717; --paper:#f7f6f2; --muted:#74736e; --line:rgba(23,23,23,.14); --lavender:#d9d1ff; --lime:#e5f3bc; --peach:#ffd4c0; --pink:#efc8df; --radius:24px; --font-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --cursor-dot-size:6px; --cursor-size:34px; --cursor-ring-size:34px; --cursor-hover-size:70px; --cursor-lag:.14; --cursor-speed:.24s; --cursor-scale:1; --magnetic-strength:.18; --spotlight-size:520px; --reveal-speed:.78s; --motion-ease:cubic-bezier(.2,.72,.2,1); --mx:50vw; --my:20vh; --tilt-strength:20; --orbit-speed:20s; --parallax-strength:1.45; --rotation-strength:1; --magnifier-size:204px; --magnifier-scale:1.78; --magnifier-border:2px solid rgba(31,31,31,.6); --magnifier-shadow:0 20px 40px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:15px; overflow-x:hidden; }
button,input,textarea,select{font-family:var(--font-sans)}
/* Keep every visible text style inside one consistent Plus Jakarta family. */
body *{font-family:var(--font-sans)!important}
.hero h1{line-height:.92;letter-spacing:-.065em}
a { color:inherit; text-decoration:none; }
.site-header { max-width:1400px; margin:auto; padding:24px 4vw; height:84px; display:flex; align-items:center; justify-content:space-between; font-size:12px; position:relative; z-index:10; }
.wordmark { font-size:21px; font-weight:600; letter-spacing:-1px; }.wordmark span{font-size:7px;vertical-align:top;margin-left:2px}.site-header nav{display:flex;gap:28px;color:#54534e}.site-header nav a:hover,.header-link:hover,footer a:hover{color:#846bd3}.header-link span{font-size:16px;margin-left:5px}
.section-shell { max-width:1400px; padding-left:4vw; padding-right:4vw; margin-left:auto; margin-right:auto; }
.hero { min-height:680px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:4vw; padding-top:70px; padding-bottom:100px; }.eyebrow,.section-number,.card-topline,.project-index,.story-kicker { font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }.eyebrow{color:#686762;margin:0 0 20px}.hero h1,.cta-section h2{font-size:clamp(56px,8vw,120px);line-height:.9;letter-spacing:-.075em;font-weight:500;margin:0;max-width:700px}.hero h1 em,.cta-section em,.story-visual em{font-family:Georgia, "Times New Roman", serif;font-weight:500}.lede { color:#5a5954; font-size:16px; line-height:1.55; max-width:415px; margin:32px 0; }.button { display:inline-flex;gap:24px;align-items:center; padding:15px 18px; border-radius:999px; font-size:13px; transition:transform .3s ease,box-shadow .3s ease; }.button-dark{background:#1d1d1d;color:#fff}.button:hover{transform:translateY(-3px);box-shadow:0 10px 22px #0002}
/* CSS perspective creates the hero card's dimensional face. */
.hero-object{height:450px;position:relative;perspective:1100px;display:grid;place-items:center}.portfolio-card{width:min(340px,80vw);height:385px;border-radius:20px;padding:18px;background:#c9bff6;position:relative;overflow:hidden;box-shadow:22px 30px 45px rgba(50,37,91,.22);transform:rotateX(11deg) rotateY(-18deg) translateZ(35px);animation:heroFloat 6s ease-in-out infinite}.card-topline,.card-bottomline{position:relative;z-index:2;display:flex;justify-content:space-between}.card-topline{font-size:9px}.card-bottomline{align-items:flex-end}.card-bottomline strong{font-size:23px;letter-spacing:-1px}.card-bottomline span{font-size:10px}.hero-art{height:292px;position:relative}.art-ring{position:absolute;width:210px;height:210px;border:39px solid #fff3e8;border-radius:50%;left:45px;top:37px}.art-disc{position:absolute;width:78px;height:78px;background:#fe856a;border-radius:50%;right:28px;top:76px}.art-bar{position:absolute;width:220px;height:34px;background:#171717;transform:rotate(-32deg);left:40px;top:150px}.hero-orbit{position:absolute;border:1px solid #c9c4ba;border-radius:50%;}.orbit-one{width:420px;height:150px;transform:rotate(-30deg)}.orbit-two{width:490px;height:265px;transform:rotate(50deg);border-color:#ded8cf}.hero-tag{position:absolute;padding:9px 13px;border-radius:999px;background:#fff;box-shadow:0 7px 20px #0001;font:10px ui-monospace, SFMono-Regular, Consolas, monospace;z-index:3}.tag-one{left:0;top:70px}.tag-two{right:0;bottom:55px}@keyframes heroFloat{50%{transform:rotateX(7deg) rotateY(-12deg) translate3d(0,-16px,55px)}}
.work-section,.glass-section,.stack-section,.reveal-section{padding-top:125px;padding-bottom:125px}.section-intro{display:grid;grid-template-columns:90px 1fr minmax(190px,300px);gap:20px;align-items:start;margin-bottom:55px}.section-number{color:#99978e;margin:5px 0}.section-intro h2{font-size:clamp(32px,4vw,54px);letter-spacing:-.06em;line-height:1;margin:0;font-weight:500}.section-intro>p:last-child{color:var(--muted);line-height:1.5;margin:5px 0 0}.compact-intro{margin-bottom:45px}
/* Pointer values from JavaScript rotate these card surfaces in real time. */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tilt-card{height:430px;border-radius:var(--radius);padding:17px;overflow:hidden;position:relative;transform-style:preserve-3d;will-change:transform;transition:transform .45s cubic-bezier(.2,.65,.2,1),box-shadow .45s;box-shadow:0 12px 20px #00000010;outline:none}.tilt-card:focus-visible{outline:2px solid #7660c8;outline-offset:4px}.tilt-card:hover{box-shadow:0 30px 38px #0002}.project-a{background:#e9e0d5}.project-b{background:#cfddec}.project-c{background:#dce6be}.project-index,.project-caption{position:relative;z-index:3;transform:translateZ(30px)}.project-caption{position:absolute;bottom:18px;left:17px;right:17px;display:flex;justify-content:space-between;align-items:end}.project-caption strong{font-size:22px;letter-spacing:-.06em}.project-caption span{font:10px "DM Mono",monospace}.glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.72),transparent 31%);opacity:0;transition:opacity .3s}.tilt-card:hover .glare,.tilt-card:focus .glare{opacity:1}.project-art{position:absolute;inset:35px 25px 65px;transform:translateZ(20px)}.project-art>*{position:absolute;display:block}.art-a i{width:170px;height:170px;background:#ef634d;border-radius:50%;left:12%;top:10%}.art-a b{width:55%;height:34%;border:16px solid #27241f;right:1%;bottom:4%;border-radius:0 100px 100px 0}.art-a em{width:40%;height:40%;border-radius:50%;background:#f8efdf;right:14%;top:14%}.art-b i{width:45%;height:100%;background:#1c2f4f;left:26%;transform:rotate(35deg)}.art-b b{width:68%;height:36%;background:#fb9356;border-radius:99px;top:28%;left:2%;transform:rotate(-35deg)}.art-b em{width:70px;height:70px;border-radius:50%;background:#e4f0e3;bottom:2%;right:1%}.art-c i{width:185px;height:185px;border-radius:50%;background:#e98589;left:5%;top:3%}.art-c b{width:148px;height:148px;border-radius:50%;background:#f4e6b8;right:0;bottom:0}.art-c em{width:115px;height:28px;background:#3f6047;top:46%;left:25%;transform:rotate(-43deg);border-radius:99px}
/* Transparent layers use blur and individual transforms to imply depth. */
.glass-stage{height:560px;border-radius:var(--radius);background:#e4e1ee;position:relative;overflow:hidden;isolation:isolate}.glass-blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:-1}.blob-lilac{background:#ad9ce8;width:440px;height:440px;top:-140px;left:9%}.blob-peach{background:#ffbca2;width:390px;height:390px;bottom:-160px;right:8%}.glass-card{position:absolute;display:flex;flex-direction:column;justify-content:space-between;padding:23px;border:1px solid rgba(255,255,255,.62);background:rgba(255,255,255,.27);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 35px rgba(66,54,91,.14);border-radius:18px;animation:glassFloat 7s ease-in-out infinite}.glass-card span,.glass-card small{font:10px "DM Mono",monospace}.glass-card strong{font-size:clamp(19px,2.5vw,31px);letter-spacing:-.06em;line-height:1.02}.glass-card i{font-style:normal;font-size:20px}.glass-card-one{width:285px;height:225px;left:15%;top:18%;transform:translateY(-14px) scale(1.04);animation-delay:-2s}.glass-card-two{width:230px;height:190px;right:13%;top:12%;transform:translateY(11px) scale(.9);animation-delay:-4s}.glass-card-three{width:215px;height:165px;left:34%;bottom:11%;transform:translateY(25px) scale(.85);animation-delay:-1s}.glass-card-four{width:165px;height:150px;right:27%;bottom:16%;transform:translateY(-2px) scale(.76);animation-delay:-5s}.mini-sun{width:35px;height:35px;background:#f8e37e;border-radius:50%}@keyframes glassFloat{50%{translate:0 -12px}}
/* Each parallax plane is translated at a different speed on scroll. */
.parallax-section{height:720px;position:relative;overflow:hidden;background:#1f2022;color:#f7f6f2;display:grid;place-items:center}.parallax-layer{position:absolute;inset:-15%;will-change:transform}.shape{display:block;position:absolute}.circle{width:380px;height:380px;border:1px solid #6d6876;border-radius:50%;left:7%;top:28%}.square{height:150px;width:150px;background:#c7d2ab;right:13%;top:11%;transform:rotate(22deg)}.arc{width:390px;height:390px;border:52px solid #b7a7f4;border-radius:50%;right:20%;bottom:-12%}.diamond{width:110px;height:110px;background:#fa9d7d;left:23%;top:21%;transform:rotate(45deg)}.line{width:56%;height:1px;background:#f7f6f2;left:15%;top:53%;transform:rotate(-22deg)}.pill{width:270px;height:85px;border-radius:99px;background:#f4efe6;right:8%;top:33%;transform:rotate(-34deg)}.parallax-copy{text-align:center;z-index:1}.parallax-copy h2{font-size:clamp(65px,11vw,160px);line-height:.78;letter-spacing:-.09em;margin:17px 0 25px;font-weight:500}.parallax-copy>p:last-child{color:#c9c8c1}
.stack-section{overflow:hidden}.card-stack{height:470px;position:relative;max-width:850px;margin:0 auto;perspective:1000px;cursor:pointer}.stack-card{position:absolute;width:55%;height:330px;left:22.5%;top:65px;padding:25px;border-radius:20px;box-shadow:0 24px 38px #0003;transition:transform .65s cubic-bezier(.2,.75,.18,1);display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d}.stack-card span,.stack-card i{font:10px "DM Mono",monospace;font-style:normal}.stack-card strong{font-size:46px;letter-spacing:-.08em}.stack-one{background:#d5cbff;transform:translateZ(0) rotate(-5deg)}.stack-two{background:#ffd3bb;transform:translateZ(-30px) rotate(4deg)}.stack-three{background:#dcebb5;transform:translateZ(-60px) rotate(-2deg)}.stack-four{background:#b9d8e5;transform:translateZ(-90px) rotate(6deg)}.card-stack:hover .stack-one,.card-stack:focus .stack-one{transform:translate3d(-180px,-25px,70px) rotate(-12deg)}.card-stack:hover .stack-two,.card-stack:focus .stack-two{transform:translate3d(-55px,12px,20px) rotate(-4deg)}.card-stack:hover .stack-three,.card-stack:focus .stack-three{transform:translate3d(85px,2px,-15px) rotate(5deg)}.card-stack:hover .stack-four,.card-stack:focus .stack-four{transform:translate3d(195px,-22px,-45px) rotate(14deg)}
/* IntersectionObserver adds .is-visible when each timeline entry enters view. */
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.reveal-item{display:grid;grid-template-columns:90px 1fr 160px;gap:20px;padding:29px 0;border-bottom:1px solid var(--line);align-items:center}.js .reveal-item{opacity:0;transform:translateY(45px) rotate(2deg);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.js .reveal-item.is-visible{opacity:1;transform:none}.reveal-item span,.reveal-item em{font:10px "DM Mono",monospace;color:#77756f}.reveal-item h3{font-size:clamp(27px,3vw,40px);letter-spacing:-.06em;margin:0 0 4px;font-weight:500}.reveal-item p{color:var(--muted);margin:0;line-height:1.45}.reveal-item em{text-align:right}
.story-section{display:grid;grid-template-columns:50% 50%;max-width:1400px;margin:auto;padding:120px 4vw}.story-sticky{height:calc(100vh - 40px);position:sticky;top:20px;display:grid;place-items:center}.story-visual{height:min(560px,75vh);width:min(90%,510px);background:#e4ddff;border-radius:28px;overflow:hidden;padding:30px;position:relative;display:flex;flex-direction:column;justify-content:space-between;transition:background .7s ease,transform .7s ease;box-shadow:0 28px 45px #5d55861c}.story-visual h2{font-weight:500;font-size:clamp(42px,5vw,68px);letter-spacing:-.07em;line-height:.93;margin:0;z-index:2;transition:transform .7s ease}.story-meta{position:relative;z-index:2;color:#5a536e;transition:transform .7s ease}.story-mark{position:absolute;transition:transform .7s cubic-bezier(.2,.75,.2,1),background .7s ease}.mark-one{width:190px;height:190px;background:#f6d779;border-radius:50%;right:13%;top:18%}.mark-two{width:235px;height:45px;border-radius:99px;background:#24242b;right:7%;top:50%;transform:rotate(-37deg)}.story-visual[data-state="two"]{background:#d5e5ee;transform:rotate(-2deg) scale(.98)}.story-visual[data-state="two"] .mark-one{transform:translate(-130px,30px) scale(.7);background:#f58b70}.story-visual[data-state="two"] .mark-two{transform:rotate(37deg) translate(-35px,80px);background:#305675}.story-visual[data-state="three"]{background:#f4dfd5;transform:rotate(2deg) scale(1.02)}.story-visual[data-state="three"] .mark-one{transform:translate(-30px,110px) scale(1.25);background:#a2bc81}.story-visual[data-state="three"] .mark-two{transform:rotate(6deg) translate(-100px,-85px);background:#563e72}.story-visual[data-state="four"]{background:#dbe9bb;transform:rotate(-1deg) scale(.99)}.story-visual[data-state="four"] .mark-one{transform:translate(-160px,-35px) scale(.8);background:#f7a882}.story-visual[data-state="four"] .mark-two{transform:rotate(-70deg) translate(55px,10px);background:#293d3d}.story-panels{padding-left:10%;}.story-panel{min-height:70vh;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--line);padding:60px 0;opacity:.35;transition:opacity .4s}.story-panel.is-active{opacity:1}.story-panel span{font:10px "DM Mono",monospace;color:#77756f}.story-panel h3{font-weight:500;font-size:clamp(34px,4vw,55px);letter-spacing:-.075em;line-height:.96;margin:22px 0}.story-panel p{color:var(--muted);font-size:16px;line-height:1.55;max-width:370px}
.cta-section{text-align:center;padding-top:140px;padding-bottom:140px}.cta-section h2{margin:0 auto 40px}.press-button{display:inline-flex;align-items:center;gap:45px;padding:19px 22px 16px 25px;color:#fff;background:#242424;border-radius:999px;font-size:14px;box-shadow:0 7px 0 #a39e94;transform:translateY(0);transition:transform .16s ease,box-shadow .16s ease}.press-button i{font-style:normal;font-size:18px}.press-button:hover{transform:translateY(-4px);box-shadow:0 11px 0 #a39e94}.press-button:active{transform:translateY(5px);box-shadow:0 2px 0 #a39e94}.contact-note{margin:52px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.contact-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}footer{max-width:1400px;margin:auto;padding:25px 4vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#73716a;font:10px "DM Mono",monospace}
@media (max-width:760px){.site-header{padding-top:18px;height:66px}.site-header nav{display:none}.header-link{font-size:11px}.hero{grid-template-columns:1fr;padding-top:70px;gap:20px;min-height:auto}.hero-object{height:390px}.portfolio-card{transform:rotateX(8deg) rotateY(-10deg) scale(.88)}.hero-orbit{scale:.8}.section-intro{grid-template-columns:45px 1fr}.section-intro>p:last-child{grid-column:2}.project-grid{grid-template-columns:1fr}.tilt-card{height:380px}.glass-stage{height:490px}.glass-card-one{left:7%;top:13%;width:230px}.glass-card-two{right:5%;top:10%;width:180px}.glass-card-three{left:10%;bottom:10%;width:175px}.glass-card-four{right:6%;bottom:17%;width:130px}.parallax-section{height:570px}.card-stack{height:410px}.stack-card{width:75%;left:12.5%;height:290px}.card-stack:hover .stack-one,.card-stack:focus .stack-one{transform:translate3d(-55px,-30px,70px) rotate(-11deg)}.card-stack:hover .stack-two,.card-stack:focus .stack-two{transform:translate3d(-15px,4px,20px) rotate(-4deg)}.card-stack:hover .stack-three,.card-stack:focus .stack-three{transform:translate3d(25px,3px,-15px) rotate(5deg)}.card-stack:hover .stack-four,.card-stack:focus .stack-four{transform:translate3d(60px,-24px,-45px) rotate(12deg)}.reveal-item{grid-template-columns:38px 1fr;gap:12px}.reveal-item em{display:none}.story-section{grid-template-columns:1fr;padding-top:70px;padding-bottom:70px}.story-sticky{height:75vh;position:sticky;top:10px}.story-visual{height:54vh;min-height:360px}.story-panels{padding:0}.story-panel{min-height:55vh;padding-left:5%;background:linear-gradient(90deg,var(--paper) 75%,transparent)}.cta-section{padding-top:100px;padding-bottom:100px}footer{gap:12px;flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.tilt-card,.portfolio-card{transform:none!important}.parallax-layer{transform:none!important}.reveal-item{opacity:1;transform:none}}

/* Cursor and ambient light: enabled only after JavaScript confirms a fine pointer. */
body::before{content:"";position:fixed;width:var(--spotlight-size);height:var(--spotlight-size);left:var(--mx);top:var(--my);translate:-50% -50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(183,167,244,.13),rgba(183,167,244,0) 68%);filter:blur(4px);transition:opacity .35s;opacity:0}.has-custom-cursor body::before{opacity:1}.has-custom-cursor,.has-custom-cursor a,.has-custom-cursor button,.has-custom-cursor [data-cursor-label]{cursor:none}.cursor{position:fixed;z-index:100;top:0;left:0;pointer-events:none;opacity:0;mix-blend-mode:multiply;transition:opacity .2s}.has-custom-cursor .cursor{opacity:1}.cursor-ring,.cursor-dot{position:absolute;display:grid;place-items:center;border-radius:50%;left:0;top:0;translate:-50% -50%}.cursor-ring{width:var(--cursor-ring-size);height:var(--cursor-ring-size);border:1px solid rgba(23,23,23,.65);background:rgba(247,246,242,.09);transition:width .3s var(--motion-ease),height .3s var(--motion-ease),background .3s, border-color .3s}.cursor-dot{width:var(--cursor-dot-size);height:var(--cursor-dot-size);background:var(--ink)}.cursor-label{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.04em;opacity:0;transition:opacity .2s;color:#171717}.cursor.is-hovering .cursor-ring{width:var(--cursor-hover-size);height:var(--cursor-hover-size);background:rgba(247,246,242,.55);border-color:rgba(23,23,23,.28)}.cursor.is-hovering .cursor-label{opacity:1}.cursor.is-hovering .cursor-dot{opacity:0}

/* Fast, typography-led entrance for the first viewport. */
.hero-word{display:inline-block}.js .hero-word{opacity:0;translate:0 42px;filter:blur(8px);animation:heroWordIn .72s var(--motion-ease) forwards}.hero-word:nth-child(1){animation-delay:.08s}.hero-word:nth-child(2){animation-delay:.17s}.hero-word:nth-child(3){animation-delay:.26s}.js .hero-subtitle{opacity:0;animation:subtitleIn .7s var(--motion-ease) .46s forwards}.js .hero-copy .button{opacity:0;animation:subtitleIn .65s var(--motion-ease) .58s forwards}@keyframes heroWordIn{to{opacity:1;translate:0;filter:blur(0)}}@keyframes subtitleIn{to{opacity:1;translate:0;letter-spacing:normal}}

/* Each section intro reveals as a small, staggered typographic composition. */
.js .section-intro .section-number,.js .section-intro .eyebrow,.js .section-intro h2,.js .section-intro>p:last-child{opacity:0;transform:translateY(30px) rotateX(12deg);filter:blur(8px);transform-origin:bottom}.js .section-intro.is-visible .section-number,.js .section-intro.is-visible .eyebrow,.js .section-intro.is-visible h2,.js .section-intro.is-visible>p:last-child{animation:sectionTypeIn var(--reveal-speed) var(--motion-ease) forwards}.section-intro.is-visible .eyebrow{animation-delay:.06s}.section-intro.is-visible h2{animation-delay:.13s}.section-intro.is-visible>p:last-child{animation-delay:.2s}@keyframes sectionTypeIn{to{opacity:1;transform:translateY(0) rotateX(0);filter:blur(0)}}

/* Magnetic targets receive their offsets through JavaScript without disturbing existing transforms. */
.magnetic{will-change:transform}.button.magnetic,.press-button.magnetic{transition:transform .36s var(--motion-ease),box-shadow .3s ease}.tilt-card.magnetic{transition:transform .42s var(--motion-ease),box-shadow .45s}.magnetic:not(.tilt-card){transform:translate3d(var(--magnetic-x,0),var(--magnetic-y,0),0)}

/* Minimal kinetic type study with low-contrast parallax lettering and a quiet marquee. */
.type-motion-section{padding:115px 0 0;overflow:hidden;border-top:1px solid var(--line);position:relative}.type-motion-inner{min-height:470px;position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.type-motion-copy{position:relative;z-index:1}.type-motion-copy>p{max-width:290px;margin:20px 0 0;color:var(--muted);line-height:1.55}.type-background{font-size:clamp(100px,20vw,300px);font-weight:600;letter-spacing:-.11em;color:rgba(23,23,23,.045);position:absolute;white-space:nowrap;left:-2vw;top:45%;margin:0;translate:var(--type-parallax,0) -50%;will-change:translate}.kinetic-word{font-size:clamp(72px,15vw,218px);letter-spacing:-.105em;line-height:.78;font-weight:600;margin:16px 0 0;display:flex;overflow:visible}.kinetic-letter{display:inline-block;transition:transform .45s var(--motion-ease),color .35s ease;will-change:transform}.kinetic-word:hover .kinetic-letter{color:#7865b6}.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:17px 0;white-space:nowrap}.marquee-track{display:inline-flex;align-items:center;gap:22px;animation:marquee 25s linear infinite;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.05em;text-transform:uppercase}.marquee-track i{font-style:normal;color:#826ec3}@keyframes marquee{to{transform:translateX(-50%)}}

/* Letter-level hover motion remains restrained enough for navigation to stay readable. */
.text-link .letter{display:inline-block;transition:transform .32s var(--motion-ease)}.text-link:hover .letter:nth-child(odd){transform:translateY(-2px) rotate(-3deg) scaleX(1.08)}.text-link:hover .letter:nth-child(even){transform:translateY(1px) rotate(2deg) scaleX(.96)}

@media (max-width:760px){.type-motion-section{padding-top:80px}.type-motion-inner{min-height:350px}.type-background{top:52%}}
@media (hover:none),(pointer:coarse){body::before,.cursor{display:none}.type-motion-section .marquee-track{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){body::before,.cursor{display:none}.hero-word,.hero-subtitle,.hero-copy .button{animation:none;opacity:1;translate:0;filter:none}.section-intro .section-number,.section-intro .eyebrow,.section-intro h2,.section-intro>p:last-child{opacity:1;transform:none;filter:none}.marquee-track{animation:none}.kinetic-letter{transition:none}}

/* Stronger, stateful cursor morphs make each interactive surface unmistakable. */
.cursor-ring{scale:var(--cursor-scale)}.cursor.is-project .cursor-ring{width:88px;height:88px;background:#1d1d1d;border-color:#1d1d1d;mix-blend-mode:normal}.cursor.is-project .cursor-label,.cursor.is-button .cursor-label,.cursor.is-gallery .cursor-label{color:#fff}.cursor.is-button .cursor-ring{width:98px;height:48px;border-radius:999px;background:#242424;border-color:#242424;mix-blend-mode:normal}.cursor.is-gallery .cursor-ring{width:118px;height:56px;border-radius:999px;background:#302e39;border-color:#302e39;mix-blend-mode:normal}.cursor.is-type .cursor-ring{width:84px;height:84px;background:rgba(247,246,242,.1);border:2px solid #171717}.cursor.is-type .cursor-dot{opacity:0}.has-custom-cursor .skills-wheel{cursor:none}

/* Hero orbit: five labels revolve in a calm, three-dimensional-looking system. */
.orbit-system{position:absolute;width:490px;height:490px;animation:orbitSpin var(--orbit-speed) linear infinite;transform-style:preserve-3d;pointer-events:none}.orbit-item{position:absolute;padding:8px 12px;border-radius:999px;background:#fff;box-shadow:0 12px 22px rgba(23,23,23,.14);font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase;animation:orbitCounter var(--orbit-speed) linear infinite}.orbit-ui{top:1%;left:42%;background:#e5f3bc}.orbit-brand{top:23%;right:-3%;background:#fff0e7}.orbit-motion{bottom:7%;right:4%;background:#d9d1ff}.orbit-web{bottom:15%;left:-5%;background:#fff}.orbit-strategy{top:26%;left:-8%;background:#e8e6df}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes orbitCounter{to{transform:rotate(-360deg)}}

/* The wheel gives revolving motion its own focused demonstration section. */
.skills-section{padding-top:125px;padding-bottom:125px}.skills-layout{display:grid;grid-template-columns:1fr minmax(230px,340px);align-items:center;gap:8vw}.skills-wheel{width:min(620px,100%);aspect-ratio:1;margin:auto;position:relative;border:1px solid var(--line);border-radius:50%;perspective:900px;background:radial-gradient(circle,#ebe7f8 0 26%,transparent 27%)}.skills-wheel::before,.skills-wheel::after{content:"";position:absolute;inset:10%;border:1px dashed rgba(23,23,23,.18);border-radius:50%}.skills-wheel::after{inset:25%;border-style:solid}.skill-center{position:absolute;inset:36%;display:flex;flex-direction:column;justify-content:space-between;padding:18px;border-radius:16px;background:#1d1d1d;color:#fff;box-shadow:0 22px 30px #0003;z-index:2;transform:translateZ(25px)}.skill-center span{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}.skill-center strong{font-size:clamp(18px,2vw,27px);letter-spacing:-.07em;line-height:.9}.skill{position:absolute;z-index:3;border:0;border-radius:999px;padding:12px 16px;background:#fff;color:#171717;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;box-shadow:0 10px 18px #0002;transition:transform .35s var(--motion-ease),background .25s,box-shadow .35s;transform-style:preserve-3d}.skill:hover,.skill:focus-visible{background:#d9d1ff;transform:scale(1.24) translateZ(80px)!important;box-shadow:0 25px 30px #0003;z-index:5;outline:none}.skill-identity{top:5%;left:42%;animation:skillOrbitA var(--orbit-speed) linear infinite}.skill-ui{top:24%;right:4%;animation:skillOrbitB var(--orbit-speed) linear infinite}.skill-motion{bottom:18%;right:9%;animation:skillOrbitC var(--orbit-speed) linear infinite}.skill-strategy{bottom:5%;left:40%;animation:skillOrbitD var(--orbit-speed) linear infinite}.skill-web{bottom:24%;left:4%;animation:skillOrbitE var(--orbit-speed) linear infinite}.skill-content{top:22%;left:5%;animation:skillOrbitF var(--orbit-speed) linear infinite}.skills-wheel:hover .skill{animation-play-state:paused}.skills-wheel:hover::before{border-color:#917cdc}.skill-detail{padding:32px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}.skill-detail h3{font-size:clamp(32px,4vw,54px);letter-spacing:-.07em;font-weight:500;line-height:1;margin:12px 0}.skill-detail>p:last-child{color:var(--muted);line-height:1.55;margin-bottom:0}@keyframes skillOrbitA{50%{translate:0 16px;scale:1.06}}@keyframes skillOrbitB{50%{translate:-18px 8px;scale:.86}}@keyframes skillOrbitC{50%{translate:-8px -16px;scale:1.12}}@keyframes skillOrbitD{50%{translate:0 -15px;scale:.87}}@keyframes skillOrbitE{50%{translate:18px -6px;scale:1.08}}@keyframes skillOrbitF{50%{translate:13px 11px;scale:.9}}

/* A scroll-driven layered object makes rotation and changing depth easy to see. */
.rotation-section{height:260vh;background:#222224;color:#f7f6f2;position:relative}.rotation-stage{height:100vh;position:sticky;top:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center}.rotation-copy{padding-top:100px;padding-bottom:100px;z-index:2}.rotation-copy h2{font-weight:500;font-size:clamp(58px,8vw,118px);line-height:.82;letter-spacing:-.09em;margin:18px 0 25px}.rotation-copy>p:nth-of-type(2){color:#c5c2bc;line-height:1.55;max-width:290px}.rotation-status{margin:30px 0 0!important;color:#a89ae0!important;font:13px ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.06em}.rotation-status span{font-size:clamp(28px,4vw,48px);color:#f7f6f2}.rotation-object{width:min(420px,42vw);aspect-ratio:1;position:relative;justify-self:center;perspective:1000px;transform-style:preserve-3d;will-change:transform}.rotation-layer{position:absolute;inset:5%;display:grid;place-items:center;border-radius:22px;font-size:clamp(28px,4vw,57px);letter-spacing:-.08em;font-weight:600;box-shadow:0 30px 50px #0006;transition:box-shadow .2s}.layer-back{background:#bdadef;transform:translateZ(-85px) rotate(-15deg)}.layer-middle{background:#f1bb9e;color:#1d1d1d;transform:translateZ(-25px) rotate(8deg)}.layer-front{background:#e4f3b6;color:#1d1d1d;transform:translateZ(45px) rotate(-5deg)}

/* Visible type displacement and a staged word reveal sharpen the typography study. */
.kinetic-word{letter-spacing:-.12em}.kinetic-letter{transition:transform .28s var(--motion-ease),color .25s ease}.word-reveal{margin-top:32px!important;display:flex;gap:.42em;flex-wrap:wrap;font-size:clamp(18px,2vw,25px)!important;letter-spacing:-.04em}.word-reveal span{opacity:0;transform:translateY(22px) rotateX(18deg);filter:blur(5px)}.word-reveal.is-visible span{animation:wordIn .55s var(--motion-ease) forwards}.word-reveal span:nth-child(2){animation-delay:.08s}.word-reveal span:nth-child(3){animation-delay:.16s}.word-reveal span:nth-child(4){animation-delay:.24s}.word-reveal span:nth-child(5){animation-delay:.32s}@keyframes wordIn{to{opacity:1;transform:none;filter:none}}.marquee-track{animation-duration:15s}

/* Stronger card depth: inner information advances on a more obvious tilt. */
.tilt-card:hover .project-index{transform:translateZ(70px)}.tilt-card:hover .project-caption strong{display:inline-block;transform:translateZ(95px) scale(1.05)}.tilt-card:hover .project-caption span{transform:translateZ(55px)}.tilt-card .glare{background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.95),rgba(255,255,255,.15) 22%,transparent 48%),linear-gradient(118deg,transparent 30%,rgba(255,255,255,.24) 48%,transparent 68%)}

@media (max-width:760px){.orbit-system{scale:.72}.skills-layout,.rotation-section{grid-template-columns:1fr}.skills-wheel{max-width:470px}.skill-detail{max-width:470px;margin:auto}.rotation-section{padding:80px 0}.rotation-object{width:min(74vw,390px);margin-top:-20px}.word-reveal{font-size:17px!important}}
@media (prefers-reduced-motion:reduce){.orbit-system,.skill,.marquee-track{animation:none!important}.rotation-object{transform:none!important}.word-reveal span{opacity:1;transform:none;filter:none}.skills-wheel .skill-identity{left:50%;top:5%;transform:translate(-50%,-50%)!important}.skills-wheel .skill-ui{left:auto;right:4%;top:24%;transform:none!important}.skills-wheel .skill-motion{left:auto;right:9%;top:auto;bottom:18%;transform:none!important}.skills-wheel .skill-strategy{left:40%;top:auto;bottom:5%;transform:none!important}.skills-wheel .skill-web{left:4%;top:auto;bottom:24%;transform:none!important}.skills-wheel .skill-content{left:5%;top:22%;transform:none!important}}

/* JavaScript positions the skills on a true circular path; hover retains that position while lifting forward. */
.skills-wheel .skill{left:50%;top:50%;animation:none!important;transform:translate(-50%,-50%) translate3d(var(--skill-x,0),var(--skill-y,0),var(--skill-z,0))}.skills-wheel .skill:hover,.skills-wheel .skill:focus-visible{transform:translate(-50%,-50%) translate3d(var(--skill-x,0),var(--skill-y,0),calc(var(--skill-z,0) + 80px))!important;scale:1.24}.orbit-item{animation:orbitCounter var(--orbit-speed) linear infinite,orbitPulse 4.8s ease-in-out infinite;will-change:transform,scale,opacity,filter}.orbit-brand{animation-delay:0s,-1s}.orbit-motion{animation-delay:0s,-2s}.orbit-web{animation-delay:0s,-3s}.orbit-strategy{animation-delay:0s,-4s}.hero-object:hover .orbit-system,.hero-object:hover .orbit-item{animation-play-state:paused}@keyframes orbitSpin{to{transform:rotate(-360deg)}}@keyframes orbitCounter{to{transform:rotate(360deg)}}@keyframes orbitPulse{50%{scale:.72;opacity:.48;filter:blur(.35px);box-shadow:0 5px 11px rgba(23,23,23,.08)}}

/* Project control orbit: longer record names stay legible while retaining the minimal floating composition. */
.skill-center small{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:rgba(255,255,255,.58)}
.skills-wheel .skill{max-width:132px;padding:11px 13px;text-align:center;line-height:1.15;white-space:normal}
.skills-wheel .skill:nth-of-type(1){background:#f3f8e3}.skills-wheel .skill:nth-of-type(2){background:#f4efff}.skills-wheel .skill:nth-of-type(3){background:#eef8f6}.skills-wheel .skill:nth-of-type(4){background:#fff4ed}.skills-wheel .skill:nth-of-type(5){background:#f7f3e4}.skills-wheel .skill:nth-of-type(6){background:#f2f4f8}
.skills-wheel .skill:hover,.skills-wheel .skill:focus-visible{background:#b8f000}
@media (max-width:760px){.skills-wheel .skill{max-width:106px;padding:9px 10px;font-size:9px}.skill-center small{font-size:8px}}

/* Extra cards give the middle and foreground parallax planes a clear physical depth cue. */
.parallax-card{position:absolute;display:grid;place-items:center;width:130px;height:150px;border-radius:15px;font:13px ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.2;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 22px 35px #0004}.card-alpha{right:18%;top:17%;background:rgba(247,246,242,.88);color:#202124;transform:rotate(11deg)}.card-beta{left:18%;bottom:15%;background:#bfb0f1;color:#202124;transform:rotate(-13deg);width:155px;height:105px}

@media (max-width:760px){.rotation-section{height:210vh;padding:0}.rotation-stage{grid-template-columns:1fr;align-content:center}.rotation-copy{padding-top:20px;padding-bottom:10px}.rotation-object{margin-top:0}}

/* PromoPlus interface mockups reuse the existing 3D card surfaces without external imagery. */
.promo-dashboard{height:292px!important;display:grid;grid-template-columns:40px 1fr 94px;gap:10px;padding:10px;border-radius:13px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(23,23,23,.08);color:#202020}.dash-sidebar{display:flex;flex-direction:column;align-items:center;gap:11px;padding-top:4px;border-right:1px solid #dfdbe8}.dash-sidebar b{display:grid;place-items:center;width:21px;height:21px;border-radius:7px;background:#242424;color:#fff;font-size:15px}.dash-sidebar i{width:16px;height:16px;border-radius:5px;background:#ded8ef}.dash-main{display:flex;flex-direction:column;min-width:0}.dash-label{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;color:#77736d}.product-mockup{position:relative;flex:1;margin:12px 10px 8px;border-radius:12px;background:linear-gradient(135deg,#d9d1ff,#ede8ff);display:grid;place-items:center;overflow:hidden}.product-mockup::before{content:"";width:70px;height:105px;border-radius:18px 18px 9px 9px;background:#fff;box-shadow:inset 0 0 0 2px #e1ddef}.product-mockup b{position:absolute;width:24px;height:14px;border-radius:3px;background:#ff896b;top:47%;left:50%;translate:-50% -50%}.product-mockup span{position:absolute;bottom:8px;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;color:#716b78}.dash-tabs{display:flex;gap:6px;font:8px ui-monospace,SFMono-Regular,Consolas,monospace}.dash-tabs>*{padding:5px 6px;border-radius:5px;background:#ece8f5;font-weight:400}.dash-tabs strong{background:#242424;color:#fff}.dash-side{display:flex;flex-direction:column;gap:8px;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;color:#6f6b65}.dash-side b{padding:8px 5px;border-radius:6px;background:#e6f3be;color:#3b4b1d}.dash-side small{margin-top:auto;padding:7px 5px;border-radius:6px;background:#f0ece7;font-size:8px;line-height:1.25}.workflow-mini{position:absolute;inset:64px 28px 70px;padding:16px;border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 0 1px rgba(23,23,23,.08);transform:translateZ(45px);font:11px ui-monospace,SFMono-Regular,Consolas,monospace}.workflow-mini b{font:14px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.05em}.workflow-mini i{font-style:normal;font-size:9px}.upload-mini{background:#f8f3e9}.upload-mini span{padding:13px;border:1px dashed #b9a991;border-radius:8px;color:#736b61}.upload-mini i{padding:8px;background:#262626;color:#fff;border-radius:6px;text-align:center}.mockup-mini{background:#e4edf6;align-items:center}.mockup-mini b{align-self:stretch}.mini-shirt{position:relative;width:105px;height:122px;border-radius:24px 24px 10px 10px;background:#fff;box-shadow:inset 0 0 0 2px #d6dde7}.mini-shirt::after{content:"";position:absolute;width:36px;height:19px;border-radius:4px;background:#6e87c9;left:34px;top:52px}.approval-mini{background:#e6f1cb}.approval-mini span{padding:11px;border-radius:10px;background:#fff;line-height:1.35}.approval-mini i{color:#40611f;font-weight:600}.project-caption strong,.project-caption span{display:inline-block;transition:transform .35s var(--motion-ease)}
@media (max-width:760px){.promo-dashboard{grid-template-columns:32px 1fr 72px}.dash-side{font-size:7px}.workflow-mini{inset:60px 25px 68px}}

/* PromoPlus orbit hero refinements: one clear product card with a controlled interactive halo. */
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}.button-light{background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(23,23,23,.12);color:#252525}.button-light:hover{background:#fff;box-shadow:0 10px 22px #00000012}.status-review{padding:5px 8px;border-radius:999px;background:#e5f3bc;color:#3d5420}.orbit-system{pointer-events:auto;transition:filter .4s ease}.orbit-link{top:48%;right:-11%;background:#e2eef7}.hero-object:hover .orbit-system{animation-duration:32s}.hero-object:hover .orbit-system,.hero-object:hover .orbit-item{animation-play-state:running}.orbit-item{cursor:none;transition:scale .28s var(--motion-ease),box-shadow .28s var(--motion-ease),filter .28s var(--motion-ease)}.orbit-item:hover{animation-play-state:paused!important;scale:1.28;opacity:1!important;filter:none!important;box-shadow:0 22px 30px rgba(23,23,23,.23)!important;z-index:8}.portfolio-card{width:min(370px,82vw);background:linear-gradient(145deg,#d0c6fb,#c5b9f2)}.promo-dashboard .dash-side{gap:6px}.promo-dashboard .dash-side>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.promo-dashboard .dash-side>span:nth-of-type(2){margin-top:5px}.promo-dashboard .dash-side small{background:#edf3db;color:#435426}.hero .lede{max-width:485px}@media (max-width:760px){.hero-actions{gap:8px}.hero-actions .button{padding:13px 15px;font-size:12px}.orbit-link{right:-3%;top:56%}.portfolio-card{width:min(350px,88vw)}}

/* Messy Workflow Cleanup: layered file cards converge from independent 3D states. */
.problem-section{padding-top:125px;padding-bottom:125px}.messy-stage{height:590px;position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,#eeeae4,#e5e2eb);perspective:1200px;isolation:isolate}.messy-background{position:absolute;inset:-10%;pointer-events:none;will-change:transform}.messy-background i{position:absolute;display:block;border-radius:50%;filter:blur(4px)}.messy-background i:nth-child(1){width:370px;height:370px;background:#c9bff4;left:4%;top:20%;opacity:.5}.messy-background i:nth-child(2){width:300px;height:300px;background:#ffcfb8;right:2%;top:10%;opacity:.62}.messy-background i:nth-child(3){width:240px;height:240px;background:#dcebb5;left:42%;bottom:-8%;opacity:.7}.messy-card{position:absolute;left:50%;top:50%;width:220px;min-height:136px;padding:16px;border-radius:16px;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.78);box-shadow:0 24px 38px rgba(43,38,53,.18);display:flex;flex-direction:column;gap:12px;transform-style:preserve-3d;will-change:transform,box-shadow;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:box-shadow .3s ease;z-index:2}.messy-card span{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:#7a756e}.messy-card strong{font-size:15px;line-height:1.12;letter-spacing:-.04em}.messy-card small{margin-top:auto;color:#77716b;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}.messy-card:hover{box-shadow:0 30px 42px rgba(39,34,49,.27);z-index:9}.messy-card-one{transform:translate(-50%,-50%) translate3d(-250px,-170px,-70px) rotateX(18deg) rotateY(-24deg) rotateZ(-14deg)}.messy-card-two{transform:translate(-50%,-50%) translate3d(245px,-155px,-35px) rotateX(-15deg) rotateY(21deg) rotateZ(13deg)}.messy-card-three{transform:translate(-50%,-50%) translate3d(-270px,40px,20px) rotateX(-12deg) rotateY(-18deg) rotateZ(11deg)}.messy-card-four{transform:translate(-50%,-50%) translate3d(245px,45px,48px) rotateX(19deg) rotateY(15deg) rotateZ(-10deg)}.messy-card-five{transform:translate(-50%,-50%) translate3d(-135px,190px,-30px) rotateX(-21deg) rotateY(14deg) rotateZ(15deg)}.messy-card-six{transform:translate(-50%,-50%) translate3d(145px,180px,70px) rotateX(14deg) rotateY(-19deg) rotateZ(-17deg)}.messy-foreground{position:absolute;right:5%;bottom:7%;z-index:5;margin:0;font-size:clamp(20px,2.2vw,31px);letter-spacing:-.06em;line-height:.95;color:#403d43;will-change:transform}.messy-foreground strong{font-weight:500;font-family:Georgia,"Times New Roman",serif}.cursor.is-sort .cursor-ring{width:104px;height:104px;background:#eeeadf;border:2px solid #57514a;box-shadow:0 16px 30px rgba(49,43,36,.22)}.cursor.is-sort .cursor-dot{opacity:0}@media (max-width:760px){.messy-stage{height:520px}.messy-card{width:180px;min-height:120px;padding:13px}.messy-card-one{transform:translate(-50%,-50%) translate3d(-100px,-150px,-70px) rotateX(18deg) rotateY(-24deg) rotateZ(-14deg)}.messy-card-two{transform:translate(-50%,-50%) translate3d(100px,-135px,-35px) rotateX(-15deg) rotateY(21deg) rotateZ(13deg)}.messy-card-three{transform:translate(-50%,-50%) translate3d(-120px,0,20px) rotateX(-12deg) rotateY(-18deg) rotateZ(11deg)}.messy-card-four{transform:translate(-50%,-50%) translate3d(115px,18px,48px) rotateX(19deg) rotateY(15deg) rotateZ(-10deg)}.messy-card-five{transform:translate(-50%,-50%) translate3d(-75px,138px,-30px) rotateX(-21deg) rotateY(14deg) rotateZ(15deg)}.messy-card-six{transform:translate(-50%,-50%) translate3d(78px,135px,70px) rotateX(14deg) rotateY(-19deg) rotateZ(-17deg)}.messy-foreground{right:6%;bottom:5%;font-size:21px}}

/* PromoPlus cursor states: one ring morphs by the closest product action. */
.cursor-ring{width:var(--cursor-size);height:var(--cursor-size);transition:width var(--cursor-speed) var(--motion-ease),height var(--cursor-speed) var(--motion-ease),border-radius var(--cursor-speed) var(--motion-ease),background var(--cursor-speed) ease,border-color var(--cursor-speed) ease,box-shadow var(--cursor-speed) ease}.cursor-label{transition:opacity .14s ease,transform var(--cursor-speed) var(--motion-ease);transform:scale(.82)}.cursor.is-hovering .cursor-label{transform:scale(1)}.cursor.is-orbit .cursor-ring{width:108px;height:108px;background:#24242a;border-color:#24242a;box-shadow:0 15px 28px #0003}.cursor.is-orbit .cursor-label,.cursor.is-cta .cursor-label{color:#fff}.cursor.is-dashboard .cursor-ring{width:96px;height:96px;background:rgba(255,255,255,.36);border-color:rgba(25,25,25,.65);box-shadow:0 15px 30px rgba(45,38,69,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cursor.is-product .cursor-ring{width:122px;height:122px;background:rgba(217,209,255,.38);border:2px solid #6153a2;box-shadow:0 18px 34px rgba(68,56,113,.23)}.cursor.is-version .cursor-ring{width:136px;height:54px;border-radius:999px;background:#2b2a31;border-color:#2b2a31;box-shadow:0 12px 26px #0003}.cursor.is-version .cursor-label,.cursor.is-approval .cursor-label{color:#fff}.cursor.is-approval .cursor-ring{width:138px;height:54px;border-radius:999px;background:#55732b;border-color:#55732b;box-shadow:0 12px 27px rgba(58,83,28,.3)}.cursor.is-cta .cursor-ring{width:126px;height:54px;border-radius:999px;background:#171717;border-color:#171717;box-shadow:0 13px 28px #0004}.cursor.is-orbit .cursor-dot,.cursor.is-dashboard .cursor-dot,.cursor.is-product .cursor-dot,.cursor.is-version .cursor-dot,.cursor.is-approval .cursor-dot,.cursor.is-cta .cursor-dot{opacity:0}

/* Sticky Product Journey: one glass interface swaps state as each workflow panel becomes active. */
.product-journey{grid-template-columns:50% 50%;row-gap:65px}.journey-heading{grid-column:1/-1;max-width:750px}.journey-heading h2{font-size:clamp(46px,6vw,86px);font-weight:500;line-height:.9;letter-spacing:-.08em;margin:0}.product-journey .story-sticky{z-index:2}.product-journey .story-visual{display:block;padding:27px;background:#e7e0ff;overflow:hidden;transform-style:preserve-3d}.product-journey .story-visual h2{position:absolute;left:28px;top:83px;font-size:clamp(36px,4.2vw,58px);max-width:390px;transition:opacity .38s ease,transform .55s var(--motion-ease)}.product-journey .story-meta{position:absolute;left:29px;top:211px;max-width:260px;transition:opacity .38s ease,transform .55s var(--motion-ease)}.story-progress{position:absolute;right:28px;top:28px;display:flex;align-items:center;gap:8px;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#555065}.story-progress i{display:block;width:76px;height:2px;background:rgba(36,35,43,.18);position:relative;overflow:hidden}.story-progress b{position:absolute;inset:0 auto 0 0;width:16.666%;background:#373040;transition:width .55s var(--motion-ease)}.story-progress em{font-style:normal;color:#777083}.journey-ui{position:absolute;left:28px;right:28px;bottom:26px;height:245px;perspective:800px}.journey-screen{position:absolute;inset:0;padding:19px;border-radius:17px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.78);box-shadow:0 18px 32px rgba(67,56,99,.16);display:flex;flex-direction:column;gap:12px;opacity:0;transform:translate3d(0,35px,-35px) rotateX(12deg) scale(.92);transition:opacity .36s ease,transform .6s var(--motion-ease),background .55s ease}.journey-screen>span{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;color:#736d80}.journey-screen>b{font-size:20px;letter-spacing:-.06em;line-height:1.05}.journey-screen>i{padding:10px;border-radius:8px;background:#f0edf7;color:#6e6875;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}.journey-screen>strong{margin-top:auto;padding:9px 11px;border-radius:8px;background:#242329;color:#fff;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;align-self:flex-start}.journey-sides{display:flex;gap:8px;margin-top:8px}.journey-sides i{padding:9px 10px;border-radius:7px;background:#ddd5fb;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}.journey-hoodie{height:105px;border-radius:13px;background:#ddd4fb;display:grid;place-items:center}.journey-hoodie::before{content:"";width:70px;height:87px;border-radius:18px 18px 8px 8px;background:#fff;box-shadow:inset 0 0 0 2px #d6cdef}.journey-hoodie b{position:absolute;width:28px;height:15px;background:#fb8d70;border-radius:4px}.screen-approval>b{padding:12px;border-radius:10px;background:#e6f1c7;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}.screen-pdf{background:rgba(247,244,238,.88)}.screen-pdf>b{padding:16px;border:1px dashed #a8a198;border-radius:10px;font-size:16px}.product-journey .story-visual[data-state="create"] .screen-create,.product-journey .story-visual[data-state="product"] .screen-product,.product-journey .story-visual[data-state="upload"] .screen-upload,.product-journey .story-visual[data-state="mockup"] .screen-mockup,.product-journey .story-visual[data-state="approval"] .screen-approval,.product-journey .story-visual[data-state="pdf"] .screen-pdf{opacity:1;transform:translate3d(0,0,30px) rotateX(0) scale(1)}.product-journey .story-visual[data-state="product"]{background:#dceaf0;transform:rotate(-2deg) scale(.99)}.product-journey .story-visual[data-state="upload"]{background:#f0e1d8;transform:rotate(2deg) scale(1.01)}.product-journey .story-visual[data-state="mockup"]{background:#dcd0fb;transform:rotate(-1deg) scale(1.02)}.product-journey .story-visual[data-state="approval"]{background:#ddebba;transform:rotate(2deg) scale(.99)}.product-journey .story-visual[data-state="pdf"]{background:#e9e7e1;transform:rotate(-2deg) scale(1.01)}.product-journey .story-panels{padding-left:10%}.product-journey .story-panel{min-height:60vh}.product-journey .story-panel h3{font-size:clamp(34px,4.1vw,56px)}@media (max-width:760px){.product-journey{display:block;padding-top:80px}.journey-heading{margin-bottom:40px}.product-journey .story-sticky{position:relative;top:auto;height:auto;margin-bottom:20px}.product-journey .story-visual{height:510px;width:100%;max-width:510px;margin:auto}.product-journey .story-panels{padding:0}.product-journey .story-panel{min-height:45vh}.product-journey .story-visual h2{font-size:40px}.journey-ui{height:220px}}

.comment-bubble.is-expanded{width:215px;transform:translateY(-5px) scale(1.04)!important}
.journey-hoodie{position:relative}

/* Controlled approval typography: slow marquee, calm letter response, and a readable tracking line. */
.type-motion-section .marquee-track{animation-duration:32s}.type-motion-section .word-reveal{max-width:620px}.type-motion-section .word-reveal span{will-change:transform,opacity}.type-motion-section .kinetic-word{cursor:none}

/* 3D CTA: a restrained glass panel floats while workflow labels make one slow orbit. */
.cta-section{padding-top:110px;padding-bottom:130px}.cta-panel{position:relative;min-height:510px;display:grid;place-items:center;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.78);border-radius:30px;background:linear-gradient(135deg,rgba(224,217,250,.72),rgba(241,242,229,.84) 58%,rgba(248,237,230,.76));box-shadow:0 26px 54px rgba(53,47,68,.12),inset 0 1px 0 rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:ctaPanelFloat 7.5s ease-in-out infinite}.cta-panel::before,.cta-panel::after{content:"";position:absolute;border-radius:50%;pointer-events:none}.cta-panel::before{width:390px;height:390px;background:rgba(200,190,244,.38);filter:blur(3px);left:-120px;bottom:-220px}.cta-panel::after{width:270px;height:270px;background:rgba(239,205,184,.35);right:-70px;top:-130px}.cta-copy{position:relative;z-index:3;max-width:710px;padding:65px 30px;text-align:center}.cta-copy h2{margin:0;font-size:clamp(48px,7vw,94px);line-height:.91;letter-spacing:-.078em;font-weight:500}.cta-copy h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:500}.cta-copy p{max-width:525px;margin:28px auto 0;color:#5f5b63;font-size:16px;line-height:1.58}.cta-actions{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:32px}.cta-panel .press-button{position:relative;z-index:4;background:#24242a;box-shadow:0 8px 0 #9b96a5,0 17px 28px rgba(39,35,48,.2)}.cta-panel .press-button:hover{transform:translateY(-6px);box-shadow:0 14px 0 #9b96a5,0 24px 34px rgba(39,35,48,.2)}.cta-panel .press-button:active{transform:translateY(5px);box-shadow:0 3px 0 #9b96a5,0 7px 13px rgba(39,35,48,.18)}.cta-secondary{position:relative;z-index:4;display:inline-flex;align-items:center;gap:10px;padding:15px 18px;border:1px solid rgba(36,36,42,.16);border-radius:999px;background:rgba(255,255,255,.48);color:#343239;font-size:13px;transition:transform .25s var(--motion-ease),background .25s ease,box-shadow .25s ease}.cta-secondary:hover{transform:translateY(-3px);background:rgba(255,255,255,.82);box-shadow:0 11px 20px rgba(43,38,52,.11)}.cta-secondary i{font-style:normal}.cta-orbit{position:absolute;z-index:2;width:min(700px,82vw);aspect-ratio:1.75;border:1px solid rgba(82,75,95,.15);border-radius:50%;animation:ctaOrbit 24s linear infinite;transform-style:preserve-3d}.cta-orbit::before{content:"";position:absolute;inset:15%;border:1px solid rgba(255,255,255,.7);border-radius:inherit}.cta-orbit-label{position:absolute;display:grid;place-items:center;padding:9px 13px;border:1px solid rgba(255,255,255,.76);border-radius:999px;background:rgba(255,255,255,.67);box-shadow:0 12px 22px rgba(49,43,61,.12);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase;color:#403b47;animation:ctaOrbitCounter 24s linear infinite,ctaOrbitDepth 5s ease-in-out infinite}.label-artwork{top:-14px;left:23%;animation-delay:0s,-.7s}.label-mockup{top:19%;right:-18px;animation-delay:0s,-2.1s}.label-approval{bottom:-14px;right:25%;animation-delay:0s,-3.4s}.label-pdf{bottom:18%;left:-8px;animation-delay:0s,-4.6s}.cta-panel:hover .cta-orbit,.cta-panel:hover .cta-orbit-label{animation-duration:36s}@keyframes ctaPanelFloat{50%{transform:translateY(-8px) rotateX(1deg)}}@keyframes ctaOrbit{to{transform:rotate(-360deg)}}@keyframes ctaOrbitCounter{to{transform:rotate(360deg)}}@keyframes ctaOrbitDepth{50%{scale:.84;opacity:.6;box-shadow:0 5px 12px rgba(49,43,61,.08)}}@media (max-width:760px){.cta-section{padding-top:80px;padding-bottom:90px}.cta-panel{min-height:520px}.cta-copy{padding:58px 22px}.cta-copy p{font-size:15px}.cta-actions{flex-direction:column}.cta-actions>a{justify-content:center;min-width:190px}.cta-orbit{width:108vw;aspect-ratio:1.35}.label-mockup{right:2%}.label-pdf{left:4%}}@media (prefers-reduced-motion:reduce){.cta-panel,.cta-orbit,.cta-orbit-label{animation:none!important}.cta-panel{transform:none!important}}

/* Production polish — design tokens and shared layout. */
:root{--surface:#fffdfa;--surface-glass:rgba(255,255,255,.68);--surface-muted:#efede7;--radius-card:20px;--shadow-soft:0 16px 34px rgba(48,42,58,.12);--shadow-lift:0 28px 48px rgba(43,37,54,.18);--section-space:clamp(88px,10vw,132px);--float-distance:8px}.section-shell,.story-section,.rotation-stage{min-width:0}.problem-section,.glass-section,.skills-section,.artwork-motion-section,.stack-section,.approval-section,.feature-section{padding-top:var(--section-space);padding-bottom:var(--section-space)}.section-intro{margin-bottom:clamp(38px,5vw,55px)}.section-intro h2,.journey-heading h2{font-weight:500;letter-spacing:-.07em}.eyebrow,.section-number{color:#706d68}.section-intro>p:last-child,.lede,.cta-copy p{color:#625f5b}.glass-card,.messy-card,.artwork-file-card,.blank-product-card,.final-mockup-card,.approval-screen,.feature-card{border-color:rgba(255,255,255,.78);box-shadow:var(--shadow-soft)}

/* Production polish — keyboard focus, cursor, and magnifier. */
:where(a,button,[tabindex="0"]):focus-visible{outline:2px solid #6957a5;outline-offset:4px}.cursor-ring{will-change:transform}.headline-lens{will-change:left,top,scale}

/* Production polish — hero orbit, workflow cleanup, and product state. */
.promo-hero-card{border-radius:var(--radius-card)}.hero-tag,.orbit-item{box-shadow:0 10px 22px rgba(43,37,54,.12)}.glass-card{animation-duration:9s}.parallax-section{background:linear-gradient(135deg,#ebe9e3,#e7e5ee);color:var(--ink);border-top:1px solid rgba(23,23,23,.08);border-bottom:1px solid rgba(23,23,23,.08)}.circle{border-color:#aaa39d}.square{background:#dbe6bb}.arc{border-color:#c7baf5}.diamond{background:#efad91}.line{background:#48434e}.pill{background:#fffdfa;box-shadow:0 16px 32px rgba(43,37,54,.12)}.parallax-copy>p:last-child{color:#69655f}.parallax-card{border-radius:var(--radius-card);box-shadow:var(--shadow-soft)}.card-alpha{background:rgba(255,253,250,.84)}.card-beta{background:#cdc2f1}.messy-card:hover{box-shadow:var(--shadow-lift)}

/* Production polish — sticky workflow, mockup motion, versions, approvals, and PDF output. */
.story-visual,.approval-screen{border-radius:var(--radius-card);box-shadow:var(--shadow-lift)}.story-panel{transition-duration:.5s}.side-label:focus-visible,.comment-pin:focus-visible,.approve-action:focus-visible{outline:2px solid #6957a5;outline-offset:3px}.version-stack .stack-card{border-radius:var(--radius-card)}.production-output .pdf-output-card{border-radius:var(--radius-card)}.feature-card{border-radius:var(--radius-card)}.feature-card:hover{box-shadow:var(--shadow-lift)!important}.type-motion-section{background:linear-gradient(180deg,transparent,rgba(224,220,239,.22))}

/* Production polish — CTA keeps one composed conversion moment. */
.cta-panel{border-radius:calc(var(--radius-card) + 8px);box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.72)}.cta-panel:hover .cta-orbit-label{animation-duration:36s,5s}.cta-panel .press-button:focus-visible,.cta-secondary:focus-visible{outline:2px solid #6957a5;outline-offset:5px}

/* Production polish — responsive safeguards. */
@media (max-width:760px){.section-shell{padding-left:5vw;padding-right:5vw}.section-intro{gap:14px}.section-intro>p:last-child{font-size:14px}.parallax-section{height:540px}.parallax-card{scale:.78}.story-section.product-journey .story-sticky{position:relative;height:auto;top:auto}.story-section.product-journey .story-visual{width:100%;height:480px;min-height:0}.story-section.product-journey .story-panel{padding-left:0;background:none}.messy-stage,.artwork-stage,.approval-stage,.cta-panel{border-radius:22px}.has-custom-cursor,.has-custom-cursor a,.has-custom-cursor button,.has-custom-cursor [data-cursor-label]{cursor:auto}.cursor,.headline-lens{display:none!important}}

/* Production polish — reduced motion leaves all workflow states readable and stable. */
@media (prefers-reduced-motion:reduce){.js .section-intro .section-number,.js .section-intro .eyebrow,.js .section-intro h2,.js .section-intro>p:last-child,.js .feature-card{opacity:1!important;transform:none!important;filter:none!important}.glass-card,.cta-panel,.cta-orbit,.cta-orbit-label,.side-orbit,.side-label,.marquee-track{animation:none!important}.story-panel{opacity:1!important}.messy-card-one{transform:translate(-50%,-50%) translate3d(-135px,-120px,0)!important}.messy-card-two{transform:translate(-50%,-50%) translate3d(135px,-120px,0)!important}.messy-card-three{transform:translate(-50%,-50%) translate3d(-135px,32px,0)!important}.messy-card-four{transform:translate(-50%,-50%) translate3d(135px,32px,0)!important}.messy-card-five{transform:translate(-50%,-50%) translate3d(-135px,184px,0)!important}.messy-card-six{transform:translate(-50%,-50%) translate3d(135px,184px,0)!important}}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.messy-card-one{transform:translate(-50%,-50%) translate3d(-76px,-128px,0)!important}.messy-card-two{transform:translate(-50%,-50%) translate3d(76px,-128px,0)!important}.messy-card-three{transform:translate(-50%,-50%) translate3d(-76px,0,0)!important}.messy-card-four{transform:translate(-50%,-50%) translate3d(76px,0,0)!important}.messy-card-five{transform:translate(-50%,-50%) translate3d(-76px,128px,0)!important}.messy-card-six{transform:translate(-50%,-50%) translate3d(76px,128px,0)!important}}

/* Shared float distance keeps the two conversion moments visually related. */
@keyframes heroFloat{50%{transform:rotateX(7deg) rotateY(-12deg) translate3d(0,calc(var(--float-distance) * -2),55px)}}
@keyframes ctaPanelFloat{50%{transform:translateY(calc(var(--float-distance) * -1)) rotateX(1deg)}}

/* FAQ: native details elements keep the accordion accessible without JavaScript. */
.faq-section{max-width:none;padding:clamp(82px,8vw,124px) 7vw;background:#26252a;color:#f7f6f2;display:grid;grid-template-columns:minmax(260px,.8fr) minmax(420px,1.2fr);gap:clamp(55px,8vw,130px);align-items:start;border-top:1px solid rgba(255,255,255,.12)}
.faq-intro{position:sticky;top:110px;max-width:560px}
.faq-intro .eyebrow{color:#b9b5be;margin-bottom:24px}
.faq-intro h2{margin:0;font-size:clamp(44px,5.3vw,82px);line-height:.94;letter-spacing:-.07em;font-weight:500}
.faq-intro>p:last-child{max-width:430px;margin:28px 0 0;color:#bdb9c1;font-size:16px;line-height:1.6}
.faq-list{border-top:1px solid rgba(255,255,255,.3)}
.faq-list details{border-bottom:1px solid rgba(255,255,255,.19)}
.faq-list summary{list-style:none;display:grid;grid-template-columns:46px minmax(0,1fr) 34px;align-items:center;gap:18px;padding:28px 0;cursor:pointer;color:#f7f6f2}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(255,255,255,.3);border-radius:50%;font-size:20px;font-weight:400;transition:transform .35s var(--motion-ease),background .25s ease,color .25s ease}
.faq-list details[open] summary::after{content:"-";transform:rotate(180deg);background:#b6f200;color:#1d1d1d;border-color:#b6f200}
.faq-list summary span{color:#9d99a2;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}
.faq-list summary strong{font-size:clamp(20px,2vw,30px);line-height:1.15;letter-spacing:-.035em;font-weight:500}
.faq-list details>p{max-width:690px;margin:0;padding:0 52px 28px 64px;color:#bbb7c0;font-size:16px;line-height:1.65}
.faq-list summary:hover::after{transform:scale(1.08)}
.faq-list details[open] summary:hover::after{transform:rotate(180deg) scale(1.08)}
.faq-list summary:focus-visible{outline:2px solid #b6f200;outline-offset:7px;border-radius:3px}
@media (max-width:760px){.faq-section{grid-template-columns:1fr;gap:46px;padding:75px 5vw}.faq-intro{position:static}.faq-intro h2{font-size:clamp(40px,11vw,58px)}.faq-list summary{grid-template-columns:32px minmax(0,1fr) 32px;gap:12px;padding:23px 0}.faq-list summary strong{font-size:20px}.faq-list details>p{padding:0 44px 24px;color:#c9c5cc;font-size:14px}}

/* Final visual corrections: a tighter opening frame and clearly separated workflow surfaces. */
.hero{min-height:620px;padding-top:28px;padding-bottom:58px;gap:clamp(24px,3vw,54px);grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr)}.hero-object{height:420px}.promo-hero-card{width:min(410px,84vw);height:400px}.promo-hero-card .hero-art{height:300px}.hero-copy{position:relative;z-index:4}.hero h1{font-size:clamp(50px,6.6vw,102px)}.hero .lede{margin:25px 0}.messy-stage{background:linear-gradient(135deg,#f4e8dd,#f1ddd2)}.messy-background i:nth-child(1){background:#f4c8ac;opacity:.56}.messy-background i:nth-child(2){background:#e7b7c5;opacity:.48}.messy-background i:nth-child(3){background:#f5dfab;opacity:.58}.glass-stage{background:linear-gradient(135deg,#dcebf0,#e4eee3)}.blob-lilac{background:#a9c8d8}.blob-peach{background:#c8dcae}.glass-card{background:rgba(255,255,255,.38)}

/* The lens uses a crisp cloned headline, not a blurred view of the page behind it. */
.headline-lens{background:rgba(255,255,255,.16);backdrop-filter:saturate(1.08);-webkit-backdrop-filter:saturate(1.08)}.headline-lens-copy{position:absolute;inset:auto;transform-origin:top left;white-space:normal}.headline-lens-copy,.headline-lens-copy *{filter:none!important;opacity:1!important;animation:none!important}.headline-lens-copy *{pointer-events:none}
@media (max-width:760px){.hero{min-height:auto;padding-top:38px;padding-bottom:36px;grid-template-columns:1fr;gap:12px}.hero-object{height:380px}.promo-hero-card{width:min(370px,90vw);height:385px}.promo-hero-card .hero-art{height:292px}}

/* Artwork scrollytelling: hold the stage on desktop until the file has become the final mockup. */
@media (min-width:761px){.artwork-motion-section{padding-bottom:calc(var(--section-space) + 100vh)}.artwork-stage{position:sticky;top:80px;z-index:2}}

/* Version stack: tighter card scale and spread keep every revision inside its comparison canvas. */
.version-stack{max-width:650px}.version-stack.card-stack{height:400px}.version-stack .stack-card{width:48%;height:275px;left:26%;top:58px;padding:20px}.version-stack .stack-card strong{font-size:clamp(34px,3.2vw,42px)}.version-stack:hover .stack-one,.version-stack:focus .stack-one{transform:translate3d(-120px,-26px,82px) rotate(-10deg)}.version-stack:hover .stack-two,.version-stack:focus .stack-two{transform:translate3d(-40px,10px,20px) rotate(-3deg)}.version-stack:hover .stack-three,.version-stack:focus .stack-three{transform:translate3d(52px,4px,-35px) rotate(5deg);opacity:.76}.version-stack:hover .stack-four,.version-stack:focus .stack-four{transform:translate3d(120px,-20px,-76px) rotate(10deg);opacity:.5}@media (max-width:760px){.version-stack.card-stack{height:360px}.version-stack .stack-card{width:70%;height:245px;left:15%;top:48px;padding:17px}.version-stack .stack-card strong{font-size:34px}.version-stack:hover .stack-one,.version-stack:focus .stack-one{transform:translate3d(-52px,-23px,72px) rotate(-9deg)}.version-stack:hover .stack-two,.version-stack:focus .stack-two{transform:translate3d(-15px,7px,15px) rotate(-3deg)}.version-stack:hover .stack-three,.version-stack:focus .stack-three{transform:translate3d(24px,4px,-28px) rotate(4deg)}.version-stack:hover .stack-four,.version-stack:focus .stack-four{transform:translate3d(53px,-18px,-60px) rotate(9deg)}}

/* Real PromoPlus screens: framed as product surfaces, with the existing transforms providing depth and motion. */
.hero-real-ui{position:absolute;inset:0;z-index:8;width:100%;height:100%;object-fit:cover;object-position:53% 57%;border-radius:12px;filter:saturate(.92) contrast(.98)}.promo-dashboard>:not(.hero-real-ui){opacity:0;pointer-events:none}.glass-real-ui{position:absolute;inset:7%;z-index:0;width:86%;height:86%;object-fit:cover;object-position:center top;border-radius:18px;opacity:.55;mix-blend-mode:multiply;filter:saturate(.8)}.glass-card{z-index:2}.real-media-card{padding:0!important;overflow:hidden;background:#fff!important}.real-media-card>img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(.98)}.blank-product-card.real-media-card>img{object-position:52% center}.final-mockup-card.real-media-card>img{object-position:67% center}.real-version-card{padding:0!important;overflow:hidden;background:#f8f8f7!important}.real-version-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;filter:saturate(.85) contrast(.98)}.version-stack .stack-four>img{object-position:56% center}.real-screen{padding:0!important;overflow:hidden;background:#fff!important}.real-screen>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.9) contrast(.98)}.screen-mockup.real-screen>img,.screen-approval.real-screen>img{object-position:72% center}.screen-pdf.real-screen>img{object-position:center 22%}.real-pdf-card{display:block!important;padding:0!important;overflow:hidden;background:#fff!important}.real-pdf-card>img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 35%;filter:saturate(.9) contrast(.98)}.real-pdf-card>span{position:absolute;right:16px;bottom:15px;padding:7px 9px;border-radius:6px;background:rgba(255,255,255,.88);font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;color:#423f3c}.real-approval-screen{width:min(680px,88vw);min-height:420px;padding:0;display:block;overflow:hidden;background:#fff}.real-approval-screen>img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover;object-position:68% center;filter:saturate(.92) contrast(.98)}.real-approval-screen>.approval-status{position:absolute;z-index:7;top:17px;right:17px;box-shadow:0 8px 16px rgba(37,34,40,.14)}.real-approval-screen .approve-action{position:absolute;z-index:7;right:18px;bottom:18px}.real-approval-screen .comment-bubble{z-index:7;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.real-approval-screen .comment-pin{z-index:8}.real-approval-screen .approval-timestamp{z-index:7;background:rgba(255,255,255,.86);padding:7px;border-radius:5px}
@media (max-width:760px){.glass-real-ui{inset:5%;width:90%;height:90%;opacity:.42}.real-approval-screen{width:min(620px,92vw);min-height:380px}.real-approval-screen>img{min-height:380px}.real-approval-screen .comment-bubble{scale:.8;transform-origin:center}.real-approval-screen .bubble-one{left:-3%;top:8%}.real-approval-screen .bubble-two{right:-4%;bottom:4%}}

/* Redesigned hero: three real product surfaces form a floating workflow scene. */
.hero-workflow-scene{height:490px;perspective:1500px;isolation:isolate}.hero-workflow-scene>.portfolio-card,.hero-workflow-scene>.hero-tag{display:none}.hero-scene-glow{position:absolute;z-index:-1;width:360px;height:360px;left:50%;top:50%;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(187,169,255,.4),rgba(215,245,62,.13) 43%,transparent 72%);filter:blur(9px)}.hero-screen{position:absolute;overflow:hidden;border:1px solid rgba(255,255,255,.86);border-radius:18px;background:#fff;box-shadow:0 28px 48px rgba(45,39,59,.2);transform-style:preserve-3d;will-change:transform}.hero-screen>img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(.98)}.hero-screen>span,.hero-screen-main>div{position:absolute;z-index:2;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 8px 17px rgba(30,27,38,.12);font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.05em;text-transform:uppercase;color:#46414e;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.hero-screen-back{z-index:1;left:2%;top:132px;width:min(310px,48vw);height:210px;transform:rotateY(18deg) rotateZ(-9deg) translateZ(-65px);animation:heroScreenBack 8s ease-in-out infinite}.hero-screen-back>img{object-position:68% center}.hero-screen-back>span{left:16px;bottom:15px}.hero-screen-main{z-index:3;left:50%;top:54px;width:min(430px,62vw);height:305px;translate:-50% 0;transform:rotateX(8deg) rotateY(-10deg) rotateZ(2deg) translateZ(48px);animation:heroScreenMain 7s ease-in-out infinite}.hero-screen-main>img{object-position:55% center}.hero-screen-main>div{right:15px;bottom:15px;display:flex;align-items:center;gap:9px}.hero-screen-main>div b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#caff00;color:#242424;font-size:10px}.hero-screen-front{z-index:4;right:1%;bottom:50px;width:min(210px,36vw);height:142px;transform:rotateY(-18deg) rotateZ(8deg) translateZ(108px);animation:heroScreenFront 6.5s ease-in-out infinite}.hero-screen-front>img{object-position:72% center}.hero-screen-front>span{right:13px;top:12px}.hero-workflow-scene:hover .hero-screen-back,.hero-workflow-scene:hover .hero-screen-main,.hero-workflow-scene:hover .hero-screen-front{animation-play-state:paused}@keyframes heroScreenMain{50%{transform:rotateX(5deg) rotateY(-5deg) rotateZ(-1deg) translate3d(0,-16px,72px)}}@keyframes heroScreenBack{50%{transform:rotateY(13deg) rotateZ(-6deg) translate3d(6px,-14px,-40px)}}@keyframes heroScreenFront{50%{transform:rotateY(-13deg) rotateZ(4deg) translate3d(-9px,-16px,132px)}}
@media (max-width:760px){.hero-workflow-scene{height:390px}.hero-screen-back{left:2%;top:108px;width:215px;height:150px}.hero-screen-main{top:35px;width:min(330px,78vw);height:230px}.hero-screen-front{right:0;bottom:31px;width:150px;height:105px}.hero-screen>span,.hero-screen-main>div{scale:.82}}

/* Hero mockup: keep the generated hoodie and its quiet settings panel centered in the focal screen. */
.hero-screen-main>img{object-position:52% center;filter:saturate(.94) contrast(1.01)}

/* Hero feedback card: crop toward the review thread and layer two concise, readable comments over it. */
.hero-screen-front{width:min(290px,42vw);height:194px}.hero-screen-front>img{object-position:42% center;filter:saturate(.88) contrast(1.02)}
.hero-review-meta{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 8px 18px rgba(50,43,59,.14);font:8px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em;color:#403b48}.hero-review-meta b{font-weight:600}.hero-review-meta i{padding-left:7px;border-left:1px solid rgba(54,49,62,.15);font-style:normal;color:#715dcb}.hero-feedback-note{position:absolute;z-index:2;display:grid;gap:2px;padding:7px 8px;border:1px solid rgba(255,255,255,.82);border-radius:8px;background:rgba(255,255,255,.9);box-shadow:0 8px 17px rgba(50,43,59,.13);font:8px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;color:#514d58;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.hero-feedback-note strong{font-size:7px;color:#7668b6}.hero-feedback-note span{white-space:nowrap}.note-sarah{left:11px;bottom:13px}.note-team{right:12px;bottom:13px}.note-team strong{color:#5a791e}
@media (max-width:760px){.hero-screen-front{width:178px;height:122px}.hero-review-meta{top:7px;right:7px;padding:5px 6px;font-size:6px}.hero-feedback-note{padding:5px 6px;font-size:6px}.hero-feedback-note strong{font-size:6px}.note-sarah{left:7px;bottom:7px}.note-team{right:7px;bottom:7px}}

/* Hero refinement: larger focal screens with uninterrupted transform animations. */
.hero-workflow-scene{height:540px}.hero-scene-glow{width:440px;height:440px}.hero-screen-back{left:-2%;top:150px;width:min(370px,55vw);height:250px}.hero-screen-main{top:48px;width:min(510px,70vw);height:360px}.hero-screen-front{right:-2%;bottom:48px;width:min(255px,40vw);height:172px}.hero-workflow-scene:hover .hero-screen-back,.hero-workflow-scene:hover .hero-screen-main,.hero-workflow-scene:hover .hero-screen-front{animation-play-state:running}.hero-screen-main{transition:box-shadow .45s var(--motion-ease),filter .45s ease}.hero-screen-main:hover{box-shadow:0 36px 64px rgba(45,39,59,.26);filter:brightness(1.015)}
@media (max-width:760px){.hero-workflow-scene{height:420px}.hero-screen-back{left:0;top:125px;width:230px;height:160px}.hero-screen-main{top:32px;width:min(365px,83vw);height:254px}.hero-screen-front{right:-1%;bottom:32px;width:165px;height:114px}}

/* Keep the feedback screen prominent after the shared hero-size refinements. */
.hero-screen-front{width:min(290px,42vw);height:194px}.hero-screen-front>img{object-position:42% center}@media (max-width:760px){.hero-screen-front{width:178px;height:122px}}

/* Live project state: one clear 3D path shows artwork becoming a reviewed, approved production record. */
.workflow-state-stage{height:550px;background:linear-gradient(135deg,#eef3f0,#e8efed);perspective:1400px;isolation:isolate}.workflow-state-stage::before{content:"";position:absolute;width:480px;height:480px;left:calc(50% - 240px);top:calc(50% - 240px);border-radius:50%;background:radial-gradient(circle,rgba(184,240,0,.22),rgba(184,240,0,0) 68%);filter:blur(8px);pointer-events:none}.workflow-connection{position:absolute;z-index:0;left:17%;right:17%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(64,69,66,.28) 15%,rgba(64,69,66,.28) 85%,transparent);transform:rotate(-4deg)}.workflow-connection i{position:absolute;width:8px;height:8px;border-radius:50%;background:#b8f000;box-shadow:0 0 0 6px rgba(184,240,0,.15)}.workflow-connection i:nth-child(1){left:20%;top:-4px}.workflow-connection i:nth-child(2){left:51%;top:-4px}.workflow-connection i:nth-child(3){right:13%;top:-4px}.state-card,.state-mockup{position:absolute;z-index:2;border:1px solid rgba(255,255,255,.86);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 22px 42px rgba(55,61,59,.15),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-style:preserve-3d}.state-card{display:flex;flex-direction:column;gap:10px;padding:18px}.state-card span,.state-card small{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;color:#6e726f}.state-card strong{font-size:clamp(18px,2vw,27px);line-height:1.02;letter-spacing:-.065em}.state-card small{margin-top:auto}.state-card>b{padding:8px 9px;border-radius:8px;background:#b8f000;color:#26310e;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em}.state-artwork{width:225px;height:167px;left:9%;top:19%;transform:translateZ(24px) rotateY(10deg) rotateZ(-5deg);animation:stateCardFloat 7s ease-in-out infinite}.state-feedback{width:220px;height:174px;right:8%;top:17%;transform:translateZ(42px) rotateY(-12deg) rotateZ(5deg);animation:stateCardFloat 7.5s ease-in-out -2s infinite}.state-feedback>b{background:#e7dcff;color:#554688}.state-approved{width:218px;height:160px;right:17%;bottom:12%;transform:translateZ(78px) rotateY(-7deg) rotateZ(-4deg);animation:stateCardFloat 6.8s ease-in-out -3.2s infinite}.state-approved>b{background:#d8f2ca;color:#37622b}.state-mockup{z-index:3;left:50%;top:50%;width:min(420px,38vw);height:300px;overflow:hidden;transform:translate(-50%,-50%) translateZ(95px) rotateX(5deg) rotateY(-5deg);animation:stateMockupFloat 8s ease-in-out infinite;transition:transform .55s var(--motion-ease),box-shadow .55s ease}.state-mockup>img{width:100%;height:100%;object-fit:cover;object-position:53% center;display:block;filter:saturate(.88) contrast(1.02)}.state-mockup>div{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.9);box-shadow:0 8px 16px rgba(48,52,50,.13);font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#4b514e}.state-mockup>div b{padding:5px 7px;border-radius:6px;background:#b8f000;color:#27310e}.workflow-state-stage:hover .state-artwork{transform:translate3d(-12px,-12px,55px) rotateY(15deg) rotateZ(-7deg)}.workflow-state-stage:hover .state-feedback{transform:translate3d(12px,-10px,70px) rotateY(-16deg) rotateZ(7deg)}.workflow-state-stage:hover .state-approved{transform:translate3d(20px,-16px,110px) rotateY(-10deg) rotateZ(-5deg)}.workflow-state-stage:hover .state-mockup{transform:translate(-50%,-50%) translate3d(0,-12px,130px) rotateX(3deg) rotateY(-2deg);box-shadow:0 34px 56px rgba(44,53,46,.24)}@keyframes stateCardFloat{50%{translate:0 -10px}}@keyframes stateMockupFloat{50%{translate:-50% calc(-50% - 10px)}}@media (max-width:760px){.workflow-state-stage{height:530px}.workflow-connection{left:8%;right:8%;top:51%}.state-mockup{width:72vw;height:245px}.state-artwork{left:4%;top:8%;width:175px;height:145px;padding:14px}.state-feedback{right:4%;top:11%;width:168px;height:147px;padding:14px}.state-approved{right:8%;bottom:7%;width:180px;height:137px;padding:14px}.state-card strong{font-size:17px}.state-card>b{padding:7px}.workflow-state-stage:hover .state-artwork,.workflow-state-stage:hover .state-feedback,.workflow-state-stage:hover .state-approved{transform:none}.workflow-state-stage:hover .state-mockup{transform:translate(-50%,-50%) translateZ(35px)}}@media (prefers-reduced-motion:reduce){.state-card,.state-mockup{animation:none!important}}

@keyframes stateMockupFloat{50%{transform:translate(-50%,-50%) translate3d(0,-10px,95px) rotateX(4deg) rotateY(-4deg)}}
.workflow-state-stage:hover .state-card,.workflow-state-stage:hover .state-mockup{animation-play-state:paused}

/* Keep the project-state motion continuous on hover; depth remains, without resetting transforms. */
.workflow-state-stage:hover .state-card,.workflow-state-stage:hover .state-mockup{animation-play-state:running}
.workflow-state-stage:hover .state-artwork{transform:translateZ(24px) rotateY(10deg) rotateZ(-5deg)}
.workflow-state-stage:hover .state-feedback{transform:translateZ(42px) rotateY(-12deg) rotateZ(5deg)}
.workflow-state-stage:hover .state-approved{transform:translateZ(78px) rotateY(-7deg) rotateZ(-4deg)}
.workflow-state-stage:hover .state-mockup{box-shadow:0 27px 48px rgba(44,53,46,.2)}
.state-mockup{transition:box-shadow .45s var(--motion-ease)}
.state-mockup>img{object-position:52% center}

/* 3D Feature Cards: a compact, scannable capability grid that shares the global tilt and glare engine. */
.feature-section{padding-top:125px;padding-bottom:125px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature-card{height:225px!important;padding:20px!important;background:rgba(255,255,255,.64)!important;border:1px solid rgba(255,255,255,.82);box-shadow:0 14px 25px rgba(43,38,52,.1)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column;justify-content:space-between}.feature-card:nth-child(3n+2){background:rgba(231,224,255,.63)!important}.feature-card:nth-child(3n){background:rgba(235,243,211,.63)!important}.feature-card .glare{z-index:1}.feature-icon,.feature-copy{position:relative;z-index:3;transform:translateZ(55px);transition:transform .4s var(--motion-ease)}.feature-icon{display:grid;place-items:center;width:max-content;min-width:45px;height:32px;padding:0 9px;border-radius:8px;background:#27262d;color:#fff;font:10px ui-monospace,SFMono-Regular,Consolas,monospace}.feature-copy h3{font-size:clamp(19px,2vw,25px);letter-spacing:-.06em;line-height:1;margin:0 0 8px;font-weight:500}.feature-copy p{margin:0;max-width:210px;color:#68635e;font-size:13px;line-height:1.45}.feature-card:hover .feature-icon{transform:translateZ(95px) scale(1.08)}.feature-card:hover .feature-copy{transform:translateZ(78px) translateY(-4px)}.js .feature-card{opacity:0;transform:translateY(38px) rotateX(10deg);filter:blur(6px);transition:opacity .6s ease,transform .65s var(--motion-ease),filter .6s ease,box-shadow .4s ease}.js .feature-card.is-visible{opacity:1;transform:none;filter:none}.js .feature-card:nth-child(2){transition-delay:.05s}.js .feature-card:nth-child(3){transition-delay:.1s}.js .feature-card:nth-child(5){transition-delay:.05s}.js .feature-card:nth-child(6){transition-delay:.1s}@media (max-width:760px){.feature-grid{grid-template-columns:1fr}.feature-card{height:190px!important}.feature-copy p{max-width:300px}}

/* Production PDF Reveal: intermediate sources recede while the approved output becomes the single foreground record. */
.production-output .rotation-layer{padding:22px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;overflow:hidden}.production-output .output-history{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em}.production-output .output-history span{font-size:10px;opacity:.7}.production-output .output-history b{font:clamp(25px,3vw,42px) Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.07em}.production-output .output-history i{font-style:normal;opacity:.65}.production-output .pdf-output-card{padding:26px;background:#f7f5ee;color:#242326;box-shadow:0 36px 60px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.5) inset}.pdf-output-card>span{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:#74706a}.pdf-output-card strong{font-size:clamp(28px,3.5vw,49px);letter-spacing:-.08em;line-height:.94}.pdf-output-card ul{list-style:none;margin:0;padding:13px 0;border-top:1px solid rgba(35,35,35,.15);border-bottom:1px solid rgba(35,35,35,.15);width:100%;font:10px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;color:#5e5a55}.pdf-output-card> b{padding:10px 12px;border-radius:7px;background:#dcebb7;color:#42591f;font:10px ui-monospace,SFMono-Regular,Consolas,monospace}.production-output .layer-back,.production-output .layer-middle{filter:saturate(.75);transition:opacity .35s ease,filter .35s ease}.production-output:hover .pdf-output-card{box-shadow:0 44px 72px rgba(0,0,0,.58),0 0 42px rgba(221,235,183,.18),0 0 0 1px rgba(255,255,255,.55) inset}@media (max-width:760px){.production-output .rotation-layer{padding:16px}.pdf-output-card ul{font-size:8px}.pdf-output-card> b{padding:8px 9px}}

/* Production file kit: meaningful records stack together before the final PDF claims the foreground. */
.production-kit .production-card{inset:8%;padding:22px;border:1px solid rgba(255,255,255,.58);border-radius:20px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em}.production-kit .production-card>span{font-size:9px;opacity:.7}.production-kit .production-card>b{font:500 clamp(25px,3.2vw,39px)/.95 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.07em}.production-kit .production-card small{font-size:9px;opacity:.68}.production-kit .production-card>i,.production-kit .production-card>em{padding:8px 10px;border-radius:8px;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}.production-kit .kit-artwork{background:#b8a9e7;color:#fff}.production-kit .kit-artwork>i{background:rgba(255,255,255,.2);color:#fff}.production-kit .kit-sides{background:#f2d3c2;color:#292729}.side-chips{display:flex;gap:6px;flex-wrap:wrap}.side-chips i{padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.6);font:9px ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}.production-kit .kit-approval{background:#dceab7;color:#33411b}.production-kit .kit-approval>i{background:rgba(255,255,255,.58)}.production-kit .kit-pdf{background:#fffdf8;color:#252327;box-shadow:0 38px 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.8)}.production-kit .kit-pdf strong{font:500 clamp(29px,3.8vw,50px)/.9 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.085em}.production-kit .kit-pdf ul{width:100%;margin:0;padding:13px 0;list-style:none;border-top:1px solid rgba(35,35,35,.14);border-bottom:1px solid rgba(35,35,35,.14);font-size:9px}.production-kit .kit-pdf li{display:flex;justify-content:space-between;gap:9px;padding:3px 0}.production-kit .kit-pdf li i{font-style:normal;color:#77716b}.production-kit .kit-pdf li b{font-weight:500;text-align:right}.production-kit .kit-pdf>em{background:#b8f000;color:#26310c}.production-kit:hover .kit-pdf{box-shadow:0 48px 80px rgba(0,0,0,.62),0 0 45px rgba(184,240,0,.16),inset 0 0 0 1px rgba(255,255,255,.8)}@media (max-width:760px){.production-kit .production-card{inset:6%;padding:16px}.production-kit .production-card>b{font-size:22px}.production-kit .kit-pdf strong{font-size:27px}.production-kit .kit-pdf ul{font-size:7px}.side-chips i{padding:5px 7px;font-size:7px}}

/* Real production proof artifact: exact PDF mockup and artwork crops remain sharp and legible. */
.production-proof-artifact{width:min(560px,46vw);aspect-ratio:1.08;perspective:1200px}.production-proof-artifact .rotation-layer{inset:5%;padding:0;display:block;overflow:hidden;border:1px solid rgba(255,255,255,.3);border-radius:22px;background:#fff;color:#222;box-shadow:0 34px 62px rgba(0,0,0,.48)}.production-proof-artifact .rotation-layer>img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.04)}.production-proof-artifact .proof-artwork-layer>img{object-position:center top}.production-proof-artifact .proof-mockup-layer>img{object-position:69% 34%}.proof-back-sheet{padding:28px!important;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:space-between!important;background:#d4c6ff!important}.proof-back-sheet span,.proof-back-sheet small,.proof-back-sheet b,.proof-artwork-layer>span{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.07em}.proof-back-sheet strong{font-size:clamp(36px,4vw,58px);letter-spacing:-.08em;line-height:.9}.proof-back-sheet small{opacity:.65}.proof-back-sheet b{padding:9px 11px;border-radius:8px;background:#202024;color:#fff;font-weight:500}.proof-artwork-layer>span{position:absolute;left:16px;top:16px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 8px 18px rgba(0,0,0,.12);color:#4d4843}.proof-ready-label{position:absolute;left:14px;right:14px;bottom:14px;padding:13px 14px;border-radius:13px;background:rgba(255,255,255,.92);box-shadow:0 16px 28px rgba(0,0,0,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;grid-template-columns:1fr auto;gap:5px 14px;align-items:end}.proof-ready-label span,.proof-ready-label small{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;color:#6f6963}.proof-ready-label strong{font-size:19px;letter-spacing:-.055em;line-height:1}.proof-ready-label small{grid-column:2;grid-row:1 / span 2;align-self:center;padding:8px 9px;border-radius:8px;background:#b8f000;color:#26310b}.production-proof-artifact:hover .proof-mockup-layer{box-shadow:0 46px 78px rgba(0,0,0,.62),0 0 44px rgba(184,240,0,.14)}@media (max-width:760px){.production-proof-artifact{width:min(84vw,460px)}.proof-ready-label strong{font-size:15px}.proof-ready-label small{font-size:6px;padding:6px}.proof-back-sheet{padding:20px!important}}

/* Approval Interaction: comments arrive around a trustworthy review screen, then resolve into approval. */
.approval-section{padding-top:125px;padding-bottom:125px}.approval-stage{min-height:610px;position:relative;display:grid;place-items:center;border-radius:28px;background:linear-gradient(135deg,#e8e5f0,#edf1e5);overflow:hidden;isolation:isolate}.approval-stage::before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;background:#d5caf9;filter:blur(3px);left:8%;bottom:-190px;opacity:.72}.approval-stage::after{content:"";position:absolute;width:350px;height:350px;border-radius:50%;background:#f3cfbc;filter:blur(2px);right:7%;top:-145px;opacity:.68}.approval-screen{position:relative;z-index:2;width:min(520px,84vw);min-height:460px;padding:18px;border-radius:22px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.82);box-shadow:0 28px 48px rgba(55,48,70,.2);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);transform:rotateX(5deg) rotateY(-6deg);transition:transform .6s var(--motion-ease),box-shadow .6s ease}.approval-screen>header{display:flex;justify-content:space-between;align-items:center;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#645e68}.approval-status{padding:7px 9px;border-radius:999px;background:#f3e4b2;color:#69551f;font-weight:500;transition:background .5s ease,color .5s ease,transform .5s var(--motion-ease)}.approval-preview{position:relative;width:70%;height:285px;margin:26px auto 13px;border-radius:15px;background:linear-gradient(150deg,#dad0fb,#f0ecff);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(92,75,151,.12)}.approval-preview>span{position:absolute;bottom:11px;color:#716a7f;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}.approval-hoodie{position:relative;width:130px;height:178px;border-radius:32px 32px 12px 12px;background:#fff;box-shadow:inset 0 0 0 3px #e4dff2,0 14px 22px rgba(57,46,94,.16)}.approval-hoodie::before{content:"";position:absolute;top:-16px;left:39px;width:52px;height:42px;border-radius:50%;border:8px solid #fff;box-sizing:border-box}.approval-hoodie i{position:absolute;width:43px;height:24px;border-radius:4px;background:#fb8c70;left:44px;top:72px}.approval-hoodie b{position:absolute;width:24px;height:24px;border-radius:50%;background:#ded6fa;right:14px;top:42px}.comment-pin{position:absolute;z-index:5;width:29px;height:29px;border:0;border-radius:50%;background:#26242b;color:#fff;box-shadow:0 7px 13px #0003;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;opacity:0;scale:.5;transition:opacity .3s ease,scale .35s var(--motion-ease),background .25s}.approval-stage.is-visible .comment-pin{opacity:1;scale:1}.approval-stage.is-visible .pin-one{transition-delay:.2s}.approval-stage.is-visible .pin-two{transition-delay:.45s}.approval-stage.is-visible .pin-three{transition-delay:.7s}.pin-one{left:24%;top:38%}.pin-two{right:21%;top:52%}.pin-three{left:35%;bottom:22%}.comment-pin:hover{background:#6b58ad;scale:1.25}.comment-bubble{position:absolute;z-index:4;width:174px;padding:12px;border-radius:12px;background:#fff;box-shadow:0 15px 25px rgba(51,45,62,.16);opacity:0;transform:translateY(22px) scale(.92);transition:opacity .4s ease,transform .45s var(--motion-ease),width .3s var(--motion-ease)}.approval-stage.is-visible .comment-bubble{opacity:1;transform:none}.bubble-one{left:4%;top:16%;transition-delay:.35s}.bubble-two{right:5%;bottom:14%;transition-delay:.62s}.comment-bubble strong{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#736d76}.comment-bubble p{margin:7px 0 0;font-size:12px;line-height:1.35}.comment-bubble:hover{width:215px;transform:translateY(-5px) scale(1.04)!important}.approval-screen footer{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}.approval-screen footer button{border:0;border-radius:9px;padding:10px 12px;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer}.request-change{background:#eeeaf3;color:#534d5c}.approve-action{background:#28262d;color:#fff;box-shadow:0 5px 0 #77717d;transition:transform .15s ease,box-shadow .15s ease}.approve-action:hover{transform:translateY(-4px);box-shadow:0 9px 0 #77717d}.approve-action:active{transform:translateY(4px);box-shadow:0 1px 0 #77717d}.approval-timestamp{position:absolute;left:19px;bottom:20px;margin:0;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#658026;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--motion-ease)}.approval-stage.is-approved .approval-status{background:#dceab8;color:#3e5b1e;transform:scale(1.06)}.approval-stage.is-approved .approval-status::before{content:"✓ ";}.approval-stage.is-approved .approval-timestamp{opacity:1;transform:none}.approval-stage.is-approved .approval-screen{transform:rotateX(1deg) rotateY(-1deg) translateY(-8px);box-shadow:0 38px 58px rgba(53,68,26,.24)}@media (max-width:760px){.approval-stage{min-height:650px}.approval-screen{min-height:450px;width:min(500px,90vw)}.approval-preview{height:250px;width:74%}.comment-bubble{width:145px}.bubble-one{left:2%;top:9%}.bubble-two{right:2%;bottom:7%}.pin-one{left:18%;top:38%}.pin-two{right:15%;top:53%}.pin-three{left:27%;bottom:23%}}

/* Version Control: the approved file owns the foreground while older revisions recede. */
.version-control-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:7vw}.version-stack{max-width:720px;width:100%;margin:0}.version-stack .stack-card{overflow:hidden}.version-stack .stack-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--version-gx,50%) var(--version-gy,50%),rgba(255,255,255,.86),rgba(255,255,255,.12) 24%,transparent 53%);opacity:0;pointer-events:none;transition:opacity .25s ease}.version-stack .stack-card:hover::after,.version-stack .stack-card:focus::after{opacity:1}.version-stack .approved-version{transform:translateZ(35px) rotate(-4deg);box-shadow:0 32px 48px rgba(43,37,73,.32)}.version-stack .old-version{opacity:.62;filter:saturate(.75)}.version-stack:hover .stack-one,.version-stack:focus .stack-one{transform:translate3d(-195px,-42px,115px) rotate(-13deg)}.version-stack:hover .stack-two,.version-stack:focus .stack-two{transform:translate3d(-62px,12px,22px) rotate(-4deg)}.version-stack:hover .stack-three,.version-stack:focus .stack-three{transform:translate3d(82px,5px,-40px) rotate(6deg);opacity:.76}.version-stack:hover .stack-four,.version-stack:focus .stack-four{transform:translate3d(195px,-30px,-88px) rotate(14deg);opacity:.5}.version-details{padding:28px 0;border-top:1px solid #252525;border-bottom:1px solid var(--line);min-height:180px}.version-details h3{font-size:clamp(29px,3.4vw,45px);font-weight:500;letter-spacing:-.07em;line-height:.96;margin:13px 0}.version-details p{color:var(--muted);line-height:1.55;margin:0}.version-details>span{display:block;margin-top:22px;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;color:#77716a}.version-stack .stack-card:focus-visible{outline:2px solid #7761c3;outline-offset:5px}@media (max-width:760px){.version-control-layout{grid-template-columns:1fr;gap:18px}.version-stack{max-width:none}.version-details{max-width:560px}.version-stack:hover .stack-one,.version-stack:focus .stack-one{transform:translate3d(-60px,-35px,95px) rotate(-12deg)}.version-stack:hover .stack-two,.version-stack:focus .stack-two{transform:translate3d(-16px,8px,15px) rotate(-4deg)}.version-stack:hover .stack-three,.version-stack:focus .stack-three{transform:translate3d(28px,5px,-35px) rotate(5deg)}.version-stack:hover .stack-four,.version-stack:focus .stack-four{transform:translate3d(65px,-25px,-75px) rotate(12deg)}}

/* Artwork to Mockup Motion: a file crosses the placement grid and resolves into a lifted client preview. */
.artwork-motion-section{padding-top:125px;padding-bottom:125px}.artwork-stage{height:570px;position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,#ece9f5,#eef0e9);perspective:1200px;isolation:isolate}.placement-grid{position:absolute;inset:8%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);opacity:.55;will-change:transform}.placement-grid i{border-right:1px solid rgba(64,57,73,.13);border-bottom:1px solid rgba(64,57,73,.13)}.placement-grid i:last-child{border-right:0}.artwork-file-card,.blank-product-card,.final-mockup-card{position:absolute;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.72);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);box-shadow:0 18px 34px rgba(55,47,72,.16);border-radius:17px;will-change:transform}.artwork-file-card{left:7%;top:20%;width:190px;padding:16px;display:flex;flex-direction:column;gap:11px;z-index:4}.artwork-file-card span,.blank-product-card>span,.final-mockup-card>span{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.07em;color:#776f7e}.artwork-file-card strong{font-size:16px;letter-spacing:-.05em}.artwork-file-card small,.final-mockup-card small{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#77716d}.artwork-file-card b{padding:8px;border-radius:7px;background:#dceab6;color:#42571d;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}.blank-product-card{left:50%;top:50%;width:245px;height:370px;padding:15px;transform:translate(-50%,-50%) rotateY(-8deg);z-index:2}.artwork-product,.final-product{position:relative;margin-top:15px;height:315px;border-radius:15px;background:linear-gradient(150deg,#d3c8fa,#eeeafe);display:grid;place-items:center;transform-style:preserve-3d}.artwork-product::before,.final-product::before{content:"";width:142px;height:205px;border-radius:32px 32px 14px 14px;background:#fff;box-shadow:inset 0 0 0 3px #e3dff2,0 13px 20px rgba(61,50,97,.16)}.artwork-layer{position:absolute;width:55px;height:34px;border-radius:5px;background:#fb8c71;top:43%;left:50%;translate:-50% -50%;box-shadow:0 4px 8px #0002}.side-name,.final-side-name{position:absolute;bottom:15px;color:#696275;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}.side-orbit{position:absolute;z-index:5;width:360px;height:360px;left:calc(50% - 180px);top:calc(50% - 180px);border:1px dashed rgba(73,66,89,.25);border-radius:50%;animation:sideOrbit 18s linear infinite}.side-label{position:absolute;padding:8px 12px;border:0;border-radius:999px;background:#fff;box-shadow:0 9px 18px rgba(44,38,58,.14);font:10px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;cursor:pointer;animation:sideCounter 18s linear infinite;transition:scale .25s var(--motion-ease),background .25s}.side-label:nth-child(1){top:-12px;left:42%}.side-label:nth-child(2){right:-16px;top:43%}.side-label:nth-child(3){left:-12px;bottom:18%}.side-label:hover,.side-label.is-active{background:#26242c;color:#fff;scale:1.12}.final-mockup-card{right:7%;bottom:16%;width:205px;padding:14px;z-index:6}.final-product{height:170px;margin-top:12px}.final-product::before{width:100px;height:142px}.final-product b{position:absolute;width:43px;height:24px;border-radius:4px;background:#fb8c71;top:45%;left:50%;translate:-50% -50%}.final-mockup-card strong{margin-top:13px;display:block;font-size:14px;letter-spacing:-.05em}@keyframes sideOrbit{to{transform:rotate(360deg)}}@keyframes sideCounter{to{transform:rotate(-360deg)}}.artwork-stage[data-side="back"] .artwork-layer,.artwork-stage[data-side="back"] .final-product b{background:#6e88ca;translate:-50% -50%;scale:.82}.artwork-stage[data-side="sleeve"] .artwork-layer,.artwork-stage[data-side="sleeve"] .final-product b{width:18px;height:54px;background:#6b9a78}.artwork-stage[data-side="back"] .artwork-product::before,.artwork-stage[data-side="back"] .final-product::before{border-radius:22px 22px 12px 12px}.cursor.is-product .cursor-ring{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}@media (max-width:760px){.artwork-stage{height:590px}.artwork-file-card{left:5%;top:12%;width:155px;padding:13px}.blank-product-card{width:210px;height:330px;top:55%}.artwork-product{height:275px}.side-orbit{width:290px;height:290px;left:calc(50% - 145px);top:calc(55% - 145px)}.final-mockup-card{right:4%;bottom:7%;width:165px}.final-product{height:135px}.final-product::before{width:78px;height:110px}}

/* White dashboard cards use a single colored action strip, like the product UI. */
.messy-card{min-height:154px;padding:19px 20px 17px;gap:8px;background:#fff;border-color:rgba(255,255,255,.94);box-shadow:0 22px 38px rgba(66,55,76,.17),inset 0 1px 0 rgba(255,255,255,.7)}
.messy-card-one{--card-strip:#b8f000}
.messy-card-two{--card-strip:#8c63ff}
.messy-card-three{--card-strip:#ffd0ad}
.messy-card-four{--card-strip:#36d6bc}
.messy-card-five{--card-strip:#a8dcf3}
.messy-card-six{--card-strip:#e7cf80}
.messy-card span{color:#78727d}.messy-card strong{font-size:14px;line-height:1.16;letter-spacing:-.03em;font-weight:600}.messy-card small{margin-top:1px;color:#6c6870}
.messy-card>b{display:block;margin-top:auto;padding:9px 10px;border-radius:9px;background:var(--card-strip);color:#263022;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.messy-card:hover{filter:saturate(1.06) brightness(1.015);box-shadow:0 30px 46px rgba(58,48,69,.24),inset 0 1px 0 rgba(255,255,255,.76)}
@media (max-width:760px){.messy-card{min-height:145px;padding:16px}.messy-card strong{font-size:13px}.messy-card>b{padding:8px 9px}}

/* Held artwork sequence: one source file travels through placement and resolves as a client-ready mockup. */
.motion-sequence-status{position:absolute;z-index:12;top:20px;left:22px;display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 10px 22px rgba(53,47,66,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#55505c}.motion-sequence-status span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#b8f000;color:#27310e;font-weight:700}.motion-sequence-status b{font-weight:500}.motion-sequence-status i{padding-left:9px;border-left:1px solid rgba(55,50,65,.14);font-style:normal;color:#817a88}.logo-transfer{position:absolute;z-index:9;left:24%;top:42%;display:grid;place-items:center;width:62px;height:52px;border-radius:12px;background:#b8f000;box-shadow:0 15px 25px rgba(90,115,17,.22);opacity:0;will-change:transform,opacity;pointer-events:none}.logo-transfer span{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;color:#24300b;font-weight:700}.logo-transfer i{position:absolute;width:17px;height:17px;border:2px solid rgba(36,48,11,.58);border-radius:4px;transform:translateY(11px)}.blank-product-card .editor-empty,.blank-product-card .editor-placed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .2s linear,transform .2s linear}.blank-product-card .editor-empty{z-index:1;object-position:52% center}.blank-product-card .editor-placed{z-index:2;object-position:52% center;opacity:0;transform:scale(.96)}.placement-confirmation{position:absolute;z-index:4;left:14px;bottom:14px;padding:8px 10px;border-radius:8px;background:rgba(184,240,0,.92);box-shadow:0 8px 14px rgba(71,91,12,.16);font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#28330e;opacity:0;transform:translateY(8px);transition:opacity .2s linear,transform .2s ease}.final-mockup-card{overflow:hidden}.final-mockup-status{position:absolute;z-index:3;left:11px;right:11px;bottom:11px;display:flex;align-items:center;justify-content:space-between;padding:8px 9px;border-radius:8px;background:rgba(255,255,255,.9);box-shadow:0 8px 15px rgba(49,43,59,.14);font:8px ui-monospace,SFMono-Regular,Consolas,monospace;color:#5a5462}.final-mockup-status b{padding:5px 6px;border-radius:5px;background:#b8f000;color:#27300d;font-weight:500}.artwork-stage[data-motion-phase="complete"] .side-orbit{opacity:.3}@media (min-width:761px){.artwork-motion-section{padding-bottom:calc(var(--section-space) + 160vh)}}@media (max-width:760px){.motion-sequence-status{left:13px;top:13px;padding:6px 8px;font-size:8px}.motion-sequence-status span{width:17px;height:17px}.motion-sequence-status i{display:none}.logo-transfer{left:19%;top:42%;width:48px;height:42px}.final-mockup-status{left:7px;right:7px;bottom:7px;font-size:6px}.final-mockup-status b{padding:4px}.placement-confirmation{left:8px;bottom:8px;padding:6px 7px;font-size:7px}}

/* Step copy turns the held space into a clear explanation of each artwork-to-preview state. */
.artwork-step-copy{position:absolute;z-index:11;left:7%;bottom:11%;width:min(245px,24%);padding:18px;border-left:2px solid #b8f000;color:#4f4a56;opacity:1;transform:translateY(0);transition:opacity .25s ease,transform .25s ease;pointer-events:none}.artwork-step-copy p{margin:0 0 12px;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.07em;color:#6f6877}.artwork-step-copy h3{margin:0;font-size:clamp(20px,2.1vw,30px);font-weight:500;letter-spacing:-.065em;line-height:.98;color:#242328}.artwork-step-copy span{display:block;margin-top:12px;font-size:12px;line-height:1.45;color:#716c74}.artwork-stage[data-motion-phase="closeup"] .final-mockup-status{scale:1.1;transform-origin:right bottom;box-shadow:0 14px 24px rgba(55,52,60,.18)}

/* On desktop the changing explanation occupies the outer white margin, separate from the product canvas. */
@media (min-width:761px){.artwork-motion-section{position:relative}.artwork-step-copy{position:sticky;top:calc(50vh - 150px);left:0;bottom:auto;width:260px;height:max-content;margin:0 0 -190px clamp(-350px,-18vw,-160px);z-index:15;transform:translateX(0);pointer-events:none}.artwork-step-copy h3{font-size:clamp(25px,2.4vw,36px)}.artwork-step-copy span{font-size:13px}.artwork-step-copy+ .artwork-stage{margin-top:-1px}}

/* Desktop hold is one full chapter, with a slower final V3 close-up instead of blank whitespace. */
@media (min-width:761px){.artwork-motion-section{min-height:calc(100vh + 2200px);padding-bottom:0}.artwork-stage{position:sticky;top:80px}.blank-product-card{width:280px;height:402px}.final-mockup-card{width:230px}.artwork-file-card{width:205px}}
@media (max-width:760px){.artwork-step-copy{position:relative;left:auto;bottom:auto;margin:0 0 24px;width:auto;max-width:360px}}
@media (max-width:760px){.artwork-step-copy{left:5%;bottom:5%;width:54%;padding:12px}.artwork-step-copy p{margin-bottom:8px;font-size:7px}.artwork-step-copy h3{font-size:18px}.artwork-step-copy span{margin-top:8px;font-size:10px}.artwork-stage[data-motion-phase="closeup"] .final-mockup-status{scale:1.04}}

/* Artwork chapter layout: label on the left, animation canvas above, explanation below. */
.artwork-scroll-layout{position:relative}.artwork-step-caption{transition:opacity .25s ease,transform .25s ease}.artwork-step-copy{display:flex;flex-direction:column;gap:12px;border-left:2px solid #b8f000;color:#4f4a56}.artwork-step-copy>span{display:block!important;margin:0!important;font:9px ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.07em;color:#6f6877}.artwork-step-copy>b{font-size:18px;font-weight:500;line-height:.98;letter-spacing:-.05em}
@media (min-width:761px){.artwork-scroll-layout{position:sticky;top:80px;display:grid;grid-template-columns:185px minmax(0,1fr);grid-template-rows:auto auto;column-gap:32px;align-items:start}.artwork-scroll-layout .artwork-stage{position:relative!important;top:auto!important;grid-column:2;grid-row:1;width:100%;margin:0!important}.artwork-scroll-layout .artwork-step-copy{position:relative!important;top:auto!important;left:auto!important;bottom:auto!important;grid-column:1;grid-row:1;align-self:center;width:auto;height:auto;margin:0!important;padding:16px 0 16px 16px;transform:none!important;opacity:1!important;z-index:3}.artwork-scroll-layout .artwork-step-caption{grid-column:2;grid-row:2;width:min(480px,72%);padding:24px 0 0 2px;color:#4f4a56}.artwork-step-caption p{margin:0 0 11px;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.07em;color:#6f6877}.artwork-step-caption h3{margin:0;font-size:clamp(27px,3vw,42px);font-weight:500;letter-spacing:-.07em;line-height:.95;color:#242328}.artwork-step-caption span{display:block;margin-top:12px;max-width:430px;font-size:13px;line-height:1.5;color:#716c74}}
@media (max-width:760px){.artwork-scroll-layout{display:block}.artwork-scroll-layout .artwork-step-copy{position:relative!important;left:auto!important;bottom:auto!important;width:auto!important;margin:0 0 18px!important;padding:12px}.artwork-scroll-layout .artwork-stage{position:relative!important;top:auto!important}.artwork-step-caption{padding:20px 2px 0}.artwork-step-caption p{margin:0 0 8px;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;color:#6f6877}.artwork-step-caption h3{margin:0;font-size:25px;line-height:.98;letter-spacing:-.06em}.artwork-step-caption span{display:block;margin-top:10px;font-size:12px;line-height:1.45;color:#716c74}}

/* Keep the final client-review close-up sharp while it scales forward. */
.final-mockup-card.real-media-card>img{object-position:center;filter:saturate(.96) contrast(1.02)}

/* The final proof starts larger, so its held close-up needs only a light scale. */
@media (min-width:761px){.artwork-stage .final-mockup-card{width:300px;backface-visibility:hidden}}
@media (max-width:760px){.artwork-stage .final-mockup-card{width:190px;backface-visibility:hidden}}

/* Wide chapter system: larger canvases, tighter rhythm, and calm contrast between story moments. */
:root{--section-space:clamp(72px,7vw,108px)}.section-shell{max-width:none;padding-left:3.5vw;padding-right:3.5vw}.site-header,footer{max-width:none;padding-left:3.5vw;padding-right:3.5vw}.hero{min-height:740px;gap:6vw;padding-top:55px;padding-bottom:72px}.hero-copy{max-width:780px}.hero-object{height:520px}.section-intro{grid-template-columns:110px minmax(0,1fr) minmax(240px,360px);gap:30px}.section-intro h2{font-size:clamp(38px,4.6vw,70px)}.problem-section,.glass-section,.skills-section,.artwork-motion-section,.feature-section{position:relative;max-width:none;padding-left:7vw;padding-right:7vw}.problem-section{background:linear-gradient(115deg,#f7eee7,#f4f1eb 58%,#eee8f7);border-top:1px solid rgba(55,47,66,.07);border-bottom:1px solid rgba(55,47,66,.08)}.glass-section{background:linear-gradient(135deg,#eeebf8,#f8f6f1 57%,#edf3e6);border-bottom:1px solid rgba(55,47,66,.08)}.skills-section{background:#f6f4ef}.artwork-motion-section{background:linear-gradient(120deg,#fbfaf6,#f2f0f8 50%,#f7fbef);border-top:1px solid rgba(55,47,66,.07)}.feature-section{background:linear-gradient(135deg,#eff4e6,#f8f7f2 54%,#f1ebfa);border-top:1px solid rgba(55,47,66,.07)}.messy-stage,.glass-stage,.artwork-stage,.approval-stage,.cta-panel{border-radius:32px}.skills-layout{max-width:1650px;margin:auto}.story-section{max-width:none;padding-left:5vw;padding-right:5vw}.type-motion-section{background:#26252a;color:#f7f6f2;border-color:rgba(255,255,255,.16)}.type-motion-section .eyebrow,.type-motion-section .type-motion-copy>p{color:#c8c5cd}.type-motion-section .type-background{color:rgba(255,255,255,.055)}.type-motion-section .kinetic-word:hover .kinetic-letter{color:#cbbcff}.type-motion-section .marquee{border-color:rgba(255,255,255,.17)}.type-motion-section .marquee-track i{color:#c8b8ff}@media (max-width:760px){.section-shell,.problem-section,.glass-section,.skills-section,.artwork-motion-section,.feature-section{padding-left:5vw;padding-right:5vw}.hero{min-height:auto;padding-top:70px;padding-bottom:62px}.hero-object{height:410px}.section-intro{grid-template-columns:45px minmax(0,1fr);gap:14px}.section-intro h2{font-size:clamp(34px,9vw,52px)}}

/* Removed duplicate version and approval chapters from the primary story. */
.message-banner{display:grid;place-items:center;min-height:500px;padding-top:72px!important;padding-bottom:72px!important;background:#202024!important;color:#f8f7f2!important;overflow:hidden}.message-banner>.section-intro,.message-banner>.glass-stage{display:none}.message-banner-copy{position:relative;z-index:1;width:min(1120px,100%);text-align:center}.message-banner-copy>p{margin:0 0 26px;color:#aaa7b0;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}.message-banner-copy h2{margin:0;font-size:clamp(54px,8.2vw,134px);font-weight:500;letter-spacing:-.09em;line-height:.84}.message-banner-copy h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:500;color:#d2c5ff}.message-banner-words{display:flex;justify-content:center;align-items:center;gap:13px;flex-wrap:wrap;margin-top:42px;color:#e4e2dc;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}.message-banner-words span{transition:transform .35s var(--motion-ease),color .35s ease}.message-banner-words span:hover{transform:translateY(-6px);color:#b8f000}.message-banner-words i{color:#8e86ad;font-style:normal}@media (max-width:760px){.message-banner{min-height:390px;padding-top:58px!important;padding-bottom:58px!important}.message-banner-copy h2{font-size:clamp(48px,14vw,76px)}.message-banner-words{gap:9px;margin-top:30px;font-size:9px}}

/* Removed duplicate version and approval chapters from the primary story. */
.stack-section,.approval-section{display:none!important}

/* Compact feature summary: four grouped capabilities replace the long, repeated feature catalogue. */
.feature-section{padding-top:100px;padding-bottom:105px}.feature-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.feature-summary-card{min-height:180px;padding:22px 24px;display:grid;grid-template-columns:42px 1fr;gap:0 15px;align-items:start;border:1px solid rgba(255,255,255,.82);border-radius:18px;background:rgba(255,255,255,.68);box-shadow:0 16px 30px rgba(43,38,52,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .38s var(--motion-ease),box-shadow .38s ease;transform-style:preserve-3d}.feature-summary-card>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#28262e;color:#fff;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;transform:translateZ(35px)}.feature-summary-card h3{margin:1px 0 7px;font-size:clamp(21px,2.2vw,29px);font-weight:500;letter-spacing:-.065em;line-height:1}.feature-summary-card p{margin:0;max-width:360px;color:#68635e;font-size:13px;line-height:1.45}.feature-summary-card>b{grid-column:2;margin-top:18px;color:#645e68;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.03em}.summary-mockup{background:rgba(230,224,255,.66)}.summary-approval{background:rgba(238,245,212,.69)}.summary-production{background:rgba(250,231,218,.7)}.feature-summary-card:hover{transform:translateY(-7px) rotateX(4deg) rotateY(-3deg);box-shadow:0 28px 42px rgba(43,38,52,.18)}.feature-summary-card:hover>span,.feature-summary-card:hover>div,.feature-summary-card:hover>b{transform:translateZ(55px)}@media (max-width:760px){.feature-summary-grid{grid-template-columns:1fr}.feature-summary-card{min-height:155px;padding:19px}.feature-summary-card h3{font-size:23px}}

/* Contextual conversion moments repeat one clear action without interrupting the product story. */
.contextual-cta{max-width:none;padding:34px 7vw 76px}
.contextual-cta-panel{position:relative;min-height:190px;box-sizing:border-box;padding:34px 38px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;border:1px solid rgba(255,255,255,.78);border-radius:25px;overflow:hidden;isolation:isolate;box-shadow:0 22px 42px rgba(43,38,52,.12),inset 0 1px 0 rgba(255,255,255,.7)}
.contextual-cta-panel::after{content:"";position:absolute;z-index:-1;width:220px;height:220px;right:-85px;top:-100px;border-radius:50%;background:rgba(184,240,0,.2);filter:blur(2px)}
.contextual-cta-panel>div:first-child{max-width:790px}
.contextual-cta-panel>div:first-child>span{display:block;margin-bottom:15px;color:#77717b;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.07em}
.contextual-cta-panel h2{margin:0;font-size:clamp(30px,3.4vw,52px);line-height:.98;letter-spacing:-.065em;font-weight:500}
.contextual-cta-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.contextual-primary,.contextual-secondary{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:50px;padding:0 19px;border-radius:999px;font-size:12px;white-space:nowrap;transition:transform .25s var(--motion-ease),box-shadow .25s ease,background .25s ease}
.contextual-primary{background:#b8f000;color:#26300e;box-shadow:0 6px 0 #7ca300,0 14px 24px rgba(79,103,15,.16)}
.contextual-primary:hover{transform:translateY(-4px);box-shadow:0 10px 0 #7ca300,0 20px 28px rgba(79,103,15,.2)}
.contextual-primary:active{transform:translateY(4px);box-shadow:0 2px 0 #7ca300,0 6px 12px rgba(79,103,15,.15)}
.contextual-secondary{border:1px solid rgba(39,36,43,.16);background:rgba(255,255,255,.58);color:#353139}
.contextual-secondary:hover{transform:translateY(-3px);background:#fff;box-shadow:0 12px 22px rgba(42,37,49,.11)}
.contextual-primary i,.contextual-secondary i{font-style:normal;font-size:15px}
.contextual-primary:focus-visible,.contextual-secondary:focus-visible{outline:2px solid #6857a2;outline-offset:4px}
.context-cta-project{background:#f6f4ef}.context-cta-project .contextual-cta-panel{background:linear-gradient(130deg,#252429,#302d36);color:#f8f7f2;border-color:rgba(255,255,255,.12)}.context-cta-project .contextual-cta-panel>div:first-child>span{color:#aaa5af}.context-cta-project .contextual-secondary{color:#f7f6f2;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08)}.context-cta-project .contextual-secondary:hover{background:rgba(255,255,255,.16)}
.context-cta-workflow{background:linear-gradient(120deg,#fbfaf6,#f2f0f8 50%,#f7fbef)}.context-cta-workflow .contextual-cta-panel{background:linear-gradient(135deg,rgba(230,223,255,.88),rgba(255,255,255,.76) 60%,rgba(235,244,210,.82))}
.context-cta-proof{padding-top:55px;background:#202024}.context-cta-proof .contextual-cta-panel{background:linear-gradient(135deg,#f4f2ec,#e9ecdf);border-color:rgba(255,255,255,.2)}
.mobile-quick-cta{display:none}
@media (max-width:980px){.contextual-cta-panel{grid-template-columns:1fr;gap:28px}.contextual-cta-actions{justify-content:flex-start}}
@media (max-width:760px){.contextual-cta{padding:24px 5vw 58px}.contextual-cta-panel{min-height:0;padding:27px 22px;border-radius:21px}.contextual-cta-panel h2{font-size:clamp(30px,9vw,42px)}.contextual-cta-actions{display:grid;grid-template-columns:1fr;width:100%}.contextual-primary,.contextual-secondary{width:100%;box-sizing:border-box}.mobile-quick-cta{position:fixed;z-index:104;left:13px;right:13px;bottom:max(13px,env(safe-area-inset-bottom));height:54px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-radius:999px;background:#b8f000;color:#25300d;box-shadow:0 16px 35px rgba(31,38,14,.28),inset 0 1px 0 rgba(255,255,255,.52);font-size:13px;font-weight:600;opacity:0;pointer-events:none;transform:translateY(22px);transition:opacity .25s ease,transform .32s var(--motion-ease)}.mobile-quick-cta.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}.mobile-quick-cta i{font-style:normal;font-size:17px}}
@media (prefers-reduced-motion:reduce){.contextual-primary,.contextual-secondary,.mobile-quick-cta{transition:none}}

/* Project record orbit: illustrated cards turn the central project into a useful connected system. */
.skills-section{position:relative;isolation:isolate;overflow:hidden}
.skills-section .section-intro{max-width:1100px}
.project-context{position:absolute;z-index:4;top:76px;right:7vw;width:min(440px,31vw);padding:22px;border:1px solid rgba(255,255,255,.86);border-radius:22px;background:rgba(255,255,255,.78);box-shadow:0 24px 44px rgba(44,39,51,.14),inset 0 1px 0 #fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.project-context::before{content:"";position:absolute;width:90px;height:90px;right:-24px;top:-28px;border-radius:50%;background:rgba(184,240,0,.23);filter:blur(2px);z-index:-1}
.project-context-top{display:flex;align-items:center;justify-content:space-between;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em;color:#706b74}
.project-context-top b{padding:6px 8px;border-radius:999px;background:#e3f4ba;color:#3c511b;font-weight:500}
.project-context h3{margin:20px 0 18px;font-size:26px;line-height:1;letter-spacing:-.055em;font-weight:550}
.project-context-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.project-context-meta span{padding:9px;border-radius:11px;background:rgba(242,240,246,.88)}
.project-context-meta small{display:block;margin-bottom:6px;color:#847e88;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
.project-context-meta strong{font-size:13px;font-weight:500}
.project-side-status{display:grid;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(42,38,48,.1)}
.project-side-status span{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:7px;color:#5f5a62;font-size:10px}
.project-side-status i{width:6px;height:6px;border-radius:50%;background:#b8f000;box-shadow:0 0 0 4px rgba(184,240,0,.14)}
.project-side-status span:nth-child(2) i{background:#a892ef;box-shadow:0 0 0 4px rgba(168,146,239,.13)}
.project-side-status span:nth-child(3) i{background:#e7b867;box-shadow:0 0 0 4px rgba(231,184,103,.14)}
.project-side-status b{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;color:#817b84;font-weight:500}
.skills-layout{display:block;max-width:1240px;margin:70px auto 0}
.skills-wheel{width:min(760px,100%);background:radial-gradient(circle,rgba(205,194,246,.55) 0 23%,rgba(244,242,238,.7) 24% 25%,transparent 26%);box-shadow:inset 0 0 80px rgba(255,255,255,.45)}
.skills-wheel::before{inset:9%;border-color:rgba(73,67,79,.15)}
.skills-wheel::after{inset:27%;border-color:rgba(73,67,79,.17)}
.skill-center{inset:auto;left:50%;top:50%;width:210px;height:210px;box-sizing:border-box;transform:translate(-50%,-50%) translateZ(45px);border-radius:50%;padding:30px;background:linear-gradient(150deg,#242329,#171719);box-shadow:0 30px 46px rgba(25,22,30,.3),0 0 0 13px rgba(211,200,251,.27);align-items:center;justify-content:center;text-align:center}
.skill-center strong{font-size:clamp(24px,2.2vw,34px);font-weight:650;line-height:1;letter-spacing:-.055em}
.skills-wheel .orbit-record{--card-tint:#fff;right:auto!important;bottom:auto!important;width:190px;max-width:none;min-height:108px;padding:14px;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;border:1px solid rgba(255,255,255,.84);border-radius:19px;background:linear-gradient(145deg,rgba(255,255,255,.94),var(--card-tint));box-shadow:0 18px 30px rgba(47,41,56,.14),inset 0 1px 0 #fff;text-align:left;white-space:normal;will-change:transform,opacity,filter;scale:var(--skill-scale,1);transition:scale .32s var(--motion-ease),box-shadow .32s ease,filter .32s ease,background .25s ease}
.skills-wheel .skill-identity{--card-tint:#edf6d3}.skills-wheel .skill-ui{--card-tint:#efe9ff}.skills-wheel .skill-motion{--card-tint:#e5f4f1}.skills-wheel .skill-strategy{--card-tint:#fff0e7}.skills-wheel .skill-web{--card-tint:#f8efcf}.skills-wheel .skill-content{--card-tint:#edf0f5}
.skills-wheel .orbit-record:hover,.skills-wheel .orbit-record:focus-visible,.skills-wheel .orbit-record.is-active{background:linear-gradient(145deg,#fff,var(--card-tint));transform:translate(-50%,-50%) translate3d(var(--skill-x,0),var(--skill-y,0),calc(var(--skill-z,0) + 90px))!important;scale:1.12!important;box-shadow:0 32px 46px rgba(43,37,52,.25),inset 0 1px 0 #fff;filter:none!important;z-index:8;outline:none}
.skill-card-copy{min-width:0}.skill-card-copy strong{display:block;margin-bottom:7px;font:500 14px/1.05 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.035em;color:#242229}.skill-card-copy small{display:block;overflow:hidden;text-overflow:ellipsis;color:#746e78;font:8px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
.skill-visual{position:relative;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:13px;background:rgba(255,255,255,.68);box-shadow:inset 0 0 0 1px rgba(49,44,55,.08);overflow:hidden}
.skill-visual i,.skill-visual b{font-style:normal;font-weight:500}
.visual-sides{gap:3px}.visual-sides i{display:grid;place-items:center;width:11px;height:25px;border-radius:4px;background:#252329;color:#fff;font:7px ui-monospace,SFMono-Regular,Consolas,monospace}.visual-sides i:nth-child(2){height:31px;background:#9a84e6}.visual-sides i:nth-child(3){background:#b8f000;color:#28310e}
.visual-file::before{content:"";position:absolute;width:25px;height:31px;border:1.5px solid #514b59;border-radius:5px;background:#fff;transform:rotate(-5deg)}.visual-file i{position:relative;margin-top:8px;padding:3px 4px;border-radius:4px;background:#b8f000;color:#29320f;font:6px ui-monospace,SFMono-Regular,Consolas,monospace}
.visual-versions i{position:absolute;width:24px;height:29px;border-radius:6px;background:#fff;border:1px solid rgba(39,35,45,.12)}.visual-versions i:nth-child(1){transform:translate(-7px,-5px) rotate(-9deg);background:#d7cff7}.visual-versions i:nth-child(2){transform:translate(2px,-1px) rotate(3deg);background:#f5e1d5}.visual-versions i:nth-child(3){display:grid;place-items:center;transform:translate(7px,4px);background:#b8f000;color:#29320e;font:7px ui-monospace,SFMono-Regular,Consolas,monospace}
.visual-comment::before{content:"";width:28px;height:22px;border-radius:9px 9px 9px 3px;background:#fff;border:1px solid rgba(42,37,48,.12)}.visual-comment i{position:absolute;display:grid;place-items:center;right:5px;top:4px;width:17px;height:17px;border-radius:50%;background:#9a84e6;color:#fff;font:8px ui-monospace,SFMono-Regular,Consolas,monospace}.visual-comment b{position:absolute;width:12px;height:2px;left:10px;background:#b8f000;box-shadow:0 5px 0 #b8f000}
.visual-approval{flex-direction:column;gap:3px}.visual-approval i{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#b8f000;color:#25300d;font-size:13px}.visual-approval b{font:6px ui-monospace,SFMono-Regular,Consolas,monospace;color:#69626e}
.visual-pdf i{display:grid;place-items:center;width:28px;height:34px;border-radius:6px;background:#26242a;color:#fff;font:7px ui-monospace,SFMono-Regular,Consolas,monospace}.visual-pdf b{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#b8f000;color:#25300d;font-size:9px}
.project-context-selected{margin-top:20px;padding-top:18px;border-top:1px solid rgba(42,38,48,.12)}
.project-context-selected .detail-signal{margin-bottom:13px}
.project-context-selected>small{display:block;color:#837d86;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.project-context-selected h4{margin:10px 0 8px;font-size:clamp(25px,2.1vw,34px);font-weight:600;line-height:1;letter-spacing:-.055em}
.project-context-selected p{max-width:390px;margin:0;color:#69636c;font-size:12px;line-height:1.5}
.skill-detail{position:relative;padding:34px 5px 30px 30px;background:linear-gradient(90deg,rgba(255,255,255,.5),transparent);border-top-color:rgba(38,35,42,.7)}
.detail-signal{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;color:#77717b;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}.detail-signal i{width:7px;height:7px;border-radius:50%;background:#b8f000;box-shadow:0 0 0 5px rgba(184,240,0,.14)}
.skill-detail h3{font-size:clamp(36px,4vw,58px)}
@media (max-width:1499px){.project-context{position:relative;top:auto;right:auto;width:auto;max-width:920px;margin:0 auto 42px}.project-context-meta{max-width:none}.project-side-status{grid-template-columns:repeat(3,1fr);gap:16px}.skills-layout{margin-top:0}}
@media (max-width:900px){.skills-layout{grid-template-columns:1fr}.skill-detail{max-width:760px;width:100%;box-sizing:border-box}}
@media (max-width:760px){.project-context{padding:16px;margin-bottom:32px}.project-context-meta{max-width:none}.project-side-status{grid-template-columns:1fr}.skills-wheel{width:100%;max-width:none;aspect-ratio:auto;padding:18px;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border-radius:24px;background:linear-gradient(145deg,#efecf6,#f4f5eb)}.skills-wheel::before,.skills-wheel::after{display:none}.skill-center{position:relative;left:auto;top:auto;inset:auto;width:190px;height:190px;justify-self:center;grid-column:1/-1;transform:none!important;padding:31px 27px;border-radius:50%}.skills-wheel .orbit-record{position:relative!important;left:auto!important;top:auto!important;width:auto;min-height:126px;transform:none!important;scale:1!important;opacity:1!important;filter:none!important;grid-template-columns:1fr;align-content:center;text-align:center}.skill-visual{margin:auto}.skills-wheel .orbit-record:hover,.skills-wheel .orbit-record:focus-visible,.skills-wheel .orbit-record.is-active{transform:translateY(-4px)!important;scale:1!important}.skill-card-copy small{white-space:normal}.skill-detail{padding:28px 4px 25px}.skill-detail h3{font-size:38px}}
@media (prefers-reduced-motion:reduce){.skills-wheel .orbit-record{filter:none!important;opacity:1!important}}

/* Messy workflow scroll chapter: one concise held beat is enough to show the cleanup. */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .problem-section{height:220vh;padding-top:0!important;padding-bottom:0!important}
  .messy-sticky{position:sticky;top:0;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vh,38px) 0;overflow:hidden}
  .problem-section .section-intro{flex:0 0 auto;margin-bottom:clamp(22px,3vh,38px)}
  .problem-section .messy-stage{height:min(590px,59vh);min-height:430px;flex:0 1 auto}
}
@media (max-width:760px), (prefers-reduced-motion:reduce){.messy-sticky{position:relative}}

/* Artwork-to-mockup chapter: a richer lavender/sage field makes the extended
   scrollytelling space feel deliberate while the pale UI remains prominent. */
.artwork-motion-section{
  background:
    radial-gradient(circle at 8% 18%,rgba(189,173,242,.52),transparent 30%),
    radial-gradient(circle at 91% 72%,rgba(184,240,0,.18),transparent 27%),
    radial-gradient(circle at 73% 8%,rgba(246,193,165,.25),transparent 22%),
    linear-gradient(135deg,#ddd9ec 0%,#e8e5ed 48%,#dfe8df 100%)!important;
  border-top:1px solid rgba(73,64,89,.12);
  border-bottom:1px solid rgba(73,64,89,.12);
}
.artwork-motion-section .artwork-stage{
  background:linear-gradient(135deg,rgba(248,246,252,.78),rgba(238,242,234,.7));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 28px 58px rgba(65,56,82,.15),inset 0 1px 0 rgba(255,255,255,.8);
}
.artwork-motion-section .artwork-step-copy{
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.artwork-motion-section .artwork-step-caption{
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
@media (max-width:760px){
  .artwork-motion-section{
    background:
      radial-gradient(circle at 12% 15%,rgba(189,173,242,.48),transparent 32%),
      radial-gradient(circle at 88% 76%,rgba(184,240,0,.16),transparent 28%),
      linear-gradient(145deg,#dfdbed,#e4e8df)!important;
  }
}

/* Sticky workflow stage: the six scroll triggers now drive one full-screen,
   color-changing composition instead of leaving separate white gaps. */
.product-journey{
  position:relative;
  display:grid!important;
  grid-template-columns:1fr!important;
  max-width:none;
  margin:0;
  padding:0 5vw!important;
  overflow:clip;
  isolation:isolate;
  background:#e5e1d9;
  color:#242329;
  transition:background .75s var(--motion-ease),color .55s ease;
}
.product-journey[data-journey-state="create"]{background:#e5e1d9}
.product-journey[data-journey-state="product"]{background:#ddd8ed}
.product-journey[data-journey-state="upload"]{background:#dbe8ec}
.product-journey[data-journey-state="mockup"]{background:#efddd2}
.product-journey[data-journey-state="approval"]{background:#dce8c5}
.product-journey[data-journey-state="pdf"]{background:#242328;color:#f7f6f2}
.product-journey .story-sticky{
  grid-area:1/1;
  position:sticky!important;
  top:0!important;
  z-index:2;
  width:100%;
  height:100vh!important;
  box-sizing:border-box;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr);
  place-items:stretch;
  gap:clamp(18px,2.4vh,30px);
  padding:clamp(26px,4vh,48px) 0;
}
.product-journey .journey-heading{
  position:relative;
  z-index:3;
  width:100%;
  max-width:none;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,380px);
  align-items:end;
  gap:clamp(30px,6vw,110px);
}
.journey-heading>div>p{
  margin:0 0 12px;
  color:#706b70;
  font:9px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.product-journey .journey-heading h2{
  max-width:980px;
  margin:0;
  font-size:clamp(42px,4.8vw,74px);
  line-height:.88;
  letter-spacing:-.075em;
  font-weight:500;
}
.journey-heading>p{
  max-width:370px;
  margin:0 0 4px;
  color:#625e62;
  font-size:14px;
  line-height:1.5;
}
.journey-stage{
  position:relative;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(290px,360px);
  gap:clamp(16px,2vw,28px);
  perspective:1400px;
}
.journey-big-step{
  position:absolute;
  z-index:0;
  right:250px;
  top:-12vh;
  color:rgba(255,255,255,.28);
  font-size:clamp(180px,20vw,340px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.1em;
  pointer-events:none;
  transition:color .55s ease,transform .7s var(--motion-ease);
  transform:translate3d(0,0,-80px);
}
.product-journey .story-visual{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  min-height:0;
  max-width:none;
  box-sizing:border-box;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.68);
  border-radius:30px;
  overflow:hidden;
  background:rgba(248,247,243,.56);
  box-shadow:0 32px 70px rgba(47,42,56,.18),inset 0 1px 0 rgba(255,255,255,.84);
  transform-style:preserve-3d;
  transition:background .65s ease,transform .72s var(--motion-ease),box-shadow .65s ease;
}
.product-journey .story-kicker{
  position:absolute;
  z-index:8;
  left:24px;
  top:23px;
  margin:0;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 18px rgba(44,39,52,.1);
  color:#615c66;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.product-journey .story-progress{
  z-index:8;
  right:24px;
  top:25px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.68);
  box-shadow:0 8px 18px rgba(44,39,52,.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.product-journey .journey-ui{left:24px;right:24px;top:68px;bottom:24px;height:auto}
.product-journey .journey-screen{
  border-radius:22px;
  box-shadow:0 26px 48px rgba(48,41,62,.2);
  transform:translate3d(0,50px,-90px) rotateX(11deg) scale(.91);
  transition:opacity .38s ease,transform .72s var(--motion-ease),background .55s ease;
}
.product-journey .story-visual[data-state="create"]{background:rgba(247,244,237,.65);transform:rotateY(1.2deg) scale(.985)}
.product-journey .story-visual[data-state="product"]{background:rgba(221,214,244,.72);transform:rotateY(-2deg) rotateX(.8deg) scale(.995)}
.product-journey .story-visual[data-state="upload"]{background:rgba(211,231,237,.72);transform:rotateY(1.8deg) rotateX(-.7deg) scale(1.008)}
.product-journey .story-visual[data-state="mockup"]{background:rgba(242,216,201,.7);transform:rotateY(-1.4deg) rotateX(.8deg) scale(1.012)}
.product-journey .story-visual[data-state="approval"]{background:rgba(215,231,184,.74);transform:rotateY(1.5deg) rotateX(-.7deg) scale(.998)}
.product-journey .story-visual[data-state="pdf"]{background:rgba(235,232,225,.94);transform:rotateY(-1.2deg) scale(1.014);box-shadow:0 38px 82px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.9)}
.journey-story-card{
  position:relative;
  z-index:2;
  min-height:0;
  box-sizing:border-box;
  padding:clamp(24px,2.5vw,36px);
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.68);
  border-radius:30px;
  background:rgba(255,255,255,.5);
  box-shadow:0 28px 58px rgba(47,42,56,.14),inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
  transition:background .55s ease,border-color .55s ease,color .55s ease,transform .65s var(--motion-ease);
}
.journey-story-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-90px;
  bottom:-90px;
  border-radius:50%;
  background:rgba(184,240,0,.18);
  pointer-events:none;
}
.journey-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#6b666d;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
.journey-card-top i{font-style:normal}
.journey-card-step{padding:7px 9px;border-radius:999px;background:#b8f000;color:#29310f;font-weight:700}
.journey-story-card h3{
  margin:auto 0 18px;
  font-size:clamp(42px,4.2vw,68px);
  font-weight:500;
  line-height:.86;
  letter-spacing:-.075em;
}
.journey-story-card h3 em{font-family:Georgia,"Times New Roman",serif;font-weight:500}
.journey-story-card .story-meta{position:relative;left:auto;top:auto;max-width:290px;margin:0;color:#625d65;font-size:14px;line-height:1.5}
.journey-step-rail{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:28px}
.journey-step-rail i{height:4px;border-radius:999px;background:rgba(44,40,49,.14);transition:background .4s ease,transform .4s var(--motion-ease)}
.journey-step-rail i.is-active{background:#252329;transform:scaleY(1.5)}
.journey-story-card>small{position:relative;z-index:2;margin-top:13px;color:#78727b;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.07em}
.product-journey[data-journey-state="pdf"] .journey-heading>div>p,.product-journey[data-journey-state="pdf"] .journey-heading>p{color:#bdb9c1}
.product-journey[data-journey-state="pdf"] .journey-big-step{color:rgba(255,255,255,.08)}
.product-journey[data-journey-state="pdf"] .journey-story-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);box-shadow:0 28px 58px rgba(0,0,0,.25)}
.product-journey[data-journey-state="pdf"] .journey-card-top,.product-journey[data-journey-state="pdf"] .journey-story-card .story-meta,.product-journey[data-journey-state="pdf"] .journey-story-card>small{color:#c5c1c9}
.product-journey[data-journey-state="pdf"] .journey-step-rail i{background:rgba(255,255,255,.18)}
.product-journey[data-journey-state="pdf"] .journey-step-rail i.is-active{background:#b8f000}
.product-journey .story-panels{grid-area:1/1;z-index:0;width:100%;padding:0!important;pointer-events:none}
.product-journey .story-panel{min-height:100vh!important;padding:0!important;border:0!important;opacity:0!important;background:none!important}

@media (max-width:980px) and (min-width:761px){
  .product-journey{padding-left:3.5vw!important;padding-right:3.5vw!important}
  .product-journey .journey-heading{grid-template-columns:minmax(0,1fr) 260px;gap:28px}
  .product-journey .journey-heading h2{font-size:clamp(40px,5.2vw,58px)}
  .journey-stage{grid-template-columns:minmax(0,1fr) 280px}
  .journey-story-card h3{font-size:44px}
  .journey-big-step{right:180px}
}
@media (max-width:760px){
  .product-journey{display:block!important;padding:72px 5vw!important;background:linear-gradient(145deg,#e2ddee,#e6eadf)!important;color:#242329!important;overflow:hidden}
  .product-journey .story-sticky{position:relative!important;top:auto!important;height:auto!important;display:block!important;padding:0}
  .product-journey .journey-heading{display:block;margin-bottom:32px}
  .product-journey .journey-heading h2{font-size:clamp(42px,12vw,62px)}
  .journey-heading>p{margin-top:20px;font-size:13px}
  .journey-stage{display:block}
  .journey-big-step{right:-16px;top:-70px;font-size:190px}
  .product-journey .story-visual{height:470px;margin-bottom:14px;border-radius:24px;transform:none!important}
  .product-journey .journey-ui{left:14px;right:14px;top:60px;bottom:14px}
  .journey-story-card{min-height:280px;border-radius:24px;padding:25px}
  .journey-story-card h3{font-size:48px}
  .product-journey .story-panels{display:grid;gap:10px;margin-top:28px;pointer-events:auto}
  .product-journey .story-panel{min-height:0!important;padding:22px!important;opacity:1!important;border:1px solid rgba(255,255,255,.72)!important;border-radius:18px!important;background:rgba(255,255,255,.48)!important}
  .product-journey .story-panel h3{margin:13px 0 8px;font-size:28px}
  .product-journey .story-panel p{margin:0;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .product-journey,.product-journey .story-visual,.journey-story-card,.journey-big-step,.journey-step-rail i{transition:none!important}
}

/* Focused workflow modules: avoid presenting each product screen as one huge
   screenshot. The active crop sits on a compact 3D stack beside the copy card. */
@media (min-width:761px){
  .product-journey .journey-stage{
    width:min(1680px,100%);
    margin-inline:auto;
    grid-template-columns:minmax(640px,1fr) minmax(370px,440px);
    align-items:center;
    gap:clamp(30px,3vw,52px);
  }
  .product-journey .story-visual{
    justify-self:center;
    align-self:center;
    width:min(900px,98%);
    height:min(600px,70vh);
    min-height:480px;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent!important;
    box-shadow:none!important;
  }
  .product-journey .story-visual::before,
  .product-journey .story-visual::after{
    content:"";
    position:absolute;
    left:7%;
    right:7%;
    top:15%;
    bottom:5%;
    z-index:0;
    border:1px solid rgba(255,255,255,.76);
    border-radius:26px;
    background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(218,210,241,.7));
    box-shadow:0 26px 46px rgba(48,42,59,.16);
    pointer-events:none;
    transition:transform .72s var(--motion-ease),background .6s ease,box-shadow .6s ease;
  }
  .product-journey .story-visual::before{transform:translate3d(-34px,20px,-100px) rotate(-4.5deg) scale(.94)}
  .product-journey .story-visual::after{transform:translate3d(34px,-5px,-55px) rotate(3deg) scale(.965);background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(224,235,215,.72))}
  .product-journey .story-kicker{left:8%;top:8%;z-index:10}
  .product-journey .story-progress{right:8%;top:8%;z-index:10}
  .product-journey .journey-ui{
    z-index:3;
    left:7%;
    right:7%;
    top:15%;
    bottom:5%;
    height:auto;
    border-radius:26px;
    transform-style:preserve-3d;
  }
  .product-journey .journey-screen{
    border-radius:26px;
    border-color:rgba(255,255,255,.84);
    box-shadow:0 32px 60px rgba(42,36,54,.23),inset 0 1px 0 rgba(255,255,255,.8);
  }
  .product-journey .story-visual[data-state="create"]::before{transform:translate3d(-32px,18px,-100px) rotate(-4deg) scale(.94)}
  .product-journey .story-visual[data-state="product"]::before{transform:translate3d(-20px,-4px,-95px) rotate(-2deg) scale(.945);background:linear-gradient(145deg,#eee9fb,#d8d0ef)}
  .product-journey .story-visual[data-state="upload"]::before{transform:translate3d(-38px,8px,-95px) rotate(-5deg) scale(.94);background:linear-gradient(145deg,#e9f4f6,#cfE2e8)}
  .product-journey .story-visual[data-state="mockup"]::before{transform:translate3d(-24px,24px,-95px) rotate(-3deg) scale(.95);background:linear-gradient(145deg,#faebe2,#e9cdbc)}
  .product-journey .story-visual[data-state="approval"]::before{transform:translate3d(-40px,2px,-95px) rotate(-5deg) scale(.94);background:linear-gradient(145deg,#eef6dc,#cfdfa9)}
  .product-journey .story-visual[data-state="pdf"]::before{transform:translate3d(-25px,18px,-95px) rotate(-3deg) scale(.95);background:linear-gradient(145deg,#4a4850,#302f35);border-color:rgba(255,255,255,.13);box-shadow:0 28px 54px rgba(0,0,0,.32)}
  .product-journey .story-visual[data-state="product"]::after{background:linear-gradient(145deg,#f6f3ff,#dfeaf0)}
  .product-journey .story-visual[data-state="upload"]::after{background:linear-gradient(145deg,#f4fbfb,#e7dccf)}
  .product-journey .story-visual[data-state="mockup"]::after{background:linear-gradient(145deg,#fff4ec,#ded5f5)}
  .product-journey .story-visual[data-state="approval"]::after{background:linear-gradient(145deg,#f8fbea,#dbe7ba)}
  .product-journey .story-visual[data-state="pdf"]::after{background:linear-gradient(145deg,#f2efe9,#d9d5cd);box-shadow:0 30px 58px rgba(0,0,0,.3)}
  .product-journey .journey-screen>img{
    transform:scale(1.12);
    transition:transform .75s var(--motion-ease),filter .5s ease;
    will-change:transform;
  }
  .product-journey .screen-create>img{transform:scale(1.18);transform-origin:40% 54%}
  .product-journey .screen-product>img{transform:scale(1.2);transform-origin:59% 50%}
  .product-journey .screen-upload>img{transform:scale(1.2);transform-origin:55% 48%}
  .product-journey .screen-mockup>img{transform:scale(1.17);transform-origin:66% 49%}
  .product-journey .screen-approval>img{transform:scale(1.18);transform-origin:67% 50%}
  .product-journey .screen-pdf>img{transform:scale(1.1);transform-origin:50% 34%}
  .product-journey .journey-story-card{align-self:center;height:min(600px,70vh);min-height:480px}
  .product-journey .journey-big-step{right:330px;top:-10vh}
}
@media (max-width:980px) and (min-width:761px){
  .product-journey .journey-stage{grid-template-columns:minmax(440px,1fr) 290px;gap:24px}
  .product-journey .story-visual{width:95%;height:min(480px,59vh)}
  .product-journey .journey-story-card{height:min(500px,61vh)}
}

/* PromoPlus workflow illustrations: simplified, sharp UI artifacts derived
   from the real product screens without embedding screenshots. */
.product-journey .illustration-screen{
  display:block;
  box-sizing:border-box;
  padding:18px!important;
  color:#26242a;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,244,248,.92))!important;
  transform-style:preserve-3d;
}
.ill-toolbar{height:40px;display:flex;align-items:center;gap:10px;padding:0 3px 13px;border-bottom:1px solid rgba(48,44,54,.09);font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#716b76;text-transform:uppercase;letter-spacing:.05em}
.ill-toolbar i{width:18px;height:18px;border-radius:6px;background:#26242a;box-shadow:inset 0 0 0 5px #b8f000;transform:rotate(8deg)}
.ill-toolbar b{font-weight:600;color:#36323b}.ill-toolbar span{margin-left:auto;padding:6px 8px;border-radius:999px;background:#eef3e1;color:#5c6544}
.illustration-screen small{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;color:#7e7882;text-transform:uppercase;letter-spacing:.04em}
.illustration-screen strong{font-weight:500;letter-spacing:-.04em}

.ill-create-grid{height:calc(100% - 98px);display:grid;grid-template-columns:1.3fr .7fr;gap:16px;align-items:center;padding:14px 1px 3px;perspective:800px}
.ill-form-card,.ill-record-card{border:1px solid rgba(50,45,58,.08);border-radius:16px;background:#fff;box-shadow:0 17px 28px rgba(49,43,59,.11);transform-style:preserve-3d;transition:transform .7s var(--motion-ease)}
.ill-form-card{padding:18px;display:grid;gap:10px}.ill-form-card>strong{font-size:17px}.ill-form-card>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ill-form-card>div span{padding:11px;border-radius:8px;background:#f2f0f5;color:#716b76;font-size:9px}
.ill-record-card{padding:17px;background:linear-gradient(145deg,#2a282f,#1e1d21);color:#fff}.ill-record-card em{display:grid;place-items:center;width:34px;height:34px;margin-bottom:22px;border-radius:50%;background:#b8f000;color:#27300e;font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}.ill-record-card small{color:#aaa5ae}.ill-record-card strong{display:block;margin:9px 0 21px;font-size:20px;line-height:.98}.ill-record-card>span{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;color:#bdb8c1}
.ill-action{position:absolute;right:18px;bottom:17px;padding:10px 13px;border-radius:9px;background:#b8f000;color:#2d350f;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;box-shadow:0 8px 0 #91bd08,0 14px 20px rgba(79,102,15,.17)}.ill-action b{margin-left:18px}
.story-visual[data-state="create"] .ill-form-card{transform:translate3d(-3px,0,18px) rotateY(1deg)}.story-visual[data-state="create"] .ill-record-card{transform:translate3d(0,-4px,48px) rotateY(-3deg)}

.ill-product-layout{height:calc(100% - 102px);display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:17px;align-items:center;padding:13px 6% 3px}.ill-product-card{height:100%;min-height:230px;display:grid;place-items:center;align-content:center;gap:9px;border-radius:18px;background:linear-gradient(145deg,#e9e4fb,#f6f4fa);box-shadow:inset 0 0 0 1px rgba(57,49,78,.07)}.ill-product-card>small{color:#5f5967}.ill-swatches{display:flex;gap:6px}.ill-swatches i{width:13px;height:13px;border-radius:50%;background:#f6f1e9;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(34,31,39,.1)}.ill-swatches i:nth-child(2){background:#29282d}.ill-swatches i:nth-child(3){background:#a89aea}
.ill-side-stack{display:grid;gap:9px;transform-style:preserve-3d}.ill-side-stack>span{display:flex;align-items:center;justify-content:space-between;padding:14px;border-radius:12px;background:#fff;box-shadow:0 12px 22px rgba(50,44,60,.1);font-size:11px;transition:transform .45s var(--motion-ease)}.ill-side-stack>span b{padding:5px 6px;border-radius:999px;background:#eeeaf5;color:#766e80;font:7px ui-monospace,SFMono-Regular,Consolas,monospace}.ill-side-stack>span.is-selected{background:#242329;color:#fff;transform:translate3d(-8px,0,32px)}.ill-side-stack>span.is-selected b{background:#b8f000;color:#27310e}
.ill-orbit-line{position:absolute;left:10%;right:10%;bottom:17px;display:flex;justify-content:center;gap:8px}.ill-orbit-line i{padding:7px 10px;border-radius:999px;background:#fff;box-shadow:0 8px 16px rgba(47,41,56,.1);font:8px ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}.ill-orbit-line i:first-child{background:#b8f000}

.ill-upload-flow{height:calc(100% - 105px);display:grid;grid-template-columns:minmax(190px,1fr) 70px minmax(180px,.9fr);align-items:center;gap:8px;padding:12px 5% 2px;perspective:900px}.ill-file-card,.ill-drop-card{min-height:190px;box-sizing:border-box;border-radius:18px;background:#fff;box-shadow:0 20px 34px rgba(52,45,64,.13);transition:transform .65s var(--motion-ease)}.ill-file-card{padding:20px;display:flex;flex-direction:column}.ill-file-card strong{margin:14px 0 8px;font-size:20px}.ill-file-card>span{color:#7b7580;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}.ill-file-card>b{margin-top:auto;padding:10px;border-radius:8px;background:#dff0b9;color:#465b22;font:8px ui-monospace,SFMono-Regular,Consolas,monospace}.ill-drop-card{display:grid;place-items:center;align-content:center;gap:9px;border:1px dashed #9e96aa;background:rgba(244,242,248,.82)}.ill-drop-card>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#b8f000;font-size:22px}.ill-drop-card strong{font-size:15px}.ill-flow-arrow{display:grid;place-items:center;color:#77707d}.ill-flow-arrow i{width:100%;height:1px;background:#b9b3bf}.ill-flow-arrow b{margin-top:-18px;padding:7px;border-radius:50%;background:#fff;box-shadow:0 5px 12px rgba(45,40,53,.12)}
.ill-upload-meta{position:absolute;left:9%;right:9%;bottom:15px;display:flex;justify-content:center;gap:7px}.ill-upload-meta span{padding:7px 9px;border-radius:999px;background:#f0edf3;color:#6e6873;font:7px ui-monospace,SFMono-Regular,Consolas,monospace}.story-visual[data-state="upload"] .ill-file-card{transform:translate3d(5px,-5px,45px) rotateY(3deg)}.story-visual[data-state="upload"] .ill-drop-card{transform:translate3d(-4px,2px,20px) rotateY(-2deg)}

.ill-mockup-layout{height:calc(100% - 58px);display:grid;grid-template-columns:42px minmax(0,1fr) 175px;gap:12px;padding-top:14px}.ill-tool-rail{display:grid;align-content:center;gap:8px}.ill-tool-rail i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#fff;box-shadow:0 8px 15px rgba(50,45,58,.1);font-style:normal}.ill-placement-canvas{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:18px;background:#e8e3f7;box-shadow:inset 0 0 0 1px rgba(59,50,81,.08)}.ill-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(67,58,85,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(67,58,85,.09) 1px,transparent 1px);background-size:38px 38px}.ill-placement-canvas .css-hoodie{width:160px;height:194px}.ill-selection{position:absolute;width:56px;height:56px;border:1px dashed #7062aa;border-radius:8px;box-shadow:0 0 0 1000px rgba(255,255,255,.06)}.ill-placement-panel{padding:17px;display:flex;flex-direction:column;border-radius:17px;background:#fff;box-shadow:0 17px 28px rgba(50,44,59,.12)}.ill-placement-panel strong{margin:11px 0 18px;font-size:17px}.ill-placement-panel>span{padding:8px 0;border-top:1px solid rgba(48,43,55,.08);font-size:9px;color:#706a74}.ill-placement-panel>b{margin-top:auto;padding:10px;border-radius:8px;background:#b8f000;color:#29320f;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center}.story-visual[data-state="mockup"] .ill-placement-panel{transform:translate3d(-3px,-2px,42px) rotateY(-2deg)}

.ill-approval-layout{height:calc(100% - 105px);display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:15px;padding:13px 4% 4px}.ill-review-product{position:relative;display:grid;place-items:center;align-content:center;gap:8px;border-radius:18px;background:linear-gradient(145deg,#eee9fb,#f7f5fa)}.ill-review-product .css-hoodie{width:150px;height:183px}.ill-review-product>small{color:#625b69}.ill-pin{position:absolute;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#25242a;color:#fff;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;box-shadow:0 8px 14px rgba(35,31,42,.2)}.pin-a{left:31%;top:34%}.pin-b{right:28%;top:50%}.ill-comment-stack{display:grid;align-content:center;gap:10px;transform-style:preserve-3d}.ill-comment-stack>div{padding:15px;border-radius:14px;background:#fff;box-shadow:0 14px 24px rgba(49,43,58,.12)}.ill-comment-stack strong{display:block;margin-top:8px;font-size:12px;line-height:1.2}.ill-comment-stack>div:last-child{transform:translateX(-10px);background:#edf4d8}.ill-approval-bar{position:absolute;left:6%;right:6%;bottom:14px;display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-radius:10px;background:#fff;box-shadow:0 10px 20px rgba(49,43,58,.12);font:8px ui-monospace,SFMono-Regular,Consolas,monospace}.ill-approval-bar b{padding:8px 10px;border-radius:7px;background:#b8f000;color:#29320e}.story-visual[data-state="approval"] .ill-comment-stack>div:first-child{transform:translate3d(-4px,-5px,45px) rotateY(-2deg)}

.ill-pdf-scene{position:relative;height:calc(100% - 54px);display:grid;place-items:center;perspective:1000px}.ill-pdf-back,.ill-pdf-sheet{position:absolute;width:min(440px,74%);height:82%;border-radius:14px;background:#e8e3f4;box-shadow:0 22px 38px rgba(42,37,50,.18)}.ill-pdf-back{transform:translate3d(-28px,12px,-55px) rotate(-5deg)}.ill-pdf-sheet{padding:16px;box-sizing:border-box;background:#fff;transform:translate3d(5px,-2px,30px) rotate(1.5deg);transition:transform .7s var(--motion-ease)}.ill-pdf-head,.ill-pdf-footer{display:flex;align-items:center;justify-content:space-between;font:8px ui-monospace,SFMono-Regular,Consolas,monospace}.ill-pdf-head{padding-bottom:10px;border-bottom:1px solid #e5e2e7}.ill-pdf-head b{padding:5px 7px;border-radius:999px;background:#242329;color:#fff}.ill-pdf-body{height:calc(100% - 58px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:14px}.ill-pdf-body .css-hoodie{width:112px;height:138px;justify-self:center}.ill-pdf-body>div:last-child{display:grid;gap:4px}.ill-pdf-body strong{margin-bottom:7px;font-size:10px}.ill-pdf-footer{padding-top:9px;border-top:1px solid #e5e2e7;color:#77717c}.ill-pdf-footer b{padding:6px 8px;border-radius:6px;background:#dff0b9;color:#465b22}.ill-approved-seal{position:absolute;right:7%;bottom:10%;z-index:4;width:86px;height:86px;display:grid;place-items:center;align-content:center;border-radius:50%;background:#b8f000;color:#29320e;box-shadow:0 16px 26px rgba(77,101,12,.24);font-size:20px;transform:rotate(-8deg)}.ill-approved-seal span{margin-top:3px;font:700 7px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center;text-transform:uppercase}.story-visual[data-state="pdf"] .ill-pdf-sheet{transform:translate3d(5px,-8px,70px) rotate(.5deg) scale(1.03)}

@media (max-width:980px){
  .ill-product-layout{grid-template-columns:minmax(0,1fr) 145px;padding-left:2%;padding-right:2%}.ill-upload-flow{grid-template-columns:1fr 44px .9fr;padding-left:2%;padding-right:2%}.ill-mockup-layout{grid-template-columns:36px minmax(0,1fr) 145px}.ill-approval-layout{grid-template-columns:minmax(0,1fr) 180px;padding-left:2%;padding-right:2%}.ill-comment-stack strong{font-size:10px}.css-hoodie{scale:.9}
}
@media (max-width:760px){
  .product-journey .illustration-screen{padding:14px!important}.ill-create-grid{grid-template-columns:1fr}.ill-record-card{display:none}.ill-product-layout{grid-template-columns:1fr 120px;padding:8px 0}.ill-upload-flow{grid-template-columns:1fr 35px 1fr;padding:8px 0}.ill-file-card,.ill-drop-card{min-height:170px;padding:13px}.ill-file-card strong{font-size:14px}.ill-mockup-layout{grid-template-columns:32px minmax(0,1fr)}.ill-placement-panel{display:none}.ill-approval-layout{grid-template-columns:1fr 145px;padding:8px 0}.ill-comment-stack>div{padding:10px}.ill-comment-stack strong{font-size:9px}.ill-pdf-sheet{width:78%}
}
@media (prefers-reduced-motion:reduce){.ill-form-card,.ill-record-card,.ill-file-card,.ill-drop-card,.ill-pdf-sheet,.product-journey .story-visual::before,.product-journey .story-visual::after{transition:none!important}}

/* Headline magnifier: a clipped glass lens holds a precisely aligned, scaled text copy. */
.magnifier-target{cursor:none}.headline-lens{position:fixed;z-index:110;left:0;top:0;width:var(--magnifier-size);height:var(--magnifier-size);overflow:hidden;border-radius:50%;border:var(--magnifier-border);background:rgba(255,255,255,.26);backdrop-filter:blur(7px) saturate(1.22);-webkit-backdrop-filter:blur(7px) saturate(1.22);box-shadow:var(--magnifier-shadow),inset 0 1px 0 rgba(255,255,255,.78);pointer-events:none;opacity:0;scale:.72;transition:opacity .16s ease,scale .22s var(--motion-ease);isolation:isolate}.headline-lens.on-dark{border-color:rgba(255,255,255,.72);background:rgba(35,33,42,.42);box-shadow:0 22px 48px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.4)}.headline-lens::after{content:"";position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(255,255,255,.46);box-shadow:inset 8px 8px 18px rgba(255,255,255,.14);pointer-events:none;z-index:2}.headline-lens.is-active{opacity:1;scale:1}.headline-lens-copy{position:fixed;transform-origin:top left;white-space:normal;pointer-events:none;will-change:transform,left,top}.headline-lens-copy *{pointer-events:none}.cursor.is-magnifier .cursor-ring,.cursor.is-magnifier .cursor-dot{opacity:0}.cursor-off .headline-lens{opacity:0!important}@media (hover:none),(pointer:coarse){.headline-lens{display:none}}@media (prefers-reduced-motion:reduce){.headline-lens{display:none}}

/* Plus Jakarta display rhythm: loosen the former compact type system. */
.hero h1,
.section-intro h2,
.product-journey .journey-heading h2,
.journey-story-card h3,
.parallax-copy h2,
.rotation-copy h2,
.message-banner-copy h2,
.cta-copy h2,
.story-visual h2,
.story-panel h3,
.skill-detail h3,
.version-details h3,
.artwork-step-caption h3,
.contextual-cta-panel h2{letter-spacing:-.042em}
.hero h1{line-height:.98}
.section-intro h2{line-height:1.08}
.product-journey .journey-heading h2{line-height:.98}
.journey-story-card h3{line-height:.97}
.parallax-copy h2{line-height:.9}
.rotation-copy h2{line-height:.93;margin-bottom:34px}
.message-banner-copy h2{line-height:.96;letter-spacing:-.038em}
.cta-copy h2{line-height:.98;letter-spacing:-.038em}
.story-visual h2,.story-panel h3{line-height:1.02}
.skill-detail h3,.version-details h3,.artwork-step-caption h3,.contextual-cta-panel h2{line-height:1.06}
.kinetic-word{letter-spacing:-.055em}
.section-intro>p:last-child{line-height:1.65}
.rotation-copy>p:nth-of-type(2){line-height:1.68}
.cta-copy p{margin-top:34px;line-height:1.68}
.message-banner-words{margin-top:48px}

/* Display hierarchy: setup lines stay light; outcome lines carry emphasis. */
.hero h1{font-weight:430}
.hero h1 em{display:inline-block;font-size:.84em;font-weight:650;letter-spacing:-.025em}
.section-intro h2,.product-journey .journey-heading h2{font-weight:450}
.message-banner-copy h2{font-weight:420}
.message-banner-copy h2 em{display:block;margin-top:.12em;font-size:.78em;font-weight:650;line-height:1.04;letter-spacing:-.022em}
.rotation-copy h2 span,.rotation-copy h2 strong{display:block}
.rotation-copy h2 span{font-weight:420}
.rotation-copy h2 strong{margin-top:.1em;font-size:.76em;font-weight:650;line-height:1.08;letter-spacing:-.025em}
.cta-copy h2{font-weight:430}
.cta-copy h2 em{display:block;margin-top:.08em;font-size:.84em;font-weight:650;line-height:1.04;letter-spacing:-.022em}
.journey-story-card h3{font-weight:430}
.journey-story-card h3 em{font-size:.86em;font-weight:650;letter-spacing:-.02em}
.story-panel h3,.skill-detail h3,.version-details h3{font-weight:550}

/* Heading accents reuse the restrained PromoPlus product palette. */
.heading-accent{font:inherit;color:inherit}
.accent-purple{color:#7661c9}
.accent-peach{color:#a85f4e}
.accent-teal{color:#34756c}
#skills-title .accent-teal{font-weight:700}
.accent-green{color:#55742b}
.hero h1 em,.cta-copy h2 em{color:#7661c9}
.message-banner-copy h2 em{color:#cfc3ff}
.rotation-copy h2 strong{color:#d7f39a}
.kinetic-word{color:#cfc3ff}
@media (max-width:760px){
  .hero h1,.section-intro h2,.product-journey .journey-heading h2,.journey-story-card h3,.rotation-copy h2,.message-banner-copy h2,.cta-copy h2{letter-spacing:-.035em}
  .message-banner-copy h2,.cta-copy h2{line-height:1}
  .message-banner-copy h2 em{font-size:.84em}
  .rotation-copy h2 strong{font-size:.82em}
}

/* Hero typography and screen composition: two clear lines with a tighter visual cluster. */
.hero{
  min-height:880px;
  padding-top:70px;
  padding-bottom:90px;
}
.hero h1.hero-title{
  max-width:920px;
  font-size:clamp(62px,5.45vw,102px);
  font-weight:500;
  line-height:.96;
  letter-spacing:-.048em;
}
.hero-title .hero-word{display:block}
.hero-title .hero-title-accent{
  color:#7661c9;
  font-style:normal;
  font-weight:650;
  letter-spacing:-.04em;
}
.hero .hero-subtitle{
  max-width:525px;
  margin:30px 0 34px;
  font-size:17px;
  line-height:1.62;
}
.hero-workflow-scene{height:660px}
.hero-scene-glow{width:520px;height:520px}
.hero-screen-back{
  left:4%;
  top:220px;
  width:min(350px,43vw);
  height:240px;
  transform:rotateY(10deg) rotateZ(-5deg) translateZ(-42px);
  animation:heroBackBalanced 8.4s ease-in-out infinite;
}
.hero-screen-main{
  left:50%;
  top:88px;
  width:min(590px,70vw);
  height:415px;
  transform:rotateX(5deg) rotateY(-6deg) rotateZ(1deg) translateZ(62px);
  animation:heroMainBalanced 7.6s ease-in-out infinite;
}
.hero-screen-front{
  right:3%;
  bottom:74px;
  width:min(300px,36vw);
  height:200px;
  transform:rotateY(-10deg) rotateZ(5deg) translateZ(94px);
  animation:heroFrontBalanced 7.1s ease-in-out infinite;
}
@keyframes heroMainBalanced{
  50%{transform:rotateX(3deg) rotateY(-3deg) rotateZ(0) translate3d(0,-15px,82px)}
}
@keyframes heroBackBalanced{
  50%{transform:rotateY(7deg) rotateZ(-3deg) translate3d(7px,-11px,-26px)}
}
@keyframes heroFrontBalanced{
  50%{transform:rotateY(-7deg) rotateZ(3deg) translate3d(-7px,-13px,114px)}
}
@media (max-width:980px){
  .hero{min-height:760px;padding-top:58px;padding-bottom:72px}
  .hero h1.hero-title{font-size:clamp(56px,7vw,78px)}
  .hero-workflow-scene{height:500px}
  .hero-screen-back{left:4%;top:155px;width:260px;height:180px}
  .hero-screen-main{top:62px;width:min(430px,67vw);height:304px}
  .hero-screen-front{right:3%;bottom:56px;width:218px;height:148px}
}
@media (max-width:760px){
  .hero{min-height:auto;padding-top:70px;padding-bottom:62px}
  .hero h1.hero-title{font-size:clamp(48px,13vw,68px);line-height:.98;letter-spacing:-.04em}
  .hero .hero-subtitle{font-size:16px;line-height:1.58}
  .hero-workflow-scene{height:430px}
  .hero-screen-back{left:1%;top:130px;width:210px;height:146px}
  .hero-screen-main{top:38px;width:min(350px,82vw);height:246px}
  .hero-screen-front{right:0;bottom:38px;width:170px;height:116px}
}

/* Retained for later comparison; the concise overview and journey currently replace it. */
.is-temporarily-hidden{display:none!important}

/* Project control split layout: orbit and live record each occupy one clear half. */
.skills-section{
  background:linear-gradient(112deg,#f1eee8 0 48%,#e9efe4 48% 100%);
}
.skills-section .section-intro{max-width:1180px;margin-bottom:28px}
.skills-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,1fr);
  align-items:center;
  gap:clamp(42px,5vw,92px);
  max-width:none;
  margin:0;
  padding:clamp(26px,3vw,46px);
  border:1px solid rgba(67,59,75,.07);
  border-radius:38px;
  background:linear-gradient(115deg,rgba(225,219,239,.62) 0 49%,rgba(226,237,216,.75) 49% 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 24px 60px rgba(55,48,63,.07);
}
.skills-wheel{
  width:min(680px,100%);
  margin:0 auto;
  background:radial-gradient(circle,rgba(205,194,246,.64) 0 23%,rgba(244,242,238,.62) 24% 25%,transparent 26%);
  box-shadow:inset 0 0 80px rgba(255,255,255,.52);
}
.project-context{
  position:relative;
  top:auto;
  right:auto;
  width:100%;
  max-width:none;
  min-height:560px;
  margin:0;
  box-sizing:border-box;
  padding:clamp(30px,3.1vw,48px);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(247,249,240,.82));
  box-shadow:0 28px 54px rgba(44,39,51,.15),inset 0 1px 0 #fff;
  display:flex;
  flex-direction:column;
}
.project-context h3{margin:28px 0 25px;font-size:clamp(30px,2.6vw,44px);font-weight:600}
.project-context-meta span{padding:15px;border-radius:14px}
.project-context-meta strong{font-size:16px;font-weight:600}
.project-side-status{gap:10px;margin-top:21px;padding-top:20px}
.project-side-status span{gap:9px;font-size:12px}
.project-context-selected{margin-top:auto;padding-top:24px}
.project-context-selected h4{margin:12px 0 10px;font-size:clamp(32px,3vw,48px);font-weight:650}
.project-context-selected p{max-width:540px;font-size:14px;line-height:1.55}

@media (max-width:1100px){
  .skills-layout{grid-template-columns:1fr;gap:30px;padding:32px}
  .project-context{max-width:760px;min-height:480px;margin:0 auto}
  .project-side-status{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media (max-width:760px){
  .skills-section{background:linear-gradient(160deg,#f1eee8 0 40%,#e9efe4 100%)}
  .skills-layout{padding:16px;border-radius:26px;gap:24px}
  .project-context{min-height:0;padding:22px;margin:0}
  .project-context h3{font-size:30px}
  .project-side-status{grid-template-columns:1fr}
  .project-context-selected{margin-top:24px}
}

/* Artwork story rail: the pinned animation uses the full width and its changing
   explanation occupies the space beneath it instead of leaving a blank field. */
.artwork-motion-section .section-intro{margin-bottom:34px}
.artwork-motion-section .artwork-step-copy{display:none!important}
@media (min-width:761px){
  .artwork-scroll-layout{
    top:clamp(38px,5vh,68px);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:16px;
  }
  .artwork-scroll-layout .artwork-stage{
    grid-column:1;
    grid-row:1;
    width:100%;
    height:min(650px,61vh);
    min-height:520px;
  }
  .artwork-scroll-layout .artwork-step-caption{
    grid-column:1;
    grid-row:2;
    width:100%;
    min-height:148px;
    box-sizing:border-box;
    margin:0;
    padding:26px 30px;
    display:grid;
    grid-template-columns:minmax(150px,.55fr) minmax(300px,1.15fr) minmax(280px,.9fr);
    align-items:center;
    gap:clamp(25px,3vw,58px);
    border:1px solid rgba(255,255,255,.72);
    border-radius:24px;
    background:linear-gradient(115deg,rgba(255,255,255,.64),rgba(239,243,232,.7));
    box-shadow:0 20px 42px rgba(65,56,82,.11),inset 0 1px 0 rgba(255,255,255,.84);
    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);
  }
  .artwork-step-caption p{margin:0;font-size:10px;line-height:1.45}
  .artwork-step-caption h3{font-size:clamp(34px,3.1vw,50px);line-height:.98}
}
.artwork-caption-detail{min-width:0}
.artwork-caption-detail>span{margin:0!important;max-width:520px!important;font-size:14px!important;line-height:1.55!important}
.artwork-caption-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:24px}
.artwork-caption-progress i{display:block;height:4px;border-radius:999px;background:rgba(44,40,50,.14);transition:background .3s ease,transform .3s ease}
.artwork-caption-progress i.is-complete{background:rgba(52,117,108,.48)}
.artwork-caption-progress i.is-active{background:#b8f000;transform:scaleY(1.55);transform-origin:center}
@media (max-width:760px){
  .artwork-step-caption{
    padding:20px!important;
    border:1px solid rgba(255,255,255,.7);
    border-radius:20px;
    background:rgba(255,255,255,.56);
  }
  .artwork-caption-detail>span{font-size:12px!important}
  .artwork-caption-progress{margin-top:18px}
}

/* Label-free product cursor: interactive states retain depth and color without
   displaying OPEN, APPROVE, PREVIEW, START, or other hover instructions. */
.cursor-label{display:none!important}
.cursor.is-button .cursor-ring,
.cursor.is-gallery .cursor-ring,
.cursor.is-version .cursor-ring,
.cursor.is-approval .cursor-ring,
.cursor.is-cta .cursor-ring{
  width:66px;
  height:66px;
  border-radius:50%;
}
.cursor.is-orbit .cursor-ring{width:72px;height:72px}
.cursor.is-dashboard .cursor-ring{width:68px;height:68px}
.cursor.is-product .cursor-ring{width:78px;height:78px}

/* Testimonials: staggered glass cards translate practical PromoPlus outcomes
   into a focused, high-contrast 3D customer-story chapter. */
.testimonial-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(88px,8vw,132px) 7vw clamp(82px,7vw,116px);
  color:#f8f7f2;
  background:
    radial-gradient(circle at 16% 18%,rgba(118,97,201,.28),transparent 28%),
    radial-gradient(circle at 85% 76%,rgba(184,240,0,.12),transparent 24%),
    #202024;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.testimonial-section .section-intro{position:relative;z-index:2;max-width:1260px;margin-bottom:clamp(48px,6vw,82px)}
.testimonial-section .eyebrow{color:#aaa6b0}
.testimonial-section .section-intro h2{max-width:1100px;color:#f8f7f2;font-weight:430}
.testimonial-section .section-intro h2 span{color:#cfc3ff;font-weight:680}
.testimonial-section .section-intro>p:last-child{color:#bbb8c0}
.testimonial-stage{
  position:relative;
  z-index:2;
  display:flex;
  align-items:start;
  gap:26px;
  perspective:1500px;
  transform-style:preserve-3d;
  transition:transform .72s var(--motion-ease);
  will-change:transform;
}
.testimonial-stage::before{display:none}
.testimonial-carousel{position:relative;z-index:2;display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;gap:18px}
.testimonial-viewport{position:relative;min-width:0;overflow:hidden;padding:34px 4px 58px;outline:none}
.testimonial-viewport::before{
  content:"";
  position:absolute;
  z-index:0;
  width:min(72vw,1120px);
  aspect-ratio:1;
  left:50%;
  top:45%;
  translate:-50% -50%;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 110px rgba(255,255,255,.018),0 0 0 220px rgba(255,255,255,.012);
}
.testimonial-control{position:relative;z-index:4;width:58px;height:58px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.09);color:#fff;box-shadow:0 18px 34px rgba(0,0,0,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .3s var(--motion-ease),background .3s ease,opacity .3s ease}
.testimonial-control span{font-size:23px;line-height:1}
.testimonial-control:hover,.testimonial-control:focus-visible{transform:scale(1.1) translateZ(25px);background:#b8f000;color:#222;outline:none}
.testimonial-control:disabled{opacity:.28;pointer-events:none}
.testimonial-card{
  --card-surface:#f7f5f1;
  position:relative;
  flex:0 0 calc((100% - 52px)/3);
  min-height:390px;
  box-sizing:border-box;
  padding:clamp(25px,2.4vw,38px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid rgba(255,255,255,.72);
  border-radius:28px;
  background:var(--card-surface);
  color:#242329;
  box-shadow:0 34px 58px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.75);
  transform-style:preserve-3d;
  will-change:transform,box-shadow;
  transition:opacity .7s ease,transform .75s var(--motion-ease),filter .65s ease,box-shadow .4s ease;
}
.testimonial-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.78),transparent 34%);
  transition:opacity .3s ease;
}
.testimonial-card:hover::before,.testimonial-card:focus-visible::before{opacity:.62}
.testimonial-card:focus-visible{outline:2px solid #b8f000;outline-offset:5px}
.testimonial-operations{--card-surface:linear-gradient(145deg,#faf9f5,#e8efe0)}
.testimonial-client{--card-surface:linear-gradient(145deg,#d7ccff,#eee9ff);margin-top:46px}
.testimonial-production{--card-surface:linear-gradient(145deg,#f8e4d8,#f4f0e5);margin-top:14px}
.testimonial-creative{--card-surface:linear-gradient(145deg,#dff2ef,#eef8f3);margin-top:38px}
.testimonial-sales{--card-surface:linear-gradient(145deg,#f5edc9,#f8f4df);margin-top:8px}
.testimonial-owner{--card-surface:linear-gradient(145deg,#eadfff,#f5efff);margin-top:48px}
.testimonial-card-top,.testimonial-card blockquote,.testimonial-card footer{position:relative;z-index:2;transform:translateZ(44px)}
.testimonial-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.testimonial-card-top span{color:#6f6973;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.07em;text-transform:uppercase}
.testimonial-card-top b{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.58);color:#55505a;font:8px ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:500;white-space:nowrap}
.testimonial-card blockquote{margin:48px 0 44px;font-size:clamp(23px,2.15vw,33px);font-weight:520;line-height:1.14;letter-spacing:-.055em}
.testimonial-card footer{
  width:auto;
  max-width:none;
  margin:0;
  padding:20px 0 0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:13px;
  border-top:1px solid rgba(37,34,42,.13);
  color:#242329;
}
.testimonial-card footer>i{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#25242a;color:#fff;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal;box-shadow:0 9px 17px rgba(28,25,34,.2)}
.testimonial-card footer div{display:flex;flex-direction:column;gap:4px}
.testimonial-card footer strong{font-size:13px;font-weight:650}
.testimonial-card footer span{color:#746e77;font-size:10px;line-height:1.35}
.testimonial-outcomes{position:relative;z-index:2;margin-top:72px;padding-top:25px;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;color:#cbc8cf;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.testimonial-outcomes i{width:5px;height:5px;border-radius:50%;background:#b8f000;box-shadow:0 0 0 5px rgba(184,240,0,.1)}
.testimonial-carousel-status{position:relative;z-index:2;margin:2px 82px 0;display:flex;align-items:center;gap:13px;color:#aaa6b0;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
.testimonial-carousel-status i{height:1px;flex:1;background:rgba(255,255,255,.16)}
.testimonial-carousel-status b{font-weight:500}
.js .testimonial-card{opacity:0;filter:blur(7px);transform:translateY(54px) rotateX(10deg)}
.js .testimonial-card.is-visible{opacity:1;filter:none}
.js .testimonial-card:nth-child(1).is-visible{transform:rotateY(5deg) translateZ(-18px)}
.js .testimonial-card:nth-child(2).is-visible{transform:translateY(46px) translateZ(45px)}
.js .testimonial-card:nth-child(3).is-visible{transform:translateY(14px) rotateY(-5deg) translateZ(-8px)}
.js .testimonial-card:nth-child(2){transition-delay:.09s}
.js .testimonial-card:nth-child(3){transition-delay:.18s}
/* Every carousel page settles flat; pointer tilt remains an intentional hover-only effect. */
.js .testimonial-carousel .testimonial-card.is-visible{transform:none}
@media (max-width:980px){
  .testimonial-carousel{grid-template-columns:54px minmax(0,1fr) 54px;gap:12px}
  .testimonial-control{width:48px;height:48px}
  .testimonial-stage{gap:22px}
  .testimonial-card{flex-basis:calc((100% - 22px)/2)}
  .testimonial-card,.testimonial-client,.testimonial-production,.testimonial-creative,.testimonial-sales,.testimonial-owner{min-height:310px;margin-top:0}
  .js .testimonial-card:nth-child(n).is-visible{transform:none}
  .testimonial-card blockquote{margin:38px 0}
  .testimonial-outcomes{margin-top:52px}
}
@media (max-width:760px){
  .testimonial-section{padding:76px 5vw}
  .testimonial-carousel{grid-template-columns:42px minmax(0,1fr) 42px;gap:7px}
  .testimonial-control{width:40px;height:40px}
  .testimonial-control span{font-size:18px}
  .testimonial-viewport{padding:22px 2px 36px}
  .testimonial-stage{gap:16px}
  .testimonial-card{flex-basis:100%}
  .testimonial-card{padding:24px;border-radius:22px}
  .testimonial-card blockquote{font-size:24px}
  .testimonial-card-top{align-items:flex-start;flex-direction:column}
  .testimonial-outcomes i{display:none}
  .testimonial-carousel-status{margin:0 49px}
}
@media (prefers-reduced-motion:reduce){
  .testimonial-stage{transition:none}
  .testimonial-card,.js .testimonial-card,.js .testimonial-card:nth-child(n).is-visible{opacity:1;filter:none;transform:none!important;transition:none}
}

/* Credibility strip: crisp inline marks and restrained 3D depth sit directly
   beneath the hero without competing with its primary workflow visual. */
.trust-section{
  position:relative;
  z-index:5;
  padding:34px 7vw clamp(76px,7vw,106px);
  background:linear-gradient(180deg,#f8f7f3,#f1f0eb);
  border-bottom:1px solid rgba(38,34,44,.08);
}
.trust-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,460px);align-items:end;gap:40px;max-width:1600px;margin:0 auto 30px}
.trust-heading .eyebrow{margin-bottom:12px}
.trust-heading h2{max-width:760px;margin:0;font-size:clamp(30px,3.3vw,50px);font-weight:520;line-height:1.02;letter-spacing:-.055em}
.trust-heading>p{margin:0;color:#6d686f;font-size:14px;line-height:1.55}
.trust-panel{
  max-width:1600px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.88);
  border-radius:26px;
  background:rgba(255,255,255,.74);
  box-shadow:0 25px 50px rgba(47,41,54,.11),inset 0 1px 0 #fff;
  perspective:1100px;
  transform:perspective(1200px) rotateX(1.2deg);
  transform-origin:center bottom;
}
.trust-item{
  position:relative;
  min-height:132px;
  padding:24px clamp(18px,2vw,30px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:#232228;
  border-right:1px solid rgba(43,38,49,.1);
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(245,244,239,.52));
  transform-style:preserve-3d;
  transform-origin:center;
  will-change:transform;
  transition:opacity .55s ease,transform .45s var(--motion-ease),background .3s ease,box-shadow .4s ease;
}
.trust-item:last-child{border-right:0}
.trust-item:hover,
.js .trust-item.is-visible:hover{z-index:3;background:#fff;transform:translateY(-7px) translateZ(52px) scale(1.06);box-shadow:0 24px 38px rgba(44,38,51,.18)}
.trust-item>div:last-child{display:flex;flex-direction:column;gap:5px;transform:translateZ(22px)}
.trust-item strong{font-size:16px;font-weight:650;line-height:1;letter-spacing:-.035em}
.trust-item span{color:#77717a;font-size:11px;line-height:1.25}
.trust-mark,.trust-check,.trust-file,.trust-wordmark{flex:0 0 auto;transform:translateZ(30px)}
.trust-mark{width:44px;height:48px}.trust-mark svg{display:block;width:100%;height:100%}
.trust-shopify>div:last-child strong{font-size:22px;font-weight:750;font-style:italic;letter-spacing:-.065em}
.trust-wordmark{font-size:25px;font-weight:800;line-height:1;letter-spacing:-.09em}
.trust-check{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#dff0b5;box-shadow:0 9px 18px rgba(78,105,29,.15)}
.trust-check i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#77a535;color:#fff;font-size:14px;font-style:normal}
.trustpilot-mark{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:#00b67a;box-shadow:0 10px 20px rgba(0,182,122,.2);transform:translateZ(30px)}
.trustpilot-mark i{color:#fff;font-size:25px;line-height:1;font-style:normal}
.trust-rating>div:last-child{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 9px}
.trust-rating>div:last-child strong{font-size:18px}
.trust-rating .trust-stars{color:#00b67a;font-size:13px;letter-spacing:1px;line-height:1}
.trust-rating small{grid-column:1/-1;color:#77717a;font-size:10px;line-height:1.2}
.reviews-mark{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:#ffb400;box-shadow:0 10px 20px rgba(255,180,0,.22);transform:translateZ(30px)}
.reviews-mark i{color:#202024;font-size:21px;font-weight:800;line-height:1;font-style:normal}
.trust-reviews>div:last-child{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 9px}
.trust-reviews>div:last-child strong{font-size:18px}
.trust-reviews .reviews-stars{color:#ffb400;font-size:13px;letter-spacing:1px;line-height:1}
.trust-reviews small{grid-column:1/-1;color:#77717a;font-size:10px;line-height:1.2}
.trust-file{position:relative;display:grid;place-items:center;width:42px;height:50px;border-radius:8px;background:#29272e;color:#fff;box-shadow:7px 7px 0 #d2c5ff}
.trust-file::after{content:"";position:absolute;right:0;top:0;border-style:solid;border-width:0 0 10px 10px;border-color:transparent transparent #77727e transparent}
.trust-file i{font:8px ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}
.js .trust-item{opacity:0;transform:translateY(20px) rotateX(7deg)}
.js .trust-item.is-visible{opacity:1;transform:none}
.js .trust-item:nth-child(2){transition-delay:.06s}.js .trust-item:nth-child(3){transition-delay:.12s}.js .trust-item:nth-child(4){transition-delay:.18s}
@media (max-width:980px){
  .trust-panel{grid-template-columns:repeat(2,1fr);transform:none}
  .trust-item:nth-child(2){border-right:0}.trust-item:nth-child(-n+2){border-bottom:1px solid rgba(43,38,49,.1)}
}
@media (max-width:760px){
  .trust-section{padding:28px 5vw 70px}
  .trust-heading{grid-template-columns:1fr;gap:16px}
  .trust-panel{grid-template-columns:1fr;border-radius:22px}
  .trust-item{min-height:108px;justify-content:flex-start;border-right:0;border-bottom:1px solid rgba(43,38,49,.1)}
  .trust-item:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){.js .trust-item{opacity:1;transform:none;transition:none}}

/* --------------------------------------------------------------------------
   Mobile spacing pass
   These final overrides neutralize desktop sticky heights and keep every
   section compact, readable, and safely inside the phone viewport.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  :root{--mobile-gutter:20px;--mobile-section-space:72px}
  html{scroll-padding-top:68px}
  body{overflow-x:hidden}
  .section-shell{width:100%;padding-left:var(--mobile-gutter)!important;padding-right:var(--mobile-gutter)!important}
  .section-intro{margin-bottom:30px!important}
  .section-intro h2{max-width:100%;font-size:clamp(38px,11vw,54px)!important;line-height:1.02!important;letter-spacing:-.052em!important}
  .section-intro>p:last-child{max-width:34rem;margin-top:16px!important;font-size:14px!important;line-height:1.55!important}

  .site-header{height:64px;padding:16px var(--mobile-gutter) 0}
  .header-cta{font-size:11px}

  /* Hero: reduce the empty opening while keeping the three product views large. */
  .hero{min-height:auto!important;padding-top:82px!important;padding-bottom:52px!important;gap:26px!important}
  .hero-copy{max-width:none}
  .hero h1.hero-title{font-size:clamp(46px,13.2vw,62px)!important;line-height:.98!important;letter-spacing:-.055em!important}
  .hero .hero-subtitle{max-width:34rem;margin-top:20px;font-size:15px;line-height:1.55}
  .hero-actions{margin-top:24px;gap:9px}
  .hero-actions .button{min-height:44px;padding:12px 14px;font-size:11px}
  .hero-workflow-scene{width:100%;height:360px!important;margin-top:4px;overflow:visible}
  .hero-screen-main{top:35px;width:min(82vw,340px)!important;height:238px!important}
  .hero-screen-back{left:-2%;top:132px;width:min(49vw,194px)!important;height:132px!important}
  .hero-screen-front{right:-2%;bottom:12px;width:min(47vw,184px)!important;height:126px!important}

  /* Credibility strip: two compact columns instead of four tall rows. */
  .trust-section{padding:34px var(--mobile-gutter) var(--mobile-section-space)}
  .trust-heading{gap:12px;margin-bottom:22px}
  .trust-heading h2{font-size:clamp(29px,8.8vw,40px);line-height:1.04}
  .trust-heading>p{font-size:13px}
  .trust-panel{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:20px}
  .trust-item{min-height:104px;padding:17px 12px;gap:10px;border-right:1px solid rgba(43,38,49,.1);border-bottom:1px solid rgba(43,38,49,.1)}
  .trust-item:nth-child(2n){border-right:0}
  .trust-item:nth-last-child(-n+2){border-bottom:0}
  .trust-item strong{font-size:13px}.trust-item span{font-size:9px}
  .trust-shopify>div:last-child strong{font-size:17px}.trust-wordmark{font-size:19px}
  .trust-mark{width:34px;height:38px}.trust-check,.trustpilot-mark,.reviews-mark{width:38px;height:38px;flex-basis:38px}

  /* Problem cleanup: remove the desktop 3-scroll hold and compress its stage. */
  .problem-section{height:auto!important;min-height:0!important;padding-top:var(--mobile-section-space)!important;padding-bottom:var(--mobile-section-space)!important}
  .messy-sticky{position:relative!important;top:auto!important;height:auto!important;min-height:0!important}
  .messy-stage{height:430px!important;margin-top:30px!important;border-radius:24px!important;overflow:hidden}
  .messy-card{width:150px!important;padding:15px!important}
  .messy-card h3{font-size:16px!important;line-height:1.04!important}
  .messy-stage-message{right:18px!important;bottom:20px!important;font-size:25px!important;line-height:.94!important}

  .message-banner{min-height:340px!important;padding:48px var(--mobile-gutter)!important}
  .message-banner h2{font-size:clamp(42px,12vw,62px)!important;line-height:.93!important}

  /* Project control: smaller orbit and cards, with tighter section rhythm. */
  .skills-section{padding-top:var(--mobile-section-space)!important;padding-bottom:var(--mobile-section-space)!important}
  .skills-layout{gap:28px!important;padding:18px!important;border-radius:24px!important}
  .skills-wheel{padding:16px!important;gap:10px!important}
  .skill-card{min-height:105px!important;padding:14px 11px!important;border-radius:17px!important}
  .skill-card strong{font-size:12px!important}.skill-card span{font-size:8px!important}
  .skills-center{width:150px!important;height:150px!important}
  .project-context{padding:20px!important;border-radius:21px!important}
  .project-context h3{font-size:27px!important}
  .project-context-meta{gap:7px!important}

  .contextual-cta{padding:22px var(--mobile-gutter) 54px!important}
  .contextual-cta-panel{padding:24px 20px!important;gap:18px!important}

  /* Production reveal was inheriting a 260vh desktop scroll scene. */
  .rotation-section{height:auto!important;min-height:0!important;padding:var(--mobile-section-space) 0!important}
  .rotation-stage{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;grid-template-columns:1fr!important;gap:40px!important;padding:0 var(--mobile-gutter)!important;overflow:visible!important}
  .rotation-copy{padding:0!important}
  .rotation-copy h2{max-width:10ch;margin:14px 0 20px!important;font-size:clamp(48px,14.5vw,68px)!important;line-height:.88!important}
  .rotation-copy>p:nth-of-type(2){max-width:34rem}
  .rotation-object{width:min(82vw,350px)!important;margin:auto;justify-self:center}

  .type-motion-section{min-height:0!important;padding-top:var(--mobile-section-space)!important;padding-bottom:var(--mobile-section-space)!important}
  .type-motion-inner{min-height:300px!important;padding:38px var(--mobile-gutter)!important}
  .kinetic-word{font-size:clamp(56px,18vw,86px)!important}

  /* Story: retain the main visual and turn the six triggers into one horizontal
     snap row, avoiding several screens of blank vertical scrolling. */
  .product-journey{padding:var(--mobile-section-space) var(--mobile-gutter)!important;row-gap:0!important}
  .product-journey .journey-heading{margin-bottom:30px!important}
  .product-journey .journey-heading h2{font-size:clamp(42px,11.5vw,58px)!important;line-height:.98!important}
  .product-journey .story-sticky{height:auto!important;margin:0!important}
  .product-journey .journey-stage{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
  .product-journey .story-visual{height:390px!important;max-width:100%!important;margin:0!important;padding:18px!important;border-radius:23px!important}
  .product-journey .journey-story-card{min-height:205px!important;padding:22px!important;border-radius:22px!important}
  .product-journey .journey-ui{inset:58px 16px 16px!important;height:auto!important}
  .product-journey .story-panels{display:flex!important;width:auto!important;margin:22px calc(var(--mobile-gutter) * -1) 0!important;padding:0 var(--mobile-gutter) 8px!important;gap:12px!important;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;pointer-events:auto!important;scrollbar-width:none}
  .product-journey .story-panels::-webkit-scrollbar{display:none}
  .product-journey .story-panel{display:block!important;flex:0 0 min(82vw,330px);min-height:150px!important;padding:20px!important;border:1px solid rgba(35,32,40,.1)!important;border-radius:20px!important;background:rgba(255,255,255,.56)!important;opacity:1!important;scroll-snap-align:start}
  .product-journey .story-panel h3{font-size:25px!important;line-height:1!important}
  .product-journey .story-panel p{font-size:13px!important;line-height:1.5!important}

  /* Testimonials: place controls over the edges so the card uses full width. */
  .testimonial-section{padding:var(--mobile-section-space) var(--mobile-gutter)!important}
  .testimonial-section .section-intro{margin-bottom:34px!important}
  .testimonial-carousel{display:block!important;position:relative}
  .testimonial-control{position:absolute;top:50%;z-index:6;width:42px;height:42px;transform:translateY(-50%)}
  .testimonial-control:hover{transform:translateY(-50%) scale(1.05)}
  .testimonial-prev{left:-8px}.testimonial-next{right:-8px}
  .testimonial-viewport{padding:18px 12px 30px!important}
  .testimonial-card{min-height:315px!important;padding:23px!important}
  .testimonial-card blockquote{margin:34px 0!important;font-size:22px!important;line-height:1.16!important}
  .testimonial-carousel-status{margin:0 8px!important}
  .testimonial-outcomes{margin-top:42px!important}

  .faq-section{display:block!important;padding:var(--mobile-section-space) var(--mobile-gutter)!important}
  .faq-intro{position:relative!important;top:auto!important;margin-bottom:42px}
  .faq-intro h2{font-size:clamp(42px,12vw,58px)!important;line-height:.96!important}
  .faq-intro>p:last-child{margin-top:18px;font-size:14px}
  .faq-list summary{grid-template-columns:30px minmax(0,1fr) 30px;gap:10px;padding:22px 0}
  .faq-list summary strong{font-size:19px}
  .faq-list details>p{padding:0 38px 22px 40px;font-size:14px}

  .cta-section{padding-top:var(--mobile-section-space)!important;padding-bottom:76px!important}
  .cta-panel{min-height:450px!important;border-radius:24px!important}
  .cta-copy{padding:52px 20px!important}
  .cta-copy h2{font-size:clamp(46px,13vw,62px)!important;line-height:.94!important}
  .cta-copy p{margin-top:20px!important;font-size:14px!important}
  .cta-actions{margin-top:26px!important}
  footer{padding:24px var(--mobile-gutter) 92px!important;gap:12px;flex-direction:column;align-items:flex-start}
}

@media (max-width:420px){
  :root{--mobile-gutter:16px;--mobile-section-space:62px}
  .header-cta{font-size:10px}
  .hero h1.hero-title{font-size:clamp(42px,13.5vw,56px)!important}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-actions .button{width:100%;justify-content:center}
  .hero-workflow-scene{height:335px!important}
  .hero-screen-main{width:88vw!important;height:224px!important}
  .hero-screen-back{width:47vw!important;height:121px!important}
  .hero-screen-front{width:45vw!important;height:116px!important}
  .trust-item{min-height:98px;padding:15px 9px;gap:8px}
  .trust-item strong{font-size:12px}.trust-item span{font-size:8px}
  .messy-stage{height:400px!important}.messy-card{width:138px!important;padding:13px!important}
  .skills-wheel{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .project-context-meta{grid-template-columns:1fr!important}
  .product-journey .story-visual{height:350px!important}
  .product-journey .journey-story-card{min-height:190px!important}
  .product-journey .story-panel{flex-basis:86vw}
  .faq-list details>p{padding-left:40px;padding-right:6px}
}

/* --------------------------------------------------------------------------
   Unified Plus Jakarta Sans heading system
   H1 is reserved for the hero. Major section H2s share one controlled scale,
   rhythm, and weight so the full story reads as one designed system.
   -------------------------------------------------------------------------- */
:root{
  --type-h1:clamp(66px,5.35vw,96px);
  --type-h2:clamp(44px,4.35vw,76px);
  --type-h1-line:.96;
  --type-h2-line:1.01;
  --type-display-tracking:-.058em;
}

.hero h1.hero-title{
  max-width:940px;
  margin:0;
  font-family:var(--font-sans)!important;
  font-size:var(--type-h1);
  font-weight:520;
  line-height:var(--type-h1-line);
  letter-spacing:var(--type-display-tracking);
  text-wrap:balance;
}
.hero-title .hero-word{display:block}
.hero-title .hero-title-accent{color:#7661c9;font:inherit;letter-spacing:inherit}
.hero-eyebrow{margin-bottom:24px;color:#77726f;letter-spacing:.095em}
.hero .hero-subtitle{max-width:590px;margin-top:28px}

.section-intro h2,
.product-journey .journey-heading h2,
.rotation-copy h2,
.message-banner-copy h2,
.testimonial-section .section-intro h2,
.faq-intro h2,
.cta-copy h2{
  font-family:var(--font-sans)!important;
  font-size:var(--type-h2);
  font-weight:500;
  line-height:var(--type-h2-line);
  letter-spacing:var(--type-display-tracking);
  text-wrap:balance;
}

/* Preserve meaningful emphasis without switching typefaces or scales. */
.message-banner-copy h2 em,
.rotation-copy h2 strong,
.cta-copy h2 em{
  font-family:var(--font-sans)!important;
  font-size:1em;
  font-weight:650;
  font-style:normal;
  line-height:inherit;
  letter-spacing:inherit;
}
.rotation-copy h2 strong,.cta-copy h2 em,.message-banner-copy h2 em{margin-top:.08em}
.cta-copy h2 em,.message-banner-copy h2 em{font-style:normal!important}
.section-intro>p:last-child,.trust-heading>p{margin-top:22px}

@media (max-width:760px){
  :root{--type-h1:clamp(48px,13.2vw,62px);--type-h2:clamp(38px,10.5vw,52px);--type-display-tracking:-.052em}
  .hero h1.hero-title{max-width:11ch;font-size:var(--type-h1)!important;line-height:.98!important;letter-spacing:var(--type-display-tracking)!important}
  .hero-eyebrow{margin-bottom:18px}
  .section-intro h2,
  .product-journey .journey-heading h2,
  .rotation-copy h2,
  .message-banner-copy h2,
  .testimonial-section .section-intro h2,
  .faq-intro h2,
  .cta-copy h2{font-size:var(--type-h2)!important;line-height:1.02!important;letter-spacing:var(--type-display-tracking)!important}
  .section-intro>p:last-child,.trust-heading>p{margin-top:15px}
}

/* The trust strip intentionally keeps its earlier, quieter heading scale. */
.trust-heading h2{
  max-width:760px;
  font-family:var(--font-sans)!important;
  font-size:clamp(30px,3.3vw,50px);
  font-weight:520;
  line-height:1.02;
  letter-spacing:-.055em;
  text-wrap:balance;
}

/* Problem statement: concrete counts and a firm outcome create urgency. */
.problem-section .section-intro h2{max-width:1060px}
.problem-section .problem-line{display:block}
.problem-section .problem-emphasis{margin-top:.08em;color:#a85f4e;font-weight:680}
.problem-section .section-intro>p:last-child{max-width:720px}

/* Seamless CTA transitions: each wrapper blends the sections on either side. */
.contextual-cta{margin-top:-1px;margin-bottom:-1px}
.context-cta-project{
  background:linear-gradient(180deg,#e9efe4 0%,#ebeae3 48%,#e5e1d9 100%)!important;
}
.context-cta-workflow{
  background:linear-gradient(180deg,#242328 0%,#232227 48%,#222224 100%)!important;
}
.context-cta-proof{
  background:linear-gradient(180deg,#222224 0%,#202024 100%)!important;
}

/* Plus details: workflow separators and the default cursor share one motif. */
.message-banner-words i{
  color:#b9b2d4;
  font-size:12px;
  font-weight:500;
  line-height:1;
}
.cursor-dot{
  width:12px;
  height:12px;
  border-radius:0;
  background:transparent;
}
.cursor-dot::before,
.cursor-dot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:1px;
  border-radius:999px;
  background:rgba(23,23,23,.48);
  transform:translate(-50%,-50%);
}
.cursor-dot::after{transform:translate(-50%,-50%) rotate(90deg)}

/* Connected feature story: the orbit selects a complete, practical record
   explanation instead of changing only one line of dashboard copy. */
.project-context-top{
  padding-bottom:18px;
  border-bottom:1px solid rgba(42,38,48,.1);
}
.project-context-top span{
  color:#302d34;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:650;
  letter-spacing:-.02em;
  text-transform:none;
}
.project-context-selected{
  --feature-tint:#edf6d3;
  --feature-accent:#779729;
  display:flex;
  flex:1;
  flex-direction:column;
  margin-top:0;
  padding-top:24px;
  border-top:0;
}
.project-context-selected[data-feature="artwork"]{--feature-tint:#efe9ff;--feature-accent:#7963bf}
.project-context-selected[data-feature="versions"]{--feature-tint:#e5f4f1;--feature-accent:#2f857a}
.project-context-selected[data-feature="feedback"]{--feature-tint:#fff0e7;--feature-accent:#bd7057}
.project-context-selected[data-feature="approval"]{--feature-tint:#f8efcf;--feature-accent:#a07a14}
.project-context-selected[data-feature="pdf"]{--feature-tint:#edf0f5;--feature-accent:#55506a}
.feature-context-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.feature-step{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background:#b8f000;
  color:#29320f;
  font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.04em;
}
.feature-kicker{
  color:#7a747d;
  font:9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.project-context-selected h3{
  margin:24px 0 10px;
  font-size:clamp(38px,3.6vw,58px);
  font-weight:620;
  line-height:.95;
  letter-spacing:-.065em;
}
.project-context-selected>p{
  max-width:570px;
  margin:0 0 22px;
  color:#666168;
  font-size:14px;
  line-height:1.55;
}
.feature-preview{
  display:grid;
  gap:7px;
  padding:13px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.88),var(--feature-tint));
  box-shadow:inset 0 1px 0 #fff,0 14px 26px rgba(48,42,58,.07);
}
.feature-preview-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:36px;
  padding:8px 11px;
  border-radius:10px;
  background:rgba(255,255,255,.58);
}
.feature-preview-row small{color:#79737c;font-size:10px}
.feature-preview-row strong{color:#302c33;font-size:11px;font-weight:650;text-align:right}
.feature-preview-row.is-highlighted{background:color-mix(in srgb,var(--feature-tint) 76%,#fff)}
.feature-preview-row.is-highlighted strong{color:var(--feature-accent)}
.feature-connections{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin-top:18px}
.feature-connections>small,.feature-outcome small{
  color:#858087;
  font:8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.feature-connections>div{display:flex;flex-wrap:wrap;gap:6px}
.feature-connections>div span{
  padding:6px 9px;
  border:1px solid rgba(52,47,58,.08);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#625d65;
  font-size:9px;
}
.feature-outcome{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:14px;
  margin-top:auto;
  padding:18px 0 2px 15px;
  border-left:2px solid var(--feature-accent);
}
.feature-outcome strong{color:#343038;font-size:13px;font-weight:620;line-height:1.35}
.project-context-selected.is-changing>*{animation:featurePanelIn .38s var(--motion-ease) both}
.project-context-selected.is-changing>*:nth-child(2){animation-delay:.025s}
.project-context-selected.is-changing>*:nth-child(3){animation-delay:.05s}
.project-context-selected.is-changing>*:nth-child(4){animation-delay:.075s}
.project-context-selected.is-changing>*:nth-child(5){animation-delay:.1s}
.project-context-selected.is-changing>*:nth-child(6){animation-delay:.125s}
@keyframes featurePanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .project-context-selected h3{font-size:38px}
  .project-context-selected>p{font-size:13px}
  .feature-connections{grid-template-columns:1fr}
  .feature-outcome{grid-template-columns:1fr;gap:7px;margin-top:22px}
}
@media (prefers-reduced-motion:reduce){.project-context-selected.is-changing>*{animation:none}}

/* Production reveal proportions: a shorter scroll hold and smaller proof stack
   keep the message dominant while preserving the layered 3D reveal. */
@media (min-width:761px){
  .rotation-section{height:185vh}
  .rotation-stage{
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
    gap:clamp(20px,3vw,58px);
    padding-left:1.5vw;
    padding-right:3vw;
  }
  .rotation-copy{padding-top:54px;padding-bottom:54px}
  .rotation-copy h2{
    max-width:10.5ch;
    font-size:clamp(62px,5vw,88px);
    line-height:.94;
  }
  .rotation-copy>p{max-width:680px;font-size:15px;line-height:1.55}
  .production-proof-artifact{width:min(500px,39vw)}
}

/* Hero display treatment: short editorial lines and selective lavender emphasis
   create the wide, confident rhythm of the supplied typography reference. */
.hero h1.hero-title{
  max-width:980px;
  font-size:clamp(70px,5.15vw,100px);
  font-weight:430;
  line-height:.91;
  letter-spacing:-.066em;
  text-wrap:initial;
}
.hero-title .hero-word{display:block;white-space:nowrap}
.hero-title .hero-word+.hero-word{margin-top:.09em}
.hero-title .hero-title-accent{
  display:inline;
  color:#765fd0;
  font:inherit;
  font-weight:680;
  letter-spacing:-.055em;
}
.hero-eyebrow{margin-bottom:28px}
.hero .hero-subtitle{margin-top:34px}
@media (min-width:1100px){
  .hero{
    grid-template-columns:minmax(0,1.04fr) minmax(500px,.96fr);
    gap:3.5vw;
  }
}
@media (max-width:1099px) and (min-width:761px){
  .hero h1.hero-title{font-size:clamp(58px,7vw,76px)}
}
@media (max-width:760px){
  .hero h1.hero-title{
    max-width:none;
    font-size:clamp(46px,12.7vw,62px)!important;
    line-height:.94!important;
    letter-spacing:-.058em!important;
  }
  .hero-title .hero-word{white-space:normal}
  .hero-title .hero-word+.hero-word{margin-top:.12em}
  .hero-eyebrow{margin-bottom:20px}
  .hero .hero-subtitle{margin-top:24px}
  .trust-heading h2{font-size:clamp(29px,8.8vw,40px)!important;line-height:1.04!important;letter-spacing:-.05em!important}
}

@media (max-width:420px){
  :root{--type-h1:clamp(44px,13.5vw,56px);--type-h2:clamp(36px,10.8vw,46px)}
}

/* Cursor contrast follows the surface beneath it. The default plus is darker and
   heavier on light sections, then both the ring and plus turn white on dark ones. */
.cursor-dot::before,
.cursor-dot::after{
  width:10px;
  height:2px;
  background:rgba(16,16,18,.84);
}
.cursor.is-on-dark{mix-blend-mode:normal}
.cursor.is-on-dark:not(.is-hovering) .cursor-ring{
  border-color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.035);
  box-shadow:0 4px 18px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.06);
}
.cursor.is-on-dark .cursor-dot::before,
.cursor.is-on-dark .cursor-dot::after{background:rgba(255,255,255,.96)}

/* Workflow product continuity: every garment view crops the same high-resolution
   cream hoodie used in the hero, while each step keeps its own UI and motion. */
.workflow-hoodie{
  position:relative;
  width:142px;
  height:170px;
  overflow:hidden;
  border-radius:32px 32px 20px 20px;
  background:#f7f2ea;
  filter:drop-shadow(0 18px 18px rgba(45,40,50,.17));
  isolation:isolate;
}
.workflow-hoodie img{
  position:absolute;
  left:-84%;
  top:-32%;
  width:253%;
  max-width:none;
  height:auto;
  display:block;
  user-select:none;
  pointer-events:none;
}
.ill-placement-canvas .workflow-hoodie{width:160px;height:194px}
.ill-review-product .workflow-hoodie{width:150px;height:183px}
.ill-pdf-body .workflow-hoodie{width:112px;height:138px;justify-self:center}
@media (max-width:980px){.workflow-hoodie{scale:.9}}