/* ============================================================
   SOULSTICK INTERACTIVE - Page-specific styles
   ============================================================ */

/* ================= HOME: cinematic hero (pinned scroll reveal) ================= */
.hero-cinematic {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 0;
}
.hero-cinematic .hero-media { position: absolute; inset: -6%; z-index: 0; }
.hero-cinematic .hero-media .video-shell { position: absolute; inset: 0; }
.hero-cinematic .hero-media img.hero-poster,
.hero-cinematic .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-cinematic .hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* soft pool of shadow so the logo and text always read against bright footage */
    radial-gradient(58% 46% at 50% 46%, rgba(6, 6, 9, 0.55), transparent 72%),
    radial-gradient(130% 95% at 50% 35%, transparent 55%, rgba(10, 10, 12, 0.6) 100%),
    /* only a whisper at the very top so the navbar reads, then straight into the film */
    linear-gradient(180deg, rgba(10, 10, 12, 0.34) 0, transparent 14%, transparent 62%, var(--bg) 99%);
}

/* Silent looping YouTube film, scaled to cover the hero at any aspect ratio */
.hero-cinematic .yt-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-cinematic .yt-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;          /* 16:9 relative to width */
  min-width: 177.78vh;      /* 16:9 relative to height */
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero-cinematic canvas.embers { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.hero-cinematic .hero-content {
  position: relative;
  z-index: 3;
  padding: clamp(86px, 11vh, 130px) 6vw clamp(46px, 7vh, 88px);
  max-width: 1100px;
  margin-inline: auto;
}
/* Staggered entrance, in CSS so it never depends on JS.
   `both` fill keeps the final state visible; reduced-motion users land on it instantly. */
.hero-content > * { animation: heroIn 0.9s var(--ease-out) both; }
.hero-content > .hero-logo { animation-delay: 0.15s; }
.hero-content > .hero-eyebrow { animation-delay: 0.32s; }
.hero-content > .hero-title { animation-delay: 0.46s; }
.hero-content > .hero-sub { animation-delay: 0.6s; }
.hero-content > .hero-cta { animation-delay: 0.74s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
.hero-logo {
  /* big on roomy screens, but never so tall it pushes the hero past one screen */
  height: clamp(110px, min(16vw, 24vh), 250px);
  width: auto;
  margin-inline: auto;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.55));
}
.hero-eyebrow {
  display: block;
  margin-top: 24px;
  margin-bottom: clamp(28px, 4vw, 42px);
  font-size: clamp(0.66rem, 0.95vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: #ffb599;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.hero-title {
  font-size: clamp(2.1rem, 4.9vw, 4.25rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  font-weight: 700;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line-inner { display: block; padding-bottom: 0.08em; }
.hero-sub {
  color: var(--muted);
  max-width: 52ch;
  margin: clamp(26px, 3.5vw, 38px) auto 0;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.8;
}
.hero-cta { display: flex; gap: 18px; justify-content: center; margin-top: clamp(40px, 5vw, 56px); flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  white-space: nowrap;
}
.hero-scroll::after {
  content: ""; width: 1px; height: 46px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ================= Featured game rows ================= */
.feature-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  margin-bottom: clamp(70px, 9vw, 120px);
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row.flip .feature-media { order: 2; }
.feature-media { position: relative; }
.feature-media .frame { aspect-ratio: 16 / 9; box-shadow: var(--shadow-lg); }
.feature-media .feature-num {
  position: absolute; top: -34px; left: -14px; z-index: 2;
  font-family: var(--font-display); font-size: clamp(4rem, 7vw, 6.5rem);
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
/* The image fills the frame and links to the game page… */
.feature-media .media-cover { display: block; width: 100%; height: 100%; }
/* …while only the play circle itself is clickable, opening the trailer. */
.feature-media .play-hint {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.feature-media:hover .play-hint { opacity: 1; }
.feature-media .play-hint span {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255, 59, 48, 0.9); display: grid; place-items: center;
  color: #fff; font-size: 1.2rem; padding-left: 4px;
  box-shadow: 0 0 0 12px rgba(255, 59, 48, 0.2);
  pointer-events: auto; cursor: pointer;
  transition: transform 0.3s var(--ease-out), background 0.3s;
}
.feature-media .play-hint span:hover { transform: scale(1.09); background: var(--accent); }
.feature-body .kicker { margin-bottom: 12px; }
.feature-body h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 6px; }
.feature-body .feature-tagline { color: var(--accent-2); font-style: italic; margin-bottom: 16px; font-size: 1.02rem; }
.feature-body p.desc { color: var(--muted); margin-bottom: 24px; }
.feature-body .meta-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.feature-body .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ================= Giant scrolling word ================= */
.giant-word {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 16rem);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
  user-select: none;
  pointer-events: none;
}

/* ================= Why SoulStick / philosophy ================= */
.why-band { background: var(--bg-2); border-block: 1px solid var(--line); }

/* ================= CTA band ================= */
.cta-band {
  position: relative;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(70% 100% at 50% 120%, rgba(255, 59, 48, 0.22), transparent 65%),
    var(--bg-2);
  border-block: 1px solid var(--line);
}
.cta-band canvas.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(2rem, 4.6vw, 3.8rem); }
.cta-band .lead { margin: 18px auto 36px; }

/* ================= GAME PAGE ================= */
.game-hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0 0 70px;
}
.game-hero .hero-media { position: absolute; inset: 0; }
.game-hero .hero-media img, .game-hero .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-hero .hero-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.45), transparent 35%, rgba(10, 10, 12, 0.6) 75%, var(--bg));
}
.game-hero .container { position: relative; z-index: 2; }
.game-hero .game-logo { max-height: 150px; width: auto; max-width: min(560px, 80vw); margin-bottom: 22px; }
.game-hero .game-tagline { color: var(--text); font-size: clamp(1rem, 1.8vw, 1.25rem); font-style: italic; opacity: 0.9; margin-bottom: 24px; }
.game-hero .meta-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.game-hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* Sticky game sub-nav */
.game-subnav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(12, 12, 15, 0.92);
  backdrop-filter: blur(16px);
  border-block: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.game-subnav::-webkit-scrollbar { display: none; }
.game-subnav ul { display: flex; gap: 4px; width: min(1240px, 92vw); margin-inline: auto; }
.game-subnav a {
  display: block; padding: 16px 18px; white-space: nowrap;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.game-subnav a:hover, .game-subnav a.active { color: var(--text); border-color: var(--accent); }

/* Trailer */
.trailer-shell {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.trailer-shell iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- YouTube facade: thumbnail + play button, iframe loads only on click ---- */
.yt-facade { cursor: pointer; position: relative; background: #000; }
.yt-facade img.yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out), opacity 0.4s; }
.yt-facade:hover img.yt-thumb { transform: scale(1.03); opacity: 0.75; }
.yt-facade .yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: none;
  background: var(--accent-grad);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 14px rgba(255, 59, 48, 0.18), 0 16px 44px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.yt-facade:hover .yt-play { transform: translate(-50%, -50%) scale(1.09); box-shadow: 0 0 0 20px rgba(255, 59, 48, 0.22), 0 16px 44px rgba(0, 0, 0, 0.5); }
.yt-facade .yt-play::after {
  content: "";
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
  margin-left: 6px;
}
.yt-facade .yt-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 22px 18px;
  background: linear-gradient(transparent, rgba(6, 6, 8, 0.9));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}

/* Keeps a pending button and its Coming Soon flag glued together on one line */
.pending-group { display: inline-flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.trailer-shell .video-fallback::after {
  content: "TRAILER COMING SOON";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  text-align: center; padding: 20px;
}

/* Screenshot strip */
.shots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.shots-grid .frame { aspect-ratio: 16 / 9; }
.shots-grid .frame:first-child { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
/* 7 shots: the last one runs full width as a wide cinematic banner so the grid stays square */
.shots-grid.shots-7 .frame:last-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }

/* Overview split */
.overview-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.spec-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spec-table .spec-row { display: flex; justify-content: space-between; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.spec-table .spec-row:last-child { border-bottom: none; }
.spec-table .spec-row:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.spec-table .spec-key { color: var(--dim); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; font-weight: 700; padding-top: 3px; }
.spec-table .spec-val { text-align: right; color: var(--text); }

/* Feature list on game page */
.gfeat { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.gfeat:last-child { border-bottom: none; }
.gfeat .gfeat-ic { font-size: 1.5rem; flex-shrink: 0; width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 59, 48, 0.1); border: 1px solid rgba(255, 59, 48, 0.25); }
.gfeat h3 { font-size: 1.3rem; margin-bottom: 4px; }
.gfeat p { color: var(--muted); font-size: 0.92rem; }

/* System requirements */
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.req-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.req-col h3 { font-size: 1.3rem; margin-bottom: 18px; color: var(--accent-2); }
.req-col li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.req-col li:last-child { border-bottom: none; }
.req-col li strong { color: var(--dim); min-width: 92px; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 3px; }
.req-col li span { color: var(--muted); }

/* Roadmap horizontal */
.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.roadmap::before { content: ""; position: absolute; top: 9px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--accent), rgba(255, 122, 47, 0.15)); }
.rm-item { position: relative; padding: 40px 18px 0; text-align: center; }
.rm-item::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent);
}
.rm-item.done::before { background: var(--accent); }
.rm-item .rm-date { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; }
.rm-item h3 { font-size: 1.2rem; margin-bottom: 6px; }
.rm-item p { font-size: 0.84rem; color: var(--muted); }

/* Game news / updates strip */
.updates-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.update-item { display: flex; gap: 24px; align-items: baseline; padding: 22px 28px; border-bottom: 1px solid var(--line); transition: background 0.3s; flex-wrap: wrap; }
.update-item:last-child { border-bottom: none; }
.update-item:hover { background: rgba(255, 255, 255, 0.03); }
.update-item .u-date { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; min-width: 110px; }
.update-item .u-title { font-weight: 600; flex: 1; min-width: 200px; }
.update-item .u-tag { font-size: 0.68rem; }

/* ================= GAMES INDEX ================= */
.game-index-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; transition: transform 0.5s var(--ease-out), border-color 0.5s, box-shadow 0.5s; }
.game-index-card:hover { transform: translateY(-10px); border-color: rgba(255, 59, 48, 0.5); box-shadow: var(--shadow-lg); }
.game-index-card img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.game-index-card:hover img.bg { transform: scale(1.07); }
.game-index-card .gi-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8, 8, 10, 0.92)); }
.game-index-card .gi-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; z-index: 2; }
.game-index-card .gi-body h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 10px 0 6px; }
.game-index-card .gi-body p { color: var(--muted); font-size: 0.9rem; max-width: 52ch; }
.game-index-card .gi-arrow {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(10, 10, 12, 0.6); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 1.1rem;
  transition: background 0.35s, transform 0.35s;
}
.game-index-card:hover .gi-arrow { background: var(--accent); transform: rotate(45deg); }
.coming-soon-card {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--dim); text-align: center; padding: 30px;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, 0.015) 14px 28px);
}
.coming-soon-card .cs-q { font-family: var(--font-display); font-size: 3.4rem; color: rgba(255, 255, 255, 0.1); }

/* ================= ABOUT ================= */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.values-grid .icon-card h3 { font-size: 1.25rem; }
.team-card { text-align: left; }
.team-card .frame { aspect-ratio: 3 / 3.6; border-radius: var(--radius) var(--radius) 0 0; }
.team-card .tc-body { padding: 22px 22px 26px; }
.team-card .tc-role { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 6px; }
.team-card h3 { font-size: 1.5rem; margin-bottom: 10px; }
.team-card p { font-size: 0.88rem; color: var(--muted); margin-bottom: 14px; }
.team-card .tc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mv-card { padding: clamp(30px, 4vw, 50px); position: relative; overflow: hidden; }
.mv-card::before {
  content: attr(data-num);
  position: absolute; top: 10px; right: 22px;
  font-family: var(--font-display); font-size: 5.5rem;
  color: rgba(255, 255, 255, 0.04);
}
.mv-card h3 { font-size: 1.9rem; margin-bottom: 14px; }
.mv-card p { color: var(--muted); }
.process-grid { counter-reset: step; }
.process-step { position: relative; padding: 30px 26px; }
.process-step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 2.6rem;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: block; margin-bottom: 10px;
}
.process-step h3 { font-size: 1.3rem; margin-bottom: 8px; }
.process-step p { font-size: 0.9rem; color: var(--muted); }

/* ================= CAREERS ================= */
.position-item { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; background: var(--surface); transition: border-color 0.3s; }
.position-item:hover { border-color: rgba(255, 59, 48, 0.4); }
.position-head { width: 100%; background: none; border: none; color: var(--text); display: flex; align-items: center; gap: 18px; padding: 24px 28px; text-align: left; }
.position-head .p-title { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.03em; flex: 1; }
.position-head .p-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.position-head .fx { font-size: 1.5rem; color: var(--accent); transition: transform 0.35s var(--ease-out); }
.position-item.open .position-head .fx { transform: rotate(45deg); }
.position-body { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); }
.position-body-inner { padding: 0 28px 28px; color: var(--muted); font-size: 0.94rem; }
.position-body-inner h4 { color: var(--text); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 18px 0 10px; }
.position-body-inner ul { list-style: none; }
.position-body-inner ul li { padding: 5px 0 5px 22px; position: relative; }
.position-body-inner ul li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }
.position-body-inner .apply-btn { margin-top: 24px; }
.position-body-inner .apply-soon {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 26px;
  border: 1px dashed rgba(255, 122, 47, 0.35);
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
}

/* Blinking "coming soon" flag beside the + icon on a position row */
.soon-flash {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  white-space: nowrap;
  align-self: center;
  animation: soonBlink 1.7s ease-in-out infinite;
}
/* Slightly larger when it sits beside a full-size button (game pages) */
.cta-row .soon-flash, .hero-cta .soon-flash { font-size: 0.68rem; letter-spacing: 0.18em; }
/* A Steam button with no store page yet: looks the same, simply isn't clickable */
.btn-steam.is-pending { cursor: default; opacity: 0.75; }
.btn-steam.is-pending:hover { transform: none; background: #1b2838; }
@keyframes soonBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.22; } }

/* Static green flag marking a role that is open right now */
.live-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3ddc84;
  white-space: nowrap;
}
.live-flag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 8px rgba(61, 220, 132, 0.8);
}

/* Timeline section: narrow sticky intro, wide timeline column */
.timeline-layout { grid-template-columns: 0.78fr 1.22fr; }
.timeline-sticky { position: sticky; top: calc(var(--nav-h) + 40px); }
.benefit-card { text-align: center; padding: 30px 20px; }
.benefit-card .ic { margin-inline: auto; }

/* ================= CONTACT ================= */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.contact-card { display: flex; gap: 18px; align-items: flex-start; padding: 24px; margin-bottom: 16px; }
.contact-card .cc-ic { font-size: 1.4rem; width: 50px; height: 50px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 59, 48, 0.1); border: 1px solid rgba(255, 59, 48, 0.25); }
.contact-card h3 { font-size: 1.2rem; margin-bottom: 2px; }
.contact-card a { color: var(--accent-2); font-size: 0.94rem; }
.contact-card a:hover { text-decoration: underline; }
.contact-card p { color: var(--dim); font-size: 0.82rem; }
.map-placeholder {
  border-radius: var(--radius); border: 1px solid var(--line); aspect-ratio: 21 / 9;
  display: grid; place-items: center; text-align: center; color: var(--dim);
  background:
    radial-gradient(40% 60% at 70% 40%, rgba(255, 59, 48, 0.06), transparent),
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(255,255,255,0.03) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,0.03) 40px 41px),
    var(--bg-2);
}
.map-placeholder .mp-pin { font-size: 2rem; margin-bottom: 8px; animation: pinBob 2s ease-in-out infinite; }
@keyframes pinBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ================= GALLERY ================= */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-grid .g-item { border-radius: 10px; overflow: hidden; position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--line); }
.gallery-grid .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.gallery-grid .g-item:hover img { transform: scale(1.08); }
.gallery-grid .g-item .g-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(8, 8, 10, 0.9));
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.35s;
}
.gallery-grid .g-item:hover .g-cap { opacity: 1; transform: none; }
.g-item.hidden { display: none; }

/* ================= PRESS ================= */
.press-asset { padding: 0; }
.press-asset .frame { aspect-ratio: 16 / 9; border-radius: var(--radius) var(--radius) 0 0; }
.press-asset .pa-body { padding: 22px 24px 26px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.press-asset h3 { font-size: 1.3rem; }
.press-asset .pa-sub { font-size: 0.78rem; color: var(--dim); }
.factsheet { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.factsheet .spec-row { display: flex; gap: 20px; padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.factsheet .spec-row:last-child { border-bottom: none; }
.factsheet .spec-row:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.factsheet .spec-key { color: var(--dim); min-width: 160px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding-top: 4px; }

/* ================= NEWS PAGE ================= */
.news-featured { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); margin-bottom: 50px; }
.news-featured .frame { border-radius: 0; aspect-ratio: auto; min-height: 320px; }
.news-featured .nf-body { padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.news-featured h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.news-featured p { color: var(--muted); }

/* ================= Legal pages ================= */
.legal-content { max-width: 800px; }
.legal-content h2 { font-size: 1.6rem; margin: 40px 0 14px; }
.legal-content p, .legal-content li { color: var(--muted); font-size: 0.95rem; margin-bottom: 12px; }
.legal-content ul { padding-left: 22px; list-style: disc; }

/* ================= Responsive ================= */
@media (max-width: 1024px) {
  .feature-row, .overview-grid, .contact-grid, .about-story, .news-featured, .timeline-layout { grid-template-columns: 1fr; }
  .timeline-sticky { position: static; }
  .feature-row.flip .feature-media { order: 0; }
  .roadmap { grid-template-columns: 1fr; padding-left: 30px; }
  .roadmap::before { top: 6%; bottom: 6%; left: 8px; right: auto; width: 2px; height: auto; background: linear-gradient(var(--accent), rgba(255, 122, 47, 0.15)); }
  .rm-item { text-align: left; padding: 0 0 36px 26px; }
  .rm-item::before { left: 0; top: 4px; transform: translateX(-50%); }
  .shots-grid { grid-template-columns: 1fr 1fr; }
  .shots-grid .frame:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .shots-grid.shots-7 .frame:last-child { aspect-ratio: 16 / 9; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .req-grid, .mv-grid, .gallery-grid, .shots-grid { grid-template-columns: 1fr; }
  .position-head { flex-wrap: wrap; }
  .game-hero .game-logo { max-height: 100px; }
}