:root { --p-red:#e32028; }
.portfolio-shell { width:min(100% - 40px,1240px); margin:auto; }
.portfolio-hero { position:relative; isolation:isolate; display:flex; align-items:center; min-height:min(660px,74vh); overflow:hidden; color:#fff; background:radial-gradient(circle at 72% 35%,rgba(227,32,40,.25),transparent 24%),linear-gradient(130deg,#070707 8%,#121212 52%,#080808); }
.portfolio-hero__grid { position:absolute; inset:0; z-index:-1; opacity:.25; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:68px 68px; mask-image:linear-gradient(90deg,#000,transparent 80%); }
.portfolio-hero__orb { position:absolute; z-index:-1; top:-14%; right:-14%; width:clamp(310px,44vw,680px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%,rgba(248,73,80,.55),rgba(227,32,40,.11) 43%,transparent 70%); filter:blur(8px); animation:p-float 10s ease-in-out infinite; }
.portfolio-hero__content { padding:clamp(80px,10vw,140px) 0 clamp(72px,9vw,116px); }
.portfolio-eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 18px; color:#fa3b43; font-size:.7rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase; }.portfolio-eyebrow i { width:38px; height:2px; background:currentColor; box-shadow:0 0 12px currentColor; }
.portfolio-hero h1,.portfolio-feature h2,.portfolio-work h2,.portfolio-cta h2 { margin:0; font-size:clamp(2.65rem,5.8vw,5.9rem); font-weight:850; line-height:.96; letter-spacing:-.06em; text-wrap:balance; }.portfolio-hero h1 em,.portfolio-feature h2 em,.portfolio-work h2 em,.portfolio-cta h2 em { color:var(--p-red); font-style:normal; }.portfolio-hero h1 span { color:#d0d0d0; }
.portfolio-hero__copy { max-width:610px; margin:28px 0 0; color:#bbb; font-size:clamp(.95rem,1.2vw,1.1rem); line-height:1.75; }.portfolio-hero__meta { display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:26px; color:#9c9c9c; font-size:.77rem; font-weight:650; }.portfolio-hero__meta span:first-child { color:#eee; }.portfolio-hero__meta b { color:var(--p-red); font-size:1.15em; }
.portfolio-button,.portfolio-outline { display:inline-flex; align-items:center; gap:10px; padding:14px 18px; color:#fff; font-size:.88rem; font-weight:800; text-decoration:none; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }.portfolio-button { margin-top:34px; border:1px solid rgba(255,255,255,.15); background:var(--p-red); box-shadow:0 14px 32px rgba(227,32,40,.28); }.portfolio-button:hover { transform:translateY(-3px); background:#f12a33; box-shadow:0 18px 38px rgba(227,32,40,.42); }.portfolio-button svg,.portfolio-outline svg,.portfolio-card svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.portfolio-feature { padding:clamp(74px,9vw,130px) 0; color:#fff; background:#0d0d0d; }.portfolio-feature__layout { display:grid; grid-template-columns:minmax(250px,.78fr) minmax(460px,1.22fr); gap:clamp(38px,7vw,90px); align-items:center; }.portfolio-feature h2,.portfolio-work h2,.portfolio-cta h2 { font-size:clamp(2.05rem,3.8vw,3.85rem); }.portfolio-feature__copy>p:not(.portfolio-eyebrow) { margin:22px 0 0; color:#aaa; font-size:.97rem; line-height:1.76; }.portfolio-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }.portfolio-tags span { padding:7px 10px; border:1px solid #2b2b2b; border-radius:999px; color:#c9c9c9; font-size:.7rem; font-weight:700; }.portfolio-outline { margin-top:28px; border:1px solid rgba(227,32,40,.7); }.portfolio-outline:hover { background:rgba(227,32,40,.12); transform:translateY(-2px); }
.portfolio-browser { overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:#080808; box-shadow:0 30px 80px rgba(0,0,0,.48),0 0 0 1px rgba(227,32,40,.09); }.portfolio-browser__chrome { display:flex; align-items:center; gap:7px; height:43px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.09); background:#161616; }.portfolio-browser__chrome>span { width:8px; height:8px; border-radius:99px; background:#ff645c; }.portfolio-browser__chrome>span:nth-child(2){background:#f6be4f}.portfolio-browser__chrome>span:nth-child(3){background:#43ca70}.portfolio-browser__chrome div { width:min(55%,260px); margin-left:10px; padding:5px 12px; overflow:hidden; border-radius:4px; background:#242424; color:#a6a6a6; font-size:.68rem; white-space:nowrap; text-overflow:ellipsis; }
.portfolio-browser__stage { position:relative; min-height:370px; overflow:hidden; background:linear-gradient(130deg,#121212,#070707); }.portfolio-browser iframe { position:relative; z-index:2; display:block; width:100%; height:clamp(370px,33vw,490px); border:0; opacity:0; transition:opacity .55s ease; }.portfolio-browser.is-loaded iframe { opacity:1; }.portfolio-browser__loader { position:absolute; inset:0; z-index:1; display:grid; place-content:center; gap:13px; color:#939393; text-align:center; font-size:.75rem; letter-spacing:.05em; }.portfolio-browser__loader i { width:46px; height:46px; margin:auto; border:2px solid rgba(227,32,40,.18); border-top-color:var(--p-red); border-radius:50%; animation:p-spin 1s linear infinite; }.portfolio-browser.is-loaded .portfolio-browser__loader { opacity:0; transition:opacity .3s; pointer-events:none; }.portfolio-browser__scan { position:absolute; z-index:3; top:0; left:-20%; width:30%; height:100%; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(227,32,40,.17),transparent); transform:skewX(-18deg); animation:p-scan 4.5s ease-in-out infinite; }.portfolio-browser__stage>a { position:absolute; z-index:4; right:12px; bottom:12px; padding:7px 10px; border:1px solid rgba(255,255,255,.3); border-radius:5px; background:rgba(7,7,7,.78); color:white; font-size:.7rem; font-weight:700; text-decoration:none; backdrop-filter:blur(5px); }
.portfolio-work { padding:clamp(48px,6vw,82px) 0 clamp(78px,9vw,126px); color:#fff; background:linear-gradient(180deg,#111,#090909); }.portfolio-work__heading { display:flex; align-items:center; justify-content:center; gap:30px; margin-bottom:43px; text-align:center; background:transparent!important; background-image:none!important; }.portfolio-work__heading>div { display:flex; flex-direction:column; align-items:center; background:transparent!important; background-image:none!important; }.portfolio-work__heading .portfolio-eyebrow { justify-content:center; }.portfolio-work__heading>p { display:none; }.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.portfolio-card { position:relative; min-height:266px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#151515; color:#fff; text-decoration:none; box-shadow:0 12px 28px rgba(0,0,0,.16); transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }.portfolio-card:hover { z-index:1; border-color:var(--accent); box-shadow:0 22px 43px rgba(0,0,0,.35),0 0 26px color-mix(in srgb,var(--accent) 18%,transparent); transform:translateY(-6px); }.portfolio-card__visual { position:relative; height:310px; overflow:hidden; background:radial-gradient(circle at 65% 30%,color-mix(in srgb,var(--accent) 33%,transparent),transparent 34%),linear-gradient(135deg,#202020,#0b0b0b); }.portfolio-card__visual img { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; object-position:top center; background:#101010; }.portfolio-card__visual iframe { position:absolute; top:0; left:0; z-index:2; width:220%; max-width:none!important; height:680px; overflow:hidden!important; border:0; background:#101010; pointer-events:none; transform:scale(.5); transform-origin:top left; clip-path:inset(0 38px 38px 0); scrollbar-width:none; }.portfolio-card__visual iframe::-webkit-scrollbar { display:none; }.portfolio-card__visual::before,.portfolio-card__visual::after { content:""; position:absolute; width:80%; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.7; transform:rotate(-28deg); }.portfolio-card__visual::before{top:35%;left:-15%}.portfolio-card__visual::after{bottom:15%;right:-15%}.portfolio-card__visual:not(.is-preview-failed):has(iframe)::before,.portfolio-card__visual:not(.is-preview-failed):has(iframe)::after,.portfolio-card__visual:has(img)::before,.portfolio-card__visual:has(img)::after { z-index:3; opacity:.14; }.portfolio-card__visual strong { position:absolute; z-index:1; top:22px; left:20px; color:color-mix(in srgb,var(--accent) 92%,white); font-size:3.45rem; font-weight:850; letter-spacing:-.1em; line-height:1; text-shadow:0 12px 30px color-mix(in srgb,var(--accent) 35%,transparent); }.portfolio-card__visual:has(iframe) strong,.portfolio-card__visual:has(img) strong { opacity:0; }.portfolio-card__visual.is-preview-failed strong { opacity:1; }.portfolio-card__visual i { position:absolute; z-index:1; right:20px; bottom:25px; width:46px; height:46px; border:1px solid color-mix(in srgb,var(--accent) 80%,transparent); transform:rotate(45deg); }.portfolio-card__visual b { position:absolute; z-index:1; top:27px; right:25px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 17px var(--accent); }.portfolio-card__visual:has(iframe) i,.portfolio-card__visual:has(iframe) b,.portfolio-card__visual:has(img) i,.portfolio-card__visual:has(img) b { z-index:3; opacity:.45; }.portfolio-card__visual.is-preview-failed i,.portfolio-card__visual.is-preview-failed b { z-index:1; opacity:1; }.portfolio-card__body { padding:18px 20px 20px; }.portfolio-card__body p { margin:0; color:var(--accent); font-size:.64rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.portfolio-card__body h3 { margin:7px 0 15px; font-size:1.1rem; font-weight:800; line-height:1.18; }.portfolio-card__body span { display:flex; align-items:center; gap:7px; color:#999; font-size:.72rem; font-weight:600; }.portfolio-card__body span svg { width:14px; height:14px; color:var(--accent); }.portfolio-card--feature { border-color:rgba(245,165,36,.55); }
.portfolio-cta { padding:0 0 clamp(74px,9vw,120px); color:#fff; background:#090909; }.portfolio-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:34px; padding:clamp(35px,5.5vw,70px); overflow:hidden; border:1px solid rgba(227,32,40,.45); background:radial-gradient(circle at 90% 50%,rgba(227,32,40,.3),transparent 28%),linear-gradient(112deg,#171010,#111); }.portfolio-cta h2 { max-width:690px; font-size:clamp(1.85rem,3.6vw,3.4rem); }.portfolio-cta .portfolio-button { flex:0 0 auto; margin:0; }
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .62s ease var(--delay,0ms),transform .62s cubic-bezier(.2,.7,.2,1) var(--delay,0ms); }[data-reveal].visible { opacity:1; transform:none; }
@keyframes p-float { 50% { transform:translate3d(-28px,32px,0) scale(1.05); } }@keyframes p-spin { to { transform:rotate(360deg); } }@keyframes p-scan { 0%,20%{transform:translateX(-60%) skewX(-18deg)}65%,100%{transform:translateX(420%) skewX(-18deg)} }
@media(max-width:900px){.portfolio-feature__layout{grid-template-columns:1fr}.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-cta__inner{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.portfolio-shell{width:min(100% - 32px,1240px)}.portfolio-hero{min-height:530px}.portfolio-hero__content{padding:67px 0}.portfolio-hero h1{font-size:clamp(2.45rem,12.5vw,4rem)}.portfolio-hero__copy{margin-top:21px;font-size:.9rem}.portfolio-hero__meta{gap:7px;flex-direction:column}.portfolio-feature,.portfolio-work{padding:67px 0}.portfolio-browser__stage,.portfolio-browser iframe{min-height:270px;height:270px}.portfolio-work__heading{align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:28px}.portfolio-grid{grid-template-columns:1fr;gap:12px}.portfolio-card{display:block;min-height:0}.portfolio-card__visual{height:310px;min-height:310px}.portfolio-card__body{padding:16px}.portfolio-card__body h3{font-size:1rem}.portfolio-cta__inner{width:100%;padding:32px 23px}.portfolio-cta .portfolio-button{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}