@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
html{background:#202020;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;background:#202020;color:#f2f1ed;font-family:Manrope,Arial;overflow-x:hidden}body{background-image:radial-gradient(ellipse at 50% 35%,#332d29,transparent 42%),radial-gradient(circle,rgba(255,255,255,.22) 1px,transparent 1.3px);background-size:auto,42px 42px;background-position:center,center 18px}#experience{min-height:300vh}header{position:fixed;z-index:20;top:14px;left:50%;width:min(1200px,calc(100% - 52px));transform:translateX(-50%);display:flex;justify-content:space-between;font:500 11px 'DM Mono';letter-spacing:-.04em}header nav{font-size:10px}#journey{height:300vh}#stage{position:sticky;top:0;height:100vh;overflow:hidden}#scene{--fade:1;position:absolute;top:50%;left:50%;width:min(1056px,calc(100vw - 80px));height:calc(100vh - 70px);min-height:620px;transform:translate(-50%,-46%);opacity:var(--fade);overflow:hidden;background:#1d1d1d;background-image:linear-gradient(rgba(205,63,8,.1) 2px,transparent 2px),linear-gradient(90deg,rgba(205,63,8,.1) 2px,transparent 2px);background-size:190px 150px;box-shadow:0 40px 80px #0005}#scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 67% 51%,#ee4d1329,transparent 11%)}#copy{position:absolute;z-index:4;left:46px;top:50%;width:410px;transform:translateY(-42%)}#copy small{font:11px 'DM Mono';color:#aaa7a0}h1{margin:28px 0 0;font-size:clamp(62px,5.4vw,92px);font-weight:600;line-height:.92;letter-spacing:-.078em}#copy p{max-width:365px;margin:31px 0 28px;color:#d0cec8;font-size:14px;line-height:1.55;letter-spacing:-.025em}button,#copy a{min-height:39px;padding:0 16px;border-radius:5px;font:500 11px 'DM Mono';letter-spacing:-.02em}#explore{border:0;background:#f04d0b;color:#fff;cursor:pointer;box-shadow:0 10px 22px #f04d0b45}#copy a{display:inline-flex;align-items:center;margin-left:10px;border:1px solid #fff4;color:#e9e7e1}#portal{--fade:1;position:absolute;z-index:8;top:50%;right:54px;width:470px;aspect-ratio:1;transform:translateY(-48%);opacity:var(--fade)}.frame{position:absolute;inset:0;overflow:hidden;border:2px solid #e1e1de59;border-radius:29%;background:linear-gradient(145deg,#6868684f,#0a0a0a14 56%,#0008);box-shadow:inset 2px 2px #fff2,inset -16px -17px 30px #000b,0 18px 38px #0008}.frame:before{content:"";position:absolute;inset:15%;border:2px solid #e8500a;border-radius:20%;box-shadow:0 0 20px #eb450447,inset 0 0 20px #eb45041f}.frame:after{content:"";position:absolute;left:11%;right:11%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#ffae7070,transparent)}#shutter{--open:0;position:absolute;z-index:2;inset:0;overflow:hidden;border-radius:29%;transform:translateY(calc(var(--open)*122%));background:linear-gradient(145deg,#3f3f3ff2,#0f0f0fe6 57%,#030303f5);box-shadow:inset 2px 2px #fff2,inset -12px -15px 28px #0009,0 12px 25px #0008}#shutter:before{content:"";position:absolute;inset:0;background:linear-gradient(128deg,transparent 32%,#ef4c09a6 32.4% 32.9%,transparent 33.4%),linear-gradient(42deg,transparent 42%,#ef4c0973 42.4% 42.8%,transparent 43.2%)}#shutter i{position:absolute;inset:17%;border:2px solid #e5500b;border-radius:17%}#shutter b{position:absolute;top:22%;right:20%;width:16%;aspect-ratio:1;border:2px solid #ffb279;border-radius:50%}
#pricing{--scale:.16;--x:0px;--y:0px;--fade:0;--dark:0;position:fixed;z-index:6;inset:0;overflow:hidden;pointer-events:none;opacity:var(--fade);transform:translate(var(--x),var(--y)) scale(var(--scale));transform-origin:center;background:rgb(8 3 2 / var(--dark));clip-path:inset(0)}#pricing.live{pointer-events:auto}.pricing-shell{position:relative;width:min(1280px,100%);height:100%;margin:auto;padding:clamp(42px,6vh,75px) clamp(25px,4vw,54px) 30px;text-align:center}.pricing-shell>small{position:relative;z-index:2;color:#f15b1c;font:10px 'DM Mono';letter-spacing:.22em}.pricing-shell h2{position:relative;z-index:2;margin:15px 0 10px;font:clamp(36px,4vw,58px)/1 'Bebas Neue';letter-spacing:.02em}.pricing-shell h2 em{font-style:normal;color:#ff641c}.pricing-shell>p{position:relative;z-index:2;margin:0 0 35px;color:#a99489;font-size:16px}.ring{position:absolute;z-index:0;left:50%;top:54%;width:min(64vh,620px);aspect-ratio:1;transform:translate(-50%,-50%);border:14px solid #ff5d1ab3;border-radius:50%;filter:blur(5px);box-shadow:0 0 40px #ff4d0aa3,inset 0 0 35px #ffa62473;animation:spin 8s linear infinite}.cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left}.cards article{display:flex;min-height:430px;flex-direction:column;padding:28px 25px 22px;border:1px solid #fff2;border-radius:18px;background:linear-gradient(145deg,#4f362bad,#0d0807e6);box-shadow:0 20px 65px #0008}.cards .featured{min-height:470px;border-color:#ef4e0c9e;background:linear-gradient(145deg,#5f3520cc,#1a0c08f0);box-shadow:0 24px 75px #000a,0 0 38px #f24f0a29}.cards h3{margin:0;font:46px/.94 'Bebas Neue';letter-spacing:.02em}.cards article>p{min-height:38px;margin:10px 0 12px;color:#b19b8e;font-size:13px}.cards strong{margin:13px 0 16px;font:54px/1 'Bebas Neue'}.cards strong:before{content:'from ';color:#aa9488;font:12px Manrope}.cards strong em{color:#ff641c;font-style:normal;font-size:26px}.cards hr{width:100%;margin:0 0 17px;border:0;border-top:1px solid #fff3}.cards ul{display:grid;gap:9px;margin:0 0 19px;padding:0;list-style:none;color:#e5ded7;font-size:12px}.cards li:before{content:'✓';margin-right:9px;color:#ff641c}.order{margin-top:auto;border:1px solid #fff4;background:#fff1;color:#fff;cursor:pointer}.featured .order{border:0;background:linear-gradient(90deg,#ed450b,#ff8c47);color:#260b02}dialog{border:1px solid #ff702c66;border-radius:16px;background:#1a0904;color:white;padding:30px}dialog::backdrop{background:#060201dd}dialog input,dialog textarea{display:block;width:100%;margin:9px 0;padding:10px;background:#100503;color:white;border:1px solid #573226}dialog button{border:0;background:#ef4d0b;color:#fff}#close{position:absolute;right:5px;top:2px;background:none;font-size:25px}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@media(max-width:850px){#scene{width:calc(100vw - 28px);height:calc(100vh - 32px);min-height:0;transform:translate(-50%,-48%)}#copy{left:28px;top:25%;width:calc(100% - 56px);transform:none}h1{font-size:clamp(52px,15vw,78px)}#copy p{margin:20px 0}#portal{top:auto;right:50%;bottom:-115px;width:min(82vw,440px);transform:translateX(50%)}.cards{gap:9px}.cards article,.cards .featured{min-height:0;padding:13px 10px;border-radius:10px}.cards h3{font-size:27px}.cards article>p,.cards ul{font-size:8px}.cards strong{font-size:35px}.pricing-shell{padding:46px 15px 18px}.pricing-shell h2{font-size:34px}.pricing-shell>p{margin-bottom:18px}}

/* Fourth screen: a visual return of the opening porthole before the loop resets. */
#loopHero{--loop-offset:110vh;position:fixed;z-index:8;inset:0;pointer-events:none;overflow:hidden;transform:translate3d(0,var(--loop-offset),0);will-change:transform}
.loop-scene{position:absolute;top:50%;left:50%;width:min(1056px,calc(100vw - 80px));height:calc(100vh - 70px);min-height:620px;transform:translate(-50%,-46%);overflow:hidden;background:#1d1d1d;background-image:linear-gradient(rgb(205 63 8 / .1) 2px,transparent 2px),linear-gradient(90deg,rgb(205 63 8 / .1) 2px,transparent 2px);background-size:190px 150px;box-shadow:0 40px 80px #0005}
.loop-scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 67% 51%,#ee4d1329,transparent 11%)}
.loop-copy{position:absolute;z-index:4;left:46px;top:50%;width:410px;transform:translateY(-42%)}
.loop-copy small{font:11px 'DM Mono';color:#aaa7a0}.loop-copy h1{margin:28px 0 0;font-size:clamp(62px,5.4vw,92px);font-weight:600;line-height:.92;letter-spacing:-.078em}.loop-copy p{max-width:365px;margin:31px 0 28px;color:#d0cec8;font-size:14px;line-height:1.55;letter-spacing:-.025em}.loop-copy button,.loop-copy span{display:inline-flex;align-items:center;min-height:39px;padding:0 16px;border-radius:5px;font:500 11px 'DM Mono';letter-spacing:-.02em}.loop-copy button{border:0;background:#f04d0b;color:#fff;box-shadow:0 10px 22px #f04d0b45}.loop-copy span{margin-left:10px;border:1px solid #fff4;color:#e9e7e1}
.loop-portal{position:absolute;z-index:8;top:50%;right:54px;width:470px;aspect-ratio:1;transform:translateY(-48%)}.loop-frame{position:absolute;inset:0;overflow:hidden;border:2px solid #e1e1de59;border-radius:29%;background:linear-gradient(145deg,#6868684f,#0a0a0a14 56%,#0008);box-shadow:inset 2px 2px #fff2,inset -16px -17px 30px #000b,0 18px 38px #0008}.loop-frame:before{content:"";position:absolute;inset:15%;border:2px solid #e8500a;border-radius:20%;box-shadow:0 0 20px #eb450447,inset 0 0 20px #eb45041f}.loop-frame:after{content:"";position:absolute;left:11%;right:11%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#ffae7070,transparent)}.loop-shutter{position:absolute;z-index:2;inset:0;overflow:hidden;border-radius:29%;background:linear-gradient(145deg,#3f3f3ff2,#0f0f0fe6 57%,#030303f5);box-shadow:inset 2px 2px #fff2,inset -12px -15px 28px #0009,0 12px 25px #0008}.loop-shutter:before{content:"";position:absolute;inset:0;background:linear-gradient(128deg,transparent 32%,#ef4c09a6 32.4% 32.9%,transparent 33.4%),linear-gradient(42deg,transparent 42%,#ef4c0973 42.4% 42.8%,transparent 43.2%)}.loop-shutter i{position:absolute;inset:17%;border:2px solid #e5500b;border-radius:17%}.loop-shutter b{position:absolute;top:22%;right:20%;width:16%;aspect-ratio:1;border:2px solid #ffb279;border-radius:50%}
@media(max-width:850px){.loop-scene{width:calc(100vw - 28px);height:calc(100vh - 32px);min-height:0;transform:translate(-50%,-48%)}.loop-copy{left:28px;top:25%;width:calc(100% - 56px);transform:none}.loop-copy h1{font-size:clamp(52px,15vw,78px)}.loop-copy p{margin:20px 0}.loop-portal{top:auto;right:50%;bottom:-115px;width:min(82vw,440px);transform:translateX(50%)}}

/* Order dialog: dimensions and content rhythm matched to the web2u.me reference. */
dialog#modal{width:min(590px,calc(100vw - 36px));margin:auto;padding:49px 48px 50px;border:1px solid #f052122f;border-radius:20px;background:#1a0c08;color:#f4f0ed;box-shadow:0 24px 80px #000b,0 0 36px #ed4a0b1c;font-family:Manrope,Arial}
dialog#modal::backdrop{background:rgb(8 3 2 / .84);backdrop-filter:blur(8px)}
dialog#modal #close{top:18px;right:20px;min-height:0;padding:0;border:0;color:#9a6351;background:transparent;font:300 36px/1 Arial;cursor:pointer}
dialog#modal h2{margin:0;font:36px/1 'Bebas Neue';letter-spacing:.025em}
dialog#modal>p{margin:12px 0 34px;color:#a88b80;font-size:15px;line-height:1.45}
dialog#modal form{display:grid;gap:17px}
dialog#modal label{display:grid;gap:8px;color:#a88b80;font:500 11px/1.1 'DM Mono';letter-spacing:.12em;text-transform:uppercase}
dialog#modal input,dialog#modal textarea{width:100%;margin:0;padding:0 16px;border:1px solid #4c2a20;border-radius:10px;background:#24120d;color:#f1e9e4;font:16px Manrope,Arial;letter-spacing:0;text-transform:none;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
dialog#modal input{height:52px}
dialog#modal textarea{height:110px;padding-top:14px;resize:vertical}
dialog#modal input::placeholder,dialog#modal textarea::placeholder{color:#8e675a;opacity:1}
dialog#modal input:focus,dialog#modal textarea:focus{border-color:#f05a1a99;box-shadow:0 0 0 3px #f05a1a18}
dialog#modal form button{height:57px;margin-top:15px;border:0;border-radius:10px;background:linear-gradient(90deg,#ed450b,#ff8c47);color:#260b02;font:500 16px Manrope,Arial;letter-spacing:0;cursor:pointer;transition:filter .2s ease,transform .2s ease}
dialog#modal form button:hover{filter:brightness(1.07)}dialog#modal form button:active{transform:translateY(1px)}
@media(max-width:620px){dialog#modal{padding:42px 28px 32px}dialog#modal h2{font-size:34px}}

/* Pricing halo: the reference's soft outer band plus two crisp flowing tracks,
   recoloured to the Forge orange / ember / gold system. */
.ring{border:0;overflow:visible;filter:none;box-shadow:none;background:conic-gradient(from -28deg,#5c1408 0deg,#e3420a 27deg,#ffc05b 45deg,#ff6a18 62deg,#8d1c08 87deg,#f0520d 122deg,#ffc15a 142deg,#e0460a 166deg,#641508 203deg,#ee4a0c 240deg,#ffb34c 261deg,#f45710 280deg,#631507 320deg,#e8430b 345deg,#5c1408 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 58px),#000 calc(100% - 52px) calc(100% - 17px),transparent calc(100% - 11px));mask:radial-gradient(farthest-side,transparent calc(100% - 58px),#000 calc(100% - 52px) calc(100% - 17px),transparent calc(100% - 11px));animation:ring-flow 9s linear infinite}
.ring:before,.ring:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.ring:before{inset:-20px;background:conic-gradient(from -28deg,#d9390b,#ffb042,#f14b0c,#7d1908,#e9450b,#ffc664,#eb450b,#7b1908,#d9390b);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 74px),#000 calc(100% - 57px) calc(100% - 18px),transparent calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 74px),#000 calc(100% - 57px) calc(100% - 18px),transparent calc(100% - 3px));filter:blur(15px);opacity:.74}
.ring:after{inset:8px;border:2px solid transparent;background:linear-gradient(#0000,#0000) padding-box,conic-gradient(from 18deg,#ffcf77,#ec450b,#ffb54a,#b82808,#ffcf77) border-box;opacity:.9;box-shadow:0 0 10px #ff5a1480,0 0 28px #f04b0a66}
@keyframes ring-flow{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Direct counterpart of the source mint-to-violet heading treatment, recoloured for Forge. */
.pricing-shell h2 em{color:transparent;background:linear-gradient(90deg,#e5420b 0%,#ff6a1a 48%,#ffc15a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Screen 03 — a Forge-coloured port of the Perforation background, with work
   distributed as a spatial field rather than a linear reel. */
#experience{min-height:400vh}#journey{height:400vh}
#portfolio{--portfolio-opacity:0;--pf-x:50%;--pf-y:50%;position:fixed;inset:0;z-index:7;isolation:isolate;overflow:hidden;opacity:var(--portfolio-opacity);pointer-events:none;background:linear-gradient(180deg,#160807 0%,#1d0b08 56%,#120605 100%);transition:opacity .12s linear}
#portfolio.live{pointer-events:auto}
.portfolio-perf-bg,.portfolio-perf-dots,.portfolio-vignette{position:absolute;pointer-events:none}
.portfolio-perf-bg{inset:-18%;z-index:0;background:radial-gradient(460px 460px at var(--pf-x) var(--pf-y),rgba(239,75,10,.34) 0%,rgba(239,75,10,.18) 32%,rgba(239,75,10,.075) 52%,transparent 72%);filter:blur(18px);mix-blend-mode:screen}
.portfolio-perf-dots{inset:-10%;z-index:1;background-image:radial-gradient(circle at 1px 1px,rgba(255,188,124,1) 1px,transparent 1.25px);background-size:18px 18px;opacity:.26;-webkit-mask-image:radial-gradient(340px 340px at var(--pf-x) var(--pf-y),#000 0%,rgba(0,0,0,.88) 28%,transparent 68%);mask-image:radial-gradient(340px 340px at var(--pf-x) var(--pf-y),#000 0%,rgba(0,0,0,.88) 28%,transparent 68%)}
.portfolio-vignette{inset:0;z-index:2;background:radial-gradient(120% 85% at 50% 50%,transparent 44%,rgba(0,0,0,.53) 100%)}
#portfolio>*:not(.portfolio-perf-bg):not(.portfolio-perf-dots):not(.portfolio-vignette){position:absolute;z-index:4}
.portfolio-head{top:7vh;left:50%;width:min(540px,80vw);transform:translateX(-50%);text-align:center}.portfolio-head small{color:#ff6a1a;font:10px 'DM Mono';letter-spacing:.22em}.portfolio-head h2{margin:14px 0 10px;font:clamp(38px,4.2vw,66px)/.88 'Bebas Neue';letter-spacing:.025em}.portfolio-head h2 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#e6410a,#ffca6d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.portfolio-head p{margin:0;color:#b89a8d;font-size:13px}
.folio-card{display:block;overflow:hidden;border:1px solid #ffb27a35;border-radius:10px;background:#21100b;text-decoration:none;color:#f7eee9;box-shadow:0 18px 42px #0008;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}.folio-card:hover{z-index:6!important;transform:translateY(-9px) scale(1.035);border-color:#ff8a43aa;box-shadow:0 25px 58px #000c,0 0 28px #ed500a38}.folio-card img{display:block;width:100%;aspect-ratio:1.66;object-fit:cover;filter:saturate(.7) contrast(1.04);transition:filter .35s ease}.folio-card:hover img{filter:saturate(1) contrast(1.08)}.folio-card span{display:flex;justify-content:space-between;gap:13px;padding:11px 12px 12px;font:500 11px 'DM Mono';letter-spacing:.035em}.folio-card i{color:#e97843;font-style:normal;font-size:9px;letter-spacing:.08em}
.card-pacific{top:24vh;left:6vw;width:min(23vw,340px);transform:rotate(-4deg)}.card-ravlik{top:47vh;left:28vw;width:min(18vw,270px);transform:rotate(3deg)}.card-tools{top:25vh;right:8vw;width:min(22vw,330px);transform:rotate(4deg)}.card-airport{right:27vw;bottom:6vh;width:min(18vw,275px);transform:rotate(-3deg)}.card-sup{right:5vw;bottom:23vh;width:min(16vw,245px);transform:rotate(2deg)}.card-eco{left:12vw;bottom:8vh;width:min(17vw,250px);transform:rotate(2deg)}
@media(max-width:850px){.portfolio-head{top:5vh}.portfolio-head h2{font-size:42px}.portfolio-head p{font-size:11px}.folio-card{width:36vw}.folio-card span{font-size:8px;padding:8px}.folio-card i{font-size:7px}.card-pacific{top:23vh;left:7vw}.card-tools{top:24vh;right:7vw}.card-ravlik{top:47vh;left:13vw}.card-sup{top:48vh;right:10vw;bottom:auto}.card-eco{left:8vw;bottom:8vh}.card-airport{right:8vw;bottom:7vh}}

/* Keep the full price screen alive as a resting state, then move the next
   scene through the viewport from below instead of fading it into existence. */
#experience{min-height:1500vh}#journey{height:1500vh}
#portfolio{opacity:1;transform:translate3d(0,var(--portfolio-offset,110vh),0);transition:none;will-change:transform}

#screenBackdrop{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:var(--backdrop-opacity,0);background:linear-gradient(180deg,#160807 0%,#1d0b08 56%,#120605 100%)}
#portfolio{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;padding:29vh 4vw 5vh}
#portfolio .portfolio-head{position:absolute;inset:auto;top:7vh;left:50%;width:min(540px,80vw);transform:translateX(-50%)}
#portfolio .folio-card{position:relative!important;inset:auto!important;width:auto!important;grid-column:auto;grid-row:auto;transform:none!important;min-width:0}
#portfolio .folio-card:hover{transform:translateY(-9px) scale(1.025)!important}
#portfolio .folio-card img{aspect-ratio:1.66}
@media(max-width:850px){#portfolio{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:8px;padding:25vh 3vw 4vh}#portfolio .portfolio-head{top:5vh}.folio-card span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.folio-card i{display:block;margin-top:3px}}

/* Hide browser chrome only: wheel, touch, keyboard and scripted scroll remain intact. */
html,body{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* Compact the three price cards after keeping the centre title on one line. */
.cards article,.cards .featured{min-height:400px}
.cards .featured h3{white-space:nowrap;font-size:clamp(14px,3.4vw,44px)}

/* Portfolio geometry: boxed to the source site's 1280px working width. */
#portfolio{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:min(1280px,calc(100% - 32px));margin-inline:auto;padding:29vh 0 5vh;gap:8px}
#portfolio .portfolio-head{width:100%;max-width:none;white-space:nowrap}
#portfolio .portfolio-head h2{font-size:clamp(34px,4vw,58px);white-space:nowrap}
#portfolio .folio-card{border-radius:2px;box-shadow:0 14px 32px #0008}
#portfolio .folio-card img{width:calc(100% - 18px);height:132px;aspect-ratio:auto;margin:9px;padding:7px;border:1px solid rgba(255,255,255,.75);background:#f7f3ed;object-fit:contain;filter:saturate(.68) brightness(.9)}
#portfolio .folio-card span{padding:12px 14px 13px;font-size:14px;letter-spacing:.06em}
#portfolio .folio-card i{font-size:10px}
@media(max-width:850px){#portfolio{width:calc(100% - 24px);grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:8px;padding:25vh 0 4vh}#portfolio .portfolio-head{width:100%;white-space:normal}#portfolio .portfolio-head h2{font-size:42px;white-space:normal}#portfolio .folio-card img{height:auto;aspect-ratio:1.66;margin:6px;width:calc(100% - 12px);padding:4px}#portfolio .folio-card span{font-size:8px;padding:8px}}

/* Match the source reel cards: no second outer frame, only the preview mat. */
#portfolio .folio-card{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
#portfolio .folio-card img{height:102px;margin:0 0 8px;width:100%;padding:7px;border:1px solid rgba(255,255,255,.8);border-radius:0;background:#f7f7f1;object-fit:contain}
#portfolio .folio-card span{display:flex;align-items:baseline;min-width:0;padding:0 0 2px;font:500 14px 'DM Mono';line-height:1.1;letter-spacing:.06em;white-space:nowrap}
#portfolio .folio-card span>i{margin-left:auto;flex:0 0 auto;color:#e97843;font:400 10px 'DM Mono';letter-spacing:.1em;text-transform:uppercase}
@media(max-width:850px){#portfolio .folio-card img{height:auto;margin:0 0 6px;width:100%;padding:4px}#portfolio .folio-card span{display:block;padding:0;font-size:8px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#portfolio .folio-card span>i{display:block;margin:3px 0 0;font-size:7px}}

/* Source portfolio card proportions and typography. */
#portfolio .folio-card{overflow:hidden;border:1px solid rgba(255,151,91,.22);border-radius:2px;background:#1d0d09;box-shadow:none;padding:6px 7px 9px}
#portfolio .folio-card img{height:112px;margin:0 0 8px;width:100%;padding:4px;border:1px solid rgba(255,255,255,.72);background:#f7f7f1;object-fit:contain}
#portfolio .folio-card span{display:block;padding:0;font:16px/1 'Bebas Neue';letter-spacing:.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f7f7f1}
#portfolio .folio-card span>i{display:block;margin-top:6px;color:#a87561;font:10px/1.1 'DM Mono';letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
#portfolio .folio-card:hover{transform:translateY(-4px) scale(1.01)!important;border-color:rgba(255,106,26,.42);box-shadow:0 16px 30px #0008}
@media(max-width:850px){#portfolio .folio-card{padding:6px 6px 9px}#portfolio .folio-card img{height:auto;margin-bottom:7px;padding:4px}#portfolio .folio-card span{font-size:11px}#portfolio .folio-card span>i{margin-top:5px;font-size:7px}}

/* Preserve the original physical length of phases 1-3, then dedicate the
   final fifth of the document to the returning opening screen. */
#experience{min-height:1900vh}#journey{height:1900vh}

/* Scroll-motion performance contract: browser scroll remains raw input; the
   rAF loop above is the only interpolation layer. */
html{scroll-behavior:auto}
#scene,#portal,#shutter,#pricing,#portfolio,#loopHero{will-change:transform,opacity}
#pricing{left:50%;top:50%;right:auto;bottom:auto;width:100vw;height:100vh}

/* Fourth screen: a 600px Webmaster miniature expands from its calm centre
   before the existing invisible cycle reset returns to the opening hero. */
#loopHero{--loop-opacity:0;--loop-scale:1;--loop-y:0px;--loop-entry-y:110vh;transform:translate3d(0,var(--loop-entry-y),0);opacity:var(--loop-opacity);background:#202020 radial-gradient(ellipse at 50% 35%,#332d29,transparent 42%),radial-gradient(circle,rgba(255,255,255,.22) 1px,transparent 1.3px);background-size:auto,42px 42px;background-position:center,center 18px}
#loopHero .loop-scene{top:50%;left:50%;width:var(--loop-mini-width,600px);max-width:calc(100vw - 32px);height:auto;min-height:0;aspect-ratio:1920/733;transform:translate(-50%,calc(-50% + var(--loop-y))) scale(var(--loop-scale));transform-origin:center;overflow:hidden;background:#191919 url('assets/webmaster-background.png') center/cover no-repeat;box-shadow:0 26px 72px #000a;will-change:transform}
#loopHero .loop-scene:after{display:none}
#loopHero .loop-scene{overflow:visible}
#loopHero .loop-core{--loop-core-scale:.345;position:absolute;top:50%;left:50%;width:var(--loop-core-width,1056px);height:var(--loop-core-height,663px);overflow:hidden;transform:translate(-50%,-50%) scale(var(--loop-core-scale));transform-origin:center;background:#1d1d1d;background-image:linear-gradient(rgb(205 63 8 / .045) 2px,transparent 2px),linear-gradient(90deg,rgb(205 63 8 / .045) 2px,transparent 2px);background-size:190px 150px;box-shadow:0 40px 80px #0005;will-change:transform}
#loopHero .loop-core:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 67% 51%,#ee4d1329,transparent 11%)}
#loopHero .loop-core .loop-copy,#loopHero .loop-core .loop-portal{display:block}

#copy .secondary-action{display:inline-flex;align-items:center;margin-left:10px;border:1px solid #fff4;background:transparent;color:#e9e7e1;cursor:pointer}
.scroll-hint{position:fixed;left:50%;bottom:26px;z-index:30;display:grid;place-items:center;transform:translateX(-50%);pointer-events:auto;opacity:.9;animation:scroll-hint-bob 2.2s ease-in-out infinite;appearance:none;background:transparent;border:0;min-height:0;padding:6px;cursor:pointer;color:inherit}.scroll-hint:hover,.scroll-hint:focus-visible{opacity:1;outline:2px solid rgba(255,255,255,.55);outline-offset:5px}.scroll-mouse{position:relative;display:block;width:25px;height:40px;border:2px solid rgba(255,255,255,.92);border-radius:15px;box-shadow:0 0 14px rgba(255,255,255,.18)}.scroll-mouse i{position:absolute;top:7px;left:50%;width:3px;height:8px;border-radius:3px;background:#fff;transform:translateX(-50%);animation:scroll-wheel 1.6s ease-in-out infinite}@keyframes scroll-hint-bob{0%,100%{transform:translate(-50%,0);opacity:.62}50%{transform:translate(-50%,7px);opacity:1}}@keyframes scroll-wheel{0%{transform:translate(-50%,0);opacity:0}20%{opacity:1}70%{transform:translate(-50%,10px);opacity:.2}100%{transform:translate(-50%,10px);opacity:0}}@media(max-width:850px){.scroll-hint{bottom:18px}.scroll-mouse{width:22px;height:35px;border-radius:13px}}
.scroll-hint{display:grid}@media(max-width:850px){.scroll-hint{display:none!important}}

/* Top navigation: compact language selector and contact action in the site's
   warm palette, while retaining the established fixed header placement. */
header .site-identity{display:flex;align-items:baseline;gap:7px;color:#f5eee8;font:500 10px 'DM Mono',monospace;letter-spacing:.015em;white-space:nowrap}header .site-identity strong{color:#fff6ef;font-weight:500}header .site-identity span{color:#bf9d8d;font-size:9px}.top-menu{display:flex;align-items:center;gap:12px}.language-switch{display:flex;align-items:center;overflow:hidden;border:1px solid #f05a1b52;border-radius:7px;background:#120806}.language-switch button,.hire-button{min-height:0;padding:0;border:0;background:transparent;font:500 10px/1 'DM Mono',monospace;letter-spacing:.06em;cursor:pointer}.language-switch button{height:32px;padding:0 12px;color:#9d7462}.language-switch button.active{color:#fff8f2;background:linear-gradient(135deg,#ec490c,#ff7b34);box-shadow:0 0 16px #ef4d0b42}.hire-button{height:40px;padding:0 22px;border:1px solid #f05a1b72;border-radius:8px;color:#ff7130;box-shadow:inset 0 0 16px #ed4a0b0d;transition:background .18s ease,color .18s ease,box-shadow .18s ease}.hire-button:hover,.hire-button:focus-visible{outline:0;background:#ed4a0b;color:#fff8f2;box-shadow:0 0 18px #ed4a0b52}@media(max-width:650px){header{width:calc(100% - 28px)}header .site-identity span{display:none}.top-menu{gap:7px}.language-switch button{padding:0 8px}.hire-button{height:34px;padding:0 12px}}
header .site-identity a{color:#bf9d8d;text-decoration:none;transition:color .18s ease}header .site-identity a:hover,header .site-identity a:focus-visible{color:#ff7130;text-decoration:underline;text-underline-offset:3px}@media(max-width:650px){header .site-identity a{max-width:150px;overflow:hidden;text-overflow:ellipsis;display:block}}

/* One technical type scale for navigation and every actionable button. */
header,header nav,header .site-identity,header .site-identity span,button:not(#close){font:500 11px/1 'DM Mono',monospace}header .site-identity span{font-size:11px}

/* Action labels need to remain legible at ordinary viewing distance. */
button:not(#close),#copy a{font-size:13px!important}

/* Hero title: reduced by 22px at every breakpoint and shared by the loop copy. */
#copy h1,.loop-copy h1,.loop-copy .loop-title{font-size:clamp(40px,calc(5.4vw - 22px),70px)}@media(max-width:850px){#copy h1,.loop-copy h1,.loop-copy .loop-title{font-size:clamp(30px,calc(15vw - 22px),56px)}}
#copy h1,.loop-copy h1,.loop-copy .loop-title{line-height:1.06}
#copy h1,.loop-copy h1,.loop-copy .loop-title{letter-spacing:normal}.loop-copy .loop-title{margin:28px 0 0;font-weight:600}

/* Mobile browsers can expose the document behind fixed scenes while address
   bars expand/collapse. Keep every exposed layer in the intended dark field. */
html,body,#experience,#stage{background-color:#202020}@media(max-width:850px){html,body,#experience,#stage{min-height:100%;background-color:#202020}#stage{isolation:isolate}#pricing,#portfolio,#loopHero{backface-visibility:hidden}}

@media(max-width:850px){header{justify-content:flex-start;gap:7px}.top-menu{position:absolute!important;top:0!important;right:0!important;left:auto!important;display:flex!important;gap:5px}.language-switch button{width:27px;padding:0}.hire-button{flex:0 0 auto;padding:0 9px;white-space:nowrap}}

/* Mobile opening composition: bring the copy up to the scene top and leave
   deliberate breathing room before the porthole cover. */
@media(max-width:850px){#copy,.loop-copy{top:12%!important}#portal,.loop-portal{bottom:-155px}}

/* A single Cyrillic-safe two-family system prevents fallback jumps when
   EN/RU/MNE content is switched: Roboto for reading, Condensed for display. */
html,body,input,textarea,select,option,#scene,#pricing,#portfolio,#loopHero,dialog{font-family:'Roboto',Arial,sans-serif!important;font-synthesis:none}
h1,h2,h3,.loop-title,header,header nav,button,#copy a,.pricing-shell>small,.portfolio-head small,.folio-card span,dialog#modal label{font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif!important}
h1,h2,h3,.loop-title,.pricing-shell h2,.cards h3,.portfolio-head h2,dialog#modal h2{font-weight:700!important}
h1,h2,h3,.loop-title,.pricing-shell h2,.cards h3,.portfolio-head h2,dialog#modal h2{letter-spacing:-.025em!important}
#copy p,.loop-copy p,.pricing-shell>p,.cards article>p,.cards ul,.portfolio-head p,.folio-card i,dialog#modal input,dialog#modal textarea{font-family:'Roboto',Arial,sans-serif!important;font-weight:400}
.cards strong,.cards strong em{font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif!important;font-weight:700!important;letter-spacing:-.025em}
.cards strong:before{font-family:'Roboto',Arial,sans-serif!important;font-weight:400!important;letter-spacing:normal}
#copy small,.loop-copy small{font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif!important;font-weight:500!important}

/* One uninterrupted graphite canvas for every screen. Local orange effects
   remain attached to their components; page backdrops never change colour. */
:root{--site-graphite:#090b0c;--site-grid:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px)}
html,body,#experience,#stage,#loopHero,#portfolio,#screenBackdrop{background-color:var(--site-graphite)!important;background-image:var(--site-grid)!important;background-size:64px 64px!important;background-position:center!important}
#pricing{background-color:var(--site-graphite)!important;background-image:var(--site-grid)!important;background-size:64px 64px!important;background-position:center!important}
#scene,.loop-scene,#loopHero .loop-scene,#loopHero .loop-core{background-color:var(--site-graphite)!important;background-image:var(--site-grid)!important;background-size:64px 64px!important;background-position:center!important}
#scene:after,.loop-scene:after,#loopHero .loop-core:after{display:none}
.portfolio-perf-bg,.portfolio-perf-dots,.portfolio-vignette{display:none}
.pricing-shell{background:transparent!important}
#portal .frame,.loop-portal .loop-frame{background:#050505!important;background-image:none!important}

/* Hard reset for the large composition layers: no dark centre panel, glow,
   gradient, or shadow may sit behind the content. */
#portfolio,#screenBackdrop,#scene,.loop-scene,#loopHero,#loopHero .loop-scene,#loopHero .loop-core{background:var(--site-graphite) var(--site-grid) center/64px 64px!important;box-shadow:none!important}
#pricing{background:transparent!important;box-shadow:none!important}

/* The porthole's black field belongs only inside its orange inner aperture.
   The outer glass stays transparent so the unified graphite canvas continues. */
#portal .frame,.loop-portal .loop-frame{background:transparent!important;background-image:none!important}
#portal .frame:before,.loop-portal .loop-frame:before{background:#050505!important}

/* Explicit values here deliberately avoid a shorthand/cascade edge case in
   the transformed scene layer that could leave its legacy near-black fill. */
#scene,.loop-scene,#loopHero .loop-scene,#loopHero .loop-core{background-color:#0c0e0f!important;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px)!important;background-size:64px 64px!important;background-position:center!important;box-shadow:none!important}

/* The scene is a layout viewport, not a coloured panel. Its background must
   stay transparent so the page canvas is uninterrupted behind the price. */
#scene,.loop-scene,#loopHero .loop-scene,#loopHero .loop-core{background-color:transparent!important;background-image:none!important;box-shadow:none!important}

/* During the hero-to-pricing overlap the scene remains in the compositor.
   It uses the same viewport-anchored canvas, so it cannot appear as a black
   rectangle beneath the price content. */
#scene{background-color:var(--site-graphite)!important;background-image:var(--site-grid)!important;background-size:64px 64px!important;background-position:center!important;background-attachment:fixed!important;box-shadow:none!important}

/* Mobile is a conventional, readable document: no fixed canvas, zoom, WebGL
   transition, station cue, or looping screen. */
@media(max-width:850px){
  html.simple-mobile,html.simple-mobile body{overflow-x:hidden;scroll-behavior:smooth}
  .simple-mobile #experience,.simple-mobile #journey{min-height:0;height:auto}
  .simple-mobile header{position:sticky!important;top:0!important;left:auto!important;width:100%!important;min-height:58px;padding:12px 16px;background:#0c0e0ff2!important;transform:none!important;z-index:30}
  .simple-mobile .top-menu{position:static!important;margin-left:auto}
  .simple-mobile #stage{position:static!important;height:auto!important;overflow:visible!important}
  .simple-mobile #scene{position:relative!important;top:auto!important;left:auto!important;width:auto!important;height:auto!important;min-height:0!important;padding:54px 20px 42px;transform:none!important;opacity:1!important;clip-path:none!important}
  .simple-mobile #copy{position:relative!important;top:auto!important;left:auto!important;width:auto!important;max-width:560px;margin:0 auto;transform:none!important;text-align:center}
  .simple-mobile #copy small{font-size:10px}
  .simple-mobile #copy h1{margin-top:16px;font-size:clamp(36px,11vw,52px);line-height:1.02}
  .simple-mobile #copy p{margin:18px auto 24px;font-size:15px;line-height:1.5;text-align:center}
  .simple-mobile #portal,.simple-mobile #loopHero,.simple-mobile #screenBackdrop,.simple-mobile #priceExitCue,.simple-mobile #portfolioExitCue,.simple-mobile #fx{display:none!important}
  .simple-mobile #pricing{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;overflow:visible!important;padding:0 20px 44px;opacity:1!important;transform:none!important;translate:none!important;clip-path:none!important;pointer-events:auto!important}
  .simple-mobile .pricing-shell{width:auto!important;height:auto!important;max-width:560px;margin:0 auto;padding:24px 0 0;text-align:center}
  .simple-mobile .pricing-shell>small,.simple-mobile .pricing-shell>p{text-align:center}
  .simple-mobile .pricing-shell h2{margin:12px 0 10px;font-size:clamp(34px,10vw,48px);line-height:.98}
  .simple-mobile .ring,.simple-mobile .pricing-shell canvas{display:none!important}
  .simple-mobile .cards{grid-template-columns:1fr;gap:14px}
  .simple-mobile .cards article,.simple-mobile .cards .featured{min-height:0;padding:22px 20px;border-radius:12px;text-align:center}
  .simple-mobile .cards h3{font-size:34px}.simple-mobile .cards strong{font-size:46px}.simple-mobile .cards ul{font-size:13px;gap:8px}
  .simple-mobile .cards ul{display:inline-grid;text-align:left;justify-items:start;margin-left:auto;margin-right:auto}
  .simple-mobile .order{min-height:46px;width:100%;font-size:13px}
  .simple-mobile #portfolio{position:relative!important;inset:auto!important;display:block!important;min-height:0!important;padding:34px 20px 56px;overflow:visible!important;opacity:1!important;transform:none!important;pointer-events:auto!important;background:transparent!important}
  .simple-mobile #portfolio .portfolio-perf-bg,.simple-mobile #portfolio .portfolio-perf-dots,.simple-mobile #portfolio .portfolio-vignette{display:none!important}
  .simple-mobile #portfolio>*:not(.portfolio-perf-bg):not(.portfolio-perf-dots):not(.portfolio-vignette){position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important}
  .simple-mobile #portfolio .portfolio-head{width:auto;margin:0 auto 22px;text-align:left}.simple-mobile #portfolio .portfolio-head h2{font-size:42px;line-height:.95}
  .simple-mobile #portfolio .folio-card{display:block!important;width:100%!important;margin:0 0 16px!important;padding:8px!important;transform:none!important}
  .simple-mobile #portfolio .folio-card img{width:100%!important;height:auto!important;aspect-ratio:1.66!important;margin:0 0 10px!important}
  .simple-mobile #portfolio .folio-card span{font-size:14px!important}.simple-mobile #portfolio .folio-card span>i{font-size:10px!important}
  .simple-mobile #portfolio{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .simple-mobile #portfolio{content-visibility:auto;contain-intrinsic-size:1200px}
  .simple-mobile #portfolio .portfolio-head{grid-column:1/-1;margin-bottom:8px}
  .simple-mobile #portfolio .folio-card{margin:0!important;min-width:0}
  .simple-mobile #portfolio .folio-card span{font-size:11px!important;letter-spacing:.02em!important}.simple-mobile #portfolio .folio-card span>i{font-size:8px!important;letter-spacing:.06em!important}
  #mobileFooter{display:none}
  .simple-mobile #mobileFooter{display:flex;flex-direction:column;gap:10px;margin:0 20px 34px;padding:26px 20px;border-top:1px solid rgba(255,255,255,.16);background:transparent;color:#f1efea}
  .simple-mobile #mobileFooter small,.simple-mobile #mobileFooter span{color:#8d9393;font:500 10px/1.35 'Roboto Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase}
  .simple-mobile #mobileFooter strong{font:700 25px/1 'Roboto Condensed',sans-serif;letter-spacing:-.02em}
  .simple-mobile #mobileFooter p{margin:0;color:#c2c4c2;font:400 14px/1.45 Roboto,Arial,sans-serif}
  .simple-mobile .mobile-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 6px}
  .simple-mobile .mobile-contact-grid a,.simple-mobile .mobile-contact-grid button{display:flex;align-items:center;gap:8px;min-width:0;min-height:46px;padding:0 10px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:transparent;color:#9da5ad;text-decoration:none;font:500 11px/1 Roboto,Arial,sans-serif;cursor:pointer}
  .simple-mobile .mobile-contact-grid b{flex:0 0 auto;color:#cf7545;font:400 16px/1 Arial}
  .simple-mobile .mobile-contact-grid span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font:inherit;letter-spacing:0;text-transform:none}
  .simple-mobile .mobile-contact-grid a:active,.simple-mobile .mobile-contact-grid button:active{border-color:#ef5a1b;color:#f0f1ef}
  .simple-mobile dialog#modal{max-height:90vh;overflow:auto;padding:34px 22px}
}

/* Localized price prefix replaces the former hard-coded pseudo-element. */
.cards strong:before{content:none!important}
.cards .price-from{color:#aa9488;font:400 12px/1 Roboto,Arial,sans-serif;letter-spacing:normal;margin-right:8px}
#portfolio .folio-card img{aspect-ratio:700/450}
@media(max-width:850px){.simple-mobile #portfolio .folio-card img{aspect-ratio:700/450!important}}
@media(min-width:851px){#portfolio{grid-template-columns:repeat(5,minmax(0,1fr))!important}}

/* Desktop portfolio reel: six compact columns. The mobile simple layout has
   its own two-column override above and is unaffected. */
@media(min-width:851px){#portfolio{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}}

/* Russian portfolio: five balanced rows with every card label visible. */
@media(min-width:851px){
  #portfolio{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:230px;min-height:100vh;height:100vh;max-height:100vh;overflow-y:auto;overflow-x:hidden;padding:15vh 3vw 12vh;gap:26px 22px;align-content:start;scrollbar-width:thin;scrollbar-color:#8f452d transparent}
  #portfolio .folio-card{min-height:230px;height:230px;display:flex;flex-direction:column;padding:9px 10px 13px;overflow:hidden;background:#160b08;border-color:rgba(255,151,91,.35)}
  #portfolio .folio-card img{height:170px;min-height:0;flex:0 0 170px;margin:0 0 12px;padding:0;border:0;background:transparent;object-fit:cover}
  #portfolio .folio-card span{flex:1 1 auto;font-size:15px;line-height:1.1}
  #portfolio .folio-card span>i{font-size:9px;margin-top:5px}
}

/* Russian version: restore the original fixed portfolio composition and fit
   the added cards into a compact seven-column desktop reel. */
@media(min-width:851px){
  #portfolio{grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;grid-auto-rows:auto;min-height:0;height:100vh;max-height:none;overflow:hidden;padding:24vh 3vw 5vh;gap:14px;align-content:stretch;scrollbar-width:auto}
  #portfolio .folio-card{min-height:0;height:auto;padding:6px 7px 9px;background:#1d0d09;border-color:rgba(255,151,91,.25);overflow:hidden}
  #portfolio .folio-card img{height:clamp(58px,7.2vh,85px);flex:0 0 auto;margin:0 0 8px;object-fit:cover}
  #portfolio .folio-card span{font-size:12px;line-height:1.05}
  #portfolio .folio-card span>i{font-size:8px;line-height:1.1;margin-top:7px}
}

/* Russian cards follow their content instead of stretching to the grid row. */
@media(min-width:851px){
  html.lang-ru #portfolio{grid-template-rows:repeat(4,auto)!important;align-content:start}
  html.lang-ru #portfolio .folio-card{height:auto;align-self:start}
  html.lang-ru #portfolio .folio-card img{width:100%;height:auto!important;aspect-ratio:700/450;object-fit:contain;background:#120a08}
}

/* Keep the original desktop reel for English and Montenegrin. Only the
   Russian copy receives the expanded seven-column portfolio treatment. */
html.lang-en .ru-only-card,html.lang-mne .ru-only-card{display:none!important}
@media(min-width:851px){
  html.lang-en #portfolio,html.lang-mne #portfolio{grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;grid-auto-rows:auto;min-height:0;height:100vh;max-height:none;overflow:hidden;padding:29vh 0 5vh;gap:8px;align-content:stretch}
  html.lang-en #portfolio .folio-card,html.lang-mne #portfolio .folio-card{min-height:0;height:auto;padding:6px 7px 9px}
  html.lang-en #portfolio .folio-card img,html.lang-mne #portfolio .folio-card img{height:112px;flex:0 0 auto;margin:0 0 8px;object-fit:contain}
  html.lang-en #portfolio .folio-card span,html.lang-mne #portfolio .folio-card span{font-size:14px;line-height:1}
  html.lang-en #portfolio .folio-card span>i,html.lang-mne #portfolio .folio-card span>i{font-size:10px;margin-top:6px}
}

/* Keep the fixed navigation readable while the portfolio cards pass behind it. */
.top-menu{position:relative;z-index:2;padding:4px;background:rgba(15,10,9,.97);border:1px solid rgba(255,106,26,.22);border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.28)}
body{background-attachment:fixed}
header .site-identity a.articles-link{color:#ff7130;font-weight:500}header .site-identity a.articles-link:hover,header .site-identity a.articles-link:focus-visible{color:#ff9a68}
.pricing-portfolio-link{display:inline-block;margin:10px 0 18px;color:#ff7130;font:500 13px 'DM Mono',monospace;text-decoration:none;border-bottom:1px solid #ff713055;transition:color .18s ease,border-color .18s ease}.pricing-portfolio-link:hover,.pricing-portfolio-link:focus-visible{color:#ff9a68;border-color:#ff9a68}
.pricing-portfolio-link{margin:16px 0 0;color:#a99489;font:400 16px 'Roboto',Arial,sans-serif;text-decoration:none;border-bottom:0}.pricing-portfolio-link:hover,.pricing-portfolio-link:focus-visible{color:#fff}
.pricing-portfolio-link{position:relative;z-index:4;display:inline-block;margin-top:28px;pointer-events:auto;cursor:pointer}