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

:root{--black:#050505;--white:#f1eee8;--gray:#8d8981;--line:#252522;--red:#d81212}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.header{height:78px;position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;transition:.3s}
.header.scrolled{background:rgba(3,3,3,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font:800 24px 'Barlow Condensed';letter-spacing:.18em}
.header nav{display:flex;gap:38px}
.header nav a{font-size:11px;letter-spacing:.19em;color:#aaa;transition:.2s}
.header nav a:hover{color:#fff}
.hamburger{display:none;background:none;border:0}
.hamburger i{display:block;width:28px;height:1px;background:#fff;margin:7px}

.hero{height:100vh;min-height:700px;position:relative;overflow:hidden;display:flex;align-items:center}
.hero-image{position:absolute;inset:0;background:url("assets/hero-background.jpg") center center/cover no-repeat}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.32),transparent 55%,rgba(0,0,0,.15)),linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%)}
.hero-content{position:relative;z-index:2;width:520px;margin-left:9vw;margin-top:13vh}
.hero-logo-wrap{width:100%;overflow:hidden}
.hero-logo-wrap img{display:block;width:100%;height:auto}
.tagline{margin:20px 0 0;font-size:10px;letter-spacing:.35em;color:#d0c8bd;font-weight:600}
.intro{font-size:14px;letter-spacing:.08em;color:#c4c0b8;margin:24px 0}
.buttons{display:flex;gap:14px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;padding:15px 25px;font-size:10px;font-weight:700;letter-spacing:.2em;border:1px solid #77736b;transition:.25s}
.button.red{background:var(--red);border-color:var(--red);color:#fff}
.button.outline{background:rgba(0,0,0,.25)}
.button:hover{transform:translateY(-3px);filter:brightness(1.08)}
.scroll-indicator{position:absolute;right:4vw;bottom:38px;z-index:3;font-size:9px;letter-spacing:.3em;color:#999;writing-mode:vertical-rl}
.scroll-indicator span{display:block;width:1px;height:48px;background:#777;margin-top:12px}

.section{padding:150px 8vw}
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:8vw;align-items:center}
.section-image{height:auto;aspect-ratio:1792/1024;position:relative;overflow:hidden;background:#111}

.section-image:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 45%,rgba(0,0,0,.75))}
.school-image{background:url("assets/story-margalla-hills.png") center center/contain no-repeat;background-color:#111}
.school-image:before{content:none}
.section-image span{position:absolute;bottom:25px;left:28px;z-index:2;font-size:10px;letter-spacing:.3em;color:#aaa}
.copy small,.heading small,.final-content small{font-size:10px;letter-spacing:.32em;color:#aaa}
.copy h2,.heading h2,.final-content h2{font:800 clamp(65px,8vw,125px)/.82 'Barlow Condensed';margin:25px 0 40px}
.copy h2 em,.heading h2 em,.final-content h2 em{font-style:normal;color:#858078}
.copy p{max-width:520px;color:#929089;font-size:14px;line-height:1.9}
.arrow-link{display:inline-block;margin-top:20px;border-bottom:1px solid #777;padding-bottom:8px;font-size:10px;letter-spacing:.22em}
.arrow-link b{margin-left:15px}

.features{background:#090908;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.heading{margin-bottom:70px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.card{border-top:1px solid #333;padding-top:15px}
.card-art{height:410px;background:#171714;position:relative;overflow:hidden;display:flex;align-items:end;padding:22px}
.card-art:after{content:"";position:absolute;inset:0}
.card-art span{position:relative;z-index:2;font-size:9px;letter-spacing:.3em;color:#bbb}
.art-one{background-image:url("assets/explore-map.png");background-size:cover;background-position:center;background-repeat:no-repeat}
.art-one:after{display:none}
.art-two{background-image:url("assets/nightmare.png");background-size:cover;background-position:center;background-repeat:no-repeat}
.art-two:after{background:linear-gradient(180deg,transparent,#000)}
.art-three{background-image:url("assets/survival.png");background-size:cover;background-position:center;background-repeat:no-repeat}
.art-three:after{background:linear-gradient(130deg,transparent 35%,rgba(0,0,0,.45))}
.card-number{font:600 13px 'Barlow Condensed';color:#666;margin-top:18px}
.card h3{font:700 29px 'Barlow Condensed';margin:8px 0}
.card p{color:#88847d;font-size:13px;line-height:1.7;max-width:390px}

.statement{height:75vh;min-height:550px;position:relative;display:flex;align-items:center;padding:0 8vw;overflow:hidden}
.statement-bg{position:absolute;inset:0;background:radial-gradient(circle at 60% 45%,#302d27,#0b0b0a 48%,#030303 100%)}
.statement-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.15),rgba(0,0,0,.7))}
.statement-content{position:relative;z-index:2}
.statement-content h2{font:800 clamp(48px,6vw,90px)/.82 'Barlow Condensed';margin:22px 0}
.statement-content .muted{color:#77736b}

.media .gallery{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:300px 300px;gap:14px}
.shot{background:#151512;display:flex;align-items:end;padding:22px;position:relative;overflow:hidden}
.shot:after{content:"";position:absolute;inset:0}
.shot span{position:relative;z-index:2;font-size:9px;letter-spacing:.3em;color:#aaa}
.shot1{grid-row:span 2;background:linear-gradient(135deg,#25231f,#070707)}
.shot1:after{background:radial-gradient(circle at 50% 35%,#4a4438,transparent 20%),linear-gradient(180deg,transparent,#000)}
.shot2{background:linear-gradient(145deg,#24231f,#0b0b0a)}
.shot3{background:radial-gradient(circle,#3b372f,transparent 18%),#090909}
.shot4{background:linear-gradient(125deg,#28251f,#070707)}

.final-cta{height:75vh;min-height:560px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;border-top:1px solid var(--line);overflow:hidden}
.final-bg{position:absolute;inset:0;background:radial-gradient(circle,#29261f,#090909 52%,#020202)}
.final-content{position:relative;z-index:2}
.final-content h2{margin-bottom:45px}

footer{border-top:1px solid var(--line);padding:55px 8vw;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;color:#777;font-size:10px;letter-spacing:.1em}
footer strong{font:800 22px 'Barlow Condensed';letter-spacing:.18em;color:#ddd}
footer p{margin:7px 0}
.footer-nav{display:flex;gap:20px;flex-wrap:wrap}
.footer-nav a:hover{color:#fff}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.show{opacity:1;transform:none}

@media(max-width:850px){
  .header{height:68px;padding:0 6vw}
  .header nav{display:none;position:absolute;top:68px;left:0;right:0;background:#070707;padding:28px 6vw;flex-direction:column;gap:22px;border-bottom:1px solid var(--line)}
  .header.open nav{display:flex}
  .hamburger{display:block}
  .hero-content{width:84vw;margin-left:8vw;margin-top:10vh}
  .section{padding:100px 7vw}
  .story{grid-template-columns:1fr;gap:50px}
  .section-image{height:auto;aspect-ratio:1792/1024}
  .cards{grid-template-columns:1fr}
  .card-art{height:360px}
  .media .gallery{grid-template-columns:1fr;grid-template-rows:repeat(4,250px)}
  .shot1{grid-row:auto}
  .statement{height:60vh;padding:0 7vw}
  footer{grid-template-columns:1fr;padding:45px 7vw}
}

/* Hover color: navigation becomes red */
.header nav a:hover{
  color:#e31a17 !important;
  opacity:1;
}

/* Prevent any duplicate small hero artwork */
.hero-logo-wrap{
  display:none !important;
}

/* Keep hero content aligned like the reference */
.hero-content{
  margin-top:8vh;
}

/* Hero title is HTML text, not part of the background image */
.hero-content{
  width:min(760px,48vw);
  margin-left:9vw;
  margin-top:2vh;
}
.game-title{
  text-align:center;
  line-height:.9;
  margin-bottom:28px;
}
.title-main{
  font-family:'Barlow Condensed',Impact,sans-serif;
  font-size:clamp(64px,7vw,118px);
  font-weight:900;
  letter-spacing:.02em;
  color:#e11111;
  text-shadow:0 3px 0 #5d0000, 0 0 18px rgba(220,0,0,.12);
}
.title-sub{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  margin-top:10px;
  color:#f0eee9;
  font-family:'Barlow Condensed',Georgia,serif;
  font-size:clamp(28px,3.2vw,56px);
  font-weight:700;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.title-sub span{
  width:72px;
  height:5px;
  background:#e11111;
  display:block;
}
.title-vr{
  font-family:'Barlow Condensed',Impact,sans-serif;
  font-size:clamp(35px,4vw,64px);
  font-weight:800;
  color:#f0eee9;
  margin-top:4px;
}
.tagline{margin-top:25px}
@media(max-width:850px){
  .hero-content{width:86vw;margin-left:7vw}
  .title-main{font-size:15vw}
  .title-sub{font-size:7vw;gap:7px}
  .title-sub span{width:35px;height:3px}
  .title-vr{font-size:9vw}
}

/* === Unified Prenecrotic red/white typography === */
.section-title,
.story-title,
.feature-title,
.media-title,
.contact-title,
h1, h2, h3{
  color:#f2f0eb;
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}

.section-kicker,
.eyebrow,
.section-label,
.story-kicker,
.feature-kicker,
.media-kicker,
.contact-kicker{
  color:#e11111 !important;
}

.story-title .accent,
.feature-title .accent,
.media-title .accent,
.contact-title .accent,
.section-title .accent{
  color:#e11111 !important;
}

.section-title::after,
.story-title::after,
.feature-title::after,
.media-title::after,
.contact-title::after{
  background:#e11111 !important;
}

a:hover,
.header nav a:hover{
  color:#e11111 !important;
}

.button.red,
.cta,
.primary-button{
  background:#e11111 !important;
  border-color:#e11111 !important;
  color:#fff !important;
}

.button.outline:hover,
.secondary-button:hover{
  border-color:#e11111 !important;
  color:#e11111 !important;
}

/* The School visual: use the newly uploaded foggy image */
.school-image{
  background:url("assets/the-school.png") center center/cover no-repeat !important;
}
.school-image:before{
  content:none !important;
}

/* === THE SCHOOL: larger cinematic image === */
.school-section .school-image,
.school-image{
  width:100% !important;
  min-height:620px !important;
  background-size:cover !important;
  background-position:center center !important;
}

/* Let the image/card occupy more horizontal space on desktop */
.school-section .story-grid,
.story-grid{
  grid-template-columns:minmax(0, 1.35fr) minmax(420px, .95fr) !important;
  gap:clamp(42px,5vw,90px) !important;
}

@media (max-width: 900px){
  .school-section .story-grid,
  .story-grid{
    grid-template-columns:1fr !important;
  }
  .school-section .school-image,
  .school-image{
    min-height:480px !important;
  }
}

/* === Headings: red first line + white supporting text === */
.story-title,
.feature-title,
.media-title,
.contact-title,
.section-title{
  color:#f3f1ec !important;
}

.story-title .accent,
.feature-title .accent,
.media-title .accent,
.contact-title .accent,
.section-title .accent{
  color:#e11111 !important;
}

/* If headings are plain text, emphasize their first line/word using existing
   heading structure without changing the actual content. */
.story-title,
.feature-title,
.media-title,
.contact-title,
.section-title{
  position:relative;
}

/* Red section labels / kickers */
.story-kicker,
.feature-kicker,
.media-kicker,
.contact-kicker,
.section-kicker,
.eyebrow{
  color:#e11111 !important;
}

/* White body copy */
.story-copy,
.feature-copy,
.media-copy,
.contact-copy,
.section-copy,
.story-section p,
.features-section p,
.media-section p,
.contact-section p{
  color:#e9e6df !important;
}

/* Red underlines and dividers */
.story-title::after,
.feature-title::after,
.media-title::after,
.contact-title::after,
.section-title::after{
  background:#e11111 !important;
}

/* Red hover throughout navigation and text links */
.header nav a:hover,
nav a:hover,
a:hover{
  color:#e11111 !important;
}


/* =========================================================
   STORY SECTION — cinematic layout based on reference image
   Only #story is overridden here; other sections remain unchanged.
   ========================================================= */
#story.story{
  position:relative;
  min-height:720px;
  height:78vh;
  padding:0;
  display:block;
  overflow:hidden;
  background:#050505;
}

#story.story .school-image{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  background:url("assets/the-school.png") center center/cover no-repeat !important;
  z-index:0;
}

/* Fade the school image naturally into the black text side. */
#story.story .school-image:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.04) 40%,
      rgba(0,0,0,.34) 58%,
      rgba(0,0,0,.84) 71%,
      #050505 84%,
      #050505 100%),
    linear-gradient(0deg,rgba(0,0,0,.40),transparent 45%);
}

#story.story .school-image span{
  display:none;
}

#story.story .copy{
  position:absolute;
  z-index:2;
  top:50%;
  right:7.5vw;
  transform:translateY(-50%);
  width:min(510px,31vw);
  opacity:1;
}

#story.story .copy.reveal{
  transform:translateY(-50%);
}

#story.story .copy small{
  display:block;
  color:#e11111 !important;
  font-size:11px;
  line-height:1;
  font-weight:600;
  letter-spacing:.34em;
  margin-bottom:28px;
}

#story.story .copy h2{
  margin:0 0 40px;
  color:#e11111 !important;
  font:900 clamp(64px,6.5vw,112px)/.82 'Barlow Condensed',Impact,sans-serif;
  letter-spacing:-.015em;
  text-transform:uppercase;
  text-shadow:none;
}

#story.story .copy h2 em{
  color:#f1eee8 !important;
  font-style:normal;
}

#story.story .copy p{
  max-width:500px;
  margin:0 0 25px;
  color:#e5e2dc !important;
  font-size:14px;
  line-height:1.9;
  font-weight:400;
}

#story.story .arrow-link{
  margin-top:10px;
  padding-bottom:10px;
  border-bottom:1px solid #e11111;
  color:#e11111 !important;
  font-size:10px;
  font-weight:600;
  letter-spacing:.30em;
}

#story.story .arrow-link b{
  margin-left:15px;
  font-size:15px;
}

@media(max-width:1100px){
  #story.story .copy{
    right:6vw;
    width:min(470px,40vw);
  }
}

@media(max-width:850px){
  #story.story{
    height:auto;
    min-height:0;
    padding:0;
    display:flex;
    flex-direction:column;
  }
  #story.story .school-image{
    position:relative;
    inset:auto;
    height:58vw !important;
    min-height:360px !important;
    order:0;
  }
  #story.story .school-image:after{
    background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));
  }
  #story.story .copy,
  #story.story .copy.reveal{
    position:relative;
    top:auto;
    right:auto;
    transform:none;
    width:auto;
    padding:70px 7vw 90px;
    background:#050505;
    order:1;
  }
  #story.story .copy h2{
    font-size:clamp(60px,16vw,100px);
    margin-bottom:32px;
  }
}

/* Story image frame — left side only */
.story .school-image{
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    0 0 0 8px rgba(18,18,17,.9),
    0 0 0 9px rgba(145,138,126,.28),
    0 24px 55px rgba(0,0,0,.55) !important;
  background-color:#111 !important;
}

.story .school-image:after{
  border: 1px solid rgba(255,255,255,.08);
  box-sizing:border-box;
}

/* === Story: half-width framed image, full image visible, no text overlay === */
#story.story{
  display:grid !important;
  grid-template-columns:50% 50% !important;
  align-items:center !important;
  height:auto !important;
  min-height:720px !important;
  padding:70px 6vw !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  gap:0 !important;
}

#story.story .school-image{
  position:relative !important;
  inset:auto !important;
  width:calc(100% - 6px) !important;
  height:auto !important;
  aspect-ratio:1778 / 885 !important;
  min-height:0 !important;
  grid-column:1 !important;
  grid-row:1 !important;
  background:url("assets/the-school.png") center center / contain no-repeat !important;
  background-color:#080808 !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 0 0 7px rgba(18,18,17,.95), 0 0 0 8px rgba(145,138,126,.28), 0 24px 55px rgba(0,0,0,.55) !important;
}

/* Remove every overlay/label from the image panel. */
#story.story .school-image:after,
#story.story .school-image:before,
#story.story .school-image span{
  display:none !important;
  content:none !important;
  background:none !important;
  border:0 !important;
}

#story.story .copy,
#story.story .copy.reveal{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  transform:none !important;
  width:auto !important;
  max-width:520px !important;
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:center !important;
  padding-left:clamp(30px,4vw,75px) !important;
  padding-right:0 !important;
}

@media(max-width:850px){
  #story.story{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    padding:50px 7vw 70px !important;
    gap:45px !important;
  }
  #story.story .school-image{
    width:100% !important;
    aspect-ratio:1778 / 885 !important;
    height:auto !important;
  }
  #story.story .copy,
  #story.story .copy.reveal{
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }
}

/* === MEDIA: YouTube gameplay video === */
.media .video-shot{
  padding:0;
  background:#000;
}
.media .video-shot:after{
  display:none;
}
.media .video-shot iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* === Typography: red headers, white bold body text === */
h1, h2, h3, h4, h5, h6,
.title-main, .title-sub, .title-vr,
.section-title, .story-title, .feature-title, .media-title, .contact-title,
.heading small, .copy small, .final-content small,
.section-kicker, .eyebrow, .section-label,
.story-kicker, .feature-kicker, .media-kicker, .contact-kicker,
.card-number {
  color: #e11111 !important;
  font-weight: 800 !important;
}

.title-sub span { background:#e11111 !important; }

body,
p, li, span, label,
.header nav a,
.logo,
.copy p,
.card p,
footer p,
footer strong,
.arrow-link,
.scroll-indicator,
.intro,
.tagline,
.button,
footer a {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Keep the image labels readable while following the white-text rule. */
.card-art span { color:#fff !important; font-weight:800 !important; }

/* Red heading emphasis remains red. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.copy h2 em, .heading h2 em, .final-content h2 em {
  color:#e11111 !important;
}

/* User-requested white headline text */
.title-sub,
.title-vr,
.features .heading h2,
.features .heading h2 em,
.statement-content .muted,
.final-content h2,
.final-content h2 em{
  color:#fff !important;
}


/* Requested statement colors */
.statement-content .statement-white { color: #fff !important; }
.statement-content .statement-red { color: var(--red) !important; }

/* Four CTA buttons */
.buttons .button { min-width: 210px; }
@media (max-width: 700px) {
  .buttons .button { min-width: 0; width: 100%; }
}