/* One white logo travels from the hero into the navigation. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.header,.header.scrolled{height:104px;background:transparent!important;box-shadow:none!important;color:#fff;mix-blend-mode:normal;transition:transform .5s cubic-bezier(.22,.61,.36,1),background-color .3s ease;overflow:visible}
.header .brand,.header.scrolled .brand{width:64px;transform:translate3d(0,var(--brand-y,calc(43svh - 52px)),0) scale(var(--brand-scale,4.6875));transform-origin:center;transition:none;will-change:transform}
.header .brand img{width:100%;height:auto}
.header .language,.header .nav-reserve{border-bottom:0}
.header .nav-label{letter-spacing:.1em}
.hero{height:100svh;min-height:720px;max-height:none}
.hero .hero-shade{background:linear-gradient(180deg,#11090733,#11090726 50%,#11090780)}
.hero .hero-copy{position:absolute;inset:auto 24px 13%;width:auto;padding:0;text-align:center;opacity:var(--hero-copy-opacity,1)}
.hero .hero-description{font-family:var(--sans);font-size:16px;line-height:1.7;max-width:500px;margin:0 auto 26px;letter-spacing:.005em}
.hero-actions{display:flex;justify-content:center;align-items:center;gap:14px}
.hero-actions .button{min-width:176px;justify-content:center;padding:14px 24px;font-size:12px}
.button-outline{border:1px solid #faf2e780;background:transparent;color:var(--linen)}
.button-outline:hover{background:var(--linen);color:var(--ink)}
/* Entrance and exit remain subtle and repeat when a section is revisited. */
.js .reveal{opacity:0;transform:translate3d(0,32px,0);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.js .reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
.js .reveal:focus-within{opacity:1;transform:none}
.navigation-dialog[open] .navigation-photo{animation:content-arrive .75s ease both}
.navigation-dialog[open] nav a{animation:content-arrive .65s cubic-bezier(.2,.8,.2,1) both}
.navigation-dialog[open] nav a:nth-child(2){animation-delay:.04s}
.navigation-dialog[open] nav a:nth-child(3){animation-delay:.08s}
.navigation-dialog[open] nav a:nth-child(4){animation-delay:.12s}
.navigation-dialog[open] nav a:nth-child(5){animation-delay:.16s}
.navigation-dialog[open] nav a:nth-child(6){animation-delay:.2s}
@keyframes content-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* A drawn functional close icon is optically centred independently of fonts. */
.dialog-close{display:grid;place-items:center;padding:0;line-height:1;font-size:0;box-sizing:border-box}
.close-icon{position:relative;display:block;width:20px;height:20px;pointer-events:none}
.close-icon::before,.close-icon::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.close-icon::after{transform:translate(-50%,-50%) rotate(-45deg)}
.dialog-close:hover .close-icon{transform:rotate(90deg)}
.close-icon{transition:transform .25s ease}
@media(max-width:760px){
 .header,.header.scrolled{height:88px;padding:0 22px}
 .header .brand,.header.scrolled .brand{width:52px;transform:translate3d(0,var(--brand-y,calc(43svh - 44px)),0) scale(var(--brand-scale,4.23))}
 .hero{min-height:680px}
 .hero .hero-copy{inset:auto 22px 12%}
 .hero .hero-description{font-size:14px;max-width:290px;line-height:1.8;margin-bottom:22px}
 .hero-actions{gap:10px}
 .hero-actions .button{min-width:0;flex:1;max-width:180px;font-size:11px;padding:13px 12px}
 .close-icon,.close-icon::before,.close-icon::after{width:18px}
 .close-icon{height:18px}
}
@media(max-height:650px) and (min-width:761px){
 .hero .hero-copy{bottom:10%}
}
@media(prefers-reduced-motion:reduce){
 .js .reveal{opacity:1;transform:none}
 .header .brand,.header.scrolled .brand{transform:none;will-change:auto}
 .hero::after{content:"";position:absolute;width:190px;height:230px;left:50%;top:39%;transform:translate(-50%,-50%);background:url('/assets/logo-white.webp') center/contain no-repeat}
}

/* The returning navigation uses the brand green and keeps its lettering white. */
.header.logo-docked{background:var(--green)!important;color:#fff}
.header .brand img{filter:none;mix-blend-mode:normal;opacity:1}
.header .nav-label,.header .language{color:#fff;opacity:1}
.header .hamburger i{background:#fff}
.hero .hero-copy{bottom:9%}
.hero .hero-description{font-family:var(--serif);font-size:clamp(32px,3.4vw,52px);font-weight:400;line-height:1.12;letter-spacing:-.02em;max-width:650px;margin-bottom:25px;text-wrap:balance}
.hero-note{position:absolute;top:29%;z-index:1;font-family:var(--serif);font-size:clamp(21px,1.8vw,29px);font-weight:400;line-height:1.2;color:#fff;margin:0;opacity:var(--hero-copy-opacity,1)}
.hero-note-left{left:4.2vw;text-align:left}
.hero-note-right{right:4.2vw;text-align:right}
.hero-actions{gap:12px}
.hero-actions .button{min-width:0;justify-content:center;font-size:12px;letter-spacing:.02em}
.hero-actions .button-light{padding:13px 25px;background:var(--linen);color:var(--ink);border:1px solid var(--linen)}
.hero-actions .button-light:hover{background:var(--gold);border-color:var(--gold)}
.hero-actions .button-outline{padding:8px 2px;border:0;border-bottom:1px solid #ffffffb3;background:transparent;color:#fff}
.hero-actions .button-outline:hover{color:var(--gold);border-bottom-color:var(--gold);background:transparent}
.header .hero-brand,.header.scrolled .hero-brand{position:absolute;left:50%;top:50%;width:var(--brand-render-width,300px);transform:translate3d(-50%,calc(-50% + var(--brand-y,calc(43svh - 52px))),0) scale(var(--brand-scale,1))}
.header:has(.hero-brand) .nav-right{grid-column:3}
@media(max-width:1000px) and (min-width:761px){
 .hero-note{font-size:21px;max-width:205px}
}
@media(max-width:760px){
 .hero-note{display:none}
 .header .hero-brand,.header.scrolled .hero-brand{width:var(--brand-render-width,220px);transform:translate3d(-50%,calc(-50% + var(--brand-y,calc(43svh - 44px))),0) scale(var(--brand-scale,1))}
 .hero-note-left{left:22px}.hero-note-right{right:22px}
 .hero .hero-description{font-size:33px;line-height:1.12;max-width:340px;margin-bottom:22px}
 .hero .hero-copy{bottom:10%}
 .hero-actions{gap:12px}
 .hero-actions .button{flex:0 0 auto;max-width:none;font-size:11px}
 .hero-actions .button-light{padding:12px 20px}
 .hero-actions .button-outline{padding:8px 2px}
}
@media(prefers-reduced-motion:reduce){
 .header .hero-brand,.header.scrolled .hero-brand{width:64px;transform:translate(-50%,-50%);will-change:auto}
 .hero::after{background-image:url('/assets/logo-hero.webp')}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.header .hero-brand,.header.scrolled .hero-brand{width:52px}}