.service-redesign .inner-hero{min-height:760px;padding-bottom:55px}.service-redesign .inner-hero-grid{margin-top:28px}.service-redesign .inner-hero-grid h1{font-size:clamp(44px,4.8vw,72px)}.svc-pad{padding:64px 6vw}.svc-heading{display:flex;justify-content:space-between;align-items:center;gap:35px;margin-bottom:32px}.svc-heading h2{font-size:clamp(40px,4.5vw,65px);margin-top:20px}.visual-index{font-size:110px;line-height:1;color:#703035}.svc-problems{background:var(--studio-base);color:#fff}.svc-problems>.label{color:#8c8c88}.problem-row{display:grid;grid-template-columns:50px 1fr 70px;align-items:center;gap:15px;padding:35px 0;border-bottom:1px solid #333}.problem-row>div{position:relative;min-height:55px}.problem-row p{font-size:clamp(25px,3.3vw,48px);letter-spacing:-.045em;line-height:1.15;transition:opacity .55s,transform .55s}.problem-row .before{text-decoration:line-through;text-decoration-color:#f23333;text-decoration-thickness:2px;color:#8c8c88}.problem-row .after{position:absolute;inset:0;opacity:0;transform:translateY(15px)}.problem-row.solved .before{opacity:0;transform:translateY(-15px)}.problem-row.solved .after{opacity:1;transform:none}.change-arrow{font-size:45px;color:#f23333}.svc-included,.svc-timeline,.svc-outcomes,.svc-showcase{background:#f9f9f9}.bento-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}.bento-item{background:#ece9e6;border-radius:var(--corner);overflow:hidden;position:relative;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end}.bento-item:first-child{grid-row:span 2;min-height:538px;background:#e2ded9}.bento-visual{position:relative;display:grid;place-items:center;flex:1;min-height:160px;padding:25px;overflow:hidden}.bento-copy{padding:23px 26px;z-index:1}.bento-copy h3{font-size:27px;letter-spacing:-.04em}.bento-copy p{font-size:15px;line-height:1.4;color:#686864;max-height:0;opacity:0;transform:translateY(10px);transition:.35s;margin-top:0}.bento-item:hover .bento-copy p,.bento-item:focus .bento-copy p{max-height:80px;opacity:1;transform:none;margin-top:12px}.camera-art{text-align:center;color:#703035}.camera-art>div{border:2px solid #703035;border-radius:15px;width:150px;height:100px;font-size:78px;line-height:90px;position:relative}.camera-art>div:after{content:'';position:absolute;left:100%;top:20px;border:25px solid transparent;border-right-color:#703035;transform:rotate(180deg)}.camera-art>span,.camera-art>small{display:block;font:8px 'DejaVu Sans Mono';margin-top:20px}.camera-art>small{color:#8c8c88;max-width:180px;line-height:1.5}.map-art{width:100%;height:170px;background:repeating-linear-gradient(25deg,transparent 0 26px,#f9f9f9 27px 33px),repeating-linear-gradient(115deg,#d5ddd2 0 40px,#fff 41px 47px);border-radius:15px;position:relative}.map-art>b{display:block;text-align:center;font-size:65px;color:#703035}.map-art>div{position:absolute;bottom:10px;left:7%;width:86%;padding:12px;background:white;border-radius:10px;font-size:13px}.map-art span{color:#703035;display:block;font-size:10px;margin:5px 0}.map-art small{color:#888}.flow-art{display:grid;justify-items:center;gap:8px;font:10px 'DejaVu Sans Mono';color:#703035}.flow-art span{border:1px solid #aa8b8c;border-radius:12px;padding:13px 25px;background:#f9f9f9}.flow-art i{color:#f23333}.mini-brand{text-align:center;color:#703035}.mini-brand b{font-size:100px;letter-spacing:-.1em;font-family:Georgia,serif}.mini-brand span,.mini-brand i{display:block;font:9px 'DejaVu Sans Mono';margin-top:10px}.mini-brand i{font-size:28px;letter-spacing:10px}.timeline-intro{display:flex;justify-content:space-between;gap:20px;margin-bottom:35px}.timeline-intro>p:last-child{font-size:22px}.timeline-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:25px;padding-top:28px}.timeline-track:before,.timeline-track:after{content:'';position:absolute;top:0;left:0;height:2px;background:#ddd;width:100%}.timeline-track:after{background:#f23333;transform:scaleX(var(--fill,0));transform-origin:left}.timeline-track article{position:relative}.timeline-track article>i{position:absolute;top:-33px;left:0;width:12px;height:12px;background:#f23333;border:3px solid #f9f9f9;border-radius:50%;z-index:1}.timeline-track .label{color:#703035;font-size:9px}.timeline-track h3{font-size:27px;margin-top:15px}.svc-outcomes{display:grid;grid-template-columns:1fr 1.2fr;gap:9vw;align-items:center;padding-top:30px}.notification-phone{background:#111;border:5px solid #333;border-radius:42px;width:min(100%,300px);min-height:460px;padding:35px 15px 25px;margin:auto;position:relative;color:#fff;box-shadow:15px 20px 35px #0002;transform:rotate(-5deg)}.phone-notch{position:absolute;top:9px;left:35%;width:30%;height:15px;background:#000;border-radius:20px}.phone-clock{font-size:48px;text-align:center;margin:15px 0 8px;letter-spacing:-.05em}.notification-phone>.label{text-align:center;color:#aaa;font-size:8px}.notifications{margin-top:35px;display:grid;gap:12px}.notifications>div{background:#f9f9f9;color:#1a1a1a;border-radius:15px;padding:13px;opacity:0;transform:translateY(15px);transition:opacity .4s,transform .4s;transition-delay:calc(var(--delay)*.55s)}.notifications.visible>div{opacity:1;transform:none}.notifications .label{font-size:7px;color:#703035}.notifications p{font-size:13px;line-height:1.35;margin-top:6px}.demo-disclaimer{font-size:8px;text-align:center;color:#8c8c88;margin-top:30px}.outcome-copy>article{display:flex;gap:22px;margin-top:32px}.outcome-copy>article>span{color:#703035;font-size:32px}.outcome-copy h3{font-size:31px}.outcome-copy article p{font-size:17px;color:#777;line-height:1.5;margin-top:10px}.svc-guarantee{background:#703035;color:#fff;display:grid;grid-template-columns:3fr 1fr;gap:5vw;align-items:center}.svc-guarantee h2{font-size:clamp(35px,4vw,60px);margin:22px 0 28px;line-height:1.05}.guarantee-mark{font-size:clamp(110px,18vw,250px);color:#d2a5a8;text-align:center}.guarantee-terms{border:0!important;padding:15px 0 0}.guarantee-terms summary{font-size:11px;justify-content:flex-start}.guarantee-terms p{font-size:13px;line-height:1.5;color:#e8d6d6;max-width:600px}.service-redesign .content-section{padding:48px 6vw;position:relative}.service-redesign .content-section h2{font-size:clamp(35px,4vw,55px);max-width:75%}.service-redesign .faq-list{margin-top:25px;max-width:850px}.service-redesign details:not(.service-nav){padding:18px 0}.service-redesign .other-services{margin-top:25px}.service-redesign .apply{padding-top:55px}.faq-symbol,.engine-symbol{position:absolute;right:8vw;top:65px;font-size:90px;color:#703035;font-family:Georgia,serif}.service-notes{margin:15px 0 0 auto;max-width:850px}.service-notes summary{font-size:16px}.service-notes p{font-size:15px}.service-notes strong{font-weight:500}.service-redesign .button-solid{box-shadow:var(--cta-glow)}.service-redesign .button-solid:hover{box-shadow:var(--cta-glow-hover)}
/* Fictional website concepts */
.sample-site{background:#f0ede5;color:#fff;width:100%;min-height:480px;position:relative;overflow:hidden;font-family:'Helvetica Neue',sans-serif}.sample-site header{display:flex;justify-content:space-between;padding:16px;font-size:18px;letter-spacing:.1em;position:relative;z-index:2}.sample-site header small{font-size:5px;letter-spacing:.04em}.sample-landscape{position:absolute;top:0;left:0;right:0;height:265px;background:linear-gradient(140deg,#ffffff30,transparent 55%),var(--sample)}.sample-landscape:after{content:'';position:absolute;width:75%;height:150px;right:-15%;bottom:-25px;background:#0002;border-radius:50% 0 0 0;transform:rotate(-20deg)}.sample-site>strong{display:block;position:relative;font-family:Georgia,serif;font-size:38px;line-height:1;max-width:230px;margin:42px 20px 18px;font-weight:400}.sample-site>span,.sample-site>i{display:block;position:relative;font-size:8px;margin:14px 20px;font-style:normal}.sample-site>i{border:1px solid #ffffff70;border-radius:20px;padding:8px 12px;width:max-content}.sample-lower{position:relative;margin-top:40px;padding:25px 20px;color:#333;background:#f0ede5}.sample-lower b{font:22px Georgia,serif}.sample-lower p{font-size:10px;margin-top:12px}.sample-lower>div{height:150px;background:linear-gradient(45deg,var(--sample),#c6b9a5);margin-top:20px}.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.portfolio-grid article{min-width:0}.portfolio-grid article:first-child{grid-column:span 2}.portfolio-window{height:360px;overflow:hidden;border:12px solid #202020;border-bottom-width:22px;border-radius:var(--corner);background:#000}.portfolio-grid article:first-child .portfolio-window{height:440px}.portfolio-window .sample-site{min-height:650px;transition:transform 3s ease}.portfolio-window:hover .sample-site,.portfolio-grid article:focus .sample-site{transform:translateY(-190px)}.portfolio-grid article>.label{margin-top:14px;font-size:9px;color:#777}.portfolio-window .sample-site>strong{font-size:50px;max-width:350px}.portfolio-window .sample-landscape{height:320px}.portfolio-window .sample-lower{margin-top:70px}.bento-visual .sample-site{width:90%;min-height:200px;height:180px;border:6px solid #292929;border-radius:10px;transform:rotate(-6deg)}.bento-visual .sample-site>strong{font-size:22px;margin-top:15px}.bento-visual .sample-site header{font-size:12px;padding:8px}.bento-visual .sample-site header small{display:none}.bento-visual .sample-site>span,.bento-visual .sample-site>i{font-size:6px}.bento-visual .sample-site>i{margin-top:5px}
/* CSS 3D devices */
.service-websites .inner-hero{position:sticky;top:0;z-index:1;min-height:100svh}.service-websites #content{position:relative;z-index:2}.device-scroll-space{height:85svh;background:var(--studio-base)}.device-demo{min-width:0;perspective:1200px}.devices{height:360px;position:relative;transform-style:preserve-3d;touch-action:pan-y}.laptop{position:absolute;width:87%;left:0;top:20px;transform-style:preserve-3d;transform:translateY(calc((1 - var(--flight,0))*100px)) rotateY(calc((1 - var(--flight,0))*360deg));opacity:calc(.25 + var(--flight,0)*.75)}.laptop>.device-screen{height:260px;border:10px solid #313131;border-radius:15px 15px 4px 4px;box-shadow:0 0 1px #ddd;overflow:hidden;background:#000;position:relative}.laptop-base{height:12px;background:linear-gradient(#b9b9b9,#555);margin:0 -6%;border-radius:0 0 40% 40%}.demo-phone{position:absolute;right:0;top:105px;width:24%;height:245px;padding:6px;border:2px solid #666;background:#111;border-radius:22px;transform:translateY(calc((1 - var(--phone-flight,0))*100px));opacity:var(--phone-flight,0)}.demo-phone .device-screen{height:100%;overflow:hidden;border-radius:16px;position:relative}.device-screen .sample-site{position:absolute;inset:0;display:none}.device-screen .sample-site.selected{display:block}.demo-phone .sample-site header{font-size:9px;padding:10px 6px}.demo-phone .sample-site header small{display:none}.demo-phone .sample-site>strong{font-size:20px;margin:45px 8px 12px}.demo-phone .sample-site>span,.demo-phone .sample-site>i{font-size:5px;margin-left:8px}.device-demo.blueprint .device-screen:after{content:'';position:absolute;inset:0;z-index:3;background:repeating-linear-gradient(0deg,transparent 0 29px,#f23333 30px 31px),repeating-linear-gradient(90deg,#090000e8 0 29px,#f23333 30px 31px);box-shadow:inset 0 0 35px #f2333370;animation:reveal-design .65s both}.device-controls{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:15px}.device-controls>button{border:1px solid #ffffff40;border-radius:50%;background:#171717;color:#fff;width:35px;height:35px}.device-dots{display:flex;gap:9px}.device-dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:#777}.device-dots button.selected{background:#f23333;box-shadow:0 0 8px #f23333}.demo-caption{text-align:center;font-size:8px;color:#aaa;margin-top:15px}@keyframes reveal-design{0%,60%{opacity:1}100%{opacity:0}}
/* Fictional brand transformation */
.brand-demo{position:relative;min-height:450px;text-align:center;color:#ddd}.brand-demo>.label{font-size:8px;color:#999}.brand-logo{position:relative;height:170px;display:grid;place-items:center}.brand-logo>span{position:absolute;font:25px Arial,sans-serif;color:#888;animation:generic-brand 6s infinite}.brand-logo>strong{display:flex;align-items:center;gap:15px;font:100px Georgia,serif;color:#ecbe80;animation:custom-brand 6s infinite}.brand-logo>strong>span{font:22px Georgia,serif;text-align:left;letter-spacing:2px}.brand-logo small{font:9px 'DejaVu Sans Mono';letter-spacing:5px}.swatches{display:flex;justify-content:center;gap:10px}.swatches i{width:30px;height:30px;background:#ecbe80;border-radius:50%;animation:brand-drop 6s infinite}.swatches i:nth-child(2){background:#703035;animation-delay:.15s}.swatches i:nth-child(3){background:#f9f9f9;animation-delay:.3s}.brand-mockups{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:25px 20px;color:#ecbe80}.brand-mockups>div{position:relative;min-height:75px;display:grid;place-items:center;background:#703035;animation:brand-place 6s infinite;font:17px Georgia,serif}.brand-mockups>div:nth-child(2){animation-delay:.15s}.brand-mockups>div:nth-child(3){animation-delay:.3s}.brand-mockups>div:nth-child(4){animation-delay:.45s}.brand-mockups .polo{clip-path:polygon(20% 0,38% 0,50% 14%,62% 0,80% 0,100% 30%,80% 48%,77% 100%,23% 100%,20% 48%,0 30%);padding:15px}.brand-mockups .truck{border-radius:8px 25px 8px 8px;border-bottom:8px solid #444}.brand-mockups .business-card{transform:rotate(-7deg);background:#ecbe80;color:#703035}.brand-mockups .sign{background:#242424;border:4px solid #555}.brand-mockups small{font:7px 'DejaVu Sans Mono';display:block}.brand-pause{background:none;border:0;border-bottom:1px solid #555;color:#999;font-size:11px;padding:6px}.brand-demo.paused *{animation-play-state:paused!important}@keyframes generic-brand{0%,15%{opacity:1}25%,90%{opacity:0}100%{opacity:1}}@keyframes custom-brand{0%,15%{opacity:0;transform:scale(.7)}30%,85%{opacity:1;transform:scale(1)}100%{opacity:0}}@keyframes brand-drop{0%,25%{opacity:0;transform:translateY(-20px)}40%,85%{opacity:1;transform:none}100%{opacity:0}}@keyframes brand-place{0%,35%{opacity:0;translate:0 -35px;scale:.7}55%,85%{opacity:1;translate:0 0;scale:1}100%{opacity:0}}
@media(max-width:900px){.service-redesign .inner-hero-grid{grid-template-columns:1fr}.service-redesign .inner-hero-grid h1{font-size:52px}.service-websites .inner-hero{position:relative;min-height:0}.device-scroll-space{display:none}.device-demo{max-width:600px;width:100%;margin:auto;--flight:1;--phone-flight:1}.bento-grid{grid-template-columns:1fr 1fr}.bento-item:first-child{grid-row:span 2}.svc-outcomes{gap:5vw}.svc-guarantee{grid-template-columns:4fr 1fr}.brand-demo{max-width:500px;width:100%;margin:auto}.bento-copy p{max-height:none;opacity:1;transform:none;margin-top:10px}.bento-copy{padding:20px}.bento-copy h3{font-size:24px}.bento-visual{padding:15px}.svc-heading .visual-index{font-size:75px}}
@media(max-width:600px){.service-redesign .inner-hero{padding-bottom:35px}.service-redesign .inner-hero-grid{margin-top:28px}.service-redesign .inner-hero-grid h1{font-size:45px}.svc-pad{padding:42px 6vw}.svc-heading{gap:20px;margin-bottom:25px}.svc-heading h2{font-size:36px}.svc-heading .visual-index{font-size:55px}.problem-row{grid-template-columns:25px 1fr 25px;padding:27px 0;gap:10px}.problem-row p{font-size:26px}.problem-row>div{min-height:90px}.problem-row>.label{font-size:8px}.change-arrow{font-size:27px}.bento-grid{gap:12px}.bento-item{min-height:250px;border-radius:24px}.bento-item:first-child{min-height:510px}.bento-visual{min-height:130px;padding:12px}.bento-copy{padding:16px}.bento-copy h3{font-size:21px;line-height:1.1}.bento-copy p{font-size:13px;line-height:1.4}.camera-art>div{width:80px;height:60px;font-size:45px;line-height:55px}.camera-art>div:after{border-width:15px;top:15px}.camera-art>small{font-size:6px;max-width:100px}.camera-art>span{font-size:6px}.map-art{height:145px}.map-art>div{font-size:10px;padding:8px}.flow-art{font-size:7px}.flow-art span{padding:10px}.mini-brand b{font-size:70px}.mini-brand span{font-size:7px}.timeline-intro{display:block}.timeline-intro>p:last-child{font-size:18px;margin-top:12px}.timeline-track{display:flex;flex-direction:column;gap:30px;padding:0 0 0 28px}.timeline-track:before,.timeline-track:after{width:2px;height:100%;top:0;left:3px}.timeline-track:after{transform:scaleY(var(--fill,0));transform-origin:top}.timeline-track article>i{left:-30px;top:0}.timeline-track h3{font-size:25px;margin-top:8px}.svc-outcomes{grid-template-columns:1fr;gap:35px}.notification-phone{width:260px;min-height:425px}.outcome-copy h3{font-size:28px}.outcome-copy article p{font-size:16px}.outcome-copy>article{margin-top:24px}.svc-guarantee{grid-template-columns:1fr;gap:15px;position:relative;padding-right:13vw}.svc-guarantee h2{font-size:35px}.guarantee-mark{position:absolute;right:4vw;top:30px;font-size:45px}.service-redesign .content-section{padding:38px 6vw}.service-redesign .content-section h2{font-size:34px;max-width:80%}.faq-symbol,.engine-symbol{font-size:55px;right:6vw;top:55px}.service-redesign .other-services{gap:10px}.service-redesign .other-services>a{padding:18px 14px}.service-redesign .other-services h3{font-size:23px}.portfolio-grid{grid-template-columns:1fr;gap:24px}.portfolio-grid article:first-child{grid-column:auto}.portfolio-window,.portfolio-grid article:first-child .portfolio-window{height:280px;border-width:8px;border-bottom-width:16px}.portfolio-window .sample-site>strong{font-size:37px}.devices{height:270px}.laptop>.device-screen{height:195px;border-width:7px}.demo-phone{height:190px;top:75px;width:26%;border-radius:17px;padding:4px}.demo-phone .device-screen{border-radius:12px}.laptop .sample-site>strong{font-size:29px;margin-top:25px}.laptop .sample-site header{font-size:14px}.laptop .sample-site header small{font-size:4px}.demo-phone .sample-site>strong{font-size:17px;margin-top:25px}.demo-phone .sample-site header{font-size:8px}.brand-demo{min-height:420px}.brand-mockups{padding:20px 5px;gap:18px}.brand-logo>strong{font-size:80px}.brand-logo>strong>span{font-size:20px}.service-redesign .apply{padding-top:40px}}
@media(prefers-reduced-motion:reduce){.service-websites .inner-hero{position:relative;min-height:0}.device-scroll-space{display:none}.laptop,.demo-phone{transform:none!important;opacity:1!important}.device-demo.blueprint .device-screen:after{display:none}.brand-demo *{animation:none!important}.brand-logo>span{display:none}.brand-logo>strong{opacity:1}.notifications>div{opacity:1;transform:none;transition:none}.problem-row .before{display:none}.problem-row .after{position:relative;opacity:1;transform:none}.portfolio-window .sample-site{transition:none}}
.service-websites .bento-item:last-child{grid-column:1/-1;min-height:220px;display:grid;grid-template-columns:1fr 1fr;align-items:center}.service-websites .bento-item:last-child .bento-visual{height:220px}.service-websites .bento-item:last-child .bento-copy p{max-height:none;opacity:1;transform:none;margin-top:12px}
@media(max-width:600px){.service-websites .bento-item:last-child{min-height:190px}.service-websites .bento-item:last-child .bento-visual{height:190px}}
/* Balanced service heroes, independent of the home hero layout. */
.service-redesign .inner-hero{box-sizing:border-box;position:relative;height:auto;min-height:680px;padding:32px 5vw 55px;display:flex;flex-direction:column;justify-content:center}.service-redesign .inner-hero-grid{width:100%;padding-left:17vw;margin:90px 0 0;display:grid;grid-template-columns:1.05fr 1fr;gap:4vw;align-items:center}.service-redesign .inner-hero-grid h1{font-size:clamp(36px,3.7vw,58px);line-height:1.02;margin-top:22px}.service-redesign .inner-hero-grid .hero-desc{font-size:18px;line-height:1.45;margin-top:24px}.service-redesign .inner-price{font-size:25px;margin-top:24px}.service-redesign .hero-actions{gap:12px;margin-top:25px}.service-redesign .hero-actions a{font-size:14px;padding:15px 20px}.service-redesign .work-placeholder.large{min-height:340px;width:100%}.service-redesign .inner-hero-grid>div{min-width:0}.device-hero-track{position:relative;background:var(--studio-base)}.service-websites .device-hero-track>.inner-hero{position:sticky;top:0;height:100svh;min-height:680px;max-height:900px}.service-websites .device-scroll-space{height:75svh}.service-websites .device-demo{width:100%;max-width:530px;min-width:0;margin:auto}.service-websites .devices{height:320px}.service-websites .laptop>.device-screen{height:220px}.service-websites .demo-phone{height:210px;top:90px}.service-redesign .brand-demo{min-height:410px}.problem-row{cursor:pointer}.problem-row>div{display:grid;min-height:0}.problem-row .before,.problem-row .after{grid-area:1/1;position:relative;inset:auto;margin:0;align-self:center;min-height:1.15em}.problem-row{min-height:135px}.problem-row .after{pointer-events:none}.problem-row:focus-visible{outline:1px solid #f23333;outline-offset:6px}
@media(min-width:901px) and (max-height:700px){.service-websites .device-hero-track>.inner-hero{position:relative;height:auto;min-height:640px}.service-websites .device-scroll-space{display:none}}
@media(max-width:1050px) and (min-width:901px){.service-redesign .inner-hero-grid{padding-left:18vw;gap:25px}.service-redesign .inner-hero-grid h1{font-size:38px}.service-redesign .hero-actions a{font-size:12px;padding:13px 16px}.service-websites .devices{height:285px}.service-websites .laptop>.device-screen{height:190px}.service-websites .demo-phone{height:185px}}
@media(max-width:900px){.service-redesign .inner-hero,.service-websites .device-hero-track>.inner-hero{position:relative;display:block;height:auto;min-height:0;max-height:none;padding:28px 6vw 38px}.service-redesign .inner-hero-grid{padding:0;margin-top:38px;grid-template-columns:1fr;gap:28px}.service-redesign .inner-hero-grid h1{font-size:clamp(37px,7.2vw,56px);max-width:620px;line-height:1.02}.service-redesign .inner-hero-grid .hero-desc{font-size:18px;margin-top:20px;max-width:500px}.service-redesign .work-placeholder.large{min-height:240px;max-width:600px;margin:auto}.service-redesign .device-scroll-space{display:none}.service-websites .device-demo{max-width:530px}.service-websites .devices{height:320px}.service-websites .laptop>.device-screen{height:230px}.service-websites .demo-phone{height:220px}.problem-row{min-height:140px}}
@media(max-width:600px){.service-redesign .inner-hero-grid{margin-top:32px}.service-redesign .inner-hero-grid h1{font-size:40px}.service-websites .devices{height:260px}.service-websites .laptop>.device-screen{height:180px}.service-websites .demo-phone{height:180px;top:70px}.service-redesign .hero-actions a{font-size:14px;padding:15px 19px}.problem-row p{font-size:25px;line-height:1.18}.service-redesign .brand-demo{min-height:400px}}
@media(prefers-reduced-motion:reduce){.service-websites .device-hero-track>.inner-hero{position:relative;height:auto;min-height:0;padding-top:280px}.service-websites .device-scroll-space{display:none}.problem-row .before{display:none}.problem-row .after{opacity:1;transform:none}}
/* Service hero: home hero nav and rhythm, copy left (45%), visual right (~55%), one screen tall. Nav styles come from style.css. */
.service-redesign .inner-hero,.service-websites .device-hero-track>.inner-hero{background:var(--studio-base);display:block;box-sizing:border-box;height:100svh;min-height:600px;max-height:none;padding:35px 5vw 0}.service-redesign .inner-hero-grid{display:block;padding:0;margin:clamp(28px,calc(100svh - 680px),76px) 0 0;width:100%}.service-redesign .inner-hero-grid>div:first-child{width:45%;position:relative;z-index:2}.service-redesign .inner-hero-grid>div:last-child{position:absolute;top:calc(50% + 2vh);left:46%;right:4vw;width:auto;max-width:none;margin:0;transform:translateY(-50%)}.service-redesign .inner-hero-grid h1{font-size:clamp(38px,min(4.2vw,7vh),64px);line-height:1.02;margin-top:clamp(14px,2.6vh,24px)}.service-redesign .inner-hero-grid .hero-desc{max-width:500px;margin-top:clamp(14px,2.6vh,24px)}.service-redesign .inner-price{margin-top:clamp(14px,2.6vh,24px)}.service-redesign .hero-actions{margin-top:clamp(16px,2.8vh,25px)}.service-redesign .inner-hero-grid>.work-placeholder.large{min-height:0;height:min(56svh,540px)}.service-redesign .inner-hero-grid>.brand-demo{min-height:min(450px,62svh);padding:0 3vw}.service-websites .inner-hero-grid>.device-demo{padding:0 2vw}.service-websites .devices{height:390px}.service-websites .laptop>.device-screen{height:280px}.service-websites .demo-phone{height:260px;top:110px}.service-redesign .inner-hero .hero-actions .button-solid{background:#f23333;color:#fff;border:0;box-shadow:var(--cta-glow)}.service-redesign .inner-hero .hero-actions .button-solid:hover{box-shadow:var(--cta-glow-hover)}.service-redesign .inner-hero .hero-actions .button-line{background:transparent;color:#fff;border:1px solid #fff;box-shadow:none}.service-redesign .inner-hero .hero-actions .button-line:hover{background:#ffffff14;border-color:#fff;box-shadow:none}
@media(min-width:901px){.service-websites .device-hero-track>.inner-hero{position:sticky;top:0}}
@media(min-width:901px) and (max-height:600px){.service-websites .device-hero-track>.inner-hero{position:relative}.service-websites .device-scroll-space{display:none}}
@media(max-width:900px){.service-redesign .inner-hero,.service-websites .device-hero-track>.inner-hero{position:relative;height:auto;min-height:0;padding:35px 5vw 40px}.service-redesign .inner-hero-grid{margin-top:45px}.service-redesign .inner-hero-grid>div:first-child{width:100%;max-width:600px}.service-redesign .inner-hero-grid>div:last-child{position:relative;top:auto;left:auto;right:auto;transform:none;width:100%;max-width:650px;margin:35px auto 0}.service-redesign .inner-hero-grid>.work-placeholder.large{height:auto;min-height:280px}.service-redesign .inner-hero-grid>.brand-demo{min-height:450px}.service-redesign .inner-hero-grid h1{font-size:48px}.service-websites .devices{height:350px}.service-websites .laptop>.device-screen{height:250px}.service-websites .demo-phone{height:230px;top:100px}}
@media(max-width:700px){.service-redesign .inner-hero,.service-websites .device-hero-track>.inner-hero{padding:25px 6vw 35px}.service-redesign .inner-hero-grid{margin-top:38px}.service-redesign .inner-hero-grid h1{font-size:clamp(37px,9.6vw,49px)}.service-redesign .inner-hero-grid>.brand-demo{padding:0;min-height:410px}.service-websites .inner-hero-grid>.device-demo{padding:0}.service-websites .devices{height:270px}.service-websites .laptop>.device-screen{height:190px}.service-websites .demo-phone{height:185px;top:75px}}
@media(prefers-reduced-motion:reduce){.service-websites .device-hero-track>.inner-hero{position:relative}.service-websites .device-scroll-space{display:none}}
.svc-problems{position:relative;isolation:isolate;overflow:clip}.svc-problems:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 38% 44% at 84% 46%,var(--mesh-16)),radial-gradient(ellipse 44% 52% at 13% 72%,var(--mesh-0f)),radial-gradient(ellipse 30% 30% at 52% 104%,var(--mesh-13));animation:mesh-drift 53s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.svc-problems:before{animation:none}}
/* How it works page: the four steps in the service-page language. */
.service-process .stair-hero{height:min(80svh,700px)}
@media(max-width:900px){.service-process .stair-hero{height:420px}}
.timeline-track>.timeline-step{position:relative;display:block}.timeline-step h3{transition:color .3s ease}
.timeline-track>.timeline-step>i{position:absolute;top:-33px;left:0;width:12px;height:12px;background:#f23333;border:3px solid #f9f9f9;border-radius:50%;z-index:1;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.timeline-step:hover h3,.timeline-step:focus-visible h3{color:#703035}.timeline-step:hover>i,.timeline-step:focus-visible>i{transform:scale(1.4)}
@media(max-width:600px){.timeline-track>.timeline-step>i{left:-30px;top:0}}
.svc-steps{position:relative;isolation:isolate;overflow:clip;background:var(--studio-base);color:#f4f4f2;padding:24px 6vw 72px}
.svc-steps:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 36% 22% at 82% 18%,var(--mesh-16)),radial-gradient(ellipse 40% 20% at 14% 46%,var(--mesh-0f)),radial-gradient(ellipse 34% 18% at 70% 78%,var(--mesh-13));animation:mesh-drift 56s ease-in-out infinite alternate}
.step-row{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:7vw;padding:88px 0;border-top:1px solid #ffffff1f;scroll-margin-top:24px}.step-row:first-child{border-top:0}
.step-head{position:sticky;top:110px;align-self:start}
.step-index{display:block;font-size:clamp(64px,7.5vw,116px);line-height:.85;letter-spacing:-.06em;font-weight:400;color:var(--red)}
.step-head h2{font-size:clamp(40px,4.4vw,68px);line-height:1;margin-top:28px}
.step-meta{margin-top:22px;font:11px/1.7 'DejaVu Sans Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#a9a9a4}
.step-facts{margin:0;display:grid}
.step-facts>div{display:grid;grid-template-columns:minmax(140px,.4fr) 1fr;gap:28px;padding:30px 0;border-bottom:1px solid #ffffff1f}.step-facts>div:first-child{padding-top:6px}
.step-facts dt{font:11px/1.7 'DejaVu Sans Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#a9a9a4;padding-top:7px}
.step-facts dd{margin:0;font-size:clamp(20px,1.7vw,25px);line-height:1.45;color:#f4f4f2;max-width:32em}
.service-process .other-services{grid-template-columns:repeat(5,1fr)}
@media(max-width:1050px){.service-process .other-services{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.step-row{grid-template-columns:1fr;gap:34px;padding:60px 0}.step-head{position:static}.step-facts>div{grid-template-columns:1fr;gap:8px;padding:22px 0}}
@media(max-width:600px){.service-process .other-services{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.svc-steps:before{animation:none}}
.service-process .timeline-intro{display:block}.service-process .timeline-intro>p:last-child{margin-top:12px}.service-process #other-services .engine-symbol{display:none}
/* How it works: results row replaces the timing bar. */
.svc-results{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;background:#f9f9f9;padding-top:80px;padding-bottom:80px}
.result{border-top:1px solid #d8d6d2;padding-top:26px}
.result-num{font-size:clamp(64px,7.4vw,118px);line-height:.9;letter-spacing:-.055em;font-weight:500;color:#1a1a1a;font-variant-numeric:tabular-nums;white-space:nowrap}
.result-suffix{color:#8c8c88;font-size:.5em;letter-spacing:-.03em;margin-left:.06em}
.result-label{margin-top:20px;font-size:clamp(18px,1.5vw,22px);line-height:1.35;color:#55534f;max-width:16em}
.svc-results .result{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:no-preference){.svc-results.will-animate:not(.is-in) .result{opacity:0;transform:translateY(18px)}.svc-results.is-in .result:nth-child(2){transition-delay:.14s}.svc-results.is-in .result:nth-child(3){transition-delay:.28s}}
@media(max-width:700px){.svc-results{grid-template-columns:1fr;gap:38px;padding-top:56px;padding-bottom:56px}.result-num{font-size:76px}}
/* Websites hero: Three.js devices. On desktop the canvas covers the whole sticky hero so the laptop can enter from off-screen; the copy stays above it. */
.service-websites .device-demo{perspective:none;position:static}
.service-websites .inner-hero-grid>div:first-child{position:relative;z-index:2}
.service-websites .devices{position:static;height:clamp(340px,60vh,560px)}
.service-websites .device-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.service-websites .device-layer canvas{display:block;width:100%;height:100%}
.service-websites .device-fallback{display:none;width:100%;height:100%;object-fit:contain;object-position:center}
.service-websites .no-3d .device-fallback{display:block}
.service-websites .device-controls,.service-websites .demo-caption{position:relative;z-index:2;transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),visibility .5s}
.service-websites .device-demo:not(.is-landed) :is(.device-controls,.demo-caption){opacity:0;visibility:hidden;transform:translateY(8px)}
.service-websites .device-scroll-space{height:125svh}
.service-websites .device-controls>button{display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s}
.service-websites .device-controls>button:hover{border-color:#ffffff90;background:#222}
.service-websites .device-controls button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.service-websites .device-dots button{cursor:pointer}
@media(max-width:900px){
.service-websites .devices{position:relative;height:min(80vw,380px);margin-top:20px}
.service-websites .device-layer{opacity:0;transition:opacity .9s ease}
.service-websites .has-3d .device-layer{opacity:1}
.service-websites .device-controls{margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.service-websites .device-layer{transition:none}}
/* Leads phone: the iPhone render as the frame, notifications laid out inside its screen. */
.svc-outcomes .notification-phone{--w:min(300px,100%);width:var(--w);aspect-ratio:620/1265;min-height:0;box-sizing:border-box;padding:calc(var(--w)*.2) calc(var(--w)*.1) 0;background:url(/assets/devices/renders/phone-front.webp) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(14px 22px 30px #0005);transform:rotate(-4deg)}
.svc-outcomes .phone-notch{display:none}
.svc-outcomes .phone-clock{margin-top:0}
@media(max-width:700px){.svc-outcomes .notification-phone{--w:260px}}
/* Websites page: portfolio and bento show the concepts on the real devices. */
.portfolio-grid article .portfolio-window.device-shot{height:clamp(240px,30vw,420px);border:0;border-radius:0;background:none;overflow:visible}
.portfolio-grid article:first-child .portfolio-window.device-shot{height:clamp(280px,40vw,580px)}
.portfolio-window.device-shot img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.portfolio-grid article:hover .device-shot img,.portfolio-grid article:focus-visible .device-shot img{transform:translateY(-8px)}
.bento-visual.device-visual{padding:18px 18px 0}
.bento-visual.device-visual img{height:auto;max-height:200px}
.bento-item:first-child .bento-visual.device-visual img{max-height:360px}
.bento-visual .lead-phone-sm{width:min(30%,120px)}
@media(prefers-reduced-motion:reduce){.portfolio-window.device-shot img{transition:none}}
.portfolio-window.device-shot img{display:block;width:100%;height:100%;object-fit:contain}

/* Headlines carry a second tone picked for the surface under them: wine on paper, warm grey on black, blush on wine. */
.tone{color:var(--wine,#703035)}
.inner-hero .tone,.svc-steps .tone,.apply .tone,.principle:nth-child(odd) .tone{color:#a5a5a1}
.svc-guarantee .tone,.principle:nth-child(2) .tone{color:#d9b9bc}
/* Engine cross: sits level with the headline and turns slowly, like the card crosses. */
.engine-symbol{top:clamp(28px,4vw,52px);line-height:1}
.engine-symbol .i{display:inline-block;animation:cross-spin 9s linear infinite}
@media(prefers-reduced-motion:reduce){.engine-symbol .i{animation:none}}

/* Branding: the SPRINT work in the hero (wrapped van + cap) and its brand documents in the bento. */
.service-branding .inner-hero-grid>div.brand-work:last-child{width:auto;max-width:600px;margin-left:auto}
.service-branding .brand-visual{width:100%;margin:0;aspect-ratio:1.28/1}
.service-branding .brand-visual .frame{top:0;width:84%}
.service-branding .brand-hat{width:50%;left:0}
.service-branding .inner-hero .frame{--line:#fff}
.brand-work-cap{margin-top:14px;color:#8c8c88}
.bento-visual.doc-visual{padding:24px 24px 4px;overflow:visible}
.doc-visual img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 22px 36px -24px #0008}
.doc-stack{display:flex;flex-direction:column;justify-content:center;gap:16px}
@media(max-width:600px){.bento-visual.doc-visual{padding:14px 14px 2px}.doc-visual img{border-radius:7px}.doc-stack{gap:10px}}

/* Websites bento: SEO (ALICIA split open over its code), Built to convert (booking buttons clicked in turn), Fast hosting (score gauge). */
.seo-visual{padding:22px 18px 6px}
.seo-stage{position:relative;width:100%;aspect-ratio:1400/932;container-type:inline-size}
.seo-half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;z-index:1;animation:seo-l 8s cubic-bezier(.7,0,.2,1) infinite}
.seo-l{left:0}.seo-r{left:50%;animation-name:seo-r}
.seo-half img{display:block;width:200%;max-width:none;height:auto}
.seo-r img{margin-left:-100%}
.seo-half:after{content:'';position:absolute;top:2%;height:60%;width:2px;background:linear-gradient(transparent,#f23333 18%,#f23333 82%,transparent);box-shadow:0 0 14px 1px #f23333aa;opacity:0;animation:seo-edge 8s ease infinite}
.seo-l:after{right:0}.seo-r:after{left:0}
.seo-code{position:absolute;left:50%;top:1%;width:56%;height:72%;translate:-50% 0;background:#0b0d10;border:1px solid #ffffff1a;border-radius:1.6cqi;overflow:hidden;color:#c9d1d9;box-shadow:0 2cqi 6cqi -2cqi #0009;animation:seo-code 8s ease infinite}
.seo-bar{display:flex;align-items:center;gap:.9cqi;padding:1.4cqi 2cqi;border-bottom:1px solid #ffffff14;font:2.1cqi/1 'DejaVu Sans Mono',monospace;color:#8b949e}
.seo-bar i{width:1.5cqi;height:1.5cqi;border-radius:50%;background:#ff5f57}.seo-bar i:nth-child(2){background:#febc2e}.seo-bar i:nth-child(3){background:#28c840}
.seo-bar span{margin-left:1.2cqi}
.seo-code pre{margin:0;padding:1.6cqi 2.4cqi;font:1.8cqi/1.48 'DejaVu Sans Mono',monospace;white-space:pre}
.seo-code .t{color:#7ee787}.seo-code .a{color:#79c0ff}.seo-code .s{color:#a5d6ff}.seo-code .c{color:#8b949e}
.seo-caret{display:inline-block;width:1.1cqi;height:2.2cqi;margin-left:.4cqi;vertical-align:-.3cqi;background:#f23333;animation:seo-caret 1s steps(2) infinite}
@keyframes seo-l{0%,14%{transform:none}28%,76%{transform:translateX(-52%)}90%,100%{transform:none}}
@keyframes seo-r{0%,14%{transform:none}28%,76%{transform:translateX(52%)}90%,100%{transform:none}}
@keyframes seo-edge{0%,16%{opacity:0}28%,74%{opacity:1}88%,100%{opacity:0}}
@keyframes seo-code{0%,14%{scale:.94;opacity:.4}30%,76%{scale:1;opacity:1}90%,100%{scale:.94;opacity:.4}}
@keyframes seo-caret{to{visibility:hidden}}

.cta-visual{padding:20px 22px 8px}
.cta-site{position:relative;width:100%;max-width:290px;aspect-ratio:16/10;container-type:inline-size;background:#fff;border-radius:2.6cqi;box-shadow:0 18px 34px -22px #0007,0 0 0 1px #0000000d;overflow:hidden;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
.cta-chrome{position:absolute;inset:0 0 auto;height:11%;display:flex;align-items:center;gap:1.4cqi;padding:0 3.5cqi;background:#f1eeeb}
.cta-chrome i{width:2cqi;height:2cqi;border-radius:50%;background:#d6d0ca}
.cta-chrome span{margin-left:3cqi;width:40%;height:4.4cqi;border-radius:9cqi;background:#fff}
.cta-logo,.cta-line,.cta-btn{position:absolute;border-radius:1.4cqi}
.cta-logo{left:6%;top:19%;width:16%;height:6%;background:#1a1a1a}
.cta-line{left:6%;background:#ece7e2}.cta-line.l1{top:35%;width:62%;height:7%;background:#2a2a2a}.cta-line.l2{top:45%;width:44%;height:7%;background:#2a2a2a}.cta-line.l3{top:56%;width:52%;height:3.6%}
.cta-btn{display:grid;place-items:center;font-size:4.1cqi;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.cta-book{right:6%;top:17%;width:24%;height:10%;background:#1a1a1a;color:#fff;font-size:3.6cqi;animation:cta-hit-book 8s ease infinite}
.cta-quote{left:6%;top:68%;width:36%;height:13%;background:#703035;color:#fff;animation:cta-hit-quote 8s ease infinite}
.cta-reserve{left:45%;top:68%;width:26%;height:13%;box-shadow:inset 0 0 0 .35cqi #1a1a1a;color:#1a1a1a;animation:cta-hit-reserve 8s ease infinite}
.cta-cursor{position:absolute;z-index:2;width:8cqi;left:86%;top:84%;translate:-21% -12%;fill:#1a1a1a;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 .8cqi 1cqi #0005);animation:cta-cursor 8s cubic-bezier(.45,0,.25,1) infinite}
@keyframes cta-cursor{0%{left:86%;top:84%}12%{left:84%;top:23%;scale:1}14%{scale:.8}16%{scale:1}34%{left:25%;top:76%;scale:1}36%{scale:.8}38%{scale:1}56%{left:59%;top:76%;scale:1}58%{scale:.8}60%{scale:1}80%,100%{left:86%;top:84%}}
@keyframes cta-hit-book{0%,13%{scale:1;outline:0 solid #f2333300}14%{scale:.93;outline:.4cqi solid #f23333;outline-offset:0}22%{scale:1;outline:.4cqi solid #f2333300;outline-offset:2.4cqi}100%{outline:0 solid #f2333300}}
@keyframes cta-hit-quote{0%,35%{scale:1;outline:0 solid #f2333300}36%{scale:.93;outline:.4cqi solid #f23333;outline-offset:0}44%{scale:1;outline:.4cqi solid #f2333300;outline-offset:2.4cqi}100%{outline:0 solid #f2333300}}
@keyframes cta-hit-reserve{0%,57%{scale:1;outline:0 solid #f2333300}58%{scale:.93;outline:.4cqi solid #f23333;outline-offset:0}66%{scale:1;outline:.4cqi solid #f2333300;outline-offset:2.4cqi}100%{outline:0 solid #f2333300}}

@property --score{syntax:'<integer>';inherits:false;initial-value:0}
.speed-visual{display:flex;align-items:center;justify-content:center;gap:22px;padding:22px 20px 6px}
.speed-gauge{position:relative;width:min(44%,132px);aspect-ratio:1;flex:none;container-type:inline-size}
.speed-gauge svg{display:block;width:100%;rotate:-90deg}
.speed-gauge circle{fill:none;stroke:#0cce6b26;stroke-width:8}
.speed-gauge .speed-arc{stroke:#0cce6b;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;animation:speed-arc 6s cubic-bezier(.3,0,.2,1) infinite}
.speed-score{position:absolute;inset:0;display:grid;place-items:center;font-size:28cqi;font-weight:500;letter-spacing:-.04em;color:#0a8a49;--score:100;counter-reset:s var(--score);animation:speed-score 6s cubic-bezier(.3,0,.2,1) infinite}
.speed-score:after{content:counter(s)}
.speed-meta{display:grid;gap:10px}
.speed-meta .label{color:#686864}
.speed-chips{display:flex;flex-wrap:wrap;gap:6px;max-width:150px}
.speed-chips i{font-style:normal;font-size:11px;padding:5px 9px;border-radius:99px;background:#fff;color:#1a1a1a;box-shadow:0 0 0 1px #0000000f}
@keyframes speed-arc{0%,6%{stroke-dashoffset:100}40%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@keyframes speed-score{0%,6%{--score:0}40%,94%{--score:100}100%{--score:0}}
@media(max-width:600px){.speed-visual{flex-direction:column;gap:10px;padding:14px 10px 0}.speed-chips{justify-content:center;max-width:none}.speed-meta{justify-items:center}.cta-visual{padding:12px 10px 4px}.seo-visual{padding:14px 10px 4px}}
@media(prefers-reduced-motion:reduce){
 .seo-half,.seo-half:after,.seo-code,.seo-caret,.cta-btn,.cta-cursor,.speed-arc,.speed-score{animation:none}
 .seo-l{transform:translateX(-52%)}.seo-r{transform:translateX(52%)}.seo-half:after{opacity:1}
 .cta-cursor{left:25%;top:76%}
}
.service-websites .bento-item:nth-child(4) .bento-visual.device-visual img{max-height:230px}