:root{
  --page-bg:#071f35;
  --navy:#06233c;
  --deep:#021d31;
  --blue:#0789ef;
  --white:#fff;
  --condensed:"Roboto Condensed","Arial Narrow","Liberation Sans Narrow","Nimbus Sans Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  --body:Arial,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--page-bg);font-family:var(--body);color:#fff}
body{min-width:320px}
.montage-page{width:min(100%,1280px);margin:0 auto;background:#001b2a;box-shadow:0 0 50px rgba(0,0,0,.35)}
.montage-section{position:relative;width:100%;line-height:normal;overflow:hidden}
.montage-art{display:block;width:100%;height:auto;margin:0;padding:0}
.montage-section h1,.montage-section h2,.montage-section h3,.live-nav,.steam-button,.footer-brand-live strong{
  font-family:var(--condensed);text-transform:uppercase;font-stretch:condensed
}
.montage-section h1,.montage-section h2,.montage-section h3{margin:0;letter-spacing:.005em}

/* Buttons use the official supplied Steam image. */
.steam-button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--blue);color:#fff!important;text-decoration:none;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;
  box-shadow:0 3px 9px rgba(0,0,0,.24);
  font-weight:700;letter-spacing:.01em;white-space:nowrap
}
.steam-button:hover{background:#1394fa;transform:translateY(-1px)}
.steam-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.steam-disc{
  display:grid;place-items:center;overflow:hidden;border-radius:50%;
  background:transparent;flex:0 0 auto
}
.steam-disc img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* =========================================================
   HERO
   Exact montage coordinates based on the 640 x 444 source crop.
   All baked header/text/button areas are covered first.
   ========================================================= */
.hero-section:before{
  content:"";position:absolute;z-index:2;
  left:0;right:0;top:0;height:9.24%;background:#06233c
}
/* cover baked hero copy and button completely */
.hero-section:after{
  content:"";position:absolute;z-index:3;
  left:4.4%;top:47.0%;width:68.5%;height:52.5%;
  background:linear-gradient(90deg,rgba(2,29,49,.95) 0%,rgba(2,29,49,.90) 70%,rgba(2,29,49,.22) 100%)
}

.live-header{
  position:absolute;z-index:20;
  left:6.9%;right:6.7%;top:0;height:9.24%;
  display:grid;grid-template-columns:62px 1fr 126px;align-items:center;gap:14px
}
.live-header-logo{display:grid;place-items:center;align-self:stretch}
.live-header-logo img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.live-nav{display:flex;align-items:stretch;justify-content:center;gap:27px;height:100%;font-size:14px;font-weight:700}
.live-nav a{display:flex;align-items:center;color:#fff;text-decoration:none;position:relative;padding-top:2px}
.live-nav a.active:after{content:"";position:absolute;height:3px;left:0;right:0;bottom:7px;background:#0d8ef1}
.steam-button-small{height:31px;padding:3px 11px 3px 4px;font-size:11px;border-radius:9px}
.steam-button-small .steam-disc{width:24px;height:24px}

/* exact large crest footprint from montage, slightly enlarged for crisp replacement */
.hero-logo-live{
  position:absolute;z-index:12;
  left:12.4%;top:10.8%;width:31.0%;height:38.6%;
  display:grid;place-items:center
}
.hero-logo-live img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.42))}

/* text uses the same visual block occupied by the montage copy */
.hero-copy-live{
  position:absolute;z-index:14;
  left:5.7%;top:48.4%;width:61.3%;text-align:center
}
.hero-copy-live h1{
  font-size:clamp(30px,3.42vw,52px);line-height:.92;font-weight:700;
  color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.55)
}
.hero-copy-live h2{
  font-size:clamp(18px,1.92vw,29px);line-height:1;
  margin-top:10px;font-weight:600;color:#fff
}
.hero-pitch{
  font-size:clamp(11px,1.03vw,15px);line-height:1.28;font-weight:600;
  margin:10px auto 9px;max-width:84%
}
.hero-meta{
  display:flex;justify-content:center;align-items:center;gap:11px;
  font-size:clamp(10px,.98vw,14px);margin:0;white-space:nowrap
}
.hero-meta b{font-weight:400;color:#fff}
/* button is positioned separately, exactly like the montage rather than inheriting copy alignment */
.hero-steam-live{
  position:absolute;left:31.0%;top:91.0%;
  height:37px;padding:3px 17px 3px 4px;
  font-size:clamp(13px,1.25vw,18px);border-radius:12px
}
.hero-steam-live .steam-disc{width:29px;height:29px}

/* =========================================================
   TEAMPLAY
   Hide baked title/tagline, video itself covers baked gameplay image.
   ========================================================= */
.teamplay-section:before{
  content:"";position:absolute;z-index:2;
  left:0;right:0;top:0;height:21.3%;
  background:linear-gradient(180deg,rgba(4,38,66,.98),rgba(4,38,66,.88),rgba(4,38,66,.15))
}
.teamplay-section:after{
  content:"";position:absolute;z-index:10;left:0;right:0;bottom:0;height:11.2%;background:rgba(4,38,66,.98)
}
.teamplay-copy-live{position:absolute;z-index:12;left:8%;right:8%;top:4.1%;text-align:center}
.teamplay-copy-live h2{font-size:clamp(20px,2.15vw,32px);line-height:1;font-weight:600}
.teamplay-copy-live p{font-size:clamp(10px,.98vw,14px);line-height:1.22;margin:7px 0 0}
.montage-video-frame{
  position:absolute;z-index:8;
  left:9.38%;top:21.30%;width:81.56%;height:67.16%;
  overflow:hidden;background:#000;border:1px solid #078cff
}
.montage-video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.teamplay-tagline-live{
  position:absolute;z-index:13;left:8%;right:8%;bottom:2.6%;
  margin:0;text-align:center;font-size:clamp(10px,.98vw,14px);line-height:1.1
}

/* =========================================================
   MORE THAN A MATCH
   Art panes remain baked; all baked copy areas are covered.
   ========================================================= */
.more-section:before{
  content:"";position:absolute;z-index:9;
  left:0;right:0;top:0;height:22.0%;background:#073b65
}
/* individual card text-area covers */
.more-section .more-card-copy:before{
  content:"";position:absolute;z-index:-1;inset:-5px -2px -5px -2px;background:#06365c
}
.more-heading-live{
  position:absolute;z-index:14;left:4%;right:4%;top:3.0%;text-align:center
}
.more-heading-live h2{font-size:clamp(20px,2.1vw,31px);line-height:1;font-weight:600}
.more-heading-live p{margin:6px 0 0;font-size:clamp(10px,.94vw,13.5px)}
.more-card-copy{
  position:absolute;z-index:14;bottom:4.0%;height:28.0%;padding:7px 9px 5px;color:#fff
}
.more-card-copy h3{font-size:clamp(14px,1.35vw,20px);line-height:1;font-weight:600}
.more-card-copy p{margin:5px 0 0;font-size:clamp(9px,.84vw,12px);line-height:1.22}
.more-card-copy.card-one{left:3.1%;width:30.0%}
.more-card-copy.card-two{left:35.2%;width:30.0%}
.more-card-copy.card-three{left:67.3%;width:29.6%}

/* =========================================================
   CLASSIC RETURNS
   ========================================================= */
.classic-section:before{
  content:"";position:absolute;z-index:9;left:0;right:0;top:0;height:29.5%;
  background:linear-gradient(180deg,rgba(20,85,133,.97),rgba(20,85,133,.86),rgba(20,85,133,.18))
}
.classic-heading-live{position:absolute;z-index:14;left:0;right:0;top:5.2%;text-align:center}
.classic-heading-live h2{font-size:clamp(20px,2.0vw,30px);font-weight:600;line-height:1}
.classic-heading-live p{margin:5px 0 0;font-size:clamp(10px,.91vw,13px)}
.classic-copy-live{
  position:absolute;z-index:14;right:1.8%;top:29.7%;width:22.6%;height:66%;
  background:rgba(26,85,129,.96);padding:16px 10px 8px
}
.classic-copy-live p{font-size:clamp(9px,.89vw,12.5px);line-height:1.28;margin:0}

/* =========================================================
   READY CTA
   Cover only old headline/button area; preserve group artwork.
   ========================================================= */
.ready-section:before{
  content:"";position:absolute;z-index:9;
  left:23.5%;top:0;width:47.0%;height:58%;
  background:linear-gradient(90deg,rgba(26,91,144,.10),rgba(22,86,136,.75) 18%,rgba(22,86,136,.83) 82%,rgba(26,91,144,.10))
}
.ready-copy-live{
  position:absolute;z-index:16;left:22%;right:24%;top:5.5%;text-align:center
}
.ready-copy-live h2{font-size:clamp(19px,2.02vw,30px);font-weight:600;line-height:1;margin:0 0 10px}
.ready-steam-live{height:41px;padding:3px 18px 3px 4px;font-size:clamp(13px,1.22vw,18px);border-radius:12px}
.ready-steam-live .steam-disc{width:31px;height:31px}

/* =========================================================
   FOOTER
   Entire footer is live to avoid duplicate baked text/logos.
   ========================================================= */
.footer-section{height:auto;min-height:79px;background:#06233c}
.live-footer{min-height:79px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;padding:8px 6.0%;font-size:12px}
.footer-brand-live{display:flex;align-items:center;gap:9px}
.footer-brand-live>img{width:44px;height:44px;object-fit:contain}
.footer-brand-live strong{display:block;font-size:14px;letter-spacing:.02em}
.footer-brand-live span{display:block;font-size:9px;margin-top:2px}
.footer-social-live{display:flex;gap:8px}
.footer-social-live a{width:24px;height:24px;display:grid;place-items:center}
.footer-social-live img{width:17px;height:17px;object-fit:contain}
.footer-links-live{justify-self:end;display:flex;gap:5px;align-items:center;white-space:nowrap;font-size:9px}
.footer-links-live a{color:#fff;text-decoration:none}
.footer-links-live a:hover{text-decoration:underline}

@media(max-width:760px){
  .montage-page{width:100%;box-shadow:none}
  .live-header{left:4%;right:4%;grid-template-columns:42px 1fr auto;gap:7px}
  .live-header-logo img{width:34px;height:34px}
  .live-nav{gap:9px;font-size:8px}
  .steam-button-small{font-size:8px;height:27px;padding-right:7px}
  .steam-button-small .steam-disc{width:20px;height:20px}
  .hero-copy-live{left:5.7%;width:61.3%}
  .hero-steam-live{height:28px;padding-right:8px}.hero-steam-live .steam-disc{width:21px;height:21px}
  .ready-steam-live{height:29px;padding-right:9px}.ready-steam-live .steam-disc{width:22px;height:22px}
  .live-footer{min-height:70px;padding:7px 4%;grid-template-columns:1fr auto}
  .footer-links-live{display:none}
}


/* STEP 4: REMOVE ALL BACKGROUND / MONTAGE IMAGES
   The page is now clean HTML/CSS structure. Logos and the actual gameplay
   video remain because they are foreground content, not backgrounds. */
.montage-art{display:none!important}
.hero-section,.teamplay-section,.more-section,.classic-section,.ready-section{
  background-image:none!important;
}
.hero-section{min-height:760px;background:#0b3657!important}
.teamplay-section{min-height:620px;background:#073456!important}
.more-section{min-height:500px;background:#062f50!important}
.classic-section{min-height:390px;background:#164f7b!important}
.ready-section{min-height:280px;background:#0b3657!important}

/* Disable all pseudo-element masks that were only needed to hide baked montage text. */
.hero-section::before,.hero-section::after,
.teamplay-section::before,.teamplay-section::after,
.more-section::before,.more-section::after,
.classic-section::before,.classic-section::after,
.ready-section::before,.ready-section::after{
  content:none!important;display:none!important
}

/* Reflow live elements into clean section-local coordinates now that montage
   image heights no longer define the canvas. */
.live-header{top:0;height:58px}
.hero-logo-live{top:82px;left:9%;width:360px;height:300px}
.hero-copy-live{top:390px;left:6%;width:560px}
.hero-steam-live{top:650px;left:190px}

.teamplay-copy-live{top:32px}
.montage-video-frame{left:10%;top:130px;width:80%;height:410px}
.teamplay-tagline-live{bottom:34px}

.more-heading-live{top:30px}
.more-card-copy{bottom:45px;height:auto;min-height:150px;background:#08395f;padding:18px}
.more-card-copy.card-one{left:3%;width:30%}
.more-card-copy.card-two{left:35%;width:30%}
.more-card-copy.card-three{left:67%;width:30%}

.classic-heading-live{top:32px}
.classic-copy-live{top:125px;right:7%;width:30%;height:auto;min-height:180px;background:#1c5a87}

.ready-copy-live{top:75px;left:20%;right:20%}

/* Remove any CSS background images site-wide on the homepage. */
body.home-page, .montage-page, .montage-section{
  background-image:none!important;
}


/* STEP 5: HERO SINGLE-LINE ALIGNMENT
   Based on the supplied screenshot and montage reference.
   The headline and original pitch are each intentionally kept on one line. */
.hero-copy-live{
  top:390px!important;
  left:4.8%!important;
  width:650px!important;
  text-align:center!important;
}
.hero-copy-live h1{
  white-space:nowrap!important;
  font-size:46px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:-0.02em!important;
}
.hero-copy-live h2{
  white-space:nowrap!important;
  margin-top:12px!important;
  font-size:29px!important;
  line-height:1!important;
  font-weight:500!important;
}
.hero-pitch{
  white-space:nowrap!important;
  max-width:none!important;
  width:100%!important;
  margin:12px 0 10px!important;
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:600!important;
}
.hero-meta{
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:14px!important;
}
/* The hero CTA belongs directly under the metadata, as in the montage. */
.hero-copy-live .hero-steam-live{
  position:static!important;
  margin:16px auto 0!important;
  height:44px!important;
  padding:4px 18px 4px 5px!important;
  font-size:17px!important;
  border-radius:12px!important;
}
.hero-copy-live .hero-steam-live .steam-disc{
  width:34px!important;
  height:34px!important;
}

@media(max-width:900px){
  .hero-copy-live{left:4%!important;width:58%!important}
  .hero-copy-live h1{font-size:clamp(26px,4vw,40px)!important}
  .hero-copy-live h2{font-size:clamp(18px,2.5vw,26px)!important}
  .hero-pitch{font-size:clamp(9px,1.25vw,13px)!important}
  .hero-meta{font-size:clamp(9px,1.2vw,13px)!important;gap:8px!important}
}


/* STEP 6: HERO DENSITY / MONTAGE PROPORTIONS
   Keep the hero as one compact composition. The headline begins immediately
   beneath the large crest and all typography is restored to montage-like scale. */
.hero-section{
  min-height:700px!important;
}
.hero-logo-live{
  top:76px!important;
  left:8.5%!important;
  width:380px!important;
  height:315px!important;
}
.hero-copy-live{
  top:392px!important;              /* directly beneath the logo */
  left:3.2%!important;
  width:720px!important;
  text-align:center!important;
}
.hero-copy-live h1{
  white-space:nowrap!important;
  font-size:52px!important;
  line-height:.96!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
}
.hero-copy-live h2{
  white-space:nowrap!important;
  margin-top:10px!important;
  font-size:32px!important;
  line-height:1!important;
  font-weight:500!important;
}
.hero-pitch{
  white-space:nowrap!important;
  width:100%!important;
  max-width:none!important;
  margin:13px 0 11px!important;
  font-size:17px!important;
  line-height:1.1!important;
  font-weight:600!important;
  letter-spacing:-.01em!important;
}
.hero-meta{
  white-space:nowrap!important;
  justify-content:center!important;
  gap:13px!important;
  font-size:16px!important;
  line-height:1.15!important;
}
.hero-copy-live .hero-steam-live{
  position:static!important;
  display:inline-flex!important;
  margin:17px auto 0!important;
  height:50px!important;
  padding:5px 22px 5px 6px!important;
  font-size:19px!important;
  border-radius:13px!important;
}
.hero-copy-live .hero-steam-live .steam-disc{
  width:38px!important;
  height:38px!important;
}

/* Restore stronger scale to the rest of the live homepage typography. */
.teamplay-copy-live h2,
.more-heading-live h2,
.classic-heading-live h2,
.ready-copy-live h2{
  font-size:34px!important;
  font-weight:500!important;
}
.teamplay-copy-live p,
.more-heading-live p,
.classic-heading-live p{
  font-size:16px!important;
}
.teamplay-tagline-live{
  font-size:16px!important;
}
.more-card-copy h3{
  font-size:21px!important;
  font-weight:500!important;
}
.more-card-copy p,
.classic-copy-live p{
  font-size:14px!important;
  line-height:1.35!important;
}
.ready-steam-live{
  height:48px!important;
  font-size:18px!important;
}
.ready-steam-live .steam-disc{
  width:36px!important;
  height:36px!important;
}

@media(max-width:900px){
  .hero-section{min-height:610px!important}
  .hero-logo-live{top:70px!important;left:7%!important;width:300px!important;height:250px!important}
  .hero-copy-live{top:322px!important;left:2%!important;width:650px!important;max-width:96%!important}
  .hero-copy-live h1{font-size:clamp(34px,5.1vw,48px)!important}
  .hero-copy-live h2{font-size:clamp(22px,3vw,30px)!important}
  .hero-pitch{font-size:clamp(12px,1.65vw,16px)!important}
  .hero-meta{font-size:clamp(11px,1.5vw,15px)!important}
}


/* STEP 7: HARD CLEARANCE BETWEEN CREST AND HERO COPY
   Logo footprint ends at 391px (76 + 315). Copy now begins at 432px,
   creating a deliberate 41px clear zone so the headline cannot overlap. */
.hero-section{
  min-height:750px!important;
}
.hero-copy-live{
  top:432px!important;
}
@media(max-width:900px){
  .hero-section{min-height:660px!important}
  .hero-copy-live{top:355px!important}
}


/* STEP 8: FINAL CTA TOP ALIGNMENT
   Match the montage: final heading and Steam CTA sit toward the top
   of the artwork band, leaving the character artwork visible below. */
.ready-copy-live{
  top:22px!important;
  left:18%!important;
  right:18%!important;
  text-align:center!important;
}
.ready-copy-live h2{
  margin:0 0 10px!important;
}
.ready-steam-live{
  margin-top:0!important;
}
@media(max-width:900px){
  .ready-copy-live{
    top:16px!important;
    left:12%!important;
    right:12%!important;
  }
}


/* STEP 9: extra clearance for the pointed lower tail of the UF crest.
   Move the complete hero copy group down, without changing its internal spacing. */
.hero-copy-live{
  top:462px!important;
}
.hero-section{
  min-height:780px!important;
}
@media(max-width:900px){
  .hero-copy-live{top:382px!important}
  .hero-section{min-height:690px!important}
}


/* STEP 10: HEADER SCALE
   Increase navigation and top Steam CTA to match the visual weight of the
   main hero CTA. Ensure Steam icon is fully contained inside the button. */
.live-header{
  height:72px!important;
  grid-template-columns:76px 1fr 230px!important;
  gap:18px!important;
}
.live-header-logo img{
  width:60px!important;
  height:60px!important;
}
.live-nav{
  gap:31px!important;
  font-size:17px!important;
  font-weight:600!important;
}
.live-nav a.active:after{
  bottom:8px!important;
  height:3px!important;
}
.steam-button-small{
  height:50px!important;
  min-width:220px!important;
  padding:5px 20px 5px 6px!important;
  font-size:18px!important;
  border-radius:13px!important;
  gap:10px!important;
}
.steam-button-small .steam-disc{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  overflow:hidden!important;
}
.steam-button-small .steam-disc img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:50%!important;
}
@media(max-width:900px){
  .live-header{
    height:62px!important;
    grid-template-columns:58px 1fr 180px!important;
    gap:10px!important;
  }
  .live-header-logo img{width:48px!important;height:48px!important}
  .live-nav{gap:17px!important;font-size:13px!important}
  .steam-button-small{
    height:42px!important;min-width:174px!important;font-size:14px!important;padding-right:14px!important
  }
  .steam-button-small .steam-disc{width:31px!important;height:31px!important;flex-basis:31px!important}
}


/* STEP 13: HOME USES THE EXACT SHARED ABOUT-PAGE FOOTER MARKUP */
.site-footer{
  background:linear-gradient(#15466f,#0c2e4c);
  color:#dceafa;
  padding:38px 22px 24px;
  font-family:Arial,"Helvetica Neue",sans-serif;
}
.footer-grid{
  width:min(1120px,calc(100% - 48px));
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr .8fr .9fr 1fr;
  gap:28px;
  align-items:start;
}
.footer-logo{
  display:flex;align-items:center;gap:14px;
  font-weight:900;text-transform:uppercase;font-size:1.15rem;margin-bottom:16px
}
.footer-logo img{width:64px;height:auto;object-fit:contain}
.footer-company address{font-style:normal;line-height:1.7;margin-top:12px}
.site-footer h3{font-size:.9rem;letter-spacing:.04em;margin:0 0 12px;text-transform:uppercase}
.site-footer a{display:block;color:#dceafa;text-decoration:none;margin:7px 0}
.footer-social .socials{display:flex;gap:10px}
.footer-social .social-link{
  width:34px;height:34px;display:grid;place-items:center;
  background:#1b69a9;border-radius:50%;margin:0
}
.footer-social .social-link img{width:18px;max-height:18px;object-fit:contain}
.privacy-settings-button{
  background:transparent;border:0;color:#dceafa;padding:0;
  font:inherit;cursor:pointer;text-align:left;margin:7px 0
}
.legal{
  width:min(1120px,calc(100% - 48px));
  margin:24px auto 0;
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:16px;font-size:.78rem;line-height:1.5
}
.steam-attribution{margin-top:8px}
.cookie-banner,.lightbox{font-family:Arial,"Helvetica Neue",sans-serif}
@media(max-width:1000px){
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
  .footer-social{grid-column:1/-1}
}
@media(max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;width:min(100% - 28px,1120px)}
  .legal{width:min(100% - 28px,1120px)}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr}
}


/* STEP 17: CLASSIC RETURNS, two existing gameplay screenshots */
.classic-screens-live{
  position:absolute;
  z-index:8;
  left:4.2%;
  top:30%;
  width:69.5%;
  height:64%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.classic-screens-live img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 5px 16px rgba(0,0,0,.28);
}
@media(max-width:760px){
  .classic-screens-live{gap:7px}
}


/* STEP 18: CLASSIC RETURNS TEXT COLUMN
   Keep both screenshots entirely within the left 70% and reserve the
   right-hand column exclusively for the existing Classic Returns copy. */
.classic-screens-live{
  left:3.5%!important;
  top:30%!important;
  width:66%!important;
  height:64%!important;
}
.classic-copy-live{
  left:auto!important;
  right:3.5%!important;
  top:30%!important;
  width:25.5%!important;
  height:64%!important;
  padding:16px 14px 10px!important;
  z-index:14!important;
  overflow:auto!important;
}
@media(max-width:760px){
  .classic-screens-live{
    left:3%!important;
    width:64%!important;
  }
  .classic-copy-live{
    right:3%!important;
    width:27%!important;
    padding:8px!important;
  }
}

/* STEP 19: Classic Returns supplied copy */
.classic-copy-live p{margin:0 0 15px!important}
.classic-copy-live p:last-child{margin-bottom:0!important}
.classic-copy-live strong{
  font-family:var(--condensed)!important;
  font-size:1.25em!important;
  font-weight:600!important;
  color:#fff!important;
}


/* STEP 20: MATCH HOME WIDTH + TOP BLUE TO SECONDARY PAGES */

/* Home page width now matches the secondary page content system */
.montage-page{
  width:min(1120px, calc(100% - 48px))!important;
  max-width:1120px!important;
  margin:0 auto!important;
  background:#031a2c!important;
  box-shadow:none!important;
}

/* Match the darker blue/navy used at the top of About/Media/Press Kit */
.hero-section{
  background:#06233c!important;
}

/* Keep header aligned to the same 1120px site width */
.live-header{
  left:0!important;
  right:0!important;
  width:100%!important;
  padding:0 24px!important;
  margin:0 auto!important;
}

/* Prevent visual elements from feeling oversized after narrowing the Home canvas */
.hero-logo-live{
  left:8.5%!important;
}
.hero-copy-live{
  left:3.2%!important;
  width:720px!important;
  max-width:88%!important;
}

/* Secondary sections continue edge-to-edge within the common 1120px canvas */
.teamplay-section,
.more-section,
.classic-section,
.ready-section{
  width:100%!important;
}

/* Footer width now lines up with the common page width */
.site-footer .footer-grid,
.site-footer .legal{
  width:min(1120px, calc(100% - 48px))!important;
  max-width:1120px!important;
}

/* Keep the page visually centered on larger screens */
body{
  background:#031a2c!important;
}

@media(max-width:760px){
  .montage-page{
    width:100%!important;
    max-width:none!important;
  }
  .live-header{
    padding:0 14px!important;
  }
}


/* STEP 21: REAL WIDTH MATCH
   Secondary pages are full-browser-width with an inner content stage.
   Home now uses the same model: full-width section backgrounds, 1120px
   centered internal composition. This is a visible structural change. */

body{
  background:#031a2c!important;
}

/* Full browser width, like About / Media / Press Kit */
.montage-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:#031a2c!important;
  box-shadow:none!important;
}

/* Full-width sections */
.montage-section{
  width:100%!important;
  max-width:none!important;
  overflow:hidden!important;
}

/* Inner 1120px stage matches the secondary-page content width */
.home-stage{
  position:relative!important;
  width:min(1120px, calc(100% - 48px))!important;
  max-width:1120px!important;
  height:100%!important;
  min-height:inherit!important;
  margin:0 auto!important;
}

/* Match the exact top/hero blue used by secondary page heroes */
.hero-section{
  background:#0b3657!important;
}

/* Header bar/background matches other pages */
.hero-section .home-stage{
  background:transparent!important;
}
.live-header{
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:none!important;
  padding:0!important;
}

/* Keep the approved internal hero geometry inside the 1120px stage */
.hero-logo-live{
  left:8.5%!important;
}
.hero-copy-live{
  left:3.2%!important;
  width:720px!important;
  max-width:88%!important;
}

/* Match secondary section backgrounds more closely */
.teamplay-section{background:#073456!important}
.more-section{background:#062f50!important}
.classic-section{background:#164f7b!important}
.ready-section{background:#0b3657!important}

/* Shared footer remains full width like secondary pages */
.site-footer{
  width:100%!important;
}

/* Desktop breakpoint keeps stage geometry stable */
@media(min-width:1168px){
  .home-stage{
    width:1120px!important;
  }
}

@media(max-width:760px){
  .home-stage{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  .live-header{
    padding:0 14px!important;
  }
}


/* STEP 22: HOME NOW USES THE EXACT SHARED HEADER FROM SECONDARY PAGES.
   Disable all legacy custom-home header rules. */
.hero-section .live-header,
.live-header,
.live-header-logo,
.live-nav{
  display:none!important;
}

/* The shared site header controls the top bar everywhere. */
.site-header{
  background:#06233c!important;
  height:72px!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
.site-header .nav{
  width:min(1180px,94%)!important;
  height:72px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:76px 1fr 230px!important;
  align-items:center!important;
  gap:18px!important;
}
.site-header .brand img{
  width:60px!important;
  height:60px!important;
  object-fit:contain!important;
}
.site-header .nav-links.primary{
  display:flex!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:31px!important;
  height:100%!important;
}
.site-header .nav-links.primary a{
  display:flex!important;
  align-items:center!important;
  position:relative!important;
  color:#fff!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  font-family:var(--condensed)!important;
  font-size:17px!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
.site-header .nav-links.primary a.active:after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:8px!important;
  height:3px!important;
  background:#0d8ef1!important;
}
.site-header .nav-links.right{
  display:flex!important;
  justify-content:flex-end!important;
}
.site-header .steam-button-small{
  height:50px!important;
  min-width:220px!important;
  padding:5px 20px 5px 6px!important;
  font-size:18px!important;
  border-radius:13px!important;
  gap:10px!important;
}
.site-header .steam-button-small .steam-disc{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
}

@media(max-width:900px){
  .site-header .nav{
    grid-template-columns:58px 1fr 180px!important;
    gap:10px!important;
  }
  .site-header .brand img{width:48px!important;height:48px!important}
  .site-header .nav-links.primary{gap:17px!important}
  .site-header .nav-links.primary a{font-size:13px!important}
  .site-header .steam-button-small{
    min-width:174px!important;
    height:42px!important;
    font-size:14px!important;
  }
  .site-header .steam-button-small .steam-disc{
    width:31px!important;
    height:31px!important;
    flex-basis:31px!important;
  }
}


/* STEP 23: READY TO GET BACK ON THE PITCH
   Use the user-supplied stadium/player artwork as the actual section background.
   Copy remains live HTML and is shifted left to avoid covering the players. */
.ready-section{
  background:
    linear-gradient(90deg,
      rgba(2,20,37,.78) 0%,
      rgba(2,20,37,.62) 27%,
      rgba(2,20,37,.20) 45%,
      rgba(2,20,37,0) 62%),
    url("../images/ready-get-back-background.png") center center / cover no-repeat!important;
}

/* Keep any old ready-section image layers/placeholders from appearing over the new background */
.ready-section .ready-bg,
.ready-section .ready-art,
.ready-section .ready-image,
.ready-section > img{
  display:none!important;
}

/* Move heading + Steam CTA to the left-hand clear area */
.ready-section .ready-copy-live,
.ready-section .ready-copy,
.ready-section .cta-copy{
  left:4.5%!important;
  right:auto!important;
  top:10%!important;
  width:38%!important;
  max-width:430px!important;
  text-align:left!important;
  align-items:flex-start!important;
}

.ready-section .steam-button,
.ready-section .steam-button-large,
.ready-section .wishlist-button{
  margin-left:0!important;
  margin-right:auto!important;
}

@media(max-width:760px){
  .ready-section{
    background-position:58% center!important;
  }
  .ready-section .ready-copy-live,
  .ready-section .ready-copy,
  .ready-section .cta-copy{
    left:5%!important;
    width:48%!important;
    max-width:none!important;
  }
}


/* STEP 24: READY CTA COPY AND ALIGNMENT */
.ready-section .ready-copy-live,
.ready-section .ready-copy,
.ready-section .cta-copy{
  left:4.5%!important;
  right:auto!important;
  top:10%!important;
  width:38%!important;
  max-width:430px!important;
  text-align:center!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

/* Centre both heading lines on the same axis */
.ready-section h2,
.ready-section .ready-copy-live h2,
.ready-section .ready-copy h2,
.ready-section .cta-copy strong{
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  line-height:1.02!important;
}

/* Centre Steam CTA directly beneath heading */
.ready-section .steam-button,
.ready-section .steam-button-large,
.ready-section .wishlist-button{
  display:flex!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

@media(max-width:760px){
  .ready-section .ready-copy-live,
  .ready-section .ready-copy,
  .ready-section .cta-copy{
    left:4%!important;
    width:50%!important;
  }
}


/* STEP 25: Preserve the original Ready-section Steam button dimensions.
   Centre the existing button without stretching or changing its width. */
.ready-section .steam-button,
.ready-section .steam-button-large,
.ready-section .wishlist-button{
  display:inline-flex!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  align-self:center!important;
  flex:0 0 auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
}


/* STEP 26: UNITED FOOTBALL IS BACK
   Use the exact user-supplied artwork as the website hero background.
   No image generation or modification. */
.hero-section{
  background-image:url("../images/united-football-is-back-background.png")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* Remove legacy hero background artwork layers only.
   Live logo, heading, pitch, feature line and Steam CTA remain HTML. */
.hero-section .hero-bg,
.hero-section .hero-background,
.hero-section .hero-art-bg,
.hero-section > img.hero-background{
  display:none!important;
}


/* STEP 27: exact newly supplied hero background, CSS positioning only */
.hero-section{
  background-image:url("../images/united-football-is-back-background.jpg")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* Place the existing live UF logo in the visual centre of the ball. */
.hero-section .hero-logo-live{
  left:23.5%!important;
  top:31%!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
}


/* STEP 28: Montage-inspired section backgrounds */

/* Dynamic Teamplay, stadium light wrapping around the gameplay frame */
.teamplay-section{
  background:
    linear-gradient(180deg,rgba(3,36,65,.12),rgba(2,28,51,.52)),
    url("../images/dynamic-teamplay-background.jpg") center center / cover no-repeat!important;
}

/* More Than A Match, darker navy stadium atmosphere behind the cards */
.more-section{
  background:
    linear-gradient(180deg,rgba(3,34,59,.18),rgba(2,29,50,.62)),
    url("../images/more-than-a-match-background.jpg") center center / cover no-repeat!important;
}

/* The Classic Returns, brighter cool-blue stadium treatment */
.classic-section{
  background:
    linear-gradient(180deg,rgba(22,91,145,.15),rgba(4,39,68,.38)),
    url("../images/classic-returns-background.jpg") center center / cover no-repeat!important;
}

/* Keep section copy legible without hiding the new artwork */
.teamplay-copy-live,
.more-heading-live,
.classic-heading-live{
  text-shadow:0 2px 4px rgba(0,0,0,.55)!important;
}


/* STEP 29: UNIQUE GENERATED BACKGROUND PER HOME SECTION
   Each section now has its own distinct artwork. No image is reused. */

.teamplay-section{
  background:
    linear-gradient(180deg,rgba(1,26,48,.12),rgba(2,28,51,.34)),
    url("../images/dynamic-teamplay-background-unique.jpg")
    center center / cover no-repeat!important;
}

.more-section{
  background:
    linear-gradient(180deg,rgba(2,26,48,.22),rgba(2,25,46,.56)),
    url("../images/more-than-a-match-background-unique.jpg")
    center center / cover no-repeat!important;
}

.classic-section{
  background:
    linear-gradient(180deg,rgba(10,52,89,.08),rgba(2,27,49,.34)),
    url("../images/classic-returns-background-unique.jpg")
    center center / cover no-repeat!important;
}

/* Maintain readability while keeping the artwork visible. */
.teamplay-copy-live,
.more-heading-live,
.classic-heading-live{
  text-shadow:0 2px 5px rgba(0,0,0,.65)!important;
}

/* STEP 30: More Than A Match review visuals */
.more-card-image{
  position:absolute!important;
  z-index:12!important;
  top:25%!important;
  height:45%!important;
  overflow:hidden!important;
  border:1px solid #078cff!important;
  background:#041d31!important;
  box-shadow:0 5px 14px rgba(0,0,0,.25)!important;
}
.more-card-image.card-1{left:3.1%!important;width:30%!important}
.more-card-image.card-2{left:35.2%!important;width:30%!important}
.more-card-image.card-3{left:67.3%!important;width:29.6%!important}
.more-card-image img{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important;
}


/* STEP 31: More Than A Match image visibility fix.
   Images now live INSIDE .home-stage, the same positioning context as the text. */
.more-section .home-stage{
  position:relative!important;
  min-height:500px!important;
}

.more-section .home-stage .more-card-image{
  position:absolute!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:20!important;
  top:118px!important;
  height:225px!important;
  overflow:hidden!important;
  border:2px solid #078cff!important;
  background:#041d31!important;
  box-shadow:0 6px 18px rgba(0,0,0,.34)!important;
}

.more-section .home-stage .more-card-image.card-1{
  left:3%!important;
  width:30%!important;
}
.more-section .home-stage .more-card-image.card-2{
  left:35%!important;
  width:30%!important;
}
.more-section .home-stage .more-card-image.card-3{
  left:67%!important;
  width:30%!important;
}

.more-section .home-stage .more-card-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
}

/* Keep copy below the image row */
.more-section .more-card-copy{
  bottom:28px!important;
  min-height:115px!important;
  height:auto!important;
  z-index:21!important;
}

/* Make the section tall enough that the image row and copy never collide. */
.more-section{
  min-height:560px!important;
}

@media(max-width:760px){
  .more-section{min-height:520px!important}
  .more-section .home-stage .more-card-image{
    top:110px!important;
    height:185px!important;
  }
}


/* STEP 32: Narrow More Than A Match images to montage proportions.
   These are intentionally much narrower than Step 31 and visually closer
   to the Classic Returns screenshot widths. */
.more-section .home-stage .more-card-image{
  top:118px!important;
  width:24.5%!important;
  height:205px!important;
}

.more-section .home-stage .more-card-image.card-1{
  left:7%!important;
}
.more-section .home-stage .more-card-image.card-2{
  left:37.75%!important;
}
.more-section .home-stage .more-card-image.card-3{
  left:68.5%!important;
}

/* Align the three copy columns with their narrower images. */
.more-section .more-card-copy.card-1,
.more-section .more-copy-1{
  left:7%!important;
  width:24.5%!important;
}
.more-section .more-card-copy.card-2,
.more-section .more-copy-2{
  left:37.75%!important;
  width:24.5%!important;
}
.more-section .more-card-copy.card-3,
.more-section .more-copy-3{
  left:68.5%!important;
  width:24.5%!important;
}

@media(max-width:760px){
  .more-section .home-stage .more-card-image{
    width:27%!important;
    height:175px!important;
  }
  .more-section .home-stage .more-card-image.card-1{left:4%!important}
  .more-section .home-stage .more-card-image.card-2{left:36.5%!important}
  .more-section .home-stage .more-card-image.card-3{left:69%!important}
}


/* STEP 33: mathematically centre the complete More Than A Match image row.
   24.5 + 3 + 24.5 + 3 + 24.5 = 79.5%, leaving 10.25% on each side. */
.more-section .home-stage .more-card-image{
  width:24.5%!important;
}
.more-section .home-stage .more-card-image.card-1{left:10.25%!important}
.more-section .home-stage .more-card-image.card-2{left:37.75%!important}
.more-section .home-stage .more-card-image.card-3{left:65.25%!important}

/* Match each text column to the centred image above it. */
.more-section .more-card-copy.card-1,
.more-section .more-copy-1{left:10.25%!important;width:24.5%!important}

.more-section .more-card-copy.card-2,
.more-section .more-copy-2{left:37.75%!important;width:24.5%!important}

.more-section .more-card-copy.card-3,
.more-section .more-copy-3{left:65.25%!important;width:24.5%!important}


/* STEP 34: More Than A Match, align image and text columns as one system.
   Use the same visual principle as Classic Returns: discrete image cards
   with visible breathing room and copy centred directly underneath. */

/* Slightly narrower cards create a clearer gap between each image. */
.more-section .home-stage .more-card-image{
  width:23%!important;
  height:205px!important;
}

/* 23 + 4 + 23 + 4 + 23 = 77%, leaving equal 11.5% page margins. */
.more-section .home-stage .more-card-image.card-1{left:11.5%!important}
.more-section .home-stage .more-card-image.card-2{left:38.5%!important}
.more-section .home-stage .more-card-image.card-3{left:65.5%!important}

/* Force the existing three copy blocks onto exactly the same column axes. */
.more-section .more-card-copy,
.more-section .more-copy-1,
.more-section .more-copy-2,
.more-section .more-copy-3{
  position:absolute!important;
  width:23%!important;
  top:342px!important;
  bottom:auto!important;
  min-height:0!important;
  height:auto!important;
  padding:12px 6px 0!important;
  margin:0!important;
  text-align:center!important;
  z-index:21!important;
  box-sizing:border-box!important;
}

.more-section .more-card-copy.card-1,
.more-section .more-copy-1{left:11.5%!important}

.more-section .more-card-copy.card-2,
.more-section .more-copy-2{left:38.5%!important}

.more-section .more-card-copy.card-3,
.more-section .more-copy-3{left:65.5%!important}

/* Centre all live text inside its image column. */
.more-section .more-card-copy h3,
.more-section .more-card-copy p,
.more-section .more-copy-1 h3,
.more-section .more-copy-1 p,
.more-section .more-copy-2 h3,
.more-section .more-copy-2 p,
.more-section .more-copy-3 h3,
.more-section .more-copy-3 p{
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

/* Enough vertical room for images + copy without collision. */
.more-section,
.more-section .home-stage{
  min-height:560px!important;
}

@media(max-width:760px){
  .more-section .home-stage .more-card-image{
    width:26%!important;
    height:175px!important;
  }
  .more-section .home-stage .more-card-image.card-1{left:5.5%!important}
  .more-section .home-stage .more-card-image.card-2{left:37%!important}
  .more-section .home-stage .more-card-image.card-3{left:68.5%!important}

  .more-section .more-card-copy,
  .more-section .more-copy-1,
  .more-section .more-copy-2,
  .more-section .more-copy-3{
    width:26%!important;
    top:300px!important;
    padding-left:3px!important;
    padding-right:3px!important;
  }
  .more-section .more-card-copy.card-1,
  .more-section .more-copy-1{left:5.5%!important}
  .more-section .more-card-copy.card-2,
  .more-section .more-copy-2{left:37%!important}
  .more-section .more-card-copy.card-3,
  .more-section .more-copy-3{left:68.5%!important}
}


/* STEP 35: More Than A Match rebuilt as an actual grid.
   This removes the absolute-positioning drift that caused the images and
   copy blocks to overlap and appear off-centre. */
.more-section{
  min-height:0!important;
  padding:0!important;
}

.more-section .more-stage{
  position:relative!important;
  min-height:0!important;
  height:auto!important;
  padding:34px 46px 44px!important;
}

.more-section .more-heading-live{
  position:static!important;
  width:100%!important;
  margin:0 auto 28px!important;
  text-align:center!important;
}

.more-section .more-grid{
  width:100%!important;
  max-width:930px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:34px!important;
  align-items:start!important;
}

.more-section .more-item{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  text-align:center!important;
}

.more-section .more-item-image{
  width:100%!important;
  aspect-ratio:16 / 10!important;
  overflow:hidden!important;
  background:#041d31!important;
  border:2px solid #078cff!important;
  box-shadow:0 6px 18px rgba(0,0,0,.34)!important;
}

.more-section .more-item-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

.more-section .more-item-copy{
  width:100%!important;
  margin:14px 0 0!important;
  padding:0 4px!important;
  text-align:center!important;
}

.more-section .more-item-copy h3{
  margin:0 0 8px!important;
  font-family:var(--condensed)!important;
  text-transform:uppercase!important;
  font-size:21px!important;
  line-height:1.05!important;
  font-weight:500!important;
  color:#fff!important;
}

.more-section .more-item-copy p{
  margin:0!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.38!important;
  text-align:center!important;
}

/* Disable all prior absolute-positioned More Than A Match card rules. */
.more-section .more-card-image,
.more-section .more-card-copy,
.more-section .more-copy-1,
.more-section .more-copy-2,
.more-section .more-copy-3{
  display:none!important;
}

@media(max-width:760px){
  .more-section .more-stage{
    padding:30px 20px 38px!important;
  }
  .more-section .more-grid{
    gap:14px!important;
  }
  .more-section .more-item-copy h3{
    font-size:16px!important;
  }
  .more-section .more-item-copy p{
    font-size:11px!important;
  }
}


/* STEP 36: MOBILE RESPONSIVE PASS
   Desktop layout remains unchanged. Below 760px, sections reflow rather than
   relying on desktop absolute coordinates. */

@media(max-width:760px){

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

  .montage-page,
  .montage-section,
  .home-stage{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* Shared header */
  .site-header{
    height:auto!important;
  }
  .site-header .nav{
    width:100%!important;
    min-height:68px!important;
    height:auto!important;
    padding:8px 14px!important;
    grid-template-columns:52px 1fr!important;
    gap:8px!important;
  }
  .site-header .brand img{
    width:46px!important;
    height:46px!important;
  }
  .site-header .nav-links.primary{
    justify-content:flex-end!important;
    gap:12px!important;
    overflow-x:auto!important;
  }
  .site-header .nav-links.primary a{
    font-size:12px!important;
    flex:0 0 auto!important;
  }
  .site-header .nav-links.right{
    grid-column:1 / -1!important;
    justify-content:center!important;
    padding-bottom:5px!important;
  }

  /* Hero: preserve artwork while keeping live copy readable */
  .hero-section{
    min-height:620px!important;
    background-position:42% center!important;
  }
  .hero-section .home-stage{
    min-height:620px!important;
  }
  .hero-section .hero-logo-live{
    left:24%!important;
    top:22%!important;
    transform:translate(-50%,-50%)!important;
  }
  .hero-copy-live{
    left:5%!important;
    right:5%!important;
    top:auto!important;
    bottom:5%!important;
    width:90%!important;
    max-width:none!important;
    text-align:center!important;
  }

  /* Dynamic Teamplay */
  .teamplay-section{
    min-height:0!important;
    padding:28px 18px 34px!important;
  }
  .teamplay-section .home-stage{
    height:auto!important;
    min-height:0!important;
  }

  /* More Than A Match becomes a single clean column on phones. */
  .more-section .more-stage{
    padding:30px 20px 40px!important;
  }
  .more-section .more-grid{
    width:100%!important;
    max-width:430px!important;
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
  .more-section .more-item-image{
    width:100%!important;
    aspect-ratio:16/10!important;
  }
  .more-section .more-item-copy{
    margin-top:12px!important;
    padding:0 8px!important;
  }
  .more-section .more-item-copy h3{
    font-size:20px!important;
  }
  .more-section .more-item-copy p{
    font-size:14px!important;
    line-height:1.45!important;
  }

  /* Classic Returns: stack screenshots then copy. */
  .classic-section{
    min-height:0!important;
    padding:30px 18px 38px!important;
  }
  .classic-section .home-stage{
    min-height:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .classic-heading-live{
    position:static!important;
    width:100%!important;
    margin:0 0 22px!important;
    text-align:center!important;
  }
  .classic-screens-live{
    position:static!important;
    width:100%!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    order:2!important;
  }
  .classic-screens-live img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
  }
  .classic-copy-live{
    position:static!important;
    width:100%!important;
    height:auto!important;
    margin:20px 0 0!important;
    padding:0 8px!important;
    text-align:left!important;
    overflow:visible!important;
    order:3!important;
  }

  /* Ready CTA: keep live copy on clear left area, scale for phone. */
  .ready-section{
    min-height:520px!important;
    background-position:60% center!important;
  }
  .ready-section .home-stage{
    min-height:520px!important;
  }
  .ready-section .ready-copy-live,
  .ready-section .ready-copy,
  .ready-section .cta-copy{
    left:4%!important;
    top:7%!important;
    width:48%!important;
    max-width:none!important;
    text-align:center!important;
  }

  /* Secondary pages and footer */
  .page-shell,
  .page-content,
  .content-wrap,
  .site-footer .footer-grid,
  .site-footer .legal{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  img,video{
    max-width:100%;
  }
}

@media(max-width:480px){
  .site-header .nav-links.primary{
    gap:8px!important;
  }
  .site-header .nav-links.primary a{
    font-size:11px!important;
  }
  .hero-section{
    min-height:560px!important;
  }
  .hero-section .home-stage{
    min-height:560px!important;
  }
  .ready-section,
  .ready-section .home-stage{
    min-height:460px!important;
  }
}


/* ============================================================
   STEP 37: PURPOSE-DESIGNED MOBILE EXPERIENCE
   Desktop remains the existing montage design.
   Mobile switches at 760px to a vertically composed layout.
   ============================================================ */

.mobile-menu-toggle{display:none}

@media (max-width:760px){

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

  body{
    background:#031c31!important;
  }

  /* ---------- Compact mobile header ---------- */
  .site-header{
    position:relative!important;
    z-index:1000!important;
    min-height:72px!important;
    height:72px!important;
    background:#03243d!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
  }

  .site-header .nav{
    position:relative!important;
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:8px 18px!important;
    box-sizing:border-box!important;
  }

  .site-header .brand{
    position:relative!important;
    z-index:1002!important;
  }

  .site-header .brand img{
    display:block!important;
    width:54px!important;
    height:54px!important;
    object-fit:contain!important;
  }

  .mobile-menu-toggle{
    display:flex!important;
    width:44px!important;
    height:44px!important;
    padding:9px!important;
    border:0!important;
    background:transparent!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:6px!important;
    z-index:1002!important;
  }

  .mobile-menu-toggle span{
    display:block!important;
    width:25px!important;
    height:2px!important;
    background:#fff!important;
    border-radius:2px!important;
  }

  /* Desktop navigation becomes a compact slide-down mobile menu */
  .site-header .nav-links.primary,
  .site-header .nav-links.right{
    display:none!important;
  }

  .site-header.mobile-menu-open .nav{
    height:auto!important;
  }

  .site-header.mobile-menu-open .nav-links.primary{
    display:flex!important;
    position:absolute!important;
    top:72px!important;
    left:0!important;
    width:100%!important;
    padding:24px 24px 20px!important;
    box-sizing:border-box!important;
    background:#03243d!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:0!important;
    box-shadow:0 12px 24px rgba(0,0,0,.3)!important;
  }

  .site-header.mobile-menu-open .nav-links.primary a{
    display:block!important;
    width:100%!important;
    padding:16px 6px!important;
    font-size:17px!important;
    line-height:1!important;
    border-bottom:1px solid rgba(255,255,255,.1)!important;
  }

  .site-header.mobile-menu-open .nav-links.right{
    display:flex!important;
    position:absolute!important;
    top:292px!important;
    left:0!important;
    width:100%!important;
    padding:18px 24px 26px!important;
    background:#03243d!important;
    box-sizing:border-box!important;
    justify-content:center!important;
  }

  /* ---------- General mobile section system ---------- */
  .montage-section,
  .home-stage{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* ---------- HERO ---------- */
  .hero-section{
    position:relative!important;
    min-height:690px!important;
    height:auto!important;
    padding:0!important;
    background-size:cover!important;
    /* Keep the ball and stadium visible, rather than giant desktop crop */
    background-position:42% center!important;
  }

  .hero-section:after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(180deg,rgba(1,22,39,.05) 0%,rgba(1,22,39,.12) 40%,rgba(1,22,39,.82) 100%)!important;
    pointer-events:none!important;
  }

  .hero-section .home-stage{
    min-height:690px!important;
    height:690px!important;
    position:relative!important;
    z-index:2!important;
  }

  /* Hide the separate oversized desktop logo on mobile.
     The supplied hero artwork already contains strong brand imagery. */
  .hero-section .hero-logo-live{
    display:none!important;
  }

  .hero-copy-live{
    position:absolute!important;
    left:6%!important;
    right:6%!important;
    top:auto!important;
    bottom:44px!important;
    width:88%!important;
    max-width:none!important;
    padding:0!important;
    text-align:center!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  .hero-copy-live h1{
    margin:0 0 8px!important;
    font-size:39px!important;
    line-height:.98!important;
    white-space:normal!important;
    text-align:center!important;
  }

  .hero-copy-live h2{
    margin:0 0 14px!important;
    font-size:23px!important;
    line-height:1.05!important;
    white-space:normal!important;
  }

  .hero-copy-live .pitch,
  .hero-copy-live p{
    width:100%!important;
    max-width:420px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:15px!important;
    line-height:1.4!important;
    white-space:normal!important;
  }

  .hero-copy-live .hero-meta,
  .hero-copy-live .meta{
    margin:14px auto!important;
    font-size:13px!important;
    line-height:1.4!important;
    white-space:normal!important;
  }

  .hero-copy-live .steam-button,
  .hero-copy-live .steam-cta,
  .hero-copy-live a[class*="steam"]{
    margin-left:auto!important;
    margin-right:auto!important;
    max-width:330px!important;
  }

  /* ---------- DYNAMIC TEAMPLAY ---------- */
  .teamplay-section{
    min-height:0!important;
    height:auto!important;
    padding:34px 18px 40px!important;
    background-position:center!important;
  }

  .teamplay-section .home-stage{
    position:static!important;
    height:auto!important;
    min-height:0!important;
  }

  .teamplay-copy-live{
    position:static!important;
    width:100%!important;
    margin:0 auto 20px!important;
    text-align:center!important;
  }

  .teamplay-copy-live h2{
    font-size:27px!important;
    line-height:1.05!important;
  }

  .teamplay-copy-live p{
    max-width:410px!important;
    margin:7px auto 0!important;
    font-size:14px!important;
    line-height:1.4!important;
  }

  /* Make whatever video implementation is currently present visible and fluid */
  .teamplay-section video,
  .teamplay-section iframe,
  .teamplay-section .video-frame,
  .teamplay-section .video-wrap,
  .teamplay-section .video-container{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    max-width:620px!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    margin:0 auto!important;
    transform:none!important;
  }

  .teamplay-section video{
    object-fit:cover!important;
  }

  /* ---------- MORE THAN A MATCH ---------- */
  .more-section{
    min-height:0!important;
    height:auto!important;
  }

  .more-section .more-stage{
    height:auto!important;
    min-height:0!important;
    padding:34px 20px 42px!important;
  }

  .more-section .more-heading-live{
    position:static!important;
    width:100%!important;
    margin:0 auto 24px!important;
  }

  .more-section .more-heading-live h2{
    font-size:27px!important;
  }

  .more-section .more-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:430px!important;
    gap:28px!important;
    margin:0 auto!important;
  }

  .more-section .more-item{
    width:100%!important;
  }

  .more-section .more-item-image{
    width:100%!important;
    aspect-ratio:16/9!important;
    border-radius:5px!important;
  }

  .more-section .more-item-copy{
    width:100%!important;
    margin:10px 0 0!important;
    padding:0 6px!important;
    text-align:left!important;
  }

  .more-section .more-item-copy h3{
    font-size:20px!important;
    text-align:left!important;
  }

  .more-section .more-item-copy p{
    font-size:14px!important;
    line-height:1.4!important;
    text-align:left!important;
  }

  /* ---------- CLASSIC RETURNS ---------- */
  .classic-section{
    min-height:0!important;
    height:auto!important;
    padding:34px 18px 42px!important;
    background-position:center!important;
  }

  .classic-section .home-stage{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:0!important;
  }

  .classic-heading-live{
    position:static!important;
    order:1!important;
    width:100%!important;
    margin:0 0 24px!important;
    text-align:center!important;
  }

  .classic-heading-live h2{
    font-size:29px!important;
    line-height:1!important;
  }

  .classic-heading-live p{
    font-size:15px!important;
    margin-top:8px!important;
  }

  .classic-screens-live{
    position:static!important;
    order:2!important;
    width:100%!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .classic-screens-live img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    object-fit:cover!important;
    border:1px solid #078cff!important;
  }

  .classic-copy-live{
    position:static!important;
    order:3!important;
    width:100%!important;
    height:auto!important;
    margin:22px 0 0!important;
    padding:24px 20px 22px!important;
    box-sizing:border-box!important;
    background:rgba(23,100,151,.94)!important;
    overflow:visible!important;
    text-align:left!important;
  }

  .classic-copy-live p{
    margin:0 0 18px!important;
    font-size:15px!important;
    line-height:1.45!important;
  }

  .classic-copy-live strong,
  .classic-copy-live b{
    display:block!important;
    margin:4px 0 18px!important;
    font-size:20px!important;
  }

  /* ---------- READY CTA ---------- */
  .ready-section{
    min-height:620px!important;
    height:auto!important;
    padding:0!important;
    background-size:cover!important;
    background-position:55% center!important;
  }

  .ready-section .home-stage{
    min-height:620px!important;
    height:620px!important;
    position:relative!important;
  }

  .ready-section .ready-copy-live,
  .ready-section .ready-copy,
  .ready-section .cta-copy{
    position:absolute!important;
    left:6%!important;
    right:6%!important;
    top:40px!important;
    width:88%!important;
    max-width:none!important;
    text-align:center!important;
  }

  .ready-section h2{
    font-size:31px!important;
    line-height:1.02!important;
  }

  .ready-section .steam-button,
  .ready-section .steam-cta,
  .ready-section a[class*="steam"]{
    margin-left:auto!important;
    margin-right:auto!important;
    max-width:330px!important;
  }

  /* ---------- Footer ---------- */
  .site-footer{
    padding:28px 18px!important;
  }

  .site-footer .footer-grid,
  .site-footer .legal{
    width:100%!important;
    max-width:430px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  img,video,iframe{
    max-width:100%;
  }
}

@media(max-width:430px){
  .hero-copy-live h1{font-size:35px!important}
  .hero-copy-live h2{font-size:21px!important}
  .hero-copy-live .pitch,
  .hero-copy-live p{font-size:14px!important}
  .teamplay-copy-live h2,
  .more-section .more-heading-live h2{font-size:25px!important}
  .classic-heading-live h2{font-size:27px!important}
}


/* STEP 38: Mobile hero copy + Dynamic Teamplay video visibility */
@media(max-width:760px){

  /* With the separate mobile logo removed, bring the hero copy upward. */
  .hero-copy-live{
    top:330px!important;
    bottom:auto!important;
  }

  /* Give Dynamic Teamplay enough real document height for the full 16:9 video. */
  .teamplay-section{
    height:auto!important;
    min-height:0!important;
    padding:34px 18px 42px!important;
    overflow:visible!important;
  }

  .teamplay-section .home-stage{
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
  }

  .teamplay-copy-live{
    flex:0 0 auto!important;
  }

  .teamplay-section .video-frame,
  .teamplay-section .video-wrap,
  .teamplay-section .video-container{
    position:relative!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-width:620px!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    margin:0 auto!important;
    overflow:hidden!important;
  }

  .teamplay-section video,
  .teamplay-section iframe{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:620px!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    margin:0 auto!important;
    object-fit:cover!important;
  }
}

@media(max-width:430px){
  .hero-copy-live{
    top:305px!important;
  }
}


/* STEP 39: MOBILE VIDEO FRAME FIX
   The previous mobile pass gave both the wrapper and video their own aspect-ratio/
   sizing rules. That caused the wrapper to become much taller than the actual video.
   On mobile there is now exactly ONE 16:9 sizing box: .montage-video-frame.
   The video simply fills that box. */
@media(max-width:760px){

  .teamplay-section{
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    padding:30px 16px 36px!important;
    overflow:hidden!important;
  }

  .teamplay-section .home-stage{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:block!important;
    overflow:visible!important;
  }

  .teamplay-copy-live{
    position:static!important;
    width:100%!important;
    margin:0 auto 18px!important;
  }

  /* This is the sole sizing box for the mobile video. */
  .teamplay-section .montage-video-frame{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:640px!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    transform:none!important;
    z-index:1!important;
  }

  /* Fill the wrapper, do not create a second aspect-ratio box. */
  .teamplay-section .montage-video-frame .montage-video,
  .teamplay-section .montage-video-frame video{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    margin:0!important;
    padding:0!important;
    object-fit:cover!important;
    transform:none!important;
  }

  /* Remove any generic video container sizing from earlier mobile passes. */
  .teamplay-section .video-frame:not(.montage-video-frame),
  .teamplay-section .video-wrap,
  .teamplay-section .video-container{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }

  .teamplay-tagline-live{
    position:static!important;
    width:100%!important;
    margin:14px auto 0!important;
    text-align:center!important;
  }
}

@media(max-width:430px){
  .teamplay-section{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}