:root{--bg:#070707;--panel:#111;--panel2:#171717;--text:#f6f6f3;--muted:#aaa;--line:#2a2a2a;--soft:#e8e1d8;--dark:#050505}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;background:rgba(7,7,7,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}.logo{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;font-weight:800;letter-spacing:-.08em}.site-header nav{display:flex;gap:24px;align-items:center;color:var(--muted);font-size:14px}.site-header nav a:hover{color:var(--text)}.nav-cv{padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--text)!important}.section-pad{padding:92px 5vw}.compact{padding-top:54px;padding-bottom:54px}.hero{min-height:82vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:10% -20% auto auto;width:45vw;height:45vw;background:radial-gradient(circle,rgba(255,255,255,.11),transparent 62%);pointer-events:none}.eyebrow,.label{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--muted);font-weight:700}.hero h1{font-size:clamp(46px,7vw,104px);line-height:.94;letter-spacing:-.07em;max-width:1120px;margin:18px 0 22px}.hero-copy{font-size:clamp(18px,2vw,24px);line-height:1.45;color:var(--soft);max-width:730px;margin:0 0 30px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 20px;font-weight:700;border:1px solid var(--line);transition:.2s ease}.button:hover{transform:translateY(-2px)}.primary{background:#E37729;color:var(--dark);border-color:#E37729}.secondary{background:transparent;color:var(--text)}.hero-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:46px;color:var(--muted);font-size:13px}.hero-meta span{border:1px solid var(--line);border-radius:999px;padding:9px 12px;background:rgba(255,255,255,.03)}.intro-grid,.about{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}h2{font-size:clamp(32px,4vw,56px);letter-spacing:-.055em;line-height:1;margin:12px 0}p{color:var(--muted);line-height:1.65;font-size:16px}.section-head{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:28px}.section-head p{max-width:430px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}.filter-btn{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:10px 14px;cursor:pointer;font:inherit;font-size:14px}.filter-btn.active,.filter-btn:hover{background:var(--text);color:var(--dark);border-color:var(--text)}.grid{columns:4 260px;column-gap:16px}.work-card{break-inside:avoid;margin:0 0 16px;border-radius:22px;overflow:hidden;background:var(--panel);border:1px solid rgba(255,255,255,.08);cursor:pointer;position:relative}.work-card img{width:100%;height:auto;transition:.25s ease}.work-card:hover img{transform:scale(1.025);filter:brightness(.82)}.work-card .caption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,.78));font-size:13px;font-weight:700;opacity:0;transition:.2s ease}.work-card:hover .caption{opacity:1}.capabilities{background:var(--panel)}.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.capability-grid div{background:var(--panel2);border:1px solid var(--line);border-radius:24px;padding:24px}.capability-grid h3{margin:0 0 10px;letter-spacing:-.03em}.about-copy p:first-child{font-size:19px;color:var(--soft)}.contact{text-align:center}.contact h2{font-size:clamp(44px,6vw,82px)}.contact-card{margin:28px auto 0;max-width:720px;background:var(--panel);border:1px solid var(--line);border-radius:32px;padding:28px;display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}.contact-card a:not(.button),.contact-card span{color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:11px 14px}footer{display:flex;justify-content:space-between;gap:20px;padding:28px 5vw;border-top:1px solid var(--line);color:var(--muted);font-size:14px}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:50;display:none;align-items:center;justify-content:center;flex-direction:column;padding:24px}.lightbox.active{display:flex}.lightbox img{max-height:82vh;max-width:92vw;border-radius:18px;box-shadow:0 20px 80px rgba(0,0,0,.5)}.lightbox p{margin-top:14px}.close{position:absolute;top:22px;right:28px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:30px;cursor:pointer}@media(max-width:900px){.site-header{align-items:flex-start}.site-header nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}.intro-grid,.about{grid-template-columns:1fr}.capability-grid{grid-template-columns:1fr 1fr}.section-head{display:block}.hero{min-height:auto}.section-pad{padding:70px 6vw}}@media(max-width:560px){.site-header{position:relative}.site-header nav{font-size:13px}.capability-grid{grid-template-columns:1fr}.hero h1{font-size:44px}.grid{columns:1}.contact-card{border-radius:22px}.contact-card a,.contact-card span{width:100%}footer{flex-direction:column}} /* Updated hero and product concept styling */ .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.75fr);align-items:center;gap:48px;background:radial-gradient(circle at 78% 20%,rgba(255,255,255,.12),transparent 34%),linear-gradient(135deg,#070707 0%,#0d0d0d 55%,#151515 100%)} .hero:before{inset:auto -8% -18% auto;width:42vw;height:42vw;background:radial-gradient(circle,rgba(255,255,255,.09),transparent 64%)} .hero-content{position:relative;z-index:2}.hero h1{max-width:980px}.hero-copy{max-width:620px}.hero-visual{position:relative;z-index:1;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:520px}.hero-visual:before{content:"";position:absolute;inset:4% 0 4% 10%;border:1px solid rgba(255,255,255,.14);border-radius:42px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));transform:rotate(2deg)}.hero-main-img{position:relative;width:min(100%,520px);max-height:620px;object-fit:cover;border-radius:34px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 90px rgba(0,0,0,.46);filter:saturate(.92) contrast(1.02)}.hero-note{position:absolute;left:0;bottom:10%;max-width:260px;background:rgba(7,7,7,.78);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);border-radius:22px;padding:16px 18px;box-shadow:0 18px 70px rgba(0,0,0,.35)}.hero-note span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;margin-bottom:6px}.hero-note strong{display:block;font-size:15px;line-height:1.35;color:var(--soft)} @media(max-width:900px){.hero{grid-template-columns:1fr}.hero-visual{min-height:auto;justify-content:flex-start}.hero-main-img{width:min(100%,460px)}.hero-note{left:18px;bottom:18px}}@media(max-width:560px){.hero-main-img{border-radius:24px}.hero-note{position:relative;left:auto;bottom:auto;margin-top:-30px;margin-left:14px}.hero-visual{display:block}.hero-visual:before{display:none}} /* v3 portfolio grouping: keeps related work together horizontally */ .grid{columns:auto;display:grid;gap:34px}.category-block{border:1px solid rgba(255,255,255,.1);border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));padding:22px;overflow:hidden}.category-heading{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:20px}.category-heading h3{font-size:clamp(24px,3vw,38px);line-height:1;letter-spacing:-.045em;margin:0}.project-row{padding:20px 0;border-top:1px solid rgba(255,255,255,.09)}.project-row:first-of-type{border-top:0}.project-row-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.project-row-head h4{margin:0;font-size:18px;letter-spacing:-.025em;color:var(--soft)}.project-row-head span{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 10px;white-space:nowrap}.project-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,280px);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:0 0 12px}.project-strip::-webkit-scrollbar{height:8px}.project-strip::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:999px}.project-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}.work-card{margin:0;border-radius:20px;scroll-snap-align:start;min-height:260px}.work-card img{width:100%;height:100%;min-height:260px;max-height:340px;object-fit:cover}.work-card .caption{opacity:1;font-size:12px;padding:42px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.86))}.work-card:hover .caption{opacity:1}@media(max-width:560px){.category-block{padding:16px;border-radius:24px}.category-heading,.project-row-head{align-items:flex-start;flex-direction:column}.project-strip{grid-auto-columns:minmax(180px,78vw)}.work-card img{min-height:230px}} /* v4 refinements: tighter hero, 3D packaging carousel, unified collage */ .hero.section-pad{padding-top:24px;padding-bottom:54px;min-height:calc(100vh - 76px)} .hero-visual{perspective:1200px;min-height:520px;overflow:visible} .hero-carousel{position:relative;width:min(100%,560px);height:min(66vw,620px);max-height:620px;transform-style:preserve-3d;display:grid;place-items:center} .hero-carousel:before{content:"";position:absolute;inset:9% 2% 9% 8%;border:1px solid rgba(255,255,255,.14);border-radius:42px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));transform:rotateY(-18deg) rotateZ(2deg) translateZ(-80px);box-shadow:0 40px 120px rgba(0,0,0,.28)} .hero-slide{position:absolute;max-width:92%;max-height:92%;object-fit:cover;border-radius:34px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 90px rgba(0,0,0,.48);animation:carouselTurn 12s infinite ease-in-out;transform-origin:center center;backface-visibility:hidden;filter:saturate(.94) contrast(1.03)} .hero-slide.slide-two{animation-delay:-4s}.hero-slide.slide-three{animation-delay:-8s} @keyframes carouselTurn{ 0%,8%{opacity:1;transform:translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);z-index:4} 28%,38%{opacity:.55;transform:translateX(34%) rotateY(-44deg) rotateZ(2deg) scale(.82);z-index:2} 58%,68%{opacity:.32;transform:translateX(-28%) rotateY(42deg) rotateZ(-2deg) scale(.72);z-index:1} 88%,100%{opacity:1;transform:translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);z-index:4} } .hero-main-img{display:none}.hero-visual:before{display:none}.hero-note{left:2%;bottom:8%} #work .section-head{margin-bottom:24px}.filters{display:none!important} .grid{columns:initial;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:16px;align-items:stretch} .work-card{break-inside:auto;margin:0;min-height:230px;border-radius:22px;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;grid-column:span 3;grid-row:span 1} .work-card.shape-wide{grid-column:span 6}.work-card.shape-tall{grid-row:span 2;min-height:476px}.work-card.shape-square{grid-column:span 3} .work-card img{width:100%;height:100%;object-fit:cover}.work-card:hover{z-index:5;transform:scale(1.045);box-shadow:0 24px 80px rgba(0,0,0,.55);border-color:rgba(255,255,255,.22)} .work-card .caption{font-size:12px;padding:42px 16px 16px}.work-card .caption strong{display:block;max-width:90%} @media(max-width:1100px){.grid{grid-template-columns:repeat(8,1fr)}.work-card{grid-column:span 4}.work-card.shape-wide{grid-column:span 8}.work-card.shape-square{grid-column:span 4}} @media(max-width:900px){.hero.section-pad{padding-top:38px;min-height:auto}.hero-carousel{height:480px}.hero-note{left:18px;bottom:18px}} @media(max-width:560px){.hero.section-pad{padding-top:32px}.hero-carousel{height:390px}.hero-slide{border-radius:24px}.grid{grid-template-columns:1fr}.work-card,.work-card.shape-wide,.work-card.shape-tall,.work-card.shape-square{grid-column:span 1;grid-row:span 1;min-height:auto}.work-card img{height:auto}.work-card:hover{transform:none}.hero-note{position:relative;left:auto;bottom:auto;margin-top:-34px;margin-left:14px}} /* v5 small fixes: show tall portrait pieces fully in the collage and remove duplicate data entries */ .work-card.shape-tall img{ object-fit: contain; background: #0b0b0b; } .work-card.shape-tall:hover img{ transform: scale(1.015); } /* v6 refinements: restore varied masonry collage and keep transparent logo assets on dark cards */ #portfolioGrid.grid{ display:block; columns:4 260px; column-gap:16px; } #portfolioGrid .work-card, #portfolioGrid .work-card.shape-wide, #portfolioGrid .work-card.shape-tall, #portfolioGrid .work-card.shape-square{ display:block; break-inside:avoid; grid-column:auto; grid-row:auto; min-height:0; margin:0 0 16px; background:#070707; } #portfolioGrid .work-card img, #portfolioGrid .work-card.shape-tall img, #portfolioGrid .work-card.shape-wide img, #portfolioGrid .work-card.shape-square img{ display:block; width:100%; height:auto; min-height:0; max-height:none; object-fit:contain; background:#070707; } #portfolioGrid .work-card:hover{ transform:scale(1.025); z-index:5; box-shadow:0 24px 80px rgba(0,0,0,.55); border-color:rgba(255,255,255,.22); } #portfolioGrid .work-card:hover img{ transform:none; filter:brightness(.86); } #portfolioGrid .work-card[data-src*="devvera-logo"]{ padding:18px; background:#050505; } #portfolioGrid .work-card[data-src*="devvera-logo"] img{ background:#050505; } @media(max-width:1100px){#portfolioGrid.grid{columns:3 240px}} @media(max-width:760px){#portfolioGrid.grid{columns:2 180px}} @media(max-width:560px){#portfolioGrid.grid{columns:1}#portfolioGrid .work-card:hover{transform:none}} /* v7 gallery refinement: horizontal event flow with varied collage sizing */ #portfolioGrid.grid{ display:grid; columns:auto; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-flow:row dense; grid-auto-rows:112px; gap:16px; align-items:stretch; } #portfolioGrid .work-card, #portfolioGrid .work-card.shape-wide, #portfolioGrid .work-card.shape-tall, #portfolioGrid .work-card.shape-square{ margin:0; break-inside:auto; min-height:0; height:100%; display:block; overflow:hidden; background:#070707; border-radius:22px; } #portfolioGrid .work-card.shape-wide{ grid-column:span 4; grid-row:span 2; } #portfolioGrid .work-card.shape-square{ grid-column:span 3; grid-row:span 3; } #portfolioGrid .work-card.shape-tall{ grid-column:span 3; grid-row:span 4; } #portfolioGrid .work-card:nth-child(7n).shape-wide, #portfolioGrid .work-card:nth-child(11n).shape-wide{ grid-column:span 5; grid-row:span 2; } #portfolioGrid .work-card:nth-child(9n).shape-square{ grid-column:span 4; grid-row:span 3; } #portfolioGrid .work-card:nth-child(13n).shape-tall{ grid-column:span 4; grid-row:span 4; } #portfolioGrid .work-card img, #portfolioGrid .work-card.shape-wide img, #portfolioGrid .work-card.shape-square img{ width:100%; height:100%; min-height:0; max-height:none; object-fit:cover; background:#070707; } #portfolioGrid .work-card.shape-tall img{ width:100%; height:100%; min-height:0; max-height:none; object-fit:contain; background:#070707; } #portfolioGrid .work-card[data-src*="devvera-logo"]{ grid-column:span 4; grid-row:span 3; padding:24px; background:#050505; } #portfolioGrid .work-card[data-src*="devvera-logo"] img{ object-fit:contain; background:#050505; } #portfolioGrid .work-card:hover{ transform:scale(1.025); z-index:5; box-shadow:0 24px 80px rgba(0,0,0,.58); border-color:rgba(255,255,255,.24); } #portfolioGrid .work-card:hover img{ transform:none; filter:brightness(.86); } @media(max-width:1200px){ #portfolioGrid.grid{grid-template-columns:repeat(9,minmax(0,1fr));grid-auto-rows:104px} #portfolioGrid .work-card.shape-wide{grid-column:span 5;grid-row:span 2} #portfolioGrid .work-card.shape-square{grid-column:span 4;grid-row:span 3} #portfolioGrid .work-card.shape-tall{grid-column:span 4;grid-row:span 4} #portfolioGrid .work-card[data-src*="devvera-logo"]{grid-column:span 5;grid-row:span 3} } @media(max-width:760px){ #portfolioGrid.grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:92px;gap:12px} #portfolioGrid .work-card.shape-wide, #portfolioGrid .work-card.shape-square, #portfolioGrid .work-card.shape-tall, #portfolioGrid .work-card[data-src*="devvera-logo"]{grid-column:span 6;grid-row:span 3} #portfolioGrid .work-card.shape-tall{grid-row:span 5} } @media(max-width:560px){ #portfolioGrid.grid{display:block;columns:1} #portfolioGrid .work-card, #portfolioGrid .work-card.shape-wide, #portfolioGrid .work-card.shape-square, #portfolioGrid .work-card.shape-tall, #portfolioGrid .work-card[data-src*="devvera-logo"]{height:auto;margin:0 0 14px;padding:0} #portfolioGrid .work-card[data-src*="devvera-logo"]{padding:18px} #portfolioGrid .work-card img, #portfolioGrid .work-card.shape-wide img, #portfolioGrid .work-card.shape-square img, #portfolioGrid .work-card.shape-tall img{height:auto;object-fit:contain} #portfolioGrid .work-card:hover{transform:none} } /* v8 gallery refinement: professional justified collage with no empty grid gaps. Images still vary in visual size through their natural aspect ratios, but each row fills cleanly. */ #portfolioGrid.grid{ display:flex; flex-wrap:wrap; align-items:stretch; gap:14px; columns:auto; } #portfolioGrid .work-card, #portfolioGrid .work-card.shape-wide, #portfolioGrid .work-card.shape-tall, #portfolioGrid .work-card.shape-square, #portfolioGrid .work-card[data-src*="devvera-logo"]{ grid-column:auto; grid-row:auto; flex:calc(var(--ratio, 1) * 1) 1 calc(var(--ratio, 1) * 245px); height:245px; min-width:170px; max-width:none; margin:0; padding:0; background:#070707; border-radius:22px; overflow:hidden; } #portfolioGrid .work-card.shape-tall{ flex-basis:calc(var(--ratio, .72) * 285px); height:285px; } #portfolioGrid .work-card.shape-square{ flex-basis:calc(var(--ratio, 1) * 250px); height:250px; } #portfolioGrid .work-card.shape-wide{ flex-basis:calc(var(--ratio, 1.55) * 235px); height:235px; } #portfolioGrid .work-card.logo-wide, #portfolioGrid .work-card[data-src*="devvera-logo"]{ flex-basis:calc(var(--ratio, 2.2) * 210px); height:210px; padding:22px; background:#050505; } #portfolioGrid .work-card img, #portfolioGrid .work-card.shape-wide img, #portfolioGrid .work-card.shape-square img, #portfolioGrid .work-card.shape-tall img{ width:100%; height:100%; min-height:0; max-height:none; object-fit:cover; object-position:center center; background:#070707; } #portfolioGrid .work-card.shape-tall img{ object-fit:cover; } #portfolioGrid .work-card.logo-wide img, #portfolioGrid .work-card[data-src*="devvera-logo"] img{ object-fit:contain; background:#050505; } #portfolioGrid .work-card:hover{ transform:scale(1.026); z-index:5; box-shadow:0 24px 80px rgba(0,0,0,.58); border-color:rgba(255,255,255,.24); } #portfolioGrid .work-card:hover img{ transform:none; filter:brightness(.86); } @media(max-width:980px){ #portfolioGrid .work-card, #portfolioGrid .work-card.shape-wide, #portfolioGrid .work-card.shape-square, #portfolioGrid .work-card.shape-tall{ height:220px; flex-basis:calc(var(--ratio,1) * 220px); min-width:145px; } #portfolioGrid .work-card.logo-wide, #portfolioGrid .work-card[data-src*="devvera-logo"]{ height:190px; flex-basis:calc(var(--ratio,2) * 190px); } } @media(max-width:560px){ #portfolioGrid.grid{display:block;columns:1;gap:0} #portfolioGrid .work-card, #portfolioGrid .work-card.shape-wide, #portfolioGrid .work-card.shape-square, #portfolioGrid .work-card.shape-tall, #portfolioGrid .work-card.logo-wide, #portfolioGrid .work-card[data-src*="devvera-logo"]{ height:auto; min-width:0; margin:0 0 14px; padding:0; } #portfolioGrid .work-card.logo-wide, #portfolioGrid .work-card[data-src*="devvera-logo"]{padding:18px} #portfolioGrid .work-card img, #portfolioGrid .work-card.shape-wide img, #portfolioGrid .work-card.shape-square img, #portfolioGrid .work-card.shape-tall img{ height:auto; object-fit:contain; } #portfolioGrid .work-card:hover{transform:none} } /* v9 gallery refinement: organic large collage — varied sizes without obvious row/column lines */ #portfolioGrid.grid{ display:grid; columns:auto; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:28px; grid-auto-flow:dense; gap:12px; align-items:stretch; } #portfolioGrid .work-card, #portfolioGrid .work-card.shape-wide, #portfolioGrid .work-card.shape-square, #portfolioGrid .work-card.shape-tall, #portfolioGrid .work-card.logo-wide, #portfolioGrid .work-card[data-src*="devvera-logo"]{ flex:none; width:auto; height:auto; min-width:0; min-height:0; margin:0; padding:0; display:block; overflow:hidden; border-radius:22px; background:#070707; grid-column:span 3; grid-row:span 10; } #portfolioGrid .work-card.layout-hero{grid-column:span 5;grid-row:span 16;} #portfolioGrid .work-card.layout-wide{grid-column:span 5;grid-row:span 10;} #portfolioGrid .work-card.layout-banner{grid-column:span 6;grid-row:span 8;} #portfolioGrid .work-card.layout-tall{grid-column:span 3;grid-row:span 17;} #portfolioGrid .work-card.layout-large{grid-column:span 4;grid-row:span 14;} #portfolioGrid .work-card.layout-medium{grid-column:span 3;grid-row:span 12;} #portfolioGrid .work-card.layout-smallwide{grid-column:span 4;grid-row:span 8;} #portfolioGrid .work-card.layout-small{grid-column:span 3;grid-row:span 9;} #portfolioGrid .work-card:nth-child(10n+3){grid-column:span 4;grid-row:span 15;} #portfolioGrid .work-card:nth-child(12n+7){grid-column:span 5;grid-row:span 11;} #portfolioGrid .work-card:nth-child(15n+11){grid-column:span 6;grid-row:span 9;} #portfolioGrid .work-card[data-src*="devvera-logo"], #portfolioGrid .work-card.logo-wide{ grid-column:span 4; grid-row:span 12; padding:24px; background:#050505; } #portfolioGrid .work-card img, #portfolioGrid .work-card.shape-wide img, #portfolioGrid .work-card.shape-square img, #portfolioGrid .work-card.shape-tall img, #portfolioGrid .work-card.logo-wide img, #portfolioGrid .work-card[data-src*="devvera-logo"] img{ width:100%; height:100%; min-height:0; max-height:none; object-fit:cover; object-position:center center; background:#070707; } #portfolioGrid .work-card[data-src*="devvera-logo"] img, #portfolioGrid .work-card.logo-wide img{ object-fit:contain; background:#050505; } #portfolioGrid .work-card.shape-tall.layout-tall img, #portfolioGrid .work-card.shape-tall.layout-large img{ object-fit:cover; object-position:center top; } #portfolioGrid .work-card:hover{ transform:scale(1.035); z-index:10; box-shadow:0 28px 90px rgba(0,0,0,.64); border-color:rgba(255,255,255,.26); } #portfolioGrid .work-card:hover img{transform:none;filter:brightness(.86)} @media(max-width:1200px){ #portfolioGrid.grid{grid-template-columns:repeat(9,minmax(0,1fr));grid-auto-rows:26px;gap:11px} #portfolioGrid .work-card.layout-hero{grid-column:span 5;grid-row:span 15} #portfolioGrid .work-card.layout-wide{grid-column:span 5;grid-row:span 10} #portfolioGrid .work-card.layout-banner{grid-column:span 5;grid-row:span 8} #portfolioGrid .work-card.layout-tall{grid-column:span 4;grid-row:span 16} #portfolioGrid .work-card.layout-large{grid-column:span 4;grid-row:span 13} #portfolioGrid .work-card.layout-medium{grid-column:span 3;grid-row:span 11} #portfolioGrid .work-card.layout-smallwide{grid-column:span 5;grid-row:span 8} #portfolioGrid .work-card.layout-small{grid-column:span 3;grid-row:span 9} #portfolioGrid .work-card[data-src*="devvera-logo"],#portfolioGrid .work-card.logo-wide{grid-column:span 5;grid-row:span 11} } @media(max-width:760px){ #portfolioGrid.grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:24px;gap:10px} #portfolioGrid .work-card, #portfolioGrid .work-card.layout-hero, #portfolioGrid .work-card.layout-wide, #portfolioGrid .work-card.layout-banner, #portfolioGrid .work-card.layout-tall, #portfolioGrid .work-card.layout-large, #portfolioGrid .work-card.layout-medium, #portfolioGrid .work-card.layout-smallwide, #portfolioGrid .work-card.layout-small, #portfolioGrid .work-card[data-src*="devvera-logo"], #portfolioGrid .work-card.logo-wide{grid-column:span 6;grid-row:span 12} #portfolioGrid .work-card.layout-tall{grid-row:span 18} #portfolioGrid .work-card.layout-banner{grid-row:span 9} } @media(max-width:560px){ #portfolioGrid.grid{display:block;columns:1;gap:0} #portfolioGrid .work-card, #portfolioGrid .work-card.layout-hero, #portfolioGrid .work-card.layout-wide, #portfolioGrid .work-card.layout-banner, #portfolioGrid .work-card.layout-tall, #portfolioGrid .work-card.layout-large, #portfolioGrid .work-card.layout-medium, #portfolioGrid .work-card.layout-smallwide, #portfolioGrid .work-card.layout-small, #portfolioGrid .work-card[data-src*="devvera-logo"], #portfolioGrid .work-card.logo-wide{height:auto;margin:0 0 14px;padding:0} #portfolioGrid .work-card[data-src*="devvera-logo"],#portfolioGrid .work-card.logo-wide{padding:18px} #portfolioGrid .work-card img, #portfolioGrid .work-card.shape-tall.layout-tall img, #portfolioGrid .work-card.shape-tall.layout-large img{height:auto;object-fit:contain} #portfolioGrid .work-card:hover{transform:none} } /* v10 final gallery reset: restore the original loud masonry/collage feel while keeping the newer hero/site. */ #portfolioGrid.grid{ display:block !important; columns:4 260px !important; column-gap:16px !important; } #portfolioGrid .work-card, #portfolioGrid .work-card.shape-wide, #portfolioGrid .work-card.shape-square, #portfolioGrid .work-card.shape-tall, #portfolioGrid .work-card.logo-wide, #portfolioGrid .work-card.layout-hero, #portfolioGrid .work-card.layout-wide, #portfolioGrid .work-card.layout-banner, #portfolioGrid .work-card.layout-tall, #portfolioGrid .work-card.layout-large, #portfolioGrid .work-card.layout-medium, #portfolioGrid .work-card.layout-smallwide, #portfolioGrid .work-card.layout-small, #portfolioGrid .work-card[data-src*="devvera-logo"]{ display:block !important; break-inside:avoid !important; page-break-inside:avoid !important; grid-column:auto !important; grid-row:auto !important; width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important; margin:0 0 16px !important; padding:0 !important; border-radius:22px !important; overflow:hidden !important; background:#070707 !important; } #portfolioGrid .work-card img, #portfolioGrid .work-card.shape-wide img, #portfolioGrid .work-card.shape-square img, #portfolioGrid .work-card.shape-tall img, #portfolioGrid .work-card.logo-wide img, #portfolioGrid .work-card.layout-hero img, #portfolioGrid .work-card.layout-wide img, #portfolioGrid .work-card.layout-banner img, #portfolioGrid .work-card.layout-tall img, #portfolioGrid .work-card.layout-large img, #portfolioGrid .work-card.layout-medium img, #portfolioGrid .work-card.layout-smallwide img, #portfolioGrid .work-card.layout-small img{ display:block !important; width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; object-fit:contain !important; object-position:center center !important; background:#070707 !important; } #portfolioGrid .work-card[data-src*="devvera-logo"], #portfolioGrid .work-card.logo-wide{ padding:18px !important; background:#050505 !important; } #portfolioGrid .work-card[data-src*="devvera-logo"] img, #portfolioGrid .work-card.logo-wide img{ background:#050505 !important; object-fit:contain !important; } #portfolioGrid .work-card:hover{ transform:scale(1.025) !important; z-index:10 !important; box-shadow:0 24px 80px rgba(0,0,0,.58) !important; border-color:rgba(255,255,255,.24) !important; } #portfolioGrid .work-card:hover img{ transform:none !important; filter:brightness(.86) !important; } #portfolioGrid .work-card .caption{ opacity:0 !important; padding:34px 16px 16px !important; background:linear-gradient(transparent,rgba(0,0,0,.78)) !important; } #portfolioGrid .work-card:hover .caption{ opacity:1 !important; } @media(max-width:1100px){#portfolioGrid.grid{columns:3 240px !important;}} @media(max-width:760px){#portfolioGrid.grid{columns:2 180px !important;}} @media(max-width:560px){ #portfolioGrid.grid{columns:1 !important;} #portfolioGrid .work-card:hover{transform:none !important;} } /* v15 subtle charcoal + light-gray editorial background texture + gentle parallax feel */ body{ position:relative; isolation:isolate; background: radial-gradient(circle at 14% 12%, rgba(210,210,210,.12), transparent 28%), radial-gradient(circle at 86% 18%, rgba(245,245,245,.07), transparent 30%), radial-gradient(circle at 50% 84%, rgba(135,135,135,.10), transparent 34%), var(--bg); } body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: linear-gradient(120deg, rgba(180,180,180,.09), transparent 36%, rgba(245,245,245,.06) 66%, transparent), radial-gradient(circle at 20% 25%, rgba(175,175,175,.11), transparent 24%), radial-gradient(circle at 78% 72%, rgba(80,80,80,.18), transparent 28%); background-size:140% 140%, 110% 110%, 125% 125%; background-attachment:fixed; animation:grayDrift 24s ease-in-out infinite alternate; } body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.12; background-image: linear-gradient(rgba(230,230,230,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(230,230,230,.032) 1px, transparent 1px), radial-gradient(circle at center, rgba(230,230,230,.085) 0 1px, transparent 1.5px); background-size:72px 72px,72px 72px,18px 18px; background-attachment:fixed; mix-blend-mode:screen; } @keyframes grayDrift{ from{background-position:0% 0%, 8% 12%, 92% 78%; transform:translate3d(0,0,0) scale(1)} to{background-position:100% 70%, 24% 4%, 76% 92%; transform:translate3d(0,-1.2%,0) scale(1.025)} } .hero{ background: radial-gradient(circle at 78% 20%,rgba(210,210,210,.10),transparent 34%), radial-gradient(circle at 8% 72%,rgba(120,120,120,.11),transparent 28%), linear-gradient(135deg,rgba(7,7,7,.96) 0%,rgba(13,13,13,.94) 55%,rgba(23,23,23,.91) 100%); } .intro-grid,.about,.capabilities,.contact-card{ background:linear-gradient(180deg,rgba(18,18,18,.88),rgba(12,12,12,.90)); backdrop-filter:blur(10px); } .work{ background:linear-gradient(180deg,rgba(7,7,7,.16),rgba(24,24,24,.24)); } @media (prefers-reduced-motion: reduce){ body::before{animation:none;} } /* v16 button colour update */ .primary{background:#E37729 !important;color:var(--dark) !important;border-color:#E37729 !important;} .primary:hover{box-shadow:0 14px 38px rgba(227,119,41,.26);}