/* JBM Group — 2025 award‑grade UI kit */

:root{
  --jbm-primary:#0067AC;
  --jbm-primary-ink:#0b2a44;
  --ink:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
  --surface:#f6f8fb;
  --radius:12px;
  --radius-lg:18px;
  --shadow:0 8px 24px rgba(2, 25, 56, .08);
  --shadow-hover:0 14px 36px rgba(2,25,56,.12);
  --focus: 0 0 0 3px rgba(0,103,172,.28);
  --gap:16px;
}

/* Force light theme: remove automatic dark overrides */
/* If dark mode is desired later, reintroduce a data-theme toggle instead. */

/* Reset/typography */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{ margin:0 0 .5rem; color:var(--jbm-primary-ink); line-height:1.2; letter-spacing:-.01em; }
h1{ font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); }
h2{ font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.1rem); }
h3{ font-size: clamp(1.1rem, .95rem + .6vw, 1.35rem); }
p{ margin:.3rem 0 .95rem; color:#273244; }
::selection{ background: rgba(0,103,172,.18); }
a{ color:var(--jbm-primary); text-decoration:none; }
img{ max-width:100%; display:block; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:#ffffff;
  border-bottom:1px solid #e6edf5;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.wrap{ max-width:1200px; margin:0 auto; padding: clamp(14px, 2vw, 22px); }
.row{ display:flex; align-items:center; gap:var(--gap); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand img{ height:34px; width:auto; display:block; }
.nav{ margin-left:auto; display:flex; gap:18px; font-weight:600; }
.nav a{ color:#0f253b; opacity:.92; padding:8px 10px; border-radius:10px; }
.nav a:hover{ background:#eef5fb; }
.nav a:focus-visible{ outline:none; box-shadow: var(--focus); }
/* Unified CTA style (header + hero) */
.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px; font-weight:800;
  color:#0b1b2c; background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 6px 20px rgba(2,25,56,.08);
}
.cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(2,25,56,.12); }
.cta:focus-visible{ outline:none; box-shadow: var(--focus); }

/* Emphasized CTA variant for dark hero background */
.hero .cta{
  background:linear-gradient(135deg, #0ea5e9 0%, #0067AC 60%, #005289 100%);
  color:#fff; border:none;
  box-shadow: 0 14px 34px rgba(0,103,172,.35);
}
.hero .cta{ margin-inline:auto; }
.hero .cta:hover{ filter:brightness(1.02); transform: translateY(-1px); }

/* Hero */
.hero{
  position:relative; overflow:hidden; border-radius:0 0 32px 32px; background: #0b1b2c; color:#fff;
}
.hero-inner{ position:relative; min-height:min(78vh, 860px); }
.hero-media{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,15,26,.55), rgba(6,15,26,.45) 35%, rgba(6,15,26,.6) 70%, rgba(6,15,26,.8)); }
.hero-content{
  position:relative; z-index:2; padding: clamp(24px, 5vw, 56px);
  display:grid; align-content:end; justify-items:center; text-align:center;
  min-height:min(68vh, 720px);
}
.hero h1{ color:#fff; max-width: 900px; text-wrap:balance; }
.hero p{ color:#dfebf6; max-width: 720px; }

/* Sections and cards */
.section{ padding: clamp(36px, 5vw, 72px) 0; }
.surface{ background:var(--surface); }
.grid{ display:grid; gap:clamp(16px, 2.6vw, 28px); grid-template-columns: 1.15fr .85fr; }
@media (max-width: 900px){ .grid{ grid-template-columns:1fr; } }
.card{ background:#fff; border-radius:var(--radius); box-shadow: var(--shadow); padding: clamp(18px, 2.2vw, 28px); transition: box-shadow .25s ease, transform .25s ease; }
.card:hover{ box-shadow: var(--shadow-hover); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .card{ transition:none; } .card:hover{ transform:none; } }
.kpis{ display:flex; gap:20px; flex-wrap:wrap; margin-top:8px; }
.kpi{ background:#f0f6fb; border:1px solid #e2edf7; border-radius:12px; padding:10px 14px; font-weight:700; color:#0d3556; }
.muted{ color:var(--muted); font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:.78rem; }
.lead{ font-size:1.05rem; color:#1a2a3f; }
.about-card{
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:clamp(16px, 2vw, 24px);
  padding: clamp(28px, 2.4vw, 40px);
  background: radial-gradient(circle at top, rgba(0,103,172,.08), transparent 60%), #fff;
}
.about-card .kpis{ justify-content:center; }
.about-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

/* Form */
form{ display:grid; gap:14px; }
label{ font-weight:600; color:#0e2a44; display:inline-flex; align-items:center; gap:6px; }
.req{ color:#be123c; font-weight:800; }
input, select, textarea{ width:100%; padding:13px 14px; border-radius:10px; border:1px solid #d7e2ee; background:#fff; outline:none; font:inherit; }
input:focus, select:focus, textarea:focus{ box-shadow: var(--focus); border-color: var(--jbm-primary); }
textarea{ min-height:130px; resize:vertical; }
.form-row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width: 700px){ .form-row{ grid-template-columns:1fr; } }
.form-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn, a.btn, button.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:none; background:var(--jbm-primary); color:#fff;
  padding:12px 28px; border-radius:999px; font-weight:800;
  cursor:pointer; box-shadow: var(--shadow);
  text-decoration:none;
}
.btn:hover{ filter:brightness(.98); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn.secondary{ background:#0e2944; }
.helper{ font-size:.9rem; color:var(--muted); }

/* Footer */
footer{ padding:28px 0 48px; color:#4b5563; }
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.footer-brand img{
  height:40px;
  width:auto;
}
.footer-copy{
  flex:1;
  text-align:center;
}
.footer-links{
  display:flex;
  gap:16px;
  font-weight:600;
  justify-content:flex-end;
  flex:0 0 auto;
}
.footer-links a{
  color:#0f253b;
  opacity:.8;
}
.footer-links a:hover,
.footer-links a:focus-visible{
  opacity:1;
  outline:none;
}
.tiny{ font-size:.85rem; color:#6b7280; }

/* Tasteful motion */
@media (prefers-reduced-motion: no-preference){
  a, .btn, .card{ transition: all .2s ease; }
}