/* ---------- variables ---------- */
:root{
  --soil: #2B1B12;        /* deepest brown — headings */
  --soil-mid: #5C4433;    /* mid brown — body copy on light sections */
  --soil-soft: #8A7364;   /* soft brown — captions, muted labels */
  --linen: #FFFFFF;       /* white — page/card backgrounds and light text on dark photos */
  --sage: #6C7A57;
  --sage-dark: #4F5F45;
  --wheat: #C9A24B;       /* gold accent — tags, eyebrows, dividers */
  --rust: #7A3D26;
  --smoke: #FAF8F2;
}

/* ---------- cleaning page: blue theme ----------
   Scoped to body.cleaning-page only, so the rest of the site
   (farming, livestock, camp, home) keeps its original brown/gold look. */
body.cleaning-page{
  --soil: #0B2A4A;        /* deep blue — replaces dark brown headings/backgrounds */
  --soil-mid: #2C4A66;    /* mid blue — body copy */
  --soil-soft: #7C93A8;   /* soft blue — captions, muted labels */
  --sage: #2E6DA4;
  --sage-dark: #1F4E7A;
  --wheat: #2E86DE;       /* blue accent — replaces gold tags/eyebrows/dividers */
  --rust: #1B4F72;
  --smoke: #F0F6FC;       /* light blue page background */
}

/* ---------- farming page: green theme ----------
   Scoped to body.farming-page only — camp and livestock stay brown/gold. */
body.farming-page{
  --soil: #16331F;        /* deep green — replaces dark brown headings/backgrounds */
  --soil-mid: #2E4F32;    /* mid green — body copy */
  --soil-soft: #7C9A7E;   /* soft green — captions, muted labels */
  --sage: #4C7A44;
  --sage-dark: #35592F;
  --wheat: #5FA050;       /* green accent — replaces gold tags/eyebrows/dividers */
  --rust: #2E5C2A;
  --smoke: #F2F8F1;       /* light green page background */
}
*{ box-sizing: border-box; }
body{
  margin: 0;
  background: var(--smoke);
  color: var(--soil-mid);
  font-family: 'Archivo', sans-serif;
  line-height: 1.6;
}
h1, h2, h3, h4{
  font-family: 'Fraunces', serif;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--soil);
}
a{ color: inherit; text-decoration: none; }
.wrap{ max-width: 1100px; margin: 0 auto; padding: 0 24px; }
section{ padding: 80px 0; }

/* headings default to soil brown; force back to white on the dark photo sections */
.hero h1, .hero1 h1, .hero2 h1, .hero3 h1, .hero4 h1,
#services h2, #services1 h2, #services2 h2, #services3 h2,
.approach-dark h2, .approach-dark h4{
  color: var(--linen);
}

/* ---------- buttons ---------- */
.btn{
  display: inline-block;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.btn-gold{ background: var(--wheat); color: var(--soil); }
.btn-dark{ background: var(--soil); color: var(--linen); }
.btn-outline{ border: 1px solid var(--linen); color: var(--linen); }

/* ---------- header ---------- */
header{
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: var(--smoke);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}
.brand{ 
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Fraunces', serif; 
    font-weight: 700; 
    font-size: 20px; 
}
.navlinks{ display: flex; gap: 30px; }
.navlinks a{ font-size: 14px; font-weight: 500; }

/* ---------- search bar (works on every page) ---------- */
.flex{ display: flex; align-items: center; }
.search-bar{
  display: flex;
  align-items: center;
  background: var(--linen);
  border: 1px solid rgba(43,27,18,.15);
  border-radius: 999px;
  overflow: hidden;
  height: 40px;
  width: 150px;
  transition: width 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.search-bar:focus-within{
  width: 230px;
  border-color: var(--soil);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.search-bar input{
  border: none;
  outline: none;
  background: transparent;
  padding: 0 14px;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  width: 100%;
  color: var(--soil);
}
.search-bar button{
  border: none;
  background: var(--soil);
  color: var(--linen);
  height: 100%;
  width: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}
.search-bar button:hover{ background: var(--rust); }

@media (max-width: 700px){
  .search-bar{ width: 110px; }
  .search-bar:focus-within{ width: 180px; }
}

/* ---------- scroll-in slide animations (site-wide) ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ---------- optional auto-sliding gallery ---------- */
.slider{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.slider-track{
  display: flex;
  transition: transform 0.6s ease;
}
.slider-track > *{
  flex: 0 0 100%;
}
.slider-prev, .slider-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(38,33,27,.55);
  color: var(--linen);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  z-index: 2;
  transition: background 0.2s ease;
}
.slider-prev:hover, .slider-next:hover{ background: var(--soil); }
.slider-prev{ left: 12px; }
.slider-next{ right: 12px; }


.brand-logo {
  height: 90px;
  width: 90px;
  object-fit: contain;
  border-radius: 50%;
  display: inline-block;
}

/* ---------- hero ---------- */
.hero{
  background: 
    linear-gradient(rgba(59, 45, 35, 0.7), rgba(59, 45, 35, 0.7)),
    url('../images/BROWN.jpg') center/cover no-repeat;
  color: var(--linen);
  padding: 110px 0;
}

.hero1{
  background: 
    linear-gradient(rgba(59, 45, 35, 0.7), rgba(59, 45, 35, 0.7)),
    url('../images/camm.webp') center/cover no-repeat;
  color: var(--linen);
  padding: 110px 0;
}

.hero2{
  background: 
    linear-gradient(rgba(59, 45, 35, 0.7), rgba(59, 45, 35, 0.7)),
    url('../images/cleeen.jpg') center/cover no-repeat;
  color: var(--linen);
  padding: 110px 0;
}

.hero3{
  background: 
    linear-gradient(rgba(59, 45, 35, 0.7), rgba(59, 45, 35, 0.7)),
    url('../images/croop.jpg') center/cover no-repeat;
  color: var(--linen);
  padding: 110px 0;
}

.hero4{
  background: 
    url('../images/Bronsmara Cattle.jpg') center/cover no-repeat;
  color: var(--linen);
  padding: 110px 0;
  background-attachment: scroll;
}

.hero4 .wrap{
  max-width: 640px;
  margin-left: 0;
  margin-right: auto;
}

/* ---------- photo grid ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 40px;
}

.photo-grid-item {
  position: relative;
  height: 240px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-grid-item:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}

/* dark gradient so captions stay readable */
.photo-grid-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.65) 100%);
}

.photo-grid-item span {
  position: relative;
  z-index: 1;
  color: white;
  font-weight: 600;
  font-size: 15px;
  padding: 18px;
}

/* photo-grid galleries now use flip-cards so each image can flip
   over and show info about the picture (e.g. the Green Pepper card) */
.photo-grid .flip-card {
  height: 240px;
}

/* responsive */
@media (max-width: 900px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ---------- second / bottom back button ---------- */
.back-bottom {
  display: flex;
  justify-content: center;
  padding: 36px 0 8px;
}




.eyebrow{
  display: block;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wheat);
  margin-bottom: 20px;
}
.hero h1{
  font-size: clamp(32px, 5vw, 58px);
  max-width: 780px;
}
.hero p{
  max-width: 500px;
  color: rgba(255,255,255,.85);
}
.hero-actions{ margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- tags (small overline labels) ---------- */
.tag{
  display: block;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wheat);
  margin-bottom: 14px;
}
.tag-light{ color: var(--wheat); }
h2.light{ color: var(--linen); }

/* ---------- twin service panels ---------- */
#services {
  background: 
    linear-gradient(rgba(43, 27, 18, 0.75), rgba(43, 27, 18, 0.75)),
    url('../images/FnOQGg.jpg') center/cover no-repeat;
  color: var(--linen);
  padding: 110px 0;
}

#services1 {
  background: 
    linear-gradient(rgba(43, 27, 18, 0.75), rgba(43, 27, 18, 0.75)),
    url('../images/wheat.jpg') center/cover no-repeat;
  color: var(--linen);
  padding: 110px 0;
}

#services2 {
  background: var(--soil);
  color: var(--linen);
  padding: 110px 0;
}

#services3{
  background: 
    linear-gradient(rgba(43, 27, 18, 0.75), rgba(43, 27, 18, 0.75)),
    url('../images/spry.webp') center/cover no-repeat;
  color: var(--linen);
  padding: 110px 0;
}

.service-icon {
  height: 150px;
  width: 150px;
  object-fit: contain;
  border-radius: 50%;
  margin-bottom: 16px;
  display: block;
}

.twin{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.panel{
  background: var(--linen);
  padding: 36px;
  border-radius: 6px;
  border-top: 4px solid var(--wheat);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.panel-sage{ border-top-color: var(--sage); }
.panel-wheat{ border-top-color: var(--wheat); }
.panel h3{ color: var(--soil); }
.panel p{ color: var(--soil-mid); }
.panel ul{ padding-left: 18px; margin-top: 20px; color: var(--soil-mid); }
.panel li{ margin-bottom: 8px; font-size: 14.5px; color: var(--soil-mid); }

/* ---------- approach (default = light band) ---------- */
.approach{ background: var(--linen); color: var(--soil-mid); }
.steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.step h4{ color: var(--soil); font-size: 18px; }
.step p{ font-size: 14px; color: var(--soil-soft); margin: 0; }

/* dark band variant, used for the occasional darker section for rhythm */
.approach-dark{ background: var(--soil); color: var(--linen); }
.approach-dark .step h4{ color: var(--wheat); }
.approach-dark .step p{ color: rgba(255,255,255,.72); }
.approach-dark p{ color: rgba(255,255,255,.85); }

/* step headings inside the dark photo sections (#services / #services1) were
   defaulting to dark brown, which is nearly invisible over a dark photo */
#services .step h4, #services1 .step h4{ color: var(--wheat); }
#services .step p, #services1 .step p{ color: rgba(255,255,255,.85); }

#work {
  position: relative;
  background: var(--linen);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 48px;
}

/* ---------- gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 220px;
  gap: 14px;
  margin-top: 40px;
}

.g-item {
  position: relative;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* dark gradient at the bottom of every card so text stays legible */
.g-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%);
  z-index: 0;
}

.g-item span,
.g-item {
  z-index: 1;
}

.g-item:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}

/* asymmetric bento sizing — first item spans two rows */
.g1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.g2 { grid-column: 3 / 4; grid-row: 1 / 2; }
.g3 { grid-column: 4 / 5; grid-row: 1 / 2; }
.g4 { grid-column: 3 / 5; grid-row: 2 / 3; }

/* responsive: stack on smaller screens */
@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 200px);
  }
  .g1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .g2 { grid-column: 1 / 2; grid-row: 2 / 3; }
  .g3 { grid-column: 2 / 3; grid-row: 2 / 3; }
  .g4 { grid-column: 1 / 3; grid-row: 3 / 4; }
}

@media (max-width: 560px) {
  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 200px);
  }
  .g1, .g2, .g3, .g4 { grid-column: 1 / 2; }
}


/* ---------- contact ---------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  margin-top: 40px;
}
.field{ margin-bottom: 18px; }
.field label{
  display: block;
  font-size: 12.5px;
  text-transform: uppercase;
  color: rgba(38,33,27,.6);
  margin-bottom: 6px;
}
.field input, .field textarea, .field select{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
}
#sent-msg{ display: none; color: var(--sage); font-size: 14px; margin-top: 12px; }

.info-card{
  background: var(--soil);
  color: var(--linen);
  padding: 34px;
  border-radius: 6px;
}
.info-card p{ font-size: 14px; margin: 0 0 18px; }
.info-card strong{ color: var(--wheat); font-size: 12px; text-transform: uppercase; }

/* ---------- video header ---------- */
.video-hero{
  position: relative;
  overflow: hidden;
}
.video-hero .hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.video-hero .hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(43,27,18,.72), rgba(43,27,18,.72));
  z-index: 1;
}
.video-hero .wrap{
  position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce){
  .video-hero .hero-video{ display: none; }
}

/* ---------- process step images (How We Work) ---------- */
.step-img{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  border: 2px solid var(--wheat);
}
.approach-dark .step-img{ border-color: var(--wheat); }

/* ---------- flip cards (gallery) ---------- */
.flip-card{
  position: relative;
  perspective: 1200px;
  height: 100%;
}
.flip-card-inner{
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-card-inner,
.flip-card:hover .flip-card-inner{
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}
.flip-card-front{
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.flip-card-front::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%);
}
.flip-card-front span{ position: relative; z-index: 1; }
.flip-card-back{
  background: var(--soil);
  color: var(--linen);
  transform: rotateY(180deg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.flip-card-back h4{
  color: var(--wheat);
  font-size: 16px;
  margin: 0 0 10px;
}
.flip-card-back p{
  font-size: 13.5px;
  color: rgba(255,255,255,.8);
  margin: 0 0 14px;
}
.flip-card-back a{
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wheat);
  border-bottom: 1px solid var(--wheat);
  align-self: flex-start;
}
.flip-hint{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  background: rgba(0,0,0,.45);
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ---------- footer ---------- */
footer{
  background: var(--soil);
  color: rgba(241,234,218,.6);
  padding: 30px 0;
  font-size: 13px;
  text-align: center;
}

/* ---------- responsive ---------- */
@media (max-width: 800px){
  .navlinks{ display: none; }
  .twin, .contact-grid{ grid-template-columns: 1fr; }
  .steps, .gallery{ grid-template-columns: 1fr 1fr; }
}