/* ============================================================
   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%;height:auto;}

@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;}
}

/* ---------- FAQ (SEO / AEO) ---------- */
.vl-faq{background:#FBFAF6;border-top:1px solid #E2E2E2;padding:64px 0;}
.vl-faq h2{font-weight:300;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;color:#003846;margin:0 0 28px;}
.vl-faq-item{border-top:1px solid #E2E2E2;}
.vl-faq-item:last-child{border-bottom:1px solid #E2E2E2;}
.vl-faq-q{list-style:none;cursor:pointer;font-size:17px;font-weight:500;color:#003846;padding:20px 44px 20px 0;position:relative;}
.vl-faq-q::-webkit-details-marker{display:none;}
.vl-faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:300;line-height:1;color:#0084A9;transition:transform .2s ease;}
.vl-faq-item[open] .vl-faq-q::after{content:"\2013";}
.vl-faq-q:focus-visible{outline:2px solid #0084A9;outline-offset:3px;border-radius:2px;}
.vl-faq-a{padding:0 44px 22px 0;}
.vl-faq-a p{font-size:15px;line-height:1.65;color:#555;margin:0;max-width:80ch;}

/* ---------- INTERACTIVE TOOLS (Product Finder, Rate Calculator) ---------- */
.vl-tool{background:#fff;padding:48px 0 72px;}
.vl-tool-card{max-width:1080px;margin:0 auto;}
.vl-field{margin-bottom:24px;}
.vl-label{display:block;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#4E8C27;margin-bottom:10px;}
.vl-seg{display:inline-flex;border:1px solid #D5D5D5;border-radius:999px;overflow:hidden;background:#FBFAF6;}
.vl-seg button{font-family:inherit;font-size:13.5px;font-weight:500;color:#003846;background:transparent;border:0;padding:9px 20px;cursor:pointer;transition:background .18s,color .18s;}
.vl-seg button:hover{background:#EEF4EC;}
.vl-seg button.on{background:#003846;color:#fff;}
.vl-seg button:focus-visible{outline:2px solid #0084A9;outline-offset:2px;}
.vl-select,.vl-num{font-family:inherit;font-size:15px;color:#222;background:#fff;border:1px solid #D5D5D5;border-radius:4px;padding:11px 14px;outline:none;transition:border-color .18s;}
.vl-select:focus,.vl-num:focus{border-color:#0084A9;}
.vl-select{min-width:260px;max-width:100%;}
.vl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.vl-chips button,.vl-chip{font-family:inherit;font-size:13px;font-weight:500;color:#003846;background:#fff;border:1px solid #D5D5D5;border-radius:999px;padding:8px 15px;cursor:pointer;transition:all .18s;}
.vl-chips button:hover{border-color:#0084A9;color:#0084A9;}
.vl-chips button.on{background:#003846;color:#fff;border-color:#003846;}
.vl-chips button:focus-visible{outline:2px solid #0084A9;outline-offset:2px;}
.vl-tool .hidden{display:none;}
.vl-disclaimer{font-size:12.5px;line-height:1.6;color:#8A8A8A;margin-top:28px;max-width:80ch;border-top:1px solid #EAEAEA;padding-top:18px;}

/* Finder results */
.pf-results{margin-top:8px;}
.pf-rhead{font-size:14px;color:#555;margin:24px 0 16px;}
.pf-rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.pf-rcard{display:flex;flex-direction:column;background:#fff;border:1px solid #E2E2E2;border-radius:6px;overflow:hidden;}
.pf-rimg{aspect-ratio:16/10;background:#F6F6F2;border-bottom:1px solid #ECEAE2;display:flex;align-items:center;justify-content:center;padding:14px;}
.pf-rimg img{height:90%;width:auto;max-width:100%;object-fit:contain;}
.pf-rbody{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.pf-rtag{align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;}
.pf-rtag.prim{background:#EAF1E6;color:#4E8C27;border:1px solid #D8E7CF;}
.pf-rtag.alt{background:#EEF3F5;color:#0084A9;border:1px solid #D5E6EC;}
.pf-reye{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#777;}
.pf-rname{font-family:'Hedley New';font-size:18px;color:#003846;}
.pf-rname:hover{color:#0084A9;}
.pf-rdesc{font-size:12.5px;line-height:1.5;color:#666;margin:0;flex:1;}
.pf-ractions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px;}
.pf-view{font-size:12.5px;font-weight:500;color:#0084A9;}
.pf-shop{font-size:12.5px;font-weight:500;color:#003846;}
.pf-empty{background:#FBFAF6;border:1px solid #E2E2E2;border-radius:6px;padding:24px;font-size:14px;color:#555;}

/* Calculator results */
.rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.rc-out{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.rc-out-card{background:#FBFAF6;border:1px solid #E2E2E2;border-radius:8px;padding:20px;}
.rc-out-card.accent{background:#003846;border-color:#003846;}
.rc-out-card.accent .rc-out-label{color:#ADE0EE;}
.rc-out-card.accent .rc-out-val{color:#fff;}
.rc-out-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#4E8C27;margin-bottom:8px;}
.rc-out-val{font-size:26px;font-weight:300;color:#003846;letter-spacing:-.01em;line-height:1.1;}
.rc-out-val small{font-size:13px;color:#888;font-weight:400;}
.rc-out-card.accent .rc-out-val small{color:rgba(255,255,255,.7);}
.rc-note{font-size:13px;line-height:1.6;color:#666;margin:18px 0 0;background:#FBFAF6;border-left:3px solid #6CB33F;padding:14px 16px;border-radius:0 6px 6px 0;}
@media (max-width:780px){.rc-grid{grid-template-columns:1fr;gap:28px;}.rc-out{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.rc-out{grid-template-columns:1fr;}}

/* ---------- BREADCRUMB / WAYFINDING (shared, site-wide) ---------- */
/* Rendered as a right-aligned row in the header, directly under the menu
   (aligned to the right edge, under the Contact button). Light over the
   transparent header (dark heroes); dark text when the header is solid. */
.vl-bc-bar{max-width:1240px;margin:0 auto;padding:6px 32px 9px;display:flex;justify-content:flex-end;}
.vl-bc{font-size:12px;line-height:1.3;letter-spacing:.04em;max-width:100%;}
.vl-bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.vl-bc ol::-webkit-scrollbar{display:none;}
.vl-bc li{display:inline-flex;align-items:center;white-space:nowrap;}
.vl-bc li+li::before{content:"\00b7";margin:0 8px;opacity:.55;}
.vl-bc a{text-decoration:none;color:rgba(255,255,255,.72);transition:color .15s ease;}
.vl-bc a:hover{color:#fff;}
.vl-bc a:focus-visible{outline:2px solid #ADE0EE;outline-offset:3px;border-radius:2px;}
.vl-bc [aria-current="page"]{color:rgba(255,255,255,.95);}
/* Solid header (scrolled, or pages that use a solid header) -> dark text */
.vl-header.is-solid .vl-bc a,.vl-header--solid .vl-bc a{color:#5a6b70;}
.vl-header.is-solid .vl-bc a:hover,.vl-header--solid .vl-bc a:hover{color:#0084A9;}
.vl-header.is-solid .vl-bc [aria-current="page"],.vl-header--solid .vl-bc [aria-current="page"]{color:#003846;}
.vl-header.is-solid .vl-bc a:focus-visible,.vl-header--solid .vl-bc a:focus-visible{outline-color:#0084A9;}
@media (max-width:560px){
  .vl-bc-bar{padding-left:20px;padding-right:20px;}
  .vl-bc li:first-child{min-width:0;flex-shrink:1;}
  .vl-bc li:last-child [aria-current="page"]{display:inline-block;max-width:56vw;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;}
}
/* Active sub-item inside an open dropdown (you-are-here) */
.vl-megapanel a.is-current{color:#0084A9;font-weight:600;box-shadow:inset 2px 0 0 #0084A9;
  padding-left:10px;margin-left:-10px;border-radius:2px;}

/* ---------- PLGA + KEY-ACTIVE FORMULA BLOCK (replaces old comparison image) ---------- */
.vl-formula{display:flex;flex-direction:column;gap:14px;}
.vl-formula-card{background:#FBFAF6;border:1px solid #E2E2E2;border-radius:10px;padding:24px 26px;}
.vl-formula-kicker{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#0084A9;margin-bottom:10px;}
.vl-formula-term{font-weight:300;font-size:clamp(28px,3vw,36px);color:#003846;line-height:1;letter-spacing:-.02em;margin-bottom:10px;}
.vl-formula-card p{font-size:14px;line-height:1.6;color:#555;margin:0;}
.vl-formula-plus{align-self:center;font-weight:300;font-size:30px;color:#6CB33F;line-height:1;}

/* ---------- LEGAL DISCLAIMER STRIP (cosmetic / jurisdiction) ---------- */
.vl-disclaimer{background:#FBFAF6;border-top:1px solid #E2E2E2;padding:22px 0;}
.vl-disclaimer p{max-width:1240px;margin:0 auto;padding:0 32px;font-size:12.5px;line-height:1.6;color:#777;}

/* Responsive <picture> wrappers must not affect layout: the <img> keeps its
   original box so percentage heights, width:100% and object-fit resolve against
   the real card/hero container (not the wrapper). */
picture[data-vlimg]{display:contents;}
/* ...but the <source> children must not become grid/flex items themselves
   (they would steal cells and push the <img> into the next row). They are
   metadata only; hiding them does not affect browser source selection. */
picture[data-vlimg] > source{display:none;}