/* ==============================
   Lumins EHS — Full Stylesheet (Option A)
   - Lighter background + higher contrast “bubbles”
   - Industrial TOP-RIGHT panel (square, subtle)
   - Buttons look clearly clickable (different from info bubbles)
   - Unified card styling that matches the Lumins badge vibe
   ============================== */

:root{
  --bg:#0a1730;
  --bg2:#071226;

  --panel:rgba(255,255,255,.07);
  --panel2:rgba(255,255,255,.055);

  --border:rgba(255,255,255,.14);
  --border2:rgba(255,255,255,.22);

  --text:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.74);
  --muted2:rgba(255,255,255,.58);

  --accent:#ffb020;     /* safety gold */
  --accent2:#2bb6ff;    /* cool blue */

  --shadow:0 18px 50px rgba(0,0,0,.35);
  --shadow2:0 12px 32px rgba(0,0,0,.26);

  --radius:20px;
  --radius2:14px;

  --max:1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);

  /* Lighter base + stronger “bubble” contrast */
  background:
    radial-gradient(900px 560px at 16% 18%, rgba(43,182,255,.22), transparent 58%),
    radial-gradient(860px 560px at 72% -6%, rgba(255,176,32,.18), transparent 62%),
    radial-gradient(640px 520px at 85% 70%, rgba(43,182,255,.12), transparent 62%),
    radial-gradient(520px 420px at 8% 78%, rgba(255,255,255,.06), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 80%);
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.92; }

.container{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
}

.section{
  padding:84px 0;
  position:relative;
}

.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%);
}

h1,h2,h3{
  margin:0 0 12px;
  line-height:1.08;
  letter-spacing:-.2px;
}

.subhead{
  margin:0;
  color:var(--muted);
  max-width:72ch;
}

.muted{ color:var(--muted); }
.small{ font-size:13px; color:var(--muted2); }
.mini{ font-size:12px; color:var(--muted2); }

/* ==============================
   Topbar / Nav
   ============================== */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(7,18,38,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}

.brand-logo{
  height:62px;
  width:auto;
  padding:6px;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}

.brand-stack{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{ font-weight:950; letter-spacing:.8px; }
.ehs{ color:rgba(255,255,255,.75); font-weight:900; margin-left:6px; }
.brand-sub{
  font-size:12px;
  color:rgba(255,255,255,.62);
  letter-spacing:.6px;
  margin-top:4px;
}

.nav{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.nav a{
  font-size:14px;
  color:rgba(255,255,255,.84);
  padding:8px 10px;
  border-radius:12px;
}

.nav a:hover{
  background: rgba(255,255,255,.07);
}

/* ==============================
   Buttons (clearly clickable)
   ============================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:13px 20px;
  min-height:46px;

  border-radius:14px;                 /* less “pill”, more “button” */
  font-weight:950;
  letter-spacing:.2px;
  font-size:14px;

  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  box-shadow: 0 16px 34px rgba(0,0,0,.30);

  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 20px 44px rgba(0,0,0,.34);
}
.btn:active{ transform: translateY(0px); }

.btn-small{
  padding:10px 14px;
  min-height:40px;
  font-size:13px;
}

/* Primary button (Get a Quote) */
.btn-primary{
  border-color: rgba(255,176,32,.65);

  background:
    linear-gradient(
      180deg,
      rgba(255,176,32,.45),
      rgba(255,176,32,.15)
    );

  box-shadow:
    0 8px 18px rgba(255,176,32,.25),
    0 18px 40px rgba(0,0,0,.35);
}
.btn-primary:hover{
  border-color: rgba(255,176,32,.78);
  background: linear-gradient(180deg, rgba(255,176,32,.52), rgba(255,176,32,.16));
}

/* Secondary button (See Training) */
.btn-secondary{
  border-color: rgba(43,182,255,.55);
  background: linear-gradient(180deg, rgba(43,182,255,.26), rgba(43,182,255,.10));
}
.btn-secondary:hover{ border-color: rgba(43,182,255,.72); }

/* Ghost (utility) */
.btn-ghost{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  box-shadow:none;
}
.btn-ghost:hover{ background: rgba(255,255,255,.07); }

/* ==============================
   Hero
   ============================== */
.hero{
  padding:72px 0 44px;
  overflow:hidden;
  position:relative;
}

.hero::after{
  /* subtle divider glow to improve “flow” into next section */
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  opacity:.8;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:60px;
  align-items:center;
}

.hero-left{ position:relative; }

.hero-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.74);
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:12px;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.90), rgba(255,176,32,.95));
  box-shadow:0 0 0 7px rgba(255,176,32,.14);
}

.hero h1{
  font-size: clamp(40px, 4.4vw, 58px);
  margin-top:14px;
}

.hero-lead{
  margin-top:10px;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  max-width:75ch;
}

.hero-ctas{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

.hero-right{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.hero-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:16px;
}

.hero-logo-wrap img{
  width:210px;
  height:auto;
  opacity:.95;

  filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.4));
}

/* ==============================
   Industrial top-right panel (square + subtle)
   ============================== */
.corner-stripes{
  position:absolute;

  right:-160px;
  top:-120px;

  width:420px;
  height:260px;

  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,176,32,.95) 0px,
      rgba(255,176,32,.95) 14px,
      rgba(7,18,38,.98) 14px,
      rgba(7,18,38,.98) 30px
    );

  border-radius:20px;

  opacity:.10;

  transform: rotate(-14deg);

  border:1px solid rgba(255,255,255,.08);

  box-shadow:0 30px 80px rgba(0,0,0,.35);

  pointer-events:none;
}

/* ==============================
   Info bubbles — flatter so they don't look like buttons
   ============================== */
.badge, .pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);    /* flatter */
  box-shadow:none;                      /* key difference */
  color:rgba(255,255,255,.86);
  font-weight:850;
  opacity:.94;
  line-height:1.15;
}

/* ==============================
   Card styling (matches badge vibe)
   ============================== */
.card, .callout, .form, .quote-left{
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow2);
  position: relative;
}

.card::before, .callout::before, .form::before, .quote-left::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(255,176,32,.22), rgba(43,182,255,.14), rgba(255,255,255,.06));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
}

/* ==============================
   Callouts / Popular Requests
   ============================== */
.callout-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin-top:28px;
}

.callout{
  padding:18px;
}

.callout-title{
  font-weight:950;
  margin:0 0 12px;
}

.callout-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  color:rgba(255,255,255,.88);
}

/* ==============================
   Cards / Services
   ============================== */
.cards{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.cards-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.cards-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.card{
  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.04)
    );

  border:1px solid rgba(255,255,255,.12);

  box-shadow:
    0 12px 30px rgba(0,0,0,.28);

  padding:20px;
}

.card h3{
  font-size:18px;
  margin:0 0 8px;
  font-weight:950;
}

.card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

/* ==============================
   Programs
   ============================== */
.programs{ margin-top:18px; }
.programs-title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:950;
  letter-spacing:.2px;
}

.programs-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.program-card{
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.program-name{ font-weight:950; margin:0; }
.program-sub{
  margin-top:4px;
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.45;
}

.program-card:hover{
  transform: translateY(-1px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,176,32,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.26);
}

/* ==============================
   Quote section
   ============================== */
.quote-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
  align-items:start;
}

.quote-left{
  padding:18px;
}

.contact{ margin-top:14px; }
.contact-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  color:rgba(255,255,255,.84);
  border-bottom:1px dashed rgba(255,255,255,.12);
}
.contact-row:last-child{ border-bottom:none; }
.contact-ico{ width:22px; text-align:center; opacity:.9; }

.form{
  padding:18px;
}

.form label{
  display:block;
  font-size:13px;
  color:rgba(255,255,255,.74);
  margin:12px 0 6px;
  font-weight:900;
}

.form input,
.form select,
.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(7,18,38,.50);
  color:var(--text);
  outline:none;
}

.form input:focus,
.form select:focus,
.form textarea:focus{
  border-color: rgba(43,182,255,.52);
  box-shadow: 0 0 0 6px rgba(43,182,255,.14);
}

.form textarea{ min-height:120px; resize:vertical; }

/* ==============================
   Footer
   ============================== */
.footer{
  padding:28px 0 44px;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

/* ==============================
   Responsive
   ============================== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .corner-stripes{
    right:-260px;
    top:-190px;
    transform: rotate(-10deg) scale(.92);
    opacity:.10;
  }
  .callout-grid{ grid-template-columns: 1fr; }
  .quote-grid{ grid-template-columns: 1fr; }
  .cards-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .programs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .brand-logo{ height:58px; }
}

@media (max-width: 560px){
  .container{ width:min(var(--max), calc(100% - 28px)); }
  .nav{ gap:8px; }
  .nav a{ padding:7px 9px; }
  .cards-2, .cards-3{ grid-template-columns: 1fr; }
  .programs-grid{ grid-template-columns: 1fr; }
  .hero{ padding:58px 0 34px; }
}