:root {
  --green: #315849;
  --green-dark: #213f35;
  --leaf: #6f8f62;
  --lime: #b9ce76;
  --cream: #f7f3e9;
  --sand: #e9dfca;
  --orange: #d68c45;
  --ink: #28312e;
  --muted: #6e756f;
  --white: #fff;
  --container: 1240px;
  --radius: 28px;
  --shadow: 0 22px 60px rgba(41, 63, 54, .12);
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  font-family: "Noto Sans TC", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.8;
  overflow-x: hidden
}
img {
  display: block;
  width: 100%;
  height: auto
}
a {
  text-decoration: none;
  color: inherit
}
button {
  font: inherit
}
.container {
  width: min(var(--container), calc(100% - 48px));
  margin: auto
}
.section {
  padding: 120px 0
}
.softBg {
  background: linear-gradient(180deg, #f7f4eb 0%, #fbfaf6 100%)
}
.sectionKicker, .eyebrow {
  display: block;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  margin-bottom: 18px
}
.sectionHead h2, .introCopy h2, .cafePanel h2, .occasionCopy h2, .locationText h2 {
  font-family: "Playfair Display", "Noto Serif TC", serif;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: .02em;
  margin: 0;
  color: var(--green-dark)
}
.sectionHead h2 {
  font-size: clamp(34px, 4vw, 58px)
}
.sectionHead p {
  max-width: 680px;
  margin: 20px auto 0;
  color: var(--muted)
}
.centered {
  text-align: center
}
.siteHeader {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 8px 0;
  transition: .35s
}
.siteHeader.scrolled {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 35px rgba(23, 47, 39, .08);
  backdrop-filter: blur(16px);
  padding: 10px 0
}
.headerInner {
  width: min(1380px, calc(100% - 40px));
  margin: auto;
  display: flex;
  align-items: center;
  gap: 28px
}
/*.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  color: #fff
}*/
.brand{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.brand img{
    display:block;
    height:68px;
    width:auto;
    transition:.3s;
}


.siteHeader.scrolled .brand {
  color: var(--green-dark)
}
.brandMark {
  width: 52px;
  height: 52px;
  border: 1px solid currentColor;
  border-radius: 50% 45% 52% 42%;
  display: grid;
  place-items: center;
  font-family: "Playfair Display", serif;
  font-size: 26px;
  transform: rotate(-5deg)
}
.brandText {
  display: flex;
  flex-direction: column;
  line-height: 1.15
}
.brandText b {
  font-size: 18px;
  letter-spacing: .12em
}
.brandText small {
  font-size: 9px;
  letter-spacing: .24em;
  margin-top: 6px
}
.mainNav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-left: auto
}
.mainNav a {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  white-space: nowrap
}
.siteHeader.scrolled .mainNav a {
  color: var(--ink)
}
.mainNav a:after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0px;
  height: 1px;
  background: var(--orange);
  transition: .3s
}
.mainNav a:hover:after {
  left: 0;
  right: 0
}
.headerBooking {
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap
}
.menuBtn {
  display: none;
  background: none;
  border: 0;
  padding: 8px
}
.menuBtn span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  margin: 6px 0
}
.hero {
  position: relative;
  min-height: 920px;
  color: #fff
}
.heroSlider, .heroSlide {
  position: absolute;
  inset: 0
}
.heroSlide {
  opacity: 0;
  transition: opacity 1s ease;
  background-size: cover;
  background-position: center
}
.heroSlide.isActive {
  opacity: 1;
  z-index: 1
}
.heroShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 42, 33, .72) 0%, rgba(18, 42, 33, .38) 43%, rgba(18, 42, 33, .08) 75%), linear-gradient(0deg, rgba(15, 34, 29, .25), transparent 45%)
}
.heroContent {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 60px));
  margin: auto;
  padding-top: 235px
}
.heroContent h1, .heroContent h2 {
  font-family: "Playfair Display", "Noto Serif TC", serif;
  font-size: clamp(54px, 6vw, 82px);
  line-height: 1.1;
  margin: 0 0 28px;
  font-weight: 600;
  letter-spacing: .02em
}
.heroContent p {
  font-size: 17px;
  max-width: 690px;
  margin: 0 0 36px;
  color: rgba(255, 255, 255, .88)
}
.heroActions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: .3s
}
.btn:hover {
  transform: translateY(-3px)
}
.btnPrimary {
  background: var(--orange);
  color: #fff
}
.btnGhost {
  border: 1px solid rgba(255, 255, 255, .65);
  color: #fff;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(5px)
}
.btnDark {
  background: var(--green-dark);
  color: #fff
}
.btnLine {
  border: 1px solid var(--green);
  color: var(--green);
  background: #fff
}
.heroDots {
  position: absolute;
  z-index: 3;
  right: 55px;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 12px
}
.heroDots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
  padding: 0
}
.heroDots button.isActive {
  background: #fff;
  transform: scale(1.35)
}
.bookingStrip {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 48px));
  background: #fff;
  color: var(--ink);
  border-radius: 22px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden
}
.bookingStrip>div {
  padding: 26px 28px;
  border-right: 1px solid #ece9df
}
.bookingStrip>div:last-child {
  border: 0
}
.bookingStrip small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .18em;
  margin-bottom: 6px
}
.bookingStrip strong {
  font-size: 15px
}
.bookingStrip .price {
  background: var(--green);
  color: #fff
}
.bookingStrip .price small {
  color: rgba(255, 255, 255, .65)
}
.intro {
  padding-top: 170px
}
.introGrid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 90px;
  align-items: center
}
.introCopy h2 {
  font-size: clamp(40px, 4.2vw, 52px);
  margin-bottom: 28px
}
.introCopy p {
  color: var(--muted);
  margin: 0 0 18px
}
.textLink {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: 18px;
  color: var(--green);
  font-weight: 700
}
.textLink span {
  font-size: 24px;
  transition: .3s
}
.textLink:hover span {
  transform: translateX(6px)
}
.introVisual {
  position: relative;
  padding: 30px 40px 40px 0
}
.introMain {
  margin: 0;
  border-radius: 180px 30px 120px 30px;
  overflow: hidden;
  box-shadow: var(--shadow)
}
.introMain img {
  height: 520px;
  object-fit: cover
}
.introBadge {
  position: absolute;
  right: 0;
  top: 0;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(8deg);
  box-shadow: 0 14px 30px rgba(214, 140, 69, .3)
}
.introBadge b {
  font-size: 18px
}
.introBadge span {
  font-size: 12px
}
.introNote {
  position: absolute;
  left: -40px;
  bottom: 0;
  background: var(--cream);
  padding: 22px 28px;
  border-radius: 18px;
  color: var(--green);
  box-shadow: var(--shadow);
  font-family: "Playfair Display", serif
}
.introNote b {
  font-family: "Noto Sans TC", sans-serif
}
.featureGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 55px
}
.featureCard {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--green-dark);
  background-position: center;
  background-size: cover;
  padding: 42px 30px 35px;
  border-radius: 26px 26px 80px 26px;
  min-height: 300px;
  box-shadow: 0 14px 35px rgba(45, 67, 57, .06);
  transition: .35s;
  overflow: hidden
}
.featureCard:nth-child(1) { background-image: url("../images/index/01.jpg") }
.featureCard:nth-child(2) { background-image: url("../images/index/02.jpg") }
.featureCard:nth-child(3) { background-image: url("../images/index/03.jpg") }
.featureCard:nth-child(4) { background-image: url("../images/index/04.jpg") }
.featureCard:before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 40, 31, 0) 0%,
    rgba(20, 40, 31, .05) 35%,
    rgba(20, 40, 31, .58) 67%,
    rgba(20, 40, 31, .9) 100%
  );
}
.featureCard > * {
  position: relative;
  z-index: 1
}
.featureCard:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow)
}
.featureNo {
  position: absolute;
  right: 24px;
  top: 18px;
  font-family: "Playfair Display", serif;
  font-size: 46px;
  color: rgba(255, 255, 255, .32)
}
.featureIcon {
  width: 62px;
  height: 62px;
  border-radius: 50% 42% 52% 43%;
  background: rgba(255, 255, 255, .9);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 28px;
  margin-bottom: 28px
}
.featureCard h3 {
  font-size: 20px;
  margin: 0 0 12px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35)
}
.featureCard p {
  font-size: 14px;
  color: rgba(255, 255, 255, .88);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .3)
}
.stayTop {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 45px
}
.outlineLink {
  border-bottom: 1px solid var(--green);
  padding-bottom: 5px;
  color: var(--green);
  font-weight: 700
}
.roomGrid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: 340px 340px;
  gap: 22px
}
.roomCard {
  border-radius: 28px;
  overflow: hidden;
  position: relative
}
.roomCard.large {
  grid-row: 1/3
}
.roomCard a {
  display: block;
  height: 100%;
  position: relative
}
.roomCard img {
  height: 100%;
  object-fit: cover;
  transition: .6s
}
.roomCard:hover img {
  transform: scale(1.04)
}
.roomOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(24, 46, 38, .8), transparent 60%)
}
.roomInfo {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
  color: #fff
}
.roomInfo span {
  font-size: 10px;
  letter-spacing: .2em
}
.roomInfo h3 {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  margin: 6px 0
}
.roomInfo p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14px
}
.textCard {
  background: var(--green);
  color: #fff;
  border-radius: 28px 90px 28px 28px
}
.roomText {
  padding: 44px
}
.roomText span {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--lime)
}
.roomText h3 {
  font-family: "Playfair Display", serif;
  font-size: 32px;
  line-height: 1.35;
  margin: 15px 0
}
.roomText p {
  font-size: 14px;
  color: rgba(255, 255, 255, .75)
}
.roomText a {
  margin-top: 20px;
  color: #fff;
  font-weight: 700
}
.cafeShowcase {
  position: relative;
  min-height: 850px;
  padding: 80px 0 110px;
  background: var(--cream);
  overflow: hidden
}
.cafePhoto {
  width: 68%;
  height: 620px;
  border-radius: 0 180px 180px 0;
  overflow: hidden
}
.cafePhoto img {
  height: 100%;
  object-fit: cover
}
.cafePanel {
  position: absolute;
  right: 7%;
  top: 180px;
  width: 470px;
  background: #fff;
  padding: 55px;
  border-radius: 90px 28px 28px 28px;
  box-shadow: var(--shadow)
}
.cafePanel h2 {
  font-size: 48px;
  margin-bottom: 8px
}
.cafePanel h3 {
  font-size: 24px;
  line-height: 1.5;
  margin: 0 0 20px;
  color: var(--ink)
}
.cafePanel p {
  color: var(--muted);
  margin-bottom: 28px
}
.cafeSmall {
  position: absolute;
  right: 2%;
  bottom: 55px;
  width: 280px;
  height: 190px;
  border: 10px solid #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow)
}
.cafeSmall img {
  height: 100%;
  object-fit: cover
}
.galleryGrid {
  display: grid;
  grid-template-columns: 1.25fr .8fr;
  grid-template-rows: 300px 300px;
  gap: 20px;
  margin-top: 50px
}
.galleryGrid figure {
  margin: 0;
  overflow: hidden
}
.galleryGrid img {
  height: 100%;
  object-fit: cover;
  transition: .6s
}
.galleryGrid figure:hover img {
  transform: scale(1.04)
}
.g1 {
  grid-row: 1/3;
  border-radius: 120px 24px 24px 24px
}
.g2 {
  border-radius: 24px 90px 24px 24px
}
.g3 {
  border-radius: 24px 24px 90px 24px
}
.occasionGrid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  align-items: center
}
.occasionCopy h2 {
  font-size: clamp(40px, 4vw, 58px);
  margin-bottom: 22px
}
.occasionCopy p {
  color: var(--muted)
}
.occasionCopy ul {
  list-style: none;
  padding: 0;
  margin: 28px 0
}
.occasionCopy li {
  padding: 10px 0 10px 28px;
  position: relative;
  border-bottom: 1px dashed #d7d6cd
}
.occasionCopy li:before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--orange)
}
.occasionCards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}
.occasionCard {
  height: 210px;
  background: #fff;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 28px;
  box-shadow: 0 14px 35px rgba(45, 67, 57, .07);
  position: relative;
  overflow: hidden
}
.occasionCard:before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--cream);
  right: -30px;
  top: -30px
}
.occasionCard b {
  font-family: "Playfair Display", serif;
  font-size: 34px;
  color: var(--green);
  position: relative
}
.occasionCard span {
  color: var(--muted);
  position: relative
}
.locationBox {
  background: var(--green-dark);
  color: #fff;
  border-radius: 38px 160px 38px 38px;
  min-height: 470px;
  padding: 70px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items: center;
  overflow: hidden
}
.locationText h2 {
  color: #fff;
  font-size: clamp(40px, 4vw, 58px);
  margin-bottom: 25px
}
.locationText p {
  color: rgba(255, 255, 255, .72);
  max-width: 620px
}
.locationActions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px
}
.locationPhoto {
  margin: 0;
  height: 320px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 34px 110px 34px 34px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .22)
}
.locationPhoto img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover
}
.cta {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  overflow: hidden
}
.ctaBg {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20, 47, 37, .65), rgba(20, 47, 37, .65)), url('../images/hero02.jpg') center/cover
}
.ctaContent {
  position: relative;
  z-index: 2;
  padding: 80px 24px
}
.ctaContent>span {
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--lime)
}
.ctaContent h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(42px, 5vw, 68px);
  margin: 18px 0
}
.ctaContent p {
  color: rgba(255, 255, 255, .8)
}
.ctaContent .heroActions {
  justify-content: center;
  margin-top: 28px
}
.siteFooter {
  background: #182e27;
  color: #fff
}
.footerGrid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 50px;
  padding: 75px 0
}
.footerLogo {
  color: #fff
}
.footerBrand p, .footerCol p {
  color: rgba(255, 255, 255, .62);
  font-size: 13px
}
.legalNo {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
  font-size: 11px
}
.footerCol h3 {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--lime);
  margin-bottom: 20px
}
.socialLinks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(255, 255, 255, .75)
}
.footerBottom {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding: 18px 0;
  color: rgba(255, 255, 255, .42);
  font-size: 11px
}
.floatContact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px
}
.floatContact a {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18)
}
.floatPhone {
  background: var(--orange)
}
.floatLine {
  background: #06c755
}
.leaf {
  position: fixed;
  z-index: -1;
  width: 280px;
  height: 280px;
  border-radius: 52% 48% 64% 36%;
  background: rgba(185, 206, 118, .08);
  filter: blur(1px)
}
.leaf-a {
  left: -120px;
  top: 40%
}
.leaf-b {
  right: -150px;
  top: 70%
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: .75s ease
}
.reveal.show {
  opacity: 1;
  transform: none
}
.delay1 {
  transition-delay: .12s
}
.delay2 {
  transition-delay: .24s
}
.delay3 {
  transition-delay: .36s
}
@media(max-width:1180px) {
  .mainNav {
    position: fixed;
    inset: 0 0 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    width: min(420px, 88vw);
    background: #f8f5ed;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 120px 50px;
    transform: translateX(100%);
    transition: .35s;
    box-shadow: -20px 0 50px rgba(0, 0, 0, .12);
    gap: 0
  }
  .mainNav.active {
    transform: none
  }
  .siteHeader.menuOpen {
    background: #f8f5ed;
    box-shadow: 0 12px 35px rgba(23, 47, 39, .08);
    backdrop-filter: none
  }
  .siteHeader.menuOpen .menuBtn {
    color: var(--ink)
  }
  .mainNav a, .siteHeader.scrolled .mainNav a {
    color: var(--ink);
    font-size: 18px;
    padding: 13px 0;
    width: 100%;
    border-bottom: 1px solid #e4e0d4
  }
  .menuBtn {
    display: block;
    color: #fff;
    margin-left: auto;
    z-index: 2
  }
  .siteHeader.scrolled .menuBtn {
    color: var(--ink)
  }
  .headerBooking {
    display: none
  }
  .menuBtn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg)
  }
  .menuBtn.active span:nth-child(2) {
    opacity: 0
  }
  .menuBtn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg)
  }
  .menuBtn span {
    transition: .3s
  }
  .featureGrid {
    grid-template-columns: 1fr 1fr
  }
  .introGrid, .occasionGrid {
    gap: 50px
  }
  .cafePanel {
    right: 4%;
    width: 430px
  }
  .footerGrid {
    grid-template-columns: 1.4fr 1fr 1fr
  }
  .footerCol:last-child {
    grid-column: 2/4
  }
}
@media(max-width:900px) {
  .section {
    padding: 90px 0
  }
  .hero {
    min-height: 860px
  }
  .heroContent {
    padding-top: 210px
  }
  .bookingStrip {
    grid-template-columns: 1fr 1fr;
    bottom: -95px
  }
  .bookingStrip>div:nth-child(2) {
    border-right: 0
  }
  .intro {
    padding-top: 210px
  }
  .introGrid, .occasionGrid {
    grid-template-columns: 1fr
  }
  .introVisual {
    max-width: 650px;
    margin: auto
  }
  .roomGrid {
    grid-template-columns: 1fr;
    grid-template-rows: 520px 330px 300px
  }
  .roomCard.large {
    grid-row: auto
  }
  .cafeShowcase {
    padding-bottom: 90px
  }
  .cafePhoto {
    width: 85%;
    height: 520px
  }
  .cafePanel {
    position: relative;
    right: auto;
    top: auto;
    margin: -100px 28px 0 auto
  }
  .cafeSmall {
    display: none
  }
  .galleryGrid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 420px 280px
  }
  .g1 {
    grid-column: 1/3;
    grid-row: auto
  }
  .locationBox {
    grid-template-columns: 1fr;
    padding: 55px
  }
  .locationPhoto {
    height: 260px
  }
  .footerGrid {
    grid-template-columns: 1fr 1fr
  }
  .footerBrand {
    grid-column: 1/3
  }
  .footerCol:last-child {
    grid-column: auto
  }
}
@media(max-width:640px) {
  .container {
    width: min(100% - 30px, var(--container))
  }
  .section {
    padding: 72px 0
  }
  .siteHeader {
    padding: 12px 0
  }
  .headerInner {
    width: calc(100% - 24px)
  }
  /*.brandMark {
    width: 44px;
    height: 44px
  }
  .brandText b {
    font-size: 15px
  }*/

  .brand img{
    height:52px;
}

.siteHeader.scrolled .brand img{
    height:46px;
}

  .hero {
    min-height: 790px
  }
  .heroContent {
    width: calc(100% - 32px);
    padding-top: 170px
  }
  .heroContent h1, .heroContent h2 {
    font-size: 48px
  }
  .heroContent p {
    font-size: 14px
  }
  .heroActions {
    flex-direction: column;
    align-items: stretch
  }
  .heroActions .btn {
    width: 100%
  }
  .heroDots {
    display: none
  }
  .bookingStrip {
    width: calc(100% - 24px);
    bottom: -135px;
    border-radius: 18px
  }
  .bookingStrip>div {
    padding: 18px 15px
  }
  .bookingStrip strong {
    font-size: 12px
  }
  .intro {
    padding-top: 220px
  }
  .introCopy h2, .cafePanel h2, .occasionCopy h2, .locationText h2 {
    font-size: 38px
  }
  .introVisual {
    padding: 20px 20px 30px 0
  }
  .introMain img {
    height: 430px
  }
  .introBadge {
    width: 105px;
    height: 105px
  }
  .introNote {
    left: 0
  }
  .featureGrid {
    grid-template-columns: 1fr
  }
  .featureCard {
    /*min-height: auto*/
  }
  .stayTop {
    align-items: flex-start;
    flex-direction: column
  }
  .roomGrid {
    grid-template-rows: 430px 300px 300px
  }
  .roomInfo {
    left: 22px;
    right: 22px
  }
  .cafePhoto {
    width: 92%;
    height: 420px;
    border-radius: 0 90px 90px 0
  }
  .cafePanel {
    width: auto;
    margin: -70px 15px 0;
    padding: 36px 28px;
    border-radius: 55px 22px 22px
  }
  .galleryGrid {
    display: block
  }
  .galleryGrid figure {
    height: 300px;
    margin-bottom: 16px;
    border-radius: 30px
  }
  .occasionCards {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }
  .occasionCard {
    height: 165px;
    padding: 20px
  }
  .occasionCard b {
    font-size: 25px
  }
  .locationBox {
    padding: 36px 24px;
    border-radius: 26px 80px 26px 26px
  }
  .locationPhoto {
    height: 220px
  }
  .cta {
    min-height: 520px
  }
  .footerGrid {
    grid-template-columns: 1fr;
    padding: 55px 0
  }
  .footerBrand, .footerCol:last-child {
    grid-column: auto
  }
  .floatContact a {
    width: 48px;
    height: 48px
  }
}
/* inner pages */

.innerPage {
  padding-top: 82px
}
.innerHeader {
  background: rgba(250, 248, 243, .96);
  box-shadow: 0 8px 30px rgba(35, 55, 47, .08)
}
.innerHeader .brand, .innerHeader .mainNav a, .innerHeader .menuBtn {
  color: var(--ink)
}
.mainNav a.current {
  color: var(--orange)!important
}
.mainNav a.current:after {
  width: 100%;
  left:0;
  right:0;
}
.innerBanner {
  height: 610px;
  position: relative;
  background-image: linear-gradient(90deg, rgba(18, 42, 33, .72), rgba(18, 42, 33, .2)), var(--banner);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden
}
.innerBannerContent {
  position: relative;
  z-index: 2;
  padding-top: 30px
}
.innerBannerContent span {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--lime)
}
.innerBannerContent h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(54px, 7vw, 68px);
  margin: 15px 0
}
.innerBannerContent p {
  font-size: 18px;
  color: rgba(255, 255, 255, .82)
}
.bannerCurve {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -80px;
  height: 150px;
  background: var(--cream);
  border-radius: 50% 50% 0 0
}
.storyGrid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 90px;
  align-items: center
}
.storyImage {
  position: relative
}
.storyImage img {
  height: 620px;
  object-fit: cover;
  border-radius: 140px 28px 28px
}
.storyCopy h2, .roomsIntro h2, .attractionsIntro h2 {
  font-size: clamp(40px, 4.5vw, 52px);
  line-height: 1.3
}
.storyCopy p, .roomsIntro p, .attractionsIntro p {
  color: var(--muted);
  line-height: 2
}
.storyCopy blockquote {
  margin: 35px 0 0;
  padding: 25px 0 25px 28px;
  border-left: 2px solid var(--orange);
  font-family: "Playfair Display", serif;
  font-size: 25px;
  line-height: 1.7;
  color: var(--green)
}
.legalStamp {
  position: absolute;
  right: -35px;
  bottom: 45px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow)
}
.legalStamp small {
  font-size: 8px;
  letter-spacing: .2em
}
.legalStamp b {
  font-size: 42px;
  line-height: 1
}
.legalStamp span {
  font-size: 12px;
  margin-top: 7px
}
.aboutFeatureGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 50px
}
.aboutFeature {
  background: #fff;
  padding: 40px 28px;
  border-radius: 60px 20px 20px;
  min-height: 300px
}
.aboutFeature b {
  font-family: "Playfair Display", serif;
  font-size: 48px;
  color: var(--lime)
}
.aboutFeature h3 {
  font-size: 22px
}
.aboutFeature p {
  color: var(--muted);
  font-size: 14px
}
.mosaicGrid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: 280px 280px;
  gap: 20px
}
.mosaicGrid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 25px
}
.mosaicGrid img {
  height: 100%;
  object-fit: cover
}
.mosaicLarge {
  grid-row: 1/3;
  border-radius: 120px 25px 25px!important
}
.mosaicQuote {
  margin: 55px 0 0 15%;
  max-width: 650px
}
.mosaicQuote span, .dayItem small {
  letter-spacing: .25em;
  font-size: 10px;
  color: var(--orange)
}
.mosaicQuote h2 {
  font-size: clamp(42px, 5vw, 70px)
}
.dayList {
  display: flex;
  flex-direction: column;
  gap: 80px
}
.dayItem {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 70px
}
.dayItem.reverse {
  grid-template-columns: .9fr 1.1fr
}
.dayItem.reverse img {
  order: 2
}
.dayItem img {
  height: 430px;
  object-fit: cover;
  border-radius: 28px 100px 28px 28px
}
.dayItem h3 {
  font-size: 38px;
  margin: 12px 0
}
.dayItem p {
  color: var(--muted);
  line-height: 1.9
}
/*.facilityGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 40px
}
.facilityGrid span {
  background: var(--soft);
  padding: 20px 12px;
  border-radius: 15px;
  text-align: center;
  font-size: 13px
}*/
.innerCta {
  background: linear-gradient(rgba(20, 47, 37, .78), rgba(20, 47, 37, .78)), url('../images/hero02.jpg') center/cover;
  color: #fff;
  text-align: center;
  padding: 100px 20px
}
.innerCta span {
  letter-spacing: .25em;
  color: var(--lime);
  font-size: 10px
}
.innerCta h2 {
  font-size: clamp(40px, 5vw, 65px);
  color: #fff;
  margin: 14px
}
.innerCta p {
  color: rgba(255, 255, 255, .75)
}
.innerCta .heroActions {
  justify-content: center
}
.roomsIntro {
  /*max-width: 900px*/
}
.priceHighlight {
  margin-top: 35px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 25px 30px;
  background: var(--green);
  color: #fff;
  border-radius: 20px
}
.priceHighlight small {
  letter-spacing: .15em;
  color: var(--lime)
}
.priceHighlight b {
  font-size: 24px
}
.priceHighlight span {
  font-size: 12px;
  color: rgba(255, 255, 255, .65)
}
.roomDetailList {
  display: flex;
  flex-direction: column;
  gap: 90px
}
.roomDetail {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 70px;
  align-items: center
}
.roomDetail.reverse {
  grid-template-columns: .85fr 1.15fr
}
.roomDetail.reverse .roomDetailImg {
  order: 2
}
.roomDetailImg img {
  height: 530px;
  object-fit: cover;
  border-radius: 100px 25px 25px
}
.roomDetailText>span {
  letter-spacing: .25em;
  color: var(--orange);
  font-size: 10px
}
.roomDetailText h2 {
  font-size: 46px
}
.roomDetailText p {
  color: var(--muted);
  line-height: 1.9
}
.roomDetailText ul {
  padding: 0;
  list-style: none
}
.roomDetailText li {
  padding: 12px 0;
  border-bottom: 1px dashed #d8d3c7
}
.photoFeatureGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 45px
}
.photoFeatureGrid img {
  height: 290px;
  object-fit: cover;
  border-radius: 25px 70px 25px 25px
}
.photoFeatureGrid h3 {
  font-size: 22px
}
.photoFeatureGrid p {
  color: var(--muted)
}
.noticeBand {
  background: var(--orange);
  color: #fff;
  padding: 42px 0
}
.noticeBand .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 30px;
  align-items: center
}
.noticeBand h2 {
  color: #fff;
  margin: 0
}
.noticeBand div div {
  display: flex;
  flex-direction: column
}
.noticeBand b {
  font-size: 10px;
  letter-spacing: .2em
}
.noticeBand a {
  color: #fff
}
.cafeMasonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 350px 260px;
  gap: 20px
}
.cafeMasonry figure {
  margin: 0;
  overflow: hidden;
  border-radius: 24px
}
.cafeMasonry img {
  height: 100%;
  object-fit: cover
}
.cafeMasonry .wide {
  grid-row: 1/3;
  border-radius: 120px 24px 24px
}
.cafeWords {
  background: var(--green);
  color: #fff;
  border-radius: 24px 80px 24px 24px;
  padding: 45px
}
.cafeWords span {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--lime)
}
.cafeWords h2 {
  color: #fff;
  font-size: 35px
}
.cafeCategoryGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 45px
}
.cafeCategoryGrid article {
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 45px;
  background-position: center;
  background-size: cover;
  border-radius: 70px 24px 24px;
  overflow: hidden
}
.cafeCategoryGrid article:nth-child(1) {
  background-image: linear-gradient(180deg, rgba(22, 42, 35, .08) 15%, rgba(22, 42, 35, .82) 100%), url('../images/cafe/06.jpg')
}
.cafeCategoryGrid article:nth-child(2) {
  background-image: linear-gradient(180deg, rgba(22, 42, 35, .08) 15%, rgba(22, 42, 35, .82) 100%), url('../images/cafe/07.jpg')
}
.cafeCategoryGrid article:nth-child(3) {
  background-image: linear-gradient(180deg, rgba(22, 42, 35, .08) 15%, rgba(22, 42, 35, .82) 100%), url('../images/cafe/08.jpg')
}
.cafeCategoryGrid span {
  font-family: "Playfair Display", serif;
  font-size: 50px;
  color: var(--lime)
}
.cafeCategoryGrid h3 {
  font-family: "Playfair Display", serif;
  font-size: 32px;
  color: #fff;
  margin: 8px 0
}
.cafeCategoryGrid p {
  color: rgba(255, 255, 255, .88);
  margin-bottom: 0
}
.cafeFoodGallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 300px;
  gap: 20px;
  margin-top: 45px
}
.cafeFoodGallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 24px
}
.cafeFoodGallery figure:first-child,
.cafeFoodGallery figure:last-child {
  border-radius: 70px 24px 24px
}
.cafeFoodGallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease
}
.cafeFoodGallery figure:hover img {
  transform: scale(1.04)
}
.cafeVisit {
  padding: 90px 0;
  background: url('../images/cafe02.jpg') center/cover
}
.cafeVisitCard {
  max-width: 650px;
  background: rgba(250, 248, 243, .94);
  padding: 55px;
  border-radius: 30px 100px 30px
}
.cafeVisitCard>span {
  letter-spacing: .2em;
  font-size: 10px;
  color: var(--orange)
}
.cafeVisitCard h2 {
  font-size: 42px
}
.bookingLead {
  max-width: 900px
}
.bookingLead h2 {
  font-size: 54px
}
.bookingLead p {
  color: var(--muted);
  line-height: 1.9
}
.bookingSections .container {
  display: flex;
  flex-direction: column;
  gap: 24px
}
.bookingCard {
  display: grid;
  grid-template-columns: 100px 1fr;
  background: #fff;
  padding: 48px;
  border-radius: 28px
}
.bookingCard.alert {
  background: #fff5ec
}
.bookingNo {
  font-family: "Playfair Display", serif;
  font-size: 52px;
  color: var(--lime)
}
.bookingCard span {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--orange)
}
.bookingCard h2 {
  font-size: 34px
}
.bookingCard p, .bookingCard li {
  color: var(--muted);
  line-height: 1.9
}
.bankBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--soft);
  padding: 22px;
  border-radius: 16px;
  margin: 20px 0
}
.bankBox p {
  margin: 5px
}
.bankBox b {
  display: inline-block;
  min-width: 85px;
  color: var(--ink)
}
.newsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}
.newsCard {
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(45, 67, 57, .08)
}
.newsCard a {
  display: block
}
.newsImage {
  height: 280px;
  overflow: hidden
}
.newsImage img {
  height: 100%;
  object-fit: cover;
  transition: .5s
}
.newsCard:hover img {
  transform: scale(1.04)
}
.newsBody {
  padding: 30px
}
.newsBody time {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--orange)
}
.newsBody h2 {
  font-size: 24px
}
.newsBody p {
  color: var(--muted);
  font-size: 14px
}
.newsBody span {
  font-size: 11px;
  font-weight: 700;
  color: var(--green)
}
.newsNote {
  margin-top: 60px;
  background: var(--soft);
  padding: 38px;
  border-radius: 24px;
  display: flex;
  gap: 20px;
  align-items: center
}
.newsNote b {
  font-size: 24px
}
.newsNote p {
  margin-right: auto;
  color: var(--muted)
}
.attractionsIntro {
  max-width: 980px
}
.attractionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px
}
.attractionCard {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: #fff;
  border-radius: 25px;
  overflow: hidden
}
.attractionImage {
  height: 260px
}
.attractionImage img {
  height: 100%;
  object-fit: cover
}
.attractionCard>div:last-child {
  padding: 30px
}
.attractionCard span {
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--orange)
}
.attractionCard h2 {
  font-size: 25px
}
.attractionCard p {
  color: var(--muted);
  font-size: 14px
}
.routeSection {
  padding: 90px 0;
  background: var(--green);
  color: #fff;
  text-align: center
}
.routeSection>div>span {
  color: var(--lime);
  font-size: 10px;
  letter-spacing: .25em
}
.routeSection h2 {
  color: #fff;
  font-size: 48px
}
.routeLine {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 30px 0
}
.routeLine b {
  background: var(--lime);
  color: var(--green);
  padding: 8px 12px;
  border-radius: 99px
}
.routeLine span {
  font-size: 18px
}
.routeSection p {
  color: rgba(255, 255, 255, .6);
  font-size: 12px
}
.contactGrid {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: 80px
}
.contactIntro h2 {
  font-size: 55px
}
.contactIntro>p {
  color: var(--muted);
  line-height: 1.9
}
.contactMethods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 35px
}
.contactMethods>* {
  background: var(--soft);
  padding: 22px;
  border-radius: 16px;
  display: flex;
  flex-direction: column
}
.contactMethods small {
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--orange)
}
.contactMethods b {
  margin-top: 7px;
  font-size: 15px;
  word-break: break-all
}
.contactMethods span {
  font-size: 12px;
  color: var(--muted)
}
.contactCard {
  background: var(--green);
  color: #fff;
  padding: 48px;
  border-radius: 30px 100px 30px 30px
}
.contactCard>span {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--lime)
}
.contactCard h2 {
  color: #fff;
  font-size: 36px
}
.contactCard ol {
  padding-left: 22px
}
.contactCard li {
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15)
}
.contactCard li b, .contactCard li small {
  display: block
}
.contactCard li small {
  color: rgba(255, 255, 255, .6);
  margin-top: 4px
}
.mapBlock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center
}
.mapPattern {
  height: 440px;
  border-radius: 50% 45% 55% 42%;
  background: var(--green-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}
.mapPattern span {
  letter-spacing: .3em;
  color: var(--lime);
  font-size: 10px
}
.mapPattern b {
  font-size: 44px;
  margin: 18px
}
.mapText h2 {
  font-size: 48px
}
.mapText p {
  color: var(--muted);
  line-height: 1.9
}
.faqSimple {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 70px
}
.faqList article {
  padding: 22px 0;
  border-bottom: 1px solid #ddd6c9
}
.faqList h3 {
  font-size: 20px
}
.faqList p {
  color: var(--muted)
}
@media(max-width:1000px) {
  .storyGrid, .contactGrid, .mapBlock {
    grid-template-columns: 1fr
  }
  .aboutFeatureGrid {
    grid-template-columns: 1fr 1fr
  }
  /*.facilityGrid {
    grid-template-columns: repeat(3, 1fr)
  }*/
  .dayItem, .dayItem.reverse, .roomDetail, .roomDetail.reverse {
    grid-template-columns: 1fr
  }
  .dayItem.reverse img, .roomDetail.reverse .roomDetailImg {
    order: 0
  }
  .photoFeatureGrid, .cafeCategoryGrid, .newsGrid {
    grid-template-columns: 1fr 1fr
  }
  .cafeFoodGallery {
    grid-template-columns: 1fr 1fr
  }
  .noticeBand .container {
    grid-template-columns: 1fr 1fr
  }
  .attractionCard {
    grid-template-columns: 180px 1fr
  }
  .faqSimple {
    grid-template-columns: 1fr
  }
  .innerPage {
    padding-top: 70px
  }
}
@media(max-width:700px) {
  .innerBanner {
    height: 480px
  }
  .innerBanner .bannerCurve {
    bottom: -81px;
    height: 152px
  }
  .innerBanner + .section {
    position: relative;
    margin-top: -1px;
    background-color: var(--cream)
  }
  .innerBannerContent h1 {
    font-size: 50px
  }
  .innerBannerContent p {
    font-size: 15px
  }
  .storyGrid {
    gap: 45px
  }
  .storyImage img {
    height: 430px;
    border-radius: 70px 20px 20px
  }
  .legalStamp {
    right: 10px;
    bottom: -35px;
    width: 115px;
    height: 115px
  }
  .aboutFeatureGrid, .photoFeatureGrid, .cafeCategoryGrid, .newsGrid, .attractionGrid {
    grid-template-columns: 1fr
  }
  .cafeFoodGallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 280px
  }
  .mosaicGrid {
    display: block
  }
  .mosaicGrid figure {
    height: 300px;
    margin-bottom: 15px;
    border-radius: 25px!important
  }
  .mosaicQuote {
    margin-left: 0
  }
  .dayItem {
    gap: 25px
  }
  .dayItem img {
    height: 330px;
    border-radius: 25px 60px 25px
  }
  .dayItem h3 {
    font-size: 30px
  }
  /*.facilityGrid {
    grid-template-columns: 1fr 1fr
  }*/
  .roomDetailImg img {
    height: 390px;
    border-radius: 60px 20px 20px
  }
  .roomDetailText h2 {
    font-size: 36px
  }
  .priceHighlight {
    align-items: flex-start;
    flex-direction: column
  }
  .noticeBand .container {
    grid-template-columns: 1fr
  }
  .cafeMasonry {
    display: block
  }
  .cafeMasonry figure {
    height: 320px;
    margin-bottom: 15px;
    border-radius: 25px!important
  }
  .cafeWords {
    border-radius: 25px;
    padding: 30px
  }
  .bookingLead h2 {
    font-size: 40px
  }
  .bookingCard {
    grid-template-columns: 1fr;
    padding: 30px
  }
  .bankBox {
    grid-template-columns: 1fr
  }
  .newsNote {
    align-items: flex-start;
    flex-direction: column
  }
  .attractionCard {
    grid-template-columns: 1fr
  }
  .attractionImage {
    height: 240px
  }
  .routeLine {
    flex-direction: column
  }
  .routeLine i {
    transform: rotate(90deg)
  }
  .contactMethods {
    grid-template-columns: 1fr
  }
  .contactIntro h2 {
    font-size: 40px
  }
  .contactCard {
    padding: 32px
  }
  .mapPattern {
    height: 300px
  }
  .mapPattern b {
    font-size: 30px
  }
  .innerCta {
    padding: 75px 18px
  }
}




.villaGallery{
    margin-top:55px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.villaGallery img{
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    display:block;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.villaGallery img:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

@media (max-width:991px){

.villaGallery{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

}

@media (max-width:575px){

.villaGallery{
    grid-template-columns:1fr;
    gap:14px;
}

}
/* latest news detail */
.newsArticleSection{background:linear-gradient(180deg,var(--cream) 0,#fff 280px)}
.newsArticle{max-width:960px;margin:0 auto}
.newsArticleHead{text-align:center;margin-bottom:48px}
.newsArticleMeta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;color:var(--orange);font-size:11px;font-weight:700;letter-spacing:.18em}
.newsArticleMeta i{width:4px;height:4px;border-radius:50%;background:var(--lime)}
.newsArticleHead h2{margin:0;color:var(--green-dark);font-family:"Playfair Display","Noto Serif TC",serif;font-size:clamp(38px,5vw,52px);line-height:1.3}
.newsArticleLead{max-width:760px;margin:22px auto 0;color:var(--muted);font-size:17px;line-height:2}
.newsArticleCover{margin:0 0 55px;overflow:hidden;border-radius:120px 28px 28px;box-shadow:var(--shadow)}
.newsArticleCover img{height:560px;object-fit:cover}
.newsArticleBody{max-width:800px;margin:0 auto;color:#48524e;font-size:16px;line-height:2.15}
.newsArticleBody h3{margin:55px 0 18px;color:var(--green-dark);font-family:"Playfair Display","Noto Serif TC",serif;font-size:32px;line-height:1.45}
.newsArticleBody p{margin:0 0 24px}
.newsArticleBody strong{color:var(--green-dark)}
.newsArticleBody ul{margin:20px 0 30px;padding:0;list-style:none}
.newsArticleBody li{position:relative;padding:12px 0 12px 28px;border-bottom:1px dashed #d8d3c7}
.newsArticleBody li:before{content:"✦";position:absolute;left:0;color:var(--orange)}
.newsArticleImage{margin:45px -80px;overflow:hidden;border-radius:28px 100px 28px 28px}
.newsArticleImage img{height:470px;object-fit:cover}
.newsArticleQuote{margin:45px 0;padding:32px 38px;border-left:3px solid var(--orange);background:var(--cream);border-radius:0 24px 24px 0;color:var(--green);font-family:"Playfair Display","Noto Serif TC",serif;font-size:25px;line-height:1.8}
.newsArticleNotice{margin:42px 0;padding:30px 34px;background:var(--green);color:#fff;border-radius:24px 70px 24px 24px}
.newsArticleNotice b{display:block;margin-bottom:8px;color:var(--lime);font-size:12px;letter-spacing:.18em}
.newsArticleNotice p{margin:0;color:rgba(255,255,255,.78)}
.newsArticleActions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:55px}
.newsArticleNav{max-width:960px;margin:70px auto 0;padding-top:28px;border-top:1px solid #ded9ce;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}
.newsArticleNav a{color:var(--green);font-size:13px;font-weight:700}
.newsArticleNav a:last-child{text-align:right}
.newsArticleNav .backNews{padding:10px 18px;border:1px solid var(--green);border-radius:999px;text-align:center}
@media(max-width:1000px){.newsArticleImage{margin:40px 0}.newsArticleCover img{height:480px}}
@media(max-width:700px){.newsArticleSection.section{padding-top:65px}.newsArticleHead{margin-bottom:32px}.newsArticleHead h2{font-size:36px}.newsArticleLead{font-size:15px}.newsArticleCover{border-radius:60px 20px 20px;margin-bottom:38px}.newsArticleCover img{height:330px}.newsArticleBody{font-size:15px;line-height:2}.newsArticleBody h3{font-size:27px;margin-top:42px}.newsArticleImage{border-radius:20px 55px 20px 20px;margin:32px 0}.newsArticleImage img{height:300px}.newsArticleQuote{padding:24px 22px;font-size:21px}.newsArticleNotice{padding:25px 22px;border-radius:20px 50px 20px 20px}.newsArticleNav{grid-template-columns:1fr 1fr}.newsArticleNav .backNews{grid-column:1/3;grid-row:1}.newsArticleNav a:last-child{text-align:right}}






.facilityGrid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
    margin-top:55px;
}

.facilityItem{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(0,0,0,.08);
    transition:.35s;
}

.facilityItem:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 42px rgba(0,0,0,.15);
}

.facilityItem img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
}

.facilityItem h3{
    margin:18px 10px 20px;
    font-size:16px;
    font-weight:600;
    color:var(--green-dark);
    text-align:center;
}

@media(max-width:991px){

.facilityGrid{
    grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:640px){

.facilityGrid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.facilityItem h3{
    font-size:14px;
    margin:12px 8px 15px;
}

}








.mapBlock{
    display:grid;
    grid-template-columns:1.3fr 0.9fr;
    gap:40px;
    align-items:center;
}

.mapIframe{
    overflow:hidden;
    border-radius:30px;
    box-shadow:var(--shadow);
}

.mapIframe iframe{
    display:block;
    width:100%;
    height:520px;
    border:0;
}

@media(max-width:900px){

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

.mapIframe iframe{
    height:400px;
}

}










.floatContact a {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    transition: .3s;
}

.floatContact a svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}

.floatContact a:hover {
    transform: translateY(-4px);
}

.floatPhone {
    background: var(--orange);
}

.floatLine {
    background: #06c755;
}

/* Stay amenities and nearby travel times */
.amenitySection{background:linear-gradient(180deg,#f7f3e9 0,#fff 100%)}
.amenitySection .sectionHead{max-width:820px;margin:0 auto}
.amenitySection .sectionHead p{color:var(--muted);line-height:1.9}
.amenityGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.amenityCard{display:flex;gap:17px;align-items:flex-start;min-height:150px;padding:27px 24px;background:#fff;border:1px solid rgba(48,83,65,.1);border-radius:24px;box-shadow:0 12px 32px rgba(45,66,55,.07);transition:.3s}
.amenityCard:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(45,66,55,.12)}
.amenityIcon,.nearbyIcon{flex:0 0 auto;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#eef1d8;font-size:24px}
.amenityCard h3{margin:2px 0 8px;color:var(--green-dark);font-size:19px}
.amenityCard p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}
.amenityWide{grid-column:span 2}
.nearbySummary{padding:0 0 100px}
.nearbyGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.nearbyCard{display:flex;gap:20px;align-items:flex-start;padding:30px;background:var(--cream);border-radius:26px 65px 26px 26px}
.nearbyCard:nth-child(2n){background:#edf2e9}
.nearbyCard b{display:block;margin-bottom:7px;color:var(--orange);font-size:12px;letter-spacing:.08em}
.nearbyCard h2{margin:0 0 10px;color:var(--green-dark);font-size:23px}
.nearbyCard p{margin:0;color:var(--muted);line-height:1.75}
.driveNote{margin:20px 8px 0;color:var(--muted);font-size:13px;text-align:right}

@media(max-width:900px){
    .amenityGrid{grid-template-columns:repeat(2,1fr)}
    .amenityWide{grid-column:span 2}
}

@media(max-width:700px){
    .amenityGrid,.nearbyGrid{grid-template-columns:1fr}
    .amenityWide{grid-column:auto}
    .amenityCard{min-height:0;padding:22px 19px}
    .nearbySummary{padding-bottom:70px}
    .nearbyCard{padding:23px 20px;border-radius:22px 48px 22px 22px}
    .nearbyCard h2{font-size:20px}
    .driveNote{text-align:left}
}

@media(max-width:640px) {

    .floatContact a {
        width: 48px;
        height: 48px;
    }

    .floatContact a svg {
        width: 22px;
        height: 22px;
    }

}