/* =========================================
   EMBER RESTAURANT
   Concept Website by Arovique Digital
   ========================================= */


/* =========================================
   RESET
   ========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  background: #0b0a09;
  color: #f4efe8;

  overflow-x: hidden;
}


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


button,
input,
select,
textarea {
  font: inherit;
}


button {
  cursor: pointer;
}


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


/* =========================================
   VARIABLES
   ========================================= */

:root {

  --black:
    #0b0a09;

  --black-soft:
    #12100e;

  --dark:
    #181512;

  --dark-card:
    #1d1916;

  --cream:
    #f4efe8;

  --cream-soft:
    #c9c0b5;

  --gold:
    #c99b5b;

  --gold-light:
    #e0bc84;

  --orange:
    #a94d2a;

  --muted:
    #91877d;

  --line:
    rgba(255,255,255,0.1);

}


/* =========================================
   DEMO BAR
   ========================================= */

.demo-bar {
  background: #050505;

  border-bottom:
    1px solid
    rgba(255,255,255,0.07);

  color:
    #a79d92;

  font-size:
    0.72rem;
}


.demo-bar-inner {
  max-width:
    1280px;

  margin:
    auto;

  padding:
    8px 26px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}


.demo-bar strong {
  color:
    var(--cream);
}


.demo-bar a {
  color:
    var(--gold-light);

  font-weight:
    600;
}


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

.site-header {
  position:
    sticky;

  top:
    0;

  z-index:
    100;

  background:
    rgba(11,10,9,0.9);

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid
    rgba(255,255,255,0.07);
}


.nav-container {
  max-width:
    1280px;

  min-height:
    82px;

  margin:
    auto;

  padding:
    0 26px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.brand,
.footer-brand {
  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.65rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  color:
    white;
}


.brand span,
.footer-brand span {
  color:
    var(--gold);
}


.nav {
  display:
    flex;

  align-items:
    center;

  gap:
    28px;
}


.nav > a {
  color:
    #b7ada2;

  font-size:
    0.78rem;

  font-weight:
    500;

  transition:
    color 0.2s ease;
}


.nav > a:hover {
  color:
    white;
}


.nav .nav-cta {
  padding:
    12px 18px;

  border:
    1px solid
    rgba(201,155,91,0.55);

  color:
    var(--gold-light);
}


.nav .nav-cta:hover {
  background:
    var(--gold);

  color:
    #12100e;
}


.menu-toggle {
  display:
    none;

  border:
    0;

  background:
    transparent;

  width:
    42px;

  height:
    42px;
}


.menu-toggle span {
  display:
    block;

  width:
    25px;

  height:
    1px;

  margin:
    7px auto;

  background:
    white;
}


/* =========================================
   SHARED
   ========================================= */

.section {
  padding:
    120px 28px;
}


.section-label,
.eyebrow {
  display:
    inline-block;

  margin-bottom:
    22px;

  color:
    var(--gold);

  font-size:
    0.68rem;

  font-weight:
    700;

  letter-spacing:
    0.22em;
}


h1,
h2,
h3 {
  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-weight:
    500;

  line-height:
    1.03;
}


h2 {
  color:
    var(--cream);

  font-size:
    clamp(
      2.8rem,
      5vw,
      5rem
    );
}


h1 em,
h2 em {
  color:
    var(--gold-light);

  font-weight:
    500;
}


.button {
  min-height:
    52px;

  padding:
    0 24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid transparent;

  font-size:
    0.75rem;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


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


.button-gold {
  color:
    #13100d;

  background:
    var(--gold);
}


.button-gold:hover {
  background:
    var(--gold-light);
}


.button-outline {
  color:
    white;

  border-color:
    rgba(255,255,255,0.3);

  background:
    rgba(0,0,0,0.08);
}


.button-outline:hover {
  border-color:
    white;

  background:
    white;

  color:
    black;
}


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

.hero {
  position:
    relative;

  min-height:
    calc(100vh - 112px);

  padding:
    80px 28px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  background:
    linear-gradient(
      90deg,
      rgba(5,4,3,0.96) 0%,
      rgba(5,4,3,0.77) 42%,
      rgba(5,4,3,0.32) 70%,
      rgba(5,4,3,0.55) 100%
    ),
    url("https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&w=1800&q=85")
    center / cover
    no-repeat;
}


.hero::before {
  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      0deg,
      #0b0a09 0%,
      transparent 24%
    );
}


.hero-content {
  position:
    relative;

  z-index:
    2;

  width:
    100%;

  max-width:
    1280px;

  margin:
    auto;
}


.hero-content h1 {
  max-width:
    840px;

  font-size:
    clamp(
      4.3rem,
      9vw,
      8.6rem
    );

  color:
    white;

  letter-spacing:
    -0.04em;
}


.hero-content h1 em {
  display:
    block;
}


.hero-content > p {
  max-width:
    570px;

  margin-top:
    28px;

  color:
    #c0b7ad;

  font-size:
    1rem;

  line-height:
    1.85;
}


.hero-actions {
  margin-top:
    35px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;
}


.hero-bottom {
  position:
    absolute;

  z-index:
    3;

  left:
    50%;

  bottom:
    38px;

  width:
    calc(100% - 56px);

  max-width:
    1280px;

  transform:
    translateX(-50%);

  display:
    grid;

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

  border-top:
    1px solid
    rgba(255,255,255,0.15);
}


.hero-bottom div {
  padding-top:
    18px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.hero-bottom span {
  color:
    var(--gold);

  font-size:
    0.58rem;

  font-weight:
    700;

  letter-spacing:
    0.18em;
}


.hero-bottom strong {
  color:
    #d7cec5;

  font-size:
    0.75rem;

  font-weight:
    500;
}


.scroll-indicator {
  position:
    absolute;

  right:
    30px;

  bottom:
    110px;

  width:
    30px;

  height:
    50px;

  border:
    1px solid
    rgba(255,255,255,0.24);

  border-radius:
    20px;
}


.scroll-indicator span {
  position:
    absolute;

  width:
    3px;

  height:
    8px;

  left:
    50%;

  top:
    10px;

  transform:
    translateX(-50%);

  border-radius:
    5px;

  background:
    var(--gold);

  animation:
    scrollMove
    1.8s
    infinite;
}


@keyframes scrollMove {

  0% {
    opacity: 0;
    transform:
      translate(-50%,0);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%,20px);
  }

}


/* =========================================
   INTRO
   ========================================= */

.intro {
  background:
    var(--black);
}


.intro-grid {
  max-width:
    1280px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    1fr 0.9fr;

  gap:
    120px;

  align-items:
    start;
}


.intro-copy {
  padding-top:
    70px;
}


.intro-copy p {
  margin-bottom:
    20px;

  color:
    var(--muted);

  line-height:
    1.9;
}


/* =========================================
   FEATURED DISHES
   ========================================= */

.featured-dishes {
  display:
    grid;

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


.dish-feature {
  min-height:
    650px;

  position:
    relative;

  overflow:
    hidden;

  background:
    #111;
}


.dish-image {
  position:
    absolute;

  inset:
    0;

  background-position:
    center;

  background-size:
    cover;

  transition:
    transform 0.8s ease;
}


.dish-feature:hover
.dish-image {
  transform:
    scale(1.06);
}


.dish-feature::after {
  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      0deg,
      rgba(7,6,5,0.96) 0%,
      rgba(7,6,5,0.2) 70%
    );
}


.dish-one .dish-image {
  background-image:
    url("https://images.unsplash.com/photo-1546833999-b9f581a1996d?auto=format&fit=crop&w=1000&q=85");
}


.dish-two .dish-image {
  background-image:
    url("https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&w=1000&q=85");
}


.dish-three .dish-image {
  background-image:
    url("https://images.unsplash.com/photo-1488477181946-6428a0291777?auto=format&fit=crop&w=1000&q=85");
}


.dish-info {
  position:
    absolute;

  z-index:
    2;

  left:
    34px;

  right:
    34px;

  bottom:
    36px;
}


.dish-info > span {
  color:
    var(--gold);

  font-size:
    0.6rem;

  letter-spacing:
    0.2em;
}


.dish-info h3 {
  margin:
    10px 0;

  color:
    white;

  font-size:
    2rem;
}


.dish-info p {
  max-width:
    330px;

  color:
    #aaa096;

  font-size:
    0.8rem;

  line-height:
    1.7;
}


.dish-info strong {
  display:
    block;

  margin-top:
    20px;

  color:
    var(--gold-light);

  font-size:
    0.85rem;
}


/* =========================================
   MENU
   ========================================= */

.menu-section {
  background:
    #11100e;
}


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

  margin:
    0 auto 55px;
}


.section-heading.centered {
  max-width:
    800px;

  text-align:
    center;
}


.section-heading > p {
  max-width:
    620px;

  margin:
    25px auto 0;

  color:
    var(--muted);

  line-height:
    1.8;
}


.menu-filters {
  max-width:
    900px;

  margin:
    0 auto 50px;

  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    9px;
}


.menu-filter {
  padding:
    10px 18px;

  border:
    1px solid
    rgba(255,255,255,0.1);

  background:
    transparent;

  color:
    #968b80;

  font-size:
    0.7rem;

  text-transform:
    uppercase;

  letter-spacing:
    0.1em;

  transition:
    0.2s ease;
}


.menu-filter:hover,
.menu-filter.active {
  color:
    #111;

  background:
    var(--gold);

  border-color:
    var(--gold);
}


.menu-grid {
  max-width:
    1050px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    0 60px;
}


.menu-item {
  min-height:
    130px;

  padding:
    27px 0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    25px;

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


.menu-item.hidden {
  display:
    none;
}


.menu-item h3 {
  margin-bottom:
    9px;

  color:
    var(--cream);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    1rem;

  font-weight:
    600;

  letter-spacing:
    -0.02em;
}


.menu-item p {
  max-width:
    340px;

  color:
    var(--muted);

  font-size:
    0.76rem;

  line-height:
    1.6;
}


.menu-item > strong {
  color:
    var(--gold-light);

  font-size:
    0.78rem;

  white-space:
    nowrap;
}


.menu-note {
  margin-top:
    45px;

  text-align:
    center;

  color:
    #665e56;

  font-size:
    0.68rem;
}


/* =========================================
   STORY
   ========================================= */

.story {
  background:
    var(--black);
}


.story-grid {
  min-height:
    780px;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;
}


.story-image {
  position:
    relative;

  min-height:
    700px;

  background:
    linear-gradient(
      0deg,
      rgba(9,8,7,0.25),
      rgba(9,8,7,0.25)
    ),
    url("https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&w=1200&q=85")
    center / cover
    no-repeat;
}


.story-badge {
  position:
    absolute;

  right:
    30px;

  bottom:
    30px;

  width:
    125px;

  height:
    125px;

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  background:
    var(--gold);

  color:
    #17120e;
}


.story-badge span {
  font-size:
    0.6rem;

  letter-spacing:
    0.18em;
}


.story-badge strong {
  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.7rem;
}


.story-content {
  padding:
    100px;

  display:
    flex;

  justify-content:
    center;

  flex-direction:
    column;
}


.story-content > p {
  max-width:
    520px;

  margin-top:
    20px;

  color:
    var(--muted);

  line-height:
    1.9;
}


.story-values {
  margin-top:
    45px;

  display:
    grid;

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

  gap:
    12px;
}


.story-values div {
  padding:
    18px 0;

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


.story-values strong {
  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--gold);

  font-size:
    0.65rem;
}


.story-values span {
  color:
    #c4bbb1;

  font-size:
    0.72rem;
}


/* =========================================
   GALLERY
   ========================================= */

.gallery-section {
  background:
    #100e0c;
}


.gallery {
  max-width:
    1280px;

  height:
    820px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    1.35fr 0.85fr 0.85fr;

  grid-template-rows:
    1fr 1fr;

  gap:
    12px;
}


.gallery-item {
  position:
    relative;

  overflow:
    hidden;

  background-position:
    center;

  background-size:
    cover;

  filter:
    saturate(0.88);

  transition:
    filter 0.4s ease;
}


.gallery-item:hover {
  filter:
    saturate(1.15);
}


.gallery-item::before {
  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      0deg,
      rgba(8,7,6,0.72),
      transparent 50%
    );
}


.gallery-large {
  grid-row:
    span 2;
}


.image-one {
  background-image:
    url("https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=1100&q=85");
}


.image-two {
  background-image:
    url("https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=900&q=85");
}


.image-three {
  background-image:
    url("https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=900&q=85");
}


.image-four {
  background-image:
    url("https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?auto=format&fit=crop&w=900&q=85");
}


.image-five {
  background-image:
    url("https://images.unsplash.com/photo-1470337458703-46ad1756a187?auto=format&fit=crop&w=900&q=85");
}


.gallery-label {
  position:
    absolute;

  z-index:
    2;

  left:
    20px;

  bottom:
    18px;

  color:
    white;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.05rem;
}


/* =========================================
   QUOTE
   ========================================= */

.quote-section {
  padding:
    130px 28px;

  background:
    var(--gold);
}


.quote-inner {
  max-width:
    900px;

  margin:
    auto;

  text-align:
    center;

  color:
    #17120e;
}


.quote-inner > span {
  display:
    block;

  height:
    65px;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    6rem;

  line-height:
    1;
}


.quote-inner blockquote {
  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(
      2.3rem,
      5vw,
      4.7rem
    );

  line-height:
    1.1;
}


.quote-inner small {
  display:
    block;

  margin-top:
    28px;

  font-size:
    0.65rem;

  font-weight:
    700;

  letter-spacing:
    0.22em;
}


/* =========================================
   RESERVATION
   ========================================= */

.reservation-section {
  background:
    var(--black);
}


.reservation-wrapper {
  max-width:
    1180px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    0.85fr 1.15fr;

  gap:
    90px;

  align-items:
    center;
}


.reservation-copy > p {
  max-width:
    480px;

  margin-top:
    27px;

  color:
    var(--muted);

  line-height:
    1.85;
}


.reservation-details {
  margin-top:
    45px;

  display:
    grid;

  gap:
    24px;
}


.reservation-details div {
  padding-bottom:
    20px;

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


.reservation-details span {
  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--gold);

  font-size:
    0.58rem;

  letter-spacing:
    0.18em;
}


.reservation-details strong {
  color:
    #d8d0c6;

  font-size:
    0.83rem;

  font-weight:
    500;
}


.reservation-details p {
  margin-top:
    4px;

  color:
    #766e65;

  font-size:
    0.72rem;
}


.reservation-form {
  padding:
    40px;

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

  background:
    #15120f;
}


.form-row {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;
}


.reservation-form label {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  margin-bottom:
    16px;

  color:
    #ada398;

  font-size:
    0.68rem;

  letter-spacing:
    0.04em;
}


.reservation-form input,
.reservation-form select,
.reservation-form textarea {
  width:
    100%;

  padding:
    14px;

  border:
    1px solid
    rgba(255,255,255,0.12);

  border-radius:
    0;

  outline:
    none;

  background:
    #0e0c0a;

  color:
    white;

  transition:
    border-color 0.2s ease;
}


.reservation-form input:focus,
.reservation-form select:focus,
.reservation-form textarea:focus {
  border-color:
    var(--gold);
}


.reservation-form select option {
  background:
    #0f0d0b;
}


.reservation-form textarea {
  resize:
    vertical;
}


.reservation-button {
  width:
    100%;

  margin-top:
    8px;

  border:
    0;

  background:
    var(--gold);

  color:
    #17120e;
}


.form-disclaimer {
  display:
    block;

  margin-top:
    13px;

  color:
    #665f57;

  text-align:
    center;

  font-size:
    0.64rem;
}


.form-success {
  display:
    none;

  margin-top:
    15px;

  padding:
    13px;

  border:
    1px solid
    rgba(201,155,91,0.3);

  background:
    rgba(201,155,91,0.08);

  color:
    var(--gold-light);

  text-align:
    center;

  font-size:
    0.74rem;
}


/* =========================================
   CONTACT
   ========================================= */

.contact-section {
  background:
    #11100e;
}


.contact-wrapper {
  max-width:
    1180px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap:
    80px;
}


.contact-details {
  display:
    grid;

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

  gap:
    20px;
}


.contact-details div {
  padding-top:
    18px;

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


.contact-details span {
  display:
    block;

  margin-bottom:
    11px;

  color:
    var(--gold);

  font-size:
    0.58rem;

  letter-spacing:
    0.16em;
}


.contact-details strong {
  display:
    block;

  color:
    #d4cbc2;

  font-size:
    0.8rem;

  font-weight:
    500;
}


.contact-details p {
  margin-top:
    5px;

  color:
    #847b71;

  font-size:
    0.7rem;

  line-height:
    1.5;
}


.contact-details small {
  display:
    block;

  margin-top:
    8px;

  color:
    #554f48;

  font-size:
    0.6rem;
}


.map-demo {
  position:
    relative;

  max-width:
    1180px;

  height:
    390px;

  margin:
    65px auto 0;

  overflow:
    hidden;

  background:
    #191612;
}


.map-demo::before {
  content: "";

  position:
    absolute;

  inset:
    0;

  opacity:
    0.16;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.08) 1px,
      transparent 1px
    );

  background-size:
    60px 60px;
}


.street {
  position:
    absolute;

  height:
    9px;

  width:
    150%;

  background:
    #27221d;

  transform-origin:
    center;
}


.street-one {
  top:
    23%;

  left:
    -20%;

  transform:
    rotate(12deg);
}


.street-two {
  top:
    65%;

  left:
    -20%;

  transform:
    rotate(-9deg);
}


.street-three {
  width:
    9px;

  height:
    150%;

  top:
    -20%;

  left:
    28%;

  transform:
    rotate(14deg);
}


.street-four {
  width:
    9px;

  height:
    150%;

  top:
    -20%;

  left:
    72%;

  transform:
    rotate(-14deg);
}


.location-marker {
  position:
    absolute;

  left:
    50%;

  top:
    49%;

  transform:
    translate(-50%,-50%);
}


.location-marker > div {
  width:
    56px;

  height:
    56px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--gold);

  color:
    #17120e;

  font-family:
    "Playfair Display",
    serif;

  font-weight:
    bold;

  box-shadow:
    0 0 0 14px
    rgba(201,155,91,0.12);
}


.map-info {
  position:
    absolute;

  left:
    calc(50% + 40px);

  top:
    calc(49% - 17px);

  display:
    flex;

  flex-direction:
    column;

  padding:
    10px 14px;

  background:
    #0d0b09;
}


.map-info strong {
  color:
    white;

  font-size:
    0.75rem;
}


.map-info span {
  color:
    #7f766d;

  font-size:
    0.62rem;
}


/* =========================================
   FINAL CTA
   ========================================= */

.final-cta {
  padding:
    130px 28px;

  position:
    relative;

  text-align:
    center;

  background:
    linear-gradient(
      rgba(9,8,7,0.8),
      rgba(9,8,7,0.9)
    ),
    url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1800&q=85")
    center / cover
    no-repeat;
}


.final-cta-content {
  position:
    relative;

  z-index:
    2;

  max-width:
    900px;

  margin:
    auto;
}


.final-cta-content > span {
  display:
    block;

  margin-bottom:
    20px;

  color:
    var(--gold);

  font-size:
    0.62rem;

  font-weight:
    700;

  letter-spacing:
    0.22em;
}


.final-cta-content h2 {
  margin-bottom:
    35px;

  color:
    white;
}


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

.footer {
  padding:
    75px 28px 25px;

  background:
    #070605;
}


.footer-top,
.footer-bottom {
  max-width:
    1280px;

  margin:
    auto;
}


.footer-top {
  padding-bottom:
    60px;

  display:
    grid;

  grid-template-columns:
    0.7fr 1fr auto;

  gap:
    70px;

  align-items:
    start;
}


.footer-top > p {
  max-width:
    430px;

  color:
    #716961;

  font-size:
    0.75rem;

  line-height:
    1.8;
}


.footer-nav {
  display:
    grid;

  gap:
    10px;

  color:
    #9c9186;

  font-size:
    0.72rem;
}


.footer-bottom {
  padding-top:
    20px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

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

  color:
    #554f49;

  font-size:
    0.64rem;
}


.footer-bottom a {
  color:
    var(--gold);
}


/* =========================================
   REVEAL ANIMATION
   ========================================= */

.reveal {
  opacity:
    0;

  transform:
    translateY(28px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}


.reveal.visible {
  opacity:
    1;

  transform:
    translateY(0);
}


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

@media (max-width: 1000px) {

  .nav > a:not(.nav-cta) {
    display:
      none;
  }


  .intro-grid,
  .story-grid,
  .reservation-wrapper,
  .contact-wrapper {
    grid-template-columns:
      1fr;
  }


  .intro-copy {
    padding-top:
      0;
  }


  .featured-dishes {
    grid-template-columns:
      1fr;
  }


  .dish-feature {
    min-height:
      520px;
  }


  .story-image {
    min-height:
      600px;
  }


  .story-content {
    padding:
      90px 40px;
  }


  .gallery {
    height:
      1000px;

    grid-template-columns:
      1fr 1fr;

    grid-template-rows:
      2fr 1fr 1fr;
  }


  .gallery-large {
    grid-column:
      span 2;

    grid-row:
      auto;
  }


  .contact-details {
    grid-template-columns:
      1fr 1fr 1fr;
  }

}


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

@media (max-width: 720px) {

  .section {
    padding:
      85px 20px;
  }


  .demo-bar-inner {
    padding:
      8px 16px;

    font-size:
      0.63rem;
  }


  .nav-container {
    min-height:
      70px;

    padding:
      0 18px;
  }


  .menu-toggle {
    display:
      block;
  }


  .nav {
    position:
      absolute;

    top:
      calc(100% + 7px);

    left:
      12px;

    right:
      12px;

    padding:
      15px;

    display:
      none;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      4px;

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

    background:
      #11100e;

    box-shadow:
      0 25px 55px
      rgba(0,0,0,0.45);
  }


  .nav.open {
    display:
      flex;
  }


  .nav > a,
  .nav > a:not(.nav-cta) {
    display:
      block;

    padding:
      12px 10px;
  }


  .nav .nav-cta {
    margin-top:
      7px;

    text-align:
      center;
  }


  .hero {
    min-height:
      790px;

    padding:
      75px 20px 180px;
  }


  .hero-content h1 {
    font-size:
      clamp(
        4rem,
        18vw,
        6.4rem
      );
  }


  .hero-content > p {
    font-size:
      0.9rem;
  }


  .hero-actions {
    flex-direction:
      column;
  }


  .hero-actions .button {
    width:
      100%;
  }


  .hero-bottom {
    bottom:
      38px;

    grid-template-columns:
      1fr;

    gap:
      13px;
  }


  .scroll-indicator {
    display:
      none;
  }


  .intro-grid {
    gap:
      35px;
  }


  .dish-feature {
    min-height:
      500px;
  }


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


  .story-image {
    min-height:
      480px;
  }


  .story-content {
    padding:
      75px 20px;
  }


  .story-values {
    grid-template-columns:
      1fr;
  }


  .gallery {
    height:
      auto;

    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .gallery-large {
    grid-column:
      auto;
  }


  .gallery-item {
    min-height:
      330px;
  }


  .form-row {
    grid-template-columns:
      1fr;
  }


  .reservation-wrapper {
    gap:
      55px;
  }


  .reservation-form {
    padding:
      25px 18px;
  }


  .contact-wrapper {
    gap:
      45px;
  }


  .contact-details {
    grid-template-columns:
      1fr;
  }


  .map-demo {
    height:
      320px;
  }


  .footer-top {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }


  .footer-bottom {
    flex-direction:
      column;
  }

}