.vefa .vefa-mark{display:inline-block;margin-bottom:var(--space-3);opacity:.95}
/* Olea Computer — Design System CSS */
:root{
  --bg:#0B0B0D;--text:#F3F3F3;--muted:#B7BAC2;--hair:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.03);--gold:#C1A25F;--teal:#88FFB0;--teal-hover:#6BE89A;
  --radius:12px;--radius-sm:8px;--shadow:0 8px 24px rgba(0,0,0,.4);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;
  --container:1080px;--nav-h:64px;--scrollY:0;--edge-opacity:0;--parallaxY:0
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-hover)}

/* Typography */
.h1,.h2,.h3{font-family:"News Cycle","Barlow Semi Condensed",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;letter-spacing:-.01em;font-weight:500}
.h1{font-size:clamp(32px,5vw,56px);line-height:1.1;margin:0 0 var(--space-5)}
.h2{font-size:clamp(24px,3.2vw,36px);line-height:1.2;margin:0 0 var(--space-4)}
.h3{font-size:clamp(18px,2.4vw,22px);margin:0 0 var(--space-3)}
.lede{font-size:clamp(16px,2.2vw,20px);max-width:72ch;color:var(--muted);margin:0 0 var(--space-5)}
.body{max-width:66ch;color:#E6E6E8}
.eyebrow{font-family:"News Cycle";text-transform:uppercase;letter-spacing:.06em;color:var(--gold);margin:0 0 var(--space-3)}
.quote{border-left:2px solid var(--hair);padding-left:var(--space-4);color:#DADBE0;margin:var(--space-6) 0}
.caption{color:var(--muted)}

/* Layout */
.container{max-width:var(--container);padding:0 16px;margin:0 auto}
.section{padding:var(--space-7) 0}
@media(min-width:768px){ .section{ padding:var(--space-8) 0 } }
@media(min-width:1024px){ .section{ padding:var(--space-9,80px) 0 } }
.section--surface{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.grid{display:grid;gap:var(--space-6)}
.grid--two{grid-template-columns:1fr}
.grid--split{grid-template-columns:1fr}
/* Responsive tiles: scales from 1 to many columns */
.grid--tiles{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
@media(min-width:1024px){
  .grid--two{grid-template-columns:1fr 1fr}
  .grid--split{grid-template-columns:1.2fr .8fr;align-items:center}
}

/* Header */
.site-header{backdrop-filter:saturate(180%) blur(12px) contrast(105%) brightness(105%);-webkit-backdrop-filter:saturate(180%) blur(12px) contrast(105%) brightness(105%);background:rgba(11,11,13,.30);border-bottom:1px solid var(--hair);z-index:20;transition:background .25s ease, backdrop-filter .25s ease, box-shadow .2s ease;isolation:isolate;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

.sticky { position: fixed; top: 0; width: 100%; }
/* Add padding to main content to avoid jump when header becomes sticky */
.sticky ~ main { padding-top: var(--nav-h); }
/* Allow dropdown to render outside header when menu open */
.site-header.open{ overflow: visible; }
/* Liquid glass intensified state when scrolling */
.site-header.glass{background:rgba(11,11,13,.56);backdrop-filter:saturate(220%) blur(20px) contrast(108%) brightness(106%);-webkit-backdrop-filter:saturate(220%) blur(20px) contrast(108%) brightness(106%);border-bottom-color:rgba(255,255,255,.18);box-shadow:0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10)}
/* Parallax glow/frost background layer disabled to keep uniform tone */
.site-header::before{display:none}
/* Edge chromatic inversion disabled per request */
.site-header::after{display:none}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);position:relative;z-index:2}
.brand{display:inline-flex;align-items:center;color:#FFF;min-width:0}
.brand img{width:clamp(32px,6vw,52px);height:auto;transition:opacity .15s ease}
.brand:hover img,.brand:focus-visible img{opacity:.9}
.menu-toggle{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:8px;color:#fff}
.menu-toggle .bar{display:block;width:20px;height:2px;background:#fff;opacity:.9}
.primary-nav{position:fixed;inset:auto 0 0 0;top:var(--nav-h);display:flex;flex-direction:column;gap:16px;padding:20px 16px;background:rgba(20,20,25,.98);border-top:1px solid rgba(255,255,255,.12);z-index:1000;
  transform:translateY(8px);opacity:0;pointer-events:none;transition:transform .18s ease, opacity .18s ease}
.primary-nav a{color:#F8F8F8;padding:12px 4px;font-size:18px;display:block;transition:color .15s ease}
.primary-nav a:hover{color:var(--teal-hover)}
.site-header.open #primary-nav{transform:translateY(0);opacity:1;pointer-events:auto}

/* Full-screen overlay for mobile menu */
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:900}
.site-header.open ~ .nav-overlay{opacity:1;pointer-events:auto}

@media(min-width:768px){
  .container{padding:0 var(--space-6)}
  .menu-toggle{display:none}
  .primary-nav{position:static;transform:none!important;opacity:1!important;pointer-events:auto!important;flex-direction:row;gap:var(--space-5);padding:0;background:transparent;border:0}
}

/* Anchor offset so headings sit nicely below fixed navbar */
section[id]{ scroll-margin-top: var(--nav-h); }
@media (max-width: 480px){
  section[id]{ scroll-margin-top: calc(var(--nav-h) + 8px); }
}

/* Mobile adjustments: larger logo and slightly taller header */
@media (max-width: 480px){
  :root{ --nav-h: 68px; }
  .brand img{ width: 44px; }
}

/* Hero */
.hero{position:relative;min-height:80vh;display:flex;align-items:center}
.hero__container{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.hero__bg{position:absolute;inset:0;background:radial-gradient(600px 300px at 20% 20%,rgba(136,255,176,.10),transparent 60%),radial-gradient(500px 260px at 80% 30%,rgba(193,162,95,.08),transparent 60%);pointer-events:none;z-index:-1}

/* Cards */
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);padding:var(--space-6);box-shadow:var(--shadow)}
.card .h3{margin-bottom:var(--space-3)}
.card p{margin:0}
.card ul{margin:0;padding-left:20px}
.card--list{background:transparent;border-style:dashed}
.media{display:flex;align-items:center;justify-content:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;border:1px solid transparent;padding:10px 18px;font-weight:500;letter-spacing:.01em;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease}
.btn--primary{background:var(--teal);color:#0B0B0D}
/* Keep readable dark text on primary buttons when hovering/focusing, overriding global a:hover */
.btn--primary:hover,
.btn--primary:focus-visible{color:#0B0B0D;background:var(--teal-hover);box-shadow:0 0 24px rgba(136,255,176,.22);transform:translateY(-2px)}
.btn--secondary{color:#F3F3F3;border-color:rgba(255,255,255,.18);background:transparent}
/* Keep light text on secondary buttons on hover/focus */
.btn--secondary:hover,
.btn--secondary:focus-visible{color:#F3F3F3;border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
/* Prevent underline/color shifts from link hover inside buttons */
.btn:hover,.btn:focus-visible{text-decoration:none}
.link{color:var(--teal);font-weight:400;letter-spacing:.015em}
.link:hover{color:var(--teal-hover)}

/* Slightly thinner nav and footer links for a refined tone */
.primary-nav a{font-weight:400;letter-spacing:.015em}
.footer-nav a{font-weight:400;letter-spacing:.015em}

/* VEFA section styles */
.vefa{position:relative;background:#121212;color:#CCCCCC}
.vefa .eyebrow,.vefa .h2,.vefa .body,.vefa .caption{color:#CCCCCC}
.vefa::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.35)),
  url('/images/OleaVEFABannerX.png') center/cover no-repeat;opacity:1;z-index:-1}
.vefa .container{position:relative}

/* Avoid accidental horizontal overflow from grids */
.grid,.container,section,header,footer{max-width:100vw;}

/* Misc UI */
.cta-row{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-5)}
.bullets{margin:0;padding-left:20px}
.newsletter{display:flex;gap:var(--space-3);flex-wrap:wrap}
.newsletter input{flex:1;min-width:240px;background:#0E0E11;color:#fff;border:1px solid var(--hair);border-radius:999px;padding:12px 16px;outline:none}
.newsletter input:focus{border-color:var(--teal)}
.social{display:flex;gap:var(--space-4);margin-top:var(--space-5)}

/* Footer */
.site-footer{border-top:1px solid var(--hair);padding:var(--space-6) 0;color:var(--muted)}
.footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}

/* --- Ambient Themes & Accent Text --- */
/* Accent text: subtle animated gradient, only when parent section is active */
.accent{
  background: linear-gradient(90deg, var(--accent-a,#88FFB0), var(--accent-b,#C1A25F));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: filter .3s ease, opacity .3s ease;
  filter: saturate(1) brightness(1);
}
section:not(.active) .accent{ filter: saturate(.9) brightness(.95); }
@media (prefers-reduced-motion: no-preference){
  section.active .accent{ animation: accentShift 6s ease-in-out infinite alternate; }
}
@keyframes accentShift{
  0%{ filter: saturate(1) brightness(1); }
  100%{ filter: saturate(1.15) brightness(1.05); }
}

/* Ambient background using section::before, controlled by data-theme */
section[data-ambient]{ position: relative; }
section[data-ambient]::before{
  content:""; position:absolute; inset:-6% -2%; z-index:-2; pointer-events:none;
  background: radial-gradient(600px 300px at 12% 20%, var(--amb-a, rgba(136,255,176,.12)), transparent 60%),
              radial-gradient(520px 260px at 88% 30%, var(--amb-b, rgba(193,162,95,.10)), transparent 60%);
  filter: blur(0.5px) saturate(110%);
  opacity:.85; transform: translateY(0);
  animation: ambientFloat 12s ease-in-out infinite alternate; animation-play-state: paused;
}
section[data-ambient].active::before{ animation-play-state: running; }
@media (prefers-reduced-motion: reduce){ section[data-ambient]::before{ animation: none; } }
@keyframes ambientFloat{ 0%{ transform: translateY(0); } 100%{ transform: translateY(-10px); } }

/* Theme palettes via CSS variables */
section[data-theme="teal-gold"]{ --amb-a: rgba(136,255,176,.14); --amb-b: rgba(193,162,95,.12); --accent-a:#88FFB0; --accent-b:#C1A25F; }
section[data-theme="violet-blue"]{ --amb-a: rgba(171,160,255,.14); --amb-b: rgba(86,187,255,.12); --accent-a:#B8A8FF; --accent-b:#56BBFF; }
section[data-theme="blue-cyan"]{ --amb-a: rgba(86,187,255,.14); --amb-b: rgba(136,255,240,.12); --accent-a:#56BBFF; --accent-b:#88FFF0; }
section[data-theme="gold-teal"]{ --amb-a: rgba(193,162,95,.14); --amb-b: rgba(136,255,176,.12); --accent-a:#C1A25F; --accent-b:#88FFB0; }
section[data-theme="purple"]{ --amb-a: rgba(205,150,255,.14); --amb-b: rgba(140,110,230,.12); --accent-a:#D4A6FF; --accent-b:#8C6EE6; }
section[data-theme="rose"]{ --amb-a: rgba(255,150,171,.14); --amb-b: rgba(255,205,150,.12); --accent-a:#FF96AB; --accent-b:#FFCD96; }
section[data-theme="cyan"]{ --amb-a: rgba(136,255,240,.14); --amb-b: rgba(171,160,255,.12); --accent-a:#88FFF0; --accent-b:#B8A8FF; }
.footer-nav{display:flex;gap:var(--space-5)}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;z-index:1000;background:#000;color:#fff;padding:8px 12px;border-radius:6px}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}