*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --forest:#1b4332;
  --leaf:#2d6a4f;
  --sage:#40916c;
  --fern:#52b788;
  --mint:#b7e4c7;
  --cream:#f8f5ef;
  --parchment:#f0ebe0;
  --bark:#3d2b1f;
  --soil:#6b4c3b;
  --white:#ffffff;
  --text:#1c1c1c;
  --text-mid:#4a4a40;
  --text-light:#888880;
}
html{scroll-behavior:smooth;}
body{font-family:'Jost',sans-serif;color:var(--text);background:var(--cream);overflow-x:hidden;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;}
img{display:block;}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  display:flex;align-items:center;gap:0;
  padding:0 5%;height:72px;
  background:rgba(27,67,50,0.96);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(82,183,136,0.2);
}
.nav-logo{display:flex;align-items:center;gap:12px;cursor:pointer;}
.nav-logo img{width:44px;height:44px;object-fit:contain;filter:brightness(1.15);}
.nav-brand{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:#fff;line-height:1.1;letter-spacing:1px;}
.nav-brand small{display:block;font-family:'Jost',sans-serif;font-size:9px;font-weight:300;letter-spacing:3px;text-transform:uppercase;color:var(--fern);}
.nav-links{display:flex;gap:0;list-style:none;margin-left:auto;}
.nav-hamburger{margin-left:auto;} /* pushes burger to the right */
.nav-links a{
  color:rgba(255,255,255,0.82);text-decoration:none;
  font-size:14px;font-weight:500;letter-spacing:.3px;
  padding:0 22px;line-height:72px;
  border-left:1px solid rgba(255,255,255,0.07);
  transition:color .2s,background .2s;
  font-family:'Jost', sans-serif;
}
.nav-links a:hover{color:var(--fern);background:rgba(82,183,136,0.07);}
.nav-links .cta-link{background:var(--fern);color:var(--forest)!important;font-weight:600;letter-spacing:.5px;}
.nav-links .cta-link:hover{background:var(--mint)!important;color:var(--forest)!important;}

/* Multi-page: each HTML file is its own page */
body{padding-top:72px;}

/* ── PAGE 1: HOME ── */
.hero{
  min-height:calc(100vh - 72px);
  background:var(--forest);
  position:relative;overflow:hidden;
  display:flex;align-items:center;
}
.hero-texture{
  position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 50%, rgba(82,183,136,0.08) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(64,145,108,0.06) 0%, transparent 50%);
  pointer-events:none;
}
.hero-vine{
  position:absolute;right:0;top:0;bottom:0;width:55%;
  background:linear-gradient(135deg,transparent 0%,rgba(45,106,79,0.3) 100%);
  clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);
  pointer-events:none;
}
.hero-dots{
  position:absolute;right:6%;top:50%;transform:translateY(-50%);
  width:320px;height:320px;
  border-radius:50%;
  border:1px solid rgba(82,183,136,0.12);
  box-shadow:0 0 0 60px rgba(82,183,136,0.04),0 0 0 120px rgba(82,183,136,0.025);
  pointer-events:none;
}
.hero-content{position:relative;z-index:2;padding:80px 5%;max-width:700px;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(82,183,136,0.4);
  color:var(--fern);padding:6px 18px;border-radius:2px;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;
  margin-bottom:32px;
}
.hero-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--fern);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.hero-h1{
  font-size:clamp(44px,5.5vw,74px);font-weight:600;
  color:#fff;line-height:1.05;margin-bottom:28px;
  letter-spacing:-.5px;
}
.hero-h1 em{font-style:italic;color:var(--fern);}
.hero-sub{
  font-size:16px;color:rgba(255,255,255,0.62);line-height:1.8;
  font-weight:300;max-width:500px;margin-bottom:44px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn-solid{
  background:var(--fern);color:var(--forest);
  padding:14px 36px;border:none;border-radius:2px;
  font-family:'Jost',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.5px;cursor:pointer;text-decoration:none;
  transition:background .25s,transform .2s;display:inline-block;
}
.btn-solid:hover{background:var(--mint);transform:translateY(-2px);}
.btn-ghost{
  border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.85);
  padding:14px 36px;border-radius:2px;
  font-family:'Jost',sans-serif;font-size:14px;font-weight:400;
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:border-color .2s,color .2s;
}
.btn-ghost:hover{border-color:var(--fern);color:var(--fern);}
.hero-metrics{
  display:flex;gap:0;margin-top:64px;
  padding-top:40px;border-top:1px solid rgba(255,255,255,0.08);
}
.metric{padding-right:40px;margin-right:40px;border-right:1px solid rgba(255,255,255,0.1);}
.metric:last-child{border-right:none;padding-right:0;margin-right:0;}
.metric-n{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:600;color:var(--fern);line-height:1;}
.metric-l{font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:.5px;margin-top:6px;}
/* Container to match your website's dark green bar */
.bloom-gallery {
    display: flex;
    width: 100%;
    height: 300px; /* Adjust height to fit your layout */
    gap: 10px; /* Space between images */
    margin-top: 50px;
    margin-bottom: 50px; /* Adjust this value (e.g., 40px to 80px) for more or less space */
    padding: 10px 0;
    background: transparent; /* Seamless fit with your green background */
}

.gallery-item {
    flex: 1; /* Makes all 4 images equal width */
    overflow: hidden;
    border-radius: 8px; /* Smooth aesthetic corners */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps the images looking vibrant and proportional */
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: brightness(0.9);
}

/* Interaction: Image pops slightly when the mouse is over it */
.gallery-item:hover img {
    transform: scale(1.08);
    filter: brightness(1.1);
}

/* Mobile Responsive: Stacks them 2x2 or 1x1 on small screens */
@media (max-width: 768px) {
    .bloom-gallery {
        flex-wrap: wrap;
        height: auto;
        
    }
    .gallery-item {
        flex: 1 1 calc(50% - 10px); /* 2 images per row */
        height: 200px;
    }
}
/* DIVIDER */
.leaf-divider{
  padding-top: 60px; /* Adds space inside the top of the icon area */
    background-color: #fdfaf5; /* Matches your light cream background */
  background:var(--forest);
  text-align:center;padding:0;
  overflow:hidden;
  line-height:0;
}
.leaf-divider svg{width:100%;height:60px;}

/* ABOUT STRIP */
.about-strip{
  background:var(--parchment);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.strip-item{
  padding:40px 28px;border-right:1px solid rgba(61,43,31,0.1);
  text-align:center;
}
.strip-item:last-child{border-right:none;}
.strip-icon{font-size:28px;margin-bottom:14px;}
.strip-title{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--forest);margin-bottom:6px;}
.strip-desc{font-size:12px;color:var(--text-mid);line-height:1.6;}

/* ABOUT SECTION on home */
.section{padding:100px 5%;}
.section.alt{background:var(--white);}
.section.dark{background:var(--forest);color:#fff;}
.label{
  display:inline-block;
  font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:600;
  color:var(--sage);margin-bottom:18px;
}
.label.light{color:var(--fern);}
.section-h{
  font-size:clamp(30px,4vw,52px);font-weight:600;
  color:var(--forest);line-height:1.1;margin-bottom:20px;
}
.section-h.light{color:#fff;}
.section-p{font-size:16px;color:var(--text-mid);line-height:1.9;max-width:580px;}
.section-p.light{color:rgba(255,255,255,0.6);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px;}
.four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;}

/* VALUES */
.value-box{
  background:var(--white);border:1px solid rgba(27,67,50,0.08);
  border-radius:3px;padding:32px 24px;
  transition:box-shadow .25s,transform .25s;
}
.value-box:hover{box-shadow:0 12px 40px rgba(27,67,50,0.1);transform:translateY(-3px);}
.val-num{
  font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:400;
  color:var(--mint);line-height:1;margin-bottom:14px;
}
.val-title{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:var(--forest);margin-bottom:8px;}
.val-text{font-size:14px;color:var(--text-mid);line-height:1.7;}

/* VISION/MISSION */
.vm-wrap{
  background:var(--forest);border-radius:4px;padding:60px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
}
.vm-item{}
.vm-label{
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--fern);margin-bottom:16px;font-weight:600;
}
.vm-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;color:#fff;margin-bottom:14px;}
.vm-text{font-size:14px;color:rgba(255,255,255,0.65);line-height:1.8;}
.vm-divider{width:1px;background:rgba(255,255,255,0.1);}

/* SDG */
.sdg-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:32px;
}
.sdg-pill{
  background:rgba(82,183,136,0.12);border:1px solid rgba(82,183,136,0.25);
  color:var(--fern);padding:10px 14px;border-radius:2px;
  font-size:11px;font-weight:500;letter-spacing:.3px;text-align:center;
}

/* ── WHO WE ARE ── */
.about-intro {
  background: #fff;
  padding: 100px 5%;
}

.about-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-text .section-h {
  margin: 12px 0 24px;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.2;
  color: #0d2b1e;
}

.about-text .section-h em {
  font-style: italic;
  color: #2d8a5e;
}

.about-text .section-p {
  font-size: 15px;
  color: #4a5e54;
  line-height: 1.8;
}

.about-text .btn-solid {
  margin-top: 32px;
  display: inline-block;
  align-self: flex-start;
}

/* Image side */
.about-img-wrap {
  position: relative;
}

.about-img-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 80px rgba(13, 43, 30, 0.18);
}

.about-img-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(13, 43, 30, 0.6));
  z-index: 1;
}

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

/* Floating badge */
.about-img-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.badge-num {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.badge-txt {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.5px;
}

/* Decorative offset border */
.about-img-wrap::before {
  content: '';
  position: absolute;
  top: -16px;
  right: -16px;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(45, 138, 94, 0.25);
  border-radius: 20px;
  z-index: -1;
}

/* ── VISION & MISSION ── */
.vm-section {
  background: #0d2b1e;
  padding: 90px 5%;
  position: relative;
  overflow: hidden;
}

.vm-section::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(82, 183, 136, 0.07), transparent 70%);
  pointer-events: none;
}

.vm-section-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 60px;
  align-items: start;
}

.vm-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vm-icon {
  font-size: 22px;
  color: rgba(82, 183, 136, 0.6);
  margin-bottom: 4px;
}

.vm-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #52b788;
  font-weight: 600;
}

.vm-title {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
}

.vm-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.85;
}

/* Vertical separator */
.vm-sep {
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  align-self: stretch;
  margin-top: 8px;
}

/* ── PAGE 2: ABOUT US ── */
.page-hero{
  background:var(--forest);padding:100px 5% 80px;
  position:relative;overflow:hidden;
}
.page-hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 70% 50%,rgba(82,183,136,0.08),transparent 60%);
  pointer-events:none;
}
.page-hero h1{font-size:clamp(40px,5vw,68px);font-weight:600;color:#fff;margin-bottom:16px;line-height:1.05;}
.page-hero p{font-size:15px;color:rgba(255,255,255,0.55);max-width:560px;line-height:1.8;}

/* Responsive 
@media (max-width: 900px) {
  .about-intro-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-img-wrap::before { display: none; }

  .vm-section-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .vm-sep {
    width: 100%;
    height: 1px;
    margin: 40px 0;
  }
}*/
/* SERVICES */
.service-card{
  border:1px solid rgba(27,67,50,0.1);
  border-radius:3px;padding:40px 32px;
  background:var(--white);
  transition:border-color .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.service-card::before{
  content:'';position:absolute;top:0;left:0;
  width:3px;height:0;background:var(--fern);
  transition:height .35s;
}
.service-card:hover::before{height:100%;}
.service-card:hover{border-color:rgba(82,183,136,0.3);box-shadow:0 8px 32px rgba(27,67,50,0.08);}
.srv-icon{font-size:28px;margin-bottom:18px;}
.srv-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--forest);margin-bottom:10px;}
.srv-text{font-size:14px;color:var(--text-mid);line-height:1.75;}

/* WHY US */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px;}
.why-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px;background:rgba(82,183,136,0.06);border-radius:2px;
}
.why-dot{
  width:24px;height:24px;border-radius:50%;background:var(--fern);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:2px;font-size:12px;
}
.why-text{font-size:14px;color:var(--text-mid);line-height:1.65;}
.why-text strong{color:var(--forest);display:block;margin-bottom:3px;font-size:14px;}

/* PROCESS */
.process-wrap{
  background:var(--forest);border-radius:4px;padding:56px;
  margin-top:0;
}
.process-steps{
  display:flex;flex-direction:column;gap:0;
}
.p-step{
  display:flex;gap:24px;align-items:flex-start;
  padding:24px 0;border-bottom:1px solid rgba(255,255,255,0.07);
}
.p-step:last-child{border-bottom:none;}
.p-num{
  font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:600;
  color:var(--fern);opacity:.5;line-height:1;flex-shrink:0;width:40px;
}
.p-title{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:#fff;margin-bottom:4px;}
.p-text{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.65;}

/* TEAM */
.team-card{
  background:var(--white);border:1px solid rgba(27,67,50,0.08);
  border-radius:3px;padding:40px 28px;text-align:center;
  transition:box-shadow .25s,transform .25s;
}
.team-card:hover{box-shadow:0 12px 36px rgba(27,67,50,0.1);transform:translateY(-3px);}
.team-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 20px;
  overflow: hidden;
  border: 3px solid rgba(82, 183, 136, 0.3);
  box-shadow: 0 4px 20px rgba(27, 67, 50, 0.15);
  transition: border-color 0.3s, transform 0.3s;
}

.team-card:hover .team-avatar {
  border-color: var(--fern);
  transform: scale(1.05);
}

.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* shows face, not chest */
  display: block;
}
.team-name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--forest);margin-bottom:4px;}
.team-role{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--sage);font-weight:600;margin-bottom:14px;
}
.team-bio{font-size:14px;color:var(--text-mid);line-height:1.7;}

/* ── PAGE 3: PRODUCTS ── */
.prod-card{
  border-radius:3px;overflow:hidden;
  border:1px solid rgba(27,67,50,0.1);
  transition:transform .25s,box-shadow .25s;
  background:var(--white);
}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(27,67,50,0.12);}
.prod-header{padding:48px 36px 40px;position:relative;}
.prod-header.h1{background:var(--forest);}
.prod-header.h2{background:var(--bark);}
.prod-header.h3{background:linear-gradient(135deg,#111,#1e2e1e);}
.prod-badge{
  display:inline-block;background:rgba(255,255,255,0.12);
  color:rgba(255,255,255,.8);padding:4px 12px;border-radius:20px;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:22px;
}
.prod-name{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;color:#fff;margin-bottom:8px;line-height:1.1;}
.prod-tagline{font-size:13px;color:rgba(255,255,255,.55);font-weight:300;}
.prod-body{padding:32px 36px;}
.prod-features{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.prod-features li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:14px;color:var(--text-mid);line-height:1.55;
}
.prod-features li::before{
  content:'';width:18px;height:18px;flex-shrink:0;margin-top:1px;
  background:var(--mint);border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9l3.5 3.5L14 6' stroke='%231b4332' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:14px;background-repeat:no-repeat;background-position:center;
}
.cs-badge{
  background:#fdf3d0;color:#7a5c00;
  font-size:11px;padding:5px 14px;border-radius:20px;font-weight:500;
  display:inline-block;margin-bottom:16px;
}
.btn-prod{
  display:inline-block;padding:12px 28px;border-radius:2px;
  font-family:'Jost',sans-serif;font-size:13px;font-weight:600;
  text-decoration:none;letter-spacing:.5px;
  transition:transform .2s,opacity .2s;
}
.btn-prod:hover{transform:translateY(-1px);opacity:.9;}
.btn-g{background:var(--fern);color:var(--forest)!important;}
.btn-b{background:var(--bark);color:#fff!important;}
.btn-d{background:#1e2e1e;color:#fff!important;}
.prod-img {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  filter: brightness(0.92) saturate(1.1);
}

.prod-card:hover .prod-img img {
  transform: scale(1.05);
}

.prod-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    transparent 40%,
    rgba(255,255,255,0.06) 100%
  );
  pointer-events: none;
}
/* ORDER SECTION */
.order-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  align-items:start;margin-top:56px;
}
.order-opt{
  display:flex;gap:16px;padding:20px;
  background:var(--parchment);border-radius:3px;margin-bottom:14px;
  border:1px solid rgba(27,67,50,0.06);
}
.oo-icon{
  width:46px;height:46px;background:var(--forest);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.oo-title{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--forest);margin-bottom:4px;}
.oo-text{font-size:13px;color:var(--text-mid);line-height:1.6;}
.wa-btn{
  display:flex;align-items:center;gap:12px;
  background:#25D366;color:#fff;
  padding:15px 28px;border-radius:3px;
  font-weight:600;font-size:14px;text-decoration:none;
  margin-top:20px;width:fit-content;
  transition:filter .2s,transform .2s;
}
.wa-btn:hover{filter:brightness(1.07);transform:translateY(-2px);}

/* FORM */
.inquiry-form{
  background:var(--parchment);border-radius:4px;padding:44px;
  border:1px solid rgba(27,67,50,0.08);
}
.form-h{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--forest);margin-bottom:28px;}
.fg{margin-bottom:16px;}
.fl{display:block;font-size:12px;font-weight:500;color:var(--text-mid);margin-bottom:7px;letter-spacing:.3px;}
.fi,.fs,.ft{
  width:100%;padding:11px 14px;
  border:1.5px solid rgba(27,67,50,0.12);border-radius:2px;
  font-family:'Jost',sans-serif;font-size:13px;color:var(--text);
  background:var(--white);outline:none;
  transition:border-color .2s;
}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--sage);}
.ft{resize:vertical;min-height:90px;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fsub{
  width:100%;background:var(--forest);color:#fff;
  padding:14px;border:none;border-radius:2px;
  font-family:'Jost',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;margin-top:6px;letter-spacing:.5px;
  transition:background .2s,transform .2s;
}
.fsub:hover{background:var(--sage);transform:translateY(-1px);}

/* ── PAGE 4: CONTACT ── */
.contact-layout{
  display:grid;grid-template-columns:5fr 7fr;gap:80px;
  align-items:start;margin-top:56px;
}
.ci{display:flex;align-items:flex-start;gap:16px;margin-bottom:28px;}
.ci-icon{
  width:46px;height:46px;background:rgba(82,183,136,0.12);
  border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
  border:1px solid rgba(82,183,136,0.2);
}
.ci-lbl{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.5px;margin-bottom:4px;}
.ci-val{font-size:14px;color:#fff;}
.ci-val a{color:var(--fern);text-decoration:none;}
.social-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px;}
.soc-link{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,.65);padding:8px 16px;border-radius:2px;
  text-decoration:none;font-size:12px;font-weight:500;
  transition:background .2s,color .2s,border-color .2s;
}
.soc-link:hover{background:rgba(82,183,136,0.12);color:var(--fern);border-color:rgba(82,183,136,0.3);}
.contact-form-box{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:4px;padding:44px;
}
.contact-form-box .fi,
.contact-form-box .ft{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.12);
  color:#fff;
}
.contact-form-box .fi::placeholder,
.contact-form-box .ft::placeholder{color:rgba(255,255,255,.25);}
.contact-form-box .fl{color:rgba(255,255,255,.5);}
.contact-form-box .fsub{background:var(--fern);color:var(--forest);}
.contact-form-box .fsub:hover{background:var(--mint);}
.form-h.light{color:#fff;}

/* MAP PLACEHOLDER */
.map-placeholder{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:3px;padding:32px;text-align:center;margin-top:36px;
}
.map-p{font-size:13px;color:rgba(255,255,255,.4);}

/* FOOTER */
footer {
  background: #0d2b1e;
  padding: 36px 5% 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  border-top: 1px solid rgba(82, 183, 136, 0.1);
}

/* Top row: logo + tagline */
.ft-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.ft-logo-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.ft-tag {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  letter-spacing: 0.3px;
}

/* Divider */
.ft-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}

/* Bottom row: copyright + socials */
.ft-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

/* SOCIAL ICONS */
.social-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.social-link.facebook:hover  { background-color: #1877F2; border-color: #1877F2; }
.social-link.instagram:hover { background: radial-gradient(circle at 30% 110%, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); border-color: transparent; }
.social-link.whatsapp:hover  { background-color: #25D366; border-color: #25D366; }
.social-link.linkedin:hover  { background-color: #0A66C2; border-color: #0A66C2; }

.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}
/* RESPONSIVE */
/* ═══════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 1024px)
═══════════════════════════════════════ */
@media(max-width:1024px){
  .four-col{grid-template-columns:repeat(2,1fr);}
  .three-col{grid-template-columns:repeat(2,1fr);}
  .sdg-grid{grid-template-columns:repeat(2,1fr);}
  .about-strip{grid-template-columns:repeat(2,1fr);}
  .strip-item:nth-child(2){border-right:none;}
  .strip-item:nth-child(1),
  .strip-item:nth-child(2){border-bottom:1px solid rgba(61,43,31,0.1);}
  .vm-section-inner{grid-template-columns:1fr;}
  .vm-sep{width:100%;height:1px;margin:36px 0;}
  .about-intro-inner{grid-template-columns:1fr;gap:48px;}
  .about-img-wrap::before{display:none;}
  .order-wrap{grid-template-columns:1fr;gap:48px;}
  .contact-layout{grid-template-columns:1fr;gap:48px;}
  .two-col{grid-template-columns:1fr;gap:48px;}
  .hero-vine{width:40%;}
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 768px)
═══════════════════════════════════════ */
/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  transition: border-color 0.2s;
}
.nav-hamburger:hover { border-color: var(--fern); }
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE DRAWER ── */
@media(max-width:768px){
  .nav-hamburger { display: flex; }

  .nav-links {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 64px;
    left: 0; right: 0;
    background: rgba(13,43,30,0.98);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(82,183,136,0.15);
    padding: 12px 0 24px;
    gap: 0;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.25s ease;
    z-index: 9998;
    margin-left: 0;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  .nav-links li { display: block !important; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .nav-links a {
    display: block;
    line-height: 1;
    padding: 16px 24px;
    font-size: 15px;
    border-left: none;
  }
  .nav-links .cta-link {
    margin: 12px 24px 0;
    border-radius: 3px;
    text-align: center;
    padding: 14px 24px;
  }
}
@media(max-width:768px){

  /* ── NAV ── */
  nav{padding:0 4%;height:64px;}
  body{padding-top:64px;}
  .nav-links a{padding:0 14px;line-height:64px;font-size:13px;}
  .nav-links li:not(:last-child){display:none;}
  .nav-brand{font-size:17px;}
  .nav-logo img{width:36px;height:36px;}

  /* ── HERO ── */
  .hero{min-height:auto;padding-bottom:60px;}
  .hero-content{padding:56px 4% 40px;}
  .hero-h1{font-size:clamp(34px,8vw,52px);}
  .hero-sub{font-size:14px;margin-bottom:32px;}
  .hero-dots{display:none;}
  .hero-vine{display:none;}
  .hero-actions{flex-direction:column;gap:10px;}
  .btn-solid,.btn-ghost{width:100%;text-align:center;padding:14px 20px;}
  .hero-metrics{
    flex-direction:column;gap:0;margin-top:44px;padding-top:32px;
  }
  .metric{
    border-right:none;padding-right:0;margin-right:0;
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding-bottom:20px;margin-bottom:20px;
  }
  .metric:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0;}
  .metric-n{font-size:30px;}

  /* ── GALLERY ── */
  .bloom-gallery{
    flex-wrap:wrap;height:auto;gap:8px;
    margin-top:32px;margin-bottom:32px;padding:8px 4%;
  }
  .gallery-item{flex:1 1 calc(50% - 8px);height:160px;}

  /* ── DIVIDER ── */
  .leaf-divider svg{height:40px;}

  /* ── ABOUT STRIP ── */
  .about-strip{grid-template-columns:1fr;}
  .strip-item{
    border-right:none;
    border-bottom:1px solid rgba(61,43,31,0.1);
    padding:28px 20px;
  }
  .strip-item:last-child{border-bottom:none;}

  /* ── SECTIONS ── */
  .section{padding:64px 4%;}
  .section-h{font-size:clamp(26px,6vw,36px);}
  .section-p{font-size:14px;}

  /* ── GRIDS ── */
  .two-col{grid-template-columns:1fr;gap:40px;}
  .three-col{grid-template-columns:1fr;gap:20px;margin-top:36px;}
  .four-col{grid-template-columns:1fr 1fr;gap:16px;margin-top:36px;}
  .why-grid{grid-template-columns:1fr;}
  .sdg-grid{grid-template-columns:1fr 1fr;gap:10px;}

  /* ── VALUES ── */
  .value-box{padding:24px 18px;}
  .val-num{font-size:32px;}

  /* ── VISION/MISSION (old wrap) ── */
  .vm-wrap{
    grid-template-columns:1fr;padding:28px;gap:28px;
  }
  .vm-divider{width:100%;height:1px;}

  /* ── VM SECTION (new layout) ── */
  .vm-section{padding:64px 4%;}
  .vm-section-inner{grid-template-columns:1fr;gap:0;}
  .vm-sep{width:100%;height:1px;margin:32px 0;}
  .vm-title{font-size:22px;}
  .vm-text{font-size:13px;}

  /* ── ABOUT INTRO ── */
  .about-intro{padding:64px 4%;}
  .about-intro-inner{grid-template-columns:1fr;gap:36px;}
  .about-img-wrap::before{display:none;}
  .about-img-frame{aspect-ratio:4/3;}
  .about-img-badge{padding:10px 14px;}
  .badge-num{font-size:22px;}
  .badge-txt{font-size:10px;}

  /* ── PAGE HERO ── */
  .page-hero{padding:72px 4% 56px;}
  .page-hero h1{font-size:clamp(30px,7vw,44px);}
  .page-hero p{font-size:13px;}

  /* ── SERVICES ── */
  .service-card{padding:28px 20px;}
  .srv-title{font-size:19px;}
  .srv-text{font-size:13px;}

  /* ── PROCESS ── */
  .process-wrap{padding:28px 20px;}
  .p-step{flex-direction:column;gap:8px;padding:20px 0;}
  .p-num{font-size:24px;width:auto;}
  .p-title{font-size:16px;}
  .p-text{font-size:13px;}

  /* ── TEAM ── */
  .three-col .team-card{padding:28px 18px;}
  .team-avatar{width:80px;height:80px;}
  .team-name{font-size:17px;}
  .team-bio{font-size:13px;}

  /* ── PRODUCTS ── */
  .prod-header{padding:32px 22px 28px;}
  .prod-name{font-size:22px;}
  .prod-body{padding:24px 22px;}
  .prod-features li{font-size:13px;}
  .prod-img{height:160px;}

  /* ── ORDER ── */
  .order-wrap{grid-template-columns:1fr;gap:36px;margin-top:36px;}
  .order-opt{flex-direction:column;gap:12px;padding:16px;}
  .oo-icon{width:38px;height:38px;font-size:17px;}
  .wa-btn{font-size:13px;padding:13px 20px;}

  /* ── INQUIRY FORM ── */
  .inquiry-form{padding:24px 18px;}
  .form-h{font-size:20px;margin-bottom:20px;}
  .fr{grid-template-columns:1fr;}
  .fsub{font-size:13px;}

  /* ── CONTACT ── */
  .contact-layout{grid-template-columns:1fr;gap:36px;margin-top:36px;}
  .contact-form-box{padding:24px 18px;}
  .social-row{gap:8px;}
  .soc-link{font-size:11px;padding:7px 12px;}

  /* ── MAP ── */
  .map-placeholder{padding:22px 16px;}
  .map-p{font-size:12px;}

  /* ── FOOTER ── */
  footer{padding:28px 4% 18px;}
  .ft-bottom{flex-direction:column;gap:14px;align-items:center;text-align:center;}
  .ft-tag{font-size:11px;text-align:center;}
  .social-footer{gap:8px;}
  .social-link{width:34px;height:34px;}
  .social-link img{width:16px;height:16px;}
}

/* ═══════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤ 420px)
═══════════════════════════════════════ */
@media(max-width:420px){
  .four-col{grid-template-columns:1fr;}
  .sdg-grid{grid-template-columns:1fr;}
  .gallery-item{flex:1 1 100%;height:180px;}
  .hero-eyebrow{font-size:9px;letter-spacing:1.5px;padding:5px 12px;}
  .hero-h1{font-size:clamp(28px,8vw,38px);}
  .metric-n{font-size:26px;}
  .section-h{font-size:clamp(22px,6vw,30px);}
  .vm-wrap{padding:20px;}
  .process-wrap{padding:20px 14px;}
  nav{padding:0 3%;}
  .nav-brand{font-size:15px;}
  .btn-solid,.btn-ghost{font-size:13px;padding:12px 16px;}
  .inquiry-form,.contact-form-box{padding:18px 14px;}
  .order-opt{padding:14px;}
}
/* ── FIX CARD OVERFLOW ON MOBILE ── */
@media(max-width:768px){
  .three-col {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
    width: 100%;
  }
  .service-card, .value-box, .team-card {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Prevent any section from bleeding outside viewport */
  .section, .page-hero, .about-intro, .vm-section {
    overflow-x: hidden;
  }
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}
@media(max-width:768px){
  /* Force ALL grids to single column on mobile */
  .two-col,
  .three-col,
  .four-col,
  .why-grid,
  .sdg-grid,
  .about-strip,
  .vm-wrap,
  .vm-section-inner,
  .order-wrap,
  .contact-layout,
  .about-intro-inner,
  .fr {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Specifically fix the science/why-it-works section cards */
  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
    margin-top: 24px;
  }

  .why-item {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
  }

  /* Fix any inline grid or flex that might be causing 2-col */
  .value-box,
  .service-card,
  .why-item,
  .strip-item,
  .team-card,
  .prod-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Prevent horizontal scroll bleed */
  * {
    max-width: 100%;
  }

  section, .section, .page, .page-hero {
    overflow-x: hidden;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
  }
}
/* ── SCIENCE GRID (products page) ── */
.science-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:2px;background:rgba(255,255,255,0.05);
  border-radius:3px;overflow:hidden;
}
.science-item{
  padding:32px 24px;
  background:rgba(255,255,255,0.03);
  border-left:1px solid rgba(255,255,255,0.06);
}
.science-item:first-child{border-left:none;}

/* ── CONTACT INFO GRID ── */
.contact-info-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}

@media(max-width:768px){
  .science-grid{grid-template-columns:1fr 1fr;}
  .science-item{border-left:none;border-bottom:1px solid rgba(255,255,255,0.06);}
  .science-item:nth-child(odd){border-right:1px solid rgba(255,255,255,0.06);}
  .contact-info-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .science-grid{grid-template-columns:1fr;}
  .science-item{border-right:none;}
}

/* CONTACT SOCIALS */
.contact-socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}