/* Designing Virtuosity — Portfolio WOW Experience
   Scope: Portfolio page content between the existing Hero and CTA only.
   Hero, site-wide CTA, navigation and footer remain untouched. */

:root{
  --pw-navy:#041126;
  --pw-navy2:#071b3d;
  --pw-cyan:#13d8ee;
  --pw-blue:#199df0;
  --pw-pink:#ff1188;
  --pw-violet:#8b4cff;
  --pw-green:#73e52d;
  --pw-orange:#ff9128;
  --pw-paper:#f7f8fb;
  --pw-ink:#09172f;
  --pw-muted:#647086;
  --pw-spring:cubic-bezier(.16,1.08,.3,1);
}

.portfolio-experience{position:relative;overflow:hidden;background:var(--pw-navy);isolation:isolate}
.portfolio-experience *{box-sizing:border-box}

/* -------------------------------------------------
   CHROMATIC DIGITAL RAIN
-------------------------------------------------- */
.digital-rain{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 94%,transparent 100%);
}
.rain-drop{
  position:absolute;top:-12vh;left:var(--x);
  width:var(--s);height:calc(var(--s)*2.7);
  border-radius:999px 999px 70% 70%;
  background:linear-gradient(to bottom,transparent 0,var(--c) 42%,rgba(255,255,255,.86) 56%,var(--c) 72%,transparent 100%);
  box-shadow:0 0 calc(var(--s)*2.2) color-mix(in srgb,var(--c) 48%,transparent);
  opacity:var(--o);
  filter:blur(var(--b));
  animation:pw-rain var(--d) linear var(--delay) infinite;
}
.rain-drop::after{
  content:"";position:absolute;left:50%;top:78%;transform:translateX(-50%);
  width:calc(var(--s)*2.4);height:calc(var(--s)*.58);
  border:1px solid color-mix(in srgb,var(--c) 68%,transparent);
  border-radius:50%;opacity:.4;
}
.rain-impact{
  position:fixed;z-index:220;pointer-events:none;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--impact-color,var(--pw-cyan));
  transform:translate(-50%,-50%) scale(.2);
  animation:pw-impact .78s var(--pw-spring) forwards;
}

@keyframes pw-rain{
  0%{transform:translate3d(0,-14vh,0) scaleY(.65);opacity:0}
  8%{opacity:var(--o)}
  88%{opacity:var(--o)}
  100%{transform:translate3d(var(--drift),128vh,0) scaleY(1.12);opacity:0}
}
@keyframes pw-impact{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.2)}
  70%{opacity:.35}
  100%{opacity:0;transform:translate(-50%,-50%) scale(9)}
}

/* -------------------------------------------------
   FEATURED WORK — SPATIAL EDITORIAL SHOWCASE
-------------------------------------------------- */
.wow-featured{
  position:relative;z-index:2;
  padding:clamp(105px,12vw,170px) 0;
  color:#fff;
  background:
    radial-gradient(circle at 15% 10%,rgba(19,216,238,.12),transparent 29%),
    radial-gradient(circle at 90% 28%,rgba(255,17,136,.14),transparent 28%),
    linear-gradient(150deg,#031022,#071c40 56%,#041126);
}
.wow-featured::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}
.wow-featured .container{position:relative;z-index:3}
.portfolio-intro-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(330px,.98fr);
  gap:clamp(44px,8vw,110px);align-items:end;margin-bottom:70px;
}
.portfolio-intro-grid .kicker{color:rgba(255,255,255,.55)}
.portfolio-intro-grid .section-title{
  color:#fff;max-width:820px;font-size:clamp(3.7rem,7.3vw,7.7rem);
}
.portfolio-intro-grid .lede{color:rgba(255,255,255,.62);justify-self:end}

.feature-reel{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
  perspective:1400px;
}
.feature-project{
  --fa:var(--pw-cyan);--fb:var(--pw-blue);
  position:relative;grid-column:span 7;min-height:560px;
  overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.12);
  border-radius:34px;color:#fff;background:#071935;text-align:left;
  box-shadow:0 34px 100px rgba(0,0,0,.28);
  cursor:pointer;
  transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .58s var(--pw-spring),border-color .28s,box-shadow .28s;
  isolation:isolate;
}
.feature-project:nth-child(2),
.feature-project:nth-child(3),
.feature-project:nth-child(6),
.feature-project:nth-child(7){grid-column:span 5}
.feature-project:nth-child(3),
.feature-project:nth-child(4),
.feature-project:nth-child(7),
.feature-project:nth-child(8){--fa:var(--pw-pink);--fb:var(--pw-violet)}
.feature-project:nth-child(5){--fa:var(--pw-green);--fb:var(--pw-cyan)}
.feature-project:nth-child(6){--fa:var(--pw-orange);--fb:var(--pw-pink)}
.feature-project:nth-child(7){--fa:var(--pw-violet);--fb:var(--pw-blue)}
.feature-project:nth-child(8){--fa:var(--pw-orange);--fb:var(--pw-green)}
.feature-project::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle at var(--gx,78%) var(--gy,18%),color-mix(in srgb,var(--fa) 28%,transparent),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.012));
  transition:opacity .25s;
}
.feature-project::after{
  content:"";position:absolute;inset:auto 0 0;height:55%;z-index:2;
  background:linear-gradient(to top,rgba(2,10,28,.96),rgba(2,10,28,.4) 52%,transparent);
}
.feature-project:hover{
  --lift:-10px;
  border-color:rgba(255,255,255,.26);
  box-shadow:0 45px 120px rgba(0,0,0,.4),0 0 55px color-mix(in srgb,var(--fa) 10%,transparent);
}
.feature-project:focus-visible{outline:3px solid var(--fa);outline-offset:5px}

.feature-number{
  position:absolute;z-index:4;left:28px;top:24px;
  color:rgba(255,255,255,.34);font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
}
.feature-open{
  position:absolute;z-index:5;right:24px;top:22px;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.18);border-radius:50%;
  display:grid;place-items:center;font-size:1.4rem;color:rgba(255,255,255,.74);
  background:rgba(6,21,47,.28);backdrop-filter:blur(10px);
  transition:transform .38s var(--pw-spring),background .25s;
}
.feature-project:hover .feature-open{transform:translate(5px,-5px) rotate(7deg);background:rgba(255,255,255,.12)}

.feature-copy{
  position:absolute;z-index:5;left:30px;right:30px;bottom:28px;
}
.feature-copy .kicker{color:color-mix(in srgb,var(--fa) 76%,white);margin-bottom:10px}
.feature-copy h3{
  margin:0;max-width:760px;
  font:650 clamp(2.3rem,4.6vw,5rem)/.9 "Space Grotesk",sans-serif;
  letter-spacing:-.055em;
}
.feature-copy p{margin:14px 0 0;max-width:660px;color:rgba(255,255,255,.61);line-height:1.55}

/* Placeholder stage components sized to final artifact types. */
.feature-visual{
  position:absolute;z-index:0;inset:0;overflow:hidden;
  background:
    radial-gradient(circle at 80% 18%,color-mix(in srgb,var(--fa) 26%,transparent),transparent 28%),
    linear-gradient(135deg,#06152f,#0c2c5e 60%,#071531);
}
.visual-grid{
  position:absolute;inset:0;opacity:.26;
  background-image:linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px);
  background-size:34px 34px;
  transform:perspective(700px) rotateX(65deg) translateY(-12%) scale(1.25);
  transform-origin:50% 0;
}
.browser-frame{
  position:absolute;left:50%;top:46%;width:min(76%,700px);aspect-ratio:16/10;
  transform:translate(-50%,-50%) rotate(-3deg);
  border:1px solid rgba(255,255,255,.22);border-radius:18px;
  background:rgba(247,249,253,.94);box-shadow:0 35px 75px rgba(0,0,0,.4);overflow:hidden;
  transition:transform .6s var(--pw-spring);
}
.feature-project:hover .browser-frame{transform:translate(-50%,-52%) rotate(-1deg) scale(1.035)}
.browser-bar{height:30px;background:#e9edf5;border-bottom:1px solid rgba(5,21,47,.1);display:flex;align-items:center;gap:5px;padding:0 11px}
.browser-bar i{display:block;width:6px;height:6px;border-radius:50%;background:#a9b3c4}
.browser-screen{position:relative;height:calc(100% - 30px);padding:22px;background:linear-gradient(145deg,#081b3d,#0d2c5d)}
.browser-screen::before{content:"";display:block;width:58%;height:13%;border-radius:999px;background:linear-gradient(90deg,var(--fa),var(--fb));opacity:.85}
.browser-screen::after{content:"";position:absolute;left:22px;right:22px;bottom:20px;height:50%;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.025))}
.browser-modules{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px}
.browser-modules span{height:30px;border-radius:7px;background:rgba(255,255,255,.09)}

.publication-stack{
  position:absolute;left:50%;top:45%;width:54%;max-width:370px;aspect-ratio:8.5/11;
  transform:translate(-50%,-50%) rotate(-6deg);
  border-radius:7px;background:#f9fafc;box-shadow:30px 30px 0 rgba(255,255,255,.07),0 30px 65px rgba(0,0,0,.42);overflow:hidden;
  transition:transform .6s var(--pw-spring);
}
.feature-project:hover .publication-stack{transform:translate(-50%,-52%) rotate(-2deg) scale(1.035)}
.publication-stack::before{content:"";display:block;height:24%;background:linear-gradient(135deg,var(--fa),var(--fb))}
.publication-lines{padding:24px;display:grid;gap:9px}
.publication-lines span{height:7px;border-radius:999px;background:#d9dfeb}
.publication-lines span:nth-child(1){width:72%;height:13px;background:#24365a}
.publication-lines span:nth-child(2){width:90%}.publication-lines span:nth-child(3){width:84%}.publication-lines span:nth-child(4){width:64%}
.publication-lines::after{content:"";height:90px;margin-top:8px;border-radius:10px;background:linear-gradient(135deg,#edf1f7,#d9e3f0)}

.poster-stack{
  position:absolute;left:50%;top:44%;width:47%;max-width:330px;aspect-ratio:4/5;
  transform:translate(-50%,-50%) rotate(5deg);
  border-radius:8px;background:linear-gradient(145deg,var(--fa),var(--fb));box-shadow:-28px 24px 0 rgba(255,255,255,.06),0 32px 75px rgba(0,0,0,.42);
  overflow:hidden;transition:transform .6s var(--pw-spring);
}
.feature-project:hover .poster-stack{transform:translate(-50%,-51%) rotate(1deg) scale(1.04)}
.poster-stack::before{content:"DESIGN /\nIN MOTION";white-space:pre;position:absolute;left:22px;top:24px;font:700 clamp(2rem,4vw,3.7rem)/.82 "Space Grotesk";letter-spacing:-.06em;color:#fff}
.poster-stack::after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.5);border-radius:50%;right:-65px;bottom:-55px;box-shadow:0 0 0 26px rgba(255,255,255,.08),0 0 0 52px rgba(255,255,255,.04)}

.brand-orbit{
  position:absolute;left:50%;top:43%;width:min(44%,280px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.24);border-radius:50%;
  box-shadow:0 0 0 30px rgba(255,255,255,.03),0 0 0 62px rgba(255,255,255,.018),0 0 70px color-mix(in srgb,var(--fa) 20%,transparent);
  display:grid;place-items:center;
}
.brand-orbit::before{content:"DV";font:700 clamp(3.2rem,7vw,6rem)/1 "Space Grotesk";letter-spacing:-.08em;color:transparent;background:linear-gradient(135deg,var(--fa),var(--fb));-webkit-background-clip:text;background-clip:text}
.brand-orbit::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--fa);box-shadow:0 0 24px var(--fa);animation:pw-orbit 7s linear infinite;transform-origin:0 calc(min(44vw,280px)/2)}

@keyframes pw-orbit{to{transform:rotate(360deg)}}

/* -------------------------------------------------
   WORK INDEX — COMMAND DECK
-------------------------------------------------- */
.work-index-section{
  position:relative;z-index:2;
  padding:clamp(100px,12vw,160px) 0;
  color:var(--pw-ink);background:
    radial-gradient(circle at 85% 12%,rgba(139,76,255,.08),transparent 27%),
    radial-gradient(circle at 10% 86%,rgba(19,216,238,.08),transparent 27%),
    var(--pw-paper);
}
.work-index-head{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(42px,8vw,110px);align-items:end;margin-bottom:46px;
}
.work-index-head .section-title{font-size:clamp(3.6rem,7vw,7.2rem)}
.work-index-head .lede{justify-self:end}

.work-command{
  position:sticky;top:96px;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  margin-bottom:28px;padding:12px 14px 12px 18px;
  border:1px solid rgba(12,43,93,.12);border-radius:999px;
  background:rgba(247,248,251,.83);backdrop-filter:blur(20px);
  box-shadow:0 18px 44px rgba(12,43,93,.1);
}
.work-command-label{font-size:.69rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pw-muted)}
.work-filters{display:flex;flex-wrap:wrap;gap:6px}
.work-filter{
  border:0;border-radius:999px;padding:10px 14px;
  background:transparent;color:var(--pw-muted);
  font-size:.75rem;font-weight:800;text-transform:uppercase;cursor:pointer;
  transition:background .25s,color .25s,transform .28s var(--pw-spring);
}
.work-filter:hover{transform:translateY(-2px);color:var(--pw-ink)}
.work-filter.active{background:var(--pw-navy);color:#fff}

.work-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;
}
.work-item{
  --wa:var(--pw-cyan);--wb:var(--pw-blue);
  position:relative;grid-column:span 4;min-height:310px;
  overflow:hidden;border:1px solid rgba(12,43,93,.1);border-radius:26px;
  padding:0;background:#fff;box-shadow:0 18px 55px rgba(12,43,93,.07);
  color:var(--pw-ink);text-align:left;cursor:pointer;
  transition:transform .48s var(--pw-spring),box-shadow .28s,border-color .28s,opacity .3s;
}
.work-item.wide{grid-column:span 8}
.work-item:nth-child(3n+2){--wa:var(--pw-pink);--wb:var(--pw-violet)}
.work-item:nth-child(3n+3){--wa:var(--pw-green);--wb:var(--pw-cyan)}
.work-item:nth-child(4n){--wa:var(--pw-orange);--wb:var(--pw-pink)}
.work-item:hover{transform:translateY(-9px);border-color:color-mix(in srgb,var(--wa) 30%,rgba(12,43,93,.1));box-shadow:0 28px 78px rgba(12,43,93,.13),0 0 35px color-mix(in srgb,var(--wa) 8%,transparent)}
.work-item.filtered-out{display:none}
.work-item-visual{
  position:absolute;inset:0 0 42%;overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--wa) 24%,transparent),transparent 30%),
    linear-gradient(145deg,#071935,#0b2d5e);
}
.work-item-visual::before{
  content:"";position:absolute;inset:15%;border:1px solid rgba(255,255,255,.18);border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
  transform:rotate(-4deg);transition:transform .46s var(--pw-spring);
}
.work-item:hover .work-item-visual::before{transform:rotate(-1deg) scale(1.035)}
.work-item-visual.doc::before{inset:10% 29%;border-radius:6px;background:#f7f9fc}
.work-item-visual.campaign::before{inset:8% 32%;border:0;border-radius:5px;background:linear-gradient(135deg,var(--wa),var(--wb))}
.work-item-copy{position:absolute;left:22px;right:22px;bottom:20px}
.work-item-copy span{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:color-mix(in srgb,var(--wa) 72%,#213050)}
.work-item-copy h3{margin:8px 0 0;font:620 clamp(1.3rem,2vw,2rem)/1 "Space Grotesk";letter-spacing:-.035em}
.work-item-arrow{position:absolute;right:18px;bottom:17px;font-size:1.25rem;color:#7a879b;transition:transform .3s var(--pw-spring)}
.work-item:hover .work-item-arrow{transform:translate(4px,-4px);color:var(--pw-ink)}

/* -------------------------------------------------
   IDENTITY ARCHIVE — MAGNETIC MOSAIC
-------------------------------------------------- */
.identity-archive{
  position:relative;z-index:2;
  padding:clamp(110px,13vw,180px) 0;
  color:#fff;
  background:
    radial-gradient(circle at 16% 22%,rgba(255,17,136,.15),transparent 28%),
    radial-gradient(circle at 82% 78%,rgba(19,216,238,.12),transparent 27%),
    linear-gradient(150deg,#030d20,#071b3d 58%,#041126);
  overflow:hidden;
}
.identity-archive::before{
  content:"IDENTITY";position:absolute;left:-.04em;top:.02em;
  font:700 clamp(10rem,25vw,25rem)/.78 "Space Grotesk";letter-spacing:-.085em;
  color:#fff;opacity:.018;pointer-events:none;
}
.identity-head{
  position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(42px,8vw,110px);align-items:end;margin-bottom:60px;
}
.identity-head .kicker{color:rgba(255,255,255,.55)}
.identity-head .section-title{color:#fff;font-size:clamp(3.7rem,7vw,7.4rem)}
.identity-head .lede{color:rgba(255,255,255,.6);justify-self:end}

.identity-mosaic{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:150px;gap:15px;
}
.identity-tile{
  --ia:var(--pw-cyan);--ib:var(--pw-blue);
  position:relative;grid-column:span 2;grid-row:span 2;
  overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:26px;
  background:
    radial-gradient(circle at var(--gx,76%) var(--gy,18%),color-mix(in srgb,var(--ia) 18%,transparent),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  color:#fff;text-align:left;cursor:pointer;backdrop-filter:blur(12px);
  box-shadow:0 20px 60px rgba(0,0,0,.16);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--mx,0),var(--my,0));
  transition:transform .48s var(--pw-spring),border-color .28s,box-shadow .28s;
}
.identity-tile:nth-child(2){grid-column:span 3;--ia:var(--pw-pink);--ib:var(--pw-violet)}
.identity-tile:nth-child(3){grid-column:span 2;grid-row:span 3;--ia:var(--pw-green);--ib:var(--pw-cyan)}
.identity-tile:nth-child(4){grid-column:span 3;--ia:var(--pw-orange);--ib:var(--pw-pink)}
.identity-tile:nth-child(5){grid-column:span 3;--ia:var(--pw-violet);--ib:var(--pw-blue)}
.identity-tile:nth-child(6){grid-column:span 2;--ia:var(--pw-cyan);--ib:var(--pw-green)}
.identity-tile:nth-child(7){grid-column:span 3;--ia:var(--pw-pink);--ib:var(--pw-orange)}
.identity-tile:nth-child(8){grid-column:span 2;--ia:var(--pw-blue);--ib:var(--pw-violet)}
.identity-tile:nth-child(9){grid-column:span 3;--ia:var(--pw-green);--ib:var(--pw-orange)}
.identity-tile:nth-child(10){grid-column:span 2;--ia:var(--pw-pink);--ib:var(--pw-cyan)}
.identity-tile:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--mx,0),calc(var(--my,0) - 9px)) scale(1.015);
  border-color:rgba(255,255,255,.24);box-shadow:0 32px 86px rgba(0,0,0,.32),0 0 34px color-mix(in srgb,var(--ia) 10%,transparent);
}
.identity-mark{
  position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);
  font:700 clamp(2.5rem,5vw,5.7rem)/1 "Space Grotesk";letter-spacing:-.075em;
  color:transparent;background:linear-gradient(135deg,var(--ia),var(--ib));-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.26));
}
.identity-caption{position:absolute;left:20px;right:20px;bottom:18px}
.identity-caption strong{display:block;font:600 1rem/1.1 "Space Grotesk";letter-spacing:-.02em}
.identity-caption span{display:block;margin-top:7px;color:rgba(255,255,255,.45);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.identity-arrow{position:absolute;right:16px;top:14px;color:rgba(255,255,255,.32);font-size:1.25rem;transition:transform .3s var(--pw-spring),color .25s}
.identity-tile:hover .identity-arrow{transform:translate(4px,-4px);color:#fff}

/* -------------------------------------------------
   DESIGN RANGE — SIGNAL BAND
-------------------------------------------------- */
.design-range{
  position:relative;z-index:2;
  overflow:hidden;padding:clamp(88px,10vw,130px) 0;
  color:var(--pw-ink);
  background:linear-gradient(110deg,#14cfe6 0%,#1cc9a6 24%,#79d828 43%,#ff9828 64%,#ff168b 82%,#9d34e8 100%);
}
.design-range::before,
.design-range::after{
  content:"";position:absolute;border:1px solid rgba(255,255,255,.36);border-radius:50%;pointer-events:none
}
.design-range::before{width:320px;height:320px;right:-70px;top:-160px}
.design-range::after{width:160px;height:160px;left:8%;bottom:-95px}
.range-head{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end}
.range-head .section-title{font-size:clamp(3.2rem,6.2vw,6.2rem);color:#06152f}
.range-head p{margin:0;max-width:670px;justify-self:end;font-size:clamp(1rem,1.45vw,1.18rem);line-height:1.72;color:rgba(6,21,47,.76);font-weight:650}
.range-marquee{position:relative;z-index:2;margin-top:48px;overflow:hidden;border-block:1px solid rgba(6,21,47,.22);background:rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.range-track{width:max-content;display:flex;gap:34px;padding:20px 0;animation:pw-range 24s linear infinite;font-size:.76rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#06152f}
.range-track span::after{content:"•";margin-left:34px;color:rgba(6,21,47,.45)}
@keyframes pw-range{to{transform:translateX(-50%)}}

/* -------------------------------------------------
   CASE STUDY COCKPIT MODAL
-------------------------------------------------- */
.case-modal{
  position:fixed;inset:0;z-index:300;display:none;overflow-y:auto;
  padding:20px;background:rgba(1,8,22,.84);backdrop-filter:blur(20px);
}
.case-modal.open{display:block}
.case-shell{
  width:min(1120px,100%);margin:58px auto 24px;border:1px solid rgba(255,255,255,.13);border-radius:34px;
  overflow:hidden;color:#fff;background:#06152f;box-shadow:0 40px 120px rgba(0,0,0,.48);
}
.case-top{
  position:relative;min-height:390px;padding:38px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  background:
    radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--ca,var(--pw-cyan)) 28%,transparent),transparent 28%),
    linear-gradient(145deg,#071a3a,#0b2d5f);
}
.case-top::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:36px 36px;opacity:.35}
.case-top>*{position:relative;z-index:2}
.case-level{width:max-content;padding:8px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:rgba(255,255,255,.62);font-size:.67rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.case-top h2{margin:16px 0 0;max-width:870px;font:650 clamp(3.2rem,7vw,7.2rem)/.88 "Space Grotesk";letter-spacing:-.065em}
.case-discipline{margin-top:15px;color:color-mix(in srgb,var(--ca,var(--pw-cyan)) 72%,white);font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.case-close{position:fixed;right:30px;top:26px;z-index:320;width:50px;height:50px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(6,21,47,.68);color:#fff;font-size:1.5rem;cursor:pointer}
.case-body{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;padding:44px}
.case-meta{display:grid;gap:18px;align-content:start}
.case-meta-block{padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035)}
.case-meta-block strong{display:block;margin-bottom:7px;color:rgba(255,255,255,.42);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase}
.case-meta-block span{color:rgba(255,255,255,.82);line-height:1.55}
.case-copy h3{margin:0 0 10px;font:600 1.4rem "Space Grotesk"}
.case-copy > p{margin:0 0 28px;color:rgba(255,255,255,.62);line-height:1.78}
.case-story-heading{margin-top:4px!important}
.case-story{display:grid;gap:0;margin-top:8px}
.case-story-block{padding:0 0 24px}
.case-story-block + .case-story-block{padding-top:22px;border-top:1px solid rgba(255,255,255,.09)}
.case-story-block h4{
  margin:0 0 9px;
  font:700 .88rem/1.2 "Space Grotesk";
  letter-spacing:.04em;
  color:rgba(255,255,255,.9);
}
.case-story-block p{
  margin:0;
  color:rgba(255,255,255,.62);
  line-height:1.78;
}
.case-story-solution{
  margin-top:4px;
  padding-top:24px!important;
  border-top:1px solid color-mix(in srgb,var(--ca,var(--pw-cyan)) 58%,rgba(255,255,255,.12))!important;
}
.case-story-solution h4{
  color:#fff;
  font-weight:800;
}
.case-story-solution p{color:rgba(255,255,255,.78)}
.case-story-solution::before{
  content:"";
  display:block;
  width:52px;
  height:2px;
  margin:-25px 0 22px;
  background:var(--ca,var(--pw-cyan));
  box-shadow:0 0 18px color-mix(in srgb,var(--ca,var(--pw-cyan)) 45%,transparent);
}
.case-gallery{
  margin:10px 0 30px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.09);
}
.case-gallery[hidden]{display:none}
.case-gallery-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.case-gallery-head h3{margin:0!important}
.case-gallery-head span{
  color:rgba(255,255,255,.4);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.case-gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.case-gallery-item{
  margin:0;
  overflow:hidden;
  min-height:180px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.case-gallery-item:first-child:nth-last-child(1){grid-column:1/-1}
.case-gallery-item img{
  display:block;
  width:100%;
  height:100%;
  min-height:180px;
  max-height:430px;
  object-fit:cover;
}
.case-copy .case-note{margin-top:8px;padding:18px;border-left:2px solid var(--ca,var(--pw-cyan));background:rgba(255,255,255,.035);border-radius:0 14px 14px 0}
.case-link{display:none;width:max-content;margin-top:8px;padding:12px 17px;border-radius:999px;background:#fff;color:#06152f;font-weight:800}
.case-link.visible{display:inline-flex;align-items:center;gap:10px}

/* Reveal staging */
.feature-project.reveal:nth-child(odd){transform:translate3d(-70px,60px,0) rotate(-1deg)}
.feature-project.reveal:nth-child(even){transform:translate3d(70px,60px,0) rotate(1deg)}
.feature-project.reveal.visible{transform:none;transition-duration:.95s}
.work-item.reveal{transform:translateY(38px) scale(.98)}
.identity-tile.reveal:nth-child(3n+1){transform:translate(-40px,45px) rotate(-1deg)}
.identity-tile.reveal:nth-child(3n+2){transform:translateY(60px) scale(.97)}
.identity-tile.reveal:nth-child(3n){transform:translate(40px,45px) rotate(1deg)}
.identity-tile.reveal.visible{transform:none;transition-duration:.9s}

/* Responsive */
@media(max-width:980px){
  .portfolio-intro-grid,.work-index-head,.identity-head,.range-head{grid-template-columns:1fr}
  .portfolio-intro-grid .lede,.work-index-head .lede,.identity-head .lede,.range-head p{justify-self:start}
  .feature-project,
  .feature-project:nth-child(2),
  .feature-project:nth-child(3),
  .feature-project:nth-child(6),
  .feature-project:nth-child(7){grid-column:span 12}
  .work-item,.work-item.wide{grid-column:span 6}
  .work-command{position:relative;top:auto;border-radius:28px;align-items:flex-start;flex-direction:column}
  .identity-mosaic{grid-template-columns:repeat(6,1fr);grid-auto-rows:140px}
  .identity-tile,
  .identity-tile:nth-child(2),
  .identity-tile:nth-child(3),
  .identity-tile:nth-child(4),
  .identity-tile:nth-child(5),
  .identity-tile:nth-child(6),
  .identity-tile:nth-child(7),
  .identity-tile:nth-child(8),
  .identity-tile:nth-child(9),
  .identity-tile:nth-child(10){grid-column:span 3;grid-row:span 2}
  .case-body{grid-template-columns:1fr}
}
@media(max-width:680px){
  .portfolio-intro-grid .section-title,.work-index-head .section-title,.identity-head .section-title,.range-head .section-title{font-size:clamp(3rem,13vw,5.2rem)}
  .feature-project{min-height:500px;border-radius:26px}
  .feature-copy{left:22px;right:22px;bottom:22px}
  .feature-copy h3{font-size:clamp(2.2rem,11vw,3.8rem)}
  .browser-frame{width:86%}.publication-stack{width:62%}.poster-stack{width:58%}.brand-orbit{width:54%}
  .work-item,.work-item.wide{grid-column:span 12}
  .work-filters{gap:4px}.work-filter{padding:9px 11px}
  .identity-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:160px}
  .identity-tile,
  .identity-tile:nth-child(2),
  .identity-tile:nth-child(3),
  .identity-tile:nth-child(4),
  .identity-tile:nth-child(5),
  .identity-tile:nth-child(6),
  .identity-tile:nth-child(7),
  .identity-tile:nth-child(8),
  .identity-tile:nth-child(9),
  .identity-tile:nth-child(10){grid-column:span 1;grid-row:span 2}
  .case-modal{padding:7px}.case-shell{margin:58px auto 8px;border-radius:24px}.case-body{padding:28px 20px}.case-top{padding:28px 20px;min-height:330px}
  .case-close{right:14px;top:12px}
  .case-gallery-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .rain-drop,.brand-orbit::after,.range-track{animation:none!important}
  .feature-project,.work-item,.identity-tile{transition:none!important}
  .digital-rain{display:none}
}

/* Precision fix: make Chromatic Digital Rain visible without altering page design */
/*
  Root cause: each Portfolio section is an opaque stacking context above .digital-rain,
  so the droplets animate correctly but are painted behind the section backgrounds.
  This patch lifts only the rain above section backgrounds and keeps all actual content
  above the rain.
*/
.digital-rain{
  z-index:1!important;
}
.portfolio-experience > .wow-featured,
.portfolio-experience > .work-index-section,
.portfolio-experience > .identity-archive,
.portfolio-experience > .design-range{
  z-index:auto!important;
}
.wow-featured > .container,
.work-index-section > .container,
.identity-archive > .container,
.design-range > .container,
.design-range > .range-marquee{
  position:relative;
  z-index:2!important;
}
.rain-drop{
  mix-blend-mode:normal;
  opacity:var(--o);
}

/* 5D Chromatic Rain Field — precision enhancement of rain overlay only */
.digital-rain.five-d-rain{
  position:fixed!important;
  inset:0!important;
  z-index:120!important;
  overflow:hidden!important;
  pointer-events:none!important;
  opacity:0;
  perspective:1100px;
  transform-style:preserve-3d;
  mix-blend-mode:screen;
  transition:opacity .45s ease;
  mask-image:none!important;
  isolation:isolate;
}
.digital-rain.five-d-rain.is-active{opacity:1}
.digital-rain.five-d-rain::before{
  content:"";
  position:absolute;inset:-12%;
  z-index:8;
  pointer-events:none;
  background:
    radial-gradient(circle 250px at var(--pointer-x,50%) var(--pointer-y,45%),rgba(19,216,238,.11),transparent 48%),
    radial-gradient(circle 180px at calc(var(--pointer-x,50%) + 5%) calc(var(--pointer-y,45%) - 4%),rgba(255,17,136,.075),transparent 55%);
  filter:blur(5px) saturate(1.35);
  opacity:.9;
  transform:translateZ(260px);
}
.digital-rain.five-d-rain::after{
  content:"";
  position:absolute;inset:0;
  z-index:9;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0 42%,rgba(19,216,238,.035) 48%,transparent 54%),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 5px);
  opacity:.4;
  mix-blend-mode:screen;
}
.rain-plane{
  position:absolute;
  inset:-8%;
  overflow:visible;
  transform-style:preserve-3d;
  will-change:transform;
}
.rain-plane--far{
  z-index:1;
  transform:translate3d(var(--far-x,0),var(--far-y,0),-320px) scale(1.12);
  opacity:.56;
  filter:blur(.45px);
}
.rain-plane--mid{
  z-index:3;
  transform:translate3d(var(--mid-x,0),var(--mid-y,0),-70px) scale(1.05);
  opacity:.78;
}
.rain-plane--near{
  z-index:6;
  transform:translate3d(var(--near-x,0),var(--near-y,0),170px) scale(1.03);
  opacity:.98;
}
.digital-rain.five-d-rain .rain-drop{
  top:-20vh;
  left:var(--x);
  width:var(--s);
  height:calc(var(--s)*var(--stretch,3.4));
  border-radius:999px 999px 72% 72%;
  opacity:0;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      color-mix(in srgb,var(--c) 24%,transparent) 18%,
      var(--c) 43%,
      rgba(255,255,255,.98) 54%,
      var(--c) 64%,
      color-mix(in srgb,var(--c) 20%,transparent) 82%,
      transparent 100%);
  border-left:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  border-right:1px solid rgba(255,255,255,.11);
  box-shadow:
    calc(var(--s)*-.7) 0 calc(var(--s)*1.7) color-mix(in srgb,var(--c) 32%,transparent),
    calc(var(--s)*.65) 0 calc(var(--s)*1.5) rgba(255,255,255,.16),
    0 calc(var(--s)*2) calc(var(--s)*3.2) color-mix(in srgb,var(--c) 36%,transparent);
  filter:blur(var(--b)) saturate(1.45);
  transform-origin:center;
  animation:pw-rain-5d var(--d) linear var(--delay) infinite;
  will-change:transform,opacity;
}
.digital-rain.five-d-rain .rain-drop::before{
  content:"";
  position:absolute;
  inset:7% 18%;
  border-radius:inherit;
  background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent 38%,rgba(255,255,255,.08));
  transform:translateX(calc(var(--s)*-.32));
  opacity:.5;
}
.digital-rain.five-d-rain .rain-drop::after{
  content:"";
  position:absolute;
  left:50%;
  top:82%;
  width:calc(var(--s)*3.2);
  height:calc(var(--s)*.72);
  transform:translateX(-50%) scaleX(.5);
  border:1px solid color-mix(in srgb,var(--c) 74%,transparent);
  border-radius:50%;
  box-shadow:0 0 calc(var(--s)*2) color-mix(in srgb,var(--c) 42%,transparent);
  opacity:.3;
}
.rain-plane--far .rain-drop{--stretch:4.4}
.rain-plane--mid .rain-drop{--stretch:3.7}
.rain-plane--near .rain-drop{
  --stretch:3.1;
  backdrop-filter:blur(.4px) saturate(1.15);
  box-shadow:
    calc(var(--s)*-.8) 0 calc(var(--s)*2) color-mix(in srgb,var(--c) 42%,transparent),
    calc(var(--s)*.8) 0 calc(var(--s)*1.8) rgba(255,255,255,.2),
    0 calc(var(--s)*2.3) calc(var(--s)*4) color-mix(in srgb,var(--c) 48%,transparent);
}
.rain-prism{
  position:absolute;
  top:-28vh;
  left:var(--x);
  width:var(--w);
  height:var(--h);
  border-radius:48% 52% 58% 42% / 37% 42% 58% 63%;
  border:1px solid rgba(255,255,255,.21);
  background:
    radial-gradient(circle at 32% 22%,rgba(255,255,255,.32),transparent 12%),
    linear-gradient(145deg,color-mix(in srgb,var(--c) 13%,transparent),rgba(255,255,255,.025) 46%,color-mix(in srgb,var(--c2) 12%,transparent));
  box-shadow:
    -6px 0 18px color-mix(in srgb,var(--c) 18%,transparent),
    7px 0 20px color-mix(in srgb,var(--c2) 16%,transparent),
    inset 0 0 22px rgba(255,255,255,.05);
  backdrop-filter:blur(2.4px) saturate(1.45) contrast(1.08);
  mix-blend-mode:screen;
  opacity:var(--o);
  filter:hue-rotate(var(--hue)) blur(var(--blur));
  animation:pw-prism-fall var(--d) cubic-bezier(.34,.04,.2,.99) var(--delay) infinite;
  will-change:transform,opacity;
}
.rain-prism::before{
  content:"";
  position:absolute;
  inset:10% 16% 54% 22%;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.02));
  filter:blur(2px);
}
.rain-prism::after{
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:-16%;
  height:24%;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
  transform:scaleX(.62);
  opacity:.42;
}
.rain-plane--near .rain-prism{
  filter:hue-rotate(var(--hue)) blur(var(--blur)) drop-shadow(0 16px 28px color-mix(in srgb,var(--c) 18%,transparent));
}
.rain-depth-flare{
  position:absolute;
  z-index:5;
  width:var(--size);
  height:var(--size);
  left:var(--x);
  top:var(--y);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2) 0,color-mix(in srgb,var(--c) 20%,transparent) 14%,transparent 65%);
  filter:blur(var(--blur));
  opacity:var(--o);
  mix-blend-mode:screen;
  animation:pw-flare-drift var(--d) ease-in-out var(--delay) infinite alternate;
}
@keyframes pw-rain-5d{
  0%{transform:translate3d(0,-22vh,var(--z,0)) rotate(var(--tilt)) scale(var(--scale));opacity:0}
  7%{opacity:var(--o)}
  47%{transform:translate3d(calc(var(--drift)*.46),62vh,var(--z,0)) rotate(calc(var(--tilt)*-.25)) scale(var(--scale));opacity:var(--o)}
  88%{opacity:var(--o)}
  100%{transform:translate3d(var(--drift),138vh,var(--z,0)) rotate(calc(var(--tilt)*-1)) scale(var(--scale));opacity:0}
}
@keyframes pw-prism-fall{
  0%{transform:translate3d(0,-30vh,130px) rotate(-8deg) scale(.72);opacity:0}
  10%{opacity:var(--o)}
  50%{transform:translate3d(calc(var(--drift)*.5),55vh,220px) rotate(5deg) scale(1);opacity:var(--o)}
  90%{opacity:var(--o)}
  100%{transform:translate3d(var(--drift),135vh,300px) rotate(-4deg) scale(1.18);opacity:0}
}
@keyframes pw-flare-drift{
  from{transform:translate3d(-10px,-8px,-100px) scale(.8)}
  to{transform:translate3d(16px,18px,180px) scale(1.22)}
}
@media(max-width:680px){
  .digital-rain.five-d-rain{opacity:0!important}
  .digital-rain.five-d-rain.is-active{opacity:.68!important}
  .rain-prism{backdrop-filter:blur(1.2px) saturate(1.25)}
}
@media(prefers-reduced-motion:reduce){
  .digital-rain.five-d-rain{display:none!important}
}

/* 5D performance pass — preserve appearance, restore interaction/scroll headroom */
.digital-rain.five-d-rain--optimized{
  z-index:82!important;
  mix-blend-mode:normal!important;
  contain:layout paint style;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.digital-rain.five-d-rain--optimized::before{
  display:none!important;
}
.digital-rain.five-d-rain--optimized::after{
  opacity:.18!important;
  mix-blend-mode:screen!important;
}
.digital-rain.five-d-rain--optimized:not(.is-active) .rain-plane,
.digital-rain.five-d-rain--optimized:not(.is-active) .rain-drop,
.digital-rain.five-d-rain--optimized:not(.is-active) .rain-prism,
.digital-rain.five-d-rain--optimized:not(.is-active) .rain-depth-flare{
  animation-play-state:paused!important;
}
.digital-rain.five-d-rain--optimized .rain-plane{
  inset:-5%!important;
  filter:none!important;
  contain:paint;
  backface-visibility:hidden;
  transition:transform 110ms linear;
}
.digital-rain.five-d-rain--optimized .rain-drop{
  filter:none!important;
  border-left:0!important;
  border-right:0!important;
  box-shadow:none!important;
  backface-visibility:hidden;
}
.digital-rain.five-d-rain--optimized .rain-plane--near .rain-drop{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 0 calc(var(--s)*2.2) color-mix(in srgb,var(--c) 26%,transparent)!important;
}
.digital-rain.five-d-rain--optimized .rain-plane--far .rain-drop::after,
.digital-rain.five-d-rain--optimized .rain-plane--mid .rain-drop::after{
  display:none!important;
}
.digital-rain.five-d-rain--optimized .rain-prism{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  mix-blend-mode:screen!important;
  box-shadow:
    -4px 0 13px color-mix(in srgb,var(--c) 13%,transparent),
    5px 0 15px color-mix(in srgb,var(--c2) 12%,transparent),
    inset 0 0 14px rgba(255,255,255,.04)!important;
  backface-visibility:hidden;
}
.digital-rain.five-d-rain--optimized .rain-plane--near .rain-prism{
  filter:none!important;
}
.digital-rain.five-d-rain--optimized .rain-depth-flare{
  filter:none!important;
  mix-blend-mode:screen!important;
  background:radial-gradient(circle,rgba(255,255,255,.12) 0,color-mix(in srgb,var(--c) 14%,transparent) 18%,transparent 68%)!important;
}
.rain-cursor-glow{
  position:absolute;
  left:0;top:0;z-index:7;
  width:360px;height:360px;border-radius:50%;
  pointer-events:none;
  opacity:.58;
  background:
    radial-gradient(circle at 42% 42%,rgba(19,216,238,.105),transparent 48%),
    radial-gradient(circle at 62% 60%,rgba(255,17,136,.075),transparent 56%);
  box-shadow:0 0 80px rgba(139,76,255,.035);
  will-change:transform;
  transform:translate3d(-1000px,-1000px,0);
}
@media(max-width:760px){
  .rain-cursor-glow{display:none}
}