.nav-desktop {
  display: none;
}

.hamburger {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  z-index: 130;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.75rem;
}

.hamburger::before {
  content: "Menü";
  color: var(--cream);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-mobile {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 110;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--navy);
  transform: translateY(-100%);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.nav-mobile.open {
  transform: translateY(0);
  pointer-events: auto;
}

.nav-mobile a {
  display: block;
  color: var(--cream);
  font-size: clamp(2rem, 8vw, 5rem);
  line-height: 1.1;
  text-decoration: none;
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 450ms ease,
    transform 450ms ease;
}

.nav-mobile.open a {
  opacity: 1;
  transform: translateY(0);
}

.nav-mobile.open a:nth-child(1) {
  transition-delay: 80ms;
}

.nav-mobile.open a:nth-child(2) {
  transition-delay: 160ms;
}

.nav-mobile.open a:nth-child(3) {
  transition-delay: 240ms;
}

.nav-mobile.open a:nth-child(4) {
  transition-delay: 320ms;
}

.nav-mobile.open a:nth-child(5) {
  transition-delay: 400ms;
}

.nav-mobile.open a:nth-child(6) {
  transition-delay: 480ms;
}

header {
  z-index: 120;
}

.roll-label {
  display: inline-grid;
  overflow: hidden;
  vertical-align: top;
}

.roll-label span {
  grid-column: 1;
  grid-row: 1;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.roll-label:hover span {
  transform: translateY(-100%);
}

.object-stage {
  position: relative;
  background: var(--cream);
  color: var(--navy);
  height: 190svh;
  overflow: clip;
}

.object-scene {
  position: sticky;
  top: 80px;
  height: calc(100svh - 80px);
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
}

.object-caption {
  position: absolute;
  left: 5%;
  top: 5%;
  max-width: 35ch;
  color: var(--navy);
}

.object-caption .eyebrow {
  color: var(--orange);
}

.object-word {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 42%;
  margin: 0;
  font-family: "Alice", serif;
  font-size: clamp(65px, 20vw, 310px);
  line-height: 1;
  letter-spacing: -0.05em;
  z-index: 2;
  color: var(--navy);
}

.object-word.material {
  top: 42%;
  color: var(--cream);
  text-shadow: 1px 2px 8px rgba(12,31,75,0.55);
  filter: url("#material-distort");
  z-index: 4;
  pointer-events: none;
}

.floating-object {
  position: absolute;
  z-index: 3;
  width: clamp(130px, 22vw, 340px);
}

.floating-object img {
  display: block;
  width: 100%;
  height: auto;
}

.floating-object:nth-child(1) {
  left: 3%;
  top: 30%;
}

.floating-object:nth-child(2) {
  left: 23%;
  top: 8%;
}

.floating-object:nth-child(3) {
  left: 44%;
  top: 52%;
}

.floating-object:nth-child(4) {
  left: 66%;
  top: 12%;
}

.floating-object:nth-child(5) {
  left: 79%;
  top: 54%;
}

.floating-object {
  animation: float-object 8s ease-in-out infinite alternate;
}

@keyframes float-object {
  from {
    transform: translateY(0) rotate(0deg);
  }

  to {
    transform: translateY(-12px) rotate(2deg);
  }
}

.object-orbit {
  position: absolute;
  top: 18%;
  left: 32%;
  width: 35%;
  height: 65%;
  z-index: 1;
}

.narrative {
  background: var(--cream);
  color: var(--navy);
  width: 100%;
  max-width: none;
  padding-inline: 5%;
}

.portrait-teaser {
  background: var(--cream);
  color: var(--navy);
  box-shadow: 0 0 0 100vmax var(--cream);
  clip-path: inset(0 -100vmax);
}

.portrait-teaser > * {
  padding-inline: 5%;
}

#asset-loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--cream);
}

#load-object {
  width: clamp(160px, 28vw, 280px);
}

#load-count {
  position: absolute;
  bottom: 7%;
  right: 7%;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

#asset-loader.is-done {
  transform: translateY(-100%);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
  animation: 650ms cubic-bezier(0.22, 1, 0.36, 1) both vt-old;
}

::view-transition-new(root) {
  animation: 650ms cubic-bezier(0.22, 1, 0.36, 1) both vt-new;
}

@keyframes vt-old {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8%);
  }
}

@keyframes vt-new {
  from {
    clip-path: inset(100% 0 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

.hero-video {
  transition: none;
}

@media (max-width: 767px) {
  .object-stage {
    height: 150svh;
  }

  .object-scene {
    top: 64px;
  }

  .object-caption {
    font-size: 14px;
  }

  .object-word {
    font-size: 20vw;
  }

  .floating-object {
    width: 30vw;
  }

  
}


@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.object-stage{height:auto;min-height:100vh}.object-scene{position:relative;min-height:85vh}}

/* Verified integration rules */
.material-word{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.object-caption{z-index:6}.object-caption .eyebrow{color:var(--terracotta)}
.object-word{font-weight:400;font-size:20vw;letter-spacing:-.05em;white-space:nowrap}
.objects{position:absolute;inset:0;z-index:3}
.floating-object img{filter:drop-shadow(0 18px 18px rgba(12,31,75,.18))}
.floating-object:nth-child(1){left:7%;top:25%}
.floating-object:nth-child(2){left:27%;top:10%}
.floating-object:nth-child(3){left:42%;top:60%}
.floating-object:nth-child(4){left:62%;top:15%}
.floating-object:nth-child(5){left:76%;top:55%;width:20vw}
#asset-loader{transition:transform .65s var(--ease)}
#load-object{mix-blend-mode:lighten;animation:float-object 3s ease-in-out infinite alternate}
#load-count::after{content:'%';margin-left:4px}
.hero-visual video{transition:none;will-change:transform}
.scroll-cue{position:absolute;bottom:18px;left:4vw;color:var(--oatmeal);font-size:10px;text-transform:uppercase;letter-spacing:.18em}
.scroll-cue::after{content:'↓';margin-left:15px;font-size:18px}
.service-list{box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax)}
.service-list .row,.service-list .row h3{color:var(--navy);border-color:var(--hairline-ink)}
.service-list .row-short{color:var(--navy)}
.service-list .row h3 a:hover{color:var(--terracotta)}
.portrait-teaser .btn:hover,.service-list .btn:hover{color:var(--terracotta);border-color:var(--terracotta)}
.roll-label{position:relative;display:block;height:1.15em;overflow:hidden}
.roll-label span{display:block;line-height:1.15;transition:transform .5s var(--ease)}
.roll-label span+span{position:absolute;top:100%;left:0}
.nav-mobile a:hover .roll-label span{transform:translateY(-100%)}
.nav-mobile a{border:0;min-width:40%;text-align:left}.nav-mobile a[aria-current=page]{color:var(--orange)}
.hamburger{gap:15px}.hamburger::before{font-size:11px}
@media(max-width:767px){.object-scene{height:calc(100svh - 80px)}.object-word{top:45%}.floating-object{width:35vw}.floating-object:nth-child(5){width:30vw}.object-caption{max-width:30ch}.nav-mobile a{min-width:75%}.service-list{padding-inline:24px}}
.hero-visual{width:100%;height:auto;aspect-ratio:1;min-width:0;min-height:0}
.hero-grid>* ,.portrait-teaser>*{min-width:0}
.portrait-frame{width:100%;box-sizing:border-box}
@media(min-width:901px) and (max-width:1150px){.hero-grid{gap:32px}.hero-title{font-size:clamp(42px,5.8vw,65px)}}
.home .object-stage{background:var(--cream);color:var(--navy)} .object-caption{color:var(--navy)} .object-scene{isolation:isolate}
.object-scene.material-ready .object-word{color:transparent}.material-word{z-index:4}

.object-caption{max-width:28ch}
@media(max-width:767px){.floating-object:nth-child(1){top:34%;left:3%}.floating-object:nth-child(2){top:25%;left:31%}.floating-object:nth-child(4){top:30%;left:64%}.floating-object:nth-child(3){top:64%;left:35%}.floating-object:nth-child(5){top:64%;left:73%}.object-caption{max-width:28ch}}
.fluid-mask{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.fluid-reveal{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.fluid-ready .objects{visibility:hidden}.fluid-ready .material-word{display:none}
.fluid-ready .object-word{color:var(--navy)}
.fluid-ready .object-caption{color:white;mix-blend-mode:difference;z-index:7}
.fluid-ready .object-caption .eyebrow{color:white}
.fluid-cue{position:absolute;bottom:4%;left:4vw;z-index:7;color:white;mix-blend-mode:difference;font-size:11px;letter-spacing:.03em}
@media(pointer:coarse){.fluid-cue{display:none}}
.object-scene{background:var(--cream);user-select:none;-webkit-user-select:none}
.footer-legal{display:flex;gap:24px;flex-wrap:wrap;font-size:13px}
.footer-legal a{color:var(--oatmeal)}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--orange)}
.object-word{text-align:center}

/* Desktop liquid responds to the pointer; it needs no scroll dwell.
   Keep the existing narrow-screen scroll interaction for phone review. */
@media (min-width:768px) {
  .home .object-stage { height:calc(100svh - 80px); min-height:0; }
  .home .object-stage .object-scene { position:relative; top:0; height:100%; min-height:0; }
}