:root {

  /* ----------------------------------------------------------
     CORE FONT SYSTEM
     ---------------------------------------------------------- */

  --font-main:
    "Tempus Sans ITC",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;

  --font-mono:
    "JetBrains Mono",
    "Courier New",
    monospace;


  /* ----------------------------------------------------------
     COLORS
     ---------------------------------------------------------- */

  --accent: #2c4c3b;
  --accent-light: #aadf8e;
  --accent-hover: #c7f5ac;

   --bg-color: #000000;
  --bg-secondary: #111111;

  --text-main: #24201b;
  --text-muted: #4f453a;

  --border-color:
    rgba(44, 76, 59, 0.12);


  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */

  --transition-speed: 0.35s;


  /* ----------------------------------------------------------
     MASTER TYPOGRAPHY
     ---------------------------------------------------------- */

  --title-h1-size:
    clamp(
      2rem,
      5vw,
      3.9rem
    );

  --title-h2-size:
    clamp(
      1.15rem,
      1.9vw,
      1.75rem
    );

  --title-h3-size:
    clamp(
      1rem,
      1.55vw,
      1.45rem
    );

  --body-p-size:
    clamp(
      1rem,
      1.25vw,
      1.18rem
    );

  --link-a-size:
    clamp(
      0.9rem,
      1.05vw,
      1.05rem
    );

  --micro-text-size:
    clamp(
      0.68rem,
      0.82vw,
      0.86rem
    );

  --label-text-size:
    clamp(
      0.72rem,
      0.9vw,
      0.92rem
    );


  /* ----------------------------------------------------------
     FLUID SECTION SPACING
     ---------------------------------------------------------- */

  --section-margin:
    clamp(
      90px,
      12vw,
      220px
    );

  --section-padding:
    clamp(
      70px,
      10vw,
      170px
    );

  --feature-section-margin:
    clamp(
      120px,
      16vw,
      300px
    );


  /* ----------------------------------------------------------
     CONTENT WIDTH
     ---------------------------------------------------------- */

  --content-width:
    min(
      92vw,
      1400px
    );


  /* ----------------------------------------------------------
     FLUID GAPS
     ---------------------------------------------------------- */

  --section-gap:
    clamp(
      35px,
      4vw,
      70px
    );

  --card-gap:
    clamp(
      18px,
      2.5vw,
      36px
    );


  /* ----------------------------------------------------------
     CARD IMAGE
     ---------------------------------------------------------- */

  --card-image-height:
    clamp(
      190px,
      20vw,
      280px
    );
}


/* ============================================================
   DARK MODE
   ============================================================ */

body.dark {

  --bg-color: #111111;
  --bg-secondary: #1a1a1a;

  --text-main: #f5f5f5;
  --text-muted: #b0b0b0;

  --border-color:
    rgba(255, 255, 255, 0.06);
}


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

html,
body {

  margin: 0;
  padding: 0;

  width: 100%;

  overflow-x: hidden;

  font-family:
    var(--font-main);

  background:
    var(--bg-color);

  color:
    var(--text-main);

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;

  scroll-behavior:
    smooth;

  transition:
    background-color
    var(--transition-speed)
    ease,

    color
    var(--transition-speed)
    ease;
}


*,
*::before,
*::after {

  box-sizing:
    border-box;
}


img,
video {

  max-width: 100%;
}


button,
a {

  -webkit-tap-highlight-color:
    transparent;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes heroEntrance {

  from {

    opacity: 0;

    transform:
      translateY(30px);

    filter:
      blur(4px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);

    filter:
      blur(0);
  }
}


@keyframes themeBreath {

  0%,
  100% {

    transform:
      translateY(0)
      scale(1);

    opacity:
      0.85;
  }

  50% {

    transform:
      translateY(-4px)
      scale(1.12);

    opacity:
      1;
  }
}


/* ============================================================
   GLOBAL TEXT VISIBILITY
   ============================================================ */

p,
.section p,
.stories-heading p,
.map-subtext,
#welcome p,
#cta p,
#storiesContainer .story-card p,
.traditions-heading p {

  font-size:
    var(--body-p-size) !important;

  line-height:
    clamp(
      1.65,
      1.75,
      1.9
    );

  letter-spacing:
    clamp(
      0.25px,
      0.08vw,
      1.2px
    );

  color:
    rgba(255, 255, 255, 0.82) !important;

  font-weight:
    400;

  text-rendering:
    optimizeLegibility;
}


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

h2,
.section h2,
.stories-heading h2,
.map-session-box h2,
#cta h2 {

  font-family:
    var(--font-main) !important;

  font-size:
    var(--title-h2-size) !important;

  line-height:
    1.2;

  margin-top:
    0;

  margin-bottom:
    clamp(
      18px,
      2vw,
      30px
    );

  color:
     #aadf8e;

  letter-spacing:
    clamp(
      1.5px,
      0.18vw,
      3px
    );

  text-transform:
    uppercase;

  font-weight:
    300;

  text-shadow:
    0 0 14px
    rgba(255, 255, 255, 0.12);
}


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

h3,
.card h3,
.story-card h3 {

  font-size:
    var(--title-h3-size) !important;

  line-height:
    1.3;

  color:
    rgba(255, 255, 255, 0.9) !important;

  font-weight:
    400;

  letter-spacing:
    clamp(
      0.5px,
      0.1vw,
      1.5px
    );

  text-rendering:
    optimizeLegibility;
}


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

a.story-link,
.story-link,
#cta button {

  font-size:
    var(--link-a-size) !important;

  line-height:
    1.4;

  letter-spacing:
    clamp(
      0.8px,
      0.12vw,
      1.8px
    );

  font-weight:
    400;
}


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

.hero-section {

  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3)
    ),
    var(--page-hero);

  background-size:
    cover;

  background-position:
    center;

  background-repeat:
    no-repeat;

  height:
    clamp(
      420px,
      60vh,
      760px
    );
}


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

.hero {

  background:
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    var(--hero-image)
    no-repeat
    center center /
    cover;

  min-height:
    clamp(
      420px,
      60vh,
      760px
    );

  height:
    auto;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  color:
    white;

  text-shadow:
    none;

  padding:
    clamp(
      90px,
      12vw,
      200px
    )
    clamp(
      20px,
      5vw,
      60px
    );

  text-align:
    center;

  position:
    relative;

  overflow:
    hidden;
}


.hero-content {

  width:
    min(
      100%,
      900px
    );

  max-width:
    900px;

  margin:
    auto;

  animation:
    fadeInDown
    1s
    ease-out;

  transition:
    transform
    0.6s
    ease;
}


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

.hero h1 {

  font-size:
    var(--title-h1-size) !important;

  line-height:
    1.15;

  margin:
    0 0
    clamp(
      22px,
      3vw,
      32px
    );

  font-family:
    var(--font-main);

  color:
    #ffffff;

  cursor:
    default;

  display:
    inline-block;

  position:
    relative;

  animation:
    heroEntrance
    4s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    )
    forwards;

  opacity:
    0;
}


.hero-content:hover h1 {

  color:
    #aadf8e;

  transform:
    translateY(-10px)
    scale(1.06);

  text-shadow:
    1px 1px 0 #2a2a2a,
    -1px -1px 0 #4a4a4a,
    0 0 12px
    rgba(170, 223, 142, 0.55),
    0 8px 25px
    rgba(0, 0, 0, 0.45);
}


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

.hero p {

  font-size:
    clamp(
      1rem,
      1.35vw,
      1.2rem
    );

  line-height:
    clamp(
      1.65,
      1.75,
      1.9
    );

  width:
    min(
      100%,
      700px
    );

  margin:
    0 auto;

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

  letter-spacing:
    0.02em;

  transition:
    transform
    0.8s
    cubic-bezier(
      0.19,
      1,
      0.22,
      1
    ),

    color
    0.5s
    ease,

    letter-spacing
    0.5s
    ease;
}


.hero:hover p {

  color:
    #f2ffe8;

  transform:
    translateY(-2px);

  letter-spacing:
    0.025em;

  text-shadow:
    0 0 6px
    rgba(
      220,
      255,
      200,
      0.18
    );
}


/* ============================================================
   MASTER SECTION
   ============================================================ */

.section {

  position:
    relative;

  width:
    100%;

  box-sizing:
    border-box;

  z-index:
    2;

  padding:
    var(--section-padding)
    clamp(
      16px,
      3vw,
      40px
    );

  margin-top:
    var(--section-margin);

  margin-bottom:
    var(--section-margin);

  opacity:
    0;

  transform:
    translateY(
      clamp(
        18px,
        3vw,
        40px
      )
    )
    scale(0.99);

  transition:
    opacity
    1.2s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),

    transform
    1.2s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );

  will-change:
    transform,
    opacity;
}


.section-container {

  width:
    var(--content-width);

  margin-left:
    auto;

  margin-right:
    auto;

  box-sizing:
    border-box;
}

/* =========================================================
   LIVING TRADITIONS
   GENERAL SECTION + CINEMATIC SPLIT PANE
   ========================================================= */

/*
   The section itself now uses the normal global:
   .section
   .section-container

   The CSS below controls ONLY the Tradition component
   inside the general section.
*/


/* ---------------------------------------------------------
   CINEMATIC SPLIT PANE
   --------------------------------------------------------- */

#traditions .split-pane-wrapper {
  position: relative;
  width: 100%;
  min-height: clamp(500px, 65vh, 760px);

  display: flex;
  flex-direction: row;

  overflow: hidden;
  min-width: 0;

  background: transparent;
}


/* ---------------------------------------------------------
   LEFT PANE
   --------------------------------------------------------- */

#traditions .pane-left {
  position: relative;

  flex: 0 0 43%;
  width: 43%;
  min-width: 0;

  padding:
    clamp(28px, 4vw, 70px)
    clamp(22px, 4vw, 65px);

  display: flex;
  flex-direction: column;
  justify-content: center;

  box-sizing: border-box;

  background: transparent !important;

  overflow-wrap: break-word;
}


/* ---------------------------------------------------------
   RIGHT PANE
   --------------------------------------------------------- */

#traditions .pane-right {
  position: relative;

  flex: 1 1 57%;
  width: 57%;
  min-width: 0;
  min-height: 100%;

  background: transparent !important;

  overflow: hidden;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

#traditions .traditions-heading {
  text-align: left;

  margin:
    0 0
    clamp(22px, 3vw, 42px);

  width: 100%;
  max-width: clamp(420px, 38vw, 620px);
}


/* ---------------------------------------------------------
   HERITAGE COLLECTION LABEL
   --------------------------------------------------------- */

#traditions .traditions-heading span {
  display: block;

  margin-bottom:
    clamp(7px, 0.8vw, 11px);

  color: #7cc96d;

  letter-spacing:
    clamp(2px, 0.35vw, 4px);

  font-size:
    clamp(0.65rem, 0.72vw, 0.78rem);

  line-height: 1.3;
  font-weight: 400;
}


/* ---------------------------------------------------------
   MAIN HEADING
   --------------------------------------------------------- */

#traditions .traditions-heading h2 {
  margin:
    0 0
    clamp(12px, 1.4vw, 20px);

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

  font-size:
    clamp(1.35rem, 2.5vw, 2.35rem);

  line-height: 1.15;
  font-weight: 100;

  letter-spacing:
    clamp(0.5px, 0.12vw, 2px);

  text-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.6);
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

#traditions .traditions-heading p {
  margin: 0;

  width: 100%;
  max-width:
    clamp(360px, 35vw, 560px);

  color:
    rgba(255, 255, 255, 0.9) !important;

  font-size:
    clamp(1rem, 1.15vw, 1.12rem) !important;

  line-height: 1.75;
  font-weight: 300;

  letter-spacing:
    clamp(0.01em, 0.025vw, 0.025em);
}


/* ---------------------------------------------------------
   TRADITIONS MENU
   --------------------------------------------------------- */

#traditions .traditions-menu {
  display: flex;
  flex-direction: column;

  gap:
    clamp(5px, 0.7vw, 12px);

  width: 100%;
  max-width:
    clamp(360px, 35vw, 600px);
}


/* ---------------------------------------------------------
   MENU ITEM
   --------------------------------------------------------- */

#traditions .traditions-menu .menu-item {
  width: 100%;
  min-width: 0;

  box-sizing: border-box;

  padding:
    clamp(10px, 1.1vw, 16px)
    0 !important;

  background:
    transparent !important;

  border:
    none !important;

  border-radius:
    0 !important;

  text-align:
    left !important;

  color:
    rgba(255, 255, 255, 0.7) !important;

  font-size:
    clamp(0.88rem, 1.05vw, 1.02rem);

  line-height: 1.4;
  font-weight: 300;

  letter-spacing:
    clamp(0.04em, 0.08vw, 0.08em);

  cursor: pointer;

  display: flex;
  align-items: center;

  gap:
    clamp(9px, 1.2vw, 15px);

  transition:
    color 0.4s ease,
    transform 0.4s ease;

  overflow-wrap: break-word;
  white-space: normal;
}


/* ---------------------------------------------------------
   MENU NUMBER
   --------------------------------------------------------- */

#traditions .traditions-menu .menu-item .menu-number {
  flex: 0 0 auto;

  font-size:
    clamp(0.7rem, 0.85vw, 0.82rem);

  line-height: 1;

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

  font-weight: 300;

  min-width:
    clamp(20px, 2vw, 30px);
}


/* ---------------------------------------------------------
   HOVER / ACTIVE
   --------------------------------------------------------- */

#traditions .traditions-menu .menu-item:hover,
#traditions .traditions-menu .menu-item.active {
  color:
    #7cc96d !important;

  transform:
    translateX(
      clamp(4px, 0.7vw, 8px)
    );
}


#traditions .traditions-menu .menu-item:hover .menu-number,
#traditions .traditions-menu .menu-item.active .menu-number {
  color:
    #7cc96d;
}


/* ---------------------------------------------------------
   IMAGE SCREEN
   --------------------------------------------------------- */

#traditions .pane-screen {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition:
    opacity 0.8s ease-in-out;

  animation:
    slowZoom
    28s
    infinite
    alternate
    ease-in-out;

  filter:
    contrast(1.05)
    brightness(0.88)
    saturate(0.95);

  will-change: transform;
}


/* ---------------------------------------------------------
   IMAGE FADE
   --------------------------------------------------------- */

#traditions .pane-screen.fade {
  opacity: 0.1;
}


/* ---------------------------------------------------------
   CINEMATIC ZOOM
   --------------------------------------------------------- */

@keyframes slowZoom {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.08);
  }
}


/* ---------------------------------------------------------
   REMOVE UNWANTED VISUAL LAYERS
   --------------------------------------------------------- */

#traditions::before,
#traditions::after,
#traditions .split-pane-wrapper::before,
#traditions .split-pane-wrapper::after {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {

  #traditions .split-pane-wrapper {
    flex-direction: column;
    min-height: auto;
  }

  #traditions .pane-left {
    width: 100%;
    flex: none;

    padding:
      clamp(28px, 6vw, 55px)
      clamp(20px, 5vw, 45px);
  }

  #traditions .pane-right {
    width: 100%;
    flex: none;

    min-height:
      clamp(300px, 55vw, 520px);
  }

  #traditions .traditions-heading {
    max-width: 100%;
  }

  #traditions .traditions-heading p {
    max-width: 100%;
  }

  #traditions .traditions-menu {
    max-width: 100%;
  }
}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

  #traditions .pane-left {
    padding:
      30px 20px 35px;
  }

  #traditions .pane-right {
    min-height: 300px;
  }

  #traditions .traditions-heading {
    margin-bottom: 25px;
  }

  #traditions .traditions-heading h2 {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }

  #traditions .traditions-heading p {
    font-size: 0.95rem !important;
    line-height: 1.65;
  }

  #traditions .traditions-menu .menu-item {
    padding:
      9px 0 !important;
  }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  #traditions .pane-screen,
  #traditions .traditions-menu .menu-item {
    transition: none !important;
    animation: none !important;
  }
}



.section.in-view {

  opacity:
    1;

  transform:
    translateY(0)
    scale(1);
}


.section + .section {

  margin-top:
    clamp(
      90px,
      13vw,
      260px
    );
}


.etsako-hero + .section {

  margin-top:
    clamp(
      70px,
      9vw,
      150px
    );
}


#traditions,
#music,
#voices,
#our-pride-showcase,
#cta,
.map-session-box {

  margin-top:
    var(--feature-section-margin);

  margin-bottom:
    var(--feature-section-margin);
}


.section:hover h2 {

  color:
    rgba(
      255,
      255,
      255,
      1
    ) !important;
}


/* ============================================================
   WELCOME
   ============================================================ */

#welcome p {

  width:
    100%;

  max-width:
    clamp(
      650px,
      62vw,
      900px
    );
}


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

.grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(
          100%,
          250px
        ),
        1fr
      )
    );

  gap:
    var(--card-gap);

  width:
    100%;
}


/* ============================================================
   DISCOVER CARD
   ============================================================ */

.card {

  position:
    relative;

  min-width:
    0;

  overflow:
    hidden;

  border-radius:
    clamp(
      8px,
      1vw,
      14px
    );

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

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

  backdrop-filter:
    blur(8px);

  transition:
    transform
    0.5s
    ease,

    border-color
    0.5s
    ease;
}


.card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(
      170,
      223,
      142,
      0.3
    );
}


.card img {

  display:
    block;

  width:
    100%;

  height:
    var(--card-image-height);

  object-fit:
    cover;

  filter:
    brightness(0.72)
    contrast(0.95);

  transition:
    filter
    0.5s
    ease,

    transform
    0.5s
    ease;
}


.card:hover img {

  filter:
    brightness(0.9)
    contrast(1);

  transform:
    scale(1.03);
}


.card h3 {

  position:
    absolute;

  left:
    clamp(
      14px,
      1.5vw,
      22px
    );

  right:
    clamp(
      14px,
      1.5vw,
      22px
    );

  bottom:
    clamp(
      14px,
      1.5vw,
      22px
    );

  margin:
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.95
    ) !important;

  font-size:
    clamp(
      1rem,
      1.35vw,
      1.3rem
    ) !important;

  font-weight:
    400;

  line-height:
    1.25;

  letter-spacing:
    clamp(
      0.5px,
      0.1vw,
      1.5px
    );

  text-shadow:
    0 2px 10px
    rgba(
      0,
      0,
      0,
      0.95
    );
}


/* ============================================================
   STORIES
   ============================================================ */

#stories {

  width:
    100%;
}


.stories-heading {

  width:
    100%;

  max-width:
    clamp(
      650px,
      70vw,
      900px
    );

  margin:
    0 auto
    clamp(
      40px,
      6vw,
      80px
    );

  text-align:
    center;
}


.stories-kicker {

  display:
    block;

  margin-bottom:
    clamp(
      10px,
      1vw,
      16px
    );

  font-family:
    monospace;

  font-size:
    var(--label-text-size);

  font-weight:
    400;

  letter-spacing:
    clamp(
      2px,
      0.3vw,
      4px
    );

  color:
    rgba(
      170,
      223,
      142,
      0.85
    );
}


#storiesContainer {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(
          100%,
          280px
        ),
        1fr
      )
    );

  gap:
    clamp(
      35px,
      4vw,
      65px
    );

  width:
    100%;
}


#storiesContainer .story-card {

  position:
    relative;

  min-width:
    0;

  padding:
    0;

  background:
    transparent;

  border:
    none;

  border-radius:
    0;

  overflow:
    visible;

  box-shadow:
    none;

  transition:
    transform
    0.5s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}


#storiesContainer .story-card:hover {

  transform:
    translateY(-5px);
}


#storiesContainer .story-image {

  position:
    relative;

  width:
    100%;

  aspect-ratio:
    4 / 3;

  overflow:
    hidden;

  border-radius:
    clamp(
      6px,
      0.8vw,
      10px
    );

  background:
    rgba(
      255,
      255,
      255,
      0.03
    );
}


#storiesContainer .story-image img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  filter:
    brightness(0.9)
    contrast(1.02)
    saturate(0.95);

  transition:
    transform
    0.8s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),

    filter
    0.8s
    ease;
}


#storiesContainer .story-card:hover img {

  transform:
    scale(1.045);

  filter:
    brightness(1)
    contrast(1.02)
    saturate(1);
}


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

#storiesContainer .story-number {

  position:
    absolute;

  top:
    clamp(
      14px,
      1.5vw,
      20px
    );

  left:
    clamp(
      14px,
      1.5vw,
      20px
    );

  z-index:
    10;

  display:
    block;

  font-family:
    monospace;

  font-size:
    clamp(
      0.82rem,
      1vw,
      1rem
    );

  font-weight:
    400;

  letter-spacing:
    2px;

  line-height:
    1;

  color:
    rgba(
      170,
      223,
      142,
      0.9
    );

  text-shadow:
    0 2px 8px
    rgba(
      0,
      0,
      0,
      0.95
    );

  pointer-events:
    none;
}


/* ============================================================
   HERITAGE NUMBER
   ============================================================ */

#heritage .story-card .story-number {

  position:
    relative;

  top:
    auto;

  left:
    auto;

  display:
    inline-block;

  font-family:
    monospace;

  font-size:
    clamp(
      0.8rem,
      1vw,
      1rem
    );

  font-weight:
    400;

  letter-spacing:
    2px;

  line-height:
    1;

  color:
    rgba(
      170,
      223,
      142,
      0.9
    );

  margin-right:
    clamp(
      8px,
      1vw,
      12px
    );

  vertical-align:
    baseline;
}


#heritage .story-card h3 {

  display:
    inline;

  margin:
    0;
}


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

#storiesContainer .story-content {

  padding-top:
    clamp(
      20px,
      2vw,
      28px
    );
}


#storiesContainer .story-card h3 {

  position:
    static;

  margin:
    0 0
    clamp(
      10px,
      1vw,
      14px
    );

  font-family:
    var(--font-main);

  font-size:
    clamp(
      1rem,
      1.4vw,
      1.35rem
    ) !important;

  font-weight:
    400;

  line-height:
    1.35;

  letter-spacing:
    clamp(
      0.5px,
      0.12vw,
      1.5px
    );

  color:
    rgba(
      255,
      255,
      255,
      0.95
    ) !important;
}


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

#storiesContainer .story-link {

  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    clamp(
      7px,
      0.7vw,
      10px
    );

  color:
    rgba(
      170,
      223,
      142,
      0.9
    );

  font-family:
    "Courier New",
    monospace;

  font-size:
    clamp(
      0.82rem,
      0.95vw,
      1rem
    ) !important;

  font-weight:
    400;

  line-height:
    1.4;

  letter-spacing:
    clamp(
      0.8px,
      0.12vw,
      1.5px
    );

  text-decoration:
    none;

  transition:
    color
    0.3s
    ease,

    gap
    0.3s
    ease;
}


#storiesContainer .story-link:hover {

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

  gap:
    clamp(
      10px,
      1vw,
      14px
    );
}


#storiesContainer .story-link span {

  transition:
    transform
    0.3s
    ease;
}


#storiesContainer .story-link:hover span {

  transform:
    translateX(3px);
}


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

#galleryContainer {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(
          100%,
          230px
        ),
        1fr
      )
    );

  gap:
    clamp(
      20px,
      2.5vw,
      34px
    );
}


.gallery-item {

  height:
    clamp(
      190px,
      24vw,
      300px
    );

  overflow:
    hidden;

  border-radius:
    clamp(
      8px,
      1vw,
      12px
    );

  position:
    relative;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.06
    );
}


.gallery-item img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  filter:
    brightness(0.75)
    contrast(0.95);

  transition:
    transform
    0.6s
    ease,

    filter
    0.6s
    ease;
}


.gallery-item:hover img {

  transform:
    scale(1.05);

  filter:
    brightness(0.9)
    contrast(1);
}


/* ============================================================
   VOICES
   ============================================================ */

#voices {

  width:
    100%;

  max-width:
    100%;

  margin-inline:
    auto;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


#voiceQuote {

  display:
    block;

  width:
    min(
      100%,
      1000px
    );

  max-width:
    1000px;

  margin:
    0 auto
    clamp(
      24px,
      3vw,
      40px
    );

  padding-inline:
    clamp(
      14px,
      2vw,
      30px
    );

  box-sizing:
    border-box;

  font-size:
    clamp(
      1.25rem,
      2vw,
      1.8rem
    ) !important;

  line-height:
    1.75;

  text-align:
    center;

  font-style:
    italic;

  font-weight:
    400;

  letter-spacing:
    clamp(
      0.3px,
      0.08vw,
      1px
    );

  color:
    rgba(
      255,
      255,
      255,
      0.95
    ) !important;
}


#voiceAuthor {

  display:
    block;

  width:
    100%;

  margin-inline:
    auto;

  text-align:
    center;

  font-size:
    clamp(
      1rem,
      1.5vw,
      1.35rem
    ) !important;

  line-height:
    1.5;

  font-weight:
    500;

  letter-spacing:
    clamp(
      1.5px,
      0.3vw,
      4px
    );

  text-transform:
    uppercase;

  color:
    rgba(
      212,
      175,
      55,
      0.95
    ) !important;
}


/* ============================================================
   MUSIC
   ============================================================ */

#music {

  position:
    relative;

  padding:
    clamp(
      80px,
      10vw,
      150px
    )
    clamp(
      16px,
      3vw,
      40px
    );

  text-align:
    center;

  background:
    transparent;
}


.music-tag {

  font-family:
    var(--font-main);

  font-size:
    var(--label-text-size);

  font-weight:
    400;

  line-height:
    1.4;

  letter-spacing:
    clamp(
      2px,
      0.35vw,
      5px
    );

  text-transform:
    uppercase;

  color:
    rgba(
      212,
      175,
      55,
      0.9
    );

  display:
    inline-block;
}


.music-title {

  font-family:
    var(--font-main);

  font-size:
    clamp(
      1rem,
      1.7vw,
      1.5rem
    ) !important;

  font-weight:
    400;

  line-height:
    1.3;

  letter-spacing:
    clamp(
      2px,
      0.3vw,
      4px
    );

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

  margin:
    clamp(
      12px,
      1.5vw,
      20px
    )
    0;
}


.music-subtitle {

  font-family:
    monospace;

  font-size:
    clamp(
      0.78rem,
      0.95vw,
      0.95rem
    ) !important;

  font-weight:
    400;

  line-height:
    1.7;

  letter-spacing:
    clamp(
      0.8px,
      0.15vw,
      2px
    );

  color:
    rgba(
      255,
      255,
      255,
      0.72
    ) !important;

  margin-bottom:
    clamp(
      35px,
      4vw,
      55px
    );
}


.music-player {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    clamp(
      18px,
      2vw,
      28px
    );

  background:
    transparent;

  margin:
    0 auto;
}


.music-status {

  font-family:
    monospace;

  font-size:
    var(--micro-text-size);

  line-height:
    1.4;

  letter-spacing:
    clamp(
      2px,
      0.3vw,
      4px
    );

  color:
    rgba(
      212,
      175,
      55,
      0.8
    );

  text-transform:
    uppercase;
}


.music-track-title {

  font-family:
    var(--font-main);

  font-size:
    clamp(
      1rem,
      1.45vw,
      1.3rem
    ) !important;

  font-weight:
    400;

  line-height:
    1.4;

  letter-spacing:
    clamp(
      1px,
      0.15vw,
      2px
    );

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

  transition:
    color
    0.5s
    ease,

    letter-spacing
    0.5s
    ease;
}


#music:hover .music-track-title {

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

  letter-spacing:
    clamp(
      1.5px,
      0.2vw,
      2.5px
    );
}


.music-subtext {

  font-family:
    monospace;

  font-size:
    var(--micro-text-size);

  font-weight:
    400;

  line-height:
    1.6;

  letter-spacing:
    clamp(
      0.5px,
      0.12vw,
      1.5px
    );

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


.music-controls {

  display:
    flex;

  gap:
    clamp(
      28px,
      3vw,
      45px
    );

  opacity:
    0.7;

  transform:
    translateY(4px);

  transition:
    opacity
    0.5s
    ease,

    transform
    0.5s
    ease;
}


#music:hover .music-controls,
#music.ui-reveal .music-controls {

  opacity:
    1;

  transform:
    translateY(0);
}


.music-controls button {

  background:
    none;

  border:
    none;

  padding:
    0;

  font-family:
    monospace;

  font-size:
    clamp(
      0.82rem,
      1vw,
      1rem
    );

  font-weight:
    400;

  letter-spacing:
    1px;

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

  cursor:
    pointer;

  position:
    relative;

  transition:
    color
    0.3s
    ease;
}


.music-controls button:hover {

  color:
    rgba(
      243,
      229,
      171,
      1
    );
}


.progress-track {

  width:
    clamp(
      140px,
      14vw,
      220px
    );

  height:
    clamp(
      2px,
      0.15vw,
      3px
    );

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

  position:
    relative;
}


.progress-fill {

  height:
    100%;

  width:
    0%;

  background:
    linear-gradient(
      90deg,
      rgba(
        170,
        124,
        17,
        0.8
      ),
      rgba(
        243,
        229,
        171,
        1
      )
    );

  position:
    relative;
}


/* ============================================================
   AUDIO WAVE
   ============================================================ */

.audio-wave {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    clamp(
      3px,
      0.35vw,
      6px
    );

  min-height:
    clamp(
      28px,
      4vw,
      50px
    );

  margin:
    0 auto
    clamp(
      25px,
      3vw,
      40px
    );
}


.audio-wave span {

  width:
    clamp(
      2px,
      0.25vw,
      4px
    );

  height:
    clamp(
      15px,
      2.5vw,
      32px
    );

  border-radius:
    999px;

  background:
    rgba(
      212,
      175,
      55,
      0.65
    );
}


/* ============================================================
   MAP
   ============================================================ */

.map-session-box {

  width:
    100%;

  padding:
    clamp(
      70px,
      9vw,
      130px
    )
    clamp(
      16px,
      3vw,
      40px
    );

  text-align:
    center;

  position:
    relative;

  font-family:
    var(--font-mono);

  box-sizing:
    border-box;
}


.map-tagline {

  display:
    block;

  margin-bottom:
    clamp(
      8px,
      1vw,
      14px
    );

  font-size:
    var(--label-text-size);

  font-weight:
    400;

  line-height:
    1.5;

  text-transform:
    uppercase;

  letter-spacing:
    clamp(
      2px,
      0.3vw,
      4px
    );

  color:
    rgba(
      170,
      223,
      142,
      0.9
    );
}


.map-subtext {

  width:
    100%;

  max-width:
    clamp(
      650px,
      65vw,
      900px
    );

  margin:
    0 auto
    clamp(
      25px,
      3vw,
      40px
    );
}


.map-media-wrapper {

  position:
    relative;

  width:
    min(
      100%,
      650px
    );

  margin:
    0 auto;

  border-radius:
    clamp(
      4px,
      0.6vw,
      8px
    );

  overflow:
    hidden;

  background:
    rgba(
      4,
      7,
      5,
      0.4
    );

  border:
    1px solid
    rgba(
      170,
      223,
      142,
      0.15
    );

  backdrop-filter:
    blur(8px);

  transition:
    border-color
    0.6s
    ease,

    transform
    0.6s
    ease;
}


.map-media-wrapper:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(
      170,
      223,
      142,
      0.4
    );
}


.map-media-wrapper .map {

  display:
    block;

  width:
    100%;

  height:
    auto;

  object-fit:
    contain;

  opacity:
    0.82;

  filter:
    brightness(0.95)
    contrast(1);

  transition:
    opacity
    0.6s
    ease,

    filter
    0.6s
    ease;

  animation:
    mapInternalFloat
    8s
    ease-in-out
    infinite
    alternate;
}


.map-media-wrapper:hover .map {

  opacity:
    1;

  filter:
    brightness(1)
    contrast(1);
}


@keyframes mapInternalFloat {

  0% {

    transform:
      scale(1)
      translateY(0);
  }

  100% {

    transform:
      scale(1.015)
      translateY(-3px);
  }
}


/* ============================================================
   MAP SCANNER
   ============================================================ */

.map-scanner-beam {

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    clamp(
      2px,
      0.2vw,
      3px
    );

  background:
    linear-gradient(
      90deg,
      transparent 10%,
      rgba(
        170,
        223,
        142,
        0.65
      ) 50%,
      transparent 90%
    );

  z-index:
    5;

  opacity:
    0;

  pointer-events:
    none;
}


.map-media-wrapper:hover
.map-scanner-beam {

  opacity:
    1;

  animation:
    scanCycle
    3.5s
    ease-in-out
    infinite;
}


@keyframes scanCycle {

  0% {

    top:
      0%;

    opacity:
      0;
  }

  10%,
  90% {

    opacity:
      0.8;
  }

  100% {

    top:
      100%;

    opacity:
      0;
  }
}


/* ============================================================
   OUR PRIDE — MASTER SHOWCASE
   ============================================================ */

#our-pride-showcase {

  position:
    relative;

  width:
    min(
      92%,
      clamp(
        520px,
        48vw,
        680px
      )
    );

  max-width:
    680px;

  margin:
    clamp(
      80px,
      10vw,
      160px
    )
    auto;

  background:
    transparent;

  display:
    flex;

  flex-direction:
    column;

  height:
    auto;

  box-sizing:
    border-box;
}


/* ============================================================
   OUR PRIDE HEADER
   ============================================================ */

.showcase-header {

  width:
    100%;

  padding:
    clamp(
      10px,
      1.4vw,
      16px
    )
    clamp(
      4px,
      0.8vw,
      10px
    )
    clamp(
      12px,
      1.6vw,
      18px
    );

  box-sizing:
    border-box;
}


.showcase-header h3,
#our-pride-showcase
.showcase-header h3 {

  font-family:
    var(--font-main);

  font-size:
    clamp(
      1rem,
      1.4vw,
      1.35rem
    ) !important;

  font-weight:
    400;

  letter-spacing:
    clamp(
      1.5px,
      0.25vw,
      3px
    );

  margin:
    0;

  line-height:
    1.3;

  color:
    rgba(
      255,
      255,
      255,
      0.95
    ) !important;
}


/* ============================================================
   CINEMATIC SCREEN
   ============================================================ */

.slideshow-screen {

  position:
    relative;

  width:
    100%;

  max-width:
    none;

  aspect-ratio:
    1.45 / 1;

  min-height:
    clamp(
      250px,
      42vw,
      620px
    );

  max-height:
    650px;

  margin:
    0 auto;

  overflow:
    hidden;

  box-sizing:
    border-box;

  border-radius:
    clamp(
      8px,
      1.5vw,
      14px
    );
}


/* ============================================================
   VIEWPORT
   ============================================================ */

.slides-viewport {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  z-index:
    1;

  overflow:
    hidden;

  border-radius:
    inherit;
}


/* ============================================================
   SLIDES
   ============================================================ */

.slide {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  background-size:
    cover;

  background-position:
    center center;

  background-repeat:
    no-repeat;

  opacity:
    0;

  transition:
    opacity
    1s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );

  filter:
    brightness(1)
    contrast(1);

  border-radius:
    inherit;
}


.slide.active {

  opacity:
    1;
}


/* ============================================================
   SHOWCASE CAPTION
   ============================================================ */

.slideshow-caption {

  position:
    absolute;

  bottom:
    clamp(
      14px,
      2vw,
      22px
    );

  left:
    clamp(
      14px,
      2vw,
      22px
    );

  z-index:
    10;

  max-width:
    calc(
      100% -
      clamp(
        28px,
        4vw,
        44px
      )
    );

  pointer-events:
    none;

  box-sizing:
    border-box;
}


#slide-name {

  margin:
    0;

  font-size:
    clamp(
      0.9rem,
      1.25vw,
      1.05rem
    );

  font-weight:
    400;

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

  letter-spacing:
    clamp(
      0.03em,
      0.08vw,
      0.07em
    );

  line-height:
    1.4;

  text-shadow:
    0 2px 8px
    rgba(
      0,
      0,
      0,
      0.95
    );
}


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

.showcase-footer {

  width:
    100%;

  padding:
    clamp(
      12px,
      1.7vw,
      18px
    )
    clamp(
      4px,
      0.8vw,
      10px
    )
    clamp(
      10px,
      1.5vw,
      16px
    );

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    clamp(
      14px,
      2vw,
      24px
    );

  box-sizing:
    border-box;
}


/* ============================================================
   META TAG
   ============================================================ */

.meta-tag {

  font-family:
    monospace;

  font-size:
    clamp(
      0.78rem,
      0.95vw,
      0.9rem
    );

  font-weight:
    400;

  letter-spacing:
    clamp(
      1px,
      0.2vw,
      2px
    );

  color:
    rgba(
      124,
      201,
      109,
      0.95
    );

  text-transform:
    uppercase;

  line-height:
    1.4;

  min-width:
    0;
}


/* ============================================================
   VENTURE LINK
   ============================================================ */

.venture-link {

  background:
    none !important;

  padding:
    0 0
    clamp(
      3px,
      0.4vw,
      5px
    )
    0 !important;

  border:
    none !important;

  border-bottom:
    1px dashed
    rgba(
      255,
      255,
      255,
      0.55
    ) !important;

  cursor:
    pointer;

  font-family:
    monospace;

  font-size:
    clamp(
      0.76rem,
      0.9vw,
      0.9rem
    );

  font-weight:
    400;

  color:
    rgba(
      255,
      255,
      255,
      0.95
    ) !important;

  letter-spacing:
    clamp(
      0.8px,
      0.15vw,
      1.5px
    );

  line-height:
    1.4;

  white-space:
    normal;

  text-align:
    right;

  transition:
    color
    0.3s
    ease,

    border-color
    0.3s
    ease;
}


.venture-link:hover {

  color:
    #7cc96d !important;

  border-bottom:
    1px solid
    #7cc96d !important;
}


/* ============================================================
   PORTAL OVERLAY
   ============================================================ */

.ad-portal-overlay {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  background:
    rgba(
      3,
      8,
      5,
      0.98
    );

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  z-index:
    20;

  transform:
    translateY(100%);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    transform
    0.5s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),

    opacity
    0.3s
    ease;

  padding:
    clamp(
      22px,
      3vw,
      34px
    )
    clamp(
      18px,
      3vw,
      28px
    )
    clamp(
      16px,
      2vw,
      22px
    );

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  box-sizing:
    border-box;

  overflow:
    hidden;
}


.ad-portal-overlay.open {

  transform:
    translateY(0);

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


/* ============================================================
   PORTAL CONTENT
   ============================================================ */

.portal-content {

  width:
    100%;

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-start;

  box-sizing:
    border-box;
}


.portal-text-group {

  margin-bottom:
    clamp(
      12px,
      1.6vw,
      18px
    );
}


.portal-close {

  position:
    absolute;

  top:
    clamp(
      10px,
      1.5vw,
      16px
    );

  right:
    clamp(
      14px,
      2.5vw,
      24px
    );

  background:
    none;

  border:
    none;

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

  font-family:
    monospace;

  font-size:
    clamp(
      0.72rem,
      0.8vw,
      0.85rem
    );

  font-weight:
    400;

  cursor:
    pointer;

  z-index:
    25;

  padding:
    5px;
}


.portal-tag {

  font-family:
    monospace;

  font-size:
    clamp(
      0.68rem,
      0.78vw,
      0.8rem
    );

  font-weight:
    400;

  letter-spacing:
    clamp(
      1.5px,
      0.25vw,
      2.5px
    );

  color:
    #7cc96d;

  display:
    block;

  margin-bottom:
    6px;

  line-height:
    1.4;
}


.portal-content h4 {

  font-family:
    "Cinzel",
    var(--font-main),
    serif;

  font-size:
    clamp(
      1rem,
      1.4vw,
      1.2rem
    );

  font-weight:
    400;

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

  margin:
    0 0 8px 0;

  letter-spacing:
    clamp(
      0.06em,
      0.12vw,
      0.1em
    );

  line-height:
    1.3;
}


.portal-pitch {

  font-size:
    clamp(
      0.82rem,
      0.95vw,
      0.95rem
    );

  line-height:
    1.6;

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

  margin:
    0 0
    clamp(
      12px,
      1.5vw,
      18px
    )
    0;
}


/* ============================================================
   PORTAL META GRID
   ============================================================ */

.portal-meta-grid {

  display:
    grid;

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

  gap:
    clamp(
      12px,
      2vw,
      22px
    );

  margin-bottom:
    clamp(
      14px,
      2vw,
      20px
    );

  width:
    100%;
}


.portal-meta-grid div {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  padding-bottom:
    clamp(
      5px,
      0.7vw,
      8px
    );

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


.portal-meta-grid .lbl {

  font-family:
    monospace;

  font-size:
    clamp(
      0.68rem,
      0.72vw,
      0.76rem
    );

  font-weight:
    400;

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

  line-height:
    1.4;
}


.portal-meta-grid .val {

  font-family:
    monospace;

  font-size:
    clamp(
      0.78rem,
      0.9vw,
      0.9rem
    );

  font-weight:
    400;

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

  overflow-wrap:
    anywhere;

  line-height:
    1.4;
}


/* ============================================================
   PORTAL ACTIONS
   ============================================================ */

.portal-actions {

  display:
    flex;

  flex-direction:
    column;

  gap:
    clamp(
      7px,
      1vw,
      10px
    );

  margin-top:
    auto;

  width:
    100%;
}


.action-btn {

  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  padding:
    clamp(
      9px,
      1.2vw,
      13px
    )
    clamp(
      12px,
      1.5vw,
      16px
    );

  border-radius:
    clamp(
      4px,
      0.8vw,
      7px
    );

  text-decoration:
    none;

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

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

  box-sizing:
    border-box;

  transition:
    background
    0.3s
    ease,

    border-color
    0.3s
    ease;
}


.action-btn span {

  font-family:
    monospace;

  font-size:
    clamp(
      0.66rem,
      0.72vw,
      0.76rem
    );

  font-weight:
    400;

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

  margin-bottom:
    3px;

  line-height:
    1.4;
}


.action-btn strong {

  font-size:
    clamp(
      0.82rem,
      0.95vw,
      0.95rem
    );

  font-weight:
    400;

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

  line-height:
    1.4;
}


.wa-btn {

  border-color:
    rgba(
      124,
      201,
      109,
      0.45
    );
}


.wa-btn strong {

  color:
    #7cc96d;
}


/* ============================================================
   HUD CORNERS
   ============================================================ */

.hud-corner {

  position:
    absolute;

  width:
    clamp(
      8px,
      1vw,
      12px
    );

  height:
    clamp(
      8px,
      1vw,
      12px
    );

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

  z-index:
    5;

  pointer-events:
    none;
}


.top-left {

  top:
    clamp(
      8px,
      1.2vw,
      14px
    );

  left:
    clamp(
      8px,
      1.2vw,
      14px
    );

  border-right:
    none;

  border-bottom:
    none;
}


.top-right {

  top:
    clamp(
      8px,
      1.2vw,
      14px
    );

  right:
    clamp(
      8px,
      1.2vw,
      14px
    );

  border-left:
    none;

  border-bottom:
    none;
}


.bottom-left {

  bottom:
    clamp(
      8px,
      1.2vw,
      14px
    );

  left:
    clamp(
      8px,
      1.2vw,
      14px
    );

  border-right:
    none;

  border-top:
    none;
}


.bottom-right {

  bottom:
    clamp(
      8px,
      1.2vw,
      14px
    );

  right:
    clamp(
      8px,
      1.2vw,
      14px
    );

  border-left:
    none;

  border-top:
    none;
}


/* ============================================================
   TELEMETRY
   ============================================================ */

.hud-telemetry {

  position:
    absolute;

  top:
    clamp(
      9px,
      1.2vw,
      14px
    );

  left:
    clamp(
      24px,
      3vw,
      34px
    );

  font-family:
    monospace;

  font-size:
    clamp(
      0.68rem,
      0.72vw,
      0.78rem
    );

  font-weight:
    400;

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

  z-index:
    5;

  white-space:
    nowrap;

  line-height:
    1.4;

  text-shadow:
    0 1px 5px
    rgba(
      0,
      0,
      0,
      0.9
    );
}


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

#cta {

  position:
    relative;

  padding:
    clamp(
      80px,
      10vw,
      150px
    )
    clamp(
      16px,
      3vw,
      40px
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  overflow:
    hidden;

  box-sizing:
    border-box;

  font-family:
    var(--font-mono);

  background:
    transparent;
}


.cta-content {

  position:
    relative;

  z-index:
    2;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  width:
    100%;

  max-width:
    clamp(
      650px,
      70vw,
      950px
    );
}


#cta p {

  margin:
    0 auto
    clamp(
      25px,
      3vw,
      40px
    );

  font-size:
    clamp(
      1rem,
      1.3vw,
      1.2rem
    ) !important;

  color:
    rgba(
      255,
      255,
      255,
      0.82
    ) !important;
}


.cta-link-wrapper {

  text-decoration:
    none;

  display:
    inline-block;
}


#cta button {

  background:
    transparent;

  font-size:
    clamp(
      0.82rem,
      0.95vw,
      1rem
    ) !important;

  font-weight:
    400;

  padding:
    clamp(
      12px,
      1.2vw,
      16px
    )
    clamp(
      24px,
      3vw,
      38px
    );

  letter-spacing:
    clamp(
      1.5px,
      0.25vw,
      3px
    );

  line-height:
    1.4;

  text-transform:
    uppercase;

  color:
    rgba(
      170,
      223,
      142,
      0.95
    );

  border:
    1px solid
    rgba(
      170,
      223,
      142,
      0.3
    );

  border-radius:
    2px;

  cursor:
    pointer;

  transition:
    color
    0.4s
    ease,

    border-color
    0.4s
    ease,

    background
    0.4s
    ease,

    letter-spacing
    0.4s
    ease;
}


#cta button:hover {

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

  border-color:
    rgba(
      170,
      223,
      142,
      0.7
    );

  background:
    rgba(
      170,
      223,
      142,
      0.05
    );

  letter-spacing:
    clamp(
      2px,
      0.3vw,
      4px
    );
}


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

footer {

  min-height:
    clamp(
      430px,
      45vw,
      620px
    );

  padding:
    clamp(
      50px,
      8vw,
      100px
    )
    clamp(
      20px,
      4vw,
      60px
    );

  margin-top:
    clamp(
      100px,
      14vw,
      180px
    );

  text-align:
    center;

  opacity:
    0.9;

  transition:
    opacity
    0.4s
    ease;
}


footer:hover {

  opacity:
    1;
}


footer img {

  width:
    clamp(
      55px,
      6vw,
      80px
    );

  height:
    auto;

  margin-bottom:
    clamp(
      12px,
      1.5vw,
      20px
    );

  filter:
    brightness(0.9);
}


/* ============================================================
   CONTENT CONTAINER
   ============================================================ */

.content-container {

  width:
    min(
      92%,
      1100px
    );

  max-width:
    1100px;

  margin:
    clamp(
      60px,
      10vw,
      120px
    )
    auto
    clamp(
      70px,
      10vw,
      140px
    );

  padding:
    0
    clamp(
      16px,
      3vw,
      40px
    );
}


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

.culture-section {

  margin-bottom:
    clamp(
      70px,
      9vw,
      120px
    );

  padding:
    clamp(
      24px,
      4vw,
      60px
    )
    0
    clamp(
      40px,
      5vw,
      60px
    );

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

  will-change:
    transform,
    opacity;

  opacity:
    1 !important;

  transform:
    none !important;

  transition:
    opacity
    0.9s
    cubic-bezier(
      0.215,
      0.61,
      0.355,
      1
    ),

    transform
    0.9s
    cubic-bezier(
      0.215,
      0.61,
      0.355,
      1
    );
}


body.js-ready
.culture-section {

  opacity:
    1 !important;

  transform:
    none !important;
}


.culture-section:last-of-type {

  border-bottom:
    none;

  margin-bottom:
    clamp(
      40px,
      5vw,
      80px
    );
}


.culture-section.is-visible {

  opacity:
    1;

  transform:
    translateY(0);
}


/* ============================================================
   CULTURE HEADING
   ============================================================ */

.culture-section h2 {

  font-family:
    var(--font-main);

  font-size:
    clamp(
      1.2rem,
      2.2vw,
      2rem
    ) !important;

  text-align:
    left;

  margin-bottom:
    clamp(
      24px,
      3vw,
      36px
    );

  position:
    relative;

  display:
    inline-block;

  cursor:
    pointer;

  color:
    #aadf8e;

  font-weight:
    100;

  line-height:
    1.25;

  text-shadow:
    1px 1px 0 #2a2a2a,
    -1px -1px 0 #4a4a4a,
    0 1px 1px
    rgba(
      255,
      255,
      255,
      0.25
    ),
    2px 2px 4px
    rgba(
      0,
      0,
      0,
      0.55
    ),
    0 0 6px
    rgba(
      170,
      223,
      142,
      0.35
    );

  transition:
    color
    var(--transition-speed)
    ease,

    text-shadow
    0.3s
    ease;
}


body.dark
.culture-section h2 {

  color:
    var(--accent-light);

  text-shadow:
    1px 1px 0 #111,
    -1px -1px 0 #222,
    0 1px 1px
    rgba(
      255,
      255,
      255,
      0.15
    ),
    2px 2px 5px
    rgba(
      0,
      0,
      0,
      0.75
    ),
    0 0 7px
    rgba(
      170,
      223,
      142,
      0.45
    );
}


.culture-section h2::after {

  content:
    "";

  position:
    absolute;

  width:
    100%;

  transform:
    scaleX(0);

  height:
    2px;

  bottom:
    -6px;

  left:
    0;

  background-color:
    var(--accent);

  transform-origin:
    bottom right;

  transition:
    transform
    0.4s
    cubic-bezier(
      0.86,
      0,
      0.07,
      1
    );
}


body.dark
.culture-section h2::after {

  background-color:
    var(--accent-light);
}


.culture-section h2:hover {

  color:
    var(--accent);

  text-shadow:
    1px 1px 0 #2a2a2a,
    -1px -1px 0 #4a4a4a,
    0 1px 1px
    rgba(
      255,
      255,
      255,
      0.3
    ),
    2px 2px 5px
    rgba(
      0,
      0,
      0,
      0.6
    ),
    0 0 8px
    rgba(
      44,
      76,
      59,
      0.45
    );
}


/* ============================================================
   CULTURE IMAGE
   ============================================================ */

.image-container {

  width:
    100%;

  border-radius:
    clamp(
      12px,
      1.5vw,
      20px
    );

  overflow:
    hidden;

  margin-bottom:
    clamp(
      28px,
      3.5vw,
      44px
    );

  box-shadow:
    0 12px 28px
    rgba(
      0,
      0,
      0,
      0.06
    );

  background-color:
    rgba(
      0,
      0,
      0,
      0.03
    );
}


.culture-section img {

  width:
    100%;

  height:
    auto;

  max-height:
    clamp(
      240px,
      32vw,
      460px
    );

  object-fit:
    cover;

  display:
    block;

  transform:
    scale(1.04);

  transition:
    transform
    1.2s
    ease;
}


.culture-section.is-visible
.image-container img {

  transform:
    scale(1);
}


/* ============================================================
   CULTURE PARAGRAPH
   ============================================================ */

.culture-section p {

  font-size:
    clamp(
      1rem,
      1.25vw,
      1.18rem
    ) !important;

  line-height:
    clamp(
      1.7,
      1.82,
      1.95
    );

  color:
    #433a31 !important;

  margin-bottom:
    clamp(
      24px,
      2.5vw,
      36px
    );

  font-weight:
    400;

  text-align:
    left;

  letter-spacing:
    0.01em;

  opacity:
    1 !important;

  transform:
    none !important;
}


.culture-section.is-visible p {

  opacity:
    1;

  transform:
    translateY(0);
}


.culture-section.is-visible
p:nth-of-type(1) {

  transition-delay:
    0.1s;
}


.culture-section.is-visible
p:nth-of-type(2) {

  transition-delay:
    0.2s;
}


.culture-section.is-visible
p:nth-of-type(3) {

  transition-delay:
    0.3s;
}


.culture-section.is-visible
p:nth-of-type(4) {

  transition-delay:
    0.4s;
}


/* ============================================================
   LEGACY GALLERY GRID
   ============================================================ */

.gallery-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(
          100%,
          260px
        ),
        1fr
      )
    );

  gap:
    clamp(
      14px,
      2vw,
      24px
    );

  padding:
    clamp(
      20px,
      3vw,
      30px
    )
    0;
}


.gallery-grid img {

  width:
    100%;

  height:
    clamp(
      180px,
      22vw,
      280px
    );

  object-fit:
    cover;

  display:
    block;

  border-radius:
    clamp(
      10px,
      1vw,
      14px
    );

  cursor:
    pointer;

  transition:
    transform
    0.4s
    ease,

    box-shadow
    0.4s
    ease;
}


.gallery-grid img:hover {

  transform:
    scale(1.04);

  box-shadow:
    0 12px 28px
    rgba(
      0,
      0,
      0,
      0.2
    );
}


/* ============================================================
   AUTO SLIDER
   ============================================================ */

.gallery-slider {

  overflow:
    hidden;

  width:
    100%;

  border-radius:
    clamp(
      12px,
      1.5vw,
      16px
    );

  margin:
    clamp(
      24px,
      3vw,
      32px
    )
    0;
}


.gallery-track {

  display:
    flex;

  gap:
    clamp(
      12px,
      1.5vw,
      16px
    );

  width:
    max-content;

  animation:
    scrollGallery
    60s
    linear
    infinite;
}


.gallery-track img {

  width:
    clamp(
      240px,
      26vw,
      340px
    );

  height:
    clamp(
      180px,
      20vw,
      240px
    );

  object-fit:
    cover;

  border-radius:
    clamp(
      10px,
      1vw,
      14px
    );

  flex-shrink:
    0;

  transition:
    transform
    0.4s
    ease;
}


.gallery-track img:hover {

  transform:
    scale(1.03);
}


@keyframes scrollGallery {

  from {

    transform:
      translateX(0);
  }

  to {

    transform:
      translateX(-50%);
  }
}


.gallery-slider:hover
.gallery-track {

  animation-play-state:
    paused;
}


/* ============================================================
   ACCESSIBILITY
   ------------------------------------------------------------
   This is intentionally the ONLY @media rule.
   It is not a viewport layout rule.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior:
      auto;
  }

  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

  .section,
  .section.in-view,
  .map-media-wrapper .map,
  .card,
  .card img,
  .story-card,
  .story-image img,
  .music-controls,
  .map-media-wrapper,
  .slide,
  .ad-portal-overlay {

    transition:
      none !important;

    animation:
      none !important;
  }

  .section {

    opacity:
      1;

    transform:
      none;
  }

  .culture-section {

    opacity:
      1 !important;

    transform:
      none !important;
  }

  .culture-section p {

    opacity:
      1 !important;

    transform:
      none !important;
  }
}


/* ============================================================
   END — ONEETSAKO FULL FLUID SYSTEM
   ============================================================ */