@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;600;800&display=swap');

:root{
  --green:#1cd5a0;
  --bg:#020706;
  --line:rgba(28,213,160,.22);
  --line2:rgba(28,213,160,.36);
  --muted:#c8d2cf;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:white;
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(rgba(28,213,160,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,213,160,.035) 1px,transparent 1px);
  background-size:92px 92px;
}

/* HEADER NOW SITS FULLY ABOVE THE HERO */
.topbar{
  height:120px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  display:grid;
  grid-template-columns:330px 1fr 260px;
  align-items:center;
  background:#020706;
  border:1px solid rgba(28,213,160,.45);
  border-top:1px solid rgba(28,213,160,.45);
  border-radius:0 0 4px 4px;
  box-shadow:0 0 32px rgba(28,213,160,.08);
}

.brand{
  height:120px;
  width:100%;
  background:none;
  border:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.brand img{
  width:230px;
  height:auto;
  display:block;
  filter:drop-shadow(0 0 18px rgba(28,213,160,.9));
}

.tabs{
  height:120px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:36px;
}

.tab{
  color:white;
  background:transparent;
  border:0;
  font:700 22px Rajdhani,sans-serif;
  padding:18px 36px;
  border-radius:30px;
  cursor:pointer;
}

.tab.active{
  color:var(--green);
  border:1px solid rgba(28,213,160,.58);
  background:rgba(28,213,160,.08);
  position:relative;
}

.tab.active:after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  background:var(--green);
  border-radius:50%;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  box-shadow:0 0 12px var(--green);
}

.connectTop{
  justify-self:center;
  background:var(--green);
  color:#00170f;
  text-decoration:none;
  font-weight:900;
  padding:20px 36px;
  border-radius:8px;
  box-shadow:0 0 34px rgba(28,213,160,.45);
}

.page{
  display:none;
  position:relative;
  z-index:5;
}

.page.active{display:block}

/* HERO STARTS BELOW HEADER, SO NOTHING SITS UNDER THE BLACK LINE */
.hero{
  height:760px;
  position:relative;
  overflow:hidden;
  padding:210px 6.4vw 0;
}

.bg{
  position:absolute;
  inset:120px 0 0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.18) 47%,rgba(0,0,0,.62)),
    linear-gradient(to bottom,rgba(0,0,0,.04),rgba(0,0,0,.10) 70%,#020706 100%),
    url('https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=2400&q=85');
  background-size:cover;
  background-position:center 50%;
  filter:brightness(.54) contrast(1.18) saturate(.8);
}

.heroLeft{
  width:600px;
  position:relative;
  z-index:4;
}

.kicker,.sectionKicker{
  font:700 16px Rajdhani,sans-serif;
  letter-spacing:7px;
  color:#dde6e3;
  margin:0 0 20px;
}

.hero h1{
  margin:0 0 24px;
  font-family:Rajdhani,sans-serif;
  font-size:clamp(76px,6.4vw,112px);
  line-height:.9;
  letter-spacing:1px;
}

.hero h1 span{
  display:block;
  color:white;
  text-shadow:0 0 18px rgba(255,255,255,.18);
}

.hero h1 strong{
  display:block;
  color:var(--green);
  text-shadow:0 0 30px rgba(28,213,160,.58);
}

.intro{
  font-size:20px;
  line-height:1.55;
  color:#d7dfdc;
  max-width:500px;
}

.ctaRow{
  display:flex;
  gap:18px;
  margin:34px 0 34px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  border-radius:8px;
  padding:20px 34px;
  min-width:205px;
}

.primary{
  background:var(--green);
  color:#00170f;
  box-shadow:0 0 30px rgba(28,213,160,.4);
}

.secondary{
  background:rgba(0,0,0,.24);
  color:white;
  border:1px solid var(--line2);
}

.serverSearch{
  width:430px;
  max-width:100%;
  background:rgba(1,9,9,.65);
  border:1px solid var(--line2);
  border-radius:7px;
  padding:17px 20px;
  text-align:left;
  color:white;
  cursor:pointer;
}

.serverSearch small{
  display:block;
  color:var(--green);
  font:800 14px Rajdhani,sans-serif;
  letter-spacing:4px;
  margin-bottom:14px;
}

.serverSearch span{
  display:flex;
  align-items:center;
  gap:12px;
  color:#d9e1de;
  font-size:17px;
}

.serverSearch i{
  margin-left:auto;
  color:var(--green);
  font-style:normal;
  font-size:30px;
}

.heroRight{
  position:absolute;
  right:8vw;
  top:205px;
  width:42vw;
  max-width:650px;
  min-width:500px;
  z-index:3;
}

.heroRight img{
  width:100%;
  display:block;
  filter:drop-shadow(0 0 50px rgba(28,213,160,.68));
}

.heroRight:before{
  content:"";
  position:absolute;
  inset:18%;
  background:var(--green);
  filter:blur(80px);
  opacity:.18;
  border-radius:50%;
  z-index:-1;
}

.homeCards{
  margin:-15px 6.4vw 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  position:relative;
  z-index:8;
}

.card{
  min-height:205px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:rgba(2,18,15,.72);
  backdrop-filter:blur(10px);
  padding:32px 34px;
}

.icon{font-size:38px;margin-bottom:22px}

.card h3{
  font:700 24px Rajdhani,sans-serif;
  color:var(--green);
  margin:0 0 12px;
}

.card p{
  color:#c4cfcc;
  line-height:1.55;
  margin:0;
}

.scrollDown{
  display:block;
  margin:76px auto 0;
  background:transparent;
  border:0;
  color:#aeb9b5;
  letter-spacing:4px;
  font-size:12px;
  cursor:pointer;
}

.scrollDown span{
  display:block;
  width:2px;
  height:24px;
  margin:0 auto 10px;
  background:var(--green);
  box-shadow:0 0 14px var(--green);
}

.contentBlock{
  margin:70px 6.4vw 0;
  padding:55px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.contentBlock h2,.subPage h2,.staffHero h2{
  font:700 45px Rajdhani,sans-serif;
  margin:0;
}

.contentBlock h2{max-width:640px}

.outlineBtn{
  background:rgba(0,0,0,.28);
  border:1px solid var(--line2);
  color:var(--green);
  border-radius:8px;
  padding:14px 22px;
  font-weight:800;
}

.jobs{
  width:100%;
  display:grid;
  grid-template-columns:repeat(11,1fr);
  gap:12px;
  margin-top:26px;
}

.jobs div{
  height:95px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:rgba(2,18,15,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
}

.jobs span{font:700 16px Rajdhani,sans-serif}

.subHero,.subPage{
  min-height:100vh;
  padding:180px 6.4vw 80px;
  position:relative;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.18),rgba(0,0,0,.72)),
    url('https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=2400&q=85');
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.staffHero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  min-height:430px;
  padding-bottom:40px;
}

.staffHero h2{font-size:58px}

.staffHero h2 span{color:var(--green)}

.staffHero p{
  color:#d4ddda;
  font-size:17px;
  line-height:1.6;
  max-width:590px;
}

.staffHero img{
  width:360px;
  filter:drop-shadow(0 0 42px rgba(28,213,160,.62));
}

.staffPanel{
  padding:0 6.4vw 90px;
  background:#020706;
}

.staffTabs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line2);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:34px;
}

.staffTabs button{
  background:rgba(1,13,12,.7);
  border:0;
  border-right:1px solid var(--line);
  color:white;
  padding:19px;
  font-weight:800;
}

.staffTabs button.active{color:var(--green)}

.staffGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1160px;
  margin:0 auto;
}

.staffGrid article{
  position:relative;
  min-height:235px;
  border:1px solid var(--line2);
  background:rgba(2,18,15,.73);
  border-radius:8px;
  padding:28px;
}

.avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,var(--green),#081b17);
  font:800 30px Rajdhani,sans-serif;
  color:#00170f;
  margin-bottom:20px;
}

.staffGrid h3{
  font:700 26px Rajdhani,sans-serif;
  margin:0;
}

.staffGrid p{
  color:#c5cecb;
  margin:5px 0 18px;
}

.badge{
  position:absolute;
  right:18px;
  top:18px;
  font:800 12px Rajdhani,sans-serif;
  padding:6px 10px;
  border-radius:14px;
}


.management{
  background:#1cd5a0;
  color:#00170f;
}

.community{
  background:#1e8366;
  color:white;
}

.developer{
  background:#ffca28;
  color:#111;
}

.admin{
  background:#3498db;
  color:white;
}


.discordPanel{
  max-width:1160px;
  margin:55px auto 0;
  padding:34px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:linear-gradient(90deg,rgba(3,24,20,.88),rgba(2,18,15,.55));
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:24px;
  align-items:center;
}

.discordIcon{font-size:42px}

.discordPanel h3{
  margin:0;
  color:#e9fffa;
  font:700 24px Rajdhani,sans-serif;
}

.discordPanel p{
  margin:6px 0 0;
  color:#c9d3d0;
}

.ruleGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.ruleGrid article{
  border:1px solid var(--line2);
  background:rgba(2,18,15,.78);
  border-radius:8px;
  padding:30px;
}

.ruleGrid h3{
  color:var(--green);
  font:700 28px Rajdhani,sans-serif;
  margin:0 0 10px;
}

.ruleGrid p{
  color:#c8d2cf;
  line-height:1.55;
}

.center{text-align:center}

.center p{
  color:#cad3d0;
  font-size:19px;
}

@media(max-width:1100px){
  .topbar{
    height:auto;
    grid-template-columns:1fr;
    padding:16px;
    gap:12px;
  }

  .brand{
    height:auto;
  }

  .connectTop{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:60;
  }

  .tabs{
    height:auto;
    flex-wrap:wrap;
    gap:8px;
  }

  .tab{padding:10px 18px}

  .hero{
    height:auto;
    min-height:850px;
    padding-top:240px;
  }

  .bg{inset:0}

  .heroRight{
    opacity:.32;
    right:-10vw;
    top:240px;
  }

  .homeCards,.staffGrid,.ruleGrid{grid-template-columns:1fr 1fr}

  .jobs{grid-template-columns:repeat(3,1fr)}

  .staffHero img{display:none}
}

@media(max-width:700px){
  .hero h1{font-size:58px}
  .heroLeft{width:100%}
  .heroRight{min-width:420px;opacity:.22}
  .ctaRow{flex-direction:column}
  .homeCards,.staffGrid,.ruleGrid{grid-template-columns:1fr}
  .jobs{grid-template-columns:repeat(2,1fr)}
  .discordPanel{grid-template-columns:1fr}
  .staffTabs{grid-template-columns:1fr}
}


.staffTabs.singleTitle{
    max-width:1200px;
    margin:0 auto 60px auto;
}

.staffTabs.singleTitle button{
    width:100%;
    justify-content:center;
    text-align:center;
    font-size:30px;
    padding:28px;
    color:#1cd5a0;
    background:rgba(1,13,12,.72);
}

.staffGrid{
    max-width:1100px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:34px !important;
    justify-items:center !important;
}

.staffGrid article{
    width:100%;
    max-width:430px;
    min-height:360px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.staffGrid article:first-child{
    grid-column:1 / -1;
    max-width:320px;
}

.staffGrid .avatar{
    margin-bottom:24px;
}

.staffGrid h3{
    font-size:48px;
    margin-bottom:12px;
}

.staffGrid p{
    font-size:28px;
    margin-bottom:20px;
}

.staffGrid .badge{
    position:absolute;
    top:18px;
    left:50%;
    transform:translateX(-50%);
}

@media(max-width:900px){
    .staffGrid{
        grid-template-columns:1fr !important;
    }

    .staffGrid article:first-child{
        grid-column:auto;
        max-width:430px;
    }
}


.staffTabs.singleTitle{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
}

.staffTabs.singleTitle button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    width:100% !important;
    white-space:nowrap !important;
    line-height:1 !important;
}


/* HOME CARD OVERLAP FIX */
.homeCards{
    margin-top: 35px !important;
    position: relative;
    z-index: 10;
}

.serverSearch{
    margin-bottom: 40px !important;
}

.scrollDown{
    margin-top: 45px !important;
}


/* LOWER HOME CARDS MORE */
.homeCards{
    margin-top: 90px !important;
}

.serverSearch{
    margin-bottom: 75px !important;
}


/* FINAL SEARCH BOX OVERLAP FIX */
.serverSearch{
    position:relative !important;
    z-index:20 !important;
    margin-bottom:110px !important;
}

.homeCards{
    margin-top:140px !important;
}


/* MOVE CARDS UNDER SCROLL DOWN */
.homeCards{
    margin-top:260px !important;
}

.scrollDown{
    position:relative;
    z-index:25;
    margin-top:10px !important;
    margin-bottom:60px !important;
}


/* KEEP SCROLL TEXT ABOVE CARDS */
.scrollDown{
    position:relative !important;
    z-index:50 !important;
    margin-top:120px !important;
    margin-bottom:20px !important;
}

.homeCards{
    margin-top:80px !important;
}

.hero{
    padding-bottom:140px !important;
}


.rulesMega,.storeMega{
padding:120px 7vw;
background:#020706;
}

.rulesHero,.storeHero{
text-align:center;
margin-bottom:60px;
}

.rulesHero h2,.storeHero h2{
font-size:72px;
font-family:Rajdhani,sans-serif;
margin:0;
}

.rulesHero h2 span{
color:#1cd5a0;
}

.rulesHero p,.storeHero p{
font-size:22px;
color:#d2d8d6;
}

.storeHero h3{
color:#1cd5a0;
font-size:40px;
}

.ruleBox{
background:rgba(5,18,15,.8);
border:1px solid rgba(28,213,160,.28);
border-radius:14px;
padding:34px;
margin-bottom:28px;
}

.ruleBox h3{
color:#1cd5a0;
font-size:32px;
margin-top:0;
}

.ruleBox p,.ruleBox li{
color:#d4ddda;
font-size:18px;
line-height:1.7;
}

.storeCards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-top:50px;
}

.storeCard{
background:#f4f4f4;
color:#111;
border-radius:18px;
padding:42px;
min-height:260px;
}

.storeCard h4{
font-size:34px;
margin-top:0;
}

.storeCard p{
font-size:19px;
line-height:1.7;
}

@media(max-width:900px){
.storeCards{
grid-template-columns:1fr;
}

.rulesHero h2,.storeHero h2{
font-size:52px;
}
}


/* FIX HERO TO CONTENT TRANSITION */
.hero{
    position:relative;
    padding-bottom:40px !important;
    margin-bottom:0 !important;
    overflow:hidden;
}

/* KEEP SCROLL DOWN AT TOP */
.scrollDown{
    position:relative !important;
    z-index:100 !important;
    margin-top:20px !important;
    margin-bottom:0 !important;
}

/* PUSH CARDS LOWER */
.homeCards{
    margin-top:180px !important;
    position:relative;
    z-index:5;
}

/* REMOVE HARSH LINE CHANGE */
.homeCards::before{
    content:"";
    position:absolute;
    top:-120px;
    left:0;
    width:100%;
    height:160px;
    background:linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        rgba(1,10,8,.55) 45%,
        rgba(1,10,8,.95) 100%);
    pointer-events:none;
    z-index:-1;
}


/* === TRUE HOME SCROLL / TRANSITION FIX === */

/* Make the hero end before the card area begins */
#home .hero{
    height:760px !important;
    min-height:760px !important;
    padding-bottom:0 !important;
    margin-bottom:0 !important;
    overflow:hidden !important;
}

/* Keep scroll down immediately under the hero, before the cards */
#home > .scrollDown{
    display:block !important;
    position:relative !important;
    z-index:30 !important;
    margin:18px auto 52px auto !important;
    padding:0 !important;
}

/* Put the colour/grid/card section only AFTER the scroll text */
#home > .homeCards{
    margin:0 6.4vw 0 6.4vw !important;
    padding-top:42px !important;
    position:relative !important;
    z-index:5 !important;
}

/* Smooth fade into the darker card section instead of a hard line */
#home > .homeCards::before{
    content:"" !important;
    position:absolute !important;
    left:-6.4vw !important;
    right:-6.4vw !important;
    top:-95px !important;
    height:130px !important;
    background:linear-gradient(to bottom,
        rgba(2,7,6,0) 0%,
        rgba(2,7,6,.45) 45%,
        rgba(2,7,6,1) 100%) !important;
    pointer-events:none !important;
    z-index:-1 !important;
}

/* stop old margin overrides affecting the search/card spacing */
#home .serverSearch{
    margin-bottom:0 !important;
}


/* === CLEAN HOME HERO VIEW === */

/* Make the first home view full screen so lower content is hidden until scrolling */
#home .hero{
    height:100vh !important;
    min-height:820px !important;
    padding-bottom:0 !important;
    margin-bottom:0 !important;
    overflow:hidden !important;
}

/* Put the scroll down prompt at the bottom of the first screen */
#home > .scrollDown{
    position:absolute !important;
    left:50% !important;
    bottom:28px !important;
    transform:translateX(-50%) !important;
    z-index:80 !important;
    margin:0 !important;
}

/* Start cards after the full-screen hero, so they do not show until scrolling */
#home > .homeCards{
    margin:0 6.4vw 0 6.4vw !important;
    padding-top:70px !important;
    position:relative !important;
    z-index:5 !important;
}

/* Smooth transition into the darker lower section */
#home > .homeCards::before{
    content:"" !important;
    position:absolute !important;
    left:-6.4vw !important;
    right:-6.4vw !important;
    top:-120px !important;
    height:160px !important;
    background:linear-gradient(to bottom,
        rgba(2,7,6,0) 0%,
        rgba(2,7,6,.55) 50%,
        rgba(2,7,6,1) 100%) !important;
    pointer-events:none !important;
    z-index:-1 !important;
}


/* === ONLY MOVE SCROLL DOWN TO HERO BOTTOM === */

/* Put scroll down at bottom of the visible hero section only */
#home > .scrollDown{
    position:absolute !important;
    left:50% !important;
    bottom:18px !important;
    transform:translateX(-50%) !important;
    z-index:80 !important;
    margin:0 !important;
}

/* Keep home cards in normal place */
#home > .homeCards{
    margin-top:40px !important;
    padding-top:40px !important;
}


/* === FORCE SCROLL TEXT TO HERO SCREEN ONLY === */

#home{
    position:relative !important;
}

/* Move scroll text onto the hero image section */
#home .scrollDown{
    position:absolute !important;
    left:50% !important;
    top:92vh !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    z-index:999 !important;
    margin:0 !important;
}

/* Ensure lower sections don't pull the scroll text down */
#home .homeCards,
#home .updatesSection,
#home .jobsSection{
    position:relative !important;
    z-index:1 !important;
}


/* FORCE STAFF PAGE BACKGROUND TO HUNTING IMAGE */
#staff .staffHero,
#staff .subHero,
.staffHero,
.subHero{
    background-image:
        linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.25), rgba(0,0,0,.72)),
        url("assets/staff-hunting-bg.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Hide/override any old city background overlays on staff page */
#staff .staffHero::before,
#staff .staffHero::after,
#staff .subHero::before,
#staff .subHero::after{
    background-image: none !important;
}


/* FORCE HOME PAGE HERO IMAGE */
#home .hero,
#home .hero-section,
.homeHero,
.hero{
    background-image:
        linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25), rgba(0,0,0,.65)),
        url("assets/home-hero.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* FINAL HOME PAGE POLICE BACKGROUND - LOGO REMOVED, SKY KEPT */
#home .bg{
    background:
        linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.22) 47%, rgba(0,0,0,.62)),
        linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.14) 72%, #020706 100%),
        url("assets/pd-home-bg.png") !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

/* Also cover any other home hero background rules */
#home .hero,
#home .hero-section,
.homeHero,
.hero{
    background-image:none !important;
}


/* Make Prisma 2 Cases show ONLY when the Store tab/page is active */
#prisma-cases{
    display:none;
}

#store.page.active ~ #prisma-cases{
    display:block;
}

/* If Prisma is physically inside the store page, keep it visible there */
#store.page.active #prisma-cases{
    display:block;
}


#store #prisma-cases{
    display:block !important;
}


.support{
    background:#ffc7c6;
    color:#111;
}


.supportRow{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:40px;
}

.supportRow article{
    max-width:320px;
}


/* STAFF REPAIR: keep staff visible and put support on its own row */
.staffGrid{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:24px !important;
    max-width:1160px !important;
    margin:0 auto !important;
}

.supportRow{
    width:100%;
    display:flex;
    justify-content:center;
    margin:40px auto 0 auto;
}

.supportRow article{
    position:relative;
    width:100%;
    max-width:360px;
    min-height:235px;
    border:1px solid var(--line2);
    background:rgba(2,18,15,.73);
    border-radius:8px;
    padding:28px;
}

.supportRow h3{
    font:700 26px Rajdhani,sans-serif;
    margin:0;
}

.supportRow p{
    color:#c5cecb;
    margin:5px 0 18px;
}

@media(max-width:900px){
    .staffGrid{
        grid-template-columns:1fr !important;
    }
}


/* STAFF RANK ROW LAYOUT */
.staffRankRows{
    max-width:1160px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:34px;
    align-items:center;
}

.staffRankRow{
    width:100%;
    display:flex;
    justify-content:center;
    gap:34px;
    flex-wrap:wrap;
}

.staffRankRow.twoCards{
    justify-content:center;
}

.staffRankRows article{
    position:relative;
    width:100%;
    max-width:370px;
    min-height:300px;
    border:1px solid var(--line2);
    background:rgba(2,18,15,.73);
    border-radius:8px;
    padding:34px 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.staffRankRows .badge{
    position:absolute;
    top:18px;
    left:50%;
    transform:translateX(-50%);
}

.staffRankRows h3{
    font:700 42px Rajdhani,sans-serif;
    margin:18px 0 8px;
}

.staffRankRows p{
    color:#c5cecb;
    font-size:24px;
    margin:0 0 18px;
}

.staffRankRows .avatar{
    margin-bottom:10px;
}

@media(max-width:900px){
    .staffRankRow,
    .staffRankRow.twoCards{
        flex-direction:column;
        align-items:center;
    }

    .staffRankRows article{
        max-width:420px;
    }
}