:root {
--ridge-blue:   #2d4a5e;
--ridge-mid:    #4a7fa0;
--valley-green: #3d5e3a;
--sage:         #7a9e74;
--berry:        #7a3650;
--blueberry:    #3d5478;
--gold:         #b99c4c;
--cream:        #f2ead8;
--warm-white:   #fdfaf4;
--bark:         #5c4c3a;
--mist:         #dde8ef;
--text-dark:    #2a2018;
--text-mid:     #4a3e30;
--text-light:   #7a6e5e;
--burlap-dark:  #c8b49a;
--announce-red:  #980101;

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



/*#########################################################################################*/



/* ------------- BURLAP BODY BACKGROUND ------------- */
body {
font-family: 'Jost', sans-serif;
color: var(--text-dark);
overflow-x: hidden;
/* SVG burlap weave pattern */
background-color: #c8b49a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23c8b49a'/%3E%3Crect x='0' y='0' width='4' height='2' fill='%23b8a488' opacity='0.6'/%3E%3Crect x='4' y='4' width='4' height='2' fill='%23b8a488' opacity='0.6'/%3E%3Crect x='0' y='4' width='2' height='4' fill='%23c0aa90' opacity='0.5'/%3E%3Crect x='4' y='0' width='2' height='4' fill='%23c0aa90' opacity='0.5'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23d4bc9e' opacity='0.4'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23d4bc9e' opacity='0.4'/%3E%3C/svg%3E");
}

/* All content sections sit on top of the burlap */
section, nav, footer { position: relative; }



/*#########################################################################################*/



/* ------------- NAV ------------- */
nav {
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 100;
  
  /* Hardcoded dark look from your scrolled state */
  background: rgba(20, 30, 22, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  
  /* Adjusted padding to match the tight, sleek scrolled size permanently */
  padding: 1rem 2.5rem;
  
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  transition: all 0.4s ease;
}

.nav-logo {
display: flex; align-items: center; gap: 0.75rem;
text-decoration: none;
}
.nav-logo img {
width: 42px; height: 42px; object-fit: contain;
background: rgba(255,255,255,0.9); border-radius: 50%; padding: 4px;
}
.nav-logo-text {
font-family: 'Cormorant Garamond', serif;
font-size: 1.35rem; font-weight: 300; color: #fff; letter-spacing: 0.05em;
}
.nav-logo-text span { color: var(--gold); }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
color: rgba(255,255,255,0.75); text-decoration: none;
font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold); }




/*#########################################################################################*/



/* ------------- NAV VISIT BUTTON ------------- */
.nav-visit-btn {
  display: inline-block;
  background: var(--gold);
  color: #fff !important; /* Forces text to remain white over standard nav styles */
  border-radius: 8px;    /* Rounded pill style */
  padding: 0.5rem 1.4rem;  /* Slightly tighter padding fits beautifully in a header */
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}

/* Typography styles inside the button */
.nav-visit-btn {
  font-family: 'Jost', sans-serif; /* Clean sans-serif matches your primary buttons */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Elegant script styling for the "click here" subtitle */
.nav-visit-btn em {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  text-transform: lowercase; /* Makes the script feel soft and inviting */
  font-weight: 400;
  opacity: 0.9;
}

/* Hover effects */
.nav-visit-btn:hover {
  background: #b4acfa; /* Lighter gold accent */
  text-decoration-color: darkblue;
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.nav-visit-btn:hover,
.nav-visit-btn:hover a {
  color: darkblue !important; /* Forces the text itself to change to darkblue on hover */
}



/*#########################################################################################*/



/* ------------- NAV SOCIALS ------------- */
.nav-socials {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  margin-left: 5rem; /* Creates clean breathing room between the logo text and the icons */
  margin-right: auto;  /* CRITICAL: Pushes the entire .nav-links menu to the far right */
}

.nav-socials a {
  font-size: 1.1rem;
  color: rgb(242, 240, 240); /* Starts slightly muted to match your design style */
  transition: color 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Control the exact size of your logo images */
.social-icon-img {
  width: 50px;        /* Sleek header size; adjust up or down if preferred */
  height: 50px;
  object-fit: contain;
}

.nav-socials a:hover {
  color: var(--gold);      /* Lights up gold on hover, just like your menu items */
  transform: scale(1.1);   /* Subtle visual pop */
}



/*#########################################################################################*/



/*------------- HERO ------------- */
.hero {
position: relative;
min-height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}

.hero-bg {
position: absolute;
inset: 0;
background-image: url(../images/lv_farm_wideshot.jpg);
background-size: cover;
background-position: center 40%;
filter: brightness(1) saturate(1.2);
}

.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
    to bottom,
    rgba(20,35,25,0.55) 0%,
    rgba(20,35,25,0.35) 45%,
    rgba(20,35,25,0.72) 100%
);
}

.hero-content {
position: relative;
z-index: 10;
text-align: center;
padding: 1rem;
animation: fadeUp 1.1s ease-out both;
}

.hero-logo {
width: 260px;
height: 260px;
object-fit: contain;
background: rgba(255,255,255,0.92);
border-radius: 50%;
padding: 5px;
margin: -2rem auto 3rem;
display: block;
box-shadow: 0 8px 40px rgba(0,0,0,0.4);
animation: fadeUp 1.1s 0.15s ease-out both;
}

@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
font-size: 1rem;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--gold);
margin: 7rem 0 5rem 0;
animation: fadeUp 1.1s 0.25s ease-out both;
}

.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1rem, 3.2vw, 3rem);
font-weight: 300;
color: #fff;
line-height: 0.92;
letter-spacing: -0.01em;
animation: fadeUp 1.1s 0.35s ease-out both;
}

.hero-title em { font-style: italic; color: var(--gold); }

.hero-subtitle {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1.1rem, 2.5vw, 1.65rem);
color: rgba(247, 243, 243, 0.942);
margin: 1.4rem 0 4rem;
animation: fadeUp 1.1s 0.45s ease-out both;
}

.hero-meta {
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 2.2rem;
animation: fadeUp 1.1s 0.55s ease-out both;
}

.hero-ctas {
display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
animation: fadeUp 1.1s 0.65s ease-out both;
}



/*#########################################################################################*/



/* ------------- PICKING STATUS BANNER -------------  */
.picking-status-banner {
  background: var(--announce-red);
  color: var(--warm-white);
  padding: 1.5rem 1.8rem; /* Reduced padding so it doesn't crush the content */
  font-family: 'Jost', sans-serif;
  
  /* FORCE CENTERING & LINEAR FLOW */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.status-message {
  font-size: 1.1rem; /* Marginally smaller to prevent breaking on mid-sized screens */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
  
  /* Keeps the text from hugging the edges of the browser window */
  max-width: 1200px; 
}

/* Accentuated "Stay Updated" Badge */
.status-badge-live {
  font-size: 1.5rem; /* Scaled slightly down so it complements the text instead of breaking it */
  font-weight: 800;
  color: yellow;
  margin-right: 0.75rem;
  padding-bottom: 2rem;

  
  /* Changed to inline so it flows like a normal word in the sentence */
  display: inline; 
}

/* Custom Social Links Styling */
.picking-status-banner .social-link {
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: all 0.2s ease;
  
  /* FORCE INLINE FLOW: This stops them from overlapping or sitting behind text */
  display: inline; 
  padding: 0 5px; 
}

.picking-status-banner .social-link.insta {
  color: var(--sage);
}

.picking-status-banner .social-link.fb {
  color: blue;
}

/* Hover state */
.picking-status-banner .social-link:hover {
  color: var(--text-dark) !important;
  background-color: var(--warm-white);
  text-decoration: none;
  border-radius: 4px;
}

/* RESPONSIVE FIX: Keeps it from looking squished on mobile phones */
@media (max-width: 768px) {
  .picking-status-banner {
    padding: 1.25rem 1rem;
  }
  .status-message {
    font-size: 0.95rem;
  }
  .status-badge-live {
    font-size: 1.1rem;
    display: block; /* Stacks the badge neatly on top of the text ONLY on mobile */
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}


/*#########################################################################################*/



/* ------------- FLOATING CALENDAR ON Z-AXIS -------------  */
.hero-floating-cal {
  position: absolute;
  z-index: 20; /* Pushes it above the overlay and background */
  right: 3rem;  /* Aligns it to the left side of the screen */
  top: 5.5rem; /* Pins it near the top of the hero section */
  width: 315px; /* Keeps it contained so it doesn't bleed into the center text */
  animation: fadeUp 1.1s 0.6s ease-out both;
  
}

.compact-cal-card {
  background: #4086af; 
  padding: 8px;
  border-radius: 12px;
  opacity: 85%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}



/*#########################################################################################*/



/* ------------- MOBILE SAFETY CHECK -------------  */
@media (max-width: 1024px) {
  /* On tablets and phones, a floating absolute element will overlap text.
     This hides the absolute float and snaps it neatly below the hero instead */
  .hero-floating-cal {
    position: relative;
    left: unset;
    bottom: unset;
    width: 90%;
    max-width: 450px;
    margin: 2rem auto 0;
    z-index: 10;
  }
}

@media (max-width: 480px) {
  /* On mobile phones, an absolute floating button on the right cramp layouts. 
     This cleanly snaps it back to the visual center under the main text block */
  .hero-visit-btn {
    position: relative;
    top: unset;
    right: unset;
    margin: 2rem auto 0;
    display: inline-block;
  }
}



/*#########################################################################################*/




/* ------------- BUTTON -------------*/ 
.btn-primary {
background: var(--gold); color: var(--text-dark); border: none;
padding: 0.88rem 2.2rem;
font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none;
transition: all 0.25s;
}
.btn-primary:hover { background: #dbbe60; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }

.btn-outline {
background: transparent; color: #fff;
border: 1.5px solid rgba(255,255,255,0.5);
padding: 0.88rem 2.2rem;
font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 400;
letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none;
transition: all 0.25s;
}
.btn-outline:hover { border-color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.1); }

.scroll-indicator {
position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
color: rgba(255,255,255,0.38); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
animation: fadeUp 1.1s 1s ease-out both;
}
.scroll-line {
width: 1px; height: 42px;
background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%,100% { opacity:0.3; } 50% { opacity:1; }
}



/*#########################################################################################*/



/*------------- DROPDOWN MENU ITEM -------------*/
.dropdown {
  position: relative;
}

/* Hide the dropdown menu by default and position it */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* Spawns it directly below the parent link */
  left: 0;
  background-color: #3b2525; /* Change to match your nav background */
  list-style: none;
  padding: 10px;
  min-width: 160px;
  z-index: 1000;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.1); /* Adds a nice subtle shadow */
}

/* Make dropdown items stack vertically */
.dropdown-menu li {
  display: block;
  margin: 5px 0;
}

/* Show the menu when hovering over the parent list item */
.dropdown:hover .dropdown-menu {
  display: block;
}



/*#########################################################################################*/



/* ------------- SECTION WRAPPERS (white panels on burlap) ------------- */
.panel {
background: var(--warm-white);
border-top: 3px solid rgba(200,180,154,0.4);
border-bottom: 3px solid rgba(200,180,154,0.4);
}

.panel-cream { background: var(--cream); }

.panel-dark {
background: var(--ridge-blue);
border-color: rgba(45,74,94,0.5);
/*min-height: 100vh;*/
}

.panel-forest {
background: linear-gradient(170deg, #1e3628 0%, #2d4a3e 50%, #2d4a5e 100%);
border-color: rgba(30,54,40,0.5);
}

.panel-green { background: var(--valley-green); }




/* Burlap strip between panels */

.burlap-strip {
height: 28px;
background-color: #c8b49a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23c8b49a'/%3E%3Crect x='0' y='0' width='4' height='2' fill='%23b8a488' opacity='0.6'/%3E%3Crect x='4' y='4' width='4' height='2' fill='%23b8a488' opacity='0.6'/%3E%3Crect x='0' y='4' width='2' height='4' fill='%23c0aa90' opacity='0.5'/%3E%3Crect x='4' y='0' width='2' height='4' fill='%23c0aa90' opacity='0.5'/%3E%3C/svg%3E");
border-top: 2px solid rgba(160,136,108,0.5);
border-bottom: 2px solid rgba(160,136,108,0.5);
}




/* Section elements*/

.section-inner {
max-width: 1200px; margin: 0 auto; padding: 3rem 2rem;
}

.section-label {
font-size: 0.71rem; letter-spacing: 0.35em; text-transform: uppercase;
color: var(--sage); margin-bottom: 1rem;
display: flex; align-items: center; gap: 1rem;
}
.section-label::before {
content: ''; display: block; width: 2rem; height: 1px; background: var(--sage);
}
.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.4rem, 5vw, 4rem);
font-weight: 300; line-height: 1.1;
color: var(--text-dark); margin-bottom: 1.5rem;
}
.section-title em { font-style: italic; color: var(--valley-green); }
.section-body {
font-size: 1.04rem; line-height: 1.82; color: var(--text-mid); max-width: 680px;
}



/*########################################################################################################/*

/* ── SCROLLING FILMSTRIP ── */

.filmstrip-container {
  overflow: hidden;
  background: #142319; /* Dark farm-green backing for any small gaps */
  width: 100%;
  padding: 1.5rem 0; /* Creates an elegant padding frame above/below the images */
  display: flex;
  align-items: center;
}

.filmstrip-track {
  display: flex;
  width: calc(250px * 28); /* Width of 1 slide multiplied by total slides (14 original + 14 copies) */
  animation: scrollFilmstrip 120s linear infinite; /* Adjust '45s' higher for slower, lower for faster */
}

.filmstrip-slide {
  width: 275px; /* Adjust this to make your filmstrip images larger or smaller */
  height: auto;
  padding: 0 10px; /* Clean gap spacing between the photos */
  flex-shrink: 0;
}

.filmstrip-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px; /* Softly rounded image corners to match the calendar style */
  box-shadow: 0 4px 15px rgba(0,0,0,0.25); /* Subtle depth lifting images off the dark track */
}

/* Pause the scrolling animation when a user hovers their mouse over the photos 
.filmstrip-container:hover .filmstrip-track {
  animation-play-state: paused;
}
*/

/* ── FILMSTRIP ANIMATION ── */
@keyframes scrollFilmstrip {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Shifts exactly half the track width (the width of the first 14 images) before looping seamlessly */
    transform: translateX(calc(-250px * 14)); 
  }
}






/* ── ABOUT ── */
.about-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.about-photo {
position:relative;
}
.about-photo img.farm-img {
width: 100%; 
aspect-ratio: 8.4375/11.5625;
object-fit: cover;
display: block;
box-shadow: 0 12px 48px rgba(0,0,0,0.25);
}

.about-photo::after {
content: ''; position: absolute;
inset: 12px; border: 1px solid rgba(201,168,76,0.35);
pointer-events: none;
}


.pillars {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.5rem;
}
.pillar {
padding: 1.4rem; border-left: 3px solid var(--sage);
background: var(--cream);
}
.pillar h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.12rem; font-weight: 600; color: var(--valley-green); margin-bottom: 0.45rem;
}
.pillar p { font-size: 0.88rem; line-height: 1.62; color: var(--text-mid); }



/*#################################################################################################################*/

/* ── SIGN BAND ── */
.sign-band {
position: relative; overflow: hidden; height: 145px;
}
.sign-band-bg {
position: absolute; 
inset: 0;
background-image: url("../images/lv3_berries.jpg");
background-size: cover; background-position: center 35%;
filter: brightness(0.62) saturate(0.85);
}

.sign-band-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(30,54,40,0.8) 0%, rgba(30,54,40,0.3) 50%, rgba(30,54,40,0.6) 100%);
display: flex; align-items: center; justify-content: center;
}
.sign-band-text {
text-align: center; color: #fff; position: relative; z-index: 1;
}
.sign-band-text h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 300; letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.sign-band-text p {
font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--gold);
}



/* ── SIGN BAND ALT ── */

.sign-band2 {
position: relative; overflow: hidden; height: 145px;
}
.sign-band2-bg {
position: absolute; 
inset: 0;
background-image: url("../images/narrow_farm2.jpg");
background-size: cover; background-position: center 35%;
filter: brightness(0.62) saturate(0.85);
}

.sign-band2-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(30,54,40,0.8) 0%, rgba(30,54,40,0.3) 50%, rgba(30,54,40,0.6) 100%);
display: flex; align-items: center; justify-content: center;
}
.sign-band2-text {
text-align: center; color: #fff; position: relative; z-index: 1;
}
.sign-band2-text h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 300; letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.sign-band2-text p {
font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--gold);
}



/*#######################################################################################################################*/

/* DISCOVER FEATURES */

/* 1. FIX THE OVERSIZED HOME PAGE BLOCKS */
/* Remove min-height: 100vh from the general .panel-dark wrapper if you put it there, 
   and instead apply it strictly to your dedicated contact section: */
#Contact {
    min-height: calc(100vh - 80px);
}

/* 2. THE NEW FEATURE GRID DESIGN */
.homepage-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 20px;
  font-family: 'Jost', sans-serif;
}

.feature-card {
  background-color: rgb(252, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 6px;
  box-shadow: 0 2px 15px rgba(108, 107, 107, 0.456);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Keeps buttons aligned neatly at the bottom */
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--sage); /* Or your accent color */
}

/* Card typography matching your design layout */
.card-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:rgba(0, 0, 0, 0.604);
  margin-bottom: 10px;
}

.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: #150338;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 15px;
}

.card-body {
  color: #9e5656;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 25px;
}

.card-link {
  background-color: var(--sage);
  color: #111;
  border: 1px solid var(--sage);
  border-radius: 8px;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
  align-self: flex-start;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  box-shadow: 0 1.5px 4.5px 0 #14203e;
}

.card-link:hover {
  
  background-color: #023313a3;
  color:  #f7f4f4;
}


.features-logo {
width: 125px;
height: 125px;
object-fit: contain;
background: rgba(255,255,255,0.92);
border-radius: 50%;
padding: 5px;
vertical-align: middle;
display:inline-flex;
box-shadow: 0 8px 40px rgba(0,0,0,0.4);
margin-left: 1.8rem;
margin-top: 1rem;


}













/* ── PHILOSOPHY (dark panel) ── */
.philosophy-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 3rem;
}

.philosophy-card {
padding: 2.3rem 1.8rem;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.11);
position: relative; transition: all 0.32s;
color:#3d5478;
}
.philosophy-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); }
.philosophy-card::before {
content: ''; position: absolute; top:0; left:0; right:0; height: 3px;
background:#141c32; transform: scaleX(0); transform-origin: left; transition: transform 0.32s;
}
.philosophy-card:hover::before { transform: scaleX(1); }

.card-icon { font-size: 2rem; margin-bottom: 1.1rem; }

.philosophy-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.45rem; font-weight: 400; margin-bottom: 0.9rem; color: #2f2459;
}
.philosophy-card p { 
  font-size: 0.88rem; 
  line-height: 1.75; 
  color: rgba(68, 58, 117, 0.68); 
}


.panel-dark .section-title { color: #fff; }
.panel-dark .section-title em { color: var(--gold); }
.panel-dark .section-label { color: rgba(201,168,76,0.8); }
.panel-dark .section-label::before { background: rgba(201,168,76,0.5); }
.panel-dark .section-body { color: rgba(255,255,255,0.68); }





/* ── AGRI-SCIENCE ── */
.science-layout {
display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; align-items: start;
}
.sticky-sidebar { position: sticky; top: 8rem; }
.science-items { display: flex; flex-direction: column; gap: 2.4rem; }
.science-item {
display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
padding-bottom: 2.4rem; border-bottom: 1px solid rgba(0,0,0,0.09);
}
.science-item:last-child { border-bottom: none; }
.science-num {
font-family: 'Cormorant Garamond', serif;
font-size: 3.3rem; font-weight: 300; color: rgba(61,94,58,0.14);
line-height: 1; min-width: 2.5rem; text-align: right;
}
.science-text h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.55rem; font-weight: 400; color: var(--valley-green); margin-bottom: 0.7rem;
}
.science-text p { font-size: 0.94rem; line-height: 1.76; color: var(--text-mid); }
.science-tag {
display: inline-block; font-size: 0.67rem; letter-spacing: 0.15em; text-transform: uppercase;
background: var(--sage); color: #fff; padding: 0.22rem 0.7rem; margin-bottom: 0.7rem;
}






/* AGRI-SCIENCE IMAGE BAND */

.science-band {
position: relative; height: 300px; overflow: hidden; margin-top: 4.75rem; width: 100%;
}


.science-band-bg {

background-image: url(../images/agri-science_composite.png);
position: absolute; inset: 0;
background-size: cover; background-position: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}













/* ── BERRIES IMAGE BAND ── */
.berries-band {
position: relative; height: 150px; overflow: hidden; margin-top: 4rem;
}

.berries-band-bg {
position: absolute; inset: 0;
background-image: url(../images/berries_background.png);
background-size: cover; background-position: center;
filter: brightness(0.55) saturate(1.1);
margin: 0 0 0 0;
}


.berries-band-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(61,84,120,0.75), rgba(45,74,94,0.4), rgba(61,84,120,0.75));
display: flex; align-items: center; justify-content: center;
}


.berries-band-text {
text-align: center; color: #fff;
}
.berries-band-text h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.25rem,5vw,3.2rem); font-weight: 300; letter-spacing: 0.04em;
}
.berries-band-text p {
font-size: 0.78rem; letter-spacing: 0.25em; text-transform: uppercase;
color: var(--gold); margin-top: 0.5rem;
}


/* ── BERRY CARDS ── */

/*
.berries-intro {
display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 2.5rem; margin-top: -1rem;
}
*/
.berry-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.15rem;}

.berry-card {
background: #fff; padding: 2rem 1.5rem;
border-bottom: 3px solid transparent; transition: all 0.3s; cursor: default;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.berry-card:nth-child(1) { border-color: var(--blueberry); }

.berry-card:nth-child(2) { border-color: #2d4a2a; }

.berry-card:nth-child(3) { border-color: var(--berry); }

.berry-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.13); }

.berry-emoji { font-size: 2.4rem; margin-bottom: 1rem; }

.berry-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.45rem;
}
.berry-season {
font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--gold); margin-bottom: 0.9rem;
}
.berry-card p { font-size: 0.87rem; line-height: 1.65; color: var(--text-mid); }

.variety-list {
margin-top: 1rem; list-style: none;
display: flex; flex-direction: column; gap: 0.28rem;
}
.variety-list li {
font-size: 0.81rem; color: var(--text-light);
display: flex; align-items: center; gap: 0.5rem;
}
.variety-list li::before { content: '→'; color: var(--sage); font-size: 0.73rem; }

.custom-emoji {
  width: 3rem;       /* Matches the font-size of your other card-icons */
  height: 3rem;
  object-fit: contain;
  vertical-align: middle; 
}





/* ── ACTIVITIES ── */
.panel-dark .section-title { color: #fff; }
.panel-dark .section-label { color: var(--gold); }
.panel-dark .section-label::before { background: var(--gold); }
.activities-grid {
display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; margin-top: 3rem;
}


.activity-card {
background: rgba(249, 249, 250, 0.99);
border: 1.5px solid rgba(9, 2, 44, 0.19);
padding: 2.3rem; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
transition: all 0.3s;
border-radius: 8px;
box-shadow: 0 2px 15px rgba(108, 107, 107, 0.456);
}

.activity-card:hover {
background: #1a118fa8; 
border-color: rgba(43, 46, 70, 0.4);
}

.activity-card:hover h3,
.activity-card:hover p {
  color: rgb(241, 234, 234);
}

/* 1. Control the layout item in the grid */
.activity-card-image {
  display: flex;
  align-items: center;     /* Centers image vertically */
  justify-content: center; /* Centers image horizontally */
  width: 150px;             /* Hard limit on width to match your emojis */
  height: 150px;            /* Hard limit on height */
  flex-shrink: 0;          /* CRITICAL: Prevents the text from crushing the image box */
}

/* 2. Control the actual image size inside that box */
.activity-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* Keeps aspect ratio perfect without distortion */
  border-radius: 12px;      /* Tidy rounded corners scaled to the smaller size */
}

/*
.activity-icon {
width: 70px; height: 70px;
background: rgba(178, 216, 162, 0.99);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; flex-shrink: 0;
}
*/

.activity-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem; font-weight: 1200; margin-bottom: 0.7rem; color: #021c15;
}
.activity-card p { font-size: 0.95rem; line-height: 1.7; color:var(--text-dark); }





/* ── VIDEOS ── */
.video-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem; }
.video-card {
background: #fff; overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.09);
transition: all 0.3s; text-decoration: none; color: inherit; display: block;
}
.video-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.16); }
.video-thumb {
aspect-ratio: 16/9;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.video-thumb::after {
content:''; position:absolute; inset:0; background:rgba(0,0,0,0.22);
}
.play-btn {
width: 54px; height: 54px;
background: rgba(255,255,255,0.9); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
z-index: 1; position: relative; transition: transform 0.2s;
}
.video-card:hover .play-btn { transform: scale(1.12); }
.play-btn::after {
content:''; width:0; height:0;
border-top: 10px solid transparent; border-bottom: 10px solid transparent;
border-left: 16px solid var(--ridge-blue); margin-left: 3px;
}
.thumb-art {
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-size:4rem; opacity:0.18;
}
.video-info { padding: 1.2rem 1.4rem 1.5rem; }
.video-tag {
font-size:0.67rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--sage); margin-bottom:0.45rem;
}
.video-info h3 {
font-family:'Cormorant Garamond',serif;
font-size:1.12rem; font-weight:600; color:var(--text-dark); margin-bottom:0.45rem; line-height:1.3;
}
.video-info p { font-size:0.82rem; color:var(--text-light); line-height:1.5; }
.fb-link-banner {
margin-top:2.5rem; padding:2rem 2.5rem;
background:var(--ridge-blue); color:#fff;
display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.fb-link-banner p { font-size:0.93rem; color:rgba(255,255,255,0.78); max-width:500px; line-height:1.6; }
.fb-link-banner strong { color:#fff; }
.btn-fb {
background:var(--gold); color:var(--text-dark);
padding:0.8rem 1.8rem; font-family:'Jost',sans-serif;
font-size:0.76rem; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; text-decoration:none; white-space:nowrap; flex-shrink:0;
transition:background 0.2s;
}
.btn-fb:hover { background:#dbbe60; }





/* ── VISIT ── */
.visit-grid { display:grid; grid-template-columns:2.75fr 2.5fr; gap:2.5rem; align-items:normal }
.info-blocks { display:flex; flex-direction:column; gap:1rem; }
.info-block {
padding:1.5rem; border-left:2.5px solid var(--gold); background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
border-radius: 8px;
}
.info-block h4 {
font-family:'Cormorant Garamond',serif;
font-size:1.12rem; font-weight:600; color:var(--valley-green); margin-bottom:0.7rem;
}
.info-block p, .info-block ul {
font-size:0.87rem; line-height:1.72; color:var(--text-mid);
}
.info-block ul { padding-left:1.2rem; }
.info-block li { margin-bottom:0.28rem; }


.visit-contact-block {
size:100%;
margin-top: 2.5rem;
padding:1.5rem;
border-left:2.5px solid var(--gold);
background: #bbbef8;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
border-radius: 8px;
font-size:1.2rem;
font-weight:350;
color:darkblue;

margin-bottom:0.7rem;

text-decoration: none;
}

.visit-contact-block p{
font-size:1.2rem; line-height:1.72; color:darkblue;
}

.visit-contact-block h4{
font-family: 'Cormorant Garamond',serif;
font-size:1.75rem; line-height:1.72; color:darkblue;
}

a .visit-contact-block {
  text-decoration: none;
}


.map-placeholder {
background: linear-gradient(145deg, rgba(30, 60, 90, 0.25) 0%, rgba(46, 117, 89, 0.25) 100%), 
            url(../images/map.png);
  background-size: cover;
  background-position: center;
aspect-ratio:1; display:flex; flex-direction:column;
align-items:center; justify-content:center; color:rgba(255,255,255,0.82);
text-align:center; padding:2rem;
}

/*

.map-placeholder::before {
  content:'📍';
  font-size:2.8rem;
  margin-bottom:1rem;
}
*/


.map-address {
background:rgba(255,255,255,100);
border:1px solid rgba(255,255,255,0.28);
font-size:1.2rem;
font-weight: bold;
margin-bottom:0;
padding: 0 2.95rem;
color: darkblue;
}

.map-city {
  background:rgba(255,255,255,100);
  border:1.2px solid rgba(255,255,255,0.28); 
  font-size:1.2rem;
  font-weight: bold;
  color: darkblue
}

.map-link {
margin-top:1.5rem; display:inline-block;
background:rgb(1, 1, 33); border:1px solid rgba(255,255,255,0.28);
color:#fbfdfd; text-decoration:none; padding:0.58rem 1.4rem;
font-size:1.25rem; font-weight: bold; letter-spacing:0.12em; text-transform:uppercase; transition:all 0.2s;
}

.map-link:hover { background:rgb(108, 170, 250); color: darkblue }



/* ------------- VISIT SOCIALS ------------- */
.visit-socials {
  display: inline-flex;
  gap: 1rem;
  vertical-align:bottom;
  margin-top: 0.8rem;
}

.visit-socials a {
  font-size: 1.1rem;
  color: rgb(242, 240, 240); /* Starts slightly muted to match your design style */
  transition: color 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Control the exact size of your logo images */
.visit-socials-img {
  width: 40px;        /* Sleek header size; adjust up or down if preferred */
  height: 40px;
  object-fit: contain;
}

.visit-socials a:hover {
  color: var(--gold);      /* Lights up gold on hover, just like your menu items */
  transform: scale(1.1);   /* Subtle visual pop */
}




/* ── NEWSLETTER ── */
.panel-green .section-title { color:#fff; }
.panel-green .section-label { color:rgb(151, 180, 243); justify-content:center; }
.panel-green .section-label::before { display:none; }
.newsletter-section { text-align:center; }
.newsletter-form {
display:flex; gap:0; max-width:480px; margin:2.4rem auto 0;
}
.newsletter-form input {
flex:1; padding:1rem 1.5rem; border:none;
font-family:'Jost',sans-serif; font-size:0.9rem;
background:rgba(255,255,255,0.15); color:#fff; outline:none;
}
.newsletter-form input::placeholder { color:rgba(255,255,255,0.48); }
.newsletter-form button {
background:var(--gold); border:none; padding:1rem 1.8rem;
font-family:'Jost',sans-serif; font-size:0.76rem; font-weight:600;
letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dark); cursor:pointer;
transition:background 0.2s;
}
.newsletter-form button:hover { background:#dbbe60; }
.newsletter-note { font-size:0.77rem; color:rgba(255,255,255,0.4); margin-top:0.9rem; }





/* ── FOOTER ── */
footer {
background:var(--text-dark); color:rgba(255,255,255,0.55);
padding:4rem 2rem 2rem;
}

.footer-inner { max-width:1200px; margin:0 auto; }
.footer-top {
display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.07);
}

.footer-brand {
font-family:'Cormorant Garamond',serif;
font-size:1.8rem; font-weight:300; color:#fff; margin-bottom:1rem;
}

.footer-brand span { color:var(--gold); }

.footer-tagline { font-size:0.87rem; line-height:1.72; margin-bottom:1.4rem; }

.social-links { display:flex; gap:1rem; }




.social-link {
width:36px; height:36px;
display:flex; 
align-items:center; justify-content:center;
color:rgba(255,255,255,0.55); 
text-decoration:none; font-size:0.78rem;
transition:all 0.2s;
}

.social-link:hover { 
  color: var(--gold);      /* Lights up gold on hover, just like your menu items */
  transform: scale(1.1);   /* Subtle visual pop */
}

.footer-col h5 {
font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
color:rgba(255,255,255,0.35); margin-bottom:1.1rem;
}

.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.55rem; }
.footer-col a {
color:rgba(255,255,255,0.5); text-decoration:none;
font-size:0.87rem; transition:color 0.2s;
}

.footer-col a:hover { color:var(--gold); }

.footer-bottom {
padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center;
flex-wrap:wrap; gap:1rem; font-size:0.76rem; color:rgba(255,255,255,0.22);
}





/* ── REVEAL ANIMATIONS ── */
.reveal {
opacity:0; transform:translateY(22px);
transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }










/*###################################################################################*/


/* ── DISCLOSURE ── */
.disclosure {
  display: block;                /* Changed from invalid 'flexbox' to block */
  box-sizing: border-box;        /* Ensures padding doesn't accidentally increase the width */
  background: white;
  border-radius: 6px;
  
  /* Responsive sizing & Centering */
  width: 90%;                    /* Takes up 90% of the screen on small mobile devices */
  max-width: 800px;              /* Stops it from expanding too wide on desktop (adjust as desired) */
  margin: 150px auto 50px auto;  /* Top: 150px, Bottom: 50px, Left/Right: auto (centers the box) */
  
  /* Padding adjustment for mobile safety */
  padding: 2.5rem;               /* 5rem is very large on mobile screens; 2.5rem scales better */
  
  /* Height behavior */
  height: auto;                  /* Lets the box naturally grow down with the content */
  min-height: 400px;             /* Optional: Gives it a baseline height before content/footer pushes it */
}

.disclosure h2 {
  font-family: 'Times New Roman', Times, serif;
  color: blue;
  text-align: center;
  margin-bottom: 2rem;
}








/*###################################################################################*/


/* ── RESPONSIVE ── */
@media(max-width:900px){
.about-grid,.science-layout,.visit-grid { grid-template-columns:1fr; gap:3rem; }
.philosophy-grid { grid-template-columns:1fr 1fr; }
.berry-cards { grid-template-columns:1fr 1fr; }
.video-grid { grid-template-columns:1fr 1fr; }
.activities-grid { grid-template-columns:1fr; }
.footer-top { grid-template-columns:1fr 1fr; }
.berries-intro { grid-template-columns:1fr; }
.pillars { grid-template-columns:1fr; }
.sticky-sidebar { position:static; }
.about-badge { right:0; bottom:-1rem; }
}
@media(max-width:600px){
.philosophy-grid { grid-template-columns:1fr; }
.berry-cards { grid-template-columns:1fr; }
.video-grid { grid-template-columns:1fr; }
.footer-top { grid-template-columns:1fr; }
.nav-links { display:none; }
.newsletter-form { flex-direction:column; }
.hero-ctas { flex-direction:column; align-items:center; }
}

/* Hide mobile toggle by default on desktop view */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 1rem;
}

.hamburger {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background: white; /* Color of your hamburger menu lines */
  transition: transform 0.2s ease-in-out;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: white;
  transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s;
}

.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

/* 📱 MOBILE RESPONSIVE STYLES */
@media (max-width: 768px) {
  /* Make room inside your main header layout */
  #main-nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Show the hamburger menu button */
  .nav-toggle {
    display: block;
    z-index: 1000;
  }

  /* Shink your socials a bit so they don't crowd the phone viewport */
  .nav-socials {
    margin-left: 1rem;
    gap: 0.8rem;
  }
  .social-icon-img {
    width: 35px;
    height: 35px;
  }

  /* Transform nav links into a vertical drop down menu hidden off-screen */
  .nav-links {
    display: none; /* Hidden by default */
    flex-direction: column;
    position: absolute;
    top: 100%; /* Sits exactly below the navigation bar */
    left: 0;
    width: 100%;
    background: #021c15; /* Fallback deep forest green matching your site branding */
    padding: 2rem 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    text-align: center;
    gap: 1.5rem;
    z-index: 999;
  }

  /* Show the menu when the active class is toggled via JS */
  .nav-links.nav-open {
    display: flex;
  }

  /* Adjust the huge "Plan Your Visit" button to look tidy on mobile */
  .nav-visit-btn {
    display: inline-block;
    width: 80%;
    margin: 0 auto;
    padding: 0.8rem 1rem;
  }
  
  /* Make inner dropdown links look clean vertically */
  .dropdown-menu {
    position: relative;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 0.5rem;
  }
}




/*###############################################################################*/

/*-------- CONTACT FORM -------------*/
.contact-form {
  max-width: 600px;
  margin: 40px auto 0 auto;
  text-align: left;
  font-family: 'Jost', sans-serif;
}

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

.form-group label {
  display: block;
  color: #f6f4f4;
  margin-bottom: 8px;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgb(255, 255, 255);
  color: #fff;
  border-radius: 4px;
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #deb027; /* Matches your gold accent color */
  background-color: rgba(255, 255, 255, 0.1);
}

.submit-btn {
  background-color: #deb027;
  color: #111;
  border: none;
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.submit-btn:hover {
  background-color: #2c099d;
  color: white;
}