:root{
  --petroleo:#183B3D;
  --off-white:#F7F3EC;
  --areia:#D8CBB8;
  --terracota:#A7654A;
  --grafite:#252525;
  --serif:'Cormorant Garamond', serif;
  --sans:'Manrope', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
body{
  background:var(--off-white);
  color:var(--grafite);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}

.wrap{max-width:1160px; margin:0 auto; padding:0 40px;}
.eyebrow{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--terracota);
  margin-bottom:18px;
}
h1,h2,h3{font-family:var(--serif); font-weight:500; color:var(--petroleo); line-height:1.15;}
h1{font-size:clamp(36px,5vw,64px);}
h2{font-size:clamp(28px,3.4vw,40px);}
h3{font-size:22px;}
p{max-width:62ch;}
.lede{font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); color:var(--petroleo); font-style:italic; max-width:34ch; line-height:1.4;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity 0.9s ease, transform 0.9s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ===== HEADER ===== */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:26px 0;
  transition:background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
  border-bottom:1px solid transparent;
}
.header-inner{
  width:100%; max-width:1160px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
}
header.site.scrolled{
  background:rgba(247,243,236,0.94);
  backdrop-filter:blur(6px);
  padding:10px 0;
  border-bottom:1px solid rgba(24,59,61,0.12);
}
header.site.scrolled .brand img{height:48px;}
.brand{
  font-family:var(--serif);
  font-size:20px;
  font-weight:600;
  color:var(--petroleo);
  letter-spacing:0.01em;
}
.brand img{height:64px; width:auto;}
nav.primary{display:flex; align-items:center; gap:34px;}
nav.primary a{
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--grafite);
  position:relative;
  padding-bottom:4px;
}
nav.primary a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--terracota);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.3s ease;
}
nav.primary a:hover::after, nav.primary a.active::after{transform:scaleX(1);}
nav.primary a.active{color:var(--petroleo);}
.nav-toggle{display:none; background:none; border:0; cursor:pointer;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--petroleo); margin:5px 0;}

@media (max-width:880px){
  header.site.scrolled{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  nav.primary{
    position:fixed; top:0; right:-100%; bottom:0; width:min(320px,80vw);
    background:var(--off-white); flex-direction:column; align-items:flex-start;
    padding:110px 40px 40px; gap:26px; transition:right 0.4s ease;
    box-shadow:-8px 0 30px rgba(0,0,0,0.08);
  }
  nav.primary.open{right:0;}
  .nav-toggle{display:block;}
}

/* ===== HERO ===== */
.hero{padding:190px 0 110px;}
.hero h1{margin:14px 0 22px;}
.hero .subhead{
  font-family:var(--sans); font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--terracota); font-size:14px; margin-bottom:34px;
}
.hero p.intro{font-size:18px; color:var(--grafite); margin-bottom:36px;}

.btn{
  display:inline-block; font-family:var(--sans); font-weight:600; font-size:14px;
  letter-spacing:0.03em; padding:16px 32px; border:1px solid var(--petroleo);
  color:var(--petroleo); background:transparent; transition:background 0.3s ease, color 0.3s ease;
}
.btn:hover{background:var(--petroleo); color:var(--off-white);}
.btn.solid{background:var(--petroleo); color:var(--off-white);}
.btn.solid:hover{background:var(--terracota); border-color:var(--terracota);}

/* ===== SECTIONS ===== */
section{padding:100px 0;}
section.petroleo{background:var(--petroleo); color:var(--off-white);}
section.petroleo h2, section.petroleo h3{color:var(--off-white);}
section.petroleo p{color:rgba(247,243,236,0.85);}
section.areia{background:var(--areia);}
.section-head{max-width:640px; margin-bottom:56px;}
hr.hair{border:0; border-top:1px solid rgba(24,59,61,0.15); margin:64px 0;}

/* pillar cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(24,59,61,0.12);}
.pillar-card{background:var(--off-white); padding:48px 38px; transition:background 0.3s ease;}
.pillar-card:hover{background:#fff;}
.pillar-card .eyebrow{margin-bottom:22px;}
.pillar-card p{margin:16px 0 26px; font-size:15px;}
.pillar-card a{font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--terracota); border-bottom:1px solid var(--terracota); padding-bottom:2px;}
@media (max-width:880px){.grid-3{grid-template-columns:1fr;}}

/* problem list */
.problem-list li{
  font-family:var(--serif); font-size:clamp(18px,2vw,22px); color:var(--petroleo);
  padding:24px 0; border-bottom:1px solid rgba(24,59,61,0.14);
}
.problem-list li:first-child{border-top:1px solid rgba(24,59,61,0.14);}

/* pillar icon motif */
.pillar-icon{margin-bottom:22px;}
.pillar-icon svg{width:44px; height:44px; stroke:var(--terracota); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block;}
.pillar-card .pillar-icon svg{width:30px; height:30px; margin-bottom:14px;}

/* service page blocks */
.block{margin-bottom:64px; max-width:720px;}
.block h2{margin-bottom:18px;}
.service-list{margin-top:8px;}
.service-list li{
  padding:16px 0 16px 26px; border-bottom:1px solid rgba(24,59,61,0.12);
  position:relative; font-size:16px;
}
.service-list li::before{
  content:'—'; position:absolute; left:0; top:16px; color:var(--terracota); font-family:var(--sans);
}

/* CTA band */
.cta-band{
  background:var(--petroleo); color:var(--off-white); padding:80px 0; text-align:left;
}
.cta-band h2{color:var(--off-white); margin-bottom:16px;}
.cta-band p{color:rgba(247,243,236,0.85); margin-bottom:32px;}
.cta-band .btn{border-color:var(--off-white); color:var(--off-white);}
.cta-band .btn:hover{background:var(--off-white); color:var(--petroleo);}

/* form */
.form-wrap{max-width:620px;}
.form-honeypot{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;
}
.form-status{
  max-width:620px; margin-bottom:26px; padding:14px 18px;
  border-left:3px solid var(--terracota); background:rgba(24,59,61,0.06);
  font-size:14px; color:var(--petroleo);
}
.field{margin-bottom:26px;}
.field label{display:block; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:var(--petroleo); margin-bottom:10px;}
.field input, .field select, .field textarea{
  width:100%; border:0; border-bottom:1px solid rgba(24,59,61,0.3); background:transparent;
  padding:12px 4px; font-family:var(--sans); font-size:16px; color:var(--grafite); resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-bottom-color:var(--terracota);}
.microcopy{font-size:13px; color:rgba(37,37,37,0.65); margin-top:18px; max-width:48ch;}
.whatsapp-alt{margin-top:44px; padding-top:36px; border-top:1px solid rgba(24,59,61,0.15);}

/* footer */
footer.site{background:var(--petroleo); color:rgba(247,243,236,0.8); padding:70px 0 40px;}
footer.site .foot-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; margin-bottom:50px;}
footer.site h3{color:var(--off-white); font-size:18px; margin-bottom:18px;}
footer.site a{display:block; font-size:14px; padding:6px 0; color:rgba(247,243,236,0.75);}
footer.site a:hover{color:var(--terracota);}
footer.site .foot-bottom{
  border-top:1px solid rgba(247,243,236,0.15); padding-top:26px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-size:12px; letter-spacing:0.03em; color:rgba(247,243,236,0.55);
}

/* breadcrumb */
.breadcrumb {
    padding-top: 150px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(24,59,61,0.6);
}
.breadcrumb a:hover{color:var(--terracota);}

@media (max-width:600px){
    .header-inner{padding:0 24px;}
    .wrap{padding:0 24px;}
    .hero{padding:150px 0 70px;}
    section{padding:70px 0;}
    .breadcrumb{padding-top:120px;}
}