@import url("resets.css");
@import url("choices.min.css");
:root {
  /* ANCHOR - COLOR PALETTES - PRIMITIVES */

  /* Green Palette */
  --color-mint: #22f8bf;
  --color-mint-100: #1fdfac;
  --color-mint-200: #1bc699;
  --color-mint-300: #18ae86;
  --color-mint-400: #149573;
  --color-mint-500: #117c60;
  --color-mint-600: #0e634c;
  --color-mint-700: #0a4a39;
  --color-mint-800: #073226;
  --color-mint-900: #031913;

  --color-mint-light-100: #38f9c5;
  --color-mint-light-200: #4ef9cc;
  --color-mint-light-300: #64fad2;
  --color-mint-light-400: #7afbd9;
  --color-mint-light-500: #91fcdf;
  --color-mint-light-600: #a7fce5;
  --color-mint-light-700: #bdfcec;
  --color-mint-light-800: #d3fef2;
  --color-mint-light-900: #e9fef9;

  /* Blue Palette */
  --color-azure: #2290f8;
  --color-azure-100: #1f82df;
  --color-azure-200: #1b73c6;
  --color-azure-300: #1865ae;
  --color-azure-400: #145695;
  --color-azure-500: #11487c;
  --color-azure-600: #0e3a63;
  --color-azure-700: #0a2b4a;
  --color-azure-800: #071d32;
  --color-azure-900: #030e19;

  --color-azure-light-100: #389bf9;
  --color-azure-light-200: #4ea6f9;
  --color-azure-light-300: #64b1fa;
  --color-azure-light-400: #7abcfb;
  --color-azure-light-500: #91c8fc;
  --color-azure-light-600: #a7d3fc;
  --color-azure-light-700: #bddefd;
  --color-azure-light-800: #d3e9fe;
  --color-azure-light-900: #e9f4fe;

  /* Steel Blue Palette */
  --color-steel: #57a9e6;
  --color-steel-100: #4e98cf;
  --color-steel-200: #4687b8;
  --color-steel-300: #3d76a1;
  --color-steel-400: #34658a;
  --color-steel-500: #2c5573;
  --color-steel-600: #23445c;
  --color-steel-700: #1a3345;
  --color-steel-800: #11222e;
  --color-steel-900: #091117;

  --color-steel-light-100: #68b2e9;
  --color-steel-light-200: #79baeb;
  --color-steel-light-300: #89c3ee;
  --color-steel-light-400: #9acbf0;
  --color-steel-light-500: #abd4f3;
  --color-steel-light-600: #bcddf5;
  --color-steel-light-700: #cde5f8;
  --color-steel-light-800: #ddeefa;
  --color-steel-light-900: #eef6fd;

  /* Teal Palette */
  --color-teal: #23dff8;
  --color-teal-100: #20c9df;
  --color-teal-200: #1cb2c6;
  --color-teal-300: #199cae;
  --color-teal-400: #158695;
  --color-teal-500: #12707c;
  --color-teal-600: #0e5963;
  --color-teal-700: #0a434a;
  --color-teal-800: #072d32;
  --color-teal-900: #031619;

  --color-teal-light-100: #39e2f9;
  --color-teal-light-200: #4fe5f9;
  --color-teal-light-300: #65e9fa;
  --color-teal-light-400: #7becfb;
  --color-teal-light-500: #91effc;
  --color-teal-light-600: #a7f2fc;
  --color-teal-light-700: #bdf5fd;
  --color-teal-light-800: #d3f9fe;
  --color-teal-light-900: #e9fcfe;

  /* Cyan Palette */
  --color-cyan: #2acde1;
  --color-cyan-100: #26b9cb;
  --color-cyan-200: #22a4b4;
  --color-cyan-300: #1d909e;
  --color-cyan-400: #197b87;
  --color-cyan-500: #156771;
  --color-cyan-600: #11525a;
  --color-cyan-700: #0d3d43;
  --color-cyan-800: #08292d;
  --color-cyan-900: #041416;

  --color-cyan-light-100: #3fd2e4;
  --color-cyan-light-200: #55d7e7;
  --color-cyan-light-300: #6adcea;
  --color-cyan-light-400: #7fe1ed;
  --color-cyan-light-500: #95e6f0;
  --color-cyan-light-600: #aaebf3;
  --color-cyan-light-700: #bff0f6;
  --color-cyan-light-800: #d4f5f9;
  --color-cyan-light-900: #eafafc;

  /* Purple Palette */
  --color-purple: #8a74d4;
  --color-purple-100: #7c68bf;
  --color-purple-200: #6e5daa;
  --color-purple-300: #615194;
  --color-purple-400: #53467f;
  --color-purple-500: #453a6a;
  --color-purple-600: #372e55;
  --color-purple-700: #292340;
  --color-purple-800: #1c172a;
  --color-purple-900: #0e0c15;

  --color-purple-light-100: #9682d8;
  --color-purple-light-200: #a190dd;
  --color-purple-light-300: #ad9ee1;
  --color-purple-light-400: #b9ace5;
  --color-purple-light-500: #c5baea;
  --color-purple-light-600: #d0c7ee;
  --color-purple-light-700: #dcd5f2;
  --color-purple-light-800: #e8e3f6;
  --color-purple-light-900: #f3f1fb;

  /* Magenta Palette */
  --color-magenta: #be3fc2;
  --color-magenta-100: #ab39af;
  --color-magenta-200: #98329b;
  --color-magenta-300: #852c88;
  --color-magenta-400: #722674;
  --color-magenta-500: #5f2061;
  --color-magenta-600: #4c194e;
  --color-magenta-700: #39133a;
  --color-magenta-800: #260d27;
  --color-magenta-900: #130613;

  --color-magenta-light-100: #c552c8;
  --color-magenta-light-200: #cb65ce;
  --color-magenta-light-300: #d279d4;
  --color-magenta-light-400: #d88cda;
  --color-magenta-light-500: #df9fe1;
  --color-magenta-light-600: #e5b2e7;
  --color-magenta-light-700: #ecc5ed;
  --color-magenta-light-800: #f2d9f3;
  --color-magenta-light-900: #f9ecf9;

  /* Pink Palette */
  --color-pink: #f209b0;
  --color-pink-100: #da089e;
  --color-pink-200: #c2078d;
  --color-pink-300: #a9067b;
  --color-pink-400: #910569;
  --color-pink-500: #790558;
  --color-pink-600: #610446;
  --color-pink-700: #490335;
  --color-pink-800: #300223;
  --color-pink-900: #180112;

  --color-pink-light-100: #f322b8;
  --color-pink-light-200: #f53ac0;
  --color-pink-light-300: #f653c8;
  --color-pink-light-400: #f76bd0;
  --color-pink-light-500: #f984d8;
  --color-pink-light-600: #fa9ddf;
  --color-pink-light-700: #fbb5e7;
  --color-pink-light-800: #fcceef;
  --color-pink-light-900: #fee6f7;

  /* Gray Palette */
  --color-gray: #a5afb1;
  --color-gray-100: #959e9f;
  --color-gray-200: #848c8e;
  --color-gray-300: #737a7c;
  --color-gray-400: #63696a;
  --color-gray-500: #535859;
  --color-gray-600: #424647;
  --color-gray-700: #313435;
  --color-gray-800: #212323;
  --color-gray-900: #101112;

  --color-gray-light-100: #aeb7b9;
  --color-gray-light-200: #b7bfc1;
  --color-gray-light-300: #c0c7c8;
  --color-gray-light-400: #c9cfd0;
  --color-gray-light-500: #d2d7d8;
  --color-gray-light-600: #dbdfe0;
  --color-gray-light-700: #e4e7e8;
  --color-gray-light-800: #edeff0;
  --color-gray-light-900: #f6f7f7;

  --color-white: #ffffff;
  --color-black: #000000;

  /* ANCHOR - COLOR PALETTES - THEME TOKENS */

  --color-theme-on-dark: var(--color-white);
  --color-theme-on-light-azure: var(--color-azure-600);
  --color-theme-primary: var(--color-azure);
  --color-theme-body: var(--color-azure-800);

  --border-theme-width: 0.1rem;
  --border-theme-width-discreet: 0.05rem;
  --border-theme-width-hairline: 0.025rem;
  --border-theme-style: solid;
  --border-theme-style-discreet: dotted;
  --border-theme: var(--border-theme-width) var(--border-theme-style) var(--border-color, currentColor);
  --border-theme-hairline: var(--border-theme-width-hairline) var(--border-theme-style) var(--border-color, currentColor);
  --border-theme-discreet: var(--border-theme-width-discreet) var(--border-theme-style-discreet) var(--border-color, currentColor);

  --gradient-theme-brand: linear-gradient(
    90deg,
    var(--color-pink) 0%,
    var(--color-azure-light-200) 100%
  );
  --gradient-theme-brand-light: linear-gradient(
    90deg,
    var(--color-pink-light-800) 0%,
    var(--color-azure-light-900) 100%
  );

  /*ANCHOR - SIZES */
  --size-0-5: 0.0625rem;
  --size-1: 0.125rem;
  --size-1-5: 0.25rem;
  --size-2: 0.5rem;
  --size-2-5: 0.75rem;
  --size-2-75: 0.875rem;
  --size-2-9: 0.9375rem;
  --size-3: 1rem;
  --size-3-5: 1.25rem;
  --size-3-75: 1.375rem;
  --size-4: 1.5rem;
  --size-4-5: 1.75rem;
  --size-5: 2rem;
  --size-5-5: 2.25rem;
  --size-6: 2.5rem;
  --size-6-5: 2.75rem;
  --size-7: 3rem;
  --size-7-5: 3.25rem;
  --size-8: 3.5rem;
  --size-8-5: 3.75rem;
  --size-9: 4rem;
  --size-9-5: 4.25rem;
  --size-10: 4.5rem;
  --size-10-5: 4.75rem;
  --size-11: 5rem;

  /*ANCHOR - TYPOGRAPHY */
  --font-body: "Hanken Grotesk", sans-serif;
  --font-display: "Geist", sans-serif;

  --font-size-2xs: var(--size-2-5);
  --font-size-xs: var(--size-2-75);
  --font-size-s: var(--size-2-9);
  --font-size-m: var(--size-3);
  --font-size-m-l: var(--size-3-5);
  --font-size-l: var(--size-3-75);
  --font-size-l-xl: var(--size-4);
  --font-size-xl: var(--size-5);
  --font-size-2xl: var(--size-6);
  --font-size-3xl: var(--size-7);
  --font-size-4xl: var(--size-8);

  --font-size-h1: var(--font-size-4xl);
  --font-size-h2: var(--font-size-xl);
  --font-size-h3: var(--font-size-l);
  --font-size-body: var(--font-size-m);

  /*ANCHOR - LAYOUT */
  --container-max: 75rem;
  --container-sm-max: 44rem;
  --container-lg-max: 100rem;
  --layout-padding: 1rem;
  --container-width: min(
    100% - calc(var(--layout-padding) * 2),
    var(--container-max)
  );
  --container-sm-width: min(
    100% - calc(var(--layout-padding) * 2),
    var(--container-sm-max)
  );
  --container-lg-width: min(
    100% - calc(var(--layout-padding) * 2),
    var(--container-lg-max)
  );
  --container-lg-width-no-padding: min(100%, var(--container-lg-max));
  --section-padding: 3rem;
  --section--titlegap: 1.5rem;

  @media (width > 48rem) {
    --layout-padding: 1.5rem;
  }

  /*ANCHOR- OTHER VARIABLES */
  --input-padding: 0.6em 1.25em;
}

.container {
  width: var(--container-width);
  margin-inline: auto;
}

.container-sm {
  width: var(--container-sm-width);
  margin-inline: auto;
}

.container-lg {
  width: var(--container-lg-width);
  margin-inline: auto;
}

.container-lg-no-padding {
  width: var(--container-lg-width-no-padding);
  margin-inline: auto;
}

/* ANCHOR - UTILITIES */

[hidden] {
  display: none !important;
}

.bg-white {
  background-color: var(--color-white);
}

.bg-gray-light {
  background-color: var(--color-gray-light-900);
}

.bg-steel-light {
  background-color: var(--color-steel-light-900);
}
.bg-azure-light {
  background-color: var(--color-azure-light-900);
}

.bg-azure-600 {
  background-color: var(--color-azure-600);
  color: var(--color-theme-on-dark);
}

.bg-teal-light {
  background-color: var(--color-teal-light-900);
}

.bg-magenta-light {
  background-color: var(--color-magenta-light-900);
}

.bg-purple-light {
  background-color: var(--color-purple-light-900);
}
.bg-purple-light-600 {
  background-color: var(--color-purple-light-600);
}

.bg-gradient-brand-light {
  background-image: var(--gradient-theme-brand-light);
}

.bg-color-bleed-bottom {
  position: relative;
  --color-bleed: var(--color-azure-light-900);
  &::before {
    position: absolute;
    content: "";
    display: block;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 30%;
    background: var(--color-bleed);
    z-index: 0;
    isolation: isolate;
  }
}

.section-padding {
  padding-block: var(--section-padding);
}
.section-padding-bottom {
  padding-block-end: var(--section-padding);
}
.section-padding-top {
  padding-block-start: var(--section-padding);
}

.half-section-padding {
  padding-block: calc(var(--section-padding) / 2);
}
.half-section-padding-bottom {
  padding-block-end: calc(var(--section-padding) / 2);
}
.half-section-padding-top {
  padding-block-start: calc(var(--section-padding) / 2);
}

.sr-only {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* ANCHOR - BASE */

body {
  font-family: var(--font-body);
  color: var(--color-theme-body);

  --hero-form-overlap: -3rem;

  @media (width <= 48rem) {
    &:not(:has(#page-hero__bg)) {
      --hero-form-overlap: 0;
    }
  }

  @media (width > 48rem) {
    --hero-form-overlap: -6rem;
  }

  &::before {
    content: "";
    display: block;
    block-size: 0.3125rem;
    background: var(--gradient-theme-brand);
  }
}

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

h1,
.h1 {
  font-weight: 200;
}

h2,
.h2,
h3,
.h3 {
  font-weight: bold;
}

h1,
.h1 {
  font-size: var(--font-size-h1);
  line-height: 1.1;
}

h2,
.h2 {
  font-size: var(--font-size-h2);
  line-height: 1.3;
}

h3,
.h3 {
  font-size: var(--font-size-h3);
  line-height: 1.4;
}

address {
  font-style: normal;
}

:is(
    input:is(
        [type="text"],
        [type="email"],
        [type="tel"],
        [type="search"],
        [type="number"],
        [type="datetime-local"]
      ),
    select,
    textarea
  ) {
  color: var(--color-theme-body);
  padding: var(--input-padding);
  border: var(--border-theme-width) var(--border-theme-style) var(--color-theme-body);
  border-radius: 0;
  font-size: var(--font-size-m);
  background-color: var(--color-white);

  &:focus {
    outline: none;
    border-color: var(--color-azure-300);
  }
}

button, .btn {
  background-color: var(--color-theme-body);
  color: var(--color-theme-on-dark);
  border: 0.1rem solid var(--color-theme-body);
  background-image: none;
  border-radius: 0;
  padding: var(--input-padding);
  cursor: pointer;
}


/*ANCHOR - COMPONENTS */

#global-header {
  padding-block: 0.5rem;

  & > .container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo menu-toggle"
      "menu menu";

    @media screen and (width > 48rem) {
      grid-template-areas: "logo menu";
    }
  }

  #global-header__logo {
    display: block;
    grid-area: logo;
    width: 5rem;
  }

  #global-header__menu-toggle {
    grid-area: menu-toggle;
    color: currentColor;
    appearance: none;
    border: 0;
    background: transparent;

    @media (width > 48rem) {
      display: none;
    }

    svg {
      inline-size: 3rem;
    }
  }

  #global-header__nav {
    display: none;
    grid-area: menu;
    padding-block: 2rem;
    transition: all 0.2s ease-out;

    #global-header.open & {
      @media (width <= 48rem) {
        display: block;
        transform: none;
        opacity: 1;
      }
      @starting-style {
        opacity: 0;
        transform: translateY(-0.5em);
      }
    }


    ul {
      font-size: var(--font-size-l);
      list-style-type: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      row-gap: 0.5em;
      align-items: end;

      @media screen and (width > 48rem) {
        flex-direction: row;
        column-gap: 1.5em;
        font-size: var(--font-size-s);
      }
    }

    li {
      width: fit-content;
      display: flex;
      flex-direction: column;
      align-items: end;
      row-gap: 0.5em;
    }

    a {
      color: currentColor;
      text-decoration: none;
      display: flex;
      inline-size: fit-content;
      padding-block: 0.5em;
      padding-inline: 1em;
      border-radius: 0.25em;
      column-gap: 0.65em;
      align-items: center;

      .icon {
        inline-size: 0.9em;
        aspect-ratio: 1;
        transform: translateY(-5%);
        @media screen and (width <= 48rem) {
          order: -1;
        }
      }

      &:hover {
        background-color: var(--color-azure-light-900);
      }

      &.active {
        background-image: var(--gradient-theme-brand-light);
      }

      @media screen and (width > 48rem) {
        opacity: 0.85;
        &:hover {
          opacity: 1;
        }
      }
    }

    .has-dropdown {
      position: relative;
      
      & > a[aria-expanded="true"] {
        background-color: var(--color-azure-light-900);
      }

      ul {
        padding: 1em;
        transition: all 0.2s ease-out;

        @media screen and (width > 48rem) {
          flex-direction: column;
          position: absolute;
          z-index: 100;
          inset-inline-end: 0;
          inset-block-start: calc(100% + 1em);
          min-inline-size: 20em;
          background-color: var(--color-white);
          border-radius: 0.25em;
          filter: drop-shadow(-0.2rem 1.5rem 2rem color-mix(in srgb, var(--color-azure-400), transparent 70%));
        }

        @starting-style {
          opacity: 0;
          transform: translateY(-0.5em);
        }

        li, a {
          inline-size: 100%;
          
          @media screen and (width <= 48rem) {
            justify-content: end;
            text-align: end;
            padding-inline-end: 0;
          }

        }
      }

      &:not(.dropdown-open) {
        ul {
          display: none;
        }
      }


    }

    @media (width > 48rem) {
      display: flex;
      align-items: center;
      padding-block: 0;
    }
  }

  .nav-btn {
    border: 0.1rem solid currentColor;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.025em;
  }
}

#page-hero {
  --hero-padding-block: 4rem;
  --hero-padding-block-end: var(--hero-padding-block);
  --hero-padding-inline: var(--layout-padding);
  width: 100%;
  display: grid;
  isolation: isolate;
  color: var(--color-theme-on-light-azure);

  @media (width > 48rem) {
    &:has(+ .book-form-container) {
      --hero-padding-block-end: calc(
        var(--hero-padding-block) - var(--hero-form-overlap)
      );
    }
    --hero-padding-inline: 0;
    &:has(#page-hero__bg).layout-overlay {
      --hero-padding-inline: 2.5rem;
      color: var(--color-theme-on-dark);
    }
  }

  @media (width > 82rem) {
    width: var(--container-lg-width-no-padding);
    margin-inline: auto;
  }

  @media (width > 102rem) {

    &.layout-overlay {
      border-radius: 1.5rem;
      overflow: hidden;
    }

    div:has(> &) {
      padding-block-start: 1rem;
    }
    
  }

  & > *,
  &::before {
    grid-area: 1 / -1;
  }

  #page-hero__bg {
    z-index: -1;
    object-fit: cover;
    aspect-ratio: 3.5;
    inline-size: 100%;
    min-block-size: 100%;
    #page-hero:not(:has(+ .book-form-container)) & {
      aspect-ratio: 4.5;
    }

    .small-hero-width & {
      width: var(--container-sm-max);
      margin-inline: auto;
      @media (width > 40rem) {
        border-radius: 1.5rem;
      }
    }
    
    @media (width <= 48rem) {
      grid-row: 2;
      aspect-ratio: 1.5;

      #page-hero:not(:has(+ .book-form-container)):not(.layout-stacked) & {
        display: none;
      }
    }
    #page-hero.layout-stacked & {
      aspect-ratio: 2.5;
      grid-row: 2 / span 1;
    }
    @media (width > 102rem) {
      .layout-stacked & {
        border-radius: 1.5rem;
        overflow: hidden;
      }
    }
  }

  &:has(#page-hero__bg).layout-overlay {
    &::before {
      content: "";
      background-image: var(--gradient-theme-brand);
      opacity: var(--bg-opacity, 0.8);
      @media (width <= 48rem) {
        grid-row: 2;
      }
    }
  }

  & > * {
    z-index: 1;
  }

  #page-hero__content {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    padding-block: var(--hero-padding-block);
    padding-block-end: var(--hero-padding-block-end);

    &:has(.breadcrumb) {
      padding-block-start: calc(var(--hero-padding-block) / 2);
    }

    @media screen and (width > 48rem) {
      padding-inline: var(--hero-padding-inline);
    }
  }
}

#page-title,
.display-title {
  text-wrap: balance;
  body:not(.full-width-title) & {
    max-width: min(100%, 12ch);
  }

  .eyebrow {
    font-size: var(--font-size-l);
    display: block;
    margin-block-end: var(--size-2-5);
    text-transform: uppercase;
  }
}

.book-form-container {
  container-type: inline-size;
}


.book-form {
  --padding-inline: 1rem;
  --padding-block: 1.25rem;
  --group-min-height: 5.5em;
  --input-padding: 0.6em 0em;
  --input-group-border: var(--border-theme-width-hairline) var(--border-theme-style) var(--color-theme-body);
  color: var(--color-theme-body);
  border: var(--border-theme-width) var(--border-theme-style) var(--color-theme-body);
  background-color: var(--color-white);
  border-radius: 0.2rem;
  box-shadow: 0.2rem 1.5rem 2rem color-mix(in srgb, var(--color-azure-400), transparent 70%);

  .book-form__input-group {
    padding-inline: var(--padding-inline);
    padding-block: var(--padding-block);
    padding-block-end: calc(var(--padding-block) * 0.75);
    border-block-end: var(--input-group-border);
    min-height: var(--group-min-height);
  }

  & + .guarantee {
    font-size: var(--font-size-xs);
    text-align: center;
    padding-block: 1rem;
    margin-inline: auto;
    width: fit-content;
    @media (width > 48rem) {
      margin-inline-end: 0;
    }

    .icon {
      display: inline-block;
      transform: translateY(0.35em);
      width: 1em;
      aspect-ratio: 13/17;
      margin-inline-end: 0.25em;
      fill: white;
    }
  }

  label {
    &:not(.custom-radio) {
      margin-inline-start: 0.25em;
      font-size: var(--font-size-xs);
      letter-spacing: 0.025em;
      display: block;
      text-transform: uppercase;
      color: var(--color-gray-500);
    }
  }

  .book-form__input-group:focus-within {
      box-shadow: inset 0 0 0 0.05rem color-mix(in srgb, var(--color-theme-body), transparent 0%);
  }

  .book-form__input-group:not(.trip-type) {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: start;
  }

  .trip-type {
    padding-block: var(--padding-block);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    --border-color: transparent;
  }

  :is(select, textarea, input:is([type="text"], [type="email"], [type="tel"], [type="date-local"], [type="datetime-local"], [type="number"], .flatpickr-input)) {
    border: 0;
    padding-inline: 0;
    background-color: transparent;
    inline-size: 100%;
    font-size: var(--font-size-m-l);
  }



  button[type="submit"] {
    background-image: none;
    background-color: var(--color-theme-body);
    color: var(--color-white);
    padding-inline: var(--padding-inline);
    padding-block: var(--padding-block);
    inline-size: 100%;
    border: none;
    min-height: var(--group-min-height);
    text-transform: uppercase;
    letter-spacing: 0.025em;

    &:hover {
      background-color: color-mix(in srgb, var(--color-theme-body), var(--color-azure-900) 50%);
    }
  }

  #page-hero + .container > & {
    position: relative;
    z-index: 99;
    margin-block-start: var(--hero-form-overlap);
   
  }

  @container (width > 46rem) {
    --padding-inline: 1.25rem;
    --padding-block: 0.85rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    grid-template-areas:
      "pickup pickup pickup pickup pickup pickup dropoff dropoff dropoff dropoff dropoff dropoff"
      "type type type type departure departure departure departure departure departure departure departure "
      "passengers passengers passengers passengers submit submit submit submit submit submit submit submit";

      
    &.round-trip {
      grid-template-areas:
      "pickup pickup pickup pickup pickup pickup dropoff dropoff dropoff dropoff dropoff dropoff"
      "type type type type departure departure departure departure return return return return "
      "passengers passengers passengers passengers submit submit submit submit submit submit submit submit";
    }
    
    &.book-form--tour {
      grid-template-areas:
        "name name name name name name name name name name name name"
        "email email email email email email phone phone phone phone phone phone"
        "date date date date adults adults adults adults children children children children"
        "notes notes notes notes notes notes notes notes notes notes notes notes"
        "submit submit submit submit submit submit submit submit submit submit submit submit";

        .name {
          grid-area: name;
        }
    
        .email {
          grid-area: email;
          border-inline-end: var(--input-group-border);
        }
    
        .phone {
          grid-area: phone;
        }
        
        .date {
          grid-area: date;
          border-inline-end: var(--input-group-border);
        }
    
        .notes {
          grid-area: notes;
        }
    
        .adults {
          grid-area: adults;
          border-inline-end: var(--input-group-border);
        }
    
        .children {
          grid-area: children;
        }
    }


    .trip-type {
      grid-area: type;
      border-inline-end: var(--input-group-border);

    }

    .pickup {
      grid-area: pickup;
      border-inline-end: var(--input-group-border);
    }

    .dropoff {
      grid-area: dropoff;
    }

    .departure {
      grid-area: departure;
    }

    .return {
      grid-area: return;
      border-inline-start: var(--input-group-border);
    }

    .passengers {
      grid-area: passengers;
      border: 0;
    }

    button[type="submit"] {
      grid-area: submit;
    }
  }
}

.guarantee {
  .icon {
    display: inline-block;
    transform: translateY(0.35em);
    width: 1em;
    aspect-ratio: 13/17;
    margin-inline-end: 0.25em;
    fill: white;
  }
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.75rem;
}

.custom-radio {
  --icon-size: 1.25em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  border: var(--border-theme-width) var(--border-theme-style) var(--border-color, transparent);

  .icon {
    width: var(--icon-size);
    position: absolute;
    display: none;
    .custom-radio:has(input:checked) & {
      display: block;
    }
  }

  input[type="radio"] {
    width: var(--icon-size);
    border-radius: 50%;
    border: 0.05em solid var(--color-white);
    background-color: transparent;
    aspect-ratio: 1;
    position: relative;
    &:not(:checked) {
      background-color: var(--color-azure-light-900);
      opacity: 0.4;
    }
  }
}

.pill {
  padding: 0.5em 1em;
  border-radius: 10em;
  background-color: color-mix(in srgb, var(--color-azure-light-800), transparent 50%);
  font-size: var(--font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.025em;

  &:has(input:checked) {
    background-color: var(--color-mint-light-100);
  }
}

.pill-btn {
  display: inline-flex;
  gap: 1em;
  inline-size: fit-content;
  align-items: center;
  padding: 0.25em 1em;
  border-radius: 10em;
  font-size: var(--font-size-s);
  color: currentColor;
  text-decoration: none;
  border: var(--border-theme-width) var(--border-theme-style) color-mix(in srgb, currentColor, transparent 10%);

  &:where(.pill-btn--discreet) {
    border-width: var(--border-theme-width-discreet);
    border-style: var(--border-theme-style-discreet);
  }

  &:where(.pill-btn--cta) {
    background-color: var(--color-theme-body);
    color: var(--color-theme-on-dark);
    border-color: var(--color-theme-body);
    &:hover {
      color: var(--color-theme-body);
    }
  }

  &:where(.pill-btn--lg) {
    font-size: var(--font-size-m-l);
  }

  .icon {
    width: 1em;
    aspect-ratio: 1;
  }

  &:hover {
    background-color: color-mix(in srgb, var(--color-azure-light-100), transparent 50%);
  }
}

.collection {
  display: flex;
  flex-direction: column;
  row-gap: var(--section--titlegap);

  &:is(.splide) {
    display: grid;
    grid-template-columns: [full-start] 1fr [main-start] var(--container-width) [main-end] 1fr [full-end];
  }

  & > * {
    grid-column: main;
  }

  .collection__items {
    list-style-type: none;
    padding: 0;

    > li {
      margin-inline-start: 0;
    }

    &:not(.splide__list, .is-horizontal) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
      column-gap: 1rem;
      row-gap: 2rem;
      @media screen and (width > 48rem) {
        h3 {
          font-size: var(--font-size-ms);
        }
      }
    }
    &:not(.splide__list):is(.is-horizontal) {
      display: flex;
      flex-direction: column;
      row-gap: 2rem;
    }
  }

  .section__titlegroup {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;

    @media (width > 48rem) {
      flex-direction: row;
      align-items: center;
    }
  }

  .splide__track {
    grid-column-start: 2;
    grid-column-end: -1;
  }

  .splide__arrows {
    grid-column-start: 2;
    grid-column-end: -1;
    text-align: end;
    padding-inline-end: var(--layout-padding);
  }

  .splide__arrow {
    color: currentColor;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;


  .card__links {
    margin-block-start: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.5rem;

  }

  img {
    inline-size: 100%;
    object-fit: cover;
    order: -1;
  }

  a:not(.pill-btn) {
    text-decoration: none;
    color: var(--color-gray-900);
  }

  .card__title {
    font-size: var(--font-size-l);
    font-weight: 400;
  }

  .card__text {
    font-size: var(--font-size-xs);
  }

  .card-text__label {
    display: block;
    text-transform: uppercase;
  }

  .card__meta {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    list-style-type: none;
    font-size: var(--font-size-m);
  }

  .card-meta_label {
    font-size: var(--font-size-2xs);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  &:not(.splide__slide) {
    background-color: color-mix(in srgb, var(--color-white), transparent 50%);
    padding-block-end: 1rem;
    transition: all 0.2s ease-out;
            &:hover {
          box-shadow: 0.2rem 1.5rem 2rem color-mix(in srgb, var(--color-azure-400), transparent 70%);
        }

    :is(.card__title, .card__text, .card__links, .card__meta) {
      padding-inline: 1rem;
    }

    img {
      border-block-end: var(--border-theme-width-discreet) var(--border-theme-style-discreet) currentColor;
      background-color: var(--color-white);
      padding: 1rem;
    }

    @media (width > 40rem) {
      &.is-horizontal {
        --img-col-width: max(20rem, 40%);
        --img-padding: 1.25rem;
        --card-padding: 2rem;
        --col-gap: 2.5rem;
        display: grid;
        position: relative;
        grid-template-columns: var(--img-col-width) 1fr;
        column-gap: var(--col-gap);
        padding: var(--card-padding);
        padding-inline-start: 0;
        align-items: start;
        grid-template-rows: auto auto 1fr;
        isolation: isolate;
        overflow: hidden;


  
        & > * {
          grid-column: 2;
          padding-inline: 0;
        }
  
        .card__links {
          margin-block-start: 0;
        }
  
        img {
          grid-column: 1;
          grid-row: 1 / 4;
          border: 0;
          padding: var(--img-padding);
          margin-block: calc(var(--card-padding) * -1);
          background-color: white;
        }

        .card__title::before {
          content: '';
          position: absolute;
          inset-block-start: 0;
          transform: translateX(calc(-100% - var(--col-gap)));
          background-color: var(--color-white);
          inline-size: 100%;
          block-size: 100%;
          z-index: -1;
        }

      }
    }
  }
}

svg:is(.arrow-prev, .arrow-next) {
  aspect-ratio: 53/19;
}

.splide__arrow {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease-out;

  &[disabled] {
    opacity: 0.25;
  }

  svg {
    width: 3rem;
  }
}

#why-us {
  --row-gap: 2rem;
  --border: var(--border-theme-width) var(--border-theme-style) var(--color-azure-700);
  position: relative;
  padding-block-start: 3rem;
  padding-block-end: 2rem;
  padding-inline: var(--layout-padding);

  inline-size: 100%;
  border-block-start: var(--border-theme-style-discreet) var(--border-theme-width-discreet) var(--color-theme-body);
  display: flex;
  flex-direction: column;
  row-gap: var(--row-gap);

  > p {
    font-size: var(--font-size-l);
    font-family: var(--font-display);
  }

  @media (width > 48rem) {
    width: var(--container-width);
    padding-inline: 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  figure[role="presentation"] {
    display: none;
    inline-size: 100%;
    position: relative;

    @media (width > 48rem) {
      display: block;
    }

    img {
      inline-size: 100%;
      aspect-ratio: 4;
      object-fit: cover;
    }

    &::after {
      position: absolute;
      content: "";
      display: block;
      inset: 0;
      background-color: var(--color-purple-700);
      opacity: 0.3;
    }
  }

  &::before {
    position: absolute;
    inset: 0 auto auto 0;
    content: "";
    display: block;
    width: 5rem;
    height: 0.5rem;
    background-image: var(--gradient-theme-brand);
  }

  .testimonials {
    @media (width > 48rem) {
      padding-inline: var(--layout-padding);
    }
  }

}

.marquee {
  container-type: inline-size;
  width: 100%;
  @media (width > 48rem) {
    width: var(--container-width);
    mask-image: linear-gradient(to right,transparent 0%,black 35%,black 65%,transparent 100%);
  }
  grid-column: 1/-1;
  img {
    aspect-ratio: 1.5;
    object-fit: cover;
    width: 50cqi;
    @media (width > 48rem) {
      width: 33cqi;
    }
  }
}

#selling-points {
  --border-color: var(--color-azure-700);
  --border: var(--border-theme-width) var(--border-theme-style) var(--border-color);
  border: var(--border);
  background-color: var(--color-white);
  border-radius: 0.25rem;
  grid-column: 1/-1;


  .selling-point {
    display: flex;
    flex-direction: column;

    @media (width > 48rem) {
      display: grid;
      align-items: stretch;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    }
  }

  img {
    padding: 1rem;
    aspect-ratio: 2;
    order: -1;
    object-fit: cover;
  }

  .selling-point__text {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    padding: 2.5rem;
    font-size: var(--font-size-m-l);
  }

  .splide__arrows {
    border-top: var(--border-theme-hairline);
    display: flex;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 50%;
      inline-size: 0;
      border-inline-end: var(--border-theme-hairline);
    }
  }

  .splide__arrow {
    color: currentColor;
    padding: 1.5rem;
    flex: 1;
    display: flex;
    justify-content: center;
  }
}

.testimonials {
  ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    @media (width > 48rem) {
      flex-direction: row;
      gap: 2rem;
    }
  }

  quote {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;

    svg {
      order: -1;
      color: var(--color-azure-600);
      opacity: 0.7;
    }

    cite {
      font-size: var(--font-size-xs);
    }
  }
}

#book-now {
  & > h2 {
    text-align: center;
    margin-block-end: 1.5rem;
    padding-inline: var(--layout-padding);
  }
}

.accordion {
  background: var(--color-gray-light-900);
  padding-inline: 1rem;

  details {
    padding-block: 0.75em;
    &[open] {
      padding-block-end: 1.5em;
    }
  }

  details:has(+ details) {
    border-bottom: 1px solid var(--color-gray-600);
    margin: 0;
  }

  summary {
    display: flex;
    list-style: none;
    justify-content: space-between;
    align-items: start;
    padding-block: 0.5em;
    font-weight: 500;
    font-size: var(--font-size-m-l);
  }

  summary::after {
    content: "";
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.75 17V9.25H0V7.75H7.75V0H9.25V7.75H17V9.25H9.25V17H7.75Z" fill="%231C1B1F"/></svg>');
    background-size: 1em;
    background-position: center;
    flex-shrink: 0;
    width: 1.25em;
    aspect-ratio: 1;
    transition: transform 150ms ease-in-out;
  }

  [open] summary::after {
    transform: rotate(45deg);
  }
}

.section__titlegroup {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;

  @media (width > 48rem) {
    flex-direction: row;
    align-items: center;
  }
}

.section__links {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;

  > li {
    margin-inline-start: 0;
  }
}

.section-stack {
  display: flex;
  flex-direction: column;
  row-gap: var(--section--titlegap);
}

#global-footer {
  background-color: var(--color-gray-light-900);

  & > .container {
    padding-block: var(--section-padding);
    display: flex;
    flex-direction: column;
    row-gap: 3rem;

    @media screen and (width > 48rem) {
      display: grid;
      column-gap: 4rem;
      row-gap: 6rem;
      grid-template-columns: 1fr 7rem;
    }
  }

  #global-footer__navs {
    display: flex;
    flex-direction: column;
    row-gap: 2em;

    @media screen and (width > 48rem) {
      flex-direction: row;
      column-gap: 3rem;
    }
  }

  #global-footer__signature {
    display: flex;
    flex-direction: column;
    row-gap: 2.5rem;

    a {
      color: currentColor;
    }
  }

  nav {
    display: flex;
    flex-direction: column;
    row-gap: 1em;

    ul {
      list-style-type: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 1em;

      > li {
        margin-inline-start: 0;
      }
    }
    a {
      text-decoration: none;
      color: var(--color-theme-body);
      &:hover {
        text-decoration: underline;
      }
    }
  }

  &::after {
    content: "";
    display: block;
    block-size: 0.3125rem;
    background: var(--gradient-theme-brand);
  }

  #global-footer__info {
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    font-size: var(--font-size-xs);
  }

  #global-footer__espa-logo {
    inline-size: 8.5rem;
    height: auto;
  }

  address {
    opacity: 0.7;
  }
}


.search-section-content {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  container-type: inline-size;
}

.search-form {
  display: flex;
  inline-size: 100%;
  row-gap: 0.5rem;
  flex-wrap: wrap;

  input {
    flex: 1;
  }

  button[type="submit"] {
    flex: 1;
  }
}


.search-results {
  list-style-type: none;
  padding-inline: 0;

  max-height: 28rem;
  overflow-x: clip;
  overflow-y: scroll;
  scrollbar-color: var(--color-azure-900) color-mix(in srgb, var(--color-white), transparent 50%);

  @media (pointer: fine)  {
    padding-inline-end: 1rem;
  }
  


  font-size: var(--font-size-l);

  & > li {
    padding-block: 1.25rem;
    border-block-end: var(--border-theme-width-discreet) var(--border-theme-style-discreet) currentColor;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;

    @container (width > 48rem) {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .result-utilities {
      padding-block: 0.5rem;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-inline-end: 0.5rem;
    }
  }

  .result-title-link {
    color: var(--color-theme-body);
    padding-block: 0.25em;
    text-decoration: none;
    display: block;
    border-radius: 0.25em;

    &:hover {
      background-color: var(--color-azure-light-900);
    }
  }
}

/*ANCHOR - Overrides */

.choices__inner {
  background-color: transparent;
  border-color: transparent;
  font-size: 1em;
  padding-inline: 0;
  font-size: var(--font-size-m-l);
}

.choices__heading {
    color: var(--color-theme-body);
    font-size: var(--font-size-s);
}

.choices__item {
  color: currentColor;
}

.choices__item[aria-selected="true"]:not(.choices__placeholder) {
  font-weight: 700;
}

.choices__placeholder {
  color: currentColor;
  opacity: 1;
}


.flatpickr-calendar {
  input[type="number"] {
    border: 0;
  }
}

.flatpickr-input {
  border: 0 !important;
}

.custom-table {
  width: 100%;

  border-collapse: collapse;



  td, th {
    padding-block: 1rem;
    padding-inline: 0.75rem;
  }

  th {
    text-transform: uppercase;
    font-weight: 400;
    text-align: start;
    vertical-align: top;
    position: sticky;
    top: 0;
    background-color: var(--color-azure-light-900);
    width: 20rem;

 


    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      height: 0rem;
      width: 100%;
      left:0;
      border-block-end: var(--border-theme-width-discreet) var(--border-theme-style-discreet) currentColor;
    }

  }

  td {
    tr:hover & {
      background-color: var(--color-azure-light-800);
    }
  }
  
  
}

 .custom-table__wrap {
  max-height: var(--max-height, 28rem);
  overflow: auto;
  position: relative;
  scrollbar-color: var(--color-azure-900) color-mix(in srgb, var(--color-white), transparent 50%);

} 

.rates {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  .point-title {
    color: currentColor;
    text-decoration: none;
  }
}

.rates-table {

  .cell-label {
    display: none;
  }
  
  @media (width < 64rem) {
    display: flex;
    flex-direction: column;

    .cell-label {
      display: block;
    }

    .custom-table__wrap:has(&) {
      max-height: 32rem;
    }

    thead {
      display: none;
    }

    tr {
      display: flex;
      flex-wrap: wrap;
    }

    td {
      inline-size: 50%;
    }

    td:is(:first-child, :last-child) {
      inline-size: 100%;
    }


    td:first-child {
      border-block-start: 0.1rem dotted currentColor;
      margin-block-start: 1.5rem;
      padding-block-start: 1.5rem;
    }

    .cell-label {
      text-transform: uppercase;
    }

    .cell-label__extra {
      text-transform: none;
    }

    .rates__price {
      font-weight: 700;
      font-size: var(--font-size-m-l);
    }
  }

}

.table-header__extra {
  font-size: var(--font-size-xs);
}

.prose-content {
  
  text-wrap: pretty;

  >*+* {
    margin-block-start: 1rem;
  }

  a {
    color: currentColor;
    text-decoration-color: var(--color-azure);
  }

  *+:is(h2, h3) {
    margin-block-start: 1em;
  }
}

.columns {
  display: flex;
  flex-wrap: wrap;
  column-gap: min(8%, 6.5rem);
  row-gap: 3rem;
}

.column-main {
  flex: 100;
  min-width: min(45ch, 100%);
}

.column-side {
  flex: max(30ch, 25%);
}

#excursion-container {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
} 

#excursion-intro {
  font-size: var(--font-size-l-xl);
  font-family: var(--font-display);
}

#excursion-details {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;

  dl {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
  }

  dd + dt {
    margin-block-start: 2rem;
  }

  ul {
    list-style-type: none;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
  }
}

.breadcrumb {

  background-color: var(--color-azure-light-900);

  ol {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.25rem;
    list-style-type: none;
    padding-inline-start: 0;
  }
  
  li:not(:first-child)::before {
    content: "/";
    display: inline-block;
    margin-inline: 0.5rem;
    opacity: 0.5;
  }
  
  li > * {
    font-size: var(--font-size-xs);
    border-color: var(--color-azure-light-800);
    &:hover {
      background-color: var(--color-white);
    }
    li:last-child > & {
      background-color: transparent;
      border-color: transparent;
      opacity: 0.5;
    }
  }


}

/* Marquee styles */
	.marquee {
		--gap: 0.5rem;
		position: relative;
		display: flex;
		overflow: hidden;
		user-select: none;
		gap: var(--gap);

	

		@media (width > 48rem) {
			--gap: 1rem;
	
		}

		.marquee__content {
			flex-shrink: 0;
			display: flex;
			justify-content: space-around;
			gap: var(--gap);
			min-width: 100%;
			animation: scroll 30s linear infinite;
		}
	}

	@keyframes scroll {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(calc(-100% - var(--gap)));
		}
	}

#page-content {
  &>*+* {
    margin-block-start: 2rem;
  }
  padding-block: var(--section-padding);
  .intro {
    font-size: var(--font-size-l-xl);
    font-family: var(--font-display);
  }
}

.block.gallery {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem; 

  .gallery__content {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
      column-gap: 1rem;
      row-gap: 2rem;
  }

  img {
    inline-size: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
    border-radius: 0.25rem;
  }
}

.block.image {
  display: flex;
  flex-direction: column;
  align-items: start;
  row-gap: 1rem;

  img {
    border-radius: 0.25rem;
  }
  
  &.float {
    border-top: var(--border-theme-hairline);

    img {
      width: 100%;
    }
    
    padding: 0.5rem;
    margin-inline-end: 2rem;
    width: 10rem;
    
    @media (width > 35rem) {
      float: left;
    }

    @media (width > 49rem) {
      margin-inline-start: -2rem;
    }
  }

  &.full {
    inline-size: 100%;
    img {
      inline-size: 100%;
    }
  }
}

.media-caption {
  font-style: italic;
  font-size: var(--font-size-s);
  line-height: 1.3;
}

#page-layout {
  padding-block: var(--section-padding);
}

.about-destination {
  display: grid;
  row-gap: 2rem;

  .about-destination__image { 
    aspect-ratio: 5/3;
    object-fit: cover;
  }

  @media (min-width: 48rem) {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
    column-gap: 3rem;

    .about-destination__title {
      grid-column: 1;
    }
    .about-destination__image {
      grid-column: 1;
    }
  
    .about-destination__content {
      grid-row: 1 / 3;
      grid-column: 2;
    }

  }
}