@font-face {
  font-family: HelveticaNow;
  src: url('../fonts/68832fb0ffba9b1995adac75-helveticanowdisplay-medium.ttf') format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: HelveticaNow, Arial, sans-serif; color: #fff; background: #242720; }
.preloader { display: none; }
.has-js .preloader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: #202520; text-align: center;
  opacity: 1; visibility: visible;
  transition: opacity .65s ease, visibility .65s ease;
}
.has-js .preloader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { width: min(76vw, 340px); display: grid; justify-items: center; }
.preloader-mark {
  font-family: Georgia, 'Times New Roman', serif; font-size: clamp(30px, 7vw, 42px);
  line-height: 1.05; font-weight: 400; white-space: nowrap;
  animation: preloader-mark-in .75s ease-out both;
}
.preloader-mark span { display: block; margin-top: 4px; font-size: .53em; }
.preloader-line { width: 100%; height: 1px; margin-top: 38px; overflow: hidden; background: #ffffff30; }
.preloader-line span { display: block; width: 100%; height: 100%; background: #e3cfaa; transform: scaleX(0); transform-origin: left; animation: preloader-progress .75s .12s cubic-bezier(.2, .8, .2, 1) forwards; }
.preloader-label { margin-top: 15px; color: #d6c5a7; font-size: 11px; text-transform: uppercase; }
.has-js:not(.is-ready) .site-header,
.has-js:not(.is-ready) .hero-art,
.has-js:not(.is-ready) .hero::after,
.has-js:not(.is-ready) .hero-people,
.has-js:not(.is-ready) .hero-eyebrow,
.has-js:not(.is-ready) .hero h1,
.has-js:not(.is-ready) .hero-subtitle,
.has-js:not(.is-ready) .hero-description,
.has-js:not(.is-ready) .hero-actions { animation-play-state: paused; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.wrap { width: min(100% - 80px, 1280px); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; top: 10px; z-index: 30; padding: 10px 14px; background: #fff; color: #111; }
.skip-link:focus { left: 10px; }

.site-header {
  position: absolute; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
  animation: reveal-down .75s .1s both;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 23px; white-space: nowrap; }
.brand-logo { display: block; width: auto; height: 40px; }
.brand-text { display: block; }
.brand-sub { display: block; font-family: HelveticaNow, Arial, sans-serif; font-size: 12px; line-height: 1; }
.site-nav {
  display: flex; align-items: center; gap: 28px;
  padding: 15px 26px; border-radius: 7px;
  background: rgba(29, 32, 30, .89);
  backdrop-filter: blur(10px);
}
.site-nav > a, .nav-group summary { font-size: 15px; white-space: nowrap; }
.site-nav > a, .nav-group summary { transition: color .25s ease; }
.site-nav > a:hover, .nav-group:hover summary, .nav-group[open] summary { color: #e9d9b7; }
.nav-group { position: relative; }
.nav-group::before { content: ''; position: absolute; top: 100%; left: -12px; right: -12px; height: 18px; }
.nav-group summary { list-style: none; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
  content: ''; width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .25s ease;
}
.nav-group[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.nav-dropdown {
  position: absolute; top: calc(100% + 13px); left: -18px;
  min-width: 250px; display: grid; gap: 2px; padding: 9px;
  background: rgba(28, 33, 31, .96); border: 1px solid #ffffff2b; border-radius: 6px;
  box-shadow: 0 22px 42px #0008; backdrop-filter: blur(14px);
  transform-origin: top left;
}
.nav-group[open]:not(.is-closing) .nav-dropdown { animation: dropdown-enter .24s cubic-bezier(.2, .8, .2, 1) both; }
.nav-group.is-closing .nav-dropdown { animation: dropdown-exit .17s ease-in both; pointer-events: none; }
.nav-dropdown a { padding: 10px 12px; border-radius: 4px; font-size: 14px; white-space: nowrap; transition: background .22s ease, color .22s ease, padding-left .22s ease; }
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { padding-left: 16px; background: #ffffff16; color: #e9d9b7; }
.menu-toggle { display: none; }

.hero { position: relative; isolation: isolate; height: 100vh; overflow: hidden; background: #242720; }
.hero-scene { position: absolute; inset: -3%; z-index: -1; }
.hero-art {
  width: 100%; height: 100%;
  background: url('../images/cagliari-terrace-retouched.png') left center / cover no-repeat;
  animation: backdrop-enter 1.5s both, backdrop-drift 19s 1.5s ease-in-out infinite alternate;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(12, 16, 14, .18), rgba(12, 16, 14, .18)),
              linear-gradient(90deg, rgba(12, 16, 14, .35), rgba(12, 16, 14, .08) 58%, transparent),
              linear-gradient(0deg, rgba(12, 16, 14, .33), transparent 65%);
  animation: overlay-enter 1.4s both;
}
.hero-people {
  position: absolute; right: 3%; bottom: 0; z-index: 1;
  width: auto; height: min(76vh, 570px); max-width: 48%;
  object-fit: contain; object-position: bottom right;
  filter: drop-shadow(0 16px 24px #0005);
  transform-origin: bottom center;
  animation: people-enter 1.1s .35s both;
}
.hero-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding-bottom: clamp(36px, 6vh, 76px);
}
.hero-eyebrow { margin: 0 0 17px; font-size: 13px; color: #ead8b7; text-transform: uppercase; animation: reveal-up .8s .24s both; }
.hero h1 { max-width: 670px; margin: 0 0 22px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(54px, 5.2vw, 78px); line-height: 1.02; font-weight: 400; animation: reveal-up .8s .35s both; }
.hero-subtitle { max-width: 570px; margin: 0 0 18px; font-size: 23px; line-height: 1.18; animation: reveal-up .8s .52s both; }
.hero-description { max-width: 535px; margin: 0 0 27px; font-size: 16px; line-height: 1.45; animation: reveal-up .8s .67s both; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; animation: reveal-up .8s .82s both; }
.button { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 11px 22px; border-radius: 6px; font-size: 16px; white-space: nowrap; transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 12px 28px #0004; }
.button-primary { background: #dac49c; color: #171a17; }
.button-primary:hover { background: #ead7b5; }
.button-arrow { display: grid; place-items: center; width: 21px; height: 21px; flex: none; border-radius: 50%; font-size: 14px; line-height: 1; transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s ease; }
.button:hover .button-arrow, .button:focus-visible .button-arrow { transform: rotate(35deg) translate(1px, -1px); }
.button-primary .button-arrow { background: #171a17; color: #fff; }
.button-secondary { background: #ffffff24; color: #fff; backdrop-filter: blur(10px); }
.button-secondary:hover { background: #ffffff36; }
.button-secondary .button-arrow { border: 1px solid #ffffff91; }

.custom-cursor { position: fixed; top: 0; left: 0; z-index: 100; width: 10px; height: 10px; border-radius: 50%; background: #e9d9b7; box-shadow: 0 0 0 1px #15191766, 0 0 16px #e9d9b766; pointer-events: none; opacity: 0; transition: width .2s ease, height .2s ease, opacity .2s ease, background .2s ease, border .2s ease; }
.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-active { width: 30px; height: 30px; border: 1px solid #e9d9b7; background: #e9d9b733; box-shadow: 0 0 0 1px #15191766; }
.has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor summary { cursor: none; }

@keyframes reveal-down { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes backdrop-enter { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1.04); } }
@keyframes backdrop-drift { from { transform: scale(1.04) translate(-.4%, .3%); } to { transform: scale(1.09) translate(.4%, -.5%); } }
@keyframes overlay-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes people-enter { from { opacity: 0; transform: translateY(35px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dropdown-enter { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dropdown-exit { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-5px) scale(.98); } }
@keyframes preloader-mark-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes preloader-progress { to { transform: scaleX(1); } }

@media (max-width: 1000px) {
  .site-nav { gap: 18px; padding-inline: 18px; }
  .site-nav > a, .nav-group summary { font-size: 14px; }
  .hero-people { right: -1%; max-width: 52%; height: min(69vh, 510px); }
  .hero h1, .hero-eyebrow, .hero-subtitle, .hero-description { max-width: 54%; }
}

@media (max-width: 700px) {
  .wrap { width: min(100% - 40px, 1280px); }
  .site-header { padding: 15px 20px; }
  .brand { font-size: 20px; }
  .brand-logo { height: 33px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 10px; border: 0; border-radius: 5px; background: #313730; z-index: 22; }
  .menu-toggle span { width: 100%; height: 2px; background: #fff; }
  .site-nav { display: none; position: absolute; top: 68px; left: 20px; right: 20px; max-height: calc(100vh - 84px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 18px; background: #272d27; box-shadow: 0 20px 40px #0009; }
  .site-nav.is-open { display: flex; }
  .site-nav > a, .nav-group summary { padding: 12px; font-size: 16px; }
  .nav-group summary { justify-content: space-between; }
  .nav-group::before { display: none; }
  .nav-dropdown { position: static; min-width: 0; padding: 4px 0 8px 9px; background: #ffffff0b; border: 0; box-shadow: none; backdrop-filter: none; }
  .nav-dropdown a { white-space: normal; }
  .hero-art { background-position: 78% center; }
  .hero-people { top: 65px; right: -20px; bottom: auto; height: min(50vh, 355px); max-width: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); }
  .hero::after { background: linear-gradient(0deg, rgba(17, 22, 18, .91), rgba(17, 22, 18, .4) 68%, rgba(17, 22, 18, .12)); }
  .hero-content { padding-bottom: 28px; }
  .hero-eyebrow { max-width: 100%; margin-bottom: 10px; font-size: 11px; }
  .hero h1 { max-width: 100%; margin-bottom: 13px; font-size: clamp(40px, 10vw, 54px); }
  .hero-subtitle { max-width: 100%; margin-bottom: 14px; font-size: 17px; }
  .hero-description { max-width: 350px; margin-bottom: 17px; font-size: 15px; line-height: 1.35; }
}

@media (max-width: 380px), (max-height: 620px) {
  .hero-content { padding-bottom: 18px; }
  .hero h1 { font-size: 38px; margin-bottom: 10px; }
  .hero-eyebrow { font-size: 10px; }
  .hero-subtitle { margin-bottom: 12px; }
  .hero-description { margin-bottom: 12px; font-size: 15px; }
  .hero-people { height: min(46vh, 320px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .hero-art, .hero::after, .hero-people, .hero-eyebrow, .hero h1, .hero-subtitle, .hero-description, .hero-actions { animation: none; }
  .hero-scene, .button { transition: none; }
  .nav-group[open]:not(.is-closing) .nav-dropdown, .nav-group.is-closing .nav-dropdown { animation: none; }
  .preloader-mark, .preloader-line span { animation: none; }
  .preloader-line span { transform: scaleX(1); }
  .has-js .preloader { transition: none; }
}