@font-face {
  font-family: "Stack Sans Notch";
  src: url("/assets/fonts/stack-sans-notch-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Stack Sans Notch";
  src: url("/assets/fonts/stack-sans-notch-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Stack Sans Text";
  src: url("/assets/fonts/stack-sans-text-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Stack Sans Text";
  src: url("/assets/fonts/stack-sans-text-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* Preserve the template's existing font aliases while replacing their files. */
@font-face {
  font-family: title;
  src: url("/assets/fonts/stack-sans-notch-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: title;
  src: url("/assets/fonts/stack-sans-notch-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: text;
  src: url("/assets/fonts/stack-sans-text-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: text;
  src: url("/assets/fonts/stack-sans-text-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --studio-ink: #0A0D12;
  --studio-petrol: #1D6FFF;
  --studio-paper: #E8EDF2;
  --studio-rust: #1D6FFF;
  --studio-stone: #79828E;
  --studio-mustard: #B8FF3D;
  --studio-grid: #252B33;
}

html,
body,
button,
input,
textarea,
select {
  font-family: text, "Stack Sans Text", sans-serif;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: title, "Stack Sans Notch", sans-serif;
  font-weight: 500;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}

:where(p, li, dt, dd, a, button, label, span) {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

strong,
b {
  font-weight: 500;
}

::selection {
  background: #B8FF3D;
  color: #0A0D12;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid #1D6FFF;
  outline-offset: 4px;
}

@media screen and (max-width: 700px) {
  :where(h1, h2, h3, h4, h5, h6, p, li, a, button, span) {
    max-width: 100%;
  }
}


/* The application is interactive before every 3D asset finishes loading. */
html.milad-site-ready .loaderBlock,
body.milad-site-ready .loaderBlock {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 420ms ease, visibility 0s linear 420ms !important;
}


/* TYPOGRAPHY-SAFETY-2026-08-15 */
:where(h1, h2, h3, h4, h5, h6) {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Keep the three interactive hero titles inside the viewport at every width. */
.beeBlock__container .container__titles--default .titles__wrapper .wrapper .title,
.beeBlock__container .container__titles--reveal .titles__wrapper .wrapper .title {
  box-sizing: border-box;
  width: 90% !important;
  max-width: 90% !important;
  margin-inline: auto !important;
  font-size: clamp(2.125rem, 8.2vw, 11.25rem) !important;
  line-height: 0.88 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Each cinematic line remains a whole line instead of wrapping letter-by-letter. */
.webglSectionBlock__textWrapper .textWrapper__inner {
  width: min(92vw, 108rem) !important;
  max-width: min(92vw, 108rem) !important;
}

.webglSectionBlock__text {
  font-size: clamp(2rem, 7.45vw, 10.25rem) !important;
  line-height: 0.84 !important;
}

.webglSectionBlock__text .text__line {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.webglSectionBlock__text .webglSection-char {
  white-space: pre !important;
}

/* The About statement keeps its rhythm while every phrase remains readable. */
.flowersBlock__container {
  grid-column: 1 / -1 !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100vw !important;
  padding-inline: clamp(1rem, 4vw, 5rem) !important;
  overflow: clip;
}

.flowersBlock__line {
  box-sizing: border-box;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center;
  flex-wrap: wrap;
}

.flowersBlock__line .line__wrapper {
  max-width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.flowersBlock__line .line__title {
  max-width: calc(100vw - 2rem) !important;
  font-size: clamp(2.1rem, 6.6vw, 8.5rem) !important;
  line-height: 0.9 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Restore visible spacing between the focus label and both links. */
.heroBlock__top .top__infos .infos__agencies {
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  column-gap: 0.65rem;
  row-gap: 0.25rem;
}

.heroBlock__top .top__infos .infos__agencies .agencies__text,
.heroBlock__top .top__infos .infos__agencies .agencyLink {
  margin-right: 0 !important;
  white-space: nowrap !important;
}

.heroBlock__top .top__infos .infos__agencies .agencyLink {
  margin-top: -0.35rem !important;
  margin-bottom: -0.35rem !important;
  margin-left: 0 !important;
  padding: 0.35rem 0 !important;
}

.heroBlock__top .top__city,
.heroBlock__top .top__infos .infos__text .wrapper {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

@media screen and (max-width: 1025px) {
  .heroBlock__top .top__infos .infos__agencies {
    justify-content: center;
  }

  .webglSectionBlock__textWrapper .textWrapper__inner {
    width: 94vw !important;
    max-width: 94vw !important;
  }
}

@media screen and (max-width: 520px) {
  .beeBlock__container .container__titles--default .titles__wrapper .wrapper .title,
  .beeBlock__container .container__titles--reveal .titles__wrapper .wrapper .title {
    width: 88% !important;
    max-width: 88% !important;
    font-size: clamp(2rem, 9.2vw, 3rem) !important;
  }

  .webglSectionBlock__text {
    font-size: clamp(1.85rem, 9vw, 2.35rem) !important;
  }

  .flowersBlock__container {
    padding-inline: 1rem !important;
  }

  .flowersBlock__line .line__title {
    font-size: clamp(1.95rem, 8.6vw, 2.5rem) !important;
  }
}


/* FOCUS-LINK-SPACING-2026-08-15 */
.heroBlock__top .top__infos .infos__text .wrapper {
  align-items: baseline;
  column-gap: 0.75rem !important;
  row-gap: 0.25rem;
  flex-wrap: wrap;
}

.heroBlock__top .top__infos .infos__text .wrapper .agencyLink {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

@media screen and (max-width: 1025px) {
  .heroBlock__top .top__infos .infos__text .wrapper {
    justify-content: center !important;
  }
}

/* MOBILE-NAV-LEO-REFINEMENT-2026-08-26 */
@media screen and (max-width:500px){
  .navbarBlock{
    box-sizing:border-box!important;
    min-height:88px!important;
    padding-top:max(24px,env(safe-area-inset-top))!important;
  }
  .navbarBlock__left,
  .navbarBlock__right{
    box-sizing:border-box!important;
    padding-inline:20px!important;
  }
  .navbarBlock__left{
    height:64px!important;
    margin-top:0!important;
  }
  .navbarBlock__right{
    margin-top:0!important;
    top:max(24px,env(safe-area-inset-top))!important;
    height:64px!important;
    display:flex!important;
    align-items:center!important;
  }
  .navbarBlock__left .left__title{
    margin-left:0!important;
    min-width:0!important;
    font-size:13px!important;
    line-height:1.05!important;
  }
  .navbarBlock__right .right__buttons{
    grid-column:auto!important;
    margin-left:auto!important;
    gap:14px!important;
  }

  .navbarBlock__menu{
    box-sizing:border-box!important;
    min-height:min(720px,100dvh)!important;
    max-height:100dvh!important;
    padding:
      max(24px,env(safe-area-inset-top))
      20px
      max(24px,env(safe-area-inset-bottom))!important;
    border-radius:0 0 16px 16px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;

  }
  .navbarBlock__menu .menu__infos{
    grid-column:1/-1!important;
    width:auto!important;
    max-width:220px!important;
    margin-top:72px!important;
    font-size:13px!important;
    line-height:1.2!important;
  }
  .navbarBlock__menu .menu__links{
    grid-column:1/-1!important;
    gap:0!important;
    width:100%!important;
    margin-top:auto!important;
    margin-bottom:0!important;
    padding-top:96px!important;
  }
  .navbarBlock__menu .menu__links .links__link,
  .navbarBlock__menu .menu__links .links__lab,
  .navbarBlock__menu .menu__links a[href*="behance" i],
  .navbarBlock__menu .menu__links [href*="behance" i]{
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-family:title,"Stack Sans Notch",sans-serif!important;
    font-size:clamp(48px,14.5vw,68px)!important;
    font-variation-settings:"wght" 622!important;
    font-weight:500!important;
    line-height:.86!important;
    letter-spacing:-.055em!important;
    text-align:left!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
  }
  .navbarBlock__menu .menu__links .links__contact{
    min-width:0!important;
    margin-top:20px!important;
    font-size:15px!important;
    line-height:1.2!important;
  }
  .navbarBlock__menu .menu__links .links__contact[href*="behance" i],
  .navbarBlock__menu .menu__links a[href*="behance" i].links__contact{
    margin-top:0!important;
    font-family:title,"Stack Sans Notch",sans-serif!important;
    font-size:clamp(48px,14.5vw,68px)!important;
    line-height:.86!important;
    letter-spacing:-.055em!important;
    text-transform:uppercase!important;
  }

  .navbarBlock,
  .navbarBlock__left,
  .navbarBlock__right{
    background:transparent!important;
  }

  .navbarBlock__overlay{
    width:100vw!important;
    height:100dvh!important;
    background:#0A0D12!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  :where(a,button,[role="button"]){touch-action:manipulation}
  :where(a,button,[role="button"]):focus-visible{
    outline-offset:3px!important;
  }
}


/* MOBILE-WEBGL-RESTORE-2026-08-26 */
@media screen and (max-width: 1024px) {
  #milad-mobile-webgl-video {
    display: none !important;
  }

  #webgl-app,
  #webgl-top-app {
    display: block !important;
    visibility: visible !important;
  }

  #webgl-app.visible,
  #webgl-top-app.visible,
  html.milad-webgl-ready #webgl-app,
  html.milad-webgl-ready #webgl-top-app,
  body.milad-webgl-ready #webgl-app,
  body.milad-webgl-ready #webgl-top-app {
    opacity: 1 !important;
  }

  #canvas-app,
  #canvas-top-app,
  #canvas-app canvas,
  #canvas-top-app canvas {
    display: block !important;
    visibility: visible !important;
  }
}