/* Crossfade the four photographs beneath the shared shading and content. */
.hero-picture{opacity:0;pointer-events:none;transition:opacity 700ms ease-in-out}
.hero-picture.is-active{opacity:1}
.hero-picture img{transform-origin:center center}
.header{position:fixed;inset:0 0 auto;z-index:20;background:transparent;box-shadow:none;transition:background-color 200ms cubic-bezier(.25,1,.5,1),color 200ms cubic-bezier(.25,1,.5,1),box-shadow 200ms cubic-bezier(.25,1,.5,1)}
.header.is-scrolled{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(55,54,54,.05),0 8px 22px rgba(55,54,54,.06)}
.header.is-scrolled nav{color:var(--muted)}
.header.is-scrolled .phone{color:var(--ink)}
.header.is-scrolled .button{border:1px solid var(--accent);background:#fff;color:var(--ink)}
.header.is-scrolled .button:hover{background:var(--accent);color:#fff}
.header.is-scrolled .logo img:first-child{content:url('assets/desktop-imgGroup.svg')}
.header.is-scrolled .logo img:last-child{content:url('assets/desktop-imgGroup1.svg')}
.header.is-scrolled .menu-toggle img{content:url('assets/mobile-imgMenuButtonWhite.svg')}
.skip-link{z-index:30}
.hero .arrows .circle{background:#fff;opacity:.4;transition:opacity 180ms cubic-bezier(.25,1,.5,1)}
.hero .arrows .circle:is(:hover,:focus-visible){background:#fff;opacity:1}
.carousel-controls .dots button{transition:width 500ms cubic-bezier(.4,0,.2,1)}
.carousel-controls .dots button::after{transition:background-color 500ms ease-in-out}
@media(prefers-reduced-motion:reduce){
 .hero-picture,.header,.hero .arrows .circle,.carousel-controls .dots button,.carousel-controls .dots button::after{transition:none}
}

@media(min-width:701px) and (max-width:1200px){.header.is-scrolled{height:79px}}
@media(max-width:700px){.header.is-scrolled{height:71px}}

.carousel-controls[hidden]{display:none}