/* ───────── Fonts (arquivos locais na pasta /fonts) ───────── */
@font-face{font-family:"Boulder";src:url("../fonts/Boulder-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage";src:url("../fonts/Bricolage-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Bricolage";src:url("../fonts/Bricolage-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Bricolage";src:url("../fonts/Bricolage-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

/* ───────── Tokens ───────── */
:root{
  --bege:#F1EEE9; --bg:#F8F6F2; --laranja:#F4633B; --rosa:#FEA7DE; --lima:#B6CE5C; --azul:#270788; --ink:#121212;
  --line:rgba(18,18,18,.16); --mut:rgba(18,18,18,.6);
  --gutter:64px; --pad:48px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Bricolage",system-ui,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:6px}

.wrap{margin:0 var(--gutter);position:relative}
.row{position:relative}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.lbl{font-size:13px;color:var(--mut);display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:11px 20px;font-size:14px;font-weight:700;background:var(--ink);color:#fff;border:1.5px solid var(--ink);transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.o{background:transparent;color:var(--ink)}
.btn.o:hover{background:var(--ink);color:#fff}

/* ───────── Top bar ───────── */
.bar{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;align-items:center;padding:22px var(--pad);font-size:14px;gap:12px}
.logo{display:block;line-height:0}
.logo img{height:36px;width:auto;display:block}
.bar .time{color:var(--mut)}
.bar-r{display:flex;align-items:center;gap:6px}
.nav{display:flex;gap:2px;margin-right:12px}
.nav a{padding:8px 16px;border-radius:999px;font-size:14px;transition:background .2s;white-space:nowrap}
.nav a:hover{background:var(--bege)}
.nav a.on{background:var(--ink);color:#fff}


/* ───────── Capa ───────── */
.cover{background:var(--rosa);margin:0 calc(-1*var(--gutter));min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.cover .bar{padding-left:calc(var(--gutter) + var(--pad));padding-right:calc(var(--gutter) + var(--pad))}
.cover .bar .time{color:rgba(18,18,18,.6)}
.cover .nav a:hover{background:rgba(255,255,255,.45)}
.name{color:#fff;font-family:"Boulder";font-weight:700;text-transform:uppercase;line-height:.84;letter-spacing:-.02em;padding:0 clamp(8px,1.2vw,18px);display:flex;flex-direction:column;gap:.06em;font-size:clamp(60px,15vw,300px)}
.nl{display:block;white-space:nowrap;width:max-content;transform-origin:left center}
.nl i{font-style:normal;display:inline-block;will-change:transform;}
.cv-foot{display:flex;justify-content:space-between;padding:22px calc(var(--gutter) + var(--pad)) 26px;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:760px){.cover{min-height:92svh}.cover .bar{padding-left:var(--pad);padding-right:var(--pad)}.cv-foot{padding:18px var(--pad) 20px;font-size:12px}}

/* ───────── Hero ───────── */
.hero{padding:88px var(--pad) 70px}
.hello{font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:26px}
.hl-h{font-weight:500;font-size:clamp(34px,8.05vw,116px);line-height:1;letter-spacing:-.04em;max-width:1300px}
h2.hl-h .d{font-family:"Boulder";font-weight:700;letter-spacing:-.01em;font-size:.915em;position:relative;z-index:0;display:inline-block;padding:0 .13em;margin:0 .06em 0 -.07em;line-height:.9}
h2.hl-h .d::before{content:"";position:absolute;left:0;right:0;top:.08em;bottom:-.02em;background:var(--lima);border-radius:999px;z-index:-1;transform:rotate(-1.5deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
h2.hl-h:hover .d::before{transform:rotate(1.5deg) scale(1.03)}
.hero-foot{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:64px;align-items:end}
.hero-foot p{font-size:22px;font-weight:300;line-height:1.4;max-width:560px}
.hero-foot p button{font-weight:500;border-bottom:1.5px solid var(--ink);padding-bottom:1px;font-size:inherit}
.hero-foot p button:hover{color:var(--laranja);border-color:var(--laranja)}
.tags{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.tg{border:1px solid var(--ink);border-radius:999px;padding:7px 15px;font-size:14px}

/* ───────── Section head ───────── */
.sh{display:flex;justify-content:space-between;align-items:baseline;padding:56px var(--pad) 30px;gap:16px}
h2{font-weight:500;font-size:44px;letter-spacing:-.035em;line-height:1}
h2 small{font-size:15px;font-weight:300;color:var(--mut);letter-spacing:0;margin-left:10px;vertical-align:super}

/* ───────── Projects ───────── */
.ctrl{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--mut)}
.ar{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:18px;transition:background .2s,color .2s}
.ar:hover,.ar.on{background:var(--ink);color:#fff}
.fan{padding:34px var(--pad) 84px;display:flex;justify-content:center;align-items:flex-start}
.cc{position:relative;display:flex;flex-direction:column;justify-content:space-between;flex:1 1 0;min-width:0;max-width:300px;aspect-ratio:1/1.18;margin-left:-12px;padding:clamp(16px,1.7vw,26px);border-radius:22px;background:#ECE8E0;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -14px rgba(18,18,18,.22),0 2px 6px rgba(18,18,18,.06);transform:translateY(var(--y,0)) rotate(var(--r,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background-color .4s ease,color .4s ease;z-index:var(--z,1)}
.cc:first-child{margin-left:0}
.cc:hover,.cc:focus-visible,.cc:active{background:var(--bgc);color:var(--fgc);transform:translateY(calc(var(--y,0px) - 18px)) rotate(0deg) scale(1.03);z-index:10;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 30px 54px -16px rgba(18,18,18,.3),0 2px 6px rgba(18,18,18,.06)}
.cc h3{font-family:"Boulder";font-weight:700;font-size:clamp(15px,1.5vw,22px);line-height:1.08;letter-spacing:0;padding-right:2px}
.cc .n{position:absolute;top:clamp(16px,1.7vw,26px);right:clamp(16px,1.7vw,26px);font-size:12px;opacity:.6}
.cc .bt{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.cc p{font-size:clamp(12px,1vw,14px);line-height:1.35;font-weight:400;max-width:12ch;opacity:.85}
.cc .th{flex:none;width:clamp(54px,5.2vw,84px);aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.7);display:grid;place-items:center;overflow:hidden}
.cc .th img{max-width:70%;max-height:46%;width:auto;height:auto}
.cc .th img.cv{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover}
.cc .go{font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin-top:10px;opacity:0;transform:translateY(4px);transition:.3s}
.cc:hover .go,.cc:focus-visible .go{opacity:.8;transform:none}

/* ───────── Companies ───────── */
.cos{padding:30px 0 34px;overflow:hidden}
.cos .l{display:block;font-size:13px;color:var(--mut);padding:0 var(--pad) 22px}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logos{list-style:none;display:flex;align-items:center;width:max-content;animation:mq 34s linear infinite;will-change:transform}
.mq:hover .logos{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.lg{position:relative;display:block;line-height:0;flex:none;padding:0 clamp(34px,5.2vw,78px)}
.lg i{position:relative;display:block;line-height:0;font-style:normal}
.lg img{display:block;height:var(--h);width:auto;transition:opacity .35s ease}
.lg .co{position:absolute;left:0;top:0;opacity:0}
.lg:hover .co{opacity:1}
.lg:hover .bw{opacity:0}

/* ───────── What I do ───────── */
.stk{padding:0 var(--pad) 90px}
.pn{position:sticky;top:calc(84px + var(--i)*16px);display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;min-height:400px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3.4vw,52px);box-shadow:0 -12px 40px -22px rgba(18,18,18,.28);margin-bottom:34px}
.pn:last-child{margin-bottom:0}
.pn-k{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.pn-p{font-size:clamp(19px,1.75vw,26px);line-height:1.28;letter-spacing:-.02em;font-weight:300;margin:16px 0 30px;max-width:36ch}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mi{border-top:3px solid var(--ac);padding-top:12px}
.mi h4{font-size:clamp(15px,1.3vw,18px);font-weight:500;line-height:1.15;letter-spacing:-.01em}
.mi p{font-size:13px;font-weight:300;line-height:1.35;color:var(--mut);margin-top:6px}
.pn-vis{position:relative;align-self:stretch;min-height:260px;border-radius:20px;background:var(--bege);overflow:hidden;display:grid;place-items:center;transition:background .4s}
.pn:hover .pn-vis{background:var(--tint)}
.pn-dot{position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:var(--ac);opacity:.9}
.pn-cap{font-size:13px;color:var(--mut);font-weight:300}

/* ───────── Tools ───────── */
.tools{padding:0 var(--pad) 0;display:grid;grid-template-columns:repeat(5,1fr);column-gap:24px}
.tl{border-top:1px solid var(--line);padding:18px 0 22px;font-size:20px;display:flex;gap:10px;align-items:center}
.note{font-size:12px;color:var(--mut);padding:0 var(--pad) 40px;font-weight:300}
/* ───────── Testimonials ───────── */
.tms{padding:0 var(--pad) 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tm{display:flex;flex-direction:column;justify-content:flex-start;gap:22px;min-height:340px;padding:30px;border-radius:22px;background:#ECE8E0;transition:background .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.tm:hover{background:#fff;transform:translateY(-4px)}
.tm .q{font-family:"Boulder";font-weight:700;font-size:54px;line-height:.6;color:var(--laranja)}
.tm blockquote{font-size:clamp(14px,1.12vw,16px);line-height:1.5;font-weight:300;letter-spacing:-.01em}
.tm figcaption{margin-top:auto;font-size:14px;border-top:1px solid var(--line);padding-top:16px}
.tm b{display:block;font-weight:500}.tm small{display:block;font-size:12px;color:var(--mut);margin-top:2px;font-weight:300}
@media (max-width:1100px){.tms{grid-template-columns:1fr 1fr 1fr;gap:12px}.tm{padding:22px;min-height:260px}}
@media (max-width:760px){.tms{grid-template-columns:1fr}.tm{min-height:0}}

/* ───────── Highlights ───────── */
.hl{padding:0 var(--pad) 56px}
.hr{display:grid;grid-template-columns:110px 1fr 170px;gap:20px;align-items:start;padding:26px 0;border-top:1px solid var(--line);font-size:clamp(19px,1.8vw,26px);letter-spacing:-.02em;transition:padding-left .25s,background .2s}
.hr:last-child{border-bottom:1px solid var(--line)}
.hr:hover{padding-left:14px;background:linear-gradient(90deg,rgba(182,206,92,.22),transparent 60%)}
.hr .y{font-size:14px;color:var(--mut);letter-spacing:0;padding-top:.5em}
.hb{display:flex;flex-direction:column;gap:6px}
.hd{font-size:15px;font-weight:300;letter-spacing:0;color:rgba(18,18,18,.72);line-height:1.4;max-width:60ch}
.ev{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ev li{font-size:13px;letter-spacing:0;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:#fff}
.ev b{font-weight:500;color:var(--ink);margin-right:6px}
.hr .k{margin-top:.6em;font-size:13px;letter-spacing:0;border:1px solid var(--line);border-radius:999px;padding:5px 12px;justify-self:start}

/* ───────── Footer ───────── */
.foot{background:var(--ink);color:var(--bege);padding:96px calc(var(--gutter) + var(--pad)) 40px}
.foot h2{font-size:clamp(52px,9.2vw,132px);letter-spacing:-.04em;line-height:.92}
.foot h2 em{font-style:normal;color:var(--laranja)}
.foot .bt{display:flex;justify-content:space-between;align-items:center;margin-top:70px;font-size:15px;gap:20px;flex-wrap:wrap}
.foot .btn{background:var(--bege);color:var(--ink);border-color:var(--bege)}
.lnk{display:flex;gap:26px;font-weight:300}
.lnk a:hover{color:var(--laranja)}

/* ───────── About overlay (Learn more) ───────── */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;overflow:hidden}
dialog::backdrop{background:rgba(18,18,18,.55);backdrop-filter:blur(2px)}
.ov-box{position:absolute;left:70px;right:70px;top:60px;bottom:110px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ov-box>div{border-radius:18px;background:#fff;overflow:hidden}
.ov-box>.ov-photo{background:#fff url("home/about-modal.jpg") 49.9% 49.9%/cover no-repeat}
.ov-tx{padding:44px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow:auto}
.ov-tx p{font-size:clamp(18px,1.7vw,24px);font-weight:300;line-height:1.4}
.ov-tx p b{font-weight:500}
.ov-x{position:absolute;left:24px;top:-36px;width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:transform .2s}
.ov-x:hover{transform:rotate(90deg)}
.ov-tabs{position:absolute;left:70px;right:70px;bottom:0;height:62px;display:flex;gap:6px}
.ov-tabs button{flex:1;background:var(--bege);border-radius:18px 18px 0 0;display:flex;align-items:center;padding:0 22px;font-size:18px;gap:10px;text-align:left;transition:transform .2s}
.ov-tabs button:hover{transform:translateY(-6px)}
dialog[open] .ov-box{animation:swap .4s cubic-bezier(.2,.8,.2,1)}

/* ───────── Reveal ───────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ───────── Cursor trail (mesmo rastro da página de vendas) ───────── */
.trail{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;display:none}
@media (hover:hover) and (pointer:fine){.trail{display:block}}
@media (prefers-reduced-motion:reduce){.trail{display:none !important}.rv{opacity:1;transform:none;transition:none}.act,dialog[open] .ov-box{animation:none}html{scroll-behavior:auto}}
.bit{position:absolute;will-change:transform,opacity;animation:bit-a .85s cubic-bezier(.2,.7,.3,1) both}
.bit.b{animation-name:bit-b}
.bit.circ{border-radius:999px}
.bit.sq{border-radius:3px}
.bit.dia{border-radius:2px}
.bit.star{clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%)}
@keyframes bit-a{0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.3)}18%{opacity:1;transform:translate(-50%,-50%) rotate(18deg) scale(1)}100%{opacity:0;transform:translate(-50%,-10%) rotate(80deg) scale(.2)}}
@keyframes bit-b{0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.3)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-22deg) scale(1)}100%{opacity:0;transform:translate(-20%,-5%) rotate(-95deg) scale(.2)}}

/* ───────── Responsive ───────── */
@media (max-width:1100px){
  :root{--gutter:28px;--pad:32px}
  .bar{grid-template-columns:1fr auto}
  .bar .role,.bar .time{display:none}
  .tools{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  :root{--gutter:12px;--pad:20px}
  .bar{padding:16px var(--pad);grid-template-columns:minmax(0,1fr)}
  .bar>*,.bar-r{min-width:0}
  .nav a{padding:8px 10px}
  .bar-r{justify-content:space-between;flex-wrap:wrap}
  .nav{margin-right:0;overflow-x:auto;max-width:100%}
  .nav a{padding:8px 12px}
  .bar-r{gap:10px}
  .hero{padding:48px var(--pad) 44px}
  .hero-foot{grid-template-columns:1fr;gap:24px;margin-top:40px}
  .hero-foot p{font-size:19px}
  .tags{justify-content:flex-start}
  .sh{padding:40px var(--pad) 22px;flex-direction:column;align-items:flex-start}
  h2{font-size:34px}
  .cos{padding:24px 0 26px}
  .lg img{height:calc(var(--h)*.78)}
  .logos{animation-duration:26s}
  .tools{grid-template-columns:1fr 1fr}
  .tl{font-size:18px}
  .hr{grid-template-columns:78px 1fr;gap:10px}
  .hr .k{display:none}
  .foot{padding:64px 24px 28px}
  .foot .bt{margin-top:44px}
  .ov-box{left:12px;right:12px;top:48px;bottom:70px;grid-template-columns:1fr;grid-template-rows:200px 1fr}
  .ov-tx{padding:24px}
  .ov-x{left:12px;top:-40px}
  .ov-tabs{left:12px;right:12px;height:46px;overflow-x:auto}
  .ov-tabs button{flex:none;font-size:14px;padding:0 14px}
}
@media (max-width:1100px){.fan{flex-wrap:wrap;gap:22px;padding-bottom:56px}.cc,.cc:first-child{margin-left:0;flex:0 0 calc(33.33% - 15px);aspect-ratio:1/1}}
@media (max-width:760px){.fan{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:24px var(--pad) 48px;scrollbar-width:none}.fan::-webkit-scrollbar{display:none}.cc,.cc:first-child{flex:0 0 74vw;scroll-snap-align:center;aspect-ratio:1/1.05}.cc .go{opacity:.8;transform:none}.cc h3{font-size:24px}.cc p{font-size:13px}.cc .th{width:76px}}
@media (prefers-reduced-motion:reduce){.cc{transition:none}.logos{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:22px}.lg[aria-hidden]{display:none}.mq{-webkit-mask-image:none;mask-image:none}}
@media (max-width:900px){.pn{grid-template-columns:1fr;position:relative;top:auto;min-height:0}.pn-vis{min-height:170px;order:-1}.minis{grid-template-columns:1fr}.stk{padding-bottom:48px}}

/* ═════════ Página de projetos ═════════ */
.ph{padding:70px var(--pad) 40px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.ph h1{font-weight:500;font-size:clamp(64px,13vw,210px);letter-spacing:-.055em;line-height:.9}
.ph h1 small{font-size:clamp(18px,2vw,30px);font-weight:300;letter-spacing:0;color:var(--mut);vertical-align:super;margin-left:.15em}
.ph p{font-size:clamp(16px,1.4vw,20px);font-weight:300;line-height:1.4;max-width:30ch;color:rgba(18,18,18,.8);padding-bottom:.6em}

/* Pastas */
.fds{display:grid;grid-template-columns:repeat(6,1fr);gap:34px 26px;padding:30px var(--pad) 90px}
.fd{--back:#E0DBD0;--front:#ECE8E0;--fg:var(--ink);position:relative;grid-column:span 2;display:block;padding-top:30px;color:var(--fg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fd:nth-child(4){grid-column:2 / span 2}
.fd:nth-child(5){grid-column:4 / span 2}
.fd-back{position:absolute;left:0;right:0;top:30px;bottom:0;background:var(--back);border-radius:0 22px 22px 22px;transition:background-color .45s}
.fd-back::before{content:"";position:absolute;left:0;top:-30px;width:38%;height:36px;background:var(--back);border-radius:18px 18px 0 0;transition:background-color .45s}
.fd-back::after{content:"";position:absolute;left:calc(38% - 1px);top:-30px;width:46px;height:36px;background:var(--back);clip-path:polygon(0 0,38% 0,100% 100%,0 100%);transition:background-color .45s}
.fd-sheet{position:absolute;left:16px;right:16px;top:20px;height:58%;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(18,18,18,.1);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.fd-sheet::before{content:"";position:absolute;left:18px;right:40%;top:14px;height:6px;border-radius:3px;background:rgba(18,18,18,.1)}
.fd-front{position:relative;margin-top:44px;height:clamp(290px,26vw,370px);display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding:clamp(18px,2vw,28px);background:var(--front);border-radius:22px;box-shadow:0 -6px 18px -10px rgba(18,18,18,.2),0 22px 40px -26px rgba(18,18,18,.35);transition:background-color .45s,box-shadow .45s}
.fd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:13px}
.fd-top .sec{opacity:.7;font-weight:300}
.fd-arr{width:38px;height:38px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:16px;flex:none;transition:background-color .35s,color .35s,transform .4s cubic-bezier(.2,.8,.2,1)}
.fd h3{font-family:"Boulder";font-weight:700;font-size:clamp(19px,1.9vw,28px);line-height:1.08;max-width:22ch}
.fd-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.fd-tags{display:flex;flex-wrap:wrap;gap:6px}
.fd-tags span{font-size:12px;border:1px solid currentColor;border-radius:999px;padding:5px 11px;opacity:.75}
.fd .th{flex:none;width:clamp(58px,5.4vw,84px);aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.7);display:grid;place-items:center;overflow:hidden}
.fd .th img{max-width:70%;max-height:46%;width:auto;height:auto}
.fd .th img.cv{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover}
.fd:hover,.fd:focus-visible{--back:var(--hb);--front:var(--hf);--fg:var(--hg,var(--ink));transform:translateY(-6px)}
.fd:hover .fd-sheet,.fd:focus-visible .fd-sheet{transform:translateY(-22px)}
.fd:hover .fd-arr,.fd:focus-visible .fd-arr{background:currentColor;transform:rotate(-45deg)}
.fd:hover .fd-arr i,.fd:focus-visible .fd-arr i{color:var(--hf)}
.fd-arr i{font-style:normal;transition:color .35s}

/* Mini galeria bento (só fotos) */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(120px,14vw,200px);grid-auto-flow:dense;gap:14px;padding:0 var(--pad) 100px}
.bn{position:relative;overflow:hidden;border-radius:20px;background:#E6E1D8}
.bn.b1{grid-column:span 2;grid-row:span 2}.bn.b2,.bn.b3{grid-column:span 2}.bn.b5{grid-column:span 3}
.bn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.bn:hover img{transform:scale(1.05)}
.bn.ph0{background:linear-gradient(135deg,#E9E4DA,#DDD7CB)}
.bn.ph1{background:linear-gradient(135deg,#EFEAE1,#E2DCD0)}
.bn.ph2{background:linear-gradient(135deg,#E3DED4,#D8D2C6)}
.bn:not(:has(img))::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.28) 14px 15px)}

@media (max-width:1100px){
  .fds{grid-template-columns:repeat(2,1fr);gap:30px 18px}
  .fd,.fd:nth-child(4),.fd:nth-child(5){grid-column:span 1}
  .fd:nth-child(5){grid-column:1 / span 1}
  .fd-front{height:clamp(240px,30vw,300px)}
}
@media (max-width:760px){
  .ph{padding:44px var(--pad) 20px}
  .fds{grid-template-columns:1fr;padding-bottom:60px}
  .fds{grid-auto-rows:1fr}
  .fd{display:flex;flex-direction:column}
  .fd-front{height:auto;flex:1;min-height:250px}
  .fd-bot{flex-wrap:wrap}
  .fd-tags{flex:1 1 0;min-width:0}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:10px;padding-bottom:70px}
  .bn.b1{grid-column:span 2;grid-row:span 2}.bn.b2,.bn.b3{grid-column:span 1}.bn.b4,.bn.b5{grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){.fd,.fd-sheet,.bn img{transition:none}}

/* ───────── Case pages ───────── */
.ch{padding:48px var(--pad) 28px}
.ch .back{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:8px 16px;border-radius:999px;background:var(--bege);transition:background .2s,transform .2s}
.ch .back:hover{background:var(--cc,var(--lima));transform:translateX(-3px)}
.ch .kick{display:flex;align-items:center;gap:10px;margin:44px 0 18px;font-size:14px;color:var(--mut)}
.ch .kick .dot{background:var(--cc)}
.ch h1{font-weight:500;font-size:clamp(34px,5.6vw,92px);letter-spacing:-.045em;line-height:1;max-width:18ch;text-wrap:balance}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;background:var(--cc);color:var(--ink)}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:44px var(--pad) 8px}
.meta dt{font-size:13px;color:var(--mut);margin-bottom:6px}
.meta dd{font-size:16px;line-height:1.35;font-weight:500}
.cimg{position:relative;margin:0;border-radius:22px;overflow:hidden;background:color-mix(in srgb,var(--cc,#ccc) 22%,#fff);aspect-ratio:16/9}
.cimg.r85{aspect-ratio:16/8}.cimg.r43{aspect-ratio:4/3}.cimg.r11{aspect-ratio:1/1}.cimg.r34{aspect-ratio:3/4}
.cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cimg .pi{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;font-size:13px;color:rgba(18,18,18,.55);background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.35) 14px 15px)}
.cimg .pi b{font-size:14px;color:rgba(18,18,18,.75)}
.cimg figcaption{position:absolute;left:14px;bottom:12px;font-size:12px;color:rgba(18,18,18,.55);max-width:80%}
.cimg:has(img) figcaption{display:none}
.cover-i{margin:24px var(--pad) 0}
.cs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:40px;padding:84px var(--pad) 0}
.cs>h2{font-size:14px;font-weight:700;letter-spacing:0;color:var(--mut);position:sticky;top:24px;align-self:start;display:flex;gap:12px}
.cs>h2 b{color:var(--ink)}
.cb{max-width:none}
.cb>*:not(.cmedia):not(.nums){max-width:760px}
.cb>*+*{margin-top:20px}
.cb p{font-size:clamp(17px,1.35vw,20px);line-height:1.55;font-weight:400}
.cb p.lead{font-size:clamp(22px,2.2vw,32px);line-height:1.25;letter-spacing:-.02em;font-weight:500}
.cb h3{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;font-weight:700;margin-top:44px}
.cb h4{font-size:17px;font-weight:700;margin-top:30px}
.cb ul,.cb ol{padding-left:1.2em;font-size:clamp(17px,1.3vw,19px);line-height:1.5;font-weight:400}
.cb li+li{margin-top:8px}
.cb li::marker{color:var(--cc)}
.cb li ul{margin-top:8px;font-size:.94em}
.cb blockquote{border-radius:20px;background:color-mix(in srgb,var(--cc) 20%,#fff);padding:22px 26px;font-size:clamp(18px,1.5vw,22px);line-height:1.4;letter-spacing:-.01em}
.cb .fine{font-size:15px;color:var(--mut);line-height:1.45}
.cb strong{font-weight:700}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.nums>div{background:var(--bege);border-radius:20px;padding:20px 22px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.nums b{font-size:clamp(34px,3.6vw,54px);letter-spacing:-.04em;line-height:1;font-weight:500}
.nums span{font-size:14px;line-height:1.3;color:var(--mut)}
.nums .hl{background:var(--cc)}.nums .hl span{color:rgba(18,18,18,.75)}
.cbw{grid-column:1 / -1;padding:0}
.cmedia{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:28px}
.cmedia .w{grid-column:1 / -1}
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th{font-size:13px;color:var(--mut);font-weight:500;text-align:left;padding:0 12px 10px 0}
.tbl td{padding:14px 12px 14px 0;font-weight:400;vertical-align:top}
.tbl td:first-child{font-weight:500}
.tbl tr+tr td{border-top:1px solid var(--line)}
.wip{margin:56px var(--pad) 0;border-radius:28px;background:var(--cc);color:var(--ink);padding:clamp(28px,5vw,64px);display:grid;gap:18px}
.wip.dk{color:#fff}
.wip h2{font-size:clamp(30px,4vw,60px);letter-spacing:-.04em;line-height:1;font-weight:500;max-width:16ch}
.wip p{font-size:clamp(16px,1.4vw,20px);line-height:1.45;max-width:46ch;font-weight:400}
.gal{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin:14px var(--pad) 0}
.gal .w{grid-column:1 / -1}
.nx{display:block;margin:110px var(--pad) 0;padding:34px clamp(22px,4vw,56px);border-radius:28px;background:var(--bege);transition:background .3s}
.nx:hover{background:var(--nc)}
.nx small{font-size:14px;color:var(--mut)}
.nx strong{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:14px;font-weight:500;font-size:clamp(24px,3.2vw,50px);letter-spacing:-.035em;line-height:1.05}
.nx strong span{max-width:22ch}
.nx i{font-style:normal;font-size:1.2em;transition:transform .3s}
.nx:hover i{transform:translateX(8px)}
.cfoot{height:96px}
@media (max-width:1100px){.meta{grid-template-columns:repeat(2,1fr)}.cs{grid-template-columns:1fr;gap:22px;padding-top:64px}.cs>h2{position:static}}
@media (max-width:760px){
  .ch{padding-top:28px}.ch .kick{margin-top:30px}
  .meta{gap:18px;padding-top:30px}
  .cover-i,.gal,.wip,.nx{margin-left:var(--pad);margin-right:var(--pad)}
  .cimg{border-radius:16px}
  .nums{grid-template-columns:1fr 1fr}.nums>div{min-height:112px;padding:16px}
  .cmedia,.gal{grid-template-columns:1fr}
  .tbl{font-size:15px}.nx{margin-top:70px}
}

/* ───────── About ───────── */
.ab-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:end;padding:64px var(--pad) 28px}
.ab-hero h1{font-weight:500;font-size:clamp(38px,6vw,96px);letter-spacing:-.045em;line-height:1;text-wrap:balance}
.ab-hero h1 .d{font-family:"Boulder";font-weight:700;background:var(--rosa);border-radius:999px;padding:0 .14em;margin:0 .04em;display:inline-block;line-height:.95}
.ab-hero p{font-size:clamp(17px,1.5vw,22px);line-height:1.4;font-weight:300;max-width:34ch;margin-top:26px}
.ab-ph{border-radius:24px;overflow:hidden;background:var(--bege) url("photo-larissa.jpg") 55% 30%/cover no-repeat;aspect-ratio:4/5;width:100%}
.ab-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:40px;padding:90px var(--pad) 0}
.ab-intro>h2,.ab-st>h2,.ab-xp-h h2{font-size:14px;font-weight:700;color:var(--mut);letter-spacing:0}
.ab-intro .tx{max-width:780px}
.ab-intro .tx p{font-size:clamp(20px,2vw,30px);line-height:1.3;letter-spacing:-.02em;font-weight:400}
.ab-intro .tx p+p{margin-top:22px}
.ab-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:56px var(--pad) 0}
.ab-cards .cimg{--cc:var(--rosa)}
.ab-cards .cimg:nth-child(2){--cc:var(--lima);margin-top:34px}
.ab-cards .cimg:nth-child(3){--cc:var(--laranja)}
.ab-cards .cimg:nth-child(4){--cc:var(--azul);margin-top:34px}
.ab-xp-h{display:flex;justify-content:space-between;align-items:baseline;padding:100px var(--pad) 22px}
.xps{list-style:none;padding:0 var(--pad);position:relative}
.xp{border-radius:22px;transition:background .25s}
.xp:hover,.xp.open{background:var(--bege)}
.xp-b{width:100%;display:grid;grid-template-columns:64px 1.4fr 1fr 40px;gap:20px;align-items:center;text-align:left;padding:22px 22px}
.xp-b .xlg{width:48px;height:48px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.xp-b .xlg img{max-width:70%;max-height:70%;object-fit:contain}
.xp-b .nm{font-size:clamp(20px,2.2vw,32px);letter-spacing:-.03em;line-height:1.1}
.xp-b .nm small{display:block;font-size:15px;letter-spacing:0;color:var(--mut);margin-top:6px;font-weight:500}
.xp-b .dt{font-size:15px;color:var(--mut)}
.xp-b .pl{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);position:relative;justify-self:end;transition:transform .3s,background .2s}
.xp-b .pl::before,.xp-b .pl::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.xp-b .pl::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.xp.open .pl::after{transform:translate(-50%,-50%) rotate(0)}
.xp-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.xp.open .xp-d{grid-template-rows:1fr}
.xp-d>div{overflow:hidden}
.xp-d .in2{padding:0 22px 28px calc(64px + 20px + 22px);max-width:860px}
.xp-d p{font-size:17px;line-height:1.5;font-weight:400}
.xp-d p+p{margin-top:12px}
.xp-d .xtg{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;list-style:none}
.xp-d .xtg li{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:#fff}
.xp-d .btn{margin-top:18px}
.ab-st{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:40px;padding:110px var(--pad) 0}
.ab-st .tx{max-width:780px}
.ab-st .tx p{font-size:clamp(20px,2vw,30px);line-height:1.3;letter-spacing:-.02em;font-weight:400}
.ab-st .tx .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hr{cursor:pointer}
.hr .hbtn{position:absolute;inset:0;opacity:0}
.hr{position:relative}
.hr .more{font-size:13px;letter-spacing:0;color:var(--mut);margin-top:6px;transition:color .2s}
.hr:hover .more{color:var(--ink)}
.ov-photo.pv{background:repeating-linear-gradient(45deg,var(--bege) 0 14px,#fff 14px 15px);display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:14px;text-align:center;padding:20px;position:relative}
.ov-photo.pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ov-tx h3{font-size:clamp(26px,3vw,44px);letter-spacing:-.035em;line-height:1.05;font-weight:500}
.ov-tx .ev{margin-top:4px}
.ov-tx .more-p{font-size:15px;color:var(--mut);font-weight:400}
.ov-tabs button{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;padding:0 14px}
.ov-tabs button.act{background:#fff}
@media (max-width:1100px){
  .ab-hero{grid-template-columns:1fr;gap:32px}.ab-ph{aspect-ratio:4/3;max-width:560px}
  .ab-intro,.ab-st{grid-template-columns:1fr;gap:18px;padding-top:64px}
  .ab-cards{grid-template-columns:1fr 1fr}.ab-cards .cimg:nth-child(n){margin-top:0}
  .xp-b{grid-template-columns:56px 1fr 40px}.xp-b .dt{grid-column:2;grid-row:2;margin-top:-14px}.xp-b .pl{grid-column:3;grid-row:1 / span 2}
  .xp-d .in2{padding-left:22px}
}
@media (max-width:760px){.ab-hero{padding-top:36px}.ab-xp-h{padding-top:70px}.xp-b{padding:18px 14px;gap:14px}.xps{padding:0 12px}.xp-d .in2{padding:0 14px 24px}.ov-tabs button{flex:none}}


/* ───────── Home v2 · seções do Figma (what / testimonials / where / highlights) ───────── */
.sh2{padding:52px var(--pad) 32px}
.sh2 h2{font-size:44px;line-height:44px;letter-spacing:-1.54px}
/* Tag (componente): outlined, 4/12, 14/16 */
.tag{display:inline-flex;align-items:center;border:1px solid #5a544f;border-radius:999px;padding:4px 12px;font-size:14px;line-height:16px;font-weight:500;color:#5a544f;white-space:nowrap;transition:background .2s,color .2s}
.tag:hover{background:#5a544f;color:#fff}
/* what */
.wcards{display:flex;gap:24px;padding:0 var(--pad) 88px}
.wc{flex:1 1 0;min-width:0;min-height:305px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:40px;overflow:hidden;box-shadow:0 -12px 40px -22px rgba(18,18,18,.28)}
.wc-top{display:flex;flex-direction:column;gap:16px}
.wc-bar{display:block;width:140px;height:4px;background:var(--ac)}
.wc-k{font-size:13px;line-height:16px;font-weight:500;letter-spacing:1.04px;text-transform:uppercase;color:rgba(18,18,18,.6)}
.wc-p{font-size:16px;line-height:32px;font-weight:300;letter-spacing:-.5px}
.wc-tags{display:flex;flex-wrap:wrap;gap:12px}
/* testimonials */
.tms2{display:flex;overflow-x:auto;padding:12px var(--pad) 88px;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:-4px}
.tms2::-webkit-scrollbar{display:none}
.tm2{flex:none;width:398px;max-width:82vw;min-height:400px;margin-right:-6px;display:flex;flex-direction:column;gap:20px;padding:32px 24px 28px 28px;background:#ECE8E0;border-radius:22px;box-shadow:-4px 4px 13px rgba(0,0,0,.1);transform:rotate(var(--r,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1),background .35s,box-shadow .35s}
.tm2:last-child{padding-right:16px;gap:36px;margin-right:48px}
.tm2:hover{transform:rotate(0deg) translateY(-8px);background:#fff;box-shadow:-6px 14px 28px -8px rgba(0,0,0,.18);z-index:2}
.tm2 .q{font-family:"Bricolage",sans-serif;font-weight:700;font-size:54px;line-height:32px;color:var(--laranja);height:32px}
.tm2 blockquote{font-size:16px;line-height:24px;font-weight:300;letter-spacing:-.16px}
.tm2 figcaption{margin-top:auto;border-top:1px solid var(--line);padding-top:16px}
.tm2 b{display:block;font-size:14px;line-height:17px;font-weight:500}
.tm2 small{display:block;font-size:12px;line-height:14px;font-weight:300;color:var(--mut);margin-top:2px}
/* where */
.map{position:relative;margin:0 var(--pad);aspect-ratio:1216/532}
.map-bg{position:absolute;left:0;top:calc(-34/532*100%);width:100%;height:auto;display:block;pointer-events:none}
.mk{position:absolute;width:24px;height:24px;transform:translate(0,0)}
.mk-br{width:40px;height:40px}
.mk-h,.mk-d{position:absolute;border-radius:50%}
.mk-h{inset:0}
.mk-d{border:2px solid var(--bg);box-sizing:border-box}
.mk-or .mk-h{background:var(--laranja)} .mk-or .mk-d{left:7px;top:7px;width:10px;height:10px;background:var(--laranja)}
.mk-br .mk-h{background:var(--lima)} .mk-br .mk-d{left:12px;top:12px;width:16px;height:16px;background:var(--lima)}
.ml{position:absolute;background:var(--bg);padding:6px 12px;border-radius:14px;font-size:13px;line-height:16px;font-weight:500;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:16px 40px;padding:40px var(--pad) 96px}
.lg2{display:flex;align-items:center;gap:8px;font-size:15px;line-height:21px}
.lg2 b{font-weight:500}.lg2 span:last-child{font-weight:300}
.lg2 .bx{width:8px;height:8px;flex:none}
/* highlights */
.hx{margin:0 var(--pad);padding-bottom:56px}
.hxr{display:grid;grid-template-columns:126px minmax(0,1fr) 91px;align-items:center;column-gap:0;padding:28px 76px 24px 0;border-top:1px solid var(--line);position:relative;transition:padding-left .25s,background .25s}
.hxr:hover{padding-left:16px;background:linear-gradient(90deg,rgba(182,206,92,.22),transparent 60%)}
.hxy{align-self:start;padding-top:8px;font-size:14px;line-height:17px;font-weight:500;color:var(--mut);white-space:nowrap}
.hxb{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.hxt{font-size:25.92px;line-height:31px;font-weight:500;letter-spacing:-.52px}
.hxd{font-size:15px;line-height:21px;font-weight:300;color:rgba(18,18,18,.72)}
.hxk{justify-self:center;border:1px solid var(--line);border-radius:14px;padding:4px 8px;font-size:13px;line-height:16px;font-weight:500;white-space:nowrap}
.hxev{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hxev li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 8px 4px 12px;font-size:13px;line-height:16px;font-weight:500;color:var(--mut)}
@media (max-width:1100px){.wcards{flex-direction:column}.wc{min-height:0}}
@media (max-width:760px){
  .sh2 h2{font-size:34px;line-height:36px}
  .hxr{grid-template-columns:78px minmax(0,1fr);padding-right:0}
  .hxk{display:none}
  .hxt{font-size:22px;line-height:27px}
  .ml{font-size:11px;padding:4px 8px}
  .mk-br{transform:scale(.6)}
}
@media (prefers-reduced-motion:reduce){.tm2,.hxr{transition:none}}

/* ───────── About · conforme Figma (ab-hero / ab-intro / ab-cards / xps / ab-st) ───────── */
.ab-hero{position:relative;display:block;min-height:640px;padding:64px var(--pad) 24px;overflow:visible}
.ab-hero-tx{display:flex;flex-direction:column;gap:40px;max-width:800px;padding-top:0;position:relative;z-index:1;margin-top:77px}
.ab-hero h1{font-size:clamp(40px,6vw,86.4px);line-height:1;letter-spacing:-.045em;text-wrap:wrap}
.ab-hero h1 .d{font-family:"Boulder";font-weight:700;letter-spacing:-.01em;background:var(--rosa);border-radius:999px;padding:0 .22em;margin:0 0 0 -.22em;line-height:.95;display:inline-block;white-space:nowrap}
.ab-hero p{font-size:21.6px;line-height:30px;max-width:449px;margin-top:0}
.ab-badge{position:absolute;right:0;top:-137px;width:min(556px,40vw);aspect-ratio:556/936;pointer-events:none;overflow:hidden;z-index:0}
.ab-badge img{position:absolute;max-width:none}
.bd-main{left:0;top:0;width:100%;height:100%;object-fit:contain;transform:rotate(14.23deg)}
.bd-shadow{left:1.1%;top:1.3%;width:100%;height:100%;object-fit:contain;transform:rotate(14.23deg);filter:blur(12.95px);opacity:.2}
.bd-photo{left:calc(156/556*100%);top:calc(378/936*100%);width:calc(171/556*100%);transform:rotate(11.47deg);border-radius:8px}
.ab-intro{display:block;padding:88px var(--pad) 0}
.ab-intro>h2{font-size:14px;line-height:14px;position:absolute}
.ab-intro{position:relative}
.ab-intro .tx{margin-left:408px;max-width:790px}
.ab-intro>h2{left:var(--pad);top:88px}
.ab-intro .tx p{font-size:28.8px;line-height:37px;letter-spacing:-.58px;font-weight:400}
.ab-intro .tx p:first-child{padding-top:4px}
.ab-intro .tx p+p{margin-top:24px}
/* Polaroids */
.ab-cards{position:relative;display:flex;justify-content:center;align-items:flex-start;padding:96px var(--pad) 32px;gap:0}
.pl-w{flex:none;width:314px;height:406px;margin-right:-18px;padding-top:var(--pt,0);display:flex;align-items:center;justify-content:center;box-sizing:content-box}
.pl-w:nth-of-type(2),.pl-w:nth-of-type(4){}
.polaroid{position:relative;width:294px;height:391px;margin:0;border:1px solid #e6e1d5;border-radius:4px;background:linear-gradient(180deg,#fffefb,#f4f1e9);filter:drop-shadow(0 3px 3px rgba(51,38,26,.18)) drop-shadow(0 18px 14px rgba(51,38,26,.28));transform:rotate(var(--rot));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pl-w:hover{z-index:5}
.pl-w:hover .polaroid{transform:rotate(0deg) translateY(-10px) scale(1.03)}
.polaroid .ph{position:absolute;left:14px;top:14px;width:262px;height:300px;border-radius:2px;overflow:hidden;background:repeating-linear-gradient(45deg,#e9e4d8 0 12px,#f1ede2 12px 13px)}
.polaroid .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.polaroid .gloss{position:absolute;left:14px;top:14px;width:262px;height:300px;border-radius:1px;background:linear-gradient(131deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 21.4%,rgba(255,255,255,.16) 30%,rgba(255,255,255,0) 39.3%,rgba(0,0,0,.06) 71.4%);pointer-events:none}
.polaroid .aging{position:absolute;left:-1px;top:-1px;width:294px;height:391px;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0) 70%,rgba(184,169,138,.12));pointer-events:none}
.pl-w{position:relative;z-index:1}
.stk{position:absolute;z-index:6;display:inline-flex;align-items:center;padding:4px 16px;border-radius:41px;font-size:28.8px;line-height:37px;letter-spacing:-.58px;font-weight:400;white-space:nowrap;color:var(--ink);transform:rotate(var(--rot));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.stk:hover{transform:rotate(0deg) scale(1.05)}
.stk-rosa{background:var(--rosa)}.stk-lima{background:var(--lima)}.stk-lar{background:var(--laranja)}
.ab-xp-h{padding:100px var(--pad) 0}
.ab-xp-h h2{font-size:14px;line-height:14px}
.xps{padding:20px calc(var(--pad) + 20px) 20px;display:flex;flex-direction:column;gap:24px}
.xp{border-radius:22px;margin:0 -20px}
.xp-b{grid-template-columns:96px minmax(0,1fr) 438px;gap:36px;padding:20px 20px}
.xp-b .xlg{width:96px;height:56px;border-radius:12px;padding:8px}
.xp-b .xlg img{max-width:100%;max-height:100%}
.xp-b .nm{font-size:31.68px;line-height:35px;letter-spacing:-.95px;font-weight:500}
.xp-b .nm small{font-size:15px;line-height:17px;margin-top:8px}
.xp-b .dt{font-size:15px;line-height:18px;font-weight:500;color:var(--mut);padding-left:0}
.xp-d .in2{padding:0 20px 24px calc(96px + 36px + 20px)}
.ab-st{display:block;position:relative;padding:108px var(--pad) 0}
.ab-st>h2{position:absolute;left:var(--pad);top:108px;font-size:14px;line-height:14px}
.ab-st .tx{margin-left:408px;max-width:811px;padding-top:4px;display:flex;flex-direction:column;gap:24px}
.ab-st .tx p{font-size:28px;line-height:37px;letter-spacing:-.58px;font-weight:400}
.ab-st .tx p .mt{color:#939393}
.ab-st .tx .acts{margin-top:0}
.ab-st .tx .btn{padding:12px 20px;line-height:17px}
#highlights .hxr{cursor:pointer}
@media (max-width:1100px){
  .ab-hero{min-height:0;padding-bottom:48px}.ab-hero-tx{margin-top:0}
  .ab-badge{position:relative;right:auto;top:auto;width:min(360px,70vw);margin:24px auto 0}
  .ab-intro>h2,.ab-st>h2{position:static;display:block;margin-bottom:18px}
  .ab-intro .tx,.ab-st .tx{margin-left:0}
  .ab-intro .tx p{font-size:22px;line-height:30px}
  .ab-cards{flex-wrap:wrap;justify-content:center;gap:24px;padding-top:56px}
  .pl-w{margin-right:0}
  .stk{position:static;transform:rotate(var(--rot));font-size:20px;line-height:26px}
  .xp-b{grid-template-columns:72px minmax(0,1fr);gap:16px}
  .xp-b .xlg{width:72px}
  .xp-b .dt{grid-column:2;grid-row:2;margin-top:0}
  .xp-b .nm{font-size:24px;line-height:28px}
  .xp-d .in2{padding-left:20px}
}

/* ───────── Projects · conforme Figma (ph / catalog / bento) ───────── */
.ph2{padding:104px var(--pad) 0}
.ph2 h1{font-weight:500;font-size:clamp(72px,13vw,187.2px);line-height:.9;letter-spacing:-.055em;white-space:nowrap}
.fcr{display:flex;align-items:flex-start;padding:118px 112px 56px;overflow-x:auto;overflow-y:hidden;margin:0 calc(-1*var(--gutter));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fcr::-webkit-scrollbar{display:none}
.fcw{flex:none;margin-right:-173px;display:flex;align-items:center;justify-content:center}
.fcw:last-child{margin-right:0}
.fcw:hover{z-index:5}
.fc{--back:#E0DBD0;--front:#ECE8E0;--fg:var(--ink);position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:560px;height:444px;flex:none;color:var(--fg);transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fc-back{position:absolute;left:0;top:30px;width:560px;height:414px;background:var(--back);border-radius:0 22px 22px 22px;transition:background-color .45s}
.fc-back::before{content:"";position:absolute;left:0;top:-30px;width:122px;height:36px;background:var(--back);border-radius:18px 18px 0 0;transition:background-color .45s}
.fc-back::after{content:"";position:absolute;left:121px;top:-30px;width:40px;height:36px;background:var(--back);clip-path:polygon(0 0,38% 0,100% 100%,0 100%);transition:background-color .45s}
.fc-sheet{position:absolute;left:16px;top:20px;width:528px;height:258px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(18,18,18,.1);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.fc-front{position:relative;display:flex;flex-direction:column;height:370px;padding:28px;background:var(--front);border-radius:22px;filter:drop-shadow(0 22px 20px rgba(18,18,18,.35));transition:background-color .45s}
.fc-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;line-height:16px;font-weight:500}
.fc-arr{width:40px;height:40px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:16px;line-height:24px;transition:background-color .35s,color .35s,transform .4s cubic-bezier(.2,.8,.2,1)}
.fc-arr i{font-style:normal;transition:color .35s}
.fc-t{flex:1;padding-top:52px;font-weight:700;font-size:27.36px;line-height:32px;display:block}
.fc-bot{display:flex;justify-content:space-between;align-items:flex-end}
.fc-tags{display:flex;gap:8px;align-items:center}
.fc-tags span{border:1px solid currentColor;border-radius:999px;padding:4px 12px;font-size:12px;line-height:16px;font-weight:500}
.fc .th{width:80px;height:80px;border-radius:14px;background:rgba(255,255,255,.7);display:grid;place-items:center;overflow:hidden;padding:0 8px}
.fc .th img{max-width:100%;max-height:60%;width:auto;height:auto}
.fc .th img.cv{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover}
.fc:hover,.fc:focus-visible{--back:var(--hb);--front:var(--hf);--fg:var(--hg,var(--ink));transform:rotate(var(--r,0deg)) translateY(-6px)}
.fc:hover .fc-sheet,.fc:focus-visible .fc-sheet{transform:translateY(-22px)}
.fc:hover .fc-arr,.fc:focus-visible .fc-arr{background:currentColor;transform:rotate(-45deg)}
.fc:hover .fc-arr i,.fc:focus-visible .fc-arr i{color:var(--hf)}
/* bento */
@media (max-width:760px){.fcr{padding-left:var(--pad)}}
@media (prefers-reduced-motion:reduce){.fc,.fc-sheet{transition:none}}

/* ───────── Cases · conforme Figma (ch / meta / wip / nx) ───────── */
.ch{padding:48px var(--pad) 36px}
.ch .back{padding:8px 16px 8px 16px;border-radius:17px;line-height:17px;background:var(--bege)}
.ch .kick{margin:36px 0 4px;gap:8px;line-height:17px}
.ch .kick .dot{width:8px;height:8px;border-radius:4px}
.ch .kick .pill{padding:4px 12px;font-size:14px;line-height:16px;font-weight:500;color:#fff;background:var(--cc)}
.ch h1{font-size:clamp(36px,5.6vw,80.64px);line-height:1.004;letter-spacing:-.045em;max-width:748px;text-wrap:wrap;margin-top:12px}
.meta{display:flex;justify-content:space-between;gap:24px;padding:48px var(--pad) 0}
.meta dt{font-size:13px;line-height:16px;margin-bottom:8px}
.meta dd{font-size:16px;line-height:22px}
.meta+.wip,.meta~.wip{margin-top:80px}
.wip{padding:64px 64px;gap:8px}
.wip .pill{font-size:13px;line-height:16px;padding:4px 12px;border-radius:14px}
.wip h2{font-size:clamp(34px,4vw,57.6px);line-height:1.007;letter-spacing:-.04em;max-width:516px;padding-top:8px}
.wip p{font-size:20px;line-height:29px;padding-top:16px;max-width:none}
.wip .btn{margin-top:8px}
.nx{margin-top:124px;padding:36px 52px 36px 56px;min-height:159px;display:flex;flex-direction:column;gap:8px}
.nx small{line-height:17px}
.nx strong{margin-top:0;font-size:46.08px;line-height:48px;letter-spacing:-1.61px;align-items:flex-end}
.nx i{font-size:55.3px;line-height:58px}
@media (max-width:1100px){.meta{flex-wrap:wrap}.meta>div{flex:1 1 40%}.nx strong{font-size:32px;line-height:36px}.nx i{font-size:40px}.wip{padding:36px 28px}}
.ccap{text-align:center;font-size:13px;line-height:16px;color:var(--mut);margin-top:12px}

/* ───────── Hero photo (P&B → cor no hover) ───────── */
.cv-ph{position:absolute;left:17.22%;bottom:0;width:61.04%;height:min(789px,calc(100% - 111px));margin:0;border-radius:22px 22px 0 0;overflow:hidden;z-index:0}
.cv-ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(1);transition:filter .5s ease}
.cv-ph:hover img{filter:none}
.cover>*:not(.cv-ph){position:relative;z-index:1}
.cover .name{pointer-events:none}
.cover .bar{pointer-events:auto}
@media (max-width:760px){.cv-ph{left:var(--pad);right:var(--pad);width:auto;height:min(520px,70%)}}

/* ───────── Bento grid (fill width, altura fixa) ───────── */
.bnt{padding:80px var(--pad)}
.bnt-track{display:flex;gap:12px;align-items:flex-start;width:100%}
.bnt-st{flex:761 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.bnt-r{display:flex;gap:12px}
.bi{margin:0;position:relative;overflow:hidden;border-radius:22px;background:repeating-linear-gradient(45deg,var(--bege) 0 14px,#fff 14px 15px);min-width:0}
.bi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.bi:hover img{filter:none;transform:scale(1.04)}
.bi1{flex:443 1 0;height:413px}
.bi2{flex:400 1 0;height:200px;border-radius:0}.bi3{flex:349 1 0;height:200px}
.bi4{flex:200 1 0;height:201px}.bi5{flex:549 1 0;height:201px}
@media (max-width:760px){.bnt{padding:48px var(--pad)}.bnt-track{flex-direction:column}.bi1{flex:none;width:100%}.bnt-st{flex:none;width:100%}}

/* ───────── Gate de senha ───────── */
html.locked body>.wrap{visibility:hidden}
#gate{border:0;border-radius:22px;padding:0;background:#fff;width:min(480px,calc(100vw - 32px));margin:auto}
#gate::backdrop{background:rgba(18,18,18,.55);backdrop-filter:blur(1px)}
.gt{position:relative;display:grid;gap:16px;padding:40px 40px 36px}
.gt h3{font-size:28px;line-height:1.15;font-weight:500;letter-spacing:-.03em}
.gt-x{position:absolute;right:16px;top:12px;width:32px;height:32px;border-radius:50%;font-size:20px;transition:transform .2s}
.gt-x:hover{transform:rotate(90deg)}
.gt-f{display:grid;gap:8px}
.gt-f input{border:1px solid var(--line);border-radius:21px;padding:12px 20px;font:inherit;font-size:16px;background:var(--bg);outline:none}
.gt-f input:focus{border-color:var(--ink)}
.gt-e{font-size:13px;color:var(--laranja);min-height:16px}
.gt .btn{justify-self:start}
#gate.shk .gt{animation:shk .35s}
@keyframes shk{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.hxev a,.ev a{color:inherit;text-decoration:none}
.hxev li:has(a):hover,.ev li:has(a):hover{background:var(--ink);border-color:var(--ink);color:#fff;cursor:pointer}

/* Setas do carrossel de projetos */
.fcn{display:flex;gap:12px;padding:0 var(--pad) 88px}
.fcb{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);color:var(--ink);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background-color .25s,color .25s,transform .25s,opacity .25s}
.fcb:hover:not(:disabled){background:var(--ink);color:#fff;transform:scale(1.06)}
.fcb:active:not(:disabled){transform:scale(.96)}
.fcb:disabled{opacity:.3;cursor:default}
.fcb:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}

/* Drag + setas dos carrosséis */
.drg{cursor:grab}
.drg.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.drg.dragging *{pointer-events:none}
.fcn.off{display:none}

/* Crachá (imagem única do Figma, já inclinada e com sombra) */
.ab-badge{right:0;top:0;width:min(602px,42vw);aspect-ratio:602/640;overflow:visible}
.bd-main{left:0;top:0;width:100%;height:100%;object-fit:contain;transform:none}

/* Testemunhos: o carrossel sangra até a borda da tela, o primeiro card alinha com a margem */
.tms2{margin:0 calc(-1*var(--gutter));padding:12px calc(var(--gutter) + var(--pad)) 40px}
@media (max-width:760px){.tms2{padding-left:var(--pad)}}

/* Imagens dos cases (preenchem o quadro; mockups com transparência ficam sem fundo) */
.cimg:has(img){background:none}
.cmedia .ccap{grid-column:1 / -1}
.cmedia .cimg{width:100%}
.cover-i .cimg{width:100%}
.cc{max-width:none}

/* ───────── Round 2 overrides ───────── */
/* hero: foto inteira, base alinhada, à frente do nome */
.cv-ph{left:50%;transform:translateX(-50%);width:auto;height:min(92%,calc(100% - 100px));aspect-ratio:824/1450;border-radius:0;overflow:visible;z-index:2;background:none;pointer-events:auto}
.cv-ph img{width:auto;height:100%;max-width:100%;object-fit:contain;object-position:center bottom;display:block}
.cover>*:not(.cv-ph){position:relative;z-index:1}
.cover>.bar{z-index:3}
.cover>.cv-ph{position:absolute}
@media (max-width:760px){.cv-ph{left:50%;right:auto;width:auto;height:min(80%,520px)}}

/* depoimentos: grid reto, 32px, loop infinito, pausa no hover */
.tms2{display:block;overflow:hidden;margin:0 calc(-1*var(--gutter));padding:12px 0 56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tms-track{display:flex;align-items:stretch;width:max-content;animation:tms 70s linear infinite;will-change:transform}
.tms2:hover .tms-track{animation-play-state:paused}
@keyframes tms{to{transform:translateX(-50%)}}
.tm2,.tm2:last-child{transform:none;margin:0 32px 0 0;padding:32px 24px 28px 28px;gap:20px;width:398px;max-width:none;min-height:0;flex:none}
.tm2:hover{transform:none;background:#fff;box-shadow:-4px 10px 24px -8px rgba(0,0,0,.18)}
@media (max-width:760px){.tm2,.tm2:last-child{width:300px}}
@media (prefers-reduced-motion:reduce){.tms2{overflow-x:auto}.tms-track{animation:none}.tm2[aria-hidden]{display:none}}

/* mapa interativo */
.mk,.ml{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.mk-or{transform-origin:50% 50%;cursor:default}
.mk-or::after{content:"";position:absolute;inset:-8px}
.mk-or:hover,.mk-or:has(+ .ml:hover){transform:scale(1.3)}
.mk-or:hover + .ml,.mk-or + .ml:hover{transform:scale(1.12)}
.ml{transform-origin:0 50%}
.ml-br{display:flex;align-items:center;gap:0}
.mk-br{cursor:default}
.mk-br::after{content:"";position:absolute;inset:-4px}

/* modal de senha: altura = conteúdo */
#gate{height:fit-content;max-height:none;overflow:visible;inset:0;margin:auto}

/* projects: grid, sem carrossel */
.fcg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding:80px var(--pad) 96px}
.fcg .fcw{margin:0;display:block;width:auto;height:auto}
.fcg .fc{width:100%;height:auto;aspect-ratio:560/444;transform:none}
.fcg .fc:hover,.fcg .fc:focus-visible{transform:translateY(-6px)}
.fcg .fc-back{top:6.76%;width:100%;height:93.24%}
.fcg .fc-sheet{left:2.86%;top:4.5%;width:94.28%;height:58.1%}
.fcg .fc-front{height:83.33%}
@media (max-width:900px){.fcg{grid-template-columns:minmax(0,1fr)}}

/* ───────── Cases: layout como no Figma (coluna 780px) ───────── */
.ch,.meta{max-width:none}
.ch h1{max-width:min(100%,1100px);font-size:clamp(32px,5.6vw,80.64px)}
.cover-i{max-width:calc(1188px + 2*var(--pad));}
.cs{grid-template-columns:minmax(0,1fr) minmax(0,780px);gap:0 40px;max-width:calc(1188px + 2*var(--pad));padding-top:80px}
.cb>*:not(.cmedia):not(.nums){max-width:none}
.cb li::marker{color:currentColor}
.cmedia{gap:16px}
.cb .cimg,.cb .cmedia .cimg{width:100%}
.nums{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.nums .nr{display:flex;gap:16px}
.nums .nr3{width:calc(100% - 7px)}
.nums .nr-b2,.nums .nr-b3{gap:12px}
.nums .nb{flex:1 1 0;min-width:0;height:144px;box-sizing:border-box;padding:20px;border-radius:20px;background:#F1EEE9;display:flex;flex-direction:column;justify-content:space-between;gap:0;overflow:hidden}
.nums .nb b{font-weight:500;font-size:51.84px;line-height:52px;letter-spacing:-2.07px;color:var(--ink);white-space:nowrap}
.nums .nb span{font-size:14px;line-height:18px;font-weight:500;color:rgba(18,18,18,.6)}
.nums .nb.hl{background:var(--hlc,var(--cc))}
.nums .nb.hl span{color:rgba(18,18,18,.75)}
.nums .nb.hl.w,.nums .nb.hl.w b,.nums .nb.hl.w span{color:#fff}
@media (max-width:1100px){.cs{max-width:none;grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .nums .nr,.nums .nr3{flex-direction:column;width:100%;gap:12px}
  .nums .nb{height:auto;min-height:132px;gap:24px}
  .ch h1{font-size:clamp(26px,7.4vw,40px)}
}
.nums>.nr{background:none;padding:0;min-height:0;border-radius:0;display:flex;flex-direction:row;gap:16px;justify-content:flex-start}
.nums>.nr-b2,.nums>.nr-b3{gap:12px}
@media (max-width:760px){.nums>.nr{flex-direction:column;gap:12px}}
.nums .nb.hl span{max-width:192px}

/* mais respiro entre "Where I stand" e "Highlights" */
#highlights{padding-top:120px}
@media (max-width:760px){.ch h1{font-size:clamp(22px,6.4vw,40px)}}
.cmedia>.cimg:only-child{grid-column:1/-1}

/* Brasil: mesmo hover dos outros pins + foto surge por trás do pin */
.ml-br{display:block}
.mk-br{isolation:isolate;transform-origin:50% 50%}
.mk-br:hover,.mk-br:has(+ .ml:hover){transform:scale(1.3)}
.mk-br:hover + .ml,.mk-br + .ml:hover{transform:scale(1.12)}
.mk-pic{position:absolute;z-index:-1;left:50%;bottom:50%;width:auto;height:110px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(18,18,18,.25));opacity:0;transform:translate(-50%,14px) scale(.4);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .25s;pointer-events:none}
.mk-br:hover .mk-pic,.mk-br:has(+ .ml:hover) .mk-pic{opacity:1;transform:translate(-50%,-6px) scale(1)}

/* cases: bloco central (títulos, hero, texto e imagens com a mesma margem dos dois lados) */
.ch,.meta,.cover-i,.cs,.nx{max-width:calc(1188px + 2*var(--pad));margin-left:auto;margin-right:auto}
.cover-i,.nx{width:100%}
@media (max-width:1100px){.ch,.meta,.cover-i,.cs,.nx{max-width:none}}
.cover-i{padding:0 var(--pad);box-sizing:border-box}.nx{box-sizing:border-box}
.nx{width:min(1188px,calc(100% - 2*var(--pad)))}

/* projects: 3 por linha, pasta escala com a largura */
.fcg{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.fcg .fc{container-type:inline-size}
.fcg .fc-front{padding:5cqw}
.fcg .fc-top{font-size:max(11px,2.32cqw);line-height:1.25}
.fcg .fc-arr{width:7.14cqw;height:7.14cqw;min-width:30px;min-height:30px;font-size:max(13px,2.86cqw)}
.fcg .fc-t{padding-top:7cqw;font-size:max(18px,4.886cqw);line-height:1.17}
.fcg .fc-tags{gap:1.4cqw;flex-wrap:wrap}
.fcg .fc-tags span{font-size:max(10px,2.14cqw);line-height:1.33;padding:.7cqw 2.1cqw}
.fcg .fc .th{width:14.3cqw;height:14.3cqw;min-width:48px;min-height:48px;border-radius:2.5cqw}
@media (max-width:1100px){.fcg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fcg{grid-template-columns:minmax(0,1fr)}}

/* menu fixo no scroll */
:root{--barh:87px}
.bar,.cover>.bar,.cover .bar{position:fixed;top:0;left:0;right:0;z-index:100;padding-left:calc(var(--gutter) + var(--pad));padding-right:calc(var(--gutter) + var(--pad));background:transparent;transition:background-color .25s,box-shadow .25s,backdrop-filter .25s}
.bar.scrolled{background:rgba(248,246,242,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.wrap:not(:has(.cover)){padding-top:var(--barh)}
.cover{padding-top:var(--barh)}
@media (max-width:760px){.bar,.cover>.bar,.cover .bar{padding-left:var(--pad);padding-right:var(--pad)}}
.cover::before{content:"";display:block;height:0}
html{scroll-padding-top:var(--barh)}.cs>h2{top:calc(var(--barh) + 24px)}