@font-face {

  font-family: 'Cormorant Garamond';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url(../fonts/cormorant-garamond-500.ttf) format('truetype');

}

@font-face {

  font-family: 'Cormorant Garamond';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url(../fonts/cormorant-garamond-600.ttf) format('truetype');

}

@font-face {

  font-family: 'Manrope';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url(../fonts/manrope-400.ttf) format('truetype');

}

@font-face {

  font-family: 'Manrope';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url(../fonts/manrope-500.ttf) format('truetype');

}

@font-face {

  font-family: 'Manrope';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url(../fonts/manrope-600.ttf) format('truetype');

}


:root{
--green:#173f35;
--blue:#527d8a;
--ivory:#f6f3ea;
--sage:#a7b5a0;
--ink:#26332e;
--soft:#5f6c65;
--line:#d8ded4;
--paper:#fffefa;
--serif:'Cormorant Garamond',Georgia,serif;
--sans:Manrope,Arial,sans-serif}
*{
box-sizing:border-box}
html{
scroll-behavior:auto;
scrollbar-gutter:stable;
overflow-x:clip}
body{
overflow-x:clip}
section{
width:100%;
min-width:0}
.split>*{
min-width:0}
body{
margin:0;
background:var(--ivory);
color:var(--ink);
font-family:var(--sans);
font-size:15px;
line-height:1.85;
-webkit-font-smoothing:antialiased}
body.locked{
overflow:hidden}
button,input{
font:inherit}
button,a{
-webkit-tap-highlight-color:transparent}
button{
cursor:pointer}
button:disabled{
cursor:wait;
opacity:.6}
a{
color:inherit;
text-decoration:none}
img{
display:block;
max-width:100%;
width:100%;
height:100%;
object-fit:cover}
button{
color:inherit}
button,a,input{
outline-offset:5px}
:focus-visible{
outline:2px solid var(--blue)}
::selection{
background:var(--sage);
color:var(--green)}
h1,h2,h3,p{
margin:0}
h1,h2,h3{
font-family:var(--serif);
font-weight:500}
h1{
font-size:clamp(46px,5.6vw,82px);
line-height:1.04;
letter-spacing:-.025em}
h2{
font-size:clamp(37px,3.55vw,53px);
line-height:1.12;
letter-spacing:-.02em}
h3{
font-size:29px;
line-height:1.15}
p+p{
margin-top:20px}
section[id]{
scroll-margin-top:90px}
.container{
width:100%;
max-width:1280px;
margin:auto;
padding:0 40px}
.section{
padding:108px 0}
.eyebrow{
display:flex;
align-items:center;
gap:12px;
font-size:10px;
font-weight:600;
letter-spacing:.19em;
text-transform:uppercase;
color:var(--blue);
margin-bottom:20px}
.eyebrow:before{
content:'';
height:1px;
width:32px;
background:currentColor}
.dark .eyebrow,.hero .eyebrow,.closing .eyebrow{
color:#c8d8ce}
.muted{
color:var(--soft)}
.bodycopy{
font-size:15px;
line-height:1.9;
color:var(--soft)}
.btn{
display:inline-flex;
justify-content:center;
align-items:center;
gap:22px;
min-height:49px;
padding:15px 25px;
background:var(--green);
color:var(--ivory);
border:1px solid var(--green);
border-radius:6px;
font-size:10px;
font-weight:600;
letter-spacing:.13em;
text-transform:uppercase;
line-height:1.5;
transition:background .25s,transform .25s}
.btn:hover{
background:#245547;
transform:translateY(-2px)}
.btn:after{
content:'';
display:block;
width:7px;
height:7px;
border-right:1.5px solid currentColor;
border-top:1.5px solid currentColor;
transform:rotate(45deg);
flex-shrink:0;
margin-right:3px}
.btn.light{
background:var(--ivory);
border-color:var(--ivory);
color:var(--green)}
.btn.light:hover{
background:#fff}
.btn.outline{
background:transparent;
border-color:var(--line);
color:var(--green)}
.btn.small{
font-size:9px;
min-height:40px;
padding:10px 14px;
gap:12px}
.btn.full{
width:100%}
.textlink{
border:0;
background:none;
padding:8px 0;
font-size:11px;
text-decoration:underline;
text-underline-offset:4px}
.icon{
width:25px;
height:25px;
flex:none;
fill:none;
stroke:currentColor;
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round;
color:var(--blue)}
.dark{
background:var(--green);
color:var(--ivory)}
.reveal{
transition:opacity .8s,transform .8s}
.js .reveal{
opacity:0;
transform:translateY(20px)}
.js .reveal.visible{
opacity:1;
transform:none}
.wave{
position:absolute;
bottom:-1px;
left:0;
width:100%;
height:52px;
pointer-events:none}
.wave path{
fill:var(--green)}
.header{
position:fixed;
inset:0 0 auto;
z-index:40;
transition:background .5s,box-shadow .5s;
color:white;
background:linear-gradient(#132d2580,transparent)}
.header.solid{
background:#173f35f5;
box-shadow:0 1px 0 #ffffff16;
backdrop-filter:blur(12px)}
.header-inner{
height:104px;
display:flex;
align-items:center;
position:relative;
transition:height .4s}
.solid .header-inner{
height:82px}
.header nav{
display:flex;
align-items:center;
gap:34px;
flex:1}
.header nav.right{
justify-content:flex-end;
gap:26px}
.navlink{
font-size:10px;
letter-spacing:.17em;
text-transform:uppercase;
color:#f6f3eadd;
white-space:nowrap}
.navlink:hover{
color:#c8d8ce}
.brand{
position:absolute;
left:50%;
transform:translateX(-50%);
width:220px}
.brand img{
height:auto;
filter:brightness(0) invert(1)}
.languages{
display:flex;
align-items:center;
gap:8px}
.languages button{
background:none;
border:0;
color:#f6f3ea8f;
font-size:10px;
padding:6px 2px;
letter-spacing:.08em}
.languages button.active{
color:white;
border-bottom:1px solid #fff}
.menu-btn{
display:none;
width:40px;
height:44px;
border:0;
background:none;
color:var(--ivory);
font-size:26px;
padding:0;
text-align:left}
.hero{
position:relative;
aspect-ratio:16/9;
min-height:680px;
max-height:950px;
overflow:hidden;
color:white;
background:var(--green)}
.hero>img{
position:absolute;
inset:0;
animation:zoom 40s ease-out forwards;
object-position:50% 58%}
.hero:after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg,#102d26b8, #102d2640 65%,#102d2612),linear-gradient(0deg,#173f35a6,transparent 55%)}
.hero-content{
position:absolute;
inset:auto 0 13%;
z-index:1}
.hero h1{
max-width:800px}
.hero .sub{
max-width:535px;
font-size:15px;
line-height:1.8;
margin-top:24px;
color:#f8fbf5e6}
.hero .btn{
margin-top:30px}
.hero .eyebrow{
margin-bottom:21px;
text-shadow:0 1px 8px #102d26}
.hero .wave{
z-index:2}
.hero-bottom{
position:absolute;
bottom:50px;
right:40px;
z-index:3;
font-size:9px;
letter-spacing:.15em;
text-transform:uppercase;
display:flex;
align-items:center;
gap:12px}
.hero-bottom:before{
content:'';
width:32px;
height:1px;
background:#fff8}
.matrix{
padding:40px 0 108px}
.matrix-intro{
max-width:840px}
.matrix-intro p{
margin-top:24px;
max-width:700px;
color:#f6f3eab0}
.unit-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-top:60px}
.unit{
position:relative;
aspect-ratio:4/5.4;
overflow:hidden;
text-align:left}
.unit>img{
position:absolute;
inset:0;
transition:transform 1s}
.unit:hover>img{
transform:scale(1.04)}
.unit:after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(0deg,#102b26f5 0,#102b26d9 24%,#102b2673 56%,transparent 85%)}
.unit-content{
position:absolute;
bottom:0;
left:0;
right:0;
z-index:1;
padding:20px}
.unit-top{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:7px}
.unit h3{
font-size:27px}
.tag{
font-size:8px;
letter-spacing:.12em;
text-transform:uppercase;
color:#d3e0ce}
.unit dl{
margin:15px 0 0;
border-top:1px solid #ffffff50}
.unit dl div{
display:flex;
justify-content:space-between;
gap:8px;
padding:7px 0;
border-bottom:1px solid #ffffff25;
font-size:10px}
.unit dt{
color:#f6f3eaa8}
.unit dd{
margin:0;
text-align:right}
.unit button{
margin-top:17px;
width:100%;
background:none;
border:1px solid #ffffff80;
color:white;
padding:10px;
font-size:9px;
letter-spacing:.08em;
text-transform:uppercase;
border-radius:3px;
min-height:44px}
.unit button:hover{
background:var(--ivory);
color:var(--green)}
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
align-items:stretch}
.split-copy{
padding:28px 0;
display:flex;
flex-direction:column;
justify-content:center}
.split-copy h2{
max-width:520px}
.split-copy .bodycopy{
margin-top:28px;
max-width:500px}
.split-copy>.btn{
margin-top:30px;
align-self:flex-start}
.split-photo{
min-height:540px;
position:relative;
overflow:hidden}
.split-photo img{
position:absolute;
inset:0}
.soft-photo{
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 7%,#000 93%,transparent);
mask-composite:intersect}
.signature{
border-top:1px solid var(--line);
margin-top:30px;
padding-top:20px;
display:flex;
gap:15px;
align-items:center}
.signature span{
font-family:var(--serif);
font-size:22px}
.signature small{
display:block;
font-family:var(--sans);
font-size:9px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--soft);
margin-top:3px}
.impressions{
padding:15px 0 104px}
.impressions .bodycopy{
margin:24px 0 28px}
.gallery{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-top:52px}
.gallery-large{
aspect-ratio:1}
.gallery-small{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px}
.gallery button,.marquee button{
border:0;
padding:0;
background:var(--green);
overflow:hidden;
position:relative}
.gallery button:after{
content:'›';
position:absolute;
right:18px;
bottom:14px;
color:white;
font-size:22px;
opacity:0;
transition:opacity .3s}
.gallery button:hover:after{
opacity:1}
.gallery img{
transition:transform .8s}
.gallery button:hover img{
transform:scale(1.025)}
.gallery-wide{
margin-top:14px;
width:100%;
aspect-ratio:21/9;
border:0;
background:none;
padding:0;
position:relative;
display:block}
.gallery-caption{
position:absolute;
left:30px;
bottom:24px;
background:#173f35d9;
color:white;
padding:9px 14px;
font-size:9px;
letter-spacing:.1em;
text-transform:uppercase}
.facts{
background:#eeeee4}
.facts-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:56px}
.fact{
border-top:1px solid var(--sage);
padding-top:30px}
.fact-number{
font-family:var(--serif);
font-size:clamp(50px,5.3vw,77px);
font-weight:500;
line-height:1;
letter-spacing:-.025em}
.fact-number .suffix{
color:var(--blue);
font-size:.7em}
.fact-title{
font-size:12px;
font-weight:600;
margin-top:21px}
.fact-note{
font-size:11px;
color:var(--soft);
margin-top:4px}
.marquee{
overflow:hidden;
padding:44px 0;
background:var(--ivory)}
.marquee-track{
display:flex;
gap:14px;
width:max-content;
animation:marquee 90s linear infinite}
.marquee:hover .marquee-track,.marquee.paused .marquee-track{
animation-play-state:paused}
.marquee button{
width:210px;
height:270px}
.marquee-controls{
text-align:right;
margin:10px 40px 0}
.marquee-controls button{
background:none;
border:0;
font-size:10px;
color:var(--soft);
padding:6px}
.center{
text-align:center;
max-width:650px;
margin:0 auto}
.center .eyebrow{
justify-content:center}
.center .bodycopy{
margin-top:20px}
.location-photo{
display:block;
margin:55px auto 0;
width:76%;
aspect-ratio:16/9;
position:relative;
border:0;
background:none;
padding:0}
.location-photo .btn{
position:absolute;
bottom:12%;
left:50%;
transform:translateX(-50%);
white-space:nowrap}
.wide{
position:relative;
aspect-ratio:21/9;
min-height:350px;
color:white;
overflow:hidden}
.wide>img{
position:absolute;
inset:0}
.wide:after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(0deg,#102b26b8,transparent 95%)}
.wide-copy{
position:absolute;
bottom:50px;
left:0;
right:0;
z-index:1}
.wide blockquote{
font:500 italic clamp(30px,3.6vw,51px)/1.23 var(--serif);
max-width:900px;
margin:0}
.wide .eyebrow{
color:#d3e0ce;
margin:22px 0 0}
.timeline-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px}
.timeline-item{
border-top:1px solid #ffffff50;
padding-top:26px}
.timeline-item small{
font-size:10px;
letter-spacing:.15em;
text-transform:uppercase;
color:#c7d5c8}
.timeline-item h3{
font-size:46px;
margin-top:15px}
.timeline-item p{
max-width:380px;
color:#f6f3eaae;
margin-top:18px;
font-size:13px}
.route{
background:#eeeee4}
.route-head .btn{
margin-top:28px}
.road{
position:relative;
max-width:850px;
margin:70px auto 0;
min-height:1160px;
padding:0 0 10px}
.road:before{
content:'';
position:absolute;
left:50%;
top:0;
bottom:0;
width:2px;
background:repeating-linear-gradient(0deg,var(--sage) 0 8px,transparent 8px 16px)}
.road-progress{
position:absolute;
left:50%;
top:0;
width:2px;
background:var(--blue);
height:var(--progress,0%)}
.car{
position:absolute;
left:50%;
top:var(--progress,0%);
transform:translate(-50%,-50%);
z-index:2;
background:var(--green);
color:white;
width:40px;
height:68px;
border-radius:12px;
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 0 0 8px #eeeee4}
.car .icon{
color:white}
.station{
position:relative;
width:calc(50% - 90px);
min-height:165px;
margin-bottom:28px;
background:var(--paper);
border:1px solid var(--line);
padding:22px 24px}
.station:nth-of-type(odd){
margin-left:calc(50% + 90px)}
.station:before{
content:'';
position:absolute;
top:35px;
left:calc(100% + 84px);
width:10px;
height:10px;
border-radius:50%;
background:var(--blue);
box-shadow:0 0 0 5px #eeeee4}
.station:nth-of-type(odd):before{
left:-96px}
.station .station-top{
display:flex;
align-items:center;
justify-content:space-between;
color:var(--blue)}
.station strong{
font-family:var(--serif);
font-weight:500;
font-size:31px;
line-height:1}
.station h3{
font-family:var(--sans);
font-weight:600;
font-size:13px;
margin-top:15px}
.station p{
font-size:11px;
color:var(--soft);
margin-top:7px;
line-height:1.6}
.route-note{
font-size:11px;
color:var(--soft);
text-align:center;
margin-top:35px}
.closing{
position:relative;
aspect-ratio:16/9;
min-height:560px;
color:white;
overflow:hidden}
.closing>img{
position:absolute;
inset:0}
.closing:after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg,#102b26df,#102b2688 45%,transparent 90%)}
.closing-copy{
position:absolute;
inset:0;
display:flex;
align-items:center;
z-index:1}
.closing h2{
max-width:500px;
font-size:clamp(42px,4.2vw,64px)}
.closing p{
max-width:440px;
color:#f6f3eacc;
margin-top:24px}
.closing .btn{
margin-top:30px}
.closing .wave path{
fill:var(--ivory)}
.feature-list{
list-style:none;
padding:0;
margin:28px 0 0}
.feature-list li{
display:flex;
gap:16px;
align-items:flex-start;
border-bottom:1px solid var(--line);
padding:12px 0;
font-size:13px;
color:var(--soft)}
.feature-list .icon{
width:22px;
height:22px;
margin-top:2px}
.feature-note{
font-size:12px;
margin-top:23px;
color:var(--soft)}
.contact{
background:#eeeee4}
.contact-copy .bodycopy{
margin-top:25px;
max-width:450px}
.contact-person{
margin-top:42px;
padding-top:25px;
border-top:1px solid var(--line)}
.contact-person h3{
font-size:27px}
.contact-person p{
font-size:12px;
color:var(--soft);
margin-top:8px}
.contact-card{
border:1px solid var(--line);
padding:40px;
background:var(--paper);
display:flex;
flex-direction:column;
justify-content:center}
.contact-card h3{
font-size:31px}
.contact-card ul{
list-style:none;
padding:0;
margin:24px 0}
.contact-card li{
display:flex;
gap:13px;
align-items:center;
font-size:13px;
padding:7px 0;
color:var(--soft)}
.contact-card li .icon{
width:21px;
height:21px}
.footer{
padding:75px 0 28px}
.footer-grid{
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
gap:60px}
.footer-logo{
width:235px;
height:auto;
filter:brightness(0) invert(1);
margin-left:-10px}
.footer p{
font-size:11px;
color:#f6f3ea99;
max-width:280px;
margin-top:20px}
.footer nav,.footer-contact{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:13px;
padding-top:12px;
font-size:11px;
color:#f6f3eacc}
.footer button{
border:0;
background:none;
padding:0;
color:inherit;
font:inherit;
text-align:left}
.footer a:hover,.footer button:hover{
color:white}
.footer-bottom{
border-top:1px solid #ffffff25;
padding-top:23px;
margin-top:55px;
display:flex;
justify-content:space-between;
gap:20px;
font-size:10px;
color:#f6f3ea70}
.footer-note{
font-size:10px!important;
max-width:none!important;
color:#f6f3ea70!important;
margin-top:16px!important}
.film{
background:var(--green);
padding:96px 0;
color:var(--ivory);
position:relative}
.film-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:50px;
margin-bottom:35px}
.film-head h2{
max-width:550px}
.film-head p{
max-width:320px;
font-size:13px;
color:#f6f3eab0}
.film-frame{
position:relative;
background:#0b211b;
aspect-ratio:16/9;
overflow:hidden}
.film-frame video{
width:100%;
height:100%;
display:block;
object-fit:contain}
.film-caption{
display:flex;
justify-content:space-between;
gap:18px;
color:#f6f3ea85;
font-size:9px;
letter-spacing:.12em;
text-transform:uppercase;
margin-top:16px}
.film-play{
position:absolute;
inset:0;
display:flex;
justify-content:center;
align-items:center;
background:#0f302432;
border:0;
color:white}
.film-play span{
width:78px;
height:78px;
border:1px solid #ffffffb3;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(4px);
font-size:24px;
padding-left:4px}
.film-play[hidden]{
display:none}
.overlay{
position:fixed;
inset:0;
background:#102b26a8;
backdrop-filter:blur(10px);
z-index:100;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
animation:overlay .25s}
.overlay[hidden]{
display:none}
.panel{
position:relative;
width:100%;
max-width:530px;
max-height:90dvh;
overflow:auto;
background:var(--ivory);
padding:40px;
border:1px solid var(--line);
box-shadow:0 30px 100px #0b211b44;
animation:panel .3s}
.panel.wide-panel{
max-width:900px}
.close{
position:absolute;
right:14px;
top:13px;
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border:0;
background:none;
font-size:25px;
color:var(--green);
line-height:1}
.dialog-title{
padding-right:23px}
.quiz-logo{
width:145px;
height:auto;
margin:0 auto 23px}
.progress{
display:flex;
gap:6px;
margin:0 0 25px}
.progress i{
height:3px;
flex:1;
background:var(--line)}
.progress i.filled{
background:var(--blue)}
.quiz h2{
font-size:35px;
text-align:center}
.quiz .intro-steps{
list-style:none;
margin:28px 0;
padding:0}
.intro-steps li{
display:flex;
gap:15px;
margin-top:17px;
font-size:12px;
color:var(--soft)}
.intro-steps .icon{
width:25px;
height:25px}
.quiz .small-note{
font-size:10px;
color:var(--soft);
text-align:center;
line-height:1.65;
margin-top:17px}
.quiz .back{
display:block;
margin:16px auto 0}
.choices{
display:grid;
gap:12px;
margin-top:26px}
.choice{
display:flex;
gap:17px;
align-items:center;
text-align:left;
background:var(--paper);
border:1px solid var(--line);
padding:17px;
width:100%;
border-radius:5px}
.choice:hover,.choice.selected{
border-color:var(--blue);
background:#e9eee5}
.choice b{
font-size:13px;
font-weight:600;
display:block}
.choice small{
font-size:11px;
color:var(--soft);
display:block;
margin-top:4px;
line-height:1.6}
.choice .arrow{
margin-left:auto;
font-size:18px}
.form-text{
font-size:12px;
color:var(--soft);
text-align:center;
margin:18px 0 23px}
.field{
display:block;
font-size:11px;
color:var(--soft);
margin-top:14px}
.field input{
display:block;
margin-top:5px;
width:100%;
padding:13px 14px;
min-height:48px;
border:1px solid #bbc6bb;
background:var(--paper);
border-radius:3px;
color:var(--ink);
font-size:13px}
.check{
display:flex;
gap:10px;
align-items:flex-start;
font-size:10px;
line-height:1.65;
color:var(--soft);
margin:20px 0}
.check input{
margin-top:3px;
accent-color:var(--green);
width:16px;
height:16px;
flex:none}
.quiz .submit{
margin-top:8px}
.summary{
margin:22px 0;
padding:18px;
background:#e8eee3;
font-size:12px}
.loader{
display:flex;
justify-content:center;
align-items:center;
padding:45px 0 25px}
.loader .icon{
width:60px;
height:60px;
animation:pulse 1.2s infinite}
.media-detail{
margin-top:25px}
.media-detail img{
max-height:54vh;
object-fit:contain;
background:#e9ede4}
.media-detail p{
font-size:13px;
color:var(--soft);
margin-top:20px}
.detail-actions{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-top:25px}
.map-preview{
background:#e2e9df;
min-height:280px;
margin-top:25px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
padding:25px;
text-align:center}
.map-preview .icon{
width:50px;
height:50px;
margin-bottom:15px}
.map-preview p{
font-size:13px;
max-width:500px;
margin-bottom:20px}
.map-preview iframe{
width:100%;
height:400px;
border:0}
.legal-copy{
font-size:13px;
color:var(--soft);
margin-top:22px}
.mobile-panel{
background:var(--green);
color:var(--ivory);
height:100dvh;
max-height:none;
max-width:360px;
margin-right:auto;
padding:32px}
.mobile-panel .close{
color:white}
.mobile-panel nav{
margin-top:70px;
display:grid;
gap:22px}
.mobile-panel .navlink{
font-size:15px}
.mobile-panel .brand-mobile{
width:210px;
filter:brightness(0) invert(1);
height:auto}
.mobile-panel .languages{
margin-top:32px}
.mobile-panel p{
margin-top:45px;
color:#f6f3ea99;
font-size:12px}
.skip{
position:fixed;
top:-70px;
left:15px;
z-index:200;
background:var(--ivory);
color:var(--green);
padding:10px}
.skip:focus{
top:10px}
.noscript{
padding:15px;
background:var(--ivory);
color:var(--green)}

@keyframes zoom{
to{
transform:scale(1.07)}
}
@keyframes marquee{
from{
transform:translateX(-50%)}
to{
transform:translateX(0)}
}
@keyframes overlay{
from{
opacity:0}
}
@keyframes panel{
from{
opacity:0;
transform:translateY(12px)}
}
@keyframes pulse{
50%{
opacity:.3;
transform:scale(.93)}
}

@media(min-width:1500px){
.hero-content{
bottom:16%}
}

@media(max-width:1000px){
.header nav{
gap:20px}
.header nav.right{
gap:17px}
.brand{
width:190px}
.container{
padding:0 28px}
.unit-grid{
gap:14px}
.unit-content{
padding:15px}
.unit h3{
font-size:24px}
.unit dl div{
font-size:9px}
.split{
gap:40px}
.section{
padding:86px 0}
.footer-grid{
gap:30px}
.hero{
min-height:640px}
.hero-content{
bottom:14%}
.hero h1{
max-width:660px}
.film-head{
gap:25px}
}

@media(max-width:767px){
body{
font-size:14px}
.container{
padding:0 24px}
.header nav{
display:none}
.header-inner{
height:88px}
.solid .header-inner{
height:74px}
.brand{
width:190px}
.menu-btn{
display:block}
.header-inner>.languages{
margin-left:auto;
display:flex}
.hero{
aspect-ratio:4/5;
min-height:720px;
max-height:none}
.hero>img{
object-position:57% 50%}
.hero:after{
background:linear-gradient(0deg,#102d26c9 0,#102d2690 42%,#102d2630 80%)}
.hero-content{
bottom:16%}
.hero h1{
font-size:49px;
max-width:540px}
.hero .sub{
font-size:13px;
max-width:440px;
margin-top:21px}
.hero .eyebrow{
font-size:9px}
.hero-bottom{
bottom:42px;
right:24px;
font-size:8px}
.wave{
height:27px}
.matrix{
padding:25px 0 78px}
.unit-grid{
grid-template-columns:1fr 1fr;
margin-top:35px;
gap:14px}
.unit{
aspect-ratio:4/6.7}
.unit-content{
padding:13px}
.unit h3{
font-size:26px}
.unit-top{
display:block}
.tag{
display:block;
margin-top:4px;
font-size:8px}
.unit dl{
margin-top:10px}
.unit dl div{
font-size:9px;
display:block;
padding:5px 0}
.unit dt{
font-size:8px}
.unit dd{
text-align:left;
font-size:10px}
.unit button{
font-size:8px;
min-height:43px;
padding:8px 3px;
margin-top:12px}
.split{
grid-template-columns:1fr;
gap:27px}
.split-copy{
padding:0}
.split-photo{
min-height:0;
aspect-ratio:4/5}
.split.mirrored .split-photo{
order:2}
.split.mirrored .split-copy{
order:1}
.section{
padding:75px 0}
.impressions{
padding:10px 0 75px}
.gallery{
grid-template-columns:1fr;
margin-top:35px;
gap:10px}
.gallery-large{
aspect-ratio:4/3}
.gallery-small{
gap:10px}
.gallery-small button{
aspect-ratio:1}
.gallery-wide{
aspect-ratio:4/3;
margin-top:10px}
.gallery-caption{
font-size:8px;
left:15px;
bottom:15px}
.facts-grid{
grid-template-columns:1fr;
gap:36px}
.fact-number{
font-size:63px}
.fact{
padding-top:23px}
.fact-title{
margin-top:15px}
.marquee{
padding:28px 0}
.marquee button{
width:150px;
height:195px}
.marquee-controls{
margin-right:24px}
.location-photo{
width:100%;
aspect-ratio:4/5;
margin-top:32px}
.location-photo img{
object-position:45% 50%}
.wide{
aspect-ratio:1;
min-height:400px}
.wide-copy{
bottom:35px}
.wide blockquote{
font-size:34px}
.timeline-grid{
grid-template-columns:1fr;
gap:43px}
.timeline-item h3{
font-size:39px}
.film{
padding:70px 0}
.film-head{
display:block}
.film-head p{
margin-top:23px;
max-width:480px}
.film-caption{
font-size:8px;
letter-spacing:.05em}
.film-play span{
width:50px;
height:50px;
font-size:18px}
.road{
margin-top:50px;
min-height:0;
padding-left:65px}
.road:before,.road-progress{
left:20px}
.car{
left:20px;
width:32px;
height:55px}
.station,.station:nth-of-type(odd){
width:100%;
margin-left:0;
margin-bottom:23px;
min-height:160px;
padding:22px}
.station:before,.station:nth-of-type(odd):before{
left:-51px;
top:35px}
.closing{
aspect-ratio:4/5;
min-height:670px}
.closing-copy{
align-items:flex-end;
padding-bottom:85px}
.closing h2{
font-size:48px}
.closing:after{
background:linear-gradient(0deg,#102b26e8,#102b2670 60%,transparent)}
.feature-list li{
font-size:12px}
.contact-card{
padding:28px}
.footer{
padding-top:56px}
.footer-grid{
grid-template-columns:1fr;
gap:27px}
.footer nav{
gap:12px}
.footer-bottom{
flex-direction:column;
margin-top:40px;
gap:8px}
.footer-logo{
width:220px}
.panel{
padding:35px 24px 26px;
max-height:92dvh}
.overlay{
padding:15px}
.quiz h2{
font-size:32px}
.film-frame{
aspect-ratio:16/9}
.btn{
padding:14px 19px}
.languages button{
font-size:9px}
.brand{
width:178px}
.header-inner>.languages{
gap:5px}
.mobile-panel{
padding:32px}
}

@media(max-width:370px){
.brand{
width:153px}
.hero h1{
font-size:43px}
.container{
padding:0 20px}
.unit-content{
padding:10px}
.unit h3{
font-size:23px}
.unit-grid{
gap:10px}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*:before,*:after{
animation:none!important;
transition:none!important}
.js .reveal{
opacity:1;
transform:none}
}


/* Refinements: wide film, shared card CTA, rounded language flags and wave edges. */
section{
position:relative}
.section-wave{
position:absolute;
left:0;
width:100%;
height:46px;
z-index:2;
pointer-events:none}
.section-wave path{
fill:currentColor}
.edge-top{
top:-1px;
transform:rotate(180deg)}
.edge-bottom{
bottom:-1px}
.matrix-cta{
margin-top:34px}
.unit-content{
padding:25px}
.unit-content .tag{
display:block;
margin-bottom:9px;
color:#d3e0ce}
.unit-content h3{
font-size:31px;
max-width:230px}
.unit:after{
background:linear-gradient(0deg,#102b26df 0%,#102b265c 38%,transparent 68%)}
.film-frame{
width:100%;
aspect-ratio:16/9}
.film-frame video{
object-fit:cover}
.film-caption{
margin-top:20px}
.film{
padding-bottom:80px}
.film .container{
position:relative;
z-index:3}
.languages{
gap:10px}
.languages button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
padding:3px;
border:1px solid transparent;
border-radius:50%;
opacity:.65;
transition:opacity .2s,border-color .2s}
.languages button:hover{
opacity:1}
.languages button.active{
border:1px solid #f6f3eacc;
opacity:1}
.flag{
display:block;
width:24px;
height:24px;
border-radius:50%;
overflow:hidden;
box-shadow:0 0 0 1px #ffffff30}
.flag svg{
display:block;
width:100%;
height:100%}
.hero .eyebrow{
color:#f6f3ea}
.wide-copy{
z-index:3}
.timeline-item{
position:relative;
z-index:3}
.contact{
padding-bottom:115px}
.matrix{
padding-bottom:120px}
.footer{
padding-top:56px}
.facts{
padding-top:125px;
padding-bottom:125px}
.road{
z-index:3}
.hero-bottom{
bottom:55px}

@media(max-width:1000px){
.unit-content h3{
font-size:34px}
.header nav.right{
gap:16px}
.header nav{
gap:18px}
}

@media(max-width:767px){
.section-wave{
height:28px}
.unit{
aspect-ratio:4/5.4}
.unit-content{
padding:17px 13px}
.unit-content h3{
font-size:27px}
.unit-content .tag{
font-size:8px;
margin-bottom:8px}
.matrix{
padding-bottom:92px}
.matrix-cta{
margin-top:27px}
.film{
padding-bottom:65px}
.film-caption{
font-size:8px;
margin-top:15px}
.header-inner>.languages{
gap:4px}
.languages button{
width:29px;
height:29px}
.flag{
width:21px;
height:21px}
.contact{
padding-bottom:90px}
.facts{
padding-top:95px;
padding-bottom:95px}
.hero-bottom{
bottom:45px}
.brand{
width:164px}
.film-play span{
width:52px;
height:52px}
}


/* Revision 3: continuous facts background, full-height film and smaller waves. */
.unit{
width:100%;
min-width:0}

.marquee{
background:#eeeee4;
padding-top:20px;
padding-bottom:55px}
.facts{
padding-bottom:55px}
.wave,.section-wave{
height:28px}
.film-end{
position:absolute;
inset:0;
z-index:4;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
background:linear-gradient(#102b2660,#102b26cc)}
.film-end[hidden]{
display:none}
.film-end p{
font-family:var(--serif);
font-size:clamp(30px,4vw,54px);
line-height:1.1;
color:var(--ivory);
margin:0 24px 25px}
.film-end .btn{
margin:0 auto}
.film-replay{
display:block;
border:0;
background:none;
color:var(--ivory);
font-size:11px;
margin:18px auto 0;
text-decoration:underline;
text-underline-offset:4px}
.unit{
min-height:380px}
.unit-content h3{
font-size:31px}
.unit-opportunity{
border-top:1px solid #ffffff59;
padding-top:13px;
margin-top:15px;
font-size:11px;
line-height:1.65;
color:#f6f3eadd}
.unit:after{
background:linear-gradient(0deg,#102b26f2 0%,#102b268c 45%,transparent 80%)}

@media(min-width:768px) and (max-width:1000px){
.unit-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px}
.unit{
min-height:345px;
aspect-ratio:auto}
.unit-content{
padding:14px}
.unit-content h3{
font-size:25px;
line-height:1.05;
overflow-wrap:normal}
.unit-opportunity{
font-size:10px;
margin-top:12px;
padding-top:11px}
.unit-content .tag{
font-size:7px;
letter-spacing:.08em}
}

@media(max-width:767px){
.wave,.section-wave{
height:17px}
.unit-grid{
grid-template-columns:1fr 1fr}
.unit{
min-height:290px;
aspect-ratio:4/6.5}
.unit-content h3{
font-size:27px}
.unit-content{
padding:17px 13px}
.unit-opportunity{
font-size:10px;
margin-top:12px;
padding-top:10px}
.facts{
padding-bottom:40px}
.marquee{
padding-top:15px;
padding-bottom:35px}
.film-end p{
font-size:30px;
margin-bottom:20px}
.film-replay{
font-size:10px;
margin-top:13px}
}


/* Revision 4: framed photographs, destination imagery and quiet entrances. */
.closing::after{
z-index:0}
.closing-copy{
z-index:1}
.closing>.wave,.closing>.section-wave{
z-index:3;
pointer-events:none}
.domos-credit a{
text-decoration:underline;
text-underline-offset:4px;
color:#f6f3eac9}
.domos-credit a:hover{
color:white}

.soft-photo{
-webkit-mask-image:none;
mask-image:none;
mask-composite:add}
.split-photo{
overflow:visible;
isolation:isolate;
margin-bottom:16px}
.split-photo::before,.location-photo::before{
content:'';
position:absolute;
inset:15px -13px -15px 13px;
border:1px solid #a7b5a085;
border-radius:42px 4px 42px 4px;
background:#a7b5a01c;
z-index:0;
pointer-events:none}
.split-photo::after{
content:'';
position:absolute;
width:46px;
height:2px;
background:var(--blue);
bottom:-15px;
left:13px;
z-index:2}
.split-photo img{
border-radius:42px 4px 42px 4px;
z-index:1}
.location-photo{
isolation:isolate;
margin-bottom:16px}
.location-photo>img{
position:relative;
z-index:1;
border-radius:42px 4px 42px 4px}
.location-photo>.btn{
z-index:2}

.film{
padding:0;
background:var(--green)}
.film-frame{
margin:0;
width:100%;
aspect-ratio:16/9}
.film-end{
z-index:4}
.film .section-wave{
z-index:5}
.car{
background:transparent;
box-shadow:none;
border-radius:0;
width:90px;
height:150px;
display:block;
z-index:5;
filter:drop-shadow(0 5px 5px #173f3526)}
.car img{
width:100%;
height:100%;
object-fit:contain}
.road{
margin-top:95px;
padding-bottom:12px}
.station{
padding:0;
overflow:visible;
min-height:0;
border:1px solid #cad3c7;
box-shadow:0 6px 24px #173f3505}
.station-photo{
position:relative;
height:130px;
overflow:hidden;
background:var(--sage)}
.station-photo img{
height:100%;
width:100%;
object-fit:cover;
transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.station:hover .station-photo img{
transform:scale(1.045)}
.station-content{
padding:20px 23px 24px}
.station-icon{
width:40px;
height:40px;
border:1px solid #c5d0c4;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#f0f3eb}
.station-icon .icon{
width:23px;
height:23px;
stroke-width:1.45;
color:var(--green)}
.station strong{
font-size:33px;
color:var(--green)}
.station h3{
font-size:13px;
margin-top:12px}
.station p{
margin-top:8px}
.station:before,.station:nth-of-type(odd):before{
top:62px}
.photo-credit{
position:absolute;
bottom:6px;
right:6px;
max-width:90%;
font-size:7px;
line-height:1.4;
padding:3px 5px;
color:#fff;
background:#102b267a;
border-radius:2px}
.credit-list{
font-size:11px;
line-height:1.8;
padding-left:18px;
color:var(--soft)}
.credit-list li{
margin-top:16px}
.credit-list a{
text-decoration:underline;
text-underline-offset:3px}

.js .section-enter{
opacity:0;
transition:opacity 1000ms cubic-bezier(.2,.7,.2,1)}
.js .enter{
opacity:0;
translate:0 21px;
transition:opacity 1000ms cubic-bezier(.2,.7,.2,1),translate 1150ms cubic-bezier(.2,.7,.2,1);
transition-delay:var(--enter-delay,0ms)}
.js .section-enter.is-in,.js .enter.is-in{
opacity:1;
translate:0 0}
.hero>img{
animation-duration:46s}
.gallery img,.split-photo img{
backface-visibility:hidden}

@media(max-width:767px){
.station,.station:nth-of-type(odd){
padding:0}
.split-photo::before,.location-photo::before{
inset:11px -9px -11px 9px;
border-radius:30px 4px 30px 4px}
.split-photo img,.location-photo>img{
border-radius:30px 4px 30px 4px}
.split-photo::after{
bottom:-11px;
left:9px}
.car{
width:68px;
height:118px;
left:20px}
.road{
margin-top:75px;
padding-left:67px}
.station-content{
padding:17px 18px 21px}
.station-photo{
height:120px}
.station:before,.station:nth-of-type(odd):before{
left:-53px;
top:57px}
.station-icon{
width:35px;
height:35px}
.station-icon .icon{
width:21px;
height:21px}
.station strong{
font-size:31px}
.film{
padding:0}
.js .enter{
translate:0 15px}
.film-end p{
font-size:29px}
}

@media(prefers-reduced-motion:reduce){
.js .section-enter,.js .enter{
opacity:1;
translate:none;
transition:none!important}
}


/* Revision 5: straight film edges, sans-serif distances and mirrored owner story. */
.station strong{
font-family:var(--sans);
font-size:26px;
font-weight:400;
letter-spacing:-.035em;
line-height:1.15}
.owner-story{
aspect-ratio:auto;
min-height:720px;
padding:100px 0;
background:var(--green)}
.owner-story>img{
object-position:50% 55%}
.owner-story::after{
background:linear-gradient(270deg,#102b26f2 0%,#102b26db 40%,#102b2690 70%,#102b2660 100%);
z-index:0}
.owner-layout{
position:relative;
z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:center}
.owner-portrait{
width:100%;
max-width:390px;
aspect-ratio:4/5;
justify-self:center;
position:relative;
border:1px solid #f6f3ea54;
border-radius:48px 4px 48px 4px;
background:#173f3559;
backdrop-filter:blur(5px);
overflow:hidden}
.owner-portrait::after{
content:'';
position:absolute;
inset:12px;
border:1px solid #f6f3ea30;
border-radius:36px 2px 36px 2px;
pointer-events:none}
.owner-portrait img{
object-position:79% 48%;
height:100%;
width:100%;
object-fit:cover}
.owner-portrait-placeholder{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
color:#e0e8da}
.owner-portrait-placeholder svg{
width:95px;
height:120px;
opacity:.65;
margin-bottom:18px}
.owner-portrait-placeholder>span{
font-family:var(--serif);
font-size:29px}
.owner-portrait-placeholder small{
font-size:10px;
margin-top:8px;
letter-spacing:.07em;
color:#f6f3ea90}
.owner-copy .eyebrow{
color:#cadacb}
.owner-copy h2{
max-width:560px;
font-size:clamp(42px,4.2vw,64px)}
.owner-copy p:not(.eyebrow){
max-width:510px;
font-size:14px;
line-height:1.85;
color:#f6f3ead6;
margin-top:24px}
.owner-copy .btn{
margin-top:32px}
.owner-story>.section-wave{
z-index:3}

@media(max-width:1000px){
.owner-layout{
gap:50px}
.owner-story{
padding:90px 0}
.owner-portrait{
max-width:340px}
.owner-copy h2{
font-size:46px}
}

@media(max-width:767px){
.station strong{
font-size:24px}
.owner-story{
padding:75px 0;
min-height:0;
aspect-ratio:auto}
.owner-layout{
grid-template-columns:1fr;
gap:42px}
.owner-portrait{
max-width:300px;
aspect-ratio:4/4.5;
justify-self:start}
.owner-story::after{
background:linear-gradient(0deg,#102b26f5,#102b26b8 70%,#102b2666)}
.owner-copy h2{
font-size:44px}
.owner-copy p:not(.eyebrow){
font-size:13px}
.owner-copy .btn{
margin-top:27px}
}


/* Original owner photograph, mirrored precisely in the page layout. */
.owner-portrait{
backdrop-filter:none;
background:var(--green)}
.owner-portrait img{
object-position:12% 50%;
transform:scaleX(-1)}


/* Owner story follows the full-bleed price banner, with the supplied photo mirrored. */
.owner-story{
aspect-ratio:16/9;
min-height:720px;
padding:0}
.owner-story>img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
transform:scaleX(-1)}
.owner-story::after{
background:linear-gradient(90deg,#102b26f0 0%,#102b26d9 30%,#102b2690 45%,#102b261f 65%,#102b2605 100%);
z-index:0}
.owner-layout{
position:relative;
z-index:1;
display:flex;
align-items:center;
min-height:720px;
height:100%;
padding-top:80px;
padding-bottom:80px}
.owner-copy{
width:100%;
max-width:540px}
.owner-copy h2{
max-width:540px}
.owner-copy p:not(.eyebrow){
max-width:470px}
.owner-story>.section-wave{
z-index:3}

@media(min-width:1500px){
.owner-layout{
min-height:calc(100vw * 9 / 16)}
}

@media(min-width:768px) and (max-width:1000px){
.owner-story{
min-height:740px}
.owner-layout{
min-height:740px}
.owner-copy{
max-width:48%}
.owner-copy h2{
font-size:43px}
.owner-copy p:not(.eyebrow){
font-size:13px}
.owner-story>img{
object-position:42% 50%}
}

@media(max-width:767px){
.owner-story{
aspect-ratio:auto;
min-height:1040px;
padding:0}
.owner-story>img{
height:65%;
object-position:13% 50%}
.owner-story::after{
background:linear-gradient(0deg,#102b26 0%,#102b26fa 33%,#102b26b8 51%,#102b2626 76%,transparent 100%)}
.owner-layout{
display:flex;
align-items:flex-end;
min-height:1040px;
padding-top:500px;
padding-bottom:78px}
.owner-copy{
max-width:100%}
.owner-copy h2{
font-size:42px}
.owner-copy p:not(.eyebrow){
font-size:13px}
.owner-copy .btn{
margin-top:26px}
}



@media(min-width:768px){
.header-inner>.mobile-languages{
display:none}
}

/* Mobile repair: solid image geometry and paint layers; no emoji play glyph. */
.film-play span{padding:0;}
.film-play .play-icon{display:block;width:25px;height:25px;margin-left:3px;color:#fff;flex:none;}
#vision .closing-copy{align-items:flex-end;padding-bottom:clamp(48px,6vw,88px);}
#owner-story .owner-layout{align-items:flex-end;}
@media(max-width:767px){
  .hero .eyebrow{display:none;}
  .split-photo,.location-photo{
    display:block;
    position:relative;
    width:100%;min-width:0;
    height:calc(125vw - 60px);
    min-height:300px;max-height:620px;
    aspect-ratio:auto;
    isolation:auto;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .js .split-photo.enter,.js .location-photo.enter{
    opacity:1;
    translate:none;
    transform:none;
    transition:none;
  }
  .split-photo>img,.location-photo>img{
    display:block;position:relative;inset:auto;
    width:100%;height:100%;object-fit:cover;
    opacity:1;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
  }
  .film-play .play-icon{width:21px;height:21px;}
  #vision .closing-copy{padding-bottom:60px;}
}