*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#efefec;color:#111;font-family:Arial,Helvetica,sans-serif}button{font:inherit;color:inherit}.top{position:fixed;z-index:30;left:28px;right:28px;top:24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;font-size:12px;line-height:1.25}.clock{font-variant-numeric:tabular-nums}.brand{font-weight:700;letter-spacing:-.02em}.menu{justify-self:end;border:0;background:none;font-size:11px;letter-spacing:.08em;cursor:pointer}.stage{position:fixed;inset:0;perspective:1500px;perspective-origin:53% 45%;touch-action:none;cursor:grab}.stage:active{cursor:grabbing}.rail{position:absolute;inset:0;transform-style:preserve-3d}.card{position:absolute;left:50%;top:50%;width:clamp(105px,10vw,170px);aspect-ratio:16/10;transform-style:preserve-3d;will-change:transform,opacity;transition:filter .32s ease,box-shadow .32s ease,opacity .28s ease;cursor:pointer;background:transparent;border-radius:3px;overflow:visible;isolation:isolate;--thumbShadow:0 20px 40px rgba(0,0,0,.14),0 8px 18px rgba(0,0,0,.08);--thumbGlow:0 0 0 rgba(255,240,214,0)}.card::before{content:'';position:absolute;inset:-1px;border-radius:4px;background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 20%,rgba(255,255,255,0) 42%,rgba(255,255,255,.10) 100%);opacity:.62;mix-blend-mode:screen;pointer-events:none;z-index:3}.card::after{content:'';position:absolute;left:10%;right:10%;bottom:-12%;height:24%;border-radius:50%;background:radial-gradient(ellipse at center, rgba(0,0,0,.20) 0%, rgba(0,0,0,.12) 35%, rgba(0,0,0,0) 75%);filter:blur(10px);transform:translateZ(-1px) scale(1.04);opacity:.55;pointer-events:none;z-index:0;transition:opacity .32s ease,transform .32s ease,filter .32s ease}.card img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;display:block;border-radius:3px;box-shadow:var(--thumbShadow),var(--thumbGlow);transition:filter .32s ease,box-shadow .32s ease,transform .32s ease}.card:hover,.card.is-hover{filter:brightness(1.03)}.card:hover::after,.card.is-hover::after{opacity:.78;transform:translateZ(-1px) scale(1.12);filter:blur(14px)}.card:hover img,.card.is-hover img{box-shadow:0 28px 58px rgba(0,0,0,.18),0 14px 28px rgba(0,0,0,.12),0 0 0 1px rgba(255,245,228,.92),0 0 28px rgba(255,236,200,.55)}.tick{position:absolute;left:50%;top:50%;width:26px;height:1px;background:#00000020;transform-origin:left center;pointer-events:none}.side{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:20;text-align:right;display:flex;flex-direction:column;gap:4px}.side button{border:0;background:none;padding:0;color:#aaa9a4;font-size:11px;cursor:pointer}.side button.active{color:#111;font-weight:700}.side small{font-size:7px;vertical-align:super;margin-left:3px}
.side-tools{
position:fixed;
right:22px;
bottom:22px;
display:flex;
justify-content:flex-end;
align-items:center;
gap:18px;
margin:0;
z-index:25;
height:24px;
}
.side-tools button,.side-tools a{
position:relative;
border:0;
background:transparent;
padding:0;
margin:0;
color:#555!important;
font-size:18px!important;
line-height:24px;
min-width:18px;
height:24px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-family:inherit;
vertical-align:middle;
}
.side-tools button::after,.side-tools a::after{
content:attr(data-label);
position:absolute;
right:50%;
bottom:30px;
transform:translateX(50%) translateY(4px);
padding:4px 6px;
border:1px solid rgba(0,0,0,.08);
background:#efefec;
color:#555;
font-size:8px;
line-height:1;
letter-spacing:.02em;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:.18s ease;
}
.side-tools button:hover::after,.side-tools a:hover::after,
.side-tools button:focus-visible::after,.side-tools a:focus-visible::after{
opacity:1;
transform:translateX(50%) translateY(0);
}
.side-tools button:hover,.side-tools a:hover{color:#111!important}.hint{position:fixed;left:18px;bottom:27px;z-index:20;color:#8e8d88;font-size:10px;letter-spacing:.04em;line-height:1}.meta{
position:fixed;
left:24.76vw;
right:25.0vw;
bottom:6px;
min-height:63px;
z-index:22;
display:grid;
grid-template-columns:minmax(280px,1fr) auto;
align-items:start;
gap:42px;
padding:0 0 0 21px;
font-size:11px;
line-height:1.45;
color:#111;
}
.meta::before{content:"";position:absolute;left:0;top:0;height:63px;width:1px;background:#b9b8b2}
.meta-copy{padding-top:0}.meta-copy strong{display:block;font-size:13px;margin-bottom:4px;line-height:1.25}
.meta-copy .place{font-weight:700;font-size:10px;letter-spacing:.03em;text-transform:uppercase;line-height:1.35}
.meta-copy .credit{font-size:10px;margin-top:3px;line-height:1.35}
.meta-actions{
display:flex;
align-items:center;
gap:12px;
padding:39px 0 0 0;
white-space:nowrap;
}
.meta-actions button{
border:1px solid rgba(0,0,0,.10);
background:transparent;
color:#555;
font-size:10px;
line-height:28px;
height:28px;
min-width:92px;
padding:0 12px;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
}
.viewer{display:none!important;position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .28s ease;background:rgba(239,239,236,.94)}.viewer.open{pointer-events:auto;opacity:1}.viewer-image{position:absolute;left:50%;top:47%;width:min(78vw,1120px);height:min(78vh,820px);object-fit:contain;transform-origin:center center;opacity:0;will-change:transform,opacity;transition:transform .78s cubic-bezier(.16,1,.3,1),opacity .16s ease}.viewer.open .viewer-image{opacity:1;filter:drop-shadow(0 40px 70px rgba(0,0,0,.18))}.viewer-meta b{color:#111;font-size:11px}.close{position:absolute;right:28px;bottom:28px;width:68px;height:68px;border-radius:50%;border:1px solid #00000022;background:#efefec;cursor:pointer;font-size:27px}.ghost{position:absolute;inset:0;perspective:1500px;opacity:.22;filter:blur(.3px);pointer-events:none}.expand{position:absolute;right:112px;bottom:31px;border:1px solid #00000020;background:#efefec;border-radius:99px;padding:10px 14px;font-size:9px;letter-spacing:.08em}.viewer-count{position:absolute;left:28px;bottom:30px;font-size:10px;color:#777}
/* CASE DISCOVERY — the artwork itself is the CTA */
.expand{display:none!important}
#metaView{display:none!important}
.viewer-image.case-ready{cursor:none;pointer-events:auto}
.viewer.open:has(.viewer-image.case-ready){cursor:none}
.plus-cursor{
position:fixed;left:0;top:0;z-index:120;
width:54px;height:54px;border:1px solid rgba(17,17,17,.55);
border-radius:50%;pointer-events:none;opacity:0;
transform:translate(-50%,-50%) scale(.72);
transition:opacity .14s ease,transform .18s cubic-bezier(.16,1,.3,1);
backdrop-filter:blur(3px);background:rgba(239,239,236,.22)
}
.plus-cursor::before,.plus-cursor::after{
content:"";position:absolute;left:50%;top:50%;background:#111;
transform:translate(-50%,-50%)
}
.plus-cursor::before{width:15px;height:1px}
.plus-cursor::after{width:1px;height:15px}
.plus-cursor.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.plus-cursor::selection{background:transparent}
@media(pointer:coarse){
.viewer-image.case-ready{cursor:pointer}
.plus-cursor{display:none}
}
/* TWO LEVEL TEST — archive -> project */
.case-intro{
width:min(1180px,calc(100vw - 96px));
margin:12vh auto 8vh;
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
gap:70px;
align-items:end;
}
.case-intro .project-copy{align-self:center}
.case-intro .project-kicker{
font-size:10px;
font-weight:650;
letter-spacing:.055em;
text-transform:uppercase;
margin-bottom:20px;
}
.case-intro .project-title{
font-size:clamp(54px,6.3vw,96px);
line-height:.9;
letter-spacing:-.065em;
margin:0;
font-weight:650;
}
.case-intro .project-description{
font-size:15px;
line-height:1.6;
margin:28px 0 0;
max-width:560px;
color:#3f3f3b;
}
.case-intro .project-data{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
margin-top:30px;
}
.case-intro .project-data-item{
border-top:1px solid rgba(17,17,17,.22);
padding-top:12px;
}
.case-intro .project-data-item span{
display:block;
font-size:9px;
letter-spacing:.08em;
color:#77756f;
margin-bottom:8px;
}
.case-intro .project-data-item strong{
display:block;
font-size:12px;
line-height:1.45;
font-weight:570;
}
.case-intro .project-cover{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
display:block;
border-radius:2px;
}
.case-intro .project-scroll{
margin-top:24px;
font-size:9px;
letter-spacing:.08em;
text-transform:uppercase;
display:flex;
align-items:center;
gap:8px;
}
.case-intro .project-scroll::after{
content:"↓";
font-size:15px;
line-height:1;
}
body.theme-dark .case-intro .project-description{color:#b6b6b0}
body.theme-dark .case-intro .project-data-item{border-top-color:rgba(255,255,255,.2)}
body.theme-dark .case-intro .project-data-item span{color:#888883}
@media(max-width:900px){
.case-intro{
width:auto;
margin:9vh 18px 6vh;
grid-template-columns:1fr;
gap:28px;
align-items:start;
}
.case-intro .project-cover{order:-1}
.case-intro .project-title{font-size:14vw}
.case-intro .project-description{font-size:13px}
.case-intro .project-data{gap:10px}
.case-intro .project-data-item strong{font-size:10px}
}
/* ZOOM PROJECT INFO — editorial hierarchy */
.viewer-info{
position:absolute;
left:5.2vw;
top:50%;
transform:translateY(-50%);
width:min(35vw,520px);
z-index:4;
color:#111;
pointer-events:none;
}
.viewer-kicker{
font-size:10px;
font-weight:650;
letter-spacing:.035em;
margin-bottom:18px;
text-transform:uppercase;
}
.viewer-heading{
margin:0;
font-size:clamp(42px,4.6vw,76px);
line-height:.92;
letter-spacing:-.055em;
font-weight:620;
max-width:470px;
}
.viewer-description{
margin:28px 0 0;
max-width:490px;
font-size:14px;
line-height:1.65;
letter-spacing:-.01em;
color:#343432;
}
.viewer-data{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
margin-top:28px;
}
.viewer-data-item{
border-top:1px solid rgba(17,17,17,.22);
padding-top:12px;
min-height:88px;
}
.viewer-data-item span{
display:block;
font-size:9px;
letter-spacing:.08em;
color:#77756f;
margin-bottom:8px;
}
.viewer-data-item strong{
display:block;
font-size:12px;
line-height:1.45;
font-weight:570;
color:#111;
}
.viewer-open-hint{
margin-top:23px;
font-size:9px;
font-weight:650;
letter-spacing:.07em;
display:flex;
align-items:center;
gap:9px;
}
.viewer-open-hint span{
display:inline-flex;
width:22px;height:22px;
border:1px solid rgba(17,17,17,.28);
border-radius:50%;
align-items:center;justify-content:center;
font-size:14px;font-weight:400;
}
.viewer.open .viewer-image{
left:69%;
top:48%;
width:min(56vw,900px);
height:min(76vh,780px);
}
body.theme-dark .viewer-info{color:#efefeb}
body.theme-dark .viewer-description{color:#b6b6b0}
body.theme-dark .viewer-data-item{border-top-color:rgba(255,255,255,.20)}
body.theme-dark .viewer-data-item span{color:#888883}
body.theme-dark .viewer-data-item strong{color:#efefeb}
body.theme-dark .viewer-open-hint span{border-color:rgba(255,255,255,.25)}
@media(max-width:900px){
.viewer-info{
left:22px;
right:22px;
top:auto;
bottom:80px;
transform:none;
width:auto;
background:linear-gradient(to top,rgba(239,239,236,.98) 78%,rgba(239,239,236,0));
padding-top:42px;
padding-right:8px;
}
body.theme-dark .viewer-info{
background:linear-gradient(to top,rgba(13,15,16,.98) 78%,rgba(13,15,16,0));
}
.viewer-heading{font-size:38px;max-width:78vw}
.viewer-description{font-size:12px;line-height:1.55;margin-top:16px;max-width:82vw}
.viewer-data{gap:10px;margin-top:18px}
.viewer-data-item{padding-top:9px;min-height:64px}
.viewer-data-item strong{font-size:10px}
.viewer-open-hint{margin-top:12px}
.viewer.open .viewer-image{
left:50%;
top:30%;
width:88vw;
height:46vh;
}
}
/* LIGHT / DARK TOGGLE — editorial icon language */
.theme-toggle{
position:fixed;
left:18px;
top:50%;
transform:translateY(-50%);
z-index:70;
width:34px;
height:58px;
border:1px solid rgba(17,17,17,.10);
border-radius:17px;
background:rgba(239,239,236,.86);
box-shadow:0 5px 16px rgba(0,0,0,.06);
backdrop-filter:blur(8px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
}
.theme-toggle button{
width:28px;
height:26px;
border:0;
background:transparent;
border-radius:13px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:#111;
opacity:.42;
transition:opacity .18s ease,background .18s ease,transform .18s ease;
}
.theme-toggle button:hover{opacity:.82;transform:scale(1.04)}
.theme-toggle button.active{
opacity:1;
background:rgba(17,17,17,.055)
}
.theme-toggle svg{
width:15px;
height:15px;
stroke:currentColor;
stroke-width:1.45;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}
body.theme-dark{
background:#0d0f10;
color:#f0f0ec;
}
body.theme-dark .top,
body.theme-dark .hint,
body.theme-dark .side,
body.theme-dark .meta,
body.theme-dark .side-tools{
color:#efefeb;
}
body.theme-dark .meta,
body.theme-dark .viewer,
body.theme-dark .case{
background:#0d0f10;
color:#efefeb;
}
body.theme-dark .case-intro p,
body.theme-dark .case-text p,
body.theme-dark .case-progress,
body.theme-dark .case-source{
color:#aaa;
}
body.theme-dark .case-close,
body.theme-dark .theme-toggle{
border-color:rgba(255,255,255,.12);
background:rgba(13,15,16,.82);
color:#f0f0ec;
}
body.theme-dark .theme-toggle button{color:#efefeb}
body.theme-dark .theme-toggle button.active{background:rgba(255,255,255,.08)}
body.theme-dark .plus-cursor{
border-color:rgba(255,255,255,.55);
background:rgba(13,15,16,.2)
}
body.theme-dark .plus-cursor::before,
body.theme-dark .plus-cursor::after{background:#f0f0ec}
body.theme-dark .card{
box-shadow:0 18px 38px rgba(0,0,0,.30)
}
body.theme-dark .meta::before{background:#3a3a38}
@media(max-width:700px){
.theme-toggle{
left:12px;
width:32px;
height:54px;
border-radius:16px;
}
.theme-toggle button{
width:26px;
height:24px;
}
}
.sr-only{
position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
white-space:nowrap!important;border:0!important
}
.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(min-width:701px) and (max-width:1100px){
.meta{left:22vw;right:18vw}
}
@media(max-width:700px){
.top{left:16px;right:16px;top:17px;font-size:10px}.brand{font-size:11px}.stage{perspective:900px}.card{width:138px}
.side{right:12px;top:auto;bottom:132px;transform:none}.side button{font-size:8px}.side-tools{right:14px;bottom:14px;gap:16px;margin:0;height:22px}.side-tools button,.side-tools a{font-size:17px!important;line-height:22px;height:22px;min-width:17px}
.hint{left:16px;bottom:16px;font-size:8px}
.meta{left:16px;right:16px;bottom:42px;min-height:auto;grid-template-columns:1fr;gap:8px;padding-left:14px}.meta::before{height:56px}
.meta-copy strong{font-size:11px}.meta-actions{gap:10px;padding:0}.meta-actions button{font-size:9px;height:26px;line-height:26px;min-width:88px;padding:0 10px}
.viewer-image{width:92vw;height:62vh;top:45%}
.close{right:16px;bottom:16px;width:58px;height:58px}.expand{right:84px;bottom:22px}.viewer-count{left:16px;bottom:24px}.clock span{display:none}
}
.case{
position:fixed;inset:0;z-index:90;background:#efefec;color:#111;
opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.case.open{opacity:1;pointer-events:auto}
.case-scroll{
position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:none;
}
.case-scroll::-webkit-scrollbar{display:none}
.case-top{
position:sticky;top:0;z-index:8;
display:grid;grid-template-columns:1fr auto 1fr;
align-items:start;
padding:18px 22px;
pointer-events:none;
mix-blend-mode:multiply;
}
.case-brand{grid-column:2;text-align:center;font-size:11px;font-weight:700;letter-spacing:-.02em}
.case-close{
grid-column:3;justify-self:end;pointer-events:auto;
width:42px;height:42px;border-radius:50%;border:1px solid rgba(0,0,0,.15);
background:rgba(239,239,236,.88);font-size:21px;cursor:pointer
}
.case-intro{
width:min(1120px,84vw);margin:9vh auto 8vh;
display:grid;grid-template-columns:1.1fr 1fr;gap:7vw;align-items:end
}
.case-intro :is(h1,h2){font-size:clamp(48px,7vw,104px);line-height:.88;margin:0;letter-spacing:-.07em;font-weight:700}
.case-kicker{font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.case-intro p{font-size:14px;line-height:1.55;margin:0;max-width:520px;color:#4d4d49}
.case-meta{margin-top:24px;font-size:10px;line-height:1.5;text-transform:uppercase}
.case-loop{width:100%;padding-bottom:12vh}
.case-sequence{width:min(1180px,88vw);margin:0 auto}
.case-sequence img{
display:block;width:100%;height:auto;margin:0 0 18px;
background:#ddd;box-shadow:0 16px 34px rgba(0,0,0,.07)
}
.case-text{
width:min(760px,72vw);margin:8vh auto 9vh;padding-left:20px;
border-left:1px solid #b8b7b1
}
.case-text h2{font-size:clamp(26px,3vw,44px);letter-spacing:-.04em;margin:0 0 16px}
.case-text p{font-size:14px;line-height:1.6;color:#4b4b47;margin:0 0 14px}
.case-progress{
position:fixed;left:20px;bottom:18px;z-index:95;font-size:9px;color:#777;
letter-spacing:.05em;pointer-events:none
}
.case-source{
position:fixed;right:20px;bottom:18px;z-index:95;font-size:9px;color:#777;
border:0;background:transparent;cursor:pointer
}
.case-sentinel{height:1px}
@media(max-width:700px){
.case-top{padding:14px}
.case-intro{width:auto;margin:8vh 16px 6vh;grid-template-columns:1fr;gap:24px}
.case-intro :is(h1,h2){font-size:17vw}
.case-sequence{width:100%}
.case-sequence img{margin-bottom:8px;box-shadow:none}
.case-text{width:auto;margin:6vh 18px;padding-left:14px}
.case-progress{left:14px;bottom:12px}
.case-source{right:14px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* FULLSCREEN MENU — brought back from Eduardo_Campos_Portfolio_Dark */
body.menu-open{overflow:hidden}
.menu{
justify-self:end;border:0;background:none;
display:flex;align-items:center;gap:14px;
cursor:pointer;font-size:10px;letter-spacing:.08em;
padding:8px 0;position:relative;z-index:92
}
.menu .menu-plus{
display:inline-block;font-size:24px;line-height:.7;font-weight:300;
transition:transform .45s cubic-bezier(.2,.8,.2,1)
}
body.menu-open .menu .menu-plus{transform:rotate(45deg)}
.menu-panel{
position:fixed;inset:0;z-index:90;
background:#0a0c0d;color:#f4f5ef;
padding:clamp(90px,12vh,140px) 5vw 5vw;
display:grid;grid-template-rows:auto 1fr auto;
opacity:0;visibility:hidden;transform:translateY(-12px);
transition:opacity .4s ease,transform .45s ease,visibility .4s;
}
body.menu-open .menu-panel{
opacity:1;visibility:visible;transform:none
}
.menu-meta{
font-size:10px;letter-spacing:.08em;color:#737a7d
}
.menu-panel nav{
display:flex;flex-direction:column;
justify-content:center;align-items:flex-start;
}
.menu-panel nav a{
color:inherit;text-decoration:none;
font-size:clamp(52px,8.6vw,126px);
letter-spacing:-.065em;line-height:.84;font-weight:300;
transition:opacity .2s ease,transform .25s ease;
}
.menu-panel nav:hover a{opacity:.22}
.menu-panel nav a:hover{opacity:1;transform:translateX(8px)}
.menu-panel nav sup{
font-size:10px;letter-spacing:.04em;
margin-left:9px;vertical-align:top
}
.menu-panel-footer{
display:flex;justify-content:space-between;gap:28px;
font-size:10px;line-height:1.6;letter-spacing:.04em;color:#858c8f
}
.menu-panel-footer span:last-child{text-align:right}
@media(max-width:700px){
.menu-panel{padding:100px 24px 28px}
.menu-panel nav a{font-size:clamp(48px,17vw,82px)}
.menu-panel-footer{font-size:9px}
.menu-meta{font-size:9px}
}
/* ABOUT PAGE + GLOBAL SEARCH */
.about-page{
position:fixed; inset:0; z-index:84;
background:#efefec; color:#111;
overflow:auto;
opacity:0; visibility:hidden; transform:translateY(16px);
transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility .35s;
}
.about-page.open{opacity:1;visibility:visible;transform:none}
body.theme-dark .about-page{background:#0d0f10;color:#efefeb}
.about-grid{
min-height:100vh;
width:min(1320px,calc(100vw - 160px));
margin:0 auto;
display:grid;
grid-template-columns:1.05fr .95fr;
gap:72px;
align-items:center;
padding:100px 0 90px;
}
.about-eyebrow{
font-size:11px;font-weight:650;line-height:1.35;
max-width:260px;margin-bottom:22px
}
.about-title{
font-size:clamp(64px,7vw,118px);
line-height:.86;letter-spacing:-.07em;
font-weight:650;margin:0;max-width:720px
}
.about-lead{
margin:32px 0 0;max-width:610px;
font-size:17px;line-height:1.65;color:#3d3d39
}
body.theme-dark .about-lead{color:#b8b8b2}
.about-more{
margin-top:28px;font-size:11px;font-weight:700;
letter-spacing:.02em
}
.about-visual{
position:relative; min-height:620px;
display:flex;align-items:center;justify-content:center
}
.about-photo{
width:min(34vw,470px);
aspect-ratio:4/5;
border-radius:46% 54% 49% 51% / 58% 42% 58% 42%;
overflow:hidden; position:relative;
background:
radial-gradient(circle at 28% 25%,rgba(255,219,107,.82),transparent 28%),
radial-gradient(circle at 67% 70%,rgba(65,148,255,.60),transparent 38%),
radial-gradient(circle at 78% 30%,rgba(255,111,181,.66),transparent 35%),
#e6e1dc;
box-shadow:0 24px 70px rgba(0,0,0,.07)
}
.about-photo::after{
content:"SUA FOTO";
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
font-size:11px;letter-spacing:.12em;
color:rgba(17,17,17,.44)
}
body.theme-dark .about-photo::after{color:rgba(255,255,255,.5)}
.about-capabilities{
min-height:92vh;
padding:90px max(8vw,90px) 120px;
display:grid;
grid-template-columns:1.35fr .65fr .65fr;
gap:6vw;
align-items:start;
border-top:1px solid rgba(17,17,17,.08)
}
body.theme-dark .about-capabilities{border-top-color:rgba(255,255,255,.1)}
.cap-label{font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.cap-main h3{
margin:20px 0 0;
max-width:650px;
font-size:clamp(42px,4.4vw,76px);
line-height:.96;letter-spacing:-.055em
}
.cap-column{display:flex;flex-direction:column;gap:64px}
.cap-card{border-top:1px solid rgba(17,17,17,.25);padding-top:12px}
body.theme-dark .cap-card{border-top-color:rgba(255,255,255,.22)}
.cap-card span{
font-size:10px;letter-spacing:.06em;text-transform:uppercase
}
.cap-card h4{
font-size:22px;line-height:1.15;letter-spacing:-.025em;
margin:12px 0 14px
}
.cap-card p{
font-size:14px;line-height:1.65;margin:0;color:#4f4f49
}
body.theme-dark .cap-card p{color:#aaa}
.back-btn{
position:fixed;left:24px;top:50%;
transform:translateY(-50%);
z-index:96;
width:42px;height:42px;border-radius:50%;
border:1px solid rgba(17,17,17,.1);
background:rgba(239,239,236,.88);
backdrop-filter:blur(8px);
display:none;align-items:center;justify-content:center;
cursor:pointer
}
.about-page.open ~ .back-btn{display:flex}
body.theme-dark .back-btn{
background:rgba(13,15,16,.86);color:#efefeb;
border-color:rgba(255,255,255,.12)
}
.back-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.search-btn{
position:fixed;left:24px;bottom:24px;z-index:96;
width:46px;height:46px;border-radius:50%;
border:1px solid rgba(17,17,17,.08);
background:rgba(239,239,236,.9);
backdrop-filter:blur(8px);
display:flex;align-items:center;justify-content:center;
cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.05)
}
body.theme-dark .search-btn{
background:rgba(13,15,16,.86);color:#efefeb;
border-color:rgba(255,255,255,.12)
}
.search-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.search-overlay{
position:fixed;inset:0;z-index:110;
background:rgba(8,10,11,.94);
color:#f3f3ef;
opacity:0;visibility:hidden;
transition:opacity .25s ease,visibility .25s
}
.search-overlay.open{opacity:1;visibility:visible}
.search-close{
position:absolute;left:24px;top:24px;
border:0;background:none;color:#fff;
width:40px;height:40px;font-size:30px;font-weight:200;cursor:pointer
}
.search-inner{
width:min(720px,calc(100vw - 48px));
margin:12vh auto 0
}
.search-field{
display:flex;align-items:center;gap:14px;
background:#202224;border-radius:16px;
padding:0 18px;height:58px
}
.search-field input{
flex:1;border:0;outline:0;background:transparent;
color:#fff;font-size:16px
}
.search-field input::placeholder{color:#8a8a8a}
.search-results{margin-top:18px;display:grid;gap:8px}
.search-result{
width:100%;text-align:left;border:0;
background:#151718;color:#f4f4ef;
padding:16px 18px;border-radius:12px;
cursor:pointer
}
.search-result small{
display:block;color:#777;margin-bottom:4px;
font-size:9px;letter-spacing:.06em;text-transform:uppercase
}
.search-result strong{font-size:16px;font-weight:600}
@media(max-width:900px){
.about-grid{
width:auto;margin:0 22px;
grid-template-columns:1fr;
gap:34px;padding:90px 0 70px
}
.about-title{font-size:17vw}
.about-visual{min-height:auto}
.about-photo{width:min(82vw,460px)}
.about-capabilities{
padding:70px 22px 100px;
grid-template-columns:1fr;
gap:52px
}
.cap-column{gap:38px}
.back-btn{left:12px;top:auto;bottom:82px;transform:none}
.search-btn{left:12px;bottom:18px}
}
/* MENU HIT AREA + HOVER */
.menu{
min-width:78px!important;
min-height:50px!important;
padding:10px 12px!important;
margin:-10px -12px 0 0!important;
border-radius:25px!important;
justify-content:flex-end!important;
}
.menu:hover{background:rgba(17,17,17,.045)}
body.theme-dark .menu:hover{background:rgba(255,255,255,.055)}
.menu .menu-plus{
width:30px;height:30px;
display:inline-flex!important;
align-items:center;justify-content:center;
border-radius:50%;
font-size:24px!important;
transition:transform .4s cubic-bezier(.2,.8,.2,1),background .25s ease,color .25s ease!important;
}
.menu:hover .menu-plus{
transform:rotate(90deg);
background:#111;color:#efefec;
}
body.theme-dark .menu:hover .menu-plus{
background:#efefec;color:#0d0f10;
}
body.menu-open .menu .menu-plus{
transform:rotate(45deg)!important;
background:#efefec;color:#0d0f10;
}
/* SEARCH POSITION + LAYOUT */
.search-btn{
left:26px!important;
bottom:22px!important;
width:52px!important;
height:52px!important;
z-index:98!important;
}
.search-overlay{
background:rgba(10,11,12,.965)!important;
}
.search-inner{
width:min(620px,calc(100vw - 64px))!important;
margin:12vh auto 0!important;
}
.search-field{
height:56px!important;
border-radius:14px!important;
background:#202124!important;
}
@media(max-width:900px){
.search-btn{left:14px!important;bottom:14px!important}
.search-inner{margin-top:11vh!important}
}
/* ABOUT — first screen */
.about-grid{
width:100%!important;
max-width:none!important;
min-height:100vh!important;
padding:0 9.6vw!important;
grid-template-columns:minmax(480px,.92fr) minmax(430px,1.08fr)!important;
gap:5vw!important;
position:relative;
background-image:linear-gradient(to right,rgba(17,17,17,.075) 1px,transparent 1px);
background-size:20vw 100%;
}
body.theme-dark .about-grid{
background-image:linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px);
}
.about-grid>div:first-child{align-self:center;max-width:650px}
.about-eyebrow{
max-width:260px!important;
font-size:16px!important;
line-height:1.45!important;
margin-bottom:24px!important;
}
.about-title{
font-size:clamp(70px,6.3vw,110px)!important;
line-height:.83!important;
letter-spacing:-.07em!important;
max-width:700px!important;
}
.about-lead{
margin-top:34px!important;
max-width:590px!important;
font-size:15px!important;
line-height:1.62!important;
}
.about-more{margin-top:22px!important}
.about-visual{min-height:100vh!important;align-items:center!important}
.about-photo{
width:min(38vw,560px)!important;
aspect-ratio:1/1.12!important;
border-radius:46% 54% 42% 58% / 58% 48% 52% 42%!important;
}
/* ABOUT — capabilities screen */
.about-capabilities{
min-height:100vh!important;
padding:12vh 10vw 12vh!important;
grid-template-columns:1.45fr .66fr .66fr!important;
gap:6vw!important;
background:#f4f4f2;
}
body.theme-dark .about-capabilities{background:#111315}
.cap-main h3{
max-width:690px!important;
font-size:clamp(46px,4.5vw,76px)!important;
line-height:1.02!important;
}
.cap-card h4{font-size:23px!important}
.cap-card p{font-size:15px!important}
.back-btn{
left:26px!important;
top:50%!important;
transform:translateY(-50%)!important;
width:46px!important;height:46px!important;
}
.about-page.open ~ .back-btn{display:flex!important}
.about-page.open ~ .theme-toggle{
left:26px!important;
top:calc(50% + 74px)!important;
}
@media(max-width:900px){
.about-grid{
padding:94px 22px 70px!important;
grid-template-columns:1fr!important;
background-size:50vw 100%!important;
}
.about-grid>div:first-child{max-width:none}
.about-eyebrow{font-size:13px!important}
.about-title{font-size:17vw!important}
.about-visual{min-height:auto!important}
.about-photo{width:min(88vw,520px)!important}
.about-capabilities{
padding:80px 22px 110px!important;
grid-template-columns:1fr!important;
}
.back-btn{
left:14px!important;top:auto!important;
bottom:78px!important;transform:none!important
}
}
/* ABOUT CONTINUATION */
.about-detail{
min-height:100vh;
display:grid;
grid-template-columns:1fr 1fr;
background:#efefec;color:#111;
}
body.theme-dark .about-detail{background:#0d0f10;color:#efefeb}
.about-detail-photo{
min-height:760px;
background:
radial-gradient(circle at 32% 30%,rgba(255,205,110,.5),transparent 28%),
radial-gradient(circle at 72% 72%,rgba(92,156,255,.45),transparent 35%),
#d9d9d4;
display:flex;align-items:center;justify-content:center;
overflow:hidden
}
.about-detail-placeholder{
font-size:10px;letter-spacing:.12em;opacity:.45
}
.about-detail-copy{
padding:11vh 7vw;
display:flex;flex-direction:column;justify-content:center
}
.about-detail-kicker{
font-size:10px;text-transform:uppercase;letter-spacing:.07em;
margin-bottom:24px
}
.about-detail-copy h3{
font-size:clamp(42px,4.3vw,72px);
line-height:.98;letter-spacing:-.055em;
max-width:700px;margin:0
}
.about-detail-copy>p{
font-size:15px;line-height:1.65;max-width:680px;
margin:28px 0 34px;color:#44443f
}
body.theme-dark .about-detail-copy>p{color:#aaa}
.about-accordion details{
border-top:1px solid rgba(17,17,17,.18);
padding:17px 0
}
body.theme-dark .about-accordion details{border-top-color:rgba(255,255,255,.18)}
.about-accordion summary{
list-style:none;cursor:pointer;
font-size:14px;font-weight:650;
display:flex;align-items:center;gap:14px
}
.about-accordion summary::-webkit-details-marker{display:none}
.about-accordion summary::before{
content:"+";
width:28px;height:28px;border-radius:50%;
background:rgba(17,17,17,.06);
display:inline-flex;align-items:center;justify-content:center;
font-size:18px;font-weight:300;
transition:transform .25s ease
}
body.theme-dark .about-accordion summary::before{background:rgba(255,255,255,.08)}
.about-accordion details[open] summary::before{content:"−";transform:rotate(180deg)}
.about-accordion details p{
margin:15px 0 0 42px;
max-width:620px;font-size:14px;line-height:1.6;color:#55554f
}
body.theme-dark .about-accordion details p{color:#999}
.clients-section{
min-height:52vh;
padding:9vh 8vw;
background:#f5f5f3;color:#111;
display:flex;flex-direction:column;justify-content:center;
overflow:hidden
}
body.theme-dark .clients-section{background:#111315;color:#efefeb}
.clients-head{
display:flex;justify-content:space-between;align-items:end;
gap:40px;margin-bottom:7vh
}
.clients-head span{
font-size:10px;text-transform:uppercase;letter-spacing:.07em
}
.clients-head strong{
font-size:22px;letter-spacing:-.02em;font-weight:550;
max-width:430px;text-align:right
}
.logo-marquee{
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.logo-track{
width:max-content;
display:flex;align-items:center;gap:7vw;
animation:logoFlow 28s linear infinite;
padding:26px 0
}
.logo-track:hover{animation-play-state:paused}
.logo-track span{
font-size:clamp(26px,3.2vw,48px);
font-weight:750;letter-spacing:-.045em;
opacity:.84;white-space:nowrap
}
@keyframes logoFlow{to{transform:translateX(-50%)}}
.contact-strip{
min-height:55vh;
background:#f4f4f2;color:#111;
padding:10vh 8vw;
display:grid;
grid-template-columns:1fr auto;
grid-template-rows:auto auto;
gap:42px;
align-items:center
}
body.theme-dark .contact-strip{background:#0f1112;color:#efefeb}
.contact-strip span{
font-size:10px;text-transform:uppercase;letter-spacing:.07em
}
.contact-strip h3{
margin:14px 0 0;
font-size:clamp(52px,5.5vw,92px);
line-height:.9;letter-spacing:-.06em
}
.contact-strip p{
grid-column:1/-1;
border-top:1px solid rgba(17,17,17,.22);
padding-top:28px;margin:0;
font-size:14px;line-height:1.6
}
body.theme-dark .contact-strip p{border-top-color:rgba(255,255,255,.2)}
.contact-pill{
text-decoration:none;color:#fff;background:#111;
border-radius:28px;padding:16px 22px;
font-size:11px;font-weight:700;letter-spacing:.04em;
display:flex;align-items:center;gap:22px;
transition:transform .2s ease
}
.contact-pill:hover{transform:translateX(5px)}
body.theme-dark .contact-pill{background:#efefeb;color:#111}
.about-footer{
min-height:34vh;background:#0c0e0f;color:#efefeb;
padding:8vh 8vw;
display:grid;grid-template-columns:1.2fr .7fr 1fr 1fr;
gap:5vw;align-items:start;
font-size:13px;line-height:1.65
}
.about-footer a{color:inherit;text-decoration:none}
.footer-name{
font-size:34px;line-height:.82;letter-spacing:-.06em;font-weight:750
}
@media(max-width:900px){
.about-detail{grid-template-columns:1fr}
.about-detail-photo{min-height:65vh}
.about-detail-copy{padding:70px 22px 90px}
.clients-section{padding:75px 22px}
.clients-head{display:block}
.clients-head strong{display:block;text-align:left;margin-top:15px}
.logo-track{gap:60px}
.contact-strip{
padding:75px 22px;
grid-template-columns:1fr
}
.contact-strip p{grid-column:auto}
.contact-pill{justify-self:start}
.about-footer{
padding:65px 22px;
grid-template-columns:1fr 1fr;
gap:45px 25px
}
}
/* CONTACT PAGE */
.contact-page{
position:fixed;inset:0;z-index:86;
background:#efefec;color:#111;
overflow:auto;
opacity:0;visibility:hidden;transform:translateY(18px);
transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility .35s
}
.contact-page.open{opacity:1;visibility:visible;transform:none}
body.theme-dark .contact-page{background:#0d0f10;color:#efefeb}
.contact-hero{
position:relative;min-height:58vh;
background:
linear-gradient(90deg,rgba(0,0,0,.56),rgba(0,0,0,.10)),
radial-gradient(circle at 24% 40%,rgba(255,205,116,.42),transparent 28%),
radial-gradient(circle at 78% 38%,rgba(96,157,255,.38),transparent 34%),
linear-gradient(135deg,#26292a,#4d4c47 50%,#1a1d1f);
color:#fff;display:flex;align-items:flex-end;
padding:8vh 10vw 7vh;overflow:hidden
}
.contact-hero-overlay{
position:absolute;inset:0;
background-image:linear-gradient(to right,rgba(255,255,255,.075) 1px,transparent 1px);
background-size:20vw 100%;
pointer-events:none
}
.contact-back{
position:absolute;top:34px;left:34px;
width:44px;height:44px;border-radius:50%;
border:1px solid rgba(255,255,255,.22);
background:rgba(0,0,0,.18);color:#fff;
backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;
cursor:pointer
}
.contact-back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.contact-hero-copy{position:relative;z-index:2;max-width:850px}
.contact-kicker{
font-size:10px;letter-spacing:.08em;text-transform:uppercase;
margin-bottom:18px;opacity:.7
}
.contact-hero :is(h1,h2){
margin:0;font-size:clamp(62px,6.5vw,112px);
line-height:.88;letter-spacing:-.065em
}
.contact-hero p{
max-width:620px;font-size:16px;line-height:1.6;
margin:24px 0 0;color:rgba(255,255,255,.78)
}
.contact-email-link{
display:inline-flex;margin-top:24px;
background:#fff;color:#111;text-decoration:none;
padding:15px 20px;border-radius:26px;
gap:18px;font-size:11px;font-weight:700;letter-spacing:.04em
}
.contact-info-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:6vw;padding:7vh 10vw 8vh;
border-bottom:1px solid rgba(17,17,17,.1)
}
body.theme-dark .contact-info-grid{border-bottom-color:rgba(255,255,255,.12)}
.contact-info-grid span{
display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
color:#777;margin-bottom:12px
}
.contact-info-grid strong{display:block;font-size:19px;margin-bottom:9px}
.contact-info-grid p,.contact-info-grid a{
font-size:14px;line-height:1.6;color:#555;text-decoration:none
}
body.theme-dark .contact-info-grid p,
body.theme-dark .contact-info-grid a{color:#aaa}
.contact-form-wrap{padding:10vh 10vw 13vh}
.contact-form-head{
display:grid;grid-template-columns:1fr .7fr;gap:8vw;
align-items:end;margin-bottom:54px
}
.contact-form-head span{
font-size:10px;text-transform:uppercase;letter-spacing:.07em
}
.contact-form-head h2{
margin:10px 0 0;
font-size:clamp(48px,5vw,82px);
line-height:.92;letter-spacing:-.06em
}
.contact-form-head p{
margin:0;font-size:14px;line-height:1.65;color:#555
}
body.theme-dark .contact-form-head p{color:#aaa}
.contact-form{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:28px 20px;
border-top:1px solid rgba(17,17,17,.22);
padding-top:42px
}
body.theme-dark .contact-form{border-top-color:rgba(255,255,255,.2)}
.field{display:flex;flex-direction:column;gap:9px}
.field-wide{grid-column:1/-1}
.field label{
font-size:11px;font-weight:620;letter-spacing:.01em
}
.field input,.field select,.field textarea{
width:100%;border:1px solid transparent;outline:0;
background:#e8e8e5;color:#111;
border-radius:14px;padding:0 16px;
font:inherit;font-size:14px;
transition:border-color .2s ease,background .2s ease
}
.field input,.field select{height:52px}
.field textarea{
min-height:190px;padding-top:16px;resize:vertical;line-height:1.55
}
.field input:focus,.field select:focus,.field textarea:focus{
border-color:rgba(17,17,17,.35);background:#f1f1ef
}
body.theme-dark .field input,
body.theme-dark .field select,
body.theme-dark .field textarea{
background:#1b1e20;color:#efefeb
}
body.theme-dark .field input:focus,
body.theme-dark .field select:focus,
body.theme-dark .field textarea:focus{
border-color:rgba(255,255,255,.32);background:#202426
}
.form-footer{
display:flex;align-items:center;justify-content:space-between;
gap:24px;margin-top:6px
}
.consent{
display:flex!important;flex-direction:row!important;
align-items:flex-start;gap:10px!important;
max-width:660px;font-weight:400!important;line-height:1.45
}
.consent input{width:16px!important;height:16px!important;margin-top:1px;padding:0!important}
.submit-lead{
border:0;background:#111;color:#fff;border-radius:28px;
min-height:50px;padding:0 22px;
font-size:11px;font-weight:700;letter-spacing:.04em;
display:flex;align-items:center;gap:18px;cursor:pointer
}
body.theme-dark .submit-lead{background:#efefeb;color:#111}
.form-status{
min-height:18px;font-size:12px;color:#666
}
@media(max-width:900px){
.contact-hero{padding:100px 22px 54px;min-height:62vh}
.contact-back{left:18px;top:18px}
.contact-info-grid{grid-template-columns:1fr;padding:60px 22px;gap:34px}
.contact-form-wrap{padding:70px 22px 100px}
.contact-form-head{grid-template-columns:1fr;gap:22px}
.contact-form{grid-template-columns:1fr;gap:20px}
.field-wide{grid-column:auto}
.form-footer{align-items:flex-start;flex-direction:column}
}
/* RIGHT PROJECT INDEX + SHARE */
.side{
right:22px!important;
left:auto!important;
top:50%!important;
transform:translateY(-50%)!important;
text-align:right!important;
align-items:flex-end!important;
}
.side button,
.side a{
text-align:right!important;
justify-content:flex-end!important;
}
.share-tool{
position:fixed;
right:22px;
top:50%;
transform:translateY(-50%);
z-index:72;
width:42px;height:42px;
border:1px solid rgba(17,17,17,.10);
border-radius:50%;
background:rgba(239,239,236,.88);
backdrop-filter:blur(8px);
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:transform .2s ease,background .2s ease;
}
.share-tool:hover{transform:translateY(-50%) scale(1.05)}
.share-tool svg{
width:17px;height:17px;
stroke:currentColor;fill:none;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round;
}
body.theme-dark .share-tool{
background:rgba(13,15,16,.86);
color:#efefeb;
border-color:rgba(255,255,255,.12);
}
.share-feedback{
position:fixed;
right:72px;
top:50%;
transform:translateY(-50%);
z-index:72;
background:#111;color:#fff;
font-size:9px;letter-spacing:.06em;
padding:8px 10px;border-radius:14px;
opacity:0;pointer-events:none;
transition:opacity .2s ease;
}
.share-feedback.show{opacity:1}
body.theme-dark .share-feedback{background:#efefeb;color:#111}
@media(max-width:700px){
.side{right:12px!important}
.share-tool{right:12px;width:40px;height:40px}
.share-feedback{right:60px}
}
.next-image,.nextImage,#nextImage,[data-next-image]{display:none!important}
.share-tool{
position:fixed!important;
right:24px!important;
bottom:24px!important;
top:auto!important;
transform:none!important;
width:46px!important;
height:46px!important;
z-index:72!important;
}
.share-tool:hover{transform:scale(1.05)!important}
.share-feedback{
right:80px!important;
bottom:32px!important;
top:auto!important;
transform:none!important;
}
@media(max-width:700px){
.share-tool{right:14px!important;bottom:14px!important}
.share-feedback{right:66px!important;bottom:22px!important}
}
/* PROJECT END — NEXT PROJECT + QUOTE CTA */
.project-end{
width:min(1180px,calc(100vw - 64px));
margin:9vh auto 11vh;
display:grid;
grid-template-columns:1fr minmax(300px,420px);
gap:7vw;
align-items:end;
border-top:1px solid rgba(17,17,17,.16);
padding-top:34px;
}
body.theme-dark .project-end{border-top-color:rgba(255,255,255,.16)}
.project-end-cta span{
display:block;
font-size:10px;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:14px;
color:#777
}
.project-end-cta h3{
margin:0;
font-size:clamp(42px,4.5vw,72px);
line-height:.96;
letter-spacing:-.055em;
max-width:620px
}
.project-end-cta p{
margin:18px 0 24px;
max-width:560px;
font-size:14px;
line-height:1.6;
color:#555
}
body.theme-dark .project-end-cta p{color:#aaa}
.project-quote-btn{
display:inline-flex;
align-items:center;
gap:16px;
text-decoration:none;
border-radius:26px;
background:#111;
color:#fff;
padding:15px 20px;
font-size:11px;
font-weight:700;
letter-spacing:.045em;
cursor:pointer;
}
body.theme-dark .project-quote-btn{background:#efefeb;color:#111}
.next-project-card{
display:block;
text-decoration:none;
color:inherit;
border-radius:18px;
overflow:hidden;
background:#f4f4f1;
box-shadow:0 14px 40px rgba(0,0,0,.06);
transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.next-project-card:hover{transform:translateY(-6px)}
body.theme-dark .next-project-card{background:#17191a}
.next-project-thumb{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
display:block;
background:#ddd
}
.next-project-copy{
padding:18px 18px 20px
}
.next-project-copy small{
display:block;
font-size:9px;
letter-spacing:.08em;
text-transform:uppercase;
color:#777;
margin-bottom:7px
}
.next-project-copy strong{
display:block;
font-size:22px;
line-height:1.05;
letter-spacing:-.03em
}
.next-project-copy em{
display:block;
margin-top:11px;
font-size:10px;
font-style:normal;
letter-spacing:.04em
}
@media(max-width:800px){
.project-end{
grid-template-columns:1fr;
width:auto;
margin:70px 18px 90px;
gap:42px;
}
}
/* PROJECT END — normal document flow at the true end of the case */
.project-end{
position:relative!important;
inset:auto!important;
transform:none!important;
z-index:1!important;
clear:both!important;
}
/* TRUE CASE FOOTER — part of the project scroll flow */
.case-scroll > .project-end{
position:relative!important;
inset:auto!important;
transform:none!important;
z-index:1!important;
width:min(1180px,88vw)!important;
min-height:clamp(360px,54vh,620px);
margin:clamp(70px,10vh,130px) auto 0!important;
padding:clamp(42px,6vh,78px) 0 clamp(70px,10vh,120px)!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(280px,420px)!important;
gap:clamp(36px,7vw,100px)!important;
align-items:center!important;
border-top:1px solid rgba(17,17,17,.16)!important;
background:transparent!important;
}
body.theme-dark .case-scroll > .project-end{
border-top-color:rgba(255,255,255,.16)!important;
}
.case-loop{
padding-bottom:0!important;
}
.case-sentinel{
height:1px!important;
}
@media(max-width:800px){
.case-scroll > .project-end{
width:calc(100% - 36px)!important;
min-height:auto!important;
margin:64px 18px 0!important;
padding:42px 0 88px!important;
grid-template-columns:1fr!important;
gap:38px!important;
}
}
/* BLOG — responsive editorial journal */
.blog-page{
position:fixed;inset:0;z-index:87;
background:#efefec;color:#111;
overflow:auto;
opacity:0;visibility:hidden;transform:translateY(18px);
transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility .35s;
}
.blog-page.open{opacity:1;visibility:visible;transform:none}
body.theme-dark .blog-page{background:#0d0f10;color:#efefeb}
.blog-top{
position:sticky;top:0;z-index:6;
height:68px;padding:0 28px;
display:grid;grid-template-columns:1fr auto 1fr;
align-items:center;
background:rgba(239,239,236,.88);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(17,17,17,.08)
}
body.theme-dark .blog-top{
background:rgba(13,15,16,.88);
border-bottom-color:rgba(255,255,255,.08)
}
.blog-back{
justify-self:start;
width:42px;height:42px;border-radius:50%;
border:1px solid rgba(17,17,17,.1);
background:transparent;color:inherit;
display:flex;align-items:center;justify-content:center;cursor:pointer
}
body.theme-dark .blog-back{border-color:rgba(255,255,255,.12)}
.blog-back svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.blog-brand{font-size:11px;font-weight:700;letter-spacing:-.01em}
.blog-count{justify-self:end;font-size:9px;letter-spacing:.08em;color:#777}
.blog-shell{
display:grid;
grid-template-columns:minmax(250px,320px) minmax(0,1fr);
min-height:calc(100vh - 68px)
}
.blog-sidebar{
position:sticky;top:68px;
height:calc(100vh - 68px);
border-right:1px solid rgba(17,17,17,.08);
padding:54px 28px 30px;
display:flex;flex-direction:column
}
body.theme-dark .blog-sidebar{border-right-color:rgba(255,255,255,.08)}
.blog-side-head span{
display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#777;margin-bottom:12px
}
.blog-side-head strong{
display:block;font-size:27px;line-height:1.02;letter-spacing:-.04em;max-width:220px
}
.blog-categories{
margin-top:48px;display:flex;flex-direction:column;align-items:flex-start;gap:4px
}
.blog-categories button{
border:0;background:none;padding:7px 0;color:inherit;
font-size:15px;cursor:pointer;opacity:.42;
transition:opacity .2s ease,transform .2s ease
}
.blog-categories button:hover,
.blog-categories button.active{opacity:1;transform:translateX(4px)}
.blog-categories sup{
font-size:8px;margin-left:5px;color:#888
}
.blog-sidebar-foot{
margin-top:auto;font-size:9px;line-height:1.55;color:#777;
display:grid;gap:8px
}
.blog-feed{
padding:42px clamp(28px,4vw,70px) 100px;
min-width:0
}
.blog-feature{
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(380px,1.15fr);
gap:50px;align-items:end;
padding-bottom:54px;
border-bottom:1px solid rgba(17,17,17,.12)
}
body.theme-dark .blog-feature{border-bottom-color:rgba(255,255,255,.12)}
.blog-meta{
display:block;font-size:9px;letter-spacing:.08em;color:#777;margin-bottom:14px
}
.blog-feature :is(h1,h2){
margin:0;font-size:clamp(50px,6vw,94px);
line-height:.86;letter-spacing:-.065em;max-width:720px
}
.blog-feature p{
max-width:600px;margin:25px 0 0;
font-size:15px;line-height:1.65;color:#50504a
}
body.theme-dark .blog-feature p{color:#aaa}
.blog-read{
margin-top:24px;border:0;background:#111;color:#fff;
padding:14px 18px;border-radius:24px;
font-size:10px;font-weight:700;letter-spacing:.06em;cursor:pointer
}
body.theme-dark .blog-read{background:#efefeb;color:#111}
.blog-feature-visual{
min-height:520px;
display:flex;align-items:center;justify-content:center
}
.blog-art{
position:relative;
overflow:hidden;
border-radius:28px;
box-shadow:0 28px 70px rgba(0,0,0,.12)
}
.blog-art-a{
width:min(100%,620px);aspect-ratio:4/5;
background:
radial-gradient(circle at 35% 30%,rgba(255,233,170,.95),transparent 24%),
radial-gradient(circle at 70% 65%,rgba(75,155,255,.78),transparent 34%),
radial-gradient(circle at 68% 25%,rgba(255,99,176,.72),transparent 32%),
#f6f3eb;
}
.blog-art-a::after{
content:"";position:absolute;inset:14% 18%;
border:1px solid rgba(17,17,17,.17);border-radius:34% 66% 42% 58% / 60% 45% 55% 40%;
}
.blog-art-a span,
.blog-card-art span{
position:absolute;top:18px;left:18px;
font-size:10px;letter-spacing:.08em
}
.blog-art-a strong{
position:absolute;left:28px;bottom:30px;
font-size:clamp(28px,4vw,56px);
line-height:.82;letter-spacing:-.06em
}
.blog-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:46px 28px;
padding-top:54px
}
.blog-card{min-width:0}
.blog-card-art{
width:100%;aspect-ratio:4/3;border-radius:18px;position:relative;overflow:hidden
}
.blog-art-b{background:linear-gradient(135deg,#e7dfd4,#c2b39d)}
.blog-art-c{background:radial-gradient(circle at 30% 35%,#fff6b2,transparent 30%),linear-gradient(135deg,#d7d6d0,#b4c8d9)}
.blog-art-d{background:linear-gradient(135deg,#c8d2ff,#7076e8 55%,#111)}
.blog-art-e{background:linear-gradient(135deg,#ececec,#a9a9a9)}
.blog-art-f{background:radial-gradient(circle at 70% 30%,#ff9dcc,transparent 25%),linear-gradient(135deg,#d9f0e8,#9ab7d9)}
.blog-card-copy{padding:18px 2px 0}
.blog-card h2{
margin:0;font-size:30px;line-height:1.02;letter-spacing:-.045em
}
.blog-card p{
margin:12px 0 0;font-size:13px;line-height:1.6;color:#5c5c55
}
body.theme-dark .blog-card p{color:#aaa}
.blog-card[hidden]{display:none!important}
@media(max-width:980px){
.blog-shell{grid-template-columns:1fr}
.blog-sidebar{
position:relative;top:0;height:auto;
border-right:0;border-bottom:1px solid rgba(17,17,17,.08);
padding:30px 22px 22px
}
body.theme-dark .blog-sidebar{border-bottom-color:rgba(255,255,255,.08)}
.blog-side-head strong{font-size:24px}
.blog-categories{
margin-top:22px;flex-direction:row;
overflow:auto;white-space:nowrap;
padding-bottom:4px;gap:18px
}
.blog-categories button{font-size:13px}
.blog-sidebar-foot{display:none}
.blog-feed{padding:32px 22px 90px}
.blog-feature{grid-template-columns:1fr;gap:28px}
.blog-feature-visual{min-height:auto}
.blog-art-a{width:100%;aspect-ratio:16/11;border-radius:20px}
.blog-feature :is(h1,h2){font-size:14vw}
}
@media(max-width:620px){
.blog-top{height:60px;padding:0 14px}
.blog-brand{font-size:10px}
.blog-count{display:none}
.blog-back{width:38px;height:38px}
.blog-sidebar{padding-top:22px}
.blog-feed{padding:24px 14px 80px}
.blog-feature{padding-bottom:36px}
.blog-feature p{font-size:13px}
.blog-grid{grid-template-columns:1fr;gap:38px;padding-top:38px}
.blog-card h2{font-size:27px}
.blog-card-art{border-radius:14px}
}
/* BLOG NAVIGATION LEVEL 2 — ARTICLE */
.article-page{
position:fixed;inset:0;z-index:89;
background:#efefec;color:#111;
overflow:auto;
opacity:0;visibility:hidden;transform:translateX(20px);
transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1),visibility .3s;
}
.article-page.open{opacity:1;visibility:visible;transform:none}
body.theme-dark .article-page{background:#0d0f10;color:#efefeb}
.article-top{
position:sticky;top:0;z-index:5;
height:68px;padding:0 28px;
display:grid;grid-template-columns:auto 1fr auto;
align-items:center;gap:22px;
background:rgba(239,239,236,.9);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(17,17,17,.08)
}
body.theme-dark .article-top{
background:rgba(13,15,16,.9);
border-bottom-color:rgba(255,255,255,.08)
}
.article-back{
width:42px;height:42px;border-radius:50%;
border:1px solid rgba(17,17,17,.1);
background:transparent;color:inherit;
display:flex;align-items:center;justify-content:center;cursor:pointer
}
body.theme-dark .article-back{border-color:rgba(255,255,255,.12)}
.article-back svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.article-breadcrumb{
font-size:9px;letter-spacing:.07em;color:#777;
display:flex;align-items:center;gap:8px
}
.article-breadcrumb strong{color:inherit;font-weight:600}
.article-brand{font-size:10px;font-weight:700}
.article-shell{
width:min(1180px,calc(100vw - 80px));
margin:0 auto;
padding:8vh 0 12vh
}
.article-intro{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:7vw;
align-items:end;
margin-bottom:7vh
}
.article-meta{
font-size:9px;letter-spacing:.08em;color:#777;margin-bottom:16px
}
.article-intro :is(h1,h2){
margin:0;
font-size:clamp(58px,7vw,116px);
line-height:.84;letter-spacing:-.07em;
max-width:820px
}
.article-intro>p{
margin:0 0 8px;
font-size:16px;line-height:1.65;color:#4f4f49;
max-width:520px
}
body.theme-dark .article-intro>p{color:#aaa}
.article-hero{
min-height:68vh;
border-radius:24px;
position:relative;overflow:hidden;
background:
radial-gradient(circle at 35% 28%,rgba(255,235,176,.95),transparent 24%),
radial-gradient(circle at 72% 64%,rgba(78,152,255,.78),transparent 34%),
radial-gradient(circle at 68% 25%,rgba(255,95,178,.72),transparent 32%),
#f6f3eb;
box-shadow:0 28px 70px rgba(0,0,0,.08)
}
.article-hero span{
position:absolute;top:24px;left:24px;
font-size:10px;letter-spacing:.08em
}
.article-hero strong{
position:absolute;left:38px;bottom:34px;
font-size:clamp(40px,7vw,104px);
line-height:.8;letter-spacing:-.065em
}
.article-body{
width:min(760px,100%);
margin:8vh auto 0;
font-size:17px;line-height:1.75
}
.article-body p{margin:0 0 28px}
.article-body h2{
margin:58px 0 18px;
font-size:34px;line-height:1.02;letter-spacing:-.04em
}
.article-drop::first-letter{
float:left;font-size:74px;line-height:.8;
padding-right:10px;font-weight:700
}
.article-body blockquote{
margin:52px 0;
padding:0 0 0 24px;
border-left:2px solid currentColor;
font-size:28px;line-height:1.25;
letter-spacing:-.03em
}
.article-next{
margin-top:10vh;
border-top:1px solid rgba(17,17,17,.18);
padding-top:24px
}
body.theme-dark .article-next{border-top-color:rgba(255,255,255,.18)}
.article-next>span{
display:block;font-size:9px;letter-spacing:.08em;
text-transform:uppercase;color:#777;margin-bottom:16px
}
.article-next button{
width:100%;border:0;background:none;color:inherit;padding:0;
display:flex;align-items:center;justify-content:space-between;
text-align:left;cursor:pointer
}
.article-next strong{
font-size:clamp(34px,5vw,72px);
line-height:.95;letter-spacing:-.05em;
max-width:850px
}
.article-next b{font-size:42px;font-weight:300}
@media(max-width:760px){
.article-top{height:60px;padding:0 14px;gap:12px}
.article-brand{display:none}
.article-shell{
width:auto;margin:0 14px;padding:54px 0 80px
}
.article-intro{grid-template-columns:1fr;gap:22px;margin-bottom:38px}
.article-intro :is(h1,h2){font-size:14.5vw}
.article-intro>p{font-size:14px}
.article-hero{min-height:58vh;border-radius:16px}
.article-body{font-size:16px;margin-top:56px}
.article-body h2{font-size:30px}
.article-body blockquote{font-size:24px}
}
/* BOTTOM TOOL GROUP — SAVE / SHARE / HELP */
.side-tools{
right:24px!important;
bottom:22px!important;
gap:18px!important;
z-index:105!important;
}
.side-tools button,.side-tools a{
width:24px!important;
min-width:24px!important;
height:28px!important;
}
.side-tools .inline-share svg{
width:17px;height:17px;
stroke:currentColor;fill:none;stroke-width:1.55;
stroke-linecap:round;stroke-linejoin:round;
}
.share-tool,.share-feedback{display:none!important}
/* SEARCH — preserve the archive instruction line */
.search-btn{
left:24px!important;
bottom:20px!important;
width:50px!important;
height:50px!important;
}
.hint{
left:94px!important;
bottom:31px!important;
max-width:calc(100vw - 300px)!important;
}
/* THEME CONTROL — always clickable above page layers */
.theme-toggle{
z-index:108!important;
pointer-events:auto!important;
}
.theme-toggle button{
pointer-events:auto!important;
}
/* Page layers sit below global UI controls */
.about-page,.contact-page,.blog-page,.article-page{z-index:86!important}
.search-overlay{z-index:120!important}
body.theme-dark .side-tools button,.side-tools a{color:#d7d7d2!important}
@media(max-width:700px){
.side-tools{right:14px!important;bottom:16px!important;gap:14px!important}
.search-btn{left:14px!important;bottom:14px!important}
.hint{
left:76px!important;
bottom:27px!important;
max-width:calc(100vw - 190px)!important;
font-size:8px!important;
}
}
/* DARK MODE LEGIBILITY — menu/index/blog */
body.theme-dark .side,
body.theme-dark .side button,
body.theme-dark .side small,
body.theme-dark .blog-side-head,
body.theme-dark .blog-side-head strong,
body.theme-dark .blog-categories button,
body.theme-dark .blog-categories sup,
body.theme-dark .menu-panel,
body.theme-dark .menu-panel nav a,
body.theme-dark .menu-meta,
body.theme-dark .menu-panel-footer{
color:#efefeb!important;
}
body.theme-dark .side button{
opacity:.58!important;
}
body.theme-dark .side button.active{
opacity:1!important;
color:#fff!important;
}
body.theme-dark .blog-categories button{
opacity:.52!important;
}
body.theme-dark .blog-categories button.active,
body.theme-dark .blog-categories button:hover{
opacity:1!important;
color:#fff!important;
}
body.theme-dark .blog-categories sup,
body.theme-dark .menu-meta,
body.theme-dark .menu-panel-footer{
color:#8e9395!important;
}
/* MORE BREATHING ROOM FOR THEME TOGGLE */
.theme-toggle{
height:74px!important;
border-radius:20px!important;
gap:10px!important;
padding:8px 0!important;
}
.theme-toggle button{
width:30px!important;
height:26px!important;
border-radius:14px!important;
}
@media(max-width:700px){
.theme-toggle{
height:70px!important;
gap:8px!important;
padding:8px 0!important;
}
}
/* CASE INTRO — no repeated project thumbnail at this level */
.case-intro .project-cover{display:none!important}
.case-intro{
grid-template-columns:minmax(0,760px)!important;
justify-content:start!important;
align-items:end!important;
}
.case-intro .project-copy{max-width:760px!important}
/* THEME TOGGLE — keep it away from sidebar/menu navigation */
.theme-toggle{
left:18px!important;
top:auto!important;
bottom:92px!important;
transform:none!important;
z-index:108!important;
}
.blog-page.open ~ .theme-toggle,
.article-page.open ~ .theme-toggle{
left:auto!important;
right:18px!important;
bottom:92px!important;
top:auto!important;
transform:none!important;
}
.about-page.open ~ .theme-toggle,
.contact-page.open ~ .theme-toggle{
left:18px!important;
right:auto!important;
bottom:92px!important;
top:auto!important;
transform:none!important;
}
/* Blog sidebar keeps a clean column with no UI overlap */
.blog-sidebar{
padding-bottom:120px!important;
}
@media(max-width:700px){
.theme-toggle{
left:12px!important;
bottom:78px!important;
}
.blog-page.open ~ .theme-toggle,
.article-page.open ~ .theme-toggle{
right:12px!important;
left:auto!important;
bottom:78px!important;
}
.blog-sidebar{
padding-bottom:24px!important;
}
}
/* BLOG ARTICLE — CASE STUDY SYSTEM */
.article-case{
width:min(1260px,calc(100vw - 84px));
margin:0 auto;
padding:8vh 0 12vh;
}
.article-hero-case{
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
gap:6vw;
align-items:end;
min-height:80vh;
}
.article-hero-copy :is(h1,h2){
margin:0;
font-size:clamp(64px,7vw,118px);
line-height:.82;
letter-spacing:-.075em
}
.article-hero-copy :is(h1,h2) span{
display:block;
opacity:0;
transform:translateY(28px)
}
.article-page.open .article-hero-copy :is(h1,h2) span{
animation:heroWords .7s cubic-bezier(.2,.8,.2,1) forwards
}
.article-page.open .article-hero-copy :is(h1,h2) span:nth-child(2){animation-delay:.08s}
.article-page.open .article-hero-copy :is(h1,h2) span:nth-child(3){animation-delay:.16s}
@keyframes heroWords{to{opacity:1;transform:none}}
.article-hero-copy>p{
margin:30px 0 0;
max-width:620px;
font-size:16px;
line-height:1.68;
color:#53534d
}
body.theme-dark .article-hero-copy>p{color:#aaa}
.article-hero-art{
min-height:66vh;
border-radius:28px;
position:relative;overflow:hidden;
background:
radial-gradient(circle at 35% 28%,rgba(255,235,176,.95),transparent 24%),
radial-gradient(circle at 72% 64%,rgba(78,152,255,.78),transparent 34%),
radial-gradient(circle at 68% 25%,rgba(255,95,178,.72),transparent 32%),
#f6f3eb;
box-shadow:0 30px 80px rgba(0,0,0,.09)
}
.article-hero-art span{
position:absolute;top:24px;left:24px;font-size:10px;letter-spacing:.08em
}
.article-hero-art strong{
position:absolute;left:32px;bottom:32px;
font-size:clamp(44px,6vw,92px);
line-height:.8;letter-spacing:-.065em
}
.article-summary{
margin-top:10vh;
border-top:1px solid rgba(17,17,17,.18);
border-bottom:1px solid rgba(17,17,17,.18);
padding:26px 0;
display:grid;
grid-template-columns:repeat(3,1fr) auto;
gap:28px;
align-items:center
}
body.theme-dark .article-summary{
border-color:rgba(255,255,255,.18)
}
.article-summary span,
.article-eyebrow{
display:block;font-size:9px;letter-spacing:.10em;
text-transform:uppercase;color:#777;margin-bottom:9px
}
.article-summary strong{font-size:13px;font-weight:600}
.article-summary a{
color:inherit;text-decoration:none;font-size:10px;
font-weight:700;letter-spacing:.06em;white-space:nowrap
}
.article-section{
padding:clamp(96px,12vh,150px) 0;
border-bottom:1px solid rgba(17,17,17,.10)
}
body.theme-dark .article-section{border-bottom-color:rgba(255,255,255,.10)}
.article-section h2{
margin:0;
max-width:820px;
font-size:clamp(48px,5.8vw,92px);
line-height:.91;
letter-spacing:-.06em
}
.article-section>p{
max-width:760px;
font-size:17px;line-height:1.76;
margin:26px 0 0;color:#4f4f49
}
body.theme-dark .article-section>p{color:#aaa}
.article-section a{color:inherit;text-underline-offset:3px}
.article-gallery{
display:grid;gap:28px;margin-top:54px
}
.article-gallery.three{grid-template-columns:repeat(3,1fr)}
.article-gallery.two{grid-template-columns:repeat(2,1fr)}
.article-media{
min-height:480px;border-radius:16px;overflow:hidden;
background:#ddd;will-change:transform
}
.art-one{background:linear-gradient(145deg,#c8d6f8,#7e87d9 60%,#141414)}
.art-two{background:radial-gradient(circle at 35% 30%,#ffe7a9,transparent 28%),linear-gradient(135deg,#d7e9de,#d79bc3)}
.art-three{background:linear-gradient(135deg,#e6ded3,#aaa197)}
.art-four{background:linear-gradient(145deg,#111,#454545)}
.art-five{background:radial-gradient(circle at 70% 30%,#ff9dcc,transparent 25%),linear-gradient(135deg,#d9f0e8,#9ab7d9)}
.article-stats{
display:grid;grid-template-columns:repeat(4,1fr);
gap:24px;margin-top:58px
}
.article-stats div{
border-top:1px solid rgba(17,17,17,.18);padding-top:18px
}
body.theme-dark .article-stats div{border-top-color:rgba(255,255,255,.18)}
.article-stats strong{
display:block;font-size:clamp(48px,5vw,80px);
line-height:.9;letter-spacing:-.05em
}
.article-stats span{
display:block;margin-top:11px;font-size:11px;color:#777
}
.award-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:22px;margin-top:54px
}
.award-card{
padding:26px;border:1px solid rgba(17,17,17,.10);
border-radius:16px;min-height:220px
}
body.theme-dark .award-card{border-color:rgba(255,255,255,.10)}
.award-logo{
position:relative;height:88px;margin-bottom:34px
}
.award-logo span{
position:absolute;inset:0;display:flex;align-items:center;
font-size:32px;font-weight:800;transition:opacity .25s ease
}
.award-logo span:nth-child(2){opacity:0;color:#fff}
.award-card:hover{background:#111;color:#fff}
body.theme-dark .award-card:hover{background:#efefeb;color:#111}
.award-card:hover .award-logo span:first-child{opacity:0}
.award-card:hover .award-logo span:nth-child(2){opacity:1}
body.theme-dark .award-card:hover .award-logo span:nth-child(2){color:#111}
.award-card p{font-size:12px;color:#777}
.services-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:22px;margin-top:54px
}
.service-art{
aspect-ratio:4/5;border-radius:14px;margin-bottom:18px
}
.s1{background:linear-gradient(145deg,#222,#777)}
.s2{background:linear-gradient(145deg,#d8cbb7,#8f7b67)}
.s3{background:linear-gradient(145deg,#a7b8ff,#393f8f)}
.s4{background:linear-gradient(145deg,#f4a8ce,#f1d8a4)}
.services-grid h3{
margin:0;font-size:22px;line-height:1.05;letter-spacing:-.035em
}
.services-grid p{
margin:10px 0 0;font-size:12px;line-height:1.55;color:#777
}
.article-collab-head{
display:flex;justify-content:space-between;align-items:end;gap:40px
}
.article-collab-head button{
border:0;background:#111;color:#fff;border-radius:28px;
padding:16px 21px;font-size:10px;font-weight:700;letter-spacing:.06em;
cursor:pointer
}
body.theme-dark .article-collab-head button{background:#efefeb;color:#111}
.article-contact-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:24px;margin-top:64px
}
.article-contact-grid div{
border-top:1px solid rgba(17,17,17,.18);padding-top:18px
}
body.theme-dark .article-contact-grid div{border-top-color:rgba(255,255,255,.18)}
.article-contact-grid span{font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.article-contact-grid p{font-size:13px;line-height:1.55;color:#777}
.article-contact-grid a{font-size:13px;color:inherit}
.article-project-nav{
display:flex;justify-content:space-between;gap:30px;
padding-top:42px
}
.article-project-nav button{
border:0;background:none;color:inherit;padding:0;
font-size:11px;letter-spacing:.06em;cursor:pointer
}
.article-project-nav #articleNext{
display:flex;align-items:center;gap:14px;text-align:right
}
.article-project-nav strong{
font-size:20px;letter-spacing:-.025em
}
.reveal-block{
opacity:0;transform:translateY(36px);
transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)
}
.reveal-block.is-visible{opacity:1;transform:none}
@media(max-width:900px){
.article-case{width:auto;margin:0 20px;padding-top:50px}
.article-hero-case{grid-template-columns:1fr;min-height:auto}
.article-hero-art{min-height:58vh;margin-top:18px}
.article-summary{grid-template-columns:1fr 1fr}
.article-summary a{grid-column:1/-1}
.article-gallery.three,.article-gallery.two{grid-template-columns:1fr}
.article-media{min-height:52vh}
.article-stats{grid-template-columns:1fr 1fr}
.award-grid,.services-grid{grid-template-columns:1fr 1fr}
.article-contact-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
.article-case{margin:0 14px}
.article-hero-copy :is(h1,h2){font-size:15vw}
.article-hero-copy>p,.article-section>p{font-size:14px}
.article-section{padding:76px 0}
.article-section h2{font-size:13vw}
.article-summary{grid-template-columns:1fr}
.article-stats,.award-grid,.services-grid{grid-template-columns:1fr}
.article-collab-head{display:block}
.article-collab-head button{margin-top:26px}
.article-project-nav{display:grid}
.article-project-nav #articleNext{text-align:left}
}
/* FIX — About navigation controls must never overlap */
.about-page.open ~ .back-btn{
display:flex!important;
left:18px!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
z-index:110!important;
}
.about-page.open ~ .theme-toggle{
left:18px!important;
right:auto!important;
top:calc(50% + 76px)!important;
bottom:auto!important;
transform:none!important;
z-index:109!important;
}
.about-page.open ~ .search-btn{
left:18px!important;
bottom:18px!important;
}
@media(max-width:700px){
.about-page.open ~ .back-btn{
left:12px!important;
top:auto!important;
bottom:88px!important;
transform:none!important;
}
.about-page.open ~ .theme-toggle{
left:12px!important;
top:auto!important;
bottom:154px!important;
transform:none!important;
}
.about-page.open ~ .search-btn{
left:12px!important;
bottom:16px!important;
}
}
/* SAFE GLOBAL CONTROLS RAIL */
.theme-toggle{
left:18px!important;
right:auto!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
z-index:118!important;
}
.theme-toggle button{pointer-events:auto!important}
.search-btn{
left:18px!important;
bottom:18px!important;
z-index:118!important;
}
/* when BLOG is open, move theme rail to the right so it never overlaps categories */
.blog-page.open ~ .theme-toggle,
.article-page.open ~ .theme-toggle{
left:auto!important;
right:18px!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
/* when case/portfolio is open, keep pagination area clear on the right */
.case.open ~ .theme-toggle,
#caseView.open ~ .theme-toggle{
left:18px!important;
right:auto!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
/* About uses back button at center-left, so theme sits clearly below it */
.about-page.open ~ .theme-toggle{
left:18px!important;
right:auto!important;
top:calc(50% + 96px)!important;
bottom:auto!important;
transform:none!important;
}
/* Contact page: keep theme centered left */
.contact-page.open ~ .theme-toggle{
left:18px!important;
right:auto!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
@media(max-width:700px){
.theme-toggle{
left:12px!important;
top:auto!important;
bottom:86px!important;
transform:none!important;
}
.blog-page.open ~ .theme-toggle,
.article-page.open ~ .theme-toggle{
right:12px!important;
left:auto!important;
top:auto!important;
bottom:86px!important;
transform:none!important;
}
.about-page.open ~ .theme-toggle{
left:12px!important;
top:auto!important;
bottom:148px!important;
}
}
/* ===== V42 VERIFIED UI CONTEXT FIXES ===== */
/* Search never overlaps archive instruction */
.search-btn{
left:18px!important;
bottom:18px!important;
width:50px!important;
height:50px!important;
z-index:116!important;
}
.hint{
left:88px!important;
bottom:34px!important;
max-width:calc(100vw - 360px)!important;
white-space:nowrap!important;
z-index:26!important;
}
/* Theme toggle: neutral default position */
.theme-toggle{
left:18px!important;
right:auto!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
z-index:116!important;
pointer-events:auto!important;
}
.theme-toggle button{pointer-events:auto!important}
/* About: back/pagination remains center-left, theme gets its own lane below it */
body.ui-about .back-btn{
display:flex!important;
left:18px!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
z-index:117!important;
}
body.ui-about .theme-toggle{
left:18px!important;
right:auto!important;
top:calc(50% + 112px)!important;
bottom:auto!important;
transform:none!important;
}
/* Blog/article: categories live left, so theme lives right-center */
body.ui-blog .theme-toggle,
body.ui-article .theme-toggle{
left:auto!important;
right:18px!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
/* Portfolio case: keep right pagination/progress clean */
body.ui-case .theme-toggle{
left:18px!important;
right:auto!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
/* Keep global tools above pages but below overlays */
.about-page,.blog-page,.article-page,.contact-page,.case{z-index:86!important}
.search-overlay{z-index:130!important}
.case-top,.case-close{z-index:120!important}
/* Dark-mode readability */
body.theme-dark .menu-panel,
body.theme-dark .menu-panel nav a,
body.theme-dark .side,
body.theme-dark .side button,
body.theme-dark .blog-sidebar,
body.theme-dark .blog-categories button,
body.theme-dark .blog-side-head strong{
color:#f0f0ec!important;
}
/* Mobile safe positions */
@media(max-width:700px){
.search-btn{left:12px!important;bottom:12px!important}
.hint{
left:74px!important;
bottom:29px!important;
max-width:calc(100vw - 190px)!important;
font-size:8px!important;
}
.theme-toggle{
left:12px!important;
top:auto!important;
bottom:82px!important;
transform:none!important;
}
body.ui-about .back-btn{
left:12px!important;
top:auto!important;
bottom:146px!important;
transform:none!important;
}
body.ui-about .theme-toggle{
left:12px!important;
top:auto!important;
bottom:220px!important;
transform:none!important;
}
body.ui-blog .theme-toggle,
body.ui-article .theme-toggle{
left:auto!important;
right:12px!important;
top:auto!important;
bottom:82px!important;
transform:none!important;
}
}
/* V43 — static collision guards */
.search-btn{
left:18px!important;
bottom:18px!important;
width:50px!important;
height:50px!important;
}
.hint{
left:92px!important;
bottom:34px!important;
max-width:calc(100vw - 430px)!important;
white-space:nowrap!important;
}
/* About: explicit positions even before JS context sync */
.about-page.open ~ .back-btn{
display:flex!important;
left:18px!important;
top:46%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
body.ui-about .theme-toggle{
left:18px!important;
right:auto!important;
top:62%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
/* Blog: theme control stays away from category menu */
body.ui-blog .theme-toggle,
body.ui-article .theme-toggle{
left:auto!important;
right:18px!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
/* Case: theme stays left; case close always clickable */
body.ui-case .theme-toggle{
left:18px!important;
right:auto!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
#caseClose{
pointer-events:auto!important;
z-index:140!important;
}
/* Blog menu item must always be visible in dark mode */
body.theme-dark .menu-panel nav a{
color:#f4f4ef!important;
opacity:1;
}
/* V44 — surgical case controls fix */
/* top-left back control */
.case-back{
position:fixed!important;
left:28px!important;
top:24px!important;
z-index:145!important;
width:42px!important;
height:42px!important;
border:1px solid rgba(255,255,255,.18)!important;
border-radius:50%!important;
background:rgba(0,0,0,.16)!important;
color:#f3f3ef!important;
backdrop-filter:blur(8px)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
cursor:pointer!important;
}
.case-back svg{
width:17px!important;
height:17px!important;
stroke:currentColor!important;
fill:none!important;
stroke-width:1.7!important;
}
/* top-right close: same visual language, higher contrast */
#caseClose{
position:fixed!important;
right:24px!important;
top:24px!important;
width:42px!important;
height:42px!important;
border-radius:50%!important;
background:rgba(255,255,255,.08)!important;
border:1px solid rgba(255,255,255,.18)!important;
color:#f4f4ef!important;
opacity:1!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:22px!important;
line-height:1!important;
z-index:145!important;
}
/* bottom-left: progress and search must never collide */
body.ui-case .search-btn{
left:22px!important;
bottom:22px!important;
}
body.ui-case .case-progress{
left:88px!important;
bottom:30px!important;
z-index:118!important;
white-space:nowrap!important;
}
/* bottom-right tool trio: lift and align so labels never clip */
body.ui-case .side-tools{
right:26px!important;
bottom:28px!important;
z-index:118!important;
gap:18px!important;
height:28px!important;
}
body.ui-case .side-tools button,.side-tools a{
width:24px!important;
min-width:24px!important;
height:28px!important;
}
body.ui-case .side-tools button::after,.side-tools a::after{
bottom:34px!important;
}
/* Keep source/progress away from tool trio */
body.ui-case .case-source{
right:130px!important;
bottom:31px!important;
}
@media(max-width:700px){
.case-back{left:12px!important;top:12px!important;width:38px!important;height:38px!important}
#caseClose{right:12px!important;top:12px!important;width:38px!important;height:38px!important}
body.ui-case .search-btn{left:12px!important;bottom:12px!important}
body.ui-case .case-progress{left:74px!important;bottom:27px!important;font-size:8px!important}
body.ui-case .side-tools{right:12px!important;bottom:18px!important;gap:13px!important}
}
/* LANGUAGE SWITCHER */
.lang-switch{
position:fixed;
top:22px;
right:88px;
z-index:146;
display:flex;
align-items:center;
gap:3px;
padding:4px;
border:1px solid rgba(17,17,17,.10);
border-radius:16px;
background:rgba(239,239,236,.82);
backdrop-filter:blur(8px);
box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.lang-switch button{
border:0;
background:transparent;
color:inherit;
min-width:28px;
height:24px;
border-radius:12px;
font-size:9px;
font-weight:650;
letter-spacing:.06em;
cursor:pointer;
opacity:.48;
transition:opacity .18s ease, background .18s ease;
}
.lang-switch button:hover{opacity:.82}
.lang-switch button.active{
opacity:1;
background:rgba(17,17,17,.07);
}
body.theme-dark .lang-switch{
background:rgba(13,15,16,.82);
border-color:rgba(255,255,255,.12);
color:#efefeb;
}
body.theme-dark .lang-switch button.active{
background:rgba(255,255,255,.09);
}
/* On case view keep it clear of the close button */
body.ui-case .lang-switch{
right:82px;
top:24px;
}
/* On mobile keep it centered and compact */
@media(max-width:700px){
.lang-switch{
top:14px;
right:58px;
padding:3px;
}
.lang-switch button{
min-width:26px;
height:22px;
font-size:8px;
}
body.ui-case .lang-switch{
right:58px;
top:14px;
}
}
/* LANGUAGE — single flag + popover */
.lang-switch{
position:fixed;
top:22px;
right:88px;
z-index:146;
}
.lang-current{
width:34px;
height:34px;
border-radius:50%;
border:1px solid rgba(17,17,17,.10);
background:rgba(239,239,236,.84);
backdrop-filter:blur(8px);
display:flex;
align-items:center;
justify-content:center;
padding:0;
cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.lang-current .flag{
font-size:16px;
line-height:1;
}
.lang-menu{
position:absolute;
right:0;
top:42px;
min-width:92px;
padding:6px;
border:1px solid rgba(17,17,17,.10);
border-radius:14px;
background:rgba(239,239,236,.96);
backdrop-filter:blur(10px);
box-shadow:0 10px 28px rgba(0,0,0,.08);
opacity:0;
visibility:hidden;
transform:translateY(-6px) scale(.98);
transform-origin:top right;
transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.lang-switch.open .lang-menu{
opacity:1;
visibility:visible;
transform:none;
}
.lang-menu button{
width:100%;
height:34px;
border:0;
border-radius:9px;
background:transparent;
color:inherit;
display:flex;
align-items:center;
gap:9px;
padding:0 9px;
font-size:10px;
font-weight:650;
letter-spacing:.04em;
cursor:pointer;
}
.lang-menu button:hover{
background:rgba(17,17,17,.06);
}
.lang-menu .flag{
font-size:15px;
}
body.theme-dark .lang-current,
body.theme-dark .lang-menu{
background:rgba(13,15,16,.92);
color:#efefeb;
border-color:rgba(255,255,255,.12);
}
body.theme-dark .lang-menu button:hover{
background:rgba(255,255,255,.08);
}
body.ui-case .lang-switch{
right:82px;
top:24px;
}
@media(max-width:700px){
.lang-switch{top:14px;right:58px}
body.ui-case .lang-switch{right:58px;top:14px}
.lang-current{width:32px;height:32px}
.lang-menu{top:39px;min-width:88px}
}
/* v46.1 — ROUND FLAG LANGUAGE SELECTOR */
.lang-switch{
position:fixed;
top:22px;
right:88px;
z-index:146;
}
.lang-current{
width:36px!important;
height:36px!important;
padding:0!important;
border-radius:50%!important;
border:1px solid rgba(17,17,17,.12)!important;
background:rgba(239,239,236,.72)!important;
box-shadow:0 5px 16px rgba(0,0,0,.055)!important;
backdrop-filter:blur(8px);
overflow:hidden;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:transform .2s ease, box-shadow .2s ease;
}
.lang-current:hover{
transform:scale(1.06);
box-shadow:0 8px 22px rgba(0,0,0,.09)!important;
}
.lang-current .flag,
.lang-menu .flag{
width:26px;
height:26px;
min-width:26px;
border-radius:50%;
overflow:hidden;
display:block;
font-size:0!important;
line-height:0!important;
background-size:cover!important;
background-position:center!important;
box-shadow:inset 0 0 0 1px rgba(17,17,17,.08);
}
.lang-current .flag{width:28px;height:28px;min-width:28px}
/* Circular flag art */
.flag-br{
background:
linear-gradient(30deg,transparent 38%,#f7d117 38% 62%,transparent 62%),
linear-gradient(-30deg,transparent 38%,#f7d117 38% 62%,transparent 62%),
radial-gradient(circle at 50% 50%,#244aa5 0 27%,transparent 28%),
#179447!important;
}
.flag-us{
background:
linear-gradient(to bottom,
#b22234 0 7.69%,#fff 7.69% 15.38%,
#b22234 15.38% 23.07%,#fff 23.07% 30.76%,
#b22234 30.76% 38.45%,#fff 38.45% 46.14%,
#b22234 46.14% 53.83%,#fff 53.83% 61.52%,
#b22234 61.52% 69.21%,#fff 69.21% 76.90%,
#b22234 76.90% 84.59%,#fff 84.59% 92.28%,
#b22234 92.28% 100%)!important;
position:relative;
}
.flag-us::after{
content:"";
position:absolute;left:0;top:0;
width:52%;height:54%;
background:#3c3b6e;
}
.flag-es{
background:linear-gradient(to bottom,#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75% 100%)!important;
}
.lang-menu{
top:44px!important;
right:0!important;
min-width:132px!important;
padding:7px!important;
border-radius:16px!important;
}
.lang-menu button{
height:40px!important;
gap:10px!important;
padding:0 10px!important;
border-radius:11px!important;
font-size:10px!important;
}
.lang-menu button span:last-child{
letter-spacing:.05em;
}
body.theme-dark .lang-current{
background:rgba(13,15,16,.72)!important;
border-color:rgba(255,255,255,.14)!important;
}
@media(max-width:700px){
.lang-switch{top:14px;right:58px}
body.ui-case .lang-switch{right:58px;top:14px}
.lang-current{width:34px!important;height:34px!important}
.lang-current .flag{width:26px;height:26px;min-width:26px}
}
/* v46.2 — naked round flag + mobile cleanup */
.lang-current{
width:30px!important;
height:30px!important;
padding:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
overflow:visible!important;
}
.lang-current:hover{
transform:scale(1.08)!important;
box-shadow:none!important;
}
.lang-current .flag{
width:30px!important;
height:30px!important;
min-width:30px!important;
box-shadow:none!important;
}
/* Portugal */
.flag-pt{
background:
linear-gradient(to right,#046a38 0 40%,#da291c 40% 100%)!important;
position:relative;
}
.flag-pt::after{
content:"";
position:absolute;
width:7px;height:7px;
border:1px solid #f7d117;
border-radius:50%;
left:37%;top:50%;
transform:translate(-50%,-50%);
box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
/* Make the dropdown itself the only surfaced element */
.lang-menu{
min-width:148px!important;
}
.lang-menu .flag{
box-shadow:none!important;
}
/* MOBILE: keep the 3D archive readable and stop UI collisions */
@media(max-width:700px){
.top{
left:14px!important;
right:14px!important;
top:16px!important;
grid-template-columns:1fr auto 1fr!important;
}
.brand{
max-width:150px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.lang-switch{
top:14px!important;
right:54px!important;
}
.lang-current{
width:28px!important;
height:28px!important;
}
.lang-current .flag{
width:28px!important;
height:28px!important;
min-width:28px!important;
}
.lang-menu{
right:-2px!important;
top:36px!important;
min-width:142px!important;
}
/* project list is still on the right, but no longer sits on top of the cards */
.side{
right:10px!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
width:118px!important;
gap:3px!important;
pointer-events:auto;
}
.side button{
font-size:7px!important;
line-height:1.12!important;
max-width:118px!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
/* move the 3D rail slightly left and up for the narrow viewport */
.rail{
transform:translate3d(-34px,-34px,0)!important;
}
/* metadata no longer fights with theme/search/tools */
.meta{
left:56px!important;
right:122px!important;
bottom:50px!important;
padding-left:10px!important;
gap:4px!important;
font-size:9px!important;
overflow:hidden!important;
}
.meta::before{height:48px!important}
.meta-copy strong{
font-size:10px!important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.meta-copy .place,
.meta-copy .credit{
font-size:8px!important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.meta-actions{display:none!important}
.theme-toggle{
left:10px!important;
top:auto!important;
bottom:78px!important;
transform:none!important;
}
.search-btn{
left:10px!important;
bottom:14px!important;
width:48px!important;
height:48px!important;
}
.side-tools{
right:12px!important;
bottom:14px!important;
gap:14px!important;
}
.hint{
left:72px!important;
bottom:24px!important;
max-width:190px!important;
font-size:7px!important;
line-height:1.2!important;
}
}
/* v46.3 — exact flags, zero chrome */
.lang-current,
.lang-current:hover,
body.theme-dark .lang-current{
width:30px!important;height:30px!important;
padding:0!important;margin:0!important;
border:0!important;outline:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
}
.lang-current .flag,
.lang-menu .flag{
display:block!important;
border:0!important;outline:0!important;
box-shadow:none!important;
background-repeat:no-repeat!important;
background-position:center!important;
background-size:cover!important;
border-radius:50%!important;
}
.flag-br{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%0A%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2230%22/%3E%3C/clipPath%3E%3C/defs%3E%0A%3Cg%20clip-path%3D%22url%28%23c%29%22%3E%0A%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23009b3a%22/%3E%0A%3Cpath%20d%3D%22M30%207%2055%2030%2030%2053%205%2030Z%22%20fill%3D%22%23ffdf00%22/%3E%0A%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2212.5%22%20fill%3D%22%23002776%22/%3E%0A%3Cpath%20d%3D%22M18.5%2028.3c8-3.6%2016.2-2.2%2023%201.3%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.1%22/%3E%0A%3C/g%3E%3C/svg%3E")!important}
.flag-pt{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%0A%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2230%22/%3E%3C/clipPath%3E%3C/defs%3E%0A%3Cg%20clip-path%3D%22url%28%23c%29%22%3E%0A%3Crect%20width%3D%2224%22%20height%3D%2260%22%20fill%3D%22%23046A38%22/%3E%0A%3Crect%20x%3D%2224%22%20width%3D%2236%22%20height%3D%2260%22%20fill%3D%22%23DA291C%22/%3E%0A%3Ccircle%20cx%3D%2224%22%20cy%3D%2230%22%20r%3D%228.2%22%20fill%3D%22%23FFCC00%22/%3E%0A%3Ccircle%20cx%3D%2224%22%20cy%3D%2230%22%20r%3D%225.3%22%20fill%3D%22%23fff%22/%3E%0A%3Cpath%20d%3D%22M20.5%2025.5h7v9h-7z%22%20fill%3D%22%23DA291C%22/%3E%0A%3C/g%3E%3C/svg%3E")!important}
.flag-us{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%0A%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2230%22/%3E%3C/clipPath%3E%3C/defs%3E%0A%3Cg%20clip-path%3D%22url%28%23c%29%22%3E%0A%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23fff%22/%3E%0A%3Cg%20fill%3D%22%23B22234%22%3E%0A%3Crect%20y%3D%220%22%20width%3D%2260%22%20height%3D%224.62%22/%3E%3Crect%20y%3D%229.23%22%20width%3D%2260%22%20height%3D%224.62%22/%3E%0A%3Crect%20y%3D%2218.46%22%20width%3D%2260%22%20height%3D%224.62%22/%3E%3Crect%20y%3D%2227.69%22%20width%3D%2260%22%20height%3D%224.62%22/%3E%0A%3Crect%20y%3D%2236.92%22%20width%3D%2260%22%20height%3D%224.62%22/%3E%3Crect%20y%3D%2246.15%22%20width%3D%2260%22%20height%3D%224.62%22/%3E%0A%3Crect%20y%3D%2255.38%22%20width%3D%2260%22%20height%3D%224.62%22/%3E%3C/g%3E%0A%3Crect%20width%3D%2230%22%20height%3D%2232.3%22%20fill%3D%22%233C3B6E%22/%3E%0A%3Cg%20fill%3D%22%23fff%22%20opacity%3D%22.95%22%3E%0A%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%225%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%225%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%225%22%20r%3D%221.2%22/%3E%0A%3Ccircle%20cx%3D%228%22%20cy%3D%2211%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2211%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2211%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2211%22%20r%3D%221.2%22/%3E%0A%3Ccircle%20cx%3D%225%22%20cy%3D%2217%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2217%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2217%22%20r%3D%221.2%22/%3E%0A%3Ccircle%20cx%3D%228%22%20cy%3D%2223%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2223%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2223%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2223%22%20r%3D%221.2%22/%3E%0A%3C/g%3E%3C/g%3E%3C/svg%3E")!important}
.flag-es{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%0A%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2230%22/%3E%3C/clipPath%3E%3C/defs%3E%0A%3Cg%20clip-path%3D%22url%28%23c%29%22%3E%0A%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23AA151B%22/%3E%0A%3Crect%20y%3D%2215%22%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23F1BF00%22/%3E%0A%3C/g%3E%3C/svg%3E")!important}
/* useful bottom-right tools */
.side-tools{
right:18px!important;
bottom:18px!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
}
.side-tools .tool-btn{
width:38px!important;height:38px!important;
border:0!important;background:transparent!important;
border-radius:50%!important;
display:flex!important;align-items:center!important;justify-content:center!important;
cursor:pointer!important;color:inherit!important;
opacity:.82!important;
transition:opacity .18s ease, transform .18s ease, background .18s ease!important;
}
.side-tools .tool-btn:hover{
opacity:1!important;transform:translateY(-2px)!important;
background:rgba(17,17,17,.055)!important;
}
body.theme-dark .side-tools .tool-btn:hover{background:rgba(255,255,255,.07)!important}
.side-tools .tool-btn svg{
width:17px!important;height:17px!important;
stroke:currentColor!important;fill:none!important;
stroke-width:1.55!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}
.side-tools .tool-btn.whatsapp svg{stroke-width:1.45!important}
.side-tools .tool-btn::after{
content:attr(aria-label);
position:absolute;
bottom:46px;
background:#111;color:#fff;
font-size:8px;letter-spacing:.04em;
padding:6px 8px;border-radius:10px;
opacity:0;pointer-events:none;
white-space:nowrap;transform:translateY(4px);
transition:opacity .18s ease,transform .18s ease;
}
.side-tools .tool-btn:hover::after{opacity:1;transform:none}
body.theme-dark .side-tools .tool-btn::after{background:#efefeb;color:#111}
@media(max-width:700px){
.side-tools{
right:10px!important;
bottom:12px!important;
gap:6px!important;
}
.side-tools .tool-btn{width:34px!important;height:34px!important}
.side-tools .tool-btn svg{width:15px!important;height:15px!important}
}
/* v46.4 — ABSOLUTELY NO CHROME AROUND CURRENT FLAG */
.lang-switch,
body.theme-dark .lang-switch,
body.ui-case .lang-switch{
padding:0!important;
gap:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
}
.lang-current,
.lang-current:hover,
.lang-current:focus,
.lang-current:focus-visible,
.lang-current.active,
body.theme-dark .lang-current{
width:30px!important;
height:30px!important;
min-width:30px!important;
padding:0!important;
margin:0!important;
border:0!important;
outline:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
opacity:1!important;
}
.lang-current .flag{
width:30px!important;
height:30px!important;
min-width:30px!important;
display:block!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
border-radius:50%!important;
background-size:cover!important;
background-position:center!important;
overflow:hidden!important;
}
/* v46.5 — FLAG IS ITS OWN CONTROL, NEVER INSIDE MENU HIT-AREA */
.lang-switch{
right:122px!important;
top:22px!important;
width:30px!important;
height:30px!important;
padding:0!important;
margin:0!important;
border:0!important;
outline:0!important;
border-radius:0!important;
background:none!important;
box-shadow:none!important;
backdrop-filter:none!important;
overflow:visible!important;
}
.lang-current{
all:unset!important;
-webkit-appearance:none!important;
appearance:none!important;
box-sizing:border-box!important;
width:30px!important;
height:30px!important;
display:block!important;
cursor:pointer!important;
position:relative!important;
border:0!important;
outline:0!important;
background:none!important;
box-shadow:none!important;
}
.lang-current::before,
.lang-current::after{
content:none!important;
display:none!important;
}
.lang-current .flag{
position:absolute!important;
inset:0!important;
width:30px!important;
height:30px!important;
min-width:0!important;
margin:0!important;
padding:0!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
border-radius:50%!important;
background-color:transparent!important;
}
.lang-current:focus,
.lang-current:focus-visible,
.lang-current:hover,
.lang-current:active{
border:0!important;
outline:0!important;
background:none!important;
box-shadow:none!important;
}
body.theme-dark .lang-switch,
body.theme-dark .lang-current{
border:0!important;
outline:0!important;
background:none!important;
box-shadow:none!important;
}
/* menu remains independently clickable */
.menu{
position:relative!important;
z-index:150!important;
}
.lang-switch{z-index:149!important}
/* mobile: flag sits clearly to the LEFT of the menu hit area */
@media(max-width:700px){
.lang-switch,
body.ui-case .lang-switch{
right:108px!important;
top:14px!important;
width:28px!important;
height:28px!important;
}
.lang-current,
.lang-current .flag{
width:28px!important;
height:28px!important;
}
}
.lang-menu{
right:0!important;
top:38px!important;
}
@media(max-width:700px){
.lang-menu{right:0!important;top:35px!important}
}
/* v46.6 — SURGICAL PROJECT NAVIGATION: one clear BACK button only */
#caseBack{
position:fixed!important;
left:24px!important;
top:24px!important;
right:auto!important;
bottom:auto!important;
z-index:220!important;
width:44px!important;
height:44px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:0!important;
border:1px solid rgba(17,17,17,.12)!important;
border-radius:50%!important;
background:rgba(239,239,236,.88)!important;
color:#111!important;
box-shadow:0 5px 16px rgba(0,0,0,.055)!important;
backdrop-filter:blur(8px)!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
cursor:pointer!important;
}
#caseBack:hover{
transform:translateX(-2px)!important;
}
#caseBack svg{
width:18px!important;
height:18px!important;
stroke:currentColor!important;
fill:none!important;
stroke-width:1.7!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
body.theme-dark #caseBack{
background:rgba(13,15,16,.86)!important;
color:#efefeb!important;
border-color:rgba(255,255,255,.14)!important;
}
#caseClose{display:none!important}
@media(max-width:700px){
#caseBack{
left:12px!important;
top:12px!important;
width:40px!important;
height:40px!important;
}
}
/* v46.10 — stability recovery */
.behance-btn,.behance-link,.case-behance,[data-behance],a[href*="behance.net"]{display:none!important}
/* v46.11 — surgical fixes: back + theme selector geometry */
/* Back button: always legible over the dark project layout */
#caseBack{
width:42px!important;
height:42px!important;
min-width:42px!important;
min-height:42px!important;
aspect-ratio:1/1!important;
border-radius:50%!important;
background:rgba(244,244,239,.94)!important;
color:#111!important;
border:1px solid rgba(255,255,255,.28)!important;
box-shadow:0 6px 18px rgba(0,0,0,.18)!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
#caseBack:hover{
background:#fff!important;
transform:translateX(-2px)!important;
}
body.theme-dark #caseBack{
background:rgba(244,244,239,.94)!important;
color:#111!important;
border-color:rgba(255,255,255,.28)!important;
}
/* Keep dark/light control perfectly round; no squashed active button */
.theme-toggle{
width:40px!important;
min-width:40px!important;
height:auto!important;
padding:3px!important;
border-radius:22px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:2px!important;
}
.theme-toggle button{
width:34px!important;
height:34px!important;
min-width:34px!important;
min-height:34px!important;
flex:0 0 34px!important;
aspect-ratio:1/1!important;
border-radius:50%!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.theme-toggle button.active{
border-radius:50%!important;
}
.theme-toggle svg{
width:15px!important;
height:15px!important;
flex:none!important;
}
@media(max-width:700px){
#caseBack{
width:40px!important;
height:40px!important;
min-width:40px!important;
min-height:40px!important;
}
.theme-toggle{
width:38px!important;
min-width:38px!important;
padding:3px!important;
}
.theme-toggle button{
width:32px!important;
height:32px!important;
min-width:32px!important;
min-height:32px!important;
flex-basis:32px!important;
}
}
/* v46.12 — exact theme contrast */
/* LIGHT = absolute white */
html,
body{
background:#fff!important;
}
body:not(.theme-dark),
body:not(.theme-dark) .stage,
body:not(.theme-dark) .viewer,
body:not(.theme-dark) .case,
body:not(.theme-dark) .about-page,
body:not(.theme-dark) .contact-page{
background:#fff!important;
}
/* Back button follows the active theme */
body:not(.theme-dark) #caseBack{
background:#111!important;
color:#fff!important;
border-color:#111!important;
box-shadow:0 6px 18px rgba(0,0,0,.12)!important;
}
body:not(.theme-dark) #caseBack:hover{
background:#000!important;
}
body.theme-dark #caseBack{
background:#fff!important;
color:#111!important;
border-color:#fff!important;
box-shadow:0 6px 18px rgba(0,0,0,.22)!important;
}
body.theme-dark #caseBack:hover{
background:#f2f2f2!important;
}
/* v46.13 — surgical polish */
/* BACK BUTTON:
light = white button / black icon
dark = black button / white icon */
body:not(.theme-dark) #caseBack{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.12)!important;
box-shadow:0 5px 16px rgba(0,0,0,.08)!important;
}
body:not(.theme-dark) #caseBack:hover{
background:#f7f7f7!important;
}
body.theme-dark #caseBack{
background:#0d0f10!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:0 5px 16px rgba(0,0,0,.24)!important;
}
body.theme-dark #caseBack:hover{
background:#17191a!important;
}
/* BOTTOM RIGHT ACTIONS — larger, perfectly round */
.side-tools{
gap:12px!important;
right:22px!important;
bottom:18px!important;
}
.side-tools .tool-btn{
width:46px!important;
height:46px!important;
min-width:46px!important;
min-height:46px!important;
flex:0 0 46px!important;
aspect-ratio:1/1!important;
border-radius:50%!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:visible!important;
}
.side-tools .tool-btn svg{
width:18px!important;
height:18px!important;
flex:none!important;
}
/* neutral hover for share/email */
.side-tools .tool-btn:not(.whatsapp):hover{
background:rgba(17,17,17,.07)!important;
transform:translateY(-2px) scale(1.03)!important;
}
body.theme-dark .side-tools .tool-btn:not(.whatsapp):hover{
background:rgba(255,255,255,.09)!important;
}
/* WhatsApp: green hover + subtle living pulse */
.side-tools .tool-btn.whatsapp{
position:relative!important;
animation:waBreath 2.8s ease-in-out infinite!important;
}
.side-tools .tool-btn.whatsapp:hover{
background:#25D366!important;
color:#fff!important;
transform:translateY(-2px) scale(1.06)!important;
animation:none!important;
}
.side-tools .tool-btn.whatsapp:hover svg{
stroke:#fff!important;
}
.side-tools .tool-btn.whatsapp::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
border:1px solid rgba(37,211,102,.0);
pointer-events:none;
animation:waRing 2.8s ease-in-out infinite;
}
.side-tools .tool-btn.whatsapp:hover::before{
border-color:rgba(37,211,102,.35);
animation:none;
}
@keyframes waBreath{
0%,100%{opacity:.78}
50%{opacity:1}
}
@keyframes waRing{
0%,100%{transform:scale(.94);border-color:rgba(37,211,102,0)}
50%{transform:scale(1.08);border-color:rgba(37,211,102,.28)}
}
/* mobile */
@media(max-width:700px){
.side-tools{
right:10px!important;
bottom:12px!important;
gap:8px!important;
}
.side-tools .tool-btn{
width:42px!important;
height:42px!important;
min-width:42px!important;
min-height:42px!important;
flex-basis:42px!important;
}
.side-tools .tool-btn svg{
width:17px!important;
height:17px!important;
}
}
/* v46.14 — clearer, more legible action icons */
.side-tools .tool-btn svg{
width:20px!important;
height:20px!important;
stroke:currentColor!important;
fill:none!important;
stroke-width:1.9!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
.side-tools .tool-btn.whatsapp svg{
width:21px!important;
height:21px!important;
stroke-width:1.7!important;
}
.side-tools .tool-btn{
color:#111!important;
}
body.theme-dark .side-tools .tool-btn{
color:#f5f5f2!important;
}
/* v46.15 — apply approved control styling to the actual site */
/* LIGHT MODE: all utility controls as clean white surfaces */
body:not(.theme-dark) .theme-toggle{
background:#fff!important;
border:1px solid rgba(17,17,17,.08)!important;
box-shadow:0 8px 24px rgba(0,0,0,.07)!important;
}
body:not(.theme-dark) .theme-toggle button{
background:transparent!important;
color:#111!important;
}
body:not(.theme-dark) .theme-toggle button.active{
background:rgba(17,17,17,.035)!important;
}
body:not(.theme-dark) .search-btn{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.08)!important;
box-shadow:0 8px 24px rgba(0,0,0,.07)!important;
}
body:not(.theme-dark) #caseBack{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.08)!important;
box-shadow:0 8px 24px rgba(0,0,0,.07)!important;
}
/* bottom actions: pure white circles, except WhatsApp inverted */
body:not(.theme-dark) .side-tools .tool-btn{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.08)!important;
box-shadow:0 8px 24px rgba(0,0,0,.07)!important;
}
body:not(.theme-dark) .side-tools .tool-btn:hover{
background:#fff!important;
}
/* WhatsApp: inverted default, green on hover */
body:not(.theme-dark) .side-tools .tool-btn.whatsapp{
background:#111!important;
color:#fff!important;
border-color:#111!important;
box-shadow:0 8px 24px rgba(0,0,0,.12)!important;
}
body:not(.theme-dark) .side-tools .tool-btn.whatsapp svg{
stroke:#fff!important;
}
body:not(.theme-dark) .side-tools .tool-btn.whatsapp:hover{
background:#25D366!important;
border-color:#25D366!important;
color:#fff!important;
}
body:not(.theme-dark) .side-tools .tool-btn.whatsapp:hover svg{
stroke:#fff!important;
}
/* dark mode follows the same logic, reversed surfaces */
body.theme-dark .theme-toggle,
body.theme-dark .search-btn{
background:#111315!important;
color:#f5f5f2!important;
border:1px solid rgba(255,255,255,.10)!important;
box-shadow:0 8px 24px rgba(0,0,0,.20)!important;
}
body.theme-dark #caseBack{
background:#111315!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.10)!important;
box-shadow:0 8px 24px rgba(0,0,0,.20)!important;
}
body.theme-dark .side-tools .tool-btn{
background:#111315!important;
color:#f5f5f2!important;
border:1px solid rgba(255,255,255,.10)!important;
box-shadow:0 8px 24px rgba(0,0,0,.20)!important;
}
body.theme-dark .side-tools .tool-btn.whatsapp{
background:#f5f5f2!important;
color:#111!important;
border-color:#f5f5f2!important;
}
body.theme-dark .side-tools .tool-btn.whatsapp svg{
stroke:#111!important;
}
body.theme-dark .side-tools .tool-btn.whatsapp:hover{
background:#25D366!important;
border-color:#25D366!important;
color:#fff!important;
}
body.theme-dark .side-tools .tool-btn.whatsapp:hover svg{
stroke:#fff!important;
}
/* keep geometry clean and consistent */
.theme-toggle{
width:42px!important;
border-radius:24px!important;
padding:4px!important;
}
.theme-toggle button{
width:34px!important;
height:34px!important;
min-width:34px!important;
min-height:34px!important;
border-radius:50%!important;
}
.search-btn,
#caseBack,
.side-tools .tool-btn{
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
border-radius:50%!important;
}
.side-tools{
gap:12px!important;
}
.side-tools .tool-btn svg{
width:19px!important;
height:19px!important;
}
.side-tools .tool-btn.whatsapp svg{
width:20px!important;
height:20px!important;
}
/* subtle pulse remains only on WhatsApp */
.side-tools .tool-btn.whatsapp{
animation:waBreath 2.8s ease-in-out infinite!important;
}
.side-tools .tool-btn.whatsapp:hover{
animation:none!important;
transform:translateY(-2px) scale(1.05)!important;
}
/* mobile */
@media(max-width:700px){
.theme-toggle{width:40px!important}
.theme-toggle button{
width:32px!important;height:32px!important;
min-width:32px!important;min-height:32px!important;
}
.search-btn,
#caseBack,
.side-tools .tool-btn{
width:44px!important;height:44px!important;
min-width:44px!important;min-height:44px!important;
}
}
/* v46.16 — contact form: remove gray fills */
body:not(.theme-dark) .field input,
body:not(.theme-dark) .field select,
body:not(.theme-dark) .field textarea{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.10)!important;
box-shadow:0 6px 18px rgba(0,0,0,.035)!important;
}
body:not(.theme-dark) .field input::placeholder,
body:not(.theme-dark) .field textarea::placeholder{
color:rgba(17,17,17,.48)!important;
}
body:not(.theme-dark) .field input:focus,
body:not(.theme-dark) .field select:focus,
body:not(.theme-dark) .field textarea:focus{
background:#fff!important;
border-color:rgba(17,17,17,.28)!important;
box-shadow:0 8px 22px rgba(0,0,0,.05)!important;
}
body.theme-dark .field input,
body.theme-dark .field select,
body.theme-dark .field textarea{
background:#111315!important;
color:#f5f5f2!important;
border:1px solid rgba(255,255,255,.10)!important;
box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
}
body.theme-dark .field input:focus,
body.theme-dark .field select:focus,
body.theme-dark .field textarea:focus{
background:#151819!important;
border-color:rgba(255,255,255,.24)!important;
}
/* v46.17 — ABOUT cinematic slow parallax */
.about-page{
perspective:1200px;
}
.about-grid,
.about-capabilities,
.about-detail,
.clients-section,
.contact-strip,
.about-footer{
position:relative;
overflow:hidden;
}
.about-parallax{
opacity:0;
filter:blur(18px);
transform:translate3d(0,72px,0) scale(.985);
will-change:transform,filter,opacity;
transition:
opacity 1.15s cubic-bezier(.16,1,.3,1),
filter 1.5s cubic-bezier(.16,1,.3,1),
transform 1.5s cubic-bezier(.16,1,.3,1);
}
.about-parallax.is-in{
opacity:1;
filter:blur(0);
}
.about-parallax[data-depth="1"]{--parallax-speed:.06}
.about-parallax[data-depth="2"]{--parallax-speed:.11}
.about-parallax[data-depth="3"]{--parallax-speed:.17}
.about-photo,
.about-detail-photo{
will-change:transform;
transition:transform .15s linear;
}
.about-photo::before,
.about-detail-photo::before{
content:"";
position:absolute;
inset:-8%;
background:
radial-gradient(circle at 30% 25%,rgba(255,215,120,.18),transparent 28%),
radial-gradient(circle at 70% 70%,rgba(99,155,255,.14),transparent 34%);
pointer-events:none;
transform:translate3d(0,var(--about-bg-shift,0px),0) scale(1.08);
will-change:transform;
}
.clients-section::before,
.contact-strip::before{
content:"";
position:absolute;
inset:-15% -10%;
background:
radial-gradient(circle at 20% 40%,rgba(255,204,120,.10),transparent 25%),
radial-gradient(circle at 80% 55%,rgba(88,140,255,.08),transparent 28%);
pointer-events:none;
transform:translate3d(0,var(--section-shift,0px),0);
will-change:transform;
}
@media(max-width:700px){
.about-parallax{
filter:blur(10px);
transform:translate3d(0,42px,0) scale(.99);
transition-duration:1s,1.15s,1.15s;
}
}
@media(prefers-reduced-motion:reduce){
.about-parallax{
opacity:1!important;
filter:none!important;
transform:none!important;
transition:none!important;
}
.about-photo,
.about-detail-photo,
.about-photo::before,
.about-detail-photo::before,
.clients-section::before,
.contact-strip::before{
transform:none!important;
}
}
/* v46.18 — LIGHT MODE consistency correction
Surgical override: home utility UI only. */
/* LIGHT: absolute white surfaces + readable dark UI */
body:not(.theme-dark) .top{
color:#111!important;
}
body:not(.theme-dark) .clock,
body:not(.theme-dark) .brand,
body:not(.theme-dark) .menu{
color:rgba(17,17,17,.72)!important;
}
body:not(.theme-dark) .clock{
opacity:.72!important;
}
body:not(.theme-dark) .brand{
opacity:.62!important;
}
body:not(.theme-dark) .menu{
opacity:.72!important;
}
/* right project index: still subtle, but no longer disappearing */
body:not(.theme-dark) .side button{
color:rgba(17,17,17,.34)!important;
}
body:not(.theme-dark) .side button:hover{
color:rgba(17,17,17,.68)!important;
}
body:not(.theme-dark) .side button.active{
color:#111!important;
}
/* lower-left helper text */
body:not(.theme-dark) .hint{
color:rgba(17,17,17,.42)!important;
}
/* THEME TOGGLE — white in light, black in dark */
body:not(.theme-dark) .theme-toggle{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.08)!important;
box-shadow:0 8px 24px rgba(0,0,0,.065)!important;
}
body:not(.theme-dark) .theme-toggle button{
color:#111!important;
}
body:not(.theme-dark) .theme-toggle button.active{
background:rgba(17,17,17,.035)!important;
}
/* SEARCH — white in light */
body:not(.theme-dark) .search-btn{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.08)!important;
box-shadow:0 8px 24px rgba(0,0,0,.065)!important;
}
/* HOME META BAR — remove inherited black panel in LIGHT */
body:not(.theme-dark) .meta{
background:#fff!important;
color:#111!important;
border:0!important;
box-shadow:none!important;
}
body:not(.theme-dark) .meta::before{
background:rgba(17,17,17,.16)!important;
}
body:not(.theme-dark) .meta-copy,
body:not(.theme-dark) .meta-copy strong,
body:not(.theme-dark) .meta-copy .place,
body:not(.theme-dark) .meta-copy .credit{
color:#111!important;
}
body:not(.theme-dark) .meta-actions button{
background:#fff!important;
color:#111!important;
border-color:rgba(17,17,17,.10)!important;
}
/* RIGHT ACTIONS — white/share/email; WhatsApp remains inverted */
body:not(.theme-dark) .side-tools .tool-btn{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.08)!important;
box-shadow:0 8px 24px rgba(0,0,0,.065)!important;
}
body:not(.theme-dark) .side-tools .tool-btn:not(.whatsapp):hover{
background:#f8f8f8!important;
color:#111!important;
}
body:not(.theme-dark) .side-tools .tool-btn.whatsapp{
background:#111!important;
color:#fff!important;
border-color:#111!important;
box-shadow:0 8px 24px rgba(0,0,0,.12)!important;
}
body:not(.theme-dark) .side-tools .tool-btn.whatsapp:hover{
background:#25D366!important;
border-color:#25D366!important;
color:#fff!important;
}
/* DARK: explicit inverse, preventing stale light styles */
body.theme-dark .theme-toggle,
body.theme-dark .search-btn,
body.theme-dark .side-tools .tool-btn,
body.theme-dark .meta{
background:#111315!important;
color:#f5f5f2!important;
}
body.theme-dark .meta-copy,
body.theme-dark .meta-copy strong,
body.theme-dark .meta-copy .place,
body.theme-dark .meta-copy .credit{
color:#f5f5f2!important;
}
body.theme-dark .side button{
color:rgba(245,245,242,.36)!important;
}
body.theme-dark .side button.active{
color:#f5f5f2!important;
}
body.theme-dark .side-tools .tool-btn.whatsapp{
background:#f5f5f2!important;
color:#111!important;
border-color:#f5f5f2!important;
}
/* ensure the home controls stay geometric */
.theme-toggle,
.search-btn,
.side-tools .tool-btn{
isolation:isolate;
}
/* v46.19 — definitive theme state normalization
The UI now uses ONE explicit source of truth: body[data-theme]. */
html:has(body[data-theme="light"]),
body[data-theme="light"]{
background:#fff!important;
color:#111!important;
}
/* LIGHT — top */
body[data-theme="light"] .top,
body[data-theme="light"] .clock,
body[data-theme="light"] .brand,
body[data-theme="light"] .menu{
color:#111!important;
}
body[data-theme="light"] .clock{opacity:.58!important}
body[data-theme="light"] .brand{opacity:.50!important}
body[data-theme="light"] .menu{opacity:.58!important}
/* LIGHT — left controls */
body[data-theme="light"] #themeToggle,
body[data-theme="light"] #searchBtn{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.09)!important;
box-shadow:0 7px 22px rgba(0,0,0,.065)!important;
}
body[data-theme="light"] #themeToggle button{
color:#111!important;
background:transparent!important;
}
body[data-theme="light"] #themeToggle button.active{
background:rgba(17,17,17,.045)!important;
}
/* LIGHT — metadata must NOT be black */
body[data-theme="light"] .meta{
background:transparent!important;
color:#111!important;
border:none!important;
box-shadow:none!important;
}
body[data-theme="light"] .meta::before{
background:rgba(17,17,17,.18)!important;
}
body[data-theme="light"] .meta-copy,
body[data-theme="light"] .meta-copy *,
body[data-theme="light"] .meta-actions{
color:#111!important;
}
body[data-theme="light"] .meta-actions button{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.10)!important;
}
/* LIGHT — index and helper */
body[data-theme="light"] .side,
body[data-theme="light"] .side button{
color:rgba(17,17,17,.38)!important;
}
body[data-theme="light"] .side button.active{
color:#111!important;
}
body[data-theme="light"] .hint{
color:rgba(17,17,17,.44)!important;
}
/* LIGHT — bottom-right controls */
body[data-theme="light"] .side-tools .tool-btn{
background:#fff!important;
color:#111!important;
border:1px solid rgba(17,17,17,.09)!important;
box-shadow:0 7px 22px rgba(0,0,0,.065)!important;
}
body[data-theme="light"] .side-tools .tool-btn svg{
stroke:#111!important;
}
body[data-theme="light"] .side-tools .tool-btn.whatsapp{
background:#111!important;
color:#fff!important;
border-color:#111!important;
}
body[data-theme="light"] .side-tools .tool-btn.whatsapp svg{
stroke:#fff!important;
}
body[data-theme="light"] .side-tools .tool-btn.whatsapp:hover{
background:#25D366!important;
border-color:#25D366!important;
}
/* DARK — explicit inverse */
body[data-theme="dark"]{
background:#0d0f10!important;
color:#f0f0ec!important;
}
body[data-theme="dark"] #themeToggle,
body[data-theme="dark"] #searchBtn,
body[data-theme="dark"] .side-tools .tool-btn{
background:#111315!important;
color:#f5f5f2!important;
border:1px solid rgba(255,255,255,.10)!important;
}
body[data-theme="dark"] .side-tools .tool-btn svg{
stroke:#f5f5f2!important;
}
body[data-theme="dark"] .meta{
background:transparent!important;
color:#f5f5f2!important;
box-shadow:none!important;
}
body[data-theme="dark"] .meta-copy,
body[data-theme="dark"] .meta-copy *{
color:#f5f5f2!important;
}
/* avoid old theme-dark rules becoming a second source of truth */
body[data-theme="light"].theme-dark{
background:#fff!important;
color:#111!important;
}
/* v46.20 — thumbnail → portfolio cinematic parallax transition */
.project-flight{
position:fixed;
z-index:9998;
margin:0;
overflow:hidden;
pointer-events:none;
transform-origin:center center;
border-radius:2px;
box-shadow:0 18px 52px rgba(0,0,0,.16);
will-change:left,top,width,height,transform,filter,border-radius,box-shadow;
}
.project-flight img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.015);
will-change:transform,filter;
}
.project-flight-backdrop{
position:fixed;
inset:0;
z-index:9997;
pointer-events:none;
opacity:0;
backdrop-filter:blur(0px);
background:rgba(255,255,255,0);
will-change:opacity,backdrop-filter,background;
}
body[data-theme="dark"] .project-flight-backdrop,
body.theme-dark .project-flight-backdrop{
background:rgba(13,15,16,0);
}
.card.is-launching{
opacity:.06!important;
filter:blur(3px)!important;
}
@media(prefers-reduced-motion:reduce){
.project-flight,.project-flight-backdrop{display:none!important}
}
/* v46.21 — cinematic archive split + case scroll reveal */
/* During launch, surrounding thumbnails move away on their own translate axis,
leaving the original 3D transform untouched. */
.card{
--launch-x:0px;
--launch-y:0px;
}
body.project-launching .card{
will-change:transform,translate,opacity,filter;
}
/* project case — gentle cinematic reveal */
#caseView .case-intro .project-copy > *,
#caseView .case-sequence > img,
#caseView .case-sequence > .case-text,
#caseView .project-end{
--case-parallax-y:0px;
opacity:0;
filter:blur(14px);
transform:translate3d(0,calc(42px + var(--case-parallax-y)),0) scale(.988);
transition:
opacity .95s cubic-bezier(.16,1,.3,1),
filter 1.15s cubic-bezier(.16,1,.3,1),
transform .20s linear;
will-change:transform,opacity,filter;
}
#caseView .case-intro .project-copy > *.case-reveal-in,
#caseView .case-sequence > img.case-reveal-in,
#caseView .case-sequence > .case-text.case-reveal-in,
#caseView .project-end.case-reveal-in{
opacity:1;
filter:blur(0);
transform:translate3d(0,var(--case-parallax-y),0) scale(1);
}
/* title gets a slightly stronger first reveal */
#caseView .project-title{
transform-origin:left center;
}
/* visual depth between project pieces */
#caseView .case-sequence{
perspective:1400px;
}
#caseView .case-sequence > img{
transform-origin:center center;
}
/* reduced motion remains clean */
@media(prefers-reduced-motion:reduce){
#caseView .case-intro .project-copy > *,
#caseView .case-sequence > img,
#caseView .case-sequence > .case-text,
#caseView .project-end{
opacity:1!important;
filter:none!important;
transform:none!important;
transition:none!important;
}
}
/* v46.22 — cinematic return: project collapses back into the archive */
body.case-returning{
overflow:hidden;
}
.case-return-ghost{
position:fixed;
z-index:10030;
overflow:hidden;
pointer-events:none;
border-radius:0;
box-shadow:0 26px 80px rgba(0,0,0,.18);
will-change:left,top,width,height,transform,opacity,filter,border-radius;
}
.case-return-ghost img{
width:100%;
height:100%;
display:block;
object-fit:cover;
will-change:transform,filter;
}
.case-return-veil{
position:fixed;
inset:0;
z-index:10020;
pointer-events:none;
background:rgba(255,255,255,.0);
backdrop-filter:blur(0px);
opacity:0;
will-change:opacity,background,backdrop-filter;
}
body[data-theme="dark"] .case-return-veil,
body.theme-dark .case-return-veil{
background:rgba(13,15,16,0);
}
body.case-returning #caseView .case-intro,
body.case-returning #caseView .case-sequence,
body.case-returning #caseView .project-end{
will-change:transform,opacity,filter;
}
/* tiny wave when the archive comes back */
.card.archive-return-wave{
will-change:translate,opacity,filter;
}
@media(prefers-reduced-motion:reduce){
.case-return-ghost,.case-return-veil{display:none!important}
}
/* v46.23 — fix: case blur/reveal must never freeze */
#caseView .case-intro .project-copy > *,
#caseView .case-sequence > img,
#caseView .case-sequence > .case-text,
#caseView .project-end{
filter:blur(9px);
opacity:0;
transition:
opacity .78s cubic-bezier(.16,1,.3,1),
filter .92s cubic-bezier(.16,1,.3,1),
transform .18s linear;
}
#caseView .case-intro .project-copy > *.case-reveal-in,
#caseView .case-sequence > img.case-reveal-in,
#caseView .case-sequence > .case-text.case-reveal-in,
#caseView .project-end.case-reveal-in{
opacity:1!important;
filter:blur(0)!important;
}
/* Safety: if JS is delayed, visible project content cannot remain blurred forever. */
#caseView.case-reveal-ready .case-reveal-in{
opacity:1!important;
filter:none!important;
}
/* =====================================================================
v46.47 — CLEAN NUMERIC PERSPECTIVE PRELOADER
Transform/opacity only. No blur animation. Lightweight.
===================================================================== */
#eduPreloader{
position:fixed;
inset:0;
z-index:999999;
overflow:hidden;
background:#f3f1ec;
color:#111;
isolation:isolate;
cursor:wait;
perspective:1200px;
}
.pre-grid{
position:absolute;
inset:0;
pointer-events:none;
opacity:.34;
background-image:
linear-gradient(rgba(17,17,17,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(17,17,17,.055) 1px, transparent 1px);
background-size:52px 52px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.16));
-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.16));
}
.pre-shell{
position:relative;
z-index:2;
height:100%;
box-sizing:border-box;
padding:26px 30px 24px;
display:grid;
grid-template-rows:auto 1fr auto;
}
.pre-meta,
.pre-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
font-size:9px;
line-height:1;
letter-spacing:.16em;
text-transform:uppercase;
}
.pre-meta{
color:rgba(17,17,17,.60);
}
.pre-footer{
color:rgba(17,17,17,.54);
align-items:flex-end;
}
.pre-meta strong,
.pre-footer strong{
color:#111;
font-weight:650;
}
.pre-stage{
position:relative;
min-height:0;
display:grid;
place-items:center;
perspective:1050px;
transform-style:preserve-3d;
}
.pre-perspective{
position:relative;
width:min(940px,82vw);
height:min(520px,55vh);
transform-style:preserve-3d;
transform:
rotateX(var(--pre-rx,8deg))
rotateY(var(--pre-ry,-12deg))
rotateZ(-2deg);
transition:transform .18s ease-out;
}
.pre-number{
position:absolute;
left:50%;
top:50%;
display:flex;
align-items:flex-start;
justify-content:center;
transform-style:preserve-3d;
white-space:nowrap;
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
pointer-events:none;
}
.pre-number .digits{
font-size:clamp(150px,27vw,430px);
line-height:.72;
letter-spacing:-.095em;
font-weight:690;
}
.pre-number .percent{
margin-left:.025em;
margin-top:.12em;
font-size:clamp(34px,5vw,82px);
line-height:1;
font-weight:500;
}
.pre-number.main{
z-index:5;
transform:translate(-50%,-50%) translateZ(86px);
color:#111;
}
.pre-number.ghost-a{
z-index:4;
transform:translate(-48.5%,-47%) translateZ(15px);
color:transparent;
-webkit-text-stroke:1px rgba(17,17,17,.23);
opacity:.62;
}
.pre-number.ghost-b{
z-index:3;
transform:translate(-46.7%,-44.2%) translateZ(-58px);
color:transparent;
-webkit-text-stroke:1px rgba(17,17,17,.13);
opacity:.54;
}
.pre-number.ghost-c{
z-index:2;
transform:translate(-44.8%,-41.5%) translateZ(-128px);
color:transparent;
-webkit-text-stroke:1px rgba(17,17,17,.07);
opacity:.46;
}
.pre-axis{
position:absolute;
left:50%;
top:50%;
width:min(880px,76vw);
height:1px;
background:linear-gradient(90deg,transparent,rgba(17,17,17,.14),transparent);
transform:translate(-50%,145px) rotateX(68deg) rotateZ(-2deg);
transform-origin:center;
}
.pre-axis::after{
content:"";
position:absolute;
left:var(--pre-pct,0%);
top:50%;
width:9px;
height:9px;
border-radius:50%;
background:#d60a00;
transform:translate(-50%,-50%);
box-shadow:0 0 0 5px rgba(214,10,0,.08);
}
.pre-caption{
position:absolute;
left:50%;
bottom:5%;
transform:translateX(-50%);
display:flex;
gap:18px;
align-items:center;
font-size:9px;
letter-spacing:.18em;
text-transform:uppercase;
color:rgba(17,17,17,.48);
}
.pre-caption::before{
content:"";
width:34px;
height:1px;
background:#d60a00;
}
.pre-caption b{
color:#111;
font-weight:650;
}
.pre-progress-line{
position:absolute;
left:30px;
right:30px;
bottom:0;
height:2px;
background:rgba(17,17,17,.08);
overflow:hidden;
}
.pre-progress{
display:block;
width:0%;
height:100%;
background:#111;
transform-origin:left center;
}
#eduPreloader.is-leaving .pre-shell{
animation:preCleanExit .64s cubic-bezier(.7,0,.2,1) forwards;
}
#eduPreloader.is-leaving{
animation:preBackgroundExit .72s .06s cubic-bezier(.7,0,.2,1) forwards;
pointer-events:none;
}
@keyframes preCleanExit{
to{
opacity:0;
transform:perspective(1000px) rotateX(-5deg) translateY(-26px) scale(.985);
}
}
@keyframes preBackgroundExit{
to{
clip-path:inset(0 0 100% 0);
}
}
@media(max-width:700px){
.pre-shell{padding:18px 16px 18px}
.pre-grid{background-size:34px 34px}
.pre-meta,.pre-footer{font-size:8px;letter-spacing:.12em}
.pre-perspective{
width:92vw;
height:46vh;
transform:
rotateX(var(--pre-rx,7deg))
rotateY(var(--pre-ry,-8deg))
rotateZ(-2deg);
}
.pre-number .digits{font-size:clamp(112px,37vw,210px)}
.pre-number .percent{font-size:clamp(27px,8vw,48px)}
.pre-axis{width:82vw;transform:translate(-50%,105px) rotateX(68deg) rotateZ(-2deg)}
.pre-caption{bottom:2%;font-size:7px;gap:11px;white-space:nowrap}
.pre-caption::before{width:20px}
.pre-progress-line{left:16px;right:16px}
}
@media(prefers-reduced-motion:reduce){
.pre-perspective{transition:none!important}
#eduPreloader.is-leaving .pre-shell,
#eduPreloader.is-leaving{animation-duration:.01ms!important}
}
/* v46.25 NEW BRANCH FROM v46.24 — Global premium WhatsApp floating button
Only the existing WhatsApp component is changed. Share/e-mail remain untouched. */
.side-tools .tool-btn.whatsapp{
/* Make WhatsApp the rightmost item of the already-fixed utility cluster. */
order:99!important;
align-self:flex-end!important;
/* Requested floating-button scale. */
width:56px!important;
height:56px!important;
min-width:56px!important;
min-height:56px!important;
flex:0 0 56px!important;
aspect-ratio:1/1!important;
position:relative!important;
right:-2px!important;
bottom:2px!important;
margin:0!important;
padding:0!important;
border-radius:50%!important;
border:0!important;
overflow:visible!important;
isolation:isolate;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:#25D366!important;
color:#fff!important;
opacity:1!important;
box-shadow:0 10px 28px rgba(0,0,0,.16)!important;
z-index:9999!important;
transform:scale(1);
transform-origin:center;
animation:waPremiumPulse 2.8s ease-in-out infinite!important;
transition:
transform .28s cubic-bezier(.16,1,.3,1),
box-shadow .28s ease,
background-color .28s ease!important;
}
/* Override all legacy light/dark WhatsApp treatments only. */
body:not(.theme-dark) .side-tools .tool-btn.whatsapp,
body.theme-dark .side-tools .tool-btn.whatsapp,
body[data-theme="light"] .side-tools .tool-btn.whatsapp,
body[data-theme="dark"] .side-tools .tool-btn.whatsapp{
background:#25D366!important;
color:#fff!important;
border-color:#25D366!important;
}
/* Inline WhatsApp SVG — no external library. */
.side-tools .tool-btn.whatsapp svg,
body:not(.theme-dark) .side-tools .tool-btn.whatsapp svg,
body.theme-dark .side-tools .tool-btn.whatsapp svg,
body[data-theme="light"] .side-tools .tool-btn.whatsapp svg,
body[data-theme="dark"] .side-tools .tool-btn.whatsapp svg{
width:24px!important;
height:24px!important;
display:block!important;
flex:none!important;
fill:#fff!important;
stroke:none!important;
position:relative;
z-index:2;
}
/* Proportional external wave/ring, based on the button's own dimensions. */
.side-tools .tool-btn.whatsapp::before{
content:""!important;
position:absolute!important;
inset:0!important;
border-radius:inherit!important;
border:1px solid rgba(37,211,102,.44)!important;
background:rgba(37,211,102,.07)!important;
pointer-events:none!important;
z-index:-1!important;
opacity:0;
transform:scale(1);
transform-origin:center;
animation:waPremiumRing 2.8s cubic-bezier(.2,.62,.3,1) infinite!important;
}
/* Keep legacy tooltip disabled for this large floating control. */
.side-tools .tool-btn.whatsapp::after{
display:none!important;
}
/* Premium restrained hover. */
.side-tools .tool-btn.whatsapp:hover,
body:not(.theme-dark) .side-tools .tool-btn.whatsapp:hover,
body.theme-dark .side-tools .tool-btn.whatsapp:hover,
body[data-theme="light"] .side-tools .tool-btn.whatsapp:hover,
body[data-theme="dark"] .side-tools .tool-btn.whatsapp:hover{
background:#25D366!important;
color:#fff!important;
transform:scale(1.06)!important;
box-shadow:0 14px 34px rgba(0,0,0,.19)!important;
animation:none!important;
}
.side-tools .tool-btn.whatsapp:hover::before{
animation:none!important;
opacity:.15!important;
transform:scale(1.14)!important;
}
@keyframes waPremiumPulse{
0%,100%{
transform:scale(1);
box-shadow:0 10px 28px rgba(0,0,0,.16);
}
50%{
transform:scale(1.025);
box-shadow:0 12px 31px rgba(0,0,0,.18);
}
}
@keyframes waPremiumRing{
0%{
opacity:.32;
transform:scale(1);
}
72%{
opacity:0;
transform:scale(1.52);
}
100%{
opacity:0;
transform:scale(1.52);
}
}
/* Mobile safe edge spacing, without touching the other utility buttons. */
@media(max-width:700px){
.side-tools .tool-btn.whatsapp{
width:54px!important;
height:54px!important;
min-width:54px!important;
min-height:54px!important;
flex-basis:54px!important;
/* Existing cluster sits at right:10/bottom:12.
Offset only WhatsApp so its final visual edge is ~16/18px. */
right:6px!important;
bottom:6px!important;
}
.side-tools .tool-btn.whatsapp svg{
width:23px!important;
height:23px!important;
}
}
/* Accessibility */
@media(prefers-reduced-motion:reduce){
.side-tools .tool-btn.whatsapp,
.side-tools .tool-btn.whatsapp::before{
animation:none!important;
}
.side-tools .tool-btn.whatsapp{
transform:none!important;
}
.side-tools .tool-btn.whatsapp:hover{
transform:none!important;
}
.side-tools .tool-btn.whatsapp::before{
opacity:0!important;
}
}
/* v46.30 — requested control cleanup only */
#caseSource,.case-source,.side-tools .inline-share,.side-tools a[href^="mailto:"]{display:none!important}
/* ================================================================
v46.31 — MOVE editorial storytelling.
Image remains clean. Text lives in separate layers.
================================================================ */
.move-editorial-sequence{
width:100%!important;
max-width:none!important;
margin:0!important;
display:block!important;
}
/* Clean project images, stacked one after another. */
.move-project-image{
width:min(1180px,88vw);
margin:0 auto;
padding:0;
position:relative;
}
.move-project-image img{
display:block;
width:100%;
height:auto;
margin:0!important;
box-shadow:0 22px 58px rgba(0,0,0,.10)!important;
}
.move-project-image figcaption{
display:flex;
justify-content:flex-end;
padding:12px 2px 0;
color:#8a8984;
font-size:8px;
letter-spacing:.13em;
text-transform:uppercase;
}
/* Editorial text layer, inspired by agency case studies but kept clean. */
.move-editorial-layer.case-text{
width:100%!important;
max-width:none!important;
margin:clamp(48px,7vw,108px) 0!important;
padding:clamp(68px,8vw,126px) 0!important;
border-left:0!important;
border-top:1px solid rgba(17,17,17,.08);
border-bottom:1px solid rgba(17,17,17,.08);
background:#f7f7f4;
color:#111;
overflow:hidden;
position:relative;
}
.move-editorial-layer::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(90deg,transparent 0,transparent calc(50% - .5px),rgba(17,17,17,.045) 50%,transparent calc(50% + .5px)),
radial-gradient(circle at 12% 10%,rgba(199,155,32,.065),transparent 24%);
}
.move-editorial-index,
.move-editorial-grid{
width:min(1180px,82vw);
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1;
}
.move-editorial-index{
margin-bottom:clamp(28px,4vw,54px);
font-size:10px;
font-weight:700;
letter-spacing:.15em;
text-transform:uppercase;
color:#7c7b76;
}
.move-editorial-grid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
gap:clamp(52px,8vw,128px);
align-items:start;
}
.move-editorial-heading h2{
margin:0;
max-width:720px;
font-size:clamp(48px,6vw,96px);
line-height:.91;
letter-spacing:-.065em;
font-weight:600;
}
.move-editorial-copy{
max-width:620px;
padding-top:8px;
}
.move-editorial-copy p{
max-width:none!important;
margin:0 0 20px!important;
color:#3e3e3a!important;
font-size:clamp(15px,1.15vw,19px)!important;
line-height:1.68!important;
}
.move-editorial-copy .move-editorial-lead{
color:#111!important;
font-weight:650;
font-size:clamp(18px,1.45vw,24px)!important;
line-height:1.48!important;
letter-spacing:-.02em;
}
.move-market-note{
margin-top:34px;
padding:24px 0 0;
border-top:1px solid rgba(17,17,17,.16);
}
.move-market-note span{
display:block;
margin-bottom:10px;
color:#c79b20;
font-size:9px;
font-weight:800;
letter-spacing:.15em;
text-transform:uppercase;
}
.move-market-note strong{
display:block;
color:#111;
font-size:14px;
line-height:1.55;
font-weight:650;
}
/* Parallax uses transforms only — no blur, no readability penalty. */
.move-editorial-layer [data-move-parallax]{
--move-parallax-y:0px;
transform:translate3d(0,var(--move-parallax-y),0);
will-change:transform;
}
.move-editorial-layer.is-visible .move-editorial-heading,
.move-editorial-layer.is-visible .move-editorial-copy,
.move-editorial-layer.is-visible .move-editorial-index{
opacity:1;
}
.move-editorial-heading,
.move-editorial-copy,
.move-editorial-index{
opacity:.001;
transition:opacity .7s cubic-bezier(.16,1,.3,1);
}
/* Dark mode */
body.theme-dark .move-editorial-layer.case-text,
body[data-theme="dark"] .move-editorial-layer.case-text{
background:#111315;
color:#f1f0eb;
border-color:rgba(255,255,255,.08);
}
body.theme-dark .move-editorial-layer::before,
body[data-theme="dark"] .move-editorial-layer::before{
background:
linear-gradient(90deg,transparent 0,transparent calc(50% - .5px),rgba(255,255,255,.045) 50%,transparent calc(50% + .5px)),
radial-gradient(circle at 12% 10%,rgba(199,155,32,.08),transparent 24%);
}
body.theme-dark .move-editorial-index,
body[data-theme="dark"] .move-editorial-index{
color:#8f918d;
}
body.theme-dark .move-editorial-heading h2,
body[data-theme="dark"] .move-editorial-heading h2,
body.theme-dark .move-editorial-copy .move-editorial-lead,
body[data-theme="dark"] .move-editorial-copy .move-editorial-lead,
body.theme-dark .move-market-note strong,
body[data-theme="dark"] .move-market-note strong{
color:#f1f0eb!important;
}
body.theme-dark .move-editorial-copy p,
body[data-theme="dark"] .move-editorial-copy p{
color:#b9bbb6!important;
}
body.theme-dark .move-market-note,
body[data-theme="dark"] .move-market-note{
border-top-color:rgba(255,255,255,.15);
}
body.theme-dark .move-project-image figcaption,
body[data-theme="dark"] .move-project-image figcaption{
color:#747671;
}
/* Tablet / mobile */
@media(max-width:900px){
.move-editorial-index,
.move-editorial-grid{
width:min(88vw,1180px);
}
.move-editorial-grid{
grid-template-columns:1fr;
gap:34px;
}
.move-editorial-copy{
max-width:760px;
}
}
@media(max-width:700px){
.move-project-image{
width:100%;
}
.move-project-image img{
box-shadow:none!important;
}
.move-project-image figcaption{
padding:9px 14px 0;
}
.move-editorial-layer.case-text{
margin:36px 0!important;
padding:58px 0!important;
}
.move-editorial-index,
.move-editorial-grid{
width:calc(100vw - 36px);
}
.move-editorial-heading h2{
font-size:13vw;
line-height:.92;
}
.move-editorial-copy p{
font-size:14px!important;
}
.move-editorial-copy .move-editorial-lead{
font-size:18px!important;
}
.move-market-note{
padding-top:20px;
margin-top:26px;
}
}
@media(prefers-reduced-motion:reduce){
.move-editorial-layer [data-move-parallax]{
transform:none!important;
}
.move-editorial-heading,
.move-editorial-copy,
.move-editorial-index{
opacity:1!important;
transition:none!important;
}
}
/* ============================================================
v46.33 — LIVE SEARCH / RESULTS PAGE
Dynamic index + autocomplete + local cache.
============================================================ */
.search-overlay{
position:fixed!important;
inset:0!important;
z-index:160!important;
overflow:auto!important;
background:#fff!important;
color:#111!important;
opacity:0;
visibility:hidden;
transition:opacity .28s ease,visibility .28s!important;
}
.search-overlay.open{opacity:1!important;visibility:visible!important}
body.search-open{overflow:hidden!important}
.search-close{
position:fixed!important;
z-index:166!important;
top:24px!important;
left:24px!important;
width:48px!important;
height:48px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:50%!important;
border:1px solid rgba(17,17,17,.08)!important;
background:rgba(255,255,255,.86)!important;
color:#111!important;
box-shadow:0 8px 26px rgba(0,0,0,.06)!important;
backdrop-filter:blur(14px)!important;
cursor:pointer!important;
}
.search-close svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.55;
}
.search-page-shell{
width:min(1480px,calc(100vw - 96px));
margin:0 auto;
padding:clamp(86px,9vw,136px) 0 72px;
}
.search-page-head{
position:relative;
padding:0 0 clamp(52px,6vw,84px);
border-bottom:1px solid rgba(17,17,17,.08);
}
.search-breadcrumb{
margin-bottom:24px;
font-size:10px;
font-weight:700;
letter-spacing:.15em;
text-transform:uppercase;
color:#858580;
}
.search-page-head :is(h1,h2){
margin:clamp(38px,5vw,70px) 0 0;
max-width:1260px;
font-size:clamp(58px,7.4vw,124px);
line-height:.86;
letter-spacing:-.068em;
font-weight:570;
}
.search-page-head :is(h1,h2) span{
color:#73736f;
font-weight:340;
}
.search-field-wrap{
position:relative;
width:min(840px,100%);
}
.search-field{
height:66px!important;
padding:0 18px 0 22px!important;
display:flex!important;
align-items:center!important;
gap:14px!important;
border-radius:999px!important;
border:1px solid rgba(17,17,17,.10)!important;
background:#f5f5f2!important;
box-shadow:none!important;
}
.search-field:focus-within{
border-color:rgba(17,17,17,.30)!important;
background:#fff!important;
box-shadow:0 12px 36px rgba(0,0,0,.055)!important;
}
.search-field input{
min-width:0;
flex:1;
border:0!important;
outline:0!important;
background:transparent!important;
color:#111!important;
font-size:16px!important;
letter-spacing:-.01em;
}
.search-field input::placeholder{color:#8a8a86!important}
.search-field > svg{
width:19px;
height:19px;
stroke:#111;
fill:none;
stroke-width:1.55;
order:-1;
}
.search-field kbd{
border:1px solid rgba(17,17,17,.11);
border-radius:7px;
background:#fff;
padding:6px 8px;
color:#777;
font:600 9px/1 system-ui,sans-serif;
letter-spacing:.06em;
}
.search-autocomplete{
position:absolute;
z-index:170;
top:calc(100% + 9px);
left:0;
right:0;
display:none;
padding:8px;
border:1px solid rgba(17,17,17,.08);
border-radius:18px;
background:rgba(255,255,255,.96);
box-shadow:0 24px 64px rgba(0,0,0,.10);
backdrop-filter:blur(20px);
}
.search-autocomplete.open{display:grid}
.search-autocomplete button{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:0 13px;
border:0;
border-radius:11px;
background:transparent;
color:#111;
text-align:left;
cursor:pointer;
}
.search-autocomplete button:hover,
.search-autocomplete button.active{background:#f2f2ef}
.search-autocomplete button span{font-size:14px;font-weight:620}
.search-autocomplete button small{
color:#959590;
font-size:8px;
letter-spacing:.12em;
text-transform:uppercase;
}
.search-page-grid{
display:grid;
grid-template-columns:minmax(220px,280px) minmax(0,1fr);
gap:clamp(52px,7vw,118px);
padding-top:52px;
}
.search-sidebar{
position:sticky;
top:34px;
align-self:start;
display:grid;
gap:36px;
}
.search-side-card{
padding:24px;
border-radius:20px;
background:#f4f4f1;
}
.search-side-kicker,
.search-side-section > span{
display:block;
margin-bottom:12px;
color:#8a8a85;
font-size:9px;
font-weight:750;
letter-spacing:.15em;
text-transform:uppercase;
}
.search-side-card strong{
display:block;
margin-bottom:10px;
font-size:20px;
line-height:1.15;
}
.search-side-card p{
margin:0;
color:#555550;
font-size:12px;
line-height:1.55;
}
.search-type-stats{display:grid}
.search-type-stats div{
min-height:40px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
border-bottom:1px solid rgba(17,17,17,.08);
}
.search-type-stats span{font-size:12px}
.search-type-stats strong{font-size:12px;font-weight:680}
.search-recent{display:grid;gap:4px}
.search-recent button{
width:100%;
min-height:38px;
padding:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
border:0;
border-bottom:1px solid rgba(17,17,17,.07);
background:transparent;
color:#111;
cursor:pointer;
text-align:left;
}
.search-recent button span{
max-width:210px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px;
}
.search-recent button b{font-weight:400}
.search-side-foot{
display:flex;
flex-wrap:wrap;
gap:7px 9px;
color:#999994;
font-size:9px;
letter-spacing:.06em;
text-transform:uppercase;
}
.search-side-foot span{
padding:5px 7px;
border:1px solid rgba(17,17,17,.08);
border-radius:6px;
color:#555;
}
.search-main{min-width:0}
.search-summary{
min-height:36px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:14px;
color:#82827d;
font-size:10px;
letter-spacing:.08em;
text-transform:uppercase;
}
.search-results{
margin:0!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 clamp(44px,5vw,88px)!important;
}
.search-result{
position:relative;
min-height:178px;
width:100%;
padding:26px 44px 28px 0!important;
display:block;
border:0!important;
border-top:1px solid rgba(17,17,17,.10)!important;
border-radius:0!important;
background:transparent!important;
color:#111!important;
text-align:left;
cursor:pointer;
transition:transform .24s cubic-bezier(.16,1,.3,1),opacity .24s ease!important;
}
.search-result:hover{
transform:translate3d(8px,0,0);
opacity:.68;
}
.search-result-meta{
display:block;
margin-bottom:10px;
color:#63635f;
font-size:10px;
line-height:1.4;
}
.search-result-meta i{
color:#e64362;
font-style:normal;
padding:0 3px;
}
.search-result strong{
display:block;
margin-bottom:11px;
font-size:clamp(21px,2vw,30px)!important;
line-height:1.04;
letter-spacing:-.035em;
font-weight:650!important;
}
.search-result p{
margin:0;
max-width:520px;
color:#656560;
font-size:12px;
line-height:1.55;
}
.search-result-arrow{
position:absolute;
right:3px;
top:27px;
font-size:16px;
font-weight:400;
}
.search-empty-state,
.search-no-results{
grid-column:1/-1;
min-height:270px;
padding:46px 0;
border-top:1px solid rgba(17,17,17,.10);
}
.search-empty-state strong,
.search-no-results strong{
display:block;
max-width:760px;
margin-bottom:13px;
font-size:clamp(32px,4vw,62px);
line-height:.96;
letter-spacing:-.055em;
font-weight:570;
}
.search-empty-state p,
.search-no-results p{
max-width:620px;
margin:0;
color:#73736e;
font-size:14px;
line-height:1.58;
}
/* DARK MODE */
body.theme-dark .search-overlay,
body[data-theme="dark"] .search-overlay{
background:#0d0f10!important;
color:#efefeb!important;
}
body.theme-dark .search-close,
body[data-theme="dark"] .search-close{
border-color:rgba(255,255,255,.10)!important;
background:rgba(13,15,16,.86)!important;
color:#efefeb!important;
}
body.theme-dark .search-page-head,
body[data-theme="dark"] .search-page-head,
body.theme-dark .search-result,
body[data-theme="dark"] .search-result,
body.theme-dark .search-empty-state,
body[data-theme="dark"] .search-empty-state,
body.theme-dark .search-no-results,
body[data-theme="dark"] .search-no-results{
border-color:rgba(255,255,255,.09)!important;
}
body.theme-dark .search-page-head :is(h1,h2) span,
body[data-theme="dark"] .search-page-head :is(h1,h2) span{color:#8e908b}
body.theme-dark .search-field,
body[data-theme="dark"] .search-field{
border-color:rgba(255,255,255,.09)!important;
background:#17191a!important;
}
body.theme-dark .search-field:focus-within,
body[data-theme="dark"] .search-field:focus-within{
border-color:rgba(255,255,255,.24)!important;
background:#111315!important;
}
body.theme-dark .search-field input,
body[data-theme="dark"] .search-field input{color:#efefeb!important}
body.theme-dark .search-field > svg,
body[data-theme="dark"] .search-field > svg{stroke:#efefeb}
body.theme-dark .search-field kbd,
body[data-theme="dark"] .search-field kbd{
border-color:rgba(255,255,255,.09);
background:#222425;
color:#aaa;
}
body.theme-dark .search-autocomplete,
body[data-theme="dark"] .search-autocomplete{
border-color:rgba(255,255,255,.09);
background:rgba(17,19,20,.97);
}
body.theme-dark .search-autocomplete button,
body[data-theme="dark"] .search-autocomplete button,
body.theme-dark .search-recent button,
body[data-theme="dark"] .search-recent button,
body.theme-dark .search-result,
body[data-theme="dark"] .search-result{color:#efefeb!important}
body.theme-dark .search-autocomplete button:hover,
body.theme-dark .search-autocomplete button.active,
body[data-theme="dark"] .search-autocomplete button:hover,
body[data-theme="dark"] .search-autocomplete button.active{background:#242627}
body.theme-dark .search-side-card,
body[data-theme="dark"] .search-side-card{background:#17191a}
body.theme-dark .search-side-card p,
body[data-theme="dark"] .search-side-card p,
body.theme-dark .search-result p,
body[data-theme="dark"] .search-result p,
body.theme-dark .search-empty-state p,
body[data-theme="dark"] .search-empty-state p,
body.theme-dark .search-no-results p,
body[data-theme="dark"] .search-no-results p{color:#9a9b96}
body.theme-dark .search-type-stats div,
body.theme-dark .search-recent button,
body[data-theme="dark"] .search-type-stats div,
body[data-theme="dark"] .search-recent button{
border-color:rgba(255,255,255,.08);
}
body.theme-dark .search-side-foot span,
body[data-theme="dark"] .search-side-foot span{
border-color:rgba(255,255,255,.08);
color:#aaa;
}
/* RESPONSIVE */
@media(max-width:900px){
.search-page-shell{
width:calc(100vw - 40px);
padding-top:92px;
}
.search-page-head :is(h1,h2){
font-size:clamp(52px,11vw,88px);
}
.search-page-grid{
grid-template-columns:1fr;
gap:36px;
}
.search-sidebar{
position:relative;
top:auto;
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start;
}
.search-side-card{grid-row:span 2}
.search-side-foot{display:none}
}
@media(max-width:700px){
.search-close{
top:14px!important;
left:14px!important;
width:42px!important;
height:42px!important;
}
.search-page-shell{
width:calc(100vw - 28px);
padding:76px 0 48px;
}
.search-page-head{
padding-bottom:42px;
}
.search-breadcrumb{margin-bottom:16px}
.search-page-head :is(h1,h2){
margin-top:34px;
font-size:15vw;
line-height:.88;
}
.search-field{
height:58px!important;
padding:0 15px!important;
}
.search-field input{font-size:14px!important}
.search-field kbd{display:none}
.search-page-grid{
padding-top:34px;
}
.search-sidebar{
display:block;
}
.search-side-card{
margin-bottom:24px;
}
.search-side-section{
margin-top:26px;
}
.search-results{
grid-template-columns:1fr!important;
}
.search-result{
min-height:154px;
padding-right:34px!important;
}
}
/* =====================================================================
v46.35 — MOBILE SYSTEM PASS
Surgical: desktop remains unchanged. Fixes About / Portfolio / Home /
spacing / Blog-Article / Language collisions at <= 700px.
===================================================================== */
@media(max-width:700px){
/* ---------- GLOBAL SAFE FRAME ---------- */
html,body{max-width:100vw!important;overflow-x:hidden!important}
.top{
left:16px!important;
right:16px!important;
top:16px!important;
min-height:42px!important;
grid-template-columns:1fr auto 1fr!important;
align-items:center!important;
pointer-events:none;
}
.clock{
max-width:92px!important;
font-size:9px!important;
line-height:1.25!important;
pointer-events:auto;
}
.brand{
justify-self:center!important;
max-width:168px!important;
font-size:10px!important;
line-height:1!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
pointer-events:auto;
}
.menu{
justify-self:end!important;
min-width:72px!important;
min-height:42px!important;
margin:-6px -8px 0 0!important;
padding:6px 8px!important;
gap:9px!important;
font-size:9px!important;
pointer-events:auto!important;
}
.menu .menu-plus{
width:28px!important;
height:28px!important;
font-size:22px!important;
}
/* ---------- LANGUAGE ----------
Home: clear lane immediately left of MENU.
Inner pages: top-right because there is no need to fight the centered brand. */
.lang-switch{
top:18px!important;
right:96px!important;
width:28px!important;
height:28px!important;
z-index:180!important;
}
body.ui-case .lang-switch,
body.ui-about .lang-switch,
body.ui-blog .lang-switch,
body.ui-article .lang-switch,
body.ui-contact .lang-switch{
top:18px!important;
right:16px!important;
}
.lang-current,
.lang-current .flag{
width:28px!important;
height:28px!important;
min-width:28px!important;
}
.lang-menu{
top:36px!important;
right:0!important;
min-width:136px!important;
max-width:calc(100vw - 32px)!important;
}
body.menu-open .lang-switch{
opacity:0!important;
pointer-events:none!important;
}
/* ---------- MOBILE UTILITY DOCK ----------
Small, consistent, and away from text. */
.search-btn{
left:16px!important;
bottom:16px!important;
width:50px!important;
height:50px!important;
z-index:188!important;
}
.theme-toggle,
body.ui-about .theme-toggle,
body.ui-blog .theme-toggle,
body.ui-article .theme-toggle,
body.ui-case .theme-toggle,
body.ui-contact .theme-toggle{
position:fixed!important;
left:76px!important;
right:auto!important;
top:auto!important;
bottom:16px!important;
width:50px!important;
height:50px!important;
min-width:50px!important;
padding:0!important;
gap:0!important;
border-radius:50%!important;
transform:none!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
z-index:187!important;
}
.theme-toggle button{
width:40px!important;
height:40px!important;
min-width:40px!important;
border-radius:50%!important;
}
body:not(.theme-dark) .theme-toggle #themeLight{display:none!important}
body.theme-dark .theme-toggle #themeDark{display:none!important}
.side-tools,
body.ui-case .side-tools{
right:16px!important;
bottom:16px!important;
left:auto!important;
height:auto!important;
gap:0!important;
z-index:188!important;
}
/* Guard against older deployed markup: only WhatsApp survives on mobile. */
.side-tools > :not(.whatsapp){display:none!important}
/* ---------- HOME / ARCHIVE ---------- */
body:not(.ui-about):not(.ui-blog):not(.ui-article):not(.ui-case):not(.ui-contact) .stage{
perspective:980px!important;
perspective-origin:54% 43%!important;
}
body:not(.ui-about):not(.ui-blog):not(.ui-article):not(.ui-case):not(.ui-contact) .rail{
transform:translate3d(-44px,-42px,0)!important;
}
.side{
right:10px!important;
top:48%!important;
bottom:auto!important;
width:112px!important;
transform:translateY(-50%)!important;
}
.side button{
max-width:112px!important;
font-size:7px!important;
line-height:1.15!important;
}
.meta{
left:18px!important;
right:138px!important;
bottom:86px!important;
min-height:auto!important;
padding:0 0 0 12px!important;
gap:4px!important;
overflow:visible!important;
}
.meta::before{
height:58px!important;
}
.meta-copy strong{
font-size:10px!important;
line-height:1.34!important;
white-space:normal!important;
}
.hint{display:none!important}
/* ---------- ABOUT ----------
Back returns to a real header position. No controls floating over copy. */
.about-page{
overflow-x:hidden!important;
scroll-padding-top:74px!important;
padding-bottom:96px!important;
}
body.ui-about .back-btn,
.about-page.open ~ .back-btn{
display:flex!important;
position:fixed!important;
left:16px!important;
top:16px!important;
right:auto!important;
bottom:auto!important;
width:46px!important;
height:46px!important;
transform:none!important;
z-index:189!important;
background:rgba(255,255,255,.90)!important;
backdrop-filter:blur(12px)!important;
}
body.theme-dark.ui-about .back-btn{
background:rgba(13,15,16,.90)!important;
}
.about-grid{
width:100%!important;
min-height:auto!important;
padding:112px 24px 68px!important;
grid-template-columns:1fr!important;
gap:46px!important;
background-size:50vw 100%!important;
overflow:hidden!important;
}
.about-grid>div:first-child{
max-width:none!important;
align-self:start!important;
}
.about-eyebrow{
max-width:240px!important;
margin-bottom:20px!important;
font-size:11px!important;
line-height:1.4!important;
}
.about-title{
max-width:100%!important;
font-size:clamp(54px,14vw,82px)!important;
line-height:.88!important;
letter-spacing:-.065em!important;
overflow-wrap:normal!important;
}
.about-lead{
max-width:100%!important;
margin-top:26px!important;
font-size:16px!important;
line-height:1.58!important;
}
.about-visual{
min-height:auto!important;
margin-top:2px!important;
display:flex!important;
justify-content:center!important;
}
.about-photo{
width:min(86vw,390px)!important;
margin:0 auto!important;
}
.about-capabilities{
min-height:auto!important;
padding:68px 24px 104px!important;
grid-template-columns:1fr!important;
gap:42px!important;
}
.cap-main h3{
max-width:100%!important;
font-size:clamp(42px,11vw,62px)!important;
line-height:.98!important;
}
.cap-column{gap:34px!important}
.cap-card h4{
font-size:clamp(27px,7vw,38px)!important;
line-height:1.03!important;
}
.cap-card p{
font-size:15px!important;
line-height:1.58!important;
}
.about-detail{
grid-template-columns:1fr!important;
min-height:auto!important;
}
.about-detail-photo{min-height:56vh!important}
.about-detail-copy{padding:58px 24px 96px!important}
.about-detail-copy h3{
font-size:clamp(40px,11vw,62px)!important;
line-height:.96!important;
}
/* ---------- PORTFOLIO / CASE ----------
Stable top bar, language separated from brand, tighter opening spacing. */
.case-top{
position:sticky!important;
top:0!important;
z-index:170!important;
min-height:64px!important;
padding:15px 16px!important;
align-items:center!important;
background:rgba(255,255,255,.88)!important;
backdrop-filter:blur(14px)!important;
-webkit-backdrop-filter:blur(14px)!important;
mix-blend-mode:normal!important;
border-bottom:1px solid rgba(17,17,17,.06)!important;
}
body.theme-dark .case-top{
background:rgba(13,15,16,.88)!important;
border-bottom-color:rgba(255,255,255,.07)!important;
}
.case-brand{
max-width:calc(100vw - 156px)!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
font-size:10px!important;
}
#caseBack,
.case-back{
left:16px!important;
top:10px!important;
width:44px!important;
height:44px!important;
}
.case-intro{
width:auto!important;
margin:46px 22px 58px!important;
grid-template-columns:1fr!important;
gap:22px!important;
}
.case-intro .project-title,
.case-intro :is(h1,h2){
max-width:100%!important;
font-size:clamp(54px,15vw,78px)!important;
line-height:.86!important;
}
.case-intro .project-description,
.case-intro p{
max-width:100%!important;
font-size:15px!important;
line-height:1.58!important;
}
.case-intro .project-data{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:18px 14px!important;
margin-top:30px!important;
}
.case-intro .project-data-item:nth-child(3){
grid-column:1/-1!important;
}
.case-intro .project-data-item strong{
font-size:11px!important;
line-height:1.42!important;
}
.case-intro .project-scroll{
margin-top:30px!important;
font-size:9px!important;
}
.case-loop{padding-bottom:108px!important}
.case-progress{
left:142px!important;
right:78px!important;
bottom:33px!important;
width:auto!important;
max-width:none!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
font-size:7px!important;
}
.move-project-image figcaption{
padding:9px 16px 0!important;
font-size:7px!important;
}
/* ---------- BLOG ----------
Native page back stays in the sticky header; no orphan floating back. */
body.ui-blog .back-btn,
body.ui-article .back-btn{display:none!important}
.blog-page,
.article-page{
overflow-x:hidden!important;
padding-bottom:96px!important;
}
.blog-top,
.article-top{
position:sticky!important;
top:0!important;
z-index:172!important;
height:64px!important;
padding:0 16px!important;
background:rgba(255,255,255,.90)!important;
backdrop-filter:blur(14px)!important;
-webkit-backdrop-filter:blur(14px)!important;
}
body.theme-dark .blog-top,
body.theme-dark .article-top{
background:rgba(13,15,16,.90)!important;
}
.blog-back,
.article-back{
width:40px!important;
height:40px!important;
}
.blog-feed{
padding:26px 18px 110px!important;
}
.blog-feature{
gap:28px!important;
padding-bottom:42px!important;
}
.blog-feature :is(h1,h2){
font-size:clamp(48px,13vw,72px)!important;
line-height:.9!important;
}
.blog-feature p{
font-size:14px!important;
line-height:1.58!important;
}
.blog-grid{
gap:34px!important;
padding-top:34px!important;
}
.blog-card-art{
aspect-ratio:4/3!important;
border-radius:16px!important;
}
.blog-card h2{
font-size:28px!important;
line-height:1.02!important;
}
.article-shell{
width:auto!important;
margin:0 18px!important;
padding:42px 0 104px!important;
}
.article-intro{
gap:18px!important;
margin-bottom:32px!important;
}
.article-intro :is(h1,h2){
font-size:clamp(52px,14vw,76px)!important;
line-height:.88!important;
}
.article-hero{
min-height:48vh!important;
border-radius:18px!important;
}
.article-body{
margin-top:48px!important;
font-size:15px!important;
line-height:1.7!important;
}
/* ---------- CONTACT / SEARCH ----------
Give fixed mobile controls breathing room. */
.contact-page{padding-bottom:100px!important}
.search-page-shell{padding-bottom:112px!important}
}
/* Tiny phones */
@media(max-width:380px){
.lang-switch{right:88px!important}
.brand{max-width:132px!important}
.about-grid{padding-left:20px!important;padding-right:20px!important}
.case-intro{margin-left:18px!important;margin-right:18px!important}
.case-intro .project-data{grid-template-columns:1fr!important}
.case-intro .project-data-item:nth-child(3){grid-column:auto!important}
}
/* ================================================================
v46.36 — AMAZING YOU / Branding + Packaging case
Unique image edit + editorial storytelling.
================================================================ */
.amazing-editorial-sequence{
--amazing-green:#173427;
--amazing-green-2:#244c38;
--amazing-gold:#b98d42;
--amazing-cream:#f4efe4;
}
.amazing-project-image{
width:min(1240px,90vw);
}
.amazing-project-image img{
background:#ece7dc;
}
.amazing-project-image figcaption{
color:#7d776c;
}
.amazing-editorial-layer.case-text{
background:var(--amazing-cream);
}
.amazing-editorial-layer::before{
background:
linear-gradient(90deg,transparent 0,transparent calc(50% - .5px),rgba(23,52,39,.07) 50%,transparent calc(50% + .5px)),
radial-gradient(circle at 10% 12%,rgba(185,141,66,.12),transparent 26%),
radial-gradient(circle at 90% 82%,rgba(23,52,39,.06),transparent 24%);
}
.amazing-editorial-layer .move-editorial-index{
color:#6f765f;
}
.amazing-editorial-layer .move-editorial-heading h2,
.amazing-editorial-layer .move-editorial-copy .move-editorial-lead,
.amazing-editorial-layer .move-market-note strong{
color:var(--amazing-green)!important;
}
.amazing-editorial-layer .move-editorial-copy p{
color:#4e5248!important;
}
.amazing-editorial-layer .move-market-note{
border-top-color:rgba(23,52,39,.18);
}
.amazing-editorial-layer .move-market-note span{
color:var(--amazing-gold);
}
body.theme-dark .amazing-editorial-layer.case-text,
body[data-theme="dark"] .amazing-editorial-layer.case-text{
background:#10231b!important;
color:#f3efe6!important;
border-color:rgba(255,255,255,.08)!important;
}
body.theme-dark .amazing-editorial-layer::before,
body[data-theme="dark"] .amazing-editorial-layer::before{
background:
linear-gradient(90deg,transparent 0,transparent calc(50% - .5px),rgba(255,255,255,.045) 50%,transparent calc(50% + .5px)),
radial-gradient(circle at 10% 12%,rgba(185,141,66,.10),transparent 26%),
radial-gradient(circle at 90% 82%,rgba(255,255,255,.025),transparent 24%)!important;
}
body.theme-dark .amazing-editorial-layer .move-editorial-heading h2,
body[data-theme="dark"] .amazing-editorial-layer .move-editorial-heading h2,
body.theme-dark .amazing-editorial-layer .move-editorial-copy .move-editorial-lead,
body[data-theme="dark"] .amazing-editorial-layer .move-editorial-copy .move-editorial-lead,
body.theme-dark .amazing-editorial-layer .move-market-note strong,
body[data-theme="dark"] .amazing-editorial-layer .move-market-note strong{
color:#f2ead8!important;
}
body.theme-dark .amazing-editorial-layer .move-editorial-copy p,
body[data-theme="dark"] .amazing-editorial-layer .move-editorial-copy p{
color:#bdc5bb!important;
}
body.theme-dark .amazing-editorial-layer .move-editorial-index,
body[data-theme="dark"] .amazing-editorial-layer .move-editorial-index{
color:#8fa390!important;
}
@media(max-width:700px){
.amazing-project-image{width:100%!important}
.amazing-project-image figcaption{padding:9px 14px 0!important}
}
/* ======================================================================
v46.37 — EDITORA STOCK HOME & OFFICE
Preserves v46.36 Amazing You + adds a separate Editora Stock case.
====================================================================== */
.stock-digital-sequence{
width:min(1280px,92vw);
margin:0 auto;
}
.stock-digital-sequence .stock-project-image{
width:100%;
margin:0 0 24px;
}
.stock-digital-sequence .stock-project-image img{
width:100%;
display:block;
border-radius:18px;
background:#061b32;
box-shadow:0 22px 60px rgba(3,21,40,.15);
}
.stock-digital-sequence .stock-project-image figcaption{
padding:10px 4px 0;
color:#747b82;
font-size:8px;
font-weight:650;
letter-spacing:.13em;
text-transform:uppercase;
}
.stock-editorial-layer.case-text{
--stock-navy:#061b32;
--stock-blue:#0b3157;
--stock-coral:#ff5b55;
width:min(1120px,88vw);
margin:clamp(76px,10vh,128px) auto;
padding:clamp(38px,5.2vw,76px);
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
background:
radial-gradient(circle at 84% 8%,rgba(42,100,154,.22),transparent 34%),
radial-gradient(circle at 8% 92%,rgba(255,91,85,.08),transparent 26%),
linear-gradient(135deg,#05172a,#092441 56%,#06182d);
color:#f5f7f8;
box-shadow:0 28px 70px rgba(2,20,38,.15);
}
.stock-editorial-layer::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(90deg,transparent 0,transparent calc(50% - .5px),rgba(255,255,255,.045) 50%,transparent calc(50% + .5px));
}
.stock-editorial-layer .move-editorial-index{
position:relative;
z-index:1;
color:var(--stock-coral);
}
.stock-editorial-layer .move-editorial-heading,
.stock-editorial-layer .move-editorial-copy{
position:relative;
z-index:1;
}
.stock-editorial-layer .move-editorial-heading h2{
color:#fff!important;
}
.stock-editorial-layer .move-editorial-copy .move-editorial-lead{
color:#fff!important;
}
.stock-editorial-layer .move-editorial-copy p{
color:rgba(240,245,248,.72)!important;
}
.stock-editorial-layer .move-market-note{
border-top-color:rgba(255,255,255,.14)!important;
}
.stock-editorial-layer .move-market-note span{
color:var(--stock-coral)!important;
}
.stock-editorial-layer .move-market-note strong{
color:#fff!important;
}
@media(max-width:700px){
.stock-digital-sequence{
width:100%;
}
.stock-digital-sequence .stock-project-image{
margin:0 0 8px;
}
.stock-digital-sequence .stock-project-image img{
border-radius:0;
box-shadow:none;
}
.stock-digital-sequence .stock-project-image figcaption{
padding:8px 16px 0;
}
.stock-editorial-layer.case-text{
width:auto;
margin:52px 14px 58px;
padding:30px 22px 34px;
border-radius:18px;
}
.stock-editorial-layer .move-editorial-grid{
grid-template-columns:1fr!important;
gap:24px!important;
}
.stock-editorial-layer .move-editorial-heading h2{
font-size:clamp(40px,12vw,62px)!important;
line-height:.93!important;
}
}
/* v132 — real portrait for the About page */
.about-photo{
background:#dfe3e6!important;
}
.about-photo::after{
display:none!important;
content:none!important;
}
.about-photo img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 36%;
transform:scale(1.045);
transform-origin:50% 38%;
}
.about-detail-photo{
position:relative;
background:#dfe3e6!important;
}
.about-detail-photo img{
display:block;
width:100%;
height:100%;
min-height:inherit;
object-fit:cover;
object-position:50% 38%;
}
.about-detail-placeholder{display:none!important;}
@media(max-width:700px){
.about-photo img{
object-position:50% 34%;
transform:scale(1.03);
}
.about-detail-photo img{
object-position:50% 34%;
}
}
.besthouse-editorial-sequence{
--bhb-navy:#07192b;
--bhb-navy-2:#10283f;
--bhb-cyan:#18bfe6;
--bhb-ice:#eef3f6;
}
.besthouse-project-image{width:min(1280px,92vw)!important}
.besthouse-project-image img{background:#e8edf1!important}
.besthouse-project-image figcaption{color:#64717c!important}
.besthouse-editorial-layer.case-text{
background:linear-gradient(135deg,#eef3f6 0%,#f8fafb 58%,#eaf2f6 100%)!important;
border-color:rgba(7,25,43,.09)!important;
}
.besthouse-editorial-layer::before{
background:
linear-gradient(90deg,transparent 0,transparent calc(50% - .5px),rgba(7,25,43,.06) 50%,transparent calc(50% + .5px)),
radial-gradient(circle at 8% 14%,rgba(24,191,230,.13),transparent 28%),
radial-gradient(circle at 92% 82%,rgba(7,25,43,.055),transparent 26%)!important;
}
.besthouse-editorial-layer .move-editorial-index{color:#667784!important}
.besthouse-editorial-layer .move-editorial-heading h2,
.besthouse-editorial-layer .move-editorial-copy .move-editorial-lead,
.besthouse-editorial-layer .move-market-note strong{color:var(--bhb-navy)!important}
.besthouse-editorial-layer .move-editorial-copy p{color:#485967!important}
.besthouse-editorial-layer .move-market-note{border-top-color:rgba(7,25,43,.16)!important}
.besthouse-editorial-layer .move-market-note span{color:#009fc9!important}
body.theme-dark .besthouse-editorial-layer.case-text,
body[data-theme="dark"] .besthouse-editorial-layer.case-text{
background:linear-gradient(135deg,#07131f,#0b1d2c 58%,#0f2637)!important;
border-color:rgba(255,255,255,.07)!important;
}
body.theme-dark .besthouse-editorial-layer::before,
body[data-theme="dark"] .besthouse-editorial-layer::before{
background:
linear-gradient(90deg,transparent 0,transparent calc(50% - .5px),rgba(255,255,255,.04) 50%,transparent calc(50% + .5px)),
radial-gradient(circle at 8% 14%,rgba(24,191,230,.12),transparent 28%),
radial-gradient(circle at 92% 82%,rgba(255,255,255,.025),transparent 26%)!important;
}
body.theme-dark .besthouse-editorial-layer .move-editorial-heading h2,
body.theme-dark .besthouse-editorial-layer .move-editorial-copy .move-editorial-lead,
body.theme-dark .besthouse-editorial-layer .move-market-note strong,
body[data-theme="dark"] .besthouse-editorial-layer .move-editorial-heading h2,
body[data-theme="dark"] .besthouse-editorial-layer .move-editorial-copy .move-editorial-lead,
body[data-theme="dark"] .besthouse-editorial-layer .move-market-note strong{color:#f1f7fa!important}
body.theme-dark .besthouse-editorial-layer .move-editorial-copy p,
body[data-theme="dark"] .besthouse-editorial-layer .move-editorial-copy p{color:#b9c8d1!important}
body.theme-dark .besthouse-editorial-layer .move-editorial-index,
body[data-theme="dark"] .besthouse-editorial-layer .move-editorial-index{color:#82a2b7!important}
body.theme-dark .besthouse-editorial-layer .move-market-note span,
body[data-theme="dark"] .besthouse-editorial-layer .move-market-note span{color:#4ddcff!important}
@media(max-width:700px){
.besthouse-project-image{width:100%!important}
.besthouse-project-image figcaption{padding:9px 14px 0!important}
}
#caseView .besthouse-project-image,
#caseView .besthouse-project-image img{
opacity:1!important;
visibility:visible!important;
display:block!important;
}
#caseView .besthouse-project-image img{
width:100%!important;
height:auto!important;
object-fit:contain!important;
filter:none!important;
-webkit-filter:none!important;
}
.fittrainer-editorial-sequence{
--ft-navy:#071a2a;
--ft-navy-2:#0b2a3f;
--ft-cyan:#16c7ef;
--ft-ice:#f3f7f9;
}
.fittrainer-project-image{width:min(1320px,94vw)!important}
.fittrainer-project-image img{
display:block!important;
opacity:1!important;
visibility:visible!important;
width:100%!important;
height:auto!important;
object-fit:contain!important;
background:#071a2a!important;
filter:none!important;
-webkit-filter:none!important;
}
.fittrainer-project-image figcaption{color:#7893a2!important}
.fittrainer-editorial-layer.case-text{
background:
radial-gradient(circle at 82% 16%,rgba(22,199,239,.14),transparent 22%),
radial-gradient(circle at 15% 85%,rgba(9,83,146,.16),transparent 26%),
linear-gradient(135deg,#06131f 0%,#0a2234 54%,#071723 100%)!important;
border-color:rgba(22,199,239,.18)!important;
}
.fittrainer-editorial-layer::before{
background:
repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 56px),
linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
radial-gradient(circle at 88% 15%,rgba(22,199,239,.08),transparent 24%)!important;
}
.fittrainer-editorial-layer .move-editorial-index,
.fittrainer-editorial-layer .move-market-note span{color:#32d7f6!important}
.fittrainer-editorial-layer .move-editorial-heading h2,
.fittrainer-editorial-layer .move-editorial-copy .move-editorial-lead,
.fittrainer-editorial-layer .move-market-note strong{color:#f4f8fa!important}
.fittrainer-editorial-layer .move-editorial-copy p{color:#c0ced6!important}
.fittrainer-editorial-layer .move-market-note{border-top-color:rgba(255,255,255,.14)!important}
@media(max-width:700px){
.fittrainer-project-image{width:100%!important}
.fittrainer-editorial-layer.case-text{margin-left:0!important;margin-right:0!important}
}