/* Group movement lives on wrappers; the existing damped card tilt stays independent. */
.signal-grid{row-gap:22px;isolation:isolate}
.signal-grid>.signal{--rest-y:0px;min-height:136px;grid-template-columns:38px minmax(0,1fr) 38px;gap:14px}
.signal-grid>.signal>span:nth-child(2){display:block;text-align:center;transform:translateY(3px);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.signal-grid>.signal:not(.signal-security){grid-row:2}
.signal-grid>.signal strong{display:block}
.signal-grid>.signal small{display:block;margin-top:6px;line-height:1.5}
.signal-grid>.signal .signal-arrow{justify-self:end}
.signal-grid>.signal-security{grid-column:1 / -1;min-height:108px;padding:24px;border-color:rgba(218,197,255,.36)}
.signal-security strong{font-size:19px;letter-spacing:-.025em}
.signal-security small{font-size:13px}
.signal-grid::after{display:none}
.signal-grid:is(:hover,:focus-within)>.signal>span:nth-child(2){transform:translateY(-3px)}
/* Continuous optical edges replace the stretched, baked rectangular frame. */
.signal-grid>.signal,.signal-grid>.signal:hover,.signal-grid>.signal:focus-visible{background:radial-gradient(ellipse at 18% 0%,#c4a8ff24,transparent 65%),linear-gradient(135deg,#30213eeb,#1d142be8 55%,#39264deb);border:1px solid #c4a6ed52;box-shadow:inset 0 1px 1px #f1e2ff45,inset 0 -2px 3px #ad79e524,0 3px 0 #20142b,0 4px 0 #bf8df02b,0 22px 32px -17px #000c;transition:border-color .7s,box-shadow .7s}
.signal-grid>.signal::before{inset:4px;border:1px solid #d8baff16;background:linear-gradient(165deg,#e1c8ff0c,transparent 26%,transparent 80%,#b68ce714);border-radius:18px}
.signal-grid>.signal::after{left:12%;right:12%;opacity:.42}
.signal-grid>.signal:hover,.signal-grid>.signal:focus-visible{border-color:#dcc1ff85;box-shadow:inset 0 1px 1px #f1e2ff65,inset 0 -2px 3px #ad79e52b,0 3px 0 #20142b,0 4px 0 #bf8df03b,0 28px 40px -19px #000d}
.signal-grid>.service-shelf{opacity:.28;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
/* Feather only the media matte, never the copy, drops or motion control. */
.hero-art-poster,.hero-art-video{-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 46%,#000 57%,transparent 73%);mask-image:radial-gradient(ellipse at 50% 50%,#000 46%,#000 57%,transparent 73%)}
.work{overflow-x:clip}
.work-heading>p{max-width:250px}
.portfolio-cross{position:relative;width:100%;height:auto;min-height:720px;aspect-ratio:1.45;margin-bottom:32px;isolation:isolate}
.portfolio-position{position:absolute;width:34%;left:33%;top:0;transition:translate 1.15s cubic-bezier(.22,1,.36,1);z-index:2}
.portfolio-cross .portfolio-window{position:relative;display:block;width:100%;inset:auto;margin:0;--card-turn:0deg;--card-roll:0deg;--surface-z:2}
.portfolio-cross .portfolio-window img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top}
.portfolio-cross .portfolio-caption{padding:18px 16px;min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:center;position:relative}
.portfolio-cross .portfolio-caption>span:first-child{width:100%}
.portfolio-cross .portfolio-arrow{position:absolute;right:14px;bottom:20px}
.portfolio-cross .portfolio-caption strong{font-size:clamp(22px,2.1vw,29px);line-height:1.15;letter-spacing:-.04em}
.portfolio-cross .portfolio-caption small{font-size:10px;line-height:1.5;letter-spacing:.04em;margin-bottom:7px}
.position-zabalio{top:0;z-index:1;translate:0 56px}
.position-wenspol{left:0;top:29%;translate:14% 0}
.position-domfins{left:66%;top:29%;translate:-14% 0}
.position-banik{top:58%;z-index:3;translate:0 -76px}
.position-wenspol .portfolio-window{--card-turn:5deg;--card-roll:-1.2deg}
.position-domfins .portfolio-window{--card-turn:-5deg;--card-roll:1.2deg}
.portfolio-cross:is(:hover,:focus-within)>.portfolio-position{translate:0 0}
.portfolio-position:focus-within{z-index:4}
.portfolio-cross>.glass-shelf{bottom:0;height:130px;left:-1%;right:-1%;opacity:.55}
.portfolio-cross .portfolio-window:focus-visible{outline:2px solid #e6d4ff;outline-offset:5px}
/* Without hover, each project is always fully visible and directly tappable. */
@media(max-width:1000px),(hover:none),(pointer:coarse){
 .portfolio-cross{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;min-height:0;aspect-ratio:auto;padding-bottom:40px}
 .portfolio-cross>.portfolio-position{position:relative;width:100%;inset:auto;translate:none}
 .portfolio-cross .portfolio-window{--card-turn:0deg;--card-roll:0deg}
 .portfolio-cross .portfolio-caption{min-height:96px}
}
@media(min-width:761px) and (max-width:1100px){
 .signal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .signal-grid>.signal-security{grid-column:auto}
 .signal-grid>.signal:not(.signal-security){grid-row:auto}
 .signal-grid>.signal{min-height:144px;padding:22px 16px}
}
@media(max-width:760px){
 .signal-grid{row-gap:18px}
 .signal-grid>.signal-security{grid-column:auto}
 .signal-grid>.signal:not(.signal-security){grid-row:auto}
 .signal-grid>.signal,.signal-grid>.signal-security{padding:22px 16px;grid-template-columns:30px minmax(0,1fr) 30px;gap:10px;min-height:112px}
 .signal-grid .signal-icon,.signal-grid .signal-arrow{width:30px;height:36px}
 .signal-grid strong,.signal-security strong{font-size:18px}
 .signal-grid small,.signal-security small{font-size:12px}
 .signal-grid::after{inset:-8px;border-radius:25px}
 .portfolio-cross{gap:24px}
}
@media(max-width:580px){
 .portfolio-cross{grid-template-columns:1fr}
 .portfolio-cross .portfolio-caption{min-height:108px}
}
html.motion-disabled .portfolio-position{translate:0 0;transition:none}
html.motion-disabled .signal-grid>.signal>span:nth-child(2){transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
 html:not(.motion-enabled) .portfolio-position{translate:0 0;transition:none}
 html:not(.motion-enabled) .signal-grid>.signal>span:nth-child(2){transform:none;transition:none}
 html:not(.motion-enabled) .signal-grid::after{transform:none;transition:none}
}
@media(max-width:380px){
  .signal-security strong{font-size:18px}
  body:not(.subpage) .hero{min-height:0}
  body:not(.subpage) .hero-copy{padding-top:36px;padding-bottom:0}
  body:not(.subpage) .hero h1{font-size:36px;margin-bottom:20px}
  body:not(.subpage) .hero-copy>p{font-size:15px;line-height:1.6;margin-bottom:22px}
  .hero .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hero .button{font-size:12px;padding:12px 10px;gap:6px;min-height:48px}
  .hero-art{position:relative;top:auto;left:-6%;right:auto;width:112%;height:275px;margin:24px 0 48px}
  .hero-motion-toggle{bottom:14px}
}