/* RODAX public homepage — styles for index.html */
:root{
  --rdx-green:#B4BD00;
  --rdx-green-dark:#9AA300;
  --rdx-ink:#0C1017;
  --rdx-footer:#1B1F26;
  --rdx-body:#1D1E20;
  --font-head:'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  color:var(--rdx-body);
  background:#fff;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:#0b0f14 url("../images/rodax-hero-refinery.jpg") center center / cover no-repeat;
  color:#fff;
  text-align:center;
  padding:56px 0 80px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(6,10,16,.55) 0%, rgba(6,10,16,.35) 45%, rgba(6,10,16,.60) 100%);
}
.hero > *{position:relative;z-index:1;}

.hero__logo{
  width:100%;
  max-width:340px;
  margin:0 auto 44px;
}
.hero__logo img{width:100%;height:auto;}

.hero h1{
  font-family:var(--font-head);
  font-weight:500;
  font-size:clamp(2rem, 5.2vw, 4rem);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--rdx-green);
  margin:0 auto;
  max-width:19ch;
}
.hero p.lede{
  margin:28px auto 0;
  max-width:62ch;
  font-size:1rem;
  color:rgba(255,255,255,.92);
}

.hero__actions{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:53px;
  min-width:230px;
  padding:0 28px;
  border:2px solid var(--rdx-green);
  border-radius:8px;
  background:var(--rdx-green);
  color:#fff;
  font-family:var(--font-body);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover,.btn:focus-visible{background:var(--rdx-green-dark);border-color:var(--rdx-green-dark);transform:translateY(-1px);}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}

/* ---------- URGENT BAND ---------- */
/* The photo stretches to the full height of the band, so the green
   bar is never taller than the image. Band height = text + padding. */
.band{background:var(--rdx-green);color:var(--rdx-ink);}
.band__inner{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:48px;
}
.band__text{flex:1 1 auto;text-align:center;padding:32px 0;}
.band h2{
  font-family:var(--font-head);
  font-weight:500;
  font-size:clamp(1.75rem, 4vw, 3rem);
  line-height:1.15;
  margin:0;
  color:var(--rdx-ink);
}
.band p{margin:16px auto 0;max-width:60ch;font-size:1rem;}
.band .mailto{margin-top:12px;font-weight:600;}
.band .mailto a{color:var(--rdx-ink);text-decoration:underline;text-underline-offset:3px;}
.band__media{position:relative;flex:0 0 auto;width:220px;}
.band__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--rdx-footer);color:rgba(255,255,255,.85);padding:40px 0 28px;font-size:.9375rem;}
.site-footer .contact{text-align:right;line-height:1.9;}
.site-footer .contact a{color:inherit;text-decoration:none;}
.site-footer .contact a:hover{text-decoration:underline;}
.site-footer hr{border:0;border-top:1px solid rgba(255,255,255,.18);margin:24px 0 16px;}
.site-footer .legal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:.8125rem;
  color:rgba(255,255,255,.7);
}
.site-footer .legal span + span{margin-left:28px;}
.site-footer .social svg{width:18px;height:18px;fill:currentColor;display:block;}
.site-footer .social a{display:inline-block;color:rgba(255,255,255,.8);}
.site-footer .social a:hover{color:#fff;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .band__inner{flex-direction:column-reverse;gap:0;padding:0;}
  .band__text{padding:28px 24px;}
  .band__media{width:100%;height:220px;}
  .site-footer .contact{text-align:center;}
  .site-footer .legal{flex-direction:column;text-align:center;gap:12px;}
  .site-footer .legal span + span{margin-left:0;display:block;}
}
@media (max-width:480px){
  .hero{padding:40px 0 60px;}
  .hero__logo{max-width:260px;margin-bottom:32px;}
  .btn{min-width:0;width:100%;max-width:340px;font-size:1rem;padding:0 18px;}
}