.elementor-kit-6{--e-global-color-primary:#ECDDC9;--e-global-color-secondary:#EBD3B3;--e-global-color-text:#2F271D;--e-global-color-accent:#D1FE01;--e-global-color-3600b93:#96836A;--e-global-color-5ed64b5:#1F1B15;--e-global-typography-primary-font-family:"Exposure";--e-global-typography-primary-font-size:3.5em;--e-global-typography-primary-font-weight:normal;--e-global-typography-primary-line-height:1.3em;--e-global-typography-secondary-font-family:"Exposure";--e-global-typography-secondary-font-size:2em;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.4em;--e-global-typography-text-font-family:"Google Sans";--e-global-typography-text-font-size:1.2em;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.4em;--e-global-typography-accent-font-family:"Exposure";--e-global-typography-accent-font-size:1.2em;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.4em;--e-global-typography-2344981-font-family:"Exposure";--e-global-typography-2344981-font-size:2.5em;--e-global-typography-2344981-line-height:1.2em;--e-global-typography-3ed5c7a-font-family:"Google Sans";--e-global-typography-3ed5c7a-font-size:0.75em;--e-global-typography-3ed5c7a-line-height:1.6em;background-color:var( --e-global-color-primary );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Brown:#2F271D; --e-gv-47cfdd1:2em; --Deep_Brown:#1F1B15; --Cream:#ECDDC9; --Dark_Cream:#EBD3B3; --Innactive:#96836A; --Accent_Green:#D1FE01; --Exposer:Exposure; --Sans:Google Sans; --Big_Title:3.5em; --Small_Title:2em; --Pop_Title:2.5em; --Paragraph:1em; --Mini_Text:0.75em; --Line_Height-XL:1.4em; --Line_Height-SX:1.6em; --Paragraph_M:0.9em; --Small_Title-M:1.5em; --Pop_titlle_M:1.75em; --Midi:1.25em; }
/* Start custom CSS *//* ===== GLOBAL ===== */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
}

/* ===== PREVENT HORIZONTAL PAGE SCROLL ===== */
body {
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
  width: 100%;
}

/* ===== ELEMENTOR WRAPPER OVERRIDE ===== */
/* forces all elementor wrappers to not clip the wave effect */
.elementor-section-wrap,
.e-con,
.elementor {
  overflow: visible !important;
}

/* ===== FONTS ===== */
.exposure-word {
  font-family: "Exposure", serif;
}

/* ===== STICKY HEADER (all breakpoints) ===== */
.elementor-location-header {
  position: sticky !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  z-index: 999;
}

/* ===== ACCORDION BUTTONS ===== */
#Step_1_btn,
#Step_2_btn,
#Step_3_btn {
  transition: transform 0.4s ease;
}
#Step_1_btn.open,
#Step_2_btn.open,
#Step_3_btn.open {
  transform: rotate(45deg);
}

/* =========================================================
   MEMORIES SECTION CONTAINER
   FIX: overflow-x hidden here clips the carousel's huge
   max-content width so it can't stretch html/body and
   cause the page-wide horizontal scroll. overflow-y stays
   visible so the hover "wave" lift effect (cards moving
   up on hover) still isn't vertically clipped.
   UPDATE: padding-top increased from 80px to 160px so the
   lifted cards (and their labels above them) clear the
   sticky header instead of getting cut off at the top.
   ========================================================= */
#memories-section {
  overflow: visible;
  padding-top: 160px;
}

/* ===== MEMORIES OUTER WRAP =====
   CHANGED: overflow: visible -> overflow-x: clip + overflow-y: visible
   the .td-track inside is `width: max-content` and was measuring
   ~15000px wide. with overflow: visible here, nothing was clipping
   that width, so it pushed body/html out and caused the page-wide
   horizontal scroll. overflow-x: clip cuts it off horizontally
   while overflow-y: visible keeps the wave-lift hover effect and
   the labels above the cards completely unclipped vertically.
*/
.td-memories-wrap {
  position: relative;
  padding: 20px 0 24px;
  overflow-x: clip;
  overflow-y: visible;
  max-width: 100vw;
}

/* ===== TRACK ===== */
.td-track {
  display: flex;
  gap: 1vw;
  padding: 60px 4vw 10px;
  overflow: visible;
  align-items: flex-end;
  width: max-content;
}

/* ===== INDIVIDUAL CARD ===== */
.td-card {
  flex: 0 0 14vw;
  position: relative;
  border-radius: 12px;
  overflow: visible;
  will-change: transform;
}

/* ===== CARD IMAGE ===== */
.td-card img,
.td-placeholder {
  width: 14vw;
  height: 20vw;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

/* ===== CARD LABEL ===== */
.td-label {
  position: absolute;
  bottom: calc(100% + 0.5em);
  left: 0;
  width: 14vw;
  font-family: "Exposure", serif;
  font-size: 0.75em;
  line-height: 1.2;
  color: #5a5040;
  white-space: normal;
  pointer-events: none;
}
.td-label em {
  font-style: italic;
  font-weight: 500;
}

/* ===== MOBILE CARDS ===== */
@media (max-width: 768px) {
  .td-card {
    flex: 0 0 42vw;
  }
  .td-card img,
  .td-placeholder {
    width: 42vw;
    height: 58vw;
  }
  .td-label {
    width: 42vw;
    bottom: calc(100% + 0.5em);
  }
}

/* =========================================================
   MENU — DESKTOP (default state, screens above 1024px)
   No position/transform overrides here at all.
   The n-menu widget's own CSS handles the horizontal nav,
   so we just let it behave natively and stay in-flow,
   which is what lets the sticky header above keep it visible.
   ========================================================= */
.e-n-menu-toggle {
  display: none; /* hidden on desktop, n-menu widget shows it itself <1024px normally, this is a safety override */
}

/* =========================================================
   MENU — MOBILE + TABLET (slide-out panel)
   Everything that turns the nav into a fixed off-canvas
   panel is scoped to this breakpoint ONLY. This was the
   root bug: these rules had no media query before, so they
   were nuking the desktop menu by shoving it off-screen.
   ========================================================= */
@media (max-width: 1024px) {

  .e-n-menu-toggle {
    display: inline-flex;
  }

  /* panel hidden off-screen to the right by default */
  #menubar-120 {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 75vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    background: #EBD3B3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding: 60px 40px !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
    transform: translateX(100%) !important;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  /* open state */
  button[aria-expanded="true"] + #menubar-120 {
    transform: translateX(0) !important;
  }

  /* close button above the panel */
  button.e-n-menu-toggle {
    z-index: 999999 !important;
    position: relative !important;
  }

  /* lock body scroll when menu is open */
  body:has(button[aria-expanded="true"]) {
    overflow: hidden !important;
  }

  /* menu items right aligned */
  #menubar-120 .e-n-menu-heading {
    width: 100% !important;
    align-items: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #menubar-120 .e-n-menu-item {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 8px 0 !important;
  }
}

/* =========================================================
   MENU — TABLET FINE-TUNE (769px–1024px)
   Same off-canvas behavior as mobile, just a narrower panel
   so it doesn't eat the whole screen on a tablet's wider
   viewport. Kept separate so you can tune it independently
   once you actually test on a real tablet.
   ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  #menubar-120 {
    width: 45vw !important;
  }
}

/* =========================================================
   SIDE LABEL — fixed badge on the right edge, vertically
   centered, visible on every page. Sits above page content
   but below the mobile menu panel (z-index 99999) so the
   open menu naturally covers it.
   ========================================================= */
.side-label {
  position: fixed !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: auto !important;
  z-index: 9000 !important;
  display: block !important;
  line-height: 0 !important;
}
.side-label img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1024px) {
  .side-label {
    width: 29px !important;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Exposure';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://staging.the.diamonds/wp-content/uploads/2026/06/Exposure.woff2') format('woff2'),
		url('https://staging.the.diamonds/wp-content/uploads/2026/06/Exposure.woff') format('woff');
}
@font-face {
	font-family: 'Exposure';
	font-style: italic;
	font-weight: normal;
	font-display: auto;
	src: url('https://staging.the.diamonds/wp-content/uploads/2026/06/Exposure-Italic.woff2') format('woff2'),
		url('https://staging.the.diamonds/wp-content/uploads/2026/06/Exposure-Italic.woff') format('woff');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Google Sans';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://staging.the.diamonds/wp-content/uploads/2026/06/GoogleSans-Regular.woff2') format('woff2'),
		url('https://staging.the.diamonds/wp-content/uploads/2026/06/GoogleSans-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Google Sans';
	font-style: oblique;
	font-weight: normal;
	font-display: auto;
	src: url('https://staging.the.diamonds/wp-content/uploads/2026/06/GoogleSans-Bold.woff2') format('woff2'),
		url('https://staging.the.diamonds/wp-content/uploads/2026/06/GoogleSans-Bold.woff') format('woff');
}
/* End Custom Fonts CSS */