/* ===========================================================
   REA Consult — static rebuild
   Colors and type taken 1:1 from the original site
   =========================================================== */

:root {
  --color-dark-teal: #003642;
  --color-yellow: #fefb64;
  --color-blue-gray: #325063;
  --color-footer-bg: #e7e9e2;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Titillium Web', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-dark-teal);
  background: #fff;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0 0 20px;
}

.section {
  width: 100%;
  padding: 60px 24px;
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- Hero ---------- */
.hero {
  background-image: linear-gradient(0deg, rgba(64, 62, 62, 0.15), rgba(64, 62, 62, 0.15)),
    url('/assets/images/shutterstock_2474436711_BWcool-scaled.jpg');
  background-size: cover;
  background-position: center;
  padding: 120px 24px;
  text-align: center;
}

.hero img {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Welcome / yellow sections ---------- */
.section--yellow {
  background-color: var(--color-yellow);
}

.section--yellow h1 {
  font-size: 40px;
  color: var(--color-dark-teal);
}

.two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.two-col > div { flex: 1 1 320px; }

.two-col p {
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
}

.two-col .col-image {
  min-height: 260px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

/* ---------- Pillars (3 headings) ---------- */
.pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  text-align: center;
  margin-bottom: 30px;
}

.pillars > div { flex: 1 1 220px; }

.pillars h2 {
  font-size: 22px;
  font-weight: 700;
}

/* ---------- Feature icons ---------- */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.feature {
  flex: 1 1 320px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.feature i {
  font-size: 42px;
  color: var(--color-dark-teal);
  flex-shrink: 0;
}

.feature h3 {
  font-size: 22px;
  margin: 0 0 8px;
}

.feature p {
  font-size: 20px;
  margin: 0;
}

/* ---------- What we do ---------- */
.services-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.services-layout .col-image {
  flex: 1 1 260px;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

.services-layout .col-text {
  flex: 2 1 480px;
}

.service-item h3 {
  font-size: 22px;
  margin: 24px 0 6px;
}

.service-item:first-child h3 { margin-top: 0; }

.service-item p {
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Experience & reach ---------- */
.section--dark {
  background-color: var(--color-blue-gray);
  text-align: center;
}

.section--dark h1 {
  color: var(--color-yellow);
}

.counters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}

.counter {
  color: var(--color-yellow);
}

.counter .number {
  font-size: 45px;
  line-height: 1;
}

.counter .label {
  font-size: 18px;
  margin-top: 4px;
}

.map-image {
  max-width: 700px;
  margin: 0 auto 30px;
}

/* Accordion (references list) */
.accordion {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-yellow);
  margin-bottom: 20px;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  background: transparent;
  display: flex;
  align-items: center;
}

.accordion::before {
  content: '+';
  color: var(--color-yellow);
  font-weight: bold;
  margin-right: 10px;
  font-size: 20px;
}

.accordion.active::before {
  content: '-';
}

.panel {
  padding: 0 18px;
  text-align: left;
  display: none;
  overflow: hidden;
}

.panel.open { display: block; }

.country-subtitle {
  font-weight: bold;
  margin-top: 20px;
  font-size: 16px;
  color: var(--color-yellow);
}

.custom-bullet-list {
  list-style-type: disc;
  font-size: 16px;
  color: var(--color-yellow);
  padding-left: 20px;
}

/* ---------- Membership ---------- */
.section--membership {
  text-align: center;
}

.section--membership img {
  max-width: 200px;
  margin: 0 auto;
}

/* ---------- Connect with us ---------- */
.section--connect {
  background-image: url('/assets/images/shutterstock_1808468515_pb_resized.jpg');
  background-size: cover;
  background-position: center;
}

.connect-box {
  max-width: 620px;
  background-color: rgba(39, 39, 39, 0.56);
  border-radius: 30px;
  padding: 40px;
  color: #fff;
}

.connect-box h1 {
  font-size: 40px;
  color: #fff;
}

.connect-box h2 {
  font-size: 20px;
  font-family: var(--font-body);
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.connect-box p {
  margin: 0 0 30px;
}

.connect-box a {
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Footer ---------- */
.footer {
  background-color: var(--color-footer-bg);
  text-align: center;
  padding: 40px 24px;
}

.footer img {
  max-width: 100px;
  margin: 0 auto 20px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 40px;
  font-size: 14px;
  flex-wrap: wrap;
}

.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* ---------- Legal / privacy pages ---------- */
.legal-page {
  background-color: var(--color-dark-teal);
  min-height: 100vh;
  padding: 40px 20px;
}

.legal-card {
  max-width: 650px;
  margin: 0 auto;
  background: #fff;
  padding: 30px 40px 50px;
  border-radius: 4px;
}

.legal-card img {
  max-width: 300px;
  margin: 0 auto 30px;
}

.legal-card h1 {
  font-family: var(--font-body);
  font-size: 18px;
  text-align: center;
  margin-bottom: 30px;
}

.legal-card h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  margin-top: 30px;
}

.legal-card p, .legal-card li {
  font-size: 16px;
  line-height: 1.6;
  margin: 10px 0;
}

.legal-card ul { padding-left: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .hero { padding: 80px 20px; }
  .connect-box { padding: 24px; }
}