/* TEMA VILLA SERI BUKIT: hijau teh + kabus, menu tepi tetap, gambar skrin penuh, garis kontur */
:root {
  --brand: #1d5a41; --brand-dark: #10362a; --brand-light: #3d7f5e; --accent: #d7364f;
  --sunset: #d7364f; --sea: #1d5a41; --palm: #3d7f5e; --gold: #d7364f;
  --cream: #e8efea; --cream-dark: #d5e1d9; --ink: #14281f; --muted: #4f6559; --line: #cfdcd4; --white: #ffffff;
  --font-body: "Figtree", system-ui, sans-serif; --font-script: "Bricolage Grotesque", system-ui, sans-serif;
  --radius: 6px; --shadow: none; --shadow-lg: 0 24px 60px rgba(16, 54, 42, .22); --header-h: 68px; --rail: 236px;
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300' fill='none' stroke='%231d5a41' stroke-opacity='.14'%3E%3Cpath d='M-20 240C90 180 170 250 280 200S470 110 620 170'/%3E%3Cpath d='M-20 200C90 140 170 210 280 160S470 70 620 130'/%3E%3Cpath d='M-20 160C90 100 170 170 280 120S470 30 620 90'/%3E%3Cpath d='M-20 120C90 60 170 130 280 80S470-10 620 50'/%3E%3Cpath d='M-20 280C90 220 170 290 280 240S470 150 620 210'/%3E%3Cpath d='M-20 320C90 260 170 330 280 280S470 190 620 250'/%3E%3C/svg%3E");
}
h1, h2, h3, h4 { font-family: var(--font-script); font-weight: 700; letter-spacing: -.02em; }
.btn { border-radius: 4px; font: 600 .95rem var(--font-body); }
.btn-primary { background: var(--brand); }
.link-arrow { border: 0; font-size: 1rem; font-weight: 600; }
.wide { width: min(1120px, 100% - 64px); margin-inline: auto; }
.eyebrow { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--brand-light); }
.script { font-family: var(--font-body); font-weight: 500; font-size: 1.1rem; color: inherit; }

/* Menu tepi tetap (desktop) */
.logo { color: inherit; }
.logo-mark { width: 40px; height: 40px; }
.logo-name { font: 700 1.25rem/1.1 var(--font-script); letter-spacing: -.02em; }
.logo-sub { font-size: .78rem; letter-spacing: 0; text-transform: none; text-align: left; margin-top: 3px; opacity: .8; }
.site-header { background: var(--brand-dark); color: var(--white); backdrop-filter: none; }
.site-header::after { display: none; }
.nav a { color: inherit; }
.nav a:not(.btn)::after { display: none; }
.nav a:not(.btn):hover, .nav a.active { color: var(--white); }
.lang-switch { background: transparent; border-color: rgba(255, 255, 255, .3); }
.lang-switch button { color: rgba(255, 255, 255, .75); }
.lang-switch button:hover { color: var(--white); }
.lang-switch button.active { background: var(--white); color: var(--brand-dark); }
.nav-toggle { color: var(--white); }
.btn-primary.is-current { background: var(--brand); box-shadow: none; }
@media (min-width: 961px) {
  body { padding-left: var(--rail); }
  html { scroll-padding-top: 20px; }
  .site-header { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); }
  .nav-wrap { width: 100%; height: 100%; flex-direction: column; align-items: stretch; gap: 16px; padding: 28px 22px; margin: 0; }
  .nav { flex-direction: column; align-items: stretch; gap: 2px; margin: 28px 0 auto; }
  .nav a:not(.btn) { padding: 10px 12px; border-radius: 4px; font-size: 1rem; opacity: .8; }
  .nav a:not(.btn):hover { opacity: 1; background: rgba(255, 255, 255, .07); }
  .nav a.active { opacity: 1; background: rgba(255, 255, 255, .12); }
  .lang-switch { align-self: flex-start; }
  .nav-cta { justify-content: center; background: var(--accent); }
  .nav-cta:hover { background: #b92a41; }
}
@media (max-width: 960px) {
  .nav { background: var(--brand-dark); }
  .nav a:not(.btn) { border-bottom-color: rgba(255, 255, 255, .15); }
}

/* Hero skrin penuh: nama besar, borang menegak di kanan */
.peak { position: relative; min-height: 100vh; background: center / cover no-repeat var(--brand-dark); color: var(--white); display: grid; grid-template-columns: 1fr 300px; align-items: end; gap: 40px; padding: 48px 48px 56px; }
.peak::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 34, 26, .82), rgba(10, 34, 26, .05) 62%); }
.peak > * { position: relative; }
.peak-copy h1 { font-size: clamp(3.4rem, 8.6vw, 8.2rem); line-height: .92; letter-spacing: -.045em; margin: 0 0 .25em; }
.peak-climate { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .16); padding: .35em .85em; border-radius: 4px; }
.peak-sub { font-size: 1.2rem; max-width: 30em; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .peak-copy h1 { animation: mistIn 1.4s ease-out both; }
  @keyframes mistIn { from { opacity: 0; filter: blur(14px); } }
}
.peak-book { display: flex; flex-direction: column; align-items: stretch; margin: 0; width: auto; padding: 22px; border-radius: 6px; color: var(--ink); gap: 4px; }
.peak-book .booking-field { border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; }
.peak-book .booking-field:nth-child(3) { border-bottom: 0; }
.peak-book .btn { margin: 8px 0 0; justify-content: center; background: var(--accent); }
.peak-book .btn:hover { background: #b92a41; }
.peak-price { margin: 10px 0 0; color: var(--muted); text-align: center; font-size: .92rem; }
.peak-price strong { color: var(--ink); font-size: 1.15rem; }
.peak-price small { font-weight: 400; }
.booking-field label { color: var(--muted); font-weight: 500; }
.date-display, .booking-field select { font-size: 1rem; }

/* Kelebihan: jalur empat lajur tanpa ikon besar */
.features-strip { background: var(--brand); color: var(--white); margin: 0; padding: 0; }
.features { gap: 0; }
.feature { display: block; padding: 28px 26px; border-right: 1px solid rgba(255, 255, 255, .2); }
.feature-icon { display: none; }
.feature h3 { font-size: 1.1rem; }
.feature p { color: rgba(255, 255, 255, .8); font-size: .95rem; }

/* Seksyen */
.section { padding: 96px 0; }
.section-cream { background: var(--cream); }
.contour { background: var(--contour) repeat center / 600px 300px; }
.section-title { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; }
.ledge { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: end; margin-bottom: 46px; }
.ledge .lead { margin-bottom: .6rem; }

/* Bilik: susunan melangkah macam teres bukit */
.rooms-stagger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.rooms-stagger .room-card:nth-child(2) { margin-top: 56px; }
.rooms-stagger .room-card:nth-child(3) { margin-top: 112px; }
.room-card { background: transparent; border-radius: 0; }
.room-card:hover { transform: none; box-shadow: none; }
.room-img { aspect-ratio: 4 / 5; border-radius: 6px; }
.room-body { padding: 14px 2px 0; }
.room-top h3 { font-size: 1.3rem; }

.vista { position: relative; background: center / cover no-repeat var(--brand-dark); color: var(--white); padding: 150px 0 50px; }
.vista::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 34, 26, .78), rgba(10, 34, 26, .15)); }
.vista .wide { position: relative; }
.vista h2 { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1; letter-spacing: -.04em; margin-bottom: 40px; }
.discover-item .icon { color: var(--white); }

/* Aktiviti: jalur skrol mendatar */
.exp-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 max(32px, calc((100% - 1120px) / 2)) 16px; scroll-padding-inline: max(32px, calc((100% - 1120px) / 2)); }
.exp-track .exp-card { flex: 0 0 min(340px, 78vw); scroll-snap-align: start; }
.exp-card { background: transparent; border-radius: 0; }
.exp-card:hover { transform: none; }
.exp-img { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.exp-icon { display: none; }
.exp-body { padding: 14px 2px 0; }
.exp-body h3 { font-size: 1.2rem; }
.exp-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.guest { background: var(--cream); }
.split-img img { border-radius: 6px; box-shadow: none; }

.testimonial { padding: 0; background: transparent; box-shadow: none; border-radius: 0; border-top: 2px solid var(--ink); padding-top: 18px; }
.stars { display: none; }
.testimonial blockquote { font-size: 1.08rem; }
#testimonials { margin-top: 34px; }

.closing h2 { font-size: clamp(2.6rem, 6.5vw, 5.4rem); line-height: 1; letter-spacing: -.04em; max-width: 13em; }
.closing p { font-size: 1.15rem; color: var(--muted); }

.cta-band::before { background: rgba(10, 34, 26, .72); }
.cta-band { text-align: left; padding: 110px 0; }
.cta-band .container { max-width: none; width: min(1120px, 100% - 64px); }
.cta-band .btn-row { justify-content: flex-start; }
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.035em; }
.cta-band .script { color: var(--white); font-size: 1.1rem; }

/* Page dalaman: gambar tinggi, tajuk besar di kiri bawah */
.page-header { text-align: left; padding: 200px 0 40px; }
.page-header::before { background: linear-gradient(0deg, rgba(10, 34, 26, .8), rgba(10, 34, 26, .1)); }
.page-header .container { width: min(1120px, 100% - 64px); }
.page-header h1 { font: 700 clamp(3rem, 8vw, 6.6rem)/.95 var(--font-script); letter-spacing: -.045em; }
.page-header p { margin: .8rem 0 0; font-size: 1.15rem; opacity: 1; }
.crumbs { display: none; }
.page-header p.crumbs { display: none; }
.section-head { text-align: left; margin: 0 0 40px; max-width: 760px; }
.container { width: min(1120px, 100% - 64px); }

.house-card { border-radius: 6px; box-shadow: none; border: 1px solid var(--line); }
.house-card-price { background: var(--brand-dark); }
.house-card-price > span { color: var(--white); text-transform: none; letter-spacing: 0; }
.house-card-price strong { font-family: var(--font-script); letter-spacing: -.03em; }
.house-facts .icon, .amenities .icon { color: var(--brand); }
.room-detail-img img { border-radius: 6px; box-shadow: none; }
.room-detail-body h2 { font-size: 2.4rem; letter-spacing: -.03em; }
.info-card { background: transparent; box-shadow: none; border-top: 2px solid var(--ink); border-radius: 0; padding: 16px 0 0; }
.info-card .feature-icon { display: none; }
.info-card h3 { margin-top: 0; }
.stats { text-align: left; }
.stat strong { font-family: var(--font-script); font-size: 3.2rem; letter-spacing: -.04em; }
#features.features { background: var(--brand); color: var(--white); border-radius: 6px; }
.form-card { border-radius: 6px; box-shadow: none; border: 1px solid var(--line); }
.cal-inline { border-radius: 6px; box-shadow: none; border: 1px solid var(--line); margin: 0; }
.faq-wrap { margin: 0; }
.contact-info .icon { border-radius: 6px; }
.map-box { border-radius: 6px; box-shadow: none; }
#experiences-list:not(.exp-track) .exp-card { box-shadow: none; }

.site-footer { background: var(--brand-dark); }
.site-footer .logo { color: var(--white); }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; }

@media (max-width: 1180px) and (min-width: 961px) {
  .peak { grid-template-columns: 1fr; padding: 40px 32px; }
  .peak-book { max-width: 340px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .peak { grid-template-columns: 1fr; padding: 180px 20px 24px; min-height: 0; }
  .peak-book { max-width: none; }
  .ledge { grid-template-columns: 1fr; gap: 14px; }
  .features { grid-template-columns: 1fr 1fr; }
  .feature:nth-child(2) { border-right: 0; }
  .rooms-stagger { grid-template-columns: 1fr; }
  .rooms-stagger .room-card:nth-child(n) { margin-top: 0; }
  .room-img { aspect-ratio: 4 / 3; }
  .wide, .container, .cta-band .container, .page-header .container { width: calc(100% - 40px); }
  .section { padding: 64px 0; }
  .page-header { padding: 120px 0 30px; }
  .exp-track { padding: 0 20px 16px; }
}
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
  .feature { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); padding: 20px; }
  .footer-grid { grid-template-columns: 1fr; }
}