@layer reset {
  html { text-size-adjust: none; hanging-punctuation: first allow-end last; }
  *,*::before,*::after { box-sizing: border-box; }
  h1,h2,h3,h4,h5,h6 { text-wrap: balance; margin: 0; }
  p,li,dd { margin: 0; text-wrap: pretty; }
  ul,ol,dl { margin: 0; padding: 0; }
  img,video,iframe { display: block; max-inline-size: 100%; block-size: auto; border-style: none; }
  figure { margin: 0; }
  :focus-visible { outline-offset: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }    
    html {
      interpolate-size: allow-keywords;
      &:focus-within {
        scroll-behavior: smooth;
      }
    }
  }
}

:root {
  --white: #FFFFFF;
  --grey: #20252D;
  --greyLight: #DBDBDB;
  --easeInOutCirc: cubic-bezier(0.85, 0, 0.15, 1);
  --easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1);
  --easeInOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
  --fluid-18-32: clamp(1.125rem, 1rem + 0.625vw, 2rem);
  --fluid-30-69: clamp(1.875rem, 1.5268rem + 1.7411vw, 4.3125rem);
  --fluid-16-24: clamp(1rem, 0.9286rem + 0.3571vw, 1.5rem);
  --fluid-24-48: clamp(1.5rem, 1.2857rem + 1.0714vw, 3rem);
  --fluid-18-24: clamp(1.125rem, 1.0714rem + 0.2679vw, 1.5rem);
  --fluid-30-120: clamp(1.875rem, 1.0714rem + 4.0179vw, 7.5rem);
  --fluid-50-200: clamp(3.125rem, 1.7857rem + 6.6964vw, 12.5rem);
  --fluid-40-160: clamp(2.5rem, 1.4286rem + 5.3571vw, 10rem);
  --fluid-20-60: clamp(1.25rem, 0.8929rem + 1.7857vw, 3.75rem);
  --fluid-13-23: clamp(0.8125rem, 0.7232rem + 0.4464vw, 1.4375rem);
  --fluid-14-18: clamp(0.875rem, 0.8393rem + 0.1786vw, 1.125rem);
  --fluid-200-480: clamp(12.5rem, 10rem + 12.5vw, 30rem);
  --fluid-160-320: clamp(10rem, 8.5714rem + 7.1429vw, 20rem);
  --fluid-30-60: clamp(1.875rem, 1.6071rem + 1.3393vw, 3.75rem);
  --fluid-20-25: clamp(1.25rem, 1.2054rem + 0.2232vw, 1.5625rem);
  --fluid-15-20: clamp(0.9375rem, 0.8929rem + 0.2232vw, 1.25rem);
  --fluid-15-60: clamp(0.9375rem, 0.5357rem + 2.0089vw, 3.75rem);  
  --fluid-15-30: clamp(0.9375rem, 0.8036rem + 0.6696vw, 1.875rem);
  --fluid-16-18: clamp(1rem, 0.9821rem + 0.0893vw, 1.125rem);

  --width-l: clamp(62.5%, calc(60rem + 12.5vw), 87.5%);
  --width-m: clamp(42%, calc(109.2rem - 49vw), 87.5%);
}

html { scrollbar-width: thin; scroll-behavior: smooth; scrollbar-color: var(--white) var(--grey); }
html, body { 
  margin: 0; padding: 0; min-height: 100vh; color: var(--grey); background: var(--grey);
  font-family: "Source Sans 3", sans-serif; line-height: 1.5; font-optical-sizing: auto; font-weight: 300; font-style: normal;
}
h2, .h2 { 
  font-family: "Montserrat", sans-serif; font-weight: 400; font-style: normal; font-size: var(--fluid-30-60); line-height: 1.2; color: var(--grey); 
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
p { 
  font-family: "Source Sans 3", sans-serif; font-weight: 300; font-style: normal; font-size: var(--fluid-18-24); line-height: 1.5; color: var(--grey); 
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
a { color: var(--grey); text-decoration: none; }
.buttons { 
  display: flex; align-items: center; width: 100%; gap: var(--fluid-15-60); flex-wrap: wrap; 
}
a.more { 
  font-family: "Source Sans 3", sans-serif; font-weight: 400;font-style: normal; font-size: var(--fluid-16-24); line-height: 1; color: var(--grey); 
  text-transform: uppercase; letter-spacing: 0.2em; border-bottom: 1px solid var(--grey); padding-block: 0.625rem;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; white-space: nowrap;
}
a.book {
  font-family: "Source Sans 3", sans-serif; font-weight: 400;font-style: normal; font-size: var(--fluid-16-24); line-height: 1; color: var(--white); 
  text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; background-color: var(--grey); padding: var(--fluid-15-20) var(--fluid-20-25);
  text-box-trim: trim-both; text-box-edge: cap alphabetic; white-space: nowrap;
}

figure, figcaption { display: block; margin: 0; padding: 0; }
figure {
  width: 100%; overflow: hidden; 
  img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
}
section { 
  padding-top: var(--fluid-30-120); padding-bottom: var(--fluid-40-160); background: var(--white);
  > * + * { margin-top: var(--fluid-30-120); }
}
.intro + section { padding-top: var(--fluid-30-120); }
section + section { padding-top: 0; }
.reveal-from-left img { clip-path: inset(0 100% 0 0); }
.reveal-from-right img { clip-path: inset(0 0 0 100%); }
.reveal-from-top img { clip-path: inset(0 0 100% 0); }
.reveal-from-bottom img { clip-path: inset(100% 0 0 0); }
.reveal-from-top.is-inview img, 
.reveal-from-right.is-inview img, 
.reveal-from-bottom.is-inview img, 
.reveal-from-left.is-inview img { 
  clip-path: inset(0 0 0 0); transition: clip-path 1s var(--easeInOutCirc), transform .75s var(--easeInOutExpo); 
}

header { 
  display: grid; grid-template-areas: "stack"; height: 100vh; background: var(--grey);
  figure, .header { grid-area: stack; } 
  figure { 
    position: relative;
    &:before { position: absolute; top: 0; left: 0; content: ""; z-index: 1; display: block; width: 100%; height: 100%; background-color: var(--grey); opacity: 0; }
    img { object-position: center top; }
  }
}

.header {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start; padding-block: var(--fluid-30-120); margin-inline: auto; width: var(--width-l);
  &::before { content: ""; display: block; flex: 1; } 
  .logo {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    svg { display: block; width: var(--fluid-200-480); height: auto; }
    p { font-weight: 400; letter-spacing: 0.2em; font-size: var(--fluid-13-23); margin-top: var(--fluid-14-18); color: var(--white);}
  }
  .lang {
    flex: 1; display: flex; justify-content: flex-end; align-items: center;
    position: relative; font-weight: 400; letter-spacing: 0.2em; font-size: var(--fluid-13-23); color: var(--white);

    .lang-switcher-toggle {
      anchor-name: --lang-toggle; line-height: 1; gap: 0.25rem; 
      appearance: none; border: 0; padding: 0; margin: 0; background: transparent; color: inherit; font: inherit;
      letter-spacing: inherit; cursor: pointer; display: inline-flex; align-items: center;      
    }

    .lang-switcher-toggle::after {
      content: ""; display: inline-block; flex: none; width: 0.45em; height: 0.45em;
      border-right: 0.125rem solid currentColor; border-bottom: 0.125rem solid currentColor;
      transform: translateY(-0.08em) rotate(45deg); transform-origin: 50% 50%;      
    }

    &:has(.lang-switcher:popover-open) {
      .lang-switcher-toggle::after {
        transform: translateY(0.08em) rotate(-135deg);
      }
    }

    .lang-switcher {
      position-anchor: --lang-toggle;
      list-style: none; margin: 0; position: absolute; inset: auto; top: calc(anchor(bottom) + 0.5rem); left: anchor(left); background-color: transparent; border: 0;
    }

    .lang-switcher::backdrop { background: transparent; }

    .lang-switcher a { display: block; text-decoration: none; color: var(--white);  }
  }
}
@media screen and (max-width: 50rem) {
  header { height: auto; aspect-ratio: 4 / 3; }
}

.intro {
  background: var(--grey); padding-top: var(--fluid-30-120); 
  .txt { 
    h2, p { color: var(--white); }
    p { grid-row: 1; }
  }
}

.logo-header { 
  width: fit-content; margin-inline: auto;
  img { width: var(--fluid-160-320); }
}

.txt { 
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto 1fr; column-gap: var(--fluid-40-160); row-gap: var(--fluid-30-60); margin-inline: auto;  width: var(--width-l);
  h2, p { color: var(--grey); }
  h2 { grid-column: 1; grid-row: 1; align-self: start; }
  .buttons { grid-column: 1; grid-row: 2; align-self: start; }
  p { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}
@media screen and (max-width: 50rem) {
  .txt { display: flex; flex-direction: column; } 
}

.hero {
  display: grid; grid-template-areas: "stack";
  figure { grid-area: stack; }
}
@media screen and (max-width: 50rem) {
  .hero {
    figure { aspect-ratio: 4 / 3; }
  } 
}

.photos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fluid-30-120); margin-inline: auto;  width: var(--width-l);
  figure { aspect-ratio: 1; }
}
@media screen and (max-width: 38rem) {
  .photos {
    display: flex; flex-direction: column;
    figure { aspect-ratio: 4 / 3; }
  }  
}

.outro { 
  background: var(--greyLight);
  figure {
    width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  }
  p { grid-row: 1; }
}
@media screen and (max-width: 50rem) {
  .outro {
    figure { aspect-ratio: 4 / 3; }
  } 
}

.privacy {
  display: flex; flex-direction: column; background: var(--white); padding-top: 0;
  .wrapper { width: var(--width-m); margin-inline: auto; }   
  .header { width: 100%; }
  .logo {
    svg > * { fill: var(--grey); }
    p { color: var(--grey); }
  }
  .lang {
    color: var(--grey);
    .lang-switcher a { color: var(--grey); }
  }
  h1 { margin-top: 0; margin-bottom: var(--fluid-30-60); }
  p + p { margin-top: var(--fluid-30-60); }
}

footer { 
  background: url(../img/footer.jpg) no-repeat center/cover; padding-top: var(--fluid-30-120); padding-bottom: var(--fluid-40-160);
  h2 { font-size: var(--fluid-24-48);}
  p { font-size: var(--fluid-16-18); }
}
footer .data { 
  display: flex; justify-content: space-between; padding-bottom: var(--fluid-30-120); row-gap: var(--fluid-30-120); margin-inline: auto; width: var(--width-l);
  div { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: var(--fluid-30-60); width: fit-content; }
}
footer .copyright {
  display: flex; width: 87.5%; padding-top: var(--fluid-30-60); margin-inline: auto;
  border-top: 1px solid var(--grey); column-gap: var(--fluid-30-120); row-gap: var(--fluid-15-60);  
  p:first-child { margin-right: auto; }
  br { display: none; }
}
@media screen and (max-width: 87.5rem) {
  footer .data { width: 87.5%; column-gap: var(--fluid-15-30); } 
}
@media screen and (max-width: 50rem) {
  footer .data, footer .copyright { flex-direction: column; }
  footer .copyright p { flex: 1; }
}
@media screen and (max-width: 21.875rem) {
  footer .copyright {
    br { display: block; }
  } 
}


.hidden,[hidden] { display: none !important;}
.visually-hidden { border: 0;  clip: rect(0, 0, 0, 0);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  white-space: nowrap;  width: 1px;}
.visually-hidden.focusable:active,.visually-hidden.focusable:focus {  clip: auto;  height: auto;  margin: 0;  overflow: visible;  position: static;  white-space: inherit;  width: auto;}
.invisible { visibility: hidden;}
.clearfix::before,.clearfix::after { content: "";  display: table;}
.clearfix::after { clear: both;}
@media print {
  *,  *::before,  *::after { background: #fff !important;color: #000 !important;box-shadow: none !important;text-shadow: none !important;}
  a,a:visited {text-decoration: underline;}
  a[href]::after {content: " (" attr(href) ")";}
  abbr[title]::after {content: " (" attr(title) ")"; }
  a[href^="#"]::after,a[href^="javascript:"]::after {content: "";}
  pre {white-space: pre-wrap !important;}
  pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}
  tr,img {page-break-inside: avoid;}
  p,h2,h3 {orphans: 3;widows: 3;}
  h2,h3 {page-break-after: avoid;}
}