/* =========================================================
G-NEXT ORGANIC — STYLESHEET
Design language: field-report / almanac editorial style.
Palette: green (brand), dark-green (authority), yellow (accent),
white + light-gray (structure). See tokens below.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
/* COLOR TOKENS */
--white:        #FFFFFF;
--light-gray:   #F3F5F0;
--line:         #E1E5DB;
--green:        #2F7A3E;
--green-deep:   #235A2F;
--dark-green:   #163420;
--yellow:       #E7B23B;
--yellow-deep:  #C8912A;
--ink:          #1C2A1E;
--ink-soft:     #4B584C;

/* TYPE */
--font-display: 'Fraunces', serif;
--font-body: 'Work Sans', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
font-family: var(--font-body);
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

h1,h2,h3,h4{
font-family: var(--font-display);
color: var(--dark-green);
line-height:1.15;
margin:0;
}

.eyebrow{
font-family: var(--font-body);
font-weight:600;
font-size:0.8rem;
letter-spacing:0.02em;
color: var(--green-deep);
}

.container{
width:100%;
max-width:1180px;
margin:0 auto;
padding-left:1.25rem;
padding-right:1.25rem;
}

::selection{ background: var(--yellow); color: var(--dark-green); }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
outline: 3px solid var(--yellow-deep);
outline-offset: 2px;
}

/* =========================================================
NAVBAR
========================================================= */
.navbar{
position: sticky;
top:0;
z-index:100;
background: rgba(255,255,255,0.94);
backdrop-filter: blur(6px);
border-bottom:1px solid var(--line);
}
.navbar-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:0.75rem 1.25rem;
max-width:1180px;
margin:0 auto;
}
.brand{
display:flex;
align-items:center;
gap:0.65rem;
}
.brand img{
height:44px;
width:auto;
object-fit:contain;
}
.brand-name{
font-family: var(--font-display);
font-weight:600;
font-size:1.15rem;
color: var(--dark-green);
line-height:1.1;
}
.brand-name span{
display:block;
font-family: var(--font-body);
font-weight:500;
font-size:0.65rem;
color: var(--ink-soft);
letter-spacing:0.03em;
}

.nav-links{
display:flex;
align-items:center;
gap:2rem;
}
.nav-links a{
font-weight:500;
font-size:0.95rem;
color: var(--ink);
position:relative;
padding:0.35rem 0;
transition:color .2s ease;
}
.nav-links a:hover{ color: var(--green); }
.nav-links a::after{
content:'';
position:absolute;
left:0; bottom:-2px;
width:0; height:2px;
background: var(--yellow-deep);
transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color: var(--green-deep); }
.nav-links a.active::after{ width:100%; background:var(--green-deep); }

.nav-cta{
background: var(--green);
color:var(--white) !important;
padding:0.55rem 1.15rem;
border-radius:999px;
font-weight:600;
font-size:0.9rem;
}
.nav-cta:hover{ background: var(--green-deep); }
.nav-cta::after{ display:none; }

.hamburger{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
padding:0.4rem;
}
.hamburger span{
width:26px; height:2.5px;
background: var(--dark-green);
border-radius:2px;
transition: transform .3s ease, opacity .3s ease;
}
.hamburger.open span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu{
display:none;
flex-direction:column;
background: var(--white);
border-top:1px solid var(--line);
overflow:hidden;
max-height:0;
transition: max-height .35s ease;
}
.mobile-menu.open{ max-height:400px; }
.mobile-menu a{
padding:0.9rem 1.25rem;
border-bottom:1px solid var(--line);
font-weight:500;
}
.mobile-menu a.active{ color: var(--green-deep); background: var(--light-gray); }

@media (max-width:860px){
.nav-links{ display:none; }
.hamburger{ display:flex; }
.mobile-menu{ display:flex; }
}

/* =========================================================
HERO SLIDER — refined
========================================================= */
.hero-slider{
position:relative;
width:100%;
height:78vh;
min-height:460px;
max-height:720px;
overflow:hidden;
background: var(--dark-green);
}
.slide{
position:absolute;
inset:0;
opacity:0;
visibility:hidden;
transition: opacity 1.1s ease;
}
.slide.active{ opacity:1; visibility:visible; z-index:2; }
.slide img{
width:100%; height:100%; object-fit:cover;
transform: scale(1.08);
transition: transform 6s ease-out;
}
.slide.active img{ transform: scale(1); }

.slide-overlay{
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(22,52,32,0.15) 0%, rgba(22,52,32,0.55) 65%, rgba(22,52,32,0.85) 100%);
}
.slide-content{
position:absolute;
left:0; right:0; bottom:0;
padding: 2.5rem 1.25rem 4.5rem;
max-width:1180px;
margin:0 auto;
color: var(--white);
}
.slide-content .eyebrow,
.slide-content h1, .slide-content h2,
.slide-content p, .slide-content .btn{
opacity:0;
transform: translateY(14px);
transition: opacity .6s ease, transform .6s ease;
}
.slide.active .slide-content .eyebrow{ transition-delay:.15s; }
.slide.active .slide-content h1,
.slide.active .slide-content h2{ transition-delay:.28s; }
.slide.active .slide-content p{ transition-delay:.4s; }
.slide.active .slide-content .btn{ transition-delay:.52s; }
.slide.active .slide-content .eyebrow,
.slide.active .slide-content h1,
.slide.active .slide-content h2,
.slide.active .slide-content p,
.slide.active .slide-content .btn{
opacity:1;
transform:none;
}

.slide-content .eyebrow{ color: var(--yellow); }
.slide-content h1, .slide-content h2{
color: var(--white);
font-size: clamp(1.9rem, 4.2vw, 3.1rem);
max-width:22ch;
margin-top:0.4rem;
}
.slide-content p{
margin-top:0.9rem;
max-width:52ch;
font-size:1.05rem;
color: #EAF1E8;
}
.slide-content .btn{ margin-top:1.5rem; }

.slider-controls{
position:absolute;
bottom:1.75rem; right:1.25rem;
display:flex; gap:0.6rem;
z-index:5;
}
.slider-arrow{
width:42px; height:42px;
border-radius:50%;
border:1.5px solid rgba(255,255,255,0.6);
background: rgba(0,0,0,0.15);
color:var(--white);
display:flex; align-items:center; justify-content:center;
cursor:pointer;
transition: background .2s ease, transform .15s ease;
}
.slider-arrow:hover{ background: var(--yellow-deep); border-color: var(--yellow-deep); transform: scale(1.06); }
.slider-arrow:active{ transform: scale(0.96); }

.slider-dots{
position:absolute;
bottom:1.9rem; left:1.25rem;
display:flex; gap:0.55rem;
align-items:center;
z-index:5;
}
.slider-dot{
position:relative;
width:34px; height:4px;
border-radius:2px;
background: rgba(255,255,255,0.35);
cursor:pointer;
border:none;
padding:0;
overflow:hidden;
}
.slider-dot::after{
content:'';
position:absolute;
inset:0;
transform-origin:left center;
transform: scaleX(0);
background: var(--yellow);
}
.slider-dot.active::after{
animation: dot-fill var(--slide-duration, 6s) linear forwards;
}
.slider-dot.paused::after{ animation-play-state: paused; }
@keyframes dot-fill{
from{ transform: scaleX(0); }
to{ transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce){
.slide{ transition: opacity .3s ease; }
.slide img{ transition:none; transform:none; }
.slide-content .eyebrow, .slide-content h1, .slide-content h2,
.slide-content p, .slide-content .btn{ transition:none; opacity:1; transform:none; }
.slider-dot::after{ animation:none !important; transform: scaleX(0) !important; }
}

@media (max-width:640px){
.slider-controls{ display:none; } /* swipe handles nav on mobile */
}

/* =========================================================
BUTTONS
========================================================= */
.btn{
display:inline-flex;
align-items:center;
gap:0.5rem;
padding:0.85rem 1.6rem;
border-radius:999px;
font-weight:600;
font-size:0.95rem;
cursor:pointer;
border:2px solid transparent;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
background: var(--yellow);
color: var(--dark-green);
}
.btn-primary:hover{ background: var(--yellow-deep); }
.btn-outline{
background: transparent;
border-color: rgba(255,255,255,0.7);
color: var(--white);
}
.btn-outline:hover{ background: rgba(255,255,255,0.12); }
.btn-green{
background: var(--green);
color: var(--white);
}
.btn-green:hover{ background: var(--green-deep); }
.btn-line{
background:transparent;
border-color: var(--green);
color: var(--green-deep);
}
.btn-line:hover{ background: var(--green); color:var(--white); }

/* =========================================================
SECTIONS — GENERIC
========================================================= */
.section{ padding: 5rem 0; }
.section-alt{ background: var(--light-gray); }
.section-head{ max-width:640px; margin-bottom:2.75rem; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.35rem); margin-top:0.5rem; }
.section-head p{ margin-top:0.9rem; color: var(--ink-soft); font-size:1.05rem; }

.rule{
width:46px; height:3px;
background: var(--yellow-deep);
border-radius:2px;
}

/* =========================================================
VISION / MISSION / APPROACH CARDS
========================================================= */
.pillar-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:1.5rem;
}
.pillar-card{
background: var(--white);
border:1px solid var(--line);
border-top:3px solid var(--green);
border-radius: 10px;
padding:2rem 1.75rem;
transition: transform .25s ease, box-shadow .25s ease;
}
.pillar-card:hover{
transform: translateY(-4px);
box-shadow: 0 16px 32px -20px rgba(22,52,32,0.35);
}
.pillar-card .icon{
width:52px; height:52px;
border-radius:12px;
background: var(--light-gray);
color: var(--green-deep);
display:flex; align-items:center; justify-content:center;
margin-bottom:1.25rem;
}
.pillar-card h3{ font-size:1.25rem; }
.pillar-card p{ margin-top:0.7rem; color: var(--ink-soft); line-height:1.6; }

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

/* =========================================================
ABOUT
========================================================= */
.about-wrap{
display:grid;
grid-template-columns: 1fr 1fr;
gap:3rem;
align-items:center;
}
.about-media{ position:relative; }
.about-media img{
border-radius:14px;
width:100%;
height:420px;
object-fit:cover;
}
.about-media::before{
content:'';
position:absolute;
top:-14px; left:-14px;
width:110px; height:110px;
border:4px solid var(--yellow);
border-radius:14px;
z-index:-1;
}
.about-text p{ color: var(--ink-soft); line-height:1.75; margin-top:1rem; font-size:1.02rem; }
.about-stats{
display:flex;
gap:2rem;
margin-top:1.75rem;
padding-top:1.5rem;
border-top:1px solid var(--line);
}
.about-stats .stat b{
display:block;
font-family: var(--font-display);
font-size:2rem;
color: var(--dark-green);
}
.about-stats .stat span{ color: var(--ink-soft); font-size:0.9rem; }

@media (max-width:900px){
.about-wrap{ grid-template-columns:1fr; }
.about-media img{ height:300px; }
}

/* =========================================================
FOUNDER
========================================================= */
.founder-wrap{
display:grid;
grid-template-columns: 380px 1fr;
gap:3.5rem;
align-items:center;
background: var(--dark-green);
border-radius:18px;
padding:3rem;
color: var(--white);
}
.founder-photo{
position:relative;
}
.founder-photo img{
border-radius:14px;
width:100%;
aspect-ratio: 4/5;
object-fit:cover;
border:5px solid rgba(255,255,255,0.08);
}
.founder-badge{
position:absolute;
bottom:-18px; left:-18px;
background: var(--yellow);
color: var(--dark-green);
padding:0.9rem 1.15rem;
border-radius:10px;
font-weight:700;
font-family: var(--font-display);
line-height:1.2;
box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5);
}
.founder-badge span{
display:block;
font-family: var(--font-body);
font-weight:500;
font-size:0.72rem;
text-transform:none;
}
.founder-text .eyebrow{ color: var(--yellow); }
.founder-text h2{ color: var(--white); margin-top:0.5rem; font-size:clamp(1.6rem,3vw,2.2rem); }
.founder-creds{
display:flex;
flex-wrap:wrap;
gap:0.9rem;
margin:1.25rem 0 1.5rem;
}
.founder-creds .pill{
border:1px solid rgba(255,255,255,0.25);
padding:0.5rem 1rem;
border-radius:999px;
font-size:0.88rem;
color:#DCEFE0;
}
.founder-text p{ color:#D7E6DA; line-height:1.8; }

@media (max-width:900px){
.founder-wrap{ grid-template-columns:1fr; padding:2rem 1.5rem 2.5rem; }
.founder-photo img{ aspect-ratio:16/10; }
.founder-badge{ position:static; margin-top:1rem; display:inline-block; }
}

/* =========================================================
SERVICES
========================================================= */
.services-grid{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap:1.5rem;
}
.service-card{
display:flex;
gap:1.25rem;
background: var(--white);
border:1px solid var(--line);
border-radius:12px;
padding:1.85rem;
transition: box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
box-shadow: 0 18px 34px -22px rgba(22,52,32,0.3);
border-color: var(--green);
}
.service-num{
font-family: var(--font-display);
font-size:1.6rem;
color: var(--yellow-deep);
font-weight:600;
flex-shrink:0;
width:46px;
}
.service-card h3{ font-size:1.15rem; }
.service-card p{ margin-top:0.55rem; color: var(--ink-soft); line-height:1.65; font-size:0.97rem; }

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

/* Services page — full detail blocks */
.service-detail{
display:grid;
grid-template-columns: 90px 1fr;
gap:2rem;
padding:2.75rem 0;
border-bottom:1px solid var(--line);
}
.service-detail:last-child{ border-bottom:none; }
.service-detail .service-num{ font-size:2.4rem; width:auto; }
.service-detail h3{ font-size:1.5rem; }
.service-detail p{ color: var(--ink-soft); line-height:1.8; margin-top:0.75rem; max-width:66ch; }
.tag-row{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.1rem; }
.tag{
background: var(--light-gray);
border:1px solid var(--line);
color: var(--green-deep);
font-size:0.85rem;
padding:0.4rem 0.85rem;
border-radius:999px;
font-weight:500;
}

@media (max-width:640px){
.service-detail{ grid-template-columns:1fr; }
}

/* =========================================================
TRAINING AUDIENCE
========================================================= */
.audience-grid{
display:grid;
grid-template-columns: repeat(5, 1fr);
gap:1.25rem;
}
.audience-card{
text-align:center;
background: var(--white);
border:1px solid var(--line);
border-radius:12px;
padding:1.75rem 1rem;
}
.audience-card .icon{
width:50px; height:50px;
margin:0 auto 1rem;
border-radius:50%;
background: var(--green);
color: var(--white);
display:flex; align-items:center; justify-content:center;
}
.audience-card h4{ font-size:1rem; color: var(--dark-green); }

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

/* =========================================================
WHY US
========================================================= */
.why-grid{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap:1.25rem 2.5rem;
}
.why-item{
display:flex;
gap:1rem;
align-items:flex-start;
padding:1.25rem 0;
border-bottom:1px solid var(--line);
}
.why-item .icon{
width:38px; height:38px;
flex-shrink:0;
border-radius:9px;
background: var(--yellow);
color: var(--dark-green);
display:flex; align-items:center; justify-content:center;
}
.why-item h4{ font-size:1.05rem; color: var(--dark-green); }
.why-item p{ color: var(--ink-soft); margin-top:0.35rem; font-size:0.95rem; line-height:1.6; }

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

/* =========================================================
PROCESS — HOW WE WORK
========================================================= */
.process-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:1.5rem;
}
.process-card{
position:relative;
padding:2rem 1.5rem 1.75rem;
background: var(--white);
border:1px solid var(--line);
border-radius:12px;
}
.process-card .step-num{
font-family: var(--font-display);
font-size:2.6rem;
color: var(--light-gray);
-webkit-text-stroke: 1.5px var(--green);
color: transparent;
line-height:1;
}
.process-card h4{ margin-top:0.75rem; font-size:1.1rem; color: var(--dark-green); }
.process-card p{ margin-top:0.5rem; color: var(--ink-soft); font-size:0.92rem; line-height:1.6; }

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

/* =========================================================
CTA BAND
========================================================= */
.cta-band{
background: linear-gradient(120deg, var(--dark-green) 0%, var(--green-deep) 100%);
border-radius:18px;
padding:3.5rem 3rem;
text-align:center;
color: var(--white);
position:relative;
overflow:hidden;
}
.cta-band h2{ color: var(--white); font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.cta-band p{ color:#DCEFE0; max-width:52ch; margin:1rem auto 0; }
.cta-buttons{
display:flex; gap:1rem; justify-content:center;
margin-top:1.85rem; flex-wrap:wrap;
}

@media (max-width:640px){
.cta-band{ padding:2.5rem 1.5rem; }
}

/* =========================================================
FOOTER
========================================================= */
.site-footer{
background: var(--dark-green);
color:#CFE1D2;
padding: 4rem 0 0;
}
.footer-grid{
display:grid;
grid-template-columns: 1.4fr 1fr 1.4fr;
gap:2.5rem;
padding-bottom:2.75rem;
border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-brand{
display:flex; align-items:center; gap:0.65rem; margin-bottom:1rem;
}
.footer-brand img{ height:38px; }
.footer-brand span{
font-family: var(--font-display);
font-weight:600;
color: var(--white);
font-size:1.1rem;
}
.site-footer p{ line-height:1.7; font-size:0.93rem; color:#AFC9B4; }
.site-footer h5{
color: var(--white);
font-family: var(--font-body);
font-weight:600;
font-size:0.95rem;
margin-bottom:1.1rem;
}
.footer-links a{
display:block;
padding:0.4rem 0;
color:#CFE1D2;
font-size:0.93rem;
transition:color .2s ease;
}
.footer-links a:hover{ color: var(--yellow); }
.footer-contact li{
display:flex; gap:0.7rem; margin-bottom:0.9rem;
font-size:0.92rem; color:#CFE1D2; align-items:flex-start;
}
.footer-contact .ico{ color: var(--yellow); flex-shrink:0; margin-top:2px; }
.footer-contact a:hover{ color: var(--yellow); }
.footer-social{ display:flex; gap:0.65rem; margin-top:1.1rem; }
.footer-social a{
width:36px; height:36px;
border:1px solid rgba(255,255,255,0.2);
border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:#CFE1D2;
font-size:0.8rem;
}
.footer-social a:hover{ background: var(--yellow); color: var(--dark-green); border-color: var(--yellow); }
.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:0.75rem;
padding:1.5rem 0;
font-size:0.85rem;
color:#9AB69F;
}
.footer-bottom a{ color:#9AB69F; }
.footer-bottom a:hover{ color: var(--yellow); }
.footer-legal{ display:flex; gap:1.25rem; }

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

/* =========================================================
MAP / CONTACT
========================================================= */
.contact-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap:2.5rem;
}
.contact-info-card{
background: var(--white);
border:1px solid var(--line);
border-radius:14px;
padding:2rem;
}
.contact-row{
display:flex; gap:1rem; align-items:flex-start;
padding:1rem 0;
border-bottom:1px solid var(--line);
}
.contact-row:last-child{ border-bottom:none; }
.contact-row .icon{
width:42px; height:42px; border-radius:10px;
background: var(--light-gray); color: var(--green-deep);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-row h4{ font-size:0.98rem; color: var(--dark-green); }
.contact-row p, .contact-row a{ font-size:0.93rem; color: var(--ink-soft); display:block; margin-top:0.15rem; }
.contact-row a:hover{ color: var(--green-deep); }

.map-wrap{
border-radius:14px;
overflow:hidden;
border:1px solid var(--line);
height:100%;
min-height:320px;
position:relative;
}
.map-wrap iframe{ width:100%; height:100%; min-height:320px; border:0; }
.map-btn{
position:absolute;
bottom:1rem; left:1rem;
z-index:2;
}

.contact-form{
background: var(--white);
border:1px solid var(--line);
border-radius:14px;
padding:2rem;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:0.88rem; font-weight:600; color: var(--dark-green); margin-bottom:0.4rem; }
.field input, .field textarea{
width:100%;
padding:0.8rem 1rem;
border:1.5px solid var(--line);
border-radius:9px;
font-family: var(--font-body);
font-size:0.95rem;
background: var(--light-gray);
transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus{ border-color: var(--green); outline:none; background:var(--white); }
.form-note{
font-size:0.82rem;
color: var(--ink-soft);
margin-top:0.75rem;
}

@media (max-width:900px){
.contact-grid{ grid-template-columns:1fr; }
.form-row{ grid-template-columns:1fr; }
}

/* =========================================================
GALLERY
========================================================= */
.gallery-hero{
background: var(--dark-green);
padding: 5.5rem 0 3.5rem;
color: var(--white);
text-align:center;
}
.gallery-hero .eyebrow{ color: var(--yellow); }
.gallery-hero h1{ color: var(--white); margin-top:0.6rem; font-size:clamp(2rem,4vw,3rem); }
.gallery-hero p{ color:#D7E6DA; max-width:52ch; margin:1rem auto 0; }

.filter-bar{
display:flex;
gap:0.75rem;
flex-wrap:wrap;
justify-content:center;
margin-bottom:2.5rem;
}
.filter-btn{
padding:0.6rem 1.3rem;
border-radius:999px;
border:1.5px solid var(--line);
background: var(--white);
color: var(--ink-soft);
font-weight:600;
font-size:0.9rem;
cursor:pointer;
transition: all .2s ease;
}
.filter-btn:hover{ border-color: var(--green); color: var(--green-deep); }
.filter-btn.active{ background: var(--green); border-color: var(--green); color: var(--white); }

.gallery-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:1.25rem;
}
.gallery-item{
position:relative;
border-radius:12px;
overflow:hidden;
cursor:pointer;
aspect-ratio: 4/3;
background: var(--light-gray);
transition: opacity .3s ease, transform .3s ease;
}
.gallery-item.hidden-item{ display:none; }
.gallery-item img{
width:100%; height:100%; object-fit:cover;
transition: transform .5s ease;
}
.gallery-item:hover img{ transform: scale(1.07); }
.gallery-item .g-overlay{
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(22,52,32,0) 45%, rgba(22,52,32,0.88) 100%);
display:flex;
align-items:flex-end;
padding:1.1rem;
}
.gallery-item .g-text h3{ color:var(--white); font-size:1.02rem; }
.gallery-item .g-text p{ color:#DCEFE0; font-size:0.82rem; margin-top:0.25rem; }

@media (max-width:900px){
.gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:560px){
.gallery-grid{ grid-template-columns: 1fr; }
}

/* Lightbox */
.lightbox{
position:fixed; inset:0;
background: rgba(11,20,13,0.94);
z-index:1000;
display:none;
align-items:center;
justify-content:center;
padding:2rem;
}
.lightbox.open{ display:flex; }
.lightbox-inner{
max-width:900px;
width:100%;
position:relative;
}
.lightbox-inner img{
width:100%;
max-height:70vh;
object-fit:contain;
border-radius:10px;
}
.lightbox-caption{
color: var(--white);
text-align:center;
margin-top:1.1rem;
}
.lightbox-caption h3{ color: var(--white); font-size:1.15rem; }
.lightbox-caption p{ color:#B9CDBC; margin-top:0.3rem; font-size:0.9rem; }
.lightbox-close{
position:absolute;
top:-3.2rem; right:0;
background:none; border:none;
color: var(--white);
font-size:1.9rem;
cursor:pointer;
line-height:1;
}
.lightbox-nav{
position:absolute;
top:50%; transform:translateY(-50%);
background: rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.3);
color:var(--white);
width:46px; height:46px;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
cursor:pointer;
font-size:1.2rem;
}
.lightbox-nav:hover{ background: var(--yellow); color: var(--dark-green); border-color: var(--yellow); }
.lightbox-prev{ left:-3.2rem; }
.lightbox-next{ right:-3.2rem; }
@media (max-width:760px){
.lightbox-prev{ left:0.25rem; }
.lightbox-next{ right:0.25rem; }
.lightbox-close{ top:-2.6rem; }
}

/* =========================================================
BACK TO TOP
========================================================= */
.back-to-top{
position:fixed;
bottom:1.75rem; right:1.75rem;
width:48px; height:48px;
border-radius:50%;
background: var(--green);
color: var(--white);
display:flex; align-items:center; justify-content:center;
border:none; cursor:pointer;
box-shadow: 0 10px 24px -10px rgba(22,52,32,0.5);
opacity:0; visibility:hidden;
transform: translateY(10px);
transition: all .3s ease;
z-index:90;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background: var(--green-deep); }

/* =========================================================
REVEAL ON SCROLL (single orchestrated pattern, subtle)
========================================================= */
.reveal{
opacity:0;
transform: translateY(18px);
transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
.reveal{ opacity:1; transform:none; transition:none; }
.slide{ transition:none; }
}

/* =========================================================
PAGE HERO (Services / inner pages)
========================================================= */
.page-hero{
background: var(--dark-green);
padding:5.5rem 0 4rem;
text-align:center;
color: var(--white);
position:relative;
overflow:hidden;
}
.page-hero .eyebrow{ color: var(--yellow); }
.page-hero h1{ color: var(--white); margin-top:0.6rem; font-size:clamp(2rem,4vw,3rem); }
.page-hero p{ color:#D7E6DA; max-width:56ch; margin:1rem auto 0; }


/* =========================================================
   G-NEXT ORGANIC — RESPONSIVE / DEVICE COMPATIBILITY
   Fluid layout improvements for phones, tablets, laptops
   and large desktop screens.
   ========================================================= */

/* ---------- GLOBAL FLUID BASE ---------- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 320px;
  overflow-x: hidden;
}

.container {
  width: min(100% - 2rem, 1180px);
  padding-left: 0;
  padding-right: 0;
}

button,
input,
textarea,
select {
  max-width: 100%;
}

button,
a,
input,
textarea {
  touch-action: manipulation;
}

img,
video,
iframe {
  max-width: 100%;
}

iframe {
  display: block;
}

/* ---------- FLUID SPACING ---------- */
.section {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.section-head {
  width: 100%;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
}

.section-head p {
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
}

.btn {
  min-height: 44px;
}

/* ---------- NAVBAR ---------- */
.navbar-inner {
  width: min(100%, 1180px);
  padding: .7rem clamp(1rem, 3vw, 1.25rem);
}

.brand {
  min-width: 0;
}

.brand img {
  height: clamp(36px, 5vw, 44px);
}

.brand-name {
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.nav-links {
  gap: clamp(1rem, 2.5vw, 2rem);
}

.nav-links a {
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .nav-links {
    gap: 1rem;
  }

  .nav-links a {
    font-size: .9rem;
  }

  .nav-cta {
    padding: .5rem .9rem;
  }
}

/* ---------- HERO ---------- */
.hero-slider {
  height: clamp(520px, 78vh, 720px);
  min-height: 520px;
}

.slide-content {
  width: min(100%, 1180px);
  padding:
    clamp(2rem, 6vw, 2.5rem)
    clamp(1rem, 4vw, 1.25rem)
    clamp(4rem, 8vw, 4.5rem);
}

.slide-content h1,
.slide-content h2 {
  font-size: clamp(1.8rem, 5vw, 3.1rem);
  max-width: min(22ch, 100%);
}

.slide-content p {
  width: min(100%, 52ch);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
}

.slider-controls {
  right: clamp(1rem, 3vw, 1.25rem);
}

.slider-dots {
  left: clamp(1rem, 3vw, 1.25rem);
}

@media (max-width: 640px) {
  .hero-slider {
    height: 70vh;
    min-height: 500px;
  }

  .slide-content {
    padding-bottom: 3.75rem;
  }

  .slide-content .btn {
    width: auto;
    max-width: 100%;
  }

  .slider-dots {
    bottom: 1.25rem;
  }
}

/* ---------- FLUID GRIDS ---------- */
.pillar-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 280px), 1fr)
  );
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.services-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 340px), 1fr)
  );
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.audience-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 170px), 1fr)
  );
  gap: clamp(.85rem, 2vw, 1.25rem);
}

.why-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 330px), 1fr)
  );
  gap: clamp(1rem, 3vw, 2.5rem);
}

.process-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 220px), 1fr)
  );
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.gallery-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 280px), 1fr)
  );
  gap: clamp(.8rem, 2vw, 1.25rem);
}

/* ---------- CARDS ---------- */
.pillar-card,
.service-card,
.audience-card,
.process-card,
.contact-info-card,
.contact-form {
  min-width: 0;
}

.pillar-card {
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.75rem);
}

.service-card {
  padding: clamp(1.25rem, 3vw, 1.85rem);
}

.service-card p,
.pillar-card p,
.process-card p,
.why-item p {
  overflow-wrap: anywhere;
}

/* ---------- ABOUT ---------- */
.about-wrap {
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: clamp(1.75rem, 5vw, 3rem);
}

.about-media img {
  height: clamp(280px, 38vw, 420px);
}

.about-stats {
  gap: clamp(1rem, 4vw, 2rem);
  flex-wrap: wrap;
}

.about-stats .stat {
  min-width: 100px;
}

.about-stats .stat b {
  font-size: clamp(1.6rem, 4vw, 2rem);
}

/* ---------- FOUNDER ---------- */
.founder-wrap {
  grid-template-columns:
    minmax(240px, 380px)
    minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 5vw, 3rem);
}

.founder-text,
.founder-photo {
  min-width: 0;
}

.founder-creds {
  gap: .65rem;
}

.founder-creds .pill {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ---------- SERVICES DETAIL ---------- */
.service-detail {
  grid-template-columns:
    minmax(60px, 90px)
    minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 2rem);
}

.service-detail p {
  width: min(100%, 66ch);
}

/* ---------- CTA ---------- */
.cta-band {
  padding:
    clamp(2.25rem, 6vw, 3.5rem)
    clamp(1.25rem, 5vw, 3rem);
}

.cta-buttons .btn {
  min-width: 150px;
}

/* ---------- FOOTER ---------- */
.footer-grid {
  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(180px, 1fr)
    minmax(0, 1.4fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.footer-bottom {
  gap: 1rem;
}

.footer-legal {
  flex-wrap: wrap;
}

/* ---------- CONTACT ---------- */
.contact-grid {
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.contact-info-card,
.contact-form {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.form-row {
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
}

.field input,
.field textarea {
  min-height: 44px;
}

/* ---------- MAP ---------- */
.map-wrap {
  min-height: clamp(280px, 45vw, 420px);
}

.map-wrap iframe {
  min-height: clamp(280px, 45vw, 420px);
}

/* ---------- GALLERY ---------- */
.gallery-hero {
  padding:
    clamp(3.5rem, 8vw, 5.5rem)
    1rem
    clamp(2.5rem, 6vw, 3.5rem);
}

.filter-bar {
  gap: .6rem;
}

.filter-btn {
  min-height: 42px;
}

.gallery-item {
  min-width: 0;
}

/* ---------- LIGHTBOX ---------- */
.lightbox {
  padding: clamp(.75rem, 3vw, 2rem);
}

.lightbox-inner {
  width: min(100%, 900px);
}

.lightbox-inner img {
  max-height: 75vh;
}

@media (max-width: 760px) {
  .lightbox {
    padding: .75rem;
  }

  .lightbox-inner img {
    max-height: 72vh;
  }
}

/* ---------- LARGE DESKTOP ---------- */
@media (min-width: 1441px) {
  .container {
    max-width: 1280px;
  }

  .navbar-inner,
  .slide-content {
    max-width: 1280px;
  }

  .section {
    padding-block: 6rem;
  }

  .hero-slider {
    max-height: 820px;
  }
}

/* ---------- TABLETS ---------- */
@media (max-width: 900px) {
  .about-wrap,
  .founder-wrap,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .about-media img {
    height: clamp(280px, 55vw, 360px);
  }

  .founder-photo img {
    aspect-ratio: 16 / 10;
  }

  .contact-grid {
    gap: 1.5rem;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- SMALL TABLETS / LARGE PHONES ---------- */
@media (max-width: 760px) {
  .container {
    width: min(100% - 1.5rem, 1180px);
  }

  .service-detail {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .service-detail .service-num {
    font-size: 2rem;
  }

  .service-card {
    align-items: flex-start;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal {
    width: 100%;
    gap: .75rem 1rem;
  }
}

/* ---------- PHONES ---------- */
@media (max-width: 560px) {
  .container {
    width: min(100% - 1.25rem, 1180px);
  }

  .hero-slider {
    min-height: 480px;
  }

  .slide-content h1,
  .slide-content h2 {
    font-size: clamp(1.65rem, 9vw, 2.2rem);
  }

  .slide-content p {
    font-size: .93rem;
  }

  .btn {
    padding: .75rem 1.15rem;
    font-size: .9rem;
  }

  .slide-content .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .about-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .founder-wrap {
    border-radius: 12px;
  }

  .founder-photo img {
    aspect-ratio: 4 / 3;
  }

  .founder-badge {
    max-width: 100%;
  }

  .contact-row {
    gap: .75rem;
  }

  .contact-row .icon {
    width: 38px;
    height: 38px;
  }

  .filter-bar {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: .5rem;
    scrollbar-width: thin;
  }

  .filter-btn {
    flex: 0 0 auto;
  }

  .back-to-top {
    width: 44px;
    height: 44px;
    right: 1rem;
    bottom: 1rem;
  }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width: 380px) {
  .container {
    width: calc(100% - 1rem);
  }

  .brand-name span {
    display: none;
  }

  .brand img {
    height: 34px;
  }

  .hero-slider {
    min-height: 450px;
  }

  .slide-content {
    padding-bottom: 3.25rem;
  }

  .about-stats {
    grid-template-columns: 1fr;
  }

  .service-card {
    flex-direction: column;
    gap: .75rem;
  }

  .service-num {
    width: auto;
  }
}

/* ---------- LANDSCAPE PHONES ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-slider {
    height: 100svh;
    min-height: 420px;
  }

  .slide-content {
    padding-bottom: 3.25rem;
  }

  .slide-content p {
    max-height: 3.2em;
    overflow: hidden;
  }
}

/* ---------- TOUCH DEVICES ---------- */
@media (hover: none) and (pointer: coarse) {
  .pillar-card:hover,
  .service-card:hover,
  .gallery-item:hover img,
  .btn:hover {
    transform: none;
  }

  .nav-links a,
  .filter-btn,
  .btn,
  .slider-arrow,
  .back-to-top {
    -webkit-tap-highlight-color: transparent;
  }

  .nav-links a {
    padding-block: .5rem;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .pillar-card,
  .service-card,
  .gallery-item img,
  .btn,
  .back-to-top {
    transition: none !important;
  }
}

/* ---------- SAFE AREA FOR MODERN PHONES ---------- */
@supports (padding: max(0px)) {
  .navbar-inner {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .back-to-top {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
}