/* Rudolf Matys — premium visual layer. Loaded after page-local styles. */
:root{
  --rm-bg:#0e1013;
  --rm-panel:#171a1f;
  --rm-panel-2:#20242a;
  --rm-line:rgba(255,255,255,.11);
  --rm-text:#f4f1eb;
  --rm-muted:#b9bec5;
  --rm-gold:#c88a43;
  --rm-gold-2:#f0bf7a;
  --rm-blue:#77aabd;
  --rm-radius:18px;
  --rm-shadow:0 28px 80px rgba(0,0,0,.34);
}
html{scroll-padding-top:96px}
section[id],main[id]{scroll-margin-top:96px}
body{background:
  radial-gradient(circle at 8% 12%,rgba(76,122,140,.09),transparent 34rem),
  radial-gradient(circle at 92% 42%,rgba(176,122,62,.08),transparent 34rem),
  var(--rm-bg); color:var(--rm-text)}
::selection{background:rgba(200,138,67,.35);color:#fff}
.wrap{max-width:1240px}
header{background:rgba(13,15,18,.78)!important;border-bottom:1px solid var(--rm-line)!important;box-shadow:0 8px 30px rgba(0,0,0,.14)}
@supports(backdrop-filter:blur(16px)){header{backdrop-filter:blur(18px) saturate(125%)}}
.logo{letter-spacing:.015em}.logo span{color:var(--rm-gold-2)}
.nav-links a{position:relative;padding-block:8px}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:linear-gradient(90deg,var(--rm-gold),var(--rm-gold-2));transition:right .28s ease}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-phone{padding:10px 14px;border:1px solid var(--rm-line);border-radius:999px;background:rgba(255,255,255,.035)}
.btn{border-radius:999px!important;min-height:48px;box-shadow:none;position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.22) 45%,transparent 70%);transform:translateX(-130%);transition:transform .7s ease}
.btn:hover::before{transform:translateX(130%)}
.btn-primary{background:linear-gradient(135deg,var(--rm-gold-2),var(--rm-gold))!important;color:#17120c!important;box-shadow:0 12px 30px rgba(176,122,62,.24)}
.btn-primary:hover{transform:translateY(-2px)!important;box-shadow:0 18px 36px rgba(176,122,62,.3)}
.btn-light,.btn-ghost{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.28)!important;color:#fff!important;backdrop-filter:blur(10px)}
.section-pad{padding:clamp(72px,9vw,126px) 0!important}
.section-head{max-width:760px!important;margin-bottom:52px!important}
.section-head h2{font-size:clamp(32px,4.3vw,54px)!important;line-height:1.04;letter-spacing:-.025em}
.eyebrow{color:var(--rm-gold-2)!important;text-shadow:none!important}

/* layered premium hero */
.hero,.page-hero{isolation:isolate;background:#101216!important;border-bottom:1px solid var(--rm-line)!important}
.hero{min-height:min(820px,calc(100svh - 82px));display:flex;align-items:stretch}
.hero-bg,.page-hero-bg{transform:none!important;will-change:transform}
.hero-bg img,.page-hero-bg img{animation:none!important;filter:saturate(.92) contrast(1.04);transform:scale(1.035);transition:transform .2s linear}
.hero-bg::after,.page-hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,10,12,.86) 0%,rgba(8,10,12,.54) 45%,rgba(8,10,12,.18) 100%),
  linear-gradient(0deg,rgba(8,10,12,.72),transparent 55%);z-index:1}
.rm-hero-effects{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.rm-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.rm-glow--gold{width:34rem;height:34rem;background:rgba(207,139,62,.26);right:-10rem;top:-12rem}
.rm-glow--blue{width:31rem;height:31rem;background:rgba(74,135,159,.22);left:34%;bottom:-17rem}
.rm-grid-lines{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,#000,transparent 84%)}
.rm-reflection{position:absolute;width:42%;height:170%;top:-42%;right:10%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);filter:blur(4px)}
.hero-grid{width:100%;min-height:inherit;z-index:2!important;perspective:1200px}
.hero-grid .pane{transition:transform .18s ease-out,background .3s ease,border-color .3s ease}
.hero-grid .pane-h,.hero-grid .pane-v-top{border-color:rgba(255,255,255,.12)!important}
.hero-grid>.pane:first-child{margin:54px 0 54px 32px;padding:clamp(36px,5vw,70px)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:var(--rm-radius);background:linear-gradient(135deg,rgba(20,24,29,.72),rgba(20,24,29,.34))!important;box-shadow:var(--rm-shadow);backdrop-filter:blur(20px) saturate(120%)}
.hero-headline{font-size:clamp(46px,6vw,78px)!important;line-height:.98!important;letter-spacing:-.045em!important;margin-top:22px!important}
.hero-headline em{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#fff0d2!important;text-shadow:0 2px 2px rgba(0,0,0,.92),0 5px 18px rgba(0,0,0,.78),0 0 24px rgba(213,166,91,.28);-webkit-text-stroke:.35px rgba(255,255,255,.42)}
.hero-sub{font-size:clamp(17px,1.6vw,20px)!important;line-height:1.65!important;color:rgba(255,255,255,.86)!important}
.hero-diagram{position:relative}
.hero-diagram::before{content:"Uw 0,76";position:absolute;right:12%;top:24%;font-family:var(--mono);font-size:clamp(28px,4vw,58px);color:rgba(255,255,255,.9);padding:22px 28px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(12,15,18,.24);backdrop-filter:blur(14px);box-shadow:var(--rm-shadow)}
.hero-diagram::after{content:"TROJSKLO · EPDM · MONTÁŽ NA MIERU";position:absolute;right:8%;top:48%;font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:rgba(255,255,255,.72);padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(10,12,15,.28);backdrop-filter:blur(12px)}
.hero-stats{margin:0 0 54px 32px!important;border-radius:var(--rm-radius);overflow:hidden;background:rgba(19,23,28,.58)!important;backdrop-filter:blur(18px)!important;box-shadow:var(--rm-shadow)}
.stat{border-color:rgba(255,255,255,.1)!important}.stat-num{color:var(--rm-gold-2)!important}
.pane-note{margin:0 32px 54px 0!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:var(--rm-radius);background:rgba(19,23,28,.42)!important;backdrop-filter:blur(16px)!important}
.page-hero{min-height:clamp(430px,55vw,690px)!important}
.page-hero>.wrap{z-index:2;position:relative}
.page-hero-content{max-width:760px!important;padding:clamp(28px,5vw,58px)!important;border:1px solid rgba(255,255,255,.18);border-radius:var(--rm-radius)!important;background:linear-gradient(135deg,rgba(18,22,27,.76),rgba(18,22,27,.38))!important;box-shadow:var(--rm-shadow);backdrop-filter:blur(22px) saturate(120%)!important;transform-style:preserve-3d;transition:transform .18s ease-out}
.page-hero h1{font-size:clamp(44px,6vw,72px)!important;line-height:.98!important;letter-spacing:-.04em!important}
.page-hero p{font-size:clamp(16px,1.7vw,20px)!important;line-height:1.65;color:rgba(255,255,255,.78)!important}
.breadcrumb{color:rgba(255,255,255,.64)!important}.breadcrumb a{color:var(--rm-gold-2)!important}

/* cards and content */
.panes,.profiles,.glazing,.gallery-grid,.contact-grid,.process-grid{border-radius:var(--rm-radius);overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.22)}
.pane-item,.profile-card,.glazing-card,.process-step,.faq-item,.contact-card{transition:transform .28s ease,background .28s ease,border-color .28s ease}
.pane-item:hover,.profile-card:hover,.glazing-card:hover,.process-step:hover{transform:translateY(-5px);background:linear-gradient(145deg,#20242a,#181b20)!important}
.pane-icon{color:var(--rm-gold-2)!important}
.gallery-grid{gap:8px!important;background:transparent!important;border:0!important}
.gallery-item{border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.2);outline:1px solid rgba(255,255,255,.08)}
.gallery-item::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 38%);opacity:0;transition:opacity .28s ease}.gallery-item:hover::after{opacity:1}
.gallery-photo{transition:transform .7s cubic-bezier(.2,.75,.2,1)!important}.gallery-item:hover .gallery-photo{transform:scale(1.075)!important}
.gallery-filters{gap:12px!important}.filter-btn{border-radius:999px!important;border-color:rgba(255,255,255,.18)!important;padding:11px 18px!important}.filter-btn.active{background:linear-gradient(135deg,var(--rm-gold-2),var(--rm-gold))!important;color:#17120c!important;border-color:transparent!important}
.cta-band{position:relative;overflow:hidden;background:linear-gradient(135deg,#a96d2d,#c98c47)!important;padding:clamp(78px,9vw,120px) 32px!important}.cta-band::before{content:"";position:absolute;inset:-50%;background:radial-gradient(circle,rgba(255,255,255,.19),transparent 36%);transform:translateX(20%)}.cta-band>*{position:relative;z-index:1}
footer{background:#0a0c0f!important;border-top:1px solid rgba(255,255,255,.1)!important}.footer-grid{padding-top:80px!important}

/* tables/forms */
input,textarea,select{border-radius:12px!important;background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.16)!important;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
input:focus,textarea:focus,select:focus{border-color:var(--rm-gold)!important;box-shadow:0 0 0 4px rgba(200,138,67,.12)!important;background:rgba(255,255,255,.065)!important}
.compare-table,.spec-table{border-radius:14px;overflow:hidden}

/* responsive */
@media(max-width:860px){
  .hero{min-height:auto}.hero-grid>.pane:first-child{margin:28px 20px 14px!important}.hero-stats{margin:0 20px 14px!important}.pane-note{margin:0 20px 28px!important}.hero-diagram{min-height:250px}.hero-diagram::before{right:7%;top:18%}.hero-diagram::after{right:5%;top:50%}
  .page-hero{min-height:500px!important}.page-hero-content{max-width:100%!important}
}
@media(max-width:560px){
  .hero-grid>.pane:first-child{padding:30px 22px!important}.hero-headline{font-size:clamp(42px,13vw,58px)!important}.hero-diagram{display:none!important}.hero-stats{display:grid!important;grid-template-columns:1fr!important}.stat{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.1)}.stat:last-child{border-bottom:0}.pane-note{padding:22px!important}.page-hero{min-height:440px!important}.page-hero-content{padding:28px 22px!important}.page-hero h1{font-size:clamp(40px,12vw,56px)!important}.gallery-grid{gap:12px!important}.section-head h2{font-size:clamp(31px,10vw,44px)!important}
}
@media(prefers-reduced-motion:reduce){.rm-glow,.rm-reflection,.hero-grid .pane,.page-hero-content,.hero-bg img,.page-hero-bg img{transform:none!important;transition:none!important}}

/* VEKA cinematic hero + layered 3D depth */
.hero,.page-hero{perspective:1400px;transform-style:preserve-3d}
.hero-bg,.page-hero-bg{inset:-4%!important;width:108%!important;height:108%!important;overflow:hidden}
.hero-bg img,.page-hero-bg img{
  width:100%!important;height:100%!important;max-width:none!important;
  transform-origin:50% 50%;will-change:transform;
  transition:none!important;backface-visibility:hidden;
}
.rm-hero-effects{transform-style:preserve-3d}
.rm-grid-lines{will-change:transform;transition:transform .2s linear}
.rm-depth-frame{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:22px;will-change:transform;backdrop-filter:blur(2px)}
.rm-depth-frame--one{width:31vw;height:20vw;min-width:260px;min-height:170px;right:5%;top:13%;transform:rotate(-3deg);box-shadow:inset 0 0 45px rgba(255,255,255,.025)}
.rm-depth-frame--two{width:22vw;height:14vw;min-width:190px;min-height:120px;right:16%;bottom:10%;transform:rotate(5deg);border-color:rgba(205,155,91,.23)}
.rm-vignette{position:absolute;inset:0;background:radial-gradient(circle at 58% 46%,transparent 12%,rgba(8,10,13,.08) 46%,rgba(8,10,13,.54) 100%)}
.rm-reflection{width:22vw!important;min-width:180px!important;height:140%!important;top:-20%!important;left:-34vw!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),rgba(255,255,255,.025),transparent)!important;filter:blur(10px);will-change:transform}
.hero-grid,.page-hero>.wrap{transform-style:preserve-3d}
.hero-grid>.pane,.page-hero-content,.hero-diagram,.hero-stats{will-change:transform;backface-visibility:hidden}
.hero-diagram::before,.hero-diagram::after{box-shadow:0 22px 60px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.16)}
@media(max-width:860px){
  .rm-depth-frame--one{right:-12%;top:12%;opacity:.7}
  .rm-depth-frame--two{right:4%;bottom:8%;opacity:.55}
}
@media(max-width:560px){.rm-depth-frame{display:none}.rm-reflection{opacity:.55}}
@media(prefers-reduced-motion:reduce){.rm-depth-frame,.rm-grid-lines,.rm-vignette{transform:none!important}}


/* Performance pass v5: compositor-only cinema motion, lighter glass surfaces */
@keyframes rmVekaCinema {
  0%   { transform:translate3d(calc(-2.2% + var(--rm-gyro-x)),calc(-.5% + var(--rm-gyro-y)),0) scale(1.06); }
  50%  { transform:translate3d(calc(2.2% + var(--rm-gyro-x)),calc(.7% + var(--rm-gyro-y)),0) scale(1.115); }
  100% { transform:translate3d(calc(-2.2% + var(--rm-gyro-x)),calc(-.5% + var(--rm-gyro-y)),0) scale(1.06); }
}
@keyframes rmReflectionSweep {
  0%,18% { transform:translate3d(-15vw,0,0) rotate(16deg); opacity:0; }
  35% { opacity:.5; }
  62% { opacity:.25; }
  78%,100% { transform:translate3d(120vw,0,0) rotate(16deg); opacity:0; }
}
.hero-bg img,.page-hero-bg img{
  animation:rmVekaCinema 24s cubic-bezier(.45,.05,.55,.95) infinite!important;
  will-change:transform;
}
.rm-reflection{
  animation:rmReflectionSweep 16s ease-in-out infinite;
  will-change:transform,opacity;
}
/* Avoid expensive full-surface blur; retain glass through translucent gradients. */
.hero-grid>.pane:first-child,.page-hero-content{
  backdrop-filter:none!important;
  background:linear-gradient(135deg,rgba(17,21,26,.84),rgba(17,21,26,.56))!important;
}
.hero-stats,.pane-note,.hero-diagram::before,.hero-diagram::after{
  backdrop-filter:none!important;
  background-color:rgba(18,22,27,.72)!important;
}
.rm-depth-frame{backdrop-filter:none!important}
.rm-glow{filter:blur(48px);opacity:.34}
.hero-grid>.pane,.page-hero-content,.hero-diagram,.hero-stats,
.rm-grid-lines,.rm-depth-frame{will-change:auto}
.hero:hover .hero-grid>.pane:first-child,
.page-hero:hover .page-hero-content,
.hero:hover .hero-diagram,
.hero:hover .hero-stats{will-change:transform}
@media(max-width:860px){
  .rm-grid-lines,.rm-glow--blue,.rm-depth-frame--two{display:none!important}
  .rm-glow{filter:blur(34px);opacity:.24}
  .hero-bg img,.page-hero-bg img{animation-duration:28s!important}
}
@media(max-width:560px){
  .rm-reflection,.rm-glow{display:none!important}
  .hero-bg img,.page-hero-bg img{animation-duration:30s!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg img,.page-hero-bg img,.rm-reflection{animation:none!important}
}

/* Performance pass v8: adaptive animation for older PCs and mobile devices */
@keyframes rmVekaCinemaLite {
  0%   { transform:translate3d(calc(-1.1% + var(--rm-gyro-x)),var(--rm-gyro-y),0) scale(1.045); }
  50%  { transform:translate3d(calc(1.1% + var(--rm-gyro-x)),calc(.25% + var(--rm-gyro-y)),0) scale(1.075); }
  100% { transform:translate3d(calc(-1.1% + var(--rm-gyro-x)),var(--rm-gyro-y),0) scale(1.045); }
}

/* Remove unused floating specification card after its HTML removal. */
.hero-diagram::before,
.hero-diagram::after{
  content:none!important;
  display:none!important;
}

/* Keep transitions short and compositor-friendly. */
.hero-grid .pane,
.page-hero-content{
  transition:transform .14s linear!important;
}

html.rm-lite-motion .hero-bg img,
html.rm-lite-motion .page-hero-bg img{
  animation:rmVekaCinemaLite 34s ease-in-out infinite!important;
  filter:saturate(.96) contrast(1.02)!important;
}
html.rm-lite-motion .rm-glow,
html.rm-lite-motion .rm-grid-lines,
html.rm-lite-motion .rm-depth-frame,
html.rm-lite-motion .rm-reflection{
  display:none!important;
}
html.rm-lite-motion .hero-grid .pane,
html.rm-lite-motion .page-hero-content,
html.rm-lite-motion .hero-diagram,
html.rm-lite-motion .hero-stats{
  transform:none!important;
  transition:none!important;
  will-change:auto!important;
}
html.rm-lite-motion .hero-grid>.pane:first-child,
html.rm-lite-motion .page-hero-content,
html.rm-lite-motion .hero-stats,
html.rm-lite-motion .pane-note{
  box-shadow:0 12px 34px rgba(0,0,0,.22)!important;
}

/* Reduce hover animation work on devices that do not need it. */
@media (hover:none), (pointer:coarse), (max-width:860px){
  .btn::before,
  .gallery-item::after{display:none!important}
  .pane-item:hover,
  .profile-card:hover,
  .glazing-card:hover,
  .process-step:hover,
  .gallery-item:hover .gallery-photo,
  .btn-primary:hover{
    transform:none!important;
  }
  .gallery-photo{transition:none!important}
  header{backdrop-filter:none!important;background:rgba(13,15,18,.94)!important}
}

html.rm-no-motion .hero-bg img,
html.rm-no-motion .page-hero-bg img,
html.rm-no-motion .rm-reflection{
  animation:none!important;
  transform:scale(1.035)!important;
}
html.rm-no-motion .rm-glow,
html.rm-no-motion .rm-grid-lines,
html.rm-no-motion .rm-depth-frame,
html.rm-no-motion .rm-reflection{
  display:none!important;
}

/* Pause visual work outside the viewport where supported. */
@supports (content-visibility:auto){
  main>section:not(.hero):not(.page-hero){
    content-visibility:auto;
    contain-intrinsic-size:700px;
  }
}

/* v9: lightweight device-orientation depth on phones/tablets */
.hero,.page-hero{
  --rm-gyro-x:0px;
  --rm-gyro-y:0px;
  --rm-gyro-panel-x:0px;
  --rm-gyro-panel-y:0px;
}
html.rm-gyro-motion .hero-bg img,
html.rm-gyro-motion .page-hero-bg img{
  will-change:transform;
}
html.rm-gyro-motion .hero-grid>.pane:first-child,
html.rm-gyro-motion .page-hero-content{
  transform:translate3d(var(--rm-gyro-panel-x),var(--rm-gyro-panel-y),0)!important;
  transition:transform .18s ease-out;
}
.rm-gyro-permission{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:6;
  min-height:42px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(15,18,22,.78);
  color:#fff;
  font:600 13px/1 var(--body);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  cursor:pointer;
}
.rm-gyro-permission:focus-visible{outline:3px solid #7fb3c4;outline-offset:3px}
.rm-gyro-permission:disabled{opacity:.68;cursor:default}
@media (hover:hover) and (pointer:fine){.rm-gyro-permission{display:none!important}}
@media (prefers-reduced-motion:reduce){.rm-gyro-permission{display:none!important}}

/* v11: always-on full-frame gyroscope movement */
.hero,.page-hero{
  --rm-gyro-rotate-x:0deg;
  --rm-gyro-rotate-y:0deg;
}
html.rm-gyro-motion .hero-bg,
html.rm-gyro-motion .page-hero-bg{
  transform-style:preserve-3d;
}
html.rm-gyro-motion .hero-bg img,
html.rm-gyro-motion .page-hero-bg img{
  transform-origin:center center;
  backface-visibility:hidden;
}
@keyframes rmVekaCinemaGyro {
  0% {
    transform:translate3d(calc(-1.4% + var(--rm-gyro-x)),calc(-.25% + var(--rm-gyro-y)),0)
      rotateX(var(--rm-gyro-rotate-x)) rotateY(var(--rm-gyro-rotate-y)) scale(1.13);
  }
  50% {
    transform:translate3d(calc(1.4% + var(--rm-gyro-x)),calc(.35% + var(--rm-gyro-y)),0)
      rotateX(var(--rm-gyro-rotate-x)) rotateY(var(--rm-gyro-rotate-y)) scale(1.16);
  }
  100% {
    transform:translate3d(calc(-1.4% + var(--rm-gyro-x)),calc(-.25% + var(--rm-gyro-y)),0)
      rotateX(var(--rm-gyro-rotate-x)) rotateY(var(--rm-gyro-rotate-y)) scale(1.13);
  }
}
html.rm-gyro-motion .hero-bg img,
html.rm-gyro-motion .page-hero-bg img,
html.rm-gyro-motion.rm-lite-motion .hero-bg img,
html.rm-gyro-motion.rm-lite-motion .page-hero-bg img{
  animation:rmVekaCinemaGyro 30s ease-in-out infinite!important;
  will-change:transform!important;
}
.rm-gyro-permission{display:none!important}
@media(prefers-reduced-motion:reduce){
  html.rm-gyro-motion .hero-bg img,
  html.rm-gyro-motion .page-hero-bg img{animation:none!important;transform:scale(1.04)!important}
}

/* v12: full hero photograph — no object-fit crop */
.hero-bg,
.page-hero-bg{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0d1014;
  overflow:hidden;
}
.hero-bg img,
.page-hero-bg img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:1.5%;
  animation:rmFullPhotoFloat 24s ease-in-out infinite!important;
  transform-origin:center center;
}
@keyframes rmFullPhotoFloat{
  0%,100%{
    transform:translate3d(var(--rm-gyro-x),var(--rm-gyro-y),0)
      rotateX(var(--rm-gyro-rotate-x,0deg))
      rotateY(var(--rm-gyro-rotate-y,0deg))
      scale(.955);
  }
  50%{
    transform:translate3d(var(--rm-gyro-x),var(--rm-gyro-y),0)
      rotateX(var(--rm-gyro-rotate-x,0deg))
      rotateY(var(--rm-gyro-rotate-y,0deg))
      scale(.975);
  }
}
@media(max-width:860px){
  .hero-bg img,.page-hero-bg img{padding:2.5%;animation-duration:28s!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg img,.page-hero-bg img{
    animation:none!important;
    transform:scale(.96)!important;
  }
}

/* v13: unified desktop hero canvas across index and subpages */
@media (min-width: 861px) {
  .hero,
  .page-hero {
    min-height: clamp(700px, 78svh, 840px) !important;
  }

  .hero-bg img,
  .page-hero-bg img {
    padding: 1.5% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .page-hero > .wrap {
    min-height: inherit;
    display: flex;
    align-items: center;
  }
}


/* v14: exact unified hero geometry; legacy subpage parallax removed */
@media (min-width: 861px) {
  .hero,
  .page-hero {
    height: calc(100svh - 72px) !important;
    min-height: 720px !important;
    max-height: 920px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-bg,
  .page-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  .hero-bg img,
  .page-hero-bg img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 1.5% !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
  }

  .hero-grid,
  .page-hero > .wrap {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* v16: single smooth hero motion engine. JS owns the complete image transform. */
.hero-bg img,
.page-hero-bg img,
html.rm-lite-motion .hero-bg img,
html.rm-lite-motion .page-hero-bg img,
html.rm-gyro-motion .hero-bg img,
html.rm-gyro-motion .page-hero-bg img,
html.rm-gyro-motion.rm-lite-motion .hero-bg img,
html.rm-gyro-motion.rm-lite-motion .page-hero-bg img {
  animation: none !important;
  transition: none !important;
  transform: translate3d(0, 0, 0) scale(.96);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

.hero-grid > .pane:first-child,
.page-hero-content,
html.rm-lite-motion .hero-grid > .pane:first-child,
html.rm-lite-motion .page-hero-content,
html.rm-gyro-motion .hero-grid > .pane:first-child,
html.rm-gyro-motion .page-hero-content {
  transition: none !important;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg img,
  .page-hero-bg img {
    animation: none !important;
    transform: translate3d(0, 0, 0) scale(.96) !important;
    will-change: auto !important;
  }

  .hero-grid > .pane:first-child,
  .page-hero-content {
    transform: none !important;
    will-change: auto !important;
  }
}

/* v18: fixed hero frame; only the image content pans inside the clipped frame. */
.hero,
.page-hero {
  perspective: none !important;
  transform-style: flat !important;
}

.hero-bg,
.page-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  transform: none !important;
  perspective: none !important;
  contain: paint;
}

.rm-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.hero-bg .rm-hero-media img,
.page-hero-bg .rm-hero-media img,
html.rm-lite-motion .hero-bg .rm-hero-media img,
html.rm-lite-motion .page-hero-bg .rm-hero-media img,
html.rm-gyro-motion .hero-bg .rm-hero-media img,
html.rm-gyro-motion .page-hero-bg .rm-hero-media img {
  position: absolute !important;
  left: -6% !important;
  top: -6% !important;
  width: 112% !important;
  height: 112% !important;
  max-width: none !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  animation: none !important;
  transition: none !important;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50% !important;
  backface-visibility: hidden;
  will-change: transform;
}

/* The text and layout remain anchored; only the photograph moves. */
.hero-grid > .pane:first-child,
.page-hero-content,
html.rm-lite-motion .hero-grid > .pane:first-child,
html.rm-lite-motion .page-hero-content,
html.rm-gyro-motion .hero-grid > .pane:first-child,
html.rm-gyro-motion .page-hero-content {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

@media (max-width: 860px) {
  .hero-bg .rm-hero-media img,
  .page-hero-bg .rm-hero-media img {
    left: -7% !important;
    top: -7% !important;
    width: 114% !important;
    height: 114% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg .rm-hero-media img,
  .page-hero-bg .rm-hero-media img {
    transform: translate3d(0, 0, 0) !important;
    will-change: auto !important;
  }
}


/* v19: subpage hero uses the same four-pane composition as index.php. */
.rm-index-hero {
  position: relative;
  overflow: hidden;
  border-bottom: var(--bar, 2px) solid var(--graphite, #23262a);
}

.rm-index-hero .hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: auto auto;
  width: 100%;
  max-width: 1180px;
  height: 100%;
  margin: 0 auto;
}

.rm-index-hero .pane {
  position: relative;
  padding: 56px 40px;
  border: 0;
  background: transparent;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.rm-index-hero .pane-h {
  border-right: var(--bar, 2px) solid rgba(255,255,255,.2);
}

.rm-index-hero .pane-v-top {
  border-bottom: var(--bar, 2px) solid rgba(255,255,255,.2);
}

.rm-index-hero .hero-headline {
  margin: 18px 0 22px;
  color: #fff;
  font-size: clamp(38px,5.2vw,62px);
  line-height: 1.04;
  letter-spacing: normal;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}

.rm-index-hero .hero-headline em {
  color: #ffd699;
  font-style: normal;
}

.rm-index-hero .hero-sub {
  max-width: 46ch;
  margin-bottom: 30px;
  color: #fff;
  font-size: 17px;
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}

.rm-index-hero .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.rm-index-hero .hero-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 310px;
  padding: 30px;
  background: transparent;
}

.rm-index-hero .hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(35,38,42,.6);
  backdrop-filter: blur(4px);
}

.rm-index-hero .stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 30px 26px;
  border-right: 1px solid rgba(255,255,255,.14);
}

.rm-index-hero .stat:last-child {
  border-right: 0;
}

.rm-index-hero .stat-num {
  color: #fff;
  font-family: var(--mono, monospace);
  font-size: clamp(24px,2.4vw,30px);
  font-weight: 500;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.rm-index-hero .stat-label {
  margin-top: 6px;
  color: rgba(255,255,255,.85);
  font-size: 12.5px;
  line-height: 1.35;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

.rm-index-hero .pane-note {
  display: flex;
  align-items: center;
  padding: 30px 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}

/* Keep the image visible in the open right pane, as on the home page. */
.rm-index-hero .hero-diagram::before,
.rm-index-hero .hero-diagram::after {
  display: none !important;
}

@media (max-width: 860px) {
  .rm-index-hero {
    height: auto !important;
    min-height: 0 !important;
  }

  .rm-index-hero .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .rm-index-hero .pane {
    padding: 40px 24px;
  }

  .rm-index-hero .pane-h {
    border-right: 0;
    border-bottom: var(--bar, 2px) solid rgba(255,255,255,.2);
  }

  .rm-index-hero .hero-diagram {
    min-height: clamp(220px,58vw,360px);
    padding: 0;
    border-bottom: var(--bar, 2px) solid rgba(255,255,255,.2);
  }

  .rm-index-hero .hero-stats {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rm-index-hero .stat {
    padding: 22px 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }

  .rm-index-hero .stat:last-child {
    border-bottom: 0;
  }

  .rm-index-hero .pane-note {
    padding: 24px;
  }
}

/* v20: materialy hero must grow with its longer statistics and note content. */
@media (min-width: 861px) {
  .rm-index-hero--materialy {
    height: auto !important;
    min-height: calc(100svh - 72px) !important;
    max-height: none !important;
  }

  .rm-index-hero--materialy .hero-grid {
    height: auto !important;
    min-height: calc(100svh - 72px) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  .rm-index-hero--materialy .hero-grid > .pane:first-child {
    min-height: 0;
  }

  .rm-index-hero--materialy .hero-stats {
    margin-bottom: 32px !important;
    align-self: stretch;
  }

  .rm-index-hero--materialy .stat {
    display: flex;
    min-height: 148px;
    flex-direction: column;
    justify-content: center;
  }

  .rm-index-hero--materialy .stat-label,
  .rm-index-hero--materialy .pane-note {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .rm-index-hero--materialy .pane-note {
    min-height: 148px;
    align-items: center;
  }
}

@media (max-width: 1100px) and (min-width: 861px) {
  .rm-index-hero--materialy .pane {
    padding-left: 28px;
    padding-right: 28px;
  }

  .rm-index-hero--materialy .stat {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* v23: home hero now uses the same rm-index-hero structure as subpages; center its statistics. */
.rm-index-hero:not(.rm-index-hero--materialy):not(.rm-index-hero--postup):not(.rm-index-hero--gallery) .hero-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rm-index-hero:not(.rm-index-hero--materialy):not(.rm-index-hero--postup):not(.rm-index-hero--gallery) .hero-stats .stat-num,
.rm-index-hero:not(.rm-index-hero--materialy):not(.rm-index-hero--postup):not(.rm-index-hero--gallery) .hero-stats .stat-label {
  width: 100%;
  text-align: center;
}

/* v25: corrected fixed-frame gyroscope. Only the photo content pans. */
.hero-bg,
.page-hero-bg,
.hero-bg .rm-hero-media,
.page-hero-bg .rm-hero-media {
  overflow: hidden !important;
}

.hero-bg .rm-hero-media,
.page-hero-bg .rm-hero-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  contain: layout paint !important;
}

.hero-bg .rm-hero-media img,
.page-hero-bg .rm-hero-media img,
html.rm-lite-motion .hero-bg .rm-hero-media img,
html.rm-lite-motion .page-hero-bg .rm-hero-media img,
html.rm-gyro-motion .hero-bg .rm-hero-media img,
html.rm-gyro-motion .page-hero-bg .rm-hero-media img {
  position: absolute !important;
  inset: -7% !important;
  left: -7% !important;
  top: -7% !important;
  width: 114% !important;
  height: 114% !important;
  max-width: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
  transform: translate3d(0, 0, 0);
  transform-origin: center center !important;
  backface-visibility: hidden !important;
  will-change: transform;
}

@media (max-width: 860px) {
  .hero-bg .rm-hero-media img,
  .page-hero-bg .rm-hero-media img {
    inset: -8% !important;
    left: -8% !important;
    top: -8% !important;
    width: 116% !important;
    height: 116% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg .rm-hero-media img,
  .page-hero-bg .rm-hero-media img {
    transform: translate3d(0, 0, 0) !important;
    will-change: auto !important;
  }
}

/* v26: show the complete hero photograph on every screen.
   The gyro may move it only inside the unused space left by contain. */
.hero-bg .rm-hero-media,
.page-hero-bg .rm-hero-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #101216 !important;
}

.hero-bg .rm-hero-media img,
.page-hero-bg .rm-hero-media img,
html.rm-lite-motion .hero-bg .rm-hero-media img,
html.rm-lite-motion .page-hero-bg .rm-hero-media img,
html.rm-gyro-motion .hero-bg .rm-hero-media img,
html.rm-gyro-motion .page-hero-bg .rm-hero-media img {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 860px) {
  .hero-bg .rm-hero-media img,
  .page-hero-bg .rm-hero-media img {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
}