/* =========================================================
   REMOVED: FOUC prevention CSS rules
   These are no longer needed since we removed the hiding logic
   ========================================================= */

/* REMOVED: All FOUC prevention CSS - no longer needed */

/* =========================================================
   HIDE SCROLLBAR (still scrollable)
   ========================================================= */
html, body{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;   /* Chrome/Safari */
}

/* =========================================================
   BODY BACKGROUND COLOR
   ========================================================= */
html,
html body,
body.wf-body,
body{
  background-color: #0a0a0a !important;
  background: #0a0a0a !important;
}

/* =========================================================
   BARBA.JS CONTAINER STYLES
   Required for smooth slide transitions without layout jumps
   DISABLED: Commented out since Barba.js is currently disabled
   ========================================================= */
/* 
body[data-barba="wrapper"] {
  overflow-x: hidden;
  position: relative;
}

[data-barba="container"] {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  will-change: transform;
}
*/

/* Reset Barba container styles when Barba is disabled */
/* This ensures fixed elements work correctly */
/* Apply to both data attribute and common class names */
[data-barba="container"],
.main-wrapper[data-barba="container"],
.page-wrapper[data-barba="container"],
.main-wrapper,
.page-wrapper {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  will-change: auto !important;
  transform: none !important;
  /* Ensure no containing block is created */
  isolation: auto !important;
  contain: none !important;
}

/* Ensure fixed elements inside these containers are positioned relative to viewport */
[data-barba="container"] [style*="position: fixed"],
.main-wrapper [style*="position: fixed"],
.page-wrapper [style*="position: fixed"],
[data-barba="container"] .menu-dd,
.main-wrapper .menu-dd,
.page-wrapper .menu-dd {
  position: fixed !important;
  /* Force positioning relative to viewport */
  transform: none !important;
}

/* =========================================================
   MENU DROPDOWN - Must be fixed to viewport, not container
   Since menu is inside container, we need to ensure it's truly fixed
   ========================================================= */
.menu-dd {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 9999 !important;
  /* Ensure it's not affected by parent transforms */
  transform: none !important;
  /* Remove from document flow completely */
  pointer-events: none;
}

.menu-dd[style*="clip-path"] {
  pointer-events: auto;
}

/* =========================================================
   MENU DROPDOWN - Keep fixed during page transitions
   Menu should stay fixed even though it's inside the container
   ========================================================= */
.menu-dd {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
}

.menu-dd[style*="clip-path"] {
  pointer-events: auto;
}

/* =========================================================
   PAGE TRANSITIONS - Initial hidden state
   ========================================================= */
/* DISABLED: These classes cause black screen issues */
/* body.tm-transition-pending{
  opacity: 0 !important;
  visibility: hidden !important;
} */
body.tm-transition-visible{
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 1.2s ease, visibility 1.2s ease;
}

/* Device detection removed - using CSS media queries exclusively */

  /* =========================================================
     RNDMONSTER - GLOBAL PAGE PADDING KNOB
     ========================================================= */
  :root{
    --rnd-page-pad-d: 3vw;
    --rnd-page-pad-m: 5vw;
    --rnd-page-pad: var(--rnd-page-pad-d);
  }
  @media (max-width: 767px){
    :root{ --rnd-page-pad: var(--rnd-page-pad-m); }
  }
  .p-wr-r,
  .grid-r-wr{
    padding-left: var(--rnd-page-pad) !important;
    padding-right: var(--rnd-page-pad) !important;
    box-sizing: border-box;
  }

  /* =========================================================
     ✅ NO BLEED (cancels page pad, keeps section padding usable)
     Add to any section/wrapper: data-bleed="no"
     ========================================================= */
  [data-bleed="no"]{
    margin-left: calc(var(--rnd-page-pad) * -1) !important;
    margin-right: calc(var(--rnd-page-pad) * -1) !important;
    width: calc(100% + (var(--rnd-page-pad) * 2)) !important;
    overflow-x: clip;
  }

  /* About page: 100% width of .about-section container (no breakout, no extra padding) */
  .about-section{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }
  .about-section .p-wr-r,
  .about-section .grid-r-wr,
  .about-section .w-container,
  .about-section .container,
  .about-section [class*="container"],
  .about-section > div{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* =========================================================
     RNDMONSTER - TYPE ENGINE (data-type only)
     ========================================================= */
  [data-type="herotitle-r"]{
    font-size: clamp(2.8rem, 7.2vw, 8rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
  }
  [data-type="menutitle-r"]{
    font-size: clamp(1.9rem, 5.2vw, 4rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.045em !important;
  }
  [data-type="pagetitle-r"]{
    font-size: clamp(2.9rem, 5.2vw, 5rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
  }

  /* CMS count: reserve height so container doesn't jump on load */
  .prj-txt-count{
    min-height: 1.05em;
    display: inline-block;
  }

  [data-type="subtitle-r"]{
    font-size: clamp(1.20rem, 2.5vw, 999px) !important;
    line-height: 1.20 !important;
    letter-spacing: -0.02em !important;
  }
  [data-type="herosubtitle-r"]{
    font-size: clamp(2.2rem, 3.0vw, 999px) !important;
    line-height: 1.20 !important;
    letter-spacing: -0.02em !important;
  }
  [data-type="titleparagraph-r"]{
    font-size: clamp(1.3rem, 2vw, 999px) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
  }

  [data-type="paragraph-r"]{
    font-size: clamp(0.85rem, 1.0vw, 999px) !important;
    line-height: 1.40 !important;
    letter-spacing: -0.01em !important;
  }
  [data-type="paragraph-r-beauty"]{
    font-size: clamp(20px, 1.6vw, 999px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
  }

  [data-type="info-r"]{
    font-size: clamp(12px, 0.8vw, 14px) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
  }

  [data-type="note-r"],
  [data-icon="note-r"]{
    font-size: clamp(13px, 1.0vw, 1.3rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
  }

  /* =========================================================
     NOTE-R-BEAUTY
     ========================================================= */
  [data-type="note-r-beauty"],
  [data-icon="note-r-beauty"]{
    font-size: clamp(15px, 1.8vw, 999px) !important;
    line-height: 1 !important;
    letter-spacing: -0.005em !important;
  }
  @media (max-width: 991px){
    [data-type="note-r-beauty"],
    [data-icon="note-r-beauty"]{
      font-size: clamp(30px, 3.6vw, 999px) !important;
    }
  }

  [data-type="label-r"],
  [data-icon="label-r"]{
    font-size: clamp(11px, 0.7vw, 999px) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.0020em !important;
  }

  /* =========================================================
     GRID-R ENGINE
     ========================================================= */
  :root{
    --rnd-cols: 12;
    --rnd-gap-d: 0.8vw;
    --rnd-gap-m: 1.2vw;
    --rnd-gap: var(--rnd-gap-d);

    --rnd-col-size: calc((100vw - ((var(--rnd-cols) - 1) * var(--rnd-gap))) / var(--rnd-cols));
    --rnd-m-base: calc((var(--rnd-col-size) / 2) + var(--rnd-gap));
    --rnd-m-full: calc(var(--rnd-col-size) + var(--rnd-gap));
  }

  @media (max-width: 767px){
    :root{
      --rnd-cols: 8;
      --rnd-gap: var(--rnd-gap-m);
    }

    .grid-r-wr > .grid-r-col-9,
    .grid-r-wr > .grid-r-col-10,
    .grid-r-wr > .grid-r-col-11,
    .grid-r-wr > .grid-r-col-12{ display: none !important; }

    .grid-r-wr > .grid-r-col-8{ border-right-width: 0 !important; }
  }

  .grid-r-wr{
    pointer-events: none;
    column-gap: var(--rnd-gap) !important;
    row-gap: 0 !important;
    grid-column-gap: var(--rnd-gap) !important;
    grid-row-gap: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(var(--rnd-cols), minmax(0, 1fr)) !important;
  }

  .grid-r-wr > [class^="grid-r-col-"]{
    box-sizing: border-box;
    border-style: solid;
    border-width: 0 1px;
    border-image: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.09) 0px,
      rgba(255,255,255,0.09) 3px,
      transparent 1px,
      transparent 6px
    ) 1 stretch;
  }
  .grid-r-wr > .grid-r-col-1{ border-left-width: 0; }
  .grid-r-wr > .grid-r-col-12{ border-right-width: 0; }

  /* =========================
     DATA PADDING + MARGINS
     ========================= */
  [data-p-y="halfcol"]{ padding-top: var(--rnd-m-base); padding-bottom: var(--rnd-m-base); }
  [data-p-y="col"]{ padding-top: var(--rnd-m-full); padding-bottom: var(--rnd-m-full); }
  [data-p-y="gutter"]{ padding-top: var(--rnd-gap); padding-bottom: var(--rnd-gap); }

  [data-p-y="0"]{ padding-top: 0 !important; padding-bottom: 0 !important; }
  [data-p-y="gutterx2"]{ padding-top: calc(var(--rnd-gap) * 2) !important; padding-bottom: calc(var(--rnd-gap) * 2) !important; }
  [data-p-y="gutterx3"]{ padding-top: calc(var(--rnd-gap) * 3) !important; padding-bottom: calc(var(--rnd-gap) * 3) !important; }
  [data-p-y="gutterx4"]{ padding-top: calc(var(--rnd-gap) * 4) !important; padding-bottom: calc(var(--rnd-gap) * 4) !important; }

  [data-p-x="col"]{ padding-left: var(--rnd-m-full); padding-right: var(--rnd-m-full); }
  [data-p-x="halfcol"]{ padding-left: var(--rnd-m-base); padding-right: var(--rnd-m-base); }
  [data-p-x="gutter"]{ padding-left: var(--rnd-gap); padding-right: var(--rnd-gap); }

  [data-p-x="gutterx2"]{ padding-left: calc(var(--rnd-gap) * 2); padding-right: calc(var(--rnd-gap) * 2); }
  [data-p-x="gutterx3"]{ padding-left: calc(var(--rnd-gap) * 3); padding-right: calc(var(--rnd-gap) * 3); }
  [data-p-x="gutterx4"]{ padding-left: calc(var(--rnd-gap) * 4); padding-right: calc(var(--rnd-gap) * 4); }

  [data-p-bot="halfcol"]{ padding-bottom: var(--rnd-m-base); }
  [data-p-bot="col"]{ padding-bottom: var(--rnd-m-full); }
  [data-p-bot="gutter"]{ padding-bottom: var(--rnd-gap); }
  [data-p-bot="gutterx2"]{ padding-bottom: calc(var(--rnd-gap) * 2); }

  [data-p-top="halfcol"]{ padding-top: var(--rnd-m-base); }
  [data-p-top="col"]{ padding-top: var(--rnd-m-full); }
  [data-p-top="gutter"]{ padding-top: var(--rnd-gap); }
  [data-p-top="gutterx2"]{ padding-top: calc(var(--rnd-gap) * 2) !important; }

  [data-p="gutter"]{ padding: var(--rnd-gap); }
  [data-p="gutterx2"]{ padding: calc(var(--rnd-gap) * 2); }
  [data-p="gutterx3"]{ padding: calc(var(--rnd-gap) * 3); }
  [data-p="gutterx4"]{ padding: calc(var(--rnd-gap) * 4); }
  [data-p="halfgutter"]{ padding: calc(var(--rnd-gap) / 2); }

  /* =========================================================
     DATA MARGINS TOP/BOT
     ========================================================= */
  [data-m-top="halfcol"]{ margin-top: var(--rnd-m-base); }
  [data-m-top="col"]{ margin-top: var(--rnd-m-full); }
  [data-m-top="gutter"]{ margin-top: var(--rnd-gap); }
  [data-m-top="gutterx2"]{ margin-top: calc(var(--rnd-gap) * 2); }
  [data-m-top="gutterx3"]{ margin-top: calc(var(--rnd-gap) * 3); }
  [data-m-top="gutterx4"]{ margin-top: calc(var(--rnd-gap) * 4); }
  [data-m-top="halfgutter"]{ margin-top: calc(var(--rnd-gap) / 2); }
  [data-m-top="0"]{ margin-top: 0 !important; }

  [data-m-bot="halfcol"]{ margin-bottom: var(--rnd-m-base); }
  [data-m-bot="col"]{ margin-bottom: var(--rnd-m-full); }
  [data-m-bot="gutter"]{ margin-bottom: var(--rnd-gap); }
  [data-m-bot="gutterx2"]{ margin-bottom: calc(var(--rnd-gap) * 2); }
  [data-m-bot="gutterx3"]{ margin-bottom: calc(var(--rnd-gap) * 3); }
  [data-m-bot="gutterx4"]{ margin-bottom: calc(var(--rnd-gap) * 4); }
  [data-m-bot="halfgutter"]{ margin-bottom: calc(var(--rnd-gap) / 2); }
  [data-m-bot="0"]{ margin-bottom: 0 !important; }

  [data-m-y="halftop"]{ margin-top: var(--rnd-m-base); }
  [data-m-y="halfbot"]{ margin-bottom: var(--rnd-m-base); }
  [data-m-y="top"]{ margin-top: var(--rnd-m-full); }
  [data-m-y="bot"]{ margin-bottom: var(--rnd-m-full); }

  [data-m-y="gutter-top"]{ margin-top: var(--rnd-gap); }
  [data-m-y="gutter-bot"]{ margin-bottom: var(--rnd-gap); }
  [data-m-y="gutter"]{ margin-top: var(--rnd-gap); margin-bottom: var(--rnd-gap); }

  [data-m-y="topx2"]{ margin-top: calc(var(--rnd-m-base) * 2); }
  [data-m-y="topx3"]{ margin-top: calc(var(--rnd-m-base) * 3); }
  [data-m-y="topx4"]{ margin-top: calc(var(--rnd-m-base) * 4); }
  [data-m-y="topx5"]{ margin-top: calc(var(--rnd-m-base) * 5); }

  [data-m-y="botx2"]{ margin-bottom: calc(var(--rnd-m-base) * 2); }
  [data-m-y="botx3"]{ margin-bottom: calc(var(--rnd-m-base) * 3); }
  [data-m-y="botx4"]{ margin-bottom: calc(var(--rnd-m-base) * 4); }
  [data-m-y="botx5"]{ margin-bottom: calc(var(--rnd-m-base) * 5); }

  [data-m-y-top="gutter"]{ margin-top: var(--rnd-gap); }
  [data-m-y-top="gutterx2"]{ margin-top: calc(var(--rnd-gap) * 2); }
  [data-m-y-top="gutterx3"]{ margin-top: calc(var(--rnd-gap) * 3); }
  [data-m-y-top="gutterx4"]{ margin-top: calc(var(--rnd-gap) * 4); }

  [data-m-y-bot="gutter"]{ margin-bottom: var(--rnd-gap); }
  [data-m-y-bot="gutterx2"]{ margin-bottom: calc(var(--rnd-gap) * 2); }
  [data-m-y-bot="gutterx3"]{ margin-bottom: calc(var(--rnd-gap) * 3); }
  [data-m-y-bot="gutterx4"]{ margin-bottom: calc(var(--rnd-gap) * 4); }

  /* =========================================================
     DATA-GRID-R (LAYOUT GRID)  ✅ RESTORED (WORKING BEHAVIOR)
     ========================================================= */
  .data-grid-r{
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(var(--rnd-cols), minmax(0, 1fr));
    column-gap: var(--rnd-gap);
  }

  [data-gap="gutter"]{ gap: var(--rnd-gap); }

  .data-grid-r-item{
    box-sizing: border-box;
    --start: 1;
    --end: -1;
    grid-column: var(--start) / var(--end);
  }

  /* Order attributes (harmless to grid, useful if a parent switches to flex somewhere) */
  .data-grid-r-item{ order: 0; }

  .data-grid-r-item[data-order-d="1"]{ order: 1; }
  .data-grid-r-item[data-order-d="2"]{ order: 2; }
  .data-grid-r-item[data-order-d="3"]{ order: 3; }
  .data-grid-r-item[data-order-d="4"]{ order: 4; }
  .data-grid-r-item[data-order-d="5"]{ order: 5; }
  .data-grid-r-item[data-order-d="6"]{ order: 6; }
  .data-grid-r-item[data-order-d="7"]{ order: 7; }
  .data-grid-r-item[data-order-d="8"]{ order: 8; }
  .data-grid-r-item[data-order-d="9"]{ order: 9; }
  .data-grid-r-item[data-order-d="10"]{ order: 10; }
  .data-grid-r-item[data-order-d="11"]{ order: 11; }
  .data-grid-r-item[data-order-d="12"]{ order: 12; }

  @media (max-width: 991px){
    .data-grid-r-item[data-order-p="1"]{ order: 1; }
    .data-grid-r-item[data-order-p="2"]{ order: 2; }
    .data-grid-r-item[data-order-p="3"]{ order: 3; }
    .data-grid-r-item[data-order-p="4"]{ order: 4; }
    .data-grid-r-item[data-order-p="5"]{ order: 5; }
    .data-grid-r-item[data-order-p="6"]{ order: 6; }
    .data-grid-r-item[data-order-p="7"]{ order: 7; }
    .data-grid-r-item[data-order-p="8"]{ order: 8; }
    .data-grid-r-item[data-order-p="9"]{ order: 9; }
    .data-grid-r-item[data-order-p="10"]{ order: 10; }
    .data-grid-r-item[data-order-p="11"]{ order: 11; }
    .data-grid-r-item[data-order-p="12"]{ order: 12; }
  }

  @media (max-width: 767px){
    .data-grid-r-item[data-order-m="1"]{ order: 1; }
    .data-grid-r-item[data-order-m="2"]{ order: 2; }
    .data-grid-r-item[data-order-m="3"]{ order: 3; }
    .data-grid-r-item[data-order-m="4"]{ order: 4; }
    .data-grid-r-item[data-order-m="5"]{ order: 5; }
    .data-grid-r-item[data-order-m="6"]{ order: 6; }
    .data-grid-r-item[data-order-m="7"]{ order: 7; }
    .data-grid-r-item[data-order-m="8"]{ order: 8; }
    .data-grid-r-item[data-order-m="9"]{ order: 9; }
    .data-grid-r-item[data-order-m="10"]{ order: 10; }
    .data-grid-r-item[data-order-m="11"]{ order: 11; }
    .data-grid-r-item[data-order-m="12"]{ order: 12; }
  }

  .data-grid-r-item[data-start-d="1"]{ --start: 1; }
  .data-grid-r-item[data-start-d="2"]{ --start: 2; }
  .data-grid-r-item[data-start-d="3"]{ --start: 3; }
  .data-grid-r-item[data-start-d="4"]{ --start: 4; }
  .data-grid-r-item[data-start-d="5"]{ --start: 5; }
  .data-grid-r-item[data-start-d="6"]{ --start: 6; }
  .data-grid-r-item[data-start-d="7"]{ --start: 7; }
  .data-grid-r-item[data-start-d="8"]{ --start: 8; }
  .data-grid-r-item[data-start-d="9"]{ --start: 9; }
  .data-grid-r-item[data-start-d="10"]{ --start: 10; }
  .data-grid-r-item[data-start-d="11"]{ --start: 11; }
  .data-grid-r-item[data-start-d="12"]{ --start: 12; }

  .data-grid-r-item[data-span-d="1"]{ --end: span 1; }
  .data-grid-r-item[data-span-d="2"]{ --end: span 2; }
  .data-grid-r-item[data-span-d="3"]{ --end: span 3; }
  .data-grid-r-item[data-span-d="4"]{ --end: span 4; }
  .data-grid-r-item[data-span-d="5"]{ --end: span 5; }
  .data-grid-r-item[data-span-d="6"]{ --end: span 6; }
  .data-grid-r-item[data-span-d="7"]{ --end: span 7; }
  .data-grid-r-item[data-span-d="8"]{ --end: span 8; }
  .data-grid-r-item[data-span-d="9"]{ --end: span 9; }
  .data-grid-r-item[data-span-d="10"]{ --end: span 10; }
  .data-grid-r-item[data-span-d="11"]{ --end: span 11; }
  .data-grid-r-item[data-span-d="12"]{ --end: span 12; }

  @media (max-width: 991px){
    .data-grid-r-item[data-start-p="1"]{ --start: 1; }
    .data-grid-r-item[data-start-p="2"]{ --start: 2; }
    .data-grid-r-item[data-start-p="3"]{ --start: 3; }
    .data-grid-r-item[data-start-p="4"]{ --start: 4; }
    .data-grid-r-item[data-start-p="5"]{ --start: 5; }
    .data-grid-r-item[data-start-p="6"]{ --start: 6; }
    .data-grid-r-item[data-start-p="7"]{ --start: 7; }
    .data-grid-r-item[data-start-p="8"]{ --start: 8; }
    .data-grid-r-item[data-start-p="9"]{ --start: 9; }
    .data-grid-r-item[data-start-p="10"]{ --start: 10; }
    .data-grid-r-item[data-start-p="11"]{ --start: 11; }
    .data-grid-r-item[data-start-p="12"]{ --start: 12; }

    .data-grid-r-item[data-span-p="1"]{ --end: span 1; }
    .data-grid-r-item[data-span-p="2"]{ --end: span 2; }
    .data-grid-r-item[data-span-p="3"]{ --end: span 3; }
    .data-grid-r-item[data-span-p="4"]{ --end: span 4; }
    .data-grid-r-item[data-span-p="5"]{ --end: span 5; }
    .data-grid-r-item[data-span-p="6"]{ --end: span 6; }
    .data-grid-r-item[data-span-p="7"]{ --end: span 7; }
    .data-grid-r-item[data-span-p="8"]{ --end: span 8; }
    .data-grid-r-item[data-span-p="9"]{ --end: span 9; }
    .data-grid-r-item[data-span-p="10"]{ --end: span 10; }
    .data-grid-r-item[data-span-p="11"]{ --end: span 11; }
    .data-grid-r-item[data-span-p="12"]{ --end: span 12; }
  }

  @media (min-width: 768px){
    .data-grid-r-item[data-span-d-full]{
      justify-self: stretch;
      max-width: none;
      width: calc(100% + var(--rnd-gap));
    }
    .data-grid-r-item[data-span-d-full="1"]{ --end: span 1; }
    .data-grid-r-item[data-span-d-full="2"]{ --end: span 2; }
    .data-grid-r-item[data-span-d-full="3"]{ --end: span 3; }
    .data-grid-r-item[data-span-d-full="4"]{ --end: span 4; }
    .data-grid-r-item[data-span-d-full="5"]{ --end: span 5; }
    .data-grid-r-item[data-span-d-full="6"]{ --end: span 6; }
    .data-grid-r-item[data-span-d-full="7"]{ --end: span 7; }
    .data-grid-r-item[data-span-d-full="8"]{ --end: span 8; }
    .data-grid-r-item[data-span-d-full="9"]{ --end: span 9; }
    .data-grid-r-item[data-span-d-full="10"]{ --end: span 10; }
    .data-grid-r-item[data-span-d-full="11"]{ --end: span 11; }
    .data-grid-r-item[data-span-d-full="12"]{ --end: span 12; width: 100%; }
  }

  @media (max-width: 767px){
    .data-grid-r-item[data-span-m-full]{
      justify-self: stretch;
      max-width: none;
      width: calc(100% + var(--rnd-gap));
    }
    .data-grid-r-item[data-span-m-full="1"]{ --end: span 1; }
    .data-grid-r-item[data-span-m-full="2"]{ --end: span 2; }
    .data-grid-r-item[data-span-m-full="3"]{ --end: span 3; }
    .data-grid-r-item[data-span-m-full="4"]{ --end: span 4; }
    .data-grid-r-item[data-span-m-full="5"]{ --end: span 5; }
    .data-grid-r-item[data-span-m-full="6"]{ --end: span 6; }
    .data-grid-r-item[data-span-m-full="7"]{ --end: span 7; }
    .data-grid-r-item[data-span-m-full="8"]{ --end: span 8; width: 100%; }

    .data-grid-r-item[data-start-m="1"]{ --start: 1; }
    .data-grid-r-item[data-start-m="2"]{ --start: 2; }
    .data-grid-r-item[data-start-m="3"]{ --start: 3; }
    .data-grid-r-item[data-start-m="4"]{ --start: 4; }
    .data-grid-r-item[data-start-m="5"]{ --start: 5; }
    .data-grid-r-item[data-start-m="6"]{ --start: 6; }
    .data-grid-r-item[data-start-m="7"]{ --start: 7; }
    .data-grid-r-item[data-start-m="8"]{ --start: 8; }

    .data-grid-r-item[data-span-m="1"]{ --end: span 1; }
    .data-grid-r-item[data-span-m="2"]{ --end: span 2; }
    .data-grid-r-item[data-span-m="3"]{ --end: span 3; }
    .data-grid-r-item[data-span-m="4"]{ --end: span 4; }
    .data-grid-r-item[data-span-m="5"]{ --end: span 5; }
    .data-grid-r-item[data-span-m="6"]{ --end: span 6; }
    .data-grid-r-item[data-span-m="7"]{ --end: span 7; }
    .data-grid-r-item[data-span-m="8"]{ --end: span 8; }
  }

  /* =========================================================
     ICON SYSTEM
     ========================================================= */
  [data-icon="label-r"]{ display: inline-flex; align-items: center; line-height: 1; }
  [data-icon="label-r"] svg,
  [data-icon="label-r"] img{ height: 0.8em; width: auto; display: block; }

  [data-icon="note-r"]{ display: inline-flex; align-items: center; line-height: 1; }
  [data-icon="note-r"] svg,
  [data-icon="note-r"] img{ height: 1em; width: auto; display: block; }

  /* ==============================
     MOSAIC LAYOUT (PROJECT GRID)
     Desktop (>= 992): 2 / 1 / 2 / 1 repeating
     Tablet (<= 991): 1 / 2 / 1 / 2 repeating
     Uses padding gutters (stable in Designer)
     ============================== */

  [data-mosaic="list"]{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
  }

  [data-mosaic="list"] > [data-mosaic-item]{
    position: relative;
    box-sizing: border-box;
    padding-top: calc(var(--rnd-gap) / 2);
    padding-bottom: calc(var(--rnd-gap) / 2);
    padding-left: 0;
    padding-right: 0;
  }

  /* Desktop: 2 / 1 repeating (two-up, then full, repeat) */
  @media (min-width: 992px){
    [data-mosaic="list"] > [data-mosaic-item]{ flex: 0 0 50%; }

    [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n+1){
      padding-right: calc(var(--rnd-gap) / 2);
    }
    [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n+2){
      padding-left: calc(var(--rnd-gap) / 2);
    }

    [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n){
      flex-basis: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* Tablet and down: 1 / 2 repeating (full, then two-up row, repeat) */
  @media (max-width: 991px){
    [data-mosaic="list"] > [data-mosaic-item]{ flex: 0 0 50%; }

    [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n+1){
      flex-basis: 100%;
      padding-left: 0;
      padding-right: 0;
    }

    [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n+2){
      padding-right: calc(var(--rnd-gap) / 2);
    }
    [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n+3){
      padding-left: calc(var(--rnd-gap) / 2);
    }

    [data-mosaic="list"] > [data-mosaic-item]:last-child:nth-child(3n+2){
      display: none;
    }
  }

  /* =========================================================
     THUMBNAIL ASPECT RATIOS FOR MOSAIC ITEMS
     ========================================================= */
  [data-mosaic="list"] .thumbnailwrap-r{
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }
  [data-mosaic="list"] .thumbnailwrap-r::before{ content: ""; display: block; padding-bottom: 100%; }
  [data-mosaic="list"] .thumbnailwrap-r > *{
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* Desktop: full-width (every 3rd) becomes 16:9 */
  @media (min-width: 992px){
    [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n) .thumbnailwrap-r::before{ padding-bottom: 56.25%; }
  }

  /* Tablet: full-width (3n+1) becomes 16:9 */
  @media (max-width: 991px){
    [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n+1) .thumbnailwrap-r::before{ padding-bottom: 56.25%; }
  }

  /* =========================================================
     991px and down: for the FULL-WIDTH mosaic item,
     force .sector-info-gr into 2 columns, 1 row, gap 0
     ========================================================= */
  @media (max-width: 991px){
    [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n+1) .sector-info-gr{
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      grid-template-rows: 1fr !important;
      column-gap: 0 !important;
      row-gap: 0 !important;
      gap: 0 !important;
    }
  }

  /* =========================================================
     CHILD HALF-COLUMN PADDING (inside .data-grid-r only)
     ========================================================= */
  .data-grid-r [data-p-x="halfcol-child"]{
    padding-left: var(--rnd-m-base);
    padding-right: var(--rnd-m-base);
  }

  /* =========================================================
     GLOBAL TYPE COLOR (EXCLUDING KEEP-COLOR ZONES)
     ========================================================= */
  :root{ --rnd-type-color: #ffffff; }

  html body [data-type]:not([data-type-keep-color="true"] *),
  html body [data-icon]:not([data-type-keep-color="true"] *),
  html body [data-type] *:not([data-type-keep-color="true"] *),
  html body [data-icon] *:not([data-type-keep-color="true"] *){ color: var(--rnd-type-color); }

  html body [data-type] a:not([data-type-keep-color="true"] *),
  html body [data-icon] a:not([data-type-keep-color="true"] *){ color: var(--rnd-type-color); }

  /* =========================================================
     RND BG DEFAULT (used by JS)
     ========================================================= */
  :root{ --rnd-bg-default: #10120f; }

  /* =========================================================
     GLOBAL LINK RESET (NO COLOR HIJACK)
     ========================================================= */
  a{ text-decoration: none; }
  a:hover, a:focus, a:active{ text-decoration: none; }
  a:visited{ text-decoration: none; }
  a:focus-visible{
    outline: 2px solid currentColor;
    outline-offset: 2px;
    text-decoration: none;
  }

  /* =========================================================
     OPTIONAL: INHERIT-LINK MODE (for "div buttons")
     ========================================================= */
  [data-link-reset="inherit"] a,
  [data-link-reset="inherit"] a:visited,
  [data-link-reset="inherit"] a:hover,
  [data-link-reset="inherit"] a:focus,
  [data-link-reset="inherit"] a:active{
    color: inherit !important;
    text-decoration: none !important;
  }

  /* =========================================================
     BLEND MODE UTILS
     ========================================================= */
  [data-blend="difference"]{ mix-blend-mode: difference !important; }

  /* =========================================================
     CLICK-THROUGH (FIXED, NESTABLE, DOES NOT TOUCH GRID SYSTEM)
     ========================================================= */
  html body [data-click="through"]{ pointer-events: none !important; }
  html body [data-click="through"] *{ pointer-events: none !important; }

  html body [data-click="through-wrapper"],
  html body [data-click="through-wrap"],
  html body [data-click-through-wrapper="true"]{
    pointer-events: none !important;
  }

  html body [data-click="through-wrapper"] :where(*):not([data-click="through"]):not([data-click="through-wrapper"]):not([data-click="through-wrap"]):not([data-click-through-wrapper="true"]),
  html body [data-click="through-wrap"] :where(*):not([data-click="through"]):not([data-click="through-wrapper"]):not([data-click="through-wrap"]):not([data-click-through-wrapper="true"]),
  html body [data-click-through-wrapper="true"] :where(*):not([data-click="through"]):not([data-click="through-wrapper"]):not([data-click="through-wrap"]):not([data-click-through-wrapper="true"]){
    pointer-events: auto !important;
  }

  /* =========================================================
     MOSAIC: NUCLEAR OVERRIDE (beats row-reverse on published)
     ========================================================= */
  html body .cms-project-list.w-dyn-items[data-mosaic="list"]{
    display: flex !important;
    flex-flow: row wrap !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    direction: ltr !important;
  }

  html body .cms-project-list.w-dyn-items[data-mosaic="list"] > .cms-project-item.w-dyn-item{
    position: relative !important;
  }

  /* =========================================================
     PROJECT CARDS – black BG, white text (Biblioteksgatan-style)
     Add class .project-cards-dark to the section wrapping the project grid,
     or applies automatically inside .sort-projects-section.
     ========================================================= */
  .sort-projects-section,
  .project-cards-dark,
  .sort-projects-section .cms-project-list,
  .sort-projects-section .cms-project-item.w-dyn-item,
  .sort-projects-section .w-dyn-item,
  .project-cards-dark .cms-project-list,
  .project-cards-dark .cms-project-item.w-dyn-item,
  .project-cards-dark .w-dyn-item{
    background: #000 !important;
  }
  .sort-projects-section,
  .project-cards-dark,
  .sort-projects-section *,
  .project-cards-dark *{
    color: #fff !important;
  }
  .sort-projects-section .w-button,
  .sort-projects-section a[class*="button"],
  .sort-projects-section a[class*="btn"],
  .project-cards-dark .w-button,
  .project-cards-dark a[class*="button"],
  .project-cards-dark a[class*="btn"]{
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
  }

/* =========================================================
   PROJECT CARDS – black BG, white text (all breakpoints)
   Add .project-cards-dark to section, or use .sort-projects-section.
   ========================================================= */
.sort-projects-section,
.project-cards-dark,
.sort-projects-section .cms-project-list,
.sort-projects-section .cms-project-item.w-dyn-item,
.sort-projects-section .w-dyn-item,
.sort-projects-section .prj-cms-item,
.project-cards-dark .cms-project-list,
.project-cards-dark .cms-project-item.w-dyn-item,
.project-cards-dark .w-dyn-item,
.project-cards-dark .prj-cms-item{
  background: #000 !important;
}
.sort-projects-section,
.project-cards-dark,
.sort-projects-section *,
.project-cards-dark *{
  color: #fff !important;
}
.sort-projects-section .w-button,
.sort-projects-section a[class*="button"],
.sort-projects-section a[class*="btn"],
.project-cards-dark .w-button,
.project-cards-dark a[class*="button"],
.project-cards-dark a[class*="btn"]{
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

/* =========================================================
   RNDMONSTER - SFX (STABLE + NO TECH FLASH)
   ========================================================= */

/* Hide only what MUST be hidden from first paint
   Only hide when JS is loaded (tm-js class) - keeps text visible in Webflow designer */
html.tm-js [data-sfx="title"],
html.tm-js [data-sfx="reveal"],
html.tm-js [data-sfx="tech"],
html.tm-js [data-sfx="paragraph"],
html.tm-js [data-sfx="pulse"],
html.tm-js [data-sfx="blink"],
html.tm-js [data-sfx="fill"]{
  opacity: 0; /* prevents visible-before-animation */
}

/* ---------------- TOMAI LOGO (hero-aware hide/show) ----------------
   Default: hidden (no flash). JS will reveal immediately if hero is not visible OR hero doesn't exist.
   IMPORTANT: we DO NOT set transform here (so we don't override Webflow positioning).
*/
html.tm-js .tomai-logo-img-wr{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------------- FADE (leave viewport) ---------------- */
[data-sfx="fade"]{
  opacity: 1;
  will-change: opacity;
}

/* ---------------- FADE BOT (real transparency mask) ---------------- */
/* Optional per element:
   data-sfx-fade-bot-size="30%"  (or "120px", "18vh")
*/
[data-sfx="fade-bot"]{
  --sfx-fade-bot: 26%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - var(--sfx-fade-bot)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - var(--sfx-fade-bot)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ---------------- PARALLAX ---------------- */
.sfx-parallax-target{
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ---------------- PARAGRAPH ---------------- */
[data-sfx="paragraph"]{ perspective: 900px; }
[data-sfx="paragraph"] .pg-line{
  display: block;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* ---------------- TITLE (FIXED LINE-HEIGHT) ---------------- */
[data-sfx="title"] .tt-word{
  display: inline-block;
  white-space: nowrap;
}
[data-sfx="title"] .tt-char{
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* ---------------- FILL (letter opacity fill) ----------------
   FIX: Do NOT use inline-block or transforms on chars.
   We build spans ourselves (no SplitText) so line-height stays exact.
*/
[data-sfx="fill"]{
  /* parent will be set to opacity:1 in JS, keep metrics untouched */
}
[data-sfx="fill"] .sfx-fill-char{
  display: inline-block !important;
  position: relative !important;
  float: none !important;
  line-height: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  vertical-align: baseline !important;
  transform: none !important;
  will-change: opacity;
}

/* ---------------- REVEAL ---------------- */
[data-sfx="reveal"]{
  position: relative;
  overflow: hidden;
}

/* ---------------- TECH (FIXED CURSOR + NO FLASH) ---------------- */
.sfx-tech-host{
  position: relative;
  display: block;
  width: 100%;
}
.sfx-tech-ghost{
  visibility: hidden;
  opacity: 0;
  display: block;
}
.sfx-tech-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
}
.sfx-tech-char{
  display: inline-block;
  opacity: 0;
  line-height: inherit;
  vertical-align: baseline;
}
.sfx-tech-cursor{
  position: absolute;
  left: 0;
  top: 0;
  width: 1.05em;
  height: 1.05em;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

/* =========================================================
   MENU SYSTEM STYLES
   ========================================================= */
.tm-menu-txt,
.menu-open-txt{
  display:inline-block;
  overflow:hidden;
  vertical-align:baseline;
}

.sub-menu-dropdown{
  overflow:hidden;
  will-change:height;
}

/* =========================================================
   MAIN MENU DROPDOWN (overlay + reveal mask)
   ========================================================= */
.menu-dd{
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--tm-menu-vh, 100svh) !important;
  overflow: hidden;
  will-change: clip-path, transform;
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Inner wrapper */
.menu-content-wr{ height: 100%; }

.tm-char-run{ display:inline-block; white-space:pre; }
.tm-char{ display:inline-block; will-change:transform,opacity; }

/* =========================================================
   FORCE DD MENU STACK (flex down, align left)
   ========================================================= */
.dd-menu-btns-wr{
  display:flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* =========================================================
   DD MENU ITEMS (mask per item + slide)
   ========================================================= */
.dd-menu-btn{ overflow: hidden; }
.dd-menu-btn-txt{
  display:inline-block;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  perspective: 900px;
  -webkit-perspective: 900px;
}

/* Sector list hidden by default (JS toggles) */
.dd-menu-sector-btns{ display:none; }

/* Back arrow animates like items */
.menu-back-arrow-wr{
  overflow:hidden;
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* =========================================================
   DD MENU HOVER FLIP (normal -> italic + light)
   ========================================================= */
.dd-flip-run{ display:inline-block; white-space:pre; }

.dd-flip-char{
  display:inline-block;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}

.dd-flip-face{
  display:inline-block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
  opacity: 1;
}

.dd-flip-n{
  position: relative;
  transform: rotateY(0deg) translateZ(0.01px);
  font-style: normal;
  font-weight: inherit;
}

.dd-flip-i{
  position: absolute;
  left: 0;
  top: 0;
  font-style: italic;
  font-weight: 300;
  transform: rotateY(-180deg) translateZ(0.01px);
}

/* =========================================================
   PAGE LOADER STYLES
   ========================================================= */

/* REMOVED: All hiding CSS rules - no longer needed */

html{ scrollbar-gutter: stable; }

.pl-wr{ opacity: 0; }

.pl-wr,
.pl-content,
.pl-loader,
.pl-loader-bar,
.loader-intro-txt,
.tomai-logo-logo-pl,
.tomai-logo-hero{
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ✅ NO BLUR */
.pl-wr{
  background: rgba(0,0,0,0.25);
  will-change: height, opacity;
  overflow: hidden;
}

.pl-content{ width:100%; height:100%; will-change: transform; }

/* =========================================================
   MOSAIC: NUCLEAR OVERRIDE (beats row-reverse on published)
   ========================================================= */
html body .cms-project-list.w-dyn-items[data-mosaic="list"]{
  display: flex !important;
  flex-flow: row wrap !important;      /* row + wrap in one */
  flex-direction: row !important;      /* explicit */
  flex-wrap: wrap !important;          /* explicit */
  justify-content: flex-start !important;
  align-content: flex-start !important;
  direction: ltr !important;
}

html body .cms-project-list.w-dyn-items[data-mosaic="list"] > .cms-project-item.w-dyn-item{
  position: relative !important;
}

/* =========================================================
   REMOVED: FOUC prevention CSS rules
   These are no longer needed since we removed the hiding logic
   ========================================================= */

/* REMOVED: All FOUC prevention CSS - no longer needed */

/* =========================================================
   HIDE SCROLLBAR (still scrollable)
   ========================================================= */
html, body{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;   /* Chrome/Safari */
}

/* =========================================================
   BODY BACKGROUND COLOR
   ========================================================= */
html,
html body,
body.wf-body,
body{
  background-color: #0a0a0a !important;
  background: #0a0a0a !important;
}

/* =========================================================
   BARBA.JS CONTAINER STYLES
   Required for smooth slide transitions without layout jumps
   DISABLED: Commented out since Barba.js is currently disabled
   ========================================================= */
/* 
body[data-barba="wrapper"] {
  overflow-x: hidden;
  position: relative;
}

[data-barba="container"] {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  will-change: transform;
}
*/

/* Reset Barba container styles when Barba is disabled */
/* This ensures fixed elements work correctly */
/* Apply to both data attribute and common class names */
[data-barba="container"],
.main-wrapper[data-barba="container"],
.page-wrapper[data-barba="container"],
.main-wrapper,
.page-wrapper {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  will-change: auto !important;
  transform: none !important;
  /* Ensure no containing block is created */
  isolation: auto !important;
  contain: none !important;
}

/* Ensure fixed elements inside these containers are positioned relative to viewport */
[data-barba="container"] [style*="position: fixed"],
.main-wrapper [style*="position: fixed"],
.page-wrapper [style*="position: fixed"],
[data-barba="container"] .menu-dd,
.main-wrapper .menu-dd,
.page-wrapper .menu-dd {
  position: fixed !important;
  /* Force positioning relative to viewport */
  transform: none !important;
}

/* =========================================================
   MENU DROPDOWN - Must be fixed to viewport, not container
   Since menu is inside container, we need to ensure it's truly fixed
   ========================================================= */
.menu-dd {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 9999 !important;
  /* Ensure it's not affected by parent transforms */
  transform: none !important;
  /* Remove from document flow completely */
  pointer-events: none;
}

.menu-dd[style*="clip-path"] {
  pointer-events: auto;
}

/* =========================================================
   MENU DROPDOWN - Keep fixed during page transitions
   Menu should stay fixed even though it's inside the container
   ========================================================= */
.menu-dd {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
}

.menu-dd[style*="clip-path"] {
  pointer-events: auto;
}

/* =========================================================
   PAGE TRANSITIONS - Initial hidden state
   ========================================================= */
/* DISABLED: These classes cause black screen issues */
/* body.tm-transition-pending{
  opacity: 0 !important;
  visibility: hidden !important;
} */
body.tm-transition-visible{
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 1.2s ease, visibility 1.2s ease;
}

/* Device detection removed - using CSS media queries exclusively */

/* =========================================================
   RNDMONSTER - GLOBAL PAGE PADDING KNOB
   ========================================================= */
:root{
  --rnd-page-pad-d: 3vw;
  --rnd-page-pad-m: 5vw;
  --rnd-page-pad: var(--rnd-page-pad-d);
}
@media (max-width: 767px){
  :root{ --rnd-page-pad: var(--rnd-page-pad-m); }
}
.p-wr-r,
.grid-r-wr{
  padding-left: var(--rnd-page-pad) !important;
  padding-right: var(--rnd-page-pad) !important;
  box-sizing: border-box;
}

/* =========================================================
   ✅ NO BLEED (cancels page pad, keeps section padding usable)
   Add to any section/wrapper: data-bleed="no"
   ========================================================= */
[data-bleed="no"]{
  margin-left: calc(var(--rnd-page-pad) * -1) !important;
  margin-right: calc(var(--rnd-page-pad) * -1) !important;
  width: calc(100% + (var(--rnd-page-pad) * 2)) !important;
  overflow-x: clip;
}

/* About page: 100% width of .about-section container (no breakout, no extra padding) */
.about-section{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}
.about-section .p-wr-r,
.about-section .grid-r-wr,
.about-section .w-container,
.about-section .container,
.about-section [class*="container"],
.about-section > div{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* =========================================================
   RNDMONSTER - TYPE ENGINE (data-type only)
   ========================================================= */
[data-type="herotitle-r"]{
  font-size: clamp(2.8rem, 7.2vw, 8rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
}
[data-type="menutitle-r"]{
  font-size: clamp(1.9rem, 5.2vw, 4rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.045em !important;
}
[data-type="pagetitle-r"]{
  font-size: clamp(2.9rem, 5.2vw, 5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
}
[data-type="subtitle-r"]{
  font-size: clamp(1.20rem, 2.5vw, 999px) !important;
  line-height: 1.20 !important;
  letter-spacing: -0.02em !important;
}
[data-type="herosubtitle-r"]{
  font-size: clamp(2.2rem, 3.0vw, 999px) !important;
  line-height: 1.20 !important;
  letter-spacing: -0.02em !important;
}
[data-type="titleparagraph-r"]{
  font-size: clamp(1.3rem, 2vw, 999px) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
}

[data-type="paragraph-r"]{
  font-size: clamp(0.85rem, 1.0vw, 999px) !important;
  line-height: 1.40 !important;
  letter-spacing: -0.01em !important;
}
[data-type="paragraph-r-beauty"]{
  font-size: clamp(20px, 1.6vw, 999px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

[data-type="info-r"]{
  font-size: clamp(12px, 0.8vw, 14px) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}

[data-type="note-r"],
[data-icon="note-r"]{
  font-size: clamp(13px, 1.0vw, 1.3rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
}

/* =========================================================
   ✅ NEW: NOTE-R-BEAUTY
   Default: same "note vibe" but a bit more elegant.
   991px and down: DOUBLE size.
   ========================================================= */
[data-type="note-r-beauty"],
[data-icon="note-r-beauty"]{
  font-size: clamp(15px, 1.8vw, 999px) !important;
  line-height: 1 !important;
  letter-spacing: -0.005em !important;
}
@media (max-width: 991px){
  [data-type="note-r-beauty"],
  [data-icon="note-r-beauty"]{
    font-size: clamp(30px, 3.6vw, 999px) !important;
  }
}

[data-type="label-r"],
[data-icon="label-r"]{
  font-size: clamp(11px, 0.7vw, 999px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.0020em !important;
}

/* =========================================================
   GRID-R ENGINE
   ========================================================= */
:root{
  --rnd-cols: 12;
  --rnd-gap-d: 0.8vw;
  --rnd-gap-m: 1.2vw;
  --rnd-gap: var(--rnd-gap-d);

  --rnd-col-size: calc((100vw - ((var(--rnd-cols) - 1) * var(--rnd-gap))) / var(--rnd-cols));
  --rnd-m-base: calc((var(--rnd-col-size) / 2) + var(--rnd-gap));
  --rnd-m-full: calc(var(--rnd-col-size) + var(--rnd-gap));
}

@media (max-width: 767px){
  :root{
    --rnd-cols: 8;
    --rnd-gap: var(--rnd-gap-m);
  }

  .grid-r-wr > .grid-r-col-9,
  .grid-r-wr > .grid-r-col-10,
  .grid-r-wr > .grid-r-col-11,
  .grid-r-wr > .grid-r-col-12{ display: none !important; }

  .grid-r-wr > .grid-r-col-8{ border-right-width: 0 !important; }
}

.grid-r-wr{
  pointer-events: none;
  column-gap: var(--rnd-gap) !important;
  row-gap: 0 !important;
  grid-column-gap: var(--rnd-gap) !important;
  grid-row-gap: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(var(--rnd-cols), minmax(0, 1fr)) !important;
}

.grid-r-wr > [class^="grid-r-col-"]{
  box-sizing: border-box;
  border-style: solid;
  border-width: 0 1px;
  border-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.09) 0px,
    rgba(255,255,255,0.09) 3px,
    transparent 1px,
    transparent 6px
  ) 1 stretch;
}
.grid-r-wr > .grid-r-col-1{ border-left-width: 0; }
.grid-r-wr > .grid-r-col-12{ border-right-width: 0; }

/* =========================
   DATA PADDING + MARGINS
   ========================= */
[data-p-y="halfcol"]{ padding-top: var(--rnd-m-base); padding-bottom: var(--rnd-m-base); }
[data-p-y="col"]{ padding-top: var(--rnd-m-full); padding-bottom: var(--rnd-m-full); }
[data-p-y="gutter"]{ padding-top: var(--rnd-gap); padding-bottom: var(--rnd-gap); }

[data-p-y="0"]{ padding-top: 0 !important; padding-bottom: 0 !important; }
[data-p-y="gutterx2"]{ padding-top: calc(var(--rnd-gap) * 2) !important; padding-bottom: calc(var(--rnd-gap) * 2) !important; }
[data-p-y="gutterx3"]{ padding-top: calc(var(--rnd-gap) * 3) !important; padding-bottom: calc(var(--rnd-gap) * 3) !important; }
[data-p-y="gutterx4"]{ padding-top: calc(var(--rnd-gap) * 4) !important; padding-bottom: calc(var(--rnd-gap) * 4) !important; }

[data-p-x="col"]{ padding-left: var(--rnd-m-full); padding-right: var(--rnd-m-full); }
[data-p-x="halfcol"]{ padding-left: var(--rnd-m-base); padding-right: var(--rnd-m-base); }
[data-p-x="gutter"]{ padding-left: var(--rnd-gap); padding-right: var(--rnd-gap); }

[data-p-x="gutterx2"]{ padding-left: calc(var(--rnd-gap) * 2); padding-right: calc(var(--rnd-gap) * 2); }
[data-p-x="gutterx3"]{ padding-left: calc(var(--rnd-gap) * 3); padding-right: calc(var(--rnd-gap) * 3); }
[data-p-x="gutterx4"]{ padding-left: calc(var(--rnd-gap) * 4); padding-right: calc(var(--rnd-gap) * 4); }

[data-p-bot="halfcol"]{ padding-bottom: var(--rnd-m-base); }
[data-p-bot="col"]{ padding-bottom: var(--rnd-m-full); }
[data-p-bot="gutter"]{ padding-bottom: var(--rnd-gap); }
[data-p-bot="gutterx2"]{ padding-bottom: calc(var(--rnd-gap) * 2); }

[data-p-top="halfcol"]{ padding-top: var(--rnd-m-base); }
[data-p-top="col"]{ padding-top: var(--rnd-m-full); }
[data-p-top="gutter"]{ padding-top: var(--rnd-gap); }
[data-p-top="gutterx2"]{ padding-top: calc(var(--rnd-gap) * 2) !important; }

[data-p="gutter"]{ padding: var(--rnd-gap); }
[data-p="gutterx2"]{ padding: calc(var(--rnd-gap) * 2); }
[data-p="gutterx3"]{ padding: calc(var(--rnd-gap) * 3); }
[data-p="gutterx4"]{ padding: calc(var(--rnd-gap) * 4); }
[data-p="halfgutter"]{ padding: calc(var(--rnd-gap) / 2); }

/* =========================================================
   ✅ NEW: DATA MARGINS TOP/BOT (mirrors data-p-top / data-p-bot)
   ========================================================= */
[data-m-top="halfcol"]{ margin-top: var(--rnd-m-base); }
[data-m-top="col"]{ margin-top: var(--rnd-m-full); }
[data-m-top="gutter"]{ margin-top: var(--rnd-gap); }
[data-m-top="gutterx2"]{ margin-top: calc(var(--rnd-gap) * 2); }
[data-m-top="gutterx3"]{ margin-top: calc(var(--rnd-gap) * 3); }
[data-m-top="gutterx4"]{ margin-top: calc(var(--rnd-gap) * 4); }
[data-m-top="halfgutter"]{ margin-top: calc(var(--rnd-gap) / 2); }
[data-m-top="0"]{ margin-top: 0 !important; }

[data-m-bot="halfcol"]{ margin-bottom: var(--rnd-m-base); }
[data-m-bot="col"]{ margin-bottom: var(--rnd-m-full); }
[data-m-bot="gutter"]{ margin-bottom: var(--rnd-gap); }
[data-m-bot="gutterx2"]{ margin-bottom: calc(var(--rnd-gap) * 2); }
[data-m-bot="gutterx3"]{ margin-bottom: calc(var(--rnd-gap) * 3); }
[data-m-bot="gutterx4"]{ margin-bottom: calc(var(--rnd-gap) * 4); }
[data-m-bot="halfgutter"]{ margin-bottom: calc(var(--rnd-gap) / 2); }
[data-m-bot="0"]{ margin-bottom: 0 !important; }

[data-m-y="halftop"]{ margin-top: var(--rnd-m-base); }
[data-m-y="halfbot"]{ margin-bottom: var(--rnd-m-base); }
[data-m-y="top"]{ margin-top: var(--rnd-m-full); }
[data-m-y="bot"]{ margin-bottom: var(--rnd-m-full); }

[data-m-y="gutter-top"]{ margin-top: var(--rnd-gap); }
[data-m-y="gutter-bot"]{ margin-bottom: var(--rnd-gap); }
[data-m-y="gutter"]{ margin-top: var(--rnd-gap); margin-bottom: var(--rnd-gap); }

[data-m-y="topx2"]{ margin-top: calc(var(--rnd-m-base) * 2); }
[data-m-y="topx3"]{ margin-top: calc(var(--rnd-m-base) * 3); }
[data-m-y="topx4"]{ margin-top: calc(var(--rnd-m-base) * 4); }
[data-m-y="topx5"]{ margin-top: calc(var(--rnd-m-base) * 5); }

[data-m-y="botx2"]{ margin-bottom: calc(var(--rnd-m-base) * 2); }
[data-m-y="botx3"]{ margin-bottom: calc(var(--rnd-m-base) * 3); }
[data-m-y="botx4"]{ margin-bottom: calc(var(--rnd-m-base) * 4); }
[data-m-y="botx5"]{ margin-bottom: calc(var(--rnd-m-base) * 5); }

[data-m-y-top="gutter"]{ margin-top: var(--rnd-gap); }
[data-m-y-top="gutterx2"]{ margin-top: calc(var(--rnd-gap) * 2); }
[data-m-y-top="gutterx3"]{ margin-top: calc(var(--rnd-gap) * 3); }
[data-m-y-top="gutterx4"]{ margin-top: calc(var(--rnd-gap) * 4); }

[data-m-y-bot="gutter"]{ margin-bottom: var(--rnd-gap); }
[data-m-y-bot="gutterx2"]{ margin-bottom: calc(var(--rnd-gap) * 2); }
[data-m-y-bot="gutterx3"]{ margin-bottom: calc(var(--rnd-gap) * 3); }
[data-m-y-bot="gutterx4"]{ margin-bottom: calc(var(--rnd-gap) * 4); }

/* =========================================================
   DATA-GRID-R (LAYOUT GRID)
   ========================================================= */
.data-grid-r{
  display: grid;
  box-sizing: border-box;
  grid-template-columns: repeat(var(--rnd-cols), minmax(0, 1fr));
  column-gap: var(--rnd-gap);
}

[data-gap="gutter"]{ gap: var(--rnd-gap); }

.data-grid-r-item{
  box-sizing: border-box;
  --start: 1;
  --end: -1;
  grid-column: var(--start) / var(--end);
}

/* =========================================================
   ICON SYSTEM
   ========================================================= */
[data-icon="label-r"]{ display: inline-flex; align-items: center; line-height: 1; }
[data-icon="label-r"] svg,
[data-icon="label-r"] img{ height: 0.8em; width: auto; display: block; }

[data-icon="note-r"]{ display: inline-flex; align-items: center; line-height: 1; }
[data-icon="note-r"] svg,
[data-icon="note-r"] img{ height: 1em; width: auto; display: block; }

/* ==============================
   MOSAIC LAYOUT (PROJECT GRID)
   Pattern:
     Desktop (>= 992): 2 / 1 / 2 / 1 repeating (50,50,100)
     Tablet (<= 991): 1 / 2 / 2 repeating (100,50,50)
   ============================== */

[data-mosaic="list"]{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  position: relative;
  gap: var(--rnd-gap);
}

/* No padding gutters. gap handles both vertical + horizontal spacing */
[data-mosaic="list"] > [data-mosaic-item]{
  position: relative;
  box-sizing: border-box;
  padding: 0 !important;
  width: auto !important;       /* critical in Webflow */
  max-width: none !important;   /* critical in Webflow */
}

/* Desktop: 2 / 1 repeating */
@media (min-width: 992px){
  /* half tiles */
  [data-mosaic="list"] > [data-mosaic-item]{
    flex: 0 0 calc((100% - var(--rnd-gap)) / 2) !important;
  }
  /* full-width every 3rd */
  [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n){
    flex: 0 0 100% !important;
  }

  /* ALSO target the actual Webflow CMS items (often the flex children) */
  html body .cms-project-list.w-dyn-items[data-mosaic="list"] > .cms-project-item.w-dyn-item{
    width: auto !important;
    max-width: none !important;
    flex: 0 0 calc((100% - var(--rnd-gap)) / 2) !important;
  }
  html body .cms-project-list.w-dyn-items[data-mosaic="list"] > .cms-project-item.w-dyn-item:nth-child(3n){
    flex: 0 0 100% !important;
  }
}

/* Tablet and down: 1 / 2 / 2 repeating */
@media (max-width: 991px){
  [data-mosaic="list"] > [data-mosaic-item]{
    flex: 0 0 calc((100% - var(--rnd-gap)) / 2);
  }
  [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n+1){
    flex-basis: 100%;
  }
  [data-mosaic="list"] > [data-mosaic-item]:last-child:nth-child(3n+2){
    display: none;
  }
}

/* =========================================================
   THUMBNAIL ASPECT RATIOS FOR MOSAIC ITEMS
   ========================================================= */
[data-mosaic="list"] .thumbnailwrap-r{
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden;
}
[data-mosaic="list"] .thumbnailwrap-r::before{ content: ""; display: block; padding-bottom: 100%; }
[data-mosaic="list"] .thumbnailwrap-r > *{
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
/* Desktop: full-width (every 3rd) becomes 16:9 */
@media (min-width: 992px){
  [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n) .thumbnailwrap-r::before{ padding-bottom: 56.25%; }
  html body .cms-project-list.w-dyn-items[data-mosaic="list"] > .cms-project-item.w-dyn-item:nth-child(3n) .thumbnailwrap-r::before{ padding-bottom: 56.25%; }
}

/* Tablet: full-width (3n+1) becomes 16:9 */
@media (max-width: 991px){
  [data-mosaic="list"] > [data-mosaic-item]:nth-child(3n+1) .thumbnailwrap-r::before{ padding-bottom: 56.25%; }
}

/* =========================================================
   CHILD HALF-COLUMN PADDING (inside .data-grid-r only)
   ========================================================= */
.data-grid-r [data-p-x="halfcol-child"]{
  padding-left: var(--rnd-m-base);
  padding-right: var(--rnd-m-base);
}

/* =========================================================
   ✅ GLOBAL TYPE COLOR (EXCLUDING KEEP-COLOR ZONES)
   ========================================================= */
:root{ --rnd-type-color: #ffffff; }

html body [data-type]:not([data-type-keep-color="true"] *),
html body [data-icon]:not([data-type-keep-color="true"] *),
html body [data-type] *:not([data-type-keep-color="true"] *),
html body [data-icon] *:not([data-type-keep-color="true"] *){ color: var(--rnd-type-color); }

html body [data-type] a:not([data-type-keep-color="true"] *),
html body [data-icon] a:not([data-type-keep-color="true"] *){ color: var(--rnd-type-color); }

/* =========================================================
   ✅ RND BG DEFAULT (used by JS)
   ========================================================= */
:root{ --rnd-bg-default: #10120f; }

/* =========================================================
   ✅ GLOBAL LINK RESET (NO COLOR HIJACK)
   ========================================================= */
a{ text-decoration: none; }
a:hover, a:focus, a:active{ text-decoration: none; }
a:visited{ text-decoration: none; }
a:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-decoration: none;
}

/* =========================================================
   ✅ OPTIONAL: INHERIT-LINK MODE (for "div buttons")
   ========================================================= */
[data-link-reset="inherit"] a,
[data-link-reset="inherit"] a:visited,
[data-link-reset="inherit"] a:hover,
[data-link-reset="inherit"] a:focus,
[data-link-reset="inherit"] a:active{
  color: inherit !important;
  text-decoration: none !important;
}

/* =========================================================
   ✅ BLEND MODE UTILS
   ========================================================= */
[data-blend="difference"]{ mix-blend-mode: difference !important; }

/* =========================================================
   ✅ CLICK-THROUGH (FIXED, NESTABLE, DOES NOT TOUCH GRID SYSTEM)
   ========================================================= */

html body [data-click="through"]{
  pointer-events: none !important;
}
html body [data-click="through"] *{
  pointer-events: none !important;
}

html body [data-click="through-wrapper"],
html body [data-click="through-wrap"],
html body [data-click-through-wrapper="true"]{
  pointer-events: none !important;
}

html body [data-click="through-wrapper"] :where(*):not([data-click="through"]):not([data-click="through-wrapper"]):not([data-click="through-wrap"]):not([data-click-through-wrapper="true"]),
html body [data-click="through-wrap"] :where(*):not([data-click="through"]):not([data-click="through-wrapper"]):not([data-click="through-wrap"]):not([data-click-through-wrapper="true"]),
html body [data-click-through-wrapper="true"] :where(*):not([data-click="through"]):not([data-click="through-wrapper"]):not([data-click="through-wrap"]):not([data-click-through-wrapper="true"]){
  pointer-events: auto !important;
}

/* =========================================================
   RNDMONSTER - SFX (STABLE + NO TECH FLASH)
   ========================================================= */

/* Hide only what MUST be hidden from first paint
   Only hide when JS is loaded (tm-js class) - keeps text visible in Webflow designer */
html.tm-js [data-sfx="title"],
html.tm-js [data-sfx="reveal"],
html.tm-js [data-sfx="tech"],
html.tm-js [data-sfx="paragraph"],
html.tm-js [data-sfx="pulse"],
html.tm-js [data-sfx="blink"],
html.tm-js [data-sfx="fill"]{
  opacity: 0; /* prevents visible-before-animation */
}

/* ---------------- TOMAI LOGO (hero-aware hide/show) ----------------
   Default: hidden (no flash). JS will reveal immediately if hero is not visible OR hero doesn't exist.
   IMPORTANT: we DO NOT set transform here (so we don't override Webflow positioning).
*/
html.tm-js .tomai-logo-img-wr{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------------- FADE (leave viewport) ---------------- */
[data-sfx="fade"]{
  opacity: 1;
  will-change: opacity;
}

/* ---------------- FADE BOT (real transparency mask) ---------------- */
/* Optional per element:
   data-sfx-fade-bot-size="30%"  (or "120px", "18vh")
*/
[data-sfx="fade-bot"]{
  --sfx-fade-bot: 26%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - var(--sfx-fade-bot)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - var(--sfx-fade-bot)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ---------------- PARALLAX ---------------- */
.sfx-parallax-target{
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ---------------- PARAGRAPH ---------------- */
[data-sfx="paragraph"]{ perspective: 900px; }
[data-sfx="paragraph"] .pg-line{
  display: block;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* ---------------- TITLE (FIXED LINE-HEIGHT) ---------------- */
[data-sfx="title"] .tt-word{
  display: inline-block;
  white-space: nowrap;
}
[data-sfx="title"] .tt-char{
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* ---------------- FILL (letter opacity fill) ----------------
   FIX: Do NOT use inline-block or transforms on chars.
   We build spans ourselves (no SplitText) so line-height stays exact.
*/
[data-sfx="fill"]{
  /* parent will be set to opacity:1 in JS, keep metrics untouched */
}
[data-sfx="fill"] .sfx-fill-char{
  display: inline-block !important;
  position: relative !important;
  float: none !important;
  line-height: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  vertical-align: baseline !important;
  transform: none !important;
  will-change: opacity;
}

/* ---------------- REVEAL ---------------- */
[data-sfx="reveal"]{
  position: relative;
  overflow: hidden;
}

/* ---------------- TECH (FIXED CURSOR + NO FLASH) ---------------- */
.sfx-tech-host{
  position: relative;
  display: block;
  width: 100%;
}
.sfx-tech-ghost{
  visibility: hidden;
  opacity: 0;
  display: block;
}
.sfx-tech-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
}
.sfx-tech-char{
  display: inline-block;
  opacity: 0;
  line-height: inherit;
  vertical-align: baseline;
}
.sfx-tech-cursor{
  position: absolute;
  left: 0;
  top: 0;
  width: 1.05em;
  height: 1.05em;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

/* =========================================================
   MENU SYSTEM STYLES
   ========================================================= */
.tm-menu-txt,
.menu-open-txt{
  display:inline-block;
  overflow:hidden;
  vertical-align:baseline;
}

.sub-menu-dropdown{
  overflow:hidden;
  will-change:height;
}

/* =========================================================
   MAIN MENU DROPDOWN (overlay + reveal mask)
   ========================================================= */
.menu-dd{
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--tm-menu-vh, 100svh) !important;
  overflow: hidden;
  will-change: clip-path, transform;
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Inner wrapper */
.menu-content-wr{ height: 100%; }

.tm-char-run{ display:inline-block; white-space:pre; }
.tm-char{ display:inline-block; will-change:transform,opacity; }

/* =========================================================
   FORCE DD MENU STACK (flex down, align left)
   ========================================================= */
.dd-menu-btns-wr{
  display:flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* =========================================================
   DD MENU ITEMS (mask per item + slide)
   ========================================================= */
.dd-menu-btn{ overflow: hidden; }
.dd-menu-btn-txt{
  display:inline-block;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  perspective: 900px;
  -webkit-perspective: 900px;
}

/* Sector list hidden by default (JS toggles) */
.dd-menu-sector-btns{ display:none; }

/* Back arrow animates like items */
.menu-back-arrow-wr{
  overflow:hidden;
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* =========================================================
   DD MENU HOVER FLIP (normal -> italic + light)
   ========================================================= */
.dd-flip-run{ display:inline-block; white-space:pre; }

.dd-flip-char{
  display:inline-block;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}

.dd-flip-face{
  display:inline-block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
  opacity: 1;
}

.dd-flip-n{
  position: relative;
  transform: rotateY(0deg) translateZ(0.01px);
  font-style: normal;
  font-weight: inherit;
}

.dd-flip-i{
  position: absolute;
  left: 0;
  top: 0;
  font-style: italic;
  font-weight: 300;
  transform: rotateY(-180deg) translateZ(0.01px);
}

/* =========================================================
   PAGE LOADER STYLES
   ========================================================= */

/* REMOVED: All hiding CSS rules - no longer needed */

html{ scrollbar-gutter: stable; }

.pl-wr{ opacity: 0; }

.pl-wr,
.pl-content,
.pl-loader,
.pl-loader-bar,
.loader-intro-txt,
.tomai-logo-logo-pl,
.tomai-logo-hero{
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ✅ NO BLUR */
.pl-wr{
  background: rgba(0,0,0,0.25);
  will-change: height, opacity;
  overflow: hidden;
}

.pl-content{ width:100%; height:100%; will-change: transform; }

/* =========================================================
   MOSAIC: NUCLEAR OVERRIDE (beats row-reverse on published)
   ========================================================= */
html body .cms-project-list.w-dyn-items[data-mosaic="list"]{
  display: flex !important;
  flex-flow: row wrap !important;      /* row + wrap in one */
  flex-direction: row !important;      /* explicit */
  flex-wrap: wrap !important;          /* explicit */
  justify-content: flex-start !important;
  align-content: flex-start !important;
  direction: ltr !important;
}

html body .cms-project-list.w-dyn-items[data-mosaic="list"] > .cms-project-item.w-dyn-item{
  position: relative !important;
}