.services-showcase-page{background:var(--studio-page);color:var(--studio-ink)}
.services-showcase-page main{overflow:hidden}
.services-map-hero{padding:42px 0 18px;border-bottom:0;background:var(--studio-page)}
.services-map-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:center}
.services-map-copy h1{margin:0;color:var(--studio-blue);font-family:"Barlow Condensed",Arial,sans-serif;font-size:clamp(66px,7.2vw,116px);font-weight:900;letter-spacing:-.035em;line-height:.76;text-transform:uppercase}
.services-map-copy p{max-width:570px;margin:22px 0;color:var(--studio-ink);font-size:18px;font-weight:600;line-height:1.45}
.services-map-copy strong{display:block;font-family:"Barlow Condensed",Arial,sans-serif;font-size:24px;font-weight:900;letter-spacing:.025em;text-transform:uppercase}
.workflow-stage{position:relative;min-height:385px;display:flex;align-items:center;padding:42px 10px}
.workflow-backs{position:absolute;inset:22px 12px 18px 70px;transform:rotate(-5deg)}
.workflow-backs i{position:absolute;inset:0;border:2px solid var(--studio-line);border-radius:16px;background:var(--studio-blue);box-shadow:8px 10px 0 color-mix(in srgb,var(--studio-line) 24%,transparent)}
.workflow-backs i:nth-child(2){transform:translate(85px,18px) rotate(7deg);background:var(--studio-red)}
.workflow-backs i:nth-child(3){transform:translate(160px,3px) rotate(8deg);background:var(--studio-mint)}
.workflow-backs i:nth-child(4){transform:translate(235px,36px) rotate(9deg);background:var(--studio-yellow)}
.workflow-flow{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;align-items:center;margin:0;padding:0;list-style:none}
.workflow-flow:before{content:"";position:absolute;left:9%;right:9%;top:70px;height:5px;background:var(--studio-line);z-index:-1}
.workflow-flow li{min-height:225px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:22px;padding:22px 8px;border:2px solid var(--studio-line);border-radius:13px;background:var(--studio-blue);color:#fff;text-align:center;box-shadow:5px 7px 0 rgba(17,24,32,.24);transform:rotate(-3deg)}
.workflow-flow li:nth-child(2){background:var(--studio-red);transform:rotate(2deg)}
.workflow-flow li:nth-child(3){background:var(--studio-mint);color:#111820;transform:rotate(-2deg)}
.workflow-flow li:nth-child(4){background:var(--studio-yellow);color:#111820;transform:rotate(2deg)}
.workflow-flow li:nth-child(5){background:var(--studio-blue);transform:rotate(3deg)}
.workflow-flow span{width:72px;height:72px;display:grid;place-items:center;border:2px solid #17233a;border-radius:50%;background:var(--studio-cream);color:#17233a;font-family:"Barlow Condensed",Arial,sans-serif;font-size:23px;font-weight:900}
.workflow-flow b{font-family:"Barlow Condensed",Arial,sans-serif;font-size:25px;line-height:.9;text-transform:uppercase}

.service-builder{padding:0 0 72px;background:var(--studio-page)}
.service-builder-shell{border:2px solid var(--studio-line);border-radius:12px;padding:17px 17px 18px;background:color-mix(in srgb,var(--studio-page) 94%,white);box-shadow:0 18px 38px rgba(17,24,32,.08)}
.service-builder-shell>h2{margin:0 0 13px 8px;font-family:"Barlow Condensed",Arial,sans-serif;font-size:25px;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
.service-tab-scroller{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end;overflow:visible}
.service-tab{min-height:72px;display:flex;align-items:center;justify-content:flex-start;gap:13px;padding:12px 14px;border:2px solid var(--studio-line);border-bottom:0;border-radius:9px 9px 0 0;background:var(--studio-cream);color:#17233a;font-family:"Barlow Condensed",Arial,sans-serif;font-size:19px;font-weight:900;line-height:1;text-align:left;text-transform:uppercase;cursor:pointer;transition:transform .18s ease,background .18s ease}
.service-tab span{flex:0 0 auto;min-width:40px;height:40px;display:grid;place-items:center;border:2px solid currentColor;border-radius:7px;font-size:12px;letter-spacing:.05em}
.service-tab:hover{transform:translateY(-4px)}
.service-tab:focus-visible{outline:4px solid var(--studio-yellow);outline-offset:2px}
.service-tab.website.is-active{background:var(--studio-red);color:#fff}
.service-tab.software.is-active{background:var(--studio-mint)}
.service-tab.marketing.is-active{background:var(--studio-yellow)}
.service-tab.brand.is-active{background:#d7e1f0}
.service-tab.automation.is-active{background:var(--studio-blue);color:#fff}
.service-tab.consulting.is-active{background:#087f73;color:#fff}
.services-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.service-panels{border:2px solid var(--studio-line);border-radius:10px;background:var(--studio-cream);overflow:hidden}
.service-panel{display:none;grid-template-columns:.95fr 1.25fr;gap:34px;align-items:center;min-height:425px;padding:26px}
.service-panel.is-active{display:grid;animation:servicePanelIn .38s cubic-bezier(.22,.8,.24,1)}
.service-panel[hidden]{display:none}
@keyframes servicePanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.service-panel-media{min-height:355px;display:grid;place-items:center;position:relative}
.service-panel-media:before{display:none}
.service-panel-media img{position:relative;z-index:1;display:block;width:100%;max-height:390px;object-fit:contain;filter:drop-shadow(8px 12px 8px rgba(17,24,32,.2))}
.service-panel-content h3{margin:0;font-family:"Barlow Condensed",Arial,sans-serif;font-size:36px;font-weight:900;letter-spacing:.01em;line-height:1;text-transform:uppercase}
.service-panel-content>p{max-width:720px;margin:7px 0 25px;font-size:16px;line-height:1.45}
.service-points{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:27px}
.service-points section{min-width:0;padding:0 20px;border-left:1px solid color-mix(in srgb,var(--studio-line) 55%,transparent)}
.service-points section:first-child{padding-left:0;border-left:0}
.service-points h4{margin:0 0 13px;font-family:"Barlow Condensed",Arial,sans-serif;font-size:19px;font-weight:900;text-transform:uppercase}
.service-points ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.service-points li{position:relative;padding-left:15px;font-size:13px;font-weight:600;line-height:1.25}
.service-points li:before{content:"";position:absolute;left:0;top:.48em;width:5px;height:5px;border-radius:50%;background:var(--studio-red)}
.service-panel-action{display:flex;align-items:center;gap:24px}
.service-panel-action button{min-height:54px;padding:0 25px;border:2px solid var(--studio-line);border-radius:6px;background:var(--studio-red);color:#fff;font-family:"Barlow Condensed",Arial,sans-serif;font-size:20px;font-weight:900;text-transform:uppercase;cursor:pointer;box-shadow:3px 4px 0 #17233a;transition:transform .16s ease,box-shadow .16s ease}
.service-panel-action button:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 #17233a}
.service-panel-action button.is-added{background:#39c86c;color:#0a2a17;box-shadow:3px 4px 0 #14552d}
.service-panel-action p{margin:0;font-size:13px;font-weight:650;line-height:1.4}
.services-next-step{padding:65px 0;border-top:2px solid var(--studio-line);background:var(--studio-yellow);color:#111820}
.services-next-step .home-wrap{display:grid;grid-template-columns:1fr auto;gap:45px;align-items:end}
.services-next-step small{font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.services-next-step h2{margin:8px 0 9px;font-family:"Barlow Condensed",Arial,sans-serif;font-size:56px;font-weight:900;line-height:.9;text-transform:uppercase}
.services-next-step p{max-width:680px;margin:0;font-size:15px;line-height:1.5}
.services-next-step a{min-width:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:70px;padding:12px 22px;border:2px solid #17233a;border-radius:7px;background:var(--studio-red);box-shadow:5px 6px 0 #17233a;color:#fff;font-family:"Barlow Condensed",Arial,sans-serif;font-size:21px;font-weight:900;text-align:center;text-transform:uppercase}
.services-next-step a span{font-family:Inter,Arial,sans-serif;font-size:9px;letter-spacing:.08em}

html[data-vibe="blueprint"] .services-showcase-page .service-builder-shell,html[data-vibe="blueprint"] .services-showcase-page .service-panels{background:#edf4f7}
html[data-vibe="night"] .services-showcase-page .services-map-copy h1,html[data-vibe="night"] .services-showcase-page .services-map-copy p,html[data-vibe="night"] .services-showcase-page .services-map-copy strong,html[data-vibe="night"] .services-showcase-page .service-builder-shell>h2,html[data-vibe="night"] .services-showcase-page .service-panel-content{color:#fffdf7}
html[data-vibe="night"] .services-showcase-page .service-builder-shell{background:#111820}
html[data-vibe="night"] .services-showcase-page .service-panels{background:#182337}
html[data-vibe="night"] .services-showcase-page .service-panel-media img{filter:drop-shadow(8px 12px 8px rgba(0,0,0,.45))}
html[data-vibe="night"] .services-showcase-page .workflow-flow span{background:#fffdf7;color:#17233a;border-color:#17233a}
html[data-vibe="night"] .services-showcase-page .service-tab:not(.is-active){background:#202a39;color:#fffdf7}

@media(max-width:1080px){
  .services-map-grid{grid-template-columns:.9fr 1.1fr;gap:30px}.workflow-stage{min-height:340px}.workflow-flow li{min-height:190px}.workflow-flow span{width:58px;height:58px}.workflow-flow b{font-size:21px}.service-tab{font-size:16px;gap:8px;padding:10px}.service-tab span{min-width:34px;height:34px}.service-panel{grid-template-columns:.8fr 1.2fr;gap:22px}.service-panel-media{min-height:300px}.service-points section{padding:0 13px}
}
@media(max-width:820px){
  .services-map-hero{padding-top:34px}.services-map-grid{grid-template-columns:1fr}.services-map-copy h1{font-size:clamp(64px,15vw,92px)}.services-map-copy p{font-size:16px}.workflow-stage{min-height:0;padding:18px 0 8px;overflow:hidden}.workflow-backs{display:none}.workflow-flow{width:100%;overflow:visible;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:8px 0 14px;scroll-snap-type:none}.workflow-flow:before{display:none}.workflow-flow li,.workflow-flow li:nth-child(n){min-width:0;min-height:154px;gap:15px;padding:13px 3px;border-radius:9px;scroll-snap-align:none;transform:none}.workflow-flow span{width:40px;height:40px;font-size:17px}.workflow-flow b{font-size:15px;line-height:.9}
  .service-builder{padding-bottom:54px}.service-builder .home-wrap{width:100%}.service-builder-shell{border-left:0;border-right:0;border-radius:0;padding:18px 0}.service-builder-shell>h2{padding:0 18px;margin-left:0;font-size:23px}.service-tab-scroller{display:flex;overflow-x:auto;gap:8px;padding:5px 18px 0;scroll-snap-type:x mandatory;scroll-padding-left:18px}.service-tab{flex:0 0 min(76vw,285px);scroll-snap-align:start;min-height:70px}.service-panel{grid-template-columns:1fr;padding:22px 18px 26px;gap:10px}.service-panel-media{min-height:260px}.service-panel-media img{max-height:330px}.service-panel-content h3{font-size:33px}.service-points{grid-template-columns:1fr;margin-top:22px}.service-points section,.service-points section:first-child{padding:15px 0;border-left:0;border-top:1px solid color-mix(in srgb,var(--studio-line) 45%,transparent)}.service-points section:first-child{border-top:0;padding-top:0}.service-points ul{grid-template-columns:1fr 1fr}.service-panel-action{align-items:stretch;flex-direction:column}.service-panel-action button{width:100%}.service-panel-action p{text-align:center}.services-next-step .home-wrap{grid-template-columns:1fr;align-items:start}.services-next-step a{width:100%}
}
@media(max-width:520px){
  .services-map-copy h1{font-size:63px}.services-map-copy strong{font-size:21px}.workflow-flow li,.workflow-flow li:nth-child(n){min-height:132px;gap:12px;padding:11px 2px}.workflow-flow span{width:34px;height:34px;font-size:14px}.workflow-flow b{font-size:13px}.service-builder-shell>h2{font-size:21px}.service-panel-content h3{font-size:30px}.service-panel-content>p{font-size:14px}.service-points ul{grid-template-columns:1fr}.services-next-step{padding:50px 0}.services-next-step h2{font-size:46px}
}
@media(prefers-reduced-motion:reduce){.service-panel.is-active{animation:none}.service-tab,.service-panel-action button{transition:none}}

@media(max-width:820px){
  .service-builder .home-wrap{width:calc(100% - 24px);margin-inline:auto}
  .service-builder-shell{border:2px solid var(--studio-line);border-radius:12px;padding:15px 10px}
  .service-builder-shell>h2{padding:0 5px}.service-tab-scroller{padding-left:5px;padding-right:5px;scroll-padding-left:5px}.service-tab{flex-basis:min(72vw,270px)}
  .service-panels{margin-inline:0}.service-panel{padding:14px;gap:12px}
  .service-panel-media{width:100%;min-height:0;aspect-ratio:4/3;padding:8px;background:#fff;border:2px solid #17233a;border-radius:12px;overflow:hidden}
  .service-panel-media img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;filter:none}.service-panel-content>p{margin-bottom:14px}
}

#service-panel-website .service-panel-media{background:#f7f1e6}
#service-panel-software .service-panel-media{background:#f1e7dc}
#service-panel-marketing .service-panel-media{background:#f3e9df}
#service-panel-brand .service-panel-media{background:#d5c8b8}
#service-panel-automation .service-panel-media{background:#f6ebdd}
#service-panel-consulting .service-panel-media{background:#eee3d5}