/* Production polish layered over the original scroll-story styles. */
.header{height:132px;padding-top:18px;background:linear-gradient(180deg,rgba(3,5,3,.90) 0%,rgba(3,5,3,.48) 58%,rgba(3,5,3,0) 100%)}
.brand{width:252px;height:92px}
.phone{font-size:20px;font-weight:700;letter-spacing:.045em}
.header-right{gap:28px}
h1{font-size:clamp(42px,4.5vw,76px)}
h2{font-size:clamp(34px,3.55vw,58px)}
.copy{isolation:isolate}
.copy:before{content:"";position:absolute;z-index:-1;inset:-34px -42px;background:radial-gradient(ellipse at center,rgba(0,0,0,.38) 0%,rgba(0,0,0,.20) 42%,rgba(0,0,0,0) 74%);pointer-events:none}
.copy h1,.copy h2{color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.88),0 1px 4px rgba(0,0,0,.92)}
.kicker{color:#e0bf43!important;text-shadow:0 2px 10px rgba(0,0,0,.92);font-weight:700}
.intro,.copy>p:not(.kicker){font-size:clamp(16px,1.15vw,20px);line-height:1.55;color:rgba(255,255,255,.90)!important;font-weight:500;text-shadow:0 2px 12px rgba(0,0,0,.92);max-width:680px}
.microline{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.80)!important;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.contact-data{width:min(450px,36vw);gap:18px}
.contact-data a,.contact-company{transition:opacity .2s ease}
.contact-data a:hover{opacity:.78}
.contact-data a:hover strong{color:#f2efe6}
.contact-company{display:grid;gap:6px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.18)}
.contact-company small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.contact-company strong{font-weight:500;font-size:clamp(17px,1.45vw,24px);line-height:1.35}
.contact-company span{font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.52)}

/* Product/material names are the primary scene labels. */
.scene-log .material-caption,
.scene-boards .material-caption,
.scene-pallet .material-caption,
.scene-firewood .material-caption,
.scene-chips .material-caption{
  left:calc(var(--pad) + 44px);
  right:auto;
  top:164px;
  bottom:auto;
  font-size:clamp(40px,3.35vw,62px);
  line-height:.94;
  font-weight:500;
  max-width:min(680px,58vw);
}

/* Fill the desktop center more confidently without crowding edges. */
@media(min-width:901px){
  .scene-log .copy-right,
  .scene-firewood .copy-right{
    right:clamp(100px,11vw,220px);
    max-width:min(700px,46vw);
  }
  .scene-boards .copy-left-narrow,
  .scene-pallet .copy-left,
  .scene-chips .copy-left-narrow{
    left:clamp(100px,11vw,220px);
    max-width:min(720px,47vw);
  }
  .scene-log .copy-right{top:50%}
  .scene-boards .copy-left-narrow{top:54%}
  .scene-pallet .copy-left{top:51%}
  .scene-firewood .copy-right{top:51%}
  .scene-chips .copy-left-narrow{top:54%}
  .copy h2{max-width:690px}
  .copy>p:not(.kicker){max-width:680px}
  .contact-main{top:51%}
  .contact-data{top:51%}
}

/* Shared animated downward cue. */
.scroll-note,
.scene-scroll-cue{
  position:absolute;
  z-index:92;
  width:165px;
  right:calc(var(--pad) - 80px);
  left:auto;
  top:calc(50% + 76px);
  bottom:auto;
  transform:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.scroll-note{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  text-align:center;
  line-height:1.35;
}
.scroll-note i,
.scene-scroll-cue i{
  display:block;
  position:relative;
  width:1px;
  height:48px;
  background:rgba(255,255,255,.24);
  overflow:visible;
}
.scroll-note i:after,
.scene-scroll-cue i:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:20px;
  background:linear-gradient(180deg,rgba(212,179,63,0),var(--gold));
  transform:translateY(-18px);
  animation:scrollDownGlow 1.55s ease-in-out infinite;
}
.scroll-note i:before,
.scene-scroll-cue i:before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:8px;
  height:8px;
  border-right:1.5px solid rgba(255,255,255,.75);
  border-bottom:1.5px solid rgba(255,255,255,.75);
  transform:translateX(-50%) rotate(45deg);
  animation:arrowGlow 1.55s ease-in-out infinite;
}
@keyframes scrollDownGlow{
  0%{transform:translateY(-18px);opacity:0}
  30%{opacity:1}
  80%{transform:translateY(31px);opacity:1}
  100%{transform:translateY(31px);opacity:0}
}
@keyframes arrowGlow{
  0%,55%{border-color:rgba(255,255,255,.55);filter:none}
  80%,100%{border-color:var(--gold);filter:drop-shadow(0 0 5px rgba(212,179,63,.9))}
}

/* Keep the scene count visually centered and separate from the cue. */
.counter{
  left:50%;
  right:auto;
  bottom:28px;
  transform:translateX(-50%);
  transition:opacity .22s ease,visibility .22s ease;
}
.scene-contact.is-active ~ .counter{opacity:0;visibility:hidden}
.scene-contact .scene-scroll-cue{display:none}

@media(max-width:900px){
  .header{height:106px;padding-top:12px;align-items:flex-start}
  .brand{width:170px;height:66px}
  .header-right{gap:14px;padding-top:12px}
  .phone{display:inline-flex;font-size:14px;letter-spacing:.025em;white-space:nowrap}
  .contact-button{display:none}
  h1{font-size:clamp(38px,9vw,58px)}
  h2{font-size:clamp(30px,7.6vw,42px);line-height:1.01}
  .intro,.copy>p:not(.kicker){font-size:15px;line-height:1.48;max-width:90vw}
  .copy:before{inset:-26px -24px;background:radial-gradient(ellipse at center,rgba(0,0,0,.46) 0%,rgba(0,0,0,.24) 46%,rgba(0,0,0,0) 76%)}
  .copy-hero{bottom:150px;max-width:90vw}
  .copy-right,.copy-left,.copy-left-narrow{bottom:112px;max-width:90vw}
  .scene-log .material-caption,
  .scene-boards .material-caption,
  .scene-pallet .material-caption,
  .scene-firewood .material-caption,
  .scene-chips .material-caption{
    left:calc(var(--pad) + 38px);
    top:146px;
    font-size:clamp(39px,7.8vw,54px);
    max-width:78vw;
  }
  .scene-number{top:104px;padding:0}
  .scene-boards .copy-left-narrow h2{font-size:clamp(29px,6.8vw,36px);line-height:1.02;max-width:90vw}
  .scene-boards .copy-left-narrow p:not(.kicker){max-width:90vw}

  .scroll-note,.scene-scroll-cue{
    width:150px;
    right:-60px;
    top:calc(50% + 78px);
    gap:6px;
  }
  .scroll-note{font-size:10px;line-height:1.25;letter-spacing:.10em}
  .scroll-note i,.scene-scroll-cue i{height:42px}
  .counter{display:flex;bottom:18px}

  .contact-main{top:132px;left:var(--pad);transform:none}
  .contact-logo{display:none}
  .contact-main h2{font-size:clamp(42px,8.4vw,66px)}
  .contact-data{
    left:var(--pad);
    right:var(--pad);
    top:48%;
    bottom:auto;
    transform:none;
    width:auto;
    grid-template-columns:1fr;
    gap:10px;
  }
  .contact-company,.contact-data a{padding-bottom:10px}
  .contact-company strong,.contact-data strong{font-size:16px}
  .contact-company span{font-size:10px}
}

@media(max-width:520px){
  :root{--pad:18px}
  .header{height:94px;padding-top:10px}
  .brand{width:140px;height:54px}
  .header-right{gap:9px;padding-top:9px}
  .phone{font-size:12.5px;letter-spacing:0}
  .language{gap:4px}
  .lang{font-size:10px;letter-spacing:.1em}
  h1{font-size:clamp(36px,10.5vw,48px)}
  h2{font-size:clamp(29px,7.8vw,39px);line-height:1.02}
  .intro,.copy>p:not(.kicker){font-size:15px;line-height:1.46;color:rgba(255,255,255,.92)!important}
  .copy-hero{bottom:158px;max-width:92vw}
  .copy-right,.copy-left,.copy-left-narrow{bottom:120px;max-width:91vw}
  .scene-number{top:94px;font-size:13px}
  .scene-log .material-caption,
  .scene-boards .material-caption,
  .scene-pallet .material-caption,
  .scene-firewood .material-caption,
  .scene-chips .material-caption{
    left:calc(var(--pad) + 34px);
    top:132px;
    font-size:36px;
    max-width:80vw;
  }
  .scene-boards .copy-left-narrow h2{font-size:29px;line-height:1.02;max-width:91vw}
  .scene-boards .copy-left-narrow p:not(.kicker){font-size:15px;line-height:1.45;max-width:91vw}

  .scroll-note,.scene-scroll-cue{right:-60px;width:150px;top:calc(50% + 74px)}
  .scroll-note{font-size:9.5px}
  .scroll-note i,.scene-scroll-cue i{height:38px}
  .counter{bottom:14px}

  .contact-main{top:126px}
  .contact-main h2{font-size:clamp(38px,9.5vw,48px);line-height:.96}
  .contact-data{top:47%;gap:8px}
  .contact-company,.contact-data a{padding-bottom:8px}
  .contact-company small,.contact-data small{font-size:9px}
  .contact-company strong,.contact-data strong{font-size:14px}
  .contact-company span{font-size:9.5px}
  .footer-line{bottom:16px}
}

@media(max-height:700px) and (max-width:900px){
  .copy-hero{bottom:132px}
  .copy-right,.copy-left,.copy-left-narrow{bottom:98px}
  .contact-main{top:104px}
  .contact-main h2{font-size:36px}
  .contact-data{top:45%;gap:7px}
  .scroll-note,.scene-scroll-cue{top:calc(50% + 64px)}
}