:root{

--navy:#0d223b;
--green:#e5b058;
--light:#fce088;
--wine:#8d0000;
--blue:#476da7;

}


body::before{

content:"";

position:fixed;

top:0;
left:0;
width:100%;
height:100%;

background:url("../images/bg-light.jpg") center/cover;

opacity:0.03;

animation:leafDrift 120s linear infinite;

pointer-events:none;

}

@keyframes leafDrift{

0%{transform:translateY(0)}
100%{transform:translateY(-200px)}

}



*{
margin:0;
padding:0;
box-sizing:border-box;
}

.logo {
  width: 120px !important;
}
/* Force logo size correctly */

.logo-img{
height:55px;
width:auto;
max-width:none;
display:block;
}

/* HEADER */

.site-header {

position:fixed;
top:0;
width:100%;

background:

url("../images/vine-pattern.png") repeat-x,
white;

background-size:600px;
z-index:1000;

box-shadow:0 3px 12px rgba(0,0,0,0.08);

}

/* NAV CONTAINER */

.nav-container {

max-width:1200px;
margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

padding:14px 20px;

}

/* BRAND */

.brand{

display:flex;
align-items:center;
gap:14px;

}

/* LOGO SIZE */

.logo {
  width: 120px !important;
}

/* TEXT */

.brand-text{

display:flex;
flex-direction:column;

}

.title{

font-weight:800;
font-size:18px;
color:#0d223b;

}

.subtitle{

font-size:12px;
color:#476da7;

}

/* NAV LINKS */

.nav-links a{

margin-left:24px;
text-decoration:none;
font-weight:600;
color:#0d223b;
position:relative;

}

/* HOVER UNDERLINE */

.nav-links a::after{

content:"";
position:absolute;
width:0;
height:3px;
background:#f5c068;
left:0;
bottom:-6px;

transition:0.3s;

}

.nav-links a:hover::after{

width:100%;

}

/* VINE LINE */

.vine-line{

height:12px;

background:linear-gradient(
90deg,
#c77b01,
#d1ff88,
#c77b01
);

background-size:200%;

animation:vineFlow 6s linear infinite;

}

@keyframes vineFlow{

0% {background-position:0%}
100% {background-position:200%}

}

/* MOBILE */

.mobile-toggle{

display:none;
font-size:26px;
cursor:pointer;

}

/* RESPONSIVE */

@media(max-width:900px){

.nav-links{

display:none;
flex-direction:column;
background:white;
position:absolute;
top:70px;
right:20px;
padding:20px;

box-shadow:0 8px 20px rgba(0,0,0,0.1);

}

.nav-links.active{

display:flex;

}

.mobile-toggle{

display:block;

}

}

body{

font-family:Montserrat;
line-height:1.6;
color:#222;

}

/* NAV */

.nav{

position:fixed;
width:100%;
background:white;
z-index:1000;
box-shadow:0 3px 10px rgba(0,0,0,0.05);

}

.nav-inner{

display:flex;
justify-content:space-between;
align-items:center;
max-width:1200px;
margin:auto;
padding:16px;

}

nav a{

margin-left:20px;
text-decoration:none;
font-weight:600;
color:var(--navy);

}



/* HERO */

.hero{

height:100vh;

background:url("../images/bg-dark.jpg") center/cover fixed;

display:flex;
align-items:center;
justify-content:center;

position:relative;
text-align:center;
color:white;

}

/* dark overlay */

.hero-overlay{

position:absolute;
inset:0;

background:rgba(13,34,59,0.65);

}

/* content */

.hero-content{

position:relative;
z-index:2;
max-width:700px;

}

.hero h1{
  font-size: clamp(36px, 8vw, 72px);
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.1;
}

/* scripture reveal */

.scripture{

font-size:22px;
opacity:0;
animation:fadeScripture 3s forwards;
animation-delay:1.5s;

}

.scripture span{

display:block;
margin-top:10px;
font-size:16px;
opacity:0.8;

}

@keyframes fadeScripture{

to{
opacity:1;
}

}

/* button */

.hero-button{

display:inline-block;
margin-top:35px;

padding:14px 28px;

background:#d39228;
color:white;

border-radius:6px;

text-decoration:none;
font-weight:600;

transition:0.3s;

}

.hero-button:hover{

transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.25);

}

.floating-grapes{

position:absolute;
inset:0;

background-image:url("../images/grape-logo-large.png");

background-repeat:no-repeat;

background-size:400px;

background-position:

10% 20%,
85% 35%,
25% 70%,
80% 80%;

opacity:0.15;

animation:floatGrapes 35s linear infinite;

}

@keyframes floatGrapes{

0%{
background-position:
10% 20%,
85% 35%,
25% 70%,
80% 80%;
}

100%{
background-position:
20% 40%,
70% 20%,
35% 85%,
90% 60%;
}

}

/* SECTIONS */

.section{

padding:120px 20px;

}

.alt{

background:#d3fcb9;

}

.dark{

background:var(--navy);
color:white;

}

.container{

max-width:1100px;
margin:auto;

}


.center{

text-align:center;

}

.distressed{

background:url("../images/distressed.jpg") center/cover fixed;

}

/* SPLIT */

.split{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;

}

.reverse{

direction:rtl;

}

.reverse .text{

direction:ltr;

}

.placeholder {
  height: 280px;
  background: #ddd;
  border-radius: 10px;
  overflow: hidden;        /* clips the image to the box */
}

.placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fills the box, crops neatly */
  display: block;
}


/* VALUES */
.values-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:40px;

}

.value-card {
  background: white;
  color: #222;
  text-align: center;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: 0.25s;
  display: flex;
  flex-direction: column;  /* stacks children vertically */
}

.value-card:hover{

transform:translateY(-6px);

box-shadow:0 12px 30px rgba(0,0,0,0.15);

}

.card-tag {
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  margin-top: auto;        /* pushes tag to the bottom */
}

/* APPROACH */

.parallax{

background:url("../images/bg-light.jpg") center/cover fixed;

}

.approach-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;

}

.approach-card{

background:var(--wine);
padding:30px;
border-radius:10px;
box-shadow: 0 6px 20px rgba(0,0,0,0.30);
border: 1px solid rgba(0,0,0,0.08);

}

.approach-card h3 {
  color: var(--light);
  text-shadow: 2px 3px 6px rgba(0,0,0,0.35);

}
.approach-card p {
  color: whitesmoke;
}

/* AIMS */

.aims-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;

}

.aim{

background:white;
padding:30px;
border-radius:10px;
transition:0.3s;

}

.aim:hover{

transform:translateY(-5px);

}

.aim a{

color:var(--green);
font-weight:600;

}

/* FOOTER */

footer{

background:var(--navy);
color:white;
text-align:center;
padding:40px;

}

/* REVEAL ANIMATION */

.reveal{

opacity:0;
transform:translateY(40px);
transition:all 1s ease;

}

.reveal.active{

opacity:1;
transform:translateY(0);

}

/* MODAL BACKGROUND */

.modal{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(10,20,35,0.7);

display:flex;
align-items:center;
justify-content:center;

opacity:0;
pointer-events:none;

transition:opacity 0.35s;

z-index:2000;

}

/* Active modal */

.modal.active{

opacity:1;
pointer-events:auto;

}

/* Modal card */

.modal-content {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  padding: 50px 40px;
  max-width: 650px;
  width: 90%;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  position: relative;
  animation: modalRise 0.35s ease;
  max-height: 85vh;        /* caps height at 85% of the viewport */
  overflow-y: auto;        /* enables vertical scrolling when content exceeds that */
}

.modal-content::-webkit-scrollbar {
  width: 6px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: var(--green);
  border-radius: 10px;
}

.modal-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 24px;
  display: block;
}

/* Animation */

@keyframes modalRise{

from{
transform:translateY(40px);
opacity:0;
}

to{
transform:translateY(0);
opacity:1;
}

}

/* Close button */

.close-modal{

position:absolute;

top:18px;
right:22px;

font-size:28px;

cursor:pointer;

color:#333;

}

/* Grape logo */

.modal-logo{

width:40px;

opacity:0.6;

margin-bottom:15px;

}

/* Heading */

.modal-content h2{

margin-bottom:18px;
color:#0d223b;

}

/* Text */

.modal-content p{

line-height:1.6;

color:#333;

}