/* ------------------------------------------------------------- */
/* ROOT */
/* ------------------------------------------------------------- */

:root {
--sw1: 0.30; --sh1: 0.41;
--sw2: 0.33; --sh2: 0.001;
--sw3: 0.001; --sh3: 0.001;
--sw4: 0.10; --sh4: 0.38;
--hero_speed: 5000ms;
}

/* ------------------------------------------------------------- */
/* HERO */
/* ------------------------------------------------------------- */

section.hero {
min-height: 100vh;
min-height: clamp(80rem, 100vh, 108rem);
min-height: clamp(80rem, 100dvh, 108rem);
}
section.hero .boxed {
flex-grow: 1;
align-items: stretch;
}

/* COL_SX */
section.hero .col_sx {
width: 50%;
width: clamp(53rem, 50%, 80rem);
padding-right: var(--space_x_out);
text-align: left;
}

/* LOGO */
section.hero .logo {
flex: 1 1 50%;
}
section.hero .logo span {
display: block;
width: var(--space_x_out);
height: auto;
margin-bottom: 3rem;
}
section.hero .logo svg {
display: block;
width: 100%;
margin: 0;
padding: 0;
fill: var(--color_gold);
}

/* TEXT */
section.hero .text {
flex: 1 1 50%;
justify-content: space-between;
}

/* TITLE */
section.hero .title {}
section.hero .title h1 {
display: block;
/*width: min-content;*/
font-family: "Playfair Display", serif;
font-size: 5rem;
font-size: clamp(5rem, 3.8312rem + 3.2468vw, 10rem);
font-weight: 400;
text-align: left;
line-height: 1;
text-transform: uppercase;
}
section.hero .title h1 span {
display: block;
font-size: 2.5rem;
font-size: clamp(2.5rem, 1.9156rem + 1.6234vw, 5rem);
font-weight: 400;
text-align: left;
line-height: 1;
letter-spacing: 0.08em;
/*text-align-last: justify;
text-align: justify;*/
}
section.hero .title h2 {
display: block;
max-width: 57rem;
font-size: 1.4rem;
font-size: clamp(1.4rem, 1.3299rem + 0.1948vw, 1.7rem);
font-weight: 500;
margin: 0;
margin-top: 2rem;
margin-top: clamp(2rem, 1.7662rem + 0.6494vw, 3rem);
text-align: left;
line-height: 1.5;
letter-spacing: 0.1em;
text-transform: uppercase;
}

/* SCROLL DOWN */
section.hero .scroll_down {
display: block;
margin-top: var(--btn_arrowhead_size);
}
section.hero .scroll_down a {
display: inline-block;
text-decoration: none;
}
section.hero .scroll_down a .icon {
position: relative;
display: block;
width: var(--btn_arrowhead_size);
height: var(--btn_arrowhead_size);
border-radius: 50%;
border: 0.1rem solid var(--color_black);
transition: background-color 0.5s;
}
section.hero .scroll_down a .icon, section.hero .scroll_down a:link .icon, section.hero .scroll_down a:visited .icon { background-color: transparent; }
section.hero .scroll_down a:active .icon, section.hero .scroll_down a:hover .icon, section.hero .scroll_down a:focus .icon { background-color: var(--color_black); }
section.hero .scroll_down a .icon::before {
content: "";
position: absolute;
bottom: 50%;
left: 50%;
display: block;
width: 0.1rem;
height: 50%;
height: calc(50% + 0.1rem);
transform-origin: center bottom;
transition: transform 0.5s, background-color 0.5s;
pointer-events: none;
}
section.hero .scroll_down a .icon::before, section.hero .scroll_down a:link .icon::before, section.hero .scroll_down a:visited .icon::before { transform: translateX(-50%) scaleY(2); background-color: var(--color_black); }
section.hero .scroll_down a:active .icon::before, section.hero .scroll_down a:hover .icon::before, section.hero .scroll_down a:focus .icon::before { transform: translateX(-50%) scaleY(1); background-color: var(--color_cream_dark); }
section.hero .scroll_down a .icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
height: 0;
border-left: var(--btn_arrowhead_b) solid transparent;
border-right: var(--btn_arrowhead_b) solid transparent;
border-top: var(--btn_arrowhead_p) solid var(--color_black);
transition: all 0.5s;
}
section.hero .scroll_down a .icon::after, section.hero .scroll_down a:link .icon::after, section.hero .scroll_down a:visited .icon::after { border-top-color: var(--color_black); transform: translate(-50%, -25%); }
section.hero .scroll_down a:active .icon::after, section.hero .scroll_down a:hover .icon::after, section.hero .scroll_down a:focus .icon::after { border-top-color: var(--color_cream_dark); transform: translate(-50%, 0%); }

/* COL_DX */
section.hero .col_dx { width: 50%; }

/* MASK */
section.hero .mask {
position: relative;
display: grid;
height: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0;
overflow: hidden;
}
section.hero .mask::before, section.hero .mask::after {
content: '';
position: absolute;
background-color: var(--color_cream_dark);
z-index: 4;
}
section.hero .mask::before {
top: 0;
left: 50%;
width: var(--main_gap);
height: 100%;
transform: translateX(-50%);
}
section.hero .mask::after {
top: 50%;
left: 0;
width: 100%;
height: var(--main_gap);
transform: translateY(-50%);
}
section.hero .mask figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
section.hero .mask figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
}

/* SHUTTER */
section.hero .mask .shutter {
position: relative;
overflow: hidden;
z-index: 3;
}
section.hero .mask .shutter::before, section.hero .mask .shutter::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color_cream_dark);
transition: transform var(--hero_speed) ease-in-out;
will-change: transform;
transform: scale(1);
}
/*section.hero .mask .s1::before { top: 0; left: 0; transform-origin: top; transform: scaleY(var(--sh1)); }
section.hero .mask .s1::after { top: 0; left: 0; transform-origin: left; transform: scaleX(var(--sw1)); }
section.hero .mask .s2::before { top: 0; right: 0; transform-origin: top; transform: scaleY(var(--sh2)); }
section.hero .mask .s2::after { top: 0; right: 0; transform-origin: right; transform: scaleX(var(--sw2)); }
section.hero .mask .s3::before { bottom: 0; left: 0; transform-origin: bottom; transform: scaleY(var(--sh3)); }
section.hero .mask .s3::after { bottom: 0; left: 0; transform-origin: left; transform: scaleX(var(--sw3)); }
section.hero .mask .s4::before { bottom: 0; right: 0; transform-origin: bottom; transform: scaleY(var(--sh4)); }
section.hero .mask .s4::after { bottom: 0; right: 0; transform-origin: right; transform: scaleX(var(--sw4)); }*/
section.hero .mask .s1::before { top: -1px; left: -1px; width: calc(100% + 2px); transform-origin: top; transform: scaleY(calc(var(--sh1) + 0.01)); }
section.hero .mask .s1::after { top: -1px; left: -1px; height: calc(100% + 2px); transform-origin: left; transform: scaleX(calc(var(--sw1) + 0.01)); }
section.hero .mask .s2::before { top: -1px; right: -1px; width: calc(100% + 2px); transform-origin: top; transform: scaleY(calc(var(--sh2) + 0.01)); }
section.hero .mask .s2::after { top: -1px; right: -1px; height: calc(100% + 2px); transform-origin: right; transform: scaleX(calc(var(--sw2) + 0.01)); }
section.hero .mask .s3::before { bottom: -1px; left: -1px; width: calc(100% + 2px); transform-origin: bottom; transform: scaleY(calc(var(--sh3) + 0.01)); }
section.hero .mask .s3::after { bottom: -1px; left: -1px; height: calc(100% + 2px); transform-origin: left; transform: scaleX(calc(var(--sw3) + 0.01)); }
section.hero .mask .s4::before { bottom: -1px; right: -1px; width: calc(100% + 2px); transform-origin: bottom; transform: scaleY(calc(var(--sh4) + 0.01)); }
section.hero .mask .s4::after { bottom: -1px; right: -1px; height: calc(100% + 2px); transform-origin: right; transform: scaleX(calc(var(--sw4) + 0.01)); }


/* ------------------------------------------------------------- */
/* INTRO VIDEO */
/* ------------------------------------------------------------- */

section.intro_video {}
section.intro_video .boxed {}
section.intro_video .list {
width: 100%;
max-width: 154rem;
margin: 0 auto;
padding: 0 5.7rem;
padding: 0 clamp(5.7rem, -7.5091rem + 12.8995vw, 17rem);
gap: var(--main_gap);
}
section.intro_video .box {}
section.intro_video .sx, section.intro_video .dx { width: calc(20% - (var(--main_gap) / 2)); }
section.intro_video .dx { align-self: flex-end; }
section.intro_video .cx { width: calc(60% - var(--main_gap)); }
section.intro_video .box figure, section.intro_video .box img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
section.intro_video .video {
position: relative;
}
section.intro_video .video a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
z-index: 1;
}
section.intro_video .video a::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: var(--color_black);
transition: opacity 0.5s;
z-index: 3;
}
section.intro_video .video a::before, section.intro_video .video a:link::before, section.intro_video .video a:visited::before { opacity: 0; }
section.intro_video .video a:active::before, section.intro_video .video a:hover::before, section.intro_video .video a:focus::before { opacity: 0.75; }
section.intro_video .video a::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
display: block;
width: 100%;
height: 100%;
background: radial-gradient(
circle at bottom right, 
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0) 30%
);
pointer-events: none;
z-index: 2;
}
section.intro_video .video a .icon {
position: absolute;
right: 2rem;
right: clamp(2rem, 1.7662rem + 0.6494vw, 3rem);
bottom: 2rem;
bottom: clamp(2rem, 1.7662rem + 0.6494vw, 3rem);
display: block;
width: var(--btn_arrowhead_size);
height: var(--btn_arrowhead_size);
border-radius: 50%;
border: 0.1rem solid var(--color_cream_dark);
transition: background-color 0.5s;
z-index: 4;
}
section.intro_video .video a .icon, section.intro_video .video a:link .icon, section.intro_video .video a:visited .icon { background-color: transparent; }
section.intro_video .video a:active .icon, section.intro_video .video a:hover .icon, section.intro_video .video a:focus .icon { background-color: var(--color_cream_dark); }
section.intro_video .video a .icon::before {
content: "";
position: absolute;
top: 50%;
right: 50%;
display: block;
width: 50%;
width: calc(50% + 0.1rem);
height: 0.1rem;
transform-origin: right center;
transition: transform 0.5s, background-color 0.5s;
pointer-events: none;
z-index: 5;
}
section.intro_video .video a .icon::before, section.intro_video .video a:link .icon::before, section.intro_video .video a:visited .icon::before { transform: translateY(-50%) scaleX(2); background-color: var(--color_cream_dark); }
section.intro_video .video a:active .icon::before, section.intro_video .video a:hover .icon::before, section.intro_video .video a:focus .icon::before { transform: translateY(-50%) scaleX(1); background-color: var(--color_black); }
section.intro_video .video a .icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
height: 0;
border-top: var(--btn_arrowhead_b) solid transparent;
border-bottom: var(--btn_arrowhead_b) solid transparent;
border-left: var(--btn_arrowhead_p) solid var(--color_cream_dark);
transition: all 0.5s;
z-index: 5;
}
section.intro_video .video a .icon::after, section.intro_video .video a:link .icon::after, section.intro_video .video a:visited .icon::after { border-left-color: var(--color_cream_dark); transform: translate(-25%, -50%); }
section.intro_video .video a:active .icon::after, section.intro_video .video a:hover .icon::after, section.intro_video .video a:focus .icon::after { border-left-color: var(--color_black); transform: translate(0%, -50%); }

/* ------------------------------------------------------------- */
/* RESPONSIVE */
/* ------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
	
}

@media screen and (orientation: landscape) {
    
}

@media screen and (orientation: portrait) {
  
}

@media only screen and (max-width: 1699px) {
	
}

@media only screen and (max-width: 1599px) {
	
	
}

@media only screen and (max-width: 1439px) {
	
}

@media only screen and (max-width: 1365px) {
    
}

@media only screen and (max-width: 1279px) {
	
	/* HERO */
    section.hero {
    min-height: 100vh;
    min-height: clamp(76.8rem, 100vh, 90rem);
    min-height: clamp(76.8rem, 100dvh, 90rem);
    }
}

@media only screen and (max-width: 1199px) {
	
}

@media only screen and (max-width: 1111px) {
		
	
}

@media only screen and (max-width: 1024px) {


}

@media only screen and (max-width: 1023px) {
	
    /* HERO */
    section.hero {
    min-height: 100vh;
    min-height: 100dvh;
    }
    section.hero .boxed {
    flex-direction: column;
    gap: 3rem;
    gap: clamp(3rem, 0.8313rem + 6.0241vw, 7rem);
    }
    section.hero .col_sx {
    flex: 1 1 50%;
    width: 100%;
    padding-right: 0;
    }
    section.hero .logo { display: none; }
    section.hero .title h2 { max-width: none; line-height: 1.2; }
    section.hero .col_dx {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 116%;
    order: -1;
    }
    section.hero .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    @supports (aspect-ratio: 1 / 1) {
        section.hero .col_dx {
        height: auto;
        aspect-ratio: 700 / 812;
        padding-top: 0;
        }
        section.hero .mask { position: relative; }
    }
    
    /* INTRO VIDEO */
    section.intro_video .list { flex-direction: column; padding: 0; }
    section.intro_video .sx, section.intro_video .dx { width: 33%; }
    section.intro_video .sx { align-self: flex-end; }
    section.intro_video .dx { align-self: flex-start; }
    section.intro_video .cx { width: 100%; }
    
}

@media only screen and (max-width: 833px) {
	
}

@media only screen and (max-width: 767px) {
    
    /* HERO */
    section.hero {
    min-height: calc(100vh - var(--header_height));
    min-height: calc(100dvh - var(--header_height));
    }
	
}

@media only screen and (max-width: 735px) {
	
}

@media only screen and (max-width: 666px) {
    
	
}
	

@media only screen and (max-width: 599px) {

	
}

@media only screen and (max-width: 567px) {
    
	
}

@media only screen and (max-width: 479px) {
	
}

@media only screen and (max-width: 413px) {
		
	
}

@media only screen and (max-width: 374px) {
	
	
}


@media only screen and (max-width: 359px) {
	
}