:root {
  --ink: #0b3b20;
  --deep: #062c18;
  --forest: #124b28;
  --leaf: #3f7f3b;
  --sage: #8eaf8a;
  --mint: #dfeadd;
  --paper: #f6f3e9;
  --muted: #718075;
  --line: rgba(11, 59, 32, 0.18);
}


/* ========================================
   GLOBAL
======================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;

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

  background: var(--paper);
  color: var(--ink);
}


/* ========================================
   BACKGROUND TEXTURE
======================================== */

body:before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  opacity: 0.06;

  background-image:
    radial-gradient(
      var(--deep) 0.6px,
      transparent 0.6px
    );

  background-size: 5px 5px;
}


/* ========================================
   BOOKING PAGE
======================================== */

.booking-page {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}


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

.booking-header {
  height: 82px;

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

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

  padding: 0 6vw;

  position: relative;
  z-index: 2;

  background: rgba(246, 243, 233, 0.92);

  backdrop-filter: blur(12px);
}


/* ========================================
   BRAND
======================================== */

.brand {
  display: flex;
  align-items: center;

  gap: 10px;

  text-decoration: none;

  color: var(--ink);

  font: 700 18px "Space Grotesk";
}

.brand > span:last-child > span {
  font-weight: 400;
}

.brand-mark {
  width: 40px;
  height: 40px;

  object-fit: contain;
}


/* ========================================
   BACK BUTTON
======================================== */

.back {
  text-decoration: none;

  font-size: 12px;
  font-weight: 800;

  border-bottom: 1px solid var(--ink);

  padding-bottom: 4px;
}


/* ========================================
   MAIN BOOKING AREA
======================================== */

.booking-main {
  width: min(1200px, 88vw);

  margin: auto;

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

  gap: 9vw;

  padding: 85px 0;
}


/* ========================================
   EYEBROW
======================================== */

.eyebrow {
  font-size: 10px;
  font-weight: 800;

  letter-spacing: 2px;

  display: flex;
  align-items: center;

  gap: 10px;
}

.eyebrow span {
  width: 8px;
  height: 8px;

  background: var(--leaf);

  border-radius: 50%;

  box-shadow:
    0 0 0 5px rgba(63, 127, 59, 0.12);
}


/* ========================================
   MAIN HEADING
======================================== */

h1 {
  font:
    700 clamp(58px, 7vw, 100px) / 0.86
    "Space Grotesk";

  letter-spacing: -0.07em;

  margin: 28px 0;
}


/* ========================================
   OUTLINE HEADING
======================================== */

.booking-intro h1 em {
  font-style: normal;

  color: transparent;

  -webkit-text-stroke: 2px var(--forest);
}


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

.booking-intro > p {
  max-width: 430px;

  color: var(--muted);

  line-height: 1.7;
}


/* ========================================
   SIDE NOTE
======================================== */

.side-note {
  margin-top: 80px;

  padding: 18px 0;

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

  display: flex;
  flex-direction: column;

  gap: 8px;

  font-size: 10px;

  letter-spacing: 0.5px;
}

.side-note span {
  color: var(--muted);
}


/* ========================================
   FORM CARD
======================================== */

.form-card {
  background: var(--deep);

  color: var(--paper);

  padding: 38px;

  border-radius: 2px;

  box-shadow: 10px 10px 0 var(--sage);

  position: relative;
}


/* ========================================
   FORM CARD BACKGROUND TEXT
======================================== */

.form-card:after {
  content: "BOOK";

  position: absolute;

  right: -35px;
  top: 40px;

  color: var(--mint);

  font:
    700 70px
    "Space Grotesk";

  opacity: 0.08;

  transform: rotate(90deg);
}


/* ========================================
   FORM FIELD
======================================== */

.field {
  margin-bottom: 25px;
}


/* ========================================
   FIELD LABEL
======================================== */

.field label {
  display: block;

  font-size: 9px;

  letter-spacing: 1.8px;

  font-weight: 800;

  margin-bottom: 9px;
}

.field label b {
  color: var(--sage);
}

.field label span {
  color: #829087;

  font-weight: 400;
}


/* ========================================
   FORM INPUTS
======================================== */

input,
select,
textarea {
  width: 100%;

  border: 0;

  border-bottom: 1px solid #52705f;

  background: transparent;

  color: var(--paper);

  font:
    500 15px
    "DM Sans";

  padding: 11px 0;

  border-radius: 0;

  outline: none;
}


/* ========================================
   INPUT FOCUS
======================================== */

input:focus,
select:focus,
textarea:focus {
  border-bottom-color: var(--sage);
}


/* ========================================
   PLACEHOLDER
======================================== */

input::placeholder,
textarea::placeholder {
  color: #7c8e82;
}


/* ========================================
   SELECT
======================================== */

select {
  color: var(--paper);
}

select option {
  color: var(--ink);
}


/* ========================================
   TEXTAREA
======================================== */

textarea {
  resize: vertical;
}


/* ========================================
   SUBMIT BUTTON
======================================== */

.submit-btn {
  width: 100%;

  padding: 17px 18px;

  margin-top: 10px;

  border: 1.5px solid var(--ink);

  background: var(--mint);

  color: var(--ink);

  font:
    800 12px
    "DM Sans";

  cursor: pointer;

  box-shadow: 5px 5px 0 var(--leaf);

  transition: 0.2s;
}


/* ========================================
   SUBMIT BUTTON HOVER
======================================== */

.submit-btn:hover {
  transform: translate(3px, 3px);

  box-shadow: 2px 2px 0 var(--leaf);
}


/* ========================================
   FORM HELP TEXT
======================================== */

.form-help {
  font-size: 9px;

  color: #819287;

  margin: 20px 0 0;
}


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

.booking-footer {
  border-top: 1px solid var(--line);

  padding: 20px 6vw;

  display: flex;

  justify-content: space-between;

  color: #718075;

  font-size: 10px;

  margin-top: auto;
}


/* ========================================
   RESPONSIVE — TABLET / MOBILE
======================================== */

@media (max-width: 800px) {

  /* Header */

  .booking-header {
    height: 70px;

    padding: 0 22px;
  }


  /* Main */

  .booking-main {
    grid-template-columns: 1fr;

    width: min(94vw, 600px);

    padding: 60px 0;

    gap: 50px;
  }


  /* Side note */

  .side-note {
    margin-top: 45px;
  }


  /* Form */

  .form-card {
    padding: 28px 22px;

    box-shadow: 7px 7px 0 var(--sage);
  }


  /* Footer */

  .booking-footer {
    padding: 20px 22px;

    gap: 20px;
  }

  .booking-footer span:last-child {
    display: none;
  }
}