:root {
  --villa-carbon: #05080a;
  --villa-carbon-soft: #0b0f12;
  --villa-night: #071722;
  --villa-ocean: #0d526d;
  --villa-ocean-bright: #2c7892;
  --villa-bone: #f0ece3;
  --villa-ink: #101317;
  --villa-vermilion: #ed3d20;
  --villa-vermilion-dark: #c72f17;
  --villa-rule: rgba(240, 236, 227, 0.24);
  --villa-sans: "Avenir Next", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --villa-condensed: "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --villa-gutter: clamp(22px, 3.7vw, 58px);
  --villa-header-height: 88px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--villa-header-height);
  background: var(--villa-carbon);
}

body.surf99-villa-document {
  margin: 0;
  overflow-x: hidden;
  color: var(--villa-bone);
  background: var(--villa-carbon);
  font-family: var(--villa-sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: antialiased;
}

body.surf99-villa-document.menu-open {
  overflow: hidden;
}

.surf99-villa-document :where(figure, h1, h2, h3, p, dl, dd, ul) {
  margin: 0;
}

.surf99-villa-document ul {
  padding: 0;
  list-style: none;
}

.surf99-villa-document a {
  color: inherit;
  text-decoration: none;
}

.surf99-villa-document a,
.surf99-villa-document button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.surf99-villa-document img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.surf99-villa-document svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.6;
}

.surf99-villa-document a:focus-visible,
.surf99-villa-document button:focus-visible {
  outline: 3px solid var(--villa-vermilion);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 12px 18px;
  color: var(--villa-ink);
  background: var(--villa-bone);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.villa-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: var(--villa-header-height);
  padding: 0 30px 0 36px;
  border-bottom: 1px solid var(--villa-rule);
  background: rgba(5, 8, 10, 0.97);
  transition: min-height 220ms ease-out, background-color 220ms ease-out;
}

.villa-header.is-scrolled {
  min-height: 72px;
  background: rgba(5, 8, 10, 0.995);
}

.villa-brand,
.villa-footer-brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 12px;
  font-family: var(--villa-condensed);
  font-size: clamp(40px, 3.6vw, 58px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.8;
}

.villa-brand img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2.25vw, 38px);
  font-family: var(--villa-condensed);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.primary-nav > a:not(.nav-book) {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
}

.primary-nav > a:not(.nav-book)::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  background: var(--villa-vermilion);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease-out;
}

.primary-nav > a:hover::after,
.primary-nav > a[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-book {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 27px;
  color: white;
  background: var(--villa-vermilion);
  transition: background-color 200ms ease-out;
}

.nav-book:hover {
  background: var(--villa-vermilion-dark);
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  color: var(--villa-bone);
  background: transparent;
}

.menu-toggle span {
  display: block;
  width: 27px;
  height: 1px;
  margin: 8px auto;
  background: currentColor;
  transition: transform 220ms ease-out;
}

.villa-hero {
  position: relative;
  min-height: 690px;
  padding-top: var(--villa-header-height);
  overflow: hidden;
}

.villa-hero::after {
  position: absolute;
  inset: var(--villa-header-height) 0 0;
  background: linear-gradient(90deg, rgba(5, 8, 10, 0.78) 0%, rgba(5, 8, 10, 0.37) 38%, rgba(5, 8, 10, 0.03) 72%);
  content: "";
  pointer-events: none;
}

.villa-hero-media {
  position: absolute;
  inset: var(--villa-header-height) 0 0;
}

.villa-hero-media img {
  object-position: 55% center;
}

.villa-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: calc(690px - var(--villa-header-height));
  flex-direction: column;
  justify-content: center;
  padding: 50px var(--villa-gutter);
}

.chapter,
.english-heading {
  font-family: var(--villa-condensed);
  font-weight: 900;
  letter-spacing: 0.015em;
}

.chapter {
  font-size: clamp(18px, 1.7vw, 28px);
}

.chapter span {
  margin-right: 9px;
  color: var(--villa-vermilion);
  font-size: 1.42em;
}

.villa-hero h1 {
  max-width: 10.5em;
  margin-top: 22px;
  font-size: clamp(46px, 5.6vw, 88px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1.2;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.55);
}

.villa-hero-copy > p:last-child {
  margin-top: 22px;
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 700;
}

.villa-facts {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 108px;
  padding: 0 var(--villa-gutter);
  background: linear-gradient(90deg, var(--villa-night), var(--villa-ocean), var(--villa-night));
}

.villa-facts > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-left: 1px solid rgba(237, 61, 32, 0.9);
}

.villa-facts > div:first-child {
  border-left: 0;
}

.villa-facts dt {
  font-family: var(--villa-condensed);
  font-size: clamp(40px, 3.7vw, 58px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.villa-facts dt small {
  margin-left: 4px;
  font-size: 0.42em;
}

.villa-facts dd {
  font-family: var(--villa-condensed);
  font-size: clamp(12px, 1.05vw, 17px);
  font-weight: 800;
}

.villa-facts .pet-fact svg {
  width: 42px;
  height: 42px;
}

.villa-feature {
  display: grid;
  grid-template-columns: minmax(320px, 32%) minmax(0, 68%);
  min-height: 600px;
  border-bottom: 1px solid var(--villa-rule);
}

.villa-feature-copy,
.sanitary-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 6vw, 94px) var(--villa-gutter);
  background: var(--villa-carbon);
}

.english-heading {
  font-size: clamp(35px, 3.6vw, 58px);
  line-height: 1;
}

.accent-rule {
  display: block;
  width: 72px;
  height: 3px;
  margin: 22px 0 26px;
  background: var(--villa-vermilion);
}

.villa-feature h2,
.bedrooms h2,
.sanitary h2,
.villa-area h2 {
  font-size: clamp(32px, 3.4vw, 54px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.25;
}

.villa-feature-copy > p:last-child,
.sanitary-copy > p:last-child {
  max-width: 30em;
  margin-top: 24px;
}

.villa-feature-media {
  min-height: 600px;
  overflow: hidden;
}

.bedrooms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  padding: clamp(54px, 6vw, 92px) var(--villa-gutter);
  background: var(--villa-carbon-soft);
}

.bedrooms-heading {
  grid-column: 1 / 3;
  padding-bottom: 38px;
}

.bedrooms-heading h2 {
  margin-top: 20px;
}

.bedroom-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--villa-carbon);
}

.bedroom-card figure {
  height: clamp(360px, 42vw, 640px);
  overflow: hidden;
}

.bedroom-card > div {
  position: absolute;
  inset: auto 0 0;
  padding: 70px 26px 24px;
  background: linear-gradient(transparent, rgba(5, 8, 10, 0.92));
}

.bedroom-card span {
  color: var(--villa-vermilion);
  font-family: var(--villa-condensed);
  font-size: 46px;
  font-weight: 900;
}

.bedroom-card h3 {
  font-family: var(--villa-condensed);
  font-size: clamp(26px, 2.3vw, 38px);
  line-height: 1;
}

.bedroom-card p {
  margin-top: 7px;
  font-size: 14px;
}

.bedroom-three {
  grid-column: 1 / 3;
}

.bedroom-three figure {
  height: clamp(340px, 38vw, 560px);
}

.sanitary {
  display: grid;
  grid-template-columns: 34% 33% 33%;
  min-height: 560px;
  background: var(--villa-carbon);
}

.sanitary-kitchen,
.sanitary-bath {
  min-height: 560px;
  overflow: hidden;
  border-left: 1px solid var(--villa-rule);
}

.floor-plan {
  display: grid;
  grid-template-columns: minmax(280px, 30%) minmax(0, 70%);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  padding: clamp(52px, 6vw, 88px) var(--villa-gutter);
  color: var(--villa-ink);
  background: var(--villa-bone);
}

.floor-copy .english-heading {
  font-size: clamp(36px, 4vw, 62px);
}

.floor-copy h2 {
  margin-top: 28px;
  font-family: var(--villa-condensed);
  font-size: clamp(34px, 3.7vw, 58px);
  letter-spacing: -0.025em;
}

.floor-copy h2 strong {
  color: var(--villa-vermilion);
}

.floor-copy > p:last-child {
  margin-top: 18px;
  font-size: 14px;
}

.floor-media {
  height: clamp(320px, 35vw, 530px);
}

.floor-media img {
  object-fit: contain;
}

.amenities {
  display: grid;
  grid-template-columns: minmax(250px, 25%) minmax(0, 75%);
  gap: clamp(26px, 4vw, 64px);
  padding: clamp(56px, 6vw, 92px) var(--villa-gutter);
  background: var(--villa-carbon);
}

.amenities-heading .english-heading {
  font-size: clamp(37px, 4vw, 64px);
}

.amenities-heading > p:last-child {
  max-width: 21em;
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 28px 18px;
}

.amenities-grid li {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.amenities-grid svg {
  width: 38px;
  height: 38px;
  color: var(--villa-bone);
}

.amenities-grid span {
  font-size: 12px;
  font-weight: 700;
}

.villa-area {
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 520px;
  border-top: 1px solid var(--villa-rule);
}

.villa-area-media {
  min-height: 520px;
  overflow: hidden;
}

.villa-area-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 6vw, 94px) var(--villa-gutter);
  background: var(--villa-night);
}

.villa-area-copy .english-heading {
  margin-bottom: 24px;
  color: var(--villa-ocean-bright);
  font-size: 18px;
  letter-spacing: 0.08em;
}

.villa-area-copy > p {
  margin-top: 20px;
}

.villa-primary {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
  padding: 0 30px;
  color: white;
  background: var(--villa-vermilion);
  font-weight: 800;
  transition: background-color 200ms ease-out;
}

.villa-primary:hover {
  background: var(--villa-vermilion-dark);
}

.villa-primary svg {
  width: 28px;
  height: 28px;
  transition: transform 200ms ease-out;
}

.villa-primary:hover svg {
  transform: translateX(5px);
}

.villa-contact-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}

.villa-contact-links a {
  display: flex;
  min-height: 48px;
  align-items: center;
  border-bottom: 1px solid rgba(240, 236, 227, 0.48);
  font-weight: 700;
  transition: color 200ms ease-out;
}

.villa-contact-links a:hover {
  color: var(--villa-vermilion);
}

.villa-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px 48px;
  padding: 42px var(--villa-gutter) 28px;
  border-top: 1px solid var(--villa-rule);
  background: var(--villa-carbon);
}

.villa-footer-brand img {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
}

.villa-footer p {
  font-size: clamp(14px, 1.35vw, 20px);
  letter-spacing: 0.12em;
}

.villa-footer nav {
  display: flex;
  gap: 26px;
  font-family: var(--villa-condensed);
  font-size: 14px;
  font-weight: 800;
}

.villa-footer small {
  grid-column: 1 / 3;
  color: rgba(240, 236, 227, 0.64);
}

.villa-top {
  justify-self: end;
  min-height: 44px;
  font-family: var(--villa-condensed);
  font-weight: 800;
}

.media-reveal {
  overflow: hidden;
}

.motion-ready .hero-enter,
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.motion-ready .hero-enter.is-visible,
.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.motion-ready .villa-hero-copy.hero-enter.is-visible {
  transition-delay: 100ms;
}

.motion-ready .media-reveal {
  clip-path: inset(0 0 100% 0);
}

.motion-ready .media-reveal.is-visible,
.motion-ready .reveal.is-visible .media-reveal {
  clip-path: inset(0 0 0 0);
  transition: clip-path 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1180px) {
  .villa-header {
    padding-right: 22px;
    padding-left: 24px;
  }

  .primary-nav {
    gap: 18px;
    font-size: 13px;
  }

  .nav-book {
    padding: 0 20px;
  }

  .villa-facts {
    padding: 0 22px;
  }

  .villa-facts > div {
    gap: 8px;
  }

  .amenities-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 920px) {
  .menu-toggle {
    z-index: 2;
    display: block;
    justify-self: end;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4.5px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4.5px) rotate(-45deg);
  }

  .primary-nav {
    position: fixed;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 96px 28px 36px;
    background: var(--villa-carbon);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 220ms;
  }

  .primary-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .primary-nav > a:not(.nav-book) {
    width: 100%;
    min-height: 52px;
    border-bottom: 1px solid var(--villa-rule);
    font-size: 20px;
  }

  .nav-book {
    width: 100%;
    min-height: 62px;
    margin-top: 16px;
    font-size: 19px;
  }

  .villa-hero,
  .villa-hero-copy {
    min-height: 610px;
  }

  .villa-facts {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }

  .villa-facts > div {
    min-height: 96px;
    border-top: 1px solid rgba(237, 61, 32, 0.65);
  }

  .villa-facts > div:nth-child(odd) {
    border-left: 0;
  }

  .villa-facts .pet-fact {
    grid-column: 1 / 3;
  }

  .villa-feature {
    grid-template-columns: 1fr;
  }

  .villa-feature-copy {
    min-height: 460px;
  }

  .villa-feature-media {
    min-height: 500px;
  }

  .sanitary {
    grid-template-columns: 1fr 1fr;
  }

  .sanitary-copy {
    grid-column: 1 / 3;
    min-height: 430px;
  }

  .sanitary-kitchen,
  .sanitary-bath {
    min-height: 450px;
  }

  .floor-plan,
  .amenities {
    grid-template-columns: 1fr;
  }

  .floor-copy {
    max-width: 520px;
  }

  .amenities-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .villa-area {
    grid-template-columns: 1fr;
  }

  .villa-area-media {
    min-height: 430px;
  }

  .villa-footer {
    grid-template-columns: 1fr auto;
  }

  .villa-footer nav {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .villa-footer small {
    grid-column: 1;
    grid-row: 3;
  }

  .villa-top {
    grid-column: 2;
    grid-row: 3;
  }
}

@media (max-width: 680px) {
  :root {
    --villa-header-height: 72px;
    --villa-gutter: 20px;
  }

  .villa-header,
  .villa-header.is-scrolled {
    min-height: var(--villa-header-height);
    padding: 0 18px;
  }

  .villa-brand {
    gap: 8px;
    font-size: 34px;
  }

  .villa-brand img {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .villa-hero {
    min-height: 560px;
  }

  .villa-hero::after {
    background: linear-gradient(0deg, rgba(5, 8, 10, 0.8), rgba(5, 8, 10, 0.08) 75%);
  }

  .villa-hero-copy {
    min-height: 560px;
    justify-content: flex-end;
    padding-bottom: 54px;
  }

  .chapter {
    font-size: 16px;
  }

  .villa-hero h1 {
    margin-top: 14px;
    font-size: clamp(30px, 8.1vw, 32px);
    letter-spacing: -0.07em;
  }

  .villa-facts {
    grid-template-columns: 1fr 1fr;
  }

  .villa-facts > div {
    min-height: 88px;
    flex-direction: column;
    gap: 5px;
  }

  .villa-facts dt {
    font-size: 38px;
  }

  .villa-feature-copy,
  .sanitary-copy {
    min-height: auto;
    padding: 66px 20px;
  }

  .english-heading {
    font-size: 39px;
  }

  .villa-feature h2,
  .bedrooms h2,
  .sanitary h2,
  .villa-area h2 {
    font-size: 36px;
  }

  .villa-feature-media {
    min-height: 340px;
  }

  .bedrooms {
    grid-template-columns: 1fr;
    padding: 66px 20px;
  }

  .bedrooms-heading,
  .bedroom-three {
    grid-column: 1;
  }

  .bedroom-card figure,
  .bedroom-three figure {
    height: 410px;
  }

  .sanitary {
    grid-template-columns: 1fr;
  }

  .sanitary-copy {
    grid-column: 1;
  }

  .sanitary-kitchen,
  .sanitary-bath {
    min-height: 390px;
    border-top: 1px solid var(--villa-rule);
    border-left: 0;
  }

  .floor-plan,
  .amenities {
    padding: 64px 20px;
  }

  .floor-media {
    height: 270px;
  }

  .amenities-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 12px;
  }

  .amenities-grid svg {
    width: 34px;
    height: 34px;
  }

  .villa-area-media {
    min-height: 340px;
  }

  .villa-area-copy {
    padding: 62px 20px;
  }

  .villa-contact-links {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .villa-footer {
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 34px 20px 24px;
  }

  .villa-footer-brand {
    gap: 9px;
    font-size: 46px;
  }

  .villa-footer-brand img {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .villa-footer p {
    grid-column: 1 / 3;
    grid-row: 2;
    padding-top: 18px;
    border-top: 1px solid var(--villa-rule);
    font-size: 14px;
  }

  .villa-footer nav {
    grid-column: 1 / 3;
    grid-row: 3;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .villa-footer small {
    grid-row: 4;
  }

  .villa-top {
    grid-row: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .motion-ready .hero-enter,
  .motion-ready .reveal,
  .motion-ready .media-reveal {
    clip-path: none;
    opacity: 1;
    transform: none;
  }
}