* {padding: 0; margin: 0;  border: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 1.39vw, 24px); scroll-behavior: smooth; overscroll-behavior: none;   scroll-padding-top: 3rem;}
body {font-size: var(--font-size-body); color: var(--main-color); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--background-color); line-height: var(--line-height-regular);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased }
a {text-decoration: none; color: inherit; }
:is(ul,ol,p) a {  text-underline-offset: 0.15rem; transition: 0.2s opacity ease-in-out; text-decoration: underline; }
:is(ul,ol,p) a:hover { opacity: .5; }
a[href^="mailto:"] {text-decoration: none;}
ul {list-style-type: none;}
p {margin-bottom: 1.6em;}
p:last-child, ul:last-child {margin-bottom: 0;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
p strong { font-weight: var(--font-bold); }
p em { font-style: italic;}
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primary-font: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --header-font: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mono-font: 'Sometype Mono', ui-monospace, monospace;

    /* Font weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 600;

    /* Font sizes */
    --font-size-huge:  4rem;             
    --font-size-h1:    2.5rem;           
    --font-size-h2:    2rem;             
    --font-size-h3:    1.7rem;           
    --font-size-h4:    1.5rem;           
    --font-size-h5:    1.2rem;           
    --font-size-h6:    1rem;             
    --font-size-body:  max(16px,.8rem);  
    --font-size-small: max(14px,.7rem);  
    --font-size-tiny:  max(12px,.6rem);  

    /* Colors */  
    --main-color: var(--my-black);
    --background-color: var(--my-white);
    
    --my-black: #1c1c1c;
    --my-black-40: rgba(0, 0, 0, 0.4);
    --my-full-black: #000;
    --my-white: #fff;
    --my-white-40: rgba(255,255,255,0.4);
    --my-soft-white: #f5f5f5;
    --my-soft-black: #494949;
    --my-red: #cb4520;

    /* Line heights */
    --line-height-tiny: 1;
    --line-height-small: 1.2;
    --line-height-medium: 1.35;
    --line-height-regular: 1.5;
    --line-height-large: 1.6; 

    /* Widths */
    --gutter-side: 2rem;
    --gutter-top: 1rem;
    --max-width: 75rem;
    --max-width-ultra-wide: 150rem;
    --max-width-narrow: 35rem;
    --margin-left: 0%;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 4rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 5rem; 
    --padding-top: 4rem;
    --btn-padding: 0 1.35rem;

    /* Transitions */
    --my-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --my-ease-out: cubic-bezier(.17,.84,.44,1); 

    /* Shadows */
    --drop-shadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blur-shadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --border-radius: 0.5rem; 
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 1.5rem;

    /* Logos */
    --logo-width: 6rem; 
}

/* =========================================================== */
/* ======================== HEADINGS ========================= */
/* =========================================================== */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-medium); font-family: var(--header-font);  line-height: var(--line-height-small); margin-bottom: 0.5em; }
h1, .h1 {font-size: var(--font-size-h1); line-height: var(--line-height-small);} 
h2, .h2 {font-size: var(--font-size-h2); }
h3, .h3 {font-size: var(--font-size-h3); }
h4, .h4 {font-size: var(--font-size-h4); } 
h5, .h5 {font-size: var(--font-size-h5); } 
h6, .h6 {font-size: var(--font-size-h6); } 

h1:has(strong) { font-weight: var(--font-regular); }
h1 strong {  font-weight: var(--font-bold); }

main section:not(.h2-normal) h2 { font-size: var(--font-size-h5); font-family: var(--mono-font); text-transform: uppercase; border-bottom: 1px solid var(--my-black-40); font-weight: var(--font-regular); margin-block: 3rem 2rem; padding-bottom: .3rem; letter-spacing: 0.025em; }
main section:not(.h2-normal) h2:first-child { margin-top: 0; }
main section.h2-normal h2 { font-size: var(--font-size-h3); max-width: 28em; }

/* =========================================================== */
/* ========================= GENERAL ========================= */
/* =========================================================== */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
main { padding-top: var(--padding-top);  }
header, main, footer { min-width: 0; max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, footer > nav, .container {max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }

/* --------------- LENIS --------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* --------------- IMAGES --------------- */
figure, picture { position: relative;}
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
picture { display: flex; }
img, video { width: 100%; height: auto; user-select: none;}

/* --------------- SELECTION --------------- */
*::selection { background: var(--main-color); color: var(--background-color); }

/* --------------- NO VISIBLE SCROLLBAR --------------- */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }

/* --------------- SOCIALS --------------- */
ul.socials { display: flex; align-items: center; gap: 0.2rem; --icon-size: 2rem;  }
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center;  }
ul.socials li a {width: var(--icon-size); height: var(--icon-size); display: flex; justify-content: flex-start; align-items: center; border: 1px solid var(--my-white);  padding: .5rem; border-radius: 50%;}
ul.socials li svg { width: var(--icon-size); height: var(--icon-size); }

/* --------------- LOGO --------------- */
.logo {text-decoration: none;}
.logo img, .logo svg {display: block; height: auto; width: var(--logo-width);}

/* --------------- BUTTONS --------------- */
button { touch-action: manipulation;  text-align: center; }
button,label { cursor: pointer;  user-select: none; }
.btn { background: var(--main-color); color: var(--background-color); padding: var(--btn-padding); border-radius: var(--btn-border-radius); text-align: center; transition: 250ms; transition-property: border,background,color, opacity; }
.btn:hover, .btn.reversed:not(:hover) {background: transparent; color: var(--my-soft-black);}

.buttons { display: flex; gap: 1rem;}
.buttons button { width: 1.8rem; height: 1.8rem; padding: 0.4rem;  display: grid; place-items: center; cursor: pointer; }
.buttons button:hover { background: var(--my-soft-black); }
.buttons.outline button { width: 2rem; height: 2rem; background: transparent; border: 1px solid; }
.buttons.outline button:hover { background: var(--my-soft-white); border: 1px solid var(--my-soft-white);}
.buttons.outline button svg { width: 1rem; height: auto; }
.buttons.outline button path { fill: currentColor;}

/* --------------- SECTIONS --------------- */
section { margin: 0 auto; position: relative; background: var(--background-color); padding-block: var(--margin-y); }
section:first-of-type { padding-top: 0;}
section .container { margin: 0 auto; }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }
section:nth-of-type(even) { background: var(--my-soft-white); }

section.dark + section.dark { padding-top: 0; display: flex; flex-direction: column; }

/* --------------- DARK SECTIONS --------------- */
section.dark { 
    background: var(--my-black); color: var(--my-soft-white);
    a {color: var(--my-white);}
    &:not(.h2-normal) h2  { border-color: var(--my-white-40); }
}
section.black { background: var(--my-full-black); } 

/* --------------- CUT CORNER --------------- */
.cut-corner { position: relative;  --border-width: 1px; --corner-offset: 3rem; }
.cut-corner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--my-white-40); z-index: -1;  clip-path: polygon( 0 0, calc(100% - var(--corner-offset)) 0, 100% var(--corner-offset), 100% 100%, 0 100%, 0 0, var(--border-width) var(--border-width), var(--border-width) calc(100% - var(--border-width)), calc(100% - var(--border-width)) calc(100% - var(--border-width)), calc(100% - var(--border-width)) calc(var(--corner-offset) + var(--border-width) / 2), calc(100% - var(--corner-offset) - var(--border-width) / 2) var(--border-width), var(--border-width) var(--border-width) ) }


/* --------------- BIGTEXT --------------- */
section.has-bigtext .container {
    & > h2:first-child { margin-top: 0; margin-bottom: 7rem; }
    & > p { padding-block: 1rem;  font-weight: var(--font-medium); font-size: var(--font-size-h1);  line-height: var(--line-height-medium); max-width: 25em; margin-bottom: 2rem; }
    & > p .word { color: var(--my-soft-black); transition: color 1s;  }
    & > p .word[data-lit=true] { color: var(--my-soft-white);}
}

/* --------------- PARALLAX --------------- */
p:has(img.parallax) { display: flex; }
img.parallax { --parallax-ratio: 5; width: 100%; aspect-ratio: var(--parallax-ratio); object-fit: cover; animation: parallax linear both; animation-timeline: view(); }
@keyframes parallax { from { object-position: center 0%; } to { object-position: center 100%; } }
@media only screen and (max-width: 1000px) { img.parallax { --parallax-ratio: 3; } }
@media only screen and (max-width: 600px)  { img.parallax { --parallax-ratio: 2; } }
@media (prefers-reduced-motion: reduce)    { img.parallax { animation: none; } }


/* --------------- SECTIONS --------------- */
/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; color: var(--main-color); padding-block: 1rem 0.675rem; user-select: none; transition: transform 0.3s ease; }
header::before { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--background-color);}
header .container { margin-block: 0}
header .container nav { display: flex; justify-content: space-between; align-items: center; }
header .container nav ul { display: flex; gap: 1.8rem; padding-top: 1.1rem; }
header a { font-weight: var(--font-medium); user-select: none; text-decoration: none; }
header button { display: none; width: 2.4rem; height: 2.4rem; background: url(/img/menu.svg) center center / contain no-repeat; color: transparent; overflow: hidden; cursor: pointer; position: relative; left: 0.4rem; }

body.header-hidden header { transform: translateY(-100%); }
body.menuopen header button { background: url('/img/close.svg') center center / contain no-repeat; }

@media (max-width: 1000px) {
    header button { display: block; }
    header .container nav ul { position: absolute; bottom: 0; left: 0; width: 100%;  flex-direction: column; justify-content: center; text-align: center; gap: 0; margin: 0; padding-block: 0 1rem; background: var(--background-color); pointer-events: none; transition: transform 0.25s ease-in-out; transform: translateY(0%); z-index: -1; }
    header .container nav ul li { opacity: 0; pointer-events: none; transition: none; }
    header .container nav ul li a { display: block; padding-block: 0.35rem; font-size: var(--font-size-h5); }
   
    body.menuopen header .container nav ul { transform: translateY(100%); opacity: 1; pointer-events: all; }
    body.menuopen header .container nav ul li { opacity: 1; pointer-events: all; transition: opacity 0.3s ease-in-out; transition-delay: 0.15s; }
}


/* =========================================================== */
/* ========================= FOOTER ========================== */
/* =========================================================== */
footer { color: var(--my-white); background: var(--my-black); overflow: clip;}
footer a { text-decoration: none;}
footer .container { display: grid; grid-template-columns: 1fr; margin: 0 auto; }
footer .left { grid-row: span 2; padding-block: 3rem;  grid-template-columns: auto auto; display: grid;  grid-gap: 3rem; max-width: 35rem; }
footer .left .logo { filter: brightness(0) invert(1); width: 7.55rem; position: relative; display: block; grid-column: -1/1; }
footer .left .logo svg { width: 100%; }
footer .left > ul > li:first-of-type { font-weight: var(--font-medium); }
footer .left > ul > li { margin-bottom: .33rem;}
footer .left address strong { font-weight: var(--font-medium);}
footer .left address em { opacity: .5;}

footer .left:has(ul > li:nth-of-type(7)) { grid-template-columns: 1fr;}
footer .left > ul:has(li:nth-of-type(7)) { display: grid; grid-template-columns: auto 1fr 1fr; grid-column: -1/1; grid-gap: 0 2rem;}
footer .left > ul:has(li:nth-of-type(7)) > li:first-of-type { grid-column: 1; }
footer .left > ul:has(li:nth-of-type(7)) > li:not(:first-of-type) a { opacity: .6;}
footer .left > ul:has(li:nth-of-type(7)) > li:not(:first-of-type) a:hover { opacity: 1;}
footer .left > ul:has(li:nth-of-type(7)) > li:nth-of-type(2n+2) { grid-column: 2; }

footer .large { display: grid; grid-template-columns: auto 1fr; grid-gap: 1rem; align-items: center;  font-size: var(--font-size-h1); line-height: var(--line-height-tiny); padding: 3rem 2rem;  position: relative; transition: color 250ms; font-weight: var(--font-medium);   }
footer a.large:hover { color: var(--my-white-40);}
footer a.large:hover::after { opacity: .4;}
footer a.large::after { content: ''; width: 4rem; height: 3.5rem; background: url('/img/arrow-right-new.svg') center center / contain no-repeat; display: inline-block;  margin-left: auto;  transition: opacity 250ms;}
footer a.large:nth-child(2):last-child { grid-row: span 1;}

footer .postfooter { background: var(--my-full-black); padding-block: 1.5rem;}
footer .postfooter .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
footer .postfooter p { margin-bottom: 0;}
footer .postfooter ul { display: flex; gap: 1rem; }

@media only screen and (min-width: 1025px) {
    footer .container { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;}
    footer .left { padding-right: 2rem; border-right: 1px solid var(--my-white-40); max-width: unset; }
    footer .large:nth-child(2)::before { content: ""; position: absolute; bottom: 0; left: 0; width: 50vw; background: var(--my-white-40); height: 1px; }
    footer .large:last-child::before { display: none;}
}

@media only screen and (max-width: 1024px) {
    footer .large:nth-child(2)::before { position: absolute; top: 0; left: calc(var(--gutter-side) * -1); width: calc(100% + var(--gutter-side) * 2); height: 100%; border-block: 1px solid var(--my-white-40); content: "";  }
}

@media only screen and (max-width: 768px) {
    footer .left { grid-template-columns: 1fr;}
    footer .large { font-size: var(--font-size-huge); padding-inline: 0;}
    footer .large::after { width: 3rem; height: 2rem;}
    footer .postfooter .container { display: flex; flex-direction: column; align-items: center; }
    footer .postfooter ul { justify-content: center; flex-wrap: wrap; width: 100%;  order: -1; gap: .5rem 1.5rem; margin-bottom: 2rem;  }
    footer .socials { display: flex; justify-content: center; }
}


/* =========================================================== */
/* ======================== HAS-VIDEO ======================== */
/* =========================================================== */
section.has-video:first-of-type { 
    padding-block: 0 2rem;

    & + section { padding-top: 2rem;}
    & .container { display: flex; flex-direction: column; }
}

/* =========================================================== */
/* ====================== VIDEO HEADER ======================= */
/* =========================================================== */
section.header h1 { max-width: 22em; margin-top: 2rem;}
section.header h1:last-child { margin-bottom: 0;}

@media only screen and (min-width: 769px) {
    section.header h2 ~ * { margin-left: var(--margin-left);}    
}



/* =========================================================== */
/* ========================= BLOCKS ========================== */
/* =========================================================== */
section.has-blocks { 
    & h1 { font-size: var(--font-size-h2); max-width: 28em;}
    & h2 ~ :not(.blocks) { max-width: 40em;}
    & ul.blocks {  
        display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin-top: 2.5rem; cursor: pointer; 

        &:has(> *:last-of-type:nth-of-type(odd)) > *:nth-child(2) {grid-column: span 2; aspect-ratio: auto;}
        & > li { 
            background: var(--my-soft-black); aspect-ratio: 1/1; color: var(--my-soft-white); padding: 1.5rem 1rem; position: relative; display: flex; flex-direction: column; justify-content: flex-end; 
            
            &::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(28,28,28,1) 0%, rgba(28,28,28,0) 75%);}
            & ul { padding-left: .8rem;}
            & ul li { margin-bottom: .5rem;}
            & ul li::before { content: '>'; display: block; position: absolute; margin-left: -.8rem;}
            
            & > * { position: relative; z-index: 2; }

            & > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 333ms; overflow: clip;}
            & > div > * { min-height: 0;}
            &:is(.active,:hover) > div { grid-template-rows: 1fr;}
        
        }
    }
    @media screen and (max-width: 1450px) {
        & ul.blocks {grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));}
    }
    @media screen and (max-width: 1250px) {
        & ul.blocks { display: flex; flex-wrap: wrap; }
        & ul.blocks > li {flex: 1; min-width: min(20rem, 100%); aspect-ratio: 1!important;}
    }
    @media (pointer: coarse) {
        & ul.blocks > li div { grid-template-rows: 1fr;}
    }
}


/* =========================================================== */
/* ======================= LARGE LIST ======================== */
/* =========================================================== */
section.large-list .container {
    & > ul { margin-top: 2.75rem; margin-left: var(--margin-left); }
    & > ul > li { border-bottom: 1px solid var(--my-black-40); padding: 1.25rem 0; }
    & > ul > li:first-child { border-top: 1px solid var(--my-black-40); }
    & > ul > li strong:first-child { font-weight: var(--font-medium); font-size: var(--font-size-h5); display: block; }
    & > ul > li > p:first-child:not(:last-child) { margin-bottom: .8em; }
    & > ul > li ul { padding-left: .8rem;}
    & > ul > li ul li { margin-bottom: .25em;}
    & > ul > li ul li::before { content: '>'; display: block; position: absolute; margin-left: -.8rem;}
    
    
    @media only screen and (max-width: 768px) {
        & > ul > li strong:first-child { font-size: var(--font-size-h3); margin-bottom: .2em;}
    }
} 



/* =========================================================== */
/* ======================== FACILITY ========================= */
/* =========================================================== */
div.facility {
    display: grid; grid-template-columns: 1fr 20rem; padding: 0 !important; align-items: flex-start; grid-gap: 1rem; 
     
    & figure {position: relative; display: flex; align-items: flex-start;  }`
    & img { width: 100%;  }
    
    & .dots {  position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
    & .dots li { position: absolute; left: var(--left); top: var(--top);  padding: 0; width: 1rem; height: 1rem; clip-path: none;
        &::before { display: none; }
        & button { position: relative; width: 100%; height: 100%;  transform: translate(-50%, -50%); border-radius: 50%; background: #494949; transition: background 333ms;  border: none; cursor: pointer; }
        & button::before { position: absolute; top: 50%; left: 50%; width: 160%; height: 160%; border-radius: 50%; border: 1px solid #CB4520; content: ""; transform: translate(-50%, -50%) scale(var(--scale, 0)); transition: transform 333ms, border-color 333ms; }
        & button::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; border-radius: 50%; content: ""; }
        & button:is(:hover,.active) { background: #CB4520; }
        &:has(button.active) { z-index: 2; }
    }
    & .dots li button.active::before { --scale: 1;  }
    
    & .captions { height: 100%;  margin-inline: auto;  width: 100%; }
    & .captions > li { padding: 1rem .5rem; height: 100%; animation: fade-in 500ms forwards;   display: none; }
    & .captions > li.active {  display: block;  }
    & .captions > li::before { display: none; }
    & .captions > li > * {padding-inline: .5rem;}
    & .captions > li h3 { max-width: unset; margin-block: unset; position: relative;  font-size: 1rem; font-weight: var(--font-bold);}
    & .captions > li h2 { padding-block: .5rem 2rem; margin-bottom: 1rem; padding-right: 2rem;  display: flex;  margin-top: 0;}
    & .captions > li h2::before { position: relative; display: block; margin-right: 1rem; margin-top: .5rem;  content: ""; flex-shrink: 0; width: .9rem; height: .9rem;  border-radius: 50%; background: #CB4520; box-shadow: 0 0 0 4px #1c1c1c, 0 0 0 5px #CB4520;}
    & .captions > li hr { padding-block: 1rem; margin-block: auto; height: 1px; border-top: 1px solid rgba(255, 255, 255, 0.4); }

    .buttons { position: absolute; bottom: 0.5rem; right: 0.5rem;  display: flex; gap: .25rem; }

    @media only screen and (max-width: 1024px) {
         grid-template-columns: 1fr;
        & .dots li { width: 0.8rem; height: 0.8rem; }
    }
}


/* =========================================================== */
/* ==================== CURTAIN CAROUSEL ===================== */
/* =========================================================== */
/* --------------- CARROUSEL --------------- */
section.has-carousel { padding-block: 0; background: var(--my-black); overflow: clip; }
section.has-carousel .container {width: 100%;  }
figure.curtain-carousel { display: flex; position: relative; flex-direction: column; 
    
    & .slider { position: relative; }
    & .slider ul { display: flex; overflow: auto; scroll-snap-type: x mandatory;  margin: 0;  -ms-overflow-style: none; scrollbar-width: none;  scroll-behavior: smooth;}
    & .slider ul::-webkit-scrollbar { display: none; } 

    & .slider ul > li { flex-shrink: 0; width: 100%; scroll-snap-align: center; display: flex; }
    & .slider li img { user-select: none;}
    
    & .buttons { position: relative; }
    
    & .indicators { position: absolute; left: 0; right: 0; margin: 0 auto; z-index: 2; bottom: .8em;  display: flex; justify-content: center; gap: .6em;  pointer-events: none; }
    & .indicators > button { --_size: .8em; width: var(--_size); height: var(--_size);  border-radius: 50%;  transition: transform 500ms; pointer-events: all; position: relative; border: none; background: var(--my-soft-white);   opacity: .5; cursor: pointer; }
    & .indicators > button::before { content: ""; position: absolute;  --_excess: -0.15em; top: var(--_excess); left: var(--_excess); width: calc(100% - var(--_excess) * 2); height: calc(100% - var(--_excess) * 2); }
    & .indicators > button[data-active=true] {  transform: scale(1.3);   opacity: 1;}
    
    & .bottom { display: grid; grid-template-columns: 1fr auto; color: var(--my-soft-white); padding: 2rem var(--gutter-side) 2rem var(--gutter-side);  }
    & .bottom .buttons { margin-top: 2.5rem; gap: 1rem;  }
    
    & .bottom h3 { position: relative; max-width: unset; }
    & .bottom > ul { position: relative; margin: 0; display: grid; max-width: 35rem; }
    & .bottom > ul > li { grid-area:-1/1; opacity: 0; transition: opacity 333ms 125ms;}
    & .bottom > ul > li[data-active=true] { opacity: 1; transition: opacity 333ms 0ms}
    
    &[data-pos="left"] .bottom .buttons button:first-of-type,
    &[data-pos="right"] .bottom .buttons button:last-of-type {opacity: .3; pointer-events: none;}

    & .slider::before,
    & .slider::after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: var(--my-black);  z-index: 3;  transition: transform 500ms 500ms;}
    & .slider::after { right: 0; left: unset;}
    &.in-view .slider::before { transform: translateX(-100%);}
    &.in-view .slider::after { transform: translateX(100%);}

    @media only screen and (max-width: 768px) {
        & .bottom { padding: 1rem;  align-items: flex-end; gap: 1rem; }
        & .bottom h3 { margin-bottom: .8rem;}
        & .bottom h3:last-child { margin-bottom: 0; }
    }
}


/* =========================================================== */
/* ===================== FULLWIDTH IMAGE ===================== */
/* =========================================================== */
section.fullwidth-image { padding: 0; }
section.fullwidth-image .container { width: 100%; max-width: var(--max-width-ultra-wide);}

/* =========================================================== */
/* ======================= LEADERSHIP ======================== */
/* =========================================================== */
.leadership {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 3rem 1rem;

    li {padding: 0!important;}
    li::before {content: none!important;}
    li h3 {position: relative; font-size: 1.3rem; max-width: 100%; font-weight: 600;}
    li img {width: 100%; height: auto; margin-bottom: 0.81rem;}
}

/* =========================================================== */
/* ========================== PAGE =========================== */
/* =========================================================== */
body:has(section.page) header .logo svg { filter: brightness(0) invert(1);}
body:has(section.page),
body:has(section.page) header,
section.page { background: var(--my-black); color: var(--my-soft-white);}
section.page .container { max-width: 45rem; padding-block: 3rem;}



/* =========================================================== */
/* ===================== HAS SHIP OUTLINE ==================== */
/* =========================================================== */
section.has-bigtext:has(+section.has-outline) { padding-bottom: 0; display: flex; flex-direction: column; background: var(--my-black);}
section.has-outline .container h2 { margin-top: 0; }
section.has-outline .container h2 ~ *:not(p:has(img.ship-outline)) { max-width: 30em;}
section.has-outline img.ship-outline { opacity: .5; margin-top: -20%; }

@media only screen and (min-width: 769px) {
    section.has-outline .container { padding-bottom: 12rem;}
    section.has-outline img.ship-outline { position: absolute;  top: 4rem; bottom: 0; right: 0; width: calc(100% - 10em); margin-top: 0; max-width: 50rem; }
}


/* =========================================================== */
/* ===================== TEXT AND VIDEO ====================== */
/* =========================================================== */
section .split { display: grid;  align-items: center; grid-gap: 2rem; max-width: 40rem; margin-inline: auto;  }
section .split:not(:last-of-type) { margin-bottom: 6rem; }

@media only screen and (min-width: 1025px) {
    section .split {grid-template-columns: 1fr 1fr; max-width: unset;}
    section .split:not(:last-of-type) { margin-bottom: 4rem; }
}


/* =========================================================== */
/* ========================= CRAFTS ========================== */
/* =========================================================== */
section.has-crafts { --overlap: 10rem; background: linear-gradient(var(--my-black) calc(100% - var(--margin-y) - var(--overlap)), var(--my-soft-white) 0); }
div.crafts {
    position: relative; 
    & .top { display: flex; justify-content: space-between; gap: 2rem; margin-block: 3.5rem 2rem; }
    & .tabs { display: flex; gap: 3rem; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
    & .tabs button {  font-size: var(--font-size-h5); font-weight: var(--font-medium); white-space: nowrap; background: none; color: var(--my-white-40); padding-bottom: .75rem; border-bottom: 2px solid transparent; transition:  250ms; transition-property: border-color,color; }
    & .tabs button:hover { color: var(--my-soft-white); }
    & .tabs button.active { color: var(--my-white); border-color: var(--my-white); }
    & .buttons { flex-shrink: 0; }

    & .images { display: grid; }
    & .images > li { grid-area: 1 / 1; opacity: 0; transition: opacity 500ms 300ms; }
    & .images > li.active { opacity: 1; transition-delay: 0s;  z-index: 2;}
    & .images img { display: block; aspect-ratio: 16 / 9; object-fit: cover; }

    @media only screen and (max-width: 768px) {
        & .top { gap: 1rem; margin-top: 2rem; margin-left: calc(var(--gutter-side) * -1); width: calc(100% + var(--gutter-side) * 2);  }
        & .tabs { gap: 1.5rem; padding-inline: var(--gutter-side); }
        & .tabs button { font-size: var(--font-size-small); }
        & .buttons { position: absolute; bottom: .5rem; left: 50%; transform: translateX(-50%); z-index: 3;  }
    }
}
@media only screen and (max-width: 768px) {
    section.has-crafts { --overlap: 4rem; }
}


/* =========================================================== */
/* ====================== PUBLICATIONS ======================= */
/* =========================================================== */
section.image-header + section.has-publications { padding-top: 0;}
section.has-publications { background: var(--my-white);}
section.has-publications .publications { 
     display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem 2rem;
     & li { display: flex; flex-direction: column; padding: 1rem; background: var(--my-soft-white);  position: relative; }
     & span { order: -1; display: block;  font-size: var(--font-size-h6);}
     & h3 { margin-block: 2rem}
     & a { display: inline-block; margin: auto 0 0 auto;  }
     & a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
     & a::before { content: ''; display: block;  width: 2rem; height: 1.75rem; background: url('/img/arrow-right-black.svg') center center / contain no-repeat; }

     @media only screen and (max-width: 768px) {
          grid-template-columns: 1fr;
     }
 }


/* --------------- LEGAL --------------- */
body.legal { --background-color: var(--my-black); --main-color: var(--my-soft-white); }
body.legal :is(.logo, header button) { filter: brightness(0) invert(1)}
body.legal section.wide .container { max-width: 40rem; padding-top: 2rem; }
body.legal footer { border-top: 1px solid var(--my-white-40);}

/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.5em 0 0;}
.prose img,  .prose iframe { width: 100%; } 
.prose ul, .prose ul ul ul { list-style: none}
.prose ul > li, .prose ul ul ul > li { margin-bottom: .5em;}
.prose ul > li::before, .prose ul ul ul > li::before { content: ">"; display: inline-block; margin-right: .3em; }
.prose ul ul,.prose ul ul ul ul { list-style: circle; }
.prose :is(ol,ul) :is(ol,ul) { margin: .5em 0; }
.prose blockquote { position: relative; font-style: italic; font-size: 1.5rem; padding-left: .8em; border-left: .25rem solid var(--main-color);}
.prose > * strong { font-weight: var(--font-bold); }
.prose > * em { font-style: italic; }
.prose a:not(.btn) { text-decoration: underline; }
.prose code { font-family: monospace; background: #ddd; padding: .2rem; }
.prose :is(h1,h2,h3,h4) + :is(h1,h2,h3,h4) { margin-top: .2em;}
.prose p + ul { margin-top: 1em;}



/* --------------- MEDIA QUERIES --------------- */
/* MIN */


/* MAX */
@media only screen and (min-width: 769px) {
    :root { 
        --margin-left: 30%; 
    }
}
@media only screen and (max-width: 768px) {
    :root { 
        --gutter-top: 1rem; 
        --gutter-side: 1rem; 

        --font-size-huge:  2.5rem;             
        --font-size-h1:    1.5rem;           
        --font-size-h2:    1.4rem;             
        --font-size-h3:    1.3rem;           
        --font-size-h4:    1.2rem;           
        --font-size-h5:    1.1rem;           
        --font-size-h6:    1rem;     
    }
}

@media only screen and (max-width: 350px) {
    html { font-size: 4.575vw;}
    :root { 
        --font-size-body:  .8rem;  
        --font-size-small: .7rem;  
        --font-size-tiny:  .6rem;  
    }
}

/* --------------- REDUCED MOTION --------------- */
@media (prefers-reduced-motion) { }
  

/* --------------- ANIMATIONS --------------- */
@view-transition {navigation: auto;}
@keyframes fade-in  {
    from { opacity: 0; transform: translateY(1rem);}
    to { opacity: 1; transform: none;}
}