/* =========================================================
   Sr Job Designers — v2 (layout estilo Stravo, identidade Sr Job)
   ========================================================= */
:root{
  --bg:#0a0a0a;
  --bg-2:#0f0f0f;
  --surface:#161616;
  --line:rgba(255,255,255,.11);
  --text:#ededed;
  --muted:#8a8a8a;
  --accent:#ffffff;      /* destaque = branco puro (P&B) */
  --paper:#f4f4f4;       /* blocos invertidos claros */
  --ink:#0a0a0a;         /* texto sobre blocos claros */
  --whats:#ffffff;       /* CTAs monocromáticos */
  --container:1200px;
  --nav-h:80px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  background:var(--bg);color:var(--text);
  font-family:"Poppins",system-ui,-apple-system,sans-serif;
  font-weight:400;line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.accent{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Unbounded (display) só nos títulos/números; corpo continua Poppins */
.hero__title,.h-huge,.h-big,.h-mid,.why__title,.final__title,.acc__name,
.stat strong,.stat em,.svc__card h3,.case__meta h3,.deliver__head .h-huge,
.nav__name,.footer__logo,.menu__links a{
  font-family:"Unbounded","Poppins",sans-serif;letter-spacing:-.02em;font-weight:700}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
sup{font-size:.4em;vertical-align:super}

/* selection */
::selection{background:var(--accent);color:#0c0c0c}

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:40px 24px;transition:opacity .6s ease,visibility .6s ease}
.preloader.done{opacity:0;visibility:hidden}
.preloader__inner{width:100%;max-width:var(--container);margin-inline:auto;
  display:flex;align-items:flex-end;justify-content:space-between}
.preloader__brand{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;letter-spacing:-.02em}
.preloader__brand em{color:var(--accent);font-style:normal}
.preloader__logo{height:clamp(34px,6vw,54px);width:auto;display:block}
.preloader__count{font-size:clamp(3rem,16vw,9rem);font-weight:800;line-height:.9;
  letter-spacing:-.04em;color:var(--accent)}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;transition:transform .45s var(--ease),background .3s ease,backdrop-filter .3s ease}
.nav.hide{transform:translateY(-100%)}
.nav.solid{background:rgba(12,12,12,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav__inner{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px;
  display:flex;align-items:center;justify-content:space-between}
.nav__name{font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.nav__logo{height:30px;width:auto;display:block}
.nav__name em{color:var(--accent);font-style:normal;font-size:.7em;vertical-align:top}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__whats{width:42px;height:42px;border-radius:50%;background:var(--whats);color:var(--ink);
  display:grid;place-items:center;transition:transform .3s var(--ease)}
.nav__whats:hover{transform:scale(1.08)}
.nav__toggle{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:transparent;
  cursor:pointer;display:grid;place-content:center;gap:5px;transition:border-color .3s}
.nav__toggle:hover{border-color:var(--accent)}
.nav__toggle span{display:block;width:20px;height:2px;background:var(--text);transition:transform .35s var(--ease),opacity .2s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- Menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:110;background:var(--bg-2);
  clip-path:circle(0% at calc(100% - 46px) 40px);
  transition:clip-path .7s var(--ease);pointer-events:none}
.menu.open{clip-path:circle(150% at calc(100% - 46px) 40px);pointer-events:auto}
.menu__inner{height:100%;max-width:var(--container);margin-inline:auto;padding:120px 24px 40px;
  display:flex;flex-direction:column;justify-content:center}
.menu__links{list-style:none}
.menu__links li{overflow:hidden}
.menu__links a{display:flex;align-items:baseline;gap:18px;padding:6px 0;
  font-size:clamp(2.4rem,9vw,5.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  color:var(--text);transition:color .3s,padding-left .4s var(--ease);
  transform:translateY(110%);transition:transform .6s var(--ease)}
.menu.open .menu__links a{transform:translateY(0)}
.menu.open .menu__links li:nth-child(1) a{transition-delay:.10s}
.menu.open .menu__links li:nth-child(2) a{transition-delay:.16s}
.menu.open .menu__links li:nth-child(3) a{transition-delay:.22s}
.menu.open .menu__links li:nth-child(4) a{transition-delay:.28s}
.menu.open .menu__links li:nth-child(5) a{transition-delay:.34s}
.menu__links a::before{content:attr(data-i);font-size:.9rem;font-weight:500;color:var(--muted);transform:translateY(-.4em)}
.menu__links a:hover{color:var(--accent);padding-left:14px}
.menu__foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:40px;border-top:1px solid var(--line)}
.menu__foot a{color:var(--muted);font-size:.95rem;transition:color .3s}
.menu__foot a:hover{color:var(--accent)}

/* ---------- Hero (vídeo) ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#f8f7fa}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:0}
.hero__scrim{position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.hero__scrim--top{top:0;height:180px;
  background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,0))}
.hero__scrim--bottom{bottom:0;height:200px;
  background:linear-gradient(0deg,rgba(10,10,10,.5),rgba(10,10,10,0))}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;mix-blend-mode:difference}
.hero__scroll svg{animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- Embaçado fixo na base da rolagem (~16% da altura) ---------- */
.scroll-blur{position:fixed;left:0;right:0;bottom:0;height:16svh;z-index:95;pointer-events:none;
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  background:linear-gradient(to top,rgba(10,10,10,.6),rgba(10,10,10,0));
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 24%,rgba(0,0,0,.4) 62%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,#000 24%,rgba(0,0,0,.4) 62%,transparent 100%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .scroll-blur{background:linear-gradient(to top,var(--bg) 8%,rgba(10,10,10,.7) 45%,transparent)}
}

/* ---------- Service strip (marquee) ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  padding:22px 0;background:var(--paper);color:var(--ink)}
.strip__track{display:flex;gap:0;width:max-content;animation:march 26s linear infinite}
.strip span{font-size:clamp(2rem,6vw,4.6rem);font-weight:800;letter-spacing:-.03em;
  padding:0 .5em;display:inline-flex;align-items:center;white-space:nowrap}
.strip em{font-style:normal;font-size:.5em;margin-left:.2em;transform:translateY(-.3em)}
@keyframes march{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:clamp(70px,11vw,150px) 0}
.section--tight{padding:clamp(50px,8vw,110px) 0}
.head{max-width:900px;margin-bottom:clamp(40px,6vw,72px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:500;
  color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px}
.eyebrow em{font-style:normal;color:var(--accent)}
.h-huge{font-size:clamp(2.6rem,9vw,7rem);font-weight:800;line-height:.94;letter-spacing:-.03em}
.h-big{font-size:clamp(1.9rem,5vw,3.9rem);font-weight:700;line-height:1.04;letter-spacing:-.02em}
.h-mid{font-size:clamp(1.55rem,3.7vw,2.7rem);font-weight:700;line-height:1.08;letter-spacing:-.02em}
.lead{margin-top:22px;font-size:clamp(1rem,1.7vw,1.25rem);color:var(--muted);max-width:640px}

/* ---------- Serviços cards ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc__card{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:22px;position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .4s}
.svc__card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.35)}
.svc__media{border-radius:12px;overflow:hidden;aspect-ratio:4/3;margin-bottom:22px}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc__card:hover .svc__media img{transform:scale(1.06)}
.svc__num{font-size:.8rem;color:var(--accent);font-weight:600;letter-spacing:.1em}
.svc__card h3{font-size:1.55rem;font-weight:700;margin:6px 0 12px;letter-spacing:-.01em}
.svc__card p{color:var(--muted);font-size:.98rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips li{font-size:.78rem;color:var(--text);border:1px solid var(--line);
  padding:6px 12px;border-radius:100px;background:rgba(255,255,255,.02)}

/* ---------- Clients logo grid ---------- */
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.logos__cell{background:var(--paper);border-radius:16px;aspect-ratio:16/10;position:relative;
  overflow:visible;display:grid;place-items:center;padding:20px 26px;transition:transform .4s var(--ease)}
.logos__cell:hover{transform:translateY(-5px);z-index:5}
.logos__cell.open{z-index:6}
.logos__logo{max-width:100%;max-height:56px;width:auto;object-fit:contain;
  mix-blend-mode:multiply;opacity:.82;transition:opacity .3s,filter .3s;filter:grayscale(1)}
.logos__cell:hover .logos__logo{opacity:1}
/* hover/clique: abre a peça que a Sr Job fez ~4x maior que o bloco, com zoom */
.logos__work{position:absolute;top:50%;left:50%;width:210%;height:auto;max-width:none;max-height:none;
  border-radius:14px;border:1px solid rgba(0,0,0,.08);box-shadow:0 28px 70px rgba(0,0,0,.55);
  background:var(--paper);opacity:0;transform:translate(-50%,-50%) scale(.42);transform-origin:center;
  pointer-events:none;z-index:60;
  transition:opacity .28s var(--ease),transform .42s cubic-bezier(.2,1.25,.35,1)}
.logos__cell:hover .logos__work,
.logos__cell.open .logos__work{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.12s}
@media(max-width:520px){.logos__work{width:170%}}
@media(max-width:900px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Projetos (grid destaque, sem corte) ---------- */
.projgrid{columns:2;column-gap:20px;margin-top:8px}
.proj{break-inside:avoid;margin-bottom:20px;border-radius:20px;overflow:hidden;position:relative;
  background:var(--surface);border:1px solid var(--line)}
.proj img{width:100%;height:auto;display:block;transition:transform .8s var(--ease)}
.proj:hover img{transform:scale(1.04)}
.proj figcaption{position:absolute;left:0;bottom:0;width:100%;padding:16px 18px;color:#fff;
  font-weight:600;font-size:.98rem;background:linear-gradient(0deg,rgba(10,10,10,.82),transparent);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.proj:hover figcaption{opacity:1;transform:none}
.proj--lead{column-span:all}
@media(max-width:640px){.projgrid{columns:1}}

/* ---------- Why ---------- */
.why__title{font-size:clamp(1.8rem,4.5vw,3.4rem);font-weight:700;line-height:1.06;
  letter-spacing:-.02em;max-width:16ch;margin:8px 0}
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(40px,6vw,72px)}
.why__item{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:22px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;
  transition:border-color .4s,transform .5s var(--ease)}
.why__item:hover{border-color:rgba(255,255,255,.35);transform:translateY(-5px)}
.dots{display:flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .4s}
.why__item:hover .dots i{background:var(--accent)}
.why__item:hover .dots i:nth-child(2){transition-delay:.06s}
.why__item:hover .dots i:nth-child(3){transition-delay:.12s}
.why__n{font-size:2.4rem;font-weight:800;color:var(--muted);opacity:.4;margin-top:auto}
.why__item p{font-size:1rem;margin-top:10px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.stat{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);
  border:1px solid var(--line);border-radius:18px;padding:26px 22px}
.stat strong{font-size:clamp(2.8rem,7vw,5rem);font-weight:800;color:var(--accent);
  letter-spacing:-.03em;line-height:1;display:inline}
.stat em{font-size:clamp(2.8rem,7vw,5rem);font-weight:800;color:var(--accent);font-style:normal}
.stat span{display:block;margin-top:12px;color:var(--muted);font-size:.95rem;line-height:1.35}

/* ---------- Entregas / accordion ---------- */
.deliver{background:var(--paper);color:var(--ink);padding:clamp(70px,11vw,150px) 0;
  border-radius:36px 36px 0 0;margin-top:20px}
.deliver__head{display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:20px;margin-bottom:50px}
.deliver .h-huge{color:#0c0c0c}
.deliver .eyebrow{color:rgba(12,12,12,.6)}
.deliver .eyebrow em{color:#0c0c0c}
.acc{border-top:1px solid rgba(12,12,12,.18)}
.acc__item{border-bottom:1px solid rgba(12,12,12,.18)}
.acc__bar{width:100%;background:none;border:none;cursor:pointer;color:#0c0c0c;
  display:flex;align-items:center;gap:20px;padding:26px 4px;text-align:left;
  font-family:inherit;transition:padding-left .4s var(--ease)}
.acc__bar:hover{padding-left:14px}
.acc__n{font-size:.85rem;font-weight:600;opacity:.55;min-width:52px}
.acc__name{font-size:clamp(1.25rem,3.6vw,2.4rem);font-weight:700;letter-spacing:-.02em;flex:1}
.acc__ic{font-size:2rem;font-weight:400;transition:transform .4s var(--ease)}
.acc__item.open .acc__ic{transform:rotate(45deg)}
.acc__panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc__inner{padding:0 4px 30px 72px}
.acc__inner p{font-size:1.05rem;max-width:640px;color:rgba(12,12,12,.8)}
.deliver .chips li{color:#0c0c0c;border-color:rgba(12,12,12,.25);background:rgba(12,12,12,.04)}
.btn--light{margin-top:44px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:100px;
  font-weight:600;font-size:1rem;cursor:pointer;transition:transform .3s var(--ease),background .3s,color .3s;
  border:1px solid transparent}
.btn em{font-style:normal;transition:transform .3s var(--ease)}
.btn:hover em{transform:translateX(4px)}
.btn--lg{padding:18px 32px;font-size:1.05rem}
.btn--whats{background:var(--whats);color:var(--ink)}
.btn--whats:hover{background:#dcdcdc;transform:translateY(-3px)}
.btn--ghost{border-color:var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--light{background:#0c0c0c;color:var(--accent)}
.btn--light:hover{transform:translateY(-3px)}

/* ---------- Masonry portfolio ---------- */
.cat{display:flex;align-items:baseline;gap:14px;margin:clamp(34px,5vw,60px) 0 22px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.cat__n{font-size:.9rem;font-weight:600;color:var(--muted)}
.cat__t{font-family:"Unbounded","Poppins",sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.4rem,3.2vw,2.2rem)}
.masonry{columns:3;column-gap:18px}
.m-tile{break-inside:avoid;margin-bottom:18px;border-radius:16px;overflow:hidden;
  position:relative;border:1px solid var(--line)}
.m-tile img{width:100%;transition:transform .8s var(--ease),filter .5s}
.m-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;
  font-size:.9rem;font-weight:600;background:linear-gradient(0deg,rgba(12,12,12,.85),transparent);
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.m-tile:hover img{transform:scale(1.05)}
.m-tile:hover figcaption{opacity:1;transform:translateY(0)}

/* ---------- Sobre / time ---------- */
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.about blockquote{margin-top:26px;padding-left:20px;border-left:2px solid var(--accent);
  font-size:1.15rem;font-style:italic;color:var(--text);max-width:52ch}
.about__media{position:relative}
.about__media img{border-radius:20px;border:1px solid var(--line)}
.about__addr{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px;margin-top:-40px;margin-left:24px;position:relative;max-width:340px}
.about__addr p:last-child{color:var(--muted);font-size:.95rem;margin-top:4px}
.team{margin-top:clamp(50px,7vw,90px)}
.team__row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.team__card{display:flex;gap:16px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:20px;transition:border-color .4s,transform .5s var(--ease)}
.team__card:hover{border-color:rgba(255,255,255,.35);transform:translateY(-4px)}
.team__av{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:#0c0c0c;font-weight:800;font-size:1.15rem}
.team__card strong{display:block;font-size:1.1rem}
.team__card span{display:block;color:var(--muted);font-size:.9rem;margin:2px 0 4px}
.team__card a{color:var(--accent);font-size:.9rem;font-weight:500}

/* ---------- Final CTA ---------- */
.final{padding:clamp(80px,12vw,170px) 0}
.final__title{font-size:clamp(2.1rem,6vw,4.8rem);font-weight:700;line-height:1.02;letter-spacing:-.02em}
.final__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:720px;margin:44px 0}
.final__k{color:var(--accent);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em}
.final__col p{margin-top:10px;color:var(--muted)}
.final__cta{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:60px 0 30px;background:var(--bg-2)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer__logo{font-size:1.8rem;font-weight:700;letter-spacing:-.02em}
.footer__logo-img{height:44px;width:auto;display:block}
.footer__brand p{color:var(--muted);margin-top:14px;max-width:34ch}
.footer__col a,.footer__col p{display:block;color:var(--muted);font-size:.95rem;margin-bottom:10px;transition:color .3s}
.footer__col a:hover{color:var(--accent)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:50px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.footer__bottom a{transition:color .3s}
.footer__bottom a:hover{color:var(--accent)}
.footer__atende{display:inline-flex;align-items:center;gap:8px;color:#2f60ea!important;
  font-weight:600;letter-spacing:.01em}
.footer__atende img{height:18px;width:auto;display:block}
.footer__atende:hover{opacity:.75}

/* ---------- Reveal animations ---------- */
.reveal,.reveal-up{opacity:0;transform:translateY(34px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in,.reveal-up.in{opacity:1;transform:none}

/* respiro no rodapé pra o texto final não cair na faixa embaçada */
.footer{padding-bottom:11svh}

/* ---------- Responsive ---------- */
@media(max-width:920px){
  .svc{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .why__grid,.stats{grid-template-columns:repeat(2,1fr)}
  .about__grid{grid-template-columns:1fr}
  .about__addr{margin-left:0}
  .team__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:28px}
  .masonry{columns:2}
}
/* Hero em vídeo no mobile: retrato full-screen (vídeo 9:16) */
@media(max-width:768px){
  .hero{height:100svh;min-height:0;aspect-ratio:auto}
  .hero__scrim--top{height:110px}
  .hero__scrim--bottom{height:30%}
  .logos__cell{max-height:120px}
}
@media(max-width:560px){
  .why__grid,.stats,.final__grid{grid-template-columns:1fr}
  .masonry{columns:1}
  .case{top:80px}
  .acc__inner{padding-left:4px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important;scroll-behavior:auto!important}
  .hero__title .w{transform:none}
  .reveal,.reveal-up{opacity:1;transform:none}
}