/* ── TOKENS ── */
:root {
   --forest-deep: #1B3022;
   --petrol: #244D66;
   --eco: #99BF3C;
   --surface: #F8F9FA;
   --white: #FFFFFF;
   --border: #DCDCDC;
   --text: #1A1A1A;
   --text-muted: #5A6370;
   --shadow-card: 0 4px 20px rgba(36, 77, 102, .08);
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-full: 9999px;
   --transition: 0.22s ease;
   --container: 1280px;
   --font-head: 'Montserrat', sans-serif;
   --font-body: 'Inter', sans-serif;
}

/* ── RESET ── */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-body);
   font-size: 16px;
   line-height: 1.6;
   color: var(--text);
   background: var(--surface);
   -webkit-font-smoothing: antialiased;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

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

ul {
   list-style: none;
}

button {
   cursor: pointer;
   border: none;
   background: none;
   font-family: inherit;
}

/* ── CONTAINER ── */
.container {
   width: 100%;
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 64px;
}

@media(max-width:1024px) {
   .container {
      padding: 0 32px;
   }
}

@media(max-width:640px) {
   .container {
      padding: 0 16px;
   }
}

/* ── TYPOGRAPHY ── */
h1,
h2,
h3,
h4 {
   font-family: var(--font-head);
   line-height: 1.15;
   color: var(--text);
}

h1 {
   font-size: clamp(32px, 5vw, 52px);
   font-weight: 700;
   letter-spacing: -0.02em;
}

h2 {
   font-size: clamp(24px, 3.5vw, 36px);
   font-weight: 600;
}

h3 {
   font-size: clamp(18px, 2.5vw, 24px);
   font-weight: 600;
}

h4 {
   font-size: 18px;
   font-weight: 600;
}

p {
   color: var(--text-muted);
   line-height: 1.7;
}

.label-sm {
   font-family: var(--font-body);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
}

/* ── BUTTONS ── */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 28px;
   border-radius: var(--radius-sm);
   font-family: var(--font-body);
   font-size: 14px;
   font-weight: 600;
   letter-spacing: .05em;
   text-transform: uppercase;
   transition: var(--transition);
}

.btn-primary {
   background: var(--forest-deep);
   color: #fff;
}

.btn-primary:hover {
   background: #253d2e;
   transform: translateY(-1px);
   box-shadow: 0 6px 20px rgba(27, 48, 34, .25);
}

.btn-ghost {
   background: transparent;
   color: var(--petrol);
   border: 1.5px solid var(--petrol);
}

.btn-ghost:hover {
   background: var(--petrol);
   color: #fff;
}

.btn-eco {
   background: var(--eco);
   color: var(--forest-deep);
}

.btn-eco:hover {
   background: #88ab34;
   transform: translateY(-1px);
}

/* ── CHIPS ── */
.chip {
   display: inline-block;
   padding: 4px 10px;
   border-radius: var(--radius-sm);
   background: rgba(36, 77, 102, .1);
   color: var(--petrol);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
}

.chip-green {
   background: rgba(27, 48, 34, .1);
   color: var(--forest-deep);
}

/* ── SECTION SPACING ── */
.section {
   padding: 100px 0;
}

.section-sm {
   padding: 64px 0;
}

.section-header {
   text-align: center;
   margin-bottom: 56px;
}

.section-header p {
   max-width: 750px;
   margin: 16px auto 0;
   font-size: 17px;
   text-align: justify;
}

/* ─────────────────────────────────
   NAV
───────────────────────────────── */
.site-header {
   position: sticky;
   top: 0;
   z-index: 1000;
   background: rgba(255, 255, 255);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-bottom: 1px solid var(--border);
   transition: box-shadow var(--transition);
}

.site-header.scrolled {
   box-shadow: 0 2px 20px rgba(0, 0, 0, .07);
}

.nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 70px;
}

.nav-logo {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.nav-logo img,
.custom-logo {
   max-height: 48px;
   width: auto;
   display: block;
   object-fit: contain;
}

.nav-logo-mark {
   font-family: var(--font-head);
   font-size: 22px;
   font-weight: 700;
   color: var(--forest-deep);
   letter-spacing: .02em;
   line-height: 1;
}

.nav-logo-sub {
   font-size: 8px;
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 36px;
}

.nav-links a {
   font-size: 14px;
   font-weight: 500;
   color: var(--text-muted);
   letter-spacing: .02em;
   transition: color var(--transition);
   position: relative;
}

.nav-links a::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--eco);
   border-radius: 2px;
   transition: width var(--transition);
}

.nav-links a:hover,
.nav-links a.active,
.nav-links .current-menu-item>a,
.nav-links .current_page_item>a,
.nav-links .current-menu-ancestor>a {
   color: var(--forest-deep);
}

.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links .current-menu-item>a::after,
.nav-links .current_page_item>a::after,
.nav-links .current-menu-ancestor>a::after {
   width: 100%;
}

/* ── DROPDOWN ── */
.nav-links li {
   position: relative;
   list-style: none;
}

.nav-links li.menu-item-has-children>a,
.nav-links li.has-children>a {
   display: flex;
   align-items: center;
   gap: 5px;
}

.nav-links li.menu-item-has-children>a::before,
.nav-links li.has-children>a::before {
   content: '';
   display: inline-block;
   width: 8px;
   height: 8px;
   border-right: 1.5px solid currentColor;
   border-bottom: 1.5px solid currentColor;
   transform: rotate(45deg) translateY(-2px);
   transition: transform var(--transition);
   order: 2;
   flex-shrink: 0;
}

.nav-links li.menu-item-has-children:hover>a::before,
.nav-links li.has-children:hover>a::before {
   transform: rotate(-135deg) translateY(-2px);
}

.nav-links li.menu-item-has-children>a::after,
.nav-links li.has-children>a::after {
   display: none;
}

.nav-links .sub-menu,
.nav-links .nav-dropdown {
   position: absolute;
   top: calc(100% + 12px);
   left: -20px;
   background: #ffffff;
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 8px;
   min-width: 240px;
   box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px);
   transition: opacity .18s ease, transform .18s ease, visibility .18s;
   z-index: 2000;
   list-style: none;
}

.nav-links li:hover>.sub-menu,
.nav-links li:hover>.nav-dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.nav-links .sub-menu a,
.nav-links .nav-dropdown a {
   display: inline-block;
   position: relative;
   padding: 10px 16px;
   border-radius: 6px;
   font-size: 13px;
   color: var(--text-body) !important;
   white-space: nowrap;
   transition: color var(--transition);
}

.nav-links .sub-menu a:hover,
.nav-links .nav-dropdown a:hover,
.nav-links .sub-menu .current-menu-item>a,
.nav-links .nav-dropdown .current-menu-item>a {
   background: none !important;
   color: var(--forest-deep) !important;
}

.nav-links .sub-menu a::after,
.nav-links .nav-dropdown a::after {
   content: '' !important;
   display: block !important;
   position: absolute;
   bottom: 4px;
   left: 16px;
   width: 0;
   height: 2px;
   background: var(--eco);
   border-radius: 2px;
   transition: width var(--transition);
}

.nav-links .sub-menu a:hover::after,
.nav-links .nav-dropdown a:hover::after,
.nav-links .sub-menu .current-menu-item>a::after,
.nav-links .nav-dropdown .current-menu-item>a::after {
   width: calc(100% - 32px) !important;
}

.nav-cta {
   margin-left: 12px;
   padding: 9px 20px;
   font-size: 13px;
}

/* Hamburger */
.nav-toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   padding: 4px;
}

.nav-toggle span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--text);
   border-radius: 2px;
   transition: var(--transition);
}

.nav-toggle.open span:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.open span:nth-child(2) {
   opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
   transform: rotate(-45deg) translate(5px, -5px);
}

@media(max-width:900px) {

   .nav-links,
   .nav-cta {
      display: none;
   }

   .nav-toggle {
      display: flex;
   }

   .nav-links.open {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 70px;
      left: 0;
      right: 0;
      bottom: 0;
      background: #ffffff !important;
      padding: 32px 28px;
      gap: 4px;
      align-items: flex-start;
      z-index: 99999;
      overflow-y: auto;
   }

   .nav-links.open>li {
      width: 100%;
   }

   .nav-links.open a {
      font-size: 18px;
      font-family: var(--font-head);
      font-weight: 600;
      color: #1A1A1A;
      padding: 16px 0;
      border-bottom: none !important;
      width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 16px;
      text-decoration: none;
      transition: color 0.2s;
   }

   .nav-links.open a:hover,
   .nav-links.open a.active,
   .nav-links.open .current-menu-item>a {
      color: var(--eco, #99BF3C) !important;
   }

   /* Target specific links for premium custom icons */
   .nav-links.open a::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 24px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      flex-shrink: 0;
      opacity: 0.75;
      transition: opacity 0.2s;
   }

   .nav-links.open a:hover::before,
   .nav-links.open .current-menu-item>a::before {
      opacity: 1;
      filter: drop-shadow(0 2px 4px rgba(153, 191, 60, 0.2));
   }

   /* Home / Início Icon */
   .nav-links.open a[href$="/oikos/"]::before,
   .nav-links.open a[href$="/"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
   }

   /* A Empresa Icon */
   .nav-links.open a[href*="/sobre"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
   }

   /* Ética Icon */
   .nav-links.open a[href*="/etica"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 11 11 13 15 9'/%3E%3C/svg%3E");
   }

   /* Qualidade Icon */
   .nav-links.open a[href*="/qualidade"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E");
   }

   /* Serviços Icon */
   .nav-links.open a[href*="/servicos"]::before,
   .nav-links.open a[href*="/projetos"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
   }

   /* Clientes Icon */
   .nav-links.open a[href*="/clientes"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
   }

   /* Contato Icon */
   .nav-links.open a[href*="/contato"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
   }

   /* Mobile dropdown style and indentation */
   .nav-links.open .sub-menu,
   .nav-links.open .nav-dropdown {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: none;
      border-radius: 0;
      background: transparent;
      padding: 0 0 8px 40px;
      min-width: unset;
      display: none;
      margin-top: -4px;
   }

   .nav-links.open .sub-menu.open,
   .nav-links.open .nav-dropdown.open {
      display: flex;
      flex-direction: column;
      gap: 4px;
   }

   .nav-links.open .sub-menu a,
   .nav-links.open .nav-dropdown a {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 500;
      color: #5A6370;
      padding: 10px 0;
      border-bottom: none !important;
   }

   .nav-links.open .sub-menu a::before,
   .nav-links.open .nav-dropdown a::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      background-color: var(--eco, #99BF3C);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: 0.75;
   }

   .nav-links.open .sub-menu a:hover::before,
   .nav-links.open .nav-dropdown a:hover::before {
      opacity: 1;
      transform: scale(1.2);
   }

   /* Disable bottom green highlight line of desktop nav on mobile links */
   .nav-links.open a::after {
      display: none !important;
   }

   /* Reset desktop chevron pseudo-element so we can use it for left custom SVG icon */
   .nav-links.open li.menu-item-has-children>a::before,
   .nav-links.open li.has-children>a::before {
      content: '' !important;
      display: inline-block !important;
      width: 24px !important;
      height: 24px !important;
      border: none !important;
      transform: none !important;
      order: 0 !important;
   }

   /* Add custom right chevron dropdown toggle arrow on mobile */
   .nav-links.open li.menu-item-has-children>a::after,
   .nav-links.open li.has-children>a::after {
      content: '' !important;
      display: inline-block !important;
      position: static !important;
      width: 8px !important;
      height: 8px !important;
      background: none !important;
      border-right: 1.5px solid #1A1A1A !important;
      border-bottom: 1.5px solid #1A1A1A !important;
      transform: rotate(45deg) !important;
      margin-left: auto !important;
      transition: transform 0.3s !important;
      margin-right: 8px !important;
      border-radius: 0 !important;
   }

   .nav-links.open li.menu-item-has-children.open>a::after,
   .nav-links.open li.has-children.open>a::after {
      transform: rotate(-135deg) !important;
   }

   body.nav-open .site-header {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
   }
}


/* ─────────────────────────────────
   HERO
───────────────────────────────── */
.hero {
   position: relative;
   min-height: 88vh;
   display: flex;
   align-items: center;
   overflow: hidden;
}

.hero-bg {
   position: absolute;
   inset: 0;
   background: var(--forest-deep);
}

.hero-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: .45;
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(11, 32, 19, .85) 0%, rgba(36, 77, 102, .55) 100%);
}

.hero-content {
   position: relative;
   z-index: 2;
   max-width: 900px;
}

.hero-label {
   color: var(--eco);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .16em;
   text-transform: uppercase;
   margin-bottom: 20px;
   display: block;
}

.hero-content h1 {
   color: #fff;
   margin-bottom: 24px;
}

.hero-content p {
   color: rgba(255, 255, 255, .78);
   font-size: 18px;
   margin-bottom: 40px;
   max-width: 750px;
}

.hero-actions {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
}

/* Page hero (smaller) */
.page-hero {
   min-height: 55vh;
}

.page-hero .hero-content h1 {
   font-size: clamp(28px, 4vw, 44px);
}

/* ─────────────────────────────────
   SERVICE CARDS
───────────────────────────────── */
.cards-grid {
   display: grid;
   gap: 24px;
}

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

.cards-grid-2 {
   grid-template-columns: repeat(2, 1fr);
}

@media(max-width:1024px) {
   .cards-grid-3 {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media(max-width:640px) {

   .cards-grid-3,
   .cards-grid-2 {
      grid-template-columns: 1fr;
   }
}

.card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 28px;
   transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.card:hover {
   border-color: var(--petrol);
   box-shadow: var(--shadow-card);
   transform: translateY(-3px);
}

.card-icon {
   width: 44px;
   height: 44px;
   margin-bottom: 20px;
   color: var(--petrol);
}

.card-icon svg {
   width: 100%;
   height: 100%;
   stroke-width: 1.5;
}

.card h3 {
   margin-bottom: 10px;
   font-size: 18px;
}

.card p {
   font-size: 15px;
   margin-bottom: 16px;
}

.card-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 20px;
}

.card-link {
   font-size: 13px;
   font-weight: 600;
   color: var(--petrol);
   letter-spacing: .04em;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: gap var(--transition);
}

.card-link:hover {
   gap: 10px;
}

/* Dark card (Valores) */
.card-dark {
   background: var(--forest-deep);
   border-color: var(--forest-deep);
   color: #fff;
}

.card-dark h3,
.card-dark h4 {
   color: #fff;
}

.card-dark p {
   color: rgba(255, 255, 255, .72);
}

.card-dark .valor-item {
   display: flex;
   gap: 10px;
   margin-bottom: 18px;
   align-items: flex-start;
}

.card-dark .valor-dot {
   width: 18px;
   height: 18px;
   min-width: 18px;
   background: var(--eco);
   border-radius: 50%;
   margin-top: 2px;
}

.card-dark .valor-title {
   font-weight: 600;
   font-size: 13px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--eco);
   margin-bottom: 2px;
}

/* ─────────────────────────────────
   CLIENTES STRIP
───────────────────────────────── */
.clients-strip {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 8px 48px;
}

.client-item {
   font-family: var(--font-head);
   font-size: 18px;
   font-weight: 700;
   letter-spacing: .12em;
   color: #bbb;
   transition: color var(--transition);
   text-transform: uppercase;
}

.client-item img {
   max-height: 40px;
   width: auto;
   filter: grayscale(1);
   opacity: .55;
   transition: var(--transition);
   object-fit: contain;
}

.client-item:hover .client-name,
.client-item:hover img {
   color: var(--forest-deep);
   filter: grayscale(0);
   opacity: 1;
}

/* ─────────────────────────────────
   CTA BANNER
───────────────────────────────── */
.cta-banner {
   background: var(--forest-deep);
   padding: 80px 0;
}

.cta-banner-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   flex-wrap: wrap;
}

.cta-banner h2 {
   color: #fff;
   max-width: 500px;
}

.cta-banner p {
   color: rgba(255, 255, 255, .7);
   margin-top: 12px;
}

/* ─────────────────────────────────
   TEAM
───────────────────────────────── */
.cards-grid-4 {
   grid-template-columns: repeat(4, 1fr);
}

@media(max-width:1024px) {
   .cards-grid-4 {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media(max-width:640px) {
   .cards-grid-4 {
      grid-template-columns: 1fr;
   }
}

.team-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   overflow: hidden;
   transition: var(--transition);
}

.team-card:hover {
   box-shadow: var(--shadow-card);
   transform: translateY(-3px);
}

.team-photo {
   width: 100%;
   aspect-ratio: 1;
   overflow: hidden;
   background: #e0e5e0;
}

.team-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .4s ease;
}

.team-card:hover .team-photo img {
   transform: scale(1.04);
}

.team-info {
   padding: 20px;
}

.team-info h4 {
   margin-bottom: 4px;
   font-size: 16px;
}

.team-cargo {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--petrol);
   margin-bottom: 8px;
}

.team-bio {
   font-size: 14px;
   color: var(--text-muted);
   line-height: 1.5;
}

.team-linkedin {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 12px;
   font-size: 13px;
   font-weight: 600;
   color: var(--petrol);
}

/* ─────────────────────────────────
   CONTACT FORM
───────────────────────────────── */
.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: start;
   margin-top: 30px;
}

@media(max-width:768px) {
   .contact-grid {
      grid-template-columns: 1fr;
   }
}

.form-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 36px;
}

.form-card h2 {
   color: var(--petrol);
   margin-bottom: 28px;
   font-size: 22px;
}

.field-group {
   margin-bottom: 20px;
}

.field-group label {
   display: block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: 6px;
}

.field-group input,
.field-group textarea {
   width: 100%;
   background: #F2F4F5;
   border: none;
   border-bottom: 1.5px solid var(--border);
   padding: 12px 14px;
   font-family: var(--font-body);
   font-size: 15px;
   color: var(--text);
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   outline: none;
   transition: border-color var(--transition);
}

.field-group input:focus,
.field-group textarea:focus {
   border-bottom: 2px solid var(--petrol);
   background: #eef2f5;
}

.field-group textarea {
   resize: vertical;
   min-height: 120px;
}

.field-error {
   font-size: 12px;
   color: #ba1a1a;
   margin-top: 4px;
}

.form-success {
   padding: 16px;
   background: rgba(153, 191, 60, .15);
   border: 1px solid var(--eco);
   border-radius: var(--radius-sm);
   color: var(--forest-deep);
   font-weight: 600;
   display: none;
}

.form-success.show {
   display: block;
}

/* Contact info cards */
.contact-info {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.info-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 20px 24px;
   display: flex;
   gap: 16px;
   align-items: flex-start;
   transition: var(--transition);
}

.info-card:hover {
   border-color: var(--petrol);
}

.info-card-icon {
   width: 40px;
   height: 40px;
   min-width: 40px;
   border-radius: var(--radius-sm);
   background: rgba(36, 77, 102, .09);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--petrol);
}

.info-card-icon svg {
   width: 20px;
   height: 20px;
   stroke-width: 1.5;
}

.info-card-label {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: 4px;
}

.info-card-value {
   font-size: 15px;
   color: var(--text);
   line-height: 1.5;
}

.whatsapp-card {
   background: #f0f7e8;
   border-color: #c5dfa0;
}

.whatsapp-card .info-card-icon {
   background: var(--eco);
   color: var(--forest-deep);
}

.whatsapp-card h3 {
   color: var(--forest-deep);
   font-size: 18px;
}

.map-embed {
   border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid var(--border);
}

.map-embed iframe {
   display: block;
   width: 100%;
   height: 220px;
   border: none;
}

.map-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
   background: var(--white);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--text-muted);
   border-top: 1px solid var(--border);
}

.map-link:hover {
   color: var(--petrol);
}

/* ─────────────────────────────────
   FOOTER
───────────────────────────────── */
.site-footer {
   background: var(--forest-deep);
   padding: 64px 0 32px;
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 48px;
   margin-bottom: 48px;
}

@media(max-width:768px) {
   .footer-grid {
      grid-template-columns: 1fr;
      gap: 32px;
   }

   .footer-bottom {
      flex-direction: column;
      text-align: center;
      gap: 16px;
   }

   .footer-legal {
      flex-direction: column;
      gap: 12px;
      align-items: center;
   }
}

.footer-brand .nav-logo-mark {
   color: #fff;
   font-size: 24px;
}

.footer-brand .nav-logo-sub {
   color: rgba(255, 255, 255, .5);
}

.footer-tagline {
   color: rgba(255, 255, 255, .6);
   font-size: 14px;
   margin-top: 14px;
   max-width: 280px;
   line-height: 1.6;
}

.footer-socials {
   display: flex;
   gap: 12px;
   margin-top: 20px;
}

.footer-socials a {
   width: 36px;
   height: 36px;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(255, 255, 255, .2);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, .6);
   transition: var(--transition);
}

.footer-socials a:hover {
   background: rgba(255, 255, 255, .1);
   color: #fff;
   border-color: rgba(255, 255, 255, .4);
}

.footer-col h4 {
   color: var(--eco);
   font-size: 11px;
   letter-spacing: .1em;
   text-transform: uppercase;
   margin-bottom: 18px;
   font-weight: 600;
}

.footer-col ul li {
   margin-bottom: 10px;
}

.footer-col ul li a,
.footer-col ul li span,
.footer-col ul li .footer-addr {
   color: rgba(255, 255, 255, .65);
   font-size: 14px;
   line-height: 1.6;
   transition: color var(--transition);
   display: flex;
   align-items: flex-start;
   gap: 8px;
}

.footer-col ul li a:hover {
   color: #fff;
}

.footer-col ul li a svg,
.footer-col ul li span svg,
.footer-col ul li .footer-addr svg {
   width: 16px;
   height: 16px;
   min-width: 16px;
   margin-top: 3px;
   stroke-width: 1.5;
   flex-shrink: 0;
   opacity: 0.7;
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   padding-top: 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
}

.footer-copyright {
   color: rgba(255, 255, 255, .4);
   font-size: 13px;
}

.footer-legal {
   display: flex;
   gap: 20px;
}

.footer-legal a {
   color: rgba(255, 255, 255, .4);
   font-size: 13px;
   transition: color var(--transition);
}

.footer-legal a:hover {
   color: rgba(255, 255, 255, .7);
}

/* ─────────────────────────────────
   MISSAO/VISAO
───────────────────────────────── */
.mvv-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 24px;
}

@media(max-width:900px) {
   .mvv-grid {
      grid-template-columns: 1fr 1fr;
   }
}

@media(max-width:600px) {
   .mvv-grid {
      grid-template-columns: 1fr;
   }
}

.mvv-card-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-sm);
   background: rgba(36, 77, 102, .09);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--petrol);
   margin-bottom: 18px;
}

.mvv-card-icon svg {
   width: 22px;
   height: 22px;
   stroke-width: 1.5;
}

/* ─────────────────────────────────
   EXPERTISE SECTION
───────────────────────────────── */
.expertise-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
}

@media(max-width:768px) {
   .expertise-content {
      grid-template-columns: 1fr;
   }
}

.expertise-label {
   display: inline-block;
   color: var(--petrol);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   margin-bottom: 14px;
   border-left: 3px solid var(--eco);
   padding-left: 12px;
}

.expertise-text h2 {
   margin-bottom: 20px;
}

.expertise-text p+p {
   margin-top: 14px;
}

/* ─────────────────────────────────
   ANIMATIONS
───────────────────────────────── */
.reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .55s ease, transform .55s ease;
}

.reveal.visible {
   opacity: 1;
   transform: none;
}

.reveal-delay-1 {
   transition-delay: .1s;
}

.reveal-delay-2 {
   transition-delay: .2s;
}

.reveal-delay-3 {
   transition-delay: .3s;
}

/* ─────────────────────────────────
   MISC
───────────────────────────────── */
.bg-surface {
   background: var(--surface);
}

.bg-white {
   background: var(--white);
}

.divider {
   border: none;
   border-top: 1px solid var(--border);
}

.text-center {
   text-align: center;
}

.text-petrol {
   color: var(--petrol);
}

.mt-8 {
   margin-top: 8px;
}

.mt-16 {
   margin-top: 16px;
}

.mt-32 {
   margin-top: 32px;
}

.mb-0 {
   margin-bottom: 0;
}

/* 404 */
.not-found {
   min-height: 70vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.not-found h1 {
   font-size: 96px;
   color: var(--border);
}

.not-found h2 {
   font-size: 28px;
   margin-bottom: 16px;
}

/* ── RESPONSIVE MOBILE ADJUSTMENTS ── */
@media (max-width: 768px) {
   .hero {
      padding: 120px 0 80px !important;
      min-height: auto !important;
   }
}