/* Visual-reference alignment v5: laptop/desktop first, with real mobile layout. */
:root { --font: 'Inter', 'DM Sans', Arial, sans-serif; --bg:#020813; --panel:#050e1a; }
body{background:radial-gradient(ellipse at 80% 0%,rgba(25,50,106,.10),transparent 45%),#020813;}
.container{width:min(1385px,calc(100% - 56px))}
.site-header{height:82px;background:rgba(2,8,20,.98);}
.nav-row{padding:0 18px;}
.brand>strong{font-size:23px}
.desktop-nav a{font-size:13px;font-weight:500}
.hero{height:758px;background:radial-gradient(circle at 72% 32%,rgba(66,45,163,.18),transparent 36%),#030914}
.hero-server-bg{background:url('assets/server-room.webp') right center / cover no-repeat;opacity:.95}
.hero-server-bg::after{background:
 linear-gradient(90deg,#020813 0%,rgba(2,8,19,.99) 20%,rgba(2,8,19,.88) 38%,rgba(2,8,19,.45) 59%,rgba(2,8,19,.18) 89%,rgba(2,8,19,.06) 100%),
 linear-gradient(0deg,rgba(1,7,17,.72) 0%,transparent 35%),radial-gradient(circle at 81% 22%,rgba(11,56,175,.4),transparent 29%)}
.hero-pattern{opacity:.30}
.hero-copy{padding-top:86px;padding-left:44px;width:61%}
.hero-kicker{font-size:11px;margin-bottom:27px;letter-spacing:.24em}
.hero-copy h1{font-size:clamp(125px,12vw,188px);font-weight:900;letter-spacing:-.075em;line-height:.80;margin-bottom:17px}
.hero-copy h2{font-size:clamp(39px,3.5vw,52px);letter-spacing:-.055em;margin-bottom:17px;line-height:1.1}
.hero-lead{font-size:18px;line-height:1.52;max-width:605px;color:#d9ddea}
.hero-ctas{margin-top:28px;gap:18px}
.btn{min-height:62px;padding-inline:31px;font-size:15px}
.hero-art{right:0%;width:59%;height:100%;bottom:-2px;overflow:visible;display:flex;align-items:flex-end;justify-content:flex-end;}
.hero-art img{height:98%;width:auto;max-width:none;object-fit:contain;object-position:right bottom;filter:contrast(1.08) brightness(1.01) drop-shadow(-22px 8px 30px rgba(0,0,0,.45));mask-image:linear-gradient(180deg,#000 0%,#000 85%,transparent 100%)}
.hero-right-motto{right:1.2%;top:18%;z-index:8;font-size:12px;gap:9px;letter-spacing:.3em}
.hero-signature{right:1.5%;bottom:80px;z-index:8;transform:rotate(-7deg)}
.signature-hand{font-size:clamp(46px,5vw,73px);font-style:italic;color:#fff}
.signature-location{font-size:11px;letter-spacing:.1em;margin-top:23px}
.hero-stats{left:44px;bottom:45px;max-width:780px}
.hero-stats>div{margin-right:29px;padding-left:17px}
.hero-stats strong{font-size:29px}
.hero-stats small{font-size:11px}
.site-sections{padding-top:0;gap:4px}
.panel{border-color:#112741;border-radius:9px;padding:23px 23px 27px;background:linear-gradient(160deg,rgba(3,15,30,.98),rgba(2,10,19,.98));box-shadow:none}
.panel-heading{margin-bottom:20px}
.panel-heading h2{font-size:13px;letter-spacing:.24em}
.featured-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.featured-card{min-height:454px;border-radius:9px;}
.featured-visual{height:247px;}
.featured-visual img{object-fit:cover;object-position:center 22%}
.featured-detail{padding:4px 19px 18px}
.featured-detail h3{font-size:30px;letter-spacing:-.05em}
.featured-detail .feature-subtitle{font-size:15px;margin-bottom:7px}
.featured-detail p.description{font-size:14px;line-height:1.42;margin-bottom:12px}
.featured-card .tech-chips span{font-size:11px;padding:6px 9px}
.featured-card .round-arrow{height:43px;width:43px;font-size:18px}
.project-flag{font-size:11px;padding:6px 10px}
.collection-panel{padding-bottom:19px}
.collection-panel .panel-heading{margin-bottom:18px}
.portfolio-carousel-shell{position:relative}
.more-projects-grid{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:calc((100% - 5*14px)/6);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#5d438f transparent;padding-bottom:8px;}
.more-card{min-width:0;min-height:185px;scroll-snap-align:start;border-radius:9px}
.more-visual{height:107px}
.more-detail{padding:7px 9px 8px}
.more-detail h3{font-size:13px;line-height:1.17;margin-bottom:4px}
.more-detail p{font-size:10px;line-height:1.25;margin-bottom:4px}
.more-card-bottom>span{font-size:0}
.more-card-bottom button{width:25px;height:25px}
.carousel-arrows{display:flex;gap:6px;justify-content:flex-end;margin:9px 0 0}
.carousel-arrows button{width:28px;height:28px;border-radius:50%;border:1px solid #4a3e89;background:#070d21;color:#cfc2ff;font-size:17px}
.carousel-arrows button:hover{background:#41229c}
.portfolio-disclosure{font-size:10px;margin-top:5px}
.experience-panel{padding-top:25px;padding-bottom:27px}
.experience-grid{gap:16px}
.career-card{min-height:184px}
.career-card h3{font-size:19px}
.career-card p{font-size:13px}
.expertise-panel{padding-top:24px;padding-bottom:28px}
.expertise-grid{gap:15px}
.expertise-card{min-height:210px}
.expertise-card h3{font-size:16px}
.expertise-card p{font-size:13px;line-height:1.55}
.expertise-symbol{height:62px;width:62px}
.about-panel,.contact-panel{margin-top:25px}
.footer{margin-top:12px}
@media(max-width:1180px){
 .container{width:calc(100% - 42px)}
 .hero-copy{padding-left:20px;width:62%}
 .hero-copy h1{font-size:clamp(100px,12vw,145px)}
 .hero-copy h2{font-size:clamp(30px,3.7vw,42px)}
 .hero-lead{font-size:15px;max-width:420px}
 .hero-art{right:-4%;width:55%}
 .hero-right-motto{right:.4%;font-size:10px}
 .hero-stats{left:20px}
 .more-projects-grid{grid-auto-columns:calc((100% - 4*12px)/5);gap:12px}
 .featured-detail h3{font-size:24px}
 .featured-detail p.description{font-size:12px}
}
@media(max-width:760px){
 .site-header{height:64px}.nav-row{padding:0}
 .hero{height:860px}
 .hero-copy{padding-top:48px;padding-left:0;width:100%;}
 .hero-copy h1{font-size:clamp(78px,18vw,125px)}
 .hero-copy h2{font-size:clamp(28px,6.4vw,40px)}
 .hero-lead{max-width:400px;font-size:13px}
 .hero-art{width:108%;height:53%;right:-27%;bottom:67px}
 .hero-art img{height:100%;}
 .hero-signature{bottom:118px;right:0}
 .hero-stats{left:0;right:0;bottom:18px}
 .btn{font-size:12px;min-height:48px;padding-inline:19px}
 .panel{padding:17px 13px 21px}
 .featured-grid{grid-template-columns:1fr}
 .featured-card{min-height:0}
 .featured-visual{height:225px}
 .featured-detail h3{font-size:25px}
 .featured-detail p.description{font-size:12px}
 .more-projects-grid{grid-auto-columns:minmax(215px,63%);gap:12px}
 .more-card{min-height:205px}
 .more-visual{height:123px}
 .more-detail h3{font-size:12px}
 .about-panel,.contact-panel{margin-top:8px}
}
@media(max-width:400px){
 .hero{height:790px}.hero-art{height:48%;bottom:58px;width:109%;right:-30%}
 .hero-signature{bottom:106px}
 .hero-copy h1{font-size:clamp(74px,18vw,92px)}
 .hero-copy h2{font-size:26px}
 .more-projects-grid{grid-auto-columns:minmax(205px,71%)}
}

/* Expandable full catalog: matches reference by default without hiding any work. */
.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.project-expand{padding:8px 12px;color:#cab5ff;font-size:12px;background:#0b1223;border:1px solid #24375b;border-radius:6px}
.project-expand:hover{border-color:#7741d9;background:#151436}
.carousel-controls .carousel-arrows{margin:0}
.more-projects-grid.all-visible{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none}
.more-projects-grid:focus-visible{outline:2px solid #a887ff;outline-offset:2px}
.hero::before{content:'';position:absolute;right:4%;top:-5%;height:75%;width:28%;background:radial-gradient(ellipse at 50% 18%,rgba(34,105,247,.18),transparent 60%);pointer-events:none;z-index:-1}
@media(max-width:1180px){.more-projects-grid.all-visible{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:760px){.more-projects-grid.all-visible{grid-template-columns:repeat(2,minmax(0,1fr))!important}.carousel-controls{gap:8px}.project-expand{font-size:10px}}
/* Constrain grid items' intrinsic size so carousel never widens mobile viewport */
.site-sections{grid-template-columns:minmax(0,1fr)}
.site-sections>.panel,.portfolio-carousel-shell,.more-projects-grid{min-width:0;max-width:100%}

/* Signature taken from the approved visual, rather than relying on missing cursive fonts. */
.signature-hand img{display:block;width:196px;height:auto;max-width:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.65))}
.hero-signature{right:1.1%;bottom:87px}
@media(max-width:760px){
 .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
 .hero-stats>div{min-width:0;padding-left:5px;margin-right:0}
 .hero-stats strong{font-size:22px}
 .hero-stats small{font-size:8px;white-space:normal;overflow-wrap:anywhere}
 .signature-hand img{width:128px}
 .hero-signature{bottom:113px;right:2%}
}
@media(max-width:400px){.signature-hand img{width:117px}.hero-stats strong{font-size:20px}.hero-stats small{font-size:7px}}
/* Realistic server detail extracted only from the user-approved visual reference. */
.hero-server-bg:before{content:'';position:absolute;right:0;top:0;height:100%;width:25%;background:url('assets/server-rack-detail.webp') center center / cover no-repeat;opacity:.9;filter:blur(1.1px) saturate(1.2)}
@media(max-width:760px){.hero-server-bg:before{width:38%;opacity:.6}}