:root{
  --black:#111417;
  --graphite:#2A2D33;
  --red:#C31D24;
  --silver:#A8AEB4;
  --white:#FFFFFF;
  --border:rgba(168,174,180,.18);
  --muted:rgba(255,255,255,.78);
  --muted2:rgba(255,255,255,.68);
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --shadowSoft:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --max:1180px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(195,29,36,.20), transparent 55%),
    radial-gradient(900px 500px at 85% 20%, rgba(168,174,180,.12), transparent 55%),
    linear-gradient(180deg,#0b0d10,var(--black));
  color:var(--white);
  letter-spacing:.2px;
}

a{color:inherit;text-decoration:none;}
.container{max-width:var(--max);margin:0 auto;padding:0 22px;}

header{
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(17,20,23,.72);
  border-bottom: 1px solid var(--border);
}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;gap:16px;
  position:relative;
}

.brand{
  display:flex;align-items:center;gap:12px;
}
.brand img{width:34px;height:34px;display:block;}
.brand .text{
  font-weight:900;letter-spacing:1.2px;text-transform:uppercase;font-size:14px;line-height:1.05;
}
.brand .text span{
  display:block;font-size:11px;letter-spacing:2px;color:var(--silver);margin-top:3px;
}

.navlinks{display:flex;gap:14px;align-items:center;}
.navlinks a{
  font-size:13px;font-weight:800;
  color:rgba(255,255,255,.75);
  padding:8px 10px;border-radius:12px;
}
.navlinks a:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);}

.menuBtn{
  display:none;
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  align-items:center;justify-content:center;
  cursor:pointer;
}
.menuBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.09);border-color:rgba(168,174,180,.35);}
.menuIcon{
  width:18px;height:2px;
  background: rgba(255,255,255,.88);
  border-radius:2px;
  position:relative;
  display:block;
}
.menuIcon::before, .menuIcon::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background: rgba(255,255,255,.88);
  border-radius:2px;
}
.menuIcon::before{top:-6px;}
.menuIcon::after{top:6px;}

.headerCta{display:inline-flex;}
.mobileCta{display:none;}

.btn{
  padding:12px 16px;border-radius:14px;
  border:1px solid var(--border);
  font-weight:900;font-size:13px;letter-spacing:.3px;
  background: rgba(255,255,255,.06);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.09);border-color:rgba(168,174,180,.35);}
.btn-primary{
  background: linear-gradient(180deg,#d0262d,#b61a20);
  border-color: #b61a20;
  box-shadow: 0 10px 35px rgba(195,29,36,.18);
}
.btn-primary:hover{background:linear-gradient(180deg,#e12b32,#bf1d23);}

main{padding-bottom:8px;}
section{padding:72px 0;border-bottom:1px solid var(--border);}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(195,29,36,.35);
  background:rgba(195,29,36,.10);
  font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  width:fit-content;
}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(195,29,36,.12);}

h1{font-size:46px;line-height:1.06;margin:14px 0 18px;}
h2{font-size:28px;margin:0 0 14px;}
h3{font-size:18px;margin:0 0 10px;text-transform:uppercase;letter-spacing:1px;}
p{color:var(--muted);line-height:1.65;font-size:15px;margin:0;}
small, .small{color:var(--muted2);font-size:13px;line-height:1.6;}

.heroGrid{display:grid;grid-template-columns:1.12fr .88fr;gap:26px;align-items:stretch;}
.actions{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;}

.card{
  background: rgba(42,45,51,.40);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadowSoft);
}
.card.tight{padding:18px;}
.cardTitleRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(168,174,180,.25);background:rgba(255,255,255,.06);font-size:12px;color:rgba(255,255,255,.8);}

.card.highlight{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(42,45,51,.55), rgba(17,20,23,.35));
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.card.highlight::before{
  content:"";
  position:absolute;inset:-1px;
  background:
    radial-gradient(500px 300px at 20% 20%, rgba(195,29,36,.25), transparent 60%),
    radial-gradient(500px 300px at 85% 10%, rgba(168,174,180,.18), transparent 60%);
  pointer-events:none;
  opacity:.9;
}
.card.highlight > *{position:relative;}

ul{padding-left:18px;margin:14px 0 0;}
li{margin-bottom:10px;color:rgba(255,255,255,.82);line-height:1.45;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

.note{
  margin-top:16px;
  padding:14px 16px;border-radius:16px;
  border:1px solid rgba(195,29,36,.25);
  background: rgba(195,29,36,.10);
  color: rgba(255,255,255,.82);
  font-size:13px;
  line-height:1.6;
}

/* Accordion (role dropdowns) */
.accordion{display:grid;gap:12px;margin-top:18px;}
.accordion details{
  border:1px solid var(--border);
  border-radius: 18px;
  background: rgba(42,45,51,.33);
  overflow:hidden;
}
.accordion summary{
  list-style:none;
  cursor:pointer;
  padding:16px 16px;
  font-weight:900;
  letter-spacing:.3px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary .meta{color:rgba(255,255,255,.68);font-weight:800;font-size:12px;}
.accordion .content{padding:0 16px 16px;}
.accordion .content p{margin-top:8px;}
.chev{
  width:14px;height:14px;flex:0 0 14px;
  border-right:2px solid rgba(255,255,255,.65);
  border-bottom:2px solid rgba(255,255,255,.65);
  transform: rotate(-45deg);
  transition: transform .18s ease;
  margin-left:auto;
}
details[open] summary .chev{transform: rotate(45deg);}

/* Rollout catalog (PDF scroll viewer) */
.scrollMenu{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding:10px;
  border:1px solid var(--border);
  border-radius: 18px;
  background: rgba(42,45,51,.25);
}
.scrollMenu a{
  white-space: nowrap;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.86);
}
.scrollMenu a:hover{background: rgba(255,255,255,.10);}

.pdfScroll{display:grid;gap:18px;margin-top:18px;}
.pdfPage{
  border:1px solid var(--border);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadowSoft);
}
.pdfPage img{display:block;width:100%;height:auto;}
.pdfCaption{
  padding:10px 12px;
  font-size:12px;
  color: rgba(255,255,255,.70);
  border-top:1px solid var(--border);
}

@media(min-width:981px){
  .scrollMenu{position:sticky; top: 86px; z-index: 5;}
}

/* Forms */
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
label{font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.82);}
input, select, textarea{
  background: rgba(17,20,23,.35);
  border: 1px solid var(--border);
  color: var(--white);
  border-radius: 14px;
  padding: 12px 12px;
  font-size: 14px;
  outline:none;
}
textarea{min-height:130px;resize:vertical;}
input:focus, select:focus, textarea:focus{border-color: rgba(195,29,36,.55);box-shadow:0 0 0 4px rgba(195,29,36,.10);}
.help{font-size:12px;color:rgba(255,255,255,.62);line-height:1.5;}
.formActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.alert{
  padding:12px 14px;border-radius:16px;border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size:13px;line-height:1.6;
  margin-top:14px;
}
.alert.success{border-color: rgba(40, 220, 120, .35); background: rgba(40,220,120,.08);}
.alert.error{border-color: rgba(195,29,36,.45); background: rgba(195,29,36,.10);}

/* Footer */
footer{
  padding:42px 0;
  color: rgba(255,255,255,.55);
  font-size:12px;
  border-top: 1px solid var(--border);
}

@media(max-width:980px){
  h1{font-size:38px;}
  .heroGrid{grid-template-columns:1fr;}
  .grid2,.grid3{grid-template-columns:1fr;}
  .grid4{grid-template-columns:1fr 1fr;}
  .formGrid{grid-template-columns:1fr;}

  .menuBtn{display:inline-flex;}
  .headerCta{display:none;}

  .navlinks{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    flex-direction:column;
    gap:6px;
    padding:12px;
    background: rgba(17,20,23,.95);
    border:1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadowSoft);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:12px 12px; border-radius:14px;}
  .navlinks .mobileCta{display:inline-flex; width:100%; margin-top:6px;}

}
@media(max-width:520px){
  h1{font-size:32px;}
  .grid4{grid-template-columns:1fr;}
}