.work-phases{padding-top:70px;scroll-margin-top:40px}
.phases-heading-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:26px}
.phases-heading-row h2{margin:0}
.phase-controls{display:flex;gap:10px;flex:none}
.phase-controls button{display:grid;place-items:center;width:54px;height:54px;padding:0;border:1px solid #fff;border-radius:50%;color:#333;background:linear-gradient(120deg,#eee,#dfdfdf);box-shadow:inset 0 1px 5px #fff;transition:background .25s,box-shadow .25s}
.phase-controls button:hover:not(:disabled){background:#f5e0dd;box-shadow:inset 0 2px 7px #fff}
.phase-controls button:disabled{opacity:.35;cursor:default}
.phase-controls svg{width:22px;height:22px}.phase-prev svg{transform:rotate(180deg)}
.phases-intro{max-width:600px;margin:0 0 36px;font-size:17px;line-height:1.45}
.phases-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:3px 0 15px;outline-offset:6px}
.phases-viewport::-webkit-scrollbar{display:none}
.phases-track{display:flex;gap:20px;align-items:stretch}
.phase-card{flex:0 0 calc((100% - 40px)/3);min-width:0;scroll-snap-align:start;position:relative;border-radius:25px;background:#ffffff88;border:1px solid #fff;display:flex;flex-direction:column;padding:10px;box-sizing:border-box}
.phase-picture{position:relative;isolation:isolate;flex:none;aspect-ratio:1;overflow:hidden;border-radius:18px;background:#f1dedb;display:grid;place-items:center}
.phase-gradient{position:absolute;inset:-22%;z-index:-1;background:radial-gradient(ellipse at 30% 25%,#fff7e8 0%,transparent 40%),radial-gradient(ellipse at 65% 62%,#ee3c1c 0%,#f6a69d 31%,#eadad8 60%);animation:phase-gradient-drift 18s ease-in-out infinite alternate;filter:blur(12px)}
.phase-2 .phase-gradient{background:radial-gradient(ellipse at 50% 45%,#f87b67 0%,#efb4c7 32%,#f4e6e0 65%);animation-delay:-4s}
.phase-3 .phase-gradient{background:conic-gradient(from 35deg at 65% 65%,#f4e5da,#f37344,#ecc4c4,#f4e5da);animation-delay:-9s}
.phase-4 .phase-gradient{background:radial-gradient(ellipse at 48% 60%,#e84c31 0%,#ffa077 23%,#f2c7c5 40%,#f9e8df 65%);animation-delay:-12s}
.phase-5 .phase-gradient{background:linear-gradient(145deg,#efdace 20%,#f16445 50%,#f5b6c6 72%);animation-delay:-6s}
.phase-6 .phase-gradient{background:radial-gradient(ellipse at 25% 65%,#ed527d,transparent 50%),radial-gradient(ellipse at 85% 30%,#ffbd81,#f4dadc 60%);animation-delay:-7s}
.phase-7 .phase-gradient{background:conic-gradient(from 230deg at 35% 65%,#f9e5d4,#f2a2ac,#f46b41,#f9e5d4);animation-delay:-8s}
.phase-8 .phase-gradient{background:radial-gradient(ellipse at 50% 65%,#fa8255 0%,#efb0b5 36%,#f4e7de 70%);animation-delay:-5s}
.phase-9 .phase-gradient{background:linear-gradient(125deg,#f7dec6,#f08f70 50%,#eeb6c9);animation-delay:-11s}
.phase-10 .phase-gradient{background:radial-gradient(ellipse at 65% 30%,#ffe6b8,transparent 45%),radial-gradient(ellipse at 40% 80%,#ee674a,#eac8cf 60%);animation-delay:-9s}
.phase-11 .phase-gradient{background:radial-gradient(ellipse at 50% 75%,#f77455,#f6b5ad 35%,#f7e8df 65%);animation-delay:-5s}
.phase-12 .phase-gradient{background:linear-gradient(150deg,#fff1e6,#efbdc8 40%,#ed876a 75%);animation-delay:-4s}
.phase-13 .phase-gradient{background:radial-gradient(ellipse at 35% 45%,#f77969,#f1b4c8 32%,#f4e4dc 70%);animation-delay:-7s}
.phase-copy{padding:24px 13px 19px;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.phase-title{width:100%;display:flex;align-items:flex-start;gap:10px;margin-bottom:15px}
.phase-title h3{font-size:clamp(23px,2vw,30px);line-height:1.08;letter-spacing:-.055em;margin:0;flex:1;color:#333}
.phase-copy>p{font-size:15px;line-height:1.48;letter-spacing:-.025em;color:#797979;margin:0}
.phase-copy strong{font-weight:400;color:#333}
.phase-video-tip{position:relative;flex:none}
.phase-video-button{border:1px solid #ffffffa8;background:radial-gradient(ellipse at 30% 0,#ee3c1c,#ff8c75 62%,#f1afbd);box-shadow:inset 0 1px 5px #fff7;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:white;padding:8px;transition:box-shadow .25s}
.phase-video-button:hover{box-shadow:inset 0 1px 7px #fff9,0 3px 12px #ee3c1c20}
.phase-video-button svg{width:18px;height:18px}
.phase-tooltip{position:absolute;z-index:10;right:0;bottom:calc(100% + 10px);width:178px;padding:12px 14px;border-radius:14px;border:1px solid #fff;background:#faf5f2f5;box-shadow:0 4px 24px #67312815;font-size:13px;line-height:1.35;color:#333;letter-spacing:-.02em;pointer-events:none}
.phase-tooltip[hidden]{display:none}
.phase-copy>.phase-revision{display:flex;gap:8px;align-items:flex-start;margin-top:22px;color:#555;font-size:13px;line-height:1.4;padding-top:14px;border-top:1px solid #e3dcd9;width:100%}
.phase-revision svg{width:17px;height:17px;flex:none;color:#ee3c1c}
.phase-copy>.phase-alternative{font-size:13px;line-height:1.5;margin-top:20px;padding-left:12px;border-left:1px solid #ee3c1c66}
.phase-card.phase-optional{border:1px dashed #c8aaa3;background:#ffffff38}
.phase-optional-label{position:absolute;z-index:4;left:14px;top:14px;border:1px solid #ffffffb0;border-radius:999px;padding:7px 11px;background:#ffffff55;backdrop-filter:blur(12px);font-size:12px;color:#66514b;letter-spacing:-.025em}
.phase-invite{background:radial-gradient(ellipse at 20% 0,#ee3c1c,#ff7357 47%,#edb7c9 100%);border-color:#fff9}
.phase-invite .phase-picture{background:none}.phase-invite .phase-gradient{display:none}
.phase-invite h3,.phase-invite .phase-copy>p{color:white}.phase-invite .phase-title{margin-bottom:20px}
.phase-contact{display:flex;justify-content:center;align-items:center;width:100%;margin-top:auto;padding:15px 16px;border:1px solid #ffffffa0;border-radius:999px;background:#ffffff26;backdrop-filter:blur(12px);color:white;font-size:16px;line-height:1.2;letter-spacing:-.035em;transition:background .25s,box-shadow .25s}
.phase-invite .phase-copy>p{margin-bottom:32px}.phase-contact:hover{background:#ffffff45;box-shadow:inset 0 1px 6px #fff6}
.phases-bottom{display:flex;align-items:center;gap:24px;margin-top:18px}
.phase-position{font-size:12px;font-variant-numeric:tabular-nums;color:#797979;letter-spacing:0;min-width:50px}
.phase-progress{height:2px;flex:1;border-radius:2px;background:#dfd8d5;overflow:hidden}
.phase-progress i{display:block;height:100%;width:7.1428%;background:linear-gradient(90deg,#ee3c1c,#f1afbd);transition:width .5s ease}
.phase-announcement{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Small native illustrations retain the shared glass, paper and gradient language. */
.phase-glass{border:1px solid #ffffffa6;background:linear-gradient(135deg,#ffffffa0,#ffffff3b);box-shadow:inset 0 1px 5px #ffffff90,0 14px 28px #8e3b2912;border-radius:18px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:relative}
.visual-caption{display:block;font-size:13px;color:#624d47;letter-spacing:-.03em;margin-bottom:17px}
.visual-pill{font-size:10px;display:inline-block;border:1px solid #fff8;border-radius:99px;padding:7px 10px;color:#6e4f48;background:#ffffff45;letter-spacing:-.02em}
.phase-line{display:block;height:4px;background:#956c6040;border-radius:5px;margin:10px 0;width:100%}.phase-line.short{width:64%}
.phase-call{width:76%;padding:9px 9px 13px;transform:rotate(-6deg)}
.call-photo{aspect-ratio:1.42;overflow:hidden;border-radius:11px}.call-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 43%;transform:scale(1.2)}
.call-name{display:block;font-size:12px;letter-spacing:-.03em;color:#674e48;margin:11px 4px}
.call-controls{display:flex;gap:7px;justify-content:center}.call-controls i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffffff50;color:#684d43}.call-controls i:last-child{background:#ee3c1c;color:white}.call-controls svg{width:13px;height:13px}
.phase-offer{width:65%;padding:21px;transform:rotate(5deg)}
.offer-options{display:flex;gap:8px;height:72px;margin-bottom:20px}.offer-options i{flex:1;border-radius:7px;background:linear-gradient(160deg,#fff9,#f3c8c9);border:1px solid #fff8}.offer-options i:nth-child(2){transform:translateY(-6px);background:linear-gradient(160deg,#ffb09a,#ee725d)}
.phase-document{width:57%;padding:23px;transform:rotate(-8deg)}.signature{width:100%;height:38px;color:#8c5d56;margin-top:14px}.document-check,.transfer-check{position:absolute;right:-13px;bottom:16px;display:grid;place-items:center;width:37px;height:37px;border:1px solid #fff9;border-radius:50%;background:linear-gradient(120deg,#ee3c1c,#f3c0bf);color:white}.document-check svg,.transfer-check svg{width:20px;height:20px}
.research-orbit{width:58%;aspect-ratio:1;border:1px solid #ffffff99;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:0 0 40px #fff3,inset 0 0 30px #fff3;color:white;font-size:22px;letter-spacing:-.05em}.research-orbit i{position:absolute;inset:0;border:1px solid #ffffff80;border-radius:50%;transform:scaleX(.43)}.research-orbit i:nth-child(2){transform:rotate(60deg) scaleX(.43)}.research-orbit i:nth-child(3){transform:rotate(120deg) scaleX(.43)}
.research-label{position:absolute;padding:9px 13px;border-radius:10px;font-size:11px;color:#785c52}.label-a{left:8%;top:25%}.label-b{right:9%;bottom:23%}
.phase-wireframe{width:67%;padding:17px;transform:rotate(-5deg)}.wire-nav{height:7px;width:60%;background:#986a6040;border-radius:4px;margin-bottom:15px}.wire-hero{height:61px;border:1px solid #a5807260;border-radius:7px;background:#ffffff20}.wire-columns{display:flex;gap:7px;margin-top:9px}.wire-columns i{height:40px;flex:1;border:1px solid #a5807260;border-radius:5px}.wire-footer{height:5px;margin-top:13px;background:#a580722b;border-radius:4px}.wire-label{position:absolute;bottom:20%;right:10%;font-size:11px;padding:9px 13px;transform:rotate(7deg)}
.phase-mood{width:60%;padding:21px;transform:rotate(-9deg)}.mood-type{display:block;color:#8b5158;font-size:68px;letter-spacing:-.07em;line-height:1.1}.mood-word{display:block;font-size:11px;color:#886c68;margin-top:15px}.phase-swatches{display:flex;gap:5px;padding:8px;border:1px solid #fff9;background:#ffffff40;border-radius:12px;position:absolute;right:15%;bottom:19%;transform:rotate(10deg);backdrop-filter:blur(12px)}.phase-swatches i{width:35px;height:41px;background:#ee3c1c;border-radius:6px}.phase-swatches i:nth-child(2){background:#f1afbd}.phase-swatches i:nth-child(3){background:#f7e3c9}
.phase-concept{width:74%;padding:10px;transform:rotate(-6deg)}.browser-dots{display:flex;gap:4px;margin:1px 0 9px 3px}.browser-dots i{width:3px;height:3px;background:#bd9c93;border-radius:50%}.concept-surface{position:relative;overflow:hidden;border-radius:9px;padding:18px;height:135px;background:#fff0e2}.concept-surface span{position:relative;z-index:1;font-size:30px;letter-spacing:-.07em;line-height:.98;color:#79544a}.concept-surface i{position:absolute;width:140px;height:140px;border-radius:50%;right:-27px;bottom:-43px;background:radial-gradient(circle at 30% 25%,#fff1d7,#f37755 50%,#ecaaa7);filter:blur(2px)}.concept-label{position:absolute;bottom:16%;right:10%;font-size:10px;padding:9px 12px;transform:rotate(6deg)}
.design-pages{width:80%;height:62%;position:relative}.design-page{position:absolute;width:55%;height:90%;padding:10px;border-radius:11px}.page-one{left:0;top:5%;transform:rotate(-13deg)}.page-two{right:0;top:4%;transform:rotate(12deg)}.page-three{left:23%;top:0;transform:rotate(-2deg)}.design-page i{display:block;height:45%;background:linear-gradient(130deg,#fbe7d0,#ee8e72);border-radius:6px}.design-page b{display:block;height:4px;width:70%;background:#9a73684a;border-radius:5px;margin:11px 0}.design-page em{display:block;height:29%;border-radius:5px;background:linear-gradient(135deg,#eed6c7,#f3aba8)}
.phase-tilda{width:67%;padding:20px;transform:rotate(6deg)}.tilda-mark{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 17px;border:1px solid #896d6190;color:#896d61;border-radius:50%;font-size:24px;line-height:1}.tilda-layout{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}.tilda-layout i{height:36px;border:1px solid #fff9;background:#ffffff30;border-radius:6px}.tilda-layout i:first-child{grid-column:span 2;height:42px;background:linear-gradient(100deg,#f3b9a7,#ed9b86)}.phase-tilda .visual-pill{font-size:9px;padding:6px 7px;white-space:nowrap}
.tech-network{position:relative;width:84%;height:65%}.network-core{position:absolute;left:34%;top:28%;width:32%;aspect-ratio:1;display:grid;place-items:center;border-radius:23px}.network-core svg{width:35px;height:35px;color:#986252}.network-node{position:absolute;padding:9px 14px;font-size:11px;color:#8a6358;border-radius:10px}.node-a{left:0;top:5%}.node-b{right:0;bottom:10%}.node-c{right:3%;top:0;padding:9px}.node-c svg{width:21px;height:21px}.network-line{position:absolute;height:1px;background:#fff9;transform-origin:left center}.line-a{width:70%;left:15%;top:18%;transform:rotate(37deg)}.line-b{width:60%;left:45%;top:54%;transform:rotate(-44deg)}
.phase-transfer{width:58%;padding:27px;text-align:center;transform:rotate(-7deg)}.phase-transfer>svg{width:85px;height:85px;color:#b47760;display:block;margin:auto}.phase-transfer>span{font-size:15px;color:#79594e;display:block;margin-top:9px}.transfer-check{bottom:38px;right:-18px}
.phase-video{width:73%;padding:20px;transform:rotate(5deg)}.phase-video .visual-caption{font-size:11px;text-align:center}.video-play{display:grid;place-items:center;width:61px;height:61px;border-radius:50%;border:1px solid #ffffffa0;background:#ffffff3d;margin:23px auto;box-shadow:inset 0 1px 8px #fff5;color:#fff}.video-play svg{width:30px;height:30px}.video-progress{height:3px;border-radius:4px;background:#ffffff70;margin-top:26px}.video-progress i{display:block;width:40%;height:100%;background:#ee3c1c;border-radius:4px}
.phase-support{width:66%;padding:22px;transform:rotate(-8deg);border-bottom-left-radius:5px;display:flex;align-items:center;justify-content:space-between;color:#8e625e;font-size:23px;letter-spacing:-.05em}.support-heart{width:37px;height:32px;background:#ee8e86;mask:url('assets/heart.svg') center/contain no-repeat;-webkit-mask:url('assets/heart.svg') center/contain no-repeat}.support-dots{position:absolute;right:17%;bottom:22%;padding:17px 22px;display:flex;gap:8px;transform:rotate(8deg);border-bottom-right-radius:5px}.support-dots i{width:6px;height:6px;background:#b38885;border-radius:50%}
.phase-cta-heart{width:53%;aspect-ratio:82/69;filter:drop-shadow(0 6px 24px #ffc5c799);transform:rotate(-8deg);animation:phase-heart-float 7s ease-in-out infinite}.phase-cta-heart:before{content:"";display:block;width:100%;height:100%;background:linear-gradient(145deg,#fff,#ffe8df);mask:url('assets/heart.svg') center/contain no-repeat;-webkit-mask:url('assets/heart.svg') center/contain no-repeat}
@keyframes phase-gradient-drift{from{transform:translate(-3%,-2%) rotate(-5deg) scale(1)}to{transform:translate(4%,3%) rotate(12deg) scale(1.12)}}
@keyframes phase-heart-float{0%,100%{transform:translateY(4px) rotate(-8deg)}50%{transform:translateY(-6px) rotate(-3deg)}}
@media(max-width:1100px){.phase-card{flex-basis:calc((100% - 20px)/2.35)}.phase-copy{padding:22px 10px 18px}.phase-title h3{font-size:25px}.phase-copy>p{font-size:14px}}
@media(max-width:700px){.work-phases{padding-top:52px;width:calc(100% - 40px)}.phases-heading-row{gap:12px;margin-bottom:22px}.phases-heading-row h2{font-size:34px;max-width:65%}.phase-controls{gap:7px}.phase-controls button{width:39px;height:39px}.phase-controls svg{width:19px;height:19px}.phases-intro{font-size:15px;max-width:390px;margin-bottom:26px}.phases-track{gap:13px}.phase-card{flex-basis:88%;padding:8px;border-radius:24px}.phase-picture{border-radius:17px}.phase-copy{padding:22px 11px 17px}.phase-title h3{font-size:25px}.phase-copy>p{font-size:14px;line-height:1.48}.phase-video-button{width:31px;height:31px;padding:7px}.phase-tooltip{width:166px;font-size:12px}.phase-revision{font-size:12px!important}.phases-bottom{gap:17px;margin-top:12px}.phase-contact{font-size:15px}.phase-offer,.phase-document,.phase-mood{padding:18px}.phase-mood .mood-type{font-size:58px}.phase-swatches i{width:28px;height:33px}.phase-tilda{padding:14px}.call-name{font-size:11px}.phase-support{font-size:20px;padding:18px}}
@media(max-width:360px){.phase-card{flex-basis:94%}.phases-heading-row h2{font-size:30px}.phase-controls button{width:35px;height:35px}.phase-title h3{font-size:23px}.phase-copy>p{font-size:13px}.phase-call{width:82%}.phase-tilda .visual-pill{font-size:8px}}
@media(prefers-reduced-motion:reduce){.phase-gradient,.phase-cta-heart{animation:none}.phase-progress i,.phase-controls button,.phase-contact{transition:none}}