/* ==========================================================================
   Sections — work grid (six distinct identities), capabilities, about,
   contact, footer
   ========================================================================== */

.section{position:relative;z-index:1;padding:clamp(96px,13vw,168px) 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:clamp(44px,6vw,84px)}
.h2{font-size:clamp(46px,6.4vw,94px);font-weight:800;letter-spacing:-.07em;line-height:.93;margin-top:22px}
.h2 em{color:var(--blue-soft);font-size:1.08em;letter-spacing:-.01em;line-height:.8}
.section-side{max-width:340px;color:var(--muted);font-size:13px;line-height:1.85}
.section-side p+p{margin-top:14px}
.count{margin-top:18px;color:#8fa3cc}

/* =================== WORK =================== */
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.case{--accent:#8fb0ff;--tilt-x:0deg;--tilt-y:0deg;position:relative;min-height:500px;background:var(--panel);border:1px solid var(--line);overflow:hidden;cursor:pointer;isolation:isolate;transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-style:preserve-3d;transition:transform .7s var(--expo),border-color .5s var(--ease),box-shadow .6s var(--ease);outline-offset:6px;-webkit-tap-highlight-color:transparent}
.case:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.case:focus-visible{outline-color:var(--accent)}
.case::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%);opacity:0;transition:opacity .6s var(--ease)}
.case:hover::before,.case:focus-visible::before{opacity:1}
.case-span-7{grid-column:span 7}
.case-span-5{grid-column:span 5}
.case-media{position:absolute;inset:0;z-index:0;transition:transform 1.2s var(--expo)}
.case:hover .case-media{transform:scale(1.035)}
.case-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(6,7,11,.05) 38%,rgba(6,7,11,.9) 100%)}
.case-top{position:absolute;z-index:4;top:24px;left:26px;right:26px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.case-index{font:500 10px/1 var(--mono);letter-spacing:.14em;color:#c9d3ea}
.case-tag{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.26);padding:8px 10px;background:rgba(6,7,11,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#e4eaf8;white-space:nowrap}
.case-foot{position:absolute;z-index:4;left:26px;right:26px;bottom:24px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.case-title{font-size:clamp(30px,3.3vw,46px);font-weight:800;letter-spacing:-.065em;line-height:.95}
.case-sub{margin-top:12px;font:500 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#b3bccd}
.case-arrow{width:50px;height:50px;flex:none;border:1px solid rgba(255,255,255,.34);border-radius:50%;display:grid;place-items:center;font-size:16px;transition:transform .7s var(--expo),background .4s,border-color .4s,color .4s}
.case:hover .case-arrow,.case:focus-visible .case-arrow{background:var(--accent);border-color:var(--accent);color:#06070b;transform:rotate(45deg)}

/* ---- 01 Object / luxury product: warm bronze, champagne accents ---- */
.case--object{--accent:#e7c99a;background:radial-gradient(ellipse 80% 70% at 50% 38%,#2b2216 0%,#120e08 56%,#07060a 100%)}
.art-object{position:absolute;inset:0;display:grid;place-items:center;perspective:900px}
.product-wrap{position:relative;width:118px;height:176px;transform-style:preserve-3d;transform:translate3d(0,-14px,0) rotateX(var(--rx,-8deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--expo)}
.product{position:absolute;inset:0;transform-style:preserve-3d;animation:productSpin 18s linear infinite;--face:#3d2f1b;--side:#26200f;--top:#ead7a8}
.product i{position:absolute;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pf-front,.pf-back{left:0;top:0;width:118px;height:176px;background:linear-gradient(160deg,color-mix(in srgb,var(--face) 70%,#fff 30%) 0%,var(--face) 42%,color-mix(in srgb,var(--face) 80%,#000 20%) 100%)}
.pf-front{transform:translateZ(59px)}
.pf-back{transform:rotateY(180deg) translateZ(59px)}
.pf-left,.pf-right{left:0;top:0;width:118px;height:176px;background:var(--side)}
.pf-left{transform:rotateY(-90deg) translateZ(59px)}
.pf-right{transform:rotateY(90deg) translateZ(59px)}
.pf-top,.pf-bottom{left:0;top:28px;width:118px;height:118px;background:var(--top)}
.pf-top{transform:rotateX(90deg) translateZ(88px)}
.pf-bottom{background:var(--side);transform:rotateX(-90deg) translateZ(88px)}
@keyframes productSpin{to{transform:rotateY(360deg)}}
.art-note{position:absolute;left:26px;bottom:138px;z-index:3;color:#c9b48a}

/* ---- 02 Signal / data: futuristic teal dashboard ---- */
.case--signal{--accent:#56d6cf;background:#081012}
.art-signal{position:absolute;inset:0;background-image:linear-gradient(rgba(86,214,207,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(86,214,207,.07) 1px,transparent 1px);background-size:38px 38px;background-position:-1px -1px}
.sig-kpi{position:absolute;left:26px;top:88px;z-index:3}
.sig-kpi small{display:block;font:500 10px/1 var(--mono);letter-spacing:.14em;color:#7fd6d1}
.sig-kpi b{display:block;margin-top:10px;font-size:clamp(40px,5vw,66px);font-weight:800;letter-spacing:-.07em;line-height:1;font-variant-numeric:tabular-nums}
.sig-kpi span{display:inline-block;margin-top:10px;font:500 11px/1 var(--mono);color:#56d6cf}
.sig-bars{position:absolute;left:26px;right:26px;bottom:126px;height:150px;z-index:3;display:flex;align-items:flex-end;gap:7px}
.sig-bars i{flex:1;height:var(--h);background:linear-gradient(180deg,#8ff3ec 0%,#2fa7a2 55%,rgba(47,167,162,.25) 100%);transform-origin:bottom;animation:barPulse 3.8s var(--expo) infinite alternate;animation-delay:var(--d,0s);border-radius:3px 3px 0 0}
@keyframes barPulse{from{transform:scaleY(.42)}to{transform:scaleY(1)}}
.sig-live{position:absolute;right:26px;top:94px;z-index:3;font:500 10px/1 var(--mono);letter-spacing:.14em;color:#8ff3ec;display:flex;align-items:center;gap:8px}
.sig-live i{width:6px;height:6px;border-radius:50%;background:#8ff3ec;animation:ping 2s infinite}

/* ---- 03 Form / commerce: light paper card, product configurator ---- */
.case--form{--accent:#2c3f9e;background:var(--paper);border-color:rgba(0,0,0,.08);color:#0b0c10}
.case--form:hover{border-color:rgba(44,63,158,.45)}
.case--form .case-shade{background:linear-gradient(180deg,rgba(235,232,224,0) 40%,rgba(235,232,224,.92) 100%)}
.case--form .case-index{color:#4a5270}
.case--form .case-tag{border-color:rgba(11,12,16,.22);background:rgba(255,255,255,.55);color:#11131a}
.case--form .case-sub{color:#4a5270}
.case--form .case-arrow{border-color:rgba(11,12,16,.3);color:#0b0c10}
.case--form:hover .case-arrow,.case--form:focus-visible .case-arrow{color:#fff}
.case--form .case-title{color:#0b0c10}
.fc-watch{position:absolute;left:50%;top:53%;width:170px;transform:translate3d(-50%,-50%,0) rotate(-6deg);transition:transform 1.2s var(--expo)}
.case--form:hover .fc-watch{transform:translate3d(-50%,-50%,0) rotate(4deg) scale(1.04)}
.fc-watch .w-case{animation:finishCycle 9s steps(1,end) infinite}
.fc-watch .w-strap{animation:strapCycle 9s steps(1,end) infinite}
.fc-chips{position:absolute;left:26px;right:26px;top:88px;z-index:3;display:flex;gap:8px}
.fc-chips span{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border:1px solid rgba(11,12,16,.2);background:rgba(255,255,255,.5)}
@keyframes finishCycle{0%{fill:#e7ebf3}33%{fill:#1b2030}66%{fill:#d4ff52}100%{fill:#e7ebf3}}
@keyframes strapCycle{0%{fill:#b9bfcc}33%{fill:#2a2f3f}66%{fill:#6f9d1c}100%{fill:#b9bfcc}}

/* ---- 04 Play / interaction: acid lime reaction arena ---- */
.case--play{--accent:#c6ff4d;background:#0a0c08}
.art-play{position:absolute;inset:0;background-image:linear-gradient(rgba(198,255,77,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(198,255,77,.05) 1px,transparent 1px);background-size:44px 44px}
.pc-target{position:absolute;left:50%;top:46%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:1px solid rgba(198,255,77,.6);transition:left .5s var(--expo),top .5s var(--expo);display:grid;place-items:center}
.pc-target::before,.pc-target::after{content:"";position:absolute;background:rgba(198,255,77,.5)}
.pc-target::before{left:50%;top:-22px;bottom:-22px;width:1px}
.pc-target::after{top:50%;left:-22px;right:-22px;height:1px}
.pc-target span{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px rgba(198,255,77,.7)}
.pc-hud{position:absolute;left:26px;right:26px;top:88px;z-index:3;display:flex;justify-content:space-between;font:500 10px/1 var(--mono);letter-spacing:.14em;color:#d7ff8f;text-transform:uppercase}
.pc-title{position:absolute;left:26px;top:50%;z-index:3;transform:translateY(-50%);font-size:clamp(60px,8vw,110px);font-weight:800;letter-spacing:-.08em;line-height:.85;color:transparent;-webkit-text-stroke:1px rgba(198,255,77,.35);pointer-events:none}

/* ---- 05 Neural / systems: indigo generative network ---- */
.case--neural{--accent:#7f9fff;background:radial-gradient(ellipse 90% 80% at 50% 45%,#17244f 0%,#0a0e1d 60%,#060810 100%)}
.nc-canvas{position:absolute;inset:0;width:100%;height:100%}
.nc-tag{position:absolute;left:26px;top:88px;z-index:3;font:500 10px/1 var(--mono);letter-spacing:.14em;color:#b5c4ff;text-transform:uppercase}

/* ---- 06 Studio / creative: coral studio card ---- */
.case--studio{--accent:#ff7a59;background:radial-gradient(ellipse 80% 75% at 30% 30%,#2a1812 0%,#130c09 58%,#0a0706 100%)}
.as-aa{position:absolute;left:24px;top:110px;z-index:3;font-size:clamp(120px,15vw,190px);line-height:.8;letter-spacing:-.06em;color:#fff1ea;display:flex;align-items:flex-end;gap:6px}
.as-aa .serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;transition:opacity .7s var(--ease),transform .9s var(--expo)}
.as-aa .sans{font-weight:800;position:absolute;left:0;bottom:0;opacity:0;transform:translate3d(0,10px,0);transition:opacity .7s var(--ease),transform .9s var(--expo);white-space:nowrap}
.case--studio:hover .as-aa .serif,.case--studio:focus-visible .as-aa .serif{opacity:0;transform:translate3d(0,-10px,0)}
.case--studio:hover .as-aa .sans,.case--studio:focus-visible .as-aa .sans{opacity:1;transform:none}
.as-palette{position:absolute;right:26px;top:110px;z-index:3;display:flex;flex-direction:column;gap:6px}
.as-palette i{display:block;width:46px;height:14px;background:var(--c);transition:transform .7s var(--expo)}
.as-palette i:nth-child(2){transition-delay:.04s}
.as-palette i:nth-child(3){transition-delay:.08s}
.as-palette i:nth-child(4){transition-delay:.12s}
.as-palette i:nth-child(5){transition-delay:.16s}
.case--studio:hover .as-palette i{transform:translate3d(-14px,0,0)}

/* =================== CAPABILITIES =================== */
.cap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cap{position:relative;padding:30px 22px 34px;border-right:1px solid var(--line);transition:background .4s var(--ease)}
.cap:last-child{border-right:0}
.cap:hover{background:rgba(19,24,38,.7)}
.cap-num{display:block;transition:color .4s}
.cap h3{font-size:19px;font-weight:700;letter-spacing:-.03em;margin:64px 0 10px}
.cap p{color:var(--muted);font-size:13px;line-height:1.75}
.cap-line{position:absolute;left:22px;right:22px;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--expo)}
.cap:hover .cap-line{transform:scaleX(1)}
.cap:hover .cap-num{color:var(--blue-soft)}

/* =================== ABOUT =================== */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,8vw,120px);align-items:start}
.about-copy{padding-top:clamp(0px,3vw,44px);color:#a8afbd;font-size:15px;line-height:1.9}
.about-copy p+p{margin-top:18px}
.about-copy strong{color:#fff;font-weight:700}
.spec{margin-top:40px;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--ink-2)}
.spec dt{padding-top:2px}
.spec dd{color:var(--ink)}
.about-foot{margin-top:34px;color:#8fa3cc}

/* =================== CONTACT =================== */
.contact{position:relative;z-index:1;padding:clamp(100px,14vw,170px) 0 clamp(80px,10vw,120px);border-top:1px solid var(--line);text-align:center;overflow:hidden}
.contact-inner{position:relative}
.contact-title{font-size:clamp(54px,11vw,140px);font-weight:800;letter-spacing:-.08em;line-height:.9;margin:26px 0 42px}
.contact-title em{color:var(--blue-soft);font-size:1.02em;letter-spacing:-.02em}
.contact-actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.copy-status{min-height:1.5em;margin-top:22px;color:#8ff3ec}
.contact .kicker{justify-content:center}
.contact .kicker::before{display:none}
.contact-bg{position:absolute;left:50%;top:50%;z-index:-1;font:800 clamp(160px,30vw,420px)/1 var(--sans);letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px rgba(143,176,255,.08);white-space:nowrap;pointer-events:none;transform:translate3d(-50%,-50%,0)}

/* =================== FOOTER =================== */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--line-soft);padding:24px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font:500 10px/1.5 var(--mono);letter-spacing:.1em;color:#788195;text-transform:uppercase}
.footer-inner a{text-decoration:none;color:var(--ink-2);transition:color .3s}
.footer-inner a:hover{color:#fff}

/* =================== RESPONSIVE =================== */
@media (max-width:1100px){
  .cap-grid{grid-template-columns:1fr 1fr}
  .cap:nth-child(2){border-right:0}
  .cap:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:980px){
  .section-head{display:block}
  .section-side{margin-top:24px;max-width:520px}
  .case-span-7,.case-span-5{grid-column:span 12}
  .case{min-height:440px}
  .about-grid{grid-template-columns:1fr;gap:0}
  .about-copy{padding-top:28px}
}
@media (max-width:620px){
  .art-note{display:none}
  .work-grid{gap:14px}
  .case{min-height:400px}
  .cap-grid{grid-template-columns:1fr}
  .cap{border-right:0;border-bottom:1px solid var(--line);padding:26px 4px 30px}
  .cap:last-child{border-bottom:0}
  .cap:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .cap h3{margin-top:36px}
  .spec div{grid-template-columns:90px 1fr}
  .as-aa{font-size:118px}
  .as-palette{top:auto;bottom:118px;right:20px;flex-direction:row}
  .as-palette i{width:14px;height:44px}
  .case-tag{font-size:9px}
  .footer-inner{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion: reduce){
  .product,.sig-bars i,.fc-watch .w-case,.fc-watch .w-strap{animation:none!important}
  .product{transform:rotateY(-24deg)}
}