:root{
  --petrol:#264653;       /* solid page background */
  --yellow:#FFC000;       /* primary accent */
  --teal:#2A9D8F;         /* secondary accent */
  --ink:#0F1417;          /* dark text on light surfaces */
  --offwhite:#F8FAFB;     /* subtle text on dark bg */
  --white:#FFFFFF;        /* card surface */
  --muted:#9FB2B9;        /* muted text/icons on petrol */
  --radius:18px;
  --radius-lg:24px;
  --shadow-sm:0 6px 18px rgba(0,0,0,.12);
  --shadow-md:0 16px 40px rgba(0,0,0,.18);
  --container:1120px;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--petrol);   /* SOLID petrol everywhere */
  color: var(--offwhite);
  line-height:1.6;
}

/* Layout */
.container{width:min(100% - 2rem, var(--container)); margin-inline:auto;}
.section{padding:72px 0}
.section--tight{padding:42px 0}

/* Header (solid, no translucency) */
.header{
  position:sticky; top:0; z-index:40;
  background: var(--petrol);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{height:70px; display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.brand{display:flex; align-items:center; gap:.75rem; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px;}
.brand img{width:36px; height:36px; filter:none !important;}
.nav-links{display:flex; gap:.25rem; flex-wrap:wrap;}
.nav-links a{color:#fff; text-decoration:none; padding:10px 12px; border-radius:12px; opacity:.9; font-weight:600;}
.nav-links a:hover{background: rgba(255,255,255,.08); opacity:1}

/* Hero — solid petrol, roomy */
.hero{min-height:84vh; display:flex; align-items:center;}
.hero__inner{display:grid; gap:2rem; grid-template-columns:1.2fr .8fr; align-items:center;}
@media (max-width: 900px){ .hero__inner{grid-template-columns:1fr; text-align:center;} }

.kicker{color:var(--yellow); font-weight:900; text-transform:uppercase; letter-spacing:.12em; font-size:.85rem;}
.h1{font-weight:900; font-size:clamp(2.25rem,5vw,3.25rem); line-height:1.12; margin:10px 0 12px; color:#fff;}
.lead{font-size:clamp(1.05rem,1.8vw,1.25rem); color:#E6EEF1; margin:0 0 22px;}

/* Buttons — solid fills, crisp outline */
.button{
  appearance:none; border:0; padding:12px 18px; border-radius:999px;
  font-weight:800; letter-spacing:.2px; display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; cursor:pointer; transition:transform .06s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  box-shadow: var(--shadow-sm);
}
.button:active{transform:translateY(1px)}
.button--primary{ background:var(--yellow); color:var(--ink); }
.button--primary:hover{ box-shadow: var(--shadow-md); }
.button--ghost{ background: rgba(255,255,255,.08); color:#fff; }
.button--ghost:hover{ background: rgba(255,255,255,.14); }
.button--outline{ background: transparent; color:#fff; border:2px solid #fff; }
.button--outline:hover{ background:#fff; color:var(--petrol); }

/* Cards — solid white tiles for contrast */
.card{
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border:1px solid rgba(0,0,0,.06);
  overflow:hidden;
  transition:transform .12s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card__body{ padding:24px; }
.card__title{ font-weight:900; margin:0 0 8px; font-size:1.15rem; color:var(--ink); }
.card__text{ margin:0; color:#2a3236 }

/* Inverted card — still solid (dark) */
.card--inverted{
  background: #1E3940;
  color: var(--offwhite);
  border:1px solid rgba(255,255,255,.1);
}
.card--inverted .card__title{ color: #fff; }
.card--inverted .card__text{ color: #E6EEF1; }

.grid{ display:grid; gap:1rem; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .grid--2,.grid--3{ grid-template-columns:1fr; } }

/* Forms — solid dark inputs */
.field{ display:grid; gap:8px; margin-bottom:14px; }
.label{ font-weight:800; color:#fff; }
.input, .select, .textarea{
  width:100%; border-radius:14px; border:1px solid rgba(255,255,255,.18);
  background: #1E3940; color:#fff;
  padding:12px 14px; font:inherit; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.input::placeholder, .textarea::placeholder{ color: var(--muted); }
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,192,0,.25); background: #244751; }

/* Table — solid rows */
.table{ width:100%; border-collapse: collapse; overflow:hidden; border-radius: var(--radius); }
.table th, .table td{ padding:12px 14px; text-align:left; }
.table thead th{ background: #1E3940; color:#fff; }
.table tbody tr{ background: #223E46; border-bottom:1px solid rgba(255,255,255,.08); }
.table tbody tr:nth-child(even){ background: #1F3940; }

/* Alerts — solid blocks */
.alert{ border-radius:16px; padding:14px 16px; font-weight:700; display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; border:1px solid transparent; }
.alert--info{ background:#1F4C4A; color:#dffaf5; border-color:#2A9D8F; }
.alert--warn{ background:#4A3A00; color:#fff3c2; border-color:#FFC000; }
.alert--note{ background:#1E3940; color:#E6EEF1; border-color:rgba(255,255,255,.12); }

/* Footer — solid petrol */
.footer{ border-top:1px solid rgba(255,255,255,.08); color:#cfe3ea; }
.footer a{ color:#ffffff; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

/* Accessibility / motion */
:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(255,192,0,.35); }
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* Utilities */
.mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}
.mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem}
.p-2{padding:.5rem} .p-3{padding:.75rem} .p-4{padding:1rem}

/* No glow anywhere */
.hero-logo, .brand img{ filter:none !important; }
/* Hero video background */
.hero--video {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #264653; /* fallback if video doesn't load */
  color: #FFC000;
  text-align: center;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.4) contrast(1.1) saturate(1.2); /* subtle darkening for legibility */
}

.hero-overlay {
  position: relative;
  z-index: 1;
  padding: 0 2rem;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  margin-bottom: 1rem;
  color: #FFC000;
}

.hero-subtitle {
  color: #F8FAFB;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}