.studio-icon{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.social-icons,.footer-main .social-icons{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.social-icons li,.footer-main .social-icons li{margin:0}
.social-icons a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;transition:background .2s,color .2s}
.social-icons a:hover{background:var(--soft);color:var(--teal)}
.footer-main .social-icons a{border-color:#436268}
.footer-main .social-icons a:hover{background:#214149;color:var(--mint)}
.contact-social{display:block}

.scene-intro{
  position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;gap:clamp(17px,3.7vw,58px);padding:clamp(20px,3.8vw,56px);
  border:1px solid #325158;border-radius:7px;background:radial-gradient(ellipse at 85% 66%,#2f6861,transparent 73%),#1d3847;color:#f1fff8;
}
.inner-intro.scene-intro::after{background:repeating-linear-gradient(135deg,transparent 0 81px,#acffe710 82px 83px,transparent 84px 129px)}
.scene-intro h1{color:#f1fff8;text-wrap:initial}
.scene-intro em,.scene-intro .kicker span{color:var(--mint)}
.scene-intro .kicker,.scene-intro .lead{color:var(--studio-muted)}
.scene-intro .lead{margin-top:clamp(14px,2vw,23px);max-width:510px}
.scene-intro .intro-copy{min-width:0}
.case-heading.scene-intro h1{font-size:clamp(38px,5.1vw,78px)}
.case-heading .case-meta{justify-items:start;margin-top:19px}
.case-heading .case-meta .tags span,.case-heading .case-meta .button{color:#effcf5;border-color:#719796}
.case-heading .case-meta .button:hover{background:#23454a}

.studio-scene{pointer-events:auto}
.scene-depth{min-height:0;display:grid;grid-template-rows:minmax(0,1fr);transform:none;perspective:900px;cursor:grab;touch-action:pan-y}
.home-volume{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;transform-style:preserve-3d;
  transform:rotateX(var(--pitch,0deg)) rotateY(var(--yaw,0deg));transition:transform .36s var(--ease)}
.home-volume .scene-orbits{transform:translateZ(-29px)}
.home-volume .studio-sculpture{width:min(92%,710px);height:100%;min-height:0;max-height:100%;object-fit:contain;animation:home-lift 8s ease-in-out infinite}
@keyframes home-lift{0%,100%{transform:translate3d(0,0,34px)}50%{transform:translate3d(0,-9px,46px) rotate(1deg)}}
.studio-scene .scene-caption{right:clamp(14px,3.5vw,44px);bottom:5%;z-index:3;padding:5px 7px;border-radius:4px;background:#0b232be0}
.studio-scene .scene-caption>span{color:var(--mint)}
.scene-widget{min-width:0;border:1px solid #537674;border-radius:6px;overflow:hidden;background:#254554}
.scene-stage{
  position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:1.74;overflow:hidden;perspective:700px;
  cursor:grab;touch-action:pan-y;background:radial-gradient(ellipse at 50% 54%,#258c794a,transparent 67%),
  linear-gradient(#80d4c216 1px,transparent 1px),linear-gradient(90deg,#80d4c216 1px,transparent 1px),#244652;background-size:auto,24px 24px,24px 24px,auto;background-position:center;
}
.scene-stage:active,.scene-depth:active{cursor:grabbing}
.scene-axis{position:absolute;width:76%;height:63%;border:1px solid #69d8bf5c;border-radius:50%;transform:rotate(-14deg)}
.scene-axis::before,.scene-axis::after{content:"";position:absolute;inset:-7px 10%;border:1px dashed #7df7d641;border-radius:50%;transform:rotate(31deg)}
.scene-axis::after{inset:50% -14% auto;border:0;border-top:1px solid #80e4cf4d;transform:none;border-radius:0}
.scene-volume{
  position:relative;width:61%;aspect-ratio:1.52;transform-style:preserve-3d;
  transform:rotateX(calc(15deg + var(--pitch,0deg))) rotateY(calc(-16deg + var(--yaw,0deg))) rotateZ(-7deg);
  transition:transform .38s var(--ease)
}
.scene-widget.is-dragging .scene-volume,.studio-scene.is-dragging .home-volume{transition:transform .09s linear}
.scene-plane{
  position:absolute;inset:0;display:grid;place-items:center;border:1px solid #c5fff085;border-radius:8px;color:#e4fff6;
  box-shadow:inset 0 0 18px #c9fff132,0 9px 12px #020d1790;backface-visibility:hidden;overflow:hidden;
}
.scene-plane .studio-icon{width:33%;height:55%;max-width:64px;max-height:64px;stroke-width:1.1;filter:drop-shadow(0 0 6px #4defc7)}
.plane-back{transform:translate3d(0,12%,-28px);background:linear-gradient(150deg,#165662d9,#102831e8);font:700 1rem var(--mono);color:#a1d4cb}
.plane-back span{position:absolute;right:9px;bottom:4px}
.plane-middle{transform:translate3d(0,4%,0);background:linear-gradient(130deg,#248c85c2,#1c4e58d9);color:#b1f5e4}
.plane-front{transform:translate3d(0,-4%,34px);background:linear-gradient(150deg,#258b80a6,#122f47e8);border-color:#b3ffe1;box-shadow:inset 0 0 22px #70f8d74d,0 8px 20px #08141c92}
.plane-front img{width:100%;height:100%;object-fit:cover;object-position:top}
.scene-spark{position:absolute;inset:10% auto auto 82%;width:9px;height:9px;border-radius:50%;background:#9affe3;box-shadow:0 0 16px #65ffdc;transform:translateZ(58px);animation:scene-pulse 3.8s ease-in-out infinite}
@keyframes scene-pulse{50%{opacity:.45;box-shadow:0 0 6px #65ffdc}}
.scene-folio .scene-volume{width:66%;aspect-ratio:1.62}
.scene-folio .plane-back{transform:translate3d(10%,8%,-33px) rotateZ(-10deg)}
.scene-folio .plane-middle{transform:translate3d(-10%,3%,0) rotateZ(9deg)}
.scene-folio .plane-front{background:linear-gradient(142deg,#4b817fc9,#133844ee)}
.scene-contact .scene-volume{width:54%;aspect-ratio:1.29}
.scene-contact .plane-front{background:linear-gradient(137deg,#70c2aeb8,#235667e6)}
.scene-contact .plane-middle{transform:translate3d(8%,4%,0) rotateZ(10deg)}
.scene-approach .scene-volume{width:55%;aspect-ratio:1.22}
.scene-approach .plane-back{transform:translate3d(11%,12%,-32px)}
.scene-approach .plane-front{background:linear-gradient(145deg,#1c6c6aaa,#1d3b58ee)}
.scene-case .scene-volume{width:70%;aspect-ratio:1.58}
.scene-case .plane-middle{background:color-mix(in srgb,var(--project-bg,#8af0d6) 48%,#143b43)}
.scene-case .plane-front{border-color:var(--project-bg,#8af0d6)}
.scene-console{
  display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 9px;
  border-top:1px solid #456966;background:#203c48;color:#daf0ed;white-space:nowrap;
  font:700 .59rem/1.2 var(--mono);letter-spacing:.06em
}
.scene-console>span{overflow:hidden;text-overflow:ellipsis}
.scene-tools{display:none;align-items:center;gap:4px;color:#c8eee4}
.has-js .scene-tools{display:flex}
.scene-tools>span{font:700 .54rem/1.2 var(--mono);letter-spacing:.065em;margin-right:4px}
.scene-tools button,.dialog-toolbar button,.dialog-controls button,.chat-head button{
  display:grid;place-items:center;flex:none;width:32px;height:32px;background:#112e37;color:#effff7;border:1px solid #567c79;border-radius:4px
}
.scene-tools button:hover,.dialog-toolbar button:hover,.dialog-controls button:hover,.chat-head button:hover{background:#245252}
.scene-tools .studio-icon{width:15px;height:15px}
.scene-widget button:focus-visible,.studio-scene button:focus-visible{outline-color:var(--mint)}
.hero-copy,.intro-copy{animation:intro-arrival .62s var(--ease) both}
@keyframes intro-arrival{from{transform:translateY(12px);opacity:.42}to{transform:none;opacity:1}}

.mosaic-layout{
  display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(10px,1.4vw,22px);
  align-items:start;margin-top:12px;
}
.mosaic-layout .scene-intro{
  width:auto;margin:0;position:sticky;top:79px;display:flex;flex-direction:column;align-items:stretch;
  justify-content:space-between;padding:clamp(18px,2.3vw,37px);gap:clamp(22px,4.5vh,50px);
}
.mosaic-layout .scene-intro h1{font-size:clamp(36px,4.45vw,75px)}
.mosaic-layout .scene-intro .lead{font-size:clamp(15px,1.28vw,19px);margin-top:15px}
.mosaic-layout .scene-intro .kicker{margin-bottom:clamp(15px,2.2vw,26px)}
.mosaic-content,.mosaic-content.folio-list{min-width:0;padding:0;border:0}
.mosaic-meta{display:flex;justify-content:space-between;gap:10px;padding:12px 0 10px;border-block:1px solid var(--line);color:var(--muted);
  font:700 .65rem/1.2 var(--mono);letter-spacing:.12em}
.mosaic-content .jump-links,.mosaic-content .filters{padding:11px 0 7px}
.mosaic-content .filter-count{margin:6px 0 11px}
.mosaic-content .projects-grid,.service-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:clamp(8px,1.1vw,16px)}
.mosaic-content .projects-grid{row-gap:clamp(11px,1.6vw,23px)}
.mosaic-project,.mosaic-service{position:relative;grid-column:span 5;min-width:0}
.mosaic-project:nth-child(4n+1),.mosaic-project:nth-child(4n+4),.mosaic-service:nth-child(4n+1),.mosaic-service:nth-child(4n+4){grid-column:span 7}
.mosaic-content.is-filtered .mosaic-project{grid-column:span 6}
.mosaic-project>a,.mosaic-service{display:block;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}
.mosaic-project .project-art{
  aspect-ratio:auto;height:clamp(145px,16vw,255px);border-radius:0;display:grid;padding:7% 7% 0;
  background:radial-gradient(ellipse at 50% 18%,color-mix(in srgb,var(--project-bg) 87%,#fff),color-mix(in srgb,var(--project-bg) 66%,#1a2930));
}
.mosaic-project .project-art::before{opacity:.25}
.mosaic-project .browser-mock{transform:translateY(5%) perspective(550px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg));transform-origin:center;transition:transform .25s var(--ease)}
.mosaic-project:hover .browser-mock{transform:translateY(1%) perspective(550px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg)) scale(1.03)}
.mosaic-project .project-caption{min-height:92px;padding:9px 11px;border:0}
.mosaic-project .project-caption h3{font-size:clamp(17px,2vw,30px)}
.mosaic-project .project-kicker{font-size:.57rem;margin-bottom:6px}
.mosaic-project .project-tags{font-size:.71rem;margin-top:6px}
.mosaic-project .round-arrow{width:30px;height:30px}
.mosaic-preview{
  position:absolute;right:7px;top:7px;display:none;place-items:center;width:38px;height:38px;border:1px solid #b4ead580;
  border-radius:4px;background:#0c2630e8;color:#f0fff8;transition:transform .25s var(--ease),background .25s
}
.has-js .mosaic-preview{display:grid}
.mosaic-preview:hover{background:#237261;transform:scale(1.07)}
.mosaic-preview .studio-icon{width:19px;height:19px}
.mosaic-service.service-detail{padding:0;margin:0;scroll-margin-top:7px}
.mosaic-service summary{display:block;list-style:none;cursor:pointer}
.mosaic-service summary::-webkit-details-marker{display:none}
.mosaic-service summary:focus-visible{outline-offset:-3px}
.mosaic-service .service-visual{
  min-height:0;height:clamp(142px,15vw,244px);border-radius:0;perspective:650px;
  background:radial-gradient(ellipse at 55% 45%,#3f8e81,#183e49 66%,#102a39);color:#c9fff0
}
.mosaic-service:nth-child(2) .service-visual{background:radial-gradient(ellipse at 48% 50%,#315978,#162e47 72%);color:#d4e8ff}
.mosaic-service:nth-child(3) .service-visual{background:radial-gradient(ellipse at 55% 48%,#507966,#193944 71%);color:#e0fae6}
.mosaic-service:nth-child(4) .service-visual{background:radial-gradient(ellipse at 45% 40%,#347b76,#182f46 69%);color:#baf7e5}
.mosaic-service .service-visual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(#b7ffed15 1px,transparent 1px),linear-gradient(90deg,#b7ffed15 1px,transparent 1px);background-size:23px 23px;mask-image:radial-gradient(#000,transparent 82%)}
.mosaic-service .service-visual svg{
  width:min(81%,310px);height:94%;z-index:1;transform:translateZ(15px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg));
  transition:transform .3s var(--ease);filter:drop-shadow(0 4px 9px #03202ab0)
}
.mosaic-service summary:hover .service-visual svg{transform:translateZ(26px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg)) scale(1.03)}
.mosaic-service .service-visual>span{top:11px;left:11px;font-size:.61rem;z-index:2}
.service-caption{padding:12px 11px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.service-caption h2{font-size:clamp(18px,2vw,29px);text-wrap:initial}
.service-caption>span{font-size:1.25rem;color:var(--teal);transition:transform .2s;line-height:1}
.mosaic-service[open] .service-caption>span{transform:rotate(45deg)}
.mosaic-service .service-details-copy{padding:2px 11px 13px;border-top:1px solid var(--line);font-size:.85rem;animation:intro-arrival .3s var(--ease)}
.mosaic-service .service-details-copy .lead{font-size:1rem;margin:9px 0}
.mosaic-service .checklist{margin:10px 0}
.mosaic-service .checklist li{padding-block:3px}
.mosaic-service .checklist li::before{top:3px}

.mosaic-dialog{
  max-width:min(890px,calc(100% - 30px));max-height:calc(100dvh - 30px);width:100%;padding:0;overflow:auto;
  border:1px solid #6a9892;border-radius:8px;background:#112b34;color:#effff7
}
.mosaic-dialog::backdrop{background:#05141acc;backdrop-filter:blur(7px)}
.mosaic-dialog[open]{animation:dialog-entry .25s var(--ease) both}
@keyframes dialog-entry{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
.dialog-toolbar,.dialog-footer{display:flex;justify-content:space-between;align-items:center;gap:11px;padding:11px 14px}
.dialog-toolbar>span,.dialog-footer p{color:#afded2;font:700 .65rem var(--mono);letter-spacing:.07em}
.dialog-image{background:#0b202a;display:grid;place-items:center}
.dialog-image img{width:100%;height:auto;max-height:min(58dvh,565px);object-fit:contain}
.dialog-footer h2{font-size:clamp(23px,4vw,48px);text-wrap:initial;margin-top:6px}
.dialog-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.dialog-toolbar button,.dialog-controls button{width:39px;height:39px}
.dialog-controls button:disabled{opacity:.45;cursor:default}
.dialog-controls button .studio-icon,.dialog-toolbar button .studio-icon{width:18px;height:18px}
.dialog-controls .button{white-space:nowrap}
body:has(.mosaic-dialog[open]){overflow:hidden}

.studio-chat{position:fixed;right:max(13px,env(safe-area-inset-right));bottom:max(13px,env(safe-area-inset-bottom));z-index:20;display:grid;justify-items:end;gap:7px}
.chat-launch{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 13px;min-height:45px;border-radius:30px;border:1px solid #a4f7df;
  color:#0c2728;background:var(--mint);box-shadow:0 5px 18px #06191869;font-size:.82rem;font-weight:800;
}
.chat-launch:hover{background:#bcffe9}
.chat-launch .studio-icon{width:20px;height:20px}
.chat-panel{
  display:grid;grid-template-rows:auto minmax(62px,1fr) auto auto;width:min(365px,calc(100vw - 26px));max-height:min(487px,calc(100dvh - 82px));
  border:1px solid #557d75;border-radius:9px;overflow:hidden;background:var(--panel);color:var(--ink);box-shadow:0 8px 38px #031217a0;
  animation:dialog-entry .27s var(--ease) both;
}
.chat-head{background:#244755;color:var(--brand-mist);display:grid;grid-template-columns:33px 1fr 33px;align-items:center;gap:8px;padding:9px}
.chat-avatar{width:33px;height:33px;border:1px solid #77cbba;background:#163c44;display:grid;place-items:center;border-radius:50%;color:var(--mint)}
.chat-avatar .studio-icon,.chat-head button .studio-icon{width:18px;height:18px}
.chat-head h2{font-size:1rem;letter-spacing:-.025em;text-wrap:initial}
.chat-head p{font-size:.69rem;color:#b7d9d4;margin-top:3px}
.chat-log{overflow:auto;padding:9px;min-height:90px;max-height:250px;display:flex;flex-direction:column;gap:6px}
.chat-bubble{padding:7px 9px;border-radius:7px;background:var(--soft);color:var(--ink);font-size:.8rem;max-width:94%;align-self:start;overflow-wrap:anywhere}
.chat-bubble--visitor{align-self:end;background:#83e8c9;color:#0c2728}
.chat-bubble a{font-weight:700;color:var(--teal);text-decoration:underline}
.chat-topics{display:flex;flex-wrap:wrap;gap:4px;padding:4px 8px 6px}
.chat-topics button{padding:4px 6px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font-size:.69rem;font-weight:700}
.chat-topics button:hover{background:var(--soft)}
.chat-form{display:grid;grid-template-columns:1fr 36px;gap:5px;border-top:1px solid var(--line);padding:7px}
.chat-form input{min-width:0;padding:7px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);font-size:16px}
.chat-form button{display:grid;place-items:center;border:0;border-radius:4px;background:#84eccb;color:#0c2728}
.chat-form button .studio-icon{width:18px;height:18px}

@media(max-width:900px){
  .mosaic-layout .scene-intro{padding:15px;gap:19px}
  .mosaic-layout .scene-intro h1{font-size:clamp(31px,4.8vw,57px)}
  .mosaic-layout .scene-console>span{display:none}
  .mosaic-layout .scene-console{justify-content:flex-end}
}
@media(max-width:720px){
  .scene-intro{grid-template-columns:1fr;gap:14px;padding:18px}
  .scene-widget{width:100%}
  .scene-stage{aspect-ratio:1.86}
  .scene-console>span{display:block}
  .mosaic-layout{display:block;margin-top:8px}
  .mosaic-layout .scene-intro{position:relative;top:auto;margin-bottom:17px;gap:14px}
  .mosaic-layout .scene-intro h1{font-size:clamp(38px,10vw,64px)}
  .mosaic-layout .scene-console>span{display:block}
  .mosaic-layout .scene-console{justify-content:space-between}
  .mosaic-layout .scene-stage{aspect-ratio:1.95}
  .mosaic-project .project-art{height:clamp(115px,28vw,196px)}
  .mosaic-project .project-caption{min-height:76px;padding:6px;gap:4px}
  .mosaic-project .project-caption h3{font-size:clamp(14px,3.8vw,20px)}
  .mosaic-project .project-kicker{font-size:.48rem;letter-spacing:.025em}
  .mosaic-project .project-tags{font-size:.61rem}
  .mosaic-project .round-arrow{display:none}
  .mosaic-preview{width:34px;height:34px;right:4px;top:4px}
  .mosaic-service .service-visual{height:clamp(104px,26vw,175px)}
  .service-caption{padding:8px 6px}
  .service-caption h2{font-size:clamp(15px,4vw,22px)}
  .mosaic-service[open]{grid-column:1/-1}
  .studio-scene .scene-caption{bottom:2px;right:0;padding:4px}
  .studio-scene .scene-caption>span{display:none}
  .studio-scene .scene-tools button{width:29px;height:29px}
  .dialog-footer{flex-direction:column;align-items:stretch;gap:9px}
}
@media(max-width:380px){.studio-chat{right:8px;bottom:8px}.chat-panel{width:calc(100vw - 16px)}}
@media(prefers-reduced-motion:reduce){.home-volume .studio-sculpture{animation:none;transform:translateZ(34px)}}