:root {
    --bg: #ffffff;
    --bg-soft: #f5f7f9;
    --text: #222b33;
    --muted: #6b747c;
    --line: #dfe5e9;
    --accent: #2f9fe7;
    --accent-dark: #2187c8;
    --footer: #263844;
    --radius: 16px;
    --shadow: 0 16px 45px rgba(24, 39, 51, 0.10);
    --container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }

.site-header {
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid rgba(34,43,51,0.08);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
}
.header-inner {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
}
.brand img { width: 198px; height: auto; }
.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    font-weight: 600;
}
.main-nav > a:not(.btn) { color: #3d4952; }
.main-nav > a:not(.btn):hover,
.text-link:hover { color: var(--accent-dark); }
.mobile-menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    margin: 5px 0;
    background: var(--text);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: 160ms ease;
}
.btn-small { min-height: 42px; padding-inline: 18px; }
.btn-primary { color: #fff; background: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-outline { border-color: #b9c3ca; background: #fff; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-dark); }

.hero {
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    background: #29414f;
    overflow: hidden;
}
.hero-slides,
.hero-slide {
    position: absolute;
    inset: 0;
}
.hero-slide {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.2s ease;
}
.hero-slide picture,
.hero-slide img {
    width: 100%;
    height: 100%;
    display: block;
}
.hero-slide img { object-fit: cover; object-position: center; }
.hero-slide.is-active {
    opacity: 1;
    animation: heroKenBurns 6s ease-out forwards;
}
@keyframes heroKenBurns {
    from { transform: scale(1.04); }
    to { transform: scale(1.10); }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(18,30,38,.72) 0%, rgba(18,30,38,.50) 43%, rgba(18,30,38,.24) 100%);
}
.hero-content { position: relative; z-index: 2; padding-block: 90px; }
.hero-copy { max-width: 760px; color: #fff; margin-bottom: 38px; }
.eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-dark);
}
.hero .eyebrow { color: #bde6ff; }
.hero h1 {
    margin: 0 0 18px;
    font-size: clamp(42px, 6vw, 72px);
    line-height: .98;
    letter-spacing: -0.035em;
}
.hero p {
    max-width: 660px;
    margin: 0;
    font-size: 18px;
    color: rgba(255,255,255,.88);
}
.search-panel {
    width: min(100%, 1000px);
    display: grid;
    grid-template-columns: 1fr 1fr .85fr auto;
    gap: 12px;
    background: rgba(255,255,255,.96);
    padding: 14px;
    border-radius: 14px;
    box-shadow: var(--shadow);
}
.field label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7b858d;
    margin: 0 0 6px 2px;
}
.field select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 9px;
    padding: 0 12px;
    color: var(--text);
    font: inherit;
}
.search-button { align-self: end; min-width: 150px; }

.section { padding: 96px 0; }
.section-soft { background: var(--bg-soft); }
.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}
.section-heading h2,
.inquiry-card h2,
.destination-copy h2,
.about-strip h2 {
    margin: 0;
    font-size: clamp(30px, 3.5vw, 46px);
    letter-spacing: -0.025em;
    line-height: 1.08;
}
.text-link { color: var(--accent-dark); font-weight: 750; white-space: nowrap; }

.property-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.property-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.property-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(23, 39, 50, .10);
}
.property-image {
    min-height: 245px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    background-size: cover;
    background-position: center;
}
.property-image-1 { background: linear-gradient(135deg, #cbbfae, #667b69); }
.property-image-2 { background: linear-gradient(135deg, #d6b195, #7e8975); }
.property-image-3 { background: linear-gradient(135deg, #a6c3cf, #738f9f); }
.property-image-4 { background: linear-gradient(135deg, #dac7aa, #868168); }
.property-image-5 { background: linear-gradient(135deg, #9fb8a0, #516e5e); }
.property-image-6 { background: linear-gradient(135deg, #c8d2d5, #6f8790); }
.property-area {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    font-size: 12px;
    font-weight: 800;
}
.property-body { padding: 22px; }
.property-type {
    font-size: 12px;
    color: var(--accent-dark);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .08em;
}
.property-body h3 { margin: 8px 0 14px; font-size: 21px; line-height: 1.2; }
.property-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 22px;
}
.property-footer {
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}
.property-footer a { color: var(--accent-dark); font-size: 13px; font-weight: 800; }
.center-action { display: flex; justify-content: center; margin-top: 38px; }

.area-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.area-card {
    position: relative;
    min-height: 230px;
    padding: 22px;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}
.area-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(17,29,37,.74));
}
.area-card span,
.area-card small { position: relative; z-index: 1; }
.area-card span { font-size: 24px; font-weight: 800; }
.area-card small { margin-top: 4px; opacity: .88; }
.area-card-1 { background: linear-gradient(135deg, #84a3a7, #587478); }
.area-card-2 { background: linear-gradient(135deg, #a8b692, #647358); }
.area-card-3 { background: linear-gradient(135deg, #c9ae86, #7d694e); }
.area-card-4 { background: linear-gradient(135deg, #9bb7c7, #576e7f); }
.area-card-5 { background: linear-gradient(135deg, #aebaa8, #64705f); }
.area-card-6 { background: linear-gradient(135deg, #8fb4a9, #4d6e65); }

.inquiry-section { padding-top: 70px; padding-bottom: 70px; }
.inquiry-card {
    padding: 48px 52px;
    border-radius: 22px;
    background: var(--footer);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.inquiry-card p {
    max-width: 680px;
    color: rgba(255,255,255,.75);
    margin: 14px 0 0;
}

.destination-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 58px;
    align-items: center;
}
.destination-image {
    min-height: 430px;
    border-radius: 22px;
    background: url('/assets/images/content/HuaHin_beach.jpg') center/cover no-repeat;
    box-shadow: var(--shadow);
}
.destination-copy p { color: var(--muted); font-size: 16px; }
.about-strip { max-width: 850px; text-align: center; }
.about-strip p { max-width: 690px; margin: 18px auto 0; color: var(--muted); }

.site-footer { background: var(--footer); color: #fff; padding-top: 68px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr .8fr .8fr;
    gap: 60px;
    padding-bottom: 48px;
}
.footer-brand img { width: 190px; margin-bottom: 18px; }
.footer-brand p { max-width: 360px; color: rgba(255,255,255,.68); }
.site-footer h3 { margin: 4px 0 15px; font-size: 14px; }
.site-footer a {
    display: block;
    width: fit-content;
    margin: 8px 0;
    color: rgba(255,255,255,.7);
}
.site-footer a:hover { color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 18px 0;
    color: rgba(255,255,255,.5);
    font-size: 12px;
}

@media (max-width: 980px) {
    .mobile-menu-toggle { display: block; margin-left: auto; }
    .main-nav {
        position: absolute;
        top: 84px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 18px 20px 24px;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 30px rgba(24,39,51,.08);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .main-nav.is-open { display: flex; }
    .main-nav > a { padding: 11px 4px; }
    .search-panel { grid-template-columns: 1fr 1fr; }
    .search-button { width: 100%; }
    .property-grid,
    .area-grid { grid-template-columns: repeat(2, 1fr); }
    .destination-grid { grid-template-columns: 1fr; }
    .destination-image { min-height: 360px; }
}

@media (max-width: 680px) {
    .container { width: min(calc(100% - 28px), var(--container)); }
    .header-inner { min-height: 72px; }
    .brand img { width: 158px; }
    .main-nav { top: 72px; }
    .hero { min-height: auto; }
    .hero-content { padding-block: 70px; }
    .hero h1 { font-size: 44px; }
    .hero p { font-size: 16px; }
    .search-panel { grid-template-columns: 1fr; }
    .section { padding: 70px 0; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .property-grid,
    .area-grid { grid-template-columns: 1fr; }
    .property-image { min-height: 235px; }
    .inquiry-card { padding: 34px 28px; align-items: flex-start; flex-direction: column; }
    .destination-image { min-height: 290px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Inner pages */
.narrow-container { max-width: 980px; }
.page-hero { padding: 92px 0 88px; }
.page-hero-dark { background: #263f5b; color: #fff; }
.page-hero h1 { margin: 0 0 18px; font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.page-hero p { max-width: 820px; margin: 0; font-size: 18px; color: rgba(255,255,255,.82); }
.light-eyebrow { color: #bde6ff; }
.intro-copy { max-width: 780px; margin-bottom: 48px; }
.intro-copy h2, .enquiry-copy h2 { margin: 0 0 18px; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.08; letter-spacing: -.025em; }
.intro-copy p, .enquiry-copy p { color: var(--muted); font-size: 16px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: #fff; }
.step-number { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 800; margin-bottom: 18px; }
.step-card h3 { margin: 0 0 10px; font-size: 20px; }
.step-card p { margin: 0; color: var(--muted); }
.enquiry-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 54px; align-items: start; }
.enquiry-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; box-shadow: 0 10px 30px rgba(24,39,51,.06); }
.form-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.text-field input, .text-field select, .text-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 12px 13px; font: inherit; color: var(--text); }
.text-field input, .text-field select { min-height: 48px; }
.text-field textarea { resize: vertical; }
.full-field { margin: 18px 0; }
.route-preview-card { border: 1px solid var(--line); border-radius: 18px; padding: 30px; background: #fff; }
.route-preview-card code { display: block; margin: 12px 0 18px; padding: 12px 14px; border-radius: 8px; background: var(--bg-soft); overflow-wrap: anywhere; }
.route-preview-card p { color: var(--muted); }

@media (max-width: 800px) {
  .steps-grid, .enquiry-layout, .form-grid-two { grid-template-columns: 1fr; }
  .page-hero { padding: 68px 0 64px; }
}


/* Property detail page */
.property-page { background:#f6f8fa; }
.property-top { padding-top:44px; }
.property-breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); font-size:13px; margin-bottom:22px; }
.property-breadcrumbs a:hover { color:var(--accent-dark); }
.property-title-row { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:28px; }
.property-title-row h1 { margin:0; max-width:900px; font-size:clamp(34px,4.2vw,56px); line-height:1.04; letter-spacing:-.03em; }
.property-intro { max-width:820px; margin:14px 0 0; color:var(--muted); font-size:16px; }
.property-top-cta { flex:0 0 auto; }
.property-gallery { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:220px 220px; gap:10px; margin-bottom:34px; }
.gallery-main { grid-row:1 / span 2; }
.placeholder-photo { position:relative; overflow:hidden; border-radius:14px; min-height:0; display:flex; align-items:flex-end; padding:16px; color:rgba(255,255,255,.92); font-size:12px; font-weight:700; }
.photo-1 { background:linear-gradient(135deg,#8aa4ad,#486774); }
.photo-2 { background:linear-gradient(135deg,#b6c6ae,#6a8168); }
.photo-3 { background:linear-gradient(135deg,#c9b69e,#7b6652); }
.photo-4 { background:linear-gradient(135deg,#9bb8ca,#5a7485); }
.photo-5 { background:linear-gradient(135deg,#a8b5a5,#5c6d5a); }
.gallery-button { margin-left:auto; border:0; border-radius:9px; background:#fff; color:var(--text); padding:10px 13px; font-weight:800; cursor:pointer; }
.property-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; }
.property-main-column { display:grid; gap:20px; }
.property-card-section { background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; }
.property-card-section h2 { margin:0 0 16px; font-size:28px; letter-spacing:-.02em; }
.property-card-section p { color:var(--muted); margin:0 0 14px; }
.property-card-section p:last-child { margin-bottom:0; }
.property-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0; overflow:hidden; }
.fact { padding:24px 20px; border-right:1px solid var(--line); }
.fact:last-child { border-right:0; }
.fact strong { display:block; font-size:18px; margin-bottom:4px; }
.fact span { display:block; color:var(--muted); font-size:13px; }
.highlight-grid, .feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px; }
.highlight-grid div { padding:10px 0; border-bottom:1px solid #eef2f4; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
.detail-grid div { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid #eef2f4; }
.detail-grid span { color:var(--muted); }
.detail-grid strong { text-align:right; }
.feature-grid span { position:relative; padding:10px 12px 10px 34px; background:var(--bg-soft); border-radius:9px; }
.feature-grid span::before { content:'✓'; position:absolute; left:12px; color:var(--accent-dark); font-weight:900; }
.map-placeholder { min-height:260px; border-radius:12px; background:linear-gradient(135deg,#dce8eb,#c9d8cc); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; color:#50616b; }
.property-sidebar { position:relative; }
.enquiry-sticky-card { position:sticky; top:110px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:0 12px 32px rgba(31,48,59,.08); }
.enquiry-sticky-card h2 { margin:0 0 12px; font-size:28px; line-height:1.08; }
.enquiry-sticky-card p { color:var(--muted); margin:0 0 20px; }
.sidebar-note { padding:12px 0; border-top:1px solid var(--line); font-size:14px; }
.sidebar-note + .sidebar-note { margin-bottom:18px; }
.btn-full { width:100%; }
.enquiry-sticky-card small { display:block; color:var(--muted); margin-top:12px; text-align:center; }
.property-related { padding-top:78px; }

@media (max-width: 980px) {
  .property-layout { grid-template-columns:1fr; }
  .property-sidebar { order:-1; }
  .enquiry-sticky-card { position:static; }
  .property-gallery { grid-template-columns:1.5fr 1fr; grid-template-rows:240px 180px 180px; }
  .gallery-main { grid-row:1 / span 2; }
  .property-gallery .gallery-small:last-child { grid-column:1 / -1; }
  .property-facts { grid-template-columns:repeat(2,1fr); }
  .fact:nth-child(2) { border-right:0; }
  .fact:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}

@media (max-width: 680px) {
  .property-top { padding-top:28px; }
  .property-title-row { align-items:flex-start; flex-direction:column; }
  .property-top-cta { width:100%; }
  .property-gallery { grid-template-columns:1fr 1fr; grid-template-rows:260px 150px 150px; }
  .gallery-main { grid-column:1 / -1; grid-row:auto; }
  .property-gallery .gallery-small:last-child { grid-column:auto; }
  .property-facts { grid-template-columns:1fr 1fr; }
  .fact { padding:18px 16px; }
  .highlight-grid, .feature-grid, .detail-grid { grid-template-columns:1fr; }
  .property-card-section { padding:22px; }
}

/* Connected property content */
.gallery-real{position:relative;overflow:hidden;border-radius:14px;background:#e8eef1;min-height:0}.gallery-real img{width:100%;height:100%;object-fit:cover;display:block}.gallery-real .gallery-button{position:absolute;right:14px;bottom:14px}.rich-content{color:var(--text)}.rich-content p{color:var(--muted);margin:0 0 14px}.rich-content h2,.rich-content h3,.rich-content h4{margin:22px 0 10px;line-height:1.18}.rich-content h2{font-size:24px}.rich-content h3{font-size:20px}.rich-content h4{font-size:17px}.rich-content ul,.rich-content ol{padding-left:22px;margin:10px 0 16px}.rich-content li{margin:6px 0}.rich-content a{color:var(--accent-dark);text-decoration:underline}.map-frame{height:320px;border-radius:12px;overflow:hidden;background:#dce8eb}.map-frame iframe{width:100%;height:100%;border:0}.video-frame{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111}.video-frame iframe{width:100%;height:100%;border:0}

/* Property detail refinements */
.property-gallery{height:470px;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}.gallery-main{grid-row:1 / span 2}.gallery-real{cursor:pointer}.gallery-real .gallery-button{background:#fff;border:0;border-radius:9px;padding:10px 14px;font-weight:800;box-shadow:0 4px 16px rgba(0,0,0,.14);cursor:pointer}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.property-wide-section{margin-top:20px;width:100%}.property-wide-section .map-frame{height:430px}.property-wide-section .video-frame{width:100%;aspect-ratio:16/9}.gallery-lightbox{position:fixed;inset:0;background:rgba(10,18,24,.94);z-index:9999;display:none;align-items:center;justify-content:center;padding:32px 80px}.gallery-lightbox.open{display:flex}.gallery-open{overflow:hidden}.gallery-lightbox-stage{position:relative;max-width:min(1400px,92vw);max-height:90vh;display:flex;align-items:center;justify-content:center}.gallery-lightbox-stage img{display:block;max-width:100%;max-height:88vh;object-fit:contain;border-radius:8px}.gallery-lightbox-count{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);color:#fff;font-weight:700}.gallery-lightbox-close,.gallery-lightbox-nav{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.gallery-lightbox-close{right:24px;top:20px;width:48px;height:48px;border-radius:50%;font-size:34px;line-height:1}.gallery-lightbox-nav{top:50%;transform:translateY(-50%);width:54px;height:70px;border-radius:12px;font-size:52px;line-height:1}.gallery-lightbox-nav.prev{left:18px}.gallery-lightbox-nav.next{right:18px}.gallery-lightbox-close:hover,.gallery-lightbox-nav:hover{background:rgba(255,255,255,.22)}
@media(max-width:980px){.property-gallery{height:auto;grid-template-columns:1.5fr 1fr;grid-template-rows:240px 180px 180px;gap:8px}.property-gallery .gallery-small:last-child{grid-column:1 / -1}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.property-wide-section .map-frame{height:360px}.gallery-lightbox{padding:24px 58px}}
@media(max-width:680px){.property-gallery{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:260px 145px 145px;gap:7px}.gallery-main{grid-column:1 / -1;grid-row:auto}.property-gallery .gallery-small:last-child{grid-column:auto}.feature-grid{grid-template-columns:1fr}.property-wide-section .map-frame{height:300px}.gallery-lightbox{padding:20px 14px}.gallery-lightbox-nav{width:42px;height:58px;font-size:40px}.gallery-lightbox-nav.prev{left:8px}.gallery-lightbox-nav.next{right:8px}.gallery-lightbox-close{right:10px;top:10px}}

/* Area detail pages */
.area-hero{position:relative;min-height:520px;background:#506c78 center/cover no-repeat;display:flex;align-items:flex-end;color:#fff}.area-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,28,.12),rgba(10,20,28,.68))}.area-hero-content{position:relative;z-index:1;padding-bottom:56px}.area-hero h1{margin:10px 0 0;max-width:900px;font-size:clamp(42px,5vw,68px);line-height:1.02;letter-spacing:-.035em}.area-breadcrumbs{color:rgba(255,255,255,.78);margin-bottom:18px}.area-breadcrumbs a{color:#fff}.area-intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:28px;align-items:stretch}.area-copy-card,.area-map-card,.area-video-section,.area-full-section,.area-site-plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}.area-map-card{padding:0;overflow:hidden}.area-map-card .map-frame{height:100%;min-height:390px;border-radius:0}.area-gallery-section{margin-top:44px}.area-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.area-gallery-item{border:0;padding:0;background:none;cursor:pointer;border-radius:12px;overflow:hidden;aspect-ratio:4/3}.area-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}.area-gallery-item:hover img{transform:scale(1.025)}.area-video-section,.area-full-section,.area-site-plan{margin-top:28px}.area-video-section .video-frame{width:100%;aspect-ratio:16/9}.area-full-copy{max-width:none;width:100%}.site-plan-button{display:block;width:100%;border:0;background:#f7f9fa;padding:0;border-radius:12px;overflow:hidden;cursor:zoom-in}.site-plan-button img{display:block;width:100%;height:auto}.property-card-image{display:block;aspect-ratio:4/3;overflow:hidden;background:#e7ecef}.property-card-image img{width:100%;height:100%;object-fit:cover;display:block}.property-card-body{padding:20px}.property-card-body h3{margin:7px 0 12px}.property-meta{display:flex;flex-wrap:wrap;gap:7px 14px;color:var(--muted);font-size:13px;margin-bottom:14px}
@media(max-width:900px){.area-intro-grid{grid-template-columns:1fr}.area-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.area-map-card .map-frame{min-height:340px}.area-hero{min-height:430px}}
@media(max-width:560px){.area-gallery-grid{grid-template-columns:1fr 1fr;gap:7px}.area-copy-card,.area-video-section,.area-full-section,.area-site-plan{padding:20px}.area-hero{min-height:360px}.area-hero-content{padding-bottom:36px}}

.area-actions{display:flex;justify-content:flex-end;margin-top:18px}.area-rules-btn{background:#263f5b;color:#fff;border:1px solid #263f5b}.area-rules-btn:hover{background:#1f344b;color:#fff}

/* Main navigation dropdowns */
.nav-dropdown{position:relative;display:flex;align-items:center}.nav-dropdown-toggle::after{content:'▾';font-size:10px;margin-left:6px;vertical-align:1px}.nav-dropdown-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:180px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(24,39,51,.12);opacity:0;visibility:hidden;transform:translateY(-4px);transition:160ms ease;z-index:100}.nav-dropdown-menu a{display:block;padding:10px 12px;border-radius:7px;white-space:nowrap}.nav-dropdown-menu a:hover{background:var(--bg-soft);color:var(--accent-dark)}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:800px){.nav-dropdown{display:block;width:100%}.nav-dropdown-menu{position:static;min-width:0;padding:4px 0 0 14px;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;background:transparent}.nav-dropdown-menu a{padding:8px 0}}

.property-loading {
    grid-column: 1 / -1;
    padding: 36px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: #fff;
}


/* Homepage area cards */
#areas .area-card { background-size: cover; background-position: center center; background-repeat: no-repeat; }

/* About Hua Hin */
.hua-hin-page-hero { text-align:center; }
.hua-hin-page-hero p { margin-inline:auto; }
.hua-hin-article { padding-top:72px; }
.hua-hin-feature-image { width:100%; display:block; border-radius:20px; box-shadow:var(--shadow); margin-bottom:34px; }
.hua-hin-copy { max-width:none; width:100%; margin:0; }
.hua-hin-copy h2 { margin:0 0 14px; font-size:clamp(30px,3.5vw,44px); letter-spacing:-.025em; }
.hua-hin-copy h3 { margin:30px 0 8px; font-size:24px; line-height:1.2; }
.hua-hin-copy p { margin:0; color:var(--muted); font-size:16px; line-height:1.75; }
.hua-hin-cta { justify-content:flex-start; margin-top:36px; }
@media(max-width:680px){.hua-hin-article{padding-top:52px}.hua-hin-copy h3{font-size:21px}.hua-hin-feature-image{border-radius:14px}}


/* Homepage multi-step rental enquiry */
.enquiry-shell{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:46px;align-items:start}.enquiry-intro{padding:22px 0}.enquiry-intro h2{margin:0 0 14px;font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.03em}.enquiry-intro p{max-width:520px;color:var(--muted);font-size:16px}.multi-enquiry{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 14px 36px rgba(24,39,51,.07)}.enquiry-progress{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-size:12px;font-weight:800;color:var(--muted)}.enquiry-progress>div{height:7px;flex:1;background:#e9eef2;border-radius:999px;overflow:hidden}.enquiry-progress i{display:block;width:33.333%;height:100%;background:var(--accent);border-radius:inherit;transition:width .2s ease}.enquiry-step{display:none}.enquiry-step.is-active{display:block}.enquiry-step h3{margin:0 0 20px;font-size:25px}.optional{font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}.enquiry-actions{display:flex;gap:10px;margin-top:22px}.enquiry-note{margin:14px 0 0;color:var(--muted);font-size:12px}.enquiry-budget-grid{display:grid;grid-template-columns:1.1fr .8fr 1.1fr;gap:14px;margin-top:18px}.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}.inquiry-section{background:var(--bg-soft)}
@media(max-width:900px){.enquiry-shell{grid-template-columns:1fr}.enquiry-intro{padding:0}.enquiry-budget-grid{grid-template-columns:1fr}.multi-enquiry{padding:22px}}

/* Ensure HTML hidden state wins over component display rules */
[hidden] { display: none !important; }

/* How It Works: use the same content width as the rest of the site */
.how-content-wide .intro-copy{max-width:none;width:100%}
.how-content-wide .intro-copy p{max-width:100%}


/* Rentals search page */
.rentals-filter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:end;padding:22px;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;margin-bottom:38px}.rentals-filter .field{min-width:0}.rentals-results-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.rentals-results-head h2{margin:4px 0 0;font-size:clamp(28px,3vw,40px)}
@media(max-width:980px){.rentals-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.rentals-filter .btn{width:100%}}
@media(max-width:560px){.rentals-filter{grid-template-columns:1fr}}


/* Rentals pagination */
.rentals-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:34px}.pagination-btn{min-width:42px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);font:inherit;font-weight:700;cursor:pointer}.pagination-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent-dark)}.pagination-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff}.pagination-btn:disabled{opacity:.42;cursor:default}@media(max-width:560px){.pagination-btn{min-width:38px;height:40px;padding:0 11px}.rentals-pagination{gap:6px}}

/* Area page readability */
.area-copy-card .rich-content,
.area-full-copy .rich-content { font-size:17px; line-height:1.7; }
.area-copy-card .rich-content p,
.area-full-copy .rich-content p { line-height:1.7; }

/* Breadcrumbs and property codes */
.breadcrumb-bar{background:#fff;border-bottom:1px solid var(--line)}
.breadcrumb-bar .property-breadcrumbs{margin:0;padding:18px 0;font-size:13px}
.property-detail-breadcrumb{margin:-10px 0 26px}
.property-detail-breadcrumb .property-breadcrumbs{margin:0}
.property-card-kicker{display:flex;align-items:center;justify-content:space-between;gap:12px}
.property-code{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.rentals-filter input[type=search]{width:100%;height:46px;border:1px solid var(--line);border-radius:9px;padding:0 13px;background:#fff;color:var(--text);font:inherit}

/* Property enquiry form */
.property-enquiry-form{display:grid;gap:12px;margin-top:18px}.property-enquiry-field{display:grid;gap:6px}.property-enquiry-field label{font-size:12px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.04em}.property-enquiry-field input,.property-enquiry-field textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);font:inherit;padding:11px 12px;box-sizing:border-box}.property-enquiry-field textarea{resize:vertical;min-height:92px}.property-enquiry-field input:focus,.property-enquiry-field textarea:focus{outline:2px solid rgba(52,153,219,.16);border-color:var(--accent)}.property-enquiry-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.property-enquiry-status{font-size:13px;line-height:1.45}.property-enquiry-status.is-success{padding:11px 12px;border-radius:8px;background:#eef8f1;color:#245b34}.property-enquiry-status.is-error{color:#a12b2b}.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.property-enquiry-form .btn:disabled{opacity:.65;cursor:wait}@media(max-width:560px){.property-enquiry-row{grid-template-columns:1fr}}

/* Property sidebar 3-step enquiry */
.property-layout{grid-template-columns:minmax(0,1fr) 380px;gap:24px}.enquiry-sticky-card{padding:22px}.property-multi-enquiry{margin-top:16px}.property-enquiry-step{display:none}.property-enquiry-step.is-active{display:grid;gap:12px}.property-enquiry-step h3{margin:0 0 2px;font-size:18px}.property-enquiry-progress{margin-bottom:14px}.property-enquiry-progress>span{display:block;font-size:12px;font-weight:800;margin-bottom:7px}.property-enquiry-progress>div{height:5px;background:#e8eef2;border-radius:999px;overflow:hidden}.property-enquiry-progress i{display:block;height:100%;width:33.333%;background:var(--accent);border-radius:999px;transition:width .2s ease}.property-enquiry-actions{display:flex;gap:8px;margin-top:4px}.property-enquiry-actions .btn{flex:1;min-width:0;padding-inline:12px}.property-enquiry-field select{width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);font:inherit;padding:11px 12px;box-sizing:border-box}.property-enquiry-card-note{margin-top:12px}@media(max-width:1100px){.property-layout{grid-template-columns:minmax(0,1fr) 350px}.enquiry-sticky-card{padding:20px}}@media(max-width:980px){.property-layout{grid-template-columns:1fr}.enquiry-sticky-card{padding:22px}.property-sidebar{order:-1}}@media(max-width:560px){.enquiry-sticky-card{padding:18px}.property-enquiry-actions{flex-direction:column}.property-enquiry-actions .btn{width:100%}}

/* Contact page */
.contact-hero{text-align:center}.contact-hero p{margin-inline:auto;max-width:720px}.contact-page{padding-top:54px}.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);gap:64px;align-items:start}.contact-copy h2{margin:8px 0 28px;font-size:36px}.contact-copy h3{margin:28px 0 8px;font-size:20px}.contact-copy p{max-width:680px;line-height:1.7}.contact-copy .btn{margin-top:8px}.contact-online-note{display:grid;gap:4px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}.contact-online-note span{color:var(--muted)}.contact-form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 10px 30px rgba(24,39,51,.06)}.contact-form-card h2{margin:7px 0 20px}.contact-two-step{display:grid;gap:16px}.contact-step{display:none;gap:14px}.contact-step.is-active{display:grid}.contact-step h3{margin:0 0 4px}.contact-actions{display:flex;gap:10px}.contact-actions .btn{flex:1}.contact-form-card .enquiry-progress{margin-bottom:4px}.contact-form-card .enquiry-progress>div{height:5px;background:#e8eef2;border-radius:999px;overflow:hidden}.contact-form-card .enquiry-progress i{display:block;height:100%;width:50%;background:var(--accent);border-radius:999px;transition:width .2s ease}.breadcrumb-strip{padding-top:20px}@media(max-width:980px){.contact-grid{grid-template-columns:1fr;gap:36px}.contact-form-card{max-width:none}}@media(max-width:560px){.contact-form-card{padding:20px}.contact-actions{flex-direction:column}.contact-copy h2{font-size:30px}}

/* Footer consistency + social links */
.footer-grid{grid-template-columns:1.45fr .8fr .9fr .65fr;gap:42px;align-items:start}.footer-social{justify-self:end;text-align:right}.footer-social-links{display:flex;justify-content:flex-end;gap:10px}.footer-social-links a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.28);border-radius:50%;color:#fff}.footer-social-links a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}.footer-social-links svg{width:20px;height:20px;fill:currentColor}.footer-brand p{max-width:360px}@media(max-width:900px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr;gap:30px}.footer-social{justify-self:start;text-align:left}.footer-social-links{justify-content:flex-start}}@media(max-width:680px){.footer-grid{grid-template-columns:1fr;gap:28px}.footer-social{justify-self:start;text-align:left}}

/* Language switch */
.language-switch{display:flex;align-items:center;gap:5px;margin-left:4px;font-size:12px;font-weight:800;letter-spacing:.04em;white-space:nowrap}.language-switch a{color:var(--muted);padding:4px 2px}.language-switch a.is-active{color:var(--accent)}.language-switch span{color:var(--line)}@media(max-width:980px){.language-switch{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}}

/* Language switch: keep it out of the navigation flow so the main menu never wraps because of it */
.header-inner{position:relative}
.language-switch{position:absolute;right:0;top:7px;display:flex;align-items:center;gap:5px;margin:0;font-size:11px;font-weight:800;letter-spacing:.04em;white-space:nowrap;line-height:1}
.language-switch a{color:var(--muted);padding:2px 1px}
.language-switch a.is-active{color:var(--accent-dark)}
.language-switch span{color:#aeb8bf}
@media(max-width:980px){.language-switch{top:26px;right:52px;font-size:11px}}