* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root{
  --nav-bg:#0f1419;
  --bg-left:#f4f5f2;
  --btn:#0b5b4f;
  --btn-hover:#09493f;
  --text:#0f1419;
  --muted:#3b4046;
  --max:1200px;

  --paper:#f4f5f2;
  --service-text:#1f252b;
  --line: rgba(15,20,25,0.35);

  --mission-overlay: rgba(11, 91, 79, 0.72);
  --mission-note: #e9e2b7;

  --quote: rgba(210, 194, 130, 0.65);
  --divider: rgba(15,20,25,0.22);

  --join-bg: #0f1419;
  --join-card: rgba(255,255,255,0.06);

  --yt: #ff0033;
  --yt-hover: #d8002b;

  --contact-bg: #f4f5f2;
  --contact-line: rgba(15,20,25,0.55);
}

body{
  font-family: system-ui, Arial, sans-serif;
  color: var(--text);
  background: white;
  padding-top: 70px;
}

.container{
  width: min(var(--max), 92%);
  margin: 0 auto;
}

/* NAVBAR */
.navbar{
  background: var(--nav-bg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform 220ms ease;
}

.navbar.nav-hidden{
  transform: translateY(-110%);
}

.nav-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 18px 0;
}

.brand{
  color:white;
  text-decoration:none;
  font-weight:600;
}

.nav-links{
  display:flex;
  gap:28px;
}

.nav-links a{
  color:white;
  text-decoration:none;
  font-weight:500;
  border-bottom: none !important;
}

.nav-links a:hover{
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Mobile toggle */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:8px;
}

.nav-toggle span{
  display:block;
  width:26px;
  height:2px;
  background:white;
  margin:6px 0;
}

/* BUTTONS */
.btn{
  display:inline-block;
  background: var(--btn);
  color:white;
  padding: 14px 22px;
  text-decoration:none;
  font-weight:600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

.btn:hover{ background: var(--btn-hover); }

.btn.btn-light{
  background: #ffffff;
  color: #0f1419;
}

.btn.btn-light:hover{
  background: #f1f1f1;
}

/* HERO */
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height: calc(100vh - 70px);
}

.hero-left{
  background: var(--bg-left);
  padding: 120px 80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-title{
  font-size: clamp(56px, 6vw, 96px);
  line-height: 0.95;
  margin-bottom: 24px;
  font-weight: 700;
}

.hero-subtitle{
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 30px;
  max-width: 520px;
}

.hero-right{
  background:#e9ece8;
  display:flex;
}

.hero-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ABOUT */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height: 100vh;
}

.about-image{
  background:#e9ece8;
}

.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.about-content{
  padding: 100px 80px;
  background:#ffffff;
}

.about-title{
  font-size: clamp(44px, 5vw, 80px);
  line-height:1.05;
  margin-bottom: 18px;
  font-weight: 700;
}

.about-kicker{
  font-weight: 600;
  margin: 18px 0 22px;
}

.about-text{
  font-size:18px;
  line-height:1.8;
  margin-bottom:16px;
  color:#2d333a;
}

/* YOUTUBE */
.youtube-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.youtube-image{
  background:#e9ece8;
}

.youtube-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.youtube-content{
  padding: 100px 80px;
  background:#ffffff;
}

.youtube-title{
  font-size: clamp(44px, 5vw, 80px);
  line-height:1.05;
  margin-bottom: 18px;
  font-weight: 700;
}

.youtube-kicker{
  font-weight: 600;
  margin: 18px 0 22px;
}

.youtube-text{
  font-size:18px;
  line-height:1.8;
  margin-bottom:16px;
  color:#2d333a;
}

.btn-yt{
  background: var(--yt);
}

.btn-yt:hover{
  background: var(--yt-hover);
}

/* SERVICES */
.services-section{
  background: var(--paper);
  padding: 90px 0 110px;
  margin-bottom: 70px;
}

.services-wrap{ padding-top: 10px; }
.services-head{ margin-bottom: 46px; }

.services-title{
  font-size: clamp(44px, 5.5vw, 86px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.6px;
  margin-bottom: 16px;
}

.services-kicker{
  font-size: 16px;
  color: #111;
  font-weight: 500;
}

.services-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 90px;
  align-items: start;
}

.service-item{ padding: 36px 0; }

.service-title{
  font-size: 32px;
  line-height: 1.15;
  font-weight: 500;
  margin-bottom: 14px;
}

.service-text{
  font-size: 16px;
  line-height: 1.7;
  color: var(--service-text);
  max-width: 360px;
}

.services-divider{
  grid-column: 1 / -1;
  height: 1px;
  background: var(--line);
  margin: 10px 0;
}

/* MISSION */
.mission-section{
  background: #ffffff;
  padding: 70px 0 90px;
}

.mission-wrap{
  width: min(1400px, 96%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 78vh;
}

.mission-left,
.mission-right{
  position: relative;
  overflow: hidden;
  min-height: 520px;
}

.mission-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mission-overlay{
  position:absolute;
  inset:0;
  background: var(--mission-overlay);
}

.mission-card{
  position:absolute;
  left: 7%;
  bottom: 10%;
  width: min(420px, 80%);
  color: #ffffff;
}

.mission-title{
  font-size: clamp(44px, 4.5vw, 64px);
  font-weight: 500;
  margin-bottom: 14px;
}

.mission-text{
  font-size: 14px;
  line-height: 1.8;
  max-width: 360px;
  margin-bottom: 18px;
}

.mission-note{
  position: absolute;
  top: 24px;
  left: 24px;
  width: 55%;
  min-height: 170px;
  background: var(--mission-note);
  padding: 28px 28px;
  font-size: 14px;
  line-height: 1.7;
  color: #0f1419;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* TESTIMONIALS */
.testimonials-section{
  background: #ffffff;
  padding: 90px 0 120px;
}

.testimonials-head{ margin-bottom: 60px; }

.testimonials-title{
  font-size: clamp(46px, 6vw, 88px);
  font-weight: 500;
  letter-spacing: -0.6px;
  line-height: 1.05;
  margin-bottom: 14px;
}

.testimonials-kicker{
  font-size: 16px;
  color: #111;
  font-weight: 500;
}

.testimonials-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  column-gap: 34px;
}

.testimonial{ padding: 0 10px; text-align: center; }

.quote-mark{
  font-size: 90px;
  line-height: 1;
  color: var(--quote);
  margin-bottom: 10px;
}

.testimonial-text{
  font-size: 14px;
  line-height: 1.8;
  color: #1f252b;
  max-width: 340px;
  margin: 0 auto 18px;
}

.testimonial-name{
  font-size: 18px;
  font-weight: 500;
  color: var(--btn);
}

.testimonial-divider{
  width: 1px;
  height: 190px;
  background: var(--divider);
  margin-top: 70px;
}

/* JOIN */
.join-section{
  background: var(--join-bg);
  padding: 80px 0 90px;
}

.join-inner{
  display: flex;
  justify-content: center;
}

.join-card{
  width: min(900px, 100%);
  background: var(--join-card);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 46px 42px;
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.join-title{
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.4px;
  margin-bottom: 14px;
}

.join-text{
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.82);
  max-width: 680px;
  margin-bottom: 22px;
}

.join-actions{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.btn-join{
  background: #25D366;
  color: #0f1419;
}

.btn-join:hover{
  background: #20b85a;
}

.join-note{
  font-size: 14px;
  color: rgba(255,255,255,0.72);
}

/* CONTACT (Modern) */
.contact-modern{
  background: var(--contact-bg);
  padding: 90px 0 110px;
}

.contact-inner{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: start;
}

.contact-title{
  font-size: clamp(54px, 6vw, 86px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.6px;
  margin-bottom: 14px;
}

.contact-kicker{
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 42px;
}

.contact-form{
  max-width: 520px;
}

.field{
  margin-bottom: 26px;
}

.field label{
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
  color: #0f1419;
}

.field input,
.field textarea{
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--contact-line);
  background: transparent;
  padding: 10px 4px 12px;
  font-size: 14px;
  outline: none;
}

.field textarea{
  resize: vertical;
}

.field input:focus,
.field textarea:focus{
  border-bottom-color: #0f1419;
}

.contact-submit{
  width: 100%;
  border-radius: 10px;
}

.contact-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}

.contact-side-text{
  max-width: 280px;
  font-size: 12px;
  line-height: 1.8;
  color: #0f1419;
  text-align: left;
}

.contact-whatsapp{
  align-self: flex-start;
}

/* Success message */
.contact-success{
  display: none;
  margin-bottom: 22px;
  padding: 14px 14px;
  border-radius: 12px;
  background: rgba(11, 91, 79, 0.12);
  border: 1px solid rgba(11, 91, 79, 0.30);
  color: #0b5b4f;
  font-size: 14px;
}

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

/* hidden honeypot container */
.hidden{
  display:none;
}

/* ================= FOOTER ================= */
.site-footer{
  background: #0f1419;
  color: #ffffff;
  padding: 90px 0 30px;
}

.footer-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.footer-brand{
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 24px;
}

.footer-contact p{
  font-size: 14px;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.75);
}

.footer-socials{
  margin-top: 24px;
  display: flex;
  gap: 14px;
}

.social-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  font-size: 12px;
  font-weight: 600;
}

.footer-socials a{
  color: white;
  text-decoration: none;
}

.footer-right{
  max-width: 380px;
  margin-left: auto;
}

.footer-title{
  font-size: 16px;
  margin-bottom: 18px;
  font-weight: 600;
}

.footer-form{
  display: flex;
  flex-direction: column;
}

.footer-label{
  font-size: 12px;
  margin-bottom: 8px;
}

.footer-input{
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding: 10px 4px;
  color: white;
  margin-bottom: 14px;
}

.footer-input:focus{
  outline: none;
  border-bottom-color: white;
}

.footer-checkbox{
  font-size: 12px;
  margin-bottom: 18px;
  color: rgba(255,255,255,0.8);
}

.footer-checkbox input{
  margin-right: 8px;
}

.footer-submit{
  background: white;
  color: #0f1419;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.footer-submit:hover{
  background: #eaeaea;
}

.footer-links{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a{
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}

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

.footer-bottom{
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/* MOBILE */
@media(max-width: 900px){
  .nav-toggle{ display:block; }

  .nav-links{
    position:absolute;
    left:0;
    right:0;
    top: 62px;
    background: var(--nav-bg);
    padding: 16px 4%;
    display:none;
    flex-direction:column;
    gap: 14px;
  }

  .nav-links.open{ display:flex; }

  .hero-grid,
  .about-grid,
  .youtube-grid{
    grid-template-columns:1fr;
  }

  .hero-left,
  .about-content,
  .youtube-content{
    padding: 60px 24px;
  }

  .hero-right,
  .about-image,
  .youtube-image{
    height: 50vh;
  }

  .services-list{
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .service-item{ padding: 22px 0; }
  .services-divider{ margin: 6px 0; }
  .service-text{ max-width: 100%; }

  .mission-wrap{
    grid-template-columns: 1fr;
    width: min(1200px, 96%);
  }

  .mission-note{
    width: calc(100% - 48px);
    position: relative;
    top: auto;
    left: auto;
    margin: 24px;
  }

  .mission-card{
    position: absolute;
    left: 8%;
    bottom: 10%;
  }

  .services-section{ margin-bottom: 40px; }

  .testimonials-grid{
    grid-template-columns: 1fr;
    row-gap: 34px;
  }

  .testimonial-divider{ display: none; }

  .testimonial{
    text-align: left;
    padding: 0;
  }

  .testimonial-text{
    max-width: 100%;
    margin: 0 0 14px;
  }

  .quote-mark{ margin-bottom: 6px; }

  .join-card{ padding: 34px 22px; }

  .contact-inner{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-right{
    align-items: flex-start;
  }

  .contact-side-text{
    max-width: 100%;
  }

  .footer-inner{
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .footer-right{
    margin-left: 0;
  }
}