/* =============== THEME & TOKENS =============== */
:root{
  --bg:#fff; --ink:#0b0d12; --muted:#4b5563;
  --lemon-1:#F9E588; --lemon-2:#F4D35E; --leaf-deep:#0f3d2e;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.12);

  /* Split offsets */
  --split-start: clamp(160px, 21vw, 380px);
  --center-offset: 96px;
  --split-stop: var(--center-offset);
  --split-stop-lemons: var(--center-offset);

  /* Top logo still image size */
  --brand-logo-min: 360px;
  --brand-logo-vw:  30vw;
  --brand-logo-max: 560px;

  /* Yellow asset sizing */
  --yellow-header-h:    88px;
  --yellow-header-h-sm: 220px;
  --yellow-card-h:      200px;
  --yellow-card-h-sm:   150px;
  --yellow-btn-mission-h: 288px;
  --yellow-btn-growers-h: 140px;

  /* UI sizes */
  --totop-size: clamp(56px, 7vw + 20px, 92px);
  --totop-arrow-size: clamp(22px, 6vw, 42px);

  /* Media page */
  --media-gap: 18px;
  --media-surface: #ffffff;
  --media-shadow: 0 10px 28px rgba(0,0,0,.12);
}

/* Phones */
@media (max-width: 600px){
  :root{
    --center-offset: 24px;
    --split-start:   clamp(90px, 24vw, 240px);
  }
}

/* =============== BASE =============== */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
h1,h2,h3{line-height:1.15;margin:0 0 .35em}
p{margin:0 0 1em}
section{padding:72px 24px}
.container{width:min(1100px,92%);margin:auto}
.section-sub{color:var(--muted)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Panels */
.panel{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:28px;box-shadow:0 18px 44px rgba(0,0,0,.10)}

/* =============== NAV (FIXED) =============== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:3000;
  border-bottom:1px solid rgba(0,0,0,.06);
  transition: transform .25s, background-color .2s ease, backdrop-filter .2s ease, box-shadow .25s ease;
}
#nav-spacer{height:76px}
.site-nav.nav--hide{ transform: translateY(-100%); }
.site-nav.nav--glass{ background: rgba(255,255,255,.25); backdrop-filter: blur(10px) saturate(1.15); }
.site-nav.nav--solid{ background: #ffffff; backdrop-filter: none; }

.nav-inner{width:min(1200px,92%);margin:auto;height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-logo{height:72px;width:auto;object-fit:contain}
.lang-switch{display:inline-flex;align-items:center}
.lang-label { white-space: nowrap; }

/* Language toggle */
.lang-toggle{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.10);
  cursor:pointer; transition: box-shadow .22s ease, transform .22s ease;
}
.flag{
  display:inline-grid; place-items:center; font-weight:800; font-size:.85rem; line-height:1;
  width:26px; height:26px; border-radius:50%;
  background: linear-gradient(135deg, var(--lemon-1), var(--lemon-2));
  color:#0f3d2e;
}
.lang-toggle:hover,.lang-toggle:focus-visible{
  box-shadow:0 0 0 3px rgba(244,211,94,.55),0 10px 24px rgba(244,211,94,.35);
  transform: translateY(-1px);
  outline: none;
}

/* Mobile menu */
.nav-toggle{display:none;background:none;border:none;cursor:pointer}
.nav-toggle .bar{display:block;width:24px;height:2px;margin:4px 0;background:currentColor;border-radius:2px}

/* Links */
.nav-links{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{font-weight:600;position:relative;white-space:nowrap;font-size:clamp(.92rem,1.0vw,1.05rem)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;background:linear-gradient(135deg,var(--lemon-1),var(--lemon-2));transform:scaleX(0);transform-origin:left;transition:transform .22s;border-radius:3px}
.nav-links a:hover::after{transform:scaleX(1)}

@media (max-width:900px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:44px;height:38px}
  .nav-links{
    position:fixed; top:76px; left:0; right:0; z-index:1100;
    background:#fff; flex-direction:column; gap:16px; padding:0 20px;
    box-shadow:0 14px 28px rgba(0,0,0,.12);
    max-height:0; overflow:hidden; opacity:0; transform:translateY(-8px);
    transition:max-height .60s ease, opacity .40s ease, transform .40s ease;
  }
  body.nav-open .nav-links{ max-height:80vh; opacity:1; transform:none; padding:18px 20px 22px; }
  .nav-links .btn-growers-img img{ height: 180px !important; }
}

/* Growers button */
.nav-links a.btn-growers-img::after{display:none!important}
.btn-growers-img,
.btn-growers-img img{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important}
.btn-growers-img{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s ease, box-shadow .25s ease}
@media (min-width:1200px){ .btn-growers-img img{height:var(--yellow-btn-growers-h)!important} }
@media (min-width:600px) and (max-width:1199.98px){ .btn-growers-img img{height:120px!important} }
@media (max-width:599.98px){ .btn-growers-img img{height:100px!important} }
.btn-growers-img:hover,.btn-growers-img:focus-visible{transform:translateY(-8px) scale(1.08);box-shadow:0 18px 44px rgba(0,0,0,.18)}

/* =============== BRAND INTRO (top trio) =============== */
.brand-intro{padding:28px 0 8px;background:#fff}
.brand-intro__inner{
  display:grid;align-items:center;justify-items:center;place-content:center;
  grid-template-columns:repeat(3,minmax(260px,1fr));
  column-gap:clamp(24px,3vw,48px);row-gap:24px;max-width:1320px;margin:0 auto;
}
.brand-hero-logo-wrap{
  position:relative;
  width: clamp(var(--brand-logo-min), var(--brand-logo-vw), var(--brand-logo-max));
  aspect-ratio: 19 / 6;
  margin: 0 auto;
}
.media-fill{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.brand-hero-logo{ filter: drop-shadow(0 14px 34px rgba(0,0,0,.12)); }
.brand-hero-logo.is-playing { transform: none; } 
.brand-hero-logo.no-shadow  { filter: none !important; }

/* Center gallery */
.intro-gallery{position:relative;width:min(540px,36vw);aspect-ratio:1/1}
.intro-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .6s ease,opacity .6s ease;filter:drop-shadow(0 28px 64px rgba(0,0,0,.30))}
.intro-frame.off-left{opacity:0;transform:translateX(-64px)}
.intro-frame.center{opacity:1;transform:translateX(0)}
.intro-frame.off-right{opacity:0;transform:translateX(64px)}
.intro-gallery.reveal{opacity:0;transform:translateY(-80px);transition:opacity .8s,transform .8s}
.intro-gallery.reveal.in{opacity:1;transform:none}

/* Ventura Maid */
.intro-maid{width:min(460px,34vw);height:auto;border-radius:16px;object-fit:cover;box-shadow:0 18px 44px rgba(0,0,0,.18)}
@media (max-width: 480px){ .brand-intro{ padding-bottom: 18px; } .intro-maid{ margin-bottom: 6px; } }

@media (min-width: 1200px){
  .brand-intro__inner{
    grid-template-columns:max-content minmax(420px, 520px) max-content;
    column-gap: clamp(48px, 6vw, 96px);
    max-width: min(1400px, 92vw);
  }
  .intro-gallery{ width: clamp(380px, 26vw, 480px); }
  .intro-maid{    width: clamp(300px, 22vw, 380px); }
}

@media (max-width:480px){
  .brand-intro{ padding-top: 6px; }
  .brand-intro__inner{ grid-template-columns:1fr; row-gap: 8px; max-width: 94vw; }
  .brand-hero-logo-wrap{ width: min(72vw, 360px); max-height: 22vh; }
  .intro-gallery{       width: min(66vw, 320px); max-height: 30vh; }
  .intro-maid{          width: min(60vw, 300px); max-height: 22vh; filter:none; box-shadow:none; }
  .intro-frame{         filter:none; }
}

/* =============== HERO SLIDER =============== */
.fs-gallery{position:relative;height:86vh;min-height:560px;overflow:hidden;background:#000}
@media (max-width:720px){.fs-gallery{height:72vh;min-height:480px}}
.fs-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
.fs-slide.active{animation:slideFadeIn 1000ms cubic-bezier(.22,.72,.22,1) forwards}
.fs-slide.exit{animation:fadeOutOnly 800ms cubic-bezier(.22,.72,.22,1) forwards}
@keyframes slideFadeIn{from{opacity:0;transform:translateX(64px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeOutOnly{from{opacity:1}to{opacity:0}}

.fs-overlay{
  position:absolute;inset:0;z-index:2;display:grid;
  grid-auto-flow:row; align-content:center; justify-items:center;
  row-gap:10px; padding:18px; text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.50) 100%);
}
.accent-bar{width:74px;height:6px;border-radius:6px;background:linear-gradient(135deg,var(--lemon-1),var(--lemon-2))}
.hero-title{margin:6px 0 2px;font-size:clamp(2rem,5vw,3.6rem);color:var(--lemon-2);text-shadow:0 3px 22px rgba(0,0,0,.58);font-weight:900}
.hero-sub{margin:0 auto 4px;max-width:900px;color:#f5f5f5;font-size:clamp(1.05rem, 2.1vw, 1.35rem)}
.hero-ctas{display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center}
.hero-link{font-weight:700;color:#fff;opacity:.95;font-size:clamp(1.02rem, 1.9vw, 1.25rem)}
.hero-link:hover{opacity:1;text-decoration:underline}
.hero-link--below{margin-top:2px}
.fs-pause{position:absolute;right:14px;bottom:14px;z-index:3;width:42px;height:42px;border-radius:999px;border:none;cursor:pointer;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center}

/* Button images */
.btn-mission-img,
.btn-mission-img img{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important}
.btn-mission-img{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s ease, box-shadow .25s ease}
.btn-mission-img img{height:var(--yellow-btn-mission-h); width:auto; filter: drop-shadow(0 18px 38px rgba(0,0,0,.34))}
@media (max-width:599.98px){.btn-mission-img img{height:calc(var(--yellow-btn-mission-h) * .65)}}
.btn-mission-img:hover,.btn-mission-img:focus-visible{transform:translateY(-6px) scale(1.04);box-shadow:0 18px 44px rgba(0,0,0,.18)}
.hero-ctas a.btn-mission-img::after{display:none!important}

/* Header yellow images as buttons */
.btn-header-img,
.btn-header-img img{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important}
.btn-header-img{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s ease, box-shadow .25s ease}
.btn-header-img img{height: var(--yellow-header-h); width:auto; filter: drop-shadow(0 20px 46px rgba(0,0,0,.36))}
.btn-header-img:hover,.btn-header-img:focus-visible{transform:translateY(-6px) scale(1.04);box-shadow:0 18px 44px rgba(0,0,0,.18)}
@media (max-width: 600px){ .btn-header-img img{ height: var(--yellow-header-h-sm); } }

/* =============== SPLIT (green/white) =============== */
.split-section{
  position:relative;min-height:78vh;
  background:linear-gradient(90deg,var(--leaf-deep) 50%,#fff 50%);
  display:flex;flex-direction:column;justify-content:center;gap:24px;overflow:hidden
}
.split-inner{width:min(1200px,92%);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px}
.split-left{text-align:right}
.script-title{
  font-family:"Great Vibes",cursive;color:var(--lemon-2);text-shadow:0 5px 28px rgba(0,0,0,.26);
  line-height:1.05; font-size: clamp(2.6rem, 9vw, 9.5rem);
  transform:translateX(calc(-1*var(--split-start))); max-width: 100%;
}
.split-right{display:grid;place-items:center}
.split-lemons{
  width:min(980px,95%); max-width:98vw; max-height:62vh; height:auto;
  transform:translateX(var(--split-start));
  filter:drop-shadow(0 26px 56px rgba(0,0,0,.22))
}
.split-row{grid-template-columns:1fr 1fr;align-items:start}
.split-sub{
  margin:0;font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(1.9rem,3.8vw,2.6rem);
  color:var(--lemon-2);opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease
}
.split-sub-right{color:var(--leaf-deep)!important}
.split-sub-left{text-align:right}
.split-sub-right{text-align:left}

/* Center alignment edges */
.split-sub-left  { padding-right: var(--center-offset); }
.split-sub-right { padding-left:  var(--center-offset); }

/* Animate */
.split-section.entered .script-title{ transform:translateX(calc(-1*var(--split-stop))); transition:transform .95s cubic-bezier(.2,.7,.2,1) }
.split-section.entered .split-lemons{  transform:translateX(var(--split-stop-lemons)); transition:transform .95s cubic-bezier(.2,.7,.2,1) }
.split-section.entered .split-sub{     opacity:1; transform:none; transition-delay:.95s }

/* Large screens */
@media (min-width: 1024px){ :root{ --split-stop-lemons: calc(var(--center-offset) - 65px); } }

/* Small screens */
@media (max-width:480px){
  .split-row{ transform:none; }
  .script-title{ line-height: 1.08; }
  .split-sub{ font-size:clamp(1.4rem,5.5vw,1.8rem); }
}

/* =============== SECTION HEADERS =============== */
.section-header-img{display:flex;justify-content:center;margin-bottom:6px}

/* =============== SERVICES CARDS =============== */
#services .section-sub { text-align: center; margin-top: 4px; }
.cards{display:grid;gap:18px;margin-top:12px}
@media (min-width:720px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:520px) and (max-width:719px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
  background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  transition:transform .28s,box-shadow .28s,border-color .28s,filter .28s
}
.card:hover,.card:focus-within{
  transform:translateY(-12px) scale(1.01);
  box-shadow:0 18px 44px rgba(0,0,0,.18),0 0 0 3px rgba(249,229,136,.18);
  border-color:rgba(249,229,136,.55);filter:saturate(1.04)
}
.card h3{margin:6px 0 4px;font-size:1.15rem}
.card p{margin:0;color:var(--muted)}
.card-header-img{display:flex;align-items:center;justify-content:center;margin:2px 0 6px}
.card-header-img img{height: var(--yellow-card-h); width:auto; filter: drop-shadow(0 20px 44px rgba(0,0,0,.30))}
@media (max-width:599.98px){ .card-header-img img{ height: var(--yellow-card-h-sm) } }

/* =============== PROJECTS GALLERY + LIGHTBOX (site-wide) =============== */
#gallery .marquee{--gap:18px;--speed:24s;--band-h:460px;position:relative;overflow:hidden;height:var(--band-h)}
@media (max-width:900px){#gallery .marquee{--band-h:280px}}
#gallery .marquee__track{display:flex;gap:var(--gap);list-style:none;margin:0;padding:6px 0;width:max-content;animation:marquee var(--speed) linear infinite}
#gallery .marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#gallery .marquee__item figure{--item-h:430px;position:relative;margin:0;height:var(--item-h);display:flex;align-items:center;justify-content:center;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.20)}
@media (max-width:900px){#gallery .marquee__item figure{--item-h:240px}}
#gallery .marquee__item img{height:100%;width:auto;object-fit:contain;cursor:pointer}
.caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 90%);color:#fff;font-weight:600}

/* Legacy lightbox (other pages) */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:1200;padding:24px}
.lightbox.show{display:flex}
.lightbox__figure{max-width:92vw;max-height:86vh;margin:0;position:relative}
.lightbox__figure img{max-width:100%;max-height:86vh;display:block;border-radius:12px}
.lightbox__figure figcaption{margin-top:10px;color:#fff;text-align:center;font-weight:600}
.lightbox__close,.lightbox__nav{position:absolute;top:18px;background:rgba(255,255,255,.30);color:#111;border:none;cursor:pointer;border-radius:999px;width:52px;height:52px;display:grid;place-items:center;backdrop-filter:blur(4px)}
.lightbox__close{right:18px;top:18px}
.lightbox__prev{left:18px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:18px;top:50%;transform:translateY(-50%)}
body.lightbox-open{overflow:hidden}

/* =============== FOOTER & TO-TOP =============== */
footer{text-align:center;padding:42px 24px 64px;color:#6b7280}
.rights-brandline{display:inline-flex;align-items:center;gap:10px}
.rights-icon{width:56px;height:56px;object-fit:contain;filter:none!important;}
.rights-brand{font-weight:700;margin-right:8px}
.footer-logo{width:200px;height:auto;margin:0 auto 8px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.16))}
.gif-bottom{ display:block; margin:0 auto 8px; width:min(580px, 92%); height:auto; }

.to-top{
  position:fixed;right:16px;bottom:16px;z-index:4000;width:var(--totop-size);height:var(--totop-size);
  border:0;border-radius:50%;background:transparent;
  box-shadow:18px 22px 44px rgba(0,0,0,.44);opacity:0;pointer-events:none;
  transform:translateY(10px) scale(.96);transition:opacity .2s,transform .2s;--lem-rot:0deg;
}
.to-top::before{content:"";position:absolute;inset:0;border-radius:50%;background:url('images/yellowscrolltotop.png') center/cover no-repeat;transform:rotate(var(--lem-rot));transition:transform 700ms cubic-bezier(.25,.75,.25,1)}
.to-top::after{content:"↑";position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:var(--totop-arrow-size);color:#0f3d2e;text-shadow:0 1px 2px rgba(255,255,255,.55)}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
@media (max-width:480px){.to-top{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:clamp(50px,14vw+14px,70px);height:clamp(50px,14vw+14px,70px)}}

/* =============== ACCESSIBILITY & SAFETY =============== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .media-fill,.intro-frame,.reveal,.fs-slide.active,.fs-slide.exit,
  .split-section.entered .script-title,.split-section.entered .split-lemons,
  .split-section.entered .split-sub,
  .cards .card{transition:none!important;animation:none!important;transform:none!important;opacity:1!important}
  #gallery .marquee__track{animation:none!important}
}

/* Overflow safety */
html, body { overflow-x: hidden; }
section, .container { max-width: 100vw; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Spanish nav text balance */
@media (min-width: 1024px){
  html[lang="es"] .nav-links { gap: 18px; flex-wrap: nowrap; }
  html[lang="es"] .nav-links a { white-space: nowrap; font-size: clamp(.92rem, 1vw, 1rem); }
}

/* Shared fade-in logo */
.brand-hero-logo.fade-in{
  opacity:0; transform:translateY(12px);
  animation:logoFade .9s cubic-bezier(.2,.7,.2,1) .15s forwards;
  filter:none!important; border:0!important;
}
@keyframes logoFade{to{opacity:1;transform:none}}

/* Contact helpers */
#contact .card { transition: none !important; }
#contact .card:hover, #contact .card:focus-within {
  transform: none !important;
  box-shadow: var(--shadow) !important;
  border-color: rgba(0,0,0,.06) !important;
  filter: none !important;
}
#contact .contact-cards{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px; align-items:start; margin-top:16px;
}
@media (max-width:800px){ #contact .contact-cards{ grid-template-columns:1fr; }}

/* Contact blocks */
.map-wrap{margin:0 auto 30px}
.map-frame{
  width:100%; height:clamp(420px, 62vh, 700px);
  border:0; border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.12);
}
.contact-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:900px){ .contact-grid{grid-template-columns:1fr 1fr} }
.contact-card{height:100%;display:flex;flex-direction:column}
.contact-info{line-height:1.9}
.contact-info p{margin:8px 0}
.contact-info .label{font-weight:700;color:#0f3d2e}
.form-grid{display:grid;gap:14px}
.form-row{display:grid;gap:8px}
.form-row label{font-weight:600;color:#0b0d12}
.form-input,.form-textarea{
  width:100%;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:12px 14px;
  font:inherit;background:#fff;transition:box-shadow .2s,border-color .2s
}
.form-input:focus,.form-textarea:focus{outline:none;border-color:rgba(244,211,94,.75);box-shadow:0 0 0 3px rgba(244,211,94,.30)}
.form-help{font-size:.92rem;color:#4b5563;margin-top:2px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-submit{
  align-self:start;background:linear-gradient(135deg,var(--lemon-1),var(--lemon-2));
  color:#0f3d2e;border:0;font-weight:800;padding:12px 18px;border-radius:999px;cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .2s,box-shadow .2s
}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.22)}

/* =============== MEDIA PAGE UI (lightbox + info) =============== */
.media-section { margin-top: 18px; }
.media-section .section-title { margin-bottom: 6px; }
.media-section .section-sub { opacity: .85; margin: 0 0 12px; }
.labels-all-link { text-decoration: underline; }

.media-card{
  display:block; text-decoration:none; color:inherit;
  background:#ffffff; border-radius:14px;
  box-shadow:var(--media-shadow); overflow:hidden;
}
.media-card img,.media-card video{ width:100%; height:auto; display:block; }
.media-card h3{ margin:10px 12px 6px; font-weight:700; font-size:1.05rem; }
.media-card p{  margin:0 12px 14px; font-size:.95rem; opacity:.9; }

.strip{ position:relative; width:100%; user-select:none; }
.strip-viewport{ overflow:hidden; width:100%; border-radius:16px; }
.strip-track{ display:flex; gap: var(--media-gap); padding:6px; }

.strip-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2; border:0; background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  width:42px; height:42px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.strip-prev{ left:-8px; }
.strip-next{ right:-8px; }

.overlay{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.8); z-index:1000;
}
.overlay.is-open{ display:flex; }
.overlay__panel{
  position:relative; max-width:min(1200px, 92vw); max-height:88vh;
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.overlay__close{
  position:absolute; top:10px; right:10px;
  background:#fff; border:0; font-size:22px; line-height:1;
  padding:6px 10px; border-radius:10px; cursor:pointer;
}

/* Media page lightbox internals (with captions) */
.lightbox__body{ display:flex; flex-direction:column; gap:10px; padding:16px; }
.lightbox__media{ display:flex; align-items:center; justify-content:center; }
.lightbox__media img{ max-width:100%; max-height:66vh; border-radius:8px; }
.lightbox__thumbs{ display:flex; gap:8px; overflow:auto; padding:6px; }
.lightbox__thumbs img{ height:64px; width:auto; border-radius:6px; opacity:.65; cursor:pointer; }
.lightbox__thumbs img.is-active{ opacity:1; outline:2px solid #0f3d2e; }
.lightbox__caption{ color:#0b0d12; font-size:.98rem; line-height:1.45; padding: 2px 4px 0; }
.lightbox__caption .lb-cap-link{ font-weight:800; color:#0f3d2e; text-decoration:underline; margin-left:6px; }

/* Info popup */
.info__wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:18px; padding:18px; }
.info__title{ font-size:1.35rem; font-weight:800; margin:0 0 8px; }
.info__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.chip{ background:#eef5f2; border:1px solid #d7e7df; color:#0f3d2e; border-radius:999px; padding:4px 10px; font-size:.82rem; }
.info__text{ line-height:1.55; }
.info__media{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.info__media img,.info__media video{ width:100%; height:auto; border-radius:10px; }
.info__link{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-weight:800; color:#0f3d2e; text-decoration:underline; }
@media (max-width:900px){ .info__wrap{ grid-template-columns:1fr; } }
/* About: make the top historical image larger on small screens */
@media (max-width: 600px){
  /* Break the "Historic photo" section out of the container to go edge-to-edge */
  section[aria-label="Historic photo"]{
    /* full-bleed trick */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    /* tighter vertical padding so the image dominates */
    padding: 12px 0;
  }

  /* Clean frame (optional: keep the white border on the image) */
  section[aria-label="Historic photo"] .panel{
    border-radius: 0;
    box-shadow: none;
    border: 0;
    padding: 0;
  }

  /* Ensure the photo itself fills the viewport width nicely */
  section[aria-label="Historic photo"] img{
    width: 100vw;
    height: auto;
    /* keep the white mat; tweak if you want it thinner on phones */
    border-width: 8px;
  }
}
/* ===== EMERGENCY VISIBILITY HOTFIX ===== */
.overlay { display: none !important; }
.overlay.is-open { display: flex !important; }  /* only if JS adds .is-open */
#lightbox, #infobox { display: none !important; }
#lightbox.is-open, #infobox.is-open { display: flex !important; }

html, body { opacity: 1 !important; visibility: visible !important; }

/* In case any global reset accidentally hid content */
main, header, footer, nav, section { display: block !important; }
/* ================== CAREERS PAGE TWEAKS (append at end) ================== */

/* Wider feel for the careers content without touching other pages */
main.container { max-width: none; }
@media (min-width: 1100px){
  main.container { width: min(1300px, 94%); }
}

/* Filters: make selects match form controls and behave well on mobile */
#filters-title + div select{
  appearance: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  line-height: 1.2;
}
#siteSel:disabled{ opacity:.55; cursor:not-allowed; }

/* Jobs grid: responsive 1→2→3 columns while keeping your card look */
#jobGrid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 700px){
  #jobGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  #jobGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Give the cards a tiny bit more breathing room in this dense grid */
#jobGrid .card{ padding:18px; }

/* Apply overlay (modal) sizing and spacing */
#applyOverlay .overlay__panel{
  max-width: min(900px, 94vw);
}
#applyOverlay .overlay__panel .info__title{
  margin-top: 6px;
}

/* Make overlay close button consistent and visible on all backgrounds */
.overlay__close{
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Minor polish: count styling next to "Open Positions" */
#results-title + #resultCount{
  font-weight: 700; color: var(--leaf-deep);
}

/* Ensure the top trio keeps its spacing when panels are widened */
.brand-intro{ padding-top: 28px; padding-bottom: 8px; }

/* Scroll-to-top visibility threshold feels better on a content-heavy page */
@media (min-width: 601px){
  .to-top{ box-shadow: 18px 22px 44px rgba(0,0,0,.36); }
}

/* Keep reveals snappy on Careers even on slower devices */
.reveal.in{ transition-duration: .6s; }
/* ---------- Careers page additions ---------- */
main.container.careers-wide { width: min(1300px, 94%); }

#jobGrid.cards{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width:600px){ #jobGrid.cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:900px){ #jobGrid.cards{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width:1200px){ #jobGrid.cards{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.job-thumb{
  position: relative;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  padding: 10px;
  margin: 2px 0 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);
  min-height: 160px;
}
.job-thumb img{
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  display: block;
}

.job-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }

.details-body{ padding: 18px; max-width: 900px; }
.details-head{ margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; }
.details-meta{ margin: 2px 0 12px; color: #4b5563; }
.details-desc{ line-height: 1.6; white-space: pre-wrap; }

.captcha-wrap{
  display:grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  margin-top: 6px;
}
.captcha-canvas{
  background: #fff; border: 1px dashed rgba(0,0,0,.2); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.captcha-controls{ display:flex; gap:8px; align-items: center; }
.captcha-input{
  width: 100%; border:1px solid rgba(0,0,0,.12); border-radius: 10px; padding: 10px 12px; font: inherit;
}
.btn-ghost{
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius: 999px; padding: 8px 12px; cursor:pointer; font-weight:700;
}

.dim { opacity: .85; }

.banner-error{
  background: #fff4e6; border:1px solid #ffd8a8; color:#7f3f00;
  padding: 10px 12px; border-radius: 12px; font-weight: 700; margin: 8px 0 0;
}
/* Careers: 4-up grid, responsive */
#jobGrid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
@media (max-width:1100px){ #jobGrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:800px){  #jobGrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){  #jobGrid{ grid-template-columns:1fr; } }

/* Card thumbnail: full image visible with soft shadow (no crop) */
.card .thumb-wrap{
  background:#fff;
  border-radius:14px;
  box-shadow:0 14px 36px rgba(0,0,0,.14);
  padding:10px;
  display:flex; align-items:center; justify-content:center;
  min-height:160px;
}
.card .thumb-wrap img{
  max-width:100%; max-height:160px; height:auto; width:auto; object-fit:contain;
}

/* Details modal content */
.overlay__body{ padding:18px; }
.job-desc{ line-height:1.55; color:#0b0d12; }

/* Careers overlay guard (in case other pages override) */
.overlay { display: none; }
.overlay.is-open { display: flex; }

/* Ensure 4-up grid fallback if .cards base changes later */
.cards.cards-4 { display: grid; gap: 18px; }
@media (min-width:1100px){ .cards.cards-4{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width:720px) and (max-width:1099.98px){ .cards.cards-4{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width:520px) and (max-width:719.98px){ .cards.cards-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:519.98px){ .cards.cards-4{ grid-template-columns: 1fr; } }

/* --- Careers: spacing + overlay priority --- */

/* More space between the card image and the job title */
.card .card-header-img { 
  margin: 2px 0 18px;  /* was ~6px; bump the bottom gap */
}

/* Ensure the apply popup always sits above the fixed nav */
#applyOverlay {
  z-index: 12000 !important;            /* higher than .site-nav (3000) */
  align-items: center !important;        /* center the panel vertically, not under nav */
}
#applyOverlay .overlay__panel {
  margin-top: 0 !important;              /* remove any top offset so it’s truly over the nav */
  position: relative;
  z-index: 12001;                        /* keep panel above any inner elements */
}

/* (Optional) Nudge the image shadow/spacing a touch more for polish */
.job-thumb-img {
  margin-bottom: 4px;                    /* extra breathing room above title */
  filter: drop-shadow(0 24px 52px rgba(0,0,0,.36));
}

/* === Global "gleam" hover effect (same vibe as labels page) === */
@keyframes gleam-sweep {
  from { transform: translateX(-150%) skewX(-18deg); }
  to   { transform: translateX(150%)  skewX(-18deg); }
}

/* Elements that already have a hover emphasis */
.card,
.label-card,
.btn-primary,
.btn-growers-img {
  position: relative;
  overflow: hidden;
  border-radius: inherit; /* respects each component's radius */
  isolation: isolate;     /* keeps the sheen above content without weird blending */
}

/* The moving light streak */
.card::after,
.label-card::after,
.btn-primary::after,
.btn-growers-img::after,
.gleam::after {                  /* optional utility class for anything else */
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.45) 48%,
    rgba(255,255,255,.12) 55%,
    transparent 70%
  );
  transform: translateX(-150%) skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  will-change: transform;
}

/* Trigger the sweep on hover/focus */
.card:hover::after,               .card:focus-visible::after,
.label-card:hover::after,         .label-card:focus-visible::after,
.btn-primary:hover::after,        .btn-primary:focus-visible::after,
.btn-growers-img:hover::after,    .btn-growers-img:focus-visible::after,
.gleam:hover::after,              .gleam:focus-visible::after {
  opacity: 1;
  animation: gleam-sweep .85s cubic-bezier(.25,.8,.25,1);
}

/* Respect accessibility prefs */
@media (prefers-reduced-motion: reduce) {
  .card::after, .label-card::after, .btn-primary::after, .btn-growers-img::after, .gleam::after { display: none; }
}

/* === Wonderful Citrus footer logo (no shadow anywhere) === */
.footer-partner {
  display: flex;
  justify-content: center;
  margin: 6px 0 4px;
}
.footer-partner .partner-logo,
.partner-logo,
.footer-partner img {
  max-height: 26px;
  width: auto;
  filter: none !important;
  box-shadow: none !important;
}

/* If any generic drop-shadows exist, ensure they never touch the partner logo */
.footer-partner img,
.partner-logo { filter: none !important; box-shadow: none !important; }

/* Disable state for one-click submit */
button[disabled]{
  opacity:.45;
  cursor:not-allowed !important;
  pointer-events:none;
}
/* ===== Lightbox Guard (z-index & HUD click-through) ===== */

/* Put EVERY common lightbox overlay above site tool overlays */
.fancybox-container,
.glightbox-container,
.pswp, .pswp__bg, .pswp__scroll-wrap,
.mfp-wrap, .mfp-bg,
.lb-overlay, .lb-dataContainer, .lb-outerContainer,
.lity, .lity-wrap, .lity-overlay,
.remodal-overlay, .remodal,
.slbOverlay, .slbWrap,
.SimpleLightbox,
.lightcase-overlay, .lightcase-case {
  z-index: 2147483646 !important; /* highest safe layer */
}

/* While any lightbox is open, let clicks pass through HUD and dim it a bit */
body.fancybox-active #hud,
body.glightbox-open #hud,
body.pswp--open #hud,
body.mfp-open #hud,
body.lightbox-open #hud,
body.lity-open #hud,
body.remodal-is-opened #hud,
body.slbActive #hud,
body.lightcase-open #hud {
  pointer-events: none !important;
  opacity: .25 !important;
}

/* If your sticky header sits above the overlay, let the overlay win */
body.fancybox-active header,
body.glightbox-open header,
body.pswp--open header,
body.mfp-open header,
body.lightbox-open header,
body.lity-open header,
body.remodal-is-opened header,
body.slbActive header,
body.lightcase-open header {
  z-index: 0 !important;
}

/* Don’t let generic classes from diagnostics collide with site lightboxes */
.modal:not(#shade .modal),
.row:not(#shade .row),
.err:not(#shade .err) {
  all: unset; /* neutralize accidental global styles if they slip in */
}
/* ===========================
   HERO IMG TEST BRANCH
   =========================== */

.fs-gallery {
  position: relative;
  height: 86vh;
  overflow: hidden;
}

.fs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.fs-slide.active {
  opacity: 1;
  pointer-events: auto;
  animation: slideFadeIn_img 1000ms cubic-bezier(.22,.72,.22,1) forwards;
}

.fs-slide.exit {
  animation: fadeOut_img 800ms cubic-bezier(.22,.72,.22,1) forwards;
}

.fs-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none !important;
  backface-visibility: hidden;
}

/* IDENTICAL MOTION — NO RASTER FLATTENING */
@keyframes slideFadeIn_img {
  from {
    opacity: 0;
    transform: translateX(64px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOut_img {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Match BreakingGroundTeam image visual height to sibling cards */
img[src$="BreakingGroundTeam.jpg"] {
  width: 100%;
  height: 100%;
  max-height: 220px;        /* matches image height of other cards */
  object-fit: contain;     /* do NOT crop */
  display: block;
  background: #fff;
}
/* Lock image area height for all cards */
.cards .card img {
  height: 220px;
  width: 100%;
  object-fit: cover;
  display: block;
}

.card-header-img img {
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* === SPLIT MOBILE: keep lemons, push "Expert Growers" right a bit === */
@media (max-width: 600px){

  /* Keep lemons where they are now */
  .split-section.entered .split-lemons{
    transform: translateX(calc(var(--center-offset) - 18px)) !important;
  }

  /* Push only the RIGHT subtitle back to the right */
  .split-sub-right{
    padding-left: calc(var(--center-offset) + 22px) !important;
    text-align: left !important;
  }
}