@import url("media-skeleton.css");

@font-face {
  font-family:Sleepvale;
  src:url("sleepvale/im-fell-english.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root {
  --skel-base:#d7e0d4;
  --skel-shine:rgba(23,58,46,.16);
  --cream:#f7f4eb;
  --paper:#eae7db;
  --ink:#183b30;
  --forest:#173a2e;
  --muted:#657168;
  --gold:#d0b673;
  --line:#d9dcd0;
  --serif:Sleepvale,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #b98c35;
  outline-offset:6px;
}

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

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  font-weight:400;
}

h1,h2,h3,.wordmark {
  font-family:var(--serif);
}

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  padding:14px 20px;
  background:white;
  z-index:100;
  transform:translateY(-160%);
}

.skip-link:focus {
  transform:none;
}

.site-header {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(24px,4.2vw,80px);
  background:var(--cream);
  position:relative;
  z-index:20;
  border-bottom:1px solid #ffffff60;
}

.wordmark {
  font-size:36px;
  letter-spacing:-1.1px;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:32px;
}

.nav-link {
  font-size:13px;
  font-weight:600;
}

.nav-link:hover,.site-footer a:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  min-height:54px;
  padding:17px 25px;
  font-size:14px;
  font-weight:650;
  border:1px solid transparent;
  border-radius:5px;
  transition:background .2s,transform .2s;
}

.button:hover {
  transform:translateY(-2px);
}

.button span {
  font-size:19px;
  line-height:1;
}

.button-small {
  min-height:43px;
  padding:12px 18px;
  font-size:12px;
  gap:20px;
}

.button-green {
  color:var(--cream);
  background:var(--forest);
}

.button-green:hover {
  background:#285440;
}

.button-cream {
  color:var(--ink);
  background:var(--cream);
}

.button-cream:hover {
  background:#e7dcc3;
}

.hero {
  position:relative;
  min-height:700px;
  height:calc(100svh - 88px);
  max-height:1000px;
  color:var(--cream);
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  overflow:hidden;
  background:var(--forest);
}

.hero-media,.hero-image,.hero-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-2;
}

.hero-image {
  object-fit:cover;
  object-position:50% 48%;
}

.hero-shade {
  z-index:-1;
  background:linear-gradient(90deg,rgba(11,30,24,.72),rgba(11,30,24,.24) 58%,rgba(11,30,24,.04)),linear-gradient(0deg,rgba(11,30,24,.82),transparent 70%);
}

.hero-content {
  padding:90px clamp(24px,7vw,130px) 136px;
  width:100%;
}

.eyebrow {
  font-size:11px;
  font-weight:650;
  letter-spacing:2.3px;
  text-transform:uppercase;
  line-height:1.6;
}

.hero .eyebrow {
  color:#e8dabb;
  margin-bottom:26px;
}

.hero h1 {
  font-size:clamp(62px,6.4vw,106px);
  line-height:1.04;
  letter-spacing:-2px;
  text-wrap:balance;
  max-width:950px;
}

.hero-description {
  font-size:18px;
  line-height:1.65;
  margin-top:22px;
  color:#f1ecdf;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:30px;
}

.text-link {
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:11px;
}

.light-link:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}

.play-small {
  border:1px solid #ece9d773;
  border-radius:50%;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:9px;
  padding-left:2px;
}

.hero-bottom {
  position:absolute;
  bottom:0;
  left:clamp(24px,4.2vw,80px);
  right:clamp(24px,4.2vw,80px);
  display:flex;
  justify-content:space-between;
  padding:23px 0 26px;
  border-top:1px solid #faf5dc38;
  font-size:11px;
  letter-spacing:.3px;
  color:#e4e6d9;
}

.hero-bottom a {
  display:flex;
  gap:20px;
}

.section-wrap {
  width:min(1260px,calc(100% - 112px));
  margin-inline:auto;
}

.trailer-section {
  padding-top:112px;
  padding-bottom:102px;
}

.section-intro {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:80px;
  align-items:end;
  margin-bottom:43px;
}

.section-intro .eyebrow,.gallery-heading .eyebrow {
  margin-bottom:19px;
  color:#777552;
}

h2 {
  font-size:clamp(39px,4vw,61px);
  line-height:1.1;
  letter-spacing:-1.1px;
}

.section-intro>p {
  font-size:17px;
  line-height:1.8;
  max-width:400px;
  justify-self:end;
  padding-bottom:4px;
  color:var(--muted);
}

.trailer-player {
  position:relative;
  background:#10281f;
  overflow:hidden;
  border-radius:9px;
  box-shadow:0 30px 65px -36px #092c254d;
}

.trailer-player video {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
}

.trailer-play {
  display:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  color:white;
  background:linear-gradient(0deg,#0d2719aa,transparent 75%);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:18px;
  font-size:16px;
}

.js-ready .trailer-play {
  display:flex;
}

.js-ready .trailer-play[hidden] {
  display:none;
}

.play-circle {
  display:grid;
  place-items:center;
  padding-left:5px;
  width:90px;
  height:90px;
  border:1px solid #fff9;
  background:#faf7eade;
  border-radius:50%;
  color:var(--forest);
  font-size:24px;
  box-shadow:0 8px 35px #04140a3f;
  transition:transform .2s,background .2s;
}

.trailer-play:hover .play-circle {
  transform:scale(1.07);
  background:var(--cream);
}

.trailer-play small {
  display:block;
  margin-top:8px;
  font-size:11px;
  opacity:.8;
  letter-spacing:1px;
}

.media-note {
  font-size:11px;
  color:var(--muted);
  margin-top:19px;
  text-align:center;
}

.explore-section {
  padding:91px 0 53px;
  background:var(--paper);
  overflow:hidden;
}

.gallery-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:45px;
  gap:30px;
}

.gallery-description {
  font-size:16px;
  color:var(--muted);
  margin-top:19px;
  line-height:1.65;
}

.gallery-controls {
  display:flex;
  gap:10px;
  margin-bottom:2px;
}

.gallery-arrow {
  border:1px solid #8f9f9266;
  background:transparent;
  border-radius:50%;
  height:47px;
  width:47px;
  color:var(--ink);
  font-size:22px;
  transition:background .2s;
}

.gallery-arrow:hover:not(:disabled) {
  background:var(--forest);
  color:var(--cream);
}

.gallery-arrow:disabled {
  opacity:.3;
  cursor:default;
}

.game-gallery {
  display:flex;
  gap:28px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:#7d8e7d transparent;
  padding:0 max(56px,calc((100vw - 1260px)/2)) 33px;
  scroll-padding-inline:max(56px,calc((100vw - 1260px)/2));
  -webkit-overflow-scrolling:touch;
}

.screen-card {
  flex:0 0 278px;
  scroll-snap-align:start;
  min-width:0;
}

.screen-frame {
  position:relative;
  isolation:isolate;
  background:#172321;
  border:5px solid #213b31;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 14px 24px -19px #0e332bcc;
  aspect-ratio:9/17;
}

/* A soft backdrop fills extra height while the original interface stays intact. */
.screen-frame::before {
  content:"";
  position:absolute;
  inset:-20px;
  z-index:-1;
  background-image:var(--screen-art);
  background-position:center;
  background-size:cover;
  filter:blur(18px) brightness(.6);
}

.screen-frame img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.scenic-screen img {
  object-fit:cover;
}

.screen-copy {
  position:relative;
  padding:23px 0 0 32px;
}

.screen-number {
  position:absolute;
  left:0;
  top:30px;
  font-size:10px;
  font-weight:600;
  color:#7a806a;
}

.screen-copy h3 {
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.3px;
}

.screen-copy p {
  font-size:13px;
  line-height:1.7;
  color:#616e64;
  margin-top:11px;
  max-width:235px;
}

.gallery-foot {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#707969;
  gap:15px;
  margin-top:13px;
}

.gallery-hint {
  white-space:nowrap;
}

.gallery-hint span {
  margin-left:14px;
}

.overview-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--cream);
  background:var(--forest);
}

.overview-media,.overview-image,.overview-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-2;
}

.overview-image {
  object-fit:cover;
  object-position:70% center;
}

.overview-shade {
  z-index:-1;
  background:linear-gradient(90deg,#102d27fa 0%,#102d27eb 39%,#102d2799 70%,#102d275c),linear-gradient(0deg,#102d27e8,transparent 80%);
}

.overview-content {
  padding-block:102px 76px;
}

.overview-content .eyebrow {
  color:#cebd8b;
  margin-bottom:29px;
}

.overview-content h2 {
  font-size:clamp(56px,6vw,91px);
  line-height:1.04;
  letter-spacing:-1.5px;
  max-width:730px;
}

.overview-content h2 em {
  font-style:normal;
  color:#e4cc92;
}

.overview-description {
  max-width:570px;
  font-size:19px;
  line-height:1.8;
  margin-top:27px;
  color:#e1e6d8;
}

.overview-description+.overview-description {
  margin-top:14px;
}

.overview-content>.button {
  margin-top:31px;
}

.product-details {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:860px;
  gap:42px;
  border-top:1px solid #cfe0c62c;
  padding-top:32px;
  margin-top:73px;
  font-size:12px;
  line-height:1.7;
  color:#becab9;
}

.product-details strong {
  display:block;
  color:#f5f1e6;
  font-weight:600;
  font-size:12px;
  margin-bottom:8px;
}

.contact-section {
  padding-block:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}

.contact-section .eyebrow {
  color:#777552;
  margin-bottom:16px;
}

.contact-section h2 {
  font-size:40px;
  letter-spacing:-.5px;
}

.contact-section p:not(.eyebrow):not(.campaign-link-note) {
  color:var(--muted);
  font-size:14px;
  margin-top:17px;
  line-height:1.7;
}

.contact-link {
  font-size:20px;
  border-bottom:1px solid #8d9b82;
  padding-bottom:8px;
  display:flex;
  gap:40px;
}

.contact-link:hover {
  color:#728148;
}

.campaign-link-note {
  flex-basis:100%;
  font-size:12px;
  background:#ece8d7;
  padding:14px;
  color:#61623d;
  border-radius:4px;
}

.campaign-link-note[hidden] {
  display:none;
}

.site-footer {
  padding-block:27px 33px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  font-size:11px;
  color:var(--muted);
}

.footer-brand {
  color:var(--ink);
  font-weight:700;
}

.footer-divider {
  margin:0 12px;
  color:#b4baac;
}

.site-footer p {
  max-width:560px;
  font-size:10px;
  line-height:1.6;
  text-align:center;
}

.site-footer>a {
  white-space:nowrap;
}

.site-footer>a span {
  margin-left:10px;
}

@media(min-width:1650px) {
  .hero-content {
    padding-left:max(100px,calc((100vw - 1440px)/2));
  }
  .hero {
    min-height:820px;
  }
}

@media(max-width:1000px) {
  .site-header nav {
    gap:23px;
  }
  .nav-link {
    display:none;
  }
  .section-wrap {
    width:calc(100% - 64px);
  }
  .hero {
    min-height:680px;
    max-height:850px;
  }
  .hero-content {
    padding-left:48px;
    padding-right:40px;
  }
  .hero h1 {
    font-size:77px;
  }
  .section-intro {
    gap:30px;
  }
  .section-intro>p {
    font-size:15px;
  }
  .game-gallery {
    padding-inline:32px;
    scroll-padding-inline:32px;
  }
  .gallery-heading {
    align-items:center;
  }
  .gallery-controls {
    flex-shrink:0;
  }
  .screen-card {
    flex-basis:260px;
  }
  .overview-shade {
    background:linear-gradient(90deg,#102d27f5,#102d27b0),linear-gradient(0deg,#102d27ee,transparent);
  }
  .contact-link {
    font-size:17px;
    gap:20px;
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-top:20px;
  }
  .site-header {
    height:74px;
    padding-inline:22px;
  }
  .wordmark {
    font-size:30px;
  }
  .button-small {
    font-size:10px;
    padding:11px 13px;
    min-height:39px;
    gap:12px;
  }
  .button-small span {
    font-size:16px;
  }
  .hero {
    min-height:690px;
    height:calc(100svh - 74px);
    max-height:900px;
  }
  .hero-image {
    object-position:57% center;
  }
  .hero-shade {
    background:linear-gradient(0deg,#0b241ded,rgba(11,36,29,.37) 80%),linear-gradient(90deg,#0b241d50,transparent);
  }
  .hero-content {
    padding:140px 25px 131px;
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1.5px;
    max-width:270px;
    margin-bottom:23px;
  }
  .hero h1 {
    font-size:clamp(47px,11.6vw,68px);
    line-height:1.07;
    letter-spacing:-1.25px;
  }
  .hero-description {
    font-size:15px;
    line-height:1.65;
    margin-top:21px;
  }
  .hero-actions {
    margin-top:27px;
    gap:21px;
    align-items:flex-start;
    flex-direction:column;
  }
  .button {
    font-size:12px;
    min-height:49px;
    padding:15px 19px;
    gap:24px;
  }
  .hero-bottom {
    left:25px;
    right:25px;
    padding:20px 0 24px;
    font-size:9px;
    gap:16px;
    align-items:center;
  }
  .hero-bottom>a {
    font-size:0;
    gap:0;
  }
  .hero-bottom>a span {
    font-size:22px;
  }
  .section-wrap {
    width:calc(100% - 44px);
  }
  .trailer-section {
    padding-top:66px;
    padding-bottom:60px;
  }
  .section-intro {
    display:block;
    margin-bottom:28px;
  }
  .section-intro .eyebrow,.gallery-heading .eyebrow {
    font-size:9px;
    letter-spacing:1.8px;
    margin-bottom:16px;
  }
  h2 {
    font-size:37px;
    line-height:1.14;
    letter-spacing:-.5px;
  }
  .section-intro>p {
    margin-top:22px;
    max-width:340px;
    font-size:14px;
    line-height:1.8;
  }
  .trailer-player {
    border-radius:5px;
  }
  .play-circle {
    width:60px;
    height:60px;
    font-size:17px;
  }
  .trailer-play {
    gap:12px;
    font-size:12px;
  }
  .trailer-play small {
    font-size:9px;
    margin-top:5px;
  }
  .media-note {
    font-size:9px;
    line-height:1.7;
    margin-top:15px;
  }
  .explore-section {
    padding-top:61px;
    padding-bottom:35px;
  }
  .gallery-heading {
    display:block;
    position:relative;
    margin-bottom:32px;
  }
  .gallery-heading h2 {
    max-width:310px;
  }
  .gallery-description {
    font-size:13px;
    max-width:270px;
    margin-top:15px;
  }
  .gallery-controls {
    position:absolute;
    right:0;
    bottom:-60px;
    display:none;
  }
  .game-gallery {
    padding-inline:22px;
    scroll-padding-inline:22px;
    gap:22px;
    padding-bottom:23px;
  }
  .screen-card {
    flex-basis:76vw;
    max-width:300px;
  }
  .screen-frame {
    border-radius:26px;
  }
  .screen-copy h3 {
    font-size:26px;
  }
  .screen-copy p {
    font-size:13px;
    max-width:235px;
  }
  .gallery-foot {
    font-size:9px;
    line-height:1.6;
    margin-top:14px;
  }
  .gallery-foot>span:first-child {
    max-width:155px;
  }
  .gallery-hint span {
    margin-left:5px;
  }
  .overview-content {
    padding-block:70px 52px;
  }
  .overview-content .eyebrow {
    font-size:9px;
    letter-spacing:1.6px;
    margin-bottom:26px;
  }
  .overview-content h2 {
    font-size:47px;
    letter-spacing:-1px;
    line-height:1.07;
  }
  .overview-description {
    font-size:16px;
    line-height:1.8;
    margin-top:25px;
  }
  .overview-content>.button {
    margin-top:28px;
  }
  .overview-image {
    object-position:57% center;
  }
  .overview-shade {
    background:linear-gradient(90deg,#102d27e8,#102d27b8),linear-gradient(0deg,#102d27fa,transparent);
  }
  .product-details {
    margin-top:48px;
    padding-top:28px;
    grid-template-columns:1fr;
    gap:23px;
    font-size:12px;
  }
  .product-details strong {
    margin-bottom:4px;
  }
  .product-details br {
    display:none;
  }
  .product-details br:after {
    content:" ";
  }
  .contact-section {
    padding-block:49px;
    gap:25px;
  }
  .contact-section .eyebrow {
    font-size:9px;
  }
  .contact-section h2 {
    font-size:34px;
  }
  .contact-section p:not(.eyebrow):not(.campaign-link-note) {
    font-size:13px;
    max-width:280px;
    margin-top:13px;
  }
  .contact-link {
    font-size:18px;
  }
  .site-footer {
    padding-block:25px 29px;
    flex-wrap:wrap;
    gap:20px;
  }
  .site-footer>p {
    order:3;
    text-align:left;
    flex-basis:100%;
    max-width:310px;
    font-size:10px;
  }
  .site-footer>a {
    margin-left:auto;
  }
}

@media(max-width:600px) {
  .site-header .button {
    font-size:10px;
    padding:10px 11px;
    gap:10px;
    min-height:39px;
  }
  .site-header .button span {
    font-size:16px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}