:root {
  color-scheme: light;
  font-family: Inter, Arial, Helvetica, sans-serif;
  background: #f7f8f5;
  color: #18211f;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #f7f8f5;
  color: #18211f;
  letter-spacing: 0;
}

body,
button,
input,
select,
textarea {
  font: 16px/1.55 Inter, Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 14px 40px;
  color: #fff;
  background: linear-gradient(180deg, rgba(11, 22, 20, 0.78), rgba(11, 22, 20, 0.2));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-weight: 700;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
}

.brand-text {
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}

.site-nav a {
  opacity: 0.9;
}

.site-nav a:hover {
  opacity: 1;
}

.nav-cta {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
}

.hero {
  position: relative;
  display: grid;
  min-height: 720px;
  overflow: hidden;
  color: #fff;
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 24, 22, 0.86), rgba(10, 24, 22, 0.52) 45%, rgba(10, 24, 22, 0.12)),
    linear-gradient(0deg, rgba(10, 24, 22, 0.54), rgba(10, 24, 22, 0.04) 38%);
}

.hero-content {
  position: relative;
  z-index: 1;
  align-self: end;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 138px 0 70px;
}

.eyebrow {
  margin: 0 0 18px;
  color: #f4c36b;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
  overflow-wrap: break-word;
}

h1 {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: 56px;
  line-height: 1.03;
  font-weight: 780;
}

.hero-lead {
  max-width: 650px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 700;
}

.button.primary {
  background: var(--accent, #2d8b7f);
  color: #fff;
}

.button.secondary {
  border-color: rgba(255, 255, 255, 0.62);
  color: #fff;
}

.button.light {
  border-color: #cfd7d2;
  background: #fff;
  color: #18211f;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 840px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-facts li {
  min-height: 92px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.fact-value {
  display: block;
  margin-bottom: 4px;
  font-size: 22px;
  font-weight: 780;
}

.fact-label {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.section {
  padding: 78px 40px;
}

.section.alt {
  background: #ebefe8;
}

.section-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.section-kicker {
  margin-bottom: 10px;
  color: var(--accent, #2d8b7f);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.section h2 {
  max-width: 780px;
  margin-bottom: 18px;
  font-size: 36px;
  line-height: 1.14;
}

.section-intro {
  max-width: 760px;
  margin-bottom: 34px;
  color: #56615e;
  font-size: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card {
  min-height: 100%;
  padding: 22px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.card h3 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.25;
}

.card p {
  margin-bottom: 0;
  color: #5c6562;
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.property-card {
  overflow: hidden;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.property-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.property-link {
  display: block;
}

.property-body {
  padding: 20px;
}

.property-meta {
  margin-bottom: 8px;
  color: var(--accent, #2d8b7f);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.property-body h3 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.25;
}

.property-body p {
  color: #5c6562;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 8px 12px;
  border: 1px solid #cfd7d2;
  border-radius: 8px;
  background: #fff;
  color: #3b4642;
  font-size: 14px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 42px;
  align-items: start;
}

.steps {
  display: grid;
  gap: 14px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 18px 18px 18px 58px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent, #2d8b7f);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.step h3 {
  margin-bottom: 6px;
  font-size: 18px;
}

.step p {
  margin-bottom: 0;
  color: #5c6562;
}

.lead-form {
  padding: 24px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.lead-form h2 {
  margin-bottom: 12px;
  font-size: 28px;
}

.lead-form p {
  color: #5c6562;
}

.quiz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.field span {
  color: #39443f;
  font-size: 14px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #cfd7d2;
  border-radius: 8px;
  padding: 12px 13px;
  background: #fbfcfa;
  color: #18211f;
}

textarea {
  min-height: 112px;
  resize: vertical;
}

.choice-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 4px 0 14px;
  padding: 14px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
}

.choice-field legend {
  padding: 0 6px;
  color: #39443f;
  font-size: 14px;
  font-weight: 800;
}

.choice-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3d4743;
  font-size: 14px;
}

.choice-field input {
  width: auto;
}

.quiz-step {
  margin: 18px 0;
  padding-top: 16px;
  border-top: 1px solid #e5ebe7;
}

.quiz-step:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.quiz-step-title {
  margin-bottom: 10px;
  color: #28342f;
  font-size: 15px;
  font-weight: 900;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quiz-option {
  position: relative;
  display: grid;
  min-height: 74px;
  align-content: center;
  gap: 4px;
  padding: 14px 14px 14px 42px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fbfcfa;
  color: #3d4743;
}

.quiz-option input {
  position: absolute;
  top: 16px;
  left: 14px;
  width: auto;
}

.quiz-option strong {
  color: #1f2a26;
}

.quiz-option small {
  color: #66716c;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 8px 0 16px;
  color: #3d4743;
  font-size: 14px;
  line-height: 1.45;
}

.consent-field input {
  width: auto;
  margin-top: 3px;
}

.form-note {
  margin: 12px 0 0;
  color: #6c7672;
  font-size: 13px;
}

.lead-form .field-note {
  margin: -4px 0 14px;
  color: #68736e;
  font-size: 13px;
}

.quiz-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 10px;
}

.quiz-progress span {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #f4f7f3;
  color: #59645f;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.quiz-progress span.is-active {
  border-color: var(--accent, #2d8b7f);
  background: color-mix(in srgb, var(--accent, #2d8b7f) 13%, #fff);
  color: #17211e;
}

.quiz-progress span.is-complete {
  border-color: color-mix(in srgb, var(--accent, #2d8b7f) 55%, #d9ded8);
  color: var(--accent, #2d8b7f);
}

.quiz-form.is-enhanced .quiz-step {
  display: none;
}

.quiz-form.is-enhanced .quiz-step.is-active {
  display: block;
}

.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.quiz-actions .button {
  min-width: 150px;
}

.quiz-helper {
  margin-top: 12px;
  color: #68736e;
  font-size: 13px;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.outcome-card {
  display: grid;
  gap: 10px;
  min-height: 178px;
  padding: 20px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.outcome-card span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent, #2d8b7f);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.outcome-card h3 {
  margin: 0;
  font-size: 18px;
}

.outcome-card p {
  margin: 0;
  color: #5c6562;
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.proof-pill {
  padding: 14px 16px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #f7faf5;
  color: #39443f;
  font-weight: 800;
}

.section-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.section-cta p {
  margin: 0;
  color: #4d5753;
}

.section-cta .button.secondary {
  border-color: #cfd7d2;
  color: #18211f;
}

.floating-cta {
  position: fixed;
  z-index: 30;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(760px, calc(100% - 36px));
  margin: 0 auto;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(19, 31, 28, 0.94);
  color: #fff;
  box-shadow: 0 16px 42px rgba(12, 22, 18, 0.25);
  backdrop-filter: blur(10px);
}

.floating-cta strong {
  display: block;
  font-size: 14px;
}

.floating-cta span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
}

.floating-cta .button {
  min-width: 160px;
}

.region-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.region-card {
  display: grid;
  overflow: hidden;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.region-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.region-card span,
.region-card strong,
.region-card small {
  display: block;
  margin-right: 18px;
  margin-left: 18px;
}

.region-card span {
  margin-top: 16px;
  color: var(--accent, #2d8b7f);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.region-card strong {
  margin-top: 6px;
  font-size: 19px;
  line-height: 1.25;
}

.region-card small {
  margin-top: 8px;
  margin-bottom: 18px;
  color: #5c6562;
  font-size: 14px;
}

.region-card .card-link,
.district-card .card-link,
.project-card .card-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin-top: 4px;
  color: var(--accent, #2d8b7f);
  font-size: 13px;
  font-weight: 900;
}

.region-card .card-link {
  margin: 2px 18px 18px;
  text-transform: none;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.project-card {
  display: grid;
  overflow: hidden;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.project-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.media-picture {
  display: block;
}

.media-picture img {
  display: block;
}

.hero .media-picture,
.hero .media-picture img {
  width: 100%;
  height: 100%;
}

.listing-row .media-picture,
.region-card .media-picture,
.property-link .media-picture {
  display: contents;
}

.project-card-body {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.project-meta {
  color: var(--accent, #2d8b7f);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.project-card h3 {
  margin: 0;
  font-size: 21px;
}

.project-card p {
  margin: 0;
  color: #5c6562;
}

.project-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  min-height: 560px;
  background: #18211f;
  color: #fff;
}

.project-page-hero .subhero-copy {
  padding: 92px clamp(24px, 6vw, 82px);
}

.project-page-hero img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.project-page-hero p {
  color: rgba(255,255,255,.78);
}

.project-video-hero {
  position: relative;
  min-height: min(760px, 92vh);
  overflow: hidden;
  display: grid;
  align-items: end;
  background: #111b19;
  color: #fff;
}

.project-video-hero video,
.project-video-hero .video-poster-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 15, 14, .78), rgba(6, 15, 14, .22) 58%, rgba(6, 15, 14, .08)),
    linear-gradient(0deg, rgba(6, 15, 14, .72), rgba(6, 15, 14, .08) 58%);
}

.project-video-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: clamp(96px, 16vh, 180px) clamp(24px, 7vw, 92px) clamp(44px, 8vh, 92px);
}

.project-video-copy h1 {
  margin-bottom: 18px;
}

.project-video-copy p {
  max-width: 620px;
  color: rgba(255,255,255,.82);
}

.project-angle {
  display: grid;
  gap: 18px;
}

.project-angle h2 {
  max-width: 740px;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.project-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
}

.fact-table {
  display: grid;
  overflow: hidden;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.fact-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid #e7ebe5;
}

.fact-row:last-child {
  border-bottom: 0;
}

.fact-row strong {
  color: #28342f;
}

.project-note {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid var(--accent, #2d8b7f);
  background: #f2f6f1;
  color: #4d5753;
}

.district-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.district-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.district-card strong {
  font-size: 20px;
}

.district-card small {
  color: #5c6562;
}

.related-projects {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.related-project {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.related-project img {
  width: 120px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  object-fit: cover;
}

.related-project h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.related-project p {
  margin: 0;
  color: #5c6562;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.check-card {
  padding: 20px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.check-card h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.check-card p {
  margin-bottom: 0;
  color: #5c6562;
}

.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.faq-item {
  padding: 20px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.faq-item h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.faq-item p {
  margin-bottom: 0;
  color: #5c6562;
}

.site-footer {
  padding: 32px 40px;
  background: #111a18;
  color: rgba(255, 255, 255, 0.78);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.footer-inner strong {
  color: #fff;
}

.footer-inner p {
  margin: 0 0 10px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-shell {
  background: #f7f8f5;
}

.subpage .site-header {
  background: rgba(17, 26, 24, 0.94);
}

.subhero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
  gap: 42px;
  align-items: center;
  min-height: 560px;
  padding: 126px 40px 64px;
  background: #e8eee9;
}

.subhero-copy {
  width: min(680px, 100%);
  margin-left: auto;
}

.subhero h1 {
  color: #18211f;
}

.subhero p {
  color: #56615e;
  font-size: 18px;
}

.subhero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
}

.legal-hero {
  padding: 130px 40px 54px;
  background: #e8eee9;
}

.legal-hero h1 {
  color: #18211f;
}

.legal-hero p {
  max-width: 760px;
  color: #56615e;
  font-size: 18px;
}

.legal-content {
  display: grid;
  gap: 18px;
  max-width: 860px;
}

.legal-content article {
  padding: 22px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.legal-content h2 {
  font-size: 24px;
}

.legal-content p {
  margin-bottom: 0;
  color: #5c6562;
}

.hero-content--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 34px;
  align-items: end;
}

.hero-copy {
  min-width: 0;
}

.hero-panel {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(10, 22, 20, 0.42);
  backdrop-filter: blur(12px);
}

.hero-panel h2 {
  margin-bottom: 14px;
  color: #fff;
  font-size: 24px;
  line-height: 1.15;
}

.hero-panel .hero-facts {
  grid-template-columns: 1fr;
  max-width: none;
}

.hero-panel .hero-facts li {
  min-height: auto;
}

.hero--compact {
  min-height: 600px;
}

.hero--compact .hero-content {
  align-self: center;
  padding-top: 118px;
}

.hero--compact h1 {
  max-width: 920px;
}

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

.hero--guide .hero-overlay {
  background:
    linear-gradient(90deg, rgba(247, 248, 245, 0.96), rgba(247, 248, 245, 0.84) 46%, rgba(247, 248, 245, 0.22)),
    linear-gradient(0deg, rgba(247, 248, 245, 0.72), rgba(247, 248, 245, 0.08));
}

.hero--guide {
  color: #16201d;
}

.hero--guide .hero-lead,
.hero--guide .fact-label {
  color: #4b5853;
}

.hero--guide .button.secondary {
  border-color: #bbc8c1;
  color: #16201d;
}

.hero--guide .hero-facts li {
  border-color: #d4ddd7;
  background: rgba(255, 255, 255, 0.72);
}

.hero--editorial {
  min-height: 660px;
}

.hero--editorial .hero-content {
  width: min(980px, calc(100% - 48px));
  text-align: center;
}

.hero--editorial h1,
.hero--editorial .hero-lead {
  margin-right: auto;
  margin-left: auto;
}

.hero--editorial .hero-actions,
.hero--editorial .hero-facts {
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}

.search-strip {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  max-width: 860px;
  margin: 0 0 28px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.search-strip span {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #1b2723;
  font-weight: 700;
}

.section.compact {
  padding-top: 54px;
  padding-bottom: 54px;
}

.section.dark {
  background: #111a18;
  color: #fff;
}

.section.dark .section-kicker,
.section.dark .section-intro,
.section.dark p {
  color: rgba(255, 255, 255, 0.78);
}

.section.dark .chips li {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
  gap: 34px;
  align-items: start;
}

.feature-panel {
  position: sticky;
  top: 92px;
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #d9ded8;
}

.feature-panel h2 {
  margin-bottom: 14px;
}

.feature-layout .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-layout .grid .card:first-child {
  grid-column: 1 / -1;
}

.mosaic-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

.mosaic-grid .property-card:first-child {
  grid-row: span 2;
}

.mosaic-grid .property-card:first-child img {
  aspect-ratio: 4 / 3.6;
}

.listing-board {
  display: grid;
  gap: 14px;
}

.listing-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.listing-row img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
}

.listing-row h3 {
  margin-bottom: 6px;
  font-size: 20px;
}

.listing-row p {
  margin-bottom: 0;
  color: #5c6562;
}

.listing-action {
  min-width: 118px;
  text-align: right;
  color: var(--accent, #2d8b7f);
  font-weight: 800;
}

.guide-index {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.guide-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-list li {
  padding: 16px 18px;
  border-left: 4px solid var(--accent, #2d8b7f);
  border-radius: 8px;
  background: #fff;
  color: #39443f;
  font-weight: 700;
}

.service-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.service-strip .step {
  min-height: 100%;
}

.hero--matcher {
  min-height: 650px;
}

.hero--matcher .hero-content {
  align-self: center;
}

.hero-matcher-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 34px;
  align-items: end;
}

.hero-mini-form {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #17211e;
  box-shadow: 0 24px 70px rgba(8, 16, 14, 0.28);
}

.hero-mini-form h2 {
  margin: 0 0 4px;
  color: #17211e;
  font-size: 22px;
}

.hero-mini-form p {
  margin: 0 0 8px;
  color: #5c6562;
  font-size: 14px;
}

.hero-mini-form .field {
  margin: 0;
}

.hero-mini-form .button {
  width: 100%;
}

.hero--catalog .hero-content {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, .62fr);
  gap: 34px;
  align-items: end;
}

.hero-catalog-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(8, 23, 28, 0.54);
  backdrop-filter: blur(12px);
}

.hero-catalog-card {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.hero-catalog-card img {
  width: 74px;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
}

.hero-catalog-card strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
}

.hero-catalog-card span {
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
}

.hero--editorial .hero-content--editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 34px;
  align-items: end;
  text-align: left;
}

.hero-editorial-rail {
  display: grid;
  gap: 10px;
  margin-bottom: 36px;
}

.hero-editorial-rail span {
  display: block;
  padding: 12px;
  border-left: 3px solid #f4c36b;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 800;
}

.hero--guide .hero-content--guide {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(280px, .46fr);
  gap: 34px;
  align-items: end;
}

.hero-guide-card {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid #d4ddd7;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.hero-guide-card strong {
  color: #17211e;
  font-size: 18px;
}

.hero-guide-card span {
  color: #4b5853;
}

.template-island-lux .hero:not(.hero--matcher) .hero-content,
.template-villa-rental .hero:not(.hero--matcher) .hero-content {
  width: min(1040px, calc(100% - 48px));
}

.template-island-lux .hero:not(.hero--matcher) .hero-copy,
.template-villa-rental .hero:not(.hero--matcher) .hero-copy {
  padding: 24px;
  border-left: 4px solid #f4c36b;
  background: rgba(8, 20, 18, 0.38);
  backdrop-filter: blur(10px);
}

.opening {
  padding: 58px 40px;
  background: #f7f8f5;
}

.opening.alt {
  background: #ebefe8;
}

.opening.dark {
  background: #111a18;
  color: #fff;
}

.opening.dark p,
.opening.dark small {
  color: rgba(255, 255, 255, .74);
}

.opening-inner {
  display: grid;
  gap: 22px;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.opening-head {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(280px, .38fr);
  gap: 28px;
  align-items: end;
}

.opening-head h2 {
  max-width: 760px;
  margin: 0;
  font-size: 34px;
  line-height: 1.12;
}

.opening-head p {
  margin: 0;
  color: #56615e;
  font-size: 17px;
}

.opening-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.opening-card,
.opening-note,
.opening-metric {
  padding: 18px;
  border: 1px solid #d9ded8;
  border-radius: 8px;
  background: #fff;
}

.opening-card strong,
.opening-metric strong {
  display: block;
  margin-bottom: 7px;
  font-size: 18px;
}

.opening-card p,
.opening-note p,
.opening-metric p {
  margin: 0;
  color: #5c6562;
}

.opening-metric span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent, #2d8b7f);
  font-size: 28px;
  font-weight: 900;
}

.opening--deal .opening-grid {
  grid-template-columns: 1.1fr .9fr .9fr;
}

.opening--deal .opening-card:first-child {
  background: #111a18;
  color: #fff;
}

.opening--deal .opening-card:first-child p {
  color: rgba(255, 255, 255, .76);
}

.opening--island .opening-grid,
.opening--villa .opening-grid {
  grid-template-columns: .88fr 1.12fr;
}

.opening--island .opening-card,
.opening--villa .opening-card {
  min-height: 156px;
}

.opening--directory .opening-inner {
  grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
  align-items: start;
}

.opening--directory .opening-head {
  grid-template-columns: 1fr;
}

.opening--directory .opening-grid {
  grid-template-columns: 1fr;
}

.opening--catalog .opening-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.opening--editorial .opening-grid {
  grid-template-columns: .82fr 1.18fr .82fr;
}

.opening--guide .opening-inner {
  grid-template-columns: minmax(280px, .55fr) minmax(0, 1fr);
  align-items: start;
}

.opening--guide .opening-head {
  grid-template-columns: 1fr;
}

.opening--guide .opening-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opening--agency,
.opening--exact {
  background: #f0ede8;
}

.opening--agency .opening-grid,
.opening--exact .opening-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

.template-agency .hero-overlay,
.template-exact-match .hero-overlay {
  background:
    linear-gradient(90deg, rgba(28, 20, 18, 0.9), rgba(28, 20, 18, 0.46) 48%, rgba(28, 20, 18, 0.08)),
    linear-gradient(0deg, rgba(28, 20, 18, 0.44), rgba(28, 20, 18, 0.04));
}

.template-phuket-catalog .hero-overlay,
.template-investment .hero-overlay {
  background:
    linear-gradient(90deg, rgba(8, 28, 34, 0.9), rgba(8, 28, 34, 0.52) 45%, rgba(8, 28, 34, 0.08)),
    linear-gradient(0deg, rgba(8, 28, 34, 0.48), rgba(8, 28, 34, 0.04));
}

.hero--lux .hero-overlay {
  background:
    linear-gradient(90deg, rgba(9, 30, 24, .88), rgba(9, 30, 24, .42) 44%, rgba(9, 30, 24, .06)),
    linear-gradient(0deg, rgba(9, 30, 24, .48), rgba(9, 30, 24, .04));
}

.hero--villa .hero-overlay {
  background:
    linear-gradient(90deg, rgba(33, 38, 14, .88), rgba(33, 38, 14, .46) 46%, rgba(33, 38, 14, .08)),
    linear-gradient(0deg, rgba(33, 38, 14, .5), rgba(33, 38, 14, .04));
}

.hero--sunshine .hero-overlay {
  background:
    linear-gradient(90deg, rgba(54, 32, 16, .82), rgba(54, 32, 16, .36) 48%, rgba(54, 32, 16, .08)),
    linear-gradient(0deg, rgba(54, 32, 16, .48), rgba(54, 32, 16, .04));
}

.hero--dream .hero-overlay {
  background:
    linear-gradient(90deg, rgba(18, 24, 54, .84), rgba(18, 24, 54, .36) 50%, rgba(18, 24, 54, .06)),
    linear-gradient(0deg, rgba(18, 24, 54, .5), rgba(18, 24, 54, .04));
}

.hero--agency .hero-mini-form {
  border-top: 5px solid var(--accent, #8a6250);
}

.hero--exact .hero-mini-form {
  border-top: 5px solid #f4c36b;
}

.hero--phuket .hero-catalog-panel {
  border-top: 5px solid #f4c36b;
}

.hero--directory .hero-catalog-panel {
  border-top: 5px solid rgba(255, 255, 255, .62);
}

.template-sunshine-brand .site-header,
.template-dream-brand .site-header {
  background: linear-gradient(180deg, rgba(14, 33, 30, 0.62), rgba(14, 33, 30, 0.1));
}

@media (max-width: 900px) {
  .site-header {
    padding: 12px 22px;
  }

  .site-header {
    flex-wrap: wrap;
    gap: 8px;
    background: rgba(11, 22, 20, 0.92);
    backdrop-filter: blur(14px);
  }

  .site-nav {
    display: flex;
    width: 100%;
    gap: 18px;
    padding: 2px 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .hero {
    min-height: 680px;
  }

  h1 {
    font-size: 42px;
  }

  .hero-lead {
    font-size: 18px;
  }

  .hero-facts,
  .outcome-grid,
  .proof-strip,
  .grid,
  .property-grid,
  .region-grid,
  .project-grid,
  .project-gallery,
  .district-card-grid,
  .check-grid,
  .faq,
  .split,
  .quiz-grid,
  .hero-content--split,
  .hero-matcher-grid,
  .hero--catalog .hero-content,
  .hero--editorial .hero-content--editorial,
  .hero--guide .hero-content--guide,
  .opening-head,
  .opening-grid,
  .opening--deal .opening-grid,
  .opening--island .opening-grid,
  .opening--villa .opening-grid,
  .opening--directory .opening-inner,
  .opening--catalog .opening-grid,
  .opening--editorial .opening-grid,
  .opening--guide .opening-inner,
  .opening--guide .opening-grid,
  .opening--agency .opening-grid,
  .opening--exact .opening-grid,
  .feature-layout,
  .guide-index,
  .service-strip,
  .mosaic-grid,
  .subhero,
  .project-page-hero {
    grid-template-columns: 1fr;
  }

  .project-video-hero {
    min-height: 680px;
  }

  .project-video-copy {
    padding: 118px 24px 52px;
  }

  .related-project {
    grid-template-columns: 92px 1fr;
  }

  .related-project img {
    width: 92px;
  }

  .listing-row {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .listing-action {
    grid-column: 1 / -1;
    text-align: left;
  }

  .search-strip {
    grid-template-columns: 1fr;
  }

  .quiz-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-panel {
    position: static;
  }

  .feature-layout .grid,
  .feature-layout .grid .card:first-child {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .section {
    padding: 58px 24px;
  }

  .opening {
    padding: 48px 24px;
  }

  .hero--editorial .hero-content--editorial {
    text-align: center;
  }

  .hero-editorial-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
  }

  .subhero {
    padding: 158px 24px 48px;
  }

  .project-page-hero .subhero-copy {
    padding: 158px 24px 42px;
  }

  .subhero-copy {
    margin-left: 0;
  }

  .section h2 {
    font-size: 30px;
  }
}

@media (max-width: 520px) {
  .brand-text {
    white-space: normal;
  }

  .hero-content {
    width: calc(100% - 36px);
    padding-bottom: 48px;
  }

  h1 {
    font-size: 30px;
    line-height: 1.1;
    max-width: 340px;
    overflow-wrap: anywhere;
  }

  .hero-lead {
    font-size: 17px;
    max-width: 340px;
  }

  .section h2 {
    max-width: 340px;
    font-size: 26px;
    overflow-wrap: anywhere;
  }

  .section-intro {
    max-width: 340px;
  }

  .opening-head h2 {
    max-width: 340px;
    font-size: 25px;
    overflow-wrap: anywhere;
  }

  .hero-editorial-rail {
    grid-template-columns: 1fr;
  }

  .choice-field {
    grid-template-columns: 1fr;
  }

  .quiz-progress {
    grid-template-columns: 1fr;
  }

  .quiz-actions {
    display: grid;
  }

  .floating-cta {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
    display: grid;
  }

  .button {
    width: 100%;
  }

  .listing-row {
    grid-template-columns: 1fr;
  }

  .fact-row {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
  }
}


/* =========================================================
   DOM PHUKET — INTERACTIVE MAP REDESIGN
   ========================================================= */
.dp-home{margin:0;background:#f8fbfc;color:#111c36;font-family:Manrope,Inter,Arial,sans-serif;letter-spacing:-.01em}.dp-home *{box-sizing:border-box}.dp-home img{max-width:100%;display:block}.dp-home button,.dp-home input,.dp-home select{font:inherit}.dp-header{height:92px;padding:0 clamp(28px,4vw,64px);display:flex;align-items:center;gap:42px;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(17,28,54,.07);position:sticky;top:0;z-index:1000;backdrop-filter:blur(18px);transition:.25s}.dp-header.is-scrolled{box-shadow:0 12px 36px rgba(31,74,98,.12)}.dp-logo{display:inline-flex;flex-direction:column;line-height:.8;min-width:154px;color:#13203a}.dp-logo-main{font-size:34px;font-family:Georgia,serif;font-weight:700;letter-spacing:.08em}.dp-logo-main span{display:inline-block;color:#148da6;transform:rotate(-18deg);margin:0 1px}.dp-logo small{font-size:11px;letter-spacing:.45em;margin-top:10px}.dp-nav{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2vw,38px);flex:1;font-size:14px;font-weight:600}.dp-nav a{color:#18243d;white-space:nowrap;transition:.2s}.dp-nav a:hover{color:#089bb3}.dp-header-actions{display:flex;align-items:center;gap:18px}.dp-phone{display:grid;grid-template-columns:20px 1fr;color:#15213a;font-size:13px}.dp-phone span{grid-row:1/3;color:#138ea5}.dp-phone small{font-size:10px;color:#778496}.dp-favorite,.dp-language,.dp-menu{border:0;background:transparent;color:#17243d;cursor:pointer}.dp-favorite{display:flex;align-items:center;gap:7px;font-weight:600}.dp-favorite b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#0e92aa;color:#fff;font-size:10px}.dp-language{font-weight:700}.dp-menu{display:none;font-size:24px}
.dp-hero{position:relative;min-height:968px;overflow:hidden;background:radial-gradient(circle at 10% 20%,#fff 0,#fafdfe 25%,rgba(250,253,254,0) 46%),linear-gradient(90deg,#f9fcfd 0,#eaf8fb 38%,#b9e9f3 58%,#32b5d3 100%);padding:55px clamp(28px,4vw,64px) 0;display:grid;grid-template-columns:minmax(420px,43%) 1fr;grid-template-rows:525px 82px 242px;gap:18px 26px}.dp-hero-glow{position:absolute;width:460px;height:460px;border-radius:50%;left:-120px;top:120px;background:rgba(255,255,255,.8);filter:blur(60px)}.dp-hero-copy{position:relative;z-index:3;padding-top:24px;align-self:start}.dp-rank{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;background:rgba(255,255,255,.78);border:1px solid rgba(22,49,68,.06);box-shadow:0 5px 18px rgba(38,96,125,.07);border-radius:999px;color:#566579;font-size:13px;font-weight:600}.dp-hero h1{font-size:clamp(46px,4.1vw,67px);line-height:1.08;letter-spacing:-.052em;margin:34px 0 22px;color:#111c36;max-width:700px}.dp-hero-copy>p{font-size:18px;line-height:1.6;color:#526176;max-width:590px;margin:0 0 28px}.dp-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 28px;background:linear-gradient(135deg,#078da7,#1aaec1);color:#fff;border-radius:13px;font-weight:800;box-shadow:0 15px 30px rgba(7,143,169,.22);transition:.25s}.dp-primary:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(7,143,169,.3)}.dp-target-icon{font-size:24px}.dp-hand-arrow{display:inline-block;color:#0a93aa;font-size:44px;margin-left:14px;transform:rotate(-18deg)}.dp-metrics{display:flex;margin-top:30px}.dp-metrics>div{padding:0 28px;border-right:1px solid #d4e0e6;display:flex;flex-direction:column;gap:4px}.dp-metrics>div:first-child{padding-left:0}.dp-metrics>div:last-child{border-right:0}.dp-metrics strong{color:#098ea7;font-size:21px}.dp-metrics i{font-style:normal;color:#ffaf20;font-size:13px;letter-spacing:1px}.dp-metrics span{font-size:11px;color:#617184;line-height:1.35}
.dp-map-stage{position:relative;z-index:2;grid-column:2;grid-row:1/3;min-height:660px;transform-style:preserve-3d;perspective:1000px}.dp-island{position:absolute;left:9%;top:-20px;width:72%;height:700px;filter:saturate(1.05);animation:islandFloat 6s ease-in-out infinite}.dp-ocean-orbit{position:absolute;border:2px solid rgba(255,255,255,.48);border-radius:50%;transform:rotate(-14deg);pointer-events:none}.orbit-one{width:640px;height:180px;left:2%;top:415px}.orbit-two{width:510px;height:135px;left:11%;top:437px;border-color:rgba(26,220,239,.4)}@keyframes islandFloat{50%{transform:translateY(-8px) rotate(.4deg)}}.dp-map-label{position:absolute;z-index:10;display:flex;flex-direction:column;align-items:flex-start;padding:9px 13px;border:0;border-radius:10px;background:rgba(255,255,255,.92);box-shadow:0 12px 28px rgba(16,72,99,.18);color:#24344a;cursor:pointer;transition:.2s;backdrop-filter:blur(10px)}.dp-map-label span{font-size:11px}.dp-map-label strong{font-size:13px}.dp-map-label:hover,.dp-map-label.active{transform:translateY(-4px) scale(1.04);box-shadow:0 18px 34px rgba(16,72,99,.24)}.dp-map-label.accent{background:#ef5e59;color:#fff}.label-mai{left:16%;top:16px}.label-bang{right:22%;top:110px}.label-chern{right:14%;top:205px;background:#159db9;color:#fff}.label-kamala{left:2%;top:280px}.label-patong{left:43%;top:315px}.label-karon{left:12%;top:390px}.label-rawai{left:27%;bottom:66px}.label-panwa{right:11%;bottom:70px}.dp-pin{position:absolute;z-index:9;width:32px;height:38px;border:3px solid #fff;border-radius:18px 18px 18px 5px;transform:rotate(-45deg);box-shadow:0 5px 16px rgba(15,66,91,.25);color:#fff;font-size:0;cursor:pointer;animation:pinPulse 2.3s ease-in-out infinite}.dp-pin:after{content:'';position:absolute;width:8px;height:8px;border:3px solid #fff;border-radius:50%;left:8px;top:10px}.dp-pin:hover,.dp-pin.active{transform:rotate(-45deg) scale(1.18)}.dp-pin.orange{background:#f4a51f}.dp-pin.teal{background:#18a6a7}.dp-pin.blue{background:#4b6ff7}.dp-pin.pink{background:#e95ca7}@keyframes pinPulse{50%{box-shadow:0 5px 16px rgba(15,66,91,.25),0 0 0 8px rgba(255,255,255,.18)}}.pin-mai{left:40%;top:101px}.pin-bang{left:56%;top:171px}.pin-chern{left:63%;top:217px}.pin-kamala{left:45%;top:273px}.pin-patong{left:54%;top:354px}.pin-karon{left:42%;top:422px}.pin-rawai{left:55%;top:548px}.pin-panwa{left:69%;top:502px}.dp-map-name{position:absolute;z-index:5;color:#fff;font-weight:800;font-size:12px;text-shadow:0 2px 5px rgba(4,58,66,.55);pointer-events:none}.name-mai{left:44%;top:87px}.name-nai{left:43%;top:146px}.name-chern{left:47%;top:210px}.name-laguna{left:51%;top:253px}.name-kamala{left:49%;top:298px}.name-patong{left:50%;top:377px}.name-karon{left:45%;top:447px}.name-kata{left:51%;top:485px}.name-chalong{left:59%;top:449px}.name-town{left:67%;top:327px}.name-rawai{left:54%;top:603px}.name-panwa{left:68%;top:540px}.dp-map-tools{position:absolute;right:0;top:130px;width:67px;padding:8px;background:rgba(255,255,255,.93);border-radius:22px;box-shadow:0 15px 36px rgba(23,90,116,.18);display:flex;flex-direction:column;gap:4px}.dp-map-tools button{border:0;background:transparent;border-radius:15px;padding:9px 4px;color:#28394e;cursor:pointer}.dp-map-tools button.active{background:#e9f8fa;color:#078fa8}.dp-map-tools b{display:block;font-size:17px}.dp-map-tools span{font-size:9px;line-height:1.15}.dp-compass{position:absolute;right:8px;bottom:82px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#ee5d57;box-shadow:0 10px 22px rgba(15,72,98,.14)}.dp-zoom{position:absolute;right:11px;bottom:7px;width:46px;display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 22px rgba(15,72,98,.14)}.dp-zoom button{border:0;background:#fff;padding:5px;font-size:20px}.dp-boat{position:absolute;color:#fff;text-shadow:0 5px 8px rgba(10,68,96,.4);font-size:27px;animation:boat 8s ease-in-out infinite}.boat-one{right:10%;top:38px}.boat-two{left:12%;bottom:55px}.boat-three{right:5%;top:320px}@keyframes boat{50%{transform:translateX(18px) translateY(-4px)}}
.dp-filter{grid-column:1/2;grid-row:2;position:relative;z-index:20;align-self:center;display:grid;grid-template-columns:repeat(4,minmax(130px,1fr)) 98px;gap:8px;padding:10px;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 14px 36px rgba(29,83,107,.14);width:min(730px,calc(100vw - 56px))}.dp-filter label{position:relative;border:1px solid #e1e9ed;border-radius:11px;padding:8px 10px;background:#fff}.dp-filter label>span{display:block;color:#84909f;font-size:9px}.dp-filter select{width:100%;border:0;outline:0;background:transparent;color:#25354a;font-weight:700;font-size:11px}.dp-filter>button{border:0;border-radius:11px;background:#149cb4;color:#fff;font-weight:800;cursor:pointer}.dp-property-strip{position:relative;z-index:25;grid-column:1/2;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:10px;width:min(850px,calc(100vw - 56px));align-self:start}.dp-property-card{background:#fff;border:1px solid rgba(213,226,232,.9);border-radius:14px;overflow:hidden;box-shadow:0 12px 28px rgba(19,75,100,.1);transition:.25s}.dp-property-card:hover{transform:translateY(-5px);box-shadow:0 20px 38px rgba(19,75,100,.17)}.dp-photo{height:120px;position:relative;overflow:hidden}.dp-photo img{width:100%;height:100%;object-fit:cover;transition:.4s}.dp-property-card:hover img{transform:scale(1.06)}.tag{position:absolute;left:8px;top:8px;padding:4px 7px;border-radius:7px;color:#fff;font-size:8px;font-weight:800}.tag.hot{background:#ef5c4c}.tag.invest{background:#159db0}.tag.new{background:#4db270}.tag.sea{background:#4a69de}.heart{position:absolute;right:8px;top:7px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.9);font-size:18px;color:#405066;cursor:pointer}.heart.active{background:#ef5c63;color:#fff}.dp-property-body{padding:10px 12px}.dp-property-body h3{font-size:13px;margin:0 0 2px}.dp-property-body p{font-size:10px;color:#6e7c8e;margin:0}.specs{font-size:9px;color:#7c8898;margin:8px 0}.dp-property-body strong{font-size:16px}.dp-lead-card{position:absolute;z-index:30;right:6.1%;bottom:58px;width:294px;padding:20px;background:rgba(255,255,255,.96);border-radius:18px;box-shadow:0 18px 46px rgba(15,69,95,.2);text-align:center}.dp-lead-card h2{font-size:18px;line-height:1.3;margin:0 0 4px}.dp-lead-card>p{font-size:10px;color:#768294}.dp-lead-card input[type=text],.dp-lead-card input[type=tel]{width:100%;height:42px;border:1px solid #dfe7eb;border-radius:9px;padding:0 12px;margin:4px 0;font-size:11px;outline:0}.dp-lead-card input:focus{border-color:#0d9bb3;box-shadow:0 0 0 3px rgba(13,155,179,.1)}.dp-consent{display:flex;gap:6px;align-items:flex-start;text-align:left;font-size:8px;color:#768294;margin:7px 0}.dp-lead-card>button{width:100%;height:44px;border:0;border-radius:9px;background:linear-gradient(135deg,#078da7,#1aaec1);color:#fff;font-weight:800;cursor:pointer}.dp-lead-card>small{display:block;font-size:7px;color:#7b8796;margin-top:8px}.honeypot{position:absolute!important;left:-9999px!important}
.dp-benefits{max-width:1520px;margin:-1px auto 0;background:#fff;border-radius:24px 24px 0 0;display:grid;grid-template-columns:repeat(4,1fr);padding:25px clamp(30px,5vw,80px);box-shadow:0 -8px 30px rgba(26,81,105,.06)}.dp-benefits article{display:flex;align-items:center;gap:16px;padding:0 28px;border-right:1px solid #e6edef}.dp-benefits article:last-child{border-right:0}.dp-benefits article>span{font-size:29px;color:#8d7551}.dp-benefits h3{font-size:13px;margin:0 0 4px}.dp-benefits p{font-size:10px;color:#718094;margin:0;line-height:1.45}.dp-section{padding:90px clamp(28px,6vw,100px);max-width:1520px;margin:auto}.dp-section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px}.dp-section-head span,.dp-about>div>span,.dp-final-cta span{color:#0897ae;font-size:11px;font-weight:800;letter-spacing:.15em}.dp-section-head h2,.dp-about h2,.dp-final-cta h2{font-size:clamp(30px,3vw,48px);line-height:1.15;letter-spacing:-.04em;margin:9px 0 0}.dp-section-head a{color:#098fa7;font-weight:800}.dp-district-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px}.dp-district-grid>a{min-height:360px;border-radius:22px;background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(19,69,91,.14);transition:.25s}.dp-district-grid>a:hover{transform:translateY(-6px)}.dp-district-grid>a:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,25,38,.83),rgba(7,25,38,.05) 65%)}.dp-district-grid a div{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;color:#fff}.dp-district-grid h3{font-size:28px;margin:5px 0}.dp-district-grid p{font-size:12px;margin:0;color:rgba(255,255,255,.82)}.dp-district-grid span{font-size:10px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px)}.dp-about{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;background:#10283e;color:#fff;max-width:none;padding-left:max(clamp(28px,6vw,100px),calc((100vw - 1520px)/2 + 100px));padding-right:max(clamp(28px,6vw,100px),calc((100vw - 1520px)/2 + 100px))}.dp-about p{font-size:17px;line-height:1.7;color:#bfd0dc;max-width:700px}.dp-about-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dp-about-stats article{padding:28px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.05)}.dp-about-stats strong{display:block;color:#4bd2e4;font-size:35px}.dp-about-stats span{font-size:12px;color:#c8d6df}.dp-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.dp-project-grid>a{border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 14px 35px rgba(23,73,95,.1);transition:.25s}.dp-project-grid>a:hover{transform:translateY(-5px)}.dp-project-grid img{width:100%;height:220px;object-fit:cover}.dp-project-grid div{padding:20px}.dp-project-grid small{color:#0993aa}.dp-project-grid h3{font-size:19px;margin:9px 0 18px}.dp-project-grid span{font-size:12px;font-weight:800}.dp-final-cta{margin:0 clamp(28px,6vw,100px) 70px;padding:42px 50px;border-radius:24px;background:linear-gradient(135deg,#e8f8fa,#c7ecf4);display:flex;justify-content:space-between;align-items:center;gap:30px}.dp-final-cta h2{max-width:800px;font-size:35px}.dp-footer{padding:42px clamp(28px,6vw,100px);display:flex;align-items:center;gap:50px;background:#0b1d2d;color:#fff}.dp-footer .dp-logo{color:#fff}.dp-footer p{margin:0;flex:1;color:#9fb2c1}.dp-footer nav{display:flex;gap:25px;font-size:12px}.dp-mobile-cta{display:none}
@media(max-width:1200px){.dp-nav{gap:16px}.dp-phone small,.dp-favorite span{display:none}.dp-hero{grid-template-columns:44% 56%}.dp-lead-card{right:2%}.dp-property-strip{grid-template-columns:repeat(3,1fr)}.dp-property-card:nth-child(4){display:none}.dp-map-tools{right:6px}}
@media(max-width:980px){.dp-header{height:76px}.dp-nav{position:fixed;inset:76px 0 auto;background:#fff;display:none;flex-direction:column;padding:28px;box-shadow:0 20px 40px rgba(17,50,70,.14)}.dp-nav.open{display:flex}.dp-menu{display:block}.dp-phone,.dp-favorite,.dp-language{display:none}.dp-hero{display:block;min-height:auto;padding-bottom:44px}.dp-hero-copy{padding-top:0}.dp-map-stage{height:650px;margin-top:20px}.dp-filter{width:100%;grid-template-columns:1fr 1fr}.dp-filter>button{min-height:56px;grid-column:1/3}.dp-property-strip{width:100%;grid-template-columns:repeat(2,1fr);margin-top:20px}.dp-property-card:nth-child(4){display:block}.dp-lead-card{position:relative;right:auto;bottom:auto;width:100%;margin-top:20px}.dp-benefits{grid-template-columns:1fr 1fr}.dp-benefits article:nth-child(2){border-right:0}.dp-benefits article{padding:20px}.dp-district-grid,.dp-project-grid{grid-template-columns:1fr 1fr}.dp-about{grid-template-columns:1fr}.dp-final-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.dp-header{padding:0 18px}.dp-logo{min-width:auto}.dp-logo-main{font-size:27px}.dp-logo small{font-size:8px}.dp-hero{padding:28px 16px 38px}.dp-rank{font-size:10px}.dp-hero h1{font-size:39px;line-height:1.1;margin-top:25px}.dp-hero-copy>p{font-size:15px}.dp-hand-arrow{display:none}.dp-primary{width:100%;padding:0 16px}.dp-metrics{justify-content:space-between}.dp-metrics>div{padding:0 12px}.dp-metrics strong{font-size:16px}.dp-map-stage{height:550px;margin-left:-20px;margin-right:-20px}.dp-island{width:100%;left:0;height:540px;top:0}.dp-map-name{font-size:8px}.dp-map-label{padding:6px 8px}.dp-map-label span{font-size:8px}.dp-map-label strong{font-size:10px}.label-mai{left:10%;top:4px}.label-bang{right:7%;top:80px}.label-chern{right:0;top:150px}.label-kamala{left:1%;top:208px}.label-patong{left:42%;top:244px}.label-karon{left:4%;top:305px}.label-rawai{left:18%;bottom:60px}.label-panwa{right:1%;bottom:62px}.dp-pin{transform:rotate(-45deg) scale(.72)}.dp-map-tools{top:140px;width:52px}.dp-map-tools button{padding:6px 2px}.dp-map-tools span{font-size:7px}.dp-compass{display:none}.dp-zoom{right:8px;bottom:15px}.dp-filter{margin-top:-20px;grid-template-columns:1fr 1fr;gap:6px}.dp-filter label{padding:6px}.dp-property-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.dp-property-card{min-width:76vw;scroll-snap-align:start}.dp-lead-card{margin-top:8px}.dp-benefits{grid-template-columns:1fr;padding:20px 16px}.dp-benefits article{border-right:0;border-bottom:1px solid #e5ecef}.dp-section{padding:60px 16px}.dp-section-head{align-items:flex-start;gap:15px;flex-direction:column}.dp-district-grid,.dp-project-grid{grid-template-columns:1fr}.dp-district-grid>a{min-height:300px}.dp-about{padding:60px 16px;gap:35px}.dp-about-stats{grid-template-columns:1fr 1fr}.dp-about-stats article{padding:18px}.dp-final-cta{margin:0 16px 80px;padding:30px 22px}.dp-final-cta h2{font-size:28px}.dp-footer{padding:36px 16px 90px;align-items:flex-start;flex-direction:column;gap:20px}.dp-footer nav{flex-wrap:wrap}.dp-mobile-cta{display:block;position:fixed;z-index:1000;left:12px;right:12px;bottom:12px;padding:15px;border-radius:12px;background:#078fa8;color:#fff;text-align:center;font-weight:800;box-shadow:0 14px 30px rgba(7,143,168,.3)}}
@media(prefers-reduced-motion:reduce){.dp-island,.dp-pin,.dp-boat{animation:none!important}.dp-home *{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* ===== REFERENCE-ACCURATE HERO V2 ===== */
.ref-hero{position:relative;overflow:hidden;background:linear-gradient(90deg,#f9fcfe 0%,#eef9fc 31%,#bfe8f4 54%,#32b1d2 100%);min-height:830px;border-bottom-left-radius:28px;border-bottom-right-radius:28px}.ref-hero-inner{position:relative;max-width:1491px;min-height:830px;margin:0 auto;padding:44px 46px 28px}.ref-copy{position:relative;z-index:8;width:43%;padding-top:8px}.ref-rank{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 6px 18px rgba(16,75,101,.08);font-size:14px;color:#536174}.ref-copy h1{margin:29px 0 18px;font-size:55px;line-height:1.08;letter-spacing:-2.1px;color:#12203a;font-weight:800}.ref-copy>p{max-width:520px;margin:0 0 26px;font-size:18px;line-height:1.55;color:#46556a}.ref-cta-row{display:flex;align-items:center;gap:10px}.ref-main-cta{display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 28px;border-radius:12px;background:linear-gradient(135deg,#0798af,#16aec2);color:white;font-weight:700;box-shadow:0 16px 30px rgba(8,152,175,.25);text-decoration:none;transition:.25s}.ref-main-cta:hover{transform:translateY(-2px);box-shadow:0 20px 36px rgba(8,152,175,.32)}.ref-main-cta span{font-size:25px}.ref-doodle{font-size:36px;color:#099bb2;transform:rotate(-20deg);display:inline-block}.ref-metrics{display:flex;gap:0;margin-top:28px}.ref-metrics>div{min-width:145px;padding:0 24px;border-right:1px solid rgba(17,28,54,.12)}.ref-metrics>div:first-child{padding-left:0}.ref-metrics>div:last-child{border-right:0}.ref-metrics strong{display:block;color:#0598b0;font-size:23px;line-height:1.15}.ref-metrics em{font-style:normal;color:#ffb325;font-size:14px;letter-spacing:1px}.ref-metrics small{display:block;margin-top:5px;color:#566477;font-size:12px;line-height:1.35}.ref-map{position:absolute;z-index:2;right:0;top:0;width:68%;height:650px;overflow:hidden}.ref-map:before{content:"";position:absolute;z-index:3;inset:0 auto 0 0;width:24%;background:linear-gradient(90deg,#eef9fc 0%,rgba(238,249,252,.72) 42%,rgba(238,249,252,0) 100%);pointer-events:none}.ref-map-image{width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(1.03) contrast(1.01)}.ref-price{position:absolute;z-index:7;border:0;border-radius:10px;padding:7px 12px;background:rgba(255,255,255,.94);box-shadow:0 10px 24px rgba(11,75,105,.18);color:#18304c;text-align:left;cursor:pointer;transition:.2s;backdrop-filter:blur(8px)}.ref-price:hover{transform:translateY(-3px) scale(1.03)}.ref-price span,.ref-price b{display:block}.ref-price span{font-size:11px}.ref-price b{font-size:13px}.ref-price.hot{background:#f25d57;color:white}.ref-mai{left:32%;top:6%}.ref-bang{right:23%;top:17%}.ref-chern{right:20%;top:29%;background:#159fba;color:white}.ref-kamala{left:20%;top:34%}.ref-patong{left:50%;top:44%}.ref-karon{left:27%;top:57%}.ref-rawai{left:41%;bottom:10%}.ref-panwa{right:12%;bottom:9%}.ref-map-toolbar{position:absolute;z-index:9;right:24px;top:135px;width:58px;padding:8px 4px;border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 14px 30px rgba(13,73,102,.18);display:flex;flex-direction:column}.ref-map-toolbar button{border:0;background:transparent;padding:8px 3px;color:#24354c;border-radius:12px;cursor:pointer}.ref-map-toolbar button.active,.ref-map-toolbar button:hover{background:#e8f8fb;color:#059ab2}.ref-map-toolbar span{font-size:18px;display:block}.ref-map-toolbar small{font-size:9px;line-height:1.1}.ref-compass,.ref-zoom{position:absolute;z-index:9;right:25px}.ref-compass{bottom:75px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:white;box-shadow:0 10px 24px rgba(13,73,102,.14);color:#ef5b55}.ref-zoom{bottom:6px;display:flex;flex-direction:column}.ref-zoom button{width:42px;height:30px;border:0;background:white;color:#20334d;font-size:20px}.ref-zoom button:first-child{border-radius:10px 10px 0 0}.ref-zoom button:last-child{border-radius:0 0 10px 10px}.ref-filter{position:absolute;z-index:12;left:46px;bottom:257px;width:690px;display:grid;grid-template-columns:repeat(4,1fr) 108px;gap:10px;padding:10px;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 16px 40px rgba(24,79,104,.13);backdrop-filter:blur(12px)}.ref-filter label{height:58px;padding:8px 12px;border:1px solid #e1e9ef;border-radius:10px;background:white}.ref-filter label span{display:block;font-size:10px;color:#7b8794}.ref-filter select{width:100%;border:0;outline:0;background:transparent;color:#18263c;font-weight:700;font-size:12px}.ref-filter>button{border:0;border-radius:11px;background:linear-gradient(135deg,#0797af,#16a9be);color:white;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}.ref-filter>button b{font-size:21px}.ref-properties{position:absolute;z-index:10;left:46px;right:545px;bottom:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ref-card{background:white;border-radius:13px;overflow:hidden;box-shadow:0 12px 28px rgba(22,79,103,.14);min-width:0;transition:.25s}.ref-card:hover{transform:translateY(-4px)}.ref-card-photo{height:112px;position:relative;overflow:hidden}.ref-card-photo img{width:100%;height:100%;object-fit:cover;transition:.3s}.ref-card:hover img{transform:scale(1.04)}.ref-tag{position:absolute;left:8px;top:8px;color:white;padding:4px 7px;border-radius:5px;font-size:9px;font-weight:800}.ref-tag.hot{background:#ef5a50}.ref-tag.invest{background:#0c9fb6}.ref-tag.new{background:#43b977}.ref-tag.sea{background:#4c6fff}.ref-card .heart{position:absolute;right:8px;top:7px;border:0;background:rgba(255,255,255,.9);width:26px;height:26px;border-radius:50%;font-size:18px}.ref-card-body{padding:10px 12px 12px}.ref-card-body h3{margin:0;font-size:13px;color:#17263d}.ref-card-body p{margin:3px 0 8px;font-size:10px;color:#7a8693}.ref-card-body div{font-size:9px;color:#8b96a1}.ref-card-body strong{display:block;margin-top:9px;font-size:15px;color:#13233a}.ref-lead{position:absolute;z-index:13;right:53px;bottom:20px;width:290px;padding:20px;border-radius:16px;background:white;box-shadow:0 18px 38px rgba(17,76,101,.2)}.ref-lead h2{margin:0;text-align:center;font-size:18px;line-height:1.25;color:#17263c}.ref-lead>p{text-align:center;margin:6px 0 13px;color:#7a8694;font-size:11px}.ref-lead>input{width:100%;height:40px;border:1px solid #e2e8ed;border-radius:8px;padding:0 12px;margin-bottom:8px;font-family:inherit}.ref-lead>label{display:flex;gap:6px;font-size:9px;color:#6b7787;margin:3px 0 10px}.ref-lead>button{width:100%;height:42px;border:0;border-radius:8px;background:linear-gradient(135deg,#0797af,#15a9be);color:#fff;font-weight:700}.ref-lead>small{display:block;text-align:center;margin-top:9px;color:#7c8793;font-size:9px}
@media(max-width:1100px){.ref-hero{min-height:1180px}.ref-hero-inner{min-height:1180px}.ref-copy{width:52%}.ref-copy h1{font-size:45px}.ref-map{width:62%;height:610px}.ref-filter{bottom:500px;right:40px;width:auto}.ref-properties{right:40px;bottom:230px}.ref-lead{right:40px;bottom:20px;width:360px}.ref-properties{grid-template-columns:repeat(3,1fr)}.ref-properties .ref-card:nth-child(4){display:none}}
@media(max-width:767px){.ref-hero{min-height:1680px;border-radius:0}.ref-hero-inner{padding:24px 18px;min-height:1680px}.ref-copy{width:100%;padding-top:0}.ref-rank{font-size:12px}.ref-copy h1{font-size:38px;letter-spacing:-1.3px;margin-top:22px}.ref-copy>p{font-size:16px}.ref-main-cta{width:100%;justify-content:center;padding:0 14px}.ref-doodle{display:none}.ref-metrics{justify-content:space-between}.ref-metrics>div{min-width:0;padding:0 10px}.ref-metrics strong{font-size:18px}.ref-map{top:500px;left:0;right:0;width:100%;height:490px}.ref-map:before{display:none}.ref-map-toolbar{right:12px;top:90px}.ref-price{transform:scale(.82)}.ref-filter{left:18px;right:18px;bottom:590px;width:auto;grid-template-columns:1fr 1fr}.ref-filter>button{height:58px;grid-column:1/-1}.ref-properties{left:18px;right:18px;bottom:250px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.ref-card{min-width:245px;scroll-snap-align:start}.ref-lead{left:18px;right:18px;bottom:18px;width:auto}.ref-map-toolbar button:nth-child(n+4){display:none}}

/* ===== DOM PHUKET V3 hero fixes ===== */
.ref-hero{background:linear-gradient(90deg,#f8fcfe 0%,#edf8fb 32%,#bfe7f3 57%,#6ac8df 100%);min-height:980px;border-bottom-left-radius:28px;border-bottom-right-radius:28px}
.ref-hero-inner{max-width:1491px;min-height:980px;padding:42px 44px 24px}
.ref-copy{z-index:6;width:39%;padding-top:6px}
.ref-copy h1{font-size:58px;line-height:1.06;margin:28px 0 18px;color:#13233f}
.ref-copy>p{max-width:530px;font-size:18px}
.ref-map{position:absolute;z-index:1;right:34px;top:16px;width:61.8%;height:560px;overflow:hidden;border-radius:30px;box-shadow:0 18px 48px rgba(18,84,112,.18)}
.ref-map:before{display:none}
.ref-map-canvas{position:absolute;inset:0;--map-scale:1;--map-rotate-x:0deg;--map-rotate-y:0deg;transform:perspective(1200px) rotateX(var(--map-rotate-x)) rotateY(var(--map-rotate-y)) scale(var(--map-scale));transform-origin:50% 50%;transition:transform .25s ease}
.ref-map-image{width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(1.05) contrast(1.01)}
.ref-map-note{position:absolute;left:20px;top:18px;z-index:12;max-width:280px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);box-shadow:0 10px 24px rgba(16,72,99,.12)}
.ref-map-note strong{display:block;color:#13233f;font-size:14px;line-height:1.15}.ref-map-note span{display:block;margin-top:4px;color:#5a6776;font-size:12px;line-height:1.35}
.ref-hotspot{position:absolute;z-index:10;border:0;background:transparent;border-radius:14px;cursor:pointer;outline:none;transition:.2s}
.ref-hotspot:hover,.ref-hotspot.active{box-shadow:0 0 0 3px rgba(9,155,178,.42),0 6px 22px rgba(9,155,178,.18);background:rgba(255,255,255,.1)}
.hs-mai{left:10.5%;top:3.5%;width:110px;height:62px}
.hs-bang{right:26.4%;top:16%;width:132px;height:60px}
.hs-chern{right:25.4%;top:27.7%;width:138px;height:70px}
.hs-kamala{left:2.6%;top:43.5%;width:127px;height:58px}
.hs-patong{left:35.8%;top:52%;width:114px;height:64px}
.hs-karon{left:6.2%;top:65%;width:128px;height:60px}
.hs-rawai{left:8.6%;bottom:1.6%;width:132px;height:60px}
.hs-panwa{right:11.4%;bottom:.7%;width:145px;height:58px}
.ref-pois{position:absolute;inset:0;z-index:11;pointer-events:none;opacity:0;transition:.2s}
.ref-pois span{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#17314d;font-size:12px;font-weight:700;box-shadow:0 8px 24px rgba(18,73,98,.18)}
.ref-map[data-layer="infra"] .ref-pois-infra,.ref-map[data-layer="schools"] .ref-pois-schools,.ref-map[data-layer="beaches"] .ref-pois-beaches{opacity:1}
.ref-toolbar-hit{position:absolute;z-index:13;right:21px;top:102px;width:62px;height:264px}
.ref-tool{position:absolute;left:7px;width:48px;height:47px;border:0;background:transparent;border-radius:14px;cursor:pointer;transition:.2s}
.ref-tool.active,.ref-tool:hover{background:rgba(7,152,175,.12);box-shadow:inset 0 0 0 1px rgba(7,152,175,.18)}
.ref-tool.t1{top:10px}.ref-tool.t2{top:57px}.ref-tool.t3{top:109px}.ref-tool.t4{top:160px}.ref-tool.t5{top:208px}
.ref-compass-hit{position:absolute;z-index:13;right:23px;bottom:24px;width:56px;height:56px;border:0;background:transparent;border-radius:50%;cursor:pointer}.ref-compass-hit:hover{box-shadow:0 0 0 3px rgba(255,255,255,.4)}
.ref-zoom-hit{position:absolute;z-index:13;right:30px;bottom:96px;display:flex;flex-direction:column;gap:4px}.ref-zoom-hit button{width:40px;height:28px;border:0;background:transparent;border-radius:8px;cursor:pointer}.ref-zoom-hit button:hover{background:rgba(255,255,255,.26)}
.ref-filter{bottom:246px;left:44px;width:608px;grid-template-columns:repeat(4,1fr) 102px;padding:9px 10px;border-radius:18px;background:rgba(255,255,255,.92)}
.ref-properties{left:44px;right:390px;bottom:18px;gap:12px}
.ref-card{min-width:0}.ref-card.muted{opacity:.42;transform:none}
.ref-card .heart.active{color:#ef5a50}
.ref-lead{right:44px;bottom:18px;width:320px;padding:22px 20px;border-radius:18px}
.ref-lead>label{display:grid;grid-template-columns:16px 1fr;font-size:10px;align-items:start;gap:8px}
.ref-lead>label input{margin:2px 0 0}
.dp-benefits{margin-top:-2px}

@media (max-width:1200px){
  .ref-hero{min-height:1200px}.ref-hero-inner{min-height:1200px}
  .ref-copy{width:46%}.ref-copy h1{font-size:48px}
  .ref-map{right:24px;width:58%;height:520px}
  .ref-filter{left:24px;bottom:456px;width:calc(100% - 48px);max-width:760px}
  .ref-properties{left:24px;right:24px;bottom:228px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ref-properties .ref-card:nth-child(4){display:none}
  .ref-lead{right:24px;bottom:18px;width:350px}
}

@media (max-width:900px){
  .ref-hero{min-height:1380px;border-radius:0}.ref-hero-inner{min-height:1380px;padding:24px 18px}
  .ref-copy{width:100%}.ref-copy h1{font-size:42px;letter-spacing:-1.4px}
  .ref-map{position:absolute;left:18px;right:18px;top:420px;width:auto;height:430px;border-radius:22px}
  .ref-map-note{max-width:220px}
  .ref-filter{left:18px;right:18px;bottom:430px;width:auto;grid-template-columns:1fr 1fr}
  .ref-filter>button{height:58px;grid-column:1/-1}
  .ref-properties{left:18px;right:18px;bottom:230px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .ref-card{min-width:245px;scroll-snap-align:start}.ref-properties .ref-card:nth-child(4){display:block}
  .ref-lead{left:18px;right:18px;bottom:20px;width:auto}
}

@media (max-width:767px){
  .ref-map{top:470px;height:390px}
  .ref-map-note{left:10px;top:10px;max-width:210px;padding:10px 12px}
  .ref-toolbar-hit{right:8px;top:72px;transform:scale(.92);transform-origin:top right}
  .ref-compass-hit{right:10px;bottom:10px;width:50px;height:50px}
  .ref-zoom-hit{right:16px;bottom:76px}
  .ref-hotspot{border-radius:10px}
  .hs-mai{left:10%;top:4%;width:92px;height:52px}.hs-bang{right:25%;top:16%;width:112px;height:52px}.hs-chern{right:24%;top:28%;width:122px;height:58px}.hs-kamala{left:2%;top:43%;width:110px;height:50px}.hs-patong{left:35%;top:52%;width:100px;height:56px}.hs-karon{left:5%;top:65%;width:114px;height:52px}.hs-rawai{left:8%;bottom:2%;width:116px;height:52px}.hs-panwa{right:11%;bottom:1%;width:128px;height:52px}
}


/* ===== DOM PHUKET V4 precise map hitboxes ===== */
.ref-map{
  width:61.8%;
  height:auto;
  aspect-ratio:905/510;
  overflow:hidden;
}
.ref-map-canvas{inset:0;transform-origin:center center}
.ref-map-image{width:100%;height:100%;object-fit:fill;object-position:center}
.ref-map-note{left:18px;top:auto;bottom:14px;max-width:300px;padding:10px 12px;opacity:.96}

/* Clickable zones are tied to the exact coordinates of the rendered 905×510 map. */
.hs-mai{left:16.2%;top:3.2%;width:12.8%;height:11.5%}
.hs-bang{left:53.0%;top:20.5%;width:15.5%;height:12.3%}
.hs-chern{left:49.8%;top:34.1%;width:16.8%;height:14.0%}
.hs-kamala{left:.3%;top:51.8%;width:15.7%;height:12.0%}
.hs-patong{left:36.2%;top:55.8%;width:12.6%;height:12.2%}
.hs-karon{left:4.0%;top:69.8%;width:16.8%;height:12.5%}
.hs-rawai{left:17.8%;top:91.5%;width:17.5%;height:8.5%}
.hs-panwa{left:66.8%;top:91.2%;width:18.5%;height:8.8%}

.ref-hotspot{background:rgba(255,255,255,0);box-shadow:none}
.ref-hotspot:hover,.ref-hotspot.active{
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(8,155,179,.48),0 8px 24px rgba(5,119,145,.18);
}
.ref-hotspot:focus-visible{box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 0 7px rgba(8,155,179,.7)}

/* Exact slots of the toolbar printed in the reference image. */
.ref-toolbar-hit{right:4.5%;top:19.0%;width:7.3%;height:64.5%}
.ref-tool{left:0;width:100%;height:19%;border-radius:11px}
.ref-tool.t1{top:0}.ref-tool.t2{top:19.7%}.ref-tool.t3{top:39.5%}.ref-tool.t4{top:59.3%}.ref-tool.t5{top:79.1%}
.ref-tool.active,.ref-tool:hover{background:rgba(8,155,179,.11);box-shadow:inset 0 0 0 2px rgba(8,155,179,.34)}
.ref-tool:focus-visible{outline:3px solid rgba(8,155,179,.65);outline-offset:1px}

/* Exact compass and zoom zones from the reference image. */
.ref-compass-hit{right:4.9%;bottom:1.6%;width:6.4%;height:11.4%}
.ref-zoom-hit{display:none}

@media(max-width:1200px){
  .ref-map{width:58%;height:auto;aspect-ratio:905/510}
}
@media(max-width:900px){
  .ref-map{width:auto;height:auto;aspect-ratio:905/510}
}
@media(max-width:767px){
  .ref-map{height:auto;aspect-ratio:905/510}
  .ref-map-note{display:none}
  .ref-toolbar-hit{right:4.5%;top:19%;width:7.3%;height:64.5%;transform:none}
  .ref-compass-hit{right:4.9%;bottom:1.6%;width:6.4%;height:11.4%}
}
.ref-compass-hit{bottom:14.2%}
.ref-zoom-hit{position:absolute;z-index:14;right:4.9%;bottom:1.5%;display:flex;flex-direction:column;gap:0;width:6.4%}
.ref-zoom-hit button{display:grid;place-items:center;width:100%;height:29px;border:0;background:rgba(255,255,255,.94);color:#24354c;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 5px 16px rgba(13,73,102,.12)}
.ref-zoom-hit button:first-child{border-radius:10px 10px 0 0;border-bottom:1px solid #e2e9ee}.ref-zoom-hit button:last-child{border-radius:0 0 10px 10px}
.ref-zoom-hit button:hover{background:#e8f8fb;color:#0798af}
@media(max-width:767px){.ref-compass-hit{bottom:14.2%}.ref-zoom-hit{right:4.9%;bottom:1.5%;width:6.4%}.ref-zoom-hit button{height:24px;font-size:17px}}

/* Production polish */
.dp-home,
.ref-copy h1,
.dp-section-head h2,
.dp-about h2,
.dp-final-cta h2 {
  letter-spacing: 0;
}

.dp-header-actions {
  margin-left: auto;
}

.anchor-alias {
  display: block;
  width: 0;
  height: 0;
  scroll-margin-top: 110px;
}

.ref-card[hidden] {
  display: none;
}

.dp-faq {
  padding-top: 24px;
}

.dp-faq-list {
  border-top: 1px solid #dbe7eb;
}

.dp-faq-list details {
  border-bottom: 1px solid #dbe7eb;
  padding: 0;
}

.dp-faq-list summary {
  position: relative;
  padding: 24px 48px 24px 0;
  cursor: pointer;
  list-style: none;
  color: #12203a;
  font-size: 19px;
  font-weight: 700;
}

.dp-faq-list summary::-webkit-details-marker {
  display: none;
}

.dp-faq-list summary::after {
  content: "+";
  position: absolute;
  top: 20px;
  right: 4px;
  color: #078fa8;
  font-size: 28px;
  font-weight: 400;
}

.dp-faq-list details[open] summary::after {
  content: "−";
}

.dp-faq-list p {
  max-width: 820px;
  margin: -8px 0 24px;
  color: #5d6b7c;
  line-height: 1.7;
}

.dp-home :focus-visible,
.site-shell :focus-visible {
  outline: 3px solid #ffb325;
  outline-offset: 3px;
}

.dp-mobile-cta {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dp-mobile-cta.is-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateY(18px);
}

@media (max-width: 640px) {
  .dp-mobile-cta {
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .dp-faq-list summary {
    padding: 20px 42px 20px 0;
    font-size: 17px;
  }

  .dp-faq-list summary::after {
    top: 16px;
  }
}

@media (max-width: 767px) {
  .ref-hero,
  .ref-hero-inner {
    min-height: 0;
  }

  .ref-hero-inner {
    padding-bottom: 24px;
  }

  .ref-map,
  .ref-filter,
  .ref-properties,
  .ref-lead {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .ref-map {
    margin-top: 28px;
    border-radius: 18px;
  }

  .ref-filter {
    margin-top: 16px;
  }

  .ref-properties {
    margin-top: 16px;
    padding-bottom: 8px;
  }

  .ref-lead {
    margin-top: 16px;
  }
}