/* ============================  FONTS  ============================ */
@font-face {
  font-family: "Causten Round";
  src: url("assets/fonts/Causten-Round/Causten-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Causten Round";
  src: url("assets/fonts/Causten-Round/Causten-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Causten Round";
  src: url("assets/fonts/Causten-Round/Causten-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Causten Round";
  src: url("assets/fonts/Causten-Round/Causten-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink:        #2d2d2d;   /* headings / sub */
  --kicker:     #313131;   /* THE CONCEPT */
  --body-grey:  #3f3f3f;   /* paragraph */
}

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

html, body {
  background: #fff;
  font-family: "Causten Round", Arial, sans-serif;
  color: var(--ink);
  overflow-x: hidden;
}

/* =========================================================
   HERO — full-bleed. Design reference = 1206 x 668.
   Sizes use cqw (container query width): 1cqw == 1% of the
   hero's OWN width. Vertical positions use % of the hero
   box (fixed aspect-ratio keeps them locked to the design).
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1206 / 668;
  background: #fff;
  overflow: hidden;
  container-type: inline-size;
}

/* ---- decorative palm-leaf shadow (left, behind copy) ---- */
.hero__palm {
  position: absolute;
  inset: 0;                /* cover ENTIRE hero background */
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---- pool photo (right) — natural aspect, BR corner pre-rounded ---- */
.hero__photo {
  position: absolute;
  top: 3.3%;
  left: 43.6%;
  width: 54.4%;          /* 656 / 1206 */
  height: auto;          /* keep native 500:482 aspect */
  z-index: 1;
}

/* ---- left copy column ---- */
.hero__copy {
  position: absolute;
  top: 0;
  left: 2.7%;            /* ~33px */
  width: 40%;
  height: 100%;
  z-index: 2;
}

/* THE CONCEPT */
.hero__kicker {
  position: absolute;
  top: 25.4%;
  left: 0;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--kicker);
  font-size: clamp(26px, 3.62cqw, 52px);
  letter-spacing: 0.05em;
  line-height: 1;
}

/* three sub lines */
.hero__sub {
  position: absolute;
  top: 32.0%;
  left: 0;
  color: var(--ink);
  font-size: clamp(15px, 1.83cqw, 26px);
  line-height: 1.9;
}
.hero__sub .line { display: block; white-space: nowrap; }
.hero__sub .line--bold { font-weight: 700; }
.hero__sub .line:not(.line--bold) { font-weight: 400; }

/* body paragraph (bottom-left, justified) */
.hero__body {
  position: absolute;
  top: 80.5%;
  left: 0;
  width: 39.1cqw;        /* hero-relative (~472px) → matches justified block */
  text-align: justify;
  color: var(--body-grey);
  font-weight: 400;
  font-size: clamp(9px, 1.07cqw, 15px);
  line-height: 1.5;
}

/* CTA button — left-aligned, below the paragraph */
.hero__btn {
  position: absolute;
  top: 54%;                /* just below the three sub lines */
  left: 0;                 /* aligns with copy left edge (~2.7% of hero) */
  display: inline-block;
  padding: 0.85cqw 2.1cqw;
  background: #111;
  color: #fff;
  font-family: "Causten Round", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 1.05cqw, 15px);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s ease;
  z-index: 2;
}
.hero__btn:hover { background: #333; }

/* Amalfi Suites monogram, bottom-right */
.hero__logo {
  position: absolute;
  right: 2.2%;
  bottom: 2.4%;          /* dropped into the photo's rounded-corner white pocket */
  width: 10%;
  height: auto;
  z-index: 2;
}

/* =========================================================
   MOBILE / NARROW (<= 768px) — single column reflow.
   ========================================================= */
@media (max-width: 768px) {
  .hero {
    aspect-ratio: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    container-type: normal;
    padding: 0 0 28px;
  }

  .hero__palm { display: none; }

  /* photo first */
  .hero__photo {
    position: static;
    order: 1;
    width: 100%;
    margin: 0 auto;
  }

  /* copy below */
  .hero__copy {
    position: static;
    order: 2;
    width: 100%;
    height: auto;
    padding: 26px 22px 0;
  }

  .hero__kicker {
    position: static;
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: 0.05em;
  }

  .hero__sub {
    position: static;
    margin-top: 14px;
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.7;
  }
  .hero__sub .line { white-space: normal; }

  .hero__body {
    position: static;
    width: 100%;
    max-width: 540px;
    margin-top: 20px;
    text-align: left;
    font-size: 14px;
  }

  .hero__btn {
    position: static;
    margin-top: 20px;
    padding: 11px 22px;
    font-size: 13px;
  }

  .hero__logo {
    position: static;
    order: 3;
    width: 120px;
    margin: 22px 22px 0 auto;
  }
}


a.hero__btn.hero__btn--outline {
    background: #b08d4f;
    left: 270px;
}