/* Mobile-first responsive styles for Oilbi index */
:root{
  /* Light theme as default */
  --bg:#ffffff;           /* page background */
  --bg-elev:#ffffff;      /* surfaces */
  --text:#0b0d10;         /* body text */
  --muted:#334155;        
  --brand:#1f8a43;        /* mature green */
  --brand-2:#2a6fb4;      /* accent blue */
  --ring:rgba(42,111,180,.35);
  --border:rgba(0,0,0,.10);
  --radius:16px;
}
/* Light theme tokens */
.light{ /* still available if needed */ }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',Arial,sans-serif;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Header */
.site-header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(180deg,rgba(11,13,16,.9),rgba(11,13,16,.6));backdrop-filter:saturate(140%) blur(6px);z-index:10;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:28px;width:auto;border-radius:6px}
.desktop-nav{display:none;gap:18px;align-items:center}
.desktop-nav a{padding:10px 10px;border-radius:8px;color:#ffffff;display:flex;align-items:center;height:40px}
.desktop-nav a:hover{background:rgba(255,255,255,.06);color:#ffffff}
.nav-item{position:relative}
.nav-item .dropdown{position:absolute;top:calc(100% + 6px);left:0;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:8px;display:none;min-width:220px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.nav-item .dropdown a{display:block;color:var(--text);padding:8px 10px;border-radius:8px}
.nav-item .dropdown a:hover{background:rgba(255,255,255,.06)}
.nav-item.open .dropdown{display:block}
.menu-toggle{background:none;border:none;display:inline-flex;flex-direction:column;gap:4px;padding:8px;border-radius:10px}
.menu-toggle:focus{outline:2px solid var(--ring);outline-offset:2px}
.menu-bar{width:22px;height:2px;background:#fff;border-radius:2px}

/* Drawer */
.mobile-drawer{position:fixed;top:56px;left:0;right:0;background:var(--bg-elev);border-top:1px solid var(--border);padding:12px 8px;transform:translateY(-8px);opacity:0;transition:transform .25s ease,opacity .2s ease;z-index:30}
.mobile-drawer.open{transform:translateY(0);opacity:1}
.mobile-drawer[hidden]{display:none !important}
.mobile-drawer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mobile-drawer a{display:block;padding:12px 10px;border-radius:10px;color:var(--muted)}
.mobile-drawer a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.accordion{display:grid}
.accordion-toggle{appearance:none;background:none;border:none;text-align:left;color:var(--muted);padding:12px 10px;border-radius:10px}
.accordion-toggle[aria-expanded="true"]{background:rgba(255,255,255,.06);color:var(--text)}
.accordion-panel{list-style:none;margin:0 0 0 8px;padding:6px 6px 10px 16px;display:grid;gap:4px;border-left:2px solid rgba(255,255,255,.08)}
.accordion-panel[hidden]{display:none !important}
.mobile-drawer .accordion-panel a{position:relative;padding-left:26px}
.mobile-drawer .accordion-panel a::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--brand-2);border-radius:50%;opacity:.6}

/* Backdrop for drawer */
.backdrop{position:fixed;top:56px;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease;z-index:20}
.backdrop.show{opacity:1}

/* Menu icon animation */
.menu-toggle .menu-bar{transition:transform .2s ease,opacity .15s ease}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Hero */
.hero{position:relative;min-height:68vh;display:grid}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.hero-content{position:relative;align-self:end;padding:28px 24px 24px;color:#ffffff;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.overline{display:none}
.hero h1{margin:0 0 8px 0;font-size:2rem}
.subtitle{color:rgba(255,255,255,.92);margin:0 0 14px 0}
.hero-cta{display:none}

/* Cards */
.index-sections{padding:24px 12px 56px}
.cards{display:grid;gap:14px}
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card img{aspect-ratio:16/10;object-fit:cover}
.card-body{padding:14px}
.card h3{margin:0 0 6px 0;font-size:1.1rem}
.card p{margin:0 0 10px 0;color:var(--muted)}
.arrow{color:var(--brand-2)}

/* Footer */
.site-footer{padding:24px 16px;color:var(--muted);border-top:1px solid var(--border)}

/* Larger screens */
@media (min-width: 768px){
  .desktop-nav{display:flex}
  .menu-toggle{display:none}
  .mobile-drawer{display:none}
  .hero{min-height:76vh}
  .hero h1{font-size:2.8rem;max-width:800px}
  .subtitle{max-width:860px}
  .index-sections{padding:32px 24px 72px;max-width:1200px;margin:0 auto}
  .cards{grid-template-columns:repeat(3,1fr);gap:18px}
  .site-header{position:sticky;top:0}
  .mobile-hero{display:none}
}

/* Mobile-only adjustments */
@media (max-width: 1023px){
  .desktop-nav{display:none !important}
  .nav-item .dropdown{display:none !important}
}

@media (max-width: 767px){
  .index-sections{display:block;padding:24px 12px 72px}
  .cards{gap:22px}
  .hero{display:none !important}
  .mobile-hero{display:block !important;height:calc(100vh - 56px);overflow:hidden}
  .mobile-hero img{height:100%;object-fit:cover}
}

.mobile-hero img{width:100%;display:block}
.mobile-hero{position:relative}
.mobile-hero-content{position:absolute;left:0;right:0;bottom:200px;padding:0 24px;color:#ffffff;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.mobile-hero-content h1{margin:0 0 16px 0;font-size:1.9rem;line-height:1.2}
.mobile-hero-content p{margin:0;color:rgba(255,255,255,.95);font-size:.98rem}

@media (min-width: 1200px){
  .cards{grid-template-columns:repeat(4,1fr)}
}

/* About page */
.page-hero{position:relative;min-height:46vh;display:grid;border-bottom:1px solid var(--border)}
.page-hero picture,.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.page-hero-content{position:relative;align-self:end;padding:28px 16px 22px}
.page-hero-content h1{margin:0 0 6px 0;font-size:2rem}

.container{max-width:1100px;margin:0 auto;padding:0 24px}
.section{padding:28px 0}
.section-title{margin:0 0 12px 0;font-size:1.4rem}
.muted{color:var(--muted)}

.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--border)}
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:12px 0 12px 14px}
.timeline .time{color:var(--brand-2);font-weight:600}
.timeline .event{color:var(--text)}

.values-grid{display:grid;gap:12px}
.value{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.value h3{margin:0 0 6px 0}

.two-col{display:grid;gap:16px}
.checklist{list-style:none;margin:8px 0 0 0;padding:0}
.checklist li{padding-left:24px;position:relative;margin:8px 0}
.checklist li:before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);}

.leaders-grid{display:grid;gap:14px}
.leader{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px}
.leader img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px}

.message{background:#fafafa;border:1px solid var(--border);border-radius:var(--radius);padding:16px}

@media (min-width: 768px){
  .page-hero-content h1{font-size:2.6rem}
  .values-grid{grid-template-columns:repeat(3,1fr)}
  .two-col{grid-template-columns:1fr 1fr}
  .leaders-grid{grid-template-columns:repeat(3,1fr)}
}

/* Tighter phones: add generous horizontal padding */
@media (max-width: 480px){
  .container{padding:0 28px}
}