/* ============================================================
   Vegalab.com — shared site styles (header, footer, base, utilities)
   Brand: Hedley New · teal #0084A9 / deep-teal #003846 · crop-green #6CB33F
   ============================================================ */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:#fff;color:#272525;font-family:'Hedley New',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{text-decoration:none;}
img{max-width:100%;}

@keyframes vlUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes vlReveal{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes hdrDrop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* Scroll reveal — animates as the section enters the viewport, with a no-JS fallback. */
.vlrev{animation:vlReveal both;animation-timeline:view();animation-range:entry 3% entry 42%;}
@supports not (animation-timeline:view()){
  .vlrev{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
  .vlrev.is-in{opacity:1;transform:none;}
}

/* ---------- LAYOUT UTILITIES ---------- */
.vl-wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
.vl-section{padding:76px 0;}
.vl-h1{font-weight:300;font-size:clamp(36px,4.6vw,60px);line-height:1.04;letter-spacing:-0.026em;margin:0 0 16px;color:#003846;text-wrap:balance;}
.vl-h2{font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-0.02em;margin:0;color:#003846;}
.vl-kicker{font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#4E8C27;margin-bottom:12px;}
.vl-lead{font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:#555;font-weight:300;}

/* ---------- HEADER ---------- */
.vl-header{position:fixed;top:0;left:0;right:0;z-index:1000;font-family:'Hedley New',system-ui,sans-serif;
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;
  background:transparent;border-bottom:1px solid rgba(255,255,255,0.16);}
.vl-header.is-solid{background:rgba(255,255,255,0.9);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid #E2E2E2;}
.vl-header.is-scrolled{box-shadow:0 2px 16px rgba(0,56,70,0.07);}
/* Solid/sticky variant for pages without a dark hero (e.g. contact) */
.vl-header--solid{position:sticky;background:rgba(255,255,255,0.9);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid #E2E2E2;}
.vl-header-inner{max-width:1240px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:72px;gap:32px;}
.vl-logo{border:0;display:flex;align-items:center;flex-shrink:0;}
.vl-logo img{height:30px;width:auto;display:block;}
.vl-logo .logo-solid{display:none;}
.vl-header.is-solid .vl-logo .logo-overlay,.vl-header--solid .vl-logo .logo-overlay{display:none;}
.vl-header.is-solid .vl-logo .logo-solid,.vl-header--solid .vl-logo .logo-solid{display:block;}
.vl-nav{display:flex;align-items:center;gap:30px;height:100%;}
.vl-navitem{position:relative;height:100%;display:flex;align-items:center;}

.vl-trigger{font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;color:#fff;
  border-bottom:2px solid transparent;padding-bottom:3px;text-decoration:none;
  transition:color .18s ease,border-color .18s ease;display:inline-flex;align-items:center;}
.vl-header.is-solid .vl-trigger,.vl-header--solid .vl-trigger{color:#003846;}
.vl-trigger:hover{color:#fff;border-bottom-color:#fff;}
.vl-header.is-solid .vl-trigger:hover,.vl-header--solid .vl-trigger:hover{color:#0084A9;border-bottom-color:#0084A9;}
.vl-navitem.is-open .vl-trigger,.vl-trigger.is-active{color:#fff;border-bottom-color:#fff;}
.vl-header.is-solid .vl-navitem.is-open .vl-trigger,.vl-header.is-solid .vl-trigger.is-active,
.vl-header--solid .vl-navitem.is-open .vl-trigger,.vl-header--solid .vl-trigger.is-active{color:#0084A9;border-bottom-color:#0084A9;}

.vl-megapanel{position:absolute;top:72px;right:0;background:#fff;border:1px solid #E2E2E2;border-radius:4px;
  box-shadow:0 16px 40px rgba(0,56,70,0.14);animation:hdrDrop .18s cubic-bezier(.2,.7,.2,1) both;display:none;}
.vl-navitem.is-open .vl-megapanel{display:block;}
.vl-mega-kicker{font-size:10.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:6px;}
.vl-mega-desc{font-size:13px;line-height:1.5;color:#555;margin-bottom:14px;}
.vl-megapanel a{display:block;padding:8px 0;font-size:13.5px;color:#2D2D2D;text-decoration:none;transition:color .15s ease;}
.vl-megapanel a.shop{color:#0084A9;font-weight:500;}
.vl-megapanel a:hover{color:#0084A9 !important;}

.vl-cta{font-size:14px;font-weight:500;padding:10px 20px;border-radius:2px;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:all .22s cubic-bezier(.2,.7,.2,1);color:#fff;background:transparent;border:1px solid rgba(255,255,255,0.55);}
.vl-header.is-solid .vl-cta,.vl-header--solid .vl-cta{background:#0084A9;border:1px solid #0084A9;}

/* ---------- SHARED CTA BAND ---------- */
.vl-ctaband{background:#E8D3A2;padding:64px 0;}
.vl-ctaband-inner{max-width:1240px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.vl-ctaband h2{font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-0.02em;margin:0;color:#003846;max-width:24ch;text-wrap:balance;}
.vl-ctaband a{font-size:14px;font-weight:500;background:#003846;color:#fff;padding:16px 32px;border-radius:2px;white-space:nowrap;transition:background .22s ease;}
.vl-ctaband a:hover{background:#0084A9;}

/* ---------- FOOTER ---------- */
.vl-footer{background:#003846;color:#fff;font-family:'Hedley New',system-ui,sans-serif;padding:72px 0 28px;}
.vl-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.12);}
.vl-footer-grid img{height:26px;width:auto;display:block;margin-bottom:22px;}
.vl-footer-addr{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,0.72);margin:0 0 18px;}
.vl-footer-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(255,255,255,0.22);border-radius:999px;font-size:11.5px;letter-spacing:0.04em;color:#ADE0EE;}
.vl-footer-badge .dot{width:6px;height:6px;border-radius:50%;background:#6CB33F;display:inline-block;}
.vl-footer-col h4{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#fff;margin:0 0 16px;}
.vl-footer-col a{color:rgba(255,255,255,0.7);font-size:13.5px;text-decoration:none;display:block;padding:5px 0;transition:color .15s ease;}
.vl-footer-col a:hover{color:#fff;}
.vl-footer-col a.shop{color:#ADE0EE;}
.vl-footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:16px;}
.vl-footer-copy{font-size:12px;color:rgba(255,255,255,0.5);}
.vl-footer-legal{display:flex;gap:24px;align-items:center;}
.vl-footer-legal a{font-size:12px;color:rgba(255,255,255,0.6);text-decoration:none;transition:color .15s ease;}
.vl-footer-legal a:hover{color:#fff;}

/* ---------- RESPONSIVE (shared chrome) ---------- */
@media (max-width:900px){
  .vl-nav{display:none;}
  .vl-footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:560px){
  .vl-footer-grid{grid-template-columns:1fr;}
  .vl-ctaband-inner{flex-direction:column;align-items:flex-start;}
}