:root{
  --forest:#103b2d;
  --forest-dark:#061d16;
  --forest-mid:#17533e;
  --lake:#0c6d78;
  --lake-light:#39a9b6;
  --cream:#f4f0de;
  --paper:#e7dfc7;
  --wood:#80542f;
  --orange:#d86d27;
  --gold:#e3a52f;
  --text:#eef5eb;
  --muted:#b8c9bd;
  --line:rgba(235,244,231,.13);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  background:var(--forest-dark);
}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(57,169,182,.24),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      #0b3328 0%,
      #071f18 44%,
      #061913 100%
    );
}

a{
  color:inherit;
}

.page-shell{
  min-height:100vh;
  overflow:hidden;
}


/* =========================================================
   SITE HEADER
   ========================================================= */

.site-header{
  position:relative;
  z-index:10;

  display:flex;
  justify-content:center;

  padding:22px 18px 0;
}

.brand-link{
  display:block;
  width:min(650px,92vw);
}

.site-logo{
  display:block;

  width:100%;
  max-height:360px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 18px 28px rgba(0,0,0,.35)
    );
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;

  max-width:1200px;

  margin:-18px auto 0;

  padding:40px 24px 86px;

  text-align:center;
}

.hero-content{
  position:relative;

  max-width:880px;

  margin:auto;
}

.eyebrow{
  color:#e3b963;

  font-size:12px;
  line-height:1.4;

  font-weight:900;

  letter-spacing:.17em;
}

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

h1{
  margin:12px 0 18px;

  font-size:
    clamp(
      48px,
      8vw,
      90px
    );

  line-height:.94;

  letter-spacing:-.055em;

  font-weight:950;
}

h1 span{
  color:#79c7c8;
}

.hero-copy{
  max-width:730px;

  margin:0 auto;

  color:#c9d8ce;

  font-size:
    clamp(
      17px,
      2vw,
      21px
    );

  line-height:1.62;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:12px;

  margin-top:30px;
}

.button{
  min-height:54px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:9px;

  padding:14px 22px;

  border-radius:999px;

  text-decoration:none;

  font-size:15px;

  font-weight:900;

  transition:.18s ease;
}

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

.button-primary{
  color:#132119;

  background:
    linear-gradient(
      180deg,
      #efbd57,
      #d98b2b
    );

  box-shadow:
    0 10px 28px rgba(0,0,0,.23);
}

.button-secondary{
  border:
    1px solid rgba(255,255,255,.18);

  background:
    rgba(255,255,255,.06);
}

.button-icon{
  font-size:21px;
}

.already-open{
  margin:17px 0 0;

  color:#8eaa99;

  font-size:13px;
}


/* =========================================================
   AVAILABLE NOW
   ========================================================= */

.available-section{
  max-width:1180px;

  margin:auto;

  padding:22px 24px 64px;
}

.available-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:18px;

  margin-top:30px;
}

.available-card{
  position:relative;

  display:flex;
  align-items:center;

  gap:24px;

  min-height:260px;

  padding:26px;

  overflow:hidden;

  border:
    1px solid var(--line);

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      rgba(28,76,59,.82),
      rgba(8,31,24,.95)
    );

  box-shadow:
    inset 0 1px rgba(255,255,255,.03),
    0 14px 34px rgba(0,0,0,.14);

  text-decoration:none;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.available-card:hover{
  transform:translateY(-4px);

  border-color:
    rgba(239,186,80,.42);

  background:
    linear-gradient(
      145deg,
      rgba(34,88,68,.9),
      rgba(10,39,30,.98)
    );
}

.restroom-feature{
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(57,169,182,.12),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      rgba(30,80,60,.86),
      rgba(8,31,24,.96)
    );
}

.available-logo{
  flex:0 0 190px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.available-logo img{
  display:block;

  width:180px;
  max-width:100%;

  height:auto;

  object-fit:contain;
}

.available-icon{
  flex:0 0 120px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:5rem;

  opacity:.92;
}

.available-content{
  flex:1;

  min-width:0;
}

.open-badge{
  display:inline-block;

  margin-bottom:8px;

  padding:6px 10px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #e47d3b,
      #c85f28
    );

  color:white;

  font-size:10px;

  font-weight:950;

  letter-spacing:.12em;
}

.available-content h3{
  margin:0 0 9px;

  font-size:28px;

  line-height:1.08;
}

.available-content p{
  margin:0 0 18px;

  color:#b9cbbf;

  line-height:1.58;

  font-size:14px;
}

.feature-button{
  display:inline-block;

  color:#efba50;

  font-weight:900;

  text-decoration:none;
}


/* =========================================================
   COMING SOON
   ========================================================= */

.coming-section{
  max-width:1180px;

  margin:auto;

  padding:76px 24px;
}

.section-heading{
  max-width:720px;

  margin:0 auto 34px;

  text-align:center;
}

.section-heading h2,
.arcade-copy h2{
  margin:9px 0 12px;

  font-size:
    clamp(
      34px,
      5vw,
      54px
    );

  line-height:1.04;

  letter-spacing:-.035em;
}

.section-heading p,
.arcade-copy p{
  color:var(--muted);

  line-height:1.65;

  font-size:16px;
}

.feature-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:14px;
}

.feature-card{
  min-height:220px;

  padding:24px;

  border:
    1px solid var(--line);

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      rgba(28,76,59,.75),
      rgba(8,31,24,.9)
    );

  box-shadow:
    inset 0 1px rgba(255,255,255,.03);
}

.feature-icon{
  margin-bottom:17px;

  font-size:34px;
}

.feature-card h3{
  margin-bottom:9px;

  font-size:20px;
}

.feature-card p{
  margin-bottom:0;

  color:#aebfb4;

  line-height:1.55;

  font-size:14px;
}

.text-link{
  display:inline-block;

  margin-top:15px;

  color:#efba50;

  font-weight:900;

  text-decoration:none;
}


/* =========================================================
   ARCADE CALLOUT
   ========================================================= */

.arcade-callout{
  max-width:1120px;

  margin:16px auto 72px;

  padding:32px;

  border:
    1px solid rgba(239,186,80,.27);

  border-radius:26px;

  background:
    radial-gradient(
      circle at right,
      rgba(216,109,39,.13),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #123e30,
      #0a291f
    );

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:30px;
}

.arcade-copy{
  max-width:700px;
}

.arcade-copy p{
  margin-bottom:0;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  max-width:1180px;

  margin:auto;

  padding:
    26px 24px 38px;

  border-top:
    1px solid rgba(255,255,255,.08);

  color:#779486;

  display:flex;
  justify-content:space-between;

  gap:18px;

  font-size:12px;
}

.footer-tag{
  text-transform:uppercase;

  letter-spacing:.13em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:800px){

  .site-header{
    padding-top:14px;
  }

  .hero{
    margin-top:-5px;

    padding-top:28px;
    padding-bottom:64px;
  }

  .available-grid{
    grid-template-columns:1fr;
  }

  .feature-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .arcade-callout{
    margin-left:14px;
    margin-right:14px;

    flex-direction:column;
    align-items:flex-start;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:540px){

  .site-header{
    padding-left:8px;
    padding-right:8px;
  }

  .brand-link{
    width:100%;
  }

  .hero{
    padding-left:17px;
    padding-right:17px;
  }

  h1{
    font-size:47px;
  }

  .hero-actions{
    display:grid;
  }

  .button{
    width:100%;
  }

  .available-section{
    padding:
      10px 14px 54px;
  }

  .available-card{
    min-height:0;

    padding:18px;

    gap:14px;
  }

  .available-logo{
    flex:0 0 102px;
  }

  .available-logo img{
    width:102px;
  }

  .available-icon{
    flex:0 0 78px;

    font-size:3.3rem;
  }

  .available-content h3{
    font-size:21px;
  }

  .available-content p{
    font-size:13px;
  }

  .coming-section{
    padding:60px 14px;
  }

  .feature-grid{
    grid-template-columns:1fr;
  }

  .feature-card{
    min-height:0;

    padding:21px;
  }

  footer{
    flex-direction:column;

    text-align:center;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media(max-width:390px){

  .available-card{
    display:grid;

    grid-template-columns:
      82px 1fr;

    align-items:start;
  }

  .available-logo{
    width:82px;

    flex:none;
  }

  .available-logo img{
    width:82px;
  }

  .available-icon{
    width:70px;

    flex:none;

    font-size:3rem;
  }

}