/* devolution-styles7.css
   Purpose:
   - Change base layout so premise + screenshot sit below the hero (in normal flow) and are pushed further down.
   - Provide robust fallbacks so if premise/screenshot remain inside .devolution-hero-panel they will still be pushed down.
   - Ensure project objective & stills are always below the hero + lower area.
   - Mobile-first; media queries for >=1920px (120rem) and >=2560px (160rem).
   - Units normalized (1rem = 16px). Tweak values in the large-screen media queries to taste.
*/

/* ===========================
   ROOT VARIABLES
   =========================== */
:root {
  font-size: 16px;

  /* Base spacing values (tweak if desired) */
  --lower-gap: 4vw;                 /* gap between premise and screenshot columns */
  --lower-max-width: 90rem;         /* max width of lower layout container */
  --lower-margin-base: 4.5rem;      /* base space between hero and lower layout on small screens */
  --lower-margin-lg: 60rem;         /* space between hero and lower layout at >=1920px */
  --lower-margin-xl: 80rem;         /* space between hero and lower layout at >=2560px */

  --screenshot-width: 34.375rem;    /* 550px */
  --premise-width: 18.75rem;        /* 300px */
  --hero-padding-bottom-fallback-lg: 62rem;  /* extra padding-bottom on hero when premise remains inside */
  --hero-padding-bottom-fallback-xl: 82rem;
}



/* Container */
.devolution-content {
  min-height: 180vh;
  position: relative;
  background: #e8e8e8;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}

/* HERO PANEL: artwork remains absolutely positioned; hero content flows above the page */
.devolution-hero-panel {
  width: 100%;
  min-height: 54vh;
  height: 55vh;
  max-height: 58vh;
  display: block;     /* allow blocks below to flow naturally */
  margin: 0;
  box-sizing: border-box;
   position: relative; /* anchor for absolute placement */
  overflow: visible; 
}

/* HERO ART (kept compact) */
.devolution-cloud{position:absolute; top:-3.125rem; right:7vw; width:25rem; z-index:2; pointer-events:none;}
.devolution-cloud.devolution-cloud-2{position:absolute; top:5.625rem; right:-4vw; width:23.125rem; opacity:0.7; z-index:2;}
.devolution-pterodactyl{position:absolute; left:-6.25rem; top:-12.5rem; width:34.375rem; z-index:3; pointer-events:none; transform:scaleX(-1);}
.devolution-devlogo{position:absolute; left:50%; top:15.625rem; transform:translateX(-50%); width:43.75rem; z-index:6;}
.devolution-treetop{position:absolute; left:-18.75rem; top:10.375rem; width:31.25rem; z-index:4;}
.devolution-tree{position:absolute; right:-15.625rem; top:22.5rem; width:39.375rem; min-height:20.625rem; z-index:0;}

/* Title & description stay centered inside the hero */
.devolution-title-group {
  position: relative;
  margin: 0 auto;
  top: 4.6875rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.devolution-description {
  font-size: 0.75rem;
  width: 16.25rem;
  text-align: center;
  color: #000;
  margin: 0 auto;
  margin-top: 21.875rem;
  letter-spacing: 0.004em;
  line-height: 1.45;
  box-sizing: border-box;
}

/* ===========================
   LOWER LAYOUT 
   - This is the recommended base format: place this block AFTER .devolution-hero-panel in HTML.
   - It sits in normal flow and will be pushed down by margin-top; objective follows below.
   =========================== */
.devolution-lower-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--lower-gap);
  width: 100%;
  max-width: var(--lower-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  margin-top: var(--lower-margin-base);
  z-index: 2;
  margin-bottom: 5rem;
}

/* Premise column */
.devolution-premise-section {
  width: var(--premise-width);
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}
.devolution-premise-heading {
  background: #000;
  color: #e8e8e8;
  font-size: 1.3rem;
  padding: 0.125rem 0.75rem;
  display: inline-block;
  margin-bottom: 1rem;
  font-style: italic;
  letter-spacing: 0.04em;
}
.devolution-premise-box {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  padding: 2.8125rem;
  font-size: 0.75rem;
  color: #18171c;
  text-align: justify;
  width: 100%;
  box-sizing: border-box;
}

/* Screenshot column */
.devolution-screenshot-section {
  width: var(--screenshot-width);
  min-width: 14rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.devolution-screenshot-frame {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;


    max-width: 80vw;
  box-sizing: border-box;
}
.devolution-screenshot-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
}

/* ===========================
   OBJECTIVE / STILLS block (must appear below hero + lower layout)
   - Keep this in your HTML after the lower layout (or we will push it down via CSS).
   =========================== */
.devolution-objective-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5vw;
  width: 100%;
  max-width: 81.25rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem; /* will be increased in large screens */
  min-height: 60vh;
  box-sizing: border-box;
  z-index: 2;
}
.devolution-stills-grid { display:flex; flex-direction:column; gap:1.5vw; align-items:flex-end; }
.devolution-still-img { width:15.625rem; height:auto; object-fit:cover; box-shadow: 0 0.1875rem 0.75rem rgba(0,0,0,0.06); }
.devolution-objective-section { width: 18.75rem; min-width: 15.625rem; margin-left: 2rem; box-sizing:border-box; }
.devolution-objective-box { background: rgba(255,255,255,0.5); padding: 2.8125rem; font-size:0.75rem; width:100%; max-width:26.875rem; }

/* ===========================
   FALLBACK: if HTML still contains premise/screenshot INSIDE .devolution-hero-panel
   (we provide CSS to push them down by adding bottom padding to the hero and using margins)
   - This lets you keep older HTML temporarily without layout breakage.
   - Recommended: move premise/screenshot out to .devolution-lower-layout for cleaner semantics.
   =========================== */

/* When premise/screenshot are children of hero, force them into flow (no absolute) and push hero padding */
.devolution-hero-panel > .devolution-premise-section,
.devolution-hero-panel > .devolution-screenshot-section {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 1rem auto !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  z-index: 12;
}

/* Add extra bottom spacing inside the hero to make room for the forced children */
.devolution-hero-panel {
  padding-bottom: calc(var(--lower-margin-base) + 6rem);
}

/* ===========================
   RESPONSIVE / SMALL-SCREEN behavior
   =========================== */

@media (max-width: 900px) {
  /* Stack lower layout vertically and reduce spacing */
  .devolution-lower-layout {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .devolution-premise-section { width: 95vw; max-width: 640px; align-items:center; }
  .devolution-premise-box { width: 100%; }
  .devolution-screenshot-section { width: 95vw; max-width: 640px; margin-top: 0; }
  .devolution-screenshot-frame { width: 100%; }
  .devolution-objective-layout { margin-top: 2rem; }
  /* If hero still has children forced inside, reduce hero padding on mobile */
  .devolution-hero-panel { padding-bottom: calc(var(--lower-margin-base) + 1.5rem); }
}

/* ===========================
   LARGE-SCREEN ADJUSTMENTS (desktop & ultra-wide)
   - These media queries increase the vertical spacing so the lower layout and objective are clearly below the hero art.
   - Provide explicit values for >=1920px and >=2560px.
   =========================== */

/* >= 1920px */
@media (min-width: 120rem) {
  .devolution-lower-layout {
    margin-top: var(--lower-margin-lg) !important;
    max-width: 140rem;
    gap: clamp(2rem, 4vw, 6rem);
  }

  /* Provide extra bottom padding to hero when older HTML is still used */
  .devolution-hero-panel { padding-bottom: var(--hero-padding-bottom-fallback-lg); }

  .devolution-screenshot-frame { width: clamp(34.375rem, 30vw, 59.375rem) !important; }
  .devolution-premise-section { width: clamp(17rem, 20vw, 31.25rem) !important; }

  /* Ensure objective block begins well below the lower-layout */
  .devolution-objective-layout { margin-top: calc(var(--lower-margin-lg) + 6rem) !important; max-width: 140rem; }
  .devolution-stills-grid { gap: clamp(1.5vw, 2.5vw, 4vw) !important; }
}

/* >= 2560px */
@media (min-width: 160rem) {
  .devolution-lower-layout {
    margin-top: var(--lower-margin-xl) !important;
    gap: clamp(3rem, 5vw, 7rem);
    max-width: 200rem;
  }

  /* hero fallback padding */
  .devolution-hero-panel { padding-bottom: var(--hero-padding-bottom-fallback-xl); }

  .devolution-screenshot-frame { width: clamp(34.375rem, 40vw, 80rem) !important; }
  .devolution-premise-section { width: clamp(20rem, 26vw, 36rem) !important; }

  .devolution-objective-layout { margin-top: calc(var(--lower-margin-xl) + 8rem) !important; }
  .devolution-stills-grid { gap: clamp(2vw, 3.2vw, 5vw) !important; }
}

/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .devolution-pterodactyl,
  .devolution-cloud,
  .devolution-cloud.devolution-cloud-2,
  .devolution-bronto-img {
    transition: none !important;
    animation: none !important;
  }
}

/* End of devolution-styles7.css */








/* --- OBJECTIVE BLOCK AND GAME STILLS --- */

.devolution-objective-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5vw;
  width: 100%;
  max-width: 81.25rem;      /* 1300px -> 81.25rem */
  margin: 0 auto;
  min-height: 100vh;
  box-sizing: border-box;
  background: none;
  margin-top: 70rem;    /* 350px -> 21.875rem */
  margin-bottom: 0;
  position: relative;
  z-index: 2;
  padding-top: 0rem;
  padding-bottom: 0;
}


/* ---- GAME STILLS GRID (LEFT) ---- */
.devolution-stills-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
  margin-top: 0;
  margin-left: 0;
  align-items: flex-end;
}
.devolution-stills-grid .grid-row {
  display: flex;
  gap: 1.5vw;
}
.devolution-still-img {
  width: 250px;
  height: auto;
  object-fit: cover;
  background: transparent;
  box-shadow: 0 3px 12px #0001,0 1px 1px #2221;
}

@media (max-width: 1100px) {
  .devolution-objective-layout {
    flex-direction: column;
    align-items: center;
  }
  .devolution-stills-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.4vw;
    margin-bottom: 2.2rem;
    align-items: flex-start;
    justify-content: center;
  }
  .devolution-stills-grid .grid-row {
    flex-direction: column;
    gap: 1.4vw;
  }
  .devolution-still-img {
    width: 39vw;
    max-width: 245px;
    min-width: 120px;
    height: 20vw;
    max-height: 120px;
    min-height: 70px;
    margin-bottom: 0.6vw;
  }
}


/* --- ENTRY ANIMATION FOR DEVOLUTION STILLS --- */
.devolution-still-img {
  opacity: 0;
  transform: translateX(-80px);
  transition: 
    opacity 0.7s cubic-bezier(0.17,0.67,0.53,0.97),
    transform 0.7s cubic-bezier(0.17,0.67,0.53,0.97);
}

/* When .in-view class is applied, image animates in */
.devolution-still-img.in-view {
  opacity: 1;
  transform: none;
}

/* Optional: Staggering timing (JS sets delays per image, so nothing extra needed in CSS here) */

/* Responsive tweaks if needed */
@media (max-width: 600px) {
  .devolution-still-img {
    width: 40vw;
    min-width: 0;
  }
}





/* ---- OBJECTIVE BLOCK (RIGHT) ---- */
.devolution-objective-section {
  width: 18.75rem;          /* 300px -> 18.75rem */
  min-width: 15.625rem;     /* 250px -> 15.625rem */
  margin-left: 9.375rem;    /* 150px -> 9.375rem */
  margin-top: 2.8125rem;    /* 45px -> 2.8125rem */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.devolution-objective-heading {
  background: #000000;
  color: #e8e8e8;
  font-size: 1.3rem;
  padding: 0.375rem 1.125rem; /* 6px 18px -> 0.375rem 1.125rem */
  display: inline-block;
  margin-bottom: 1.15rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
  font-style: italic;
}

/* Box: convert shadows and padding to rem equivalents */
.devolution-objective-box {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    0 0.5rem 1rem rgba(0, 0, 0, 0.10), /* 8px 16px -> 0.5rem 1rem */
    0 0.15625rem 0.375rem #2221;      /* 2.5px 6px -> 0.15625rem 0.375rem */
  padding: 2.8125rem;      /* 45px -> 2.8125rem (all sides) */
  font-size: 0.75rem;
  letter-spacing: 0.002em;
  color: #000000;
  text-align: justify;
  width: 18.75rem;         /* 300px -> 18.75rem */
  max-width: 26.875rem;    /* 430px -> 26.875rem */
  line-height: 1.73;
  box-sizing: border-box;
}



/* Responsive overrides for .devolution-objective-box
   - Adds media-query scaling up to 2560px (160rem)
   - Keeps look & feel; increases padding, font-size, width, and shadow progressively
   - Mobile-first base assumed already defined (keeps original base styles)
*/

/* ---------- Desktop / Large (>= 1920px / 120rem) ---------- */
@media (min-width: 120rem) {
  .devolution-objective-box {
    /* increase padding for breathing room on large screens */
    padding: clamp(2.8125rem, 2.4vw, 3.25rem); /* ~45px -> up to ~52px */

    /* increase readable font size while staying proportional */
    font-size: clamp(0.9rem, 0.9vw, 1.05rem);

    /* slightly wider box but still constrained */
    width: clamp(18.75rem, 18vw, 28rem);       /* 300px -> up to ~448px */
    max-width: clamp(26.875rem, 26vw, 40rem);  /* 430px -> up to ~640px */

    /* subtle stronger shadow to match larger scale */
    box-shadow:
      0 0.75rem 1.6rem rgba(0,0,0,0.12),
      0 0.21875rem 0.625rem #2221;

    line-height: 1.85;
  }
}

/* ---------- Ultra-wide / 2560px and above (>= 160rem) ---------- */
@media (min-width: 160rem) {
  .devolution-objective-box {
    /* more generous padding on ultra-wide displays */
    padding: clamp(3.25rem, 3.2vw, 4.5rem); /* up to ~72px */

    /* larger body text for legibility at distance */
    font-size: clamp(1rem, 1.05vw, 1.25rem);

    /* increase width so the box reads like a panel on very wide layouts */
    width: clamp(20rem, 20vw, 36rem);       /* up to ~576px */
    max-width: clamp(34rem, 34vw, 72rem);   /* allow roomy max on ultra-wide if desired */

    /* stronger depth on large screens */
    box-shadow:
      0 1rem 2.25rem rgba(0,0,0,0.14),
      0 0.3125rem 0.875rem #2221;

    line-height: 2.0;
  }
}

/* ---------- Optional small-screen tweak (keeps content compact) ---------- */
@media (max-width: 900px) {
  .devolution-objective-box {
    padding: 1.25rem;       /* reduce padding on small screens */
    font-size: 0.75rem;     /* preserve original compact body size */
    width: 100%;
    max-width: 95vw;
    line-height: 1.6;
  }
}












/* devolution-approach.css (updated)
   - Preserve original layout & visual intent
   - Convert fixed px values to responsive rem/clamp values for better scaling
   - Add media queries up to 2560px (120rem / 160rem)
   - Ensure consistent, optimized font size increases at larger breakpoints
   - Keep look & feel intact while improving responsiveness and performance
*/

/* ===========================
   ROOT / TYPOGRAPHY SCALE
   =========================== */
:root{
  font-size:16px; /* base: 1rem = 16px */

  /* spacing scale */
  --gap-base: 4vw;
  --gap-sm: 2.5rem;
  --gap-md: 3.75rem;

  /* component widths (rem) - converted from original px values */
  --approach-col-width: 31.25rem;   /* ~500px */
  --approach-col-min: 13.75rem;     /* ~220px */
  --approach-box-max: 30.5625rem;   /* ~489px */

  --bronto-large: 75rem;            /* ~1200px original */
  --bronto-min: 15rem;              /* ~240px */

  /* font sizes (use clamp to scale reasonably) */
  --fs-heading: clamp(1.05rem, 1.6vw, 1.3rem);   /* ~1.3rem at normal */
  --fs-body: clamp(0.72rem, 0.95vw, 0.75rem);    /* ~0.75rem base */
  --fs-lead-lg: clamp(1.1rem, 1.8vw, 1.4rem);    /* increased for large screens */
}

/* ===========================
   LAYOUT: Approach container
   =========================== */
.devolution-approach-layout {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);                     /* previous 4vw */
  width: 100%;
  max-width: 125rem;                        /* keep same maximum */
  margin-left: clamp(1rem, 6vw, 12.5rem);   /* preserve original left offset responsively */
  min-height: 78vh;
  box-sizing: border-box;
  background: none;
  position: relative;
  z-index: 2;
  padding: 0 1rem;                          /* small horizontal breathing room */
}

/* Main text block */
.devolution-approach-section {
  width: var(--approach-col-width);
  min-width: var(--approach-col-min);
  margin: 0;
  margin-top: clamp(2rem, 6vh, 15.625rem);  /* preserve visual vertical offset but responsive */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

/* heading */
.devolution-approach-heading {
  background: #000;
  color: #e8e8e8;
  font-size: var(--fs-heading);
  padding: clamp(0.25rem, 0.6vw, 0.375rem) clamp(0.75rem, 1.6vw, 1.125rem);
  display: inline-block;
  margin-bottom: clamp(2rem, 3.75vw, 3.75rem); /* preserve ~60px gap */
  letter-spacing: 0.04em;
  line-height: 1.15;
  font-style: italic;
  font-weight: 400;
  box-sizing: border-box;
}

/* content box */
.devolution-approach-box {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.10), 0 0.15625rem 0.375rem #2221;
  padding: clamp(1.5rem, 3.2vw, 2.8125rem); /* responsive padding */
  font-size: var(--fs-body);
  letter-spacing: 0.002em;
  color: #000;
  text-align: justify;
  width: 100%;
  max-width: var(--approach-box-max);
  line-height: 1.73;
  border-radius: 0;
  box-sizing: border-box;
}

/* two-column content within approach-box */
.devolution-approach-cols { display:flex; gap: clamp(1rem, 2.1875vw, 2.1875rem); }
.devolution-approach-cols .approach-col { width:48%; min-width:7.5rem; }

/* ===========================
   BRONTO (illustration) column
   =========================== */
.devolution-bronto-right {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  height: 300%;
  min-width: 0;
}

/* bronto image */
.devolution-bronto-img {
  flex: none;
  display:block;
  width: clamp(32rem, 55vw, var(--bronto-large)); /* scales with viewport */
  min-width: var(--bronto-min);
  height: auto;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin-top: clamp(-6rem, -12vw, -12.5rem); /* maintain negative top offset responsively */
  margin-right: clamp(-2rem, -6vw, -6.25rem); /* preserve visual overlap to the right */
  box-sizing: border-box;
  max-width: 100%;
}

/* ===========================
   RESPONSIVE FALLBACKS & ADJUSTMENTS
   =========================== */

/* <= 1400px - reduce bronto, make approach section fluid */
@media (max-width: 87.5rem) { /* 1400px */
  .devolution-bronto-img { width: 55vw; min-width: 8.75rem; margin-top: clamp(-4rem,-6vw,-8rem); margin-right: -3rem; }
  .devolution-approach-section { width: 41vw; min-width: 10rem; margin-top: clamp(1rem, 4vh, 6rem); }
  .devolution-approach-box { max-width: 100%; }
}

/* <= 1100px - make text full width, bronto smaller */
@media (max-width: 68.75rem) { /* 1100px */
  .devolution-approach-section { width: 98vw; max-width: 99vw; margin-top: 1.5rem; }
  .devolution-bronto-img { width: 26.25rem; /* ~420px */ }
  .devolution-approach-box { padding: 1.6rem; }
}

/* mobile stacking */
@media (max-width: 56.25rem) { /* 900px */
  .devolution-approach-layout { flex-direction: column; align-items: center; gap: 2.5rem; min-height: unset; margin-left: 0; padding: 0 1rem; }
  .devolution-approach-section { margin-top: 0; align-items: center; width: 98vw; max-width: 99vw; }
  .devolution-approach-cols { flex-direction: column; gap: 1.3125rem; }
  .devolution-bronto-right { width: 100%; justify-content: center; margin-top: 1vw; }
  .devolution-bronto-img { width: 74vw; min-width: 7.5rem; max-width: 340px; margin-top: 0.625rem; margin-right: 0; }
}

/* ===========================
   LARGE SCREEN OPTIMIZATIONS
   >= 1920px (120rem)
   - Increase font sizes & spacing, keep visual proportions
   =========================== */
@media (min-width: 120rem) {
  :root {
    --fs-heading: clamp(1.25rem, 1.8vw, 1.6rem);
    --fs-body: clamp(0.9rem, 1.1vw, 1rem);
    --fs-lead-lg: clamp(1.6rem, 2.4vw, 2.2rem);
  }

  .devolution-approach-layout {
    gap: clamp(2.5rem, 4.5vw, 6rem);
    margin-left: clamp(8rem, 10vw, 12.5rem);
    max-width: 220rem;
  }

  .devolution-approach-section { width: clamp(28rem, 30vw, 45rem); margin-top: clamp(6rem, 8vh, 15rem); }
  .devolution-approach-heading { font-size: var(--fs-lead-lg); padding: 0.5rem 1.25rem; margin-bottom: 4rem; }
  .devolution-approach-box { font-size: var(--fs-body); padding: clamp(2rem, 3.5vw, 3.25rem); max-width: 40rem; }

  .devolution-bronto-img { width: clamp(38rem, 44vw, var(--bronto-large)); margin-top: clamp(-10rem, -12vh, -18rem); margin-right: clamp(-4rem, -6vw, -8rem); }
}

/* >= 2560px (160rem) - ultra wide tweaks */
@media (min-width: 160rem) {
  :root {
    --fs-heading: clamp(1.4rem, 1.8vw, 1.8rem);
    --fs-body: clamp(1rem, 1.2vw, 1.15rem);
    --fs-lead-lg: clamp(1.8rem, 2.6vw, 2.6rem);
  }

  .devolution-approach-layout { gap: clamp(3rem, 6.5vw, 8rem); max-width: 240rem; margin-left: clamp(10rem, 12vw, 18rem); }
  .devolution-approach-section { width: clamp(32rem, 32vw, 52rem); }
  .devolution-approach-box { font-size: var(--fs-body); padding: clamp(2.25rem, 4vw, 3.75rem); }
  .devolution-bronto-img { width: clamp(42rem, 48vw, 86rem); margin-top: clamp(-12rem, -14vh, -22rem); margin-right: clamp(-6rem, -8vw, -12rem); }
}

/* ===========================
   ACCESSIBILITY: reduced motion
   =========================== */
@media (prefers-reduced-motion: reduce) {
  .devolution-bronto-img,
  .devolution-approach-box,
  .devolution-approach-layout {
    transition: none !important;
    animation: none !important;
  }
}

/* End of devolution-approach.css */
/* --- HERO SPRITE SECTION (more gap between cycles & ensure .hero-gif sizing uniform) --- */

.devolution-hero-section {
  width: 100%;
  margin: 0 auto 80px auto;
  background: transparent;
  padding-top: 18px;
  max-width: 1500px;
}

.hero-title-row {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  margin-bottom: 100px;
  margin-left: 200px;
}

.hero-heading {
  background: #000;
  color: #e8e8e8;
  font-size: 1.3rem;
  padding: 6px 18px;
  display: inline-block;
  letter-spacing: 0.04em;
  line-height: 1.15;
  border-radius: 0;
  font-weight: normal;
  font-style: italic;
  margin-right: 35px;
  margin-top: 2px;
}







.hero-desc-block {
  font-size: 0.75rem;
  color: #000000;
  font-weight: normal;
  max-width: 325px;
  padding-top: 8px;
  line-height: 1.18;
  background: none;
}

.hero-cycles-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 180px; /* INCREASED GAP between cycle sections */
}

/* --- HERO CYCLE ROW LAYOUT --- */
.hero-cycle-row {
  display: flex;
  align-items: flex-start;
  gap: 62px;
}

/* --- HERO LEFT BLOCK --- */
.hero-box.hero-state-box {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  width: 360px;
  height: 320px;
  min-width: 320px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px 0 0 12px;
  border-radius: 0;
  font-weight: normal;
  position: relative;
}

.hero-state-label {
  font-size: 1rem;
  color: #131313;
  margin-bottom: -10px;
  margin-left: 30px;

  font-style: normal;
  background: none;
  letter-spacing: 0.02em;
}

/* --- GIF: ALWAYS 300px wide and same height --- */
.hero-gif {
  width: 300px !important;
  height: 260px !important;    /* Forces all GIFs to same visual box for uniformity */
  max-width: 300px !important;
  max-height: 260px !important;
  min-width: 300px !important;
  min-height: 260px !important;
  display: block;
  margin-top: 5px;
  margin-left: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  image-rendering: auto;
  object-fit: contain;
}

.hero-cycle-strip {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 300px;
  padding-left: 12px;
  overflow: visible;
}

.hero-cycle-img {
  height: auto;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  background: none;
  display: block;
  border-radius: 0;
  box-shadow: none;
  margin-left: 60px;
}

.hero-cycle-img.walk,
.hero-cycle-img.idle,
.hero-cycle-img.jump {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

@media (max-width: 900px) {
  .hero-cycles-grid {
    overflow-x: auto;
    gap: 60px;
  }
  .hero-cycle-row { flex-direction: column; gap: 0.8rem; }
}

@media (max-width: 1200px) {
  .devolution-hero-section{ max-width: 98vw; }
  .hero-box.hero-state-box { width: 57vw; min-width: 176px; }
  .hero-cycle-strip { min-width: 120px; }
  .hero-cycle-row { gap: 6vw; }
}
@media (max-width: 700px) {
  .devolution-hero-section { padding: 0;}
  .hero-title-row { flex-direction: column; gap: 10px; margin-left: 2vw;}
  .hero-heading { margin-right: 0;}
  .hero-desc-block { font-size:0.83rem; max-width: 80vw;}
  .hero-box.hero-state-box { width: 93vw; min-width: 70px; height: auto; }
  .hero-cycle-strip { min-width: 12vw; }
}





/* --- LEVEL MAP SECTION --- */

.devolution-map-section {
  width: 100%;
  max-width: 100%;
  margin-top: 300px;
  margin-bottom: 300px;
 
 
}

.map-description-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 150px;
  margin-bottom: 60px;
  margin-top: 0;
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.map-description-left,
.map-description-right {
  width: 30vw;
  min-width: 320px;
  max-width: 465px;
  font-size: 0.75rem;
  color: #000000;
  text-align: left;
  line-height: 1.5;
  font-family: inherit;
  font-weight: 500;
  background: none;
  letter-spacing: 0.007em;
  margin: 0 0 0 0;
  padding: 0;
}

.map-description-left {
  text-align: justify;
  padding-right: 6px;
}

.map-description-right {
  text-align: justify;
  padding-left: 6px;
}

.map-image-row {
  width: 100vw;
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: none;
}

.devolution-map-image {
  width: 70vw;
  max-width: 1660px;
  min-width: 350px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

@media (max-width: 1100px) {
  .map-description-row { flex-direction: column; align-items: center; gap: 38px; }
  .map-description-left, .map-description-right { width: 89vw; min-width: 0; max-width: 99vw; font-size: 1rem; }
  .devolution-map-image { width: 99vw; }
}






/* --- LEVEL STAGES SECTION (clean & transparent blocks when no image/gif) --- */

/* --- Heading --- */
.level-stages-section {
  width: 100vw;
  background: none;
  padding-top: 100px;
}
.level-stages-heading-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 80px;
  margin-bottom: 40px;
  gap: 0;
  width: max-content;
}
.level-label,
.stages-label {
  background: #000;
  color: #e8e8e8;
  font-size: 1.3rem;
  padding: 2px 14px 2px 14px;
  letter-spacing: 0.02em;
  display: block;
  line-height: 1.2;
  border-radius: 0;
  font-family: inherit;
  font-style: italic;
  width: fit-content;
}
.stages-label {
  margin-left: 50px;
  margin-top: 6px;
}

/* --- Stage block (jungle preview row) --- */
.stage-row {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

  width: 100vw;
  padding: 50px 0 75px 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.stage-block {
  width: 86vw;
  max-width: 1080px;
  margin: 0 auto;
  background: none;
}

.stage-block-inner {
  display: flex;
  flex-direction: row;
  gap: 74px;
  align-items: flex-start;
  width: 100%;
}
.stage-block-left {
  width: 230px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 10px;
  margin-left: 18px;
}
.stage1title {
  font-size: 0.75rem;
  color: #18171c;
  font-family: inherit;
  letter-spacing: 0.005em;
  margin-bottom: 22px;
}
.stage1desc {
  font-size: 0.75rem;
  color: #18171c;
  font-family: inherit;
  letter-spacing: 0.002em;
  line-height: 1.45;
}
.stage-block-right {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.stage-jungle-img {
  width: 540px;
  max-width: 54vw;
  min-width: 220px;
  height: auto;
  object-fit: contain;
  background: none;
  box-shadow: none;
  border-radius: 0;
}




.stage-label-bold {


  background: #000;
  color: #e8e8e8;
  font-size: 1.3rem;
  padding: 2px 14px 2px 14px;
  letter-spacing: 0.02em;
  display: block;
  line-height: 1.2;
  border-radius: 0;
  font-family: inherit;
  font-style: italic;
  width: fit-content;

  margin-top: 100px;
    margin-left: 80px;


}

/* === STAGE ELEMENTS SECTION: IMAGES ONLY, VERTICALLY STAGGERED, BRANCH ON TOP, BIG PTERO === */

.stage-elements-grid {
  display: flex;
  flex-direction: column;
  gap: 90px; /* vertical space between rows */
  width: 100vw;
  margin: 60px 0 80px 0;
  align-items: stretch;
}

/* All rows base style */
.stage-element-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  min-height: 180px;
}

/* === Falling branch (now first row, left-aligned grey block) === */
.stage-element-row:nth-child(1) {
align-items: flex-end;}
.stage-element-row:nth-child(1) .element-desc {

background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);



  width: 52vw;
  min-width: 300px;
  height: 180px;
  display: flex;
  justify-content: flex-start;
  border-radius: 0;
  margin-left: 0px;
}
.stage-element-row:nth-child(1) .element-img {
  max-width: 500px;
  max-height: 300px;
  margin-left: 200px;
}

/* === Poison plant (second row, right-aligned grey block) === */
.stage-element-row:nth-child(2) {
  justify-content: flex-end;
}
.stage-element-row:nth-child(2) .element-img-label {

background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);



  width: 52vw;
  min-width: 300px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 0;
  margin-right: 0;
}
.stage-element-row:nth-child(2) .element-img {
  max-width: 500px;
  max-height: 300px;
  margin-right: 200px;
}



/* === PTERODACTYL ROW (move/size PNG and GIF independently) === */
.stage-element-row:nth-child(3) .element-img-label {
 background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);



  width: 52vw;
  min-width: 300px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  border-radius: 0;
  margin-left: 0px;
}

/* PNG: "pterodactylText.png" */
.stage-element-row:nth-child(3) .element-img.pterodactyl.text {
  width: 200px;          /* set your desired width */
  height: auto;
  max-width: 200%;
  max-height: 100px;      /* or adjust as needed */
  margin-left: 500px;     /* independent of gif */
  margin-top: 60px;
  margin-bottom: 12px;
  display: block;
}

/* GIF: "pterodactyleFlying.gif" */
.stage-element-row:nth-child(3) .element-img.pterodactyl:not(.text) {
  width: 450px;          /* set your desired width */
  height: auto;
  max-width: 500%;
  max-height: 400px;
  margin-left: 100px;    /* independent of png */
  margin-top: -200px;
  display: block;
}

/* General image styling fallback */
.element-img {
  display: block;
  background: none;
  box-shadow: none;
  border-radius: 0;
  object-fit: contain;
  width: auto;
  height: auto;
}

/* Responsive: stack smaller */
@media (max-width: 950px) {
  .stage-element-row:nth-child(3) .element-img-label {
    width: 95vw;
    min-width: 0;
    height: 110px;
  }
  .stage-element-row:nth-child(3) .element-img.pterodactyl.text {
    width: 90px;
    max-height: 30px;
    margin-left: 10px;
    margin-top: 8px;
    margin-bottom: 10px;
  }
  .stage-element-row:nth-child(3) .element-img.pterodactyl:not(.text) {
    width: 148px;
    max-height: 65px;
    margin-left: 20px;
    margin-top: 7px;
  }
}

/* Mobile: stack vertically, full width */
@media (max-width: 650px) {
  .stage-elements-grid { gap: 24px; margin: 18px 0 22px 0;}
  .stage-element-row,
  .stage-element-row:nth-child(3) .element-img-label {
    flex-direction: column;
    width: 100vw;
    min-width: 0;
    height: auto;
    justify-content: center;
    align-items: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .stage-element-row:nth-child(3) .element-img-label {
    height: auto;
  }
  .stage-element-row:nth-child(3) .element-img.pterodactyl.text,
  .stage-element-row:nth-child(3) .element-img.pterodactyl:not(.text) {
    width: 46vw;
    max-width: 90vw;
    margin-left: 0;
    margin-bottom: 8px;
  }
}




/* === CAVE STAGE: LEVEL MAIN STAGE BLOCK === */
.cave-stage-img {
  width: 540px;
  max-width: 54vw;
  min-width: 220px;
  height: auto;
  object-fit: contain;
  background: none;
  box-shadow: none;
  border-radius: 0;
}


/* === CAVE STAGE ELEMENTS GRID (Image 4 layout) === */
.cave-elements-grid {
  display: flex;
  flex-direction: column;
  gap: 90px;
  width: 100vw;
  margin: 60px 0 80px 0;
  align-items: stretch;
}

.cave-element-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  min-height: 180px;
}

/* --- Trilobite (right block, row 1) --- */
.cave-element-row:nth-child(1) { justify-content: flex-end; }
.cave-element-row:nth-child(1) .cave-img-label {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  width: 52vw;
  min-width: 300px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 0;
  margin-right: 0;
  position: relative;
  overflow: hidden;
}
.cave-element-row:nth-child(1) .cave-img {
    max-width: 500px;
  max-height: 100px;
  margin-right: 200px;
    width: 52vw;
    height: 200px;


}



/* --- Falling Stalagmite (left block, row 2) --- */
.cave-element-row:nth-child(2) { justify-content: flex-start; }
.cave-element-row:nth-child(2) .cave-desc {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  width: 52vw;
  min-width: 300px;
  height: 180px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  border-radius: 0;
  margin-left: 0;
  position: relative;
  overflow: hidden;
}
.cave-element-row:nth-child(2) .cave-img {
    max-width: 450px;
  max-height: 300px;
  margin-left: 250px;
  margin-top: 20px;
}

/* --- Lava (right block, row 3) --- */
.cave-element-row:nth-child(3) { justify-content: flex-end; }
.cave-element-row:nth-child(3) .cave-img-label {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  width: 52vw;
  min-width: 300px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 0;
  margin-right: 0;
  position: relative;
  overflow: hidden;
}
.cave-element-row:nth-child(3) .cave-img {
  max-width: 500px;
  max-height: 100px;
  margin-right: 200px;
}

/* --- Floating Stalagmite (left block, row 4) --- */
.cave-element-row:nth-child(4) { justify-content: flex-start; }
.cave-element-row:nth-child(4) .cave-desc {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  width: 52vw;
  min-width: 300px;
  height: 180px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  border-radius: 0;
  margin-left: 0;
  position: relative;
  overflow: hidden;
}
.cave-element-row:nth-child(4) .cave-img {
     max-width: 450px;
  max-height: 300px;
  margin-left: 250px;
  margin-top: 20px;
}


.cave-element-row:nth-child(5) .cave-img{
  max-width: 500px;
  max-height: 200px;
  margin-left: auto;

}



/* Example: If it's the 6th row, nth-child(6) */
.cave-element-row:nth-child(6) .cave-img {
  max-width: 500px;
  max-height: 160px;
  margin-left: 250px;
}


/* --- Common --- */
.cave-img {
  display: block;
  background: none;
  object-fit: contain;
  width: auto;
  height: auto;
  box-shadow: none;
}

/* Grain overlay (if using grain JS) */
.cave-img-label::before,
.cave-desc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url('${grainTexture1}');
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.32;
  border-radius: 0;
}

/* Responsive adjustments */
@media (max-width: 950px) {
  .cave-element-row .cave-img-label,
  .cave-element-row .cave-desc {
    width: 95vw;
    min-width: 0;
    height: 80px;
  }
  .cave-element-row { min-height: 67px; }
  .cave-img {
    max-width: 66px;
    max-height: 28vw;
    margin: 5px 0 7px 0;
  }
}

@media (max-width: 650px) {
  .cave-elements-grid { gap: 24px; margin: 18px 0 22px 0;}
  .cave-element-row,
  .cave-element-row .cave-img-label,
  .cave-element-row .cave-desc {
    flex-direction: column;
    width: 100vw;
    min-width: 0;
    height: auto;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
  }
  .cave-element-row { min-height: 30px; }
  .cave-img {
    max-width: 55vw;
    max-height: 33vw;
    min-width: 0;
    margin: 0 auto 0 auto !important;
  }
}

/* === SWAMP STAGE BLOCKS FORMATTING (same as cave) === */



/* Add these to your CSS (stage_elements_cave.html or your main stylesheet) */

/* Hot Spring: permanently shifted left */
.hot-spring-row .hot-spring-img {
  transform: translateX(-180px);
}

/* Swamp Lava: permanently scaled up */
.swamp-lava-row .swamp-lava-img {
  transform: scale(1.14);
  transform: translateY(30px);
}




.cave-elements-grid {
  display: flex;
  flex-direction: column;
  gap: 90px;
  width: 100vw;
  margin: 60px 0 80px 0;
  align-items: stretch;
}

.cave-element-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100vw;
  min-height: 130px;
}

/* Right-aligned block: use .cave-img-label */
.cave-element-row .cave-img-label {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  width: 52vw;
  min-width: 300px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 0;
  margin-right: 0;
  position: relative;
  overflow: hidden;
  margin-left: auto; /* aligns the block itself to the right */
}

/* Left-aligned block: use .cave-desc */
.cave-element-row .cave-desc {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  width: 52vw;
  min-width: 300px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 0;
  margin-left: 0;
  position: relative;
  overflow: hidden;
}



.cave-img {
  display: block;
  background: none;
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 100px;
  margin-top: 200px;
  margin: 0 0px;
  box-shadow: none;
  border-radius: 0;
}

@media (max-width: 950px) {
  .cave-elements-grid {
    gap: 40px;
    margin: 30px 0 38px 0;
  }
  .cave-element-row .cave-img-label,
  .cave-element-row .cave-desc {
    width: 95vw !important;
    min-width: 0;
    height: 80px;
  }
  .cave-element-row { min-height: 67px; }
  .cave-img {
    max-width: 90px;
    max-height: 45px;
    margin: 0 10px;
  }
}

@media (max-width: 650px) {
  .cave-elements-grid { gap: 24px; margin: 12px 0 22px 0; }
  .cave-element-row,
  .cave-element-row .cave-img-label,
  .cave-element-row .cave-desc {
    flex-direction: column;
    align-items: center;
    width: 100vw;
    min-width: 0;
    height: auto;
    margin: 0 !important;
  }
  .cave-element-row { min-height: 30px; }
  .cave-img {
    max-width: 54vw;
    max-height: 26vw;
    margin: 0 auto !important;
  }
}



.interface-section {
  width: 100vw;
  padding-top: 54px;
  margin: 0 auto 0 auto;
}

.interface-heading {
  background: #000;
  color: #e8e8e8;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: lighter;
  font-family: inherit;
  letter-spacing: 0.02em;
  padding: 6px 24px 6px 24px;
  display: inline-block;
  border-radius: 0;
  margin-bottom: 30px;
  margin-left: 60px;
}


.interface-buttons-img {
  width: 1000px;
  max-width: 100vw;
  min-width: 320px;
  display: block;
  object-fit: cover;
  margin: 0 auto;
  margin-bottom: 200px;
}




.walkthrough-video-section {
  width: 100vw;
  margin: 90px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 200px;
}
.walkthrough-video-wrapper {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 0 auto;
}
.walkthrough-caption {
  text-align: left;
  margin-top: 18px;
  font-size: 0.75rem;
  color: #111;
  font-family: inherit;
}



@media (min-width: 1920px) {
  .devolution-content {
    min-height: 210vh;
  }

  .devolution-hero-panel {
    min-height: 68vh;
    height: 70vh;
    max-height: 73vh;
    margin-bottom: 4rem;
  }
  .devolution-cloud {
    width: 650px;
    top: -90px;
    right: 8vw;
  }
  .devolution-pterodactyl {
    width: 880px;
    left: -160px;
    top: -320px;
  }
  .devolution-devlogo {
    width: 900px;
    top: 360px;
  }
  .devolution-treetop {
    width: 800px;
    left: -400px;
    top: 250px;
  }
  .devolution-tree {
    width: 1100px;
    top: 650px;
    min-height: 500px;
  }
  .devolution-title-group { top: 145px; }

  .devolution-description {
    font-size: 1.5rem;
    width: 520px;
    margin-top: 600px;
  }

  .devolution-premise-section {
    width: 500px;
    margin-top: 120px;
    margin-left: -220px;
  }
  .devolution-premise-box {
    font-size: 1.23rem;
    width: 400px;
    padding: 38px 35px 28px 30px;
    line-height: 2.1;
  }
  .devolution-premise-heading {
    font-size: 2.2rem;
    padding: 5px 30px;
  }
  .devolution-screenshot-section { margin-top: 200px; }
  .devolution-screenshot-frame { width: 950px; }

  .devolution-objective-layout {
    max-width: 2300px;
    gap: 11vw;
    min-height: 150vh;
    margin-top: 600px;
  }
  .devolution-stills-grid { gap: 3vw; }
  .devolution-still-img { width: 450px; }
  .devolution-objective-section {
    width: 550px;
    min-width: 350px;
    margin-left: 320px;
    margin-top: 120px;
  }
  .devolution-objective-box {
    font-size: 1.23rem;
    max-width: 790px;
    padding: 52px 55px 40px 46px;
    line-height: 2.1;
  }
  .devolution-objective-heading {
    font-size: 2.2rem;
    padding: 9px 32px;
  }
  .devolution-approach-layout {
    max-width: 3450px;
    margin-left: 430px
  }
}









@media (min-width: 120rem) { /* 1920px and up - full-bleed fixes for devolution section */
  /* Make the main devolution area and its large internal sections full-bleed */
  .devolution-content,
  .devolution-hero-panel,
  .devolution-objective-layout,
  .devolution-approach-layout,
  .devolution-screenshot-section,
  .devolution-map-section,
  .stage-elements-grid,
  .cave-elements-grid,
  .level-stages-section,
  .interface-section,
  .walkthrough-video-section {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
  }

  /* Prevent inner .container or other centered wrappers from re-introducing side padding */
  .devolution-content > .container,
  .devolution-hero-panel > .container,
  .devolution-objective-layout > .container,
  .devolution-approach-layout > .container,
  .devolution-screenshot-section > .container,
  .devolution-map-section > .container,
  .stage-elements-grid > .container,
  .cave-elements-grid > .container,
  .level-stages-section > .container,
  .interface-section > .container,
  .walkthrough-video-section > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* If a global wrapper (e.g. .container or .page-inner) is adding centered padding,
     also neutralize it for devolution area by targeting common ancestors. */
  .devolution-content .container,
  .devolution-hero-panel .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Safety: ensure no body-level centered padding is shifting this section.
     Only run this if you have a page-wide .container that centers content. */
  .devolution-content,
  .devolution-content * {
    /* do not force overflow changes here; just ensure layout width is viewport-based */
    box-sizing: border-box !important;
  }
}





/* Responsive / accessibility tweaks to append to the end of hero-section.css
   - Keeps base rules unchanged; all overrides scoped in media queries
   - Uses clamp() so sizes scale sensibly up to 2560px+
*/

/* Make large fixed offsets and gaps responsive */
@media (min-width: 900px) {
  .hero-title-row {
    /* Replace fixed 200px left offset with responsive clamp */
    margin-left: clamp(0.5rem, 6vw, 12.5rem); /* ~8px -> ~200px across range */
    margin-bottom: clamp(2rem, 4.5vw, 6.25rem); /* scales 32px -> 100px */
    gap: clamp(1rem, 2.5vw, 2.25rem); /* 16px -> 36px */
  }

  .hero-cycles-grid {
    gap: clamp(2.5rem, 6.5vw, 11.25rem); /* scales the big vertical gap */
  }

  .hero-cycle-row {
    gap: clamp(1.25rem, 3.2vw, 3.875rem); /* scales horizontal gap */
  }

  /* Make hero boxes scale but keep minimum/maximum proportions */
  .hero-box.hero-state-box {
    width: clamp(18rem, 28vw, 22.5rem); /* ~288px -> 360px */
    min-width: clamp(11rem, 12vw, 20rem); /* ~176px -> 320px */
    height: auto; /* allow height to flow; min-height preserved */
    min-height: 8.75rem; /* 140px */
    padding: clamp(0.75rem, 1.6vw, 1.5rem) 0 0 clamp(0.7rem, 1.6vw, 0.75rem);
  }

  /* Maintain uniform visual size for hero GIFs but allow scaling */
  .hero-gif {
    width: clamp(13.75rem, 18vw, 18.75rem) !important; /* ~220px -> 300px */
    aspect-ratio: 300 / 260; /* preserve the box ratio */
    height: auto !important;
    max-width: 18.75rem !important; /* 300px */
    max-height: calc((18.75rem * 260) / 300) !important; /* proportional cap */
    min-width: clamp(11rem, 12vw, 13.75rem) !important; /* keep a sensible minimum */
  }

  /* Make hero-cycle-strip flexible */
  .hero-cycle-strip {
    min-width: clamp(12rem, 18vw, 30rem); /* earlier min 300px */
    padding-left: clamp(0.5rem, 1.5vw, 1rem);
  }

  /* Small cleanup for left margin on the overall hero section at large sizes */
  .devolution-hero-section {
    max-width: min(1500px, 94vw) !important;
    margin: 0 auto calc(4.5rem) auto; /* use a clamp if you want variable bottom spacing */
    padding-top: clamp(0.5rem, 1.2vw, 1.125rem);
  }
}

/* Respect users who prefer reduced motion (swap GIFs for a static frame if available).
   This assumes you can provide a .hero-gif-static element (or swap via JS);
   if not, you can hide GIFs entirely for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .hero-gif { visibility: hidden; opacity: 0; }
  .hero-gif-static { visibility: visible; opacity: 1; } /* if you add a static fallback element */
}

/* Optional: slightly reduce large left-margin at ultra-wide breakpoints (2560+) */
@media (min-width: 160rem) {
  .hero-title-row { margin-left: clamp(1rem, 8vw, 16rem); }
  .hero-cycles-grid { gap: clamp(4rem, 9vw, 14rem); }
}