@font-face{font-family:Montserrat;src:url('../fonts/Montserrat-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('../fonts/Montserrat-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url('../fonts/Montserrat-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url('../fonts/Montserrat-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Montserrat;src:url('../fonts/Montserrat-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('../fonts/Montserrat-SemiBoldItalic.ttf') format('truetype');font-style:italic;font-weight:600;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff}
body{font-family:Montserrat,Arial,sans-serif;color:#414141}
.section-five{width:100%;overflow:hidden;background:#fff}
.desktop-view{position:relative;width:100%;aspect-ratio:2560/1240;overflow:hidden;background:#fff}
.desktop-base{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}
.desktop-heading{position:absolute;left:3.85%;top:10.65%;width:58%;z-index:2}
.desktop-heading h2{margin:0;color:#0b4c6c;font-size:4.12vw;line-height:1.04;letter-spacing:-.025em;font-weight:600}
.desktop-heading p{margin:1.15vw 0 0;color:#050505;font-size:2.95vw;line-height:1.05;letter-spacing:-.028em;font-weight:400}
.desktop-feature{position:absolute;left:1.95%;top:48.25%;width:64.8%;height:34.6%;z-index:2}
.desktop-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s ease;pointer-events:none}
.desktop-slide.active{opacity:1;visibility:visible;pointer-events:auto}
.game-title{position:absolute;left:2.75%;top:9.5%;margin:0;color:#414141;font-size:3.02vw;line-height:1.08;letter-spacing:-.035em;font-weight:600;font-style:italic;white-space:nowrap}
.game-title em{color:#0b4c6c;font-style:italic;font-weight:600}
.game-copy{position:absolute;left:2.75%;top:46%;font-size:2.75vw;line-height:1.14;letter-spacing:-.034em;color:#414141;font-weight:500}
.game-copy p{margin:0 0 .35vw}.game-copy strong{font-weight:700}
.feature-with-icon{display:block}
.feature-icon{position:absolute;left:3.5%;top:13.7%;width:18.5%;height:auto;object-fit:contain}
.feature-copy{position:absolute;left:27.3%;top:18.4%;width:67%;color:#414141}
.feature-copy h3{margin:0 0 .35vw;font-size:3.25vw;line-height:1.03;letter-spacing:-.035em;font-weight:700}
.feature-copy p{margin:0;font-size:1.85vw;line-height:1.16;letter-spacing:-.025em;font-weight:400}
.rigid-copy{top:18%}.rigid-copy p{font-size:1.73vw;font-weight:600;line-height:1.14}
.desktop-dots{position:absolute;left:45.15%;top:90.9%;display:flex;gap:2.48vw;z-index:5}
.dot{width:2.18vw;height:2.18vw;border:0;border-radius:50%;padding:0;background:#dedede;cursor:pointer;transition:background .2s,transform .2s}
.dot.active{background:#0b4c6c;transform:scale(1.04)}
.dot:focus-visible{outline:3px solid #0b4c6c;outline-offset:4px}
.mobile-view{display:none}

@media (max-width:767px){
  .desktop-view{display:none}
  .mobile-view{display:block;position:relative;width:100%;aspect-ratio:1000/1360;overflow:hidden;touch-action:pan-y;background:#fff;outline:none}
  .mobile-track{display:flex;width:200%;height:100%;transform:translateX(0);transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .mobile-page{position:relative;flex:0 0 50%;height:100%;overflow:hidden;background:#fff}
  .mobile-base{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}
  .mobile-heading{position:absolute;left:0;top:4.25%;width:100%;padding:0 5%;text-align:center;color:#000;z-index:2}
  .mobile-heading h2{margin:0;color:#0b4c6c;font-size:6.08vw;line-height:1.09;letter-spacing:-.028em;font-weight:600}
  .mobile-heading p{margin:2.15vw 0 0;color:#080808;font-size:4.55vw;line-height:1.08;letter-spacing:-.03em;font-weight:400}
  .mobile-card{position:absolute;z-index:2;color:#414141}
  .mobile-card-game{left:6%;top:24.5%;width:88%;height:19.8%;padding:4.6% 4.8%}
  .mobile-card-game h3{margin:0;color:#414141;font-size:4.05vw;line-height:1.08;letter-spacing:-.035em;font-weight:600;font-style:italic;white-space:nowrap}
  .mobile-card-game h3 em{color:#0b4c6c;font-style:italic}
  .mobile-card-game>div{margin-top:4.25vw}
  .mobile-card-game p{margin:0 0 .55vw;font-size:3.45vw;line-height:1.13;letter-spacing:-.035em;font-weight:500}
  .mobile-card-game strong{font-weight:700}
  .mobile-card-concrete{left:6%;top:48.55%;width:88%;height:21.55%;display:flex;align-items:center;padding:2.7% 4.25% 2.7% 3.75%;gap:2.1vw}
  .mobile-card-rigid{left:6%;top:74.25%;width:88%;height:21.55%;display:flex;align-items:center;padding:2.7% 3.4% 2.7% 3.75%;gap:2.1vw}
  .mobile-icon{flex:0 0 auto;width:18.8%;height:auto;object-fit:contain}
  .mobile-card-copy{min-width:0;flex:1}
  .mobile-card-copy h3{margin:0 0 .55vw;font-size:4.6vw;line-height:1.02;letter-spacing:-.04em;font-weight:700}
  .mobile-card-copy p{margin:0;font-size:2.38vw;line-height:1.16;letter-spacing:-.022em;font-weight:500}
  .mobile-card-rigid .mobile-card-copy p{font-size:2.36vw;font-weight:600}
}

@media (prefers-reduced-motion:reduce){.desktop-slide,.mobile-track,.dot{transition:none}}

/* Section 5 navigation refinement */
/* The desktop artwork already contains the three designer-supplied grey dots.
   These transparent buttons sit exactly on those dots; only the active dot is
   filled, so the original designer dots remain visible and perfectly aligned. */
.desktop-dots{
  left:44.921875%;
  top:91.451613%;
  gap:2.59765625vw;
}
.dot{
  width:1.640625vw;
  height:1.640625vw;
  background:transparent;
  transform:none;
}
.dot.active{
  background:#0b4c6c;
  transform:none;
}

.carousel-arrow{
  position:absolute;
  z-index:12;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#0b4c6c;
  box-shadow:0 2px 12px rgba(0,0,0,.10);
  cursor:pointer;
  font-family:Arial,sans-serif;
  line-height:1;
}
.carousel-arrow span{display:block;transform:translateY(-3%)}
.carousel-arrow:focus-visible{outline:3px solid #0b4c6c;outline-offset:3px}
.desktop-arrow{
  top:50%;
  width:3.35vw;
  height:3.35vw;
  font-size:3.05vw;
  transform:translateY(-50%);
}
.desktop-prev{left:1.15%}
.desktop-next{right:1.15%}

@media (hover:hover) and (pointer:fine){
  .carousel-arrow:hover{background:#fff;box-shadow:0 3px 16px rgba(0,0,0,.16)}
}

@media (max-width:767px){
  .mobile-arrow{
    top:50%;
    width:10.5vw;
    height:10.5vw;
    max-width:52px;
    max-height:52px;
    min-width:42px;
    min-height:42px;
    font-size:9vw;
    transform:translateY(-50%);
  }
  .mobile-prev{left:2.2%}
  .mobile-next{right:2.2%}
}