:root{
  --navy:#0c394c;
  --bg:#e8edf3;
  --bg-2:#d5dee6;
  --orange:#ef7426;
  --pink:#eac3d2;
  --pad:clamp(20px,6vw,96px);
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--navy);font-family:'Lexend',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:50}
.skip:focus{left:8px}

/* header */
.hd{position:fixed;top:0;left:0;right:0;z-index:30;height:76px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(237,240,245,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:0 0 26px 26px;transition:background .4s,color .4s}
.hd.dark{background:rgba(232,237,243,.08);color:var(--bg)}
.hd .logo img{height:32px;width:auto}
.hd .logo .l-light{display:none}
.hd.dark .logo .l-dark{display:none}
.hd.dark .logo .l-light{display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,2.6vw,40px);font-size:15px;font-weight:500}
.lnk{position:relative;padding:6px 0}
.lnk::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.lnk:hover::after,.lnk[aria-current=page]::after{transform:scaleX(1)}
.pill{display:inline-block;background:var(--navy);color:var(--bg);padding:9px 16px;border-radius:999px;font-weight:600;white-space:nowrap;transition:transform .25s,box-shadow .25s,background .4s,color .4s}
.pill:hover{transform:translateY(-2px) rotate(-2deg);box-shadow:0 6px 0 rgba(12,57,76,.18)}
.hd.dark .pill{background:var(--bg);color:var(--navy)}
.lang{display:inline-flex;border:1.5px solid currentColor;border-radius:999px;overflow:hidden;font-size:12px;font-weight:600}
.lang button{padding:5px 9px;min-height:30px;letter-spacing:.04em}
.lang button[aria-pressed=true]{background:currentColor}
.lang button[aria-pressed=true] span{color:var(--bg);mix-blend-mode:normal}
.hd.dark .lang button[aria-pressed=true] span{color:var(--navy)}
@media (max-width:720px){
  .hd{height:64px}
  .hd .logo img{height:26px}
  .nav{gap:12px;font-size:14px}
  .nav .pill{display:none}
}

/* intro: zoom through the eye, then the hero opens in place */
body:not([data-page=home]) main{padding-top:76px}
.intro{height:320vh;background:var(--navy);position:relative}
.intro .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.intro .zoom{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro .hint{position:absolute;bottom:40px;left:0;right:0;text-align:center;color:var(--bg);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.hero-layer{position:absolute;inset:0;background:var(--bg);display:flex;align-items:center;clip-path:circle(0% at 50% 50%);will-change:clip-path}
.hero-layer .hero{width:100%}
.hero .st,.hero .st-sym{will-change:transform,opacity}
@media (max-width:720px){body:not([data-page=home]) main{padding-top:64px}}

/* hero */
.hero{padding-top:96px;padding-bottom:48px;display:flex;flex-direction:column;gap:clamp(24px,5vh,48px)}
.hero .top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;line-height:1.7}
.hero .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,40px)}
.hero h1{margin:0;font-size:clamp(52px,min(7.4vw,12vh),116px);font-weight:600;line-height:.9;letter-spacing:-.01em}
.hero .design{width:clamp(180px,min(26vw,40vh),400px);height:auto;margin-top:10px}
.hero .bigsym{width:clamp(170px,min(26vw,42vh),390px);height:auto}
.hero .tag{margin:0;font-size:clamp(17px,1.6vw,23px);font-weight:300}
@media (max-width:720px){.hero{padding-top:84px}.hero .top{font-size:12px}}

/* sem animação: tudo parado */
.intro.static{height:auto;background:var(--bg)}
.intro.static .stage{position:relative;height:auto;min-height:100vh}
.intro.static .zoom,.intro.static .hint{display:none}
.intro.static .hero-layer{position:relative;clip-path:none;min-height:100vh}

/* section heads */
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.sh h2{margin:0;font-size:clamp(24px,2.4vw,34px);font-weight:600;line-height:1}
.sh p{margin:0;max-width:400px;font-size:14px;line-height:1.7}

/* areas rows */
.areas{padding:120px 0;border-top:1.5px solid var(--navy)}
.arow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:30px var(--pad);border-top:1.5px solid var(--navy);transition:background .35s,color .35s}
.arow:last-child{border-bottom:1.5px solid var(--navy)}
.arow:hover,.arow:focus-visible{background:var(--navy);color:var(--bg)}
.arow .nm{display:block;font-size:clamp(22px,2.6vw,36px);font-weight:500;line-height:1.05;transition:transform .35s}
.arow:hover .nm{transform:translateX(18px)}
.arow .more{display:block;font-size:14px;opacity:0;max-height:0;overflow:hidden;transition:opacity .35s,max-height .35s,margin .35s}
.arow:hover .more,.arow:focus-visible .more{opacity:1;max-height:60px;margin-top:8px}
.arr{font-size:22px;line-height:1;transition:transform .35s;display:inline-block}
.arow:hover .arr,.work:hover .arr{transform:rotate(-45deg)}

/* work rows */
.works{border-bottom:1.5px solid var(--navy)}
.work{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 240px 90px 32px;align-items:center;gap:20px;padding:26px var(--pad);border-top:1.5px solid var(--navy);transition:background .35s,color .35s}
.work:hover,.work:focus-visible{background:var(--navy);color:var(--bg)}
.work .nm{font-size:clamp(18px,1.7vw,24px);font-weight:400;transition:transform .35s}
.work:hover .nm{transform:translateX(16px)}
.work .meta{font-size:13px}
.work .peek{position:absolute;right:30%;top:50%;width:260px;height:170px;object-fit:cover;border-radius:14px;pointer-events:none;z-index:3;
  opacity:0;transform:translateY(-40%) rotate(-3deg);transition:opacity .3s,transform .3s;box-shadow:0 0 0 4px var(--bg)}
.work:hover .peek{opacity:1;transform:translateY(-50%) rotate(-3deg)}
.work.soon{pointer-events:none;opacity:.55}
.hl .work{padding-left:0;padding-right:0}
.hl .work:hover{padding-left:20px;padding-right:20px}
@media (max-width:760px){
  .work{grid-template-columns:minmax(0,1fr) 32px}
  .work .meta,.work .peek{display:none}
}

/* footer */
.ft{background:var(--navy);color:var(--bg);border-radius:26px 26px 0 0;margin-top:40px}
.ft .in{padding-top:120px;padding-bottom:44px;display:flex;flex-direction:column;gap:96px}
.ft .cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.ft .big{margin:0;font-size:clamp(36px,4.4vw,64px);font-weight:600;line-height:.95}
.ft .sub{margin:8px 0 0;font-size:clamp(15px,1.4vw,19px);color:var(--pink)}
.ft .pill{background:var(--bg);color:var(--navy);padding:13px 22px;font-size:14px}
.ft .bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid rgba(232,237,243,.3);padding-top:24px;font-size:14px}
.ft .bar img{height:28px;width:auto}
.ft .bar .links{display:flex;flex-wrap:wrap;gap:24px}

/* portfolio */
.ptop{padding-top:110px;padding-bottom:40px;display:flex;flex-direction:column;gap:28px}
.ptop .r{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.ptop h1{margin:0;font-size:clamp(50px,6.4vw,96px);font-weight:600;line-height:.9;letter-spacing:-.01em}
.ptop p{margin:0;max-width:340px;font-size:14px;line-height:1.6}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{border:1.5px solid var(--navy);border-radius:999px;padding:8px 18px;font-size:13px;min-height:40px;transition:background .25s,color .25s}
.tab:hover{background:rgba(12,57,76,.1)}
.tab[aria-selected=true]{background:var(--navy);color:var(--bg)}
.area{padding:88px 0 40px;scroll-margin-top:80px}
.area .head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 88px;align-items:end;padding-bottom:28px}
.area h2{margin:12px 0 0;font-size:clamp(24px,2.3vw,32px);font-weight:600;line-height:1.15;max-width:440px}
.area .txt{margin:0 0 14px;font-size:14px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--navy);border-radius:999px;padding:5px 12px;font-size:12px}
.area .works{border-bottom:1.5px solid var(--navy)}
@media (max-width:760px){.area .head{grid-template-columns:1fr}}

/* project */
.proj{padding-top:64px;padding-bottom:120px;display:flex;flex-direction:column;gap:48px}
.goback{align-self:flex-start;font-size:14px;padding:8px 0;transition:transform .25s}
.goback:hover{transform:translateX(-6px)}
.proj .r{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.proj h1{margin:12px 0 0;font-size:clamp(40px,5.2vw,78px);font-weight:600;line-height:.95;letter-spacing:-.01em}
.proj .facts{display:flex;gap:40px;font-size:14px}
.proj .facts span{display:block}
.proj .facts .k{opacity:.7;margin-bottom:2px}
.proj .facts .v{font-weight:600}
.cover{border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:var(--bg-2)}
.cover img{width:100%;height:100%;object-fit:cover}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.two h2{margin:0 0 10px;font-size:17px;font-weight:600}
.two p{margin:0;font-size:15px;line-height:1.7}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gal figure{margin:0;border-radius:18px;overflow:hidden;background:var(--bg-2);aspect-ratio:3/2;cursor:zoom-in}
.gal figure.wide{grid-column:1/-1;aspect-ratio:16/8}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal figure.fit{background:#f4f6f9}
.gal figure.fit img{object-fit:contain;padding:14px}
.gal figure.tall{aspect-ratio:4/5}
.gal figure:hover img{transform:scale(1.03)}
.next{display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:20px;padding:28px 0;border-top:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy)}
.next .k{display:block;font-size:14px;opacity:.7;margin-bottom:4px}
.next .nm{font-size:clamp(20px,2vw,28px);transition:transform .35s;display:block}
.next:hover .nm{transform:translateX(14px)}
.next:hover .arr{transform:rotate(-45deg)}
@media (max-width:760px){.two,.gal{grid-template-columns:1fr}.gal figure.wide{aspect-ratio:3/2}}

/* 3d viewer */
.viewer{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:radial-gradient(ellipse at 50% 40%,#f4f6f9 0%,#d5dee6 75%)}
.viewer canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.viewer canvas:active{cursor:grabbing}
.viewer .vt{position:absolute;left:20px;bottom:18px;font-size:12px;letter-spacing:.06em;background:rgba(232,237,243,.85);padding:6px 12px;border-radius:999px}
.viewer .vlogo{position:absolute;right:22px;top:20px;width:150px;opacity:.9}
@media (max-width:760px){.viewer{aspect-ratio:4/5}.viewer .vlogo{width:110px}}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(12,57,76,.94);z-index:60;display:none;align-items:center;justify-content:center;padding:4vw}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:12px}
.lb button{position:absolute;top:18px;right:22px;color:var(--bg);font-size:30px;line-height:1;padding:8px}

/* sobre */
.sintro{padding-top:120px;padding-bottom:128px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:72px}
.sintro .t{flex:1 1 480px;display:flex;flex-direction:column;gap:24px}
.sintro h1{margin:0;font-size:clamp(22px,2.3vw,32px);font-weight:400;line-height:1.35;max-width:620px}
.sintro h1 b{font-weight:700}
.sintro .ph{width:clamp(260px,32vw,460px);aspect-ratio:4/3;border-radius:18px;overflow:hidden;transform:rotate(-4deg);background:var(--orange);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sintro .ph:hover{transform:rotate(0)}
.sintro .ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.mv{background:var(--navy);color:var(--bg);border-radius:26px}
.mv .in{padding-top:110px;padding-bottom:110px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px}
.mv .eyebrow{color:var(--pink);margin:0 0 14px}
.mv p.v{margin:0;font-size:clamp(16px,1.4vw,20px);line-height:1.5}
@media (max-width:760px){.mv .in{grid-template-columns:1fr;gap:48px}}
.vals{padding:136px 0 112px}
.val{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:34px var(--pad);border-top:1.5px solid var(--navy);transition:background .35s,color .35s}
.val:last-child{border-bottom:1.5px solid var(--navy)}
.val:hover{background:var(--navy);color:var(--bg)}
.val .nm{font-size:clamp(22px,2.4vw,34px);font-weight:400;line-height:1;transition:transform .35s}
.val:hover .nm{transform:translateX(16px)}
.val .tx{font-size:14px;line-height:1.65;opacity:.75;transition:opacity .35s}
.val:hover .tx{opacity:1}
@media (max-width:760px){.val{grid-template-columns:1fr;gap:12px}}

.team{padding-top:40px;padding-bottom:150px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 36px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.person{display:flex;flex-direction:column;gap:14px}
.card{position:relative;aspect-ratio:4/5;perspective:1400px;width:100%;display:block;text-align:left;transform:rotate(var(--tilt,0deg));transition:transform .5s ease}
.card.on{transform:rotate(0deg)}
@media (hover:hover){.card:hover{transform:rotate(0deg)}.card:hover .in{transform:rotateY(180deg)}}
.card .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card.on .in,.card:focus-visible .in{transform:rotateY(180deg)}
.card .face{position:absolute;inset:0;border-radius:18px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 10px 30px -18px rgba(12,57,76,.5)}
.card .face img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.card .back{transform:rotateY(180deg)}
.card .back img{transform:scaleX(-1);filter:saturate(.6)}
.card .back .ov{position:absolute;inset:0;background:rgba(239,116,38,.84);color:#fff;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.card .back .city{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.card .back .ln{font-size:15px;line-height:1.4}
.card .hintflip{position:absolute;right:12px;bottom:12px;background:rgba(232,237,243,.9);color:var(--navy);font-size:11px;padding:5px 10px;border-radius:999px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.person .nm{font-size:18px;font-weight:600}
.person .rl{font-size:13px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in-view{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}