/* =========================================================
   OWL HOUSE KHLONG 6 — Design tokens
   Palette:
     --ink     #15151A  (near-black, primary bg)
     --charcoal#211F22  (secondary bg / cards)
     --cream   #F4EFE6  (light bg / text on dark)
     --gold    #C8A964  (signature accent)
     --gold-soft #E4D4AC
     --burgundy#5E2331  (deep accent, used sparingly)
   Type:
     Display: Cormorant Garamond (serif, elegant)
     Body TH: Noto Sans Thai
     Body EN/labels: Inter
   ========================================================= */

:root{
  --ink:#15151A;
  --charcoal:#211F22;
  --charcoal-soft:#2A282B;
  --cream:#F4EFE6;
  --cream-dim:#E8E1D3;
  --gold:#C8A964;
  --gold-soft:#E4D4AC;
  --burgundy:#5E2331;
  --line:rgba(244,239,230,0.12);
  --line-dark:rgba(21,21,26,0.08);

  --display: 'Cormorant Garamond', serif;
  --body-th: 'Noto Sans Thai', sans-serif;
  --body-en: 'Inter', sans-serif;

  --container: 1180px;
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body-th), var(--body-en), sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.br-mobile{display:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ---------- Shared section labels ---------- */
.section-eyebrow{
  font-family:var(--body-en);
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 0.9rem;
  font-weight:500;
}
.section-eyebrow--light{ color:var(--gold-soft); }

.section-title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2rem, 4vw, 3.1rem);
  line-height:1.2;
  margin:0 0 1.2rem;
  color:var(--ink);
  letter-spacing:0.01em;
}
.section-title--light{ color:var(--cream); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.95rem 2.2rem;
  font-family:var(--body-en);
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:all .35s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn--primary{
  background:var(--gold);
  color:var(--ink);
}
.btn--primary:hover{ background:var(--gold-soft); }

.btn--ghost{
  border-color:rgba(244,239,230,0.45);
  color:var(--cream);
}
.btn--ghost:hover{
  border-color:var(--cream);
  background:rgba(244,239,230,0.08);
}

.btn--gold{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
.btn--gold:hover{
  background:var(--ink);
  color:var(--gold);
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(21,21,26,0.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:1.1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-mark{
  display:flex;
  align-items:center;
  gap:0.7rem;
  color:var(--cream);
}
.nav-mark__icon{ color:var(--gold); display:flex; }
.nav-mark__text{
  font-family:var(--display);
  font-size:1.25rem;
  letter-spacing:0.04em;
  font-weight:500;
}
.nav-mark__sub{
  font-family:var(--body-en);
  font-size:0.62rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold-soft);
  display:block;
  margin-top:2px;
  font-weight:400;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:2.2rem;
}
.nav-links a{
  font-family:var(--body-en);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cream-dim);
  font-weight:400;
  transition:color .25s ease;
  padding:0.3rem 0;
  border-bottom:1px solid transparent;
}
.nav-links a:hover{ color:var(--gold); }
.nav-cta{
  border:1px solid var(--gold) !important;
  padding:0.6rem 1.3rem !important;
  color:var(--gold) !important;
  border-radius:var(--radius);
}
.nav-cta:hover{
  background:var(--gold);
  color:var(--ink) !important;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:34px; height:34px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  height:1px;
  width:100%;
  background:var(--cream);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle.is-open span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2){
  opacity:0;
}
.nav-toggle.is-open span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:var(--cream);
  overflow:hidden;
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
  transform:scale(1.02);
  animation:hero-zoom 22s ease-out forwards;
}
@keyframes hero-zoom{
  from{ transform:scale(1.08); }
  to{ transform:scale(1); }
}
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(21,21,26,0.55) 0%, rgba(21,21,26,0.35) 38%, rgba(21,21,26,0.85) 100%),
    linear-gradient(100deg, rgba(21,21,26,0.9) 0%, rgba(21,21,26,0.45) 55%, rgba(21,21,26,0.55) 100%);
}
.hero-content{
  position:relative;
  z-index:1;
  max-width:var(--container);
  width:100%;
  margin:0 auto;
  padding:7rem 1.5rem 5rem;
}
.hero-eyebrow{
  font-family:var(--body-en);
  font-size:0.78rem;
  letter-spacing:0.36em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 1.4rem;
  font-weight:500;
  opacity:0;
  animation:fade-up .9s ease 0.2s forwards;
}
.hero-title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  line-height:1.12;
  margin:0 0 1.6rem;
  max-width:20ch;
  opacity:0;
  animation:fade-up 1s ease 0.4s forwards;
}
.hero-title em{
  font-style:italic;
  color:var(--gold);
}
.hero-lede{
  font-size:1.05rem;
  font-weight:300;
  max-width:38ch;
  color:var(--cream-dim);
  margin:0 0 2.6rem;
  opacity:0;
  animation:fade-up 1s ease 0.6s forwards;
}
.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  opacity:0;
  animation:fade-up 1s ease 0.8s forwards;
}
@keyframes fade-up{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.hero-scroll{
  position:absolute;
  bottom:2.2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.7rem;
  color:var(--cream-dim);
}
.hero-scroll span{
  font-family:var(--body-en);
  font-size:0.65rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
}
.hero-scroll__line{
  width:1px;
  height:38px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse{
  0%,100%{ opacity:0.3; }
  50%{ opacity:1; }
}

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  padding:6rem 1.5rem;
  max-width:var(--container);
  margin:0 auto;
}
.about-inner{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:4.5rem;
  align-items:center;
}
.about-figure{
  position:relative;
  display:grid;
  grid-template-columns:1fr 0.78fr;
  gap:1rem;
}
.about-frame{
  overflow:hidden;
  border-radius:var(--radius);
}
.about-frame img{
  width:100%; height:100%;
  object-fit:cover;
  aspect-ratio:3/4;
}
.about-frame--small{
  align-self:end;
  margin-bottom:-2.5rem;
  border:8px solid var(--cream);
  box-shadow:0 20px 50px -20px rgba(21,21,26,0.35);
}
.about-frame--small img{ aspect-ratio:4/5; }

.about-copy .section-title{ margin-bottom:1.4rem; }
.about-text{
  font-size:1rem;
  color:#4a4750;
  margin:0 0 2rem;
  max-width:46ch;
}
.about-points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0.85rem;
}
.about-points li{
  padding-left:1.6rem;
  position:relative;
  font-size:0.95rem;
  color:#3a373d;
}
.about-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:8px; height:8px;
  border:1px solid var(--gold);
  transform:rotate(45deg);
}
.about-points li span{
  font-family:var(--display);
  font-weight:600;
  font-size:1.05em;
  color:var(--ink);
}

/* =========================================================
   OWL DIVIDER — signature element
   ========================================================= */
.owl-divider{
  width:100%;
  line-height:0;
  background:var(--cream);
  position:relative;
}
.owl-divider svg{
  display:block;
  width:100%;
  height:auto;
  max-height:90px;
}
.owl-divider__wing{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.2;
  opacity:0.55;
  transform-origin:600px 60px;
}
.owl-divider__wing--l{
  animation:wing-open-l 1.4s ease forwards;
  transform:rotate(8deg) scale(0.9);
}
.owl-divider__wing--r{
  animation:wing-open-r 1.4s ease forwards;
  transform:rotate(-8deg) scale(0.9);
}
@keyframes wing-open-l{ to{ transform:rotate(0deg) scale(1); opacity:0.55; } }
@keyframes wing-open-r{ to{ transform:rotate(0deg) scale(1); opacity:0.55; } }
.owl-divider__eye{
  fill:var(--gold);
}

/* =========================================================
   ROOMS
   ========================================================= */
.rooms{
  background:var(--ink);
  color:var(--cream);
  padding:6rem 1.5rem 5rem;
}
.rooms-head{
  max-width:var(--container);
  margin:0 auto 3.5rem;
  text-align:center;
}
.rooms .section-title{ color:var(--cream); }
.rooms-sub{
  max-width:50ch;
  margin:0 auto;
  color:var(--cream-dim);
  font-size:0.98rem;
}

.room-showcase{
  max-width:var(--container);
  margin:0 auto 1rem;
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:1rem;
  margin-bottom:1rem;
}
.room-showcase__media{
  overflow:hidden;
  border-radius:var(--radius);
}
.room-showcase__media img{
  width:100%; height:100%;
  object-fit:cover;
  aspect-ratio:4/3;
  transition:transform .8s ease;
}
.room-showcase__media--tall img{ aspect-ratio:3/4.6; }
.room-showcase__media:hover img{ transform:scale(1.04); }

.room-grid{
  max-width:var(--container);
  margin:1rem auto 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.2rem;
}
.room-card{
  background:var(--charcoal);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.room-card__media{
  overflow:hidden;
}
.room-card__media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .7s ease;
}
.room-card:hover .room-card__media img{ transform:scale(1.05); }
.room-card__body{
  padding:1.6rem;
}
.room-card__body h3{
  font-family:var(--display);
  font-weight:500;
  font-size:1.35rem;
  margin:0 0 0.6rem;
  color:var(--gold-soft);
}
.room-card__body p{
  margin:0;
  font-size:0.92rem;
  color:var(--cream-dim);
}

.price-banner{
  max-width:var(--container);
  margin:4rem auto 0;
  background:linear-gradient(120deg, var(--burgundy), #3c1722);
  border-radius:var(--radius);
  padding:2.6rem 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:2rem;
}
.price-banner__text h3{
  font-family:var(--display);
  font-weight:500;
  font-size:1.6rem;
  margin:0;
  color:var(--cream);
}
.price-banner__amount{
  font-family:var(--display);
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  font-weight:600;
  color:var(--gold-soft);
  line-height:1;
}
.price-banner__currency{
  font-size:0.5em;
  vertical-align:middle;
  margin-right:0.2rem;
}
.price-banner__unit{
  font-family:var(--body-th);
  font-size:0.32em;
  font-weight:400;
  color:var(--cream-dim);
  margin-left:0.4rem;
}
.price-banner .btn--gold{
  border-color:var(--gold-soft);
  color:var(--gold-soft);
}
.price-banner .btn--gold:hover{
  background:var(--gold-soft);
  color:var(--ink);
}

/* =========================================================
   AMENITIES
   ========================================================= */
.amenities{
  padding:6rem 1.5rem;
  max-width:var(--container);
  margin:0 auto;
  text-align:center;
}
.amenities .section-title{ margin-bottom:3.5rem; }
.amenity-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.5rem 2rem;
  text-align:left;
}
.amenity{
  padding:2rem 1.6rem;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  transition:border-color .3s ease, transform .3s ease;
}
.amenity:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.amenity__icon{
  color:var(--gold);
  margin-bottom:1.2rem;
}
.amenity h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.2rem;
  margin:0 0 0.5rem;
  color:var(--ink);
}
.amenity p{
  margin:0;
  font-size:0.9rem;
  color:#6b6770;
}

/* =========================================================
   LOCATION
   ========================================================= */
.location{
  background:var(--charcoal);
  color:var(--cream);
  padding:6rem 1.5rem;
}
.location-inner{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.location-text{
  color:var(--cream-dim);
  font-size:1rem;
  max-width:42ch;
  margin:0 0 2rem;
}
.location-tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.7rem;
}
.location-tags span{
  font-family:var(--body-en);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.6rem 1.1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--gold-soft);
}
.location-figure{
  overflow:hidden;
  border-radius:var(--radius);
}
.location-figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  background:var(--ink);
  color:var(--cream);
  padding:6rem 1.5rem 4rem;
  text-align:center;
}
.contact-inner{
  max-width:760px;
  margin:0 auto;
}
.contact .section-title{ color:var(--cream); }
.contact-text{
  color:var(--cream-dim);
  font-size:1rem;
  margin:0 0 3rem;
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.2rem;
  margin-bottom:4.5rem;
}
.contact-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem 1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
  color:var(--cream);
  transition:border-color .3s ease, background .3s ease;
}
.contact-card:hover{
  border-color:var(--gold);
  background:rgba(200,169,100,0.06);
}
.contact-card__icon{ color:var(--gold); }
.contact-card__label{
  font-family:var(--body-en);
  font-size:0.7rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--cream-dim);
}
.contact-card__value{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:0.04em;
}
.contact-card--qr{
  padding:1.2rem;
}
.contact-card__qr{
  width:100%;
  max-width:140px;
  border-radius:var(--radius);
  background:var(--cream);
  padding:6px;
}
.contact-foot{
  border-top:1px solid var(--line);
  padding-top:2.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.8rem;
  color:var(--cream-dim);
}
.contact-mark{ color:var(--gold); }
.contact-foot p{
  margin:0;
  font-size:0.92rem;
}
.contact-foot__copy{
  font-family:var(--body-en);
  font-size:0.72rem;
  letter-spacing:0.06em;
  opacity:0.6;
}

/* =========================================================
   OWL MARK HOVER
   ========================================================= */
.owl-ear{ transform-origin:center; transition:transform .4s ease; }
.owl-ear--l{ transform-origin:8px 18px; }
.owl-ear--r{ transform-origin:40px 18px; }
.nav-mark:hover .owl-ear--l,
.contact-mark:hover .owl-ear--l{ transform:rotate(-12deg); }
.nav-mark:hover .owl-ear--r,
.contact-mark:hover .owl-ear--r{ transform:rotate(12deg); }

/* =========================================================
   HIGHLIGHT — Fitness & Parking
   ========================================================= */
.highlight{
  padding:0 1.5rem 6rem;
  max-width:var(--container);
  margin:0 auto;
}
.highlight-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.5rem;
}
.highlight-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:420px;
  display:flex;
  align-items:flex-end;
}
.highlight-card__media{
  position:absolute;
  inset:0;
}
.highlight-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s ease;
}
.highlight-card:hover .highlight-card__media img{
  transform:scale(1.04);
}
.highlight-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(21,21,26,0) 35%, rgba(21,21,26,0.92) 100%);
}
.highlight-card__body{
  position:relative;
  z-index:1;
  padding:2.2rem;
  color:var(--cream);
}
.highlight-card__body .section-eyebrow{
  color:var(--gold-soft);
  margin-bottom:0.6rem;
}
.highlight-card__body h3{
  font-family:var(--display);
  font-weight:500;
  font-size:1.6rem;
  margin:0 0 0.6rem;
}
.highlight-card__body p{
  margin:0;
  font-size:0.92rem;
  color:var(--cream-dim);
  max-width:38ch;
}

/* =========================================================
   AMENITIES (extended grid for 7 items)
   ========================================================= */
@media (min-width: 1100px){
  .amenity-grid{ grid-template-columns:repeat(4, 1fr); }
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .about-inner{ grid-template-columns:1fr; gap:3rem; }
  .about-frame--small{ margin-bottom:0; }
  .room-grid{ grid-template-columns:repeat(2, 1fr); }
  .room-showcase{ grid-template-columns:1fr; }
  .room-showcase__media--tall{ aspect-ratio:auto; }
  .room-showcase__media--tall img{ aspect-ratio:4/3; }
  .amenity-grid{ grid-template-columns:repeat(2, 1fr); }
  .location-inner{ grid-template-columns:1fr; gap:2.5rem; }
  .location-figure{ order:-1; }
  .location-figure img{ aspect-ratio:16/9; }
  .price-banner{ flex-direction:column; align-items:flex-start; text-align:left; }
  .highlight-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr 1fr; }
  .contact-card--qr{ grid-column:span 2; flex-direction:row; justify-content:center; gap:1.2rem; }
}

@media (max-width: 720px){
  .br-mobile{ display:block; }
  .nav-links{
    position:fixed;
    top:64px; left:0; right:0;
    background:var(--ink);
    flex-direction:column;
    align-items:flex-start;
    padding:1.5rem;
    gap:1.2rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-110%);
    opacity:0;
    transition:transform .35s ease, opacity .35s ease;
    pointer-events:none;
  }
  .nav-links.is-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav-cta{ align-self:flex-start; }
  .nav-toggle{ display:flex; }

  .hero-content{ padding-top:6rem; }
  .room-grid{ grid-template-columns:1fr; }
  .amenity-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .nav-mark__text{ font-size:1.05rem; }
}