/*
 * Infinite Forge Studio Stylesheet
 * -------------------------------
 * This stylesheet defines the core look and feel of the Infinite Forge Studio
 * website. The design emphasises a dark, cinematic aesthetic with warm
 * orange accents reminiscent of glowing embers. Each section has been
 * separated into clearly defined classes to encourage modularity and
 * facilitate future expansion. Where possible variables are used to keep
 * colours and sizing consistent throughout the site.
 */

/* CSS Variables for easy theming */
:root {
  --primary-color: #e85d04;        /* warm orange used for highlights */
  --secondary-color: #ffba08;      /* brighter accent used sparingly */
  --text-light: #f8f9fa;           /* near-white for primary text */
  --text-muted: #adb5bd;           /* muted grey for secondary text */
  --bg-dark: #0d0d0d;              /* darkest background */
  --bg-medium: #212121;            /* medium dark for cards and panels */
  --nav-height: 70px;              /* consistent navigation bar height */
  --transition-speed: 0.3s;        /* global transition timing */
}

/* Global resets and base styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #0d0d0d url('../images/background_texture.webp') repeat;
  background-size: 600px 600px;
  color: var(--text-light);
  line-height: 1.6;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: var(--secondary-color);
}

h1, h2, h3, h4, h5 {
  color: var(--text-light);
  font-weight: 600;
}

img {
  max-width: 100%;
  display: block;
}

.text-muted {
  color: var(--text-muted);
}
#audioControls {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 2000;
  display: flex;
  background: #111;
  padding: 6px;
  border-radius: 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Navigation bar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  backdrop-filter: blur(8px);     /* Optional blur behind navbar */
  -webkit-backdrop-filter: blur(8px); /* For Safari */
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  z-index: 1000;
}
.navbar.scrolled {
  background: rgba(13, 13, 13, 0.95);
}
.navbar .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-direction: row;
  align-items: center;
  margin: 0;
}
.navbar .logo img {
  width: 40px;
  height: 40px;
}
.navbar .logo span {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
.brand-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.social-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.social-icons a {
  color: #fff;
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: var(--primary-color);
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.navbar ul li {
  position: relative;
}
.navbar ul li a {
  color: var(--text-light);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.5rem 0;
  transition: color var(--transition-speed) ease;
}
.navbar ul li a:hover,
.navbar ul li a.active {
  color: var(--primary-color);
}
.menu-toggle {
  display: none;
}
@media (max-width: 900px) {
  .menu-toggle {
    display: block;
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1010;
  }
}

/* Hero Section */
.hero {
  height: 100vh;
  background: url('../images/banner.webp') no-repeat center center/cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  padding: 2rem;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 13, 13, 0.6);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  color: var(--text-light);
}
.hero-content h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}
.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
  .navbar ul {
    display: none;
  }
  .navbar.expanded ul {
    display: flex;
    position: absolute;
    top: var(--nav-height);
    right: 0;
    background: rgba(13, 13, 13, 0.95);
    flex-direction: column;
    width: 200px;
    padding: 1rem;
    gap: 1rem;
  }
}

/* Sub-Hero Banners (About, Contact, Services, Portfolio) */
.sub-hero {
  height: 60vh;
  background: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  padding: 4rem 2rem;
}
.sub-hero img {
  max-width: 540px;       /* Large but not massive; adjust as needed */
  width: 100%;            /* Responsive for mobile */
  height: auto;
  margin: 4rem auto 2rem auto; /* Extra top margin to clear navbar */
  display: block;
  opacity: 0.96;
  object-fit: contain;
}

/* CONTACT PAGE BANNER */
.sub-hero.contact-banner {
  background-image:
    linear-gradient(to bottom, rgba(13,13,13,0) 85%, rgba(13,13,13,0.92) 100%),
    url('../images/contact_banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* PORTFOLIO PAGE BANNER */
.sub-hero.portfolio-banner {
  background-image:
    linear-gradient(to bottom, rgba(13,13,13,0) 85%, rgba(13,13,13,0.92) 100%),
    url('../images/portfolio_banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* SERVICES PAGE BANNER */
.sub-hero.services-banner {
  position: relative;
  background-image:
    linear-gradient(to bottom, rgba(13,13,13,0) 80%, rgba(13,13,13,0.92) 100%),
    url('../images/services_banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Soft bottom fade effect */
.sub-hero.services-banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px; /* fade height; adjust for more/less fade */
  background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.93) 100%);
  pointer-events: none; /* lets clicks pass through */
  z-index: 2;
}

/* ABOUT stays logo only, no background image/gradient */
.sub-hero:not(.contact-banner):not(.portfolio-banner):not(.services-banner) {
  background: none;
}

/* Remove the overlay for sub-hero */
.sub-hero::before {
  content: none !important;
  display: none !important;
}
.sub-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

/* Section base styles */
section {
  padding: 6rem 2rem;
  position: relative;
}
.section-heading {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.section-subheading {
  font-size: 1rem;
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--text-muted);
}

/* About section */
.about {
  background: none;
}
.about .content {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.about .content p {
  margin-bottom: 1rem;
  color: var(--text-muted);
}

/* Services section */
.services {
  background: none;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.service-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: rgba(18,18,18,0.93);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  min-height: 400px;  /* Ensures all cards are equal height */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  border-left: 4px solid transparent;
  border-bottom: 4px solid transparent;
  position: relative;
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.service-card:hover,
.service-card:active {
  transform: translateY(-12px);
  border-left: 4px solid var(--primary-color);
  border-bottom: 4px solid var(--primary-color);
  box-shadow: 0 12px 36px rgba(232,93,4,0.18), 0 10px 24px rgba(0,0,0,0.6);
}
.service-card .svg-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}
.service-card h3 {
  margin-bottom: 0.5rem;
}
.service-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Pillar More Button: Always at the bottom, orange, glows on hover */
.pillar-more {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 1rem;
}

.pillar-more span {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  opacity: 0.88;
  cursor: pointer;
  transition: color 0.18s, text-shadow 0.18s;
  text-shadow: 0 0 8px rgba(232, 93, 4, 0.25), 0 0 2px #222;
  display: inline-block;
  vertical-align: bottom;
}

.pillar-more span:hover {
  color: var(--secondary-color);
  opacity: 1;
  text-shadow: 0 0 18px #ffba08, 0 0 2px #222;
  text-decoration: underline;
}

.resonance-page .service-card:hover,
.resonance-page .service-card:active {
  transform: translateY(-12px);
  border-left: 4px solid #2196f3;
  border-bottom: 4px solid #2196f3;
  border-right: 4px solid transparent;
  border-top: 4px solid transparent;
  box-shadow:
    0 12px 36px rgba(33, 150, 243, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.6);
}

.resonance-page .service-card .svg-icon {
  color: #2196f3;
  animation: glow-pulse 2.2s ease-in-out infinite;
}

/* Optional: make sure "Explore" uses the same blue */
.resonance-page .pillar-more span {
  color: #2196f3;
  text-shadow: 0 0 8px rgba(33, 150, 243, 0.25), 0 0 2px #222;
}
.resonance-page .pillar-more span:hover {
  color: #64b5f6;
  text-shadow: 0 0 18px #64b5f6, 0 0 2px #222;
}

/* Pulse animation for icon glow */
@keyframes glow-pulse {
  0% {
    text-shadow: 0 0 4px rgba(33, 150, 243, 0.4);
  }
  50% {
    text-shadow: 0 0 12px rgba(33, 150, 243, 0.9), 0 0 6px rgba(33, 150, 243, 0.5);
  }
  100% {
    text-shadow: 0 0 4px rgba(33, 150, 243, 0.4);
  }
}

/* Portfolio section */
.portfolio {
  background: none;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transition:
    transform var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease,
    border-color 0.18s;
  border-left: 4px solid transparent;
  border-bottom: 4px solid transparent;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.portfolio-item:hover,
.portfolio-item:active {
  transform: translateY(-12px);
  border-left: 4px solid var(--primary-color);
  border-bottom: 4px solid var(--primary-color);
  box-shadow:
    0 12px 36px rgba(232,93,4,0.18),
    0 10px 24px rgba(0,0,0,0.6);
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
}
.portfolio-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}
.portfolio-item:hover .overlay {
  opacity: 1;
}
.overlay h4 {
  color: var(--text-light);
  font-size: 1.2rem;
}

/* Contact section */
.contact {
  background: none;
}
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-form input,
.contact-form textarea {
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 4px;
  background: var(--bg-dark);
  color: var(--text-light);
}
.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}
.contact-form button {
  align-self: flex-start;
  padding: 0.7rem 2rem;
  background: var(--primary-color);
  border: none;
  border-radius: 50px;
  color: var(--bg-dark);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-speed) ease;
}
.contact-form button:hover {
  background: var(--secondary-color);
}

/* Footer */
footer {
  background: var(--bg-dark);
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
footer ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
footer ul li a {
  color: var(--text-muted);
  font-size: 1.1rem;
  transition: color var(--transition-speed) ease;
}
footer ul li a:hover {
  color: var(--primary-color);
}

/* Responsive adjustments (retained) */
@media (min-width: 1200px) {
  .services-grid { grid-template-columns: repeat(5, 1fr); }
  .about .services-grid,
  .services .services-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  background: var(--primary-color);
  color: var(--bg-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background var(--transition-speed) ease;
  text-decoration: none;
  border: none;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(232, 93, 4, 0.16);
  cursor: pointer;
}
.btn:hover {
  background: var(--secondary-color);
  color: var(--bg-dark);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(255, 186, 8, 0.23);
}
.forged-button {
    display: inline-block;
    background-image: url('../images/btn-forged-default.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    width: 320px;
    height: 100px;
    font-size: 1.4rem;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 138, 0, 0.4);
    font-weight: 600;
    text-align: center;
    line-height: 100px;
    margin-top: 3rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-shadow: 1px 1px 2px #000;
}
.forged-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(255, 186, 8, 0.5);
}
.forged-button:active {
    background-image: url('../images/btn-forged-pressed.webp');
    transform: scale(0.97);
}

#muteBtn {
  background: var(--primary-color, #e85d04);
  color: #fff;
  font-size: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 0 12px rgba(0,0,0,0.18);
  outline: none;
}

#muteBtn:hover {
  background: var(--secondary-color, #ffba08);
  color: #222;
}
#audioOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(16,16,32,0.89);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-hero.services-banner {
  position: relative !important;
  overflow: visible !important;
}

.sub-hero.services-banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, #0d0d0d 100%);
  z-index: 10000 !important;
  pointer-events: none !important;
  display: block !important;
}
.services-intro {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 600px 600px !important;
}
header.sub-hero.portfolio-banner {
  position: relative !important;
  background-image:
    linear-gradient(to bottom, rgba(13,13,13,0) 80%, rgba(13,13,13,0.92) 100%),
    url('../images/portfolio_banner.webp');
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: visible !important;
}

header.sub-hero.portfolio-banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, #0d0d0d 100%);
  z-index: 10000 !important;
  pointer-events: none !important;
  display: block !important;
}

section.portfolio-intro {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 600px 600px !important;
}
header.sub-hero.contact-banner {
  position: relative !important;
  background-image:
    linear-gradient(to bottom, rgba(13,13,13,0) 80%, rgba(13,13,13,0.92) 100%),
    url('../images/contact_banner.webp');
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: visible !important;
}

header.sub-hero.contact-banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, #0d0d0d 100%);
  z-index: 10000 !important;
  pointer-events: none !important;
  display: block !important;
}

section.contact-intro {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 600px 600px !important;
}
/* Alberenar RPG - Hero Banner */
.hero-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 0 1rem;
}

/* Alberenar-specific banner */
.alberenar-page .hero-banner {
  background-image: url('../images/alberenar_banner.webp');
}

/* Resonance-specific banner */
.resonance-page .hero-banner {
  background-image: url('../images/resonance_banner.webp');
}

.hero-banner .banner-content h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
}

.hero-banner .banner-content p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
}

.hero-banner .cta-button {
  background-color: var(--primary-color);
  color: white;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  transition: background-color 0.3s ease;
}

.hero-banner .cta-button:hover {
  background-color: var(--secondary-color);
}

/* Alberenar Scrollable Gallery Section */
.media-carousel {
  padding: 3rem 1rem;
  background: #111;
  position: relative;
  overflow: hidden;
}
.carousel-wrapper {
  position: relative;
  overflow-x: hidden;
}
.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
}
.carousel-item {
  flex: 0 0 auto;
  height: 200px;
  width: 320px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.carousel-item:hover {
  transform: scale(1.05);
}

/* Highlight active carousel image */
.carousel-item.active {
  outline: 3px solid var(--primary-color);
  outline-offset: 4px;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(232, 93, 4, 0.4);
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 2rem;
  border: none;
  z-index: 10;
  cursor: pointer;
  padding: 0.5rem 1rem;
}
.carousel-button.left {
  left: 10px;
}
.carousel-button.right {
  right: 10px;
}
.banner-overlay {
  background-color: rgba(0, 0, 0, 0.4); /* Slightly transparent black */
  padding: 2rem 3rem;
  border-radius: 0.75rem;
  text-align: center;
  color: white;
  max-width: 600px;
  margin: auto;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);

  /* 🪞 Backdrop Blur */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* For Safari */
}

.hero-banner h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.hero-banner .tagline {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.cta-button {
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: var(--secondary-color);
}

.scroll-down-button {
  display: none;
  /* Existing styles remain commented out or intact for future use */
  /*
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(0, 0, 0, 0.5);
  color: var(--text-light);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
  */
}

.scroll-down-button:hover {
  background: var(--primary-color);
  color: #000;
  border-color: var(--secondary-color);
}

/* Lightbox Styles */
.lightbox {
  display: none;
  position: fixed;
  z-index: 3000;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(255,255,255,0.1);
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 3100;
}

.lightbox .close:hover {
  color: var(--primary-color);
}

/* Carousel Pillar-Style Glow Hover */
/* Carousel Image Styling (applied directly to <img class="carousel-item">)
   - Controls size, hover glow, and image behaviour within the media carousel
   - Ensures consistent thumbnail size and visibility across all carousel entries */

.carousel-item {
  /* Glow border defaults */
  border-left: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-radius: 8px;

  /* Base shadow and animation effects */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease;

  /* Fixed display size for uniform carousel layout */
  width: 320px;
  height: 200px;

  /* Image rendering behaviour */
  object-fit: contain;          /* Use 'contain' to always show the full image; may letterbox */
  object-position: top center;  /* Aligns image to top; change to 'center center' if desired */
  background-color: #000;       /* Fills background for images with aspect mismatch (black bars) */

  cursor: pointer;              /* Indicates interactivity */
}

/* Resonance-specific hover override for carousel items */
.resonance-page .carousel-item:hover,
.resonance-page .carousel-item:active {
  border-left: 4px solid #2196f3;
  border-bottom: 4px solid #2196f3;
  box-shadow:
    0 12px 36px rgba(33, 150, 243, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.6);
}

/* Footer – Unified Site Styling */
.site-footer {
  background-color: var(--bg-dark);
  text-align: center;
  padding: 3rem 1.5rem 2rem 1.5rem;
  color: var(--text-muted);
}

.footer-logo {
  max-width: 100px;
  margin: 0 auto 1rem auto;
  display: block;
}

.footer-text {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: var(--text-muted);
}

.site-footer .social-icons {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.site-footer .social-icons a .svg-icon {
  font-size: 1.4rem;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.site-footer .social-icons a:hover .svg-icon {
  color: var(--primary-color);
}

/* Soft Pulse Animation for Main Page Icons */
@keyframes soft-pulse {
  0% {
    text-shadow: 0 0 0 rgba(255, 186, 8, 0.0);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 6px rgba(255, 186, 8, 0.3);
    transform: scale(1.05);
  }
  100% {
    text-shadow: 0 0 0 rgba(255, 186, 8, 0.0);
    transform: scale(1);
  }
}

.service-card .svg-icon,
.portfolio-item .svg-icon,
.contact-card .svg-icon {
  animation: soft-pulse 2.5s infinite ease-in-out;
}

@keyframes soft-pulse-orange {
  0%, 100% {
    text-shadow: 0 0 6px rgba(232, 93, 4, 0.25), 0 0 12px rgba(232, 93, 4, 0.1);
  }
  50% {
    text-shadow: 0 0 12px rgba(232, 93, 4, 0.6), 0 0 20px rgba(232, 93, 4, 0.25);
  }
}

body:not(.resonance-page) .service-card .svg-icon {
  animation: soft-pulse-orange 2.8s ease-in-out infinite;
}

/* Alberenar-specific Card Glow */
.alberenar-page .service-card:hover,
.alberenar-page .service-card:active {
  transform: translateY(-12px);
  border-left: 4px solid #bb3cff;     /* Purple border */
  border-bottom: 4px solid #bb3cff;   /* Purple border */
  box-shadow:
    0 12px 36px rgba(187, 60, 255, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.6);
}

.alberenar-page .service-card .svg-icon {
  color: #bb3cff; /* Purple icon */
  animation: soft-pulse-purple 2.4s ease-in-out infinite;
}

@keyframes soft-pulse-purple {
  0%, 100% {
    text-shadow: 0 0 6px rgba(187, 60, 255, 0.25), 0 0 12px rgba(187, 60, 255, 0.1);
  }
  50% {
    text-shadow: 0 0 12px rgba(187, 60, 255, 0.6), 0 0 20px rgba(187, 60, 255, 0.25);
  }
}

/* Alberenar Page: Purple Glow for Explore Button */
.alberenar-page .pillar-more span {
  color: #bb3cff;
  text-shadow: 0 0 8px rgba(187, 60, 255, 0.25), 0 0 2px #222;
}

.alberenar-page .pillar-more span:hover {
  color: #d89bff;
  text-shadow: 0 0 18px #d89bff, 0 0 2px #222;
}

/* Alberenar Page: Purple Glow for Carousel Hover */
.alberenar-page .carousel-item:hover,
.alberenar-page .carousel-item:active {
  border-left: 4px solid #bb3cff;
  border-bottom: 4px solid #bb3cff;
  box-shadow:
    0 12px 36px rgba(187, 60, 255, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.6);
}


/* Local SVG icon system – replaces external Font Awesome dependency */
.svg-icon {
  display: inline-flex;
  width: 1.4em;
  height: 1.4em;
  color: currentColor;
  align-items: center;
  justify-content: center;
  vertical-align: -0.18em;
}
.svg-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-card .svg-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 8px rgba(232, 93, 4, 0.35));
}
body:not(.resonance-page) .service-card .svg-icon {
  animation: svg-pulse-orange 2.8s ease-in-out infinite;
}
.resonance-page .service-card .svg-icon {
  color: #2196f3;
  animation: svg-pulse-blue 2.2s ease-in-out infinite;
}
.alberenar-page .service-card .svg-icon {
  color: #bb3cff;
  animation: svg-pulse-purple 2.4s ease-in-out infinite;
}
.menu-toggle .svg-icon {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--text-light);
}
p .svg-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.4rem;
  color: var(--primary-color);
}
.site-footer .social-icons a .svg-icon {
  width: 1.45rem;
  height: 1.45rem;
  color: var(--text-muted);
  transition: color 0.3s ease, transform 0.3s ease;
}
.site-footer .social-icons a:hover .svg-icon {
  color: var(--primary-color);
  transform: translateY(-2px);
}
@keyframes svg-pulse-orange {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(232, 93, 4, 0.25)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(232, 93, 4, 0.75)); transform: scale(1.05); }
}
@keyframes svg-pulse-blue {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(33, 150, 243, 0.3)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(33, 150, 243, 0.85)); transform: scale(1.05); }
}
@keyframes svg-pulse-purple {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(187, 60, 255, 0.3)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(187, 60, 255, 0.8)); transform: scale(1.05); }
}


/* Logo sizing after asset split */
.navbar .logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
#about-hero img {
  max-width: min(540px, 70vw);
  max-height: 52vh;
  object-fit: contain;
}


/* Production-facing additions: clearer product structure, stronger local icons, no external dependencies. */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
main {
  min-height: 70vh;
}
.navbar {
  min-height: var(--nav-height);
  padding: 0.85rem 1.5rem;
}
.navbar ul {
  gap: 1.15rem;
}
.menu-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
}
.eyebrow,
.card-kicker {
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-secondary {
  background: rgba(0,0,0,0.34);
  color: var(--text-light);
  border: 1px solid rgba(232,93,4,0.75);
}
.btn-small {
  padding: 0.55rem 1.05rem;
  font-size: 0.82rem;
  border-radius: 999px;
}
.btn-disabled,
.btn-disabled:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.13);
  cursor: not-allowed;
  box-shadow: none;
}
.text-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
}
.text-link-muted {
  color: var(--text-muted);
}
.intro-band {
  padding: 3rem 2rem 1rem;
}
.world-card-grid,
.game-card-grid,
.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.world-card,
.game-card,
.download-card,
.tool-panel,
.archive-entry,
.contact-card {
  background: linear-gradient(145deg, rgba(20,20,20,0.96), rgba(8,8,8,0.94));
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 4px solid rgba(232,93,4,0.82);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.42);
}
.world-card,
.game-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.world-card:hover,
.game-card:hover,
.download-card:hover,
.tool-panel:hover,
.archive-entry:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 42px rgba(232,93,4,0.14), 0 12px 30px rgba(0,0,0,0.6);
}
.world-card,
.game-card,
.download-card,
.tool-panel,
.archive-entry {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.world-card--blue,
.game-card--blue { border-left-color: #2196f3; }
.world-card--gold,
.game-card--gold { border-left-color: #c99a42; }
.world-card-image img,
.game-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
}
.world-card-body,
.game-card-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.world-card-body p,
.game-card-body p,
.download-card p,
.tool-panel p,
.archive-entry p,
.contact-card p {
  color: var(--text-muted);
}
.feature-strip {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.feature-strip-item {
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 0.9rem 1rem;
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.newsletter-section {
  padding-top: 4rem;
}
.newsletter-form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.newsletter-form input,
.archive-tools input,
.dice-form input,
.dice-form select {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.48);
  color: var(--text-light);
}
.page-hero {
  min-height: 52vh;
  padding: calc(var(--nav-height) + 4rem) 2rem 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(232,93,4,0.18), transparent 35%),
    linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(13,13,13,0.96)),
    url('../images/background_texture.webp') repeat;
  background-size: auto, auto, 600px 600px;
  z-index: 0;
}
.page-hero--games::before { background-image: linear-gradient(to bottom, rgba(0,0,0,0.34), rgba(13,13,13,0.94)), url('../images/portfolio_banner.webp'); background-size: cover; background-position: center; }
.page-hero--lore::before { background-image: linear-gradient(to bottom, rgba(0,0,0,0.38), rgba(13,13,13,0.96)), url('../images/about-banner.webp'); background-size: cover; background-position: center; }
.page-hero--tools::before { background-image: linear-gradient(to bottom, rgba(0,0,0,0.38), rgba(13,13,13,0.96)), url('../images/services_banner.webp'); background-size: cover; background-position: center; }
.page-hero--downloads::before { background-image: linear-gradient(to bottom, rgba(0,0,0,0.38), rgba(13,13,13,0.96)), url('../images/contact_banner.webp'); background-size: cover; background-position: center; }
.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: 850px;
}
.page-hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  text-shadow: 0 4px 18px rgba(0,0,0,0.72);
}
.page-hero p {
  color: var(--text-muted);
  font-size: 1.1rem;
}
.archive-tools {
  max-width: 760px;
  margin: 0 auto 2rem;
  text-align: center;
}
.archive-list {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}
.archive-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.2rem;
}
.archive-icon,
.download-icon,
.panel-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,186,8,0.28), transparent 38%),
    linear-gradient(145deg, rgba(232,93,4,0.2), rgba(0,0,0,0.55));
  border: 1px solid rgba(232,93,4,0.48);
  box-shadow: inset 0 0 18px rgba(255,186,8,0.08), 0 0 18px rgba(232,93,4,0.18);
}
.download-card {
  padding: 1.4rem;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 auto 2rem;
}
.tag-filter {
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-light);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
}
.tag-filter.active,
.tag-filter:hover {
  border-color: var(--primary-color);
  color: var(--secondary-color);
}
.tools-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.tool-panel {
  padding: 1.5rem;
}
.dice-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.dice-result {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(232,93,4,0.08);
  border: 1px solid rgba(232,93,4,0.22);
  color: var(--secondary-color);
  font-weight: 700;
}
.link-list {
  margin-top: 1rem;
  padding-left: 1.2rem;
  color: var(--text-muted);
}
.link-list li { margin: 0.5rem 0; }
.placeholder-stack {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}
.placeholder-block {
  padding: 1rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.16);
  color: var(--text-muted);
}
.contact-grid {
  max-width: 1050px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(260px, 0.8fr);
  gap: 2rem;
  align-items: start;
}
.contact-card {
  padding: 1.5rem;
}
.is-planned {
  color: var(--text-muted) !important;
  cursor: default !important;
  text-shadow: none !important;
}
/* Strengthened local icon presentation. Keeps SVGs local while giving them a more polished house style. */
.service-card > .svg-icon {
  width: 58px;
  height: 58px;
  padding: 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,186,8,0.22), transparent 42%),
    linear-gradient(145deg, rgba(232,93,4,0.24), rgba(0,0,0,0.66));
  border: 1px solid rgba(232,93,4,0.48);
  box-shadow: inset 0 0 18px rgba(255,186,8,0.08), 0 0 18px rgba(232,93,4,0.18);
  margin-bottom: 1.2rem;
}
.service-card > .svg-icon svg,
.archive-icon .svg-icon svg,
.download-icon .svg-icon svg,
.panel-icon .svg-icon svg,
.feature-strip .svg-icon svg {
  stroke-width: 2.15;
}
#audioControls {
  top: auto;
  bottom: 22px;
  right: 22px;
  background: transparent;
  padding: 0;
  z-index: 2000;
}
#audioControls button {
  background: rgba(0,0,0,0.66);
  color: var(--text-light);
  border: 1px solid rgba(232,93,4,0.6);
  border-radius: 999px;
  min-width: 82px;
  height: 42px;
  padding: 0 1rem;
  box-shadow: 0 0 18px rgba(0,0,0,0.35);
  cursor: pointer;
}
#audioControls.audio-controls--playing button {
  color: var(--secondary-color);
}
@media (max-width: 980px) {
  .navbar ul { display: none; }
  .menu-toggle { display: block; }
  .navbar.expanded ul {
    display: flex;
    position: absolute;
    top: var(--nav-height);
    right: 0;
    background: rgba(13, 13, 13, 0.98);
    flex-direction: column;
    min-width: 220px;
    padding: 1rem;
    gap: 1rem;
    border-left: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .navbar .logo span { font-size: 1.05rem; }
  .newsletter-form { flex-direction: column; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .navbar { padding: 0.75rem 1rem; }
  .navbar .logo img { width: 34px; height: 34px; }
  .navbar .logo span { font-size: 0.95rem; }
  section { padding: 4rem 1rem; }
  .hero-content h1 { font-size: 2rem; }
  .page-hero { min-height: 46vh; }
}

.archive-icon .svg-icon,
.download-icon .svg-icon,
.panel-icon .svg-icon,
.feature-strip-item .svg-icon {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.75rem;
}

/* Studio identity and card-scale refinement pass */
.navbar {
  background: rgba(0, 0, 0, 0.66);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.navbar .logo {
  gap: 0.7rem;
  padding: 0.2rem 0.65rem 0.2rem 0.25rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,0.26), rgba(232,93,4,0.08), rgba(0,0,0,0));
}
.navbar .logo img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 0 10px rgba(232,93,4,0.35));
}
.navbar .logo span {
  font-size: 1.38rem;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.72), 0 0 12px rgba(232,93,4,0.22);
}
.hero--studio {
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + 2rem);
}
.hero--studio::before {
  background:
    radial-gradient(circle at 50% 38%, rgba(232,93,4,0.25), transparent 28%),
    radial-gradient(circle at 50% 72%, rgba(255,186,8,0.11), transparent 28%),
    linear-gradient(to bottom, rgba(0,0,0,0.24), rgba(13,13,13,0.72) 70%, rgba(13,13,13,0.97) 100%);
}
.hero-content--brand {
  max-width: 980px;
  padding: 2.2rem 2.4rem;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(0,0,0,0.48), rgba(0,0,0,0.22));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 90px rgba(0,0,0,0.48), inset 0 0 36px rgba(232,93,4,0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.hero-brand-logo {
  width: clamp(150px, 18vw, 260px);
  height: auto;
  margin: 0 auto 1.15rem auto;
  filter: drop-shadow(0 0 22px rgba(232,93,4,0.35)) drop-shadow(0 12px 24px rgba(0,0,0,0.7));
}
.hero-content--brand h1 {
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: 0.98;
  margin-bottom: 0.65rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 4px 22px rgba(0,0,0,0.8), 0 0 24px rgba(232,93,4,0.28);
}
.hero-tagline {
  font-size: clamp(1.25rem, 2.2vw, 1.9rem) !important;
  color: var(--text-light) !important;
  margin-bottom: 1rem !important;
}
.intro-band--studio {
  padding: 3.5rem 2rem 2rem;
}
.studio-identity-panel {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.6rem 1.8rem;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(20,20,20,0.96), rgba(8,8,8,0.94));
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 5px solid rgba(232,93,4,0.88);
  box-shadow: 0 18px 44px rgba(0,0,0,0.42);
}
.studio-identity-panel h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 0.4rem;
}
.studio-identity-panel p:not(.eyebrow) {
  color: var(--text-muted);
  max-width: 820px;
}
.studio-identity-mark {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(232,93,4,0.34));
}
.world-card-grid,
.game-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  max-width: 1320px;
  gap: 2rem;
}
.world-card,
.game-card {
  min-height: 540px;
  border-radius: 18px;
}
.world-card-image,
.game-card > img {
  background:
    radial-gradient(circle at 50% 35%, rgba(232,93,4,0.1), transparent 38%),
    #050505;
}
.world-card-image img,
.game-card > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  padding: 0.45rem;
}
.world-card-body,
.game-card-body {
  padding: 1.65rem;
  gap: 0.38rem;
}
.world-card-body h3,
.game-card-body h3 {
  font-size: 1.65rem;
}
.world-card-body p,
.game-card-body p {
  font-size: 1rem;
}
.feature-strip {
  max-width: 1200px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.feature-strip-item {
  min-height: 76px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(20,20,20,0.92), rgba(5,5,5,0.86));
}
@media (max-width: 980px) {
  .navbar .logo img { width: 42px; height: 42px; }
  .navbar .logo span { font-size: 1.08rem; letter-spacing: 0.04em; }
  .hero-content--brand { padding: 1.6rem 1.35rem; }
  .studio-identity-panel { grid-template-columns: 1fr; text-align: center; }
  .studio-identity-mark { margin: 0 auto; }
  .world-card-grid,
  .game-card-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
}
@media (max-width: 560px) {
  .navbar .logo { background: transparent; padding: 0; }
  .navbar .logo img { width: 36px; height: 36px; }
  .navbar .logo span { font-size: 0.92rem; }
  .hero-brand-logo { width: 138px; }
  .hero-content--brand h1 { font-size: 2.25rem; }
  .studio-identity-panel { padding: 1.2rem; }
}

.navbar {
  border-bottom-color: rgba(255,255,255,0.04);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
.navbar .logo,
.navbar .logo:hover {
  background: linear-gradient(90deg, rgba(0,0,0,0.36), rgba(232,93,4,0.07), rgba(0,0,0,0));
}
.navbar .logo img,
.footer-logo,
.studio-identity-mark,
.hero-brand-logo {
  object-fit: contain;
  background: transparent !important;
}
.navbar .logo img {
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(255,186,8,0.24)) drop-shadow(0 0 18px rgba(232,93,4,0.22));
}
.footer-logo {
  max-width: 72px;
  filter: drop-shadow(0 0 16px rgba(232,93,4,0.2));
}
.hero-brand-logo {
  width: clamp(120px, 15vw, 210px);
  filter: drop-shadow(0 0 22px rgba(255,186,8,0.24)) drop-shadow(0 16px 28px rgba(0,0,0,0.74));
}
.studio-identity-mark {
  width: 110px;
  height: 110px;
}

/* Preserve the full header artwork rather than chopping the focal point away. */
.page-hero {
  min-height: 58vh;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  background-color: #0d0d0d;
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 150px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(13,13,13,0), rgba(13,13,13,0.96));
}
.page-hero-content {
  z-index: 2;
}
.page-hero--games::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(13,13,13,0.82)),
    url('../images/portfolio_banner.webp'),
    url('../images/background_texture.webp') !important;
  background-size: 100% 100%, contain, 600px 600px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: center center, center center, center center !important;
}
.page-hero--lore::before {
  background-image:
    radial-gradient(circle at 50% 44%, rgba(232,93,4,0.16), transparent 38%),
    linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(13,13,13,0.88)),
    url('../images/about-banner.webp'),
    url('../images/background_texture.webp') !important;
  background-size: 100% 100%, 100% 100%, contain, 600px 600px !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
  background-position: center center, center center, center center, center center !important;
}
.page-hero--tools::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(13,13,13,0.84)),
    url('../images/services_banner.webp'),
    url('../images/background_texture.webp') !important;
  background-size: 100% 100%, contain, 600px 600px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: center center, center center, center center !important;
}
.page-hero--downloads::before {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(232,93,4,0.18), transparent 42%),
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(13,13,13,0.88)),
    url('../images/banner.webp'),
    url('../images/background_texture.webp') !important;
  background-size: 100% 100%, 100% 100%, contain, 600px 600px !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
  background-position: center center, center center, center center, center center !important;
}
.page-hero--contact::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(13,13,13,0.84)),
    url('../images/contact_banner.webp'),
    url('../images/background_texture.webp') !important;
  background-size: 100% 100%, contain, 600px 600px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: center center, center center, center center !important;
}
.page-hero + section {
  margin-top: -1px;
}

/* Game cards now use per-project colour accents with the older raised hover feel. */
.world-card,
.game-card {
  --game-accent: var(--primary-color);
  --game-accent-rgb: 232, 93, 4;
  border-left-color: rgba(var(--game-accent-rgb), 0.45);
  border-bottom: 4px solid rgba(var(--game-accent-rgb), 0.08);
  box-shadow: 0 12px 34px rgba(0,0,0,0.42);
}
.world-card--alberenar,
.game-card--alberenar {
  --game-accent: #8f5cff;
  --game-accent-rgb: 143, 92, 255;
}
.game-card--alberenar-board {
  --game-accent: #0ea98a;
  --game-accent-rgb: 14, 169, 138;
}
.world-card--resonance,
.game-card--resonance,
.world-card--blue,
.game-card--blue {
  --game-accent: #2196f3;
  --game-accent-rgb: 33, 150, 243;
}
.world-card--global,
.game-card--global,
.world-card--gold,
.game-card--gold {
  --game-accent: #d19a3c;
  --game-accent-rgb: 209, 154, 60;
}
.game-card--soundtracks {
  --game-accent: #f2c94c;
  --game-accent-rgb: 242, 201, 76;
}
.game-card--coming-soon {
  --game-accent: #aeb7c2;
  --game-accent-rgb: 174, 183, 194;
}
.world-card:hover,
.world-card:active,
.game-card:hover,
.game-card:active {
  transform: translateY(-12px);
  border-left-color: var(--game-accent);
  border-bottom-color: var(--game-accent);
  box-shadow:
    0 0 0 1px rgba(var(--game-accent-rgb), 0.32),
    0 18px 48px rgba(var(--game-accent-rgb), 0.23),
    0 12px 30px rgba(0,0,0,0.68);
}
.world-card .text-link,
.game-card .btn:not(.btn-disabled) {
  color: var(--game-accent);
}
.world-card-image,
.game-card > img {
  box-shadow: inset 0 -28px 46px rgba(var(--game-accent-rgb), 0.06);
}
.game-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.game-card {
  min-height: 560px;
}

/* Downloads now provide both direct viewing and direct download actions. */
.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.download-actions .btn {
  margin-top: 0;
}
.download-card {
  display: flex;
  flex-direction: column;
}
.download-card .download-actions {
  margin-top: auto;
  padding-top: 1rem;
}
.newsletter-form .btn,
.contact-form button,
button[type="submit"] {
  background: linear-gradient(135deg, rgba(232,93,4,0.95), rgba(255,186,8,0.82));
  color: #111;
  border: 1px solid rgba(255,186,8,0.45);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 0 24px rgba(232,93,4,0.22);
}
.newsletter-form .btn:hover,
.contact-form button:hover,
button[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(232,93,4,0.28), 0 6px 18px rgba(0,0,0,0.5);
}

@media (max-width: 760px) {
  .page-hero {
    min-height: 52vh;
  }
  .page-hero--games::before,
  .page-hero--tools::before,
  .page-hero--contact::before {
    background-size: 100% 100%, cover, 600px 600px !important;
  }
  .game-card-grid {
    grid-template-columns: 1fr;
  }
}
.world-card .text-link-muted,
.game-card .btn-disabled {
  color: var(--text-muted) !important;
}

.navbar ul {
  gap: 0.9rem;
}
.navbar ul li a {
  font-size: 0.88rem;
}

/* Full-bleed header artwork with stronger blend into the textured page background. */
.page-hero {
  width: 100%;
  min-height: 62vh;
  padding-top: calc(var(--nav-height) + 5.5rem);
  padding-bottom: 5.5rem;
  margin: 0;
}
.page-hero::before {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center 58% !important;
  transform: scale(1.015);
}
.page-hero::after {
  height: 230px;
  bottom: -2px;
  background:
    linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.80) 58%, rgba(13,13,13,0.98) 100%),
    radial-gradient(circle at 50% 100%, rgba(232,93,4,0.08), transparent 42%);
}
.page-hero + section {
  padding-top: 5rem;
}
.page-hero--games::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(13,13,13,0.80)),
    url('../images/portfolio_banner.webp') !important;
  background-position: center 56% !important;
}
.page-hero--lore::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(13,13,13,0.86)),
    url('../images/about-banner.webp') !important;
  background-position: center 62% !important;
}
.page-hero--tools::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(13,13,13,0.82)),
    url('../images/services_banner.webp') !important;
  background-position: center 60% !important;
}
.page-hero--downloads::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(13,13,13,0.84)),
    url('../images/banner.webp') !important;
  background-position: center 58% !important;
}
.page-hero--contact::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(13,13,13,0.82)),
    url('../images/contact_banner.webp') !important;
  background-position: center 62% !important;
}
.page-hero--about::before {
  background-image:
    radial-gradient(circle at 50% 40%, rgba(232,93,4,0.18), transparent 32%),
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(13,13,13,0.86)),
    url('../images/background_texture.webp') !important;
  background-size: 100% 100%, 100% 100%, 600px 600px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: center, center, center !important;
  transform: none;
}
.page-hero--forum::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(13,13,13,0.84)),
    url('../images/services_banner.webp') !important;
  background-position: center 62% !important;
}
.page-hero-mark {
  width: clamp(90px, 12vw, 160px);
  margin: 0 auto 1rem;
  filter: drop-shadow(0 0 20px rgba(255,186,8,0.20)) drop-shadow(0 14px 28px rgba(0,0,0,0.70));
}

/* Keep the project card hover in the earlier raised style, with clearer per-game colour ownership. */
.game-card--global {
  --game-accent: #d86b2a;
  --game-accent-rgb: 216, 107, 42;
}
.game-card--pactsmiths {
  --game-accent: #f4a62a;
  --game-accent-rgb: 244, 166, 42;
}
.game-card--soundtracks {
  --game-accent: #43d7c7;
  --game-accent-rgb: 67, 215, 199;
}
.game-card--coming-soon {
  --game-accent: #cdd8e8;
  --game-accent-rgb: 205, 216, 232;
}
.world-card:hover,
.world-card:active,
.game-card:hover,
.game-card:active {
  transform: translateY(-14px);
  box-shadow:
    0 0 0 1px rgba(var(--game-accent-rgb), 0.42),
    0 22px 58px rgba(var(--game-accent-rgb), 0.27),
    0 14px 34px rgba(0,0,0,0.72);
}
.game-card .btn:not(.btn-disabled),
.world-card .btn:not(.btn-disabled) {
  background: rgba(0,0,0,0.38);
  color: var(--text-light) !important;
  border: 1px solid rgba(var(--game-accent-rgb), 0.78);
  box-shadow: 0 0 18px rgba(var(--game-accent-rgb), 0.14);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.game-card .btn:not(.btn-disabled):hover,
.world-card .btn:not(.btn-disabled):hover {
  background: rgba(var(--game-accent-rgb), 0.18);
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(var(--game-accent-rgb), 0.28), 0 8px 20px rgba(0,0,0,0.52);
}
.game-card--pactsmiths > img {
  object-position: center 22%;
}

/* Downloads now inherit colour from their associated game/project. */
.download-card {
  --download-accent: var(--primary-color);
  --download-accent-rgb: 232, 93, 4;
  border-left-color: rgba(var(--download-accent-rgb), 0.70);
  border-bottom: 3px solid rgba(var(--download-accent-rgb), 0.10);
}
.download-card--alberenar {
  --download-accent: #8f5cff;
  --download-accent-rgb: 143, 92, 255;
}
.download-card--resonance {
  --download-accent: #2196f3;
  --download-accent-rgb: 33, 150, 243;
}
.download-card--global {
  --download-accent: #d86b2a;
  --download-accent-rgb: 216, 107, 42;
}
.download-card--pactsmiths {
  --download-accent: #f4a62a;
  --download-accent-rgb: 244, 166, 42;
}
.download-card:hover {
  transform: translateY(-10px);
  border-left-color: var(--download-accent);
  border-bottom-color: var(--download-accent);
  box-shadow:
    0 0 0 1px rgba(var(--download-accent-rgb), 0.32),
    0 18px 48px rgba(var(--download-accent-rgb), 0.20),
    0 12px 30px rgba(0,0,0,0.62);
}
.download-card .download-icon {
  color: var(--download-accent);
  border-color: rgba(var(--download-accent-rgb), 0.44);
  box-shadow: inset 0 0 18px rgba(var(--download-accent-rgb),0.08), 0 0 18px rgba(var(--download-accent-rgb),0.18);
}
.download-card .btn:not(.btn-disabled) {
  background: rgba(0,0,0,0.34);
  color: var(--text-light);
  border: 1px solid rgba(var(--download-accent-rgb), 0.70);
}
.download-card .btn:not(.btn-disabled):hover {
  background: rgba(var(--download-accent-rgb), 0.18);
  color: #fff;
}

/* The newsletter Notify Us button should feel refined, not oversized or garish. */
.newsletter-form .btn {
  padding: 0.72rem 1.35rem;
  font-size: 0.84rem;
  min-width: 118px;
  background: rgba(0,0,0,0.40);
  color: var(--text-light);
  border: 1px solid rgba(232,93,4,0.75);
  box-shadow: 0 0 18px rgba(232,93,4,0.14);
}
.newsletter-form .btn:hover {
  background: rgba(232,93,4,0.18);
  color: #fff;
  transform: translateY(-2px);
}

/* Contact form message area increased for longer messages. */
.contact-form {
  max-width: 720px;
}
.contact-form textarea {
  min-height: 245px;
}

/* Forum placeholder layout. */
.forum-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
}
.forum-card {
  --forum-accent: var(--primary-color);
  --forum-accent-rgb: 232, 93, 4;
  padding: 1.5rem;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(20,20,20,0.96), rgba(8,8,8,0.94));
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 4px solid rgba(var(--forum-accent-rgb), 0.72);
  box-shadow: 0 12px 34px rgba(0,0,0,0.42);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.forum-card:hover {
  transform: translateY(-8px);
  border-left-color: var(--forum-accent);
  box-shadow: 0 18px 44px rgba(var(--forum-accent-rgb), 0.18), 0 12px 30px rgba(0,0,0,0.62);
}
.forum-card--alberenar { --forum-accent: #8f5cff; --forum-accent-rgb: 143, 92, 255; }
.forum-card--resonance { --forum-accent: #2196f3; --forum-accent-rgb: 33, 150, 243; }
.forum-card--global { --forum-accent: #d86b2a; --forum-accent-rgb: 216, 107, 42; }
.forum-card--pactsmiths { --forum-accent: #f4a62a; --forum-accent-rgb: 244, 166, 42; }
.forum-card p { color: var(--text-muted); }
.forum-status {
  display: inline-block;
  margin-top: 1rem;
  color: var(--forum-accent);
  font-weight: 700;
  font-size: 0.88rem;
}

@media (max-width: 1120px) {
  .navbar ul { gap: 0.72rem; }
  .navbar ul li a { font-size: 0.82rem; }
  .navbar .logo span { font-size: 1rem; }
}
@media (max-width: 980px) {
  .navbar ul li a { font-size: 0.95rem; }
  .page-hero { min-height: 54vh; padding-top: calc(var(--nav-height) + 4.5rem); }
  .page-hero::before { background-size: cover !important; }
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.navbar {
  gap: 1rem;
}
.navbar .logo {
  min-width: 0;
  flex-shrink: 0;
}
.navbar .logo span {
  white-space: nowrap;
}

@media (min-width: 1181px) {
  .navbar ul {
    display: flex !important;
  }
  .menu-toggle {
    display: none !important;
  }
}

@media (max-width: 1180px) {
  .navbar {
    padding: 0.75rem 1.1rem;
  }
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,186,8,0.32);
    background: rgba(0,0,0,0.36);
    color: var(--text-light);
  }
  .menu-toggle .svg-icon {
    width: 22px;
    height: 22px;
  }
  .navbar ul {
    display: none !important;
  }
  .navbar.expanded ul {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1.1rem 1.15rem;
    background: rgba(8,8,8,0.97);
    border-top: 1px solid rgba(255,186,8,0.16);
    box-shadow: 0 18px 42px rgba(0,0,0,0.68);
  }
  .navbar.expanded ul li a {
    display: block;
    padding: 0.72rem 0.25rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-height: 64px;
  }
  .navbar .logo span {
    font-size: 0.9rem;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .navbar .logo img {
    width: 34px;
    height: 34px;
  }
}

/* Fluid page headers: keeps artwork full-bleed while reducing laptop clipping. */
.page-hero {
  min-height: clamp(430px, 54vh, 660px);
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
  padding-top: calc(var(--nav-height) + clamp(3rem, 6vw, 5.5rem));
  padding-bottom: clamp(4rem, 7vw, 6rem);
}
.page-hero-content {
  width: min(920px, 92vw);
}
.page-hero::before {
  background-position: center 55% !important;
}
.page-hero--games::before,
.page-hero--tools::before,
.page-hero--contact::before,
.page-hero--forum::before {
  background-position: center 64% !important;
}
.page-hero--lore::before,
.page-hero--downloads::before {
  background-position: center 58% !important;
}

@media (min-width: 900px) and (max-width: 1366px) {
  .page-hero {
    min-height: clamp(410px, 50vh, 600px);
    padding-top: calc(var(--nav-height) + 3.25rem);
    padding-bottom: 4.75rem;
  }
  .page-hero h1 {
    font-size: clamp(2.8rem, 5vw, 4.4rem);
  }
  .page-hero p {
    font-size: 1.02rem;
  }
  .page-hero-mark {
    width: clamp(86px, 10vw, 132px);
  }
}

@media (max-width: 760px) {
  .page-hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + 3.25rem);
    padding-bottom: 4rem;
  }
  .page-hero::before {
    background-position: center center !important;
  }
  .page-hero h1 {
    font-size: clamp(2.15rem, 10vw, 3.25rem);
  }
  .page-hero p {
    font-size: 0.98rem;
  }
  .page-hero-mark {
    width: 88px;
  }
}

/* Company-colour treatment for the About Us page pillars. */
.about-page .studio-identity-panel,
.about-page .service-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,186,8,0.10), transparent 32%),
    linear-gradient(145deg, rgba(33,18,8,0.96), rgba(8,8,8,0.95));
  border-color: rgba(255,186,8,0.13);
  border-left-color: rgba(232,93,4,0.82);
  border-bottom-color: rgba(255,186,8,0.16);
}
.about-page .service-card:hover,
.about-page .service-card:active {
  border-left-color: #e85d04;
  border-bottom-color: #ffba08;
  box-shadow:
    0 0 0 1px rgba(255,186,8,0.22),
    0 20px 52px rgba(232,93,4,0.24),
    0 12px 30px rgba(0,0,0,0.66);
}
.about-page .service-card > .svg-icon {
  color: #ffba08;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,186,8,0.34), transparent 42%),
    linear-gradient(145deg, rgba(232,93,4,0.34), rgba(0,0,0,0.72));
  border-color: rgba(255,186,8,0.44);
  box-shadow: inset 0 0 18px rgba(255,186,8,0.12), 0 0 22px rgba(232,93,4,0.22);
}
.about-page .about-pillars .section-subheading,
.about-page .service-card p {
  color: rgba(248,249,250,0.78);
}

.about-page .services-grid {
  max-width: 1320px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.about-page .service-card {
  min-height: 350px;
  padding: clamp(1.25rem, 2vw, 1.8rem);
}
@media (min-width: 1260px) {
  .about-page .services-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 860px) and (max-width: 1259px) {
  .about-page .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 859px) {
  .about-page .services-grid {
    grid-template-columns: 1fr;
  }
  .about-page .service-card {
    min-height: auto;
  }
}

/* Fluid card and section layout for laptop/tablet widths. */
section {
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}
.game-card-grid,
.download-grid,
.world-card-grid,
.tools-layout,
.forum-grid {
  width: min(1240px, 100%);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.game-card {
  min-height: auto;
}
.game-card > img {
  aspect-ratio: 16 / 10;
}
@media (min-width: 1181px) and (max-width: 1366px) {
  .game-card-grid,
  .download-grid,
  .world-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .game-card-body,
  .world-card-body {
    padding: 1.2rem;
  }
}
@media (max-width: 980px) {
  .game-card-grid,
  .download-grid,
  .world-card-grid,
  .tools-layout,
  .forum-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
  .contact-card,
  .tool-panel,
  .download-card,
  .forum-card,
  .archive-entry {
    padding: 1.15rem;
  }
}

/* Avoid tiny form controls on laptop/mobile and keep message composition comfortable. */
.newsletter-form,
.contact-form {
  width: min(100%, 760px);
}
.contact-form input,
.contact-form textarea,
.newsletter-form input,
.dice-form input,
.dice-form select,
.archive-tools input {
  width: 100%;
  min-width: 0;
}


:root {
  --nav-height: 78px;
}

.navbar {
  min-height: var(--nav-height);
}

/* Keep fixed navigation from covering hero content on shorter laptop screens. */
.hero,
.hero--studio {
  height: auto;
  min-height: 100svh;
  align-items: flex-start;
  padding-top: calc(var(--nav-height) + clamp(1.25rem, 4svh, 3rem));
  padding-bottom: clamp(3rem, 6svh, 5rem);
}

.hero--studio {
  background-image: url('../images/banner-wide.webp');
  background-size: cover;
  background-position: center center;
}

.hero-content--brand {
  width: min(980px, 92vw);
  margin: 0 auto;
}

@media (min-width: 900px) and (max-height: 900px) {
  .hero-brand-logo {
    width: clamp(90px, 10vw, 145px);
    margin-bottom: 0.8rem;
  }
  .hero-content--brand {
    padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.8vw, 2rem);
  }
  .hero-content--brand h1 {
    font-size: clamp(2.7rem, 5.8vw, 4.6rem);
    line-height: 1;
  }
  .hero-tagline {
    font-size: clamp(1.05rem, 1.8vw, 1.45rem) !important;
  }
  .hero-content--brand p:not(.eyebrow):not(.hero-tagline) {
    font-size: 0.98rem;
    margin-bottom: 1rem;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-height: 64px;
  }
  .hero,
  .hero--studio {
    padding-top: calc(var(--nav-height) + 1.5rem);
  }
}

/* Page headers now use wide-safe banner derivatives so laptop aspect ratios do not crop key art. */
.page-hero {
  min-height: clamp(410px, 52svh, 620px);
  padding-top: calc(var(--nav-height) + clamp(2.75rem, 5svh, 4.75rem));
  padding-bottom: clamp(5rem, 8svh, 7rem);
  margin-bottom: -72px;
  overflow: hidden;
}

.page-hero::before {
  transform: none !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.page-hero::after {
  height: 260px;
  bottom: 0;
  background:
    linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.70) 48%, rgba(13,13,13,1) 88%, rgba(13,13,13,0) 100%);
}

.page-hero + section {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-top: calc(5rem + 72px);
  background:
    linear-gradient(to bottom, rgba(13,13,13,1) 0%, rgba(13,13,13,0.78) 62px, rgba(13,13,13,0) 160px),
    url('../images/background_texture.webp') repeat;
  background-size: auto, 600px 600px;
}

.page-hero--games::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(13,13,13,0.78)),
    url('../images/portfolio-banner-wide.webp') !important;
}
.page-hero--lore::before {
  background-image:
    radial-gradient(circle at 50% 44%, rgba(232,93,4,0.10), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(13,13,13,0.84)),
    url('../images/about-banner-wide.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
}
.page-hero--tools::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(13,13,13,0.80)),
    url('../images/services-banner-wide.webp') !important;
}
.page-hero--downloads::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(13,13,13,0.82)),
    url('../images/banner-wide.webp') !important;
}
.page-hero--contact::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(13,13,13,0.80)),
    url('../images/contact-banner-wide.webp') !important;
}
.page-hero--forum::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(13,13,13,0.82)),
    url('../images/services-banner-wide.webp') !important;
}

@media (min-width: 900px) and (max-height: 900px) {
  .page-hero {
    min-height: clamp(360px, 48svh, 520px);
    padding-top: calc(var(--nav-height) + 2.35rem);
    padding-bottom: 5rem;
  }
  .page-hero h1 {
    font-size: clamp(2.7rem, 5vw, 4.2rem);
  }
  .page-hero p {
    font-size: 1rem;
  }
}

@media (max-width: 760px) {
  .page-hero {
    min-height: 420px;
    margin-bottom: -52px;
    padding-top: calc(var(--nav-height) + 2.25rem);
    padding-bottom: 4.5rem;
  }
  .page-hero + section {
    padding-top: calc(4rem + 52px);
  }
}

.hero--studio,
.page-hero {
  margin-top: var(--nav-height) !important;
}

.hero--studio {
  min-height: calc(100svh - var(--nav-height)) !important;
  padding-top: clamp(2rem, 5svh, 4rem) !important;
}

.page-hero {
  min-height: clamp(420px, 50svh, 620px) !important;
  padding-top: clamp(3rem, 7svh, 5rem) !important;
  padding-bottom: clamp(5rem, 9svh, 7.5rem) !important;
  margin-bottom: 0 !important;
  background-color: #0d0d0d !important;
  isolation: isolate;
}

.page-hero::before {
  inset: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.page-hero::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(180px, 26svh, 320px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.38) 42%,
      rgba(13,13,13,0.82) 72%,
      rgba(13,13,13,1) 100%) !important;
}

.page-hero-content {
  position: relative !important;
  z-index: 2 !important;
}

.page-hero + section {
  margin-top: 0 !important;
  padding-top: clamp(3.5rem, 7vw, 6rem) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,1) 0%,
      rgba(13,13,13,0.86) 42px,
      rgba(13,13,13,0.42) 125px,
      rgba(13,13,13,0) 240px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

@media (min-width: 900px) and (max-height: 900px) {
  .hero--studio,
  .page-hero {
    margin-top: var(--nav-height) !important;
  }

  .page-hero {
    min-height: clamp(380px, 47svh, 540px) !important;
    padding-top: clamp(2.25rem, 5svh, 3.75rem) !important;
    padding-bottom: clamp(4.25rem, 8svh, 6.5rem) !important;
  }
}

@media (max-width: 760px) {
  .hero--studio,
  .page-hero {
    margin-top: var(--nav-height) !important;
  }

  .page-hero {
    min-height: 420px !important;
    padding-top: 2.75rem !important;
    padding-bottom: 5rem !important;
  }

  .page-hero + section {
    padding-top: 4rem !important;
  }
}

:root {
  --nav-height: 78px;
}

html {
  scroll-padding-top: calc(var(--nav-height) + 1rem);
}

.navbar {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  min-height: var(--nav-height) !important;
  z-index: 3000 !important;
}

/* Fixed-position headers were causing the artwork to start behind the navigation on some laptop heights. */
.hero--studio,
.page-hero {
  margin-top: 0 !important;
}

.hero--studio {
  min-height: calc(100svh - var(--nav-height)) !important;
  padding-top: clamp(2.6rem, 6svh, 5rem) !important;
}

.page-hero {
  min-height: clamp(460px, 54svh, 660px) !important;
  padding-top: clamp(4.2rem, 8svh, 6.25rem) !important;
  padding-bottom: clamp(5.5rem, 10svh, 8rem) !important;
}

.page-hero::before {
  inset: 0 !important;
  background-position: center 48% !important;
}

.page-hero--games::before,
.page-hero--tools::before,
.page-hero--contact::before,
.page-hero--forum::before {
  background-position: center 44% !important;
}

.page-hero--lore::before,
.page-hero--about::before,
.page-hero--downloads::before {
  background-position: center 40% !important;
}

.page-hero::after {
  height: clamp(210px, 30svh, 360px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.28) 32%,
      rgba(13,13,13,0.74) 68%,
      rgba(13,13,13,1) 100%) !important;
}

.page-hero + section {
  margin-top: 0 !important;
  padding-top: clamp(3.75rem, 7vw, 6.25rem) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,1) 0%,
      rgba(13,13,13,0.88) 48px,
      rgba(13,13,13,0.46) 140px,
      rgba(13,13,13,0) 260px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

#audioControls {
  top: calc(var(--nav-height) + 1rem) !important;
}

@media (min-width: 900px) and (max-height: 900px) {
  .page-hero {
    min-height: clamp(430px, 52svh, 590px) !important;
    padding-top: clamp(3.8rem, 7svh, 5.75rem) !important;
    padding-bottom: clamp(5rem, 9svh, 7.25rem) !important;
  }
}

@media (max-width: 1180px) {
  .navbar {
    position: sticky !important;
  }
}

@media (max-width: 760px) {
  :root {
    --nav-height: 64px;
  }
  .hero--studio {
    min-height: calc(100svh - var(--nav-height)) !important;
    padding-top: 2.25rem !important;
  }
  .page-hero {
    min-height: 440px !important;
    padding-top: 3.25rem !important;
    padding-bottom: 5.25rem !important;
  }
  .page-hero::before {
    background-position: center 42% !important;
  }
}

:root {
  --nav-height: 88px;
}

html {
  scroll-padding-top: calc(var(--nav-height) + 1rem) !important;
}

body {
  padding-top: var(--nav-height) !important;
}

.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--nav-height) !important;
  min-height: var(--nav-height) !important;
  margin: 0 !important;
  padding: 0.75rem 1.5rem !important;
  z-index: 5000 !important;
  box-sizing: border-box !important;
}

.navbar .logo img {
  width: 52px;
  height: 52px;
}

.navbar.expanded ul {
  top: 100% !important;
}

.hero,
.hero--studio,
.page-hero,
.sub-hero {
  margin-top: 0 !important;
}

.hero,
.hero--studio {
  min-height: calc(100svh - var(--nav-height)) !important;
  height: auto !important;
  padding-top: clamp(2.25rem, 5svh, 4.5rem) !important;
  padding-bottom: clamp(3rem, 7svh, 5.5rem) !important;
}

.page-hero {
  min-height: clamp(460px, 54svh, 680px) !important;
  padding-top: clamp(4rem, 8svh, 6.5rem) !important;
  padding-bottom: clamp(6rem, 11svh, 8.5rem) !important;
  background-color: #0d0d0d !important;
}

.page-hero::before {
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.page-hero::after {
  height: clamp(230px, 32svh, 380px) !important;
  bottom: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.22) 30%,
      rgba(13,13,13,0.72) 66%,
      rgba(13,13,13,1) 100%) !important;
}

.page-hero + section {
  margin-top: 0 !important;
  padding-top: clamp(4rem, 7vw, 6.5rem) !important;
}

/* Page-specific focal positions after the fixed-header correction. */
.page-hero--games::before {
  background-position: center 46% !important;
}
.page-hero--lore::before,
.page-hero--about::before,
.page-hero--downloads::before {
  background-position: center 42% !important;
}
.page-hero--tools::before,
.page-hero--contact::before,
.page-hero--forum::before {
  background-position: center 48% !important;
}

/* Legacy pages kept in the package should also clear the fixed header. */
.sub-hero {
  min-height: clamp(420px, 52svh, 640px) !important;
  padding-top: clamp(3.5rem, 7svh, 5.5rem) !important;
}

#audioControls {
  top: calc(var(--nav-height) + 1rem) !important;
}

@media (max-width: 1180px) {
  :root {
    --nav-height: 82px;
  }

  .navbar {
    height: var(--nav-height) !important;
    min-height: var(--nav-height) !important;
    padding: 0.65rem 1.1rem !important;
  }

  .navbar .logo img {
    width: 46px;
    height: 46px;
  }

  .page-hero {
    min-height: clamp(440px, 55svh, 620px) !important;
    padding-top: clamp(3.75rem, 7svh, 5.5rem) !important;
    padding-bottom: clamp(5.5rem, 10svh, 7.75rem) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --nav-height: 68px;
  }

  .navbar {
    padding: 0.55rem 1rem !important;
  }

  .navbar .logo img {
    width: 38px;
    height: 38px;
  }

  .hero,
  .hero--studio {
    min-height: calc(100svh - var(--nav-height)) !important;
    padding-top: 2rem !important;
  }

  .page-hero {
    min-height: 430px !important;
    padding-top: 3rem !important;
    padding-bottom: 5.25rem !important;
  }
}

:root {
  --nav-height: 88px;
  --button-border: rgba(255, 186, 8, 0.45);
  --button-glow: rgba(232, 93, 4, 0.22);
}

body {
  padding-top: var(--nav-height) !important;
}

.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--nav-height) !important;
  min-height: var(--nav-height) !important;
  background: rgba(0,0,0,0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.page-hero {
  margin-top: 0 !important;
  min-height: clamp(540px, 50svh, 720px) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.2rem, 9svh, 7.2rem) !important;
  overflow: hidden !important;
  background-color: #0d0d0d !important;
}

.page-hero::before {
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  opacity: 1 !important;
}

.page-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(190px, 30svh, 360px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.20) 32%,
      rgba(13,13,13,0.62) 68%,
      rgba(13,13,13,0.96) 100%) !important;
}

.page-hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: min(980px, 92vw) !important;
}

.page-hero + section {
  margin-top: -1px !important;
  padding-top: clamp(4rem, 7vw, 6.4rem) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.96) 0%,
      rgba(13,13,13,0.72) 64px,
      rgba(13,13,13,0.30) 170px,
      rgba(13,13,13,0) 280px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

.page-hero--games::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(13,13,13,0.58)),
    url('../images/hero-games.webp') !important;
}
.page-hero--lore::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(13,13,13,0.52)),
    url('../images/hero-lore.webp') !important;
}
.page-hero--tools::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(13,13,13,0.58)),
    url('../images/hero-tools.webp') !important;
}
.page-hero--downloads::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.04), rgba(13,13,13,0.48)),
    url('../images/hero-downloads.webp') !important;
}
.page-hero--forum::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(13,13,13,0.60)),
    url('../images/hero-forum.webp') !important;
}
.page-hero--about::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(13,13,13,0.55)),
    url('../images/hero-about.webp') !important;
}
.page-hero--contact::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(13,13,13,0.58)),
    url('../images/hero-contact.webp') !important;
}

/* Make the downloads forge/anvil image easier to read. */
.downloads-page .page-hero::after,
.lore-page .page-hero::after {
  height: clamp(160px, 25svh, 300px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.14) 40%,
      rgba(13,13,13,0.54) 76%,
      rgba(13,13,13,0.94) 100%) !important;
}

/* Button unification: Notify Us and Send Message now share the same restrained studio treatment. */
.newsletter-form .btn,
.contact-form .form-action,
.contact-form button.form-action,
button.form-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 132px !important;
  padding: 0.72rem 1.45rem !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.42) !important;
  color: var(--text-light) !important;
  border: 1px solid rgba(232,93,4,0.72) !important;
  box-shadow: 0 0 18px rgba(232,93,4,0.14) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.newsletter-form .btn:hover,
.contact-form .form-action:hover,
.contact-form button.form-action:hover,
button.form-action:hover {
  transform: translateY(-2px) !important;
  background: rgba(232,93,4,0.18) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(232,93,4,0.24), 0 8px 20px rgba(0,0,0,0.5) !important;
}

.contact-form textarea {
  min-height: 300px !important;
}

/* About Us: more substantial content gets more breathing room. */
.about-page .studio-identity-panel--wide {
  grid-template-columns: 120px 1fr;
  max-width: 1220px;
}
.about-page .studio-identity-panel--wide p:not(.eyebrow) {
  margin-bottom: 0.75rem;
}
.about-page .service-card {
  min-height: 430px;
  align-items: flex-start;
  text-align: left;
}
.about-page .service-card > .svg-icon {
  align-self: center;
}
.about-page .service-card h3 {
  align-self: center;
  text-align: center;
  width: 100%;
}

/* Forum broad categories instead of over-listing individual game lines. */
.forum-card--board-games {
  --forum-accent: #d86b2a;
  --forum-accent-rgb: 216, 107, 42;
}
.forum-card--card-games {
  --forum-accent: #f4a62a;
  --forum-accent-rgb: 244, 166, 42;
}

/* Download filter labels can be plural while keeping the data categories simple. */
.filter-row .tag-filter {
  min-width: 104px;
}

@media (max-width: 1180px) {
  :root { --nav-height: 82px; }
  .page-hero {
    min-height: clamp(500px, 57svh, 650px) !important;
    padding-top: clamp(3rem, 6svh, 4.6rem) !important;
    padding-bottom: clamp(4.8rem, 8svh, 6.4rem) !important;
  }
}

@media (max-width: 760px) {
  :root { --nav-height: 68px; }
  .page-hero {
    min-height: 440px !important;
    padding-top: 2.6rem !important;
    padding-bottom: 4.6rem !important;
  }
  .about-page .studio-identity-panel--wide {
    grid-template-columns: 1fr;
  }
  .about-page .service-card {
    min-height: auto;
    text-align: center;
    align-items: center;
  }
  .contact-form textarea {
    min-height: 240px !important;
  }
}


.page-hero--forum::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(13,13,13,0.60)),
    url('../images/hero-forum.webp') !important;
  background-position: center center !important;
}

.about-page .page-hero--about {
  min-height: clamp(620px, 62svh, 760px) !important;
  display: flex !important;
  align-items: center !important;
}

.about-page .page-hero--about::before {
  background-position: center 16% !important;
}

.about-page .page-hero-content--under-logo {
  margin-top: clamp(210px, 27svh, 310px) !important;
  max-width: 1050px !important;
}

.about-page .page-hero-content--under-logo .eyebrow {
  margin-bottom: 0.35rem !important;
}

.about-page .page-hero-content--under-logo h1 {
  font-size: clamp(3rem, 5.2vw, 5rem) !important;
  line-height: 1 !important;
  margin-bottom: 1rem !important;
}

.about-page .page-hero-content--under-logo p:not(.eyebrow) {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  .about-page .page-hero--about {
    min-height: 610px !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: 230px !important;
  }
}


.about-page .page-hero--about {
  min-height: clamp(760px, 76svh, 900px) !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.about-page .page-hero--about::before {
  background-position: center 10% !important;
}

.about-page .page-hero-content--under-logo {
  margin-top: clamp(430px, 48svh, 555px) !important;
  max-width: 1080px !important;
}

.about-page .page-hero-content--under-logo .eyebrow {
  margin-bottom: 0.45rem !important;
}

.about-page .page-hero-content--under-logo h1 {
  margin-bottom: 1.05rem !important;
}

.page-hero--forum-banner-only {
  min-height: clamp(460px, 54svh, 660px) !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.page-hero--forum-banner-only::before {
  background-position: center 42% !important;
}

.page-hero-content--banner-label {
  margin-top: clamp(4.8rem, 10svh, 7.2rem) !important;
}

.page-hero-content--banner-label .eyebrow {
  margin: 0 !important;
  color: rgba(226, 234, 241, 0.88) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.85) !important;
}

.forum-intro-section {
  padding-top: clamp(4.4rem, 7vw, 6.4rem) !important;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
  text-align: center !important;
}

.forum-intro-section .forum-main-title {
  font-size: clamp(3rem, 6vw, 5.2rem) !important;
  margin-bottom: 1rem !important;
}

.forum-sections-section {
  padding-top: clamp(2.5rem, 4.5vw, 4rem) !important;
}

@media (max-width: 1180px) {
  .about-page .page-hero--about {
    min-height: clamp(720px, 76svh, 860px) !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: clamp(390px, 49svh, 520px) !important;
  }
}

@media (max-width: 760px) {
  .about-page .page-hero--about {
    min-height: 720px !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: 330px !important;
  }
  .page-hero--forum-banner-only {
    min-height: 420px !important;
  }
  .page-hero-content--banner-label {
    margin-top: 4rem !important;
  }
}

/* Section glow and positioning refinement.
   The About header logo is moved up slightly so the title copy sits beneath it,
   and Lore/Tools/Forum cards now share the left-and-bottom glow treatment used
   by the Downloads page. */
.about-page .page-hero--about::before {
  background-position: center 0% !important;
}

.about-page .page-hero-content--under-logo {
  margin-top: clamp(455px, 50svh, 585px) !important;
}

/* Forum heading remains below the artwork, but no longer sits so low on the page. */
.forum-intro-section {
  padding-top: clamp(2.6rem, 4.6vw, 4.1rem) !important;
  padding-bottom: clamp(1.1rem, 2.4vw, 2rem) !important;
}

.forum-sections-section {
  padding-top: clamp(2rem, 3.8vw, 3.2rem) !important;
}

/* Shared sectional card glow framework. */
.archive-entry,
.tool-panel,
.forum-card {
  border-left-width: 4px !important;
  border-left-style: solid !important;
  border-bottom: 3px solid rgba(var(--section-accent-rgb, 232, 93, 4), 0.10) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.42) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.archive-entry:hover,
.tool-panel:hover,
.forum-card:hover {
  transform: translateY(-9px) !important;
  border-left-color: var(--section-accent, var(--primary-color)) !important;
  border-bottom-color: var(--section-accent, var(--primary-color)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--section-accent-rgb, 232, 93, 4), 0.30),
    0 18px 48px rgba(var(--section-accent-rgb, 232, 93, 4), 0.20),
    0 12px 30px rgba(0,0,0,0.62) !important;
}

/* Lore archive entries inherit project/category colour. */
.archive-entry {
  --section-accent: var(--primary-color);
  --section-accent-rgb: 232, 93, 4;
  border-left-color: rgba(var(--section-accent-rgb), 0.70) !important;
}
.archive-entry[data-tags~="fantasy"] {
  --section-accent: #8f5cff;
  --section-accent-rgb: 143, 92, 255;
}
.archive-entry[data-tags~="sci-fi"] {
  --section-accent: #2196f3;
  --section-accent-rgb: 33, 150, 243;
}
.archive-entry[data-tags~="board"] {
  --section-accent: #d86b2a;
  --section-accent-rgb: 216, 107, 42;
}
.archive-entry .archive-icon {
  color: var(--section-accent) !important;
  border-color: rgba(var(--section-accent-rgb), 0.44) !important;
  box-shadow: inset 0 0 18px rgba(var(--section-accent-rgb),0.08), 0 0 18px rgba(var(--section-accent-rgb),0.16) !important;
}

/* Tools use the studio forge-gold accent while following the same visual language. */
.tool-panel {
  --section-accent: #e8a83a;
  --section-accent-rgb: 232, 168, 58;
  border-left-color: rgba(var(--section-accent-rgb), 0.70) !important;
}
.tool-panel .panel-icon {
  color: var(--section-accent) !important;
  border-color: rgba(var(--section-accent-rgb), 0.44) !important;
  box-shadow: inset 0 0 18px rgba(var(--section-accent-rgb),0.08), 0 0 18px rgba(var(--section-accent-rgb),0.16) !important;
}

/* Forum categories now use broad RPG/tabletop groupings. */
.forum-card {
  --section-accent: var(--forum-accent, var(--primary-color));
  --section-accent-rgb: var(--forum-accent-rgb, 232, 93, 4);
  border-left-color: rgba(var(--forum-accent-rgb, 232, 93, 4), 0.72) !important;
}
.forum-card--fantasy-rpgs {
  --forum-accent: #8f5cff;
  --forum-accent-rgb: 143, 92, 255;
}
.forum-card--sci-fi-rpgs {
  --forum-accent: #2196f3;
  --forum-accent-rgb: 33, 150, 243;
}
.forum-card--board-games {
  --forum-accent: #d86b2a;
  --forum-accent-rgb: 216, 107, 42;
}
.forum-card--card-games {
  --forum-accent: #f4a62a;
  --forum-accent-rgb: 244, 166, 42;
}
.forum-status {
  color: var(--forum-accent, var(--primary-color)) !important;
}

@media (max-width: 1180px) {
  .about-page .page-hero-content--under-logo {
    margin-top: clamp(425px, 51svh, 545px) !important;
  }
}

@media (max-width: 760px) {
  .about-page .page-hero--about::before {
    background-position: center 3% !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: 355px !important;
  }
  .forum-intro-section {
    padding-top: 2.5rem !important;
  }
}

/* About and Forum positioning refinement.
   About: display the embedded studio logo artwork smaller and higher, then place the page copy beneath the logo text.
   Forum: restore the title and explanation into the banner area to match the other main pages. */
.about-page .page-hero--about {
  min-height: clamp(640px, 70svh, 820px) !important;
  padding-top: clamp(2.25rem, 5svh, 4rem) !important;
  padding-bottom: clamp(4.5rem, 8svh, 6.5rem) !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.about-page .page-hero--about::before {
  background-size: min(100vw, 1560px) auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

.about-page .page-hero-content--under-logo {
  margin-top: clamp(335px, 38svh, 430px) !important;
  max-width: 1080px !important;
}

.about-page .page-hero-content--under-logo h1 {
  margin-bottom: 0.95rem !important;
}

/* Restore Forum header copy to the page-hero area rather than a separate lower block. */
.forum-page .page-hero--forum {
  min-height: clamp(540px, 56svh, 700px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.forum-page .page-hero--forum .page-hero-content {
  margin-top: 0 !important;
}

.forum-page .page-hero--forum h1 {
  font-size: clamp(3.5rem, 7vw, 6rem) !important;
}

/* The separate Forum intro block was removed; keep this as a safety guard for cached markup. */
.forum-intro-section {
  display: none !important;
}

.forum-sections-section {
  padding-top: clamp(4rem, 7vw, 6.4rem) !important;
}

@media (max-width: 1180px) {
  .about-page .page-hero--about {
    min-height: clamp(600px, 72svh, 780px) !important;
  }
  .about-page .page-hero--about::before {
    background-size: min(116vw, 1450px) auto !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: clamp(320px, 39svh, 410px) !important;
  }
}

@media (max-width: 760px) {
  .about-page .page-hero--about {
    min-height: 650px !important;
  }
  .about-page .page-hero--about::before {
    background-size: 190vw auto !important;
    background-position: center top !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: 320px !important;
  }
  .forum-page .page-hero--forum {
    min-height: 460px !important;
  }
}


/* Project catalogue expansion.
   Adds the supplied Pactsmiths front cover plus No Safe Road and Alberenar: Wounded Roads as current projects. */
.game-card--wounded-roads {
  --game-accent: #b12b24;
  --game-accent-rgb: 177, 43, 36;
}
.game-card--no-safe-road {
  --game-accent: #9da6a9;
  --game-accent-rgb: 157, 166, 169;
}
.game-card--pactsmiths {
  --game-accent: #f0b21f;
  --game-accent-rgb: 240, 178, 31;
}
.game-card--wounded-roads > img,
.game-card--no-safe-road > img,
.game-card--pactsmiths > img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.35rem !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--game-accent-rgb),0.13), transparent 46%),
    #030303 !important;
}
.forum-card--solo-mission {
  --forum-accent: #b7c0c4;
  --forum-accent-rgb: 183, 192, 196;
}
@media (min-width: 1280px) {
  .game-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Media and filtering refinement.
   Keeps downloads filtering reliable even where card styles use display:flex,
   and adds in-lightbox gallery browsing for the game-page image scrollers. */
[hidden],
.is-filtered-out {
  display: none !important;
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox.is-open {
  display: block;
}

.lightbox-content {
  max-width: min(92vw, 1500px);
  max-height: 84vh;
  object-fit: contain;
}

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(42px, 5vw, 68px);
  height: clamp(42px, 5vw, 68px);
  border-radius: 999px;
  border: 1px solid rgba(255, 186, 8, 0.46);
  background: radial-gradient(circle at 50% 35%, rgba(232,93,4,0.35), rgba(0,0,0,0.78));
  color: #fff;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 10003;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(232,93,4,0.22), 0 12px 32px rgba(0,0,0,0.62);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(255, 186, 8, 0.88);
  background: radial-gradient(circle at 50% 35%, rgba(255,186,8,0.35), rgba(0,0,0,0.82));
  box-shadow: 0 0 36px rgba(255,186,8,0.28), 0 12px 34px rgba(0,0,0,0.68);
}

.lightbox-prev {
  left: clamp(0.9rem, 3vw, 3rem);
}

.lightbox-next {
  right: clamp(0.9rem, 3vw, 3rem);
}

.lightbox-counter {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  z-index: 10003;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.62);
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0,0,0,0.54);
}

.lightbox .close {
  z-index: 10004;
}

@media (max-width: 760px) {
  .lightbox-nav {
    top: auto;
    bottom: 4.2rem;
    transform: none;
  }

  .lightbox-nav:hover,
  .lightbox-nav:focus-visible {
    transform: scale(1.05);
  }

  .lightbox-prev {
    left: 1.25rem;
  }

  .lightbox-next {
    right: 1.25rem;
  }

  .lightbox-content {
    max-height: 76vh;
  }
}

/* Expanded Lore archive project colours. */
.archive-entry[data-tags~="card"] {
  --section-accent: #f0b21f;
  --section-accent-rgb: 240, 178, 31;
}
.archive-entry[data-tags~="ww2"],
.archive-entry[data-tags~="mission"] {
  --section-accent: #aeb8bb;
  --section-accent-rgb: 174, 184, 187;
}
.archive-entry[data-tags~="solo"] {
  --section-accent: #b12b24;
  --section-accent-rgb: 177, 43, 36;
}
.archive-entry[data-tags~="audio"] {
  --section-accent: #43d7c7;
  --section-accent-rgb: 67, 215, 199;
}
.archive-entry[data-tags~="future"] {
  --section-accent: #cdd8e8;
  --section-accent-rgb: 205, 216, 232;
}
.archive-entry[data-tags~="ww2"] {
  --section-accent: #aeb8bb;
  --section-accent-rgb: 174, 184, 187;
}

/* Homepage foundation pass: broader studio identity, clearer routes, and compact project catalogue. */
.hero--home-refined::before {
  background:
    radial-gradient(circle at 50% 22%, rgba(255,186,8,0.16), transparent 28%),
    linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(13,13,13,0.78) 72%, rgba(13,13,13,0.98) 100%) !important;
}

.hero-content--home-refined {
  max-width: 1050px !important;
  padding: clamp(1.4rem, 3vw, 2.4rem) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(232,93,4,0.12), transparent 42%),
    linear-gradient(145deg, rgba(0,0,0,0.50), rgba(0,0,0,0.22));
  border: 1px solid rgba(255,186,8,0.16);
  border-radius: 24px;
  box-shadow: 0 18px 58px rgba(0,0,0,0.48), inset 0 0 60px rgba(255,186,8,0.035);
  backdrop-filter: blur(3px);
}

.hero-content--home-refined .hero-brand-logo {
  width: clamp(110px, 13vw, 190px);
}

.hero-content--home-refined h1 {
  font-size: clamp(3rem, 7.2vw, 6rem) !important;
}

.studio-home-opening {
  padding-top: clamp(4rem, 7vw, 6rem) !important;
}

.studio-identity-panel--home {
  max-width: 1220px;
  grid-template-columns: clamp(86px, 11vw, 132px) 1fr;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.3rem);
}

.studio-routes-section,
.home-project-section,
.studio-pillars-section {
  padding-top: clamp(3.8rem, 7vw, 6rem);
  padding-bottom: clamp(3.8rem, 7vw, 6rem);
}

.studio-route-grid,
.studio-pillar-grid {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1.25rem;
}

.studio-route-card,
.studio-pillar-card,
.home-project-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,186,8,0.09), transparent 34%),
    linear-gradient(145deg, rgba(20,20,20,0.96), rgba(8,8,8,0.94));
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 4px solid rgba(var(--game-accent-rgb, 232, 93, 4), 0.70);
  border-bottom: 3px solid rgba(var(--game-accent-rgb, 232, 93, 4), 0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.42);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.studio-route-card,
.studio-pillar-card {
  padding: 1.35rem;
}

.studio-route-card {
  color: var(--text-light);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.studio-route-card p,
.studio-pillar-card p,
.home-project-card p {
  color: var(--text-muted);
}

.studio-route-card:hover,
.home-project-card:hover {
  transform: translateY(-9px);
  border-left-color: var(--game-accent, var(--primary-color));
  border-bottom-color: var(--game-accent, var(--primary-color));
  box-shadow:
    0 0 0 1px rgba(var(--game-accent-rgb, 232, 93, 4), 0.30),
    0 18px 48px rgba(var(--game-accent-rgb, 232, 93, 4), 0.20),
    0 12px 30px rgba(0,0,0,0.62);
}

.route-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-color);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,186,8,0.28), transparent 38%),
    linear-gradient(145deg, rgba(232,93,4,0.22), rgba(0,0,0,0.62));
  border: 1px solid rgba(232,93,4,0.48);
  box-shadow: inset 0 0 18px rgba(255,186,8,0.08), 0 0 18px rgba(232,93,4,0.18);
  margin-bottom: 1rem;
}

.route-icon .svg-icon {
  width: 1.8rem;
  height: 1.8rem;
}

.home-project-grid {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 1.35rem;
}

.home-project-card {
  --game-accent: var(--primary-color);
  --game-accent-rgb: 232, 93, 4;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 1rem;
  padding: 1rem;
  align-items: stretch;
}

.home-project-card img {
  width: 132px;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  border-radius: 14px;
  background: #030303;
  border: 1px solid rgba(var(--game-accent-rgb),0.18);
  box-shadow: inset 0 -28px 42px rgba(var(--game-accent-rgb),0.06);
}

.home-project-card.world-card--wounded-roads img,
.home-project-card.world-card--no-safe-road img,
.home-project-card.world-card--pactsmiths img {
  object-fit: contain;
  padding: 0.25rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--game-accent-rgb),0.13), transparent 46%),
    #030303;
}

.home-project-card > div {
  padding: 0.3rem 0.2rem 0.2rem;
  display: flex;
  flex-direction: column;
}

.home-project-card h3,
.studio-route-card h3,
.studio-pillar-card h3 {
  margin-bottom: 0.45rem;
}

.home-project-card .text-link {
  margin-top: auto;
  color: var(--game-accent);
}

.world-card--wounded-roads,
.game-card--wounded-roads {
  --game-accent: #b12b24;
  --game-accent-rgb: 177, 43, 36;
}
.world-card--alberenar-board,
.game-card--alberenar-board {
  --game-accent: #0ea98a;
  --game-accent-rgb: 14, 169, 138;
}
.world-card--pactsmiths,
.game-card--pactsmiths {
  --game-accent: #f0b21f;
  --game-accent-rgb: 240, 178, 31;
}
.world-card--no-safe-road,
.game-card--no-safe-road {
  --game-accent: #aeb8bb;
  --game-accent-rgb: 174, 184, 187;
}
.world-card--soundtracks,
.game-card--soundtracks {
  --game-accent: #43d7c7;
  --game-accent-rgb: 67, 215, 199;
}
.world-card--coming-soon,
.game-card--coming-soon {
  --game-accent: #cdd8e8;
  --game-accent-rgb: 205, 216, 232;
}

.studio-pillars-section {
  background:
    linear-gradient(to bottom, rgba(13,13,13,0), rgba(232,93,4,0.035), rgba(13,13,13,0)),
    url('../images/background_texture.webp') repeat;
  background-size: auto, 600px 600px;
}

.studio-pillar-card {
  min-height: 210px;
  --game-accent: #e8a83a;
  --game-accent-rgb: 232, 168, 58;
}

.feature-strip--home {
  padding-top: 1rem;
}

.feature-strip--home .feature-strip-item {
  color: var(--text-muted);
}

.feature-strip--home .feature-strip-item:hover {
  color: var(--secondary-color);
  border-color: rgba(255,186,8,0.36);
  box-shadow: 0 0 22px rgba(232,93,4,0.14);
}

.newsletter-section--home {
  padding-top: clamp(3.5rem, 6vw, 5rem) !important;
}

@media (min-width: 1181px) and (max-width: 1366px) {
  .home-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-content--home-refined h1 {
    font-size: clamp(3rem, 6vw, 5rem) !important;
  }
}

@media (max-width: 980px) {
  .studio-identity-panel--home,
  .home-project-card {
    grid-template-columns: 1fr;
  }
  .home-project-card img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .home-project-card.world-card--wounded-roads img,
  .home-project-card.world-card--no-safe-road img,
  .home-project-card.world-card--pactsmiths img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 640px) {
  .hero-content--home-refined {
    padding: 1.15rem !important;
    border-radius: 18px;
  }
  .hero-content--home-refined .hero-brand-logo {
    width: 104px;
  }
  .hero-content--home-refined h1 {
    font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
  }
  .studio-route-card,
  .studio-pillar-card,
  .home-project-card {
    padding: 1.1rem;
  }
}


/* Homepage guided-entry refinement: Home guides, Games catalogues, About explains. */
.home-project-section--featured {
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.home-project-grid--featured {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  max-width: 1240px;
}

.section-action-row {
  width: min(1240px, 100%);
  margin: clamp(1.7rem, 3vw, 2.2rem) auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.forge-latest-section {
  padding-top: clamp(3.8rem, 7vw, 6rem);
  padding-bottom: clamp(3.8rem, 7vw, 6rem);
  background:
    radial-gradient(circle at 18% 15%, rgba(255,186,8,0.055), transparent 34%),
    linear-gradient(to bottom, rgba(13,13,13,0), rgba(255,255,255,0.025), rgba(13,13,13,0));
}

.forge-latest-grid {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 1.25rem;
}

.forge-latest-card {
  --game-accent: var(--primary-color);
  --game-accent-rgb: 232, 93, 4;
  position: relative;
  min-height: 250px;
  padding: 1.35rem;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--game-accent-rgb),0.12), transparent 36%),
    linear-gradient(145deg, rgba(20,20,20,0.96), rgba(8,8,8,0.94));
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 4px solid rgba(var(--game-accent-rgb), 0.70);
  border-bottom: 3px solid rgba(var(--game-accent-rgb), 0.12);
  box-shadow: 0 12px 34px rgba(0,0,0,0.42);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.forge-latest-card:hover {
  transform: translateY(-9px);
  border-left-color: var(--game-accent);
  border-bottom-color: var(--game-accent);
  box-shadow:
    0 0 0 1px rgba(var(--game-accent-rgb), 0.30),
    0 18px 48px rgba(var(--game-accent-rgb), 0.18),
    0 12px 30px rgba(0,0,0,0.62);
}

.forge-latest-card p {
  color: var(--text-muted);
}

.forge-latest-card .text-link {
  margin-top: auto;
  color: var(--game-accent);
}

.project-placeholder-section {
  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

.project-placeholder-panel {
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: clamp(1.4rem, 3vw, 2.3rem);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--game-accent-rgb, 232, 93, 4),0.12), transparent 38%),
    linear-gradient(145deg, rgba(20,20,20,0.96), rgba(8,8,8,0.94));
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid rgba(var(--game-accent-rgb, 232, 93, 4),0.75);
  box-shadow: 0 16px 48px rgba(0,0,0,0.46);
}

.project-placeholder-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.35rem;
}

@media (max-width: 640px) {
  .section-action-row {
    justify-content: stretch;
  }
  .section-action-row .btn,
  .project-placeholder-actions .btn {
    width: 100%;
    text-align: center;
  }
}


/* Homepage simplification: fewer repeated routes, pillars are not navigation. */
.studio-routes-section--focused {
  padding-top: clamp(3.4rem, 6vw, 5rem);
  padding-bottom: clamp(3.4rem, 6vw, 5rem);
}

.studio-route-grid--focused {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.studio-pillar-card {
  cursor: default;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.studio-pillar-card:hover {
  transform: none;
  border-left-color: rgba(var(--game-accent-rgb, 232, 168, 58), 0.70);
  border-bottom-color: rgba(var(--game-accent-rgb, 232, 168, 58), 0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.42);
}

@media (max-width: 1180px) {
  .studio-route-grid--focused {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .studio-route-grid--focused {
    grid-template-columns: 1fr;
  }
}

/* Lore archive link pass: every visible archive entry now has a destination. */
.archive-entry-actions {
  margin-top: 0.9rem;
}
.archive-entry-actions .btn-small {
  padding: 0.52rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.lore-placeholder-panel .lore-purpose-list {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
}
.lore-placeholder-panel .project-placeholder-actions .btn-secondary {
  background: rgba(var(--game-accent-rgb, 232, 93, 4), 0.12);
  color: var(--secondary-color);
  border: 1px solid rgba(var(--game-accent-rgb, 232, 93, 4), 0.35);
}

/* Lore page refinement: project filters, brighter banner art, and card-grid archive layout. */
.lore-page .page-hero--lore::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(13,13,13,0.42) 76%, rgba(13,13,13,0.82)),
    url('../images/hero-lore.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center 54% !important;
}

.lore-page .page-hero-content {
  max-width: 1040px;
  padding: clamp(1.2rem, 2.6vw, 2.2rem);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(0,0,0,0.48), rgba(0,0,0,0.22));
  border: 1px solid rgba(255,186,8,0.18);
  box-shadow: 0 18px 58px rgba(0,0,0,0.42), inset 0 0 55px rgba(255,186,8,0.035);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lore-page .page-hero-content p:not(.eyebrow) {
  color: rgba(240, 232, 215, 0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.72);
}

.lore-filter-row {
  max-width: 1120px;
  margin-bottom: 2.25rem;
}

.lore-filter-row .tag-filter {
  min-width: 118px;
}

.lore-page .archive-list {
  max-width: 1220px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.35rem;
}

.lore-page .archive-entry {
  min-height: 250px;
  align-content: start;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--section-accent-rgb, 232, 93, 4), 0.13), transparent 38%),
    linear-gradient(145deg, rgba(20,20,20,0.96), rgba(8,8,8,0.94));
}

.lore-page .archive-entry > div:last-child {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.lore-page .archive-entry-actions {
  margin-top: auto;
  padding-top: 1rem;
}

.lore-page .archive-entry .btn:not(.btn-disabled) {
  background: rgba(var(--section-accent-rgb, 232, 93, 4), 0.12);
  color: var(--secondary-color);
  border: 1px solid rgba(var(--section-accent-rgb, 232, 93, 4), 0.50);
}

.lore-page .archive-entry .btn:not(.btn-disabled):hover {
  background: rgba(var(--section-accent-rgb, 232, 93, 4), 0.20);
  border-color: rgba(var(--section-accent-rgb, 232, 93, 4), 0.82);
}

.archive-entry[data-tags~="global-mandate"] {
  --section-accent: #d86b2a;
  --section-accent-rgb: 216, 107, 42;
}
.archive-entry[data-tags~="wounded-roads"] {
  --section-accent: #b12b24;
  --section-accent-rgb: 177, 43, 36;
}
.archive-entry[data-tags~="alberenar-board-game"] {
  --section-accent: #d86b2a;
  --section-accent-rgb: 216, 107, 42;
}
.archive-entry[data-tags~="pactsmiths"] {
  --section-accent: #f0b21f;
  --section-accent-rgb: 240, 178, 31;
}
.archive-entry[data-tags~="no-safe-road"] {
  --section-accent: #aeb8bb;
  --section-accent-rgb: 174, 184, 187;
}
.archive-entry[data-tags~="soundtracks"] {
  --section-accent: #43d7c7;
  --section-accent-rgb: 67, 215, 199;
}
.archive-entry[data-tags~="coming-soon"] {
  --section-accent: #cdd8e8;
  --section-accent-rgb: 205, 216, 232;
}

@media (max-width: 760px) {
  .lore-page .archive-list {
    grid-template-columns: 1fr;
  }
  .lore-page .archive-entry {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .lore-filter-row .tag-filter {
    min-width: auto;
    flex: 1 1 140px;
  }
}


/* Lore header refinement: keep the clear image treatment while using the shared page-banner height. */
.lore-page .page-hero--lore {
  min-height: clamp(540px, 50svh, 720px) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.2rem, 9svh, 7.2rem) !important;
}

.lore-page .page-hero--lore::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(13,13,13,0.28) 72%, rgba(13,13,13,0.82)),
    url('../images/hero-lore.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center !important;
}

.lore-page .page-hero-content {
  max-width: 980px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lore-page .page-hero h1,
.lore-page .page-hero p,
.lore-page .page-hero .eyebrow {
  text-shadow: 0 3px 18px rgba(0,0,0,0.68) !important;
}

@media (max-width: 700px) {
  .lore-page .page-hero--lore {
    min-height: clamp(440px, 54svh, 560px) !important;
    padding-top: calc(var(--nav-height) + 2.2rem) !important;
    padding-bottom: 4.2rem !important;
  }

  .lore-page .page-hero--lore::before {
    background-position: center center !important;
  }
}

.lore-page .page-hero--lore::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.04) 0%,
      rgba(13,13,13,0.16) 38%,
      rgba(13,13,13,0.34) 64%,
      rgba(13,13,13,0.60) 82%,
      rgba(13,13,13,0.74) 100%),
    url('../images/hero-lore.webp') !important;
}

.lore-page .page-hero::after {
  height: clamp(220px, 34svh, 390px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.06) 20%,
      rgba(13,13,13,0.18) 42%,
      rgba(13,13,13,0.42) 66%,
      rgba(13,13,13,0.76) 86%,
      rgba(13,13,13,0.96) 100%) !important;
}

/* Lore hero polish: cleaner image blend, later lower fade, and clearer eyebrow text. */
.lore-page .page-hero--lore::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.62) 0%,
      rgba(0,0,0,0.22) 13%,
      rgba(0,0,0,0.04) 42%,
      rgba(13,13,13,0.18) 78%,
      rgba(13,13,13,0.40) 100%),
    url('../images/hero-lore.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center !important;
}

.lore-page .page-hero::after {
  height: clamp(145px, 22svh, 240px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.04) 26%,
      rgba(13,13,13,0.14) 48%,
      rgba(13,13,13,0.42) 76%,
      rgba(13,13,13,0.88) 100%) !important;
}

.lore-page .page-hero .eyebrow {
  color: #fff6d2 !important;
  opacity: 1 !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.95),
    0 0 14px rgba(218,143,36,0.42) !important;
}

.lore-page .page-hero h1,
.lore-page .page-hero p:not(.eyebrow) {
  text-shadow:
    0 3px 16px rgba(0,0,0,0.88),
    0 0 22px rgba(0,0,0,0.45) !important;
}

/* Lore hero refinement: softer top join, milder bottom fade, and plain white eyebrow text. */
.lore-page .page-hero--lore::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.42) 10%,
      rgba(0,0,0,0.10) 24%,
      rgba(0,0,0,0.02) 44%,
      rgba(13,13,13,0.10) 78%,
      rgba(13,13,13,0.28) 100%),
    url('../images/hero-lore.webp') !important;
}

.lore-page .page-hero::after {
  height: clamp(120px, 18svh, 190px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.03) 30%,
      rgba(13,13,13,0.09) 55%,
      rgba(13,13,13,0.22) 78%,
      rgba(13,13,13,0.58) 100%) !important;
}

.lore-page .page-hero .eyebrow {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.92) !important;
}

.lore-page .page-hero--lore::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.34) 9%,
      rgba(0,0,0,0.08) 24%,
      rgba(0,0,0,0.02) 52%,
      rgba(13,13,13,0.08) 84%,
      rgba(13,13,13,0.18) 100%),
    url('../images/hero-lore.webp') !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.lore-page .page-hero::after {
  height: clamp(210px, 30svh, 330px) !important;
  bottom: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0) 38%,
      rgba(13,13,13,0.16) 63%,
      rgba(13,13,13,0.48) 84%,
      rgba(13,13,13,0.96) 100%) !important;
}

.lore-page .page-hero-content .eyebrow,
.lore-page .page-hero-content p,
.lore-page .page-hero-content p:not(.eyebrow) {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.95),
    0 4px 18px rgba(0,0,0,0.72) !important;
}

.lore-page .page-hero-content .eyebrow {
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}


.dice-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.dice-action-row .btn {
  flex: 1 1 150px;
  justify-content: center;
}

.lore-page .page-hero--lore {
  min-height: clamp(540px, 50svh, 720px) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.2rem, 9svh, 7.2rem) !important;
  background-color: #0d0d0d !important;
}

.lore-page .page-hero--lore::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.66) 0%,
      rgba(0,0,0,0.30) 10%,
      rgba(0,0,0,0.08) 24%,
      rgba(0,0,0,0.02) 58%,
      rgba(13,13,13,0.08) 88%,
      rgba(13,13,13,0.18) 100%),
    url('../images/hero-lore.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.lore-page .page-hero::after {
  height: clamp(130px, 19svh, 220px) !important;
  bottom: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0) 42%,
      rgba(13,13,13,0.10) 66%,
      rgba(13,13,13,0.34) 86%,
      rgba(13,13,13,0.82) 100%) !important;
}

.lore-page .page-hero + section {
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.82) 0%,
      rgba(13,13,13,0.42) 90px,
      rgba(13,13,13,0.08) 230px,
      rgba(13,13,13,0) 360px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

.lore-page .page-hero-content .eyebrow,
.lore-page .page-hero-content p,
.lore-page .page-hero-content p:not(.eyebrow) {
  color: #ffffff !important;
  opacity: 1 !important;
  font-family: inherit !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.96),
    0 4px 18px rgba(0,0,0,0.76) !important;
}

.lore-page .page-hero-content .eyebrow {
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}


/* Project-specific game-page header artwork. */
.page-hero--alberenar-board-game::before,
.page-hero--wounded-roads::before,
.page-hero--global-mandate::before,
.page-hero--pactsmiths::before,
.page-hero--no-safe-road::before,
.page-hero--no-safe-road::before {
  background-image:
    radial-gradient(circle at 50% 45%, rgba(129,149,141,0.10), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(13,13,13,0.82)),
    url('../images/no-safe-road-banner.webp') !important;
  background-position: center 52% !important;
}

.page-hero--wheel-of-time::before {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center 54% !important;
}
.page-hero--alberenar-board-game::before {
  background-image:
    radial-gradient(circle at 52% 42%, rgba(14,169,138,0.14), transparent 34%),
    linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(13,13,13,0.84)),
    url('../images/alberenar-board-game-banner.webp') !important;
}
.page-hero--wounded-roads::before {
  background-image:
    radial-gradient(circle at 50% 42%, rgba(143,92,255,0.11), transparent 34%),
    linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(13,13,13,0.84)),
    url('../images/wounded-roads-banner.webp') !important;
  background-position: center 57% !important;
}
.page-hero--global-mandate::before {
  background-image:
    radial-gradient(circle at 50% 45%, rgba(216,107,42,0.11), transparent 38%),
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(13,13,13,0.82)),
    url('../images/global-mandate-banner.webp') !important;
  background-position: center 50% !important;
}
.page-hero--pactsmiths::before {
  background-image:
    radial-gradient(circle at 52% 42%, rgba(244,166,42,0.18), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(13,13,13,0.74)),
    url('../images/pactsmiths-banner.webp') !important;
  background-position: center 45% !important;
}
.page-hero--no-safe-road::before {
  background-image:
    radial-gradient(circle at 50% 45%, rgba(129,149,141,0.10), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(13,13,13,0.82)),
    url('../images/no-safe-road-banner.webp') !important;
  background-position: center 52% !important;
}

.page-hero--wheel-of-time::before {
  background-image:
    radial-gradient(circle at 50% 40%, rgba(205,216,232,0.12), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(13,13,13,0.84)),
    url('../images/wheel-of-time-banner.webp') !important;
  background-position: center 54% !important;
}

@media (max-width: 760px) {
  .page-hero--alberenar-board-game::before,
  .page-hero--wounded-roads::before,
  .page-hero--global-mandate::before,
  .page-hero--pactsmiths::before,
  .page-hero--no-safe-road::before,
  .page-hero--wheel-of-time::before {
    background-size: cover !important;
    background-position: center center !important;
  }
}


/* v52 corrective pass: route prompts, pillar links, No Safe Road colour separation, and About logo blending. */
.studio-route-card,
.about-page .service-card {
  display: flex;
  flex-direction: column;
}

.studio-route-card p,
.about-page .service-card p {
  margin-bottom: 1.25rem;
}

.route-card-button,
.pillar-card-button {
  align-self: center;
  margin-top: auto;
  text-align: center;
  min-width: 138px;
}

.studio-route-card .route-card-button {
  pointer-events: none;
}

.about-page .service-card .pillar-card-button {
  text-decoration: none;
  margin-top: auto;
}

.world-card--no-safe-road,
.game-card--no-safe-road,
.no-safe-road-page {
  --game-accent: #7f8f5a;
  --game-accent-rgb: 127, 143, 90;
}

.archive-entry[data-tags~="no-safe-road"] {
  --section-accent: #7f8f5a;
  --section-accent-rgb: 127, 143, 90;
}

.forum-card--solo-mission {
  --forum-accent: #7f8f5a;
  --forum-accent-rgb: 127, 143, 90;
}

.page-hero--no-safe-road::before {
  background-image:
    radial-gradient(circle at 50% 45%, rgba(127,143,90,0.13), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(13,13,13,0.82)),
    url('../images/no-safe-road-banner.webp') !important;
}

.page-hero--wheel-of-time::before {
  background-image:
    radial-gradient(circle at 50% 40%, rgba(205,216,232,0.12), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(13,13,13,0.84)),
    url('../images/wheel-of-time-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.about-page .page-hero--about {
  overflow: hidden;
}

.about-page .page-hero--about::before {
  background-size: min(112vw, 1780px) auto !important;
  background-position: center top !important;
  -webkit-mask-image: radial-gradient(ellipse at 50% 12%, #000 0%, #000 48%, rgba(0,0,0,0.82) 63%, rgba(0,0,0,0.32) 80%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 12%, #000 0%, #000 48%, rgba(0,0,0,0.82) 63%, rgba(0,0,0,0.32) 80%, transparent 100%);
}

.about-page .page-hero--about::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 42%, rgba(13,13,13,0.28) 74%, rgba(13,13,13,0.76) 100%),
    linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.18) 68%, rgba(13,13,13,0.86) 100%);
  z-index: 0;
}

.about-page .page-hero-content--under-logo {
  position: relative;
  z-index: 1;
}

.pillar-placeholder-page .page-hero--about-pillar {
  min-height: clamp(430px, 48svh, 600px);
}

@media (max-width: 1180px) {
  .about-page .page-hero--about::before {
    background-size: min(132vw, 1600px) auto !important;
  }
}

@media (max-width: 760px) {
  .about-page .page-hero--about::before {
    background-size: 214vw auto !important;
  }
}


/* v53 corrective pass: restore coherent card buttons, distinct No Safe Road colour, fixed Wheel of Time banner, download placeholders, forum colour split, and About logo blend. */
:root {
  --no-safe-road-accent: #6f8fa6;
  --no-safe-road-accent-rgb: 111, 143, 166;
  --board-games-accent: #0ea98a;
  --board-games-accent-rgb: 14, 169, 138;
}

.world-card--no-safe-road,
.game-card--no-safe-road,
.no-safe-road-page {
  --game-accent: var(--no-safe-road-accent) !important;
  --game-accent-rgb: var(--no-safe-road-accent-rgb) !important;
}
.archive-entry[data-tags~="no-safe-road"] {
  --section-accent: var(--no-safe-road-accent) !important;
  --section-accent-rgb: var(--no-safe-road-accent-rgb) !important;
}
.forum-card--solo-mission {
  --forum-accent: var(--no-safe-road-accent) !important;
  --forum-accent-rgb: var(--no-safe-road-accent-rgb) !important;
}
.page-hero--no-safe-road::before {
  background-image:
    radial-gradient(circle at 50% 45%, rgba(var(--no-safe-road-accent-rgb),0.13), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(13,13,13,0.82)),
    url('../images/no-safe-road-banner.webp') !important;
}

/* Wheel of Time remains a private/noindex placeholder, but the supplied page banner is now forced onto the page header. */
.wheel-of-time-page .page-hero--wheel-of-time::before,
.page-hero--wheel-of-time::before {
  background-image:
    radial-gradient(circle at 50% 40%, rgba(205,216,232,0.12), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(13,13,13,0.80)),
    url('../images/wheel-of-time-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center 48% !important;
  background-repeat: no-repeat !important;
}

/* Homepage card buttons now match the Games catalogue button language instead of flat orange buttons. */
.home-project-card,
.forge-latest-card,
.studio-route-card,
.about-page .service-card {
  display: flex !important;
  flex-direction: column !important;
}
.home-project-card > div,
.forge-latest-card {
  display: flex;
  flex-direction: column;
}
.home-project-card .card-link-button,
.forge-latest-card .card-link-button,
.studio-route-card .route-card-button,
.about-page .service-card .pillar-card-button {
  align-self: center;
  margin-top: auto;
  min-width: 138px;
  text-align: center;
  background: rgba(0,0,0,0.38) !important;
  color: var(--text-light) !important;
  border: 1px solid rgba(var(--game-accent-rgb, 232, 93, 4), 0.78) !important;
  box-shadow: 0 0 18px rgba(var(--game-accent-rgb, 232, 93, 4), 0.14) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}
.studio-route-card .route-card-button,
.about-page .service-card .pillar-card-button {
  --game-accent-rgb: 232, 168, 58;
}
.home-project-card:hover .card-link-button,
.forge-latest-card:hover .card-link-button,
.studio-route-card:hover .route-card-button,
.about-page .service-card:hover .pillar-card-button {
  background: rgba(var(--game-accent-rgb, 232, 93, 4), 0.18) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(var(--game-accent-rgb, 232, 93, 4), 0.28), 0 8px 20px rgba(0,0,0,0.52) !important;
}
.studio-route-card .route-card-button { pointer-events: none; }

/* Forum category split: Board Games no longer shares the General Forge orange. */
.forum-card--board-games {
  --forum-accent: var(--board-games-accent) !important;
  --forum-accent-rgb: var(--board-games-accent-rgb) !important;
}

/* About Us hero: use the rebuilt blended logo image; keep the logo bright and fade only its edges. */
.about-page .page-hero--about {
  min-height: clamp(700px, 78svh, 860px) !important;
  padding-top: calc(var(--nav-height) + 2.4rem) !important;
  overflow: hidden !important;
}
.about-page .page-hero--about::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.02) 42%, rgba(13,13,13,0.30) 74%, rgba(13,13,13,0.82) 100%),
    url('../images/hero-about.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center top !important;
  background-repeat: no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
}
.about-page .page-hero--about::after {
  display: none !important;
}
.about-page .page-hero-content--under-logo {
  position: relative !important;
  z-index: 1 !important;
  margin-top: clamp(360px, 42svh, 500px) !important;
}
@media (max-width: 760px) {
  .about-page .page-hero--about {
    min-height: 760px !important;
  }
  .about-page .page-hero--about::before {
    background-size: 100% 100%, auto 52% !important;
    background-position: center center, center top !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: 360px !important;
  }
}


/* v54 corrective pass: project-colour inheritance, Wheel of Time card/page banner, About hero logo tuning. */
:root {
  --wheel-of-time-accent: #d7b46a;
  --wheel-of-time-accent-rgb: 215, 180, 106;
}

/* Restore inherited project colours on homepage cards after the generic card rules. */
.home-project-card.world-card--alberenar,
.forge-latest-card.world-card--alberenar { --game-accent:#8f5cff !important; --game-accent-rgb:143,92,255 !important; }
.home-project-card.world-card--resonance,
.forge-latest-card.world-card--resonance { --game-accent:#2196f3 !important; --game-accent-rgb:33,150,243 !important; }
.home-project-card.world-card--global,
.forge-latest-card.world-card--global { --game-accent:#d19a3c !important; --game-accent-rgb:209,154,60 !important; }
.home-project-card.world-card--wounded-roads,
.forge-latest-card.world-card--wounded-roads { --game-accent:#b12b24 !important; --game-accent-rgb:177,43,36 !important; }
.home-project-card.world-card--no-safe-road,
.forge-latest-card.world-card--no-safe-road { --game-accent:var(--no-safe-road-accent) !important; --game-accent-rgb:var(--no-safe-road-accent-rgb) !important; }
.home-project-card.world-card--soundtracks,
.forge-latest-card.world-card--soundtracks { --game-accent:#43d7c7 !important; --game-accent-rgb:67,215,199 !important; }

/* Keep the button treatment coherent across these home sections, using each card's inherited colour. */
.home-project-card .card-link-button,
.forge-latest-card .card-link-button {
  border-color: rgba(var(--game-accent-rgb,232,93,4),0.82) !important;
  box-shadow: 0 0 18px rgba(var(--game-accent-rgb,232,93,4),0.16) !important;
}
.home-project-card:hover .card-link-button,
.forge-latest-card:hover .card-link-button {
  background: rgba(var(--game-accent-rgb,232,93,4),0.20) !important;
  box-shadow: 0 10px 28px rgba(var(--game-accent-rgb,232,93,4),0.30), 0 8px 20px rgba(0,0,0,0.52) !important;
}

/* Wheel of Time: fantasy RPG placeholder, not audio support. */
.game-card--wheel-of-time,
.world-card--wheel-of-time,
.wheel-of-time-page {
  --game-accent: var(--wheel-of-time-accent) !important;
  --game-accent-rgb: var(--wheel-of-time-accent-rgb) !important;
}
.game-card--wheel-of-time img {
  object-position: center center;
}
.wheel-of-time-page .page-hero--wheel-of-time::before,
.page-hero--wheel-of-time::before {
  background-image:
    radial-gradient(circle at 50% 40%, rgba(var(--wheel-of-time-accent-rgb),0.13), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.14), rgba(13,13,13,0.80)),
    url('../images/wheel-of-time-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center 50% !important;
  background-repeat: no-repeat !important;
}

/* About Us hero: tuned logo position and brightness through the rebuilt image. */
.about-page .page-hero--about {
  min-height: clamp(690px, 77svh, 840px) !important;
  padding-top: calc(var(--nav-height) + 2.0rem) !important;
}
.about-page .page-hero--about::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.04) 54%, rgba(13,13,13,0.34) 78%, rgba(13,13,13,0.86) 100%),
    url('../images/hero-about.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center top !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  opacity: 1 !important;
}
.about-page .page-hero-content--under-logo {
  margin-top: clamp(350px, 40svh, 480px) !important;
}
@media (max-width: 760px) {
  .about-page .page-hero--about { min-height: 740px !important; }
  .about-page .page-hero--about::before {
    background-size: 100% 100%, auto 50% !important;
    background-position: center center, center top !important;
  }
  .about-page .page-hero-content--under-logo { margin-top: 340px !important; }
}


/* v55 corrective pass: resolve Wheel of Time/Soundtracks image mix-up, align Lore buttons, stabilise Home colours, and move About logo upward. */
/* Home page: use one consistent studio-orange treatment for Featured Projects and Latest from the Forge. */
.home-project-section--featured .home-project-card,
.forge-latest-section .forge-latest-card {
  --game-accent: var(--primary-color) !important;
  --game-accent-rgb: 232, 93, 4 !important;
}
.home-project-section--featured .home-project-card .card-link-button,
.forge-latest-section .forge-latest-card .card-link-button {
  border-color: rgba(232,93,4,0.82) !important;
  box-shadow: 0 0 18px rgba(232,93,4,0.16) !important;
}
.home-project-section--featured .home-project-card:hover .card-link-button,
.forge-latest-section .forge-latest-card:hover .card-link-button {
  background: rgba(232,93,4,0.20) !important;
  box-shadow: 0 10px 28px rgba(232,93,4,0.30), 0 8px 20px rgba(0,0,0,0.52) !important;
}
/* Soundtracks now has its own music/atmosphere artwork rather than the Wheel of Time placeholder art. */
.page-hero--soundtracks::before {
  background-image:
    radial-gradient(circle at 50% 40%, rgba(67,215,199,0.12), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(13,13,13,0.82)),
    url('../images/soundtracks-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center 50% !important;
  background-repeat: no-repeat !important;
}
.game-card--soundtracks img {
  object-position: center center;
}
/* Lore archive: keep Read More buttons lined up at the bottom of each card. */
.lore-page .archive-entry {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
}
.lore-page .archive-entry > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
}
.lore-page .archive-entry-actions {
  margin-top: auto !important;
  padding-top: 1.15rem !important;
}
/* About Us: hero logo has been rebuilt into the source image and moved upward; keep the text block in place. */
.about-page .page-hero--about::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.03) 52%, rgba(13,13,13,0.34) 78%, rgba(13,13,13,0.86) 100%),
    url('../images/hero-about.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center top !important;
}
.about-page .page-hero-content--under-logo {
  margin-top: clamp(350px, 40svh, 480px) !important;
}
@media (max-width: 760px) {
  .about-page .page-hero--about::before {
    background-size: 100% 100%, auto 50% !important;
    background-position: center center, center top !important;
  }
}

/* v56 correction: supplied Games-card artwork, Coming Soon page banner, aligned Games buttons, and About logo nudge. */
.game-card--soundtracks > img,
.game-card--coming-soon > img {
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.45rem !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--game-accent-rgb),0.12), transparent 38%),
    #050505 !important;
}
.game-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.game-card-body .btn {
  margin-top: auto !important;
  align-self: flex-start !important;
}
.page-hero--coming-soon::before {
  background-image:
    radial-gradient(circle at 50% 40%, rgba(232,93,4,0.14), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(13,13,13,0.82)),
    url('../images/coming-soon-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center 50% !important;
  background-repeat: no-repeat !important;
}
/* Move only the baked-in About logo artwork upward a little more; the text block below remains fixed. */
.about-page .page-hero--about::before {
  background-position: center center, center -28px !important;
}
@media (max-width: 760px) {
  .about-page .page-hero--about::before {
    background-position: center center, center -16px !important;
  }
}


/* v57: consistency pass for home buttons, Games-card media frames, Coming Soon hero position, Lore actions, and Forum cards. */
/* Home: featured, route, and latest cards now use one stable button label and styling. */
.home-project-section--featured .card-link-button,
.studio-route-card .route-card-button,
.forge-latest-section .card-link-button {
  min-width: 132px !important;
  text-align: center !important;
  justify-content: center !important;
}

/* Games catalogue: keep every card artwork area the same size, including Soundtracks and Coming Soon. */
.game-card > img,
.game-card--soundtracks > img,
.game-card--coming-soon > img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.45rem !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--game-accent-rgb,232,93,4),0.12), transparent 38%),
    #050505 !important;
}

/* Coming Soon page: sit the hero safely below the fixed navigation instead of sliding under it. */
.coming-soon-page .page-hero--coming-soon {
  margin-top: var(--nav-height) !important;
  min-height: clamp(520px, 58vh, 660px) !important;
  padding-top: clamp(3rem, 5vw, 4.8rem) !important;
}
.coming-soon-page .page-hero--coming-soon::before {
  background-position: center center, center center, center 56% !important;
}

/* Lore archive: standardise card height and pin each Read More action to the same lower position. */
.lore-page .archive-list {
  align-items: stretch !important;
}
.lore-page .archive-entry {
  min-height: 322px !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
}
.lore-page .archive-entry > div:last-child {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.lore-page .archive-entry-actions {
  margin-top: auto !important;
  padding-top: 1.15rem !important;
}
.lore-page .archive-entry-actions .btn {
  min-width: 118px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Forum cards: make the action buttons match the wider site button language and align them. */
.forum-grid {
  align-items: stretch !important;
}
.forum-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 260px !important;
}
.forum-card p {
  flex: 1 1 auto !important;
}
.forum-status {
  margin-top: auto !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 118px !important;
  min-height: 40px !important;
  padding: 0.68rem 1.05rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--section-accent-rgb,232,93,4),0.62) !important;
  background: rgba(var(--section-accent-rgb,232,93,4),0.10) !important;
  color: var(--text-light) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 18px rgba(var(--section-accent-rgb,232,93,4),0.12) !important;
}
.forum-card:hover .forum-status {
  background: rgba(var(--section-accent-rgb,232,93,4),0.20) !important;
  border-color: rgba(var(--section-accent-rgb,232,93,4),0.86) !important;
  box-shadow: 0 10px 28px rgba(var(--section-accent-rgb,232,93,4),0.28), 0 8px 20px rgba(0,0,0,0.52) !important;
}


/* v58 correction: Home button consistency, Games card image frames, Coming Soon hero crop, Lore button alignment, and About logo nudge. */
/* Home: keep the catalogue call-to-action descriptive, but make Featured/Latest buttons match Choose Your Route. */
.home-project-section--featured .home-project-card .card-link-button,
.forge-latest-section .forge-latest-card .card-link-button {
  --game-accent-rgb: 232, 168, 58 !important;
  align-self: center !important;
  min-width: 132px !important;
  text-align: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.38) !important;
  color: var(--text-light) !important;
  border: 1px solid rgba(232,168,58,0.78) !important;
  box-shadow: 0 0 18px rgba(232,168,58,0.14) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}
.home-project-section--featured .home-project-card:hover .card-link-button,
.forge-latest-section .forge-latest-card:hover .card-link-button {
  background: rgba(232,168,58,0.18) !important;
  border-color: rgba(232,168,58,0.92) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(232,168,58,0.28), 0 8px 20px rgba(0,0,0,0.52) !important;
}

/* Games catalogue: all project artwork frames now occupy the same visible dimensions. */
.game-card > img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  display: block !important;
  border-radius: 0 !important;
}
.game-card--pactsmiths > img,
.game-card--no-safe-road > img {
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  background: #050505 !important;
}
.game-card--soundtracks > img,
.game-card--coming-soon > img {
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  background: #050505 !important;
}

/* Coming Soon linked page: show the top of the supplied banner rather than cropping it away. */
.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center top !important;
}

/* Lore archive: normalise text block heights so every Read More button sits in the same lower band. */
.lore-page .archive-list {
  align-items: stretch !important;
}
.lore-page .archive-entry {
  min-height: 338px !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
}
.lore-page .archive-entry > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
}
.lore-page .archive-entry .card-kicker {
  min-height: 3.2em !important;
  margin-bottom: 0.45rem !important;
}
.lore-page .archive-entry h3 {
  min-height: 3.0em !important;
  margin-bottom: 0.45rem !important;
}
.lore-page .archive-entry > div:last-child > p:not(.card-kicker) {
  min-height: 7.2em !important;
  margin-bottom: 0 !important;
}
.lore-page .archive-entry-actions {
  margin-top: auto !important;
  padding-top: 1.05rem !important;
}
.lore-page .archive-entry-actions .btn {
  min-width: 118px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* About Us: nudge the baked-in logo slightly further upward without moving the text content. */
.about-page .page-hero--about::before {
  background-position: center center, center -46px !important;
}
@media (max-width: 760px) {
  .about-page .page-hero--about::before {
    background-position: center center, center -24px !important;
  }
  .lore-page .archive-entry .card-kicker,
  .lore-page .archive-entry h3,
  .lore-page .archive-entry > div:last-child > p:not(.card-kicker) {
    min-height: 0 !important;
  }
}

/* v59 correction: restore Games-card artwork to one consistent visible frame, refine Coming Soon hero, brighten Downloads anvil, and lock Lore button rows. */
.game-card-grid .game-card > img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.45rem !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--game-accent-rgb,232,93,4),0.12), transparent 38%),
    #050505 !important;
  border-radius: 0 !important;
}
.game-card-grid .game-card--pactsmiths > img,
.game-card-grid .game-card--no-safe-road > img,
.game-card-grid .game-card--soundtracks > img,
.game-card-grid .game-card--coming-soon > img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.45rem !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--game-accent-rgb,232,93,4),0.12), transparent 38%),
    #050505 !important;
}

.coming-soon-page .page-hero--coming-soon {
  margin-top: 0 !important;
  min-height: clamp(500px, 56vh, 640px) !important;
  padding-top: calc(var(--nav-height) + clamp(2.4rem, 4.5vw, 4.2rem)) !important;
}
.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  background-image:
    radial-gradient(circle at 50% 42%, rgba(232,93,4,0.12), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(13,13,13,0.62)),
    url('../images/coming-soon-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center center !important;
}
.coming-soon-page .page-hero--coming-soon::after {
  height: 220px !important;
  background:
    linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.50) 55%, rgba(13,13,13,0.94) 100%) !important;
}

.page-hero--downloads::before {
  background-image:
    radial-gradient(circle at 50% 62%, rgba(255,186,8,0.14), transparent 28%),
    linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(13,13,13,0.72)),
    url('../images/banner-wide.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center center !important;
}

.lore-page .archive-list {
  align-items: stretch !important;
}
.lore-page .archive-entry {
  min-height: 360px !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
}
.lore-page .archive-entry > div:last-child {
  display: grid !important;
  grid-template-rows: 3.7em 4.8em minmax(7.8em, 1fr) 44px !important;
  row-gap: 0.45rem !important;
  height: 100% !important;
  min-height: 100% !important;
}
.lore-page .archive-entry .card-kicker,
.lore-page .archive-entry h3,
.lore-page .archive-entry > div:last-child > p:not(.card-kicker),
.lore-page .archive-entry-actions {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.lore-page .archive-entry-actions {
  align-self: end !important;
  padding-top: 0 !important;
}
.lore-page .archive-entry-actions .btn {
  min-width: 118px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 760px) {
  .lore-page .archive-entry > div:last-child {
    display: flex !important;
    flex-direction: column !important;
  }
  .lore-page .archive-entry-actions {
    margin-top: auto !important;
    padding-top: 1rem !important;
  }
}

/* v60 correction: keep the Coming Soon header safely below the fixed navigation and show the top of the banner artwork. */
.coming-soon-page .page-hero--coming-soon {
  margin-top: var(--nav-height) !important;
  min-height: clamp(540px, 58vh, 680px) !important;
  padding-top: clamp(2.4rem, 4.5vw, 4.2rem) !important;
  padding-bottom: clamp(4rem, 6vw, 5.5rem) !important;
}
.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  transform: none !important;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(232,93,4,0.12), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(13,13,13,0.62)),
    url('../images/coming-soon-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
@media (max-width: 760px) {
  .coming-soon-page .page-hero--coming-soon {
    margin-top: var(--nav-height) !important;
    min-height: 520px !important;
  }
}


/* v61 correction: Coming Soon header uses contained artwork so the full portal, aircraft, dragon, and summoning figure remain visible without cropping behind the fixed navigation. */
.coming-soon-page .page-hero--coming-soon {
  margin-top: 0 !important;
  min-height: clamp(620px, 72svh, 820px) !important;
  padding-top: calc(var(--nav-height) + clamp(2.8rem, 5vw, 4.6rem)) !important;
  padding-bottom: clamp(4.5rem, 7vw, 6.2rem) !important;
}
.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  top: var(--nav-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  background-color: #0d0d0d !important;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(232,93,4,0.10), transparent 38%),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.10) 42%, rgba(13,13,13,0.68) 100%),
    url('../images/coming-soon-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, contain !important;
  background-position: center center, center center, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
.coming-soon-page .page-hero--coming-soon::after {
  height: clamp(140px, 20svh, 230px) !important;
  background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.42) 58%, rgba(13,13,13,0.94) 100%) !important;
}
@media (max-width: 760px) {
  .coming-soon-page .page-hero--coming-soon {
    min-height: 560px !important;
    padding-top: calc(var(--nav-height) + 2.4rem) !important;
  }
}

/* v62 correction: Coming Soon and Lore headers now use wide-safe artwork crops.
   Coming Soon fills the same banner area as other pages without side borders, while the full portal/aircraft/dragon/figure composition remains visible.
   Lore uses a taller wide-safe derivative so the archive artwork does not lose its sides and blends more cleanly into the page texture. */
.coming-soon-page .page-hero--coming-soon {
  margin-top: 0 !important;
  min-height: clamp(540px, 58svh, 700px) !important;
  padding-top: clamp(3.4rem, 6svh, 5.2rem) !important;
  padding-bottom: clamp(5rem, 8svh, 6.8rem) !important;
  background-color: #0d0d0d !important;
}
.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  background-color: #0d0d0d !important;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(232,93,4,0.08), transparent 38%),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 42%, rgba(13,13,13,0.54) 100%),
    url('../images/coming-soon-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
.coming-soon-page .page-hero--coming-soon::after {
  height: clamp(160px, 22svh, 260px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.10) 32%,
      rgba(13,13,13,0.46) 70%,
      rgba(13,13,13,0.92) 100%) !important;
}

.lore-page .page-hero--lore {
  min-height: clamp(520px, 50svh, 680px) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5rem, 8svh, 6.8rem) !important;
  background-color: #0d0d0d !important;
}
.lore-page .page-hero--lore::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.34) 0%,
      rgba(0,0,0,0.10) 24%,
      rgba(0,0,0,0.02) 54%,
      rgba(13,13,13,0.12) 82%,
      rgba(13,13,13,0.34) 100%),
    url('../images/hero-lore.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.lore-page .page-hero::after {
  height: clamp(180px, 26svh, 300px) !important;
  bottom: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.04) 28%,
      rgba(13,13,13,0.16) 55%,
      rgba(13,13,13,0.48) 82%,
      rgba(13,13,13,0.94) 100%) !important;
}
.lore-page .page-hero + section {
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.94) 0%,
      rgba(13,13,13,0.58) 96px,
      rgba(13,13,13,0.18) 230px,
      rgba(13,13,13,0) 360px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

@media (max-width: 760px) {
  .coming-soon-page .page-hero--coming-soon {
    min-height: 520px !important;
    padding-top: 3rem !important;
    padding-bottom: 4.8rem !important;
  }
  .lore-page .page-hero--lore {
    min-height: 460px !important;
    padding-top: 2.8rem !important;
    padding-bottom: 4.6rem !important;
  }
}

/* v6.3 correction: Coming Soon and Lore header-image consistency.
   Coming Soon now uses an expanded, focused banner asset instead of the previous blurred side-fill treatment.
   Lore keeps the same header scale and position, but removes baked/overlay blur at the top and uses a clean bottom-only fade into the wallpaper. */
.coming-soon-page .page-hero--coming-soon {
  margin-top: 0 !important;
  min-height: clamp(540px, 58svh, 700px) !important;
  padding-top: clamp(3.4rem, 6svh, 5.2rem) !important;
  padding-bottom: clamp(5rem, 8svh, 6.8rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  filter: none !important;
  background-color: #0d0d0d !important;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(232,93,4,0.08), transparent 38%),
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.08) 42%, rgba(13,13,13,0.42) 100%),
    url('../images/coming-soon-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

.coming-soon-page .page-hero--coming-soon::after {
  height: clamp(170px, 24svh, 290px) !important;
  bottom: -1px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.04) 30%,
      rgba(13,13,13,0.24) 62%,
      rgba(13,13,13,0.72) 88%,
      rgba(13,13,13,0.96) 100%) !important;
}

.lore-page .page-hero--lore {
  min-height: clamp(520px, 50svh, 680px) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5rem, 8svh, 6.8rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.lore-page .page-hero--lore::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  filter: none !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.14) 0%,
      rgba(0,0,0,0.04) 28%,
      rgba(0,0,0,0.00) 58%,
      rgba(13,13,13,0.08) 84%,
      rgba(13,13,13,0.22) 100%),
    url('../images/hero-lore.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
}

.lore-page .page-hero::after {
  height: clamp(160px, 23svh, 270px) !important;
  bottom: -1px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.00) 36%,
      rgba(13,13,13,0.10) 62%,
      rgba(13,13,13,0.42) 84%,
      rgba(13,13,13,0.92) 100%) !important;
}

@media (max-width: 760px) {
  .coming-soon-page .page-hero--coming-soon {
    min-height: 520px !important;
    padding-top: 3rem !important;
    padding-bottom: 4.8rem !important;
  }

  .lore-page .page-hero--lore {
    min-height: 460px !important;
    padding-top: 2.8rem !important;
    padding-bottom: 4.6rem !important;
  }
}

/* v6.4 correction: final header artwork alignment pass for Coming Soon and Lore Archive.
   Coming Soon now uses natural image proportions at full page width rather than a cover crop that made the banner feel horizontally stretched.
   Lore Archive now uses full-width, auto-height artwork so the original bottom remains visible, with a clean lower fade into the page texture. */
.coming-soon-page .page-hero--coming-soon {
  margin-top: 0 !important;
  min-height: clamp(535px, 56svh, 690px) !important;
  padding-top: clamp(3.2rem, 5.5svh, 4.8rem) !important;
  padding-bottom: clamp(4.8rem, 7svh, 6.4rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  filter: none !important;
  background-color: #0d0d0d !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.02) 48%,
      rgba(13,13,13,0.18) 78%,
      rgba(13,13,13,0.62) 100%),
    url('../images/coming-soon-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center center, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}

.coming-soon-page .page-hero--coming-soon::after {
  height: clamp(170px, 22svh, 260px) !important;
  bottom: -1px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.00) 28%,
      rgba(13,13,13,0.16) 58%,
      rgba(13,13,13,0.58) 84%,
      rgba(13,13,13,0.96) 100%) !important;
}

.lore-page .page-hero--lore {
  min-height: clamp(520px, 50svh, 680px) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5rem, 8svh, 6.8rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.lore-page .page-hero--lore::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  filter: none !important;
  background-color: #0d0d0d !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.00) 42%,
      rgba(13,13,13,0.04) 74%,
      rgba(13,13,13,0.14) 100%),
    url('../images/hero-lore.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}

.lore-page .page-hero::after {
  height: clamp(185px, 26svh, 310px) !important;
  bottom: -1px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.00) 30%,
      rgba(13,13,13,0.12) 58%,
      rgba(13,13,13,0.48) 82%,
      rgba(13,13,13,0.96) 100%) !important;
}

.lore-page .page-hero + section {
  margin-top: -1px !important;
  padding-top: clamp(4.6rem, 7.5vw, 6.8rem) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.96) 0%,
      rgba(13,13,13,0.70) 70px,
      rgba(13,13,13,0.26) 210px,
      rgba(13,13,13,0) 340px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

@media (max-width: 760px) {
  .coming-soon-page .page-hero--coming-soon {
    min-height: 500px !important;
    padding-top: 3rem !important;
    padding-bottom: 4.6rem !important;
  }
  .lore-page .page-hero--lore {
    min-height: 460px !important;
    padding-top: 2.8rem !important;
    padding-bottom: 4.6rem !important;
  }
}

/* v6.4 final size lock: preserve full banner-image height at full browser width where practical. */
.coming-soon-page .page-hero--coming-soon {
  min-height: max(520px, calc(100vw * 0.3515625 + 72px)) !important;
}

.lore-page .page-hero--lore {
  min-height: max(540px, calc(100vw * 0.421875)) !important;
}

/* v6.5 Games page header replacement: use the supplied 1916x821 panoramic banner without horizontal stretching. */
.games-page .page-hero--games {
  min-height: clamp(440px, 42.85vw, 821px) !important;
  height: clamp(440px, 42.85vw, 821px) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(4.8rem, 7svh, 6.4rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.games-page .page-hero--games::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.58) 0%,
      rgba(0,0,0,0.24) 12%,
      rgba(0,0,0,0.06) 38%,
      rgba(13,13,13,0.08) 70%,
      rgba(13,13,13,0.26) 100%),
    url('../images/hero-games.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  filter: none !important;
  transform: none !important;
}

.games-page .page-hero--games::after {
  height: clamp(180px, 26svh, 320px) !important;
  bottom: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0) 32%,
      rgba(13,13,13,0.10) 56%,
      rgba(13,13,13,0.40) 78%,
      rgba(13,13,13,0.94) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

.games-page .page-hero + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.94) 0%,
      rgba(13,13,13,0.60) 90px,
      rgba(13,13,13,0.16) 230px,
      rgba(13,13,13,0) 370px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

@media (max-width: 760px) {
  .games-page .page-hero--games {
    min-height: clamp(440px, 67svh, 620px) !important;
    height: clamp(440px, 67svh, 620px) !important;
  }

  .games-page .page-hero--games::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }
}

/* v6.6 Coming Soon banner replacement and Games hero text readability.
   Coming Soon now uses the supplied 1954 x 805 wide banner at natural proportions.
   The image is scaled by width, anchored at the top, and not cropped at the sides. */
.coming-soon-page .page-hero--coming-soon {
  margin-top: 0 !important;
  min-height: calc(100vw * 0.411975435) !important;
  height: calc(100vw * 0.411975435) !important;
  max-height: none !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(4.8rem, 7svh, 6.4rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background-color: #0d0d0d !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.03) 0%,
      rgba(0,0,0,0.02) 42%,
      rgba(13,13,13,0.08) 70%,
      rgba(13,13,13,0.22) 100%),
    url('../images/coming-soon-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}

.coming-soon-page .page-hero--coming-soon::after {
  height: clamp(175px, 24svh, 320px) !important;
  bottom: -1px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.00) 30%,
      rgba(13,13,13,0.12) 58%,
      rgba(13,13,13,0.50) 82%,
      rgba(13,13,13,0.97) 100%) !important;
}

.coming-soon-page .page-hero + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.97) 0%,
      rgba(13,13,13,0.64) 88px,
      rgba(13,13,13,0.18) 235px,
      rgba(13,13,13,0) 380px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

.games-page .page-hero--games .page-hero-content .eyebrow,
.games-page .page-hero--games .page-hero-content h1,
.games-page .page-hero--games .page-hero-content p,
.games-page .page-hero--games .page-hero-content p:not(.eyebrow) {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.96), 0 0 24px rgba(0,0,0,0.82) !important;
}

.games-page .page-hero--games .page-hero-content .eyebrow {
  color: #ffffff !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .coming-soon-page .page-hero--coming-soon {
    min-height: clamp(430px, 72svh, 620px) !important;
    height: clamp(430px, 72svh, 620px) !important;
  }

  .coming-soon-page .page-hero--coming-soon::before,
  .page-hero--coming-soon::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }
}

/* v6.7 Lore Archive header replacement.
   Uses the supplied 1870 x 841 panoramic lore banner at natural proportions.
   The banner scales by width, anchors at the top, preserves the sides, and fades at the bottom into the dark wallpaper texture. */
.lore-page .page-hero--lore {
  margin-top: 0 !important;
  min-height: calc(100vw * 0.44973262) !important;
  height: calc(100vw * 0.44973262) !important;
  max-height: none !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(4.8rem, 7svh, 6.4rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.lore-page .page-hero--lore::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background-color: #0d0d0d !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.00) 38%,
      rgba(13,13,13,0.06) 68%,
      rgba(13,13,13,0.20) 100%),
    url('../images/hero-lore.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}

.lore-page .page-hero--lore::after,
.lore-page .page-hero::after {
  height: clamp(175px, 24svh, 320px) !important;
  bottom: -1px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.00) 30%,
      rgba(13,13,13,0.12) 58%,
      rgba(13,13,13,0.50) 82%,
      rgba(13,13,13,0.97) 100%) !important;
}

.lore-page .page-hero + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.97) 0%,
      rgba(13,13,13,0.64) 88px,
      rgba(13,13,13,0.18) 235px,
      rgba(13,13,13,0) 380px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

.lore-page .page-hero--lore .page-hero-content .eyebrow,
.lore-page .page-hero--lore .page-hero-content h1,
.lore-page .page-hero--lore .page-hero-content p,
.lore-page .page-hero--lore .page-hero-content p:not(.eyebrow) {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.96), 0 0 24px rgba(0,0,0,0.78) !important;
}

@media (max-width: 760px) {
  .lore-page .page-hero--lore {
    min-height: clamp(430px, 72svh, 620px) !important;
    height: clamp(430px, 72svh, 620px) !important;
  }

  .lore-page .page-hero--lore::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }
}

/* v6.8 Tools header replacement.
   Uses the supplied 1774 x 887 panoramic tools banner at natural proportions.
   The banner scales by width, anchors at the top, preserves the sides, and fades at the bottom into the dark wallpaper texture. */
.tools-page .page-hero--tools {
  margin-top: 0 !important;
  min-height: calc(100vw * 0.5) !important;
  height: calc(100vw * 0.5) !important;
  max-height: none !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(4.8rem, 7svh, 6.4rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.tools-page .page-hero--tools::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background-color: #0d0d0d !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.04) 0%,
      rgba(0,0,0,0.00) 38%,
      rgba(13,13,13,0.08) 68%,
      rgba(13,13,13,0.24) 100%),
    url('../images/hero-tools.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}

.tools-page .page-hero--tools::after,
.tools-page .page-hero::after {
  height: clamp(175px, 24svh, 320px) !important;
  bottom: -1px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.00) 30%,
      rgba(13,13,13,0.12) 58%,
      rgba(13,13,13,0.50) 82%,
      rgba(13,13,13,0.97) 100%) !important;
}

.tools-page .page-hero + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.97) 0%,
      rgba(13,13,13,0.64) 88px,
      rgba(13,13,13,0.18) 235px,
      rgba(13,13,13,0) 380px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

.tools-page .page-hero--tools .page-hero-content .eyebrow,
.tools-page .page-hero--tools .page-hero-content h1,
.tools-page .page-hero--tools .page-hero-content p,
.tools-page .page-hero--tools .page-hero-content p:not(.eyebrow) {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.96), 0 0 24px rgba(0,0,0,0.78) !important;
}

@media (max-width: 760px) {
  .tools-page .page-hero--tools {
    min-height: clamp(430px, 72svh, 620px) !important;
    height: clamp(430px, 72svh, 620px) !important;
  }

  .tools-page .page-hero--tools::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }
}



/* v6.9 Downloads header replacement.
   Uses the supplied 1954 x 805 panoramic downloads banner at natural proportions.
   The banner scales by width, anchors at the top, preserves the sides, and fades at the bottom into the dark wallpaper texture. */
.downloads-page .page-hero--downloads {
  margin-top: 0 !important;
  min-height: calc(100vw * 0.411975435) !important;
  height: calc(100vw * 0.411975435) !important;
  max-height: none !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(4.8rem, 7svh, 6.4rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.downloads-page .page-hero--downloads::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background-color: #0d0d0d !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.05) 0%,
      rgba(0,0,0,0.02) 38%,
      rgba(13,13,13,0.08) 68%,
      rgba(13,13,13,0.23) 100%),
    url('../images/hero-downloads.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}

.downloads-page .page-hero--downloads::after,
.downloads-page .page-hero::after {
  height: clamp(175px, 24svh, 320px) !important;
  bottom: -1px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.00) 30%,
      rgba(13,13,13,0.12) 58%,
      rgba(13,13,13,0.50) 82%,
      rgba(13,13,13,0.97) 100%) !important;
}

.downloads-page .page-hero + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.97) 0%,
      rgba(13,13,13,0.64) 88px,
      rgba(13,13,13,0.18) 235px,
      rgba(13,13,13,0) 380px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

.downloads-page .page-hero--downloads .page-hero-content .eyebrow,
.downloads-page .page-hero--downloads .page-hero-content h1,
.downloads-page .page-hero--downloads .page-hero-content p,
.downloads-page .page-hero--downloads .page-hero-content p:not(.eyebrow) {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.96), 0 0 24px rgba(0,0,0,0.78) !important;
}

@media (max-width: 760px) {
  .downloads-page .page-hero--downloads {
    min-height: clamp(430px, 72svh, 620px) !important;
    height: clamp(430px, 72svh, 620px) !important;
  }

  .downloads-page .page-hero--downloads::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }
}

/* v7.0 banner correction pass.
   Replaces the homepage, project-page, music, and contact banners with the new supplied artwork.
   Project/contact banners are scaled to full browser width, anchored at the top so the artwork is not cut off,
   and faded only at the bottom into the dark wallpaper texture. */

.home-page .hero--studio {
  background-image: url('../images/home-banner.webp') !important;
  background-size: cover !important;
  background-position: center 18% !important;
  background-repeat: no-repeat !important;
  background-color: #050505 !important;
}

.home-page .hero--home-refined::before,
.home-page .hero--studio::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,186,8,0.10), transparent 32%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0.18) 38%,
      rgba(13,13,13,0.70) 78%,
      rgba(13,13,13,0.98) 100%) !important;
  z-index: 0 !important;
}

.home-page .hero-content--home-refined {
  position: relative !important;
  z-index: 1 !important;
}

.global-mandate-page .page-hero--global-mandate,
.pactsmiths-page .page-hero--pactsmiths,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.wheel-of-time-page .page-hero--wheel-of-time,
.alberenar-board-game-page .page-hero--alberenar-board-game,
.contact-page .page-hero--contact {
  margin-top: 0 !important;
  min-height: max(460px, calc(100vw * 0.375)) !important;
  height: max(460px, calc(100vw * 0.375)) !important;
  max-height: none !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(4.8rem, 7svh, 6.4rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.global-mandate-page .page-hero--global-mandate::before,
.pactsmiths-page .page-hero--pactsmiths::before,
.no-safe-road-page .page-hero--no-safe-road::before,
.soundtracks-page .page-hero--soundtracks::before,
.wheel-of-time-page .page-hero--wheel-of-time::before,
.alberenar-board-game-page .page-hero--alberenar-board-game::before,
.contact-page .page-hero--contact::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background-color: #0d0d0d !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}

.global-mandate-page .page-hero--global-mandate::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.16) 0%,
      rgba(0,0,0,0.04) 34%,
      rgba(13,13,13,0.09) 68%,
      rgba(13,13,13,0.24) 100%),
    url('../images/global-mandate-banner.webp') !important;
}

.pactsmiths-page .page-hero--pactsmiths::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.02) 36%,
      rgba(13,13,13,0.08) 68%,
      rgba(13,13,13,0.24) 100%),
    url('../images/pactsmiths-banner.webp') !important;
}

.no-safe-road-page .page-hero--no-safe-road::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0.02) 36%,
      rgba(13,13,13,0.08) 68%,
      rgba(13,13,13,0.26) 100%),
    url('../images/no-safe-road-banner.webp') !important;
}

.soundtracks-page .page-hero--soundtracks::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0.01) 36%,
      rgba(13,13,13,0.06) 68%,
      rgba(13,13,13,0.22) 100%),
    url('../images/soundtracks-banner.webp') !important;
}

.wheel-of-time-page .page-hero--wheel-of-time::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.02) 36%,
      rgba(13,13,13,0.08) 68%,
      rgba(13,13,13,0.25) 100%),
    url('../images/wheel-of-time-banner.webp') !important;
}

.alberenar-board-game-page .page-hero--alberenar-board-game::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.12) 0%,
      rgba(0,0,0,0.02) 36%,
      rgba(13,13,13,0.08) 68%,
      rgba(13,13,13,0.24) 100%),
    url('../images/alberenar-board-game-banner.webp') !important;
}

.contact-page .page-hero--contact::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.02) 36%,
      rgba(13,13,13,0.08) 68%,
      rgba(13,13,13,0.25) 100%),
    url('../images/hero-contact.webp') !important;
}

.global-mandate-page .page-hero--global-mandate::after,
.pactsmiths-page .page-hero--pactsmiths::after,
.no-safe-road-page .page-hero--no-safe-road::after,
.soundtracks-page .page-hero--soundtracks::after,
.wheel-of-time-page .page-hero--wheel-of-time::after,
.alberenar-board-game-page .page-hero--alberenar-board-game::after,
.contact-page .page-hero--contact::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(175px, 24svh, 320px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.00) 30%,
      rgba(13,13,13,0.12) 58%,
      rgba(13,13,13,0.50) 82%,
      rgba(13,13,13,0.97) 100%) !important;
}

.global-mandate-page .page-hero--global-mandate + section,
.pactsmiths-page .page-hero--pactsmiths + section,
.no-safe-road-page .page-hero--no-safe-road + section,
.soundtracks-page .page-hero--soundtracks + section,
.wheel-of-time-page .page-hero--wheel-of-time + section,
.alberenar-board-game-page .page-hero--alberenar-board-game + section,
.contact-page .page-hero--contact + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.97) 0%,
      rgba(13,13,13,0.64) 88px,
      rgba(13,13,13,0.18) 235px,
      rgba(13,13,13,0) 380px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

.global-mandate-page .page-hero-content .eyebrow,
.global-mandate-page .page-hero-content h1,
.global-mandate-page .page-hero-content p,
.pactsmiths-page .page-hero-content .eyebrow,
.pactsmiths-page .page-hero-content h1,
.pactsmiths-page .page-hero-content p,
.no-safe-road-page .page-hero-content .eyebrow,
.no-safe-road-page .page-hero-content h1,
.no-safe-road-page .page-hero-content p,
.soundtracks-page .page-hero-content .eyebrow,
.soundtracks-page .page-hero-content h1,
.soundtracks-page .page-hero-content p,
.wheel-of-time-page .page-hero-content .eyebrow,
.wheel-of-time-page .page-hero-content h1,
.wheel-of-time-page .page-hero-content p,
.alberenar-board-game-page .page-hero-content .eyebrow,
.alberenar-board-game-page .page-hero-content h1,
.alberenar-board-game-page .page-hero-content p,
.contact-page .page-hero-content .eyebrow,
.contact-page .page-hero-content h1,
.contact-page .page-hero-content p {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.96), 0 0 24px rgba(0,0,0,0.78) !important;
}

@media (max-width: 760px) {
  .global-mandate-page .page-hero--global-mandate,
  .pactsmiths-page .page-hero--pactsmiths,
  .no-safe-road-page .page-hero--no-safe-road,
  .soundtracks-page .page-hero--soundtracks,
  .wheel-of-time-page .page-hero--wheel-of-time,
  .alberenar-board-game-page .page-hero--alberenar-board-game,
  .contact-page .page-hero--contact {
    min-height: 440px !important;
    height: 440px !important;
    padding-top: 2.6rem !important;
    padding-bottom: 4.6rem !important;
  }

  .global-mandate-page .page-hero--global-mandate::before,
  .pactsmiths-page .page-hero--pactsmiths::before,
  .no-safe-road-page .page-hero--no-safe-road::before,
  .soundtracks-page .page-hero--soundtracks::before,
  .wheel-of-time-page .page-hero--wheel-of-time::before,
  .alberenar-board-game-page .page-hero--alberenar-board-game::before,
  .contact-page .page-hero--contact::before {
    background-size: 100% 100%, 100% auto !important;
    background-position: center top, center top !important;
  }
}


/* v7.1 homepage refinement pass: smaller sharper home banner, no smoked logo panel, white hero copy, and clearer form fields. */
.home-page .hero--studio,
.home-page .hero--home-refined {
  min-height: calc(100svh - var(--nav-height)) !important;
  height: auto !important;
  padding-top: calc(var(--nav-height) + clamp(0.8rem, 2svh, 1.5rem)) !important;
  padding-bottom: clamp(3rem, 7svh, 6rem) !important;
  background-image: url('../images/home-banner.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: clamp(600px, 58vw, 900px) auto !important;
  background-color: #050505 !important;
}

.home-page .hero--studio::before,
.home-page .hero--home-refined::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,186,8,0.08), transparent 24%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.03) 0%,
      rgba(0,0,0,0.08) 16%,
      rgba(0,0,0,0.20) 40%,
      rgba(13,13,13,0.68) 78%,
      rgba(13,13,13,0.97) 100%) !important;
  z-index: 0 !important;
}

.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  position: relative !important;
  z-index: 1 !important;
  width: min(920px, 92vw) !important;
  max-width: 920px !important;
  margin: clamp(18rem, 42svh, 26rem) auto 0 !important;
  padding: 0 1.25rem !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.home-page .hero-brand-logo {
  display: none !important;
}

.home-page .hero-content--home-refined .eyebrow,
.home-page .hero-content--home-refined h1,
.home-page .hero-content--home-refined p,
.home-page .hero-content--brand .eyebrow,
.home-page .hero-content--brand h1,
.home-page .hero-content--brand p {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.96), 0 0 24px rgba(0,0,0,0.66) !important;
}

.home-page .hero-content--home-refined .eyebrow,
.home-page .hero-content--brand .eyebrow {
  color: #ffffff !important;
  letter-spacing: 0.12em !important;
}

.home-page .hero-content--home-refined h1,
.home-page .hero-content--brand h1 {
  font-size: clamp(2.8rem, 6.2vw, 5.2rem) !important;
  margin-bottom: 0.85rem !important;
}

.home-page .hero-content--home-refined .hero-tagline,
.home-page .hero-content--brand .hero-tagline {
  color: #ffffff !important;
}

.home-page .hero-content--home-refined p:not(.eyebrow),
.home-page .hero-content--brand p:not(.eyebrow) {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.newsletter-section--home .newsletter-form,
.contact-form {
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)) !important;
  border: 1px solid rgba(255,186,8,0.18) !important;
  border-radius: 20px !important;
  padding: 1rem !important;
  box-shadow: 0 16px 38px rgba(0,0,0,0.32), inset 0 0 30px rgba(255,186,8,0.03) !important;
}

.newsletter-section--home .newsletter-form input,
.contact-form input,
.contact-form textarea {
  background: rgba(255,255,255,0.94) !important;
  color: #111111 !important;
  border: 1px solid rgba(255,186,8,0.28) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
}

.newsletter-section--home .newsletter-form input::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #5a5a5a !important;
  opacity: 1 !important;
}

.newsletter-section--home .newsletter-form input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid rgba(232,93,4,0.34) !important;
  border-color: rgba(232,93,4,0.56) !important;
  background: #ffffff !important;
}

.contact-card {
  align-self: stretch;
}

@media (max-width: 1100px), (max-height: 940px) {
  .home-page .hero--studio,
  .home-page .hero--home-refined {
    background-size: clamp(560px, 72vw, 820px) auto !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(15rem, 36svh, 21rem) !important;
  }
}

@media (max-width: 760px) {
  .home-page .hero--studio,
  .home-page .hero--home-refined {
    background-size: min(92vw, 680px) auto !important;
    background-position: center top !important;
    padding-bottom: 3.25rem !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(12rem, 30svh, 17rem) !important;
    width: min(94vw, 720px) !important;
    padding: 0 0.75rem !important;
  }

  .newsletter-section--home .newsletter-form,
  .contact-form {
    padding: 0.85rem !important;
  }
}

/* v7.2 homepage sales-copy and hero-blend pass. */
.home-page .hero--studio::before,
.home-page .hero--home-refined::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(to right,
      rgba(5,5,5,0.98) 0%,
      rgba(5,5,5,0.78) 7%,
      rgba(5,5,5,0.28) 18%,
      rgba(5,5,5,0.00) 31%,
      rgba(5,5,5,0.00) 69%,
      rgba(5,5,5,0.28) 82%,
      rgba(5,5,5,0.78) 93%,
      rgba(5,5,5,0.98) 100%),
    radial-gradient(circle at 50% 24%, rgba(255,186,8,0.08), transparent 24%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.03) 0%,
      rgba(0,0,0,0.08) 16%,
      rgba(0,0,0,0.20) 40%,
      rgba(13,13,13,0.68) 78%,
      rgba(13,13,13,0.97) 100%) !important;
  z-index: 0 !important;
}

.studio-identity-panel--home {
  max-width: 1320px !important;
  grid-template-columns: clamp(82px, 9vw, 120px) 1fr !important;
  align-items: start !important;
}

.studio-identity-panel--home .studio-identity-mark {
  margin-top: 0.35rem !important;
}

.studio-identity-panel--home p {
  line-height: 1.72 !important;
}

.home-project-section--featured .section-heading::after,
.forge-audience-section .section-heading::after,
.studio-pillars-section .section-heading::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 0.8rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,186,8,0.9), transparent);
}

.home-project-grid--six {
  max-width: 1360px !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)) !important;
  gap: 1.4rem !important;
}

.home-project-grid--six .home-project-card {
  min-height: 100% !important;
}

.home-project-grid--six .home-project-card p {
  line-height: 1.62 !important;
}

.home-project-card.world-card--alberenar-board-game,
.forge-latest-card.world-card--alberenar-board-game {
  --game-accent: #d7a83d !important;
  --game-accent-rgb: 215,168,61 !important;
}

.home-project-card.world-card--pactsmiths,
.forge-latest-card.world-card--pactsmiths {
  --game-accent: #b66cff !important;
  --game-accent-rgb: 182,108,255 !important;
}

.forge-audience-section {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,186,8,0.07), transparent 32%),
    radial-gradient(circle at 82% 24%, rgba(33,150,243,0.06), transparent 34%),
    linear-gradient(to bottom, rgba(13,13,13,0), rgba(255,255,255,0.028), rgba(13,13,13,0)) !important;
}

.forge-audience-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

.forge-audience-section .forge-latest-card {
  min-height: 340px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--game-accent-rgb,232,93,4),0.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(0,0,0,0.58)) !important;
  border: 1px solid rgba(var(--game-accent-rgb,232,93,4),0.24) !important;
}

.forge-audience-section .forge-latest-card p {
  line-height: 1.65 !important;
}

.audience-card--gm { --game-accent-rgb: 143,92,255 !important; }
.audience-card--players { --game-accent-rgb: 232,93,4 !important; }
.audience-card--solo { --game-accent-rgb: 174,184,187 !important; }
.audience-card--strategy { --game-accent-rgb: 33,150,243 !important; }

.studio-pillars-section .studio-pillar-card {
  min-height: 290px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,186,8,0.105), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.052), rgba(0,0,0,0.52)) !important;
}

.studio-pillars-section .studio-pillar-card h3 {
  color: #ffffff !important;
  letter-spacing: 0.025em !important;
}

.studio-pillars-section .studio-pillar-card p {
  line-height: 1.68 !important;
}

.newsletter-section--home .newsletter-form input {
  min-width: min(100%, 410px) !important;
}

.newsletter-section--home .form-action {
  white-space: nowrap !important;
}

@media (max-width: 860px) {
  .studio-identity-panel--home {
    grid-template-columns: 1fr !important;
  }

  .studio-identity-panel--home .studio-identity-mark {
    width: 96px !important;
    margin: 0 auto 0.8rem !important;
  }

  .home-page .hero--studio::before,
  .home-page .hero--home-refined::before {
    background:
      linear-gradient(to right,
        rgba(5,5,5,0.92) 0%,
        rgba(5,5,5,0.28) 16%,
        rgba(5,5,5,0.00) 34%,
        rgba(5,5,5,0.00) 66%,
        rgba(5,5,5,0.28) 84%,
        rgba(5,5,5,0.92) 100%),
      radial-gradient(circle at 50% 24%, rgba(255,186,8,0.08), transparent 24%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.03) 0%,
        rgba(0,0,0,0.10) 18%,
        rgba(0,0,0,0.26) 44%,
        rgba(13,13,13,0.76) 80%,
        rgba(13,13,13,0.98) 100%) !important;
  }
}


/* v7.3 homepage copy and hero-edge correction pass. */
.home-page .hero--studio,
.home-page .hero--home-refined {
  background-image: none !important;
  background-color: #050505 !important;
  overflow: hidden !important;
}

.home-page .hero--studio::before,
.home-page .hero--home-refined::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: clamp(600px, 58vw, 900px) !important;
  transform: translateX(-50%) !important;
  background-image: url('../images/home-banner.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  background-color: transparent !important;
  z-index: 0 !important;
  opacity: 1 !important;
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 7%,
    rgba(0,0,0,0.78) 16%,
    rgba(0,0,0,1) 24%,
    rgba(0,0,0,1) 76%,
    rgba(0,0,0,0.78) 84%,
    rgba(0,0,0,0.18) 93%,
    rgba(0,0,0,0) 100%) !important;
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 7%,
    rgba(0,0,0,0.78) 16%,
    rgba(0,0,0,1) 24%,
    rgba(0,0,0,1) 76%,
    rgba(0,0,0,0.78) 84%,
    rgba(0,0,0,0.18) 93%,
    rgba(0,0,0,0) 100%) !important;
}

.home-page .hero--studio::after,
.home-page .hero--home-refined::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,186,8,0.08), transparent 26%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.05) 18%,
      rgba(0,0,0,0.20) 42%,
      rgba(13,13,13,0.68) 78%,
      rgba(13,13,13,0.98) 100%) !important;
}

.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  z-index: 2 !important;
}

.studio-identity-panel--home div > p {
  margin-bottom: 1.15rem !important;
}

.studio-identity-panel--home div > p:last-child {
  margin-bottom: 0 !important;
}

.home-project-card.world-card--alberenar-board-game img {
  object-fit: cover !important;
  object-position: center top !important;
}

.newsletter-section--home .newsletter-form .btn {
  min-width: 150px !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px), (max-height: 940px) {
  .home-page .hero--studio::before,
  .home-page .hero--home-refined::before {
    width: clamp(560px, 72vw, 820px) !important;
  }
}

@media (max-width: 760px) {
  .home-page .hero--studio::before,
  .home-page .hero--home-refined::before {
    width: min(92vw, 680px) !important;
  }
}


/* v7.5 catalogue, coming-soon, audio and archive refinements. */
.coming-soon-page .page-hero-content .eyebrow,
.coming-soon-page .page-hero-content p,
.coming-soon-page .section-subheading,
.coming-soon-page .card-kicker,
.coming-soon-page .game-card p,
.games-page .game-card p,
.games-page .card-kicker {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.82) !important;
}

.coming-projects-section {
  padding: clamp(4rem, 7vw, 6.5rem) 2rem;
}

.future-project-grid {
  margin-top: 2rem;
}

.future-project-card .game-card-body {
  min-height: 100%;
}

.content-ready-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1rem;
  margin: 1.4rem 0 1.6rem;
}

.content-ready-block {
  padding: 1rem;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.032));
  border: 1px solid rgba(255,186,8,0.18);
  box-shadow: inset 0 0 22px rgba(255,186,8,0.025), 0 10px 28px rgba(0,0,0,0.22);
}

.content-ready-block strong {
  display: block;
  color: #ffffff;
  margin-bottom: 0.45rem;
  letter-spacing: 0.04em;
}

.content-ready-block span {
  display: block;
  color: rgba(255,255,255,0.84);
  line-height: 1.62;
}

.archive-tools input[type="search"],
#loreSearch {
  background: rgba(255,255,255,0.96) !important;
  color: #111111 !important;
  border: 1px solid rgba(255,186,8,0.42) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}

.archive-tools input[type="search"]::placeholder,
#loreSearch::placeholder {
  color: #4c4c4c !important;
  opacity: 1 !important;
}

.archive-tools input[type="search"]:focus,
#loreSearch:focus {
  outline: 2px solid rgba(232,93,4,0.38) !important;
  border-color: rgba(232,93,4,0.62) !important;
  background: #ffffff !important;
}

.soundtracks-page .project-placeholder-panel p,
.soundtracks-page .project-placeholder-panel .eyebrow,
.soundtracks-page .page-hero-content p,
.soundtracks-page .page-hero-content .eyebrow {
  color: #ffffff !important;
}


/* v7.6 Projects on the Anvil and Lore Search polish. */
.coming-soon-page .future-project-grid {
  align-items: stretch !important;
}

.coming-soon-page .future-project-card {
  min-height: 600px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-left-color: rgba(var(--game-accent-rgb, 232, 93, 4), 0.58) !important;
  border-bottom-color: rgba(var(--game-accent-rgb, 232, 93, 4), 0.22) !important;
}

.coming-soon-page .future-project-card--epic {
  --game-accent: #d7b46a !important;
  --game-accent-rgb: 215, 180, 106 !important;
}

.coming-soon-page .future-project-card--worlds {
  --game-accent: #8f5cff !important;
  --game-accent-rgb: 143, 92, 255 !important;
}

.coming-soon-page .future-project-card--tools {
  --game-accent: #43d7c7 !important;
  --game-accent-rgb: 67, 215, 199 !important;
}

.coming-soon-page .future-project-card--audio {
  --game-accent: #f2c94c !important;
  --game-accent-rgb: 242, 201, 76 !important;
}

.coming-soon-page .future-project-card--books {
  --game-accent: #b12b24 !important;
  --game-accent-rgb: 177, 43, 36 !important;
}

.coming-soon-page .future-project-card > img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  min-height: 230px !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  display: block !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--game-accent-rgb, 232, 93, 4), 0.14), transparent 40%),
    #050505 !important;
  box-shadow: inset 0 -36px 56px rgba(0, 0, 0, 0.42) !important;
}

.coming-soon-page .future-project-card .game-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: auto !important;
}

.coming-soon-page .future-project-card .btn {
  margin-top: auto !important;
  align-self: flex-start !important;
  color: #ffffff !important;
  border-color: rgba(var(--game-accent-rgb, 232, 93, 4), 0.84) !important;
  background: rgba(0,0,0,0.36) !important;
  box-shadow: 0 0 18px rgba(var(--game-accent-rgb, 232, 93, 4), 0.18) !important;
}

.coming-soon-page .future-project-card:hover .btn {
  background: rgba(var(--game-accent-rgb, 232, 93, 4), 0.22) !important;
  box-shadow: 0 10px 28px rgba(var(--game-accent-rgb, 232, 93, 4), 0.30), 0 8px 20px rgba(0,0,0,0.52) !important;
}

.archive-search-control {
  width: min(760px, 100%) !important;
  margin: 0 auto 0.85rem !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}

.archive-search-control input[type="search"],
.archive-tools input[type="search"],
#loreSearch {
  width: 100% !important;
  min-height: 52px !important;
}

.archive-search-button {
  min-height: 52px !important;
  padding: 0.75rem 1.1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,186,8,0.72) !important;
  background: linear-gradient(145deg, rgba(232,93,4,0.32), rgba(0,0,0,0.48)) !important;
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.34), 0 0 18px rgba(232,93,4,0.16) !important;
}

.archive-search-button .svg-icon {
  width: 1.1rem !important;
  height: 1.1rem !important;
}

.archive-search-button:hover,
.archive-search-button:focus-visible {
  background: linear-gradient(145deg, rgba(232,93,4,0.48), rgba(0,0,0,0.52)) !important;
  border-color: rgba(255,186,8,0.96) !important;
  outline: none !important;
}

@media (max-width: 640px) {
  .archive-search-control {
    grid-template-columns: 1fr !important;
  }

  .archive-search-button {
    width: 100% !important;
  }
}


/* v7.7 Projects on the Anvil image-frame correction and New Worlds routing fix. */
.coming-soon-page .future-project-grid {
  align-items: stretch !important;
}

.coming-soon-page .future-project-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.coming-soon-page .future-project-card > img {
  width: 100% !important;
  height: clamp(190px, 14vw, 230px) !important;
  aspect-ratio: 16 / 10 !important;
  max-height: 230px !important;
  min-height: 190px !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.55rem !important;
  display: block !important;
  flex: 0 0 auto !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(var(--game-accent-rgb, 232, 93, 4), 0.16), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,0.025), rgba(0,0,0,0.16)),
    #050505 !important;
  border-bottom: 1px solid rgba(var(--game-accent-rgb, 232, 93, 4), 0.24) !important;
  box-shadow: inset 0 -30px 48px rgba(0, 0, 0, 0.36) !important;
}

.coming-soon-page .future-project-card .game-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.coming-soon-page .future-project-card .game-card-body .btn,
.coming-soon-page .future-project-card .btn {
  margin-top: auto !important;
  align-self: flex-start !important;
}

@media (max-width: 760px) {
  .coming-soon-page .future-project-card > img {
    height: 205px !important;
    max-height: 205px !important;
    min-height: 205px !important;
  }
}

/* v7.8 supplied image integration, Resonance download, and seamless wallpaper pass.
   The new banners use the supplied 1983 x 793 ratio, while the two Coming Soon block images use cropped 16:10 derivatives so they sit neatly in the same card frame as the Games catalogue. */
:root {
  --supplied-banner-ratio: 0.3998991427;
}

body {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
}

.coming-soon-page .page-hero--coming-soon {
  min-height: max(400px, calc(100vw * var(--supplied-banner-ratio))) !important;
  height: max(400px, calc(100vw * var(--supplied-banner-ratio))) !important;
  max-height: none !important;
}

.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.03) 0%,
      rgba(0,0,0,0.02) 42%,
      rgba(13,13,13,0.08) 70%,
      rgba(13,13,13,0.22) 100%),
    url('../images/coming-soon-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}

.global-mandate-page .page-hero--global-mandate,
.pactsmiths-page .page-hero--pactsmiths,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.wheel-of-time-page .page-hero--wheel-of-time,
.alberenar-board-game-page .page-hero--alberenar-board-game {
  min-height: max(400px, calc(100vw * var(--supplied-banner-ratio))) !important;
  height: max(400px, calc(100vw * var(--supplied-banner-ratio))) !important;
  max-height: none !important;
}

.global-mandate-page .page-hero--global-mandate::before,
.pactsmiths-page .page-hero--pactsmiths::before,
.no-safe-road-page .page-hero--no-safe-road::before,
.soundtracks-page .page-hero--soundtracks::before,
.wheel-of-time-page .page-hero--wheel-of-time::before,
.alberenar-board-game-page .page-hero--alberenar-board-game::before {
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}

.global-mandate-page .page-hero--global-mandate::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.04) 34%, rgba(13,13,13,0.09) 68%, rgba(13,13,13,0.24) 100%),
    url('../images/global-mandate-banner.webp') !important;
}

.pactsmiths-page .page-hero--pactsmiths::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.02) 36%, rgba(13,13,13,0.08) 68%, rgba(13,13,13,0.24) 100%),
    url('../images/pactsmiths-banner.webp') !important;
}

.no-safe-road-page .page-hero--no-safe-road::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 36%, rgba(13,13,13,0.08) 68%, rgba(13,13,13,0.26) 100%),
    url('../images/no-safe-road-banner.webp') !important;
}

.soundtracks-page .page-hero--soundtracks::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.01) 36%, rgba(13,13,13,0.06) 68%, rgba(13,13,13,0.22) 100%),
    url('../images/soundtracks-banner.webp') !important;
}

.wheel-of-time-page .page-hero--wheel-of-time::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.02) 36%, rgba(13,13,13,0.08) 68%, rgba(13,13,13,0.25) 100%),
    url('../images/wheel-of-time-banner.webp') !important;
}

.alberenar-board-game-page .page-hero--alberenar-board-game::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.02) 36%, rgba(13,13,13,0.08) 68%, rgba(13,13,13,0.24) 100%),
    url('../images/alberenar-board-game-banner.webp') !important;
}

.coming-soon-page .future-project-card--tools > img,
.coming-soon-page .future-project-card--books > img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.55rem !important;
}

@media (max-width: 760px) {
  .coming-soon-page .page-hero--coming-soon,
  .global-mandate-page .page-hero--global-mandate,
  .pactsmiths-page .page-hero--pactsmiths,
  .no-safe-road-page .page-hero--no-safe-road,
  .soundtracks-page .page-hero--soundtracks,
  .wheel-of-time-page .page-hero--wheel-of-time,
  .alberenar-board-game-page .page-hero--alberenar-board-game {
    min-height: 430px !important;
    height: 430px !important;
  }

  .coming-soon-page .page-hero--coming-soon::before,
  .page-hero--coming-soon::before,
  .global-mandate-page .page-hero--global-mandate::before,
  .pactsmiths-page .page-hero--pactsmiths::before,
  .no-safe-road-page .page-hero--no-safe-road::before,
  .soundtracks-page .page-hero--soundtracks::before,
  .wheel-of-time-page .page-hero--wheel-of-time::before,
  .alberenar-board-game-page .page-hero--alberenar-board-game::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }
}

/* v7.9 Coming Soon card image alignment fix.
   The two newest supplied card artworks are landscape files, while the older
   Coming Soon cards are portrait-style artwork. This locks the visible image
   strip to one shared footprint so natural image ratios cannot make Digital
   Tools or Stories and Sourcebooks sit differently from the rest of the grid. */
.coming-soon-page .future-project-grid .future-project-card > img {
  width: 100% !important;
  height: clamp(230px, 18vw, 250px) !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block !important;
  flex: 0 0 auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--game-accent-rgb, 232, 93, 4), 0.14), transparent 40%),
    #050505 !important;
  box-shadow: inset 0 -36px 56px rgba(0, 0, 0, 0.42) !important;
}

@media (max-width: 760px) {
  .coming-soon-page .future-project-grid .future-project-card > img {
    height: 220px !important;
  }
}

/* v8.0 corrective pass: restore Coming Soon portrait cards and remove the Tools-page section veil. */
.coming-soon-page .future-project-grid .future-project-card > img,
.coming-soon-page .future-project-card > img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  display: block !important;
  flex: 0 0 auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #050505 !important;
  border-bottom: 1px solid rgba(var(--game-accent-rgb, 232, 93, 4), 0.24) !important;
  box-shadow: inset 0 -36px 56px rgba(0, 0, 0, 0.36) !important;
}

.coming-soon-page .future-project-card--tools > img,
.coming-soon-page .future-project-card--books > img {
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  .coming-soon-page .future-project-grid .future-project-card > img,
  .coming-soon-page .future-project-card > img {
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
  }
}

.tools-page .page-hero--tools::after,
.tools-page .page-hero::after {
  height: clamp(230px, 32svh, 420px) !important;
  bottom: -1px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.10) 28%,
      rgba(13,13,13,0.42) 58%,
      rgba(13,13,13,0.78) 82%,
      rgba(13,13,13,0.98) 100%),
    url('../images/background_texture.webp') repeat !important;
  background-size: 100% 100%, 1024px 1024px !important;
  background-position: center top, center top !important;
}

.tools-page .page-hero + section,
.tools-page .tools-layout {
  background: transparent !important;
}

.tools-page .page-hero + section {
  margin-top: -1px !important;
  padding-top: clamp(4rem, 7vw, 6.4rem) !important;
}

body.tools-page {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
}


/* v8.1 screenshot-led layout correction.
   Coming Soon cards now use the same image tray behaviour as the main Games catalogue:
   a controlled landscape tray with portrait artwork contained inside it, rather than
   full-height portrait artwork filling the whole card. This keeps the block images
   visually consistent with the Games page while preserving the supplied portrait files. */
.coming-soon-page .future-project-grid {
  align-items: stretch !important;
}

.coming-soon-page .future-project-card {
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.coming-soon-page .future-project-grid .future-project-card > img,
.coming-soon-page .future-project-card > img {
  width: 100% !important;
  height: clamp(190px, 14vw, 230px) !important;
  min-height: 190px !important;
  max-height: 230px !important;
  aspect-ratio: auto !important;
  display: block !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.55rem !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(var(--game-accent-rgb, 232, 93, 4), 0.16), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,0.025), rgba(0,0,0,0.16)),
    #050505 !important;
  border-bottom: 1px solid rgba(var(--game-accent-rgb, 232, 93, 4), 0.24) !important;
  box-shadow: inset 0 -30px 48px rgba(0, 0, 0, 0.36) !important;
}

.coming-soon-page .future-project-card--tools > img,
.coming-soon-page .future-project-card--books > img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.55rem !important;
}

.coming-soon-page .future-project-card .game-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.coming-soon-page .future-project-card .btn {
  margin-top: auto !important;
  align-self: flex-start !important;
}

@media (max-width: 760px) {
  .coming-soon-page .future-project-grid .future-project-card > img,
  .coming-soon-page .future-project-card > img {
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
  }
}

/* v8.1 Tools page correction.
   Remove the opaque section veil, let the tools sit directly over the shared wallpaper,
   and fade the Tools header image itself into the wallpaper using a mask rather than
   a mismatched hard overlay at the bottom edge. */
body.tools-page {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
}

.tools-page .page-hero--tools {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
  overflow: hidden !important;
}

.tools-page .page-hero--tools::before {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 60%,
    rgba(0,0,0,0.86) 72%,
    rgba(0,0,0,0.40) 88%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 60%,
    rgba(0,0,0,0.86) 72%,
    rgba(0,0,0,0.40) 88%,
    transparent 100%) !important;
}

.tools-page .page-hero--tools::after,
.tools-page .page-hero::after {
  display: none !important;
  content: none !important;
}

.tools-page .page-hero + section,
.tools-page .tools-layout {
  background: transparent !important;
  background-image: none !important;
}

.tools-page .page-hero + section {
  margin-top: 0 !important;
  padding-top: clamp(4rem, 7vw, 6.4rem) !important;
}

.tools-page .tool-panel {
  background: linear-gradient(145deg, rgba(5,5,5,0.48), rgba(0,0,0,0.26)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-left: 4px solid rgba(232,93,4,0.58) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.32) !important;
}

/* v8.2 header/banner replacement and homepage portrait-card correction.
   Replaces the Wheel of Time and Coming Soon page banners, keeps both in the
   shared wide banner footprint, and fades their lower edge into the site wallpaper. */
:root {
  --supplied-banner-ratio: 0.3998991427;
}

.coming-soon-page .page-hero--coming-soon,
.wheel-of-time-page .page-hero--wheel-of-time {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
  overflow: hidden !important;
}

.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before,
.wheel-of-time-page .page-hero--wheel-of-time::before,
.page-hero--wheel-of-time::before {
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 58%,
    rgba(0,0,0,0.88) 72%,
    rgba(0,0,0,0.42) 88%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 58%,
    rgba(0,0,0,0.88) 72%,
    rgba(0,0,0,0.42) 88%,
    transparent 100%) !important;
}

.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.02) 42%, rgba(13,13,13,0.06) 70%, rgba(13,13,13,0.18) 100%),
    url('../images/coming-soon-banner.webp') !important;
}

.wheel-of-time-page .page-hero--wheel-of-time::before,
.page-hero--wheel-of-time::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.02) 36%, rgba(13,13,13,0.07) 68%, rgba(13,13,13,0.20) 100%),
    url('../images/wheel-of-time-banner.webp') !important;
}

.coming-soon-page .page-hero--coming-soon::after,
.wheel-of-time-page .page-hero--wheel-of-time::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(190px, 27svh, 340px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.10) 30%,
      rgba(13,13,13,0.46) 60%,
      rgba(13,13,13,0.86) 84%,
      rgba(13,13,13,0.98) 100%),
    url('../images/background_texture.webp') repeat !important;
  background-size: 100% 100%, 1024px 1024px !important;
  background-position: center top, center top !important;
}

/* Keep all Featured Games images on the home page in the same portrait footprint. */
.home-page .home-project-section--featured .home-project-card img {
  width: 132px !important;
  height: 198px !important;
  min-height: 198px !important;
  max-height: 198px !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.25rem !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--game-accent-rgb, 232, 93, 4),0.13), transparent 46%),
    #030303 !important;
}

.home-page .world-card--alberenar-board-game,
.world-card--alberenar-board-game {
  --game-accent: #0ea98a;
  --game-accent-rgb: 14, 169, 138;
}

@media (max-width: 980px) {
  .home-page .home-project-section--featured .home-project-card img {
    width: min(180px, 62vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2 / 3 !important;
    justify-self: start !important;
  }
}

/* v8.3 correction: homepage button alignment and supplied banner blending.
   These overrides keep the Featured Games card buttons anchored consistently,
   and prevent the Coming Soon / Wheel of Time supplied banners from ending in
   a hard visual cut against the shared stone wallpaper. */

.home-page .home-project-grid--six {
  align-items: stretch !important;
}

.home-page .home-project-section--featured .home-project-card {
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.home-page .home-project-section--featured .home-project-card > div {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.home-page .home-project-section--featured .home-project-card .card-link-button {
  margin-top: auto !important;
  align-self: center !important;
}

/* Preserve a consistent portrait footprint for every Featured Games image. */
.home-page .home-project-section--featured .home-project-card > img {
  flex: 0 0 auto !important;
  width: 132px !important;
  height: 198px !important;
  min-height: 198px !important;
  max-height: 198px !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.25rem !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--game-accent-rgb, 232, 93, 4),0.13), transparent 46%),
    #030303 !important;
}

/* The supplied banners are 1983 × 793, so this keeps their intended depth
   without flattening them into a narrow strip. The bottom fades through the
   actual wallpaper texture rather than stopping abruptly. */
.coming-soon-page .page-hero--coming-soon,
.wheel-of-time-page .page-hero--wheel-of-time {
  min-height: clamp(520px, 39.99vw, 860px) !important;
  padding-top: clamp(3rem, 5vw, 5rem) !important;
  padding-bottom: clamp(7rem, 10vw, 10rem) !important;
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before,
.wheel-of-time-page .page-hero--wheel-of-time::before,
.page-hero--wheel-of-time::before {
  inset: 0 !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 64%,
    rgba(0,0,0,0.92) 74%,
    rgba(0,0,0,0.54) 88%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 64%,
    rgba(0,0,0,0.92) 74%,
    rgba(0,0,0,0.54) 88%,
    transparent 100%) !important;
}

.coming-soon-page .page-hero--coming-soon::before,
.page-hero--coming-soon::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.04) 45%, rgba(13,13,13,0.08) 72%, rgba(13,13,13,0.24) 100%),
    url('../images/coming-soon-banner.webp') !important;
}

.wheel-of-time-page .page-hero--wheel-of-time::before,
.page-hero--wheel-of-time::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.04) 45%, rgba(13,13,13,0.08) 72%, rgba(13,13,13,0.24) 100%),
    url('../images/wheel-of-time-banner.webp') !important;
}

.coming-soon-page .page-hero--coming-soon::after,
.wheel-of-time-page .page-hero--wheel-of-time::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(220px, 28vw, 420px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.16) 28%,
      rgba(13,13,13,0.48) 58%,
      rgba(13,13,13,0.88) 84%,
      rgba(13,13,13,0.98) 100%),
    url('../images/background_texture.webp') repeat !important;
  background-size: 100% 100%, 1024px 1024px !important;
  background-position: center top, center top !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.32) 22%, #000 72%, #000 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.32) 22%, #000 72%, #000 100%) !important;
}

.coming-soon-page .page-hero + section,
.wheel-of-time-page .page-hero + section {
  margin-top: 0 !important;
  padding-top: clamp(4rem, 7vw, 6rem) !important;
  background: url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
}

@media (max-width: 980px) {
  .home-page .home-project-section--featured .home-project-card > img {
    width: min(180px, 62vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2 / 3 !important;
    align-self: flex-start !important;
  }

  .coming-soon-page .page-hero--coming-soon,
  .wheel-of-time-page .page-hero--wheel-of-time {
    min-height: clamp(440px, 58vw, 620px) !important;
    padding-bottom: clamp(5.5rem, 12vw, 8rem) !important;
  }
}

/* v8.4 corrective pass: Wheel of Time header banner is code-only/layout-only.
   Uses the supplied clean banner at its natural 1926 x 817 aspect ratio,
   removes the previous side padding, prevents bottom cropping, and moves the
   fade to the true lower edge of the banner so it blends into the wallpaper. */
.wheel-of-time-page .page-hero--wheel-of-time {
  margin-top: 0 !important;
  min-height: max(520px, calc(100vw * 0.424195223)) !important;
  height: max(520px, calc(100vw * 0.424195223)) !important;
  max-height: none !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(4.8rem, 7svh, 6.4rem) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.wheel-of-time-page .page-hero--wheel-of-time::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background-color: #0d0d0d !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.06) 0%,
      rgba(0,0,0,0.02) 36%,
      rgba(13,13,13,0.07) 72%,
      rgba(13,13,13,0.22) 100%),
    url('../images/wheel-of-time-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}

.wheel-of-time-page .page-hero--wheel-of-time::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(190px, 24svh, 330px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0) 28%,
      rgba(13,13,13,0.12) 58%,
      rgba(13,13,13,0.54) 84%,
      rgba(13,13,13,0.97) 100%) !important;
}

.wheel-of-time-page .page-hero--wheel-of-time + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.97) 0%,
      rgba(13,13,13,0.66) 88px,
      rgba(13,13,13,0.20) 235px,
      rgba(13,13,13,0) 380px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

.wheel-of-time-page .page-hero--wheel-of-time .page-hero-content .eyebrow,
.wheel-of-time-page .page-hero--wheel-of-time .page-hero-content h1,
.wheel-of-time-page .page-hero--wheel-of-time .page-hero-content p,
.wheel-of-time-page .page-hero--wheel-of-time .page-hero-content p:not(.eyebrow) {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.96), 0 0 24px rgba(0,0,0,0.78) !important;
}

@media (max-width: 760px) {
  .wheel-of-time-page .page-hero--wheel-of-time {
    min-height: clamp(430px, 72svh, 620px) !important;
    height: clamp(430px, 72svh, 620px) !important;
    padding-top: 2.8rem !important;
    padding-bottom: 4.6rem !important;
  }

  .wheel-of-time-page .page-hero--wheel-of-time::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }
}

/* v8.5 code-only banner blend correction.
   This pass does not alter or regenerate artwork. It corrects how the existing
   banner files are placed, masked, and blended into the shared stone wallpaper. */
:root {
  --ifs-wallpaper: url('../images/background_texture.webp');
  --ifs-wallpaper-size: 600px 600px;
}

/* Shared repair for the pages that were ending in a visible hard line.
   Tools, Downloads, and Contact are deliberately excluded because their current
   header blends were already approved. */
.games-page .page-hero--games,
.lore-page .page-hero--lore,
.forum-page .page-hero--forum,
.coming-soon-page .page-hero--coming-soon,
.global-mandate-page .page-hero--global-mandate,
.pactsmiths-page .page-hero--pactsmiths,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.wheel-of-time-page .page-hero--wheel-of-time,
.alberenar-board-game-page .page-hero--alberenar-board-game,
.wounded-roads-page .page-hero--wounded-roads,
.about-page .page-hero--about {
  position: relative !important;
  background: #0d0d0d var(--ifs-wallpaper) repeat !important;
  background-size: var(--ifs-wallpaper-size) !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.games-page .page-hero--games::before,
.lore-page .page-hero--lore::before,
.forum-page .page-hero--forum::before,
.coming-soon-page .page-hero--coming-soon::before,
.global-mandate-page .page-hero--global-mandate::before,
.pactsmiths-page .page-hero--pactsmiths::before,
.no-safe-road-page .page-hero--no-safe-road::before,
.soundtracks-page .page-hero--soundtracks::before,
.wheel-of-time-page .page-hero--wheel-of-time::before,
.alberenar-board-game-page .page-hero--alberenar-board-game::before,
.wounded-roads-page .page-hero--wounded-roads::before,
.about-page .page-hero--about::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 57%,
    rgba(0,0,0,0.92) 70%,
    rgba(0,0,0,0.52) 86%,
    rgba(0,0,0,0.12) 96%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 57%,
    rgba(0,0,0,0.92) 70%,
    rgba(0,0,0,0.52) 86%,
    rgba(0,0,0,0.12) 96%,
    transparent 100%) !important;
}

.games-page .page-hero--games::after,
.lore-page .page-hero--lore::after,
.forum-page .page-hero--forum::after,
.coming-soon-page .page-hero--coming-soon::after,
.global-mandate-page .page-hero--global-mandate::after,
.pactsmiths-page .page-hero--pactsmiths::after,
.no-safe-road-page .page-hero--no-safe-road::after,
.soundtracks-page .page-hero--soundtracks::after,
.wheel-of-time-page .page-hero--wheel-of-time::after,
.alberenar-board-game-page .page-hero--alberenar-board-game::after,
.wounded-roads-page .page-hero--wounded-roads::after,
.about-page .page-hero--about::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -96px !important;
  height: clamp(310px, 34svh, 500px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.18) 20%,
      rgba(13,13,13,0.56) 48%,
      rgba(13,13,13,0.88) 68%,
      rgba(13,13,13,0.72) 82%,
      rgba(13,13,13,0.22) 94%,
      rgba(13,13,13,0) 100%),
    var(--ifs-wallpaper) repeat !important;
  background-size: 100% 100%, var(--ifs-wallpaper-size) !important;
  background-position: center top, center top !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

.games-page .page-hero--games .page-hero-content,
.lore-page .page-hero--lore .page-hero-content,
.forum-page .page-hero--forum .page-hero-content,
.coming-soon-page .page-hero--coming-soon .page-hero-content,
.global-mandate-page .page-hero--global-mandate .page-hero-content,
.pactsmiths-page .page-hero--pactsmiths .page-hero-content,
.no-safe-road-page .page-hero--no-safe-road .page-hero-content,
.soundtracks-page .page-hero--soundtracks .page-hero-content,
.wheel-of-time-page .page-hero--wheel-of-time .page-hero-content,
.alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content,
.wounded-roads-page .page-hero--wounded-roads .page-hero-content,
.about-page .page-hero--about .page-hero-content {
  position: relative !important;
  z-index: 3 !important;
}

.games-page .page-hero--games + section,
.lore-page .page-hero--lore + section,
.forum-page .page-hero--forum + section,
.coming-soon-page .page-hero--coming-soon + section,
.global-mandate-page .page-hero--global-mandate + section,
.pactsmiths-page .page-hero--pactsmiths + section,
.no-safe-road-page .page-hero--no-safe-road + section,
.soundtracks-page .page-hero--soundtracks + section,
.wheel-of-time-page .page-hero--wheel-of-time + section,
.alberenar-board-game-page .page-hero--alberenar-board-game + section,
.wounded-roads-page .page-hero--wounded-roads + section,
.about-page .page-hero--about + section {
  position: relative !important;
  z-index: 0 !important;
  margin-top: 0 !important;
  padding-top: clamp(5.2rem, 8vw, 7.6rem) !important;
  background: #0d0d0d var(--ifs-wallpaper) repeat !important;
  background-size: var(--ifs-wallpaper-size) !important;
}

/* Main catalogue headers. */
.games-page .page-hero--games {
  min-height: clamp(540px, 42.85vw, 870px) !important;
  height: clamp(540px, 42.85vw, 870px) !important;
  padding-top: clamp(3.4rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.4rem, 8svh, 7rem) !important;
}
.games-page .page-hero--games::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 38%, rgba(13,13,13,0.12) 72%, rgba(13,13,13,0.34) 100%),
    url('../images/hero-games.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
}

.lore-page .page-hero--lore {
  min-height: clamp(540px, 44.97vw, 890px) !important;
  height: clamp(540px, 44.97vw, 890px) !important;
  padding-top: clamp(3.4rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.4rem, 8svh, 7rem) !important;
}
.lore-page .page-hero--lore::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 38%, rgba(13,13,13,0.10) 72%, rgba(13,13,13,0.30) 100%),
    url('../images/hero-lore.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
}

.forum-page .page-hero--forum {
  min-height: clamp(520px, 32vw, 700px) !important;
  height: clamp(520px, 32vw, 700px) !important;
  padding-top: clamp(3.4rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.2rem, 8svh, 6.8rem) !important;
}
.forum-page .page-hero--forum::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.04) 38%, rgba(13,13,13,0.14) 72%, rgba(13,13,13,0.36) 100%),
    url('../images/hero-forum.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center top, center center !important;
}

/* Project banners with the shared 1983 x 793 banner ratio. */
.coming-soon-page .page-hero--coming-soon,
.pactsmiths-page .page-hero--pactsmiths,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.global-mandate-page .page-hero--global-mandate,
.alberenar-board-game-page .page-hero--alberenar-board-game {
  min-height: clamp(560px, 39.99vw, 860px) !important;
  height: clamp(560px, 39.99vw, 860px) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.4rem, 8svh, 7rem) !important;
}

.coming-soon-page .page-hero--coming-soon::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 40%, rgba(13,13,13,0.10) 72%, rgba(13,13,13,0.30) 100%),
    url('../images/coming-soon-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
}
.global-mandate-page .page-hero--global-mandate::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 40%, rgba(13,13,13,0.10) 72%, rgba(13,13,13,0.30) 100%),
    url('../images/global-mandate-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
}
.pactsmiths-page .page-hero--pactsmiths::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.01) 40%, rgba(13,13,13,0.08) 72%, rgba(13,13,13,0.28) 100%),
    url('../images/pactsmiths-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
}
.no-safe-road-page .page-hero--no-safe-road::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 40%, rgba(13,13,13,0.10) 72%, rgba(13,13,13,0.30) 100%),
    url('../images/no-safe-road-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
}
.soundtracks-page .page-hero--soundtracks::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.01) 40%, rgba(13,13,13,0.08) 72%, rgba(13,13,13,0.28) 100%),
    url('../images/soundtracks-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
}
.alberenar-board-game-page .page-hero--alberenar-board-game::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 40%, rgba(13,13,13,0.10) 72%, rgba(13,13,13,0.30) 100%),
    url('../images/alberenar-board-game-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
}

/* Wounded Roads uses taller source art: anchor to the top so the upper scene is not lost, and let the lower road disappear into the fade. */
.wounded-roads-page .page-hero--wounded-roads {
  min-height: clamp(560px, 41vw, 780px) !important;
  height: clamp(560px, 41vw, 780px) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.4rem, 8svh, 7rem) !important;
}
.wounded-roads-page .page-hero--wounded-roads::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.03) 38%, rgba(13,13,13,0.10) 70%, rgba(13,13,13,0.32) 100%),
    url('../images/wounded-roads-banner.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center top, center top !important;
}

/* About page: switch away from the half-circle artwork and use the cleaner logo banner, with side and bottom blending only. */
.about-page .page-hero--about {
  min-height: clamp(620px, 66svh, 820px) !important;
  height: auto !important;
  padding-top: clamp(3rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.5rem, 9svh, 7.5rem) !important;
  align-items: flex-start !important;
}
.about-page .page-hero--about::before {
  background-image:
    linear-gradient(to right, rgba(13,13,13,0.96) 0%, rgba(13,13,13,0.35) 12%, rgba(13,13,13,0.00) 28%, rgba(13,13,13,0.00) 72%, rgba(13,13,13,0.35) 88%, rgba(13,13,13,0.96) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.02) 44%, rgba(13,13,13,0.16) 76%, rgba(13,13,13,0.44) 100%),
    url('../images/about-banner-wide.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.55) 88%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.55) 88%, transparent 100%) !important;
}
.about-page .page-hero-content--under-logo {
  margin-top: clamp(360px, 40svh, 470px) !important;
  max-width: 1080px !important;
}

@media (max-width: 980px) {
  .games-page .page-hero--games,
  .lore-page .page-hero--lore,
  .forum-page .page-hero--forum,
  .coming-soon-page .page-hero--coming-soon,
  .global-mandate-page .page-hero--global-mandate,
  .pactsmiths-page .page-hero--pactsmiths,
  .no-safe-road-page .page-hero--no-safe-road,
  .soundtracks-page .page-hero--soundtracks,
  .wheel-of-time-page .page-hero--wheel-of-time,
  .alberenar-board-game-page .page-hero--alberenar-board-game,
  .wounded-roads-page .page-hero--wounded-roads {
    min-height: 480px !important;
    height: auto !important;
    padding-top: 3rem !important;
    padding-bottom: 5.5rem !important;
    overflow: hidden !important;
  }

  .games-page .page-hero--games::before,
  .lore-page .page-hero--lore::before,
  .forum-page .page-hero--forum::before,
  .coming-soon-page .page-hero--coming-soon::before,
  .global-mandate-page .page-hero--global-mandate::before,
  .pactsmiths-page .page-hero--pactsmiths::before,
  .no-safe-road-page .page-hero--no-safe-road::before,
  .soundtracks-page .page-hero--soundtracks::before,
  .wheel-of-time-page .page-hero--wheel-of-time::before,
  .alberenar-board-game-page .page-hero--alberenar-board-game::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }

  .about-page .page-hero--about {
    min-height: 620px !important;
    overflow: hidden !important;
  }

  .about-page .page-hero--about::before {
    background-size: 100% 100%, 100% 100%, cover !important;
    background-position: center center, center center, center center !important;
  }

  .about-page .page-hero-content--under-logo {
    margin-top: 315px !important;
  }
}

/* v8.5 about-page final adjustment: keep the cleaner studio mark contained and blended, rather than cropped wide. */
.about-page .page-hero--about::before {
  background-size: 100% 100%, 100% 100%, auto 100% !important;
  background-position: center center, center center, center center !important;
}
.about-page .page-hero-content--under-logo {
  margin-top: clamp(465px, 58svh, 560px) !important;
}
@media (max-width: 980px) {
  .about-page .page-hero--about::before {
    background-size: 100% 100%, 100% 100%, auto 100% !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: 430px !important;
  }
}

/* v8.6 final banner blend and filtering correction
   -------------------------------------------------
   This block intentionally overrides the previous experimental banner passes.
   It does not modify or regenerate artwork; it only controls layout, cropping,
   bottom blending, content spacing and filter visibility. */

/* Make hidden filter results truly disappear even when card classes set display:grid/flex. */
[hidden],
.archive-entry[hidden],
.download-card[hidden],
.is-filtered-out {
  display: none !important;
}

/* A shared wallpaper reveal at the bottom of problematic banners. The hero art
   fades into the same stone wallpaper used by the body instead of ending in a
   black cut-line. */
.games-page .page-hero,
.lore-page .page-hero,
.forum-page .page-hero,
.coming-soon-page .page-hero,
.wounded-roads-page .page-hero,
.pactsmiths-page .page-hero,
.no-safe-road-page .page-hero,
.soundtracks-page .page-hero,
.wheel-of-time-page .page-hero,
.about-page .page-hero {
  overflow: hidden !important;
  isolation: isolate !important;
  background: transparent !important;
}

.games-page .page-hero::after,
.lore-page .page-hero::after,
.forum-page .page-hero::after,
.coming-soon-page .page-hero::after,
.wounded-roads-page .page-hero::after,
.pactsmiths-page .page-hero::after,
.no-safe-road-page .page-hero::after,
.soundtracks-page .page-hero::after,
.wheel-of-time-page .page-hero::after,
.about-page .page-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -2px !important;
  height: clamp(170px, 22vw, 310px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 1 !important;
  background-image:
    linear-gradient(to bottom,
      rgba(13,13,13,0.00) 0%,
      rgba(13,13,13,0.08) 25%,
      rgba(13,13,13,0.30) 52%,
      rgba(13,13,13,0.58) 76%,
      rgba(13,13,13,0.74) 100%),
    url('../images/background_texture.webp') !important;
  background-size: 100% 100%, 600px 600px !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center bottom, center top !important;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.18) 18%,
    rgba(0,0,0,0.55) 46%,
    rgba(0,0,0,0.90) 76%,
    #000 100%) !important;
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.18) 18%,
    rgba(0,0,0,0.55) 46%,
    rgba(0,0,0,0.90) 76%,
    #000 100%) !important;
}

/* Stop the section below the hero from reintroducing an opaque dark band. */
.games-page .page-hero + section,
.lore-page .page-hero + section,
.forum-page .page-hero + section,
.coming-soon-page .page-hero + section,
.wounded-roads-page .page-hero + section,
.pactsmiths-page .page-hero + section,
.no-safe-road-page .page-hero + section,
.soundtracks-page .page-hero + section,
.wheel-of-time-page .page-hero + section,
.about-page .page-hero + section {
  margin-top: -2px !important;
  background: url('../images/background_texture.webp') repeat !important;
  background-size: 600px 600px !important;
}

/* General catalogue and archive headers: preserve more lower artwork while still
   making the join soft. */
.games-page .page-hero,
.lore-page .page-hero {
  min-height: clamp(570px, 41vw, 820px) !important;
  height: clamp(570px, 41vw, 820px) !important;
  padding-top: clamp(3rem, 5.5svh, 4.8rem) !important;
  padding-bottom: clamp(5.2rem, 7.5svh, 6.8rem) !important;
}
.games-page .page-hero::before,
.lore-page .page-hero::before {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
.games-page .page-hero::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0.03) 44%,
      rgba(13,13,13,0.22) 82%,
      rgba(13,13,13,0.42) 100%),
    url('../images/hero-games.webp') !important;
}
.lore-page .page-hero::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.06) 0%,
      rgba(0,0,0,0.02) 44%,
      rgba(13,13,13,0.18) 82%,
      rgba(13,13,13,0.36) 100%),
    url('../images/hero-lore.webp') !important;
}

/* Shared wide game banners. */
.coming-soon-page .page-hero--coming-soon,
.pactsmiths-page .page-hero--pactsmiths,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.wheel-of-time-page .page-hero--wheel-of-time {
  min-height: clamp(565px, 40vw, 850px) !important;
  height: clamp(565px, 40vw, 850px) !important;
  padding-top: clamp(3rem, 5.5svh, 4.8rem) !important;
  padding-bottom: clamp(5.2rem, 7.5svh, 6.8rem) !important;
}
.coming-soon-page .page-hero--coming-soon::before,
.pactsmiths-page .page-hero--pactsmiths::before,
.no-safe-road-page .page-hero--no-safe-road::before,
.soundtracks-page .page-hero--soundtracks::before,
.wheel-of-time-page .page-hero--wheel-of-time::before {
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center center !important;
}
.coming-soon-page .page-hero--coming-soon::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 45%, rgba(13,13,13,0.18) 82%, rgba(13,13,13,0.38) 100%),
    url('../images/coming-soon-banner.webp') !important;
}
.pactsmiths-page .page-hero--pactsmiths::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.01) 45%, rgba(13,13,13,0.16) 82%, rgba(13,13,13,0.34) 100%),
    url('../images/pactsmiths-banner.webp') !important;
}
.no-safe-road-page .page-hero--no-safe-road::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 45%, rgba(13,13,13,0.18) 82%, rgba(13,13,13,0.38) 100%),
    url('../images/no-safe-road-banner.webp') !important;
}
.soundtracks-page .page-hero--soundtracks::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.01) 45%, rgba(13,13,13,0.14) 82%, rgba(13,13,13,0.32) 100%),
    url('../images/soundtracks-banner.webp') !important;
}
.wheel-of-time-page .page-hero--wheel-of-time::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 45%, rgba(13,13,13,0.18) 82%, rgba(13,13,13,0.36) 100%),
    url('../images/wheel-of-time-banner.webp') !important;
}

/* Wounded Roads: show the upper road/figure area instead of cropping it away. */
.wounded-roads-page .page-hero--wounded-roads {
  min-height: clamp(600px, 44vw, 860px) !important;
  height: clamp(600px, 44vw, 860px) !important;
  padding-top: clamp(3rem, 5.5svh, 4.8rem) !important;
  padding-bottom: clamp(5.2rem, 7.5svh, 6.8rem) !important;
}
.wounded-roads-page .page-hero--wounded-roads::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.09) 0%, rgba(0,0,0,0.03) 42%, rgba(13,13,13,0.18) 78%, rgba(13,13,13,0.38) 100%),
    url('../images/wounded-roads-banner.webp') !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center top, center top !important;
}

/* Forum: the source artwork has a built-in horizontal panel. Lower its visual
   prominence and keep the footer transition soft. */
.forum-page .page-hero--forum {
  min-height: clamp(520px, 34vw, 720px) !important;
  height: clamp(520px, 34vw, 720px) !important;
  padding-top: clamp(3rem, 5svh, 4.6rem) !important;
  padding-bottom: clamp(5.5rem, 8svh, 7rem) !important;
}
.forum-page .page-hero--forum::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.58) 0%,
      rgba(0,0,0,0.42) 36%,
      rgba(0,0,0,0.56) 62%,
      rgba(13,13,13,0.54) 82%,
      rgba(13,13,13,0.68) 100%),
    url('../images/hero-forum.webp') !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center center !important;
}

/* About: keep the studio mark clear, remove the side-block/half-circle feel,
   and place the page text beneath the logo rather than across it. */
.about-page .page-hero--about {
  min-height: clamp(800px, 78svh, 940px) !important;
  height: auto !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: clamp(3rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.6rem, 9svh, 7.5rem) !important;
}
.about-page .page-hero--about::before {
  background-image:
    linear-gradient(to right,
      rgba(13,13,13,0.98) 0%,
      rgba(13,13,13,0.78) 9%,
      rgba(13,13,13,0.20) 24%,
      rgba(13,13,13,0.00) 42%,
      rgba(13,13,13,0.00) 58%,
      rgba(13,13,13,0.20) 76%,
      rgba(13,13,13,0.78) 91%,
      rgba(13,13,13,0.98) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.04) 48%,
      rgba(13,13,13,0.28) 76%,
      rgba(13,13,13,0.58) 100%),
    url('../images/about-banner-wide.webp') !important;
  background-size: 100% 100%, 100% 100%, auto 88% !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center center, center center, center 10% !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.about-page .page-hero-content--under-logo {
  margin-top: clamp(570px, 57svh, 655px) !important;
  max-width: 1080px !important;
}
.about-page .page-hero-content--under-logo h1 {
  margin-bottom: 1rem !important;
}
.about-page .page-hero-content--under-logo p:not(.eyebrow) {
  max-width: 980px !important;
}

/* Keep the already-good Tools/Downloads/Contact headers intact, but pull their
   content grids slightly higher as requested. */
.tools-page .page-hero + section,
.downloads-page .page-hero + section {
  padding-top: clamp(2.4rem, 4.5vw, 4rem) !important;
}

@media (max-width: 980px) {
  .games-page .page-hero,
  .lore-page .page-hero,
  .forum-page .page-hero,
  .coming-soon-page .page-hero,
  .wounded-roads-page .page-hero,
  .pactsmiths-page .page-hero,
  .no-safe-road-page .page-hero,
  .soundtracks-page .page-hero,
  .wheel-of-time-page .page-hero {
    min-height: 500px !important;
    height: auto !important;
    padding-top: 3rem !important;
    padding-bottom: 5.5rem !important;
  }
  .about-page .page-hero--about {
    min-height: 700px !important;
  }
  .about-page .page-hero--about::before {
    background-size: 100% 100%, 100% 100%, auto 74% !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: 480px !important;
  }
}

/* v8.7 banner seam correction and Lore filter hardening
   ------------------------------------------------------
   This is a code-only repair. It avoids image regeneration and fixes the
   visible hard join by fading the banner artwork itself to transparency,
   revealing the existing page wallpaper underneath rather than covering the
   join with a separate reset wallpaper layer. */

/* Pages that need the soft artwork-to-wallpaper transition. Tools, Downloads
   and Contact are deliberately excluded because their blends are already good. */
.games-page .page-hero,
.lore-page .page-hero,
.lore-detail-page .page-hero,
.forum-page .page-hero,
.coming-soon-page .page-hero,
.wounded-roads-page .page-hero,
.pactsmiths-page .page-hero,
.no-safe-road-page .page-hero,
.soundtracks-page .page-hero,
.wheel-of-time-page .page-hero,
.about-page .page-hero {
  background: transparent !important;
  background-color: transparent !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Let the body wallpaper continue naturally under the following section. This
   prevents the repeating texture from restarting at the exact hero boundary. */
.games-page .page-hero + section,
.lore-page .page-hero + section,
.lore-detail-page .page-hero + section,
.forum-page .page-hero + section,
.coming-soon-page .page-hero + section,
.wounded-roads-page .page-hero + section,
.pactsmiths-page .page-hero + section,
.no-safe-road-page .page-hero + section,
.soundtracks-page .page-hero + section,
.wheel-of-time-page .page-hero + section,
.about-page .page-hero + section {
  background: transparent !important;
  background-color: transparent !important;
  margin-top: 0 !important;
}

/* Fade the actual banner artwork out at the bottom instead of placing a dark
   slab over it. The wallpaper below is therefore visible through the fade. */
.games-page .page-hero::before,
.lore-page .page-hero::before,
.lore-detail-page .page-hero::before,
.forum-page .page-hero::before,
.coming-soon-page .page-hero::before,
.wounded-roads-page .page-hero::before,
.pactsmiths-page .page-hero::before,
.no-safe-road-page .page-hero::before,
.soundtracks-page .page-hero::before,
.wheel-of-time-page .page-hero::before,
.about-page .page-hero::before {
  z-index: 0 !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 58%,
    rgba(0,0,0,0.92) 70%,
    rgba(0,0,0,0.62) 82%,
    rgba(0,0,0,0.24) 93%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 58%,
    rgba(0,0,0,0.92) 70%,
    rgba(0,0,0,0.62) 82%,
    rgba(0,0,0,0.24) 93%,
    transparent 100%) !important;
}

/* Keep only a very gentle low-end darkening. This no longer carries a wallpaper
   image and therefore cannot create a hard texture seam. */
.games-page .page-hero::after,
.lore-page .page-hero::after,
.lore-detail-page .page-hero::after,
.forum-page .page-hero::after,
.coming-soon-page .page-hero::after,
.wounded-roads-page .page-hero::after,
.pactsmiths-page .page-hero::after,
.no-safe-road-page .page-hero::after,
.soundtracks-page .page-hero::after,
.wheel-of-time-page .page-hero::after,
.about-page .page-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: clamp(120px, 15vw, 230px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 1 !important;
  background: linear-gradient(to bottom,
    rgba(13,13,13,0.00) 0%,
    rgba(13,13,13,0.10) 55%,
    rgba(13,13,13,0.18) 100%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Give catalogue/lore headers enough vertical room for the fade to complete
   before the next section begins. */
.games-page .page-hero,
.lore-page .page-hero,
.lore-detail-page .page-hero {
  min-height: clamp(620px, 44vw, 880px) !important;
  height: clamp(620px, 44vw, 880px) !important;
}

/* Game/project pages use the same safe banner behaviour. */
.coming-soon-page .page-hero,
.wounded-roads-page .page-hero,
.pactsmiths-page .page-hero,
.no-safe-road-page .page-hero,
.soundtracks-page .page-hero,
.wheel-of-time-page .page-hero {
  min-height: clamp(610px, 43vw, 880px) !important;
  height: clamp(610px, 43vw, 880px) !important;
}

/* Wounded Roads needs the image anchored higher so the upper road/figure area is
   retained while still fading properly at the bottom. */
.wounded-roads-page .page-hero--wounded-roads::before {
  background-position: center top, center top !important;
}

/* Forum artwork contains a built-in horizontal panel; reduce its impact without
   replacing the image. */
.forum-page .page-hero--forum {
  min-height: clamp(570px, 38vw, 760px) !important;
  height: clamp(570px, 38vw, 760px) !important;
}
.forum-page .page-hero--forum::before {
  filter: brightness(0.48) saturate(0.78) contrast(0.96) !important;
  background-position: center 48%, center 48% !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 50%,
    rgba(0,0,0,0.88) 64%,
    rgba(0,0,0,0.56) 80%,
    rgba(0,0,0,0.20) 93%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 50%,
    rgba(0,0,0,0.88) 64%,
    rgba(0,0,0,0.56) 80%,
    rgba(0,0,0,0.20) 93%,
    transparent 100%) !important;
}

/* About page: fill the width with the logo banner, soften the sides through the
   source artwork and move all page text below the logo/title artwork. */
.about-page .page-hero--about {
  min-height: clamp(960px, 92svh, 1100px) !important;
  height: auto !important;
  padding-top: clamp(3.5rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.5rem, 8svh, 7rem) !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
.about-page .page-hero--about::before {
  background-image:
    linear-gradient(to right,
      rgba(13,13,13,0.64) 0%,
      rgba(13,13,13,0.18) 12%,
      rgba(13,13,13,0.00) 34%,
      rgba(13,13,13,0.00) 66%,
      rgba(13,13,13,0.18) 88%,
      rgba(13,13,13,0.64) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.02) 58%,
      rgba(13,13,13,0.22) 80%,
      rgba(13,13,13,0.50) 100%),
    url('../images/about-banner-wide.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center center, center center, center top !important;
}
.about-page .page-hero-content--under-logo {
  margin-top: clamp(730px, 73svh, 820px) !important;
  max-width: 1050px !important;
}
.about-page .page-hero-content--under-logo .eyebrow,
.about-page .page-hero-content--under-logo h1,
.about-page .page-hero-content--under-logo p {
  position: relative !important;
  z-index: 3 !important;
}

/* Hard fallback for hidden Lore cards, used by the script as well. */
.lore-page .archive-entry[hidden],
.lore-page .archive-entry.is-filtered-out,
.lore-page .archive-entry.lore-force-hidden {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 980px) {
  .games-page .page-hero,
  .lore-page .page-hero,
  .lore-detail-page .page-hero,
  .forum-page .page-hero,
  .coming-soon-page .page-hero,
  .wounded-roads-page .page-hero,
  .pactsmiths-page .page-hero,
  .no-safe-road-page .page-hero,
  .soundtracks-page .page-hero,
  .wheel-of-time-page .page-hero {
    min-height: 520px !important;
    height: auto !important;
  }
  .about-page .page-hero--about {
    min-height: 850px !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: 620px !important;
  }
}

/* v8.8 targeted corrections: About Us scale/text clearance and Forum banner band softening. */
.about-page .page-hero--about {
  min-height: clamp(860px, 86svh, 1040px) !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.about-page .page-hero--about::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(13,13,13,0.50)),
    url('../images/hero-about.webp') !important;
  background-size: min(1840px, 88vw) auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: #050505 !important;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 9%, #000 91%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 9%, #000 91%, rgba(0,0,0,0) 100%);
}

.about-page .page-hero-content--under-logo {
  margin-top: clamp(615px, 66svh, 745px) !important;
  max-width: 1040px !important;
}

.about-page .page-hero-content--under-logo .eyebrow,
.about-page .page-hero-content--under-logo h1,
.about-page .page-hero-content--under-logo p:not(.eyebrow) {
  text-shadow: 0 3px 20px rgba(0,0,0,0.92), 0 1px 4px rgba(0,0,0,0.95) !important;
}

.page-hero--forum::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(13,13,13,0.44)),
    url('../images/hero-forum-v88.webp') !important;
  background-position: center center !important;
  background-size: cover !important;
}

.forum-page .page-hero::after {
  height: clamp(170px, 26svh, 310px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.14) 38%,
      rgba(13,13,13,0.56) 76%,
      rgba(13,13,13,0.96) 100%) !important;
}

@media (max-width: 1180px) {
  .about-page .page-hero--about {
    min-height: clamp(820px, 88svh, 980px) !important;
  }
  .about-page .page-hero--about::before {
    background-size: min(1560px, 96vw) auto !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: clamp(560px, 66svh, 690px) !important;
  }
}

@media (max-width: 760px) {
  .about-page .page-hero--about {
    min-height: 780px !important;
  }
  .about-page .page-hero--about::before {
    background-size: 1180px auto !important;
  }
  .about-page .page-hero-content--under-logo {
    margin-top: 520px !important;
  }
}

/* v8.9 targeted refinement pass.
   Keeps the approved v8.8/v8.7 banner blending intact while correcting the remaining page-specific issues. */

/* Main tab hero-copy alignment: bring the low pages closer to the midline used by Games and Lore. */
.tools-page .page-hero-content {
  transform: translateY(-92px) !important;
}
.downloads-page .page-hero-content,
.contact-page .page-hero-content {
  transform: translateY(-48px) !important;
}

/* Tools content was sitting a little too far beneath the hero. */
.tools-page .tools-layout {
  padding-top: clamp(2.2rem, 4vw, 3.6rem) !important;
}

/* About Us: remove the semi-circle from the hero artwork entirely, use the real logo as a separate element,
   and keep the title text below it rather than across it. */
.about-page .page-hero--about {
  min-height: clamp(610px, 66svh, 780px) !important;
  padding-top: clamp(2.1rem, 4.5svh, 3.8rem) !important;
  padding-bottom: clamp(4.5rem, 8svh, 6.4rem) !important;
  align-items: center !important;
  justify-content: center !important;
}
.about-page .page-hero--about::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(13,13,13,0.58)),
    url('../images/hero-about-v89.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.about-page .page-hero-content--under-logo {
  margin-top: 0 !important;
  max-width: 1120px !important;
}
.about-hero-logo {
  display: block !important;
  width: clamp(310px, 23vw, 455px) !important;
  height: auto !important;
  margin: 0 auto clamp(1.05rem, 2svh, 1.55rem) !important;
  filter: drop-shadow(0 0 18px rgba(255,186,8,0.18)) drop-shadow(0 16px 32px rgba(0,0,0,0.72)) !important;
}
.about-page .page-hero-content--under-logo .eyebrow {
  margin-top: 0 !important;
  margin-bottom: 0.45rem !important;
}
.about-page .page-hero-content--under-logo h1 {
  margin-bottom: 0.95rem !important;
}

/* Forum: use the corrected local banner asset, lighten the page a little, and keep the middle band subdued. */
.forum-page .page-hero--forum::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.04), rgba(13,13,13,0.46)),
    url('../images/hero-forum-v89.webp') !important;
  background-position: center center, center center !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat, no-repeat !important;
}
.forum-page .page-hero--forum::after {
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.16) 34%,
      rgba(13,13,13,0.58) 70%,
      rgba(13,13,13,0.96) 100%) !important;
}
.forum-page .section-subheading {
  color: rgba(255,255,255,0.92) !important;
}

/* Lore archive project ownership: this entry belongs to Alberenar, not the orange generic board-game family. */
.archive-entry[data-tags~="alberenar-board-game"] {
  --section-accent: #8f5cff !important;
  --section-accent-rgb: 143, 92, 255 !important;
}

@media (max-width: 760px) {
  .tools-page .page-hero-content,
  .downloads-page .page-hero-content,
  .contact-page .page-hero-content {
    transform: none !important;
  }
  .about-page .page-hero--about {
    min-height: 620px !important;
  }
  .about-hero-logo {
    width: min(78vw, 340px) !important;
  }
}

/* v8.9 size safeguard: keep the About logo prominent without forcing the title to the bottom of the banner. */
.about-hero-logo {
  width: clamp(300px, 19vw, 390px) !important;
}
@media (max-width: 760px) {
  .about-hero-logo {
    width: min(78vw, 340px) !important;
  }
}

/* v9.0 final targeted polish.
   About Us is intentionally left untouched from the approved v8.9 state. */

/* Bring Tools and Downloads hero copy closer to the visual centre of their wide banners. */
.tools-page .page-hero--tools .page-hero-content {
  transform: translateY(-150px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.downloads-page .page-hero--downloads .page-hero-content {
  transform: translateY(-96px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep the approved Tools/Downloads layout intact, just slightly tightening the opening content spacing. */
.tools-page .tools-layout {
  padding-top: clamp(1.8rem, 3.4vw, 3rem) !important;
}
.downloads-page .page-hero + section {
  padding-top: clamp(3.2rem, 5.8vw, 5.4rem) !important;
}

/* Forum: replace the problematic banner artwork with a cleaned local asset, remove the brown mid-band,
   and keep the page readable without over-darkening the art. */
.forum-page .page-hero--forum::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.02) 42%,
      rgba(13,13,13,0.10) 72%,
      rgba(13,13,13,0.26) 100%),
    url('../images/hero-forum-v90-clean.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}
.forum-page .page-hero--forum::after {
  height: clamp(190px, 27svh, 330px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.10) 34%,
      rgba(13,13,13,0.44) 72%,
      rgba(13,13,13,0.94) 100%) !important;
}
.forum-page .section-subheading,
.forum-page .forum-sections-section > p.section-subheading {
  color: #ffffff !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .tools-page .page-hero--tools .page-hero-content,
  .downloads-page .page-hero--downloads .page-hero-content {
    transform: none !important;
  }
}

/* v9.1 final small alignment and text-colour corrections.
   About layout is locked from v9.0; only the requested text colour is changed. */

/* Downloads: nudge the banner copy and opening library area up very slightly. */
.downloads-page .page-hero--downloads .page-hero-content {
  transform: translateY(-112px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.downloads-page .page-hero + section {
  padding-top: clamp(2.8rem, 5.2vw, 4.9rem) !important;
}

/* Contact: nudge the banner copy up marginally towards visual centre. */
.contact-page .page-hero--contact .page-hero-content {
  transform: translateY(-64px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Forum: keep the approved banner artwork, but force the small heading and description to white. */
.forum-page .page-hero--forum .eyebrow,
.forum-page .page-hero--forum .page-hero-content > p {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* About Us: preserve the locked layout, changing only the requested text colour. */
.about-page .page-hero-content--under-logo > .eyebrow,
.about-page .page-hero-content--under-logo > p:not(.eyebrow) {
  color: #ffffff !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .downloads-page .page-hero--downloads .page-hero-content,
  .contact-page .page-hero--contact .page-hero-content {
    transform: none !important;
  }
}

/* v9.2 targeted hero-copy alignment.
   Only Tools, Downloads, and Contact are adjusted here.
   About Us remains locked from v9.1. */
.tools-page .page-hero--tools .page-hero-content {
  transform: translateY(-205px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.downloads-page .page-hero--downloads .page-hero-content {
  transform: translateY(-148px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.contact-page .page-hero--contact .page-hero-content {
  transform: translateY(-92px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  .tools-page .page-hero--tools .page-hero-content,
  .downloads-page .page-hero--downloads .page-hero-content,
  .contact-page .page-hero--contact .page-hero-content {
    transform: none !important;
  }
}

/* v9.3 final Tools-only alignment pass.
   Downloads and Contact are already approved and remain unchanged.
   About Us remains locked. */
.tools-page .page-hero--tools .page-hero-content {
  transform: translateY(-222px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.tools-page .tools-layout {
  padding-top: clamp(0.9rem, 2.4vw, 1.8rem) !important;
}

@media (max-width: 760px) {
  .tools-page .page-hero--tools .page-hero-content {
    transform: none !important;
  }
  .tools-page .tools-layout {
    padding-top: clamp(1.2rem, 4vw, 2rem) !important;
  }
}


/* v9.4 final Tools-only fractional lift.
   All other approved pages remain unchanged. */
.tools-page .page-hero--tools .page-hero-content {
  transform: translateY(-238px) !important;
}
.tools-page .tools-layout {
  padding-top: clamp(0.35rem, 1.6vw, 1.1rem) !important;
}

@media (max-width: 760px) {
  .tools-page .page-hero--tools .page-hero-content {
    transform: none !important;
  }
  .tools-page .tools-layout {
    padding-top: clamp(1.1rem, 3.6vw, 1.8rem) !important;
  }
}


/* v9.5 Tools-only alignment pass.
   Checked against the final Lore Archive hero placement:
   - Lore uses the shared page-hero content block with no downward offset.
   - Tools needs an additional upward visual correction because its artwork and dice/table focal area sit lower.
   Only Tools is adjusted here; all approved pages remain unchanged. */
.tools-page .page-hero--tools .page-hero-content {
  transform: translateY(-270px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.tools-page .tools-layout {
  padding-top: clamp(0rem, 0.8vw, 0.55rem) !important;
  margin-top: -0.35rem !important;
}

@media (max-width: 760px) {
  .tools-page .page-hero--tools .page-hero-content {
    transform: none !important;
  }
  .tools-page .tools-layout {
    padding-top: clamp(1.1rem, 3.6vw, 1.8rem) !important;
    margin-top: 0 !important;
  }
}


/* v9.6 targeted game-page banner height fix.
   The previous Tools placement is retained. Only Global Mandate and Alberenar Board Game are adjusted.
   These two banners were still losing the lower artwork before the fade reached the wallpaper. */
.global-mandate-page .page-hero--global-mandate,
.alberenar-board-game-page .page-hero--alberenar-board-game {
  min-height: clamp(640px, 44vw, 900px) !important;
  height: clamp(640px, 44vw, 900px) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(6.2rem, 9svh, 8rem) !important;
}

.global-mandate-page .page-hero--global-mandate::before,
.alberenar-board-game-page .page-hero--alberenar-board-game::before {
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center, center center !important;
}

.global-mandate-page .page-hero--global-mandate::after,
.alberenar-board-game-page .page-hero--alberenar-board-game::after {
  bottom: -104px !important;
  height: clamp(330px, 35svh, 520px) !important;
}

@media (max-width: 980px) {
  .global-mandate-page .page-hero--global-mandate,
  .alberenar-board-game-page .page-hero--alberenar-board-game {
    min-height: 560px !important;
    height: auto !important;
    padding-bottom: 6rem !important;
  }
  .global-mandate-page .page-hero--global-mandate::before,
  .alberenar-board-game-page .page-hero--alberenar-board-game::before {
    background-size: 100% 100%, cover !important;
    background-position: center center, center center !important;
  }
}


/* v9.7 targeted game-page banner blend correction.
   Uses the same practical fade method as the approved main tab pages:
   the art remains at its natural wide-banner ratio, the fade sits at the true hero bottom,
   and the following section carries the wallpaper through a dark transition.
   Only Global Mandate and Alberenar Board Game are changed. */
.global-mandate-page .page-hero--global-mandate,
.alberenar-board-game-page .page-hero--alberenar-board-game {
  min-height: max(560px, calc(100vw * 0.3999)) !important;
  height: max(560px, calc(100vw * 0.3999)) !important;
  padding-top: clamp(3.2rem, 6svh, 5rem) !important;
  padding-bottom: clamp(5.4rem, 8svh, 7rem) !important;
  overflow: hidden !important;
  background-color: #0d0d0d !important;
}

.global-mandate-page .page-hero--global-mandate::before,
.alberenar-board-game-page .page-hero--alberenar-board-game::before {
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 58%,
    rgba(0,0,0,0.94) 70%,
    rgba(0,0,0,0.58) 84%,
    rgba(0,0,0,0.18) 94%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 58%,
    rgba(0,0,0,0.94) 70%,
    rgba(0,0,0,0.58) 84%,
    rgba(0,0,0,0.18) 94%,
    transparent 100%) !important;
}

.global-mandate-page .page-hero--global-mandate::after,
.alberenar-board-game-page .page-hero--alberenar-board-game::after {
  bottom: -1px !important;
  height: clamp(210px, 28svh, 350px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.02) 24%,
      rgba(13,13,13,0.18) 48%,
      rgba(13,13,13,0.54) 72%,
      rgba(13,13,13,0.96) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

.global-mandate-page .page-hero--global-mandate + section,
.alberenar-board-game-page .page-hero--alberenar-board-game + section {
  margin-top: -1px !important;
  padding-top: clamp(5.2rem, 8vw, 7.6rem) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.96) 0%,
      rgba(13,13,13,0.66) 92px,
      rgba(13,13,13,0.20) 245px,
      rgba(13,13,13,0) 390px),
    var(--ifs-wallpaper) repeat !important;
  background-size: auto, var(--ifs-wallpaper-size) !important;
}

@media (max-width: 980px) {
  .global-mandate-page .page-hero--global-mandate,
  .alberenar-board-game-page .page-hero--alberenar-board-game {
    min-height: 520px !important;
    height: auto !important;
    padding-bottom: 5.8rem !important;
  }
  .global-mandate-page .page-hero--global-mandate::before,
  .alberenar-board-game-page .page-hero--alberenar-board-game::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }
}


/* v9.8 targeted text alignment.
   Only moves the hero text on Global Mandate and Alberenar Board Game upward
   to sit closer to the approved Lore Archive visual placement. */
.global-mandate-page .page-hero--global-mandate .page-hero-content,
.alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
  transform: translateY(-92px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 980px) {
  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: translateY(-42px) !important;
  }
}

@media (max-width: 760px) {
  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: none !important;
  }
}


/* v9.9 targeted fractional text lift.
   Only Global Mandate and Alberenar Board Game hero text are adjusted. */
.global-mandate-page .page-hero--global-mandate .page-hero-content,
.alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
  transform: translateY(-116px) !important;
}

@media (max-width: 980px) {
  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: translateY(-52px) !important;
  }
}

@media (max-width: 760px) {
  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: none !important;
  }
}


/* v9.10 final targeted fractional text lift.
   Only Global Mandate and Alberenar Board Game hero text are adjusted. */
.global-mandate-page .page-hero--global-mandate .page-hero-content,
.alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
  transform: translateY(-132px) !important;
}

@media (max-width: 980px) {
  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: translateY(-58px) !important;
  }
}

@media (max-width: 760px) {
  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: none !important;
  }
}

/* v9.11 Tools banner replacement.
   Replaces the Tools page hero with the supplied 1915 x 821 banner.
   The image is scaled by width at its natural ratio, anchored to the top, masked at the lower edge,
   and blended into the shared wallpaper without cropping the top or bottom of the artwork. */
.tools-page .page-hero--tools {
  min-height: max(560px, calc(100vw * 0.4287206266)) !important;
  height: max(560px, calc(100vw * 0.4287206266)) !important;
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
  overflow: hidden !important;
}

.tools-page .page-hero--tools::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.00) 40%,
      rgba(13,13,13,0.08) 70%,
      rgba(13,13,13,0.22) 100%),
    url('../images/hero-tools.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 61%,
    rgba(0,0,0,0.90) 72%,
    rgba(0,0,0,0.55) 86%,
    rgba(0,0,0,0.18) 95%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 61%,
    rgba(0,0,0,0.90) 72%,
    rgba(0,0,0,0.55) 86%,
    rgba(0,0,0,0.18) 95%,
    transparent 100%) !important;
}

.tools-page .page-hero--tools .page-hero-content {
  transform: translateY(clamp(-205px, -10.7vw, -115px)) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.tools-page .page-hero--tools::after,
.tools-page .page-hero::after {
  display: none !important;
  content: none !important;
}

.tools-page .page-hero + section,
.tools-page .tools-layout {
  background: transparent !important;
  background-image: none !important;
}

.tools-page .tools-layout {
  padding-top: clamp(0.35rem, 1.2vw, 1rem) !important;
  margin-top: -0.2rem !important;
}

@media (max-width: 980px) {
  .tools-page .page-hero--tools {
    min-height: 520px !important;
    height: 520px !important;
  }
  .tools-page .page-hero--tools::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }
}

@media (max-width: 760px) {
  .tools-page .page-hero--tools {
    min-height: clamp(430px, 72svh, 620px) !important;
    height: clamp(430px, 72svh, 620px) !important;
  }
  .tools-page .page-hero--tools .page-hero-content {
    transform: none !important;
  }
  .tools-page .tools-layout {
    padding-top: clamp(1.1rem, 3.6vw, 1.8rem) !important;
    margin-top: 0 !important;
  }
}


/* v9.12 About Us expansion: Forge Mark and detailed pillar pages. */
:root {
  --ifs-logo-gold: #D7A84B;
  --ifs-logo-gold-bright: #FFD27A;
  --ifs-logo-gold-rgb: 215, 168, 75;
}

.section-intro--narrow {
  width: min(980px, 100%);
  margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
}

.forge-mark-section {
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 4vw, 4rem);
  background:
    radial-gradient(circle at 16% 10%, rgba(var(--ifs-logo-gold-rgb),0.09), transparent 34%),
    radial-gradient(circle at 84% 36%, rgba(96,170,255,0.045), transparent 36%),
    linear-gradient(to bottom, rgba(13,13,13,0), rgba(13,13,13,0.46), rgba(13,13,13,0)),
    url('../images/background_texture.webp') repeat;
  background-size: auto, auto, auto, 600px 600px;
}

.forge-mark-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1.15rem;
}

.forge-mark-card {
  display: grid;
  grid-template-columns: clamp(68px, 8vw, 96px) 1fr;
  gap: clamp(1rem, 2.2vw, 1.65rem);
  align-items: start;
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 18%, rgba(var(--ifs-logo-gold-rgb),0.16), transparent 28%),
    linear-gradient(145deg, rgba(22,19,14,0.96), rgba(7,7,7,0.95));
  border: 1px solid rgba(var(--ifs-logo-gold-rgb),0.22);
  border-left: 4px solid rgba(var(--ifs-logo-gold-rgb),0.82);
  box-shadow: 0 16px 44px rgba(0,0,0,0.46);
}

.forge-mark-card h3 {
  color: var(--ifs-logo-gold-bright);
  margin-bottom: 0.55rem;
  letter-spacing: 0.01em;
}

.forge-mark-card p {
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.forge-mark-card p:last-child { margin-bottom: 0; }

.forge-mark-icon,
.pillar-hero-icon,
.pillar-heading-icon {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(var(--ifs-logo-gold-rgb),0.25));
}

.forge-mark-icon {
  width: clamp(58px, 7vw, 86px);
  height: clamp(58px, 7vw, 86px);
  padding: 0.55rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,210,122,0.18), transparent 48%),
    rgba(0,0,0,0.38);
  border: 1px solid rgba(var(--ifs-logo-gold-rgb),0.34);
}

.pillar-detail-page .page-hero--about-pillar {
  min-height: clamp(500px, 56svh, 690px) !important;
  background-color: #0d0d0d !important;
}

.pillar-detail-page .page-hero--about-pillar::before {
  background-image:
    radial-gradient(circle at 50% 30%, rgba(var(--ifs-logo-gold-rgb),0.14), transparent 32%),
    linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(13,13,13,0.88)),
    url('../images/hero-about.webp') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center center, center center, center top !important;
  opacity: 0.92 !important;
}

.pillar-hero-content {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
}

.pillar-hero-icon {
  width: clamp(72px, 9vw, 110px);
  height: clamp(72px, 9vw, 110px);
  margin: 0 auto 1.1rem;
  padding: 0.65rem;
  border-radius: 24px;
  background: rgba(0,0,0,0.46);
  border: 1px solid rgba(var(--ifs-logo-gold-rgb),0.35);
}

.pillar-detail-section {
  padding: clamp(4rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem);
}

.pillar-detail-panel {
  width: min(1080px, 100%);
  margin: 0 auto clamp(1.4rem, 3vw, 2rem);
  padding: clamp(1.25rem, 2.7vw, 2.1rem);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--ifs-logo-gold-rgb),0.11), transparent 36%),
    linear-gradient(145deg, rgba(20,20,20,0.96), rgba(8,8,8,0.94));
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid rgba(var(--ifs-logo-gold-rgb),0.78);
  box-shadow: 0 16px 48px rgba(0,0,0,0.46);
}

.pillar-detail-panel p {
  color: var(--text-muted);
  margin-bottom: 0.95rem;
}

.pillar-heading-line {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.pillar-heading-icon {
  width: 58px;
  height: 58px;
  padding: 0.45rem;
  border-radius: 16px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(var(--ifs-logo-gold-rgb),0.3);
}

.pillar-heading-line h2 { margin: 0; }

.pillar-principle-grid,
.pillar-example-grid {
  width: min(1080px, 100%);
  margin: clamp(1.25rem, 2.8vw, 1.8rem) auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
}

.pillar-principle-block,
.pillar-example-card {
  padding: 1.1rem;
  border-radius: 18px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(var(--ifs-logo-gold-rgb),0.18);
  box-shadow: inset 0 0 18px rgba(var(--ifs-logo-gold-rgb),0.035);
}

.pillar-principle-block strong,
.pillar-example-card h3 {
  display: block;
  color: var(--ifs-logo-gold-bright);
  margin-bottom: 0.45rem;
}

.pillar-principle-block span,
.pillar-example-card p {
  color: var(--text-muted);
}

.pillar-example-card {
  min-height: 210px;
  background:
    radial-gradient(circle at 14% 0%, rgba(var(--ifs-logo-gold-rgb),0.10), transparent 34%),
    linear-gradient(145deg, rgba(18,18,18,0.95), rgba(6,6,6,0.94));
  border-left: 3px solid rgba(var(--ifs-logo-gold-rgb),0.62);
}

.pillar-detail-panel--closing {
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

.pillar-action-row {
  justify-content: center;
}

@media (max-width: 760px) {
  .forge-mark-card,
  .pillar-heading-line {
    grid-template-columns: 1fr;
  }
  .forge-mark-icon,
  .pillar-heading-icon {
    margin-left: auto;
    margin-right: auto;
  }
  .forge-mark-card { text-align: left; }
  .pillar-heading-line { text-align: center; }
}


/* v9.13 About Us refinement: exact logo symbols, highlighted pillar marks, and wallpaper-only pillar headers. */
.about-page .about-pillars .section-subheading {
  max-width: 980px;
}

.pillar-card-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-bottom: 0.85rem;
  filter: drop-shadow(0 0 12px rgba(var(--ifs-logo-gold-rgb),0.26));
}

.about-page .service-card .svg-icon {
  display: none;
}

.forge-mark-icon,
.pillar-heading-icon,
.pillar-card-icon {
  image-rendering: auto;
}

.pillar-logo-header {
  min-height: auto !important;
  padding: clamp(7.2rem, 10vw, 9.6rem) clamp(1rem, 4vw, 4rem) clamp(2.4rem, 5vw, 4.2rem) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative;
  text-align: center;
}

.pillar-logo-header::before,
.pillar-logo-header::after {
  display: none !important;
  content: none !important;
}

.pillar-logo-content {
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 2.4vw, 1.55rem);
}

.pillar-logo-mark {
  width: clamp(210px, 27vw, 330px);
  height: auto;
  display: block;
  opacity: 0.98;
  filter: drop-shadow(0 0 26px rgba(0,0,0,0.58));
}

.pillar-logo-text {
  max-width: 820px;
  padding: 0 clamp(0.25rem, 1vw, 0.75rem);
}

.pillar-logo-text h1 {
  margin-bottom: 0.6rem;
}

.pillar-logo-text p:not(.eyebrow) {
  color: var(--text-muted);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.72;
}

.pillar-detail-page .page-hero--about-pillar,
.pillar-detail-page .page-hero--about-pillar::before,
.pillar-detail-page .page-hero--about-pillar::after {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pillar-detail-section {
  padding-top: clamp(1.6rem, 3.5vw, 3rem) !important;
  background: transparent !important;
  background-image: none !important;
}

.pillar-heading-icon {
  object-fit: contain;
}

.pillar-principle-block {
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pillar-principle-block span {
  line-height: 1.62;
}

@media (max-width: 760px) {
  .pillar-logo-header {
    padding-top: 6.4rem !important;
  }
  .pillar-logo-mark {
    width: clamp(178px, 62vw, 260px);
  }
  .pillar-principle-block {
    min-height: 0;
  }
}


/* v9.14 pillar symbol emphasis and laptop banner alignment.
   The pillar pages keep the complete company logo, but the relevant logo symbol is now made unmistakable.
   Laptop rules are constrained to typical laptop viewport widths/heights so the approved large desktop layout is not disturbed. */
.pillar-logo-mark {
  filter:
    drop-shadow(0 0 22px rgba(0,0,0,0.74))
    drop-shadow(0 0 18px rgba(var(--ifs-logo-gold-rgb),0.42))
    drop-shadow(0 0 42px rgba(255,210,122,0.30)) !important;
}

.pillar-detail-page--imagination .pillar-logo-mark,
.pillar-detail-page--craftsmanship .pillar-logo-mark,
.pillar-detail-page--community .pillar-logo-mark,
.pillar-detail-page--conviction .pillar-logo-mark,
.pillar-detail-page--immersion .pillar-logo-mark {
  opacity: 1 !important;
  transform: translateZ(0) scale(1.035);
}

.pillar-heading-icon,
.pillar-card-icon,
.forge-mark-icon {
  filter:
    drop-shadow(0 0 10px rgba(var(--ifs-logo-gold-rgb),0.55))
    drop-shadow(0 0 22px rgba(255,210,122,0.30)) !important;
}

@media (min-width: 981px) and (max-width: 1440px) and (max-height: 930px) {
  .page-hero:not(.page-hero--about) .page-hero-content {
    transform: translateY(clamp(-46px, -5.2svh, -24px)) !important;
  }

  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: translateY(clamp(-92px, -9.4svh, -64px)) !important;
  }

  .tools-page .page-hero--tools .page-hero-content {
    transform: translateY(clamp(-150px, -9.7vw, -104px)) !important;
  }

  .page-hero h1 {
    font-size: clamp(2.7rem, 5.1vw, 4.6rem) !important;
  }

  .page-hero p:not(.eyebrow) {
    max-width: min(900px, 82vw) !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) and (max-height: 860px) {
  .page-hero:not(.page-hero--about) .page-hero-content {
    transform: translateY(clamp(-38px, -4.6svh, -18px)) !important;
  }

  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: translateY(clamp(-72px, -8svh, -44px)) !important;
  }

  .tools-page .page-hero--tools .page-hero-content {
    transform: translateY(clamp(-120px, -8.2vw, -82px)) !important;
  }
}


/* v9.14 pillar symbol emphasis and laptop banner alignment.
   The pillar pages keep the complete company logo, but the relevant logo symbol is now made unmistakable.
   Laptop rules are constrained to typical laptop viewport widths/heights so the approved large desktop layout is not disturbed. */
.pillar-logo-mark {
  filter:
    drop-shadow(0 0 22px rgba(0,0,0,0.74))
    drop-shadow(0 0 18px rgba(var(--ifs-logo-gold-rgb),0.42))
    drop-shadow(0 0 42px rgba(255,210,122,0.30)) !important;
}

.pillar-detail-page--imagination .pillar-logo-mark,
.pillar-detail-page--craftsmanship .pillar-logo-mark,
.pillar-detail-page--community .pillar-logo-mark,
.pillar-detail-page--conviction .pillar-logo-mark,
.pillar-detail-page--immersion .pillar-logo-mark {
  opacity: 1 !important;
  transform: translateZ(0) scale(1.035);
}

.pillar-heading-icon,
.pillar-card-icon,
.forge-mark-icon {
  filter:
    drop-shadow(0 0 10px rgba(var(--ifs-logo-gold-rgb),0.55))
    drop-shadow(0 0 22px rgba(255,210,122,0.30)) !important;
}

@media (min-width: 981px) and (max-width: 1440px) and (max-height: 930px) {
  .page-hero:not(.page-hero--about) .page-hero-content {
    transform: translateY(clamp(-46px, -5.2svh, -24px)) !important;
  }

  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: translateY(clamp(-92px, -9.4svh, -64px)) !important;
  }

  .tools-page .page-hero--tools .page-hero-content {
    transform: translateY(clamp(-150px, -9.7vw, -104px)) !important;
  }

  .page-hero h1 {
    font-size: clamp(2.7rem, 5.1vw, 4.6rem) !important;
  }

  .page-hero p:not(.eyebrow) {
    max-width: min(900px, 82vw) !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) and (max-height: 860px) {
  .page-hero:not(.page-hero--about) .page-hero-content {
    transform: translateY(clamp(-38px, -4.6svh, -18px)) !important;
  }

  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: translateY(clamp(-72px, -8svh, -44px)) !important;
  }

  .tools-page .page-hero--tools .page-hero-content {
    transform: translateY(clamp(-120px, -8.2vw, -82px)) !important;
  }
}


/* v9.14 pillar symbol emphasis and laptop banner alignment.
   The pillar pages keep the complete company logo, but the relevant logo symbol is now made unmistakable.
   Laptop rules are constrained to typical laptop viewport widths/heights so the approved large desktop layout is not disturbed. */
.pillar-logo-mark {
  filter:
    drop-shadow(0 0 22px rgba(0,0,0,0.74))
    drop-shadow(0 0 18px rgba(var(--ifs-logo-gold-rgb),0.42))
    drop-shadow(0 0 42px rgba(255,210,122,0.30)) !important;
}

.pillar-detail-page--imagination .pillar-logo-mark,
.pillar-detail-page--craftsmanship .pillar-logo-mark,
.pillar-detail-page--community .pillar-logo-mark,
.pillar-detail-page--conviction .pillar-logo-mark,
.pillar-detail-page--immersion .pillar-logo-mark {
  opacity: 1 !important;
  transform: translateZ(0) scale(1.035);
}

.pillar-heading-icon,
.pillar-card-icon,
.forge-mark-icon {
  filter:
    drop-shadow(0 0 10px rgba(var(--ifs-logo-gold-rgb),0.55))
    drop-shadow(0 0 22px rgba(255,210,122,0.30)) !important;
}

@media (min-width: 981px) and (max-width: 1440px) and (max-height: 930px) {
  .page-hero:not(.page-hero--about) .page-hero-content {
    transform: translateY(clamp(-46px, -5.2svh, -24px)) !important;
  }

  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: translateY(clamp(-92px, -9.4svh, -64px)) !important;
  }

  .tools-page .page-hero--tools .page-hero-content {
    transform: translateY(clamp(-150px, -9.7vw, -104px)) !important;
  }

  .page-hero h1 {
    font-size: clamp(2.7rem, 5.1vw, 4.6rem) !important;
  }

  .page-hero p:not(.eyebrow) {
    max-width: min(900px, 82vw) !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) and (max-height: 860px) {
  .page-hero:not(.page-hero--about) .page-hero-content {
    transform: translateY(clamp(-38px, -4.6svh, -18px)) !important;
  }

  .global-mandate-page .page-hero--global-mandate .page-hero-content,
  .alberenar-board-game-page .page-hero--alberenar-board-game .page-hero-content {
    transform: translateY(clamp(-72px, -8svh, -44px)) !important;
  }

  .tools-page .page-hero--tools .page-hero-content {
    transform: translateY(clamp(-120px, -8.2vw, -82px)) !important;
  }
}

/* v9.15 - cleaner logo-symbol highlighting.
   The pillar pages now use the official transparent logo plus a separate exact symbol overlay.
   This prevents the highlighted symbol from brightening neighbouring ring sections. */
.pillar-logo-mark {
  display: none !important;
}

.pillar-logo-stage {
  position: relative;
  width: clamp(235px, 28vw, 360px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  margin: 0 auto;
  isolation: isolate;
}

.pillar-logo-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.52;
  filter:
    drop-shadow(0 0 24px rgba(0,0,0,0.76))
    drop-shadow(0 0 10px rgba(var(--ifs-logo-gold-rgb),0.13));
}

.pillar-logo-overlay {
  position: absolute;
  z-index: 2;
  object-fit: contain;
  opacity: 1;
  filter:
    drop-shadow(0 0 8px rgba(255,235,150,0.96))
    drop-shadow(0 0 18px rgba(255,202,82,0.82))
    drop-shadow(0 0 34px rgba(232,93,4,0.56));
}

.pillar-logo-overlay--flame {
  width: 54%;
  left: 23%;
  top: 22%;
}

.pillar-logo-overlay--craft-mark {
  width: 24%;
  left: 38%;
  top: 2.5%;
}

.pillar-logo-overlay--waveform {
  width: 27%;
  left: 36.5%;
  top: 74.5%;
  filter:
    drop-shadow(0 0 10px rgba(255,238,158,1))
    drop-shadow(0 0 22px rgba(255,210,84,0.96))
    drop-shadow(0 0 40px rgba(232,93,4,0.68));
}

.pillar-logo-overlay--book {
  width: 22%;
  left: 6.2%;
  top: 38.4%;
}

.pillar-logo-overlay--essence-drop {
  width: 22%;
  left: 71.8%;
  top: 38.4%;
}

/* Strengthen the waveform on the About Us pillar cards and Forge Mark list so it matches the other symbols. */
.about-page img[src$="logo-waveform.webp"].pillar-card-icon,
.about-page img[src$="logo-waveform.webp"].forge-mark-icon,
.about-page img[src$="logo-waveform.webp"].pillar-heading-icon {
  opacity: 1 !important;
  filter:
    brightness(1.45)
    contrast(1.15)
    drop-shadow(0 0 11px rgba(255,235,150,0.92))
    drop-shadow(0 0 24px rgba(255,202,82,0.62))
    drop-shadow(0 0 34px rgba(232,93,4,0.35)) !important;
}

@media (max-width: 760px) {
  .pillar-logo-stage {
    width: clamp(195px, 66vw, 280px);
  }
}


/* v9.16 - final pillar symbol correction and in-browser PDF preview support.
   Pillar pages now use one pre-rendered logo variant per pillar rather than base+overlay markup. */
.pillar-logo-mark--single {
  display: block !important;
  width: clamp(235px, 28vw, 360px) !important;
  max-width: 100%;
  height: auto !important;
  opacity: 1 !important;
  transform: none !important;
  filter: drop-shadow(0 0 24px rgba(0,0,0,0.72)) !important;
}
.pillar-logo-stage,
.pillar-logo-base,
.pillar-logo-overlay {
  display: none !important;
}
.about-page .pillar-card-icon,
.about-page .forge-mark-icon,
.about-page .pillar-heading-icon {
  filter: drop-shadow(0 0 10px rgba(var(--ifs-logo-gold-rgb),0.38)) drop-shadow(0 0 20px rgba(255,202,82,0.22)) !important;
  opacity: 0.96 !important;
  transform: none !important;
}
.about-page img[src$="logo-waveform.webp"].pillar-card-icon,
.about-page img[src$="logo-waveform.webp"].forge-mark-icon,
.about-page img[src$="logo-waveform.webp"].pillar-heading-icon {
  filter: drop-shadow(0 0 10px rgba(var(--ifs-logo-gold-rgb),0.38)) drop-shadow(0 0 20px rgba(255,202,82,0.22)) !important;
  opacity: 0.92 !important;
}
.pdf-viewer-main {
  padding: clamp(7rem, 10vw, 8.5rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}
.pdf-viewer-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(var(--ifs-logo-gold-rgb),0.24);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(18,18,18,0.94), rgba(6,6,6,0.94));
  box-shadow: 0 22px 60px rgba(0,0,0,0.44);
  overflow: hidden;
}
.pdf-viewer-header {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border-bottom: 1px solid rgba(var(--ifs-logo-gold-rgb),0.18);
}
.pdf-viewer-header h1 { margin-bottom: 0.35rem; }
.pdf-viewer-header p:not(.eyebrow) { color: var(--text-muted); max-width: 760px; }
.pdf-viewer-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.pdf-frame {
  display: block;
  width: 100%;
  height: min(78vh, 980px);
  min-height: 720px;
  border: 0;
  background: #2a2418;
}
@media (max-width: 760px) {
  .pdf-viewer-header { flex-direction: column; align-items: flex-start; }
  .pdf-viewer-actions { justify-content: flex-start; }
  .pdf-frame { min-height: 620px; }
  .pillar-logo-mark--single { width: clamp(195px, 66vw, 280px) !important; }
}


/* v9.17 production-base polish: consistent pillar icons, public-facing copy, and smoother project banners. */
.about-page .pillar-card-icon,
.about-page .forge-mark-icon,
.about-page .pillar-heading-icon {
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter:
    brightness(1.12)
    contrast(1.06)
    drop-shadow(0 0 9px rgba(255,235,150,0.76))
    drop-shadow(0 0 19px rgba(255,202,82,0.42))
    drop-shadow(0 0 30px rgba(232,93,4,0.22)) !important;
}
.about-page .service-card > .pillar-card-icon {
  width: 70px !important;
  height: 70px !important;
  padding: 0.12rem !important;
  margin: 0 auto 1rem !important;
  flex: 0 0 auto !important;
}
.about-page .forge-mark-icon {
  width: clamp(72px, 7vw, 92px) !important;
  height: clamp(72px, 7vw, 92px) !important;
  padding: 0.42rem !important;
}
.about-page .pillar-heading-icon {
  width: 64px !important;
  height: 64px !important;
  padding: 0.22rem !important;
}
.about-page img[src$="logo-waveform.webp"].pillar-card-icon,
.about-page img[src$="logo-waveform.webp"].forge-mark-icon,
.about-page img[src$="logo-waveform.webp"].pillar-heading-icon {
  opacity: 1 !important;
  filter:
    brightness(1.28)
    contrast(1.12)
    drop-shadow(0 0 10px rgba(255,245,180,0.88))
    drop-shadow(0 0 22px rgba(255,210,84,0.58))
    drop-shadow(0 0 34px rgba(232,93,4,0.30)) !important;
}

/* Pillar pages: use the official logo base plus a separate, precisely bounded SVG symbol overlay. */
.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single {
  display: none !important;
}
.pillar-detail-page .pillar-logo-stage {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(235px, 28vw, 360px) !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  isolation: isolate !important;
  overflow: visible !important;
}
.pillar-detail-page .pillar-logo-base {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 0.50 !important;
  filter:
    drop-shadow(0 0 24px rgba(0,0,0,0.78))
    drop-shadow(0 0 12px rgba(255,186,8,0.12)) !important;
}
.pillar-detail-page .pillar-logo-overlay {
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  object-fit: contain !important;
  object-position: center !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter:
    brightness(1.18)
    contrast(1.10)
    drop-shadow(0 0 8px rgba(255,245,180,0.96))
    drop-shadow(0 0 18px rgba(255,210,84,0.86))
    drop-shadow(0 0 34px rgba(232,93,4,0.52)) !important;
}
.pillar-detail-page .pillar-logo-overlay--flame { width: 53% !important; left: 23.5% !important; top: 22% !important; }
.pillar-detail-page .pillar-logo-overlay--craft-mark { width: 24% !important; left: 38% !important; top: 2.6% !important; }
.pillar-detail-page .pillar-logo-overlay--waveform {
  width: 30% !important;
  left: 35% !important;
  top: 73.2% !important;
  filter:
    brightness(1.35)
    contrast(1.14)
    drop-shadow(0 0 10px rgba(255,245,180,1))
    drop-shadow(0 0 23px rgba(255,210,84,0.98))
    drop-shadow(0 0 40px rgba(232,93,4,0.68)) !important;
}
.pillar-detail-page .pillar-logo-overlay--book { width: 23% !important; left: 5.8% !important; top: 37.9% !important; }
.pillar-detail-page .pillar-logo-overlay--essence-drop { width: 23% !important; left: 71.2% !important; top: 37.8% !important; }

/* Alberenar and Resonance hero banners: retain key art while blending the lower edge into the site texture. */
.alberenar-page .hero-banner,
.resonance-page .hero-banner {
  min-height: clamp(560px, 62svh, 760px) !important;
  height: auto !important;
  padding-top: clamp(3rem, 6svh, 5rem) !important;
  padding-bottom: clamp(6rem, 11svh, 9rem) !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  isolation: isolate !important;
}
.alberenar-page .hero-banner {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(13,13,13,0.44)),
    url('../images/alberenar_banner.webp') !important;
  background-position: center 47% !important;
}
.resonance-page .hero-banner {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(13,13,13,0.44)),
    url('../images/resonance_banner.webp') !important;
  background-position: center 48% !important;
}
.alberenar-page .hero-banner::after,
.resonance-page .hero-banner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(220px, 34svh, 390px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.22) 34%,
      rgba(13,13,13,0.70) 70%,
      rgba(13,13,13,0.98) 100%) !important;
}
.alberenar-page .hero-banner .banner-content,
.resonance-page .hero-banner .banner-content {
  position: relative !important;
  z-index: 2 !important;
}
.alberenar-page .hero-banner + section,
.resonance-page .hero-banner + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom, rgba(13,13,13,0.98), rgba(13,13,13,0.70) 95px, rgba(13,13,13,0) 260px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}
@media (max-width: 760px) {
  .pillar-detail-page .pillar-logo-stage { width: clamp(195px, 66vw, 280px) !important; }
  .alberenar-page .hero-banner,
  .resonance-page .hero-banner { min-height: 520px !important; padding-bottom: 6.5rem !important; }
}

.legal-panel h2 { margin-top: 1.45rem; margin-bottom: 0.55rem; color: var(--ifs-logo-gold-bright, #ffba08); }
.legal-panel p { margin-bottom: 0.9rem; }

/* v9.18 correction: no generated/oversized pillar overlays. Use clean pre-rendered pillar logos and official-symbol crops. */
.pillar-detail-page .pillar-logo-stage,
.pillar-detail-page .pillar-logo-base,
.pillar-detail-page .pillar-logo-overlay {
  display: none !important;
}

.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single {
  display: block !important;
  width: clamp(250px, 25vw, 380px) !important;
  max-width: min(86vw, 380px) !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: none !important;
  filter: drop-shadow(0 0 20px rgba(0,0,0,0.58)) !important;
}

.about-page .pillar-card-icon,
.about-page .forge-mark-icon,
.about-page .pillar-heading-icon {
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: visible !important;
  filter: none !important;
}

.about-page .service-card > .pillar-card-icon {
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  margin: 0 auto 1.05rem !important;
}

.about-page .forge-mark-icon {
  width: clamp(70px, 6vw, 90px) !important;
  height: clamp(70px, 6vw, 90px) !important;
  padding: 0 !important;
}

.about-page .pillar-heading-icon {
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
}

.about-page img[src$="logo-waveform.webp"].pillar-card-icon,
.about-page img[src$="logo-waveform.webp"].forge-mark-icon,
.about-page img[src$="logo-waveform.webp"].pillar-heading-icon {
  opacity: 1 !important;
  filter: none !important;
}

/* v9.18 correction: Alberenar and Resonance use wide safe banners made from the approved art,
   so the source image is not chopped at the top or bottom on wide screens. */
.alberenar-page .hero-banner,
.resonance-page .hero-banner {
  height: clamp(500px, 54svh, 660px) !important;
  min-height: clamp(500px, 54svh, 660px) !important;
  max-height: 700px !important;
  padding: calc(var(--nav-height, 74px) + 2rem) 1rem clamp(5.5rem, 10svh, 8rem) !important;
  align-items: center !important;
  overflow: hidden !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-color: #0d0d0d !important;
  position: relative !important;
  isolation: isolate !important;
}

.alberenar-page .hero-banner {
  background-image: url('../images/alberenar_banner_safe.webp') !important;
}

.resonance-page .hero-banner {
  background-image: url('../images/resonance_banner_safe.webp') !important;
}

.alberenar-page .hero-banner::before,
.resonance-page .hero-banner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,0,0,0.10), rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.58) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0.08) 35%, rgba(13,13,13,0.80) 100%) !important;
}

.alberenar-page .hero-banner::after,
.resonance-page .hero-banner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(180px, 31svh, 330px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.30) 38%,
      rgba(13,13,13,0.76) 74%,
      rgba(13,13,13,1) 100%) !important;
}

.alberenar-page .hero-banner .banner-content,
.resonance-page .hero-banner .banner-content {
  position: relative !important;
  z-index: 2 !important;
  transform: none !important;
}

.alberenar-page .hero-banner + section,
.resonance-page .hero-banner + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom, rgba(13,13,13,1), rgba(13,13,13,0.72) 110px, rgba(13,13,13,0) 320px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}

@media (max-width: 760px) {
  .pillar-detail-page .pillar-logo-mark,
  .pillar-detail-page .pillar-logo-mark--single {
    width: clamp(220px, 70vw, 310px) !important;
    max-width: 88vw !important;
  }

  .alberenar-page .hero-banner,
  .resonance-page .hero-banner {
    height: 520px !important;
    min-height: 520px !important;
    padding-top: calc(var(--nav-height, 74px) + 1.5rem) !important;
    background-size: cover !important;
  }
}


/* v9.19 correction: pillar icons are exact crops from the official logo artwork.
   No generated icon shapes, no oversized overlays, no clipped left edge. */
.about-page .pillar-card-icon,
.about-page .forge-mark-icon,
.about-page .pillar-heading-icon {
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
.about-page .service-card > .pillar-card-icon {
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  margin: 0 auto 1.05rem !important;
}
.about-page .forge-mark-icon {
  width: clamp(70px, 6vw, 90px) !important;
  height: clamp(70px, 6vw, 90px) !important;
  padding: 0 !important;
}
.about-page .pillar-heading-icon {
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
}
.pillar-detail-page .pillar-logo-stage,
.pillar-detail-page .pillar-logo-base,
.pillar-detail-page .pillar-logo-overlay {
  display: none !important;
}
.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single {
  display: block !important;
  width: clamp(250px, 25vw, 380px) !important;
  max-width: min(86vw, 380px) !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: none !important;
  filter: drop-shadow(0 0 20px rgba(0,0,0,0.58)) !important;
}

/* v9.19 correction: use uncropped wide-safe banners and align the lower fade to the site wallpaper. */
.alberenar-page .hero-banner,
.resonance-page .hero-banner {
  height: clamp(560px, 58svh, 720px) !important;
  min-height: clamp(560px, 58svh, 720px) !important;
  max-height: 760px !important;
  padding: calc(var(--nav-height, 74px) + 2rem) 1rem clamp(6.5rem, 11svh, 9rem) !important;
  align-items: center !important;
  overflow: hidden !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-color: #0d0d0d !important;
  position: relative !important;
  isolation: isolate !important;
}
.alberenar-page .hero-banner { background-image: url('../images/alberenar_banner_safe.webp') !important; }
.resonance-page .hero-banner { background-image: url('../images/resonance_banner_safe.webp') !important; }
.alberenar-page .hero-banner::before,
.resonance-page .hero-banner::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(0,0,0,0.06), rgba(0,0,0,0.24) 52%, rgba(0,0,0,0.56) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(0,0,0,0.05) 34%, rgba(13,13,13,0.74) 100%) !important;
}
.alberenar-page .hero-banner::after,
.resonance-page .hero-banner::after {
  height: clamp(230px, 34svh, 400px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.24) 35%,
      rgba(13,13,13,0.74) 72%,
      rgba(13,13,13,1) 100%) !important;
}
@media (max-width: 760px) {
  .pillar-detail-page .pillar-logo-mark,
  .pillar-detail-page .pillar-logo-mark--single {
    width: clamp(220px, 70vw, 310px) !important;
    max-width: 88vw !important;
  }
  .alberenar-page .hero-banner,
  .resonance-page .hero-banner {
    height: 560px !important;
    min-height: 560px !important;
  }
}


/* v9.20 About Us pillar rewrite: Creation, Lore, Resonance, Craft, Essence.
   Uses pre-rendered official-logo crops and full-logo pillar marks. */
.about-page .forge-mark-card h3,
.about-page .service-card h3,
.pillar-detail-page .pillar-heading-line h2 {
  text-wrap: balance;
}
.about-page .pillar-card-icon,
.about-page .forge-mark-icon,
.about-page .pillar-heading-icon {
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter:
    drop-shadow(0 0 10px rgba(var(--ifs-logo-gold-rgb),0.42))
    drop-shadow(0 0 22px rgba(255,202,82,0.24)) !important;
}
.about-page .service-card > .pillar-card-icon {
  width: 64px !important;
  height: 64px !important;
  padding: 0 !important;
  margin: 0 auto 1.05rem !important;
}
.about-page .forge-mark-icon {
  width: clamp(74px, 6vw, 96px) !important;
  height: clamp(74px, 6vw, 96px) !important;
  padding: 0.12rem !important;
}
.about-page .pillar-heading-icon {
  width: 62px !important;
  height: 62px !important;
  padding: 0.08rem !important;
}
.pillar-detail-page .pillar-logo-stage,
.pillar-detail-page .pillar-logo-base,
.pillar-detail-page .pillar-logo-overlay {
  display: none !important;
}
.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single {
  display: block !important;
  width: clamp(270px, 28vw, 420px) !important;
  max-width: min(88vw, 420px) !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: none !important;
  filter:
    drop-shadow(0 0 22px rgba(0,0,0,0.70))
    drop-shadow(0 0 18px rgba(var(--ifs-logo-gold-rgb),0.18)) !important;
}
.pillar-logo-text p:not(.eyebrow) {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  .pillar-detail-page .pillar-logo-mark,
  .pillar-detail-page .pillar-logo-mark--single {
    width: clamp(235px, 74vw, 330px) !important;
    max-width: 90vw !important;
  }
  .pillar-logo-header {
    padding-top: 6.2rem !important;
  }
}


/* v9.21 About pillars: correct five-symbol wording, clock-face order, and equal public symbol scale. */
.about-page .forge-mark-section .section-heading,
.about-page .about-pillars .section-heading {
  text-wrap: balance;
}

.about-page .forge-mark-grid {
  gap: clamp(1.05rem, 2vw, 1.45rem) !important;
}

.about-page .forge-mark-card {
  grid-template-columns: clamp(112px, 12vw, 150px) 1fr !important;
  align-items: center !important;
}

.about-page .forge-mark-icon {
  width: clamp(108px, 11vw, 146px) !important;
  height: clamp(108px, 11vw, 146px) !important;
  padding: 0 !important;
  border-radius: 22px !important;
}

.about-page .service-card > .pillar-card-icon {
  width: clamp(96px, 10vw, 128px) !important;
  height: clamp(96px, 10vw, 128px) !important;
  padding: 0 !important;
  margin: 0 auto 1.15rem !important;
}

.about-page .pillar-heading-line {
  grid-template-columns: clamp(104px, 10vw, 134px) 1fr !important;
  align-items: center !important;
}

.about-page .pillar-heading-icon {
  width: clamp(100px, 9vw, 128px) !important;
  height: clamp(100px, 9vw, 128px) !important;
  padding: 0 !important;
  border-radius: 22px !important;
}

.about-page .pillar-card-icon,
.about-page .forge-mark-icon,
.about-page .pillar-heading-icon {
  filter:
    drop-shadow(0 0 12px rgba(var(--ifs-logo-gold-rgb),0.54))
    drop-shadow(0 0 30px rgba(255,202,82,0.30)) !important;
}

@media (max-width: 760px) {
  .about-page .forge-mark-card,
  .about-page .pillar-heading-line {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .about-page .forge-mark-icon,
  .about-page .pillar-heading-icon {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .about-page .service-card > .pillar-card-icon {
    width: 112px !important;
    height: 112px !important;
  }
}


/* v9.23 final repair pass: public-facing pillar wording, cleaner five-symbol scaling, safer banner fade, Wounded Roads carousel, and Tools hero nudge. */
.about-page .forge-mark-icon,
.about-page .pillar-card-icon,
.about-page .pillar-heading-icon {
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  filter:
    drop-shadow(0 0 12px rgba(var(--ifs-logo-gold-rgb),0.62))
    drop-shadow(0 0 30px rgba(255,202,82,0.34)) !important;
}
.about-page .forge-mark-icon,
.about-page .pillar-heading-icon {
  width: clamp(118px, 11vw, 148px) !important;
  height: clamp(118px, 11vw, 148px) !important;
}
.about-page .service-card > .pillar-card-icon {
  width: clamp(108px, 10vw, 134px) !important;
  height: clamp(108px, 10vw, 134px) !important;
}
.about-page img[src$="logo-resonance.webp"].forge-mark-icon,
.about-page img[src$="logo-resonance.webp"].pillar-card-icon,
.about-page img[src$="logo-resonance.webp"].pillar-heading-icon {
  filter:
    brightness(1.22)
    contrast(1.10)
    drop-shadow(0 0 14px rgba(255,238,158,0.88))
    drop-shadow(0 0 34px rgba(255,202,82,0.50)) !important;
}
.about-page img[src$="logo-essence.webp"].forge-mark-icon,
.about-page img[src$="logo-essence.webp"].pillar-card-icon,
.about-page img[src$="logo-essence.webp"].pillar-heading-icon {
  transform: scale(0.96) !important;
}
.pillar-detail-page .pillar-logo-stage,
.pillar-detail-page .pillar-logo-base,
.pillar-detail-page .pillar-logo-overlay {
  display: none !important;
}
.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single {
  display: block !important;
  width: min(82vw, 380px) !important;
  max-width: min(82vw, 380px) !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter:
    drop-shadow(0 0 22px rgba(0,0,0,0.72))
    drop-shadow(0 0 20px rgba(var(--ifs-logo-gold-rgb),0.24)) !important;
}
@media (max-width: 760px) {
  .pillar-detail-page .pillar-logo-mark,
  .pillar-detail-page .pillar-logo-mark--single {
    width: min(78vw, 305px) !important;
    max-width: min(78vw, 305px) !important;
  }
}
.alberenar-page .hero-banner {
  background-image: url('../images/alberenar_banner_safe.webp') !important;
  background-position: center center !important;
  background-size: cover !important;
}
.resonance-page .hero-banner {
  background-image: url('../images/resonance_banner_safe.webp') !important;
  background-position: center center !important;
  background-size: cover !important;
}
.alberenar-page .hero-banner::after,
.resonance-page .hero-banner::after {
  height: clamp(250px, 38svh, 440px) !important;
  background: linear-gradient(to bottom,
    rgba(13,13,13,0) 0%,
    rgba(13,13,13,0.22) 34%,
    rgba(13,13,13,0.76) 72%,
    rgba(13,13,13,1) 100%) !important;
}
.wounded-roads-page .wounded-roads-carousel {
  background:
    radial-gradient(circle at 18% 0%, rgba(177,43,36,0.14), transparent 34%),
    linear-gradient(to bottom, rgba(13,13,13,0.96), rgba(13,13,13,0.70) 120px, rgba(13,13,13,0) 330px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, auto, 600px 600px !important;
  padding: clamp(4.2rem, 7vw, 6.5rem) clamp(1rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem) !important;
}
.wounded-roads-page .wounded-roads-carousel h2 {
  text-align: center;
  margin-bottom: 0.65rem;
}
.wounded-roads-page .wounded-roads-carousel .section-subheading {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.6rem;
  color: rgba(255,255,255,0.86) !important;
}
.wounded-roads-page .wounded-roads-carousel .carousel-wrapper {
  width: min(1240px, 100%);
  margin: 0 auto;
}
.wounded-roads-page .wounded-roads-carousel .carousel-track {
  gap: 1.15rem;
  padding: 0.5rem 0 1.2rem;
}
.wounded-roads-page .wounded-roads-carousel .carousel-item {
  width: clamp(300px, 31vw, 420px) !important;
  height: clamp(210px, 21vw, 280px) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(215,168,75,0.24);
  box-shadow: 0 16px 36px rgba(0,0,0,0.42);
  object-fit: cover !important;
}
.wounded-roads-page .wounded-roads-carousel .carousel-button {
  border-radius: 999px;
  border: 1px solid rgba(215,168,75,0.38);
  background: rgba(0,0,0,0.68) !important;
}
.tools-page .page-hero--tools .page-hero-content {
  transform: translateY(clamp(-195px, -10.2vw, -105px)) !important;
}
@media (max-width: 760px) {
  .tools-page .page-hero--tools .page-hero-content {
    transform: none !important;
  }
}

/* v9.24 repair: no image generation; asset/code correction only.
   Removes accidental black/square icon backing, restores the approved Alberenar banner,
   and uses transparent pillar-logo marks so they blend into the stone wallpaper. */
.about-page .forge-mark-icon,
.about-page .pillar-card-icon,
.about-page .pillar-heading-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 0 10px rgba(255,235,150,0.72))
    drop-shadow(0 0 24px rgba(255,202,82,0.35)) !important;
}
.about-page .forge-mark-card {
  grid-template-columns: clamp(128px, 13vw, 164px) 1fr !important;
}
.about-page .forge-mark-icon {
  width: clamp(118px, 12vw, 152px) !important;
  height: clamp(118px, 12vw, 152px) !important;
}
.about-page .service-card > .pillar-card-icon {
  width: clamp(100px, 9vw, 124px) !important;
  height: clamp(100px, 9vw, 124px) !important;
}
.about-page .pillar-heading-icon {
  width: clamp(86px, 8vw, 110px) !important;
  height: clamp(86px, 8vw, 110px) !important;
}
.about-page img[src$="logo-resonance.webp"].forge-mark-icon,
.about-page img[src$="logo-resonance.webp"].pillar-card-icon,
.about-page img[src$="logo-resonance.webp"].pillar-heading-icon {
  filter:
    brightness(1.18)
    contrast(1.08)
    drop-shadow(0 0 12px rgba(255,238,158,0.88))
    drop-shadow(0 0 30px rgba(255,202,82,0.48)) !important;
}
.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single {
  display: block !important;
  width: min(82vw, 400px) !important;
  max-width: min(82vw, 400px) !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 20px rgba(0,0,0,0.60))
    drop-shadow(0 0 18px rgba(255,202,82,0.20)) !important;
}
.pillar-detail-page .pillar-logo-stage,
.pillar-detail-page .pillar-logo-base,
.pillar-detail-page .pillar-logo-overlay {
  display: none !important;
}
.pillar-logo-header {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,186,8,0.055), transparent 28%),
    linear-gradient(to bottom, rgba(13,13,13,0.32), rgba(13,13,13,0)),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, auto, 600px 600px !important;
}
.alberenar-page .hero-banner {
  background-image: url('../images/alberenar_banner_safe.webp') !important;
  background-position: center center !important;
  background-size: cover !important;
}
.alberenar-page .hero-banner::after {
  height: clamp(260px, 40svh, 470px) !important;
  background: linear-gradient(to bottom,
    rgba(13,13,13,0) 0%,
    rgba(13,13,13,0.18) 36%,
    rgba(13,13,13,0.82) 76%,
    rgba(13,13,13,1) 100%) !important;
}
@media (max-width: 760px) {
  .about-page .forge-mark-card {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .about-page .forge-mark-icon {
    margin: 0 auto !important;
  }
  .pillar-detail-page .pillar-logo-mark,
  .pillar-detail-page .pillar-logo-mark--single {
    width: min(78vw, 320px) !important;
    max-width: min(78vw, 320px) !important;
  }
}


/* v9.25 repair: approved Resonance banner, transparent symbol-only icons, and brighter active pillar logos. */
.about-page .forge-mark-icon,
.about-page .pillar-card-icon,
.about-page .pillar-heading-icon {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 12px rgba(255,232,144,0.78))
    drop-shadow(0 0 28px rgba(255,202,82,0.42)) !important;
}
.about-page .forge-mark-card {
  grid-template-columns: clamp(132px, 13vw, 168px) 1fr !important;
}
.about-page .forge-mark-icon {
  width: clamp(118px, 12vw, 154px) !important;
  height: clamp(118px, 12vw, 154px) !important;
}
.about-page .service-card > .pillar-card-icon {
  width: clamp(102px, 9vw, 128px) !important;
  height: clamp(102px, 9vw, 128px) !important;
  margin: 0 auto 1.05rem !important;
}
.about-page .pillar-heading-icon {
  width: clamp(84px, 8vw, 112px) !important;
  height: clamp(84px, 8vw, 112px) !important;
}
.about-page img[src$="logo-resonance.webp"].forge-mark-icon,
.about-page img[src$="logo-resonance.webp"].pillar-card-icon,
.about-page img[src$="logo-resonance.webp"].pillar-heading-icon,
.about-page img[src$="logo-waveform.webp"].forge-mark-icon,
.about-page img[src$="logo-waveform.webp"].pillar-card-icon,
.about-page img[src$="logo-waveform.webp"].pillar-heading-icon {
  filter:
    brightness(1.26)
    contrast(1.12)
    drop-shadow(0 0 15px rgba(255,238,158,0.92))
    drop-shadow(0 0 34px rgba(255,202,82,0.58)) !important;
}
.pillar-detail-page .pillar-logo-stage,
.pillar-detail-page .pillar-logo-base,
.pillar-detail-page .pillar-logo-overlay {
  display: none !important;
}
.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single {
  display: block !important;
  width: min(82vw, 410px) !important;
  max-width: min(82vw, 410px) !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter:
    drop-shadow(0 0 22px rgba(0,0,0,0.62))
    drop-shadow(0 0 22px rgba(255,202,82,0.30))
    drop-shadow(0 0 46px rgba(255,214,98,0.18)) !important;
}
.pillar-logo-header {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,186,8,0.06), transparent 30%),
    linear-gradient(to bottom, rgba(13,13,13,0.28), rgba(13,13,13,0)),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, auto, 600px 600px !important;
}
.resonance-page .hero-banner {
  background-image: url('../images/resonance_banner_safe.webp') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  height: max(560px, calc(100vw * 0.3998991427)) !important;
  min-height: max(560px, calc(100vw * 0.3998991427)) !important;
  max-height: none !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}
.resonance-page .hero-banner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 48% 42%, rgba(0,0,0,0.05), rgba(0,0,0,0.22) 54%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.03) 38%, rgba(13,13,13,0.74) 100%) !important;
}
.resonance-page .hero-banner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(230px, 34svh, 420px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom,
    rgba(13,13,13,0) 0%,
    rgba(13,13,13,0.22) 35%,
    rgba(13,13,13,0.76) 73%,
    rgba(13,13,13,1) 100%) !important;
}
.resonance-page .hero-banner .banner-content {
  position: relative !important;
  z-index: 2 !important;
}
.resonance-page .hero-banner + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom, rgba(13,13,13,1), rgba(13,13,13,0.72) 110px, rgba(13,13,13,0) 320px),
    url('../images/background_texture.webp') repeat !important;
  background-size: auto, 600px 600px !important;
}
@media (max-width: 760px) {
  .about-page .forge-mark-card {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .about-page .forge-mark-icon { margin: 0 auto !important; }
  .pillar-detail-page .pillar-logo-mark,
  .pillar-detail-page .pillar-logo-mark--single {
    width: min(78vw, 325px) !important;
    max-width: min(78vw, 325px) !important;
  }
  .resonance-page .hero-banner {
    height: 560px !important;
    min-height: 560px !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}


/* v9.26 corrective pass — built from v9.25, not v9.19.
   Uses the final supplied highlighted-symbol logo artwork for the five current About Us pillars:
   Creation, Craft, Essence, Resonance, and Lore. Full pillar logos are transparent WebP files.
   Segregated symbols are transparent icon crops with no boxes, circles, or oversized overlay blocks. */
.about-page .services-grid .service-card > .pillar-card-logo {
  display: block !important;
  width: clamp(138px, 13.2vw, 188px) !important;
  max-width: min(82%, 188px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 auto 1.08rem !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
  filter: drop-shadow(0 0 16px rgba(0,0,0,0.60)) !important;
}
.about-page .forge-mark-icon,
.about-page .pillar-heading-icon,
.about-page .pillar-card-icon,
.pillar-detail-page .pillar-heading-icon {
  display: block !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.52)) !important;
}
.about-page .forge-mark-icon {
  width: clamp(78px, 6.5vw, 98px) !important;
  height: clamp(78px, 6.5vw, 98px) !important;
  min-width: 78px !important;
}
.pillar-detail-page .pillar-heading-icon,
.about-page .pillar-heading-icon {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
}
.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single {
  display: block !important;
  width: clamp(270px, 27vw, 415px) !important;
  max-width: min(88vw, 415px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
  filter: drop-shadow(0 0 18px rgba(0,0,0,0.66)) !important;
}
.about-page .forge-mark-card img,
.about-page .service-card img,
.pillar-detail-page img.pillar-logo-mark,
.pillar-detail-page img.pillar-heading-icon {
  mix-blend-mode: normal !important;
}
@media (max-width: 760px) {
  .about-page .services-grid .service-card > .pillar-card-logo { width: clamp(124px, 48vw, 166px) !important; }
  .about-page .forge-mark-icon { width: 76px !important; height: 76px !important; min-width: 76px !important; }
  .pillar-detail-page .pillar-logo-mark,
  .pillar-detail-page .pillar-logo-mark--single { width: clamp(232px, 74vw, 335px) !important; }
}

/* v9.27 pillar-symbol correction — symbols only in Our Pillars and matched symbol scale.
   The About Us five-symbol list, the Our Pillars cards, and the individual pillar-page section icons
   now use normalised transparent symbol crops so the non-flame marks are no longer visually smaller. */
.about-page .forge-mark-grid {
  gap: clamp(1.15rem, 2.2vw, 1.65rem) !important;
}
.about-page .forge-mark-card {
  grid-template-columns: clamp(156px, 15vw, 196px) 1fr !important;
  align-items: center !important;
}
.about-page .forge-mark-icon,
.about-page .service-card > .pillar-card-icon,
.about-page .pillar-heading-icon,
.pillar-detail-page .pillar-heading-icon {
  display: block !important;
  width: clamp(136px, 12.5vw, 168px) !important;
  height: clamp(136px, 12.5vw, 168px) !important;
  min-width: clamp(136px, 12.5vw, 168px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 11px rgba(0,0,0,0.56))
    drop-shadow(0 0 14px rgba(255,232,144,0.44))
    drop-shadow(0 0 30px rgba(255,202,82,0.26)) !important;
}
.about-page .service-card > .pillar-card-icon {
  margin-bottom: 1.1rem !important;
}
.about-page .services-grid .service-card > .pillar-card-logo {
  display: none !important;
}
.pillar-detail-page .pillar-heading-line,
.about-page .pillar-heading-line {
  grid-template-columns: clamp(148px, 13vw, 184px) 1fr !important;
  align-items: center !important;
  gap: clamp(1rem, 2vw, 1.45rem) !important;
}
@media (max-width: 760px) {
  .about-page .forge-mark-card,
  .pillar-detail-page .pillar-heading-line,
  .about-page .pillar-heading-line {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .about-page .forge-mark-icon,
  .about-page .service-card > .pillar-card-icon,
  .about-page .pillar-heading-icon,
  .pillar-detail-page .pillar-heading-icon {
    width: 136px !important;
    height: 136px !important;
    min-width: 136px !important;
  }
}

/* v9.28 symbol crop repair — fixed essence right-edge crop and resonance bottom breathing room. */
.about-page img[src$="logo-essence.webp"].forge-mark-icon,
.about-page img[src$="logo-essence.webp"].pillar-card-icon,
.about-page img[src$="logo-essence.webp"].pillar-heading-icon,
.pillar-detail-page img[src$="logo-essence.webp"].pillar-heading-icon,
.about-page img[src$="logo-resonance.webp"].forge-mark-icon,
.about-page img[src$="logo-resonance.webp"].pillar-card-icon,
.about-page img[src$="logo-resonance.webp"].pillar-heading-icon,
.pillar-detail-page img[src$="logo-resonance.webp"].pillar-heading-icon {
  transform: none !important;
  object-position: center center !important;
}


/* v9.30 pillar symbol unification — transparent symbol-only assets, unified sizing, no per-symbol shrink/boost. */
.about-page .forge-mark-icon,
.about-page .pillar-card-icon,
.about-page .pillar-heading-icon,
.pillar-detail-page .pillar-heading-icon {
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 0 10px rgba(255, 191, 77, 0.46)) drop-shadow(0 0 24px rgba(255, 126, 24, 0.22)) !important;
}
.about-page .forge-mark-icon,
.about-page .pillar-heading-icon,
.pillar-detail-page .pillar-heading-icon {
  width: clamp(132px, 11vw, 152px) !important;
  height: clamp(132px, 11vw, 152px) !important;
  min-width: clamp(132px, 11vw, 152px) !important;
}
.about-page .service-card > .pillar-card-icon {
  width: clamp(132px, 10vw, 150px) !important;
  height: clamp(132px, 10vw, 150px) !important;
  min-width: clamp(132px, 10vw, 150px) !important;
}
.about-page img[src$="logo-essence.webp"],
.about-page img[src$="logo-resonance.webp"],
.about-page img[src$="logo-craft.webp"],
.about-page img[src$="logo-lore.webp"],
.about-page img[src$="logo-creation.webp"],
.pillar-detail-page img[src$="logo-essence.webp"],
.pillar-detail-page img[src$="logo-resonance.webp"],
.pillar-detail-page img[src$="logo-craft.webp"],
.pillar-detail-page img[src$="logo-lore.webp"],
.pillar-detail-page img[src$="logo-creation.webp"] {
  transform: none !important;
}

/* v9.31 correction: no image generation; website package/code-and-asset repair only.
   Alberenar and Resonance game banners now fade the artwork itself into the shared stone wallpaper,
   rather than fading into a flat black strip. The repaired flame/book symbols remove embedded matte artefacts. */
.alberenar-page .hero-banner,
.resonance-page .hero-banner {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  overflow: hidden !important;
  position: relative !important;
  isolation: isolate !important;
}

.alberenar-page .hero-banner::before,
.resonance-page .hero-banner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center top !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 58%,
    rgba(0,0,0,0.90) 70%,
    rgba(0,0,0,0.46) 86%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 58%,
    rgba(0,0,0,0.90) 70%,
    rgba(0,0,0,0.46) 86%,
    transparent 100%) !important;
}

.alberenar-page .hero-banner::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.03) 42%, rgba(0,0,0,0.08) 72%, rgba(0,0,0,0.16) 100%),
    url('../images/alberenar_banner_safe.webp') !important;
}

.resonance-page .hero-banner::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.03) 42%, rgba(0,0,0,0.08) 72%, rgba(0,0,0,0.16) 100%),
    url('../images/resonance_banner_safe.webp') !important;
}

.alberenar-page .hero-banner::after,
.resonance-page .hero-banner::after {
  display: none !important;
  content: none !important;
}

.alberenar-page .hero-banner .banner-content,
.resonance-page .hero-banner .banner-content {
  position: relative !important;
  z-index: 2 !important;
}

.alberenar-page .hero-banner + section,
.resonance-page .hero-banner + section,
.alberenar-page .media-carousel,
.resonance-page .media-carousel {
  background: transparent !important;
  background-image: none !important;
}

/* v9.31 symbol harmony: keep the cards symbol-only, remove any old per-symbol overrides, and nudge
   the repaired flame/book so their visual weight sits with the Resonance benchmark. */
.about-page .forge-mark-icon,
.about-page .pillar-card-icon,
.about-page .pillar-heading-icon,
.pillar-detail-page .pillar-heading-icon {
  mix-blend-mode: normal !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter:
    drop-shadow(0 0 10px rgba(255,191,77,0.38))
    drop-shadow(0 0 22px rgba(255,126,24,0.18)) !important;
}

.about-page img[src$="logo-creation.webp"],
.pillar-detail-page img[src$="logo-creation.webp"],
.about-page img[src$="logo-lore.webp"],
.pillar-detail-page img[src$="logo-lore.webp"] {
  transform: scale(1.055) !important;
}

@media (max-width: 760px) {
  .alberenar-page .hero-banner::before,
  .resonance-page .hero-banner::before {
    background-size: cover !important;
    background-position: center center !important;
  }
}



/* v9.32 correction — no image generation; finalise logo/symbol intent.
   Game banners fade artwork into the shared stone wallpaper by covering the hero area first, rather than ending at the image edge.
   Isolated pillar symbols are clean symbol assets only; no artificial per-symbol glow/filter.
   The orange ambience now comes from the card/backdrop treatment and the full pillar logos, not from individual symbol filters. */
.alberenar-page .hero-banner,
.resonance-page .hero-banner {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
  background-position: center top !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.alberenar-page .hero-banner::before,
.resonance-page .hero-banner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 62%,
    rgba(0,0,0,0.86) 76%,
    rgba(0,0,0,0.38) 91%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 62%,
    rgba(0,0,0,0.86) 76%,
    rgba(0,0,0,0.38) 91%,
    transparent 100%) !important;
}

.alberenar-page .hero-banner::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.05)),
    url('../images/alberenar_banner_safe.webp') !important;
}

.resonance-page .hero-banner::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.05)),
    url('../images/resonance_banner_safe.webp') !important;
}

.alberenar-page .hero-banner::after,
.resonance-page .hero-banner::after {
  display: none !important;
  content: none !important;
}

.about-page .page-hero--about {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
}

.about-hero-logo {
  width: clamp(350px, 25vw, 470px) !important;
  opacity: 1 !important;
  transform: none !important;
  object-fit: contain !important;
  filter:
    brightness(1.18)
    contrast(1.16)
    saturate(1.08)
    drop-shadow(0 0 22px rgba(255,148,24,0.26))
    drop-shadow(0 20px 36px rgba(0,0,0,0.72)) !important;
}

.about-page .forge-mark-icon,
.about-page .pillar-card-icon,
.about-page .pillar-heading-icon,
.pillar-detail-page .pillar-heading-icon {
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.about-page .forge-mark-icon,
.about-page .pillar-heading-icon,
.pillar-detail-page .pillar-heading-icon {
  width: clamp(132px, 11vw, 152px) !important;
  height: clamp(132px, 11vw, 152px) !important;
  min-width: clamp(132px, 11vw, 152px) !important;
}

.about-page .service-card > .pillar-card-icon {
  width: clamp(132px, 10vw, 150px) !important;
  height: clamp(132px, 10vw, 150px) !important;
  min-width: clamp(132px, 10vw, 150px) !important;
}

/* Full pillar logo marks: keep the intended highlighted-symbol logo treatment, but make the logo itself more present. */
.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single {
  width: min(84vw, 430px) !important;
  max-width: min(84vw, 430px) !important;
  opacity: 1 !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter:
    brightness(1.12)
    contrast(1.09)
    saturate(1.05)
    drop-shadow(0 0 24px rgba(255,148,24,0.24))
    drop-shadow(0 18px 34px rgba(0,0,0,0.72)) !important;
}

@media (max-width: 760px) {
  .about-hero-logo {
    width: min(82vw, 380px) !important;
  }
  .pillar-detail-page .pillar-logo-mark,
  .pillar-detail-page .pillar-logo-mark--single {
    width: min(82vw, 350px) !important;
    max-width: min(82vw, 350px) !important;
  }
}

/* v9.34 targeted pillar-logo/symbol correction.
   Essence pillar logo now uses the brighter highlighted Essence logo asset.
   The isolated Resonance waveform in the About Us symbol lists is a clean source-logo crop with no added glow/filter. */
.about-page img[src$="logo-resonance.webp"].forge-mark-icon,
.about-page img[src$="logo-resonance.webp"].pillar-card-icon,
.about-page img[src$="logo-resonance.webp"].pillar-heading-icon,
.pillar-detail-page img[src$="logo-resonance.webp"].pillar-heading-icon {
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
}

/* v9.36 resonance symbol parity correction.
   Restore the same subtle ambient pillar-symbol glow to the isolated Resonance waveform
   that the other four source-logo symbols receive. This is a CSS/package repair only:
   no generated imagery and no redesign. */
.about-page img[src$="logo-resonance.webp"].forge-mark-icon,
.about-page img[src$="logo-resonance.webp"].pillar-card-icon,
.about-page img[src$="logo-resonance.webp"].pillar-heading-icon,
.pillar-detail-page img[src$="logo-resonance.webp"].pillar-heading-icon,
.about-page img[src$="logo-waveform.webp"].forge-mark-icon,
.about-page img[src$="logo-waveform.webp"].pillar-card-icon,
.about-page img[src$="logo-waveform.webp"].pillar-heading-icon,
.pillar-detail-page img[src$="logo-waveform.webp"].pillar-heading-icon {
  filter:
    drop-shadow(0 0 10px rgba(255, 191, 77, 0.46))
    drop-shadow(0 0 24px rgba(255, 126, 24, 0.22)) !important;
  box-shadow: none !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
}


/* v9.37 Atmosphere, interaction, and local-generator layer.
   Built on v9.36 resonance glow parity. This layer avoids replacing the repaired logo assets. */
:root {
  --ifs-ember: #f5a13a;
  --ifs-ember-soft: rgba(245, 161, 58, 0.42);
  --ifs-ember-faint: rgba(245, 161, 58, 0.16);
  --ifs-panel-dark: rgba(10, 8, 7, 0.84);
  --ifs-panel-line: rgba(245, 177, 88, 0.24);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 174, 70, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(6,4,3,0.86));
  transition: opacity 180ms ease;
}

body.ifs-enhanced main,
body.ifs-enhanced .site-footer {
  animation: ifsPageEnter 360ms ease-out both;
}

body.ifs-page-exit::before { opacity: 1; }
body.ifs-page-exit main,
body.ifs-page-exit .site-footer {
  transform: translateY(-4px);
  opacity: 0.74;
  filter: blur(1px);
  transition: transform 170ms ease, opacity 170ms ease, filter 170ms ease;
}

@keyframes ifsPageEnter {
  from { opacity: 0.01; transform: translateY(8px); filter: blur(1.5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes ifsPillarBreath {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.96; }
  50% { transform: translateY(-2px) scale(1.018); opacity: 1; }
}

@keyframes ifsForgeHalo {
  0%, 100% { box-shadow: 0 0 18px rgba(245,161,58,0.14), inset 0 0 18px rgba(245,161,58,0.06); }
  50% { box-shadow: 0 0 34px rgba(245,161,58,0.28), inset 0 0 26px rgba(245,161,58,0.11); }
}

@keyframes ifsCompassTurn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ifsResultReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.about-hero-logo,
.studio-identity-mark,
.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single,
.about-page .pillar-card-icon,
.about-page .forge-mark-icon,
.pillar-detail-page .pillar-heading-icon,
.about-page .pillar-heading-icon {
  animation: ifsPillarBreath 7.5s ease-in-out infinite;
}

.about-page .service-card,
.pillar-detail-panel,
.pillar-example-card,
.home-project-card,
.forge-latest-card,
.studio-route-card,
.tool-panel,
.download-card,
.archive-entry {
  transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease, background 190ms ease;
}

.about-page .service-card:hover,
.pillar-detail-panel:hover,
.pillar-example-card:hover,
.home-project-card:hover,
.forge-latest-card:hover,
.studio-route-card:hover,
.tool-panel:hover,
.download-card:hover,
.archive-entry:hover {
  border-color: rgba(245, 177, 88, 0.42) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.46), 0 0 28px rgba(245, 161, 58, 0.13) !important;
}

.pillar-logo-header::after,
.page-hero::after,
.hero::after {
  opacity: 0.9;
}

.forge-compass-section,
.forge-generator-section {
  width: min(1180px, calc(100% - 2rem));
  margin: 4.5rem auto;
  position: relative;
}

.forge-compass-shell {
  display: grid;
  grid-template-columns: minmax(190px, 270px) minmax(0, 1.15fr) minmax(270px, 0.85fr);
  gap: clamp(1.25rem, 3vw, 2.4rem);
  align-items: center;
  padding: clamp(1.4rem, 3.2vw, 2.5rem);
  border: 1px solid var(--ifs-panel-line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 25%, rgba(245,161,58,0.14), transparent 28%),
    linear-gradient(135deg, rgba(24,18,13,0.92), rgba(6,5,5,0.88));
  box-shadow: 0 24px 70px rgba(0,0,0,0.54), inset 0 0 40px rgba(255,172,69,0.04);
  overflow: hidden;
  isolation: isolate;
}

.forge-compass-shell::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    conic-gradient(from 90deg, transparent, rgba(245,161,58,0.11), transparent 32%, rgba(128,102,255,0.08), transparent 62%, rgba(245,161,58,0.08), transparent);
  opacity: 0.68;
  animation: ifsCompassTurn 42s linear infinite;
}

.forge-compass-orb {
  position: relative;
  width: min(250px, 62vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border-radius: 999px;
  animation: ifsForgeHalo 6.8s ease-in-out infinite;
}

.forge-compass-orb img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255,179,76,0.32));
}

.forge-compass-ring {
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(245,177,88,0.30);
  border-radius: 999px;
}

.forge-compass-ring--inner {
  inset: 18%;
  border-style: dashed;
  opacity: 0.7;
  animation: ifsCompassTurn 28s linear infinite reverse;
}

.forge-compass-copy h2,
.forge-generator-section h2 {
  margin-top: 0.15rem;
}

.forge-compass-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.forge-compass-choice {
  border: 1px solid rgba(245,177,88,0.28);
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  color: #f4e4cb;
  padding: 0.62rem 0.9rem;
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.forge-compass-choice:hover,
.forge-compass-choice:focus-visible,
.forge-compass-choice.active {
  background: rgba(245,161,58,0.16);
  border-color: rgba(245,177,88,0.58);
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(245,161,58,0.14);
}

.forge-compass-result,
.forge-generator-card {
  border: 1px solid rgba(245,177,88,0.28);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
    rgba(7,6,5,0.72);
  padding: clamp(1.1rem, 2vw, 1.45rem);
  box-shadow: inset 0 0 28px rgba(245,161,58,0.04);
}

.forge-compass-result.is-changing {
  animation: ifsResultReveal 240ms ease-out both;
}

.forge-generator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.3rem);
  margin-top: 1.4rem;
}

.forge-generator-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.forge-generator-card h3 { margin-bottom: 0; }
.forge-generator-card p { margin-top: 0; }

.forge-generator-output {
  margin-top: auto;
  min-height: 7.2rem;
  border-radius: 18px;
  border: 1px solid rgba(245,177,88,0.19);
  background: rgba(0,0,0,0.28);
  padding: 1rem;
  color: #f8ead5;
  line-height: 1.55;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.22);
}

.forge-generator-output.is-fresh {
  animation: ifsResultReveal 260ms ease-out both;
}

.forge-generator-output strong {
  color: #ffc96d;
  display: block;
  margin-bottom: 0.35rem;
}

@media (max-width: 980px) {
  .forge-compass-shell {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .forge-compass-controls { justify-content: center; }
  .forge-generator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .forge-compass-section,
  .forge-generator-section { width: min(100% - 1rem, 1180px); margin-block: 3rem; }
  .forge-compass-shell { border-radius: 22px; padding: 1.1rem; }
  .forge-generator-grid { grid-template-columns: 1fr; }
  .forge-compass-choice { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.ifs-enhanced main,
  body.ifs-enhanced .site-footer,
  .about-hero-logo,
  .studio-identity-mark,
  .pillar-detail-page .pillar-logo-mark,
  .pillar-detail-page .pillar-logo-mark--single,
  .about-page .pillar-card-icon,
  .about-page .forge-mark-icon,
  .pillar-detail-page .pillar-heading-icon,
  .about-page .pillar-heading-icon,
  .forge-compass-shell::before,
  .forge-compass-ring--inner,
  .forge-compass-orb,
  .forge-compass-result.is-changing,
  .forge-generator-output.is-fresh {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
  body.ifs-page-exit main,
  body.ifs-page-exit .site-footer {
    transform: none;
    filter: none;
    opacity: 1;
  }
}


/* v9.45 layered homepage orb scale correction
   Uses the supplied transparent globe/logo assets. The globe moves; the Infinite Forge symbols stay fixed.
   The globe/logo layer has been reduced again so the orb sits further back within the hero composition. */

@keyframes ifsLayeredGlobeSlowTurn {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, calc(-50% + 0.28%)) rotate(180deg) scale(1.006); }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes ifsContactWaterShimmer {
  0%, 70%, 100% { background-position: 0 0, 125% 100%; opacity: 1; }
  82% { background-position: 0 0, -8% 100%; opacity: 1; }
  90% { background-position: 0 0, 6% 100%; opacity: 1; }
}

/* Replace the flat homepage hero image with layered artwork: base scene, moving globe, fixed logo overlay. */
.home-page .hero--studio,
.home-page .hero--home-refined {
  background-image: none !important;
  background-color: #050505 !important;
  overflow: hidden !important;
}

.home-page .hero--studio::before,
.home-page .hero--home-refined::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  width: auto !important;
  transform: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

.home-hero-layered-art {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(600px, 58vw, 900px);
  aspect-ratio: 2 / 3;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 7%,
    rgba(0,0,0,0.78) 16%,
    rgba(0,0,0,1) 24%,
    rgba(0,0,0,1) 76%,
    rgba(0,0,0,0.78) 84%,
    rgba(0,0,0,0.18) 93%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 7%,
    rgba(0,0,0,0.78) 16%,
    rgba(0,0,0,1) 24%,
    rgba(0,0,0,1) 76%,
    rgba(0,0,0,0.78) 84%,
    rgba(0,0,0,0.18) 93%,
    rgba(0,0,0,0) 100%);
}

.home-hero-layered-art__base,
.home-orb-scene__base {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-hero-layered-art__globe,
.home-hero-layered-art__overlay,
.home-orb-scene__globe,
.home-orb-scene__overlay {
  position: absolute;
  left: 50%;
  top: 21.75%;
  width: 39%;
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
}

.home-hero-layered-art__globe,
.home-orb-scene__globe {
  z-index: 2;
  filter: drop-shadow(0 0 18px rgba(255, 179, 76, 0.18));
  animation: ifsLayeredGlobeSlowTurn 115s linear infinite;
  will-change: transform;
}

.home-hero-layered-art__overlay,
.home-orb-scene__overlay {
  z-index: 3;
  filter: drop-shadow(0 0 14px rgba(255, 196, 104, 0.16));
}

.home-page .hero--studio::after,
.home-page .hero--home-refined::after {
  z-index: 1 !important;
}

.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 1100px), (max-height: 940px) {
  .home-hero-layered-art { width: clamp(560px, 72vw, 820px); }
}

@media (max-width: 760px) {
  .home-hero-layered-art { width: min(92vw, 680px); }
}

/* Replace the small homepage intro logo with the same proper layered scene. */
.home-page .studio-identity-panel--home {
  grid-template-columns: minmax(280px, 430px) minmax(0, 1fr) !important;
  gap: clamp(1.35rem, 3vw, 2rem) !important;
  align-items: start !important;
}

.home-orb-scene {
  position: relative;
  width: min(100%, 410px);
  aspect-ratio: 2 / 3;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 22px;
  background: #050505;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 46px rgba(0,0,0,0.45);
  isolation: isolate;
}

@media (max-width: 900px) {
  .home-page .studio-identity-panel--home {
    grid-template-columns: 1fr !important;
    align-items: center !important;
  }
  .home-orb-scene { width: min(100%, 460px); }
}

/* Remove artificial moving beam / torchlight impressions from homepage hover cards and About logos. */
.about-page .about-hero-logo,
.about-page .studio-identity-mark,
.about-page .pillar-card-icon,
.about-page .forge-mark-icon,
.about-page .pillar-heading-icon,
.pillar-detail-page .pillar-logo-mark,
.pillar-detail-page .pillar-logo-mark--single,
.pillar-detail-page .pillar-heading-icon {
  animation: none !important;
  transform: none !important;
}

.about-page .page-hero::after,
.about-page .about-hero-logo::before,
.about-page .about-hero-logo::after,
.about-page .service-card::before,
.about-page .service-card::after,
.about-page .forge-mark-card::before,
.about-page .forge-mark-card::after,
.home-page .studio-identity-panel--home::before,
.home-page .studio-identity-panel--home::after,
.home-page .home-project-card::before,
.home-page .home-project-card::after,
.home-page .studio-route-card::before,
.home-page .studio-route-card::after,
.home-page .forge-latest-card::before,
.home-page .forge-latest-card::after {
  animation: none !important;
}

.home-page .home-project-card,
.home-page .studio-route-card,
.home-page .forge-latest-card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

.home-page .home-project-card:hover,
.home-page .studio-route-card:hover,
.home-page .forge-latest-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.46) !important;
}

/* Contact page: restrained occasional water shimmer, preserving the existing banner and fade. */
.contact-page .page-hero--contact::after {
  height: clamp(220px, 33svh, 380px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.18) 24%,
      rgba(13,13,13,0.50) 58%,
      rgba(13,13,13,0.95) 100%),
    linear-gradient(110deg,
      rgba(255,255,255,0) 0%,
      rgba(255,214,140,0) 33%,
      rgba(255,214,140,0.08) 42%,
      rgba(255,255,255,0.02) 48%,
      rgba(255,214,140,0.07) 55%,
      rgba(255,255,255,0) 64%,
      rgba(255,255,255,0) 100%) !important;
  background-size: 100% 100%, 250% 100% !important;
  background-position: 0 0, 125% 100% !important;
  animation: ifsContactWaterShimmer 11s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-layered-art__globe,
  .home-orb-scene__globe,
  .contact-page .page-hero--contact::after {
    animation: none !important;
  }
}


/* v9.47 correction: remove moving torchlight/sweep effects site-wide and raise homepage globe.
   The layered homepage globe remains animated; card/logo hover beams and rotating decorative halos are suppressed. */
:where(
  .home-project-card,
  .studio-route-card,
  .forge-latest-card,
  .service-card,
  .forge-mark-card,
  .pillar-detail-panel,
  .pillar-example-card,
  .download-card,
  .tool-panel,
  .archive-entry,
  .game-card,
  .project-card,
  .feature-card,
  .resource-card,
  .lore-card,
  .forge-generator-card,
  .forge-compass-shell,
  .forge-compass-orb,
  .studio-identity-panel,
  .studio-identity-mark,
  .about-hero-logo,
  .pillar-logo-mark,
  .pillar-logo-mark--single,
  .pillar-card-icon,
  .forge-mark-icon,
  .pillar-heading-icon
)::before,
:where(
  .home-project-card,
  .studio-route-card,
  .forge-latest-card,
  .service-card,
  .forge-mark-card,
  .pillar-detail-panel,
  .pillar-example-card,
  .download-card,
  .tool-panel,
  .archive-entry,
  .game-card,
  .project-card,
  .feature-card,
  .resource-card,
  .lore-card,
  .forge-generator-card,
  .forge-compass-shell,
  .forge-compass-orb,
  .studio-identity-panel,
  .studio-identity-mark,
  .about-hero-logo,
  .pillar-logo-mark,
  .pillar-logo-mark--single,
  .pillar-card-icon,
  .forge-mark-icon,
  .pillar-heading-icon
)::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

:where(
  .about-hero-logo,
  .studio-identity-mark,
  .pillar-logo-mark,
  .pillar-logo-mark--single,
  .pillar-card-icon,
  .forge-mark-icon,
  .pillar-heading-icon,
  .forge-compass-shell,
  .forge-compass-ring,
  .forge-compass-ring--inner,
  .forge-compass-orb
) {
  animation: none !important;
}

:where(
  .home-project-card,
  .studio-route-card,
  .forge-latest-card,
  .service-card,
  .pillar-detail-panel,
  .pillar-example-card,
  .download-card,
  .tool-panel,
  .archive-entry,
  .game-card,
  .project-card,
  .feature-card,
  .resource-card,
  .lore-card,
  .forge-generator-card
):hover {
  box-shadow: 0 16px 34px rgba(0,0,0,0.46) !important;
  border-color: rgba(245,177,88,0.34) !important;
}

.home-hero-layered-art__globe,
.home-orb-scene__globe {
  animation: ifsLayeredGlobeSlowTurn 115s linear infinite !important;
}

.contact-page .page-hero--contact::after {
  animation: ifsContactWaterShimmer 11s ease-in-out infinite !important;
}

/* --------------------------------------------------------------------------
   v9.48 — Homepage original-hand correction
   This pass does not create new artwork. It restores the original static hero
   artwork as the base layer so the figures retain the correct palm-down hand
   positioning. The rotating globe becomes a subtle surface-motion layer rather
   than a full replacement orb, and the baked-in logo/symbols remain static.
   -------------------------------------------------------------------------- */

/* Use the original composite art as the visible base. It already contains the
   correct hands, the correct held globe, and the fixed logo/symbol placement. */
.home-hero-layered-art__base,
.home-orb-scene__base {
  object-fit: cover !important;
  opacity: 1 !important;
}

/* The separate globe layer now behaves as a very subtle surface shimmer/rotation,
   avoiding the visual problem of replacing the original held orb. */
.home-hero-layered-art__globe,
.home-orb-scene__globe {
  top: 21.75% !important;
  width: 39% !important;
  z-index: 2 !important;
  opacity: 0.24 !important;
  mix-blend-mode: soft-light !important;
  filter: saturate(1.08) contrast(1.05) drop-shadow(0 0 10px rgba(255, 179, 76, 0.10)) !important;
  animation: ifsLayeredGlobeSlowTurn 145s linear infinite !important;
}

/* Do not double the logo. The fixed symbols are already part of the original
   static artwork. */
.home-hero-layered-art__overlay,
.home-orb-scene__overlay {
  opacity: 0 !important;
  display: none !important;
}

/* Keep all homepage text below the orb rather than crossing the globe itself. */
.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  margin-top: clamp(21.5rem, 47svh, 30rem) !important;
  position: relative !important;
  z-index: 5 !important;
}

.home-page .hero-content--brand .eyebrow,
.home-page .hero-content--home-refined .eyebrow {
  margin-bottom: clamp(0.55rem, 1vw, 0.85rem) !important;
}

.home-page .hero-content--brand h1,
.home-page .hero-content--home-refined h1 {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(18.5rem, 43svh, 25rem) !important;
  }
}

@media (max-width: 640px) {
  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(16.5rem, 40svh, 22rem) !important;
  }
}


/* --------------------------------------------------------------------------
   v9.49 — Visible rotating globe with original palm-down hand treatment
   --------------------------------------------------------------------------
   The v9.48 surface motion was too subtle to read as rotation. This pass keeps
   the original composite hero image for the correct hand pose, restores a clear
   rotating globe layer, adds an original-hand foreground layer above it, and
   keeps the Infinite Forge logo/symbol overlay fixed in the centre.
   -------------------------------------------------------------------------- */

.home-hero-layered-art__globe,
.home-hero-layered-art__overlay,
.home-orb-scene__globe,
.home-orb-scene__overlay {
  top: 25.6% !important;
  width: 50.5% !important;
}

.home-hero-layered-art__globe,
.home-orb-scene__globe {
  z-index: 2 !important;
  opacity: 0.74 !important;
  mix-blend-mode: normal !important;
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 0 12px rgba(255, 179, 76, 0.10)) !important;
  animation: ifsLayeredGlobeVisibleTurn 72s linear infinite !important;
  will-change: transform !important;
}

.home-hero-layered-art__hands,
.home-orb-scene__hands {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

.home-hero-layered-art__overlay,
.home-orb-scene__overlay {
  display: block !important;
  opacity: 0.96 !important;
  z-index: 5 !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 0 11px rgba(255, 196, 104, 0.18)) !important;
}

@keyframes ifsLayeredGlobeVisibleTurn {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.002); }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@media (max-width: 900px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    width: 52% !important;
  }
}

@media (max-width: 640px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    width: 55% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-layered-art__globe,
  .home-orb-scene__globe {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   v9.50 — Homepage globe size and placement correction
   --------------------------------------------------------------------------
   Correction requested after v9.49: the visible rotating globe was too large
   and sat too low/left. This is a CSS-only website package revision: no new
   generated artwork and no new image creation.
   -------------------------------------------------------------------------- */

.home-hero-layered-art__globe,
.home-hero-layered-art__overlay,
.home-orb-scene__globe,
.home-orb-scene__overlay {
  left: 52.3% !important;
  top: 20.35% !important;
  width: 39% !important;
}

.home-hero-layered-art__globe,
.home-orb-scene__globe {
  opacity: 0.70 !important;
  animation: ifsLayeredGlobeVisibleTurn 82s linear infinite !important;
}

.home-hero-layered-art__overlay,
.home-orb-scene__overlay {
  opacity: 0.94 !important;
}

@media (max-width: 900px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    left: 52% !important;
    top: 21.2% !important;
    width: 42% !important;
  }
}

@media (max-width: 640px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    left: 51.5% !important;
    top: 22% !important;
    width: 46% !important;
  }
}

/* --------------------------------------------------------------------------
   v9.51 — Clean base / smaller raised globe correction
   --------------------------------------------------------------------------
   The v9.50 screenshot showed a visible doubled globe because the rotating
   globe layer sat over the original composite artwork, which already contained
   the full globe and logo. This pass uses the supplied no-globe hero backdrop as
   the base image, keeps the rotating globe as the only visible orb, keeps the
   Infinite Forge logo/symbol overlay static, and retains the original palm-down
   hand foreground layer above the globe.
   -------------------------------------------------------------------------- */

.home-hero-layered-art__base,
.home-orb-scene__base {
  opacity: 1 !important;
  object-fit: cover !important;
}

.home-hero-layered-art__globe,
.home-hero-layered-art__overlay,
.home-orb-scene__globe,
.home-orb-scene__overlay {
  left: 53.4% !important;
  top: 18.35% !important;
  width: 34.5% !important;
}

.home-hero-layered-art__globe,
.home-orb-scene__globe {
  opacity: 0.98 !important;
  mix-blend-mode: normal !important;
  filter: saturate(1.04) contrast(1.03) drop-shadow(0 0 12px rgba(255, 179, 76, 0.14)) !important;
  animation: ifsLayeredGlobeVisibleTurn 92s linear infinite !important;
  z-index: 2 !important;
}

.home-hero-layered-art__hands,
.home-orb-scene__hands {
  z-index: 4 !important;
  opacity: 1 !important;
}

.home-hero-layered-art__overlay,
.home-orb-scene__overlay {
  display: block !important;
  opacity: 0.96 !important;
  z-index: 5 !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 0 11px rgba(255, 196, 104, 0.18)) !important;
}

.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  margin-top: clamp(19.5rem, 43svh, 27rem) !important;
}

@media (max-width: 900px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    left: 52.8% !important;
    top: 20.5% !important;
    width: 38.5% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(18rem, 41svh, 24rem) !important;
  }
}

@media (max-width: 640px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    left: 52% !important;
    top: 22% !important;
    width: 43% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(16.5rem, 39svh, 21.5rem) !important;
  }
}



/* --------------------------------------------------------------------------
   v9.53 — Homepage hero clean-energy rebuild
   --------------------------------------------------------------------------
   Uses a new no-globe/no-logo base hero image with the original-style cloud
   glow restored and the pointing-finger lightning preserved. The only visible
   solid globe is the separate rotating globe layer; the Infinite Forge mark is
   a static centre overlay and does not fill the circumference of the globe.
   -------------------------------------------------------------------------- */

.home-hero-layered-art,
.home-orb-scene {
  background: #030304 !important;
  isolation: isolate !important;
}

.home-hero-layered-art__base,
.home-orb-scene__base {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

.home-hero-layered-art::after,
.home-orb-scene::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.72 !important;
  background:
    radial-gradient(circle at 50% 27.5%, rgba(255, 156, 54, 0.24) 0%, rgba(255, 139, 36, 0.13) 18%, rgba(255, 139, 36, 0.04) 33%, rgba(255, 139, 36, 0) 49%),
    radial-gradient(circle at 42% 33%, rgba(255, 186, 91, 0.10) 0%, rgba(255, 186, 91, 0) 29%),
    radial-gradient(circle at 58% 33%, rgba(91, 181, 255, 0.08) 0%, rgba(91, 181, 255, 0) 27%) !important;
  mix-blend-mode: screen !important;
}


.home-hero-layered-art__globe,
.home-hero-layered-art__overlay,
.home-orb-scene__globe,
.home-orb-scene__overlay {
  left: 50% !important;
  top: 27.5% !important;
  width: 40.5% !important;
  height: auto !important;
  transform: translate(-50%, -50%);
  transform-origin: center center !important;
  pointer-events: none !important;
}

.home-hero-layered-art__globe,
.home-orb-scene__globe {
  z-index: 3 !important;
  opacity: 0.96 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(1.06)
    contrast(1.04)
    drop-shadow(0 0 15px rgba(255, 178, 76, 0.22))
    drop-shadow(0 0 42px rgba(255, 121, 28, 0.10)) !important;
  animation: ifsLayeredGlobeVisibleTurn 88s linear infinite !important;
}

.home-hero-layered-art__overlay,
.home-orb-scene__overlay {
  z-index: 4 !important;
  display: block !important;
  opacity: 0.96 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 0 10px rgba(255, 211, 137, 0.30))
    drop-shadow(0 0 22px rgba(255, 151, 46, 0.10)) !important;
}

.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  margin-top: clamp(22.5rem, 52svh, 33rem) !important;
  position: relative !important;
  z-index: 5 !important;
}

@media (max-width: 900px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    top: 28.4% !important;
    width: 43.5% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(18.25rem, 43svh, 25rem) !important;
  }
}

@media (max-width: 640px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    top: 29.8% !important;
    width: 48% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(16.75rem, 39svh, 22rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-layered-art__globe,
  .home-orb-scene__globe {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   v9.54 — Homepage globe motion and placement correction
   --------------------------------------------------------------------------
   Removes the rejected SVG energy-field markup from the homepage, raises the
   central orb, and restores visible globe rotation. The previous transform
   declaration used !important, which prevented the keyframe transform from
   taking effect in normal browser rendering.
   -------------------------------------------------------------------------- */

@keyframes ifsGlobeSpinV954 {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.003); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

.home-hero-layered-art::after,
.home-orb-scene::after {
  background:
    radial-gradient(circle at 50% 23.2%, rgba(255, 169, 62, 0.28) 0%, rgba(255, 139, 36, 0.15) 18%, rgba(255, 139, 36, 0.05) 34%, rgba(255, 139, 36, 0) 50%),
    radial-gradient(circle at 42% 30%, rgba(255, 190, 102, 0.12) 0%, rgba(255, 186, 91, 0) 31%),
    radial-gradient(circle at 59% 31%, rgba(91, 181, 255, 0.08) 0%, rgba(91, 181, 255, 0) 28%) !important;
}

.home-hero-layered-art__globe,
.home-hero-layered-art__overlay,
.home-orb-scene__globe,
.home-orb-scene__overlay {
  top: 23.2% !important;
  width: 40.5% !important;
  transform: translate(-50%, -50%);
}

.home-hero-layered-art__globe,
.home-orb-scene__globe {
  animation: ifsGlobeSpinV954 32s linear infinite !important;
  will-change: transform !important;
}

.home-hero-layered-art__overlay,
.home-orb-scene__overlay {
  animation: none !important;
}

.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  margin-top: clamp(20rem, 47svh, 29rem) !important;
}

@media (max-width: 900px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    top: 24.4% !important;
    width: 43.5% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(17.75rem, 41svh, 24rem) !important;
  }
}

@media (max-width: 640px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    top: 26% !important;
    width: 48% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(16.25rem, 38svh, 21.5rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-layered-art__globe,
  .home-orb-scene__globe {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   v9.55 — Homepage globe height and rotation correction
   --------------------------------------------------------------------------
   The v9.54 orb sat too low in the hero and visually covered the hands and
   energy fingers. This pass raises the main hero orb, trims it very slightly,
   and slows the globe rotation so the movement reads as premium surface motion
   rather than a fast spin. The centre logo remains fixed above the moving globe.
   -------------------------------------------------------------------------- */

@keyframes ifsGlobeSpinV955 {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.0015); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

.home-hero-layered-art::after {
  background:
    radial-gradient(circle at 50% 17.1%, rgba(255, 169, 62, 0.26) 0%, rgba(255, 139, 36, 0.13) 18%, rgba(255, 139, 36, 0.045) 34%, rgba(255, 139, 36, 0) 50%),
    radial-gradient(circle at 42% 26%, rgba(255, 190, 102, 0.10) 0%, rgba(255, 186, 91, 0) 31%),
    radial-gradient(circle at 59% 27%, rgba(91, 181, 255, 0.07) 0%, rgba(91, 181, 255, 0) 28%) !important;
}

.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 17.1% !important;
  width: 36.5% !important;
}

.home-hero-layered-art__globe {
  animation: ifsGlobeSpinV955 110s linear infinite !important;
}

.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  margin-top: clamp(20.8rem, 49svh, 30.5rem) !important;
}

@media (max-width: 900px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 18.2% !important;
    width: 39% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(18.25rem, 43svh, 25rem) !important;
  }
}

@media (max-width: 640px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 20.2% !important;
    width: 44% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(16.75rem, 39svh, 22rem) !important;
  }
}

/* --------------------------------------------------------------------------
   v9.56 — Homepage logo warmth, flame glow, and globe contact correction
   --------------------------------------------------------------------------
   Website/code update only. The homepage logo overlay is now a warmer molten-gold
   asset with a stronger central flame glow. The globe has been restored closer
   to the intended scale so the projected lightning reaches the orb, while the
   logo remains fixed at the centre and does not rotate with the globe.
   -------------------------------------------------------------------------- */

@keyframes ifsGlobeSpinV956 {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.001); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes ifsLogoFlameGlowV956 {
  0%, 100% {
    opacity: 0.94;
    filter:
      saturate(1.05)
      brightness(0.98)
      drop-shadow(0 0 10px rgba(255, 184, 68, 0.30))
      drop-shadow(0 0 24px rgba(255, 118, 24, 0.13));
  }
  50% {
    opacity: 1;
    filter:
      saturate(1.12)
      brightness(1.055)
      drop-shadow(0 0 14px rgba(255, 206, 108, 0.43))
      drop-shadow(0 0 34px rgba(255, 130, 30, 0.19));
  }
}

.home-hero-layered-art::after {
  background:
    radial-gradient(circle at 50% 18.2%, rgba(255, 170, 64, 0.28) 0%, rgba(255, 136, 33, 0.145) 18%, rgba(255, 136, 33, 0.052) 35%, rgba(255, 136, 33, 0) 52%),
    radial-gradient(circle at 42% 27%, rgba(255, 194, 104, 0.105) 0%, rgba(255, 186, 91, 0) 32%),
    radial-gradient(circle at 59% 27%, rgba(91, 181, 255, 0.065) 0%, rgba(91, 181, 255, 0) 29%) !important;
}

.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 18.2% !important;
  width: 42% !important;
}

.home-hero-layered-art__globe {
  animation: ifsGlobeSpinV956 130s linear infinite !important;
  opacity: 0.98 !important;
  filter:
    saturate(1.05)
    contrast(1.035)
    drop-shadow(0 0 15px rgba(255, 178, 76, 0.22))
    drop-shadow(0 0 44px rgba(255, 121, 28, 0.11)) !important;
}

.home-hero-layered-art__overlay {
  animation: ifsLogoFlameGlowV956 7.5s ease-in-out infinite !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 900px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 19.35% !important;
    width: 44% !important;
  }
}

@media (max-width: 640px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 21.25% !important;
    width: 48.5% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   v9.57 — Homepage logo realism correction
   --------------------------------------------------------------------------
   Website/package correction only. Replaces the flat glowing overlay with a
   textured molten-gold transparent logo asset based on the existing logo shape.
   The flame has a stronger internal bloom, while the ring and side marks keep
   a metallic gold texture so the overlay sits naturally on the rotating globe.
   -------------------------------------------------------------------------- */

@keyframes ifsLogoRealisticGlowV957 {
  0%, 100% {
    opacity: 0.965;
    filter:
      saturate(1.04)
      brightness(0.985)
      contrast(1.02)
      drop-shadow(0 0 7px rgba(255, 189, 79, 0.24))
      drop-shadow(0 0 18px rgba(255, 125, 25, 0.12));
  }
  50% {
    opacity: 1;
    filter:
      saturate(1.08)
      brightness(1.025)
      contrast(1.035)
      drop-shadow(0 0 9px rgba(255, 212, 118, 0.32))
      drop-shadow(0 0 24px rgba(255, 135, 27, 0.15));
  }
}

.home-hero-layered-art__overlay,
.home-orb-scene__overlay {
  animation: ifsLogoRealisticGlowV957 8.5s ease-in-out infinite !important;
  mix-blend-mode: normal !important;
}

/* --------------------------------------------------------------------------
   v9.58 — Homepage lower intro orb correction
   --------------------------------------------------------------------------
   Keeps the main hero unchanged. The smaller studio intro scene below the
   Infinite Forge Studio heading had inherited an older, faster globe treatment.
   This pass reduces only that lower scene's globe/logo layer, raises it a touch,
   and slows the rotation so the projected hand-lightning remains visible.
   -------------------------------------------------------------------------- */

@keyframes ifsOrbSceneGlobeSpinV958 {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.001); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

.home-orb-scene__globe,
.home-orb-scene__overlay {
  top: 17.8% !important;
  width: 32.5% !important;
}

.home-orb-scene__globe {
  animation: ifsOrbSceneGlobeSpinV958 175s linear infinite !important;
  opacity: 0.97 !important;
  filter:
    saturate(1.04)
    contrast(1.025)
    drop-shadow(0 0 11px rgba(255, 178, 76, 0.18))
    drop-shadow(0 0 32px rgba(255, 121, 28, 0.08)) !important;
}

.home-orb-scene__overlay {
  animation: ifsLogoRealisticGlowV957 9.5s ease-in-out infinite !important;
}

@media (max-width: 900px) {
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    top: 18.5% !important;
    width: 34% !important;
  }
}

@media (max-width: 640px) {
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    top: 19.4% !important;
    width: 37% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   v9.59 — Lower homepage orb contact point and contact-page water treatment
   --------------------------------------------------------------------------
   Website/package correction only. No generated artwork. The lower homepage
   intro orb is positioned to meet the existing finger-lightning, with a slower
   rotation. The Contact hero shimmer is separated from the dark fade and
   constrained to the water beneath the bridge rather than washing across the
   whole banner. The Contact hero copy is nudged slightly down.
   -------------------------------------------------------------------------- */

@keyframes ifsOrbSceneGlobeSpinV959 {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.0008); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

.home-orb-scene__globe,
.home-orb-scene__overlay {
  top: 22.1% !important;
  width: 34.75% !important;
}

.home-orb-scene__globe {
  animation: ifsOrbSceneGlobeSpinV959 225s linear infinite !important;
  opacity: 0.98 !important;
}

.home-orb-scene__overlay {
  animation: ifsLogoRealisticGlowV957 10.5s ease-in-out infinite !important;
}

/* Keep the Contact banner fade dark and stable; the shimmer is now a separate,
   masked element so it is confined to the water below the bridge. */
.contact-page .page-hero--contact::after {
  height: clamp(175px, 24svh, 320px) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.00) 30%,
      rgba(13,13,13,0.12) 58%,
      rgba(13,13,13,0.50) 82%,
      rgba(13,13,13,0.97) 100%) !important;
  background-size: 100% 100% !important;
  background-position: center bottom !important;
  animation: none !important;
}

.contact-page .page-hero--contact .page-hero-content {
  transform: translateY(-58px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 4 !important;
}

.contact-water-shimmer {
  position: absolute !important;
  left: 24.5% !important;
  right: 18.5% !important;
  top: 54.5% !important;
  height: clamp(58px, 9.4vw, 112px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0.38 !important;
  mix-blend-mode: screen !important;
  filter: blur(0.25px) saturate(1.05) !important;
  transform: skewX(-7deg) !important;
  background:
    radial-gradient(ellipse at 48% 44%, rgba(186, 218, 255, 0.22) 0%, rgba(110, 174, 255, 0.12) 20%, rgba(110, 174, 255, 0.00) 58%),
    linear-gradient(96deg,
      rgba(255,255,255,0.00) 0%,
      rgba(162,204,255,0.00) 22%,
      rgba(174,219,255,0.13) 34%,
      rgba(255,224,154,0.075) 43%,
      rgba(135,196,255,0.12) 51%,
      rgba(255,255,255,0.025) 59%,
      rgba(118,177,255,0.10) 68%,
      rgba(255,255,255,0.00) 83%),
    repeating-linear-gradient(178deg,
      rgba(219,236,255,0.075) 0px,
      rgba(219,236,255,0.075) 1px,
      rgba(18,67,101,0.00) 5px,
      rgba(18,67,101,0.00) 12px) !important;
  background-size: 135% 100%, 235% 100%, 100% 18px !important;
  background-position: 48% 50%, 100% 50%, 0 0 !important;
  -webkit-mask-image:
    radial-gradient(ellipse at 48% 48%, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.82) 36%, rgba(0,0,0,0.36) 68%, rgba(0,0,0,0.00) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.86) 21%, rgba(0,0,0,0.96) 62%, rgba(0,0,0,0.00) 100%);
  mask-image:
    radial-gradient(ellipse at 48% 48%, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.82) 36%, rgba(0,0,0,0.36) 68%, rgba(0,0,0,0.00) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.86) 21%, rgba(0,0,0,0.96) 62%, rgba(0,0,0,0.00) 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: ifsContactWaterOnlyShimmerV959 13.5s ease-in-out infinite !important;
}

@keyframes ifsContactWaterOnlyShimmerV959 {
  0%, 100% {
    opacity: 0.23;
    background-position: 48% 50%, 115% 50%, 0 0;
    transform: skewX(-7deg) translateX(-1.6%);
  }
  45% {
    opacity: 0.40;
    background-position: 52% 50%, 53% 50%, 0 2px;
    transform: skewX(-7deg) translateX(1.1%);
  }
  70% {
    opacity: 0.31;
    background-position: 50% 50%, 22% 50%, 0 -1px;
    transform: skewX(-7deg) translateX(0.2%);
  }
}

@media (max-width: 900px) {
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    top: 22.7% !important;
    width: 36.5% !important;
  }

  .contact-page .page-hero--contact .page-hero-content {
    transform: translateY(-46px) !important;
  }

  .contact-water-shimmer {
    left: 20% !important;
    right: 14% !important;
    top: 55.5% !important;
    height: clamp(54px, 11vw, 94px) !important;
  }
}

@media (max-width: 760px) {
  .contact-page .page-hero--contact .page-hero-content {
    transform: none !important;
  }
  .contact-water-shimmer {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .home-orb-scene__globe,
  .home-orb-scene__overlay {
    top: 23.5% !important;
    width: 39% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-orb-scene__globe,
  .home-orb-scene__overlay,
  .contact-water-shimmer {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   v9.60 — Homepage globe alignment, soundtrack library, contact water polish
   --------------------------------------------------------------------------
   Website/package correction only. No image generation. The main homepage
   globe is slightly larger and higher, with mobile scaling adjusted so the
   projected finger-lightning continues to meet the orb. The Soundtracks page
   now supports a local Alberenar playlist and project menu. The Contact hero
   shimmer is strengthened and kept to the water beneath the bridge.
   -------------------------------------------------------------------------- */

@keyframes ifsGlobeSpinV960 {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.0007); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

.home-hero-layered-art::after {
  background:
    radial-gradient(circle at 50% 16.2%, rgba(255, 179, 72, 0.30) 0%, rgba(255, 135, 36, 0.15) 18%, rgba(255, 135, 36, 0.055) 36%, rgba(255, 135, 36, 0) 54%),
    radial-gradient(circle at 42% 26%, rgba(255, 197, 108, 0.11) 0%, rgba(255, 186, 91, 0) 32%),
    radial-gradient(circle at 60% 27%, rgba(91, 181, 255, 0.07) 0%, rgba(91, 181, 255, 0) 30%) !important;
}

.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 16.2% !important;
  width: 46.5% !important;
}

.home-hero-layered-art__globe {
  animation: ifsGlobeSpinV960 190s linear infinite !important;
}

.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  margin-top: clamp(21.5rem, 50svh, 31.5rem) !important;
}

@media (max-width: 900px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 17.35% !important;
    width: 51% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(19.25rem, 45svh, 26.5rem) !important;
  }
}

@media (max-width: 640px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 18.25% !important;
    width: 57.5% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(18.25rem, 43svh, 24rem) !important;
  }
}

.soundtrack-library-section {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6.5rem) 2rem;
  background:
    radial-gradient(circle at 20% 8%, rgba(232,93,4,0.20), transparent 32%),
    radial-gradient(circle at 80% 18%, rgba(67,215,199,0.10), transparent 34%),
    linear-gradient(180deg, rgba(9,9,9,0.98), rgba(2,2,2,0.94));
}

.soundtrack-library-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,186,99,0.11) 39%, transparent 48%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 74px);
  mix-blend-mode: screen;
}

.soundtrack-library-panel {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 6px solid rgba(232,93,4,0.78);
  background:
    linear-gradient(145deg, rgba(24,24,24,0.96), rgba(6,6,6,0.93)),
    radial-gradient(circle at 50% 0%, rgba(255,186,99,0.11), transparent 42%);
  box-shadow: 0 24px 70px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}

.soundtrack-library-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 28px;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,186,99,0.12), transparent 24%, transparent 68%, rgba(67,215,199,0.08));
  opacity: 0.65;
}

.soundtrack-library-heading,
.soundtrack-world-tabs,
.soundtrack-track-grid,
.soundtrack-coming-soon-panel,
.soundtrack-library-panel .project-placeholder-actions {
  position: relative;
  z-index: 1;
}

.soundtrack-library-heading {
  max-width: 850px;
  margin-bottom: 1.8rem;
}

.soundtrack-library-heading h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 0.8rem;
}

.soundtrack-now-playing {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,186,99,0.28);
  background: rgba(0,0,0,0.42);
  color: var(--text-muted);
}

.soundtrack-now-playing strong {
  color: #ffd27a;
  text-shadow: 0 0 14px rgba(255,157,48,0.38);
}

.soundtrack-world-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

.soundtrack-world-tab {
  border: 1px solid rgba(255,186,99,0.36);
  border-radius: 999px;
  padding: 0.72rem 1.05rem;
  background: rgba(0,0,0,0.45);
  color: #f6efe6;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.soundtrack-world-tab.active {
  color: #100804;
  background: linear-gradient(135deg, #ffb347, #e85d04);
  box-shadow: 0 0 22px rgba(232,93,4,0.27);
}

.soundtrack-world-tab--soon {
  cursor: not-allowed;
  opacity: 0.55;
  border-color: rgba(255,255,255,0.16);
}

.soundtrack-track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.soundtrack-track-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 270px;
  padding: 1.25rem;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,186,99,0.12), transparent 40%),
    linear-gradient(150deg, rgba(18,18,18,0.96), rgba(4,4,4,0.92));
  box-shadow: 0 14px 32px rgba(0,0,0,0.38);
  overflow: hidden;
}

.soundtrack-track-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent, rgba(255,205,120,0.08), transparent 52%);
  opacity: 0.35;
}

.soundtrack-track-card.is-active {
  border-color: rgba(255,186,99,0.48);
  box-shadow: 0 0 0 1px rgba(255,186,99,0.12), 0 18px 44px rgba(0,0,0,0.48), 0 0 28px rgba(232,93,4,0.12);
}

.soundtrack-track-card h3 {
  font-size: 1.45rem;
  margin-bottom: 0.25rem;
}

.soundtrack-track-card p:not(.card-kicker) {
  color: var(--text-muted);
}

.soundtrack-track-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.soundtrack-track-button.active {
  background: linear-gradient(135deg, #ffba52, #e85d04) !important;
  color: #100804 !important;
}

.soundtrack-coming-soon-panel {
  margin-top: 1.4rem;
  padding: 1.2rem 1.35rem;
  border-radius: 22px;
  border: 1px solid rgba(67,215,199,0.18);
  background:
    radial-gradient(circle at 90% 20%, rgba(67,215,199,0.08), transparent 36%),
    rgba(0,0,0,0.35);
}

.soundtrack-coming-soon-panel h3 {
  margin-bottom: 0.4rem;
}

@media (max-width: 900px) {
  .soundtrack-track-grid { grid-template-columns: 1fr; }
  .soundtrack-library-section { padding-left: 1rem; padding-right: 1rem; }
}

.contact-page .page-hero--contact::after {
  z-index: 1 !important;
}

.contact-page .page-hero--contact .page-hero-content {
  transform: translateY(-20px) !important;
  z-index: 4 !important;
}

.contact-water-shimmer {
  left: 29% !important;
  right: 7% !important;
  top: 48.5% !important;
  height: clamp(82px, 11.5vw, 150px) !important;
  z-index: 2 !important;
  opacity: 0.58 !important;
  mix-blend-mode: screen !important;
  filter: blur(0.2px) saturate(1.22) brightness(1.04) !important;
  transform: skewX(-8deg) perspective(520px) rotateX(2deg) !important;
  background:
    radial-gradient(ellipse at 48% 52%, rgba(201,229,255,0.34) 0%, rgba(118,187,255,0.18) 24%, rgba(118,187,255,0.00) 62%),
    linear-gradient(96deg,
      rgba(255,255,255,0.00) 0%,
      rgba(167,210,255,0.00) 20%,
      rgba(184,226,255,0.20) 33%,
      rgba(255,220,144,0.11) 42%,
      rgba(122,196,255,0.22) 52%,
      rgba(255,255,255,0.05) 59%,
      rgba(101,174,255,0.16) 70%,
      rgba(255,255,255,0.00) 86%),
    repeating-linear-gradient(176deg,
      rgba(235,246,255,0.16) 0px,
      rgba(235,246,255,0.16) 1px,
      rgba(23,72,105,0.00) 7px,
      rgba(23,72,105,0.00) 15px) !important;
  background-size: 145% 100%, 260% 100%, 100% 22px !important;
  -webkit-mask-image:
    radial-gradient(ellipse at 52% 49%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.86) 31%, rgba(0,0,0,0.42) 66%, rgba(0,0,0,0.00) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.78) 24%, rgba(0,0,0,0.92) 62%, rgba(0,0,0,0.00) 100%);
  mask-image:
    radial-gradient(ellipse at 52% 49%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.86) 31%, rgba(0,0,0,0.42) 66%, rgba(0,0,0,0.00) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.78) 24%, rgba(0,0,0,0.92) 62%, rgba(0,0,0,0.00) 100%);
  animation: ifsContactWaterOnlyShimmerV960 9.5s ease-in-out infinite !important;
}

@keyframes ifsContactWaterOnlyShimmerV960 {
  0%, 100% {
    opacity: 0.38;
    background-position: 48% 50%, 112% 50%, 0 0;
    transform: skewX(-8deg) perspective(520px) rotateX(2deg) translateX(-1.4%);
  }
  38% {
    opacity: 0.64;
    background-position: 54% 50%, 55% 50%, 0 3px;
    transform: skewX(-8deg) perspective(520px) rotateX(2deg) translateX(1.2%);
  }
  68% {
    opacity: 0.50;
    background-position: 50% 50%, 20% 50%, 0 -2px;
    transform: skewX(-8deg) perspective(520px) rotateX(2deg) translateX(0.1%);
  }
}

@media (max-width: 900px) {
  .contact-page .page-hero--contact .page-hero-content {
    transform: translateY(-8px) !important;
  }

  .contact-water-shimmer {
    left: 22% !important;
    right: 4% !important;
    top: 49.5% !important;
    height: clamp(68px, 14vw, 122px) !important;
  }
}

@media (max-width: 760px) {
  .contact-page .page-hero--contact .page-hero-content {
    transform: translateY(0) !important;
  }

  .contact-water-shimmer {
    display: block !important;
    left: 14% !important;
    right: 6% !important;
    top: 53% !important;
    height: 72px !important;
    opacity: 0.30 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay,
  .contact-water-shimmer {
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   v9.61 — Lightweight package issue, soundtrack addition, mobile orb refinement
   -------------------------------------------------------------------------- */
.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 15.55% !important;
  width: 49.5% !important;
}
.home-hero-layered-art__globe { animation-duration: 205s !important; }
@media (max-width: 900px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 16.9% !important;
    width: 54% !important;
  }
}
@media (max-width: 640px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 17.45% !important;
    width: 61% !important;
  }
}
.soundtrack-track-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .soundtrack-track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .soundtrack-track-grid { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   v9.62 — Hero safety offset, water-only shimmer, public tools, deep guides
   -------------------------------------------------------------------------- */
.home-hero-layered-art {
  top: clamp(14px, 1.8vh, 24px) !important;
}
.home-hero-layered-art::after {
  transform: translateY(clamp(14px, 1.8vh, 24px)) !important;
}
@media (max-width: 900px) {
  .home-hero-layered-art { top: clamp(10px, 1.4vh, 18px) !important; }
  .home-hero-layered-art::after { transform: translateY(clamp(10px, 1.4vh, 18px)) !important; }
}
@media (max-width: 640px) {
  .home-hero-layered-art { top: 8px !important; }
  .home-hero-layered-art::after { transform: translateY(8px) !important; }
}

.contact-page .page-hero--contact {
  overflow: hidden !important;
}
.contact-page .page-hero--contact::after {
  z-index: 3 !important;
  pointer-events: none !important;
}
.contact-water-shimmer {
  display: block !important;
  position: absolute !important;
  left: 31.5% !important;
  right: 5.5% !important;
  top: 56.5% !important;
  height: clamp(64px, 10.2vw, 118px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0.72 !important;
  overflow: hidden !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  transform: none !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: polygon(0 33%, 10% 22%, 25% 15%, 40% 20%, 56% 11%, 74% 18%, 100% 10%, 100% 100%, 0 100%) !important;
}
.contact-water-shimmer::before,
.contact-water-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.contact-water-shimmer::before {
  opacity: 0.78;
  background:
    repeating-linear-gradient(174deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 8px,
      rgba(174,221,255,0.19) 9px,
      rgba(174,221,255,0.08) 11px,
      rgba(255,255,255,0) 18px),
    linear-gradient(96deg,
      rgba(255,255,255,0) 0%,
      rgba(125,190,255,0.00) 20%,
      rgba(171,220,255,0.20) 36%,
      rgba(255,216,141,0.09) 45%,
      rgba(84,171,255,0.18) 56%,
      rgba(255,255,255,0.02) 68%,
      rgba(255,255,255,0) 88%);
  background-size: 100% 28px, 260% 100%;
  animation: ifsWaterRippleV962 8.25s linear infinite;
}
.contact-water-shimmer::after {
  opacity: 0.50;
  background:
    radial-gradient(ellipse at 36% 42%, rgba(205,235,255,0.20) 0%, rgba(120,190,255,0.10) 26%, rgba(120,190,255,0) 58%),
    radial-gradient(ellipse at 67% 47%, rgba(95,178,255,0.18) 0%, rgba(95,178,255,0.07) 29%, rgba(95,178,255,0) 64%);
  animation: ifsWaterGlintV962 11s ease-in-out infinite;
}
@keyframes ifsWaterRippleV962 {
  0% { background-position: 0 0, 110% 50%; transform: translateX(-1.5%) translateY(0); }
  50% { background-position: 0 12px, 48% 50%; transform: translateX(1.2%) translateY(1px); }
  100% { background-position: 0 28px, -20% 50%; transform: translateX(-1.5%) translateY(0); }
}
@keyframes ifsWaterGlintV962 {
  0%, 100% { opacity: 0.30; transform: translateX(-2%); }
  45% { opacity: 0.62; transform: translateX(2%); }
  70% { opacity: 0.42; transform: translateX(0); }
}
@media (max-width: 900px) {
  .contact-water-shimmer {
    left: 26% !important;
    right: 4% !important;
    top: 57.5% !important;
    height: clamp(54px, 12vw, 94px) !important;
    opacity: 0.55 !important;
  }
}
@media (max-width: 640px) {
  .contact-water-shimmer {
    left: 18% !important;
    right: 5% !important;
    top: 59% !important;
    height: 58px !important;
    opacity: 0.40 !important;
  }
}

.forge-generator-grid--expanded {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.forge-generator-card--expedition {
  border-color: rgba(67, 215, 199, 0.26);
  background:
    radial-gradient(circle at 88% 8%, rgba(67, 215, 199, 0.13), transparent 36%),
    radial-gradient(circle at 10% 0%, rgba(232, 93, 4, 0.14), transparent 42%),
    linear-gradient(150deg, rgba(22,22,24,0.98), rgba(5,5,7,0.96));
}
.generator-action-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.forge-generator-output--expedition {
  min-height: 15rem;
}
.generator-expedition {
  display: block;
  margin-top: 0.75rem;
}
.generator-expedition p {
  margin: 0 0 0.75rem;
}
.generator-expedition dl {
  display: grid;
  gap: 0.48rem;
  margin: 0;
}
.generator-expedition dt {
  color: #ffd27a;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.74rem;
}
.generator-expedition dd {
  margin: 0 0 0.45rem;
  color: var(--text-muted);
}
@media (max-width: 1180px) {
  .forge-generator-grid--expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .forge-generator-grid--expanded { grid-template-columns: 1fr; }
}

.deep-dive-section {
  position: relative;
  padding: clamp(3.8rem, 7vw, 7rem) 2rem;
  background:
    radial-gradient(circle at 10% 0%, rgba(232,93,4,0.14), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(67,215,199,0.08), transparent 32%),
    linear-gradient(180deg, rgba(7,7,8,0.98), rgba(2,2,3,0.98));
}
.deep-dive-grid {
  width: min(1180px, 100%);
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.deep-dive-card {
  position: relative;
  padding: clamp(1.2rem, 2vw, 1.7rem);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.11);
  border-left: 4px solid rgba(232,93,4,0.74);
  background:
    radial-gradient(circle at 100% 0%, rgba(255,186,99,0.08), transparent 34%),
    linear-gradient(145deg, rgba(22,22,23,0.96), rgba(4,4,5,0.95));
  box-shadow: 0 18px 42px rgba(0,0,0,0.36);
  scroll-margin-top: 110px;
}
.deep-dive-section--resonance .deep-dive-card {
  border-left-color: rgba(67,215,199,0.70);
  background:
    radial-gradient(circle at 100% 0%, rgba(67,215,199,0.08), transparent 34%),
    linear-gradient(145deg, rgba(19,22,25,0.96), rgba(4,4,6,0.95));
}
.deep-dive-card h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}
.deep-dive-card p {
  color: var(--text-muted);
}
.deep-dive-card ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
}
.deep-dive-card li {
  margin-bottom: 0.45rem;
}
.deep-link-button {
  margin-top: 1rem;
}
@media (max-width: 860px) {
  .deep-dive-grid { grid-template-columns: 1fr; }
  .deep-dive-section { padding-left: 1rem; padding-right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-water-shimmer::before,
  .contact-water-shimmer::after { animation: none !important; }
}

/* --------------------------------------------------------------------------
   v9.63 — Website correction pass
   - Main hero nudged down together as one layered composition.
   - Contact water shimmer rebuilt with a soft organic mask; no hard rectangle.
   - Alberenar map archive panels, race/species visual libraries, and VTT samples.
   - Paragraph spacing added to expanded Alberenar/Resonance guide cards.
   -------------------------------------------------------------------------- */

/* Homepage: keep current alignment but lower the whole artwork fractionally so
   the globe is not clipped by the top of the hero area. */
.home-hero-layered-art {
  top: clamp(34px, 3.1vh, 48px) !important;
}
.home-hero-layered-art::after {
  transform: translateY(clamp(34px, 3.1vh, 48px)) !important;
}
.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 15.75% !important;
  width: 49.5% !important;
}
.home-hero-layered-art__globe {
  animation-duration: 230s !important;
}
@media (max-width: 900px) {
  .home-hero-layered-art { top: 22px !important; }
  .home-hero-layered-art::after { transform: translateY(22px) !important; }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 17.15% !important;
    width: 54% !important;
  }
}
@media (max-width: 640px) {
  .home-hero-layered-art { top: 18px !important; }
  .home-hero-layered-art::after { transform: translateY(18px) !important; }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 17.7% !important;
    width: 61% !important;
  }
}

/* Expanded guide cards: restore readable paragraph spacing. */
.deep-dive-card p,
.deep-dive-card li,
.service-card p,
.race-library-card p,
.map-flyover-copy p,
.vtt-sample-card p {
  line-height: 1.72;
}
.deep-dive-card p {
  margin: 0 0 1rem !important;
}
.deep-dive-card p + p {
  margin-top: 0.9rem !important;
}
.deep-dive-card .card-kicker {
  margin-bottom: 0.55rem !important;
}
.deep-dive-card ul {
  margin-top: 1.1rem !important;
}
.deep-dive-card li + li {
  margin-top: 0.45rem !important;
}

/* Contact page: soft water-only shimmer. This deliberately avoids a rectangular
   overlay. The mask feathers all edges and keeps the effect in the water under
   the bridge/portal reflection area. */
.contact-page .page-hero--contact {
  overflow: hidden !important;
}
.contact-page .page-hero--contact .page-hero-content {
  z-index: 5 !important;
}
.contact-page .page-hero--contact::after {
  z-index: 3 !important;
  pointer-events: none !important;
}
.contact-water-shimmer {
  display: block !important;
  position: absolute !important;
  left: 16.5% !important;
  right: 17.5% !important;
  top: 47.2% !important;
  height: clamp(62px, 8.9vw, 122px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0.48 !important;
  overflow: hidden !important;
  border-radius: 999px 999px 54% 54% / 52% 52% 72% 72% !important;
  background: transparent !important;
  background-image: none !important;
  filter: none !important;
  transform: perspective(600px) rotateX(1deg) !important;
  mix-blend-mode: screen !important;
  clip-path: none !important;
  -webkit-mask-image:
    radial-gradient(ellipse at 48% 49%, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.84) 24%, rgba(0,0,0,0.46) 58%, rgba(0,0,0,0.12) 78%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 24%, rgba(0,0,0,0.95) 52%, rgba(0,0,0,0.28) 84%, rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse at 48% 49%, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.84) 24%, rgba(0,0,0,0.46) 58%, rgba(0,0,0,0.12) 78%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 24%, rgba(0,0,0,0.95) 52%, rgba(0,0,0,0.28) 84%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.contact-water-shimmer::before,
.contact-water-shimmer::after {
  content: "" !important;
  position: absolute !important;
  inset: -18% -8% !important;
  pointer-events: none !important;
}
.contact-water-shimmer::before {
  opacity: 0.62 !important;
  background:
    repeating-linear-gradient(174deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 10px,
      rgba(173,220,255,0.105) 11px,
      rgba(173,220,255,0.055) 13px,
      rgba(255,255,255,0) 22px),
    linear-gradient(98deg,
      rgba(255,255,255,0) 0%,
      rgba(111,184,255,0) 24%,
      rgba(171,221,255,0.16) 38%,
      rgba(255,215,145,0.075) 47%,
      rgba(92,172,255,0.12) 58%,
      rgba(255,255,255,0.018) 67%,
      rgba(255,255,255,0) 86%) !important;
  background-size: 100% 32px, 260% 100% !important;
  animation: ifsWaterRippleV963 12s ease-in-out infinite !important;
}
.contact-water-shimmer::after {
  opacity: 0.34 !important;
  background:
    radial-gradient(ellipse at 44% 45%, rgba(190,232,255,0.21) 0%, rgba(102,180,255,0.10) 22%, rgba(102,180,255,0) 59%),
    radial-gradient(ellipse at 62% 58%, rgba(80,160,255,0.15) 0%, rgba(80,160,255,0.07) 27%, rgba(80,160,255,0) 65%) !important;
  animation: ifsWaterGlintV963 15s ease-in-out infinite !important;
}
@keyframes ifsWaterRippleV963 {
  0%, 100% { background-position: 0 0, 112% 50%; transform: translateX(-1.1%) translateY(0); }
  42% { background-position: 0 12px, 50% 50%; transform: translateX(0.9%) translateY(1px); }
  70% { background-position: 0 23px, 18% 50%; transform: translateX(0.2%) translateY(0); }
}
@keyframes ifsWaterGlintV963 {
  0%, 100% { opacity: 0.24; transform: translateX(-1.6%) scaleX(1.02); }
  48% { opacity: 0.43; transform: translateX(1.5%) scaleX(1.04); }
  72% { opacity: 0.32; transform: translateX(0.1%) scaleX(1.02); }
}
@media (max-width: 900px) {
  .contact-water-shimmer {
    left: 12% !important;
    right: 10% !important;
    top: 48.5% !important;
    height: clamp(54px, 12vw, 96px) !important;
    opacity: 0.38 !important;
  }
}
@media (max-width: 640px) {
  .contact-water-shimmer {
    left: 7% !important;
    right: 6% !important;
    top: 51.5% !important;
    height: 58px !important;
    opacity: 0.28 !important;
  }
}

/* Alberenar map archive section. */
.map-flyover-section,
.race-library-section,
.vtt-sample-section {
  padding: clamp(3.8rem, 7vw, 7rem) clamp(1rem, 4vw, 3.5rem);
  background:
    radial-gradient(circle at 12% 0%, rgba(232,93,4,0.12), transparent 30%),
    radial-gradient(circle at 90% 14%, rgba(67,215,199,0.07), transparent 34%),
    linear-gradient(180deg, rgba(7,7,8,0.98), rgba(2,2,3,0.98));
}
.map-flyover-grid,
.vtt-sample-grid {
  width: min(1180px, 100%);
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.map-flyover-card,
.vtt-sample-card,
.race-library-card {
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,186,99,0.08), transparent 34%),
    linear-gradient(145deg, rgba(22,22,23,0.96), rgba(4,4,5,0.95));
  box-shadow: 0 18px 42px rgba(0,0,0,0.36);
  overflow: hidden;
}
.map-flyover-window {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: #050505;
  isolation: isolate;
}
.map-flyover-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.28), transparent 22%, transparent 78%, rgba(0,0,0,0.32)),
    linear-gradient(0deg, rgba(0,0,0,0.30), transparent 25%, transparent 72%, rgba(0,0,0,0.22));
}
.map-flyover-window::after {
  content: "";
  position: absolute;
  left: 1rem;
  bottom: 0.8rem;
  z-index: 3;
  color: rgba(255,210,122,0.9);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.88);
}
.map-flyover-window img {
  position: absolute;
  inset: 0;
  width: 128%;
  height: 128%;
  max-width: none;
  object-fit: cover;
  transform-origin: center center;
  animation: ifsMapFlyoverV963 34s ease-in-out infinite alternate;
  will-change: transform;
}
.map-flyover-window--political img {
  animation-duration: 38s;
  width: 132%;
  height: 132%;
}
@keyframes ifsMapFlyoverV963 {
  0% { transform: translate(-15%, -10%) scale(1.05); }
  28% { transform: translate(-3%, -17%) scale(1.12); }
  58% { transform: translate(-20%, -28%) scale(1.18); }
  100% { transform: translate(-7%, -7%) scale(1.10); }
}
.map-flyover-copy {
  padding: clamp(1.1rem, 2.3vw, 1.6rem);
}
.map-flyover-copy h3,
.vtt-sample-card h3,
.race-library-card h3 {
  margin-bottom: 0.65rem;
}

/* Graphical race/species library placeholders. */
.race-library-grid {
  width: min(1180px, 100%);
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.race-library-card {
  padding: clamp(1rem, 2vw, 1.35rem);
}
.race-library-section--resonance .race-library-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(67,215,199,0.09), transparent 34%),
    linear-gradient(145deg, rgba(18,22,25,0.96), rgba(4,4,6,0.95));
}
.race-image-slot {
  min-height: 210px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 18px;
  border: 1px dashed rgba(255,210,122,0.38);
  background:
    radial-gradient(circle at 50% 34%, rgba(255,210,122,0.14), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  color: rgba(255,210,122,0.85);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.race-library-section--resonance .race-image-slot {
  border-color: rgba(67,215,199,0.42);
  color: rgba(118,238,224,0.86);
  background:
    radial-gradient(circle at 50% 34%, rgba(67,215,199,0.13), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
}

/* VTT sample cards. */
.vtt-window-shell {
  margin-bottom: 1.2rem;
  border-radius: 18px;
  border: 1px solid rgba(255,210,122,0.23);
  background: rgba(0,0,0,0.34);
  overflow: hidden;
  box-shadow: inset 0 0 24px rgba(255,180,80,0.06);
}
.vtt-window-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(90deg, rgba(255,210,122,0.10), rgba(67,215,199,0.04));
}
.vtt-window-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,210,122,0.62);
}
.vtt-window-bar strong {
  margin-left: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
}
.vtt-sample-card { padding: clamp(1.1rem, 2vw, 1.5rem); }
.vtt-dice-preview {
  display: grid;
  grid-template-columns: repeat(3, 72px) 1fr;
  gap: 0.8rem;
  padding: 1rem;
  align-items: center;
}
.vtt-die {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(255,210,122,0.28);
  color: #ffd27a;
  font-weight: 900;
  background: radial-gradient(circle at 35% 30%, rgba(255,210,122,0.18), rgba(0,0,0,0.22));
}
.vtt-roll-feed p,
.vtt-calendar-preview p {
  margin: 0.3rem 0;
  color: var(--text-muted);
}
.vtt-calendar-preview { padding: 1rem; }
.vtt-moon-row {
  display: flex;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}
.vtt-moon-row i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.88), rgba(67,215,199,0.35) 42%, rgba(0,0,0,0.4) 70%);
  box-shadow: 0 0 18px rgba(67,215,199,0.24);
}
.vtt-calendar-grid-mini {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}
.vtt-calendar-grid-mini span {
  padding: 0.45rem 0;
  text-align: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
}
.vtt-calendar-grid-mini .marked { color: #ffd27a; background: rgba(255,210,122,0.15); }
.vtt-calendar-grid-mini .danger { color: #ff9b68; background: rgba(232,93,4,0.16); }

@media (max-width: 900px) {
  .map-flyover-grid,
  .vtt-sample-grid,
  .race-library-grid,
  .race-library-grid--resonance {
    grid-template-columns: 1fr;
  }
  .vtt-dice-preview {
    grid-template-columns: repeat(3, 1fr);
  }
  .vtt-roll-feed {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-flyover-window img,
  .contact-water-shimmer::before,
  .contact-water-shimmer::after {
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   v9.64 — Navigation polish, map viewer, water correction, and tool demos
   -------------------------------------------------------------------------- */

/* Homepage: remove the header-adjacent dark band and lower only the layered orb
   enough to stop clipping without returning to the awkward mobile layouts. */
.home-hero-layered-art {
  top: 0 !important;
  transform: translateX(-50%) !important;
}
.home-hero-layered-art::after {
  transform: none !important;
}
.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 17.85% !important;
  width: 49.5% !important;
}
.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  margin-top: clamp(22.25rem, 51svh, 32rem) !important;
}
@media (max-width: 900px) {
  .home-hero-layered-art { top: 0 !important; }
  .home-hero-layered-art::after { transform: none !important; }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 18.9% !important;
    width: 55% !important;
  }
  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(19.25rem, 45svh, 26rem) !important;
  }
}
@media (max-width: 640px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 19.45% !important;
    width: 60% !important;
  }
  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(18.25rem, 43svh, 24rem) !important;
  }
}

/* Compact game-page guidance directly below the image scrollers. */
.game-page-guide {
  width: min(1180px, calc(100% - 2rem));
  margin: clamp(1rem, 2.5vw, 2rem) auto clamp(1.4rem, 3vw, 2.4rem);
  padding: clamp(1.1rem, 2.4vw, 1.65rem);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 5px solid rgba(232,93,4,0.78);
  background: linear-gradient(145deg, rgba(20,20,22,0.94), rgba(5,5,6,0.94));
  box-shadow: 0 18px 42px rgba(0,0,0,0.32);
}
.game-page-guide--resonance { border-left-color: rgba(67,215,199,0.72); }
.game-page-guide h2 { margin: 0.25rem 0 0.55rem; font-size: clamp(1.55rem, 3vw, 2.4rem); }
.game-page-guide p { max-width: 920px; margin: 0 0 1rem; color: var(--text-muted); line-height: 1.7; }
.page-guide-nav { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.page-guide-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.48rem 0.78rem;
  border-radius: 999px;
  border: 1px solid rgba(255,210,122,0.28);
  background: rgba(255,210,122,0.06);
  color: #ffe1a0;
  font-weight: 900;
  font-size: 0.84rem;
  text-decoration: none;
}
.game-page-guide--resonance .page-guide-nav a { border-color: rgba(67,215,199,0.28); background: rgba(67,215,199,0.06); color: #aef6ed; }
.elevator-pitch--tight,
.world-overview--tight { padding-top: clamp(2rem, 4vw, 3.5rem) !important; padding-bottom: clamp(2rem, 4vw, 3.5rem) !important; }

/* Contact water: replace the broad visible band with a smaller clipped ripple
   that sits over the portal reflection and bridge water only. */
.contact-water-shimmer {
  left: 36% !important;
  right: 24% !important;
  top: 52.6% !important;
  height: clamp(64px, 8vw, 104px) !important;
  opacity: 0.42 !important;
  border-radius: 50% !important;
  clip-path: ellipse(49% 36% at 50% 52%) !important;
  -webkit-mask-image: radial-gradient(ellipse at 50% 52%, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.74) 42%, rgba(0,0,0,0.24) 70%, rgba(0,0,0,0) 100%) !important;
  mask-image: radial-gradient(ellipse at 50% 52%, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.74) 42%, rgba(0,0,0,0.24) 70%, rgba(0,0,0,0) 100%) !important;
  mix-blend-mode: screen !important;
  transform: none !important;
}
.contact-water-shimmer::before,
.contact-water-shimmer::after { inset: -30% -35% !important; }
.contact-water-shimmer::before {
  opacity: 0.52 !important;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, rgba(190,230,255,0.00) 0 11px, rgba(190,230,255,0.115) 12px 14px, rgba(190,230,255,0.00) 18px 28px),
    linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(125,200,255,0.12) 38%, rgba(255,224,160,0.08) 48%, rgba(110,188,255,0.12) 60%, rgba(255,255,255,0) 86%) !important;
  background-size: 120% 100%, 260% 100% !important;
  animation: ifsWaterRippleV964 9s ease-in-out infinite !important;
}
.contact-water-shimmer::after {
  opacity: 0.36 !important;
  background: radial-gradient(ellipse at 50% 54%, rgba(165,220,255,0.28) 0%, rgba(92,173,255,0.12) 34%, rgba(92,173,255,0) 70%) !important;
  animation: ifsWaterGlintV964 11s ease-in-out infinite !important;
}
@keyframes ifsWaterRippleV964 {
  0%,100% { transform: translateX(-3%) translateY(0) scaleX(1.02); background-position: 0 0, 116% 50%; }
  45% { transform: translateX(3%) translateY(1px) scaleX(1.06); background-position: 18px 9px, 46% 50%; }
  72% { transform: translateX(1%) translateY(-1px) scaleX(1.03); background-position: 35px 18px, 14% 50%; }
}
@keyframes ifsWaterGlintV964 {
  0%,100% { opacity: 0.20; transform: translateX(-2%) scaleX(1); }
  50% { opacity: 0.46; transform: translateX(2.8%) scaleX(1.05); }
}
@media (max-width: 900px) {
  .contact-water-shimmer { left: 32% !important; right: 18% !important; top: 53.5% !important; opacity: 0.34 !important; }
}
@media (max-width: 640px) {
  .contact-water-shimmer { left: 28% !important; right: 14% !important; top: 55% !important; height: 52px !important; opacity: 0.24 !important; }
}

/* Map archive: static cards first, full-screen animated map on click. */
.map-flyover-window::after { content: none !important; display: none !important; }
.map-archive-grid { align-items: stretch; }
.map-reveal-button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: #050505;
  cursor: pointer;
  padding: 0;
}
.map-reveal-button img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease, filter .45s ease; }
.map-reveal-button:hover img { transform: scale(1.035); filter: brightness(1.08); }
.map-reveal-button span {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: .52rem .8rem;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,210,122,.38);
  color: #ffe3a6;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .76rem;
}
.map-reveal-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.92);
  padding: clamp(.6rem, 2vw, 1.4rem);
}
.map-reveal-modal.is-open { display: flex; }
.map-reveal-stage { width: min(1280px, 100%); height: min(82vh, 780px); border: 1px solid rgba(255,210,122,.28); border-radius: 18px; background: #030303; overflow: hidden; box-shadow: 0 24px 100px rgba(0,0,0,.78); }
.map-reveal-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 1rem; border-bottom:1px solid rgba(255,255,255,.1); background:linear-gradient(90deg,rgba(232,93,4,.18),rgba(0,0,0,.66)); }
.map-reveal-toolbar h2 { font-size:1rem; margin:0; color:#ffe3a6; letter-spacing:.1em; text-transform:uppercase; }
.map-reveal-toolbar button { margin-left:.45rem; border:1px solid rgba(255,210,122,.35); background:rgba(255,210,122,.07); color:#ffe3a6; border-radius:999px; padding:.45rem .75rem; font-weight:900; }
.map-reveal-viewport { position:relative; height:calc(100% - 52px); overflow:hidden; background:#050505; }
.map-reveal-viewport img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform-origin: top left; }
.map-reveal-modal.is-open .map-reveal-viewport img { animation: ifsMapRevealJourney 32s ease-in-out forwards; }
.map-reveal-modal.is-open.replay .map-reveal-viewport img { animation: none; }
@keyframes ifsMapRevealJourney {
  0% { transform: scale(2.25) translate(0%,0%); }
  23% { transform: scale(2.18) translate(-28%,-4%); }
  47% { transform: scale(2.05) translate(-43%,-32%); }
  70% { transform: scale(1.72) translate(-26%,-42%); }
  100% { transform: scale(1) translate(0%,0%); }
}
@media (max-width:760px){ .map-reveal-stage{height:76vh}.map-reveal-toolbar{align-items:flex-start;flex-direction:column}.map-reveal-viewport{height:calc(100% - 94px)} }

/* Race/species libraries now support 10+ entries gracefully. */
.race-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .race-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 780px) { .race-library-grid { grid-template-columns: 1fr !important; } }

/* VTT tools now use real preview screenshots and browser launch buttons. */
.vtt-sample-grid--live { align-items: stretch; }
.vtt-sample-card--live { display:flex; flex-direction:column; }
.vtt-screenshot-frame {
  min-height: 290px;
  display: grid;
  place-items: center;
  padding: .85rem;
  margin-bottom: 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(90,210,255,.22);
  background: radial-gradient(circle at 50% 0%, rgba(90,210,255,.10), rgba(0,0,0,.28) 50%), rgba(0,0,0,.35);
  overflow: hidden;
}
.vtt-screenshot-frame img { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.52); }
.vtt-screenshot-frame--stacked { grid-template-columns: 1fr 1fr; gap: .6rem; }
.vtt-screenshot-frame--stacked img { max-height: 300px; }
.tool-action-row { margin-top: auto; padding-top: 1rem; }
@media (max-width:700px){ .vtt-screenshot-frame--stacked{grid-template-columns:1fr}.vtt-screenshot-frame{min-height:220px} }


/* --------------------------------------------------------------------------
   v9.65 — Home alignment, contact water, tool showcase corrections
   -------------------------------------------------------------------------- */

/* Home hero: keep the current globe placement, but move the underlying art with
   enough scale to avoid a header-edge seam. This prevents the lightning/fingers
   from drifting away from the orb across desktop, tablet, and mobile crops. */
.home-hero-layered-art {
  top: 0 !important;
  transform: translateX(-50%) !important;
  background: transparent !important;
}
.home-hero-layered-art__base {
  transform: translateY(clamp(14px, 2.1vh, 26px)) scale(1.045) !important;
  transform-origin: center top !important;
}
.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 18.05% !important;
  width: 49.5% !important;
}
.home-page .hero-content--brand,
.home-page .hero-content--home-refined {
  margin-top: clamp(22.75rem, 52svh, 32.5rem) !important;
}
.home-orb-scene__base {
  transform: translateY(10px) scale(1.035) !important;
  transform-origin: center top !important;
}
@media (max-width: 900px) {
  .home-hero-layered-art__base {
    transform: translateY(clamp(8px, 1.5vh, 18px)) scale(1.035) !important;
  }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 19.15% !important;
    width: 55% !important;
  }
  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(19.75rem, 46svh, 26.25rem) !important;
  }
}
@media (max-width: 640px) {
  .home-hero-layered-art__base {
    transform: translateY(8px) scale(1.032) !important;
  }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 20.65% !important;
    width: 60% !important;
  }
  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(18.75rem, 43svh, 24.5rem) !important;
  }
}

/* Contact: use a full-banner duplicate clipped by feathered masks so the water
   shimmer is not a rectangular band. The animated layer is visible only over the
   intended water/reflection pool beneath the bridge and portal. */
.contact-page .page-hero--contact {
  isolation: isolate !important;
}
.contact-water-shimmer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 0.58 !important;
  border-radius: 0 !important;
  clip-path: polygon(24% 48%, 76% 48%, 88% 55%, 85% 65%, 62% 67%, 43% 64%, 28% 60%, 18% 55%) !important;
  -webkit-mask-image: radial-gradient(ellipse at 52% 57%, rgba(0,0,0,1) 0%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.28) 62%, rgba(0,0,0,0) 84%) !important;
  mask-image: radial-gradient(ellipse at 52% 57%, rgba(0,0,0,1) 0%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.28) 62%, rgba(0,0,0,0) 84%) !important;
  mix-blend-mode: screen !important;
  background-image: url('../images/contact-banner-wide.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  animation: ifsContactWaterImageDriftV965 7.8s ease-in-out infinite !important;
  filter: brightness(1.12) saturate(1.16) contrast(1.05) !important;
}
.contact-water-shimmer::before {
  content: "" !important;
  position: absolute !important;
  inset: 44% 18% 30% 20% !important;
  opacity: 0.72 !important;
  background:
    repeating-linear-gradient(176deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 12px,
      rgba(170,225,255,0.14) 13px,
      rgba(170,225,255,0.055) 15px,
      rgba(255,255,255,0) 24px),
    radial-gradient(ellipse at 52% 54%, rgba(145,210,255,.22), rgba(95,170,255,.10) 35%, rgba(95,170,255,0) 70%) !important;
  transform: perspective(700px) rotateX(61deg) !important;
  transform-origin: center center !important;
  animation: ifsContactWaterLinesV965 5.6s ease-in-out infinite !important;
}
.contact-water-shimmer::after {
  content: "" !important;
  position: absolute !important;
  inset: 47% 30% 36% 35% !important;
  opacity: 0.62 !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(165,225,255,.42), rgba(118,190,255,.15) 42%, rgba(118,190,255,0) 78%) !important;
  filter: blur(1px) !important;
  animation: ifsContactWaterGlowV965 6.8s ease-in-out infinite !important;
}
@keyframes ifsContactWaterImageDriftV965 {
  0%,100% { background-position: center center; transform: translateX(-0.35%) translateY(0) scale(1.006); }
  42% { background-position: calc(50% + 8px) calc(50% + 2px); transform: translateX(0.45%) translateY(1px) scale(1.012); }
  70% { background-position: calc(50% - 5px) calc(50% - 1px); transform: translateX(-0.12%) translateY(-1px) scale(1.008); }
}
@keyframes ifsContactWaterLinesV965 {
  0%,100% { background-position: 0 0, center center; opacity:.44; }
  50% { background-position: 22px 18px, center center; opacity:.78; }
}
@keyframes ifsContactWaterGlowV965 {
  0%,100% { transform: translateX(-6%) scaleX(.96); opacity:.28; }
  50% { transform: translateX(9%) scaleX(1.12); opacity:.62; }
}
@media (max-width: 900px) {
  .contact-water-shimmer {
    clip-path: polygon(18% 50%, 84% 50%, 92% 58%, 86% 68%, 61% 69%, 39% 66%, 22% 61%, 10% 55%) !important;
    opacity: .48 !important;
  }
  .contact-water-shimmer::before { inset: 46% 10% 30% 12% !important; }
}
@media (max-width: 640px) {
  .contact-water-shimmer { opacity: .34 !important; }
}

/* Tools: do not present Foundry-specific modules as fully runnable static apps. */
.vtt-screenshot-frame--gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .65rem !important;
  align-items: center !important;
}
.vtt-screenshot-frame--gallery img {
  max-height: 260px !important;
}
.vtt-screenshot-frame--gallery img:first-child {
  grid-row: span 2 !important;
  max-height: 350px !important;
}
.vtt-planner-placeholder {
  min-height: 290px;
  display: grid;
  place-items: center;
  margin-bottom: 1.05rem;
  border-radius: 18px;
  border: 1px dashed rgba(255,210,122,.36);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,210,122,.14), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  color: #ffe1a0;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 1.2rem;
}
@media (max-width: 700px) {
  .vtt-screenshot-frame--gallery { grid-template-columns: 1fr !important; }
  .vtt-screenshot-frame--gallery img:first-child { grid-row: auto !important; }
}


/* --------------------------------------------------------------------------
   v9.66 — Public polish, tools clarity, guide button styling, no contact water
   -------------------------------------------------------------------------- */

/* Contact page: remove the failed shimmer/ripple layer entirely. */
.contact-water-shimmer,
.contact-water-shimmer::before,
.contact-water-shimmer::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  background: none !important;
}
.contact-page .page-hero--contact .page-hero-content {
  transform: translateY(-12px) !important;
}

/* Homepage: keep globe position, but move the underlying art/camera crop with it
   so hands and lightning remain visually connected across desktop and mobile. */
.home-hero-layered-art__base,
.home-orb-scene__base {
  object-position: center 56% !important;
  transform: scale(1.025) translateY(1.2%) !important;
  transform-origin: center center !important;
}
.home-hero-layered-art::after {
  transform: translateY(clamp(26px, 2.4vh, 36px)) !important;
}
@media (max-width: 900px) {
  .home-hero-layered-art__base,
  .home-orb-scene__base {
    object-position: center 55% !important;
    transform: scale(1.03) translateY(1%) !important;
  }
  .home-hero-layered-art::after { transform: translateY(18px) !important; }
}
@media (max-width: 640px) {
  .home-hero-layered-art__base,
  .home-orb-scene__base {
    object-position: center 54% !important;
    transform: scale(1.035) translateY(0.6%) !important;
  }
  .home-hero-layered-art::after { transform: translateY(12px) !important; }
}

/* Where-to-begin navigation: use the same forged button language as the rest of the site. */
.page-guide-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  margin-top: 1.35rem !important;
}
.page-guide-nav a,
.page-guide-nav a:visited,
.page-guide-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0.78rem 1.05rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,186,99,0.34) !important;
  background: linear-gradient(135deg, rgba(20,20,21,0.98), rgba(4,4,5,0.95)) !important;
  color: #f7efe6 !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease !important;
}
.page-guide-nav a:hover,
.page-guide-nav a:focus-visible {
  transform: translateY(-2px) !important;
  color: #ffd27a !important;
  border-color: rgba(255,186,99,0.72) !important;
  box-shadow: 0 13px 30px rgba(0,0,0,0.42), 0 0 20px rgba(232,93,4,0.14) !important;
}

/* Forge prompt generator cards: visual headers without turning them into clutter. */
.generator-card-icon {
  width: 3.3rem;
  height: 3.3rem;
  display: grid;
  place-items: center;
  margin: 0 0 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(255,186,99,0.30);
  background:
    radial-gradient(circle at 50% 45%, rgba(255,210,122,0.22), rgba(232,93,4,0.08) 45%, rgba(0,0,0,0.32) 100%);
  color: #ffd27a;
  font-size: 1.55rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 20px rgba(232,93,4,0.12);
}
.forge-generator-card[data-generator="resonance"] .generator-card-icon,
.forge-generator-card[data-generator="resonance-expedition"] .generator-card-icon {
  border-color: rgba(67,215,199,0.30);
  background:
    radial-gradient(circle at 50% 45%, rgba(67,215,199,0.20), rgba(67,215,199,0.06) 45%, rgba(0,0,0,0.32) 100%);
  color: #8ff8ec;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 20px rgba(67,215,199,0.10);
}

/* Dice Roller screenshots: preserve aspect, improve display size, and avoid small blurred thumbnails. */
.vtt-screenshot-frame--gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
}
.vtt-screenshot-frame--gallery img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  background: #050507 !important;
}
.vtt-sample-card--dice {
  grid-column: span 2;
}
@media (max-width: 900px) {
  .vtt-sample-card--dice { grid-column: auto; }
  .vtt-screenshot-frame--gallery { grid-template-columns: 1fr !important; }
}

/* Gaming Session Planner visual block: keep it calendar/planning focused until real screenshots arrive. */
.vtt-planner-placeholder {
  min-height: 220px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,186,99,0.22) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(232,93,4,0.15), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(67,215,199,0.10), transparent 36%),
    linear-gradient(150deg, rgba(16,16,18,0.96), rgba(4,4,6,0.96)) !important;
}
.planner-mini-calendar {
  width: min(92%, 420px);
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.30);
}
.planner-month {
  color: #ffd27a;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
  margin-bottom: .8rem;
}
.planner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}
.planner-grid span {
  min-height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #f6efe6;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.045);
  font-weight: 800;
  font-size: .82rem;
}


/* --------------------------------------------------------------------------
   v9.67 — Hero layer realignment, guide cards, and Tools page polish
   -------------------------------------------------------------------------- */

/* Homepage: keep the current globe/orb position, but lower only the underlying
   artwork layer so the hands and lightning sit below the orb again. The extra
   scale prevents the header-edge seam/dark band from showing on wide screens. */
.home-hero-layered-art {
  top: 0 !important;
  background: #030304 !important;
  overflow: hidden !important;
}
.home-hero-layered-art__base {
  object-position: center center !important;
  transform-origin: center center !important;
  transform: translateY(clamp(28px, 3.1vh, 44px)) scale(1.085) !important;
}
.home-hero-layered-art::after {
  transform: translateY(clamp(28px, 3.1vh, 44px)) scale(1.045) !important;
  transform-origin: center center !important;
}
.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 18.05% !important;
  width: 49.5% !important;
}
.home-hero-layered-art__globe { animation-duration: 205s !important; }

/* Matching lower homepage image so the second appearance does not contradict
   the main hero composition on tablets and laptops. */
.home-orb-scene__base {
  object-position: center center !important;
  transform-origin: center center !important;
  transform: translateY(clamp(20px, 2.4vh, 34px)) scale(1.065) !important;
}

@media (max-width: 1024px) {
  .home-hero-layered-art__base {
    transform: translateY(clamp(20px, 2.45vh, 34px)) scale(1.07) !important;
  }
  .home-hero-layered-art::after {
    transform: translateY(clamp(20px, 2.45vh, 34px)) scale(1.035) !important;
  }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 19.15% !important;
    width: 55% !important;
  }
}
@media (max-width: 640px) {
  .home-hero-layered-art__base {
    transform: translateY(clamp(12px, 1.8vh, 24px)) scale(1.055) !important;
  }
  .home-hero-layered-art::after {
    transform: translateY(clamp(12px, 1.8vh, 24px)) scale(1.025) !important;
  }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 20.65% !important;
    width: 60% !important;
  }
}

/* Page guide links: replace the yellow text-link feel with compact forged cards
   matching the wider site card/button language. */
.game-page-guide .page-guide-nav {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
  gap: 0.85rem !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.game-page-guide .page-guide-nav a,
.game-page-guide .page-guide-nav a:visited,
.game-page-guide .page-guide-nav .page-guide-button {
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  padding: 0.95rem 1rem !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-left: 4px solid rgba(232,93,4,0.82) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(232,93,4,0.18), transparent 36%),
    linear-gradient(145deg, rgba(22,22,24,0.98), rgba(5,5,7,0.96)) !important;
  color: #f7f1ea !important;
  text-align: left !important;
  justify-content: flex-start !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.game-page-guide--resonance .page-guide-nav a,
.game-page-guide--resonance .page-guide-nav a:visited,
.game-page-guide--resonance .page-guide-nav .page-guide-button {
  border-left-color: rgba(67,215,199,0.78) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(67,215,199,0.16), transparent 36%),
    linear-gradient(145deg, rgba(22,22,24,0.98), rgba(5,5,7,0.96)) !important;
}
.game-page-guide .page-guide-nav a:hover,
.game-page-guide .page-guide-nav a:focus-visible {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.23) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), 0 0 24px rgba(232,93,4,0.12) !important;
}
.game-page-guide--resonance .page-guide-nav a:hover,
.game-page-guide--resonance .page-guide-nav a:focus-visible {
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), 0 0 24px rgba(67,215,199,0.12) !important;
}

/* VTT and Table Tools: cleaner landing cards. The Dice Roller landing card now
   uses one strong tray image; the full set remains inside the showcase page. */
.vtt-sample-grid--live {
  gap: clamp(1rem, 2vw, 1.4rem) !important;
  align-items: stretch !important;
}
.vtt-sample-card--dice { grid-column: auto !important; }
.vtt-screenshot-frame--single {
  min-height: 250px !important;
  padding: 0.7rem !important;
  margin-bottom: 0.9rem !important;
}
.vtt-screenshot-frame--single img {
  width: min(100%, 360px) !important;
  max-height: 310px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}
.vtt-sample-card--planner .vtt-planner-placeholder { display: none !important; }
.planner-feature-list {
  display: grid;
  gap: .65rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.planner-feature-list li {
  padding: .7rem .8rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
}

/* Forge Prompt Generators: consistent button row alignment and richer game-facing
   sigils without relying on generic symbols. */
.forge-generator-grid--expanded { align-items: stretch !important; }
.forge-generator-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}
.forge-generator-card h3 { min-height: 2.2em; }
.forge-generator-card > p { min-height: 5.6em; }
.forge-generator-card .forge-generator-button,
.forge-generator-card .generator-action-pair {
  margin-top: auto !important;
}
.generator-action-pair {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .55rem !important;
}
@media (min-width: 980px) {
  .generator-action-pair { grid-template-columns: 1fr 1fr !important; }
}
.generator-card-icon {
  width: 4.05rem !important;
  height: 4.05rem !important;
  border-radius: 20px !important;
  font-size: 1.35rem !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  letter-spacing: .06em !important;
  color: #ffe0a4 !important;
  text-shadow: 0 0 16px rgba(255,178,76,.36) !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,220,145,.24), rgba(232,93,4,.10) 42%, rgba(0,0,0,.38) 100%),
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01)) !important;
}
.forge-generator-card[data-generator="resonance"] .generator-card-icon,
.forge-generator-card[data-generator="resonance-expedition"] .generator-card-icon {
  color: #a7fff2 !important;
  text-shadow: 0 0 16px rgba(67,215,199,.30) !important;
}
.generator-card-icon .sigil-label {
  display: block;
  font-size: .58rem;
  line-height: 1;
  margin-top: .12rem;
  font-family: inherit;
  letter-spacing: .12em;
}

/* Remove all failed contact water experiments for this build. */
.contact-water-shimmer,
.contact-water-shimmer::before,
.contact-water-shimmer::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}


/* --------------------------------------------------------------------------
   v9.68 — Elegant interaction polish and responsive hero realignment
   --------------------------------------------------------------------------
   Website/package correction only. Keeps the visible globe position, lowers the
   underlying artwork layer without leaving a header band, refines game-page
   navigation buttons, restores a more professional audio-library treatment, and
   polishes the Tools page presentation.
   -------------------------------------------------------------------------- */

/* Home hero: keep the globe exactly where it has settled, but lower and scale
   the background plate more so the fingers/lightning sit below the globe and no
   dark seam appears beneath the navigation. */
.home-hero-layered-art {
  top: 0 !important;
  background: #030304 !important;
  overflow: hidden !important;
}
.home-hero-layered-art__base {
  transform-origin: center center !important;
  transform: translateY(clamp(58px, 5.2vh, 78px)) scale(1.18) !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.home-hero-layered-art::after {
  transform: translateY(clamp(58px, 5.2vh, 78px)) scale(1.09) !important;
  transform-origin: center center !important;
}
.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 18.05% !important;
  width: 49.5% !important;
}
.home-orb-scene__base {
  transform-origin: center center !important;
  transform: translateY(clamp(42px, 4vh, 60px)) scale(1.13) !important;
  object-position: center center !important;
}
@media (max-width: 1024px) {
  .home-hero-layered-art__base {
    transform: translateY(clamp(44px, 4.4vh, 64px)) scale(1.15) !important;
  }
  .home-hero-layered-art::after {
    transform: translateY(clamp(44px, 4.4vh, 64px)) scale(1.07) !important;
  }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 19.15% !important;
    width: 55% !important;
  }
}
@media (max-width: 640px) {
  .home-hero-layered-art__base {
    transform: translateY(clamp(26px, 3.2vh, 42px)) scale(1.10) !important;
  }
  .home-hero-layered-art::after {
    transform: translateY(clamp(26px, 3.2vh, 42px)) scale(1.045) !important;
  }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 20.65% !important;
    width: 60% !important;
  }
  .home-orb-scene__base {
    transform: translateY(22px) scale(1.08) !important;
  }
}

/* Game-page navigation: restrained, professional buttons, not oversized yellow
   tiles. This affects both the Where to Begin panels and the Explore-path links. */
.game-page-guide .page-guide-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  align-items: center !important;
}
.game-page-guide .page-guide-nav a,
.game-page-guide .page-guide-nav a:visited,
.game-page-guide .page-guide-nav .page-guide-button {
  width: auto !important;
  min-height: 0 !important;
  padding: 0.55rem 0.78rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-left: 1px solid rgba(255,255,255,0.13) !important;
  background:
    linear-gradient(145deg, rgba(18,18,20,0.94), rgba(6,6,8,0.94)) !important;
  color: rgba(247,241,234,0.92) !important;
  font-size: 0.76rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  font-weight: 850 !important;
  text-align: center !important;
  justify-content: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 22px rgba(0,0,0,0.28) !important;
}
.game-page-guide .page-guide-nav a:hover,
.game-page-guide .page-guide-nav a:focus-visible {
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  border-color: rgba(232,93,4,0.42) !important;
  box-shadow: 0 0 0 1px rgba(232,93,4,0.12), 0 12px 28px rgba(0,0,0,0.36) !important;
}
.game-page-guide--resonance .page-guide-nav a:hover,
.game-page-guide--resonance .page-guide-nav a:focus-visible {
  border-color: rgba(67,215,199,0.38) !important;
  box-shadow: 0 0 0 1px rgba(67,215,199,0.10), 0 12px 28px rgba(0,0,0,0.36) !important;
}
.deep-link-button,
.pillar-more .deep-link-button,
.pillar-card .deep-link-button,
.world-pillar-card .deep-link-button {
  min-height: 0 !important;
  padding: 0.52rem 0.72rem !important;
  font-size: 0.72rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.06em !important;
  border-radius: 999px !important;
  color: rgba(247,241,234,0.94) !important;
  background: rgba(0,0,0,0.32) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.deep-link-button:hover,
.deep-link-button:focus-visible {
  background: rgba(232,93,4,0.14) !important;
  color: #fff !important;
  border-color: rgba(232,93,4,0.42) !important;
}
.deep-dive-section--resonance .deep-link-button:hover,
.deep-dive-section--resonance .deep-link-button:focus-visible,
.game-page-guide--resonance ~ section .deep-link-button:hover {
  background: rgba(67,215,199,0.12) !important;
  border-color: rgba(67,215,199,0.38) !important;
}

/* Living Audio Library: bring the controls back into the elegant Forge language
   rather than bright orange/yellow blocks. */
.soundtrack-world-tab,
.soundtrack-track-card .btn,
.soundtrack-track-button {
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(145deg, rgba(18,18,20,0.90), rgba(5,5,7,0.94)) !important;
  color: rgba(247,241,234,0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 22px rgba(0,0,0,0.25) !important;
}
.soundtrack-world-tab.active,
.soundtrack-track-button.active {
  color: #fff7ea !important;
  background: linear-gradient(145deg, rgba(232,93,4,0.18), rgba(8,8,10,0.96)) !important;
  border-color: rgba(232,93,4,0.45) !important;
  box-shadow: 0 0 0 1px rgba(232,93,4,0.11), 0 10px 26px rgba(0,0,0,0.34) !important;
}
.soundtrack-world-tab:hover,
.soundtrack-track-card .btn:hover,
.soundtrack-track-button:hover {
  color: #ffffff !important;
  border-color: rgba(255,210,122,0.32) !important;
  background: linear-gradient(145deg, rgba(232,93,4,0.11), rgba(8,8,10,0.96)) !important;
}
.soundtrack-track-card {
  border-color: rgba(255,255,255,0.105) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,186,99,0.065), transparent 38%),
    linear-gradient(150deg, rgba(18,18,20,0.94), rgba(5,5,7,0.96)) !important;
}
.soundtrack-track-card.is-active {
  border-color: rgba(232,93,4,0.32) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,0.42), 0 0 0 1px rgba(232,93,4,0.08) !important;
}

/* Tools page VTT landing: one strong Dice Roller image, less wasted spacing. */
.vtt-sample-grid--live {
  gap: 1rem !important;
}
.vtt-sample-card {
  padding: clamp(1rem, 1.8vw, 1.25rem) !important;
}
.vtt-screenshot-frame--single {
  min-height: 0 !important;
  padding: 0.55rem !important;
  margin-bottom: 0.85rem !important;
  border-radius: 16px !important;
}
.vtt-screenshot-frame--single img {
  width: min(100%, 430px) !important;
  max-height: 380px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}
.vtt-sample-card--planner .text-muted {
  color: rgba(214,204,193,0.78) !important;
}

/* Forge Prompt Generators: icon-only boxed sigils matching the pillar/button
   visual language, with centred presentation and all actions contained neatly. */
.forge-generator-card {
  align-items: stretch !important;
  overflow: hidden !important;
}
.generator-card-icon {
  width: 58px !important;
  height: 58px !important;
  margin: 0 auto 1rem !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  border: 1px solid rgba(232,93,4,0.42) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,186,8,0.22), transparent 38%),
    linear-gradient(145deg, rgba(232,93,4,0.18), rgba(0,0,0,0.62)) !important;
  box-shadow: inset 0 0 18px rgba(255,186,8,0.07), 0 0 18px rgba(232,93,4,0.13) !important;
  color: #ffd27a !important;
}
.generator-card-icon svg {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 10px rgba(255,186,99,0.24)) !important;
}
.forge-generator-card[data-generator="resonance"] .generator-card-icon,
.forge-generator-card[data-generator="resonance-expedition"] .generator-card-icon {
  border-color: rgba(67,215,199,0.42) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(67,215,199,0.22), transparent 38%),
    linear-gradient(145deg, rgba(67,215,199,0.15), rgba(0,0,0,0.62)) !important;
  color: #9ff6ee !important;
  box-shadow: inset 0 0 18px rgba(67,215,199,0.06), 0 0 18px rgba(67,215,199,0.12) !important;
}
.generator-card-icon .sigil-label { display: none !important; }
.forge-generator-card > p { min-height: 6.2em !important; }
.forge-generator-card .forge-generator-button,
.generator-action-pair .forge-generator-button {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  text-align: center !important;
  justify-content: center !important;
}
.generator-action-pair {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.55rem !important;
}
.forge-generator-output,
.forge-generator-output--expedition {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}

/* Contact page: keep all failed water/ripple experiments removed. */
.contact-water-shimmer,
.contact-water-shimmer::before,
.contact-water-shimmer::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

/* --------------------------------------------------------------------------
   v9.69 — final visual alignment and professional button/glow polish
   -------------------------------------------------------------------------- */

/* Home hero: keep the globe in its settled position, but let the underlying
   scene breathe horizontally again so the side architecture is not swallowed by
   the vignette. The globe sizing is compensated so its visible size remains
   close to v9.68 while the background plate is wider. */
.home-hero-layered-art {
  width: clamp(760px, 78vw, 1080px) !important;
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.35) 4%,
    rgba(0,0,0,0.88) 10%,
    rgba(0,0,0,1) 16%,
    rgba(0,0,0,1) 84%,
    rgba(0,0,0,0.88) 90%,
    rgba(0,0,0,0.35) 96%,
    rgba(0,0,0,0) 100%) !important;
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.35) 4%,
    rgba(0,0,0,0.88) 10%,
    rgba(0,0,0,1) 16%,
    rgba(0,0,0,1) 84%,
    rgba(0,0,0,0.88) 90%,
    rgba(0,0,0,0.35) 96%,
    rgba(0,0,0,0) 100%) !important;
}
.home-hero-layered-art__base {
  transform: translateY(clamp(52px, 5vh, 74px)) scale(1.09) !important;
  object-position: center center !important;
}
.home-hero-layered-art::after {
  transform: translateY(clamp(52px, 5vh, 74px)) scale(1.035) !important;
}
.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 18.05% !important;
  width: 40.6% !important;
}
@media (max-width: 1024px) {
  .home-hero-layered-art {
    width: clamp(650px, 94vw, 920px) !important;
  }
  .home-hero-layered-art__base {
    transform: translateY(clamp(38px, 4.2vh, 58px)) scale(1.075) !important;
  }
  .home-hero-layered-art::after {
    transform: translateY(clamp(38px, 4.2vh, 58px)) scale(1.025) !important;
  }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 19.15% !important;
    width: 45% !important;
  }
}
@media (max-width: 640px) {
  .home-hero-layered-art {
    width: min(104vw, 700px) !important;
  }
  .home-hero-layered-art__base {
    transform: translateY(clamp(22px, 3vh, 38px)) scale(1.055) !important;
  }
  .home-hero-layered-art::after {
    transform: translateY(clamp(22px, 3vh, 38px)) scale(1.015) !important;
  }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 20.65% !important;
    width: 52% !important;
  }
}

/* Lower homepage image: keep the framed scene stable, but sit the globe a touch
   lower so it no longer feels detached from the lightning in the card view. */
.home-orb-scene__base {
  transform: translateY(clamp(24px, 2.6vh, 38px)) scale(1.075) !important;
}
.home-orb-scene__globe,
.home-orb-scene__overlay {
  top: 23.2% !important;
}
@media (max-width: 640px) {
  .home-orb-scene__globe,
  .home-orb-scene__overlay { top: 23.7% !important; }
}

/* Restore elegant project-colour glow for the game exploration cards without
   returning to oversized or garish button treatment. */
.alberenar-page .modular-section .service-card {
  border-color: rgba(187,60,255,0.20) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,0.34), 0 0 0 1px rgba(187,60,255,0.045) !important;
}
.alberenar-page .modular-section .service-card:hover,
.alberenar-page .modular-section .service-card:focus-within {
  border-color: rgba(187,60,255,0.42) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.42), 0 0 28px rgba(187,60,255,0.13) !important;
}
.alberenar-page .modular-section .service-card .svg-icon {
  color: #bb3cff !important;
  filter: drop-shadow(0 0 12px rgba(187,60,255,0.26)) !important;
}
.resonance-page .modular-section .service-card {
  border-color: rgba(67,215,199,0.22) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,0.34), 0 0 0 1px rgba(67,215,199,0.045) !important;
}
.resonance-page .modular-section .service-card:hover,
.resonance-page .modular-section .service-card:focus-within {
  border-color: rgba(67,215,199,0.44) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.42), 0 0 28px rgba(67,215,199,0.13) !important;
}
.resonance-page .modular-section .service-card .svg-icon {
  color: #43d7c7 !important;
  filter: drop-shadow(0 0 12px rgba(67,215,199,0.25)) !important;
}
.alberenar-page .deep-link-button,
.alberenar-page .deep-link-button:visited {
  border-color: rgba(187,60,255,0.28) !important;
  color: rgba(247,241,234,0.94) !important;
  background: linear-gradient(145deg, rgba(14,13,18,0.94), rgba(5,5,7,0.96)) !important;
}
.alberenar-page .deep-link-button:hover,
.alberenar-page .deep-link-button:focus-visible {
  border-color: rgba(187,60,255,0.52) !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, rgba(187,60,255,0.12), rgba(7,7,10,0.96)) !important;
  box-shadow: 0 0 24px rgba(187,60,255,0.13) !important;
}
.resonance-page .deep-link-button,
.resonance-page .deep-link-button:visited {
  border-color: rgba(67,215,199,0.28) !important;
  color: rgba(247,241,234,0.94) !important;
  background: linear-gradient(145deg, rgba(12,17,18,0.94), rgba(5,5,7,0.96)) !important;
}
.resonance-page .deep-link-button:hover,
.resonance-page .deep-link-button:focus-visible {
  border-color: rgba(67,215,199,0.52) !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, rgba(67,215,199,0.11), rgba(7,7,10,0.96)) !important;
  box-shadow: 0 0 24px rgba(67,215,199,0.13) !important;
}

/* Forge Prompt Generators: strict row alignment for actions and output panels. */
.forge-generator-grid--expanded {
  align-items: stretch !important;
}
.forge-generator-card {
  display: grid !important;
  grid-template-rows: 74px minmax(3.2rem, auto) minmax(8.2rem, auto) minmax(3.5rem, auto) minmax(7.2rem, 1fr) !important;
  gap: 0.85rem !important;
}
.forge-generator-card .generator-card-icon { grid-row: 1 !important; }
.forge-generator-card h3 { grid-row: 2 !important; min-height: 0 !important; }
.forge-generator-card > p { grid-row: 3 !important; min-height: 0 !important; margin: 0 !important; }
.forge-generator-card > .forge-generator-button,
.forge-generator-card > .generator-action-pair { grid-row: 4 !important; margin-top: 0 !important; align-self: end !important; }
.forge-generator-card > .forge-generator-output { grid-row: 5 !important; align-self: stretch !important; }
.generator-action-pair {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.55rem !important;
  width: 100% !important;
}
.generator-action-pair .forge-generator-button,
.forge-generator-card > .forge-generator-button {
  min-height: 2.8rem !important;
  padding-left: 0.85rem !important;
  padding-right: 0.85rem !important;
}

/* About page: enlarge the main mark using the existing transparent asset and
   preserve its colour treatment. */
.about-hero-logo {
  width: clamp(430px, 32vw, 620px) !important;
  max-width: min(92vw, 620px) !important;
  image-rendering: auto !important;
}


/* --------------------------------------------------------------------------
   v9.70 — colour discipline, race portraits, generator alignment, hero nudge
   -------------------------------------------------------------------------- */

/* Main home hero only: keep the globe locked, raise only the background plate by
   a fraction so the hands/lightning move back towards the orb without changing
   the settled globe placement. The lower homepage card is intentionally untouched. */
.home-hero-layered-art__base {
  transform: translateY(clamp(44px, 4.45vh, 66px)) scale(1.09) !important;
  object-position: center center !important;
}
.home-hero-layered-art::after {
  transform: translateY(clamp(44px, 4.45vh, 66px)) scale(1.035) !important;
}
@media (max-width: 1024px) {
  .home-hero-layered-art__base { transform: translateY(clamp(31px, 3.7vh, 50px)) scale(1.075) !important; }
  .home-hero-layered-art::after { transform: translateY(clamp(31px, 3.7vh, 50px)) scale(1.025) !important; }
}
@media (max-width: 640px) {
  .home-hero-layered-art__base { transform: translateY(clamp(16px, 2.35vh, 31px)) scale(1.055) !important; }
  .home-hero-layered-art::after { transform: translateY(clamp(16px, 2.35vh, 31px)) scale(1.015) !important; }
}

/* Alberenar: all expanded gateway blocks return to the purple Alberenar language,
   not generic orange. */
.alberenar-page .deep-dive-section,
.deep-dive-section--alberenar {
  background:
    radial-gradient(circle at 10% 0%, rgba(106,42,180,0.15), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(187,60,255,0.09), transparent 34%),
    linear-gradient(180deg, rgba(7,7,8,0.98), rgba(2,2,3,0.98)) !important;
}
.alberenar-page .deep-dive-card,
.deep-dive-section--alberenar .deep-dive-card {
  border-left-color: rgba(139,61,255,0.78) !important;
  border-color: rgba(187,60,255,0.19) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(187,60,255,0.10), transparent 35%),
    linear-gradient(145deg, rgba(18,14,24,0.96), rgba(4,4,6,0.95)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.38), 0 0 0 1px rgba(187,60,255,0.045) !important;
}
.alberenar-page .deep-dive-card:hover,
.deep-dive-section--alberenar .deep-dive-card:hover {
  border-color: rgba(187,60,255,0.36) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,0.42), 0 0 30px rgba(187,60,255,0.10) !important;
}
.alberenar-page .deep-dive-card .card-kicker,
.deep-dive-section--alberenar .deep-dive-card .card-kicker {
  color: #c99cff !important;
}

/* Resonance: bring both the discovery cards and expanded gateways to the cooler
   blue/cyan Resonance treatment, avoiding the previous green cast. */
.resonance-page .modular-section .service-card,
.resonance-page .deep-dive-card,
.deep-dive-section--resonance .deep-dive-card {
  border-color: rgba(31,159,255,0.23) !important;
  border-left-color: rgba(31,159,255,0.72) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(31,159,255,0.105), transparent 35%),
    linear-gradient(145deg, rgba(13,18,25,0.96), rgba(4,4,7,0.95)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.38), 0 0 0 1px rgba(31,159,255,0.045) !important;
}
.resonance-page .modular-section .service-card:hover,
.resonance-page .modular-section .service-card:focus-within,
.resonance-page .deep-dive-card:hover,
.deep-dive-section--resonance .deep-dive-card:hover {
  border-color: rgba(31,159,255,0.45) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,0.42), 0 0 30px rgba(31,159,255,0.12) !important;
}
.resonance-page .modular-section .service-card .svg-icon,
.resonance-page .deep-dive-card .card-kicker,
.deep-dive-section--resonance .deep-dive-card .card-kicker {
  color: #42b8ff !important;
  filter: drop-shadow(0 0 12px rgba(31,159,255,0.26)) !important;
}
.resonance-page .deep-link-button,
.resonance-page .deep-link-button:visited {
  border-color: rgba(31,159,255,0.30) !important;
  color: rgba(247,241,234,0.94) !important;
  background: linear-gradient(145deg, rgba(10,15,22,0.94), rgba(5,5,8,0.96)) !important;
}
.resonance-page .deep-link-button:hover,
.resonance-page .deep-link-button:focus-visible {
  border-color: rgba(31,159,255,0.54) !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, rgba(31,159,255,0.12), rgba(7,7,10,0.96)) !important;
  box-shadow: 0 0 24px rgba(31,159,255,0.14) !important;
}

/* Race portrait library: supplied Alberenar images now sit as proper portrait cards. */
.race-library-section--alberenar .race-library-card {
  border-color: rgba(187,60,255,0.18) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(187,60,255,0.085), transparent 34%),
    linear-gradient(145deg, rgba(18,14,24,0.96), rgba(4,4,6,0.95)) !important;
}
.race-library-section--alberenar .race-library-card--has-image {
  padding: 0 !important;
}
.race-library-section--alberenar .race-library-card--has-image h3,
.race-library-section--alberenar .race-library-card--has-image p {
  padding-left: clamp(1rem, 2vw, 1.35rem) !important;
  padding-right: clamp(1rem, 2vw, 1.35rem) !important;
}
.race-library-section--alberenar .race-library-card--has-image p {
  padding-bottom: clamp(1rem, 2vw, 1.35rem) !important;
}
.race-image-slot--image {
  min-height: 0 !important;
  aspect-ratio: 3 / 4 !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  border: 0 !important;
  border-radius: 24px 24px 18px 18px !important;
  overflow: hidden !important;
  background: #050506 !important;
  display: block !important;
}
.race-image-slot--image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: saturate(1.02) contrast(1.03) !important;
  transition: transform 700ms ease, filter 700ms ease !important;
}
.race-library-card--has-image:hover .race-image-slot--image img {
  transform: scale(1.025) !important;
  filter: saturate(1.06) contrast(1.05) !important;
}

/* Forge Prompt Generators: use fixed internal rows so all action buttons start on
   the same line across the row, including the two-button Resonance Expedition card. */
.forge-generator-grid--expanded {
  align-items: stretch !important;
}
.forge-generator-card {
  display: grid !important;
  grid-template-rows: 70px 3.4rem 9.4rem 6.1rem minmax(7.5rem, 1fr) !important;
  gap: 0.75rem !important;
  min-height: 610px !important;
}
.forge-generator-card .generator-card-icon { grid-row: 1 !important; align-self: start !important; }
.forge-generator-card h3 { grid-row: 2 !important; align-self: start !important; min-height: 0 !important; margin: 0 !important; }
.forge-generator-card > p { grid-row: 3 !important; min-height: 0 !important; max-height: 9.4rem !important; overflow: hidden !important; margin: 0 !important; }
.forge-generator-card > .forge-generator-button,
.forge-generator-card > .generator-action-pair { grid-row: 4 !important; align-self: start !important; margin-top: 0 !important; }
.forge-generator-card > .forge-generator-output { grid-row: 5 !important; align-self: stretch !important; margin-top: 0 !important; }
.generator-action-pair { display: grid !important; grid-template-columns: 1fr !important; gap: 0.55rem !important; align-content: start !important; }
.generator-action-pair .forge-generator-button,
.forge-generator-card > .forge-generator-button { min-height: 2.62rem !important; }
@media (max-width: 980px) {
  .forge-generator-card { min-height: 0 !important; grid-template-rows: auto auto auto auto minmax(6rem, auto) !important; }
  .forge-generator-card > p { max-height: none !important; }
}


/* --------------------------------------------------------------------------
   v9.71 — Derek change list final override layer
   Static website correction: colours, hover states, section seams, banners,
   map explorer, centred icons, contact/privacy copy support, and map assets.
   -------------------------------------------------------------------------- */
:root {
  --ifs-orange: #e85d04;
  --ifs-orange-rgb: 232, 93, 4;
  --ifs-alberenar: #8f5cff;
  --ifs-alberenar-rgb: 143, 92, 255;
  --ifs-resonance: #2196f3;
  --ifs-resonance-rgb: 33, 150, 243;
  --ifs-global: #d19a3c;
  --ifs-global-rgb: 209, 154, 60;
  --ifs-board: #d7a83d;
  --ifs-board-rgb: 215, 168, 61;
  --ifs-pactsmiths: #f4a62a;
  --ifs-pactsmiths-rgb: 244, 166, 42;
  --ifs-no-safe-road: #aeb8bb;
  --ifs-no-safe-road-rgb: 174, 184, 187;
  --ifs-wounded-roads: #b12b24;
  --ifs-wounded-roads-rgb: 177, 43, 36;
  --ifs-soundtracks: #43d7c7;
  --ifs-soundtracks-rgb: 67, 215, 199;
}

/* Home hero: main desktop orb nudged down only; lower “More than settings” orb is intentionally untouched. */
.home-hero-layered-art__globe,
.home-hero-layered-art__overlay {
  top: 17.25% !important;
}
@media (max-width: 900px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay { top: 18.55% !important; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .home-hero-layered-art { width: min(96vw, 680px) !important; }
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay { top: 19.65% !important; width: 54.5% !important; }
}

/* Project colour ownership. */
.world-card--alberenar, .game-card--alberenar, .download-card--alberenar, .archive-entry[data-tags~="alberenar"] { --game-accent: var(--ifs-alberenar); --game-accent-rgb: var(--ifs-alberenar-rgb); --download-accent: var(--ifs-alberenar); --download-accent-rgb: var(--ifs-alberenar-rgb); --section-accent: var(--ifs-alberenar); --section-accent-rgb: var(--ifs-alberenar-rgb); }
.world-card--resonance, .game-card--resonance, .download-card--resonance, .archive-entry[data-tags~="resonance"] { --game-accent: var(--ifs-resonance); --game-accent-rgb: var(--ifs-resonance-rgb); --download-accent: var(--ifs-resonance); --download-accent-rgb: var(--ifs-resonance-rgb); --section-accent: var(--ifs-resonance); --section-accent-rgb: var(--ifs-resonance-rgb); }
.world-card--global, .game-card--global, .download-card--global, .archive-entry[data-tags~="global-mandate"] { --game-accent: var(--ifs-global); --game-accent-rgb: var(--ifs-global-rgb); --download-accent: var(--ifs-global); --download-accent-rgb: var(--ifs-global-rgb); --section-accent: var(--ifs-global); --section-accent-rgb: var(--ifs-global-rgb); }
.world-card--alberenar-board-game, .game-card--alberenar-board, .download-card[data-category~="board-game"][data-category~="fantasy"], .archive-entry[data-tags~="alberenar-board-game"] { --game-accent: var(--ifs-board); --game-accent-rgb: var(--ifs-board-rgb); --download-accent: var(--ifs-board); --download-accent-rgb: var(--ifs-board-rgb); --section-accent: var(--ifs-board); --section-accent-rgb: var(--ifs-board-rgb); }
.world-card--pactsmiths, .game-card--pactsmiths, .download-card--pactsmiths, .archive-entry[data-tags~="pactsmiths"] { --game-accent: var(--ifs-pactsmiths); --game-accent-rgb: var(--ifs-pactsmiths-rgb); --download-accent: var(--ifs-pactsmiths); --download-accent-rgb: var(--ifs-pactsmiths-rgb); --section-accent: var(--ifs-pactsmiths); --section-accent-rgb: var(--ifs-pactsmiths-rgb); }
.world-card--no-safe-road, .game-card--no-safe-road, .download-card--no-safe-road, .archive-entry[data-tags~="no-safe-road"] { --game-accent: var(--ifs-no-safe-road); --game-accent-rgb: var(--ifs-no-safe-road-rgb); --download-accent: var(--ifs-no-safe-road); --download-accent-rgb: var(--ifs-no-safe-road-rgb); --section-accent: var(--ifs-no-safe-road); --section-accent-rgb: var(--ifs-no-safe-road-rgb); }
.world-card--wounded-roads, .game-card--wounded-roads, .download-card--wounded-roads, .archive-entry[data-tags~="wounded-roads"] { --game-accent: var(--ifs-wounded-roads); --game-accent-rgb: var(--ifs-wounded-roads-rgb); --download-accent: var(--ifs-wounded-roads); --download-accent-rgb: var(--ifs-wounded-roads-rgb); --section-accent: var(--ifs-wounded-roads); --section-accent-rgb: var(--ifs-wounded-roads-rgb); }
.world-card--soundtracks, .game-card--soundtracks, .download-card--soundtracks, .archive-entry[data-tags~="soundtracks"] { --game-accent: var(--ifs-soundtracks); --game-accent-rgb: var(--ifs-soundtracks-rgb); --download-accent: var(--ifs-soundtracks); --download-accent-rgb: var(--ifs-soundtracks-rgb); --section-accent: var(--ifs-soundtracks); --section-accent-rgb: var(--ifs-soundtracks-rgb); }

.home-project-card,
.game-card,
.download-card,
.archive-entry {
  border-left-color: rgba(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4))), 0.72) !important;
  border-bottom-color: rgba(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4))), 0.18) !important;
}
.home-project-card:hover,
.game-card:hover,
.download-card:hover,
.archive-entry:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4))), 0.55) !important;
  border-left-color: rgb(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4)))) !important;
  border-bottom-color: rgb(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4)))) !important;
  box-shadow:
    0 0 0 1px rgba(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4))), 0.36),
    0 18px 48px rgba(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4))), 0.25),
    0 14px 32px rgba(0,0,0,0.66) !important;
}
.home-project-card .card-link-button,
.game-card .btn:not(.btn-disabled),
.download-card .btn:not(.btn-disabled),
.archive-entry .btn:not(.btn-disabled) {
  border-color: rgba(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4))), 0.80) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4))), 0.16) !important;
}
.home-project-card:hover .card-link-button,
.game-card:hover .btn:not(.btn-disabled),
.download-card:hover .btn:not(.btn-disabled),
.archive-entry:hover .btn:not(.btn-disabled) {
  background: rgba(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4))), 0.20) !important;
  box-shadow: 0 10px 28px rgba(var(--game-accent-rgb, var(--download-accent-rgb, var(--section-accent-rgb, 232,93,4))), 0.30), 0 8px 20px rgba(0,0,0,0.52) !important;
}

/* Route cards: centred icons and orange-only route hover. */
.studio-route-card,
.forge-latest-card,
.forge-compass-choice,
.forge-compass-result { --game-accent: var(--ifs-orange); --game-accent-rgb: var(--ifs-orange-rgb); }
.route-icon,
.panel-icon,
.download-icon,
.archive-icon,
.generator-card-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.studio-route-card .route-icon { align-self: center !important; }
.studio-route-card:hover,
.forge-latest-card:hover,
.forge-compass-choice:hover,
.forge-compass-choice:focus-visible,
.forge-compass-choice.active {
  border-color: rgba(var(--ifs-orange-rgb),0.60) !important;
  border-left-color: var(--ifs-orange) !important;
  border-bottom-color: var(--ifs-orange) !important;
  box-shadow: 0 0 0 1px rgba(var(--ifs-orange-rgb),0.34), 0 18px 48px rgba(var(--ifs-orange-rgb),0.24), 0 14px 32px rgba(0,0,0,0.66) !important;
}
.studio-route-card .route-card-button,
.forge-compass-result .btn,
.forge-latest-card .card-link-button {
  border-color: rgba(var(--ifs-orange-rgb),0.82) !important;
  box-shadow: 0 0 18px rgba(var(--ifs-orange-rgb),0.16) !important;
}
.studio-route-card:hover .route-card-button,
.forge-compass-result .btn:hover,
.forge-latest-card:hover .card-link-button {
  background: rgba(var(--ifs-orange-rgb),0.20) !important;
  box-shadow: 0 10px 28px rgba(var(--ifs-orange-rgb),0.30), 0 8px 20px rgba(0,0,0,0.52) !important;
}
.forge-compass-result p { margin-bottom: 1.1rem !important; }
.forge-compass-result .btn { margin-top: 0.55rem !important; }

/* Remove the unwanted horizontal glow/line in the audience section. */
.forge-audience-section {
  background: transparent !important;
  box-shadow: none !important;
}
.forge-audience-section .section-heading::after { display: none !important; }

/* Tools/VTT and Alberenar sharp section seams: blend into the site wallpaper. */
.vtt-sample-section,
.game-page-guide--alberenar,
.map-archive-section--alberenar,
.race-library-section--alberenar,
.alberenar-page .modular-section,
.alberenar-page .deep-dive-section {
  background:
    radial-gradient(circle at 22% 8%, rgba(143,92,255,0.10), transparent 34%),
    linear-gradient(to bottom, rgba(13,13,13,0.00), rgba(13,13,13,0.82) 18%, rgba(13,13,13,0.90) 82%, rgba(13,13,13,0.00)),
    url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
.vtt-sample-section::before,
.vtt-sample-section::after,
.map-archive-section--alberenar::before,
.map-archive-section--alberenar::after,
.alberenar-page .modular-section::before,
.alberenar-page .modular-section::after,
.alberenar-page .deep-dive-section::before,
.alberenar-page .deep-dive-section::after { display: none !important; }

/* Forum replacement banner. */
.forum-page .page-hero--forum::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(13,13,13,0.38)),
    url('../images/hero-forum-replacement.webp') !important;
  background-position: top center, top center !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat, no-repeat !important;
}
.forum-page .page-hero--forum::after {
  background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.05) 42%, rgba(13,13,13,0.48) 78%, rgba(13,13,13,0.98) 100%) !important;
}

/* About and legal pages: cleaner heading hierarchy and fixed ambient glow. */
.about-page .forge-mark-card h3,
.about-page .service-card h3,
.pillar-detail-page h2,
.pillar-detail-page h3,
.privacy-page h2,
.terms-page h2 { color: #fff !important; }
.about-page .service-card:hover,
.about-page .forge-mark-card:hover,
.pillar-detail-page .pillar-detail-panel:hover,
.pillar-detail-page .pillar-example-card:hover {
  border-color: rgba(var(--ifs-orange-rgb),0.56) !important;
  border-left-color: var(--ifs-orange) !important;
  box-shadow: 0 0 0 1px rgba(var(--ifs-orange-rgb),0.30), 0 18px 46px rgba(var(--ifs-orange-rgb),0.22), 0 12px 30px rgba(0,0,0,0.62) !important;
}
.about-page::before,
.about-page::after,
.pillar-detail-page::before,
.pillar-detail-page::after {
  position: fixed !important;
  transform: none !important;
  animation: none !important;
}

/* Contact polish. */
.contact-card .panel-icon { margin-bottom: 1rem !important; }
.contact-community-block {
  margin-top: 1.65rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}
.contact-card h3 { color: #fff !important; }

/* Soundtracks image crop: remove visible blurred band at the top of the card image. */
.game-card--soundtracks > img,
.home-project-card.world-card--soundtracks img {
  object-position: center 54% !important;
  clip-path: inset(1px 0 0 0) !important;
}

/* Download symbol positioning. */
.download-card { display: flex !important; flex-direction: column !important; }
.download-card .download-icon { align-self: center !important; }
.download-actions { margin-top: auto !important; }

/* Alberenar map explorer. */
.map-explorer-section { padding-top: clamp(3.5rem, 7vw, 6.5rem) !important; }
.map-explorer-shell {
  width: min(1320px, calc(100% - 2rem));
  margin: 2rem auto 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 30px;
  border: 1px solid rgba(var(--ifs-alberenar-rgb),0.42);
  background: linear-gradient(145deg, rgba(14,11,24,0.94), rgba(5,5,8,0.96));
  box-shadow: 0 24px 74px rgba(0,0,0,0.66), 0 0 42px rgba(var(--ifs-alberenar-rgb),0.16);
}
.map-explorer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.map-explorer-viewport {
  position: relative;
  height: clamp(420px, 68vw, 820px);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  background: #050505;
  cursor: zoom-in;
  touch-action: none;
}
.map-explorer-viewport.is-zoomed { cursor: grab; }
.map-explorer-viewport.is-dragging { cursor: grabbing; }
.map-explorer-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 180ms ease;
  user-select: none;
  pointer-events: auto;
}
.map-explorer-viewport.is-dragging .map-explorer-image { transition: none; }
@media (max-width: 760px) {
  .map-explorer-shell { width: min(100%, calc(100% - 1rem)); padding: 0.75rem; }
  .map-explorer-viewport { height: clamp(320px, 84vw, 540px); }
}


/* --------------------------------------------------------------------------
   v9.72 — focused correction pass from Derek's follow-up notes
   -------------------------------------------------------------------------- */

/* Home hero: lower the main desktop orb/logo layer so it sits onto the lightning.
   The lower “More than settings” image is not changed. */
.home-page .hero--home-refined .home-hero-layered-art__globe,
.home-page .hero--home-refined .home-hero-layered-art__overlay {
  top: 18.65% !important;
}
@media (max-width: 900px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 20.05% !important;
  }
}
@media (max-width: 640px) and (orientation: portrait) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 21.15% !important;
  }
}

/* Homepage Featured Games: all cards use the same studio orange treatment,
   regardless of their catalogue colours elsewhere. */
.home-page .home-project-section--featured .home-project-card,
.home-page .home-project-section--featured .home-project-card.world-card--alberenar,
.home-page .home-project-section--featured .home-project-card.world-card--resonance,
.home-page .home-project-section--featured .home-project-card.world-card--global,
.home-page .home-project-section--featured .home-project-card.world-card--no-safe-road,
.home-page .home-project-section--featured .home-project-card.world-card--alberenar-board-game,
.home-page .home-project-section--featured .home-project-card.world-card--pactsmiths {
  --game-accent: var(--ifs-orange) !important;
  --game-accent-rgb: var(--ifs-orange-rgb) !important;
  border-left-color: rgba(var(--ifs-orange-rgb), 0.82) !important;
  border-bottom-color: rgba(var(--ifs-orange-rgb), 0.18) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.46), 0 0 0 1px rgba(var(--ifs-orange-rgb),0.06) !important;
}
.home-page .home-project-section--featured .home-project-card:hover,
.home-page .home-project-section--featured .home-project-card:focus-within {
  border-color: rgba(var(--ifs-orange-rgb), 0.58) !important;
  border-left-color: rgb(var(--ifs-orange-rgb)) !important;
  border-bottom-color: rgb(var(--ifs-orange-rgb)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ifs-orange-rgb), 0.42),
    0 0 34px rgba(var(--ifs-orange-rgb), 0.28),
    0 22px 58px rgba(var(--ifs-orange-rgb), 0.25),
    0 14px 34px rgba(0,0,0,0.72) !important;
}
.home-page .home-project-section--featured .home-project-card .card-link-button {
  border-color: rgba(var(--ifs-orange-rgb),0.82) !important;
  color: #fff !important;
  background: rgba(0,0,0,0.38) !important;
  box-shadow: 0 0 18px rgba(var(--ifs-orange-rgb),0.16) !important;
}
.home-page .home-project-section--featured .home-project-card:hover .card-link-button,
.home-page .home-project-section--featured .home-project-card:focus-within .card-link-button {
  background: rgba(var(--ifs-orange-rgb),0.20) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(var(--ifs-orange-rgb),0.30), 0 8px 20px rgba(0,0,0,0.52) !important;
}

/* Forge Compass result button: match the catalogue/action button behaviour and
   stop the generic yellow hover fade. */
#forgeCompassLink,
#forgeCompassLink:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.38) !important;
  color: #fff !important;
  border: 1px solid rgba(var(--ifs-orange-rgb),0.82) !important;
  box-shadow: 0 0 18px rgba(var(--ifs-orange-rgb),0.16) !important;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}
#forgeCompassLink:hover,
#forgeCompassLink:focus-visible {
  background: rgba(var(--ifs-orange-rgb),0.20) !important;
  color: #fff !important;
  border-color: rgba(var(--ifs-orange-rgb),0.95) !important;
  box-shadow: 0 10px 28px rgba(var(--ifs-orange-rgb),0.30), 0 8px 20px rgba(0,0,0,0.52) !important;
  transform: translateY(-2px) !important;
}

/* Catalogue colour separation: make the three previously similar game colours
   read clearly apart on Games and Downloads pages. Homepage Featured Games is
   overridden above and remains studio-orange. */
.game-card--alberenar-board,
.download-card--alberenar-board {
  --game-accent: #7f5af0 !important;
  --game-accent-rgb: 127, 90, 240 !important;
  --download-accent: #7f5af0 !important;
  --download-accent-rgb: 127, 90, 240 !important;
}
.game-card--global,
.download-card--global {
  --game-accent: #7aa34a !important;
  --game-accent-rgb: 122, 163, 74 !important;
  --download-accent: #7aa34a !important;
  --download-accent-rgb: 122, 163, 74 !important;
}
.game-card--pactsmiths,
.download-card--pactsmiths {
  --game-accent: #e85d04 !important;
  --game-accent-rgb: 232, 93, 4 !important;
  --download-accent: #e85d04 !important;
  --download-accent-rgb: 232, 93, 4 !important;
}
.game-card--wounded-roads,
.download-card--wounded-roads {
  --game-accent: #b12b24 !important;
  --game-accent-rgb: 177, 43, 36 !important;
  --download-accent: #b12b24 !important;
  --download-accent-rgb: 177, 43, 36 !important;
}
.game-card--no-safe-road,
.download-card--no-safe-road {
  --game-accent: #aeb8bb !important;
  --game-accent-rgb: 174, 184, 187 !important;
  --download-accent: #aeb8bb !important;
  --download-accent-rgb: 174, 184, 187 !important;
}
.download-card--alberenar-board .download-icon,
.download-card--global .download-icon,
.download-card--pactsmiths .download-icon,
.download-card--wounded-roads .download-icon,
.download-card--no-safe-road .download-icon {
  color: rgb(var(--download-accent-rgb)) !important;
  border-color: rgba(var(--download-accent-rgb),0.48) !important;
  box-shadow: inset 0 0 18px rgba(var(--download-accent-rgb),0.08), 0 0 18px rgba(var(--download-accent-rgb),0.16) !important;
}

/* Tools: remove the shaded VTT strip and allow the section to sit directly on
   the site wallpaper. */
.tools-page .vtt-sample-section {
  background: transparent !important;
  box-shadow: none !important;
  border-top: 0 !important;
  margin-top: 0 !important;
}
.tools-page .vtt-sample-section::before,
.tools-page .vtt-sample-section::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Forum hero: keep the supplied banner uncropped at the top and feather it into
   the wallpaper rather than ending with a hard lower edge. */
.forum-page .page-hero--forum {
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  margin-bottom: -96px !important;
}
.forum-page .page-hero--forum::before {
  inset: 0 0 -72px 0 !important;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.08) 42%, rgba(13,13,13,0.42) 78%, rgba(13,13,13,0.92) 100%),
    url('../images/hero-forum-replacement.webp') !important;
  background-position: top center, top center !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0.86) 88%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0.86) 88%, transparent 100%) !important;
}
.forum-page .page-hero--forum::after {
  height: 340px !important;
  bottom: -72px !important;
  background:
    linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.16) 36%, rgba(13,13,13,0.68) 74%, rgba(13,13,13,0.00) 100%),
    url('../images/background_texture.webp') center bottom / 620px 620px repeat !important;
  opacity: 1 !important;
}
.forum-page .page-hero--forum + section {
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
}


/* --------------------------------------------------------------------------
   v9.73 — public-facing text and visual correction pass
   -------------------------------------------------------------------------- */

:root {
  --ifs-board-purple: #8f5cff;
  --ifs-board-purple-rgb: 143, 92, 255;
  --ifs-global-green: #6fc36d;
  --ifs-global-green-rgb: 111, 195, 109;
  --ifs-pact-orange: #e85d04;
  --ifs-pact-orange-rgb: 232, 93, 4;
  --ifs-wounded-red: #b12b24;
  --ifs-wounded-red-rgb: 177, 43, 36;
  --ifs-steel: #aeb8bb;
  --ifs-steel-rgb: 174, 184, 187;
}

/* Home: lower only the main globe/logo layer so the orb sits more naturally on the finger lightning. */
.home-page .hero--home-refined .home-hero-layered-art__globe,
.home-page .hero--home-refined .home-hero-layered-art__overlay {
  top: 21.6% !important;
}
@media (max-width: 900px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay { top: 22.4% !important; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay { top: 23.6% !important; }
}

/* Home Featured Games: force one consistent studio-orange visual language on all blocks. */
.home-page .home-project-section--featured .home-project-card,
.home-page .home-project-section--featured .home-project-card[class*="world-card--"] {
  --game-accent: var(--ifs-orange) !important;
  --game-accent-rgb: var(--ifs-orange-rgb) !important;
  border-color: rgba(var(--ifs-orange-rgb), 0.24) !important;
  border-left-color: rgba(var(--ifs-orange-rgb), 0.92) !important;
  border-bottom-color: rgba(var(--ifs-orange-rgb), 0.32) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(var(--ifs-orange-rgb),0.13), transparent 34%),
    linear-gradient(145deg, rgba(22,15,10,0.96), rgba(7,7,8,0.96)) !important;
}
.home-page .home-project-section--featured .home-project-card:hover,
.home-page .home-project-section--featured .home-project-card:focus-within {
  transform: translateY(-12px) !important;
  border-color: rgba(var(--ifs-orange-rgb), 0.66) !important;
  border-left-color: rgb(var(--ifs-orange-rgb)) !important;
  border-bottom-color: rgb(var(--ifs-orange-rgb)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ifs-orange-rgb), 0.46),
    0 0 38px rgba(var(--ifs-orange-rgb), 0.34),
    0 24px 62px rgba(var(--ifs-orange-rgb), 0.26),
    0 14px 34px rgba(0,0,0,0.72) !important;
}

/* Home Choose Your Route: orange base with a visible orange hover glow behind each block. */
.home-page .studio-routes-section .studio-route-card {
  --game-accent: var(--ifs-orange) !important;
  --game-accent-rgb: var(--ifs-orange-rgb) !important;
  border-color: rgba(var(--ifs-orange-rgb),0.24) !important;
  border-left-color: rgba(var(--ifs-orange-rgb),0.86) !important;
  border-bottom-color: rgba(var(--ifs-orange-rgb),0.30) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--ifs-orange-rgb),0.12), transparent 34%),
    linear-gradient(145deg, rgba(22,15,10,0.96), rgba(7,7,8,0.94)) !important;
}
.home-page .studio-routes-section .studio-route-card::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 35%, rgba(var(--ifs-orange-rgb),0.34), transparent 64%);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 0;
  pointer-events: none;
}
.home-page .studio-routes-section .studio-route-card > * { position: relative; z-index: 1; }
.home-page .studio-routes-section .studio-route-card:hover,
.home-page .studio-routes-section .studio-route-card:focus-visible,
.home-page .studio-routes-section .studio-route-card:focus-within {
  transform: translateY(-10px) !important;
  border-color: rgba(var(--ifs-orange-rgb),0.62) !important;
  border-left-color: rgb(var(--ifs-orange-rgb)) !important;
  border-bottom-color: rgb(var(--ifs-orange-rgb)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ifs-orange-rgb),0.44),
    0 0 36px rgba(var(--ifs-orange-rgb),0.32),
    0 20px 52px rgba(var(--ifs-orange-rgb),0.24),
    0 12px 30px rgba(0,0,0,0.68) !important;
}
.home-page .studio-routes-section .studio-route-card:hover::before,
.home-page .studio-routes-section .studio-route-card:focus-visible::before,
.home-page .studio-routes-section .studio-route-card:focus-within::before {
  opacity: 1;
  transform: scale(1);
}
.home-page .studio-routes-section .route-icon,
.home-page .studio-routes-section .svg-icon { color: rgb(var(--ifs-orange-rgb)) !important; }

/* Forge compass result button should behave like the catalogue buttons rather than fading away. */
#forgeCompassLink,
#forgeCompassLink:visited,
.forge-compass-result .btn,
.forge-compass-result .btn:visited {
  background: rgba(0,0,0,0.38) !important;
  color: #fff !important;
  border: 1px solid rgba(var(--ifs-orange-rgb),0.82) !important;
  box-shadow: 0 0 18px rgba(var(--ifs-orange-rgb),0.16) !important;
  opacity: 1 !important;
}
#forgeCompassLink:hover,
#forgeCompassLink:focus-visible,
.forge-compass-result .btn:hover,
.forge-compass-result .btn:focus-visible {
  background: rgba(var(--ifs-orange-rgb),0.20) !important;
  color: #fff !important;
  opacity: 1 !important;
  border-color: rgba(var(--ifs-orange-rgb),0.98) !important;
  box-shadow: 0 10px 28px rgba(var(--ifs-orange-rgb),0.30), 0 8px 20px rgba(0,0,0,0.52) !important;
  transform: translateY(-2px) !important;
}

/* Games catalogue: separate similarly coloured blocks clearly. */
.games-page .game-card--alberenar-board,
.game-card--alberenar-board {
  --game-accent: var(--ifs-board-purple) !important;
  --game-accent-rgb: var(--ifs-board-purple-rgb) !important;
}
.games-page .game-card--global,
.game-card--global {
  --game-accent: var(--ifs-global-green) !important;
  --game-accent-rgb: var(--ifs-global-green-rgb) !important;
}
.games-page .game-card--pactsmiths,
.game-card--pactsmiths {
  --game-accent: var(--ifs-pact-orange) !important;
  --game-accent-rgb: var(--ifs-pact-orange-rgb) !important;
}
.games-page .game-card--wounded-roads,
.game-card--wounded-roads {
  --game-accent: var(--ifs-wounded-red) !important;
  --game-accent-rgb: var(--ifs-wounded-red-rgb) !important;
}
.games-page .game-card--no-safe-road,
.game-card--no-safe-road {
  --game-accent: var(--ifs-steel) !important;
  --game-accent-rgb: var(--ifs-steel-rgb) !important;
}
.game-card {
  border-left-color: rgba(var(--game-accent-rgb),0.78) !important;
  border-bottom-color: rgba(var(--game-accent-rgb),0.22) !important;
}
.game-card:hover,
.game-card:focus-within {
  border-left-color: rgb(var(--game-accent-rgb)) !important;
  border-bottom-color: rgb(var(--game-accent-rgb)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--game-accent-rgb),0.44),
    0 22px 58px rgba(var(--game-accent-rgb),0.30),
    0 14px 34px rgba(0,0,0,0.72) !important;
}

/* Downloads: apply the same colour separation as the Games catalogue. */
.download-card--alberenar-board {
  --download-accent: var(--ifs-board-purple) !important;
  --download-accent-rgb: var(--ifs-board-purple-rgb) !important;
}
.download-card--global {
  --download-accent: var(--ifs-global-green) !important;
  --download-accent-rgb: var(--ifs-global-green-rgb) !important;
}
.download-card--pactsmiths {
  --download-accent: var(--ifs-pact-orange) !important;
  --download-accent-rgb: var(--ifs-pact-orange-rgb) !important;
}
.download-card--wounded-roads {
  --download-accent: var(--ifs-wounded-red) !important;
  --download-accent-rgb: var(--ifs-wounded-red-rgb) !important;
}
.download-card--no-safe-road {
  --download-accent: var(--ifs-steel) !important;
  --download-accent-rgb: var(--ifs-steel-rgb) !important;
}
.download-card {
  border-left-color: rgba(var(--download-accent-rgb),0.78) !important;
  border-bottom-color: rgba(var(--download-accent-rgb),0.22) !important;
}
.download-card:hover,
.download-card:focus-within {
  border-left-color: rgb(var(--download-accent-rgb)) !important;
  border-bottom-color: rgb(var(--download-accent-rgb)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--download-accent-rgb),0.42),
    0 20px 54px rgba(var(--download-accent-rgb),0.27),
    0 12px 30px rgba(0,0,0,0.64) !important;
}

/* Lore archive: explicit classes prevent multi-tag overlap from making blocks read the same. */
.lore-page .archive-entry--global {
  --section-accent: var(--ifs-global-green) !important;
  --section-accent-rgb: var(--ifs-global-green-rgb) !important;
}
.lore-page .archive-entry--alberenar-board {
  --section-accent: var(--ifs-board-purple) !important;
  --section-accent-rgb: var(--ifs-board-purple-rgb) !important;
}
.lore-page .archive-entry--pactsmiths {
  --section-accent: var(--ifs-pact-orange) !important;
  --section-accent-rgb: var(--ifs-pact-orange-rgb) !important;
}
.lore-page .archive-entry--wounded {
  --section-accent: var(--ifs-wounded-red) !important;
  --section-accent-rgb: var(--ifs-wounded-red-rgb) !important;
}
.lore-page .archive-entry--no-safe-road {
  --section-accent: var(--ifs-steel) !important;
  --section-accent-rgb: var(--ifs-steel-rgb) !important;
}
.lore-page .archive-entry--soundtracks {
  --section-accent: #43d7c7 !important;
  --section-accent-rgb: 67, 215, 199 !important;
}
.lore-page .archive-entry {
  border-left-color: rgba(var(--section-accent-rgb,232,93,4),0.82) !important;
  border-bottom-color: rgba(var(--section-accent-rgb,232,93,4),0.18) !important;
}
.lore-page .archive-entry:hover,
.lore-page .archive-entry:focus-within {
  border-left-color: rgb(var(--section-accent-rgb,232,93,4)) !important;
  border-bottom-color: rgb(var(--section-accent-rgb,232,93,4)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--section-accent-rgb,232,93,4),0.38),
    0 20px 52px rgba(var(--section-accent-rgb,232,93,4),0.24),
    0 12px 30px rgba(0,0,0,0.66) !important;
}
.lore-page .archive-entry .btn:not(.btn-disabled) {
  color: #fff !important;
  border-color: rgba(var(--section-accent-rgb,232,93,4),0.72) !important;
  background: rgba(0,0,0,0.36) !important;
}
.lore-page .archive-entry .btn:not(.btn-disabled):hover {
  color: #fff !important;
  background: rgba(var(--section-accent-rgb,232,93,4),0.20) !important;
  box-shadow: 0 10px 28px rgba(var(--section-accent-rgb,232,93,4),0.28), 0 8px 20px rgba(0,0,0,0.50) !important;
}

/* Alberenar page: blend the Ten Gateways section into the wallpaper; no hard purple slab line. */
.alberenar-page .deep-dive-section,
.alberenar-page .deep-dive-section--alberenar,
.deep-dive-section--alberenar {
  background:
    radial-gradient(circle at 18% 4%, rgba(var(--ifs-alberenar-rgb),0.08), transparent 36%),
    url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  border-top: 0 !important;
  box-shadow: none !important;
  margin-top: -1px !important;
}
.alberenar-page .deep-dive-section::before,
.alberenar-page .deep-dive-section::after,
.deep-dive-section--alberenar::before,
.deep-dive-section--alberenar::after { display: none !important; content: none !important; }

/* Tools page: the VTT/Table Tools band should sit on the same wallpaper, without a tinted strip or top seam. */
.tools-page .vtt-sample-section {
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  border-top: 0 !important;
  box-shadow: none !important;
  margin-top: -1px !important;
}
.tools-page .vtt-sample-section::before,
.tools-page .vtt-sample-section::after { display: none !important; content: none !important; }
.tools-page .tool-card,
.tools-page .vtt-sample-card {
  --tool-accent-rgb: var(--ifs-orange-rgb) !important;
}
.tools-page .tool-card:hover,
.tools-page .tool-card:focus-within,
.tools-page .vtt-sample-card:hover,
.tools-page .vtt-sample-card:focus-within {
  border-color: rgba(var(--ifs-orange-rgb),0.62) !important;
  border-left-color: rgb(var(--ifs-orange-rgb)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ifs-orange-rgb),0.38),
    0 0 34px rgba(var(--ifs-orange-rgb),0.25),
    0 20px 52px rgba(var(--ifs-orange-rgb),0.24),
    0 12px 30px rgba(0,0,0,0.66) !important;
  transform: translateY(-8px) !important;
}
.tools-page .tool-card .tool-icon,
.tools-page .tool-card .svg-icon,
.tools-page .vtt-sample-card .svg-icon { color: rgb(var(--ifs-orange-rgb)) !important; }

/* Forum page: use the same header height family as the other tabs, keep the full banner composition, and feather into the wallpaper. */
.forum-page .page-hero--forum {
  min-height: 62vh !important;
  padding-top: calc(var(--nav-height) + 5.5rem) !important;
  padding-bottom: 5.5rem !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
}
.forum-page .page-hero--forum::before {
  inset: 0 !important;
  transform: none !important;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.18) 48%, rgba(13,13,13,0.78) 100%),
    url('../images/hero-forum-replacement.webp') !important;
  background-position: center center, center center !important;
  background-size: 100% 100%, contain !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,0.80) 92%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,0.80) 92%, transparent 100%) !important;
}
.forum-page .page-hero--forum::after {
  height: 240px !important;
  bottom: -1px !important;
  background:
    linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.50) 58%, rgba(13,13,13,0.96) 100%),
    url('../images/background_texture.webp') center bottom / 620px 620px repeat !important;
  opacity: 1 !important;
}
@media (max-width: 760px) {
  .forum-page .page-hero--forum { min-height: 52vh !important; padding-top: calc(var(--nav-height) + 3.25rem) !important; padding-bottom: 4rem !important; }
  .forum-page .page-hero--forum::before { background-size: 100% 100%, cover !important; }
}

/* About page: five Forge Mark symbol blocks should be orange at rest and glow orange on hover. */
.about-page .forge-mark-card {
  border-color: rgba(var(--ifs-orange-rgb),0.34) !important;
  border-left-color: rgba(var(--ifs-orange-rgb),0.92) !important;
  border-bottom-color: rgba(var(--ifs-orange-rgb),0.30) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--ifs-orange-rgb),0.18), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(255,186,8,0.10), transparent 36%),
    linear-gradient(145deg, rgba(24,14,7,0.97), rgba(7,7,8,0.96)) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.44), 0 0 0 1px rgba(var(--ifs-orange-rgb),0.06) !important;
}
.about-page .forge-mark-card:hover,
.about-page .forge-mark-card:focus-within {
  border-color: rgba(var(--ifs-orange-rgb),0.68) !important;
  border-left-color: rgb(var(--ifs-orange-rgb)) !important;
  border-bottom-color: rgb(var(--ifs-orange-rgb)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ifs-orange-rgb),0.44),
    0 0 36px rgba(var(--ifs-orange-rgb),0.30),
    0 20px 52px rgba(var(--ifs-orange-rgb),0.25),
    0 12px 30px rgba(0,0,0,0.66) !important;
  transform: translateY(-8px) !important;
}
.about-page .forge-mark-card h3 { color: #fff !important; }
.about-page .forge-mark-icon {
  filter: drop-shadow(0 0 14px rgba(var(--ifs-orange-rgb),0.38)) !important;
}

/* --------------------------------------------------------------------------
   v9.74 — final colour and banner crop correction pass
   -------------------------------------------------------------------------- */

:root {
  --ifs-pact-yellow: #f4c84a;
  --ifs-pact-yellow-rgb: 244, 200, 74;
  --ifs-coming-white: #f2f2f2;
  --ifs-coming-white-rgb: 242, 242, 242;
}

/* Games catalogue: Pactsmiths should read as yellow, not orange. */
.games-page .game-card--pactsmiths,
.game-card--pactsmiths {
  --game-accent: var(--ifs-pact-yellow) !important;
  --game-accent-rgb: var(--ifs-pact-yellow-rgb) !important;
}

/* Games catalogue: Coming Soon should read as white/silver, not orange. */
.games-page .game-card--coming-soon,
.game-card--coming-soon {
  --game-accent: var(--ifs-coming-white) !important;
  --game-accent-rgb: var(--ifs-coming-white-rgb) !important;
}
.games-page .game-card--coming-soon .btn,
.game-card--coming-soon .btn {
  border-color: rgba(var(--ifs-coming-white-rgb), 0.86) !important;
  box-shadow: 0 0 18px rgba(var(--ifs-coming-white-rgb), 0.16) !important;
}
.games-page .game-card--coming-soon:hover .btn,
.game-card--coming-soon:hover .btn,
.games-page .game-card--coming-soon:focus-within .btn,
.game-card--coming-soon:focus-within .btn {
  background: rgba(var(--ifs-coming-white-rgb), 0.16) !important;
  box-shadow: 0 10px 28px rgba(var(--ifs-coming-white-rgb), 0.18), 0 8px 20px rgba(0,0,0,0.52) !important;
}

/* Forum page: restore a normal hero size and show the full replacement banner without top/bottom crop. */
.forum-page .page-hero--forum {
  min-height: clamp(340px, 41vw, 520px) !important;
  padding-top: calc(var(--nav-height) + 4.4rem) !important;
  padding-bottom: 3.5rem !important;
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
}
.forum-page .page-hero--forum::before {
  inset: 0 !important;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.22) 50%, rgba(13,13,13,0.74) 100%),
    url('../images/hero-forum-replacement.webp') !important;
  background-position: center center, center center !important;
  background-size: 100% 100%, 100% auto !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0.78) 90%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0.78) 90%, transparent 100%) !important;
}
.forum-page .page-hero--forum::after {
  height: 180px !important;
  bottom: -1px !important;
  background:
    linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.42) 56%, rgba(13,13,13,0.96) 100%),
    url('../images/background_texture.webp') center bottom / 620px 620px repeat !important;
  opacity: 1 !important;
}
@media (max-width: 760px) {
  .forum-page .page-hero--forum {
    min-height: clamp(300px, 56vw, 420px) !important;
    padding-top: calc(var(--nav-height) + 3.1rem) !important;
    padding-bottom: 3rem !important;
  }
  .forum-page .page-hero--forum::before {
    background-size: 100% 100%, 100% auto !important;
    background-position: center center, center top !important;
  }
}

/* Alberenar / Resonance page deep-dive sections: remove tinted slab overlays and let the wallpaper carry the section. */
.alberenar-page .deep-dive-section,
.alberenar-page .deep-dive-section--alberenar,
.resonance-page .deep-dive-section,
.resonance-page .deep-dive-section--resonance {
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  border-top: 0 !important;
  box-shadow: none !important;
  margin-top: -1px !important;
}
.alberenar-page .deep-dive-section::before,
.alberenar-page .deep-dive-section::after,
.resonance-page .deep-dive-section::before,
.resonance-page .deep-dive-section::after,
.alberenar-page .deep-dive-section--alberenar::before,
.alberenar-page .deep-dive-section--alberenar::after,
.resonance-page .deep-dive-section--resonance::before,
.resonance-page .deep-dive-section--resonance::after {
  display: none !important;
  content: none !important;
}

/* --------------------------------------------------------------------------
   v9.75 — section-blend, forum-banner, and portrait-lightbox correction pass
   -------------------------------------------------------------------------- */

/* About page: remove the visible cut-off overlay between the studio identity panel
   and the Five Symbols area. The wallpaper now carries the section transition. */
.about-page .about-intro,
.about-page .forge-mark-section {
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
.about-page .forge-mark-section {
  margin-top: -1px !important;
  padding-top: clamp(4.2rem, 7vw, 6.5rem) !important;
}
.about-page .about-intro::before,
.about-page .about-intro::after,
.about-page .forge-mark-section::before,
.about-page .forge-mark-section::after {
  display: none !important;
  content: none !important;
}

/* Forum page: use a corrected 2560×720 banner asset, matching the other header
   image family so the top and bottom are no longer cropped away. */
.forum-page .page-hero--forum {
  min-height: clamp(520px, 50svh, 680px) !important;
  padding-top: calc(var(--nav-height) + 4.8rem) !important;
  padding-bottom: clamp(4.8rem, 8svh, 6.8rem) !important;
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
.forum-page .page-hero--forum::before {
  inset: 0 !important;
  transform: none !important;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.12) 46%, rgba(13,13,13,0.42) 82%, rgba(13,13,13,0.74) 100%),
    url('../images/hero-forum-v975.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
}
.forum-page .page-hero--forum::after {
  height: clamp(180px, 24svh, 300px) !important;
  bottom: -1px !important;
  background:
    linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,0.10) 34%, rgba(13,13,13,0.48) 72%, rgba(13,13,13,0.96) 100%),
    url('../images/background_texture.webp') center bottom / 620px 620px repeat !important;
  opacity: 1 !important;
}
@media (max-width: 760px) {
  .forum-page .page-hero--forum {
    min-height: clamp(420px, 64svh, 560px) !important;
    padding-top: calc(var(--nav-height) + 3.5rem) !important;
    padding-bottom: 4.4rem !important;
  }
  .forum-page .page-hero--forum::before {
    background-size: 100% 100%, cover !important;
    background-position: center center, center center !important;
  }
}

/* Race and species libraries: no tinted slabs or hard overlays. */
.alberenar-page .race-library-section,
.alberenar-page .race-library-section--alberenar,
.resonance-page .race-library-section,
.resonance-page .race-library-section--resonance {
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  border-top: 0 !important;
  box-shadow: none !important;
  margin-top: -1px !important;
}
.alberenar-page .race-library-section::before,
.alberenar-page .race-library-section::after,
.resonance-page .race-library-section::before,
.resonance-page .race-library-section::after,
.alberenar-page .race-library-section--alberenar::before,
.alberenar-page .race-library-section--alberenar::after,
.resonance-page .race-library-section--resonance::before,
.resonance-page .race-library-section--resonance::after {
  display: none !important;
  content: none !important;
}

/* Portrait cards: make completed race portraits clearly selectable. */
.race-library-card--has-image,
.race-library-card--has-image .race-image-slot--image,
.race-library-card--has-image .race-image-slot--image img {
  cursor: zoom-in !important;
}
.race-library-card--has-image .race-image-slot--image {
  position: relative;
  overflow: hidden;
}
.race-library-card--has-image .race-image-slot--image::after {
  content: 'View Larger';
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,186,8,0.42);
  background: rgba(0,0,0,0.62);
  color: rgba(255,255,255,0.88);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
  pointer-events: none;
}
.race-library-card--has-image:hover .race-image-slot--image::after,
.race-library-card--has-image:focus-within .race-image-slot--image::after {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(255,186,8,0.78);
}

/* Larger portrait pop-up. The modal itself scrolls so portrait/detail images can be
   viewed at a generous size even on laptops and portrait phones. */
.lightbox.race-portrait-lightbox {
  overflow-y: auto !important;
  padding: clamp(4.5rem, 7vh, 6rem) clamp(0.75rem, 3vw, 2rem) clamp(2rem, 5vh, 4rem) !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(232,93,4,0.16), transparent 32%),
    rgba(0,0,0,0.94) !important;
}
.lightbox.race-portrait-lightbox .lightbox-content {
  width: min(96vw, 1180px) !important;
  max-width: min(96vw, 1180px) !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  cursor: zoom-out !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(255,186,8,0.18), 0 24px 80px rgba(0,0,0,0.76) !important;
}
.lightbox-race-caption {
  display: none;
  width: min(96vw, 1180px);
  margin: 1rem auto 0;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(255,186,8,0.18);
  background: rgba(9,9,10,0.82);
  color: var(--text-muted);
  box-shadow: 0 16px 40px rgba(0,0,0,0.42);
}
.lightbox.race-portrait-lightbox .lightbox-race-caption { display: block; }
.lightbox-race-caption strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.lightbox-race-caption p { margin: 0; }

/* --------------------------------------------------------------------------
   v9.76 — forum banner blend and Alberenar race carousel lightbox
   -------------------------------------------------------------------------- */

/* Forum: keep the full 2560×720 forum artwork visible within the same header
   family as the other main tabs, and remove the wallpaper slab that was cutting
   through the lower part of the image. */
.forum-page .page-hero--forum {
  min-height: clamp(500px, 50svh, 660px) !important;
  padding-top: calc(var(--nav-height) + 4.4rem) !important;
  padding-bottom: clamp(4.8rem, 8svh, 6.4rem) !important;
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
.forum-page .page-hero--forum::before {
  inset: 0 !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.12) 0%,
      rgba(0,0,0,0.08) 32%,
      rgba(0,0,0,0.18) 68%,
      rgba(13,13,13,0.78) 100%),
    url('../images/hero-forum-v975.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  opacity: 1 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0,0,0,0.84) 88%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0,0,0,0.84) 88%, transparent 100%) !important;
}
.forum-page .page-hero--forum::after {
  display: none !important;
  content: none !important;
}
.forum-page .forum-sections-section {
  margin-top: 0 !important;
  padding-top: clamp(4rem, 7vw, 6rem) !important;
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
}
@media (max-width: 760px) {
  .forum-page .page-hero--forum {
    min-height: clamp(420px, 60svh, 560px) !important;
    padding-top: calc(var(--nav-height) + 3.4rem) !important;
    padding-bottom: 4.2rem !important;
  }
  .forum-page .page-hero--forum::before {
    background-size: 100% 100%, cover !important;
    background-position: center center, center center !important;
  }
}

/* Alberenar race portraits: use a dedicated carousel-style lightbox, sized like
   the other game-page image viewers but restrained so portraits do not explode
   beyond the viewport. */
.race-carousel-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  padding: clamp(4rem, 7vh, 5.5rem) clamp(1rem, 4vw, 4rem) clamp(4.8rem, 8vh, 6rem);
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 14%, rgba(111,45,189,0.20), transparent 34%),
    rgba(0,0,0,0.92) !important;
}
.race-carousel-lightbox.is-open {
  display: grid !important;
  place-items: center;
}
.race-carousel-lightbox .race-lightbox-image {
  width: auto !important;
  max-width: min(82vw, 980px) !important;
  max-height: min(72vh, 760px) !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(185,114,255,0.28), 0 24px 78px rgba(0,0,0,0.78) !important;
}
.race-carousel-lightbox .race-lightbox-caption {
  display: block;
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  width: min(86vw, 840px);
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(185,114,255,0.24);
  background: rgba(5,5,8,0.76);
  color: var(--text-muted);
  text-align: center;
  box-shadow: 0 14px 38px rgba(0,0,0,0.52);
  z-index: 10002;
}
.race-carousel-lightbox .race-lightbox-caption strong {
  display: block;
  color: #fff;
  margin-bottom: 0.25rem;
}
.race-carousel-lightbox .race-lightbox-caption p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.race-carousel-lightbox .race-lightbox-counter {
  bottom: auto !important;
  top: clamp(1rem, 3vh, 2rem) !important;
}
.race-carousel-lightbox .race-lightbox-close {
  position: fixed !important;
  top: 1.2rem !important;
  right: 1.4rem !important;
  z-index: 10004 !important;
}
@media (max-width: 760px) {
  .race-carousel-lightbox {
    padding: 4.2rem 0.75rem 7rem;
  }
  .race-carousel-lightbox .race-lightbox-image {
    max-width: 94vw !important;
    max-height: 64vh !important;
  }
  .race-carousel-lightbox .race-lightbox-caption {
    width: min(92vw, 620px);
    bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------
   v9.77 — latest colour/button/banner corrections
   -------------------------------------------------------------------------- */

:root {
  --ifs-button-gold: #e8a83a;
  --ifs-button-gold-rgb: 232, 168, 58;
  --ifs-pactsmiths-yellow: #f4c84a;
  --ifs-pactsmiths-yellow-rgb: 244, 200, 74;
}

/* Lore: Pactsmiths / Contracts on the Anvil must read as yellow. */
.lore-page .archive-entry--pactsmiths,
.lore-page .archive-entry[data-tags~="pactsmiths"] {
  --section-accent: var(--ifs-pactsmiths-yellow) !important;
  --section-accent-rgb: var(--ifs-pactsmiths-yellow-rgb) !important;
}

/* Downloads: Pactsmiths Public Sampler must also use the yellow Pactsmiths accent. */
.downloads-page .download-card--pactsmiths,
.download-card--pactsmiths {
  --download-accent: var(--ifs-pactsmiths-yellow) !important;
  --download-accent-rgb: var(--ifs-pactsmiths-yellow-rgb) !important;
  --game-accent: var(--ifs-pactsmiths-yellow) !important;
  --game-accent-rgb: var(--ifs-pactsmiths-yellow-rgb) !important;
  --section-accent: var(--ifs-pactsmiths-yellow) !important;
  --section-accent-rgb: var(--ifs-pactsmiths-yellow-rgb) !important;
}
.downloads-page .download-card--pactsmiths .btn:not(.btn-disabled),
.download-card--pactsmiths .btn:not(.btn-disabled) {
  border-color: rgba(var(--ifs-pactsmiths-yellow-rgb),0.78) !important;
  box-shadow: 0 0 18px rgba(var(--ifs-pactsmiths-yellow-rgb),0.16) !important;
}
.downloads-page .download-card--pactsmiths:hover .btn:not(.btn-disabled),
.download-card--pactsmiths:hover .btn:not(.btn-disabled) {
  background: rgba(var(--ifs-pactsmiths-yellow-rgb),0.18) !important;
  box-shadow: 0 10px 28px rgba(var(--ifs-pactsmiths-yellow-rgb),0.25), 0 8px 20px rgba(0,0,0,0.52) !important;
}

/* Home: Featured Games, Choose Your Route, and Choose a Starting Point now use
   the same warm outline-button treatment as Find the Door That Fits Your Table. */
.home-page .home-project-section--featured .card-link-button,
.home-page .studio-routes-section .route-card-button,
.home-page .forge-compass-section .forge-compass-choice,
.home-page .forge-compass-section .forge-compass-result .btn,
.home-page #forgeCompassLink,
.home-page .forge-latest-section .card-link-button {
  --game-accent-rgb: var(--ifs-button-gold-rgb) !important;
  --section-accent-rgb: var(--ifs-button-gold-rgb) !important;
  color: #fff !important;
  background: rgba(0,0,0,0.38) !important;
  border: 1px solid rgba(var(--ifs-button-gold-rgb),0.78) !important;
  box-shadow: 0 0 18px rgba(var(--ifs-button-gold-rgb),0.14) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.82) !important;
}
.home-page .home-project-section--featured .home-project-card:hover .card-link-button,
.home-page .home-project-section--featured .home-project-card:focus-within .card-link-button,
.home-page .studio-routes-section .studio-route-card:hover .route-card-button,
.home-page .studio-routes-section .studio-route-card:focus-within .route-card-button,
.home-page .forge-compass-section .forge-compass-choice:hover,
.home-page .forge-compass-section .forge-compass-choice:focus-visible,
.home-page .forge-compass-section .forge-compass-choice.active,
.home-page .forge-compass-section .forge-compass-result .btn:hover,
.home-page .forge-compass-section .forge-compass-result .btn:focus-visible,
.home-page #forgeCompassLink:hover,
.home-page #forgeCompassLink:focus-visible,
.home-page .forge-latest-section .forge-latest-card:hover .card-link-button,
.home-page .forge-latest-section .forge-latest-card:focus-within .card-link-button {
  color: #fff !important;
  background: rgba(var(--ifs-button-gold-rgb),0.20) !important;
  border-color: rgba(var(--ifs-button-gold-rgb),0.92) !important;
  box-shadow: 0 10px 28px rgba(var(--ifs-button-gold-rgb),0.28), 0 8px 20px rgba(0,0,0,0.52) !important;
}

/* Forum: extend the banner lower before the fade, then use a softer transition
   so the image does not appear chopped before meeting the wallpaper. */
.forum-page .page-hero--forum {
  min-height: clamp(560px, 55svh, 720px) !important;
  padding-top: calc(var(--nav-height) + 4.6rem) !important;
  padding-bottom: clamp(7rem, 11svh, 9rem) !important;
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
.forum-page .page-hero--forum::before {
  inset: 0 !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.06) 34%,
      rgba(0,0,0,0.14) 72%,
      rgba(13,13,13,0.52) 94%,
      rgba(13,13,13,0.86) 100%),
    url('../images/hero-forum-v975.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  opacity: 1 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 89%, rgba(0,0,0,0.88) 95%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 89%, rgba(0,0,0,0.88) 95%, transparent 100%) !important;
}
.forum-page .page-hero--forum::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(130px, 18svh, 220px) !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom,
    rgba(13,13,13,0) 0%,
    rgba(13,13,13,0.10) 42%,
    rgba(13,13,13,0.42) 76%,
    rgba(13,13,13,0.92) 100%) !important;
  opacity: 1 !important;
  z-index: 1 !important;
}
.forum-page .page-hero--forum .page-hero-content {
  position: relative !important;
  z-index: 2 !important;
}
.forum-page .forum-sections-section {
  margin-top: -1px !important;
  padding-top: clamp(4.25rem, 7vw, 6.25rem) !important;
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
}
@media (max-width: 760px) {
  .forum-page .page-hero--forum {
    min-height: clamp(500px, 68svh, 640px) !important;
    padding-top: calc(var(--nav-height) + 3.6rem) !important;
    padding-bottom: 6.2rem !important;
  }
  .forum-page .page-hero--forum::before {
    background-size: 100% 100%, cover !important;
    background-position: center center, center center !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, rgba(0,0,0,0.88) 95%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 88%, rgba(0,0,0,0.88) 95%, transparent 100%) !important;
  }
}

/* --------------------------------------------------------------------------
   v9.78 — Resonance Expedition Forge dedicated GM page
   -------------------------------------------------------------------------- */
body.resonance-expedition-page {
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
  color: var(--text-light);
}

.resonance-expedition-page .page-hero--resonance-expedition {
  min-height: max(560px, calc(100vw * 0.3999)) !important;
  height: max(560px, calc(100vw * 0.3999)) !important;
  padding-top: calc(var(--nav-height) + clamp(3.2rem, 5.5vw, 5.5rem)) !important;
  padding-bottom: clamp(5rem, 8vw, 7rem) !important;
  justify-content: flex-start !important;
  text-align: left !important;
  background: #0d0d0d url('../images/background_texture.webp') repeat !important;
  background-size: 1024px 1024px !important;
  overflow: hidden !important;
}

.resonance-expedition-page .page-hero--resonance-expedition::before {
  inset: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  background-image:
    linear-gradient(90deg,
      rgba(0,0,0,0.76) 0%,
      rgba(0,0,0,0.54) 24%,
      rgba(0,0,0,0.18) 50%,
      rgba(0,0,0,0.30) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.00) 48%,
      rgba(13,13,13,0.16) 76%,
      rgba(13,13,13,0.38) 100%),
    url('../images/resonance-expedition-forge-banner.webp') !important;
  background-size: 100% 100%, 100% 100%, 100% auto !important;
  background-position: center top, center top, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 68%,
    rgba(0,0,0,0.92) 78%,
    rgba(0,0,0,0.58) 90%,
    rgba(0,0,0,0.16) 97%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 68%,
    rgba(0,0,0,0.92) 78%,
    rgba(0,0,0,0.58) 90%,
    rgba(0,0,0,0.16) 97%,
    transparent 100%) !important;
}

.resonance-expedition-page .page-hero--resonance-expedition::after {
  display: none !important;
  content: none !important;
}

.resonance-expedition-page .resonance-expedition-hero-content {
  max-width: 740px !important;
  margin-left: clamp(1rem, 7vw, 8rem) !important;
  margin-right: auto !important;
  padding: clamp(1.1rem, 2vw, 1.45rem) clamp(1.15rem, 2.2vw, 1.7rem) !important;
  border: 1px solid rgba(80,176,255,0.20) !important;
  border-left: 4px solid rgba(80,176,255,0.62) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(0,0,0,0.58), rgba(4,12,22,0.34)) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,0.52), 0 0 30px rgba(42,146,255,0.12) !important;
}

.resonance-expedition-page .page-hero--resonance-expedition h1 {
  color: #fff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.96), 0 0 30px rgba(60,170,255,0.28) !important;
}

.resonance-expedition-page .page-hero--resonance-expedition p {
  color: #d5e9f7 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.88) !important;
}

.resonance-forge-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: clamp(3.5rem, 6vw, 5.6rem) !important;
  background: transparent !important;
}

.resonance-forge-intro {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(250px, 340px);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
  margin-bottom: 1.6rem;
}

.resonance-forge-intro > div:first-child,
.resonance-forge-summary-card,
.resonance-control-panel,
.resonance-brief-panel,
.resonance-step-card {
  border: 1px solid rgba(91,179,255,0.18);
  background: linear-gradient(145deg, rgba(4,12,22,0.72), rgba(0,0,0,0.34));
  box-shadow: 0 18px 42px rgba(0,0,0,0.36);
}

.resonance-forge-intro > div:first-child {
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  border-left: 4px solid rgba(83,176,255,0.68);
  border-radius: 22px;
}

.resonance-forge-intro h2,
.resonance-brief-panel h2 {
  margin: 0 0 0.65rem;
  color: #fff;
}

.resonance-forge-intro p {
  margin: 0;
  color: #c8d4dc;
  line-height: 1.7;
}

.resonance-forge-summary-card {
  display: grid;
  gap: 0.55rem;
  align-content: center;
  padding: clamp(1.1rem, 2.4vw, 1.45rem);
  border-radius: 22px;
  border-left: 4px solid rgba(132,98,255,0.72);
}

.resonance-forge-summary-card strong {
  color: #fff;
  font-size: 1.04rem;
}

.resonance-forge-summary-card span {
  color: #dbe7f0;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  background: rgba(70,170,255,0.09);
  border: 1px solid rgba(70,170,255,0.18);
}

.resonance-procedure-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.2rem;
  padding: 0.8rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(0,0,0,0.24);
}

.resonance-procedure-strip span {
  flex: 1 1 190px;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(91,179,255,0.18);
  border-radius: 14px;
  background: rgba(9,25,40,0.50);
  color: #e6f4ff;
  font-size: 0.9rem;
  text-align: center;
}

.resonance-control-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 1.4rem;
  padding: 1rem;
  border-radius: 20px;
}

.resonance-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}

.resonance-step-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  border-radius: 22px;
  min-height: 330px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.resonance-step-card:hover,
.resonance-step-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(91,179,255,0.38);
  box-shadow: 0 24px 55px rgba(0,0,0,0.44), 0 0 26px rgba(54,150,255,0.10);
}

.resonance-step-card header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}

.resonance-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  border: 1px solid rgba(91,179,255,0.35);
  color: #fff;
  background: radial-gradient(circle at 50% 35%, rgba(91,179,255,0.30), rgba(45,75,120,0.12));
  box-shadow: 0 0 20px rgba(91,179,255,0.14);
}

.resonance-step-card h3 {
  margin: 0 0 0.25rem;
  color: #fff;
}

.resonance-step-card header p {
  margin: 0;
  color: #9fb4c2;
  line-height: 1.45;
}

.resonance-step-result {
  flex: 1 1 auto;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.28);
}

.resonance-step-result strong,
.resonance-escalation-output strong {
  display: block;
  color: #f6fbff;
  margin-bottom: 0.45rem;
}

.resonance-step-result p,
.resonance-brief-output p,
.resonance-escalation-output p {
  margin: 0;
  color: #cbd8e0;
  line-height: 1.62;
}

.resonance-step-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.resonance-step-actions label {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: #dbe7ef;
  cursor: pointer;
  white-space: nowrap;
}

.resonance-step-actions input {
  accent-color: #51b9ff;
}

.resonance-brief-panel {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding: clamp(1.15rem, 2.4vw, 1.65rem);
  border-radius: 24px;
  border-left: 4px solid rgba(116,91,255,0.70);
}

.resonance-brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.resonance-brief-output,
.resonance-escalation-output {
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.26);
}

.resonance-brief-output p + p {
  margin-top: 0.8rem;
}

.resonance-escalation-output {
  margin-top: 1rem;
  border-color: rgba(132,98,255,0.22);
  background: linear-gradient(135deg, rgba(22,14,52,0.42), rgba(0,0,0,0.24));
}

.resonance-step-result.is-changing,
.resonance-escalation-output.is-changing {
  animation: resonanceResultPulse 520ms ease;
}

@keyframes resonanceResultPulse {
  0% { box-shadow: 0 0 0 rgba(80,176,255,0); }
  50% { box-shadow: 0 0 28px rgba(80,176,255,0.20); }
  100% { box-shadow: 0 0 0 rgba(80,176,255,0); }
}

.forge-generator-card--expedition-hub > .forge-generator-button {
  text-align: center !important;
}

@media (max-width: 980px) {
  .resonance-expedition-page .page-hero--resonance-expedition {
    min-height: 560px !important;
    height: 560px !important;
  }
  .resonance-expedition-page .page-hero--resonance-expedition::before {
    background-size: 100% 100%, 100% 100%, cover !important;
    background-position: center top, center top, center top !important;
  }
  .resonance-forge-intro,
  .resonance-step-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .resonance-expedition-page .page-hero--resonance-expedition {
    min-height: clamp(500px, 70svh, 650px) !important;
    height: clamp(500px, 70svh, 650px) !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .resonance-expedition-page .resonance-expedition-hero-content {
    margin: 0 auto !important;
  }
  .resonance-control-panel,
  .resonance-step-actions,
  .resonance-brief-header {
    display: grid;
    grid-template-columns: 1fr;
  }
  .resonance-step-actions label {
    justify-self: start;
  }
}


/* --------------------------------------------------------------------------
   v9.79 — Resonance Expedition Forge customer-facing cleanup
   -------------------------------------------------------------------------- */
.resonance-expedition-page .page-hero--resonance-expedition {
  justify-content: center !important;
  text-align: center !important;
  padding-top: calc(var(--nav-height) + clamp(2.8rem, 4.5vw, 4.8rem)) !important;
  padding-bottom: clamp(4.8rem, 7vw, 6.6rem) !important;
}
.resonance-expedition-page .page-hero--resonance-expedition::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.04) 0%,
      rgba(0,0,0,0.02) 58%,
      rgba(13,13,13,0.34) 82%,
      rgba(13,13,13,0.92) 100%),
    url('../images/resonance-expedition-forge-banner.webp') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.resonance-expedition-page .page-hero--resonance-expedition::after {
  display: none !important;
  content: none !important;
}
.resonance-expedition-page .page-hero--resonance-expedition .page-hero-content,
.resonance-expedition-page .resonance-expedition-hero-content {
  width: min(980px, 92vw) !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.resonance-expedition-page .page-hero--resonance-expedition h1 {
  color: #fff !important;
  font-size: clamp(2.6rem, 6vw, 5rem) !important;
  text-shadow: 0 4px 18px rgba(0,0,0,0.72), 0 0 28px rgba(63,178,255,0.18) !important;
}
.resonance-expedition-page .page-hero--resonance-expedition p:not(.eyebrow) {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--text-muted) !important;
  font-size: 1.1rem !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75) !important;
}
.resonance-expedition-page .page-hero--resonance-expedition .eyebrow {
  color: #9fdcff !important;
  text-shadow: 0 2px 9px rgba(0,0,0,0.76) !important;
}
@media (max-width: 980px) {
  .resonance-expedition-page .page-hero--resonance-expedition::before {
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
  }
}


/* --------------------------------------------------------------------------
   v9.80 — Resonance Expedition Forge layout and customer-facing controls
   -------------------------------------------------------------------------- */
.resonance-expedition-page .resonance-control-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
  align-items: stretch !important;
  justify-content: initial !important;
  gap: 0.9rem !important;
}
.resonance-control-group {
  display: grid !important;
  gap: 0.75rem !important;
  align-content: center !important;
  padding: 0.85rem !important;
  border-radius: 16px !important;
  border: 1px solid rgba(91,179,255,0.14) !important;
  background: rgba(0,0,0,0.18) !important;
}
.resonance-control-group--escalation {
  border-color: rgba(132,98,255,0.24) !important;
  background: linear-gradient(135deg, rgba(20,18,42,0.28), rgba(0,0,0,0.18)) !important;
}
.resonance-control-kicker {
  margin: 0 !important;
  color: #9fdcff !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.11em !important;
  font-weight: 800 !important;
}
.resonance-control-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}
.resonance-control-note {
  display: block !important;
  color: #b8cad6 !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}
.resonance-brief-header {
  align-items: flex-start !important;
}
.resonance-expedition-page .newsletter-form .btn,
.alberenar-page .newsletter-form .btn,
.resonance-page .newsletter-form .btn {
  align-self: center !important;
}
@media (max-width: 980px) {
  .resonance-expedition-page .resonance-control-panel {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  .resonance-control-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}


/* v9.81 — Quenor Accord soundtrack and expedition presentation */
.soundtrack-library-panel--wide {
  max-width: 1260px;
}
.soundtrack-choice-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
  margin: 1.75rem 0 2rem;
}
.soundtrack-choice-card,
.soundtrack-collection-panel,
.soundtrack-expedition-link-panel {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(17,17,21,0.94), rgba(4,4,7,0.96));
  box-shadow: 0 16px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04);
}
.soundtrack-choice-card {
  min-height: 250px;
  padding: clamp(1.25rem, 2.3vw, 1.8rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.soundtrack-choice-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background: radial-gradient(circle at 18% 0%, rgba(var(--game-accent-rgb, 232,93,4),0.25), transparent 44%);
}
.soundtrack-choice-card--alberenar { --game-accent-rgb: 232,93,4; }
.soundtrack-choice-card--resonance { --game-accent-rgb: 67,215,199; }
.soundtrack-choice-card h3,
.soundtrack-choice-card p,
.soundtrack-choice-actions {
  position: relative;
  z-index: 1;
}
.soundtrack-choice-actions,
.quenor-expedition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}
.soundtrack-collection-panel {
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  margin-top: 1.15rem;
}
.soundtrack-collection-panel--resonance {
  border-color: rgba(67,215,199,0.22);
  background:
    radial-gradient(circle at 92% 0%, rgba(67,215,199,0.13), transparent 42%),
    linear-gradient(145deg, rgba(10,18,24,0.94), rgba(3,5,10,0.96));
}
.soundtrack-collection-heading {
  max-width: 920px;
  margin-bottom: 1.25rem;
}
.soundtrack-collection-heading--with-art {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 1.25rem;
  align-items: center;
}
.soundtrack-collection-heading--with-art img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(67,215,199,0.24);
  box-shadow: 0 16px 36px rgba(0,0,0,0.4);
}
.soundtrack-track-grid--resonance {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.track-order {
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  margin-right: 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(67,215,199,0.28);
  color: #bffdf5;
  font-size: 0.78rem;
  vertical-align: middle;
  background: rgba(67,215,199,0.08);
}
.soundtrack-expedition-link-panel {
  margin-top: 1.25rem;
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  border-color: rgba(67,215,199,0.18);
  background:
    radial-gradient(circle at 88% 18%, rgba(67,215,199,0.10), transparent 34%),
    linear-gradient(145deg, rgba(12,16,22,0.94), rgba(5,5,8,0.96));
}
.quenor-expedition-section {
  padding: clamp(3.5rem, 7vw, 6.5rem) 2rem;
  background:
    radial-gradient(circle at 18% 12%, rgba(67,215,199,0.14), transparent 36%),
    radial-gradient(circle at 84% 12%, rgba(92,95,255,0.13), transparent 38%),
    linear-gradient(180deg, rgba(4,7,13,0.98), rgba(7,7,10,0.96));
}
.quenor-expedition-shell {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid rgba(67,215,199,0.18);
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(11,17,24,0.95), rgba(4,4,7,0.96));
  box-shadow: 0 26px 70px rgba(0,0,0,0.56);
}
.quenor-expedition-art img {
  display: block;
  width: 100%;
  aspect-ratio: 1983 / 793;
  object-fit: cover;
}
.quenor-expedition-copy {
  padding: clamp(1.35rem, 3vw, 2.4rem);
}
.quenor-expedition-copy h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin-bottom: 0.75rem;
}
.quenor-lead {
  color: #e8ffff;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  max-width: 880px;
}
.quenor-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.4rem;
}
.quenor-detail-grid article {
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(0,0,0,0.27);
}
.quenor-detail-grid h3 {
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
  color: #bffdf5;
}
.quenor-detail-grid p {
  color: var(--text-muted);
  font-size: 0.96rem;
}
.future-project-card--quenor {
  --game-accent: #43d7c7;
  --game-accent-rgb: 67,215,199;
}
.future-project-card--quenor img {
  object-position: center;
}
@media (max-width: 1000px) {
  .soundtrack-choice-grid,
  .soundtrack-collection-heading--with-art {
    grid-template-columns: 1fr;
  }
  .soundtrack-collection-heading--with-art img {
    max-width: 260px;
  }
  .soundtrack-track-grid--resonance,
  .quenor-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .soundtrack-track-grid--resonance,
  .quenor-detail-grid {
    grid-template-columns: 1fr;
  }
  .soundtrack-choice-actions,
  .quenor-expedition-actions {
    flex-direction: column;
  }
  .soundtrack-choice-actions .btn,
  .quenor-expedition-actions .btn {
    width: 100%;
    text-align: center;
  }
}


/* v9.82 — Resonance Expeditions dedicated page and soundtrack button polish */
.resonance-expeditions-page .page-hero--resonance-expeditions {
  position: relative;
  min-height: clamp(360px, 48vw, 560px);
  overflow: hidden;
  background: #06131f;
}

.resonance-expeditions-page .page-hero--resonance-expeditions::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(2,7,16,.78) 0%, rgba(2,7,16,.36) 46%, rgba(2,7,16,.18) 100%),
    linear-gradient(180deg, rgba(2,7,16,.12) 0%, rgba(2,7,16,.22) 58%, rgba(2,7,16,.92) 100%),
    url("../images/resonance/resonance-expeditions-banner.webp");
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

.resonance-expeditions-page .page-hero--resonance-expeditions::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 28%;
  background: linear-gradient(180deg, rgba(5,10,18,0) 0%, rgba(5,10,18,.96) 100%);
  pointer-events: none;
  z-index: 1;
}

.resonance-expeditions-page .page-hero--resonance-expeditions .page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.expedition-intro-section,
.expedition-status-section,
.resonance-expeditions-teaser {
  width: min(1180px, calc(100% - 2rem));
  margin: 3rem auto;
}

.expedition-intro-panel,
.expedition-status-panel,
.resonance-expeditions-teaser {
  border: 1px solid rgba(92, 231, 255, .28);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(7, 25, 44, .92), rgba(12, 10, 31, .86)),
    radial-gradient(circle at top left, rgba(72, 219, 251, .2), transparent 45%);
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 0 28px rgba(73, 214, 255, .08);
  padding: clamp(1.35rem, 3vw, 2.4rem);
}

.expedition-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.35rem;
}

.expedition-use-grid article {
  border: 1px solid rgba(92, 231, 255, .2);
  border-radius: 20px;
  background: rgba(0,0,0,.18);
  padding: 1rem;
}

.expedition-use-grid h3 {
  color: #d6fbff;
  margin-bottom: .45rem;
}

.resonance-expeditions-teaser {
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(300px, 1.05fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}

.resonance-expeditions-teaser__art img {
  display: block;
  width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(92, 231, 255, .25);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

.quenor-expedition-section--dedicated {
  margin-top: 3rem;
}

.quenor-expedition-section--dedicated .quenor-expedition-shell {
  border-color: rgba(92, 231, 255, .32);
  background:
    linear-gradient(135deg, rgba(5, 18, 34, .94), rgba(15, 10, 34, .9)),
    radial-gradient(circle at 70% 18%, rgba(91, 222, 255, .18), transparent 45%);
}

.soundtrack-choice-actions .soundtrack-track-button,
.soundtrack-track-card .soundtrack-track-button {
  min-width: 7.5rem;
}

.soundtrack-track-button.active {
  letter-spacing: .03em;
}

@media (max-width: 900px) {
  .expedition-use-grid,
  .resonance-expeditions-teaser {
    grid-template-columns: 1fr;
  }
}


/* v9.83 — catalogue-led adventure and expedition libraries */
.catalogue-page .section-heading {
  margin-bottom: 0.6rem;
}
.catalogue-lead-section,
.catalogue-note-section,
.expedition-detail-section,
.expedition-feature-grid-section {
  width: min(1200px, calc(100% - 2rem));
  margin: 3rem auto;
}
.catalogue-lead-copy {
  max-width: 930px;
  margin: 0 auto 1.35rem;
  text-align: center;
}
.catalogue-filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 auto 1.6rem;
}
.catalogue-filter-button {
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-light);
  background: rgba(0,0,0,0.34);
  border-radius: 999px;
  padding: 0.56rem 1rem;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.catalogue-filter-button:hover,
.catalogue-filter-button.active {
  transform: translateY(-2px);
  border-color: rgba(92,231,255,0.55);
  background: rgba(92,231,255,0.12);
  box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}
.catalogue-lead-section--alberenar .catalogue-filter-button:hover,
.catalogue-lead-section--alberenar .catalogue-filter-button.active {
  border-color: rgba(148,86,255,0.55);
  background: rgba(148,86,255,0.13);
}
.expedition-card-grid .game-card,
.adventure-card-grid .game-card {
  min-height: 100%;
}
.expedition-card-grid .game-card > img,
.adventure-card-grid .game-card > img,
.game-card--alberenar-adventures > img,
.game-card--resonance-expeditions > img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.catalogue-note-panel,
.expedition-status-section--retail .expedition-status-panel {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 28px;
  padding: clamp(1.25rem, 2.8vw, 2.2rem);
  background: linear-gradient(145deg, rgba(13,18,26,0.94), rgba(5,5,8,0.95));
  box-shadow: 0 22px 58px rgba(0,0,0,0.38);
}
.catalogue-note-section--resonance .catalogue-note-panel {
  border-color: rgba(92,231,255,0.22);
  background: radial-gradient(circle at 88% 12%, rgba(92,231,255,0.13), transparent 34%), linear-gradient(145deg, rgba(8,22,35,0.94), rgba(5,5,12,0.96));
}
.catalogue-note-section--alberenar .catalogue-note-panel {
  border-color: rgba(148,86,255,0.25);
  background: radial-gradient(circle at 12% 18%, rgba(148,86,255,0.14), transparent 36%), linear-gradient(145deg, rgba(20,12,35,0.94), rgba(5,5,8,0.96));
}
.alberenar-adventures-page .page-hero--alberenar-adventures,
.quenor-accord-page .page-hero--quenor-accord {
  position: relative;
  min-height: clamp(360px, 48vw, 560px);
  overflow: hidden;
  background: #070912;
}
.alberenar-adventures-page .page-hero--alberenar-adventures::before,
.quenor-accord-page .page-hero--quenor-accord::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
}
.alberenar-adventures-page .page-hero--alberenar-adventures::before {
  background-image:
    linear-gradient(90deg, rgba(5,4,10,.82) 0%, rgba(5,4,10,.45) 48%, rgba(5,4,10,.2) 100%),
    linear-gradient(180deg, rgba(5,4,10,.12) 0%, rgba(5,4,10,.2) 58%, rgba(5,4,10,.96) 100%),
    url("../images/alberenar_banner.webp");
}
.quenor-accord-page .page-hero--quenor-accord::before {
  background-image:
    linear-gradient(90deg, rgba(2,7,16,.78) 0%, rgba(2,7,16,.34) 48%, rgba(2,7,16,.18) 100%),
    linear-gradient(180deg, rgba(2,7,16,.1) 0%, rgba(2,7,16,.22) 58%, rgba(2,7,16,.96) 100%),
    url("../images/resonance/quenor-accord-banner.webp");
}
.alberenar-adventures-page .page-hero--alberenar-adventures::after,
.quenor-accord-page .page-hero--quenor-accord::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 28%;
  background: linear-gradient(180deg, rgba(5,10,18,0) 0%, rgba(5,10,18,.96) 100%);
  pointer-events: none;
  z-index: 1;
}
.alberenar-adventures-page .page-hero--alberenar-adventures .page-hero-content,
.quenor-accord-page .page-hero--quenor-accord .page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
}
.expedition-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: clamp(1.25rem, 3vw, 2.3rem);
  align-items: center;
  border: 1px solid rgba(92,231,255,0.2);
  border-radius: 30px;
  background: radial-gradient(circle at 88% 20%, rgba(92,231,255,0.12), transparent 34%), linear-gradient(145deg, rgba(8,20,32,0.95), rgba(5,5,10,0.96));
  padding: clamp(1.25rem, 3vw, 2.2rem);
  box-shadow: 0 24px 70px rgba(0,0,0,0.44);
}
.expedition-detail-copy .lead-copy {
  color: #e8ffff;
  font-size: clamp(1.05rem, 1.75vw, 1.22rem);
}
.expedition-detail-art img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(92,231,255,0.24);
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}
.expedition-feature-grid-section {
  text-align: center;
}
.expedition-feature-grid {
  text-align: left;
  margin-top: 1.3rem;
}
.game-card--alberenar-adventures { --game-accent: #8f5cff; --game-accent-rgb: 143,92,255; }
.game-card--resonance-expeditions { --game-accent: #43d7c7; --game-accent-rgb: 67,215,199; }
.catalogue-empty-message {
  display: none;
  text-align: center;
  color: var(--text-muted);
  margin-top: 1rem;
}
@media (max-width: 820px) {
  .expedition-detail-layout {
    grid-template-columns: 1fr;
  }
  .expedition-detail-art {
    max-width: 320px;
    margin: 0 auto;
  }
}


/* v9.84 — catalogue-card consistency, Quenor copy polish, and final image-format cleanup.
   Catalogue cards now use the same 16:10 art frame as the main Games page so expedition/adventure libraries can scale cleanly. */
.catalogue-page .game-card-grid .game-card > img,
.expedition-card-grid .game-card > img,
.adventure-card-grid .game-card > img,
.game-card-grid .game-card--alberenar-adventures > img,
.game-card-grid .game-card--resonance-expeditions > img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.45rem !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--game-accent-rgb,232,93,4),0.12), transparent 38%),
    #050505 !important;
  border-radius: 0 !important;
}

.expedition-card-grid,
.adventure-card-grid {
  align-items: stretch !important;
}

.expedition-card-grid .game-card,
.adventure-card-grid .game-card {
  display: flex !important;
  flex-direction: column !important;
}

.expedition-card-grid .game-card-body,
.adventure-card-grid .game-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.expedition-card-grid .game-card-body .btn,
.adventure-card-grid .game-card-body .btn,
.expedition-card-grid .game-card-body .btn-disabled,
.adventure-card-grid .game-card-body .btn-disabled {
  margin-top: auto !important;
  align-self: flex-start !important;
}

.quenor-accord-page .expedition-detail-copy h2 {
  margin-bottom: 1.05rem !important;
}

.quenor-accord-page .expedition-detail-copy .expedition-detail-paragraph,
.quenor-accord-page .expedition-detail-copy p:not(.eyebrow) {
  font-family: inherit !important;
  font-size: clamp(1.02rem, 1.22vw, 1.12rem) !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  color: rgba(238, 248, 255, 0.88) !important;
  margin: 0 0 1.15rem !important;
  max-width: 960px !important;
}

.quenor-accord-page .expedition-detail-copy .project-placeholder-actions {
  margin-top: 1.45rem !important;
}

.catalogue-note-panel .project-placeholder-actions {
  margin-top: 1.15rem !important;
}


/* v9.85 — restore future Solo filtering and lock catalogue artwork frames.
   All Games, Alberenar Adventure, and Resonance Expedition cards now use the same visible artwork tray.
   This avoids portrait, square, landscape, and banner sources displaying at different heights. */
.game-card-grid .game-card > img,
.catalogue-page .game-card-grid .game-card > img,
.adventure-card-grid .game-card > img,
.expedition-card-grid .game-card > img,
.games-page .game-card--alberenar-adventures > img,
.games-page .game-card--resonance-expeditions > img {
  width: 100% !important;
  height: clamp(212px, 18vw, 260px) !important;
  min-height: clamp(212px, 18vw, 260px) !important;
  max-height: clamp(212px, 18vw, 260px) !important;
  aspect-ratio: auto !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #050505 !important;
}

/* Keep key supplied banner artwork centred when cropped into the shared catalogue tray. */
.games-page .game-card--resonance-expeditions > img,
.expedition-card-grid #quenor-accord-expedition > img {
  object-position: center center !important;
}

/* Future-proof filter empty states without adding another catalogue card. */
.catalogue-empty-message {
  display: none !important;
  width: min(860px, 100%) !important;
  margin: 1rem auto 0 !important;
  padding: 1rem 1.25rem !important;
  border: 1px solid rgba(var(--game-accent-rgb,232,93,4),0.24) !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,0.34) !important;
  color: var(--text-muted) !important;
  text-align: center !important;
}
.catalogue-empty-message.is-visible {
  display: block !important;
}

/* Quenor Accord detail-page buttons need more breathing room below the body copy. */
.quenor-accord-page .expedition-detail-copy .project-placeholder-actions {
  margin-top: clamp(2rem, 3vw, 2.75rem) !important;
  gap: 0.9rem !important;
}

@media (max-width: 760px) {
  .game-card-grid .game-card > img,
  .catalogue-page .game-card-grid .game-card > img,
  .adventure-card-grid .game-card > img,
  .expedition-card-grid .game-card > img,
  .games-page .game-card--alberenar-adventures > img,
  .games-page .game-card--resonance-expeditions > img {
    height: clamp(190px, 56vw, 245px) !important;
    min-height: clamp(190px, 56vw, 245px) !important;
    max-height: clamp(190px, 56vw, 245px) !important;
  }
}

/* --------------------------------------------------------------------------
   v9.86 — restore proportional catalogue art frames and add Quenor button air.
   The previous fixed-height tray made the Games catalogue and the two new
   lead-off catalogue pages feel visually wrong.  This restores the site-wide
   game-card artwork frame to the proportional frame used by the established
   Games catalogue, then applies the same frame to Resonance Expeditions and
   Alberenar Adventures without forcing a fixed pixel height.
   -------------------------------------------------------------------------- */
.games-page .game-card-grid .game-card > img,
.catalogue-page .game-card-grid .game-card > img,
.alberenar-adventures-page .adventure-card-grid .game-card > img,
.resonance-expeditions-page .expedition-card-grid .game-card > img,
.game-card-grid .game-card--alberenar-adventures > img,
.game-card-grid .game-card--resonance-expeditions > img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 10 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.45rem !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--game-accent-rgb,232,93,4),0.12), transparent 38%),
    #050505 !important;
}

/* Keep catalogue cards aligned without changing the image proportions. */
.expedition-card-grid,
.adventure-card-grid {
  align-items: stretch !important;
}
.expedition-card-grid .game-card,
.adventure-card-grid .game-card {
  display: flex !important;
  flex-direction: column !important;
}
.expedition-card-grid .game-card-body,
.adventure-card-grid .game-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.expedition-card-grid .game-card-body .btn,
.adventure-card-grid .game-card-body .btn,
.expedition-card-grid .game-card-body .btn-disabled,
.adventure-card-grid .game-card-body .btn-disabled {
  margin-top: auto !important;
  align-self: flex-start !important;
}

/* The Quenor page actions now breathe clearly below the copy in both the hero
   and the detail panel. */
.quenor-accord-page .page-hero-content .hero-actions {
  margin-top: clamp(2rem, 4vw, 3.25rem) !important;
  padding-top: 0.45rem !important;
}
.quenor-accord-page .expedition-detail-copy .project-placeholder-actions {
  margin-top: clamp(3.4rem, 5vw, 4.8rem) !important;
  padding-top: 0.85rem !important;
  gap: 1rem !important;
}
.quenor-accord-page .expedition-detail-copy .expedition-detail-paragraph:last-of-type {
  margin-bottom: 0 !important;
}

@media (max-width: 760px) {
  .games-page .game-card-grid .game-card > img,
  .catalogue-page .game-card-grid .game-card > img,
  .alberenar-adventures-page .adventure-card-grid .game-card > img,
  .resonance-expeditions-page .expedition-card-grid .game-card > img,
  .game-card-grid .game-card--alberenar-adventures > img,
  .game-card-grid .game-card--resonance-expeditions > img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
  }
  .quenor-accord-page .page-hero-content .hero-actions {
    margin-top: 2rem !important;
  }
  .quenor-accord-page .expedition-detail-copy .project-placeholder-actions {
    margin-top: 3rem !important;
    padding-top: 0.75rem !important;
  }
}

/* --------------------------------------------------------------------------
   v9.87 — catalogue block artwork frame relock.
   The Games catalogue standard is the portrait/card artwork treatment used by
   Alberenar, Wounded Roads, and the other core project tiles.  This final pass
   deliberately overrides the earlier 16:10 proportional tray so every Games,
   Adventure, Expedition, and Coming Soon catalogue block uses the same visible
   2:3 artwork frame.  Wide banners remain banners; block artwork now behaves as
   block artwork again.
   -------------------------------------------------------------------------- */
.games-page .game-card-grid .game-card > img,
.catalogue-page .game-card-grid .game-card > img,
.alberenar-adventures-page .adventure-card-grid .game-card > img,
.resonance-expeditions-page .expedition-card-grid .game-card > img,
.coming-soon-page .future-project-grid .future-project-card > img,
.game-card-grid .game-card--alberenar-adventures > img,
.game-card-grid .game-card--resonance-expeditions > img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #050505 !important;
}

/* Preserve the dedicated card images for expedition-range blocks instead of
   allowing wide page banners to masquerade as catalogue art. */
.games-page .game-card--resonance-expeditions > img,
.resonance-expeditions-page #quenor-accord-expedition > img,
.coming-soon-page .future-project-card--quenor > img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Keep catalogue cards structurally aligned after restoring the taller artwork
   frame. */
.games-page .game-card-grid,
.catalogue-page .game-card-grid,
.adventure-card-grid,
.expedition-card-grid,
.coming-soon-page .future-project-grid {
  align-items: stretch !important;
}
.games-page .game-card,
.catalogue-page .game-card,
.adventure-card-grid .game-card,
.expedition-card-grid .game-card,
.coming-soon-page .future-project-card {
  display: flex !important;
  flex-direction: column !important;
}
.games-page .game-card-body,
.catalogue-page .game-card-body,
.adventure-card-grid .game-card-body,
.expedition-card-grid .game-card-body,
.coming-soon-page .future-project-card .game-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.games-page .game-card-body .btn,
.catalogue-page .game-card-body .btn,
.adventure-card-grid .game-card-body .btn,
.expedition-card-grid .game-card-body .btn,
.coming-soon-page .future-project-card .game-card-body .btn,
.adventure-card-grid .game-card-body .btn-disabled,
.expedition-card-grid .game-card-body .btn-disabled {
  margin-top: auto !important;
  align-self: flex-start !important;
}

@media (max-width: 760px) {
  .games-page .game-card-grid .game-card > img,
  .catalogue-page .game-card-grid .game-card > img,
  .alberenar-adventures-page .adventure-card-grid .game-card > img,
  .resonance-expeditions-page .expedition-card-grid .game-card > img,
  .coming-soon-page .future-project-grid .future-project-card > img,
  .game-card-grid .game-card--alberenar-adventures > img,
  .game-card-grid .game-card--resonance-expeditions > img {
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* --------------------------------------------------------------------------
   v9.88 — catalogue block artwork display-size correction.
   The block artwork should match the fixed portrait thumbnail size shown in
   the supplied Games-page reference, not expand to fill the whole card width.
   This applies the same visible frame to Games, Alberenar Adventures,
   Resonance Expeditions, and Coming Soon catalogue blocks.
   -------------------------------------------------------------------------- */
.games-page .game-card-grid .game-card > img,
.catalogue-page .game-card-grid .game-card > img,
.alberenar-adventures-page .adventure-card-grid .game-card > img,
.resonance-expeditions-page .expedition-card-grid .game-card > img,
.coming-soon-page .future-project-grid .future-project-card > img,
.game-card-grid .game-card--alberenar-adventures > img,
.game-card-grid .game-card--resonance-expeditions > img,
.game-card-grid .game-card--pactsmiths > img,
.game-card-grid .game-card--no-safe-road > img,
.game-card-grid .game-card--soundtracks > img,
.game-card-grid .game-card--coming-soon > img {
  box-sizing: border-box !important;
  width: clamp(188px, 10.55vw, 198px) !important;
  max-width: calc(100% - 3.7rem) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  display: block !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: clamp(1.45rem, 2.1vw, 1.65rem) 0 0 clamp(1.65rem, 2.2vw, 1.9rem) !important;
  border-radius: 16px !important;
  background: #050505 !important;
  box-shadow: 0 0 0 1px rgba(var(--game-accent-rgb,232,93,4),0.20), 0 16px 34px rgba(0,0,0,0.38) !important;
}

/* Keep the body layout consistent after the artwork is returned to the fixed
   block-image size. */
.games-page .game-card,
.catalogue-page .game-card,
.adventure-card-grid .game-card,
.expedition-card-grid .game-card,
.coming-soon-page .future-project-card {
  display: flex !important;
  flex-direction: column !important;
}

.games-page .game-card-body,
.catalogue-page .game-card-body,
.adventure-card-grid .game-card-body,
.expedition-card-grid .game-card-body,
.coming-soon-page .future-project-card .game-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.games-page .game-card-body .btn,
.catalogue-page .game-card-body .btn,
.adventure-card-grid .game-card-body .btn,
.expedition-card-grid .game-card-body .btn,
.coming-soon-page .future-project-card .game-card-body .btn,
.adventure-card-grid .game-card-body .btn-disabled,
.expedition-card-grid .game-card-body .btn-disabled {
  margin-top: auto !important;
  align-self: flex-start !important;
}

@media (max-width: 760px) {
  .games-page .game-card-grid .game-card > img,
  .catalogue-page .game-card-grid .game-card > img,
  .alberenar-adventures-page .adventure-card-grid .game-card > img,
  .resonance-expeditions-page .expedition-card-grid .game-card > img,
  .coming-soon-page .future-project-grid .future-project-card > img,
  .game-card-grid .game-card--alberenar-adventures > img,
  .game-card-grid .game-card--resonance-expeditions > img,
  .game-card-grid .game-card--pactsmiths > img,
  .game-card-grid .game-card--no-safe-road > img,
  .game-card-grid .game-card--soundtracks > img,
  .game-card-grid .game-card--coming-soon > img {
    width: min(198px, calc(100% - 2rem)) !important;
    max-width: calc(100% - 2rem) !important;
    margin: 1.25rem auto 0 !important;
  }
}


/* ==========================================================
   v9.89 targeted requested fixes
   Scope: background alignment, contact mobile hero, page jump
   dropdowns, path buttons, race/species buttons, newsletter CTAs.
   ========================================================== */

/* Home hero art: lower the layered background so the lightning and hands
   are not hidden by the navigation/header mask on large screens or mobile. */
.home-page .home-hero-layered-art,
body:not(.home-page) .home-hero-layered-art {
  top: clamp(58px, 5vh, 88px) !important;
}
.home-page .home-hero-layered-art::after {
  transform: translateY(0) !important;
}

@media (min-width: 1600px) {
  .home-page .home-hero-layered-art {
    top: clamp(70px, 5.6vh, 110px) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .home-page .home-hero-layered-art {
    top: clamp(42px, 7vh, 62px) !important;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  .home-page .home-hero-layered-art {
    top: clamp(50px, 7.5vh, 72px) !important;
  }
}

/* Mobile contact hero: keep the contact copy from sitting too high over the artwork. */
@media (max-width: 760px) {
  .contact-page .page-hero,
  .contact-page .page-hero--contact {
    align-items: flex-end !important;
    padding-top: calc(var(--nav-height, 76px) + 3rem) !important;
    padding-bottom: clamp(3.75rem, 10vh, 5.5rem) !important;
  }

  .contact-page .page-hero .page-hero-content,
  .contact-page .page-hero--contact .page-hero-content {
    transform: translateY(34px) !important;
    margin-top: auto !important;
  }
}

/* Compact section dropdowns in page header banners. */
.hero-section-jump {
  width: min(360px, 100%);
  margin: clamp(1rem, 2vw, 1.35rem) auto 0;
  position: relative;
  z-index: 8;
  color: var(--text, #f3f1ec);
  text-align: left;
}

.hero-section-jump summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  min-height: 2.65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(220, 150, 78, .72);
  background: linear-gradient(135deg, rgba(9, 7, 6, .9), rgba(34, 18, 10, .82));
  box-shadow: 0 0 16px rgba(255, 118, 22, .22), inset 0 0 16px rgba(255, 184, 92, .08);
  color: #f7efe4;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}

.hero-section-jump summary::-webkit-details-marker { display: none; }
.hero-section-jump summary::after {
  content: '▾';
  font-size: .85rem;
  color: #ffb86b;
  transition: transform .2s ease;
}
.hero-section-jump[open] summary::after { transform: rotate(180deg); }

.hero-section-jump-list {
  display: grid;
  gap: .35rem;
  margin-top: .55rem;
  padding: .65rem;
  border-radius: 18px;
  border: 1px solid rgba(220, 150, 78, .45);
  background: rgba(9, 7, 6, .94);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 118, 22, .12);
  max-height: min(52vh, 420px);
  overflow: auto;
}

.hero-section-jump-list a {
  color: #e8e0d7;
  text-decoration: none;
  border-radius: 12px;
  padding: .58rem .72rem;
  font-weight: 700;
  line-height: 1.25;
  background: rgba(255, 255, 255, .035);
  border: 1px solid transparent;
}
.hero-section-jump-list a:hover,
.hero-section-jump-list a:focus-visible {
  color: #fff7ec;
  border-color: rgba(255, 184, 92, .55);
  background: rgba(255, 118, 22, .12);
  outline: none;
}

/* Where-to-begin cards: make Alberenar and Resonance path buttons use the
   same centred glowing pill treatment as the Games page route buttons. */
.alberenar-page .pillar-card,
.resonance-page .pillar-card {
  display: flex;
  flex-direction: column;
}

.alberenar-page .pillar-card { --path-accent-rgb: 155, 92, 255; }
.resonance-page .pillar-card { --path-accent-rgb: 82, 220, 255; }

.alberenar-page .pillar-card .pillar-more,
.resonance-page .pillar-card .pillar-more {
  margin-top: auto !important;
  padding-top: 1.05rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.alberenar-page .pillar-card .btn,
.resonance-page .pillar-card .btn,
.alberenar-page .deep-link-button,
.resonance-page .deep-link-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 146px;
  min-height: 2.65rem;
  padding: .72rem 1.18rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--path-accent-rgb), .78) !important;
  background: linear-gradient(135deg, rgba(6, 5, 9, .94), rgba(var(--path-accent-rgb), .18)) !important;
  color: #f8f4ee !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 0 18px rgba(var(--path-accent-rgb), .26), inset 0 0 14px rgba(255, 255, 255, .055) !important;
}

.alberenar-page .pillar-card .btn:hover,
.alberenar-page .pillar-card .btn:focus-visible,
.resonance-page .pillar-card .btn:hover,
.resonance-page .pillar-card .btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(var(--path-accent-rgb), .42), inset 0 0 16px rgba(255, 255, 255, .09) !important;
  outline: none;
}

/* Race/species archive cards: replace hidden overlay-only viewing with a real
   aligned bottom button on every card. */
.alberenar-page .race-library-card,
.resonance-page .race-library-card {
  display: flex !important;
  flex-direction: column !important;
}

.alberenar-page .race-library-card .race-image-slot--image::after,
.resonance-page .race-library-card .race-image-slot--image::after {
  content: none !important;
  display: none !important;
}

.alberenar-page .race-view-button,
.resonance-page .race-view-button {
  align-self: center;
  margin: auto auto 0 !important;
  min-width: 132px;
  min-height: 2.5rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--path-accent-rgb, 155, 92, 255), .74) !important;
  background: linear-gradient(135deg, rgba(7, 6, 9, .92), rgba(var(--path-accent-rgb, 155, 92, 255), .18)) !important;
  color: #f8f4ee !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 16px rgba(var(--path-accent-rgb, 155, 92, 255), .24), inset 0 0 12px rgba(255,255,255,.05) !important;
}

.resonance-page .race-view-button { --path-accent-rgb: 82, 220, 255; }
.alberenar-page .race-view-button { --path-accent-rgb: 155, 92, 255; }

.alberenar-page .race-view-button:not(:disabled):hover,
.alberenar-page .race-view-button:not(:disabled):focus-visible,
.resonance-page .race-view-button:not(:disabled):hover,
.resonance-page .race-view-button:not(:disabled):focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(var(--path-accent-rgb), .42), inset 0 0 14px rgba(255,255,255,.08) !important;
  outline: none;
}

.alberenar-page .race-view-button:disabled,
.resonance-page .race-view-button:disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.25);
}

/* Alberenar/Resonance bottom notification CTA: match the home page newsletter treatment. */
.alberenar-page .newsletter-form,
.resonance-page .newsletter-form {
  justify-content: center;
  align-items: center;
}

.alberenar-page .newsletter-form input,
.resonance-page .newsletter-form input {
  min-height: 3rem;
  border-radius: 999px;
  border: 1px solid rgba(220, 150, 78, .45);
  background: rgba(5, 5, 7, .72);
  color: #f5efe7;
  box-shadow: inset 0 0 14px rgba(0,0,0,.42);
}

.alberenar-page .newsletter-form .form-action,
.resonance-page .newsletter-form .form-action,
.alberenar-page .newsletter-form .btn,
.resonance-page .newsletter-form .btn {
  min-height: 3rem;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 168, 88, .84) !important;
  background: linear-gradient(135deg, rgba(255, 128, 28, .98), rgba(158, 58, 8, .95)) !important;
  color: #fff8ef !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 18px rgba(255, 118, 22, .35), inset 0 0 12px rgba(255,255,255,.12) !important;
}

.alberenar-page .newsletter-form .form-action:hover,
.resonance-page .newsletter-form .form-action:hover,
.alberenar-page .newsletter-form .btn:hover,
.resonance-page .newsletter-form .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(255, 118, 22, .48), inset 0 0 15px rgba(255,255,255,.16) !important;
}

@media (max-width: 700px) {
  .hero-section-jump {
    width: min(92vw, 360px);
  }
  .alberenar-page .race-view-button,
  .resonance-page .race-view-button {
    width: min(100%, 190px);
  }
}

/* v9.89b: same glowing path-button treatment for the Explore the World/Where to Begin service cards. */
.alberenar-page .service-card,
.resonance-page .service-card {
  display: flex;
  flex-direction: column;
}
.alberenar-page .service-card { --path-accent-rgb: 155, 92, 255; }
.resonance-page .service-card { --path-accent-rgb: 82, 220, 255; }
.alberenar-page .service-card .pillar-more,
.resonance-page .service-card .pillar-more {
  margin-top: auto !important;
  padding-top: 1.05rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.alberenar-page .service-card .btn,
.resonance-page .service-card .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 146px;
  min-height: 2.65rem;
  padding: .72rem 1.18rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--path-accent-rgb), .78) !important;
  background: linear-gradient(135deg, rgba(6, 5, 9, .94), rgba(var(--path-accent-rgb), .18)) !important;
  color: #f8f4ee !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 0 18px rgba(var(--path-accent-rgb), .26), inset 0 0 14px rgba(255, 255, 255, .055) !important;
}
.alberenar-page .service-card .btn:hover,
.alberenar-page .service-card .btn:focus-visible,
.resonance-page .service-card .btn:hover,
.resonance-page .service-card .btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(var(--path-accent-rgb), .42), inset 0 0 16px rgba(255, 255, 255, .09) !important;
  outline: none;
}

/* --------------------------------------------------------------------------
   v9.90 — Targeted correction: navigation dropdowns, guide buttons, race cards,
   portrait hover cue, and Alberenar/Resonance newsletter CTAs.
   -------------------------------------------------------------------------- */

/* Remove the previous page-section control from hero/banner images. Section
   navigation now belongs in the top navigation dropdowns. */
.hero-section-jump {
  display: none !important;
}

/* Top navigation dropdowns for the main site tabs. */
.navbar ul li.nav-dropdown {
  position: relative !important;
}

.navbar ul li.nav-dropdown > .nav-dropdown-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
}

.navbar ul li.nav-dropdown > .nav-dropdown-trigger::after {
  content: "▾";
  font-size: 0.66rem;
  line-height: 1;
  opacity: 0.82;
  color: rgba(255, 186, 99, 0.92);
  transform: translateY(-1px);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.72rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  max-width: 280px;
  display: grid;
  gap: 0.24rem;
  padding: 0.55rem;
  border-radius: 16px;
  border: 1px solid rgba(232, 93, 4, 0.36);
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 186, 8, 0.10), transparent 34%),
    linear-gradient(145deg, rgba(12, 9, 7, 0.98), rgba(4, 4, 5, 0.98));
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.58),
    0 0 22px rgba(232, 93, 4, 0.14),
    inset 0 0 18px rgba(255, 186, 8, 0.035);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 2500;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.navbar ul li.nav-dropdown:hover > .nav-dropdown-menu,
.navbar ul li.nav-dropdown:focus-within > .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a,
.nav-dropdown-menu a:visited {
  display: block !important;
  padding: 0.58rem 0.7rem !important;
  border-radius: 11px !important;
  color: rgba(247, 241, 234, 0.90) !important;
  background: rgba(255, 255, 255, 0.028) !important;
  border: 1px solid transparent !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  color: #fff7ec !important;
  border-color: rgba(255, 186, 99, 0.50) !important;
  background: rgba(232, 93, 4, 0.15) !important;
  outline: none !important;
}

@media (max-width: 980px) {
  .navbar.expanded ul li.nav-dropdown {
    width: 100%;
  }

  .navbar.expanded .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    display: grid !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin-top: 0.45rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.30) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.26) !important;
  }

  .navbar.expanded .nav-dropdown-menu a {
    font-size: 0.84rem !important;
    padding: 0.55rem 0.65rem !important;
  }
}

/* Alberenar and Resonance page-guide buttons now match the Home page
   Choose Your Route button treatment: dark glass, warm outline, soft glow. */
.alberenar-page .game-page-guide .page-guide-nav .page-guide-button,
.alberenar-page .game-page-guide .page-guide-nav a,
.resonance-page .game-page-guide .page-guide-nav .page-guide-button,
.resonance-page .game-page-guide .page-guide-nav a {
  --game-accent-rgb: var(--ifs-button-gold-rgb, 232, 168, 58) !important;
  --section-accent-rgb: var(--ifs-button-gold-rgb, 232, 168, 58) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 138px !important;
  min-height: 2.45rem !important;
  padding: 0.62rem 1.05rem !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.38) !important;
  border: 1px solid rgba(var(--ifs-button-gold-rgb, 232, 168, 58), 0.78) !important;
  box-shadow: 0 0 18px rgba(var(--ifs-button-gold-rgb, 232, 168, 58), 0.14) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
}

.alberenar-page .game-page-guide .page-guide-nav .page-guide-button:hover,
.alberenar-page .game-page-guide .page-guide-nav .page-guide-button:focus-visible,
.alberenar-page .game-page-guide .page-guide-nav a:hover,
.alberenar-page .game-page-guide .page-guide-nav a:focus-visible,
.resonance-page .game-page-guide .page-guide-nav .page-guide-button:hover,
.resonance-page .game-page-guide .page-guide-nav .page-guide-button:focus-visible,
.resonance-page .game-page-guide .page-guide-nav a:hover,
.resonance-page .game-page-guide .page-guide-nav a:focus-visible {
  color: #fff !important;
  background: rgba(var(--ifs-button-gold-rgb, 232, 168, 58), 0.20) !important;
  border-color: rgba(var(--ifs-button-gold-rgb, 232, 168, 58), 0.92) !important;
  box-shadow:
    0 10px 28px rgba(var(--ifs-button-gold-rgb, 232, 168, 58), 0.28),
    0 8px 20px rgba(0, 0, 0, 0.52) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* Race/species buttons: keep them aligned, but lift them away from the bottom
   edge of the card so they do not appear to touch the frame. */
.alberenar-page .race-library-card,
.resonance-page .race-library-card {
  display: flex !important;
  flex-direction: column !important;
}

.alberenar-page .race-view-button,
.resonance-page .race-view-button,
.alberenar-page .species-view-button,
.resonance-page .species-view-button {
  align-self: center !important;
  margin-top: auto !important;
  margin-right: auto !important;
  margin-left: auto !important;
  margin-bottom: clamp(0.9rem, 1.8vw, 1.25rem) !important;
}

.race-library-section--alberenar .race-library-card--has-image p,
.race-library-section--resonance .race-library-card p {
  margin-bottom: 1rem !important;
}

/* Restore the hover affordance on completed Alberenar portrait cards. */
.alberenar-page .race-library-card--has-image .race-image-slot--image::after {
  content: "Enlarge Image" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 0.8rem !important;
  bottom: 0.8rem !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 186, 8, 0.42) !important;
  background: rgba(0, 0, 0, 0.62) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.22s ease !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.alberenar-page .race-library-card--has-image:hover .race-image-slot--image::after,
.alberenar-page .race-library-card--has-image:focus-within .race-image-slot--image::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
  border-color: rgba(255, 186, 8, 0.78) !important;
}

/* Alberenar/Resonance lower CTA now follows the Home page Join the Forge form,
   including the framed form body, white input, and standard Forge button. */
.alberenar-page .call-to-action .newsletter-form,
.resonance-page .call-to-action .newsletter-form {
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)) !important;
  border: 1px solid rgba(255,186,8,0.18) !important;
  border-radius: 20px !important;
  padding: 1rem !important;
  box-shadow: 0 16px 38px rgba(0,0,0,0.32), inset 0 0 30px rgba(255,186,8,0.03) !important;
  justify-content: center !important;
  align-items: center !important;
}

.alberenar-page .call-to-action .newsletter-form input,
.resonance-page .call-to-action .newsletter-form input {
  min-width: min(100%, 410px) !important;
  min-height: 0 !important;
  background: rgba(255,255,255,0.94) !important;
  color: #111111 !important;
  border: 1px solid rgba(255,186,8,0.28) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
  padding: 0.85rem 1rem !important;
}

.alberenar-page .call-to-action .newsletter-form input::placeholder,
.resonance-page .call-to-action .newsletter-form input::placeholder {
  color: #5a5a5a !important;
  opacity: 1 !important;
}

.alberenar-page .call-to-action .newsletter-form input:focus,
.resonance-page .call-to-action .newsletter-form input:focus {
  outline: 2px solid rgba(232,93,4,0.34) !important;
  border-color: rgba(232,93,4,0.56) !important;
  background: #ffffff !important;
}

.alberenar-page .call-to-action .newsletter-form .form-action,
.resonance-page .call-to-action .newsletter-form .form-action,
.alberenar-page .call-to-action .newsletter-form .btn,
.resonance-page .call-to-action .newsletter-form .btn {
  min-height: 0 !important;
  min-width: 150px !important;
  white-space: nowrap !important;
  padding: 0.75rem 2rem !important;
  border-radius: 50px !important;
  background: var(--primary-color) !important;
  color: var(--bg-dark) !important;
  border: none !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(232, 93, 4, 0.16) !important;
}

.alberenar-page .call-to-action .newsletter-form .form-action:hover,
.resonance-page .call-to-action .newsletter-form .form-action:hover,
.alberenar-page .call-to-action .newsletter-form .btn:hover,
.resonance-page .call-to-action .newsletter-form .btn:hover {
  background: var(--secondary-color) !important;
  color: var(--bg-dark) !important;
  box-shadow: 0 6px 20px rgba(255, 186, 8, 0.23) !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   v9.91 — Navigation alignment and hover-stability correction.
   Keeps the v9.90 dropdown structure, but fixes two visible issues:
   1. Regular tabs such as Home and Contact now share the same vertical rhythm
      as dropdown tabs.
   2. Dropdown menus no longer vanish while moving the cursor from the tab down
      into the menu.
   -------------------------------------------------------------------------- */
.navbar ul {
  align-items: center !important;
}

.navbar ul > li {
  display: flex !important;
  align-items: center !important;
  min-height: 2.6rem !important;
}

.navbar ul > li > a,
.navbar ul > li > a:visited,
.navbar ul li.nav-dropdown > .nav-dropdown-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.35rem !important;
  line-height: 1 !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  vertical-align: middle !important;
}

.navbar ul li.nav-dropdown > .nav-dropdown-trigger::after {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0.12rem !important;
  transform: translateY(0) !important;
}

/* Bridge the small hover gap between the top navigation item and the menu. */
.navbar ul li.nav-dropdown::after {
  content: "" !important;
  position: absolute !important;
  left: -0.75rem !important;
  right: -0.75rem !important;
  top: 100% !important;
  height: 1rem !important;
  display: block !important;
  z-index: 2499 !important;
  pointer-events: auto !important;
}

.nav-dropdown-menu {
  top: calc(100% + 0.35rem) !important;
  z-index: 2501 !important;
}

.navbar ul li.nav-dropdown:hover > .nav-dropdown-menu,
.navbar ul li.nav-dropdown:focus-within > .nav-dropdown-menu,
.navbar ul li.nav-dropdown > .nav-dropdown-menu:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 980px) {
  .navbar.expanded ul > li {
    display: block !important;
    min-height: 0 !important;
  }

  .navbar.expanded ul > li > a,
  .navbar.expanded ul li.nav-dropdown > .nav-dropdown-trigger {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .navbar.expanded ul li.nav-dropdown::after {
    display: none !important;
  }
}

/* v9.93: Header dropdown anchors should land below the fixed navigation bar. */
#about-studio,
#forge-mark,
#forge-generators,
#vtt-samples {
  scroll-margin-top: 96px;
}


/* --------------------------------------------------------------------------
   v9.94 — Large-screen home hero top lock and dropdown anchor targets
   -------------------------------------------------------------------------- */

/* On wide desktop displays the home hero artwork should begin at the top of
   the viewport behind the fixed navigation, not below a black spacer. */
@media (min-width: 1360px) {
  .home-page .hero,
  .home-page .hero--studio,
  .home-page .hero--home-refined {
    margin-top: 0 !important;
    min-height: 100svh !important;
    padding-top: var(--nav-height) !important;
  }

  .home-page .home-hero-layered-art {
    top: 0 !important;
  }
}

/* All dropdown section targets need enough offset for the fixed navigation. */
[id],
.anchor-target {
  scroll-margin-top: calc(var(--nav-height) + 28px) !important;
}

.anchor-target {
  display: block;
  position: relative;
  height: 0;
  width: 0;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   v9.95 — Home globe nudge and regular Lore/Downloads card grids
   -------------------------------------------------------------------------- */

/* Large desktop: move only the rotating globe/logo layer up a fraction so the
   left-hand lightning line remains readable without disturbing mobile/tablet
   hero positioning or the locked top edge of the base artwork. */
@media (min-width: 1360px) {
  .home-page .home-hero-layered-art__globe,
  .home-page .home-hero-layered-art__overlay {
    top: 15.05% !important;
  }
}

/* Anchor markers inserted for dropdown navigation should never become visible
   grid items. Keeping them inside the relevant card preserves fragment-link
   landing points while preventing empty cells that make the Lore, Downloads and
   Forum grids look scattered. */
.lore-page .archive-entry > .anchor-target,
.downloads-page .download-card > .anchor-target,
.forum-page .forum-card > .anchor-target {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.lore-page .archive-entry,
.downloads-page .download-card,
.forum-page .forum-card {
  position: relative !important;
}

/* Keep public catalogue pages as orderly catalogue grids rather than a broken
   masonry/scattered presentation. */
.lore-page .archive-list,
.downloads-page .download-grid {
  grid-auto-flow: row !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.downloads-page .download-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)) !important;
  gap: 1.35rem !important;
}

.downloads-page .download-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.downloads-page .download-card p:not(.card-kicker) {
  flex: 1 1 auto !important;
}

.downloads-page .download-card .download-actions {
  margin-top: auto !important;
}

/* --------------------------------------------------------------------------
   v9.96 — Final large-screen homepage globe lift
   --------------------------------------------------------------------------
   Targeted desktop-only adjustment. Raises the rotating globe/logo layer a
   small additional fraction so the left lightning remains visible on large PC
   screens, without altering tablet/mobile positioning or page content.
   -------------------------------------------------------------------------- */
@media (min-width: 1360px) {
  .home-page .home-hero-layered-art__globe,
  .home-page .home-hero-layered-art__overlay {
    top: 13.95% !important;
  }
}

/* --------------------------------------------------------------------------
   v9.97 — Wide-banner header preservation and Resonance catalogue film reset
   --------------------------------------------------------------------------
   Targeted correction for supplied wide page banners. These rules stop the
   banner art from being cropped at the top or bottom, keep the image clear of
   the fixed navigation bar, and allow the lower edge to feather more naturally
   into the site wallpaper.
   -------------------------------------------------------------------------- */
:root {
  --ifs-wide-banner-ratio: 0.3998991427;
  --ifs-wide-banner-max-width: 1983px;
  --ifs-wheel-banner-ratio: 0.4241952233;
  --ifs-wheel-banner-max-width: 1926px;
}

/* The main Alberenar page uses the older .hero-banner header rather than the
   newer .page-hero system, so it needs its own wide-safe treatment. */
.alberenar-page .hero-banner {
  height: max(520px, calc(min(100vw, var(--ifs-wide-banner-max-width)) * var(--ifs-wide-banner-ratio) + var(--nav-height))) !important;
  min-height: max(520px, calc(min(100vw, var(--ifs-wide-banner-max-width)) * var(--ifs-wide-banner-ratio) + var(--nav-height))) !important;
  padding: var(--nav-height) 1rem 0 !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.12) 0%,
      rgba(0,0,0,0.02) 44%,
      rgba(13,13,13,0.05) 70%,
      rgba(13,13,13,0.22) 100%),
    url('../images/alberenar_banner.webp') !important;
  background-size: 100% 100%, auto calc(100% - var(--nav-height)) !important;
  background-position: center center, center bottom !important;
  background-repeat: no-repeat, no-repeat !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
}

.alberenar-page .hero-banner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(210px, 26svh, 380px) !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom,
    rgba(13,13,13,0) 0%,
    rgba(13,13,13,0.02) 34%,
    rgba(13,13,13,0.16) 62%,
    rgba(13,13,13,0.58) 86%,
    rgba(13,13,13,0.98) 100%) !important;
  z-index: 1 !important;
}

.alberenar-page .hero-banner .banner-content {
  position: relative !important;
  z-index: 2 !important;
}

.alberenar-page .hero-banner + section {
  margin-top: -1px !important;
  background: url('../images/background_texture.webp') center top / 1024px 1024px repeat !important;
}

/* Shared wide-safe treatment for the affected 1983 x 793 page headers. */
.alberenar-adventures-page .page-hero--alberenar-adventures,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.coming-soon-page .page-hero--coming-soon,
.resonance-expeditions-page .page-hero--resonance-expeditions,
.global-mandate-page .page-hero--global-mandate {
  min-height: max(520px, calc(min(100vw, var(--ifs-wide-banner-max-width)) * var(--ifs-wide-banner-ratio) + var(--nav-height))) !important;
  height: max(520px, calc(min(100vw, var(--ifs-wide-banner-max-width)) * var(--ifs-wide-banner-ratio) + var(--nav-height))) !important;
  max-height: none !important;
  padding: var(--nav-height) 1rem 0 !important;
  background: #0d0d0d url('../images/background_texture.webp') center top / 1024px 1024px repeat !important;
  overflow: hidden !important;
  align-items: center !important;
}

/* Epic Fantasy Weave uses a slightly different supplied banner ratio. */
.wheel-of-time-page .page-hero--wheel-of-time {
  min-height: max(540px, calc(min(100vw, var(--ifs-wheel-banner-max-width)) * var(--ifs-wheel-banner-ratio) + var(--nav-height))) !important;
  height: max(540px, calc(min(100vw, var(--ifs-wheel-banner-max-width)) * var(--ifs-wheel-banner-ratio) + var(--nav-height))) !important;
  max-height: none !important;
  padding: var(--nav-height) 1rem 0 !important;
  background: #0d0d0d url('../images/background_texture.webp') center top / 1024px 1024px repeat !important;
  overflow: hidden !important;
  align-items: center !important;
}

.alberenar-adventures-page .page-hero--alberenar-adventures::before,
.no-safe-road-page .page-hero--no-safe-road::before,
.soundtracks-page .page-hero--soundtracks::before,
.coming-soon-page .page-hero--coming-soon::before,
.resonance-expeditions-page .page-hero--resonance-expeditions::before,
.global-mandate-page .page-hero--global-mandate::before,
.wheel-of-time-page .page-hero--wheel-of-time::before {
  top: var(--nav-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: center center, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  background-color: #0d0d0d !important;
}

.alberenar-adventures-page .page-hero--alberenar-adventures::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.02) 42%, rgba(13,13,13,0.06) 72%, rgba(13,13,13,0.22) 100%),
    url('../images/alberenar_banner.webp') !important;
}

.no-safe-road-page .page-hero--no-safe-road::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.01) 48%, rgba(13,13,13,0.05) 75%, rgba(13,13,13,0.18) 100%),
    url('../images/no-safe-road-banner.webp') !important;
}

.soundtracks-page .page-hero--soundtracks::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.01) 48%, rgba(13,13,13,0.04) 76%, rgba(13,13,13,0.16) 100%),
    url('../images/soundtracks-banner.webp') !important;
}

.coming-soon-page .page-hero--coming-soon::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.01) 48%, rgba(13,13,13,0.05) 76%, rgba(13,13,13,0.18) 100%),
    url('../images/coming-soon-banner.webp') !important;
}

.resonance-expeditions-page .page-hero--resonance-expeditions::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.01) 48%, rgba(5,10,18,0.06) 76%, rgba(5,10,18,0.20) 100%),
    url('../images/resonance/resonance-expeditions-banner.webp') !important;
}

.global-mandate-page .page-hero--global-mandate::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.01) 48%, rgba(13,13,13,0.05) 76%, rgba(13,13,13,0.18) 100%),
    url('../images/global-mandate-banner.webp') !important;
}

.wheel-of-time-page .page-hero--wheel-of-time::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.01) 48%, rgba(13,13,13,0.05) 76%, rgba(13,13,13,0.18) 100%),
    url('../images/wheel-of-time-banner.webp') !important;
}

.alberenar-adventures-page .page-hero--alberenar-adventures::after,
.no-safe-road-page .page-hero--no-safe-road::after,
.soundtracks-page .page-hero--soundtracks::after,
.coming-soon-page .page-hero--coming-soon::after,
.resonance-expeditions-page .page-hero--resonance-expeditions::after,
.global-mandate-page .page-hero--global-mandate::after,
.wheel-of-time-page .page-hero--wheel-of-time::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(220px, 28svh, 420px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,0.00) 28%,
      rgba(13,13,13,0.10) 58%,
      rgba(13,13,13,0.46) 82%,
      rgba(13,13,13,0.98) 100%) !important;
}

.alberenar-adventures-page .page-hero-content,
.no-safe-road-page .page-hero-content,
.soundtracks-page .page-hero-content,
.coming-soon-page .page-hero-content,
.resonance-expeditions-page .page-hero-content,
.global-mandate-page .page-hero-content,
.wheel-of-time-page .page-hero-content {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
}

.alberenar-adventures-page .page-hero + section,
.no-safe-road-page .page-hero + section,
.soundtracks-page .page-hero + section,
.coming-soon-page .page-hero + section,
.resonance-expeditions-page .page-hero + section,
.global-mandate-page .page-hero + section,
.wheel-of-time-page .page-hero + section {
  margin-top: -1px !important;
  padding-top: clamp(5.25rem, 8vw, 7.25rem) !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.98) 0%,
      rgba(13,13,13,0.66) 120px,
      rgba(13,13,13,0.20) 310px,
      rgba(13,13,13,0) 520px),
    url('../images/background_texture.webp') center top / 1024px 1024px repeat !important;
}

/* The Explore Resonance Expeditions catalogue should sit directly on the site
   wallpaper. Remove the visible film/slab layer while keeping the cards and
   filters intact. */
.resonance-expeditions-page .catalogue-lead-section--resonance,
.resonance-expeditions-page .catalogue-lead-section,
.resonance-expeditions-page .catalogue-note-section--resonance,
.resonance-expeditions-page .catalogue-note-section {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.resonance-expeditions-page .catalogue-lead-section--resonance::before,
.resonance-expeditions-page .catalogue-lead-section--resonance::after,
.resonance-expeditions-page .catalogue-lead-section::before,
.resonance-expeditions-page .catalogue-lead-section::after,
.resonance-expeditions-page .catalogue-note-section--resonance::before,
.resonance-expeditions-page .catalogue-note-section--resonance::after,
.resonance-expeditions-page .catalogue-note-section::before,
.resonance-expeditions-page .catalogue-note-section::after {
  content: none !important;
  display: none !important;
}

/* Shorter Resonance Expeditions title after the page copy edit. */
.resonance-expeditions-page .page-hero h1 {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  .alberenar-page .hero-banner,
  .alberenar-adventures-page .page-hero--alberenar-adventures,
  .no-safe-road-page .page-hero--no-safe-road,
  .soundtracks-page .page-hero--soundtracks,
  .coming-soon-page .page-hero--coming-soon,
  .resonance-expeditions-page .page-hero--resonance-expeditions,
  .global-mandate-page .page-hero--global-mandate,
  .wheel-of-time-page .page-hero--wheel-of-time {
    height: clamp(440px, 78svh, 620px) !important;
    min-height: clamp(440px, 78svh, 620px) !important;
    padding-top: var(--nav-height) !important;
  }

  .alberenar-page .hero-banner {
    background-size: 100% 100%, auto calc(100% - var(--nav-height)) !important;
    background-position: center center, center bottom !important;
  }

  .alberenar-adventures-page .page-hero--alberenar-adventures::before,
  .no-safe-road-page .page-hero--no-safe-road::before,
  .soundtracks-page .page-hero--soundtracks::before,
  .coming-soon-page .page-hero--coming-soon::before,
  .resonance-expeditions-page .page-hero--resonance-expeditions::before,
  .global-mandate-page .page-hero--global-mandate::before,
  .wheel-of-time-page .page-hero--wheel-of-time::before {
    top: var(--nav-height) !important;
    background-size: 100% 100%, auto 100% !important;
    background-position: center center, center top !important;
  }
}

/* v9.97b — compatibility fallback for wide-banner heights.
   Uses vw-based clamp values rather than nested min()/multiplication so the
   final header sizing is robust in older browser parsers. */
.alberenar-page .hero-banner,
.alberenar-adventures-page .page-hero--alberenar-adventures,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.coming-soon-page .page-hero--coming-soon,
.resonance-expeditions-page .page-hero--resonance-expeditions,
.global-mandate-page .page-hero--global-mandate {
  height: clamp(600px, calc(40vw + var(--nav-height)), 872px) !important;
  min-height: clamp(600px, calc(40vw + var(--nav-height)), 872px) !important;
}

.wheel-of-time-page .page-hero--wheel-of-time {
  height: clamp(620px, calc(42.42vw + var(--nav-height)), 895px) !important;
  min-height: clamp(620px, calc(42.42vw + var(--nav-height)), 895px) !important;
}

/* --------------------------------------------------------------------------
   v9.98 — Final header banner fit, crop, and wallpaper blend reset
   --------------------------------------------------------------------------
   This block deliberately overrides the earlier experimental banner passes for
   the affected game/project pages only. It removes the double top offset that
   created the visible gap beneath the fixed navigation, keeps the supplied
   artwork inside the banner frame without top/bottom cropping, and fades the
   artwork into the shared stone wallpaper rather than a black slab.
   -------------------------------------------------------------------------- */
:root {
  --ifs-wide-banner-ratio-final: 0.3998991427;
  --ifs-wheel-banner-ratio-final: 0.4241952233;
  --ifs-wounded-banner-ratio-final: 0.6666666667;
}

/* Wide 1983 × 793 project banners. */
.alberenar-page .hero-banner,
.alberenar-adventures-page .page-hero--alberenar-adventures,
.coming-soon-page .page-hero--coming-soon,
.global-mandate-page .page-hero--global-mandate,
.pactsmiths-page .page-hero--pactsmiths,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.resonance-expeditions-page .page-hero--resonance-expeditions {
  position: relative !important;
  margin-top: var(--nav-height) !important;
  height: clamp(560px, calc(100vw * var(--ifs-wide-banner-ratio-final)), 920px) !important;
  min-height: clamp(560px, calc(100vw * var(--ifs-wide-banner-ratio-final)), 920px) !important;
  max-height: none !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #0d0d0d url('../images/background_texture.webp') center top / 600px 600px repeat !important;
}

/* Wheel/Epic Fantasy uses its own wider-but-taller banner ratio. */
.wheel-of-time-page .page-hero--wheel-of-time {
  position: relative !important;
  margin-top: var(--nav-height) !important;
  height: clamp(585px, calc(100vw * var(--ifs-wheel-banner-ratio-final)), 940px) !important;
  min-height: clamp(585px, calc(100vw * var(--ifs-wheel-banner-ratio-final)), 940px) !important;
  max-height: none !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #0d0d0d url('../images/background_texture.webp') center top / 600px 600px repeat !important;
}

/* Wounded Roads uses a taller 1536 × 1024 source image. Keep it wide enough to
   feel cinematic, but give it more vertical room so the lower artwork does not
   vanish into the wallpaper too early. */
.wounded-roads-page .page-hero--wounded-roads {
  position: relative !important;
  margin-top: var(--nav-height) !important;
  height: clamp(690px, 52vw, 1040px) !important;
  min-height: clamp(690px, 52vw, 1040px) !important;
  max-height: none !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #0d0d0d url('../images/background_texture.webp') center top / 600px 600px repeat !important;
}

/* Reset all affected pseudo-art layers so none begin a second nav-height lower. */
.alberenar-adventures-page .page-hero--alberenar-adventures::before,
.coming-soon-page .page-hero--coming-soon::before,
.global-mandate-page .page-hero--global-mandate::before,
.pactsmiths-page .page-hero--pactsmiths::before,
.no-safe-road-page .page-hero--no-safe-road::before,
.soundtracks-page .page-hero--soundtracks::before,
.resonance-expeditions-page .page-hero--resonance-expeditions::before,
.wheel-of-time-page .page-hero--wheel-of-time::before,
.wounded-roads-page .page-hero--wounded-roads::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center, center center !important;
  background-color: transparent !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 72%,
    rgba(0,0,0,0.92) 80%,
    rgba(0,0,0,0.58) 90%,
    rgba(0,0,0,0.18) 97%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 72%,
    rgba(0,0,0,0.92) 80%,
    rgba(0,0,0,0.58) 90%,
    rgba(0,0,0,0.18) 97%,
    transparent 100%) !important;
}

/* The older Alberenar landing page uses background layers directly on .hero-banner. */
.alberenar-page .hero-banner {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.12) 78%, rgba(13,13,13,0.32) 100%),
    url('../images/alberenar_banner.webp') !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
}

.alberenar-adventures-page .page-hero--alberenar-adventures::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.12) 78%, rgba(13,13,13,0.32) 100%),
    url('../images/alberenar_banner.webp') !important;
}
.coming-soon-page .page-hero--coming-soon::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.10) 78%, rgba(13,13,13,0.30) 100%),
    url('../images/coming-soon-banner.webp') !important;
}
.global-mandate-page .page-hero--global-mandate::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.12) 78%, rgba(13,13,13,0.32) 100%),
    url('../images/global-mandate-banner.webp') !important;
}
.pactsmiths-page .page-hero--pactsmiths::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.07) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.10) 78%, rgba(13,13,13,0.30) 100%),
    url('../images/pactsmiths-banner.webp') !important;
}
.no-safe-road-page .page-hero--no-safe-road::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.12) 78%, rgba(13,13,13,0.32) 100%),
    url('../images/no-safe-road-banner.webp') !important;
}
.soundtracks-page .page-hero--soundtracks::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.10) 78%, rgba(13,13,13,0.28) 100%),
    url('../images/soundtracks-banner.webp') !important;
}
.resonance-expeditions-page .page-hero--resonance-expeditions::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.00) 46%, rgba(5,10,18,0.10) 78%, rgba(5,10,18,0.30) 100%),
    url('../images/resonance/resonance-expeditions-banner.webp') !important;
}
.wheel-of-time-page .page-hero--wheel-of-time::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.12) 78%, rgba(13,13,13,0.32) 100%),
    url('../images/wheel-of-time-banner.webp') !important;
}
.wounded-roads-page .page-hero--wounded-roads::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.09) 0%, rgba(0,0,0,0.02) 48%, rgba(13,13,13,0.12) 78%, rgba(13,13,13,0.34) 100%),
    url('../images/wounded-roads-banner.webp') !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center top !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 66%,
    rgba(0,0,0,0.94) 76%,
    rgba(0,0,0,0.62) 88%,
    rgba(0,0,0,0.18) 97%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 66%,
    rgba(0,0,0,0.94) 76%,
    rgba(0,0,0,0.62) 88%,
    rgba(0,0,0,0.18) 97%,
    transparent 100%) !important;
}

/* Longer, softer bottom blend into the wallpaper. */
.alberenar-page .hero-banner::after,
.alberenar-adventures-page .page-hero--alberenar-adventures::after,
.coming-soon-page .page-hero--coming-soon::after,
.global-mandate-page .page-hero--global-mandate::after,
.pactsmiths-page .page-hero--pactsmiths::after,
.no-safe-road-page .page-hero--no-safe-road::after,
.soundtracks-page .page-hero--soundtracks::after,
.resonance-expeditions-page .page-hero--resonance-expeditions::after,
.wheel-of-time-page .page-hero--wheel-of-time::after,
.wounded-roads-page .page-hero--wounded-roads::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(230px, 24vw, 430px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 1 !important;
  background: linear-gradient(to bottom,
    rgba(13,13,13,0.00) 0%,
    rgba(13,13,13,0.06) 30%,
    rgba(13,13,13,0.24) 56%,
    rgba(13,13,13,0.54) 78%,
    rgba(13,13,13,0.88) 100%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Keep hero copy above the banner art and blend. */
.alberenar-page .hero-banner .banner-content,
.alberenar-adventures-page .page-hero--alberenar-adventures .page-hero-content,
.coming-soon-page .page-hero--coming-soon .page-hero-content,
.global-mandate-page .page-hero--global-mandate .page-hero-content,
.pactsmiths-page .page-hero--pactsmiths .page-hero-content,
.no-safe-road-page .page-hero--no-safe-road .page-hero-content,
.soundtracks-page .page-hero--soundtracks .page-hero-content,
.resonance-expeditions-page .page-hero--resonance-expeditions .page-hero-content,
.wheel-of-time-page .page-hero--wheel-of-time .page-hero-content,
.wounded-roads-page .page-hero--wounded-roads .page-hero-content {
  position: relative !important;
  z-index: 2 !important;
  transform: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  max-width: min(860px, calc(100vw - 2rem)) !important;
}

/* Wounded Roads title was sitting too close to the very top; preserve the art but
   keep the copy readable. */
.wounded-roads-page .page-hero--wounded-roads .page-hero-content {
  margin-top: clamp(4rem, 8vw, 8rem) !important;
}

/* The following sections should rise directly out of the shared wallpaper, not
   out of a boxed film layer. */
.alberenar-page .hero-banner + section,
.alberenar-adventures-page .page-hero--alberenar-adventures + section,
.coming-soon-page .page-hero--coming-soon + section,
.global-mandate-page .page-hero--global-mandate + section,
.pactsmiths-page .page-hero--pactsmiths + section,
.no-safe-road-page .page-hero--no-safe-road + section,
.soundtracks-page .page-hero--soundtracks + section,
.resonance-expeditions-page .page-hero--resonance-expeditions + section,
.wheel-of-time-page .page-hero--wheel-of-time + section,
.wounded-roads-page .page-hero--wounded-roads + section {
  margin-top: -1px !important;
  background: transparent !important;
  background-image: none !important;
}

/* Resonance expedition list: remove the visible central film/slab while retaining
   filter buttons and cards. */
.resonance-expeditions-page .catalogue-lead-section,
.resonance-expeditions-page .catalogue-lead-section--resonance,
.resonance-expeditions-page .catalogue-lead-copy,
.resonance-expeditions-page .catalogue-note-section,
.resonance-expeditions-page .catalogue-note-section--resonance {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.resonance-expeditions-page .catalogue-lead-section::before,
.resonance-expeditions-page .catalogue-lead-section::after,
.resonance-expeditions-page .catalogue-lead-section--resonance::before,
.resonance-expeditions-page .catalogue-lead-section--resonance::after,
.resonance-expeditions-page .catalogue-note-section::before,
.resonance-expeditions-page .catalogue-note-section::after,
.resonance-expeditions-page .catalogue-note-section--resonance::before,
.resonance-expeditions-page .catalogue-note-section--resonance::after {
  content: none !important;
  display: none !important;
}

/* Mobile/tablet: keep the safer previous responsive behaviour but remove double
   offsets and obvious boxed backgrounds. */
@media (max-width: 980px) {
  .alberenar-page .hero-banner,
  .alberenar-adventures-page .page-hero--alberenar-adventures,
  .coming-soon-page .page-hero--coming-soon,
  .global-mandate-page .page-hero--global-mandate,
  .pactsmiths-page .page-hero--pactsmiths,
  .no-safe-road-page .page-hero--no-safe-road,
  .soundtracks-page .page-hero--soundtracks,
  .resonance-expeditions-page .page-hero--resonance-expeditions,
  .wheel-of-time-page .page-hero--wheel-of-time,
  .wounded-roads-page .page-hero--wounded-roads {
    margin-top: var(--nav-height) !important;
    height: clamp(470px, 76svh, 680px) !important;
    min-height: clamp(470px, 76svh, 680px) !important;
  }

  .alberenar-adventures-page .page-hero--alberenar-adventures::before,
  .coming-soon-page .page-hero--coming-soon::before,
  .global-mandate-page .page-hero--global-mandate::before,
  .pactsmiths-page .page-hero--pactsmiths::before,
  .no-safe-road-page .page-hero--no-safe-road::before,
  .soundtracks-page .page-hero--soundtracks::before,
  .resonance-expeditions-page .page-hero--resonance-expeditions::before,
  .wheel-of-time-page .page-hero--wheel-of-time::before,
  .wounded-roads-page .page-hero--wounded-roads::before {
    inset: 0 !important;
    background-size: 100% 100%, cover !important;
    background-position: center center, center center !important;
  }
}


/* --------------------------------------------------------------------------
   v9.99 — Header seam, artwork fit, catalogue film, and Resonance carousel fix
   --------------------------------------------------------------------------
   The v9.98 pass still had body padding plus a second hero margin, which created
   a stone-texture gap between the fixed navigation and several project headers.
   This override treats the global body padding as the only nav offset, keeps the
   artwork in its own masked layer, and lets the shared wallpaper show through the
   lower blend rather than ending in a flat black band.
   -------------------------------------------------------------------------- */

/* The fixed navbar is already accounted for by body padding. Do not add a
   second margin above these headers. */
.alberenar-page .hero-banner,
.alberenar-adventures-page .page-hero--alberenar-adventures,
.coming-soon-page .page-hero--coming-soon,
.global-mandate-page .page-hero--global-mandate,
.pactsmiths-page .page-hero--pactsmiths,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.resonance-expeditions-page .page-hero--resonance-expeditions,
.wheel-of-time-page .page-hero--wheel-of-time,
.wounded-roads-page .page-hero--wounded-roads {
  margin-top: 0 !important;
  background: #0d0d0d url('../images/background_texture.webp') center top / 600px 600px repeat !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Restore the exact wide-banner aspect ratio below the navbar, without adding
   the navigation height into the image frame. */
.alberenar-page .hero-banner,
.alberenar-adventures-page .page-hero--alberenar-adventures,
.coming-soon-page .page-hero--coming-soon,
.global-mandate-page .page-hero--global-mandate,
.pactsmiths-page .page-hero--pactsmiths,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.resonance-expeditions-page .page-hero--resonance-expeditions {
  height: clamp(520px, calc(100vw * var(--ifs-wide-banner-ratio-final)), 900px) !important;
  min-height: clamp(520px, calc(100vw * var(--ifs-wide-banner-ratio-final)), 900px) !important;
  max-height: none !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.wheel-of-time-page .page-hero--wheel-of-time {
  height: clamp(560px, calc(100vw * var(--ifs-wheel-banner-ratio-final)), 930px) !important;
  min-height: clamp(560px, calc(100vw * var(--ifs-wheel-banner-ratio-final)), 930px) !important;
  max-height: none !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Wounded Roads uses taller source art. Use its source ratio rather than a
   shortened crop so the lower road has enough room before the fade. */
.wounded-roads-page .page-hero--wounded-roads {
  height: clamp(720px, calc(100vw * var(--ifs-wounded-banner-ratio-final)), 1320px) !important;
  min-height: clamp(720px, calc(100vw * var(--ifs-wounded-banner-ratio-final)), 1320px) !important;
  max-height: none !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
}

/* The older Alberenar landing header needs the same masked artwork-layer system
   as the newer project headers; otherwise old ::before/background rules compete
   and the banner appears cropped or abruptly black at the lower edge. */
.alberenar-page .hero-banner {
  position: relative !important;
  background-image: url('../images/background_texture.webp') !important;
  background-size: 600px 600px !important;
  background-repeat: repeat !important;
  background-position: center top !important;
}

.alberenar-page .hero-banner::before,
.alberenar-adventures-page .page-hero--alberenar-adventures::before,
.coming-soon-page .page-hero--coming-soon::before,
.global-mandate-page .page-hero--global-mandate::before,
.pactsmiths-page .page-hero--pactsmiths::before,
.no-safe-road-page .page-hero--no-safe-road::before,
.soundtracks-page .page-hero--soundtracks::before,
.resonance-expeditions-page .page-hero--resonance-expeditions::before,
.wheel-of-time-page .page-hero--wheel-of-time::before,
.wounded-roads-page .page-hero--wounded-roads::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center, center center !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 74%,
    rgba(0,0,0,0.92) 82%,
    rgba(0,0,0,0.58) 91%,
    rgba(0,0,0,0.18) 97%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 74%,
    rgba(0,0,0,0.92) 82%,
    rgba(0,0,0,0.58) 91%,
    rgba(0,0,0,0.18) 97%,
    transparent 100%) !important;
}

.alberenar-page .hero-banner::before,
.alberenar-adventures-page .page-hero--alberenar-adventures::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.10) 80%, rgba(13,13,13,0.20) 100%),
    url('../images/alberenar_banner.webp') !important;
}
.coming-soon-page .page-hero--coming-soon::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.08) 80%, rgba(13,13,13,0.18) 100%),
    url('../images/coming-soon-banner.webp') !important;
}
.global-mandate-page .page-hero--global-mandate::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.10) 80%, rgba(13,13,13,0.20) 100%),
    url('../images/global-mandate-banner.webp') !important;
}
.pactsmiths-page .page-hero--pactsmiths::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.07) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.08) 80%, rgba(13,13,13,0.18) 100%),
    url('../images/pactsmiths-banner.webp') !important;
}
.no-safe-road-page .page-hero--no-safe-road::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.10) 80%, rgba(13,13,13,0.20) 100%),
    url('../images/no-safe-road-banner.webp') !important;
}
.soundtracks-page .page-hero--soundtracks::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.08) 80%, rgba(13,13,13,0.18) 100%),
    url('../images/soundtracks-banner.webp') !important;
}
.resonance-expeditions-page .page-hero--resonance-expeditions::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.00) 46%, rgba(5,10,18,0.08) 80%, rgba(5,10,18,0.18) 100%),
    url('../images/resonance/resonance-expeditions-banner.webp') !important;
}
.wheel-of-time-page .page-hero--wheel-of-time::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 46%, rgba(13,13,13,0.10) 80%, rgba(13,13,13,0.20) 100%),
    url('../images/wheel-of-time-banner.webp') !important;
}
.wounded-roads-page .page-hero--wounded-roads::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.01) 48%, rgba(13,13,13,0.08) 80%, rgba(13,13,13,0.18) 100%),
    url('../images/wounded-roads-banner.webp') !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center, center center !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 78%,
    rgba(0,0,0,0.93) 85%,
    rgba(0,0,0,0.58) 93%,
    rgba(0,0,0,0.18) 98%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 78%,
    rgba(0,0,0,0.93) 85%,
    rgba(0,0,0,0.58) 93%,
    rgba(0,0,0,0.18) 98%,
    transparent 100%) !important;
}

/* Bottom blend: avoid the old flat-black strip. The masked image fades out and
   the hero's actual wallpaper remains visible beneath this subtle dark veil. */
.alberenar-page .hero-banner::after,
.alberenar-adventures-page .page-hero--alberenar-adventures::after,
.coming-soon-page .page-hero--coming-soon::after,
.global-mandate-page .page-hero--global-mandate::after,
.pactsmiths-page .page-hero--pactsmiths::after,
.no-safe-road-page .page-hero--no-safe-road::after,
.soundtracks-page .page-hero--soundtracks::after,
.resonance-expeditions-page .page-hero--resonance-expeditions::after,
.wheel-of-time-page .page-hero--wheel-of-time::after,
.wounded-roads-page .page-hero--wounded-roads::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(190px, 18vw, 390px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.00) 0%,
      rgba(13,13,13,0.05) 34%,
      rgba(13,13,13,0.16) 62%,
      rgba(13,13,13,0.26) 84%,
      rgba(13,13,13,0.06) 100%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.alberenar-page .hero-banner .banner-content,
.alberenar-adventures-page .page-hero--alberenar-adventures .page-hero-content,
.coming-soon-page .page-hero--coming-soon .page-hero-content,
.global-mandate-page .page-hero--global-mandate .page-hero-content,
.pactsmiths-page .page-hero--pactsmiths .page-hero-content,
.no-safe-road-page .page-hero--no-safe-road .page-hero-content,
.soundtracks-page .page-hero--soundtracks .page-hero-content,
.resonance-expeditions-page .page-hero--resonance-expeditions .page-hero-content,
.wheel-of-time-page .page-hero--wheel-of-time .page-hero-content,
.wounded-roads-page .page-hero--wounded-roads .page-hero-content {
  position: relative !important;
  z-index: 2 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(860px, calc(100vw - 2rem)) !important;
  text-align: center !important;
}

.wounded-roads-page .page-hero--wounded-roads .page-hero-content {
  margin-top: clamp(4.5rem, 9vw, 10rem) !important;
}

/* The sections after the headers should continue the shared wallpaper, not a
   boxed colour field. */
.alberenar-page .hero-banner + section,
.alberenar-adventures-page .page-hero--alberenar-adventures + section,
.coming-soon-page .page-hero--coming-soon + section,
.global-mandate-page .page-hero--global-mandate + section,
.pactsmiths-page .page-hero--pactsmiths + section,
.no-safe-road-page .page-hero--no-safe-road + section,
.soundtracks-page .page-hero--soundtracks + section,
.resonance-expeditions-page .page-hero--resonance-expeditions + section,
.wheel-of-time-page .page-hero--wheel-of-time + section,
.wounded-roads-page .page-hero--wounded-roads + section {
  margin-top: -1px !important;
  background: url('../images/background_texture.webp') center top / 600px 600px repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Remove the visible film/slab from Alberenar adventure catalogue sections and
   the Alberenar map explorer area; keep panels/cards intact. */
.alberenar-adventures-page .catalogue-lead-section,
.alberenar-adventures-page .catalogue-lead-section--alberenar,
.alberenar-adventures-page .catalogue-lead-copy,
.alberenar-adventures-page .catalogue-note-section,
.alberenar-adventures-page .catalogue-note-section--alberenar,
.alberenar-page .map-archive-section--alberenar,
.alberenar-page .map-explorer-section,
.alberenar-page .map-flyover-section.map-archive-section--alberenar {
  background: url('../images/background_texture.webp') center center / 600px 600px repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.alberenar-adventures-page .catalogue-lead-section::before,
.alberenar-adventures-page .catalogue-lead-section::after,
.alberenar-adventures-page .catalogue-lead-section--alberenar::before,
.alberenar-adventures-page .catalogue-lead-section--alberenar::after,
.alberenar-adventures-page .catalogue-note-section::before,
.alberenar-adventures-page .catalogue-note-section::after,
.alberenar-adventures-page .catalogue-note-section--alberenar::before,
.alberenar-adventures-page .catalogue-note-section--alberenar::after,
.alberenar-page .map-archive-section--alberenar::before,
.alberenar-page .map-archive-section--alberenar::after,
.alberenar-page .map-explorer-section::before,
.alberenar-page .map-explorer-section::after {
  content: none !important;
  display: none !important;
}

/* Preserve the Resonance catalogue film removal from the previous pass, but make
   it independent of the following-section rule. */
.resonance-expeditions-page .catalogue-lead-section,
.resonance-expeditions-page .catalogue-lead-section--resonance,
.resonance-expeditions-page .catalogue-lead-copy,
.resonance-expeditions-page .catalogue-note-section,
.resonance-expeditions-page .catalogue-note-section--resonance {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Resonance carousel: visible horizontal items should not wait for lazy-load
   heuristics while the user is already seeing their black frames. */
.resonance-page .media-carousel .carousel-track img.carousel-item {
  content-visibility: visible !important;
}

@media (max-width: 980px) {
  .alberenar-page .hero-banner,
  .alberenar-adventures-page .page-hero--alberenar-adventures,
  .coming-soon-page .page-hero--coming-soon,
  .global-mandate-page .page-hero--global-mandate,
  .pactsmiths-page .page-hero--pactsmiths,
  .no-safe-road-page .page-hero--no-safe-road,
  .soundtracks-page .page-hero--soundtracks,
  .resonance-expeditions-page .page-hero--resonance-expeditions,
  .wheel-of-time-page .page-hero--wheel-of-time,
  .wounded-roads-page .page-hero--wounded-roads {
    margin-top: 0 !important;
    height: clamp(450px, 72svh, 650px) !important;
    min-height: clamp(450px, 72svh, 650px) !important;
  }

  .alberenar-page .hero-banner::before,
  .alberenar-adventures-page .page-hero--alberenar-adventures::before,
  .coming-soon-page .page-hero--coming-soon::before,
  .global-mandate-page .page-hero--global-mandate::before,
  .pactsmiths-page .page-hero--pactsmiths::before,
  .no-safe-road-page .page-hero--no-safe-road::before,
  .soundtracks-page .page-hero--soundtracks::before,
  .resonance-expeditions-page .page-hero--resonance-expeditions::before,
  .wheel-of-time-page .page-hero--wheel-of-time::before,
  .wounded-roads-page .page-hero--wounded-roads::before {
    background-size: 100% 100%, cover !important;
    background-position: center center, center center !important;
  }
}


/* --------------------------------------------------------------------------
   v10.00 — Hard reset for header seams, bottom blends, section films and page menus
   --------------------------------------------------------------------------
   Purpose: the page artwork should occupy its header cleanly, then fade into the
   shared stone wallpaper. Section panels/cards remain intact, but the broad
   purple/black films and visible rectangular slabs are removed.
   -------------------------------------------------------------------------- */
:root {
  --ifs-banner-wide-ratio-v1000: 0.3998991427;
  --ifs-banner-forum-ratio-v1000: 0.3998991427;
  --ifs-banner-contact-ratio-v1000: 0.375;
  --ifs-banner-wheel-ratio-v1000: 0.4241952233;
  --ifs-banner-wounded-ratio-v1000: 0.6666666667;
  --ifs-wallpaper-size-v1000: 600px 600px;
}

html,
body {
  background-color: #06090b !important;
  background-image: url('../images/background_texture.webp') !important;
  background-repeat: repeat !important;
  background-size: var(--ifs-wallpaper-size-v1000) !important;
  background-position: center top !important;
}

/* Keep the main navigation as direct page tabs. Section dropdowns are moved into
   the relevant header artwork by JS below. */
.navbar ul li.nav-dropdown,
.navbar ul li.nav-dropdown > .nav-dropdown-trigger {
  position: static !important;
}
.navbar ul li.nav-dropdown > .nav-dropdown-trigger::after,
.navbar ul li.nav-dropdown::after,
.navbar .nav-dropdown-menu {
  display: none !important;
  content: none !important;
}
.navbar ul li > a {
  white-space: nowrap !important;
}

/* Shared artwork header frame. */
.alberenar-page .hero-banner,
.alberenar-adventures-page .page-hero--alberenar-adventures,
.resonance-expeditions-page .page-hero--resonance-expeditions,
.global-mandate-page .page-hero--global-mandate,
.pactsmiths-page .page-hero--pactsmiths,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.coming-soon-page .page-hero--coming-soon,
.wheel-of-time-page .page-hero--wheel-of-time,
.wounded-roads-page .page-hero--wounded-roads,
.forum-page .page-hero--forum,
.contact-page .page-hero--contact {
  position: relative !important;
  margin-top: 0 !important;
  padding: 0 clamp(1rem, 3vw, 2rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-color: transparent !important;
  background-image: url('../images/background_texture.webp') !important;
  background-repeat: repeat !important;
  background-size: var(--ifs-wallpaper-size-v1000) !important;
  background-position: center top !important;
  box-shadow: none !important;
  border: 0 !important;
}

.alberenar-page .hero-banner,
.alberenar-adventures-page .page-hero--alberenar-adventures,
.resonance-expeditions-page .page-hero--resonance-expeditions,
.global-mandate-page .page-hero--global-mandate,
.pactsmiths-page .page-hero--pactsmiths,
.no-safe-road-page .page-hero--no-safe-road,
.soundtracks-page .page-hero--soundtracks,
.coming-soon-page .page-hero--coming-soon {
  height: clamp(520px, calc(100vw * var(--ifs-banner-wide-ratio-v1000)), 900px) !important;
  min-height: clamp(520px, calc(100vw * var(--ifs-banner-wide-ratio-v1000)), 900px) !important;
  max-height: none !important;
}

.forum-page .page-hero--forum {
  height: clamp(520px, calc(100vw * var(--ifs-banner-forum-ratio-v1000)), 900px) !important;
  min-height: clamp(520px, calc(100vw * var(--ifs-banner-forum-ratio-v1000)), 900px) !important;
  max-height: none !important;
}

.contact-page .page-hero--contact {
  height: clamp(500px, calc(100vw * var(--ifs-banner-contact-ratio-v1000)), 820px) !important;
  min-height: clamp(500px, calc(100vw * var(--ifs-banner-contact-ratio-v1000)), 820px) !important;
  max-height: none !important;
}

.wheel-of-time-page .page-hero--wheel-of-time {
  height: clamp(540px, calc(100vw * var(--ifs-banner-wheel-ratio-v1000)), 930px) !important;
  min-height: clamp(540px, calc(100vw * var(--ifs-banner-wheel-ratio-v1000)), 930px) !important;
  max-height: none !important;
}

.wounded-roads-page .page-hero--wounded-roads {
  height: clamp(690px, calc(100vw * var(--ifs-banner-wounded-ratio-v1000)), 1320px) !important;
  min-height: clamp(690px, calc(100vw * var(--ifs-banner-wounded-ratio-v1000)), 1320px) !important;
  max-height: none !important;
  align-items: flex-start !important;
}

/* Single controlled artwork layer. The mask deliberately starts earlier than
   previous versions so the bottom does not appear to be chopped off. */
.alberenar-page .hero-banner::before,
.alberenar-adventures-page .page-hero--alberenar-adventures::before,
.resonance-expeditions-page .page-hero--resonance-expeditions::before,
.global-mandate-page .page-hero--global-mandate::before,
.pactsmiths-page .page-hero--pactsmiths::before,
.no-safe-road-page .page-hero--no-safe-road::before,
.soundtracks-page .page-hero--soundtracks::before,
.coming-soon-page .page-hero--coming-soon::before,
.wheel-of-time-page .page-hero--wheel-of-time::before,
.wounded-roads-page .page-hero--wounded-roads::before,
.forum-page .page-hero--forum::before,
.contact-page .page-hero--contact::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center, center center !important;
  background-color: transparent !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 58%,
    rgba(0,0,0,0.94) 68%,
    rgba(0,0,0,0.66) 80%,
    rgba(0,0,0,0.30) 91%,
    rgba(0,0,0,0.08) 97%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 58%,
    rgba(0,0,0,0.94) 68%,
    rgba(0,0,0,0.66) 80%,
    rgba(0,0,0,0.30) 91%,
    rgba(0,0,0,0.08) 97%,
    transparent 100%) !important;
}

.alberenar-page .hero-banner::before,
.alberenar-adventures-page .page-hero--alberenar-adventures::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.01) 48%, rgba(0,0,0,0.16) 100%),
    url('../images/alberenar_banner.webp') !important;
}
.resonance-expeditions-page .page-hero--resonance-expeditions::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.14) 100%),
    url('../images/resonance/resonance-expeditions-banner.webp') !important;
}
.global-mandate-page .page-hero--global-mandate::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.07) 0%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.16) 100%),
    url('../images/global-mandate-banner.webp') !important;
}
.pactsmiths-page .page-hero--pactsmiths::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.14) 100%),
    url('../images/pactsmiths-banner.webp') !important;
}
.no-safe-road-page .page-hero--no-safe-road::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.07) 0%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.16) 100%),
    url('../images/no-safe-road-banner.webp') !important;
}
.soundtracks-page .page-hero--soundtracks::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.14) 100%),
    url('../images/soundtracks-banner.webp') !important;
}
.coming-soon-page .page-hero--coming-soon::before,
.new-worlds-page .page-hero--coming-soon::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.14) 100%),
    url('../images/coming-soon-banner.webp') !important;
}
.wheel-of-time-page .page-hero--wheel-of-time::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.07) 0%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.16) 100%),
    url('../images/wheel-of-time-banner.webp') !important;
}
.wounded-roads-page .page-hero--wounded-roads::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.07) 0%, rgba(0,0,0,0.01) 54%, rgba(0,0,0,0.15) 100%),
    url('../images/wounded-roads-banner.webp') !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 66%,
    rgba(0,0,0,0.94) 76%,
    rgba(0,0,0,0.64) 87%,
    rgba(0,0,0,0.28) 95%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 66%,
    rgba(0,0,0,0.94) 76%,
    rgba(0,0,0,0.64) 87%,
    rgba(0,0,0,0.28) 95%,
    transparent 100%) !important;
}
.forum-page .page-hero--forum::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.01) 52%, rgba(0,0,0,0.15) 100%),
    url('../images/hero-forum-replacement.webp') !important;
}
.contact-page .page-hero--contact::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.01) 52%, rgba(0,0,0,0.15) 100%),
    url('../images/contact-banner-wide.webp') !important;
}

/* The old ::after black curtains are replaced by a very light lower veil only;
   the true blend is created by the masked artwork revealing the body wallpaper. */
.alberenar-page .hero-banner::after,
.alberenar-adventures-page .page-hero--alberenar-adventures::after,
.resonance-expeditions-page .page-hero--resonance-expeditions::after,
.global-mandate-page .page-hero--global-mandate::after,
.pactsmiths-page .page-hero--pactsmiths::after,
.no-safe-road-page .page-hero--no-safe-road::after,
.soundtracks-page .page-hero--soundtracks::after,
.coming-soon-page .page-hero--coming-soon::after,
.wheel-of-time-page .page-hero--wheel-of-time::after,
.wounded-roads-page .page-hero--wounded-roads::after,
.forum-page .page-hero--forum::after,
.contact-page .page-hero--contact::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(180px, 20vw, 420px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.02) 48%,
    rgba(0,0,0,0.08) 76%,
    rgba(0,0,0,0.00) 100%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.alberenar-page .hero-banner .banner-content,
.alberenar-adventures-page .page-hero--alberenar-adventures .page-hero-content,
.resonance-expeditions-page .page-hero--resonance-expeditions .page-hero-content,
.global-mandate-page .page-hero--global-mandate .page-hero-content,
.pactsmiths-page .page-hero--pactsmiths .page-hero-content,
.no-safe-road-page .page-hero--no-safe-road .page-hero-content,
.soundtracks-page .page-hero--soundtracks .page-hero-content,
.coming-soon-page .page-hero--coming-soon .page-hero-content,
.wheel-of-time-page .page-hero--wheel-of-time .page-hero-content,
.wounded-roads-page .page-hero--wounded-roads .page-hero-content,
.forum-page .page-hero--forum .page-hero-content,
.contact-page .page-hero--contact .page-hero-content {
  position: relative !important;
  z-index: 3 !important;
  max-width: min(920px, calc(100vw - 2rem)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.wounded-roads-page .page-hero--wounded-roads .page-hero-content {
  margin-top: clamp(4rem, 8vw, 9rem) !important;
}

/* Remove broad page films/slabs. The global wallpaper now carries these areas. */
.alberenar-page .hero-banner + section,
.alberenar-adventures-page .page-hero--alberenar-adventures + section,
.resonance-expeditions-page .page-hero--resonance-expeditions + section,
.global-mandate-page .page-hero--global-mandate + section,
.pactsmiths-page .page-hero--pactsmiths + section,
.no-safe-road-page .page-hero--no-safe-road + section,
.soundtracks-page .page-hero--soundtracks + section,
.coming-soon-page .page-hero--coming-soon + section,
.wheel-of-time-page .page-hero--wheel-of-time + section,
.wounded-roads-page .page-hero--wounded-roads + section,
.forum-page .page-hero--forum + section,
.contact-page .page-hero--contact + section,
.alberenar-page .modular-section,
.alberenar-page .deep-dive-section,
.alberenar-page .map-flyover-section,
.alberenar-page .map-archive-section--alberenar,
.alberenar-page .map-explorer-section,
.alberenar-page .race-library-section--alberenar,
.alberenar-adventures-page .catalogue-lead-section,
.alberenar-adventures-page .catalogue-note-section,
.resonance-expeditions-page .catalogue-lead-section,
.resonance-expeditions-page .catalogue-note-section,
.wounded-roads-page .media-carousel,
.wounded-roads-page .wounded-roads-carousel {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-top: 0 !important;
  margin-top: -1px !important;
}

.alberenar-adventures-page .catalogue-lead-section,
.resonance-expeditions-page .catalogue-lead-section,
.alberenar-page .modular-section,
.alberenar-page .map-flyover-section,
.alberenar-page .map-explorer-section,
.wounded-roads-page .media-carousel,
.wounded-roads-page .wounded-roads-carousel {
  width: 100% !important;
  max-width: none !important;
  padding-left: clamp(1rem, 4vw, 3.5rem) !important;
  padding-right: clamp(1rem, 4vw, 3.5rem) !important;
}

.alberenar-page .modular-section > .section-heading,
.alberenar-page .modular-section > .section-subheading,
.alberenar-page .service-grid,
.alberenar-page .map-explorer-shell,
.alberenar-page .map-flyover-grid,
.alberenar-adventures-page .catalogue-lead-copy,
.alberenar-adventures-page .catalogue-filter-bar,
.alberenar-adventures-page .adventure-card-grid,
.resonance-expeditions-page .catalogue-lead-copy,
.resonance-expeditions-page .catalogue-filter-bar,
.resonance-expeditions-page .expedition-card-grid,
.wounded-roads-page .media-carousel > h2,
.wounded-roads-page .media-carousel > p,
.wounded-roads-page .carousel-wrapper {
  position: relative !important;
  z-index: 2 !important;
}

.alberenar-adventures-page .catalogue-lead-copy,
.resonance-expeditions-page .catalogue-lead-copy,
.alberenar-page .modular-section > .section-heading,
.alberenar-page .modular-section > .section-subheading {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.alberenar-page .modular-section::before,
.alberenar-page .modular-section::after,
.alberenar-page .deep-dive-section::before,
.alberenar-page .deep-dive-section::after,
.alberenar-page .map-flyover-section::before,
.alberenar-page .map-flyover-section::after,
.alberenar-page .map-archive-section--alberenar::before,
.alberenar-page .map-archive-section--alberenar::after,
.alberenar-page .map-explorer-section::before,
.alberenar-page .map-explorer-section::after,
.alberenar-adventures-page .catalogue-lead-section::before,
.alberenar-adventures-page .catalogue-lead-section::after,
.alberenar-adventures-page .catalogue-note-section::before,
.alberenar-adventures-page .catalogue-note-section::after,
.resonance-expeditions-page .catalogue-lead-section::before,
.resonance-expeditions-page .catalogue-lead-section::after,
.resonance-expeditions-page .catalogue-note-section::before,
.resonance-expeditions-page .catalogue-note-section::after,
.wounded-roads-page .media-carousel::before,
.wounded-roads-page .media-carousel::after {
  content: none !important;
  display: none !important;
}

/* Header-local page menu. */
.hero-section-jump,
.hero-section-jump--floating {
  display: block !important;
  position: absolute !important;
  top: clamp(1rem, 2.4vw, 1.8rem) !important;
  right: clamp(1rem, 3vw, 2rem) !important;
  width: min(310px, calc(100vw - 2rem)) !important;
  margin: 0 !important;
  z-index: 10 !important;
  text-align: left !important;
}

.hero-section-jump summary,
.hero-section-jump--floating summary {
  min-height: 2.35rem !important;
  padding: 0.58rem 0.82rem !important;
  font-size: 0.70rem !important;
  background: linear-gradient(135deg, rgba(5,5,6,0.84), rgba(19,13,9,0.74)) !important;
  border-color: rgba(255,186,99,0.45) !important;
  box-shadow: 0 0 14px rgba(0,0,0,0.42), inset 0 0 14px rgba(255,184,92,0.05) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.hero-section-jump-list,
.hero-section-jump--floating .hero-section-jump-list {
  background: rgba(5,5,6,0.92) !important;
  border-color: rgba(255,186,99,0.28) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,0.50), 0 0 18px rgba(255,118,22,0.10) !important;
}

.hero-section-jump-list a {
  font-size: 0.72rem !important;
}

/* Resonance carousel: remove lazy heuristics, reserve paint, and prime visible images. */
.resonance-page .media-carousel .carousel-track img.carousel-item {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
  background-color: #050607 !important;
}
.resonance-page .media-carousel .carousel-track {
  content-visibility: visible !important;
}

@media (max-width: 980px) {
  .alberenar-page .hero-banner,
  .alberenar-adventures-page .page-hero--alberenar-adventures,
  .resonance-expeditions-page .page-hero--resonance-expeditions,
  .global-mandate-page .page-hero--global-mandate,
  .pactsmiths-page .page-hero--pactsmiths,
  .no-safe-road-page .page-hero--no-safe-road,
  .soundtracks-page .page-hero--soundtracks,
  .coming-soon-page .page-hero--coming-soon,
  .wheel-of-time-page .page-hero--wheel-of-time,
  .forum-page .page-hero--forum,
  .contact-page .page-hero--contact {
    height: clamp(440px, 70svh, 650px) !important;
    min-height: clamp(440px, 70svh, 650px) !important;
  }
  .wounded-roads-page .page-hero--wounded-roads {
    height: clamp(560px, 82svh, 760px) !important;
    min-height: clamp(560px, 82svh, 760px) !important;
  }
  .hero-section-jump,
  .hero-section-jump--floating {
    top: auto !important;
    right: auto !important;
    left: 50% !important;
    bottom: clamp(1rem, 3vw, 1.4rem) !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 640px) {
  .hero-section-jump,
  .hero-section-jump--floating {
    width: min(92vw, 330px) !important;
  }
}

/* v10.00b — allow true wide-banner ratio on large desktops instead of clipping/squashing at 900px. */
@media (min-width: 1500px) {
  .alberenar-page .hero-banner,
  .alberenar-adventures-page .page-hero--alberenar-adventures,
  .resonance-expeditions-page .page-hero--resonance-expeditions,
  .global-mandate-page .page-hero--global-mandate,
  .pactsmiths-page .page-hero--pactsmiths,
  .no-safe-road-page .page-hero--no-safe-road,
  .soundtracks-page .page-hero--soundtracks,
  .coming-soon-page .page-hero--coming-soon,
  .forum-page .page-hero--forum {
    height: clamp(600px, calc(100vw * var(--ifs-banner-wide-ratio-v1000)), 1180px) !important;
    min-height: clamp(600px, calc(100vw * var(--ifs-banner-wide-ratio-v1000)), 1180px) !important;
  }
  .contact-page .page-hero--contact {
    height: clamp(560px, calc(100vw * var(--ifs-banner-contact-ratio-v1000)), 1080px) !important;
    min-height: clamp(560px, calc(100vw * var(--ifs-banner-contact-ratio-v1000)), 1080px) !important;
  }
  .wheel-of-time-page .page-hero--wheel-of-time {
    height: clamp(620px, calc(100vw * var(--ifs-banner-wheel-ratio-v1000)), 1240px) !important;
    min-height: clamp(620px, calc(100vw * var(--ifs-banner-wheel-ratio-v1000)), 1240px) !important;
  }
  .wounded-roads-page .page-hero--wounded-roads {
    height: clamp(760px, calc(100vw * var(--ifs-banner-wounded-ratio-v1000)), 1600px) !important;
    min-height: clamp(760px, calc(100vw * var(--ifs-banner-wounded-ratio-v1000)), 1600px) !important;
  }
}

/* --------------------------------------------------------------------------
   v10.01 — No Safe Road banner fit + Soundtracks control separation
   --------------------------------------------------------------------------
   • No Safe Road now uses a cleaned banner asset without the blurred side gutters.
   • Its image layer is kept at the exact wide-banner ratio and given a softer
     lower mask so it blends into the stone wallpaper instead of ending as a cut.
   • On Soundtracks, the fixed Sound button is moved away from the header Page Menu.
   -------------------------------------------------------------------------- */
.no-safe-road-page .page-hero--no-safe-road {
  height: clamp(520px, calc(100vw * var(--ifs-banner-wide-ratio-v1000)), 900px) !important;
  min-height: clamp(520px, calc(100vw * var(--ifs-banner-wide-ratio-v1000)), 900px) !important;
  background-color: transparent !important;
  background-image: url('../images/background_texture.webp') !important;
  background-repeat: repeat !important;
  background-size: var(--ifs-wallpaper-size-v1000) !important;
}
.no-safe-road-page .page-hero--no-safe-road::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.00) 45%, rgba(0,0,0,0.18) 100%),
    url('../images/no-safe-road-banner.webp') !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center, center center !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 50%,
    rgba(0,0,0,0.92) 62%,
    rgba(0,0,0,0.62) 76%,
    rgba(0,0,0,0.30) 88%,
    rgba(0,0,0,0.08) 96%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 50%,
    rgba(0,0,0,0.92) 62%,
    rgba(0,0,0,0.62) 76%,
    rgba(0,0,0,0.30) 88%,
    rgba(0,0,0,0.08) 96%,
    transparent 100%) !important;
}
.no-safe-road-page .page-hero--no-safe-road::after {
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.03) 44%,
    rgba(0,0,0,0.08) 72%,
    rgba(0,0,0,0.00) 100%) !important;
  height: clamp(220px, 24vw, 500px) !important;
}
.no-safe-road-page .page-hero--no-safe-road + section {
  margin-top: -1px !important;
}
.soundtracks-page #audioControls {
  top: auto !important;
  right: clamp(1rem, 3vw, 2rem) !important;
  bottom: clamp(1rem, 2.2vw, 1.8rem) !important;
  z-index: 4200 !important;
}
.soundtracks-page .hero-section-jump,
.soundtracks-page .hero-section-jump--floating {
  right: clamp(1rem, 3vw, 2rem) !important;
  z-index: 4300 !important;
}
@media (min-width: 1500px) {
  .no-safe-road-page .page-hero--no-safe-road {
    height: clamp(600px, calc(100vw * var(--ifs-banner-wide-ratio-v1000)), 1180px) !important;
    min-height: clamp(600px, calc(100vw * var(--ifs-banner-wide-ratio-v1000)), 1180px) !important;
  }
}
@media (max-width: 980px) {
  .soundtracks-page #audioControls {
    bottom: calc(clamp(1rem, 3vw, 1.4rem) + 3.25rem) !important;
  }
}

/* ================================================================
   IFS v1003 - corrected mobile portrait header patch
   Baseline: v1001 only.
   Scope: mobile phones in portrait only.
   - Raises the homepage globe/logo layer so the orb sits back into the
     left/right lightning convergence.
   - Stops Forum and Contact portrait banners being stretched vertically.
   No HTML, JavaScript, image, audio, download, or asset files are changed.
   ================================================================ */

@media (max-width: 760px) and (orientation: portrait) {
  /* HOME: the v1001 portrait composition sat the orb fractionally too low.
     Keep the scene cinematic, but lift the orb/mark back into the lightning. */
  .home-page .hero--home-refined .home-hero-layered-art {
    top: clamp(18px, 3.5svh, 34px) !important;
    width: min(108vw, 720px) !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art__base {
    transform: translateY(clamp(16px, 2.5svh, 28px)) scale(1.055) !important;
    transform-origin: center top !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 20.15% !important;
    width: 52% !important;
    transform: translateX(-50%) !important;
  }

  /* FORUM / CONTACT: wide cinematic source banners must crop on phones, not
     squeeze.  The overlay remains full-cover; the artwork preserves aspect. */
  .forum-page .page-hero--forum,
  .contact-page .page-hero--contact {
    margin-top: var(--nav-height) !important;
    min-height: clamp(540px, 74svh, 680px) !important;
    height: clamp(540px, 74svh, 680px) !important;
    overflow: hidden !important;
  }

  .forum-page .page-hero--forum::before,
  .contact-page .page-hero--contact::before {
    inset: 0 !important;
    background-size: 100% 100%, auto 100% !important;
    background-position: center center, center center !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  .forum-page .page-hero--forum::after,
  .contact-page .page-hero--contact::after {
    height: clamp(190px, 30svh, 300px) !important;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  /* Slightly tighter handsets need the orb a touch higher without changing
     desktop, tablet landscape, or the lower homepage globe section. */
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 19.85% !important;
  }
}

/* ================================================================
   IFS v1004 - targeted laptop/home and header blend patch
   Baseline: ifs1003_corrected_mobile_portrait_header_patch.zip.
   Scope: CSS only.
   - Extends the lower image-to-wallpaper blend on Resonance, No Safe Road,
     and Global Mandate so the artwork carries further into the page before
     giving way to the stone wallpaper.
   - Removes the laptop-width top gap on the homepage layered hero and keeps
     the globe/text away from the left-hand lightning convergence.
   No HTML, JavaScript, image, audio, download, or asset files are changed.
   ================================================================ */

/* Resonance uses the older .hero-banner header; keep the source art visible
   lower down before fading into the shared page wallpaper. */
.resonance-page .hero-banner::before {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 70%,
    rgba(0,0,0,0.94) 78%,
    rgba(0,0,0,0.68) 88%,
    rgba(0,0,0,0.28) 97%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 70%,
    rgba(0,0,0,0.94) 78%,
    rgba(0,0,0,0.68) 88%,
    rgba(0,0,0,0.28) 97%,
    transparent 100%) !important;
}

.resonance-page .hero-banner + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.72) 0%,
      rgba(13,13,13,0.34) 170px,
      rgba(13,13,13,0.00) 420px),
    url('../images/background_texture.webp') center top / var(--ifs-wallpaper-size-v1000, 600px 600px) repeat !important;
}

/* Global Mandate and No Safe Road share the newer page-hero system. Their
   artwork now remains present for longer, then feathers away at the bottom. */
.global-mandate-page .page-hero--global-mandate::before {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 68%,
    rgba(0,0,0,0.94) 77%,
    rgba(0,0,0,0.66) 88%,
    rgba(0,0,0,0.24) 97%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 68%,
    rgba(0,0,0,0.94) 77%,
    rgba(0,0,0,0.66) 88%,
    rgba(0,0,0,0.24) 97%,
    transparent 100%) !important;
}

.no-safe-road-page .page-hero--no-safe-road::before {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 66%,
    rgba(0,0,0,0.94) 76%,
    rgba(0,0,0,0.64) 88%,
    rgba(0,0,0,0.24) 97%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 66%,
    rgba(0,0,0,0.94) 76%,
    rgba(0,0,0,0.64) 88%,
    rgba(0,0,0,0.24) 97%,
    transparent 100%) !important;
}

.global-mandate-page .page-hero--global-mandate::after,
.no-safe-road-page .page-hero--no-safe-road::after {
  height: clamp(260px, 30vw, 560px) !important;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.02) 46%,
    rgba(0,0,0,0.07) 78%,
    rgba(0,0,0,0.00) 100%) !important;
}

.global-mandate-page .page-hero--global-mandate + section,
.no-safe-road-page .page-hero--no-safe-road + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(13,13,13,0.58) 0%,
      rgba(13,13,13,0.24) 170px,
      rgba(13,13,13,0.00) 430px),
    url('../images/background_texture.webp') center top / var(--ifs-wallpaper-size-v1000, 600px 600px) repeat !important;
}

/* Laptop-width homepage composition: remove the top spacer that can appear
   below the fixed header and keep the art/text clear of the lightning. */
@media (min-width: 1024px) and (max-width: 1499px) {
  .home-page .hero--home-refined .home-hero-layered-art {
    top: 0 !important;
    width: clamp(760px, 76vw, 1080px) !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art__base {
    transform: translateY(clamp(10px, 1.45vh, 22px)) scale(1.055) !important;
    transform-origin: center top !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art::after {
    transform: translateY(clamp(10px, 1.45vh, 22px)) scale(1.015) !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 14.25% !important;
    width: 42.5% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(23.5rem, 55svh, 34rem) !important;
  }
}

/* ================================================================
   IFS v1005 - work-PC header blend and homepage laptop alignment patch
   Baseline: ifs1004_laptop_home_and_header_blend_patch.zip.
   Scope: CSS only.
   - Resonance, No Safe Road, and Global Mandate now use the shared stone
     wallpaper as the true header background, with the artwork isolated in a
     masked pseudo-layer so the bottom dissolves rather than ending as a hard
     rectangular edge.
   - The following sections carry a quiet top fade over the same wallpaper,
     extending the visual blend below the hero without changing HTML or JS.
   - Laptop-width homepage hero art is raised to remove the visible black gap
     below the fixed navigation, while the globe/logo is lifted slightly and
     reduced fractionally so it no longer sits over the left-hand lightning.
   No HTML, JavaScript, image, audio, download, route, navigation, or asset
   files are changed.
   ================================================================ */

/* Resonance still uses the older .hero-banner structure, so force the source
   artwork into a single masked ::before layer and leave the actual hero surface
   as the site wallpaper. */
.resonance-page .hero-banner {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-color: #0d0d0d !important;
  background-image: url('../images/background_texture.webp') !important;
  background-repeat: repeat !important;
  background-size: var(--ifs-wallpaper-size-v1000, 600px 600px) !important;
  background-position: center top !important;
}

.resonance-page .hero-banner::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.06) 0%,
      rgba(0,0,0,0.00) 46%,
      rgba(0,0,0,0.06) 70%,
      rgba(0,0,0,0.14) 100%),
    url('../images/resonance_banner_safe.webp') !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center, center center !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 56%,
    rgba(0,0,0,0.96) 66%,
    rgba(0,0,0,0.78) 78%,
    rgba(0,0,0,0.48) 88%,
    rgba(0,0,0,0.18) 96%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 56%,
    rgba(0,0,0,0.96) 66%,
    rgba(0,0,0,0.78) 78%,
    rgba(0,0,0,0.48) 88%,
    rgba(0,0,0,0.18) 96%,
    transparent 100%) !important;
}

.resonance-page .hero-banner::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(260px, 34vw, 620px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.03) 38%,
    rgba(0,0,0,0.08) 68%,
    rgba(0,0,0,0.00) 100%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.resonance-page .hero-banner .banner-content {
  position: relative !important;
  z-index: 3 !important;
}

/* Newer project pages use page-hero. These three rules keep the image layer
   long enough to blend into the wallpaper and avoid the hard band seen on work
   PC widths. */
.global-mandate-page .page-hero--global-mandate,
.no-safe-road-page .page-hero--no-safe-road {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-color: #0d0d0d !important;
  background-image: url('../images/background_texture.webp') !important;
  background-repeat: repeat !important;
  background-size: var(--ifs-wallpaper-size-v1000, 600px 600px) !important;
  background-position: center top !important;
}

.global-mandate-page .page-hero--global-mandate::before,
.no-safe-road-page .page-hero--no-safe-road::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center, center center !important;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 54%,
    rgba(0,0,0,0.96) 65%,
    rgba(0,0,0,0.78) 78%,
    rgba(0,0,0,0.48) 89%,
    rgba(0,0,0,0.18) 96%,
    transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 54%,
    rgba(0,0,0,0.96) 65%,
    rgba(0,0,0,0.78) 78%,
    rgba(0,0,0,0.48) 89%,
    rgba(0,0,0,0.18) 96%,
    transparent 100%) !important;
}

.global-mandate-page .page-hero--global-mandate::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.07) 0%,
      rgba(0,0,0,0.00) 46%,
      rgba(0,0,0,0.06) 72%,
      rgba(0,0,0,0.15) 100%),
    url('../images/global-mandate-banner.webp') !important;
}

.no-safe-road-page .page-hero--no-safe-road::before {
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.07) 0%,
      rgba(0,0,0,0.00) 46%,
      rgba(0,0,0,0.07) 72%,
      rgba(0,0,0,0.16) 100%),
    url('../images/no-safe-road-banner.webp') !important;
}

.global-mandate-page .page-hero--global-mandate::after,
.no-safe-road-page .page-hero--no-safe-road::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: clamp(300px, 34vw, 660px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.03) 40%,
    rgba(0,0,0,0.09) 72%,
    rgba(0,0,0,0.00) 100%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Extend the landing into the first content section using the same wallpaper,
   rather than allowing a sudden switch to a visually separate stone block. */
.resonance-page .hero-banner + section,
.global-mandate-page .page-hero--global-mandate + section,
.no-safe-road-page .page-hero--no-safe-road + section {
  margin-top: -1px !important;
  background:
    linear-gradient(to bottom,
      rgba(5,8,10,0.34) 0%,
      rgba(5,8,10,0.18) 130px,
      rgba(5,8,10,0.00) 380px),
    url('../images/background_texture.webp') center top / var(--ifs-wallpaper-size-v1000, 600px 600px) repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Work-PC / laptop homepage correction. The fixed navbar already supplies the
   page offset; this lifts the artwork itself so no black spacer appears between
   the navbar and the cinematic image. */
@media (min-width: 1024px) and (max-width: 1499px) {
  .home-page .hero--home-refined {
    padding-top: clamp(0.75rem, 2svh, 1.8rem) !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art {
    top: clamp(-76px, -5.7vh, -48px) !important;
    width: clamp(800px, 78vw, 1120px) !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art__base {
    transform: translateY(0) scale(1.055) !important;
    transform-origin: center top !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art::after {
    transform: translateY(0) scale(1.01) !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 12.75% !important;
    width: 40.25% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(22.5rem, 53svh, 33rem) !important;
  }
}

/* Slightly taller laptop viewports can carry the same correction with a little
   less lift, avoiding over-cropping while still closing the visible top gap. */
@media (min-width: 1024px) and (max-width: 1499px) and (min-height: 850px) {
  .home-page .hero--home-refined .home-hero-layered-art {
    top: clamp(-64px, -4.8vh, -42px) !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 13.15% !important;
  }
}

/* ================================================================
   IFS v1006 - homepage laptop globe re-balance
   Baseline: ifs1005_workpc_header_blend_and_home_laptop_fix.zip.
   Scope: CSS only.
   - Keeps the work-PC/laptop top-gap fix from v1005.
   - Lowers only the homepage globe/logo layer after it was lifted too far.
   - Leaves header blends, page artwork, HTML, JS, and assets untouched.
   ================================================================ */
@media (min-width: 1024px) and (max-width: 1499px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 14.15% !important;
  }
}

@media (min-width: 1024px) and (max-width: 1499px) and (min-height: 850px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 14.45% !important;
  }
}

/* --------------------------------------------------------------------------
   v1007 — homepage desktop/work-PC globe rebalance
   - Lower the home hero globe and central logo overlay further on desktop so
     the globe no longer rides too high near the top edge on work-PC layouts.
   - Keep tablet/mobile positions unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .home-hero-layered-art__globe,
  .home-hero-layered-art__overlay {
    top: 24.6% !important;
  }
}

/* --------------------------------------------------------------------------
   v1008 — homepage globe specificity fix
   - The v1007 desktop lowering rule was too broad and could be outranked by
     earlier, more specific homepage rules.
   - This rule uses the same homepage-specific selector chain, placed last, so
     the desktop/work-PC globe and logo overlay actually move down as intended.
   - Tablet and mobile rules remain untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1499px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 24.6% !important;
  }
}

@media (min-width: 1500px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 23.2% !important;
  }
}


/* --------------------------------------------------------------------------
   v1009 — homepage globe calculated rebalance
   - Corrects the v1008 overcorrection. The previous 24.6% value moved the
     globe far too low on work-PC/laptop layouts.
   - Uses a smaller desktop-only adjustment from the v1006 position instead of
     a large percentage jump.
   - Tablet and mobile positioning remain untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1499px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 17.35% !important;
  }
}

@media (min-width: 1500px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 16.6% !important;
  }
}


/* --------------------------------------------------------------------------
   v1010 — homepage globe fine lowering
   - Fine adjustment from v1009 after work-PC screenshot confirmation.
   - Lowers only the homepage rotating globe and logo overlay by a small amount
     on laptop/work-PC and larger desktop widths.
   - Tablet/mobile positioning remains untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1499px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 17.85% !important;
  }
}

@media (min-width: 1500px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 17.10% !important;
  }
}

/* --------------------------------------------------------------------------
   v1011 — homepage globe final fine-lowering pass
   - Moves the homepage globe/logo overlay down one further small fraction on
     work-PC/laptop and larger desktop widths.
   - Tablet and mobile positioning remain untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1499px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 18.25% !important;
  }
}

@media (min-width: 1500px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 17.50% !important;
  }
}

/* --------------------------------------------------------------------------
   v1012 — homepage globe and headline copy lower
   - Moves the homepage globe/logo overlay down another measured fraction on
     work-PC/laptop widths after screenshot confirmation.
   - Moves the hero writing down as well so the visual relationship between
     orb, lightning, and headline remains balanced.
   - Tablet and mobile positioning remain untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1499px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 19.05% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(23.25rem, 55svh, 34rem) !important;
  }
}

@media (min-width: 1500px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 18.25% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(23.25rem, 54svh, 34rem) !important;
  }
}

/* --------------------------------------------------------------------------
   v1013 — homepage globe/copy fine lower plus bottom wallpaper blend
   - Moves the homepage globe/logo overlay down one further small fraction on
     work-PC/laptop and larger desktop widths.
   - Moves the homepage hero writing down by the same visual step.
   - Adds a desktop-only bottom wallpaper blend over the home hero so the image
     feathers into the site background rather than ending as a hard dark edge.
   - Tablet/mobile positioning remains untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1499px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 19.45% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(23.75rem, 56.25svh, 34.75rem) !important;
  }

  .home-page .hero--home-refined::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: clamp(220px, 34svh, 360px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background:
      linear-gradient(to bottom,
        rgba(13,13,13,0.00) 0%,
        rgba(13,13,13,0.16) 24%,
        rgba(13,13,13,0.54) 58%,
        rgba(13,13,13,0.90) 86%,
        rgba(13,13,13,1.00) 100%),
      url('../images/background_texture.webp') center bottom / var(--ifs-wallpaper-size-v1000, 600px 600px) repeat !important;
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.24) 22%,
      rgba(0,0,0,0.82) 58%,
      rgba(0,0,0,1) 100%) !important;
    mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.24) 22%,
      rgba(0,0,0,0.82) 58%,
      rgba(0,0,0,1) 100%) !important;
  }
}

@media (min-width: 1500px) {
  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 18.65% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(23.75rem, 55.25svh, 34.75rem) !important;
  }

  .home-page .hero--home-refined::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: clamp(240px, 32svh, 380px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background:
      linear-gradient(to bottom,
        rgba(13,13,13,0.00) 0%,
        rgba(13,13,13,0.16) 24%,
        rgba(13,13,13,0.54) 58%,
        rgba(13,13,13,0.90) 86%,
        rgba(13,13,13,1.00) 100%),
      url('../images/background_texture.webp') center bottom / var(--ifs-wallpaper-size-v1000, 600px 600px) repeat !important;
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.24) 22%,
      rgba(0,0,0,0.82) 58%,
      rgba(0,0,0,1) 100%) !important;
    mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.24) 22%,
      rgba(0,0,0,0.82) 58%,
      rgba(0,0,0,1) 100%) !important;
  }
}

/* --------------------------------------------------------------------------
   v1014 — homepage blend quality pass and final fine lowering
   - Moves the home globe/logo and hero copy down one further small fraction.
   - Reworks the home hero bottom transition to behave like the Games header:
     the hero itself becomes transparent over the site wallpaper, the lower
     darkening is gentle, and no wallpaper slab is painted over the text layer.
   - Desktop/work-PC only; tablet/mobile positioning remains untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1499px) {
  .home-page .hero--home-refined,
  .home-page .hero--studio.hero--home-refined {
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 19.85% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(24.25rem, 57.25svh, 35.25rem) !important;
  }

  .home-page .hero--home-refined::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 1 !important;
    transform: none !important;
    background:
      radial-gradient(circle at 50% 24%, rgba(255,186,8,0.08), transparent 26%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.02) 0%,
        rgba(0,0,0,0.06) 18%,
        rgba(0,0,0,0.22) 44%,
        rgba(13,13,13,0.42) 72%,
        rgba(13,13,13,0.18) 100%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .home-page .hero--home-refined::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: clamp(160px, 24svh, 260px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: linear-gradient(to bottom,
      rgba(13,13,13,0.00) 0%,
      rgba(13,13,13,0.08) 48%,
      rgba(13,13,13,0.16) 100%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

@media (min-width: 1500px) {
  .home-page .hero--home-refined,
  .home-page .hero--studio.hero--home-refined {
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art__globe,
  .home-page .hero--home-refined .home-hero-layered-art__overlay {
    top: 19.05% !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    margin-top: clamp(24.25rem, 56.25svh, 35.25rem) !important;
  }

  .home-page .hero--home-refined::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 1 !important;
    transform: none !important;
    background:
      radial-gradient(circle at 50% 24%, rgba(255,186,8,0.08), transparent 26%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.02) 0%,
        rgba(0,0,0,0.06) 18%,
        rgba(0,0,0,0.22) 44%,
        rgba(13,13,13,0.42) 72%,
        rgba(13,13,13,0.18) 100%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .home-page .hero--home-refined::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: clamp(170px, 22svh, 280px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: linear-gradient(to bottom,
      rgba(13,13,13,0.00) 0%,
      rgba(13,13,13,0.08) 48%,
      rgba(13,13,13,0.16) 100%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* --------------------------------------------------------------------------
   v1015 — homepage Games-style bottom blend correction
   - The v1014 home transition still allowed the layered art rectangle to end
     as a visible hard edge above the wallpaper.
   - This pass treats the home hero like the Games page: the site wallpaper is
     present behind the hero, the artwork layer fades out vertically at the
     bottom, and a tall wallpaper/black blend sits above the art but below the
     text/buttons.
   - Desktop/work-PC only; tablet/mobile positioning remains untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .home-page .hero--home-refined,
  .home-page .hero--studio.hero--home-refined {
    position: relative !important;
    background:
      url('../images/background_texture.webp') center bottom / var(--ifs-wallpaper-size-v1000, 600px 600px) repeat !important;
    background-color: #050709 !important;
    overflow: hidden !important;
  }

  .home-page .hero--home-refined .home-hero-layered-art {
    -webkit-mask-image:
      linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.18) 7%,
        rgba(0,0,0,0.78) 16%,
        rgba(0,0,0,1) 24%,
        rgba(0,0,0,1) 76%,
        rgba(0,0,0,0.78) 84%,
        rgba(0,0,0,0.18) 93%,
        rgba(0,0,0,0) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 66%,
        rgba(0,0,0,0.88) 78%,
        rgba(0,0,0,0.54) 90%,
        rgba(0,0,0,0) 100%) !important;
    mask-image:
      linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.18) 7%,
        rgba(0,0,0,0.78) 16%,
        rgba(0,0,0,1) 24%,
        rgba(0,0,0,1) 76%,
        rgba(0,0,0,0.78) 84%,
        rgba(0,0,0,0.18) 93%,
        rgba(0,0,0,0) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 66%,
        rgba(0,0,0,0.88) 78%,
        rgba(0,0,0,0.54) 90%,
        rgba(0,0,0,0) 100%) !important;
    -webkit-mask-repeat: no-repeat, no-repeat !important;
    mask-repeat: no-repeat, no-repeat !important;
    -webkit-mask-size: 100% 100%, 100% 100% !important;
    mask-size: 100% 100%, 100% 100% !important;
    -webkit-mask-composite: source-in !important;
    mask-composite: intersect !important;
  }

  .home-page .hero--home-refined::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -2px !important;
    top: auto !important;
    height: clamp(340px, 44svh, 560px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background:
      linear-gradient(to bottom,
        rgba(5,7,9,0.00) 0%,
        rgba(5,7,9,0.06) 18%,
        rgba(5,7,9,0.18) 34%,
        rgba(5,7,9,0.40) 54%,
        rgba(5,7,9,0.72) 76%,
        rgba(5,7,9,0.94) 100%),
      url('../images/background_texture.webp') center bottom / var(--ifs-wallpaper-size-v1000, 600px 600px) repeat !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .home-page .hero--home-refined::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background:
      radial-gradient(circle at 50% 24%, rgba(255,186,8,0.08), transparent 26%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.02) 0%,
        rgba(0,0,0,0.04) 18%,
        rgba(0,0,0,0.12) 44%,
        rgba(0,0,0,0.28) 72%,
        rgba(0,0,0,0.42) 100%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    position: relative !important;
    z-index: 5 !important;
  }
}

/* --------------------------------------------------------------------------
   v1016 — homepage bottom blend-only repair from v1015
   Scope: CSS only, homepage hero transition only.
   Keeps the approved desktop positioning and side fade intact. The lower
   wallpaper reveal is now feathered instead of being painted as an opaque slab,
   allowing the image to remain visible beneath the buttons before dissolving
   into the site wallpaper at the hero boundary.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .home-page .hero--home-refined,
  .home-page .hero--studio.hero--home-refined {
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  .home-page .hero--home-refined::before {
    --ifs-home-bottom-blend-height-v1016: clamp(150px, 22svh, 260px);
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    top: auto !important;
    height: var(--ifs-home-bottom-blend-height-v1016) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background-image: url('../images/background_texture.webp') !important;
    background-repeat: repeat !important;
    background-size: var(--ifs-wallpaper-size-v1000, 600px 600px) !important;
    background-position: center calc(var(--ifs-home-bottom-blend-height-v1016) - 100svh) !important;
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.00) 16%,
      rgba(0,0,0,0.18) 34%,
      rgba(0,0,0,0.50) 58%,
      rgba(0,0,0,0.86) 82%,
      rgba(0,0,0,1.00) 100%) !important;
    mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.00) 16%,
      rgba(0,0,0,0.18) 34%,
      rgba(0,0,0,0.50) 58%,
      rgba(0,0,0,0.86) 82%,
      rgba(0,0,0,1.00) 100%) !important;
  }

  .home-page .hero--home-refined::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background:
      radial-gradient(circle at 50% 24%, rgba(255,186,8,0.08), transparent 26%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.02) 0%,
        rgba(0,0,0,0.04) 18%,
        rgba(0,0,0,0.12) 44%,
        rgba(0,0,0,0.24) 72%,
        rgba(0,0,0,0.12) 90%,
        rgba(0,0,0,0.00) 100%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .home-page .hero-content--brand,
  .home-page .hero-content--home-refined {
    position: relative !important;
    z-index: 5 !important;
  }

  .home-page .hero--home-refined + .intro-band {
    margin-top: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
  }
}


/* --------------------------------------------------------------------------
   v10.17 — Resonance species image library asset placement.
   Keeps supplied square species portraits uncropped while leaving Alberenar race
   portrait handling and all game/page header images untouched.
   -------------------------------------------------------------------------- */
.resonance-page .race-library-section--resonance .race-image-slot--image {
  aspect-ratio: 1 / 1 !important;
  border: 1px solid rgba(82, 220, 255, 0.24) !important;
  border-radius: 18px !important;
  background: #050608 !important;
}
.resonance-page .race-library-section--resonance .race-image-slot--image img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* --------------------------------------------------------------------------
   v10.18 — Pactsmiths game artwork and Resonance species library correction.
   Pactsmiths card/home artwork uses a clean 2:3 crop with no baked-in bands.
   Resonance species cards now mirror the Alberenar race portrait dimensions
   and use the same hover/enlarge affordance and clickable buttons.
   -------------------------------------------------------------------------- */
.game-card-grid .game-card--pactsmiths > img,
.home-project-card.world-card--pactsmiths img {
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  background: #050505 !important;
}

.resonance-page .race-library-section--resonance .race-library-card--has-image {
  padding: 0 !important;
}
.resonance-page .race-library-section--resonance .race-library-card--has-image h3,
.resonance-page .race-library-section--resonance .race-library-card--has-image p {
  padding-left: clamp(1rem, 2vw, 1.35rem) !important;
  padding-right: clamp(1rem, 2vw, 1.35rem) !important;
}
.resonance-page .race-library-section--resonance .race-library-card--has-image p {
  padding-bottom: clamp(1rem, 2vw, 1.35rem) !important;
}
.resonance-page .race-library-section--resonance .race-image-slot--image {
  min-height: 0 !important;
  aspect-ratio: 3 / 4 !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  border: 0 !important;
  border-radius: 24px 24px 18px 18px !important;
  overflow: hidden !important;
  background: #050608 !important;
  display: block !important;
  position: relative !important;
}
.resonance-page .race-library-section--resonance .race-image-slot--image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: saturate(1.02) contrast(1.03) !important;
  transition: transform 700ms ease, filter 700ms ease !important;
}
.resonance-page .race-library-section--resonance .race-library-card--has-image:hover .race-image-slot--image img {
  transform: scale(1.025) !important;
  filter: saturate(1.06) contrast(1.05) !important;
}
.resonance-page .race-library-card--has-image .race-image-slot--image,
.resonance-page .race-library-card--has-image .race-image-slot--image img {
  cursor: zoom-in !important;
}
.resonance-page .race-library-card--has-image .race-image-slot--image::after {
  content: "Enlarge Image" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 0.8rem !important;
  bottom: 0.8rem !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(82, 220, 255, 0.42) !important;
  background: rgba(0, 0, 0, 0.62) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.22s ease !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
.resonance-page .race-library-card--has-image:hover .race-image-slot--image::after,
.resonance-page .race-library-card--has-image:focus-within .race-image-slot--image::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
  border-color: rgba(82, 220, 255, 0.78) !important;
}
.resonance-page .race-carousel-lightbox {
  background:
    radial-gradient(circle at 50% 14%, rgba(82, 220, 255, 0.18), transparent 34%),
    rgba(0,0,0,0.92) !important;
}
.resonance-page .race-carousel-lightbox .race-lightbox-image {
  box-shadow: 0 0 0 1px rgba(82, 220, 255, 0.28), 0 24px 78px rgba(0,0,0,0.78) !important;
}
.resonance-page .race-carousel-lightbox .race-lightbox-caption {
  border-color: rgba(82, 220, 255, 0.24) !important;
}

/* --------------------------------------------------------------------------
   v1020 — Resonance map explorer and safe cleanup pass
   --------------------------------------------------------------------------
   Adds the Resonance interstellar map to the Resonance page using the existing
   Alberenar map explorer mechanics. Page-specific styling only; no JavaScript
   behaviour is changed.
   -------------------------------------------------------------------------- */
.game-page-guide--resonance,
.map-archive-section--resonance,
.race-library-section--resonance,
.resonance-page .modular-section,
.resonance-page .deep-dive-section {
  background:
    radial-gradient(circle at 74% 10%, rgba(35,210,255,0.10), transparent 34%),
    linear-gradient(to bottom, rgba(13,13,13,0.00), rgba(13,13,13,0.82) 18%, rgba(13,13,13,0.90) 82%, rgba(13,13,13,0.00)),
    url('../images/background_texture.webp') center center / 620px 620px repeat !important;
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
.map-archive-section--resonance::before,
.map-archive-section--resonance::after,
.resonance-page .map-explorer-section::before,
.resonance-page .map-explorer-section::after {
  content: none !important;
  display: none !important;
}
.resonance-page .map-explorer-shell {
  border-color: rgba(35,210,255,0.38) !important;
  background: linear-gradient(145deg, rgba(4,20,29,0.94), rgba(3,5,9,0.97)) !important;
  box-shadow: 0 24px 74px rgba(0,0,0,0.66), 0 0 42px rgba(35,210,255,0.14) !important;
}
.resonance-page .map-explorer-viewport {
  background: #020509 !important;
}



/* Homepage construction notice
   Surgical v1024 refinement: fixed notice to the top-left of the homepage hero image,
   directly beneath the main black navigation banner/logo area. */
.home-page .hero--home-refined > .site-construction-seal {
  position: absolute;
  top: clamp(0.95rem, 1.8vw, 1.35rem);
  left: clamp(1.15rem, 2.4vw, 2rem);
  z-index: 8;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: stretch;
  width: min(430px, calc(100vw - 2.3rem));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: rgba(8, 10, 16, 0.56);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), 0 0 14px rgba(118, 20, 26, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.home-page .hero--home-refined > .site-construction-seal .site-construction-seal__stripe {
  display: block;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 246, 240, 0.68) 0,
      rgba(255, 246, 240, 0.68) 5px,
      rgba(104, 18, 25, 0.72) 5px,
      rgba(104, 18, 25, 0.72) 10px
    );
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.home-page .hero--home-refined > .site-construction-seal .site-construction-seal__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.24rem;
  padding: 0.72rem 0.9rem 0.76rem 0.9rem;
  text-align: left;
}

.home-page .hero--home-refined > .site-construction-seal .site-construction-seal__copy strong {
  color: #fff4f4;
  font-size: clamp(0.72rem, 0.86vw, 0.86rem);
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-transform: uppercase;
}

.home-page .hero--home-refined > .site-construction-seal .site-construction-seal__copy span {
  color: rgba(255, 236, 210, 0.88);
  font-size: clamp(0.68rem, 0.8vw, 0.78rem);
  line-height: 1.35;
}

@media (max-width: 900px) {
  .home-page .hero--home-refined > .site-construction-seal {
    top: 0.85rem;
    left: clamp(0.9rem, 4vw, 1.5rem);
    width: min(390px, calc(100vw - 1.8rem));
  }
}

@media (max-width: 520px) {
  .home-page .hero--home-refined > .site-construction-seal {
    grid-template-columns: 8px minmax(0, 1fr);
    top: 0.75rem;
    left: 0.85rem;
    width: calc(100vw - 1.7rem);
    border-radius: 12px;
  }

  .home-page .hero--home-refined > .site-construction-seal .site-construction-seal__copy {
    padding: 0.62rem 0.72rem;
  }
}

/* 404 page */
.not-found-page {
  min-height: 100vh;
}

.not-found-shell {
  width: min(960px, calc(100% - 2rem));
  margin: 0 auto;
  padding: calc(var(--nav-height) + 7rem) 1.25rem 7rem;
  text-align: center;
}

.not-found-shell h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  letter-spacing: 0.04em;
}

.not-found-shell p {
  max-width: 680px;
  margin: 0 auto 2rem;
  color: var(--text-muted);
  font-size: 1.08rem;
}

.not-found-shell .hero-actions {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   v1025 — Tools readability and construction-stripe motion refinements
   --------------------------------------------------------------------------
   Surgical Cloudflare preview correction only: lower the Tools hero copy,
   remove the broad orange haze from the Forge Prompt Generators area, and add
   subtle motion to the homepage under-construction stripe. No JavaScript or
   asset changes are required.
   -------------------------------------------------------------------------- */
.tools-page .page-hero--tools .page-hero-content {
  transform: translateY(clamp(-72px, -4.2vw, -28px)) !important;
}

@media (max-width: 760px) {
  .tools-page .page-hero--tools .page-hero-content {
    transform: none !important;
  }
}

.tools-page .forge-generator-section,
.tools-page #forge-generators {
  position: relative !important;
  isolation: isolate !important;
  background: url('../images/background_texture.webp') center center / 620px 620px repeat !important;
}

.tools-page .forge-generator-section::before,
.tools-page .forge-generator-section::after,
.tools-page #forge-generators::before,
.tools-page #forge-generators::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

.tools-page .forge-generator-grid--expanded {
  background: transparent !important;
  box-shadow: none !important;
}

.tools-page .forge-generator-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.008)),
    rgba(6, 5, 5, 0.84) !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.24), 0 12px 34px rgba(0,0,0,0.42) !important;
}

.tools-page .forge-generator-output,
.tools-page .forge-generator-output--expedition {
  background: rgba(2, 2, 3, 0.56) !important;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.30) !important;
}

@keyframes ifsConstructionStripeScroll {
  from { background-position: 0 0; }
  to { background-position: 0 24px; }
}

.home-page .hero--home-refined > .site-construction-seal .site-construction-seal__stripe {
  background-size: 24px 24px !important;
  animation: ifsConstructionStripeScroll 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero--home-refined > .site-construction-seal .site-construction-seal__stripe {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   v1026 — Construction stripe seam correction
   --------------------------------------------------------------------------
   CSS-only refinement: remove the tiled background-size that caused clipped
   red/white stripe fragments during animation, slightly widen the stripe for
   cleaner diagonal bands, and keep reduced-motion behaviour intact.
   -------------------------------------------------------------------------- */
.home-page .hero--home-refined > .site-construction-seal {
  grid-template-columns: 12px minmax(0, 1fr);
}

.home-page .hero--home-refined > .site-construction-seal .site-construction-seal__stripe {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 246, 240, 0.72) 0,
      rgba(255, 246, 240, 0.72) 7px,
      rgba(104, 18, 25, 0.78) 7px,
      rgba(104, 18, 25, 0.78) 14px
    ) !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  animation: ifsConstructionStripeScroll 1.8s linear infinite;
}

@media (max-width: 520px) {
  .home-page .hero--home-refined > .site-construction-seal {
    grid-template-columns: 10px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero--home-refined > .site-construction-seal .site-construction-seal__stripe {
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   v1027 — Construction stripe motion restoration
   --------------------------------------------------------------------------
   CSS-only refinement: restore visible motion without reintroducing clipped
   stripe seams by animating an oversized pseudo-element behind the narrow
   stripe window instead of moving a tiled background on the stripe itself.
   -------------------------------------------------------------------------- */
@keyframes ifsConstructionStripePanelScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -19.8px, 0); }
}

.home-page .hero--home-refined > .site-construction-seal .site-construction-seal__stripe {
  position: relative;
  overflow: hidden;
  background: rgba(24, 8, 10, 0.46) !important;
  background-size: auto !important;
  animation: none !important;
}

.home-page .hero--home-refined > .site-construction-seal .site-construction-seal__stripe::before {
  content: "";
  position: absolute;
  inset: -32px -24px;
  display: block;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 246, 240, 0.72) 0,
      rgba(255, 246, 240, 0.72) 7px,
      rgba(104, 18, 25, 0.78) 7px,
      rgba(104, 18, 25, 0.78) 14px
    );
  animation: ifsConstructionStripePanelScroll 1.6s linear infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero--home-refined > .site-construction-seal .site-construction-seal__stripe::before {
    animation: none !important;
  }
}