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

:root {

  --bg: #060d0d;

  --surface: #ffffff;

  --text: #ffffff;
  --text-dark: #111111;

  --muted: rgba(255,255,255,0.7);

  --jade: #519EA2;
  --jade-bright: #98dce0;
  --jade-light: #6dbdc1;
  --jade-dark: #3d858a;

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

  --radius: 5px;

  --container-width: 1400px;

  --transition-fast: 180ms ease;
  --transition-medium: 300ms ease;
  --transition-slow: 500ms ease;

  --shadow-card:
    0 12px 32px rgba(0,0,0,0.25);

}

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

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

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

button,
input {
  font: inherit;
}

body {

  background: var(--bg);

  color: var(--text);

  font-family:
    "Gill Sans Nova",
    "Gill Sans MT",
    "Gill Sans",
    "Century Gothic",
    sans-serif;

  -webkit-font-smoothing: antialiased;

  background-color: #060d0d;

  background-image:

    radial-gradient(
      ellipse 130% 65% at 50% -5%,
      rgba(81,158,162,0.55) 0%,
      rgba(81,158,162,0.18) 40%,
      transparent 70%
    ),

    radial-gradient(
      ellipse 75% 60% at -5% 110%,
      rgba(61,133,138,0.38) 0%,
      transparent 60%
    );

  background-attachment: fixed;

}

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

.container {

  width: min(
    var(--container-width),
    calc(100% - 48px)
  );

  margin-inline: auto;

}

.main-content {

  position: relative;


}

.main-content::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(81,158,162,0.18) 1.5px,
      transparent 1.5px
    );

  background-size: 28px 28px;

  opacity: 0.7;

  pointer-events: none;

}


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

.site-header {

  position: sticky;

  top: 30px;

  z-index: 1000;

}

.header-shell {

  width: min(
    var(--container-width),
    calc(100% - 48px)
  );

  margin-inline: auto;

  border-radius: 12px;

  border-bottom: 1px solid #0000004a;

  box-shadow: 0px 5px 17px #0000006b;

  backdrop-filter: blur(10px) saturate(2.5)brightness(0.8);

  background: rgb(0 0 0 / 36%);

  overflow: hidden;


&:before {
        content: '';
        position: absolute;
        top: 0;
        height: 1px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient(to right, #52b3ba00, #52b3ba, #52b3ba00);
  }
}

.header-inner {

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

  min-height: 72px;

  gap: 2rem;

  padding-left: 30px;
  padding-right: 13px;

}

.hero-slideshow {

  position: absolute;

  inset: 0;

  overflow: hidden;

  z-index: 0;

  pointer-events: none;

}

.hero-slide {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  opacity: 0;

  transform: scale(1);

  transition:
    opacity 2s ease-in-out,
    transform 8s ease-in-out;

  filter:
    grayscale(1)
    brightness(0.35)
    contrast(1.1)
    saturate(0);

}

.hero-slide.active {

  opacity: 0.18;

  transform: scale(1.06);

}

.hero-slideshow::after {

  content: '';

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0.75),
      rgba(0,40,45,0.45)
    );

}


.brand {

  color: var(--jade-bright);

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-weight: 600;

  white-space: nowrap;

  opacity: 0;

transform: translateY(-6px);

transition:
  opacity 300ms ease,
  transform 300ms ease;

}

.nav-brand.visible {

  opacity: 1;

  transform: translateY(0);

}

.main-nav {

  display: flex;
  align-items: center;
  gap: 1.5rem;

}

.main-nav button {

  background: none;
  border: none;

  color: white; 

  cursor: pointer;

  text-transform: uppercase;
  letter-spacing: 0.08em;

  transition:
    color var(--transition-fast);

}

.main-nav button:hover {
  color: teal;
}

.search-wrapper input {

  width: 220px;

  background:
    rgba(255,255,255,0.08);

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

  border-radius: 5px;

  padding:
    0.8rem 1rem;

  color: white;

}

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

.hero {

    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    top: -70px;
    padding-top: 110px;

}

.hero-overlay {

  position: absolute;
  inset: 0;

  background: linear-gradient(180deg, rgb(6 13 13 / 34%) 0%, rgb(6 13 13 / 28%) 45%, rgb(6 13 13 / 0%) 100%);
  z-index: 2;

  pointer-events: none;

}

.hero-content {

  position: relative;
  z-index: 5;


}

.hero-eyebrow {

    color: #060d0d;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 1rem;
    background: var(--jade-bright);
    padding: 5px 10px;
    border-radius: 3px;
    margin-block-start: 0px;
    margin-inline-start: 0px;
    font-weight: 600;
    width: auto;
    display: inline-block;

}

.hero-title {

  font-size: clamp(3rem, 6vw, 3rem);

  font-weight: 200;

  line-height: 1;

  margin-bottom: 1rem;

}

.hero-description {

  max-width: 620px;

  font-size: 1.05rem;

  line-height: 1.8;

  color: rgba(255,255,255,0.75);

}

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

.hero-layout {

  display: grid;

  grid-template-columns:
    minmax(420px, 620px) 1fr;

  align-items: center;

}

.hero-copy {

  position: relative;

  z-index: 5;

}


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

.hero-animation {

  position: absolute;

  inset: 0;

  z-index: 1;

  overflow: hidden;

  perspective: 1400px;

  filter: brightness(1.2);

  pointer-events: auto;

}

#heroSvg {

    position: absolute;
    width: 1280px;
    height: 970px;
    right: 18%;
    top: 46%;
    transform: translate(0, -50%);
    overflow: visible;
    transform-style: preserve-3d;
    transform-origin: center center;
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(81, 158, 162, 0.22));
    will-change: transform;

}

/* ========================================
   DOTS
======================================== */

.hero-dot {

  fill: transparent;

  stroke: #519ea2;

  opacity: 0.45;

  stroke-width: 4.5;

  vector-effect:
    non-scaling-stroke;

  transition:
    fill 240ms ease,
    filter 240ms ease,
    stroke-width 240ms ease,
    opacity 240ms ease;

}

.hero-dot.active {

  fill: #305f61;

  opacity: 0.9;

  filter:
    drop-shadow(
      0 0 6px
      rgba(81,158,162,0.6)
    )
    drop-shadow(
      0 0 18px
      rgba(81,158,162,0.35)
    );

}

/* ========================================
   DATA CONNECTIONS
======================================== */

.hero-connection {

  stroke: #519ea2;

  stroke-width: 2.5;

  stroke-linecap: round;

  stroke-dasharray: 3 6;

  opacity: 0.55;

  filter:
    drop-shadow(
      0 0 3px
      rgba(81,158,162,0.4)
    );

}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1024px) {

  #heroSvg {

            width: 1370px;
        height: 950px;
        right: 0%;
        top: 45%;
        opacity: 0.35;


  }

}


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

.hero-brand {

  color: var(--jade-bright);

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-weight: 600;

  font-size:
    clamp(3rem, 5vw, 4rem);

  line-height: 1;

  margin-bottom: 1rem;

}

/* ========================================
   HOTEL FILTER
======================================== */

.hotel-filter {

  margin-top: 1.5rem;

  max-width: 420px;

}

.hotel-filter__label {

  display: block;

  color:
    rgba(255,255,255,0.85);

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.8rem;

  font-weight: 600;

  margin-bottom: 1rem;

}

.hotel-filter__select-wrapper {

  position: relative;

}

.hotel-filter__select {

  width: 100%;

  background:
    rgba(255,255,255,0.08);

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

  border-radius: 5px;

  padding:
    1rem 1.25rem;

  color: white;

  appearance: none;

  outline: none;

  transition:
    border-color 180ms ease,
    background 180ms ease;

}

.hotel-filter__select option {

  color: var(--text-dark);

  background-color: var(--surface);

}

.hotel-filter__select optgroup {

  color: var(--text-dark);

  background-color: var(--surface);

  font-weight: 600;

}

.hotel-filter__select:focus {

  border-color:
    rgba(81,158,162,0.45);

}

.hotel-filter__helper {

  margin-top: 1rem;

  color:
    rgba(255,255,255,0.45);

  font-size: 0.85rem;

  line-height: 1.6;

}



/* ========================================
   SECTIONS
======================================== */

.dashboard-section + .dashboard-section {
  margin-top: 6rem;
}

.section-header {
  margin-bottom: 2rem;
}

.section-label {

  color: var(--jade);

  text-transform: uppercase;

  letter-spacing: 0.12em;

  font-size: 0.8rem;

  margin-bottom: 0.75rem;

}

.section-title {

  font-size: 2rem;

  margin-bottom: 0.5rem;

}

.section-description {
  color: rgba(255,255,255,0.7);
}

.section-divider {

  height: 0px;

  background:

    linear-gradient(
      90deg,
      var(--jade) 0%,
      transparent 100%
    );

  margin-top: 1.5rem;
  margin-bottom: 2rem;

}

/* ========================================
   GRID
======================================== */

.dashboard-grid {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));

  gap: 1.5rem;

}

/* ========================================
   CARD FOUNDATION
======================================== */

.dashboard-card {

  position: relative;

  overflow: hidden;

  background:

    linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 65%, rgb(221 255 254) 100%);

  border-top:
    4px solid var(--jade);

  border-radius: var(--radius);

  min-height: 420px;

  display: flex;
  flex-direction: column;

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);

}

.dashboard-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-card);

}

.dashboard-card__image {

  height: 180px;

  overflow: hidden;

}

.dashboard-card__image img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.8s ease;

}

.dashboard-card:hover
.dashboard-card__image img {

  transform: scale(1.05);

}

.dashboard-card__content {

  padding: 1.5rem;

  display: flex;
  flex-direction: column;

  flex: 1;

}

.dashboard-card__category {

  color: var(--jade);

  text-transform: uppercase;

  letter-spacing: 0.12em;

  font-size: 0.75rem;

  margin-bottom: 1rem;

}

.dashboard-card__title {

  color: var(--text-dark);

  font-size: 1.2rem;

  font-weight: 600;

  margin-bottom: 1rem;

}

.dashboard-card__description {

  color: #555;

  line-height: 1.4;

  margin-bottom: 2rem;

  flex: 1;

}

.dashboard-card__button {

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

  padding: 1rem;

  border-radius: 10px;

  background: #111;

  color: white;

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-size: 0.85rem;

  font-weight: 600;

  transition:
    background var(--transition-fast),
    transform var(--transition-fast);

}

.dashboard-card:hover
.dashboard-card__button {

  background: var(--jade);

}

.hidden {
  display: none !important;
}

.no-results {

  padding: 4rem 0;

  text-align: center;

  color:
    rgba(255,255,255,0.65);

}

.hotel-filter__select:not(:placeholder-shown) {

  border-color:
    rgba(81,158,162,0.45);

  box-shadow:
    0 0 0 1px
    rgba(81,158,162,0.18);

}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1024px) {

  .main-nav {
    display: none;
  }

}

@media (max-width: 768px) {

  .hero-title {
    font-size: 3rem;
  }

  .container {
    width: calc(100% - 32px);
  }

}

/* ========================================
   BUILD INFO FOOTER
   Small, deliberately subtle diagnostic
   footer at the bottom of every page.
   Populated by js/buildInfo.js.
======================================== */

.site-footer {

  text-align: center;

  padding:
    3rem 1rem 1.5rem;

  font-size: 0.7rem;

  color:
    rgba(255, 255, 255, 0.22);

  letter-spacing: 0.05em;

  font-family:
    "Consolas", "Monaco", "Courier New", monospace;

  position: relative;

  z-index: 2;

}

.site-footer small {

  cursor: help;

  transition:
    color var(--transition-fast);

  user-select: all;

}

.site-footer small:hover {

  color:
    rgba(255, 255, 255, 0.55);

}

.build-copy {

  background: none;

  border: none;

  color:
    rgba(255, 255, 255, 0.22);

  cursor: pointer;

  font: inherit;

  letter-spacing: 0.05em;

  padding: 0 0.25rem;

  margin-left: 0.4rem;

  text-decoration:
    underline dotted;

  text-underline-offset: 3px;

  transition:
    color var(--transition-fast);

}

.build-copy:hover {

  color:
    rgba(255, 255, 255, 0.55);

}

.build-copy.copied {

  color: var(--jade-bright);

  text-decoration: none;

}