@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@400;500;600&display=swap');

:root{
  --navy:#132C4F;
  --navy-2:#0D2038;
  --terracotta:#BE5B2A;
  --terracotta-dark:#9B4A22;
  --cream:#FAF3E7;
  --cream-2:#F3EADB;
  --blush:#F0DCC8;
  --ink:#2B2A28;
  --ink-soft:#5B584F;
  --line:rgba(43,42,40,0.15);
  --line-on-navy:rgba(250,243,231,0.22);
  /* tom mais claro do terracota, só para texto pequeno sobre azul-marinho (contraste) */
  --terracotta-soft:#D9825A;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

.frame{
  max-width:430px;
  margin:0 auto;
  background:var(--cream);
  position:relative;
  overflow:hidden;
}

.container{
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3,.serif{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  letter-spacing:0.01em;
  color:var(--navy);
}

p{ line-height:1.65; color:var(--ink-soft); font-size:15px; }

a{ color:inherit; text-decoration:none; }

.section{ padding:48px 24px; }

.kicker{
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--terracotta);
  font-weight:500;
  display:block;
  margin-bottom:10px;
}

.rule{
  width:36px;
  height:2px;
  background:var(--terracotta);
  margin:18px 0 20px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:2px;
  font-family:'Jost', sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:0.02em;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{ background:var(--terracotta); color:var(--cream); }
.btn-outline-light{ background:transparent; color:var(--cream); border-color:var(--line-on-navy); }
.btn-outline-dark{ background:transparent; color:var(--navy); border-color:var(--navy); }

.text-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:500; letter-spacing:0.01em;
  margin-top:16px;
}
.text-link.on-cream{ color:var(--navy); }
.text-link.on-navy{ color:var(--cream); }
.text-link .arrow{ color:var(--terracotta); transition:transform 0.15s; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(19,44,79,0.97);
  padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.nav .word-mark{
  display:flex;
  align-items:center;
}
.nav .word-mark img{
  height:20px;
  width:auto;
  display:block;
}
.burger{
  width:26px; height:18px; position:relative; cursor:pointer;
  display:block; background:none; border:0; padding:0;
  -webkit-appearance:none; appearance:none;
}
.burger i{
  display:block; height:1.5px; width:100%; background:var(--cream);
  position:absolute; left:0;
}
.burger i:nth-child(1){ top:0; }
.burger i:nth-child(2){ top:8px; }
.burger i:nth-child(3){ top:16px; }

.menu-panel{
  position:absolute;
  top:100%; left:0; right:0;
  background:var(--navy);
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
}
.menu-panel.open{ max-height:320px; }
.menu-panel ul{ list-style:none; padding:8px 24px 24px; }
.menu-panel li{ border-bottom:1px solid var(--line-on-navy); }
.menu-panel a{
  display:block; padding:16px 16px; color:var(--cream);
  font-size:16px; letter-spacing:0.01em;
}
.menu-cta-wrap{ padding:0 24px 20px; }
.menu-cta-wrap .btn{ width:100%; justify-content:center; }

/* nav: item da página actual (páginas internas; a home não usa) */
.menu-panel a[aria-current="page"]{
  text-decoration:underline;
  text-decoration-color:var(--terracotta);
  text-decoration-thickness:1.5px;
  text-underline-offset:7px;
}

/* no CTA, "página actual" é a moldura terracota — o sublinhado dentro
   de um botão já com borda fica confuso */
.menu-panel .menu-cta[aria-current="page"]{
  text-decoration:none;
  border-color:var(--terracotta);
}

/* compensa o nav fixo ao saltar para uma âncora */
[id]{ scroll-margin-top:76px; }

/* foco visível sobre o azul-marinho do nav */
.nav a:focus-visible,
.burger:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:4px;
}

/* ---------- HERO ---------- */
.hero{
  background:var(--navy);
  color:var(--cream);
  padding:56px 24px 0;
  position:relative;
}
.hero-inner{ position:relative; }
.hero-photo-wrap{
  position:relative;
  margin-top:36px;
}
.hero .q-mark{
  height:100px;
  width:auto;
  display:block;
  opacity:0.85;
  position:absolute;
  top:14px; right:14px;
  z-index:2;
  filter:drop-shadow(0 2px 12px rgba(13,32,56,0.55));
}
.hero .eyebrow{
  font-size:11px; letter-spacing:0.18em; color:var(--terracotta);
  font-weight:500; margin-bottom:18px; display:block;
  position:relative; z-index:2;
}
.hero h1{
  font-size:38px;
  line-height:1.14;
  color:var(--cream);
  max-width:280px;
  position:relative; z-index:2;
}
.hero h1 em{
  font-style:italic; color:var(--terracotta);
}
.hero p{
  color:rgba(250,243,231,0.72);
  max-width:300px;
  margin-top:18px;
  font-size:15.5px;
  position:relative; z-index:2;
}
.hero .cta-row{
  display:flex; gap:12px; margin-top:30px; position:relative; z-index:2;
  flex-wrap:wrap;
}
.hero-photo{
  height:230px;
  background-size:cover;
  background-position:center;
  position:relative;
}

/* ---------- QUEM SOMOS ---------- */
.quem-somos{
  background:var(--cream);
}
.quem-somos p{ margin-top:14px; }
.quem-somos-text{ margin-top:4px; }
.quem-somos-text .lead{
  font-family:'Cormorant Garamond', serif;
  font-size:20px; line-height:1.42; font-weight:500;
  color:var(--navy);
}

/* ---------- FAIXA URBANA ---------- */
.city-band{
  height:280px;
  background-size:cover;
  background-position:center;
}

/* A faixa .manifesto deixou de existir: a citação da Érika passou para dentro
   da seção .equipe, como .equipe-quote. */

/* ---------- SOLUÇÕES ---------- */
.solucoes{ background:var(--cream); }
.solucoes .head p{ margin-top:12px; }

.pillar{
  margin-top:26px;
  border:1px solid var(--line);
  background:#fff;
  padding:26px 22px;
  position:relative;
}
.pillar .num{
  font-family:'Cormorant Garamond', serif;
  font-size:14px;
  color:var(--terracotta);
  letter-spacing:0.08em;
  display:block;
  margin-bottom:10px;
}
.pillar h3{ font-size:22px; margin-bottom:8px; }
.pillar .verbs{
  font-size:12.5px;
  letter-spacing:0.05em;
  color:var(--terracotta-dark);
  font-weight:500;
  margin-bottom:12px;
}
.pillar p{ font-size:14.5px; }

/* ---------- CLIENTES ---------- */
.clientes{
  background:var(--cream);
  padding:52px 24px;
}
.logo-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.logo-cell{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  aspect-ratio:1.5;
  display:flex; align-items:center; justify-content:center;
}
.logo-cell img{
  max-width:50%; max-height:100%;
  object-fit:contain;
}

/* ---------- DEPOIMENTOS ---------- */
.depoimento{
  background:var(--cream-2);
  padding:52px 24px;
}
.depoimento-grid{ margin-top:26px; display:grid; gap:40px; }
.depo{ margin:0; display:grid; grid-template-rows:auto 1fr auto; }
.depo .quote-mark{
  font-family:'Cormorant Garamond', serif;
  font-size:64px;
  color:var(--terracotta);
  line-height:0.4;
  display:block;
  margin-bottom:14px;
}
.depo blockquote{
  font-family:'Cormorant Garamond', serif;
  font-size:19px;
  line-height:1.5;
  color:var(--navy);
  font-style:italic;
}
.depo .signee{
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:12px;
}
.depo .signee img{
  width:48px; height:48px; flex:0 0 48px;
  border-radius:50%; object-fit:cover;
}
.depo .signee .name{
  font-size:14px; font-weight:500; color:var(--navy);
}
.depo .signee .role{
  font-size:12.5px; color:var(--ink-soft);
}

/* ---------- EQUIPE ---------- */
.equipe{
  background:var(--navy);
  color:var(--cream);
  padding:52px 24px;
}
.equipe p{ color:rgba(250,243,231,0.68); margin-top:12px; }

/* citação da Érika, antes numa faixa própria */
.equipe-quote{ margin:0 0 44px; }
.equipe-quote .quote-mark{
  font-family:'Cormorant Garamond', serif;
  font-size:70px;
  color:var(--terracotta);
  line-height:0.5;
  margin-bottom:6px;
  display:block;
}
.equipe-quote blockquote{
  font-family:'Cormorant Garamond', serif;
  font-size:24px;
  line-height:1.4;
  font-weight:500;
  color:var(--cream);
}

.lead-card{
  margin-top:28px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.lead-photo{
  width:96px; height:120px;
  background-size:cover; background-position:center top;
  flex-shrink:0;
}
.lead-info .name{
  display:block;
  font-family:'Cormorant Garamond', serif;
  color:var(--cream); font-size:20px; font-weight:500;
}
.lead-info .role{
  color:var(--terracotta);
  font-size:12.5px;
  letter-spacing:0.04em;
  margin-top:2px;
  display:block;
}
.lead-info p{
  font-size:13.5px;
  margin-top:10px;
  color:rgba(250,243,231,0.62);
}

/* ---------- CONTATO / CTA FINAL ---------- */
.contato{
  background:var(--cream);
  padding:56px 24px 40px;
  text-align:center;
}
.contato h2{
  font-size:30px;
  max-width:280px;
  margin:0 auto;
}
.contato p{
  max-width:300px;
  margin:14px auto 0;
}
.contato .btn{ margin-top:26px; }
.contact-details{
  margin-top:40px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:0;
}
.contact-row{
  display:flex; align-items:center; gap:14px;
  padding:16px 0;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--ink);
}
.contact-row:last-child{ border-bottom:1px solid var(--line); }
.contact-row .ic{
  width:34px; height:34px;
  background:var(--terracotta);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--cream);
  flex-shrink:0;
}
.contact-row .ic svg{
  width:17px; height:17px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--navy-2);
  color:rgba(250,243,231,0.55);
  padding:36px 24px 28px;
}
footer .word-mark img{
  height:30px;
  width:auto;
  max-width:100%;
  display:block;
}
footer ul{
  list-style:none;
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:16px 20px;
}
footer a{ font-size:13px; color:rgba(250,243,231,0.7); }
footer .fine{
  margin-top:26px;
  font-size:11px;
  color:rgba(250,243,231,0.35);
  border-top:1px solid var(--line-on-navy);
  padding-top:18px;
}
/* =========================================================
   TABLET (≥768px)
========================================================= */
@media (min-width:768px){
  .frame{ max-width:100%; }

  .nav{ padding:20px 40px; }
  .nav .word-mark img{ height:24px; }
  .burger{ display:none; }
  .menu-panel{
    position:static;
    max-height:none; overflow:visible; background:transparent;
    display:flex; align-items:center; gap:24px;
    width:auto;
  }
  .menu-panel ul{
    display:flex; padding:0; gap:28px; list-style:none;
  }
  .menu-panel li{ border-bottom:none; }
  .menu-panel a{ padding:0; font-size:14px; }
  .menu-cta-wrap{ padding:0; }
  .menu-cta-wrap .btn{ width:auto; padding:10px 20px; }

  .section, .hero, .clientes, .depoimento, .equipe, .contato{
    padding-left:40px; padding-right:40px;
  }

  .hero{ padding-top:64px; }
  .hero-inner{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:40px;
    align-items:center;
  }
  .hero h1{ font-size:46px; max-width:420px; }
  .hero p{ max-width:400px; font-size:16.5px; }
  .hero-photo-wrap{ margin-top:0; }
  .hero-photo{
    height:320px; border-radius:4px;
  }
  .hero .q-mark{ top:16px; right:16px; height:140px; }

  .city-band{ height:340px; }

  .quem-somos{ text-align:left; }
  .quem-somos h2{ max-width:520px; }
  .quem-somos-text{ max-width:620px; }

  .equipe-quote blockquote{ max-width:560px; font-size:28px; }

  .solucoes .head{ max-width:560px; }
  .pillar-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    margin-top:30px;
  }
  .pillar{ margin-top:0; }

  .logo-grid{ grid-template-columns:repeat(3, 1fr); }

  .depoimento-grid{ grid-template-columns:1fr 1fr; gap:48px; }

  .lead-card{ align-items:center; }
  .lead-photo{ width:120px; height:150px; }

  .contato h2{ max-width:420px; }
  .contato p{ max-width:420px; }

  footer{ padding:44px 40px 32px; }
  footer .word-mark img{ margin-right:20px; }
  footer .footer-inner{
    display:flex; justify-content:space-between; align-items:flex-start;
  }
  footer ul{ margin-top:0; }
}

/* =========================================================
   DESKTOP (≥1024px)
========================================================= */
@media (min-width:1024px){
  .nav{ padding:24px 56px; }
  .section, .clientes, .depoimento, .equipe, .contato{
    padding-left:0; padding-right:0;
  }
  .hero{ padding-left:0; padding-right:0; }

  .hero-inner, .quem-somos-inner, .solucoes-inner,
  .clientes-inner, .depoimento-inner, .equipe-inner, .contato-inner,
  .footer-inner{
    max-width:1160px;
    margin:0 auto;
    padding-left:56px;
    padding-right:56px;
  }

  .hero-inner{ grid-template-columns:1fr 0.85fr; gap:64px; }
  .hero h1{ font-size:54px; max-width:480px; }
  .hero p{ max-width:420px; }
  .hero-photo{ height:420px; }
  .hero .q-mark{ height:170px; top:20px; right:20px; }

  .city-band{ height:380px; }

  /* NÃO voltar a pôr `display:flex; justify-content:center` nestas seções.
     Isso torna o *-inner um item flex, que encolhe até ao conteúdo em vez de
     preencher os 1160 — era a causa de cada seção ter uma largura diferente
     (640, 560, 795, 820…). Os inners já se centram sozinhos com margin:0 auto. */

  .quem-somos-inner{ display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; }
  .quem-somos h2{ font-size:32px; }
  .quem-somos-text .lead{ font-size:22px; }

  .pillar-grid{ gap:28px; margin-top:40px; }
  .pillar{ padding:32px 26px; }
  .pillar h3{ font-size:23px; }

  .logo-grid{ grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:32px; }
  .logo-cell{ aspect-ratio:1.6; }

  .depoimento-grid{ gap:64px; }
  .depo blockquote{ font-size:21px; }

  /* a citação (esquerda) é bem mais alta que o texto da equipa (direita);
     centrar evita um vazio grande por baixo da coluna curta */
  .equipe-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:72px; align-items:center; }
  .equipe-quote{ margin-bottom:0; }
  .equipe-quote blockquote{ font-size:30px; }

  .contato{ text-align:left; }
  .contato-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:60px; text-align:left; }
  .contato h2{ margin:0; }
  .contato p{ margin:14px 0 0; }
  .contato .btn{ margin-top:26px; }
  .contact-details{ margin-top:0; flex:1; max-width:380px; }

  /* o footer é um bloco: o .fine é uma faixa por baixo, não um item ao lado
     do menu. Os 56px vivem no próprio footer para a linha do .fine ficar
     alinhada com o texto, como no mobile. */
  footer{ padding-left:56px; padding-right:56px; }
  footer .footer-inner,
  footer .fine{
    max-width:1048px;
    margin-left:auto; margin-right:auto;
    padding-left:0; padding-right:0;
  }
}

/* =========================================================
   UTILIDADES / IMAGENS
========================================================= */
.section-title{ font-size:26px; }
.equipe .section-title{ color:var(--cream); }
.text-link.tight{ margin-top:8px; }

.hero-photo{ background-image:url('../images/hero-luanda.jpg'); }
.city-band{ background-image:url('../images/luanda-night.jpg'); }
.depoimento .avatar{ background-image:url('../images/jane-muniz.jpg'); }
.lead-photo{ background-image:url('../images/erika-portrait.jpg'); }