:root{
  /* Tokens nomeados no Figma */
  --azul:#0626a9;
  --branco-concretiza:#f0f0f1;
  --white:#ffffff;
  --carvao:#0e0e0f;
  --black:#070707;
  --stroke:#ebebeb;
  --text:#575757;
  --bg-abu:#f5f5f5;
  --cinza-foto:#c4c4c4;

  /* Escala tipográfica (Figma ÷ 4/3) */
  --fs-xs:14px;   --lh-xs:20px;
  --fs-sm:16px;   --lh-sm:24px;
  --fs-md:18px;   --lh-md:26px;
  --fs-lg:24px;   --lh-lg:32px;
  --fs-xl:40px;   --lh-xl:48px;
  --fs-2xl:48px;  --lh-2xl:56px;
  --fs-3xl:64px;  --lh-3xl:72px;
  --fs-contact:30px; --lh-contact:40px;

  --radius:12px;
  --radius-sm:8px;
  --gutter:40px;
  /* 1440 do canvas: 1360 de conteúdo + 40 de padding em cada lado (border-box) */
  --maxw:1440px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Sora',system-ui,sans-serif;
  font-weight:400;
  color:var(--carvao);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text)}
.h2{font-size:var(--fs-xl);line-height:var(--lh-xl);font-weight:500;color:var(--carvao)}
.h2 .accent{color:var(--azul)}
.lead{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text)}

/* Botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 24px;border-radius:var(--radius);
  font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500;
  white-space:nowrap;transition:opacity .2s,background .2s,color .2s;
}
.btn:hover{opacity:.85}
.btn--light{background:var(--white);color:var(--carvao)}
.btn--ghost{border:1px solid var(--stroke);color:var(--white)}
.btn--ghost:hover{background:rgba(255,255,255,.12);opacity:1}

/* ---------------- Header ---------------- */
.topbar{
  position:absolute;top:8px;left:8px;right:8px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px 32px;border-radius:var(--radius-sm);
  background:var(--azul);
}
.topbar__logo{width:122.25px;height:19.5px}
.nav{display:flex;align-items:center;gap:24px}
.nav a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--branco-concretiza);
}
.nav a:hover{opacity:.8}
.nav a.is-active{font-weight:500;padding-bottom:4px;border-bottom:1px solid var(--branco-concretiza)}
.nav .chevron{width:10.88px;height:13.5px}
.topbar__actions{display:flex;align-items:center;gap:14px}
.topbar__actions img{width:24px;height:24px}
.burger{display:none;width:24px;height:24px;position:relative}
.burger span{position:absolute;left:0;right:0;height:2px;background:var(--branco-concretiza);transition:.25s}
.burger span:nth-child(1){top:5px}
.burger span:nth-child(2){top:11px}
.burger span:nth-child(3){top:17px}
.burger[aria-expanded="true"] span:nth-child(1){top:11px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:11px;transform:rotate(-45deg)}

/* ---------------- Hero ---------------- */
.hero{position:relative;height:744px;padding:8px;background:var(--white)}
.hero__visual{
  position:relative;height:100%;border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:147px 40px 22px;
}
.hero__visual>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
/* multiply de topo transparente → preto 77% */
.hero__visual::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 33.16%,rgba(0,0,0,.77) 100%);
  mix-blend-mode:multiply;
}
/* subida de #1b1b1b a partir da base */
.hero__visual::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,#1b1b1b 30.47%,rgba(27,27,27,0) 77.63%);
}
.hero__text,.hero__foot{position:relative;z-index:3}
.hero__text{display:flex;flex-direction:column;gap:12px;max-width:826px;color:var(--white)}
.hero__text p{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.hero__text h1{font-size:var(--fs-3xl);line-height:var(--lh-3xl);font-weight:500}
.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.hero__mark{width:114px;height:132.75px;flex:none}
.hero__cta{display:flex;flex-direction:column;align-items:flex-end;gap:24px;width:543px;max-width:100%}
.hero__cta p{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--white);text-align:right}
.hero__buttons{display:flex;gap:12px}

/* ---------------- Sobre ---------------- */
.sobre{padding:40px 0}
.sobre__inner{display:flex;flex-direction:column;gap:40px}
.sobre__head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.sobre__head .eyebrow{white-space:nowrap}
.sobre__head p.h2{max-width:1012px}
.sobre__head .muted{color:rgba(0,0,0,.24)}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  padding:32px 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);
}
.stat{display:flex;flex-direction:column;gap:24px}
.stat strong{font-size:var(--fs-3xl);line-height:var(--lh-3xl);font-weight:500;color:var(--carvao)}
.stat:first-child strong{color:var(--azul)}
.sobre__photo{height:472px;border-radius:var(--radius);overflow:hidden}
.sobre__photo img{width:100%;height:100%;object-fit:cover;object-position:center 64%}

/* ---------------- Processo ---------------- */
.processo{background:var(--bg-abu);padding:40px 0}
.processo__inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.processo__intro{display:flex;flex-direction:column;gap:14px;width:664px;max-width:100%}
.processo__steps{display:flex;flex-direction:column;gap:40px;width:664px;max-width:100%}
/* Estado de repouso = inactivo. O JS promove o card que cruza o meio do ecrã. */
.step{
  background:var(--stroke);border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;gap:60px;
  opacity:.2;
  transition:opacity .45s ease,background-color .45s ease;
}
.step[data-dist="1"]{opacity:.4}
.step.is-active{background:var(--white);opacity:1}
.badge{
  width:48px;height:48px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--azul);color:var(--branco-concretiza);
  font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500;
}
.step .badge{
  background:none;border:1px solid #b1b1b1;color:var(--carvao);
  transition:background-color .45s ease,border-color .45s ease,color .45s ease;
}
.step.is-active .badge{background:var(--azul);border-color:transparent;color:var(--branco-concretiza)}
.badge img{width:24px;height:24px}
.step__body{display:flex;flex-direction:column;gap:14px}
.step__body h3{font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:500;color:var(--text);transition:color .45s ease}
.step.is-active .step__body h3{color:var(--carvao)}
@media (prefers-reduced-motion:reduce){
  .step,.step .badge,.step__body h3{transition:none}
}

/* ---------------- Serviços ---------------- */
.servicos{background:var(--branco-concretiza);padding:40px 0}
.servicos__inner{display:flex;flex-direction:column;gap:40px;align-items:center}
.section-head--center{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.section-head--center .h2{max-width:1137px}
.section-head--center .lead{max-width:939px}
.cards{display:flex;flex-direction:column;gap:14px;width:100%}
.cards__row{display:grid;gap:14px}
.cards__row--3{grid-template-columns:repeat(3,1fr)}
.cards__row--2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--white);border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;gap:60px;
}
.card__body{display:flex;flex-direction:column;gap:14px}
.card__body h3{font-size:var(--fs-md);line-height:var(--lh-md);font-weight:500;color:var(--black)}

/* ---------------- Portfólio ---------------- */
.portfolio{padding:40px 0}
.portfolio__inner{display:flex;flex-direction:column;gap:40px}
.grid-proj{
  display:grid;gap:14px;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"a b" "a c";
}
.grid-proj__a{grid-area:a;height:718px}
.grid-proj__b{grid-area:b;height:352px}
.grid-proj__c{grid-area:c;display:grid;grid-template-columns:1fr 1fr;gap:13px;height:352px}
.proj{
  position:relative;overflow:hidden;border-radius:var(--radius);
  display:flex;flex-direction:column;justify-content:flex-end;padding:24px;
}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.proj img.blend{mix-blend-mode:hard-light;z-index:1}
.proj::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:254px;z-index:2;
  background:linear-gradient(to top,#1b1b1b 53.5%,rgba(27,27,27,0) 100%);
}
.proj__body{position:relative;z-index:3;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.proj__body h3{font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:500;color:var(--white)}

/* ---------------- Depoimentos ---------------- */
.depoimentos{background:var(--bg-abu);padding:40px 0 60px}
.depoimentos__inner{display:flex;flex-direction:column;gap:40px}
.depoimentos__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.depoimentos__head .intro{display:flex;flex-direction:column;gap:14px;width:664px;max-width:100%}
.arrows{display:flex;gap:12px;flex:none}
.arrows button{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.arrows button.solid{background:var(--white)}
.arrows button img{width:24px;height:24px}
.arrows button:first-child img{width:48px;height:48px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{
  background:var(--white);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:40px;justify-content:space-between;
}
.quote__top{display:flex;flex-direction:column;gap:14px}
.quote__meta{display:flex;align-items:center;justify-content:space-between;gap:16px}
.quote__person{display:flex;align-items:center;gap:8px}
.avatar{
  width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--cinza-foto);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);line-height:var(--lh-xs);
}
.quote__person span:last-child{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--carvao)}
.quote__stars{width:79.25px;height:14.25px;flex:none}
.quote p{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text)}
.chip{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--stroke);border-radius:var(--radius-sm);padding:8px 12px;
  font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--carvao);
}
.chip img{width:16px;height:16px}

/* ---------------- FAQ ---------------- */
.faq{padding:40px 0}
.faq__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.faq__intro{display:flex;flex-direction:column;gap:14px;width:664px;max-width:100%}
.faq__intro .h2{max-width:576px}
.faq__intro .lead{max-width:502px}
.faq__list{display:flex;flex-direction:column;gap:24px;width:664px;max-width:100%}
.faq__item{border:1px solid var(--stroke);border-radius:var(--radius);padding:24px}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  list-style:none;cursor:pointer;
  font-size:var(--fs-md);line-height:var(--lh-md);font-weight:500;color:var(--carvao);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary img{width:24px;height:24px;flex:none}
.faq__item .icon-minus{display:none}
.faq__item[open] .icon-minus{display:block}
.faq__item[open] .icon-plus{display:none}
.faq__item hr{border:none;border-top:1px solid var(--stroke);margin:12px 0}
.faq__item p{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text)}

/* ---------------- CTA ---------------- */
.cta{background:var(--azul);padding:124px 0}
.cta__inner{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.cta__text{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:877px}
.cta__text .eyebrow{color:var(--white)}
.cta__text h2{font-size:var(--fs-2xl);line-height:var(--lh-2xl);font-weight:500;color:var(--branco-concretiza)}
.cta__text p{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--branco-concretiza);max-width:592px}

/* ---------------- Footer ---------------- */
.footer{background:var(--carvao);padding:40px 0;color:var(--branco-concretiza)}
.footer__inner{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:661px}
.footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer__brand{display:flex;align-items:center;justify-content:space-between;gap:40px;width:373px}
.footer__mark{width:114px;height:131.25px;flex:none}
.socials{display:flex;align-items:center;gap:9px}
.socials a{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.socials a:hover{background:rgba(255,255,255,.08)}
.socials .glyph{position:relative;width:24px;height:24px}
/* insets definem a caixa de cada camada — sem width/height para não esticar */
.socials .glyph img{position:absolute;inset:0}
.socials img.plain{width:48px;height:48px}
.footer__cols{display:flex;gap:63px;flex-wrap:wrap}
.footer__contact{display:flex;flex-direction:column;gap:40px;width:392px}
.footer__contact .block{display:flex;flex-direction:column;gap:14px}
.footer__contact .label{font-size:var(--fs-xs);line-height:1.4;color:var(--branco-concretiza)}
.footer__contact .value{font-size:var(--fs-contact);line-height:var(--lh-contact);font-weight:500;color:var(--text)}
.footer__contact .value:hover{color:var(--branco-concretiza)}
.footer__services{display:flex;flex-direction:column;gap:24px;width:269px}
.footer__services h3{font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:500;color:var(--branco-concretiza)}
.footer__services ul{display:flex;flex-direction:column;gap:14px}
.footer__services a{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text)}
.footer__services a:hover{color:var(--branco-concretiza)}
.footer hr{border:none;border-top:1px solid rgba(255,255,255,.14)}
.footer__bottom{display:flex;flex-direction:column;gap:48px}
.footer__nav{display:flex;align-items:center;gap:32px;flex-wrap:wrap;font-size:var(--fs-xs);line-height:1.4}
.footer__nav a:hover{color:var(--text)}
.footer__wordmark{width:100%;height:auto}
.footer__legal{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:var(--fs-xs);line-height:var(--lh-xs);
}
.footer__legal .links{display:flex;gap:24px;flex-wrap:wrap}

/* ---------------- Responsivo ---------------- */
@media (max-width:1200px){
  :root{--fs-3xl:52px;--lh-3xl:60px;--fs-xl:34px;--lh-xl:42px;--fs-2xl:40px;--lh-2xl:48px;--fs-contact:24px;--lh-contact:32px}
  .processo__inner,.faq__inner{flex-direction:column;align-items:stretch}
  .processo__intro,.processo__steps,.faq__intro,.faq__list,.depoimentos__head .intro{width:100%}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .footer__brand{width:auto}
}
@media (max-width:1024px){
  .nav{
    display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:16px;
    background:var(--azul);border-radius:var(--radius-sm);padding:20px 32px;
  }
  .nav.is-open{display:flex}
  .burger{display:block}
  .hero{height:auto}
  .hero__visual{min-height:620px;padding:130px 32px 32px}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:32px}
  .hero__cta{align-items:flex-start;width:100%}
  .hero__cta p{text-align:left}
  .sobre__head{flex-direction:column;gap:14px}
  .cards__row--3,.cards__row--2{grid-template-columns:1fr 1fr}
  .grid-proj{grid-template-areas:"a" "b" "c";grid-template-columns:1fr}
  .grid-proj__a{height:520px}
  .cta{padding:80px 0}
}
@media (max-width:760px){
  :root{--fs-3xl:38px;--lh-3xl:46px;--fs-xl:28px;--lh-xl:36px;--fs-2xl:30px;--lh-2xl:38px;--fs-lg:20px;--lh-lg:28px;--gutter:20px}
  .topbar{padding:12px 20px}
  .hero{padding:6px}
  .hero__visual{min-height:540px;padding:110px 20px 24px}
  .hero__buttons{flex-direction:column;align-items:stretch;width:100%}
  .stats{grid-template-columns:1fr;gap:32px}
  .cards__row--3,.cards__row--2{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .grid-proj__c{grid-template-columns:1fr;height:auto}
  .grid-proj__c .proj{height:300px}
  .grid-proj__a{height:420px}
  .grid-proj__b{height:300px}
  .depoimentos__head{flex-direction:column;align-items:flex-start}
  .footer__contact,.footer__services{width:100%}
  .footer__cols{gap:40px}
}

/* ================= Hero compacto (páginas internas) ================= */
.hero--compact{height:407px}
.hero--compact .hero__visual{justify-content:flex-end;padding:0 40px 47px}
/* esta hero usa só o multiply, sem a subida de #1b1b1b da home */
.hero--compact .hero__visual::after{display:none}
.hero--compact .hero__visual::before{
  background:linear-gradient(178.8deg,rgba(255,255,255,0) 39.05%,rgba(0,0,0,.77) 95.85%);
}
.hero--compact .hero__text{max-width:887px}
.hero--compact .hero__text h1{font-size:var(--fs-2xl);line-height:var(--lh-2xl)}

/* ================= Missão / Visão / Valores ================= */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  padding:32px 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);
}
.pillar{display:flex;flex-direction:column;gap:24px}
.pillar__head{display:flex;align-items:flex-end;gap:12px}
.pillar__head h3{font-size:27px;line-height:1;font-weight:500;color:var(--carvao)}
.pillar__head img{flex:none}
.pillar__head .ico-missao{width:32.25px;height:31.5px}
.pillar__head .ico-visao{width:33.77px;height:33.5px}
.pillar__head .ico-valores{width:42px;height:29.25px}

/* Imagem larga com o bloco título+botão achatado (SVG do Figma) ao centro */
.wide-cta{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1360/717}
.wide-cta>img:first-child{width:100%;height:100%;object-fit:cover}
.wide-cta__overlay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:662px;height:45.75px;max-width:calc(100% - 80px);
}

/* ================= Nosso time ================= */
.time{padding:40px 0}
.time__inner{display:flex;flex-direction:column;gap:60px}
.time__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.time__head .intro{display:flex;flex-direction:column;gap:14px;width:664px;max-width:100%}
.time__head .intro .lead{max-width:739px}
.time__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:end}
.time__member{display:flex;flex-direction:column;gap:14px}
.time__photo{border-radius:var(--radius);overflow:hidden;background:#dbdbdb}
.time__photo img{width:100%;height:100%;object-fit:cover}
.time__member--lead .time__photo{aspect-ratio:1/1}
.time__photo--tall{aspect-ratio:432/475}
.time__name{
  background:var(--azul);border-radius:var(--radius);padding:14px;
  display:flex;flex-direction:column;gap:12px;color:var(--white);
}
.time__name strong{font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:500}
.time__name span{font-size:var(--fs-sm);line-height:var(--lh-sm)}
/* na secção de time o botão circular usa o cinza de fundo, não branco */
.arrows button.solid--abu{background:var(--bg-abu)}

@media (max-width:1200px){
  .time__head .intro{width:100%}
}
@media (max-width:1024px){
  .hero--compact{height:auto}
  .hero--compact .hero__visual{min-height:340px;padding:130px 32px 32px}
  .pillars{grid-template-columns:1fr;gap:32px}
  .time__grid{grid-template-columns:repeat(2,1fr)}
  .time__head{flex-direction:column;align-items:flex-start}
}
@media (max-width:760px){
  .hero--compact .hero__visual{min-height:300px;padding:110px 20px 24px}
  .time__grid{grid-template-columns:1fr}
  .wide-cta__overlay{max-width:calc(100% - 40px)}
}

/* ================= Dropdown de Serviços ================= */
.nav__group{position:relative}
.nav__group>a .chevron{transition:transform .2s}
.nav__group.is-open>a .chevron{transform:rotate(180deg)}
.navdrop{
  display:none;position:absolute;left:0;top:calc(100% + 22px);z-index:30;
  background:var(--white);border-radius:var(--radius-sm);padding:12px 24px;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.1));
  flex-direction:column;gap:12px;white-space:nowrap;
}
.nav__group.is-open .navdrop{display:flex}
.navdrop a{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--carvao);display:block}
.navdrop a.is-current{color:var(--azul)}
.navdrop a:hover{color:var(--azul);opacity:1}

/* ================= Detalhe de serviço ================= */
.svc{padding:40px 0}
.svc__inner{display:flex;flex-direction:column;gap:40px}
.svc__head{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.svc__head .h2{max-width:860px}
.svc__head .lead{max-width:746px}
.svc__head .arrows{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.svc__split{display:flex;align-items:center;justify-content:space-between;gap:32px}
.svc__photo{width:664px;max-width:100%;flex:none;border-radius:var(--radius);overflow:hidden;aspect-ratio:664/564}
.svc__photo img{width:100%;height:100%;object-fit:cover}
.svc__body{display:flex;flex-direction:column;gap:40px;width:664px;max-width:100%}
.svc__body>.intro{display:flex;flex-direction:column;gap:14px}
.svc__body>.btn{align-self:flex-start}
.svc__body>.intro h2{font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:500;color:var(--black)}

/* Lista numerada 01–05 (o primeiro item vem aberto, como no design) */
.steps-list{display:flex;flex-direction:column;gap:32px}
.steps-list details{display:block}
.steps-list summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  list-style:none;cursor:pointer;
}
.steps-list summary::-webkit-details-marker{display:none}
.steps-list .num{font-size:var(--fs-md);line-height:26px;font-weight:500;color:var(--black);flex:none;width:22px}
.steps-list .title{font-size:var(--fs-md);line-height:26px;font-weight:500;color:var(--black);flex:1}
.steps-list summary img{width:15.75px;height:9px;flex:none}
.steps-list p{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text);margin:12px 0 0 46px}

/* ================= Nossos diferenciais ================= */
.diffs{padding:40px 0}
.diffs__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.diffs__col{display:flex;flex-direction:column;gap:40px;width:665px;max-width:100%}
.diffs__intro{display:flex;flex-direction:column;gap:14px}
.diffs__intro .lead{max-width:608px}
.diffs__list{display:flex;flex-direction:column;align-items:flex-end;gap:32px}
.diff{display:flex;align-items:center;gap:22px;width:100%}
.diff--lead{align-items:flex-start;gap:24px}
.diff img{width:24px;height:24px;flex:none}
.diff h3{font-size:var(--fs-md);line-height:26px;font-weight:500;color:var(--text)}
.diff--lead h3{color:var(--black)}
.diff__body{display:flex;flex-direction:column;gap:12px}
.diffs__photo{width:664px;max-width:100%;flex:none;border-radius:var(--radius);overflow:hidden;aspect-ratio:664/626}
.diffs__photo img{width:100%;height:100%;object-fit:cover}
.btn--azul{background:var(--azul);color:var(--branco-concretiza)}

/* ================= Carrossel de portfólio ================= */
.pfcar{padding:40px 0 70px;overflow:hidden}
.pfcar__head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-bottom:40px}
.pfcar__head .lead{max-width:710px}
.pfcar__track{
  display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 max(40px,calc((100vw - 1360px)/2));
  scrollbar-width:none;
}
.pfcar__track::-webkit-scrollbar{display:none}
.pfcar__card{
  position:relative;flex:none;width:432px;height:417px;scroll-snap-align:start;
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:14px;
}
.pfcar__card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pfcar__card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:1;
  background:linear-gradient(to top,#1b1b1b 20.5%,rgba(27,27,27,0) 100%);
}
.pfcar__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.pfcar__body h3{font-size:var(--fs-lg);line-height:32px;font-weight:500;color:var(--white)}
.pfcar__body p{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--white)}

@media (max-width:1200px){
  .svc__split,.diffs__inner{flex-direction:column;align-items:stretch}
  .svc__photo,.svc__body,.diffs__col,.diffs__photo{width:100%}
  .svc__head .arrows{position:static;transform:none;margin-top:8px}
}
@media (max-width:760px){
  .pfcar__card{width:300px;height:340px}
  .steps-list p{margin-left:0}
  .diffs__list{align-items:stretch}
}

/* Abre por hover no desktop e por foco no teclado — sem depender de JS */
.nav__group:hover .navdrop,
.nav__group:focus-within .navdrop{display:flex}
.nav__group:hover>a .chevron,
.nav__group:focus-within>a .chevron{transform:rotate(180deg)}

@media (max-width:1024px){
  /* dentro do menu empilhado o dropdown passa a lista indentada */
  .nav__group{width:100%}
  .navdrop{
    display:flex;position:static;background:none;filter:none;
    padding:8px 0 0 16px;gap:10px;white-space:normal;
  }
  .navdrop a{color:var(--branco-concretiza);opacity:.85}
  .navdrop a.is-current{color:var(--white);opacity:1}
  .nav__group>a .chevron{display:none}
}

/* Grelha de portfólio espelhada (segunda fila da página Portfólio) */
.grid-proj--mirror{grid-template-areas:"b a" "c a"}
.pf-page{padding:40px 0}
.pf-page__inner{display:flex;flex-direction:column;gap:40px}
.pf-page__grids{display:flex;flex-direction:column;gap:14px}

/* ================= Detalhe de projecto ================= */
.pjd{padding:40px 0}
.pjd__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.pjd__left{display:flex;flex-direction:column;gap:32px;width:664px;max-width:100%}
.pjd__hero{border-radius:var(--radius);overflow:hidden;aspect-ratio:664/580}
.pjd__hero img{width:100%;height:100%;object-fit:cover}
.pjd__pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.pjd__pair figure{border-radius:var(--radius);overflow:hidden;aspect-ratio:316/201}
.pjd__pair figure:first-child{border:1px solid var(--black)}
.pjd__pair img{width:100%;height:100%;object-fit:cover}
.pjd__right{display:flex;flex-direction:column;gap:32px;width:665px;max-width:100%}
.pjd__place{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.pjd__place img{width:20px;height:20px}
.pjd__place span{font-size:var(--fs-md);line-height:26px;color:var(--carvao)}
.pjd__desc{display:flex;flex-direction:column;gap:20px}
.pjd__desc p{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text)}
.pjd__matt{display:flex;flex-direction:column;gap:24px}
.pjd__matt>h2{font-size:var(--fs-md);line-height:26px;font-weight:500;color:var(--carvao)}
.pjd__acc{display:flex;flex-direction:column}
.pjd__acc details{border-bottom:1px solid var(--stroke);padding:18px 0}
.pjd__acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;list-style:none;cursor:pointer;
  font-size:var(--fs-md);line-height:26px;font-weight:500;color:var(--carvao);
}
.pjd__acc summary::-webkit-details-marker{display:none}
.pjd__acc summary img{width:20px;height:20px;flex:none;transition:transform .2s}
.pjd__acc details[open] summary img{transform:rotate(180deg)}
.pjd__acc .body{display:flex;flex-direction:column;gap:14px;padding-top:14px}
.pjd__acc .body img{width:100%;border-radius:var(--radius);aspect-ratio:664/251;object-fit:cover}
.pjd__acc .body p{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text)}

@media (max-width:1200px){
  .pjd__inner{flex-direction:column;align-items:stretch}
  .pjd__left,.pjd__right{width:100%}
}
/* carrossel sem cabeçalho (detalhe de projecto) */
.pfcar--bare{padding:40px 0 46px}

/* ================= Trabalhe Connosco ================= */
.jobs{position:relative;background:var(--bg-abu);padding:8px 0;min-height:757px;display:flex;align-items:center}
.jobs>.wrap{width:100%}
.jobs__bg{position:absolute;left:8px;right:8px;top:8px;bottom:8px;border-radius:var(--radius);overflow:hidden}
.jobs__bg img{width:100%;height:100%;object-fit:cover}
.jobs__form{
  position:relative;z-index:2;background:var(--white);border:1px solid var(--stroke);
  border-radius:var(--radius);padding:32px;width:664px;max-width:100%;
  display:flex;flex-direction:column;gap:24px;
}
.jobs__form .intro{display:flex;flex-direction:column;gap:14px}
.jobs__form .intro h2{font-size:var(--fs-xl);line-height:48px;font-weight:500;color:var(--black)}
.jobs__form .intro .lead{max-width:502px}
.jobs__fields{display:flex;flex-direction:column;gap:12px}
.jobs__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{
  background:var(--bg-abu);border:1px solid var(--stroke);border-radius:var(--radius-sm);padding:12px;
  font:inherit;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--carvao);width:100%;
}
.field::placeholder{color:var(--text)}
.field:focus{outline:2px solid var(--azul);outline-offset:1px}
textarea.field{height:115px;resize:vertical}
.field--file{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;color:var(--text)}
.field--file img{width:14.25px;height:15px;flex:none}
.field--file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.jobs__form .btn{width:100%}

/* Cartões de contacto */
.contactcards{background:var(--azul);padding:64px 0}
.contactcards__inner{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1360px;margin:0 auto;padding:0 40px}
.ccard{
  background:var(--black);border-radius:24px;padding:24px;
  display:flex;flex-direction:column;align-items:center;gap:32px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.ccard__icon{
  width:80px;height:80px;border-radius:50%;background:var(--azul);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.ccard__icon img{width:32px;height:32px}
.ccard__text{display:flex;flex-direction:column;gap:12px;text-align:center;color:var(--white);width:100%}
.ccard__text span{font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500}
.ccard__text strong{font-size:21px;line-height:32px;font-weight:500;word-break:break-word}

@media (max-width:1024px){
  .contactcards__inner{grid-template-columns:1fr}
  .jobs{min-height:0;padding:40px 20px}
  .jobs__bg{inset:0;border-radius:0}
}
@media (max-width:760px){
  .jobs__row{grid-template-columns:1fr}
}

/* select do formulário de contacto — mesma caixa dos inputs, com o caret do Figma */
select.field{
  appearance:none;-webkit-appearance:none;
  background-image:url(../svg/caret-down.svg);
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:20px 20px;
  padding-right:40px;cursor:pointer;
}
select.field:invalid{color:var(--text)}