:root{
  --bg:#050505;
  --panel:#070707;
  --panel2:#101010;
  --text:#f5f5f5;
  --muted:#b8b8b8;
  --gold:#c6a56b;
  --line:rgba(255,255,255,.08);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height:1.6;

  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

/* =========================
   LAYOUT
========================= */

.container{
  width:min(1400px,92%);
  margin:auto;
}

.section{
  position:relative;

  padding:90px 0;

  background:#050505;
}

.dark-section{
  background:#050505;

  border-top:
    1px solid rgba(255,255,255,.06);
}

.panel{
  background:#070707;
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:80px;

  align-items:center;
}

/* =========================
   HEADER
========================= */

.topbar{
  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:1000;

  padding:34px 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,0) 100%
    );

  backdrop-filter:blur(6px);
}

.topbar-inner{
  width:min(1400px,92%);
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  font-size:16px;

  letter-spacing:.30em;
  text-transform:uppercase;

  color:#f5f5f5;
}

.nav{
  display:flex;
  gap:34px;
}

.nav a{
  font-size:13px;

  letter-spacing:.24em;
  text-transform:uppercase;

  color:rgba(255,255,255,.72);

  transition:.3s ease;
}

.nav a:hover{
  color:#ffffff;
}

.nav a.active{
  color:#ffffff;
}

/* =========================
   HERO
========================= */

.hero{
  position:relative;

  overflow:hidden;

  min-height:100vh;

  display:flex;
  align-items:center;

  padding:140px 0 110px;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.60) 38%,
      rgba(0,0,0,.22) 100%
    ),
    url("../images/placeholder-yacht.webp");

  background-size:cover;
  background-position:center;
}

.hero::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:220px;

  background:
    linear-gradient(
      180deg,
      rgba(5,5,5,0) 0%,
      rgba(5,5,5,.92) 100%
    );

  pointer-events:none;
}

.hero .container{
  position:relative;
  z-index:2;
}

.hero img{
  margin-bottom:42px !important;
}

.h1{
  margin:0 0 34px;

  font-size:82px;

  line-height:.88;

  letter-spacing:.02em;

  font-weight:240;

  text-transform:uppercase;

  color:#f5f5f5;

  text-shadow:
    0 4px 24px rgba(0,0,0,.34);
}

.sub{
  color:rgba(198,165,107,.88);

  font-size:13px;
  font-weight:400;

  letter-spacing:.42em;

  text-transform:uppercase;
}

.muted{
  color:rgba(255,255,255,.86);

  line-height:1.85;
}

/* =========================
   BUTTONS
========================= */

.button{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:16px 34px;

  border:
    1px solid rgba(198,165,107,.45);

  border-radius:999px;

  background:
    rgba(0,0,0,.22);

  color:#f5f5f5;

  font-size:11px;

  letter-spacing:.18em;

  text-transform:uppercase;

  transition:
    background .35s ease,
    border-color .35s ease,
    transform .35s ease;

  backdrop-filter:blur(8px);
}

.button:hover{
  background:
    rgba(198,165,107,.12);

  border-color:
    var(--gold);

  transform:
    translateY(-2px);
}

/* =========================
   TITLES
========================= */

.section-title{
  margin-top:14px;

  font-size:54px;

  line-height:1.02;

  font-weight:240;

  letter-spacing:.05em;

  text-transform:uppercase;

  color:#f5f5f5;
}

/* =========================
   CARDS
========================= */

.cards3{
  width:min(1520px,96%);
  margin:auto;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:28px;
}

.card{
  position:relative;

  overflow:hidden;

  height:520px;

  border-radius:28px;

  background:#111;

  transition:
    transform .5s ease,
    box-shadow .5s ease;
}

.card:hover{
  transform:translateY(-6px);

  box-shadow:
    0 20px 50px rgba(0,0,0,.35);
}

.card img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  will-change:transform;

  backface-visibility:hidden;

  transform:scale(1.02);

  transition:
    transform 1.8s ease;
}

.card:hover img{
  transform:scale(1.06);
}

.card::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.38) 42%,
      rgba(0,0,0,.72) 100%
    );
}

.card .content{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:42px;

  z-index:2;
}

.card .title{
  margin:10px 0 0;

  font-size:30px;

  font-weight:300;

  line-height:1.05;

  letter-spacing:.10em;

  text-transform:uppercase;

  color:#f5f5f5;

  text-shadow:
    0 4px 18px rgba(0,0,0,.35);
}

/* =========================
   CONTACT
========================= */

.contact-section{
  padding-top:140px;
  padding-bottom:140px;
}

.contact-section .muted{
  margin-top:26px;

  font-size:18px;

  line-height:2;
}

/* =========================
   FOOTER
========================= */

.footer{
  padding:70px 0;

  border-top:
    1px solid rgba(255,255,255,.06);

  background:#040404;
}

.footer-inner{
  width:min(1400px,92%);
  margin:auto;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:40px;
}

.footer-brand{
  font-size:14px;

  letter-spacing:.30em;
  text-transform:uppercase;

  color:#f5f5f5;

  margin-bottom:18px;
}

.footer-copy{
  max-width:420px;

  color:rgba(255,255,255,.48);

  line-height:1.9;

  font-size:15px;
}

.footer-right{
  display:flex;

  gap:30px;

  flex-wrap:wrap;
}

.footer-right a{
  font-size:11px;

  letter-spacing:.20em;
  text-transform:uppercase;

  color:rgba(255,255,255,.52);

  transition:.3s ease;
}

.footer-right a:hover{
  color:#ffffff;
}

/* =========================
   REVEAL ANIMATION
========================= */

.section,
.card{
  opacity:0;

  transform:
    translateY(28px);

  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

.section.revealed,
.card.revealed{
  opacity:1;

  transform:
    translateY(0);
}

/* =========================
   MOBILE
========================= */

@media(max-width:980px){

  .topbar{
    padding:20px 0;
  }

  .topbar-inner{
    width:92%;
  }

  .brand{
    font-size:12px;

    letter-spacing:.22em;
  }

  .nav{
    gap:14px;
  }

  .nav a{
    font-size:9px;

    letter-spacing:.18em;
  }

  .hero{
    min-height:100svh;

    padding:
      150px 0 90px;

    background-position:
      68% center;
  }

  .hero img{
    width:130px !important;

    margin-bottom:34px !important;
  }

  .h1{
    font-size:56px;

    line-height:.92;

    letter-spacing:.03em;
  }

  .sub{
    font-size:11px;

    letter-spacing:.28em;

    line-height:1.8;
  }

  .muted{
    font-size:17px;

    line-height:1.8;
  }

  .button{
    width:100%;

    max-width:220px;

    justify-content:center;

    padding:16px 22px;

    margin-bottom:14px;
  }

  .section{
    padding:80px 0;
  }

  .grid2,
  .cards3{
    grid-template-columns:1fr;
  }

  .cards3{
    width:92%;

    gap:22px;
  }

  .card{
    height:420px;
  }

  .card .title{
    font-size:28px;
  }

  .section-title{
    font-size:40px;
  }

  .contact-section{
    padding-top:100px;
    padding-bottom:100px;
  }

  .footer-inner{
    flex-direction:column;

    align-items:flex-start;
  }

  .footer-right{
    gap:18px;
  }

}