/* Moving photographic sky and coordinated room dimmers, visible from the first seconds. */
.hero-media{--hero-edge-direction:90deg;overflow:hidden;-webkit-mask-image:linear-gradient(var(--hero-edge-direction),transparent 0%,#00000008 4%,#00000030 10%,#00000070 18%,#000000bd 27%,#000 39%);mask-image:linear-gradient(var(--hero-edge-direction),transparent 0%,#00000008 4%,#00000030 10%,#00000070 18%,#000000bd 27%,#000 39%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
html[dir=rtl] .hero-media{--hero-edge-direction:270deg}
.hero-photo-motion{position:absolute;inset:-1px;transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0);transition:transform 1.5s cubic-bezier(.2,.65,.25,1)}
.hero-scene{display:block;width:100%;height:100%;overflow:visible;transform-origin:65% 55%;animation:scene-camera 26s cubic-bezier(.45,0,.55,1) -4s infinite;animation-play-state:paused}
.scene-atmosphere{opacity:.94}
.scene-clouds{filter:brightness(.82) saturate(.78);animation:scene-cloud-travel 32s linear infinite;animation-play-state:paused}
.scene-clouds-a{animation-delay:-4s}
.scene-clouds-b{animation-delay:-20s}
.scene-room{animation:scene-room-dimmer 14s ease-in-out infinite;animation-play-state:paused}
.scene-room-upper{animation-delay:0s}
.scene-room-living{animation-delay:-5s}
.scene-room-left{animation-delay:-9s}
.scene-room-shadows{mix-blend-mode:multiply}
.scene-warmth,.scene-practical-lights{mix-blend-mode:screen}
.scene-light{opacity:0;animation:scene-window-light 14s ease-in-out infinite;animation-play-state:paused}
.scene-light-upper{animation-delay:0s}
.scene-light-living{animation-delay:-5s}
.scene-light-left{animation-delay:-9s}
.scene-lamp{animation:scene-path-light 14s ease-in-out -5s infinite;animation-play-state:paused}
.scene-lamp-garden{animation-delay:-7s}
.hero.motion-active .hero-scene,.hero.motion-active .scene-clouds,.hero.motion-active .scene-room,.hero.motion-active .scene-light,.hero.motion-active .scene-lamp{animation-play-state:running}
.hero.motion-active .hero-photo-motion,.hero.motion-active .hero-scene{will-change:transform}
.hero-motion-control{position:absolute;inset-inline-end:max(36px,calc((100% - 1264px)/2));top:22px;z-index:2;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid #ffffff30;border-radius:50%;background:#11121466;backdrop-filter:blur(8px);color:#ffffffb3;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hero-motion-control:hover,.hero-motion-control:focus-visible{color:#fff;background:#17181bd9;border-color:#ffffff80}
.hero-motion-control:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero-motion-control .icon{width:16px;height:16px}
.hero-motion-control .play-icon,.hero-motion-control[aria-pressed=true] .pause-icon{display:none}
.hero-motion-control[aria-pressed=true] .play-icon{display:block}
.hero-motion-control[hidden]{display:none}
.hero-bottom{display:flex;flex-wrap:nowrap;gap:clamp(16px,2.3vw,32px)}
.hero-bottom>span{flex:0 0 auto;white-space:nowrap}
.hero-bottom .icon{flex-shrink:0}
.hero-bottom>a{margin-inline-start:auto;flex-shrink:0}
/* Restored card layout; the pulse moves only the shield artwork. */
.note-icon{position:relative;flex-shrink:0}
.note-icon .icon{transform-origin:center;animation:shield-heartbeat 3.8s ease-in-out infinite;animation-play-state:paused}
.note-icon:after{content:'';position:absolute;inset:-3px;border:1px solid #df353c;border-radius:50%;opacity:0;animation:shield-ring 3.8s ease-out infinite;animation-play-state:paused;pointer-events:none}
.hero.motion-active .note-icon .icon,.hero.motion-active .note-icon:after{animation-play-state:running}
/* The stationary cat shares the house coordinates, camera, lighting and edge masks. */
.scene-cat-placement{pointer-events:none}
.scene-cat-tail{transform-box:view-box;transform-origin:566px 1014px;animation:resting-tail 8.5s ease-in-out infinite;animation-play-state:paused}
.hero.motion-active .scene-cat-tail{animation-play-state:running}
.advisor-photo{display:block}
@keyframes shield-heartbeat{0%,26%,100%{transform:scale(1)}7%{transform:scale(1.13)}12%{transform:scale(1)}18%{transform:scale(1.07)}}
@keyframes shield-ring{0%{transform:scale(.92);opacity:0}7%{opacity:.25}27%,100%{transform:scale(1.16);opacity:0}}
@keyframes resting-tail{0%,76%,100%{transform:rotate(0deg)}18%{transform:rotate(2deg)}38%{transform:rotate(-3.5deg)}57%{transform:rotate(1.5deg)}}
@keyframes scene-camera{0%,100%{transform:translate3d(.35%,.2%,0) scale(1.025)}50%{transform:translate3d(-.75%,-.3%,0) scale(1.06)}}
/* Overlapping photographic tracks crossfade while travelling in one direction. */
@keyframes scene-cloud-travel{0%{transform:translateX(0);opacity:0}12.5%{opacity:1}50%{opacity:1}62.5%{opacity:0}100%{transform:translateX(-400px);opacity:0}}
@keyframes scene-room-dimmer{0%,100%{opacity:.9}22%,57%{opacity:0}82%{opacity:.9}}
@keyframes scene-window-light{0%,100%{opacity:0}22%,57%{opacity:.32}82%{opacity:0}}
@keyframes scene-path-light{0%,100%{opacity:.06}25%,62%{opacity:.64}88%{opacity:.06}}
@media(max-width:960px){.hero-motion-control{inset-inline-end:24px;top:20px}}
@media(max-width:640px){
  .hero,html[dir=rtl] .hero{--scene-height:clamp(310px,83vw,400px);display:flex;flex-direction:column;min-height:0}
  .hero-content,html[dir=rtl] .hero-content{order:0;position:static;min-height:0;padding-bottom:18px}
  .hero-media,html[dir=rtl] .hero-media{order:1;position:relative;inset:auto;flex-shrink:0;width:100%;height:var(--scene-height);opacity:1;-webkit-mask-image:none;mask-image:none}
  .hero-shade,html[dir=rtl] .hero-shade{top:auto;bottom:88px;height:var(--scene-height);background:linear-gradient(180deg,#111214 0%,#11121420 11%,#11121400 25%,#11121400 76%,#111214b3 94%,#111214 100%)}
  .hero-note,html[dir=rtl] .hero-note{inset-inline-end:20px;bottom:115px}
  html[dir=rtl] .scene-cat-placement{transform:translate(1020px,809px)}
  .hero-photo-motion{inset:-1px}
  .hero-scene{transform-origin:62% 52%}
  .hero-motion-control{top:auto;bottom:122px;inset-inline-start:20px;inset-inline-end:auto;width:40px;height:40px}
  .hero-bottom,html[dir=rtl] .hero-bottom{order:2;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px;min-height:88px;padding-block:17px;font-size:clamp(8.1px,2.45vw,11px)}
  .hero-bottom>span{display:flex;gap:4px;letter-spacing:0}
  .hero-bottom>span:last-of-type{display:flex}
  .hero-bottom .icon{width:12px;height:12px}
  .hero-bottom>a{display:none}
  html[dir=rtl] .hero-bottom{font-size:clamp(9px,2.7vw,12px)}
}
@media(max-width:400px){.hero-scene{width:calc(100% + 40px);margin-left:-40px}}
@media(max-width:360px){.hero-bottom,html[dir=rtl] .hero-bottom{gap:5px}.hero-bottom>span{gap:3px}.hero-bottom .icon{width:10px;height:10px}html[dir=rtl] .hero-bottom{font-size:8.7px}}
@media(prefers-reduced-motion:reduce){
  .hero-photo-motion,.hero-scene,.scene-clouds,.scene-room,.scene-light,.scene-lamp{animation:none!important;transition:none!important;transform:none!important;will-change:auto!important}
  .scene-atmosphere,.scene-room-shadows,.scene-warmth,.scene-practical-lights,.hero-motion-control{display:none!important}
  .note-icon .icon,.note-icon:after,.scene-cat-tail{animation:none!important;transform:none!important}
}