@charset "UTF-8";
/* ==========================================================================
   Reset Styles
   - Normalización de estilos por defecto
   - Box sizing global
   - Reset de elementos básicos
========================================================================== */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a,
button {
  cursor: revert;
}

ol,
ul,
menu {
  list-style: none;
}

img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

table {
  border-collapse: collapse;
}

input,
textarea {
  -webkit-user-select: auto;
  -moz-user-select: auto;
       user-select: auto;
}

textarea {
  white-space: revert;
}

meter {
  -webkit-appearance: revert;
  -moz-appearance: revert;
       appearance: revert;
}

:where(pre) {
  all: revert;
}

::-moz-placeholder {
  color: unset;
}

::placeholder {
  color: unset;
}

::marker {
  content: initial;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  line-break: after-white-space;
  -webkit-user-select: auto;
  -moz-user-select: auto;
       user-select: auto;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

:where(dialog:modal) {
  all: revert;
  display: none;
}

/* ==========================================================================
   Tipografía
   - Declaración de fuentes personalizadas
   - PP Neue Montreal Mono
   - Canela
   - PP Neue Montreal
   - Hiker TM
   - Suez One
========================================================================== */
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("../fonts/PPNeueMontrealMono-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("../fonts/PPNeueMontrealMono-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Canela";
  src: url("../fonts/Canela-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Canela";
  src: url("../fonts/Canela-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "hiker TM";
  src: url("../fonts/hikerTM-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Suez One";
  src: url("../fonts/SuezOne-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
/* ==========================================================================
   Variables Globales
   - Colores principales
   - Tipografía
========================================================================== */
:root {
  --color-primary: #534039;
  --color-white: #fff;
  --color-light: #FCFBF4;
  --color-black: #000;
  --font-canela: "Canela", serif;
  --font-montreal: "PP Neue Montreal", sans-serif;
  --font-montreal-mono: "PP Neue Montreal Mono", monospace;
  --font-hiker: "hiker TM", cursive;
  --font-suez: "Suez One", serif;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-black);
  font-family: var(--font-montreal-mono);
  font-weight: 400;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

a {
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer;
}
a:hover, a:focus {
  color: var(--color-black);
  text-decoration: none;
  outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
  font-family: var(--font-montreal-mono);
  font-weight: normal;
}

strong,
b {
  font-weight: bold;
}

p:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Header & Navigation
   - Barra de navegación fija
   - Logo
   - Menú toggle
========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 6.1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  z-index: 10;
  box-shadow: none;
  border: none;
  gap: 10rem;
  padding-left: 3.6rem;
  padding-right: 3.6rem;
}

.navbar-title {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-black);
  text-transform: uppercase;
  position: absolute;
  right: 3.6rem;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

.navbar-logo-img {
  width: 8.5rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: middle;
}

.menu-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.menu-icon-img {
  width: 5rem;
  height: auto;
}

/* ==========================================================================
   Side Menu
   - Menú lateral
   - Overlay de fondo
   - Animaciones y transiciones
   - Links y contenido
========================================================================== */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  pointer-events: none;
}
.side-menu.is-active {
  pointer-events: auto;
}
.side-menu.is-active .side-menu-content {
  transform: translateX(0);
  opacity: 1;
}
.side-menu.is-active .side-menu-overlay {
  opacity: 1;
}
.side-menu.is-active .side-menu-links li {
  opacity: 1 !important;
  transform: translateY(0);
  visibility: visible;
}
.side-menu.is-active .side-menu-footer .side-menu-link {
  opacity: 1 !important;
  transform: translateY(0);
  visibility: visible;
}

.side-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.side-menu-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 46.2rem;
  height: 100%;
  background: var(--color-light);
  padding: 12rem 3.6rem;
  transform: translateX(-100%);
  opacity: 1;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1001;
  pointer-events: auto;
}
.side-menu-content .menu-close {
  position: absolute;
  top: 3.2rem;
  left: 3.6rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.side-menu-content .menu-close .menu-icon-img {
  filter: brightness(0);
  width: 5rem;
  height: 0.2rem;
}
.side-menu-content .menu-close:hover .menu-icon-img {
  opacity: 0.7;
}

.side-menu-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.side-menu-links li {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-40px);
  transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1), transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  margin-bottom: 2rem;
}
.side-menu-links li:nth-child(1) {
  transition-delay: 0.38s;
}
.side-menu-links li:nth-child(2) {
  transition-delay: 0.46s;
}
.side-menu-links li:nth-child(3) {
  transition-delay: 0.54s;
}
.side-menu-links li:nth-child(4) {
  transition-delay: 0.62s;
}
.side-menu-links li:nth-child(5) {
  transition-delay: 0.7s;
}

.side-menu.is-active .side-menu-links li {
  opacity: 1;
  transform: translateX(0);
  margin-bottom: 6rem;
}

.side-menu-link {
  display: block;
  font-family: var(--font-canela);
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 0;
  letter-spacing: 0.02em;
  color: var(--color-black);
  padding: 1.2rem 0;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}
.side-menu-link:hover {
  opacity: 0.85;
}

.side-menu-footer {
  position: absolute;
  left: 3.6rem;
  right: 0;
  bottom: 13.2rem;
  padding-bottom: 0;
  margin-top: 0;
}
.side-menu-footer .side-menu-link {
  font-family: var(--font-montreal-mono);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0em;
  padding: 1.8rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-40px);
  transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1), transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.side-menu-footer .side-menu-link:nth-child(1) {
  transition-delay: 0.68s;
}
.side-menu-footer .side-menu-link:nth-child(2) {
  transition-delay: 0.76s;
}

.side-menu.is-active .side-menu-footer .side-menu-link {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   Hero Section
   - Video/Imagen de fondo
   - Overlay y contenido
   - Controles y navegación
========================================================================== */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
}

.hero-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  display: none;
}

.hero-video:not([src]):not([srcset]) + .hero-fallback {
  display: block;
}

.hero-overlay {
  position: absolute;
  bottom: 3.6rem;
  left: 0;
  width: 100vw;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0;
  padding-bottom: 3.6rem;
}

.hero-caption {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0em;
  color: var(--color-light);
  position: static;
  text-align: center;
  pointer-events: auto;
  margin: 0 auto;
  max-width: 90%;
  width: 100%;
  margin-left: 15rem;
}

.hero-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
  white-space: nowrap;
  padding-right: 3.6rem;
  width: 24rem;
}

.hero-control-btn {
  white-space: nowrap;
  background: transparent;
  border: none;
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0em;
  color: var(--color-light);
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}
.hero-control-btn:hover {
  opacity: 0.8;
}

/* ==========================================================================
/* Cookie Banner Styles
========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 9.3rem;
  background-color: #E4DFD9;
  padding: 1.6rem 3.6rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.6rem;
  pointer-events: all;
  will-change: transform;
  transform: translateZ(0);
}

.cookie-text {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 350;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-black);
  flex: 1;
  width: 67rem;
  margin: 0;
}
.cookie-text span {
  font-weight: 500;
}

.cookie-buttons {
  display: flex;
  gap: 1.6rem;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: var(--font-montreal-mono);
  font-size: 1.13rem;
  font-weight: 350;
  width: 19.8rem;
  height: 4rem;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cookie-btn--decline {
  background: transparent;
  border: 1px solid var(--color-black);
  color: var(--color-black);
}
.cookie-btn--decline:hover {
  background: var(--color-black);
  color: var(--color-white);
}
.cookie-btn--accept {
  background: var(--color-black);
  border: 1px solid var(--color-black);
  color: var(--color-white);
}
.cookie-btn--accept:hover {
  background: transparent;
  color: var(--color-black);
}

/* ==========================================================================
/* Newsletter Modal Styles
========================================================================== */
.newsletter-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
}

.newsletter-modal {
  background: #967458;
  color: var(--color-light);
  width: 45rem;
  height: 28.8rem;
  max-width: 90vw;
  padding: 6rem 3rem 2.5rem 3rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.newsletter-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-family: var(--font-montreal-mono);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-light);
  cursor: pointer;
  opacity: 0.8;
  z-index: 1;
}

.newsletter-modal-title {
  margin-top: 2rem;
  font-family: var(--font-montreal);
  font-size: 2.8rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1.2rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.newsletter-modal-subtitle {
  font-size: 1.52rem;
  font-family: var(--font-montreal);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 3.6rem;
  color: var(--color-light);
}

.newsletter-modal-form {
  width: 100%;
  display: flex;
  gap: 0;
  margin-top: 1.5rem;
  border-bottom: 0.5px solid var(--color-white);
  align-items: stretch;
}

.newsletter-modal-input {
  flex: 1;
  padding: 1.1rem 0;
  background: transparent;
  border: none;
  color: var(--color-light);
  font-size: 1rem;
  font-family: var(--font-montreal-mono);
  font-weight: 400;
  outline: none;
  min-width: 0;
}

.newsletter-modal-input::-moz-placeholder {
  font-size: 1rem;
  color: var(--color-light);
  opacity: 0.7;
}

.newsletter-modal-input::placeholder {
  font-size: 1rem;
  color: var(--color-light);
  opacity: 0.7;
}

.newsletter-modal-btn {
  width: 9.5rem;
  height: 4rem;
  background: transparent;
  color: var(--color-light);
  border: none;
  font-family: var(--font-montreal-mono);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: end;
}

/* ==========================================================================
   About Section
   - Layout y grid
   - Títulos y texto
   - Responsive behavior
========================================================================== */
.about-section {
  width: 100vw;
  background: var(--color-white);
  padding: 1.8rem 3.6rem 20rem 3.6rem;
}

.about-grid {
  display: flex;
  flex-direction: row;
  gap: 3.6rem;
  max-width: calc(100% - 7.2rem);
  margin: 0;
  padding: 0;
}

.about-title {
  font-family: var(--font-canela);
  font-size: 4.65rem;
  font-weight: 300;
  margin: 0;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-black);
  width: 40%;
  flex: 0 0 40%;
}

.about-text {
  font-family: var(--font-montreal);
  font-weight: 400;
  font-size: 2.8rem;
  line-height: 3.2rem;
  color: var(--color-black);
  margin: 0;
  width: 60%;
  flex: 0 0 60%;
}

/* ==========================================================================
   Feature Section
   - Slider y animaciones
   - Grid y layout
   - Imágenes y overlay
   - Textos y botones
========================================================================== */
.feature-section {
  width: 100vw;
  background: var(--color-white);
  padding: 0 0 4rem 0;
}

.feature-slider {
  position: relative;
  width: 100%;
  height: 60rem;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  animation: slideShow 9s linear infinite;
}

.slide:nth-child(1) {
  animation-delay: 0s;
}

.slide:nth-child(2) {
  animation-delay: -6s;
}

.slide:nth-child(3) {
  animation-delay: -3s;
}

@keyframes slideShow {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  5.56% {
    opacity: 1;
    visibility: visible;
  }
  38.89% {
    opacity: 1;
    visibility: visible;
  }
  44.44% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.feature-grid {
  display: flex;
  flex-direction: row;
  gap: 0;
}

.feature-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  background: var(--color-white);
  width: 50%;
  flex: 0 0 50%;
}

.feature-img-wrap {
  position: relative;
  width: 100%;
  height: 60rem;
  overflow: hidden;
}

.feature-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.feature-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: var(--color-white);
  padding: 1.8rem;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.1);
}

.feature-img-overlay--right {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mix-blend-mode: normal;
}

.feature-img-top {
  width: 100%;
  display: flex;
  position: relative;
}

.feature-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}

.feature-date,
.feature-agenda,
.feature-events {
  font-family: var(--font-montreal);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-white);
  text-transform: uppercase;
}

.feature-img-handwritten {
  font-family: var(--font-hiker);
  font-size: 6.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 4rem;
  color: var(--color-white);
  transform: rotate(-10deg);
  width: 15rem;
  white-space: pre-line;
  word-break: break-word;
  text-align: center;
  margin: 0;
  align-items: center;
}

.feature-img-title-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  filter: blur(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.feature-agenda-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12rem;
}

.feature-img-title {
  font-family: var(--font-suez);
  font-size: 6.6rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-white);
  margin: 0 0 2rem 0;
  text-align: center;
}

.feature-img-title--right {
  font-family: var(--font-montreal);
  font-size: 3rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
  text-shadow: none;
  color: var(--color-white);
  text-align: center;
}

.feature-img-sub {
  font-family: var(--font-canela);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-white);
  text-align: center;
  margin-bottom: 0;
  display: block;
}

.feature-bottom {
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 2.4rem;
  padding: 1.6rem 3.2rem 6.2rem 3.2rem;
  background: var(--color-white);
}

.feature-bottom-text {
  font-family: var(--font-montreal);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-black);
  width: 60%;
}

.feature-btn {
  font-family: var(--font-montreal-mono);
  font-size: 1.13rem;
  font-weight: 400;
  color: var(--color-black);
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  width: 18.3rem;
  height: 4.2rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-left: auto;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* ==========================================================================
   The Hub Single View
   - Hero image and title
   - Content and text
   - Hours and explore link 
   ========================================================================== */
.the-hub-single-hero {
  margin-top: 13.2rem;
  width: 100vw;
  max-width: 100vw;
  height: 320px;
  background: var(--color-white);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.the-hub-single-hero img {
  width: 100vw;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.the-hub-single-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  font-family: var(--font-montreal);
  font-weight: 700;
  font-size: 3.4rem;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
}

.the-hub-single-content {
  font-family: var(--font-montreal);
  font-weight: 400;
  font-size: 1.6rem;
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 1rem 0 1rem;
  text-align: center;
  line-height: 1.4;
}

.the-hub-single-hours {
  margin-top: 8rem;
  text-align: center;
}

.the-hub-single-hours-title {
  font-family: var(--font-montreal-mono);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.the-hub-single-hours-text {
  font-family: var(--font-montreal-mono);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 1px;
  margin-bottom: 4rem;
}

.the-hub-single-explore {
  margin-top: 8rem;
  margin-bottom: 16rem;
  text-align: center;
}
.the-hub-single-explore .the-hub-single-explore-link {
  font-family: var(--font-montreal-mono);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 1px;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
  cursor: pointer;
  text-decoration: underline;
  text-transform: uppercase;
}
.the-hub-single-explore .the-hub-single-explore-link:hover {
  color: var(--color-primary);
}

.the-hub-view-switch {
  position: absolute;
  top: 13.2rem;
  right: 3.6rem;
  z-index: 2;
  text-align: right;
}

.the-hub-grid-view {
  width: 100vw;
  min-height: 100vh;
  background: #fff;
  padding: 13.2rem 3.6rem;
  box-sizing: border-box;
}

.the-hub-grid-view-active {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.02em;
}

.the-hub-view-separator {
  margin: 0 0.8rem;
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.02em;
}

.the-hub-grid-view-inactive {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 250;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.the-hub-grid-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  max-width: 160rem;
  margin: 0 auto;
}

.the-hub-grid-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 140px;
  gap: 1rem 4rem;
  flex: 1 1 50%;
  min-width: 0;
  margin-top: 2.5rem;
  margin-right: 4.5rem;
  box-sizing: border-box;
}

.the-hub-thumb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}

.the-hub-thumb-img-wrap {
  position: relative;
  display: inline-block;
  width: 10.2rem;
  height: 10.2rem;
  overflow: hidden;
  cursor: pointer;
}

.the-hub-thumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.the-hub-thumb-img-wrap:hover .the-hub-thumb-overlay {
  opacity: 1;
}

.the-hub-thumb-plus {
  color: var(--color-white);
  font-size: 3.2rem;
  font-family: var(--font-montreal-mono);
  font-weight: 500;
  line-height: 1;
  z-index: 20;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.the-hub-thumb-label {
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.1rem;
  letter-spacing: 0;
  color: var(--color-black);
  margin-bottom: 0.3rem;
}

.the-hub-thumb img {
  width: 10.2rem;
  height: 10.2rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  border: none;
  display: block;
}

.the-hub-grid-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1 1 50%;
  min-width: 0;
  margin-top: 4.5rem;
  box-sizing: border-box;
}

.the-hub-grid-detail-img-wrap {
  position: relative;
  width: 100%;
  height: 41.8rem;
  background: var(--color-white);
  margin-bottom: 2.2rem;
}

.the-hub-grid-detail-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.the-hub-grid-detail-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}

.the-hub-grid-detail-title-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  vertical-align: top;
  gap: 2rem;
}

.the-hub-grid-detail-label {
  position: static;
  align-self: flex-start;
  margin-left: auto;
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-black);
  background: none;
  padding: 0;
}

.the-hub-grid-detail-title {
  font-family: var(--font-montreal);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-black);
  margin: 0 0 0.2rem 0;
}

.the-hub-grid-detail-desc {
  font-family: var(--font-montreal);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--color-black);
  margin-bottom: 0.5rem;
}

.the-hub-grid-detail-hours {
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-black);
  margin-top: 0.5rem;
}

.the-hub-list-view {
  width: 100vw;
  min-height: 100vh;
  background: var(--color-white);
  padding: 18.2rem 3.6rem;
  box-sizing: border-box;
  display: block;
}

.the-hub-list-container {
  max-width: 160rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.the-hub-list-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-bottom: 1px solid var(--color-white);
  min-height: 180px;
  padding: 0;
}

.the-hub-list-names {
  display: flex;
  flex-direction: column;
  min-width: 600px;
  max-width: 600px;
  padding: 0 0 0 0;
  font-family: var(--font-montreal);
  font-size: 2.2rem;
  font-weight: 500;
  color: #D4D4D4;
  gap: 1rem;
  margin: 0;
}

.the-hub-list-name {
  color: #D4D4D4;
  font-family: var(--font-montreal);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.2rem 0;
  transition: background 0.2s, color 0.2s;
}

.the-hub-list-name--active {
  color: var(--color-black);
}

.the-hub-list-names-hr-wrap {
  width: 95vw;
  padding: 0;
}

.the-hub-list-names-hr {
  border: none;
  border-top: 0.5px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  display: block;
  margin: 0;
}

.the-hub-list-detail {
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 10rem;
  width: 100%;
  padding: 0.2rem 0 2.5rem 0;
}

.the-hub-list-detail-img-wrap {
  width: 21rem;
  height: 21rem;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2.5rem;
  flex-shrink: 0;
}

.the-hub-list-detail-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.the-hub-list-detail-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-montreal);
  font-size: 1.6rem;
  color: var(--color-black);
  gap: 1.2rem;
  width: 100%;
  max-width: 600px;
}

.the-hub-list-detail-desc {
  font-size: 1.6rem;
  color: var(--color-black);
  font-family: var(--font-montreal);
  font-weight: 400;
  line-height: 1.8rem;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

.the-hub-list-detail-hours {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-black);
  font-family: var(--font-montreal-mono);
  margin-top: 0.5rem;
  letter-spacing: 0.1em;
}

/* ==========================================================================
    Inhabit Gallery
    - Layout y grid
    - Imágenes y descripciones
========================================================================== */
.inhabit-mobile-gallery-container {
  display: none;
}

.inhabit-main-content {
  /*padding: 13.2rem 3.6rem 3.6rem 3.6rem;
  margin-top: 8rem;*/
  box-sizing: border-box;
  width: 100%;
  background: var(--color-white);
}
.inhabit-main-content.fixed {
  position: fixed;
  top: 6rem;
  left: 0;
  width: 100vw;
  z-index: 5;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}
.inhabit-main-content.absolute-end {
  position: absolute !important;
  left: 0;
  right: 0;
  z-index: 5;
}

.inhabit-hero-header {
  position: fixed;
  top: 6rem;
  left: 0;
  width: 100vw;
  z-index: 5;
  background: var(--color-white);
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
  padding: 1.2rem 3.6rem;
  margin-bottom: 0;
  box-sizing: border-box;
}
.inhabit-hero-header.absolute-end {
  position: absolute !important;
  left: 0;
  right: 0;
  z-index: 5;
}

.inhabit-hero-header__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  position: static;
  z-index: auto;
}

.inhabit-hero-labels {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.inhabit-hero-label {
  font-family: var(--font-montreal-mono);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 2.5rem;
  text-decoration: underline;
  transition: color 0.2s;
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.inhabit-hero-label:hover,
.inhabit-hero-label:focus,
.inhabit-hero-label:active {
  font-weight: 500;
  text-decoration: underline;
}

.inhabit-hero-header__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: static;
  z-index: auto;
}

.inhabit-hero-hours {
  font-family: var(--font-montreal-mono);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-black);
  letter-spacing: 0;
  text-align: left;
  line-height: 1.1;
  text-transform: uppercase;
}

.inhabit-hero-hours-title {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inhabit-gallery-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 0;
  align-items: flex-start;
}

.inhabit-gallery-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
}

.inhabit-gallery-img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.inhabit-gallery-col--left .inhabit-gallery-img {
  height: 66rem;
  max-height: 66rem;
}

.inhabit-gallery-col--right .inhabit-gallery-img {
  height: 94.2rem;
  max-height: 94.2rem;
}

.inhabit-gallery-desc--right {
  width: 100%;
  max-width: 34rem;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: 1.2rem;
  padding-right: 1.2rem;
  text-align: left;
  font-family: var(--font-montreal);
  font-size: 1.72rem;
  color: var(--color-black);
  line-height: 1.25;
  padding-top: 1rem;
}

.inhabit-gallery-row--triple {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 0;
  align-items: flex-start;
}

.inhabit-gallery-col--triple-1,
.inhabit-gallery-col--triple-2,
.inhabit-gallery-col--triple-3 {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-img--triple-1,
.inhabit-gallery-img--triple-2 {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.inhabit-gallery-img--triple-1 {
  height: 43.1rem;
  max-height: 43.1rem;
}

.inhabit-gallery-img--triple-2 {
  height: 90.6rem;
  max-height: 90.6rem;
}

.inhabit-gallery-text--triple {
  width: 65%;
  max-width: 60rem;
  margin-top: 1rem;
  margin-left: 1.2rem;
  padding-left: 1.2rem;
  text-align: left;
  font-family: var(--font-montreal);
  font-size: 1.72rem;
  color: var(--color-black);
  line-height: 1.25;
  align-self: flex-start;
  padding: 0;
}

.inhabit-gallery-row--single {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 0;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-col--single {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-img--single {
  width: 100%;
  height: 60.3rem;
  max-height: 60.3rem;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.inhabit-gallery-row--double {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 0;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-col--double-1 {
  flex: 0 0 40%;
  max-width: 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-col--double-2 {
  flex: 0 0 60%;
  max-width: 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-red-box {
  background: var(--color-light);
  width: 100%;
  height: 58.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  position: relative;
  overflow: hidden;
}

.inhabit-gallery-img--centered {
  max-width: 85%;
  max-height: 85%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto;
}

.inhabit-gallery-img--triple-1 {
  height: 43.1rem;
  max-height: 43.1rem;
}

.inhabit-gallery-img--triple-2 {
  height: 90.6rem;
  max-height: 90.6rem;
}

.inhabit-gallery-row--single {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 0;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-col--single {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-img--single {
  width: 100%;
  height: 60.3rem;
  max-height: 60.3rem;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.inhabit-gallery-row--double {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 0;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-col--double-1 {
  flex: 0 0 40%;
  max-width: 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-col--double-2 {
  flex: 0 0 60%;
  max-width: 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.inhabit-gallery-text--right {
  width: 100%;
  max-width: 34rem;
  margin-bottom: 20.4rem;
  margin-left: auto;
  margin-right: 2.4rem;
  margin-top: 1rem;
  text-align: left;
  font-family: var(--font-montreal);
  font-size: 1.72rem;
  color: var(--color-black);
  line-height: 1.2;
  align-self: flex-end;
  padding: 0;
}

.inhabit-gallery-text--below {
  width: 60%;
  max-width: none;
  margin-top: 1rem;
  margin-left: 2.4rem;
  margin-right: auto;
  text-align: left;
  font-family: var(--font-montreal);
  font-size: 1.72rem;
  color: var(--color-black);
  line-height: 1.2;
  align-self: flex-start;
  padding: 0;
}

.inhabit-gallery-col--triple-2 {
  position: relative;
}

.inhabit-map-section {
  margin-top: 16rem;
  margin-bottom: 16rem;
  padding-left: 3.6rem;
  padding-right: 3.6rem;
}

.inhabit-map-grid {
  display: flex;
  flex-direction: row;
  gap: 4rem;
  align-items: flex-start;
  padding-top: 3.6rem;
}

.inhabit-map-col--map {
  flex: 1 1 50%;
  min-width: 38rem;
  max-width: 67rem;
  min-height: 32rem;
  display: flex;
  align-items: flex-start;
}

.inhabit-map-col--map iframe {
  filter: grayscale(1);
  width: 100%;
  height: 100%;
  min-height: 32rem;
}

.inhabit-map-col--info {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 0.5rem;
  padding-left: 2rem;
}

.inhabit-map-info-block {
  width: 100%;
}

.inhabit-map-info-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 2.5rem;
}

.inhabit-map-info-label {
  font-family: var(--font-montreal-mono);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  min-width: 13rem;
  margin-right: 12.5rem;
  text-align: left;
  border: none;
  color: var(--color-black);
}

.inhabit-map-info-value {
  font-family: var(--font-montreal-mono);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-black);
  text-align: left;
  line-height: 1.5;
}

.inhabit-map-info-divider {
  border: none;
  border-top: 1px solid var(--color-black);
  margin-bottom: 2.5rem;
  margin-top: 0.5rem;
}

.inhabit-map-label--location {
  font-family: var(--font-montreal-mono);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.5rem;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: underline;
}

.inhabit-gallery-img.zoomed {
  transform: scale(1.06);
  z-index: 2;
  overflow: hidden;
}

/* ==========================================================================
    Agenda Page
    - Navbar with links and view toggles
    - Grid layout with featured event on the left and list of events on the right
========================================================================== */
.agenda-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13.2rem 3.6rem 3.6rem 3.6rem;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-white);
  font-family: var(--font-montreal-mono);
  position: fixed;
  top: 0;
  z-index: 6;
  width: 100%;
}

.agenda-navbar-menu {
  display: flex;
  gap: 3.6rem;
}

.agenda-navbar-link {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-black);
  transition: opacity 0.2s;
}

.agenda-navbar-view-separator {
  margin: 0 1.2rem;
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-black);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  transition: color 0.2s;
}

.agenda-navbar-link--active {
  opacity: 1;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.agenda-navbar-view-toggle {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 250;
  color: var(--color-black);
}

.agenda-navbar-view--active {
  font-weight: 500;
  opacity: 1;
}

.agenda-grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  background: var(--color-white);
  margin-top: 18.2rem;
}

.agenda-grid-left {
  flex: 1 1 50%;
  max-width: 50%;
  display: flex;
  align-items: stretch;
  position: sticky;
  top: 18.2rem;
}

.agenda-featured-image-container {
  position: relative;
  width: 100%;
  min-height: 32rem;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
}

.agenda-featured-image {
  width: 100%;
  height: 62.3rem;
  -o-object-fit: cover;
     object-fit: cover;
  min-height: 62.3rem;
}

.agenda-featured-date-row {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  gap: 0.3rem;
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  right: 2.2rem;
  width: auto;
  z-index: 2;
}

.agenda-featured-sticker {
  color: var(--color-light);
  font-size: 6.6rem;
  font-family: var(--font-hiker);
  font-weight: 400;
  padding: 1.2rem 1.2rem;
  letter-spacing: 0.04em;
  z-index: 2;
  margin-left: auto;
  transform: rotate(-10deg);
  width: 20rem;
  white-space: pre-line;
  word-break: break-word;
  text-align: right;
  line-height: 0.6;
}

.agenda-featured-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 2;
  font-size: 6.8rem;
  color: var(--color-white);
  font-family: var(--font-suez);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.agenda-featured-subtitle {
  position: absolute;
  left: 50%;
  top: calc(50% + 4.8rem);
  transform: translate(-50%, 0);
  text-align: center;
  width: 100%;
  font-family: var(--font-montreal-mono);
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: 0.04em;
  z-index: 2;
}

.agenda-featured-details {
  position: absolute;
  left: 50%;
  top: calc(50% + 20rem);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 2;
  font-size: 2rem;
  color: var(--color-white);
  font-family: var(--font-canela);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.agenda-grid-right {
  background: var(--color-light);
  flex: 1 1 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 0;
  padding-bottom: 3.6rem;
}

.agenda-events-title {
  background: var(--color-light);
  font-family: var(--font-montreal);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: 1.2rem;
  letter-spacing: 0.04em;
  width: 100%;
  padding-top: 2.4rem;
  padding-left: 5.5rem;
  padding-bottom: 3.2rem;
  position: sticky;
  top: 18rem;
  z-index: 1;
}

.agenda-events-list--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.5rem;
  width: 100%;
  padding-left: 5.5rem;
  padding-right: 5.5rem;
}

.agenda-event-card {
  background: var(--color-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 22rem;
}

.agenda-event-image-container {
  position: relative;
  width: 100%;
  height: 36rem;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.agenda-event-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.agenda-event-category {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  color: var(--color-light);
  font-size: 1.63rem;
  font-family: var(--font-montreal-mono);
  font-weight: 400;
  padding: 0.2rem 0.8rem;
  letter-spacing: 0.04em;
}

.agenda-event-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1.2rem 0;
}

.agenda-event-title {
  width: 60%;
  font-family: var(--font-montreal);
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--color-black);
  margin-bottom: 0.2rem;
  letter-spacing: 0;
  line-height: 1.2;
}

.agenda-event-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 2.4rem;
}

.agenda-event-meta-row {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.2rem;
}

.agenda-event-meta-label--hub {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 400;
  display: block;
  margin-bottom: 0.2rem;
  color: var(--color-black);
}

.agenda-event-meta-label--date {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 400;
  display: block;
  margin-bottom: 0.2rem;
  color: var(--color-black);
}

.agenda-event-meta-label--time {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 400;
  display: block;
  margin-bottom: 0.2rem;
  color: var(--color-black);
  text-align: right;
}

.agenda-event-meta-value {
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  color: var(--color-black);
  opacity: 0.8;
  margin-bottom: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}

.agenda-event-meta-value--date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.agenda-event-meta-value--time {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.agenda-event-btn {
  margin-top: 2.4rem;
  background: transparent;
  border: 1px solid var(--color-black);
  color: var(--color-black);
  font-family: var(--font-montreal-mono);
  font-size: 1.4rem;
  font-weight: 400;
  padding: 0.6rem 2.2rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  letter-spacing: 0.04em;
  height: 4.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agenda-event-btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.agenda-featured-date {
  background: var(--color-light);
  color: var(--color-black);
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 1.1rem;
  padding: 0.7rem 1.1rem 0.7rem 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 6.62rem;
  min-height: 6.62rem;
  justify-content: center;
}

.agenda-featured-day {
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
}

.agenda-featured-number {
  font-family: var(--font-montreal-mono);
  font-size: 4.82rem;
  font-weight: 400;
  margin-top: 0.1rem;
  line-height: 1;
  letter-spacing: 0;
}

.agenda-featured-type {
  margin-top: 1.2rem;
  color: var(--color-light);
  font-family: var(--font-montreal-mono);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.agenda-mobile-grid {
  display: none;
}

.agenda-mobile-list {
  display: none;
}

.agenda-mobile-bar {
  display: none !important;
}

.agenda-list-desktop {
  display: block;
  width: 100vw;
  margin: 0 auto 4rem auto;
  padding: 0 3.6rem 6rem 3.6rem;
  font-family: var(--font-montreal-mono);
  margin-top: 18.2rem;
}

.agenda-list-table-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: 36rem;
}

.agenda-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
  background: var(--color-white);
  z-index: 1;
  position: relative;
}

.agenda-list-table th {
  font-family: var(--font-montreal-mono);
  font-weight: 400;
  color: var(--color-black);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  padding: 0.8rem 0.6rem 0.8rem 0;
  text-align: left;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.8196078431);
}

.agenda-list-table td {
  padding: 2.4rem 0.5rem 2.4rem 0.5rem;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.8196078431);
  font-family: var(--font-montreal);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--color-black);
  background: var(--color-white);
  transition: background 0.2s;
}
.agenda-list-table td:nth-child(1) {
  width: 25%;
}
.agenda-list-table td:nth-child(2) {
  width: 45%;
}
.agenda-list-table td:nth-child(3) {
  width: 15%;
}

.agenda-list-row {
  cursor: pointer;
  transition: background 0.2s;
}

.agenda-list-row--active td {
  font-weight: 500;
}

.agenda-list-row--disabled td {
  color: rgba(0, 0, 0, 0.3019607843);
  font-weight: 400;
}

.agenda-list-row:hover:not(.agenda-list-row--disabled),
.agenda-list-row:focus:not(.agenda-list-row--disabled) {
  font-weight: 400;
  background: rgba(0, 0, 0, 0.3019607843);
}

.agenda-list-row:hover td,
.agenda-list-row:focus td {
  font-weight: 500;
}

.agenda-list-hover-image {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  display: block;
  pointer-events: auto;
  width: 32rem;
  height: 37rem;
  background: transparent;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  border-radius: 1.2rem;
  padding: 0;
}

.agenda-list-hover-img-content {
  position: relative;
  width: 32rem;
  height: 37rem;
  background: var(--color-white);
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
}

.agenda-list-hover-img-content img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 0;
  display: block;
}

.agenda-list-hover-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.agenda-list-hover-img-texts {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  min-height: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 2.4rem 2.4rem 2.4rem;
  z-index: 2;
  color: var(--color-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.agenda-list-hover-img-texts .agenda-list-hover-title {
  font-family: var(--font-suez);
  font-size: 4.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-white);
  margin-bottom: 0.6rem;
  pointer-events: auto;
  text-align: center;
  width: 100%;
}

.agenda-list-hover-img-texts .agenda-list-hover-details {
  font-family: var(--font-canela);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-white);
  pointer-events: auto;
  text-align: center;
  width: 100%;
  pointer-events: auto;
}

.agenda-list-hover-sticker {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  color: var(--color-white);
  font-family: var(--font-hiker);
  font-size: 4.2rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  transform: rotate(-10deg);
  width: 15rem;
  white-space: pre-line;
  word-break: break-word;
  text-align: center;
  line-height: 0.6;
  z-index: 5;
}

.agenda-list-detail-row {
  display: none;
  position: relative;
  z-index: 20;
}
.agenda-list-detail-row:hover {
  display: table-row;
}

.agenda-list-row:hover + .agenda-list-detail-row,
.agenda-list-row:focus + .agenda-list-detail-row {
  display: table-row;
}

.agenda-list-detail-row > td {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  z-index: 100;
}

.agenda-list-hover-meta {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.2rem;
  pointer-events: none;
}

.agenda-list-hover-date {
  color: var(--color-white);
  font-family: var(--font-montreal);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agenda-list-hover-category {
  color: var(--color-white);
  font-family: var(--font-montreal);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
    Coming Soon Page
    - Fullscreen hero section with background image and overlay text
    - Gallery section with 3-column layout
========================================================================== */
.gallery-item .mobile {
  display: none;
}

.gallery-item .desktop {
  display: block;
}

.hero-coming {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 6.1rem;
}

.hero-coming-bg {
  position: absolute;
  top: 6.1rem;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.hero-coming-bg .hero-bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.hero-bg-mobile {
  display: none !important;
}

.hero-bg-desktop {
  display: block !important;
}

.hero-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.hero-content .hero-logo-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7rem;
}
.hero-content .hero-logo-subtitle .hero-logo {
  width: 16rem;
  height: 2.8rem;
  display: inline-block;
  vertical-align: middle;
}
.hero-content .hero-logo-subtitle .hero-subtitle {
  font-family: "Canela";
  font-weight: 300;
  font-style: Light;
  font-size: 3.8rem;
  color: #fff;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  position: relative;
  top: 0.3rem;
}
.hero-content .hero-desc {
  font-family: "PP Neue Montreal Mono";
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 100%;
  letter-spacing: 1;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.9;
}

.gallery {
  width: 100%;
}

.gallery-item {
  width: 33.3333%;
  float: left;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.img-h-488 {
  height: 48.8rem;
  min-height: 48.8rem;
  max-height: 48.8rem;
}

.img-h-675 {
  margin-top: 30rem;
  height: 67.5rem;
  min-height: 67.5rem;
  max-height: 67.5rem;
}

.img-h-598 {
  height: 59.8rem;
  min-height: 59.8rem;
  max-height: 59.8rem;
}

.img-h-536 {
  margin-top: 15rem;
  height: 53.6rem;
  min-height: 53.6rem;
  max-height: 53.6rem;
}

.img-h-535 {
  height: 53.5rem;
  min-height: 53.5rem;
  max-height: 53.5rem;
}

.img-h-457 {
  height: 45.7rem;
  min-height: 45.7rem;
  max-height: 45.7rem;
}

.img-h-785 {
  margin-top: 44.7rem;
  height: 78.5rem;
  min-height: 78.5rem;
  max-height: 78.5rem;
}

.img-h-603 {
  margin-top: 25rem;
  height: 60.3rem;
  min-height: 60.3rem;
  max-height: 60.3rem;
}

.img-h-786 {
  height: 78.6rem;
  min-height: 78.6rem;
  max-height: 78.6rem;
}

.img-h-595 {
  margin-top: 30rem;
  height: 59.5rem;
  min-height: 59.5rem;
  max-height: 59.5rem;
}

.img-h-437 {
  height: 43.7rem;
  min-height: 43.7rem;
  max-height: 43.7rem;
}

.img-h-720 {
  height: 72rem;
  min-height: 72rem;
  max-height: 72rem;
}

.w-33 {
  width: 33.3333% !important;
}

.w-66 {
  width: 66.6667% !important;
}

/* ==========================================================================
    Footer
    - Grid layout with 4 columns
    - Newsletter signup form
    - Accordion for mobile view
========================================================================== */
.footer {
  width: 100vw;
  overflow: hidden;
  background: var(--color-primary);
  padding: 0;
  margin: 0;
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 36rem 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  width: 100vw;
  height: auto;
  padding: 6rem 3.6rem 3.6rem 3.6rem;
  box-sizing: border-box;
  position: relative;
}

.footer-main-content {
  grid-column: 1/5;
  display: grid;
  grid-template-columns: 36rem 1fr 1fr 1fr;
  gap: 18rem;
  width: 100%;
  align-items: flex-start;
  margin-bottom: 3.6rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.footer-col--form {
  align-items: flex-start;
  gap: 3.6rem;
}

.footer-header-row {
  display: flex;
  align-items: flex-end;
  gap: 5.7rem;
  margin-bottom: 1.2rem;
}

.footer-title {
  font-family: var(--font-canela);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-white);
}

.footer-logo {
  width: 8.5rem;
  height: 1.5rem;
}

.footer-form {
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
  width: 100%;
}

.footer-form-row {
  display: flex;
  gap: 4.8rem;
  width: 100%;
}

.footer-form-row--email {
  align-items: flex-end;
}

.footer-form input {
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--color-white);
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.6980392157);
  padding: 0.5rem 0;
  width: 100%;
  outline: none;
}

.footer-form #email {
  border-bottom: none !important;
}

.footer-form-row--email {
  border-bottom: 0.5px solid var(--color-white);
}

.footer-subscribe {
  background: transparent;
  border: none;
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  padding: 0.5rem 0rem;
  margin-left: 1.2rem;
  transition: color 0.2s;
  text-transform: uppercase;
}

.footer-subscribe:hover {
  color: #D4D4D4;
}

/* Duplicate of email styles for business inquiry field, kept separate classes */
.footer-form-row--biz input {
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--color-white);
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.6980392157);
  padding: 0.5rem 0;
  width: 100%;
  outline: none;
}

.footer-click {
  background: transparent;
  border: none;
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  padding: 0.5rem 0rem;
  margin-left: -11.8rem;
  transition: color 0.2s;
  text-transform: uppercase;
}

.footer-click:hover {
  color: #D4D4D4;
}

.footer-accordion-title {
  font-family: var(--font-canela);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-white);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-col ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 6rem;
  margin-bottom: 3.6rem;
}

.footer-col a {
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 2.5rem;
  letter-spacing: 0;
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: #D4D4D4;
}

.footer-bottom {
  grid-column: 1/5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 7rem;
  margin-bottom: -6rem;
}

.footer-hours {
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: 0;
  color: var(--color-white);
  opacity: 0.8;
}

.footer-copy {
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: 0;
  color: var(--color-white);
  opacity: 0.8;
  text-align: left;
  margin-top: 10rem;
}

.footer-flower {
  position: absolute;
  right: 8rem;
  bottom: 0rem;
  width: auto;
  height: 20rem;
  pointer-events: none;
  -o-object-fit: contain;
     object-fit: contain;
}

.hero-banner-top {
  --navbar-height: 6.1rem;
  --hero-banner-height: 10.5rem;
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  width: 100vw;
  height: var(--hero-banner-height);
  background: var(--color-white);
  padding: 0 3.6rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 9;
}

.hero-banner-top .hero-back {
  display: inline-block;
  font-family: var(--font-montreal-mono);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-black);
  text-decoration: none;
  letter-spacing: 0.08em;
}

.hero--florets {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: calc(var(--navbar-height, 6.1rem) + var(--hero-banner-height, 10.5rem));
}

.hero--florets::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 1;
}

.hero-bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  display: block;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0 3.6rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-title {
  margin: 0;
  font-family: var(--font-suez);
  font-size: 9.5rem;
  line-height: 1;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.hero-cta {
  transition: all 0.3s ease;
  width: 18.3rem;
  height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-montreal-mono);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: center;
  border: 0;
  box-shadow: none;
  border: 1px solid var(--color-black);
}

.hero-cta:hover,
.hero-cta:focus {
  color: var(--color-black);
  background-color: var(--color-white);
}

.event-section {
  width: 100%;
  background: var(--color-white);
  padding: 20rem 3.6rem 12rem 3.6rem;
  box-sizing: border-box;
}

.event-container {
  max-width: 160rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 55rem 1fr;
  gap: 4rem;
  align-items: start;
}

.event-name {
  font-family: var(--font-canela);
  font-size: 4.65rem;
  font-weight: 300;
  margin: 0 0 2rem 0;
}

.event-meta dt {
  font-family: var(--font-montreal-mono);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--color-black);
  flex: 0 0 12rem;
  width: 12rem;
  text-align: left;
  padding-right: 1.2rem;
  box-sizing: border-box;
}

.event-meta dd {
  margin: 0 0 1.6rem 0;
  font-family: var(--font-montreal-mono);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-black);
  width: auto;
  margin: 0;
  flex: 1 1 auto;
  text-align: left;
}

.event-meta div {
  width: 30rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  position: relative;
}

.event-reserve {
  margin-top: 2.4rem;
}
.event-reserve.event2 {
  display: none;
}

.event-reserve .reserve-line1 {
  font-family: var(--font-montreal);
  font-size: 2.4rem;
  font-weight: 400;
  margin: 0;
}

.event-reserve .reserve-line2 {
  font-family: var(--font-montreal);
  font-size: 2.4rem;
  font-weight: 400;
  margin: 0;
}

.event-reserve .reserve-line2 a {
  text-decoration: underline;
  font-weight: 500;
  color: var(--color-black);
}

.event-desc {
  font-family: var(--font-montreal);
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.reserve-section {
  width: 100vw;
  background: var(--color-white);
  padding: 0 3.6rem 4rem 3.6rem;
  box-sizing: border-box;
}

.reserve-grid {
  max-width: 160rem;
  margin: 0 auto 3.6rem auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6rem;
  align-items: start;
}

.reserve-img img {
  width: 100%;
  height: 60rem;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 0;
}

.reserve-cta {
  max-width: 160rem;
  margin: 0 auto;
  padding-top: 1.6rem;
}

.reserve-cta-inner {
  display: block;
  gap: 0;
}

.reserve-title {
  font-family: var(--font-montreal);
  font-size: 2.4rem;
  font-weight: 400;
  margin: 0 0 1.2rem 0;
  color: var(--color-black);
}

.reserve-text {
  font-family: var(--font-montreal);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-black);
  margin: 0;
  width: 40%;
  max-width: 40%;
  margin-top: 1rem;
}
.reserve-text span {
  font-weight: 500;
}

/* ==========================================================================
    Responsive
    - Adjust font sizes and layout for different screen widths
========================================================================== */
@media (width < 1920px) {
  html {
    font-size: 14px;
  }
}
@media (width < 1800px) {
  html {
    font-size: 10px;
  }
}
@media (width < 1600px) {
  html {
    font-size: 9.5px;
  }
}
@media (width < 1400px) {
  html {
    font-size: 9px;
  }
}
@media (width < 1200px) {
  html {
    font-size: 9px;
  }
  .agenda-events-list--grid {
    grid-template-columns: 1fr;
  }
}
@media (width < 992px) {
  html {
    font-size: 8.5px;
  }
  .hero-cta {
    bottom: 4rem;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
  }
  .event-reserve .reserve-line1,
  .event-reserve .reserve-line2 {
    font-size: 1.8rem;
  }
  .hero--florets {
    height: 40rem;
    background-position: center top;
  }
  .hero-title {
    font-size: 4.6rem;
  }
  .hero--florets {
    height: 100vh !important;
    min-height: 100vh !important;
    margin-top: calc(var(--navbar-height, 6.1rem) + var(--hero-banner-height, 4.8rem));
  }
  .hero-bg-img {
    height: 100vh !important;
    min-height: 100vh !important;
    width: 100vw !important;
    -o-object-position: center center !important;
       object-position: center center !important;
  }
  .event-container {
    grid-template-columns: 1fr;
    gap: 0rem;
  }
  .event-name {
    font-size: 2.8rem !important;
  }
  .event-meta {
    margin-bottom: 2rem;
  }
  .event-desc {
    font-size: 1.8rem !important;
    line-height: 2.2rem !important;
  }
  .event-desc .lead {
    font-size: 1.8rem !important;
  }
  .event-details {
    display: contents;
  }
  .event-desc {
    gap: 2rem;
  }
  .event-reserve {
    display: none;
  }
  .event-reserve.event2 {
    display: block;
    margin-top: 0;
  }
  .reserve-grid {
    gap: 1.3rem;
  }
  .reserve-img {
    width: 24.3rem;
    height: 36.5rem;
    margin: 0 auto;
    overflow: hidden;
  }
  .reserve-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  .reserve-cta-inner {
    grid-template-columns: 1fr;
  }
  .reserve-text {
    width: 100% !important;
    max-width: 100% !important;
  }
  .event-section {
    padding-bottom: 6rem;
  }
}
@media (width < 768px) {
  html {
    font-size: 8.8px;
  }
  .side-menu-content {
    width: 85vw;
  }
  .side-menu-link {
    font-size: 2.6rem;
  }
  .side-menu-footer .side-menu-link {
    font-size: 1rem;
  }
  .navbar-logo-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 2;
  }
  .menu-icon-img {
    width: 4.2rem;
    height: auto;
  }
  .navbar-logo-img {
    width: 7.38rem;
    height: auto;
  }
  .hero-overlay {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    height: 100vh;
    padding-bottom: 3.6rem;
    gap: 0;
  }
  .hero-caption {
    font-size: 1rem;
    order: 1;
    text-align: center;
    margin: 0 auto 2.4rem auto;
    width: 100%;
    max-width: 50%;
  }
  .hero-controls {
    font-size: 1rem;
    order: 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 3.6rem;
    margin: 0;
    gap: 0;
  }
  .cookie-banner {
    width: auto;
    min-width: 0;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1.2rem;
    gap: 1.6rem;
  }
  .cookie-text {
    width: 75%;
    margin-right: 0;
    line-height: 1.2;
  }
  .cookie-buttons {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0;
    gap: 1.6rem;
    box-sizing: border-box;
  }
  .cookie-btn {
    font-size: 1rem;
    width: 100%;
    min-width: 0;
  }
  .newsletter-modal {
    padding: 1rem;
    width: 30rem;
    height: 18rem;
  }
  .newsletter-modal-close {
    font-size: 1rem;
  }
  .newsletter-modal-title {
    font-size: 2rem;
    line-height: 1.1;
  }
  .newsletter-modal-subtitle {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
  }
  .newsletter-modal-form {
    margin-top: 0;
  }
  .newsletter-modal-input {
    font-size: 0.85rem !important;
  }
  .newsletter-modal-btn {
    font-size: 0.85rem !important;
  }
  .about-section {
    padding-bottom: 3.2rem;
  }
  .about-grid {
    flex-direction: column;
    max-width: 100%;
    gap: 3.6rem;
  }
  .about-title {
    width: 100%;
    flex: none;
    margin: 0;
    text-align: left;
    font-size: 2.8rem;
  }
  .about-text {
    width: 100%;
    flex: none;
    margin: 0;
    text-align: left;
    font-size: 1.8rem;
    line-height: 1.2;
  }
  .feature-grid {
    flex-direction: column;
  }
  .feature-img-wrap {
    height: 31.5rem;
  }
  .feature-slider {
    height: 31.5rem;
  }
  .feature-col {
    width: 100%;
    flex: none;
  }
  .feature-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 2.4rem;
  }
  .feature-btn {
    align-self: center;
    margin-left: 0;
    margin-right: 0;
    height: 3.6rem;
    width: 16rem;
    font-size: 1rem;
  }
  .feature-bottom-text {
    width: 100%;
  }
  .feature-header {
    gap: 2rem;
  }
  .feature-agenda-group {
    gap: 2rem;
  }
  .feature-date,
  .feature-agenda,
  .feature-events {
    font-size: 1.05rem;
  }
  .feature-img-handwritten {
    font-size: 3.5rem;
    width: 10rem;
    line-height: 2rem;
  }
  .feature-img-title {
    font-size: 3.42rem;
  }
  .feature-img-sub {
    font-size: 1.1rem;
  }
  .feature-img-title--right {
    font-size: 1.6rem;
  }
  .feature-bottom {
    padding: 1.6rem 3.6rem;
  }
  .feature-bottom-text {
    font-size: 1.6rem;
  }
  .inhabit-main-content {
    padding: 6.2rem 3.6rem 3.6rem 3.6rem;
  }
  .inhabit-desktop-gallery-container {
    display: none !important;
  }
  .inhabit-map-grid {
    flex-direction: column-reverse !important;
    gap: 2.4rem !important;
  }
  .inhabit-hero-label {
    font-size: 1.2rem;
  }
  .inhabit-hero-hours-title {
    font-size: 1.2rem;
  }
  .inhabit-hero-hours {
    font-size: 1.2rem;
  }
  .inhabit-hero-header {
    top: 6.2rem;
    flex-direction: row;
    align-items: start;
    padding: 3.6rem 3.6rem;
  }
  .inhabit-hero-header__left {
    flex: 1 1 0;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
  }
  .inhabit-hero-header__right {
    flex: 1 1 0;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
  }
  .inhabit-mobile-gallery-container {
    display: block;
    width: 100%;
    margin-top: 16.2rem;
  }
  .inhabit-mobile-gallery-row {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .inhabit-mobile-gallery-img {
    width: 100%;
    height: 34.8rem;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  .inhabit-mobile-gallery-row--split {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: stretch;
    margin: 0;
    padding: 0;
  }
  .inhabit-mobile-gallery-split-text {
    width: 50%;
    display: flex;
    align-items: start;
    justify-content: center;
    font-family: var(--font-montreal);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.25;
    padding: 0.5rem 1.2rem 0 6rem;
    text-align: left;
    background: var(--color-white);
  }
  .inhabit-mobile-gallery-split-img-wrap {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
    padding: 0;
  }
  .inhabit-mobile-gallery-split-img {
    width: 100%;
    height: 24.5rem;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  .inhabit-mobile-gallery-row--single-img {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .inhabit-mobile-gallery-img-single {
    width: 100%;
    height: 35.4rem;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  .inhabit-mobile-gallery-row--img-left {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: stretch;
    margin: 0;
    padding: 0;
  }
  .inhabit-mobile-gallery-img-left-wrap {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--color-white);
    padding: 0;
  }
  .inhabit-mobile-gallery-img-left {
    width: 100%;
    height: 36.2rem;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  .inhabit-mobile-gallery-img-left-text {
    width: 50%;
    display: flex;
    align-items: start;
    justify-content: center;
    font-family: var(--font-montreal);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.25;
    padding: 1rem 4rem 0 1rem;
    text-align: left;
    background: var(--color-white);
  }
  .inhabit-mobile-gallery-row--single-img-25 {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .inhabit-mobile-gallery-img-single-25 {
    width: 100%;
    height: 25rem;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  .inhabit-mobile-gallery-row--bg-img {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 16rem;
    align-items: stretch;
    margin: 0;
    padding: 0;
  }
  .inhabit-mobile-gallery-bg-text {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-montreal);
    font-size: 1.2rem;
    line-height: 1.25;
    padding: 1rem 1rem 5rem 2.4rem;
    text-align: left;
    background: var(--color-white);
  }
  .inhabit-mobile-gallery-bg-img-wrap {
    width: 60%;
    background: var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 100%;
  }
  .inhabit-mobile-gallery-bg-img {
    max-width: 80%;
    max-height: 11rem;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
  }
  .inhabit-mobile-gallery-row--img-bottom-text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0 0 3.6rem 0;
    padding: 0;
  }
  .inhabit-mobile-gallery-img-bottom {
    width: calc(100% - 8.6rem);
    height: 31.6rem;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    margin: 0 3.6rem;
    border-radius: 0;
  }
  .inhabit-mobile-gallery-bottom-text {
    width: calc(100% - 8.6rem);
    margin: 1.2rem 3.6rem 0 3.6rem;
    font-family: var(--font-montreal);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-black);
    text-align: left;
    line-height: 1.25;
    padding-right: 8rem;
  }
  .inhabit-gallery-img.zoomed {
    transform: scale(1.06);
    z-index: 2;
    overflow: hidden;
  }
  .inhabit-mobile.zoomed img {
    width: 100%;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 100vw;
    max-height: 100vh;
    transition: none;
  }
  .inhabit-map-col--map,
  .inhabit-map-col--info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .inhabit-map-info-label {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.8rem;
    margin-right: 2rem;
  }
  .inhabit-map-info-value {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.8rem;
  }
  .the-hub-simple-list-detail {
    display: none;
    background: var(--color-white);
    padding: 2.4rem 0 2.4rem 0;
    border-bottom: 1px solid #e0e0e0;
  }
  .the-hub-simple-list-item.active + .the-hub-simple-list-detail {
    display: block;
  }
  .the-hub-simple-list-detail-desc {
    font-family: var(--font-montreal);
    font-size: 1.4rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6980392157);
    margin-bottom: 2.4rem;
    line-height: 1.2;
  }
  .the-hub-simple-list-detail-hours {
    font-family: var(--font-montreal-mono);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-black);
    margin-bottom: 2.4rem;
  }
  .the-hub-simple-list-detail-img {
    width: 100%;
    max-width: 100%;
    height: 14.7rem;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .the-hub-simple-list-detail-link {
    font-family: var(--font-montreal-mono);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-black);
    text-decoration: underline;
    text-transform: uppercase;
    margin-top: 1.2rem;
    display: inline-block;
  }
  .the-hub-switch-bar {
    display: none !important;
  }
  .the-hub-grid-view,
  .the-hub-list-view {
    display: none !important;
  }
  .the-hub-simple-list {
    display: block !important;
    width: 100vw;
    margin: 0;
    padding: 13.2rem 3.6rem 3.6rem 3.6rem;
    box-sizing: border-box;
  }
  .the-hub-simple-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0.5px solid rgba(0, 0, 0, 0.2);
    font-family: var(--font-montreal);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 1.2rem 0;
  }
  .the-hub-simple-list-toggle {
    font-family: var(--font-montreal-mono);
    font-size: 400;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-black);
  }
  .the-hub-simple-list-item.active .the-hub-simple-list-toggle {
    font-family: var(--font-montreal-mono);
    font-weight: 500;
    color: var(--color-black);
  }
  .footer {
    height: 63.4rem;
    padding: 0;
  }
  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
    padding: 3.6rem 2.4rem 0 2.4rem;
    position: relative;
  }
  .footer-main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 0;
  }
  .footer-col {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .footer-accordion-icon {
    font-family: var(--font-montreal-mono);
    font-size: 2.2rem;
    font-weight: 400;
    margin-left: 1.2rem;
    display: inline-block;
    line-height: 1;
  }
  .footer-accordion-title .footer-accordion-icon::after {
    content: "+";
    display: inline-block;
  }
  .footer-accordion-title.active .footer-accordion-icon::after {
    content: "-";
  }
  .footer-header-row {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 auto 2.4rem auto;
  }
  .footer-span {
    width: 8rem;
    height: 2rem;
  }
  .footer-title {
    font-size: 1.2rem;
  }
  .footer-form-row--email {
    margin-bottom: 0;
  }
  .footer-col--form {
    gap: 0;
    margin-top: 0;
  }
  .footer-form input {
    font-size: 1rem;
    padding: 1.2rem 0 0.4rem 0;
  }
  .footer-subscribe {
    font-size: 1rem;
    padding: 0.2rem 0;
    margin-left: 0.8rem;
    height: 100%;
  }
  .footer-logo {
    width: 7.38rem;
    height: 1.3rem;
    /*margin: 0 auto 2.4rem auto;*/
    display: block;
  }
  .footer-section-title {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }
  .footer-col ul {
    margin-top: 0;
    margin-bottom: 0;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: 0;
  }
  .footer-hours {
    font-size: 1rem;
    margin-bottom: -2.4rem;
    text-align: left;
  }
  .footer-copy {
    font-size: 1rem;
    /*margin-top: 1.6rem;
    margin-bottom: 1.6rem;*/
    text-align: left;
    margin-top: 0;
  }
  .footer-flower {
    position: static;
    display: block;
    margin: 3.2rem 0 0 0;
    width: auto;
    height: 10rem;
    opacity: 0.7;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .footer-accordion-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-family: var(--font-canela);
    font-size: 1.4rem;
    color: var(--color-white);
    font-weight: 300;
    padding: 0;
    margin-bottom: 0.8rem;
    border-bottom: 0.5px solid var(--color-white);
    cursor: pointer;
    outline: none;
    text-align: left;
  }
  .footer-accordion-title span {
    display: inline-block;
  }
  .footer-accordion-list {
    display: none !important;
    padding: 0 0 1.6rem 0;
    margin: 0;
    border-bottom: none !important;
  }
  .footer-accordion-list.active {
    display: block !important;
  }
  .footer-accordion-list li {
    margin-bottom: 0.5rem;
  }
  .footer-accordion-list li:last-child {
    margin-bottom: 0;
  }
  .footer-col--about {
    margin-top: 3.6rem;
  }
  .hero-coming {
    height: 85vh !important;
  }
  .hero-coming .hero-content {
    gap: 1.9rem;
  }
  .hero-coming .hero-content .hero-logo-subtitle {
    gap: 5rem;
  }
  .hero-coming .hero-content .hero-logo-subtitle .hero-logo {
    width: 10.4rem;
  }
  .hero-coming .hero-content .hero-logo-subtitle .hero-subtitle {
    font-size: 2.4rem;
    top: 0.2rem;
  }
  .hero-coming .hero-content .hero-desc {
    font-size: 1rem;
    width: 17rem;
    margin: 0 auto;
  }
  .hero-bg-desktop {
    display: none !important;
  }
  .hero-bg-mobile {
    display: block !important;
  }
  .w-66,
  .w-33 {
    width: 50% !important;
  }
  .hero-bg-img {
    height: 85vh !important;
    min-height: unset !important;
    max-height: unset !important;
  }
  .gallery-item {
    top: 0 !important;
  }
  .gallery-item .mobile {
    display: block !important;
  }
  .gallery-item .desktop {
    display: none !important;
  }
  .gallery-item:first-child {
    margin-right: 3rem;
  }
  .img-mobile-img-1 {
    height: 18.7rem !important;
    min-height: 18.7rem !important;
    max-height: 18.7rem !important;
  }
  .img-mobile-img-2 {
    height: 19rem !important;
    min-height: 19rem !important;
    max-height: 19rem !important;
    width: 100% !important;
  }
  .img-mobile-img-3 {
    margin-top: 0 !important;
    height: 26.3rem !important;
    min-height: 26.3rem !important;
    max-height: 26.3rem !important;
  }
  .img-mobile-img-4 {
    margin-top: 6rem !important;
    height: 21rem !important;
    min-height: 21rem !important;
    max-height: 21rem !important;
  }
  .img-mobile-img-5 {
    margin-top: 15rem !important;
    height: 18.7rem !important;
    min-height: 18.7rem !important;
    max-height: 18.7rem !important;
  }
  .img-mobile-img-6 {
    height: 30rem !important;
    min-height: 30rem !important;
    max-height: 30rem !important;
  }
  .img-mobile-img-7 {
    height: 18rem !important;
    min-height: 18rem !important;
    max-height: 18rem !important;
    width: 100% !important;
  }
  .img-mobile-img-8 {
    margin-top: 0 !important;
    height: 30rem !important;
    min-height: 30rem !important;
    max-height: 30rem !important;
  }
  .img-mobile-img-9 {
    margin-top: 10rem !important;
    height: 23.5rem !important;
    min-height: 23.5rem !important;
    max-height: 23.5rem !important;
  }
  .img-mobile-img-10 {
    display: none !important;
    height: 18.8rem !important;
    min-height: 18.8rem !important;
    max-height: 18.8rem !important;
  }
  .img-mobile-img-11 {
    display: none !important;
    margin-top: 15rem !important;
    height: 23.5rem !important;
    min-height: 23.5rem !important;
    max-height: 23.5rem !important;
  }
  .img-mobile-img-12 {
    width: 100% !important;
    height: 18.5rem !important;
    min-height: 18.5rem !important;
    max-height: 18.5rem !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-right: 0 !important;
  }
  .img-mobile-img-12 img {
    width: 50% !important;
    height: auto !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    margin-left: auto !important;
    display: block !important;
  }
  .img-mobile-img-13 {
    height: 47rem !important;
    min-height: 47rem !important;
    max-height: 47rem !important;
    width: 100% !important;
  }
  .agenda-grid,
  .agenda-navbar,
  .agenda-list-desktop {
    display: none !important;
  }
  .agenda-mobile-grid {
    padding: 1rem 3.6rem 6rem 3.6rem;
    display: block;
  }
  .agenda-mobile-grid-card {
    background: var(--color-white);
    overflow: hidden;
    margin-top: 1.2rem;
    margin-bottom: 3.6rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .agenda-mobile-grid-img-wrap {
    position: relative;
    width: 100%;
    height: 41.7rem;
    aspect-ratio: 1/1;
    overflow: hidden;
  }
  .agenda-mobile-grid-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  .agenda-mobile-grid-meta {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    display: flex;
    flex-direction: row;
    gap: 3.6rem;
    padding: 0.3rem 0.8rem;
    z-index: 2;
  }
  .agenda-mobile-grid-date {
    font-family: var(--font-montreal);
    font-size: 1.14rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-white);
  }
  .agenda-mobile-grid-category {
    font-family: var(--font-montreal);
    font-size: 1.14rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-white);
  }
  .agenda-mobile-grid-content {
    padding: 1.5rem 0 1.5rem 0rem;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
  }
  .agenda-mobile-grid-title {
    font-family: var(--font-montreal);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: 0.2rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }
  .agenda-mobile-grid-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.2rem;
    font-size: 1.2rem;
    color: var(--color-black);
    font-family: var(--font-montreal-mono);
    margin-bottom: 0.1rem;
  }
  .agenda-mobile-grid-label {
    font-weight: 500;
    color: var(--color-black);
    letter-spacing: 0.02em;
  }
  .agenda-mobile-grid-value {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5803921569);
    letter-spacing: 0.02em;
  }
  .agenda-mobile-grid-btn {
    text-align: center;
    margin: 1rem 1.8rem 1rem 1.8rem;
    height: 5.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.85rem 0;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    font-family: var(--font-montreal-mono);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-black);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
  }
  .agenda-mobile-grid-btn:hover,
  .agenda-mobile-grid-btn:active {
    background: var(--color-black);
    color: var(--color-white);
  }
  .agenda-mobile-list {
    display: block;
    width: 100vw;
    background: var(--color-white);
    padding: 1.6rem;
    margin: 0;
  }
  .agenda-mobile-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 2.4rem;
    width: 100%;
  }
  .agenda-mobile-navbar-link {
    text-align: left;
    font-family: var(--font-montreal-mono);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-black);
    text-decoration: none;
    transition: border 0.2s, color 0.2s;
  }
  .agenda-mobile-navbar-link--active {
    font-weight: 500;
    text-decoration: underline;
  }
  .agenda-mobile-list-items {
    padding: 0 1.5rem 6rem 1.5rem;
  }
  .agenda-mobile-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0.5px solid rgba(0, 0, 0, 0.2);
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    background: var(--color-white);
    cursor: pointer;
    transition: background 0.2s;
  }
  .agenda-mobile-list-title {
    flex: 1 1 auto;
    font-family: var(--font-montreal);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-black);
    letter-spacing: 0.02em;
  }
  .agenda-mobile-list-date {
    font-family: var(--font-montreal-mono);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-black);
    margin-right: 1.2rem;
    min-width: 10rem;
    text-align: left;
    letter-spacing: 0.02em;
  }
  .agenda-mobile-list-toggle {
    font-family: var(--font-montreal-mono);
    font-size: 1rem;
    font-size: 400;
    color: var(--color-black);
    margin-left: 0.8rem;
    transition: color 0.2s;
    letter-spacing: 0.02em;
  }
  .agenda-mobile-list-item.active .agenda-mobile-list-toggle {
    color: var(--color-black);
  }
  .agenda-mobile-list-detail {
    display: none;
    padding: 1.6rem 0 2.4rem 0;
    border-bottom: 1px solid #e0e0e0;
  }
  .agenda-mobile-list-item.active + .agenda-mobile-list-detail {
    display: block;
  }
  .agenda-mobile-list-detail-title {
    font-family: var(--font-montreal);
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
    color: var(--color-black);
  }
  .agenda-mobile-list-detail-desc {
    font-size: 1.3rem;
    color: var(--color-black);
  }
  .agenda-mobile-list-item.active + .agenda-mobile-list-detail .agenda-mobile-list-detail-toggle {
    color: var(--color-black);
  }
  .agenda-mobile-list-detail-img-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 1.6rem;
    text-align: center;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .agenda-mobile-list-detail-img {
    width: 100%;
    height: 32rem;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0;
    margin-bottom: 0.8rem;
  }
  .agenda-mobile-list-detail-img-overlay {
    position: absolute;
    top: 0;
    left: 1.6rem;
    width: calc(100% - 3.2rem);
    height: 32rem;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0;
    box-sizing: border-box;
    padding: 1.2rem 0 0.8rem 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
  }
  .agenda-mobile-list-detail-titleblock {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    margin-bottom: 2.5rem;
    width: 100%;
    pointer-events: none;
  }
  .agenda-mobile-list-detail-date {
    font-family: var(--font-montreal);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.04em;
    margin: 1rem;
  }
  .agenda-mobile-list-detail-number {
    font-family: var(--font-montreal);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.04em;
    margin: 1rem;
  }
  .agenda-mobile-list-detail-category {
    font-family: var(--font-montreal);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.04em;
    margin: 0 0.3rem 0 0.3rem;
  }
  .agenda-mobile-list-detail-row,
  .agenda-mobile-list-detail-meta-flex {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 1.2rem;
  }
  .agenda-mobile-list-detail-meta,
  .agenda-mobile-list-detail-meta-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    white-space: nowrap;
    background: transparent;
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
  }
  .agenda-mobile-list-detail-sticker {
    font-family: var(--font-hiker);
    font-size: 3.64rem;
    font-weight: 400;
    color: var(--color-white);
    margin-right: 1.2rem;
    margin-top: 1.2rem;
    transform: rotate(-10deg);
    width: 12rem;
    white-space: pre-line;
    word-break: break-word;
    text-align: right;
    line-height: 0.6;
  }
  .agenda-mobile-list-detail-event-title {
    position: static;
    width: 90%;
    margin: 0.8rem auto 0 auto;
    color: var(--color-white);
    text-align: center;
    font-size: 4.5rem;
    font-family: var(--font-suez);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.15;
    z-index: 3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }
  .agenda-mobile-list-detail-subtitle {
    width: 90%;
    margin: 0.4rem auto 0 auto;
    color: var(--color-white);
    text-align: center;
    font-size: 1.4rem;
    font-family: var(--font-canela);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 3;
    position: relative;
  }
  .agenda-mobile-list-detail-info-section-title {
    font-family: var(--font-montreal);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: 1.2rem;
    margin-top: 0.2rem;
    text-align: left;
    letter-spacing: 0.01em;
  }
  .agenda-mobile-list-detail-info-label {
    font-family: var(--font-montreal-mono);
    font-size: 1.3rem;
    color: var(--color-black);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
  }
  .agenda-mobile-list-detail-info-value {
    font-family: var(--font-montreal);
    font-size: 1.3rem;
    color: var(--color-black);
    font-weight: 400;
    letter-spacing: 0.01em;
    margin-left: 0.8rem;
    text-align: left;
    word-break: break-word;
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
  }
  .agenda-mobile-list-detail-btn-wrap {
    margin-top: 2.4rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    display: flex;
    justify-content: center;
  }
  .agenda-mobile-list-detail-btn {
    width: 100%;
    height: 5.2rem;
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-black);
    font-family: var(--font-montreal-mono);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-transform: uppercase;
  }
  .agenda-mobile-list-detail-btn:hover {
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
  }
  .agenda-mobile-bar {
    display: flex !important;
    flex-direction: column;
    gap: 0.7rem;
    margin: 8rem 3.6rem 1rem 3.6rem;
    padding-bottom: 0.2rem;
  }
  .agenda-mobile-bar-switch {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-montreal-mono);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-black);
    letter-spacing: 0.04em;
    margin-bottom: 3.2rem;
  }
  .agenda-mobile-switch {
    cursor: pointer;
    color: #888;
    font-weight: 400;
    transition: color 0.2s;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .agenda-mobile-switch--active {
    color: var(--color-black);
    font-weight: 500;
  }
  .agenda-mobile-switch-bar-separator {
    color: #bbb;
    font-weight: 400;
    margin: 0 0.2rem;
  }
  .agenda-mobile-navbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.2rem;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-montreal-mono);
    font-size: 1.04rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
  }
  .agenda-mobile-navbar-link {
    color: #888;
    text-decoration: none;
    font-weight: 400;
    padding-bottom: 0.1rem;
    border-bottom: 2px solid transparent;
    transition: color 0.18s, border-color 0.18s;
    cursor: pointer;
  }
  .agenda-mobile-navbar-link--active,
  .agenda-mobile-navbar-link:hover {
    color: var(--color-black);
    font-weight: 500;
    border-bottom: 1px solid var(--color-black);
  }
  .feature-img-title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
  }
  .reserve-grid {
    grid-template-columns: 1fr;
  }
  .event-desc {
    gap: 2.5rem;
  }
  .event-desc .join {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.5rem;
  }
}/*# sourceMappingURL=main.css.map */