:root{
  --primary:#5271FF;
  --primary-dark:#2C3E91;
  --accent:#3D5AE0;
  --bg:#FFFFFF;
  --surface:#F1F1F1;
  --text:#16233E;
  --text-light:#5A6B7E;
  --border:#E2E8F0;
  --radius:14px;
  --max-width:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Josefin Sans',system-ui,-apple-system,sans-serif;line-height:1.7;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-weight:700;line-height:1.25}
h1{font-size:2.4rem}
h2{font-size:1.9rem;margin-bottom:16px}
h3{font-size:1.2rem}
p{margin-bottom:14px}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;padding:10px 16px;z-index:3000;font-weight:700}
.skip-link:focus{left:8px;top:8px}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--primary);outline-offset:2px;
}
/* Range sliders draw the focus ring on the thumb itself (thumb has
   its own primary-blue border). The global rule above adds an outline
   to the whole <input type="range"> box, which reads as an unwanted
   blue rectangle around the price-filter slider container -- especially
   when focus persists after interaction. Scoped exception here keeps
   nav/form/dropdown focus rings intact. */
input[type="range"]:focus,
input[type="range"]:focus-visible{outline:none}

/* Header */
.site-header{position:static;background:transparent;border-bottom:none;z-index:1000}
/* Re-measured live 2026-08-13: source header DOES turn sticky+white on
   scroll (visible at scrollY=300, position:fixed, background:#fff,
   height:100px). Earlier note claiming otherwise was wrong. */
.site-header.scrolled{position:fixed;top:0;left:0;right:0;width:100%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);z-index:1100}
.site-header.scrolled .logo,
.site-header.scrolled .main-nav a,
.site-header.scrolled .header-social a{color:var(--text)}
.site-header.scrolled .header-logo{filter:none}
.site-header.scrolled .header-phone{border-color:var(--border);color:var(--text)}
body.home-transparent-header .site-header.scrolled,
body.page-transparent-header .site-header.scrolled{position:fixed;background:#fff}
body.home-transparent-header .site-header.scrolled .logo,
body.home-transparent-header .site-header.scrolled .main-nav a,
body.home-transparent-header .site-header.scrolled .header-social a,
body.page-transparent-header .site-header.scrolled .logo,
body.page-transparent-header .site-header.scrolled .main-nav a,
body.page-transparent-header .site-header.scrolled .header-social a{color:var(--text)}
body.home-transparent-header .site-header.scrolled .header-logo,
body.page-transparent-header .site-header.scrolled .header-logo{filter:none}
/* /thanks/ uses Elementor Canvas template on source -- no header, no footer,
   no FAB, no mobile-contact-bar. Body height is only ~411px there. */
body.page-no-header .site-header,
body.page-no-header .site-footer,
body.page-no-header .fab-container,
body.page-no-header .mobile-contact-bar{display:none}

/* Header floats absolutely over the hero photo/video on every page that has
   one, not just home (view-source confirmed 2026-07-24 across /properties/,
   /build-your-own/, /contact/, /blog/, and a property detail page -- all use
   the same position:static, transparent-background header).
   Re-verified 2026-08-11 with a real mouse-wheel scroll test on live source:
   the header is NOT sticky -- it scrolls away with the page like any other
   in-flow element (position:static, always background:rgba(0,0,0,0)) and
   never swaps to a solid/white background at any scroll position, on any of
   home/properties/contact/build-your-own/rent/blog-post. The previous
   ".scrolled" white sticky-header variant below did not exist on source and
   has been removed -- it was an invented enhancement, not a migration. */
body.home-transparent-header .site-header{
  position:absolute; top:0; left:0; right:0; width:100%;
  background:transparent; border-bottom:none; box-shadow:none;
}
body.page-transparent-header .site-header{ background:#fff; }
body.home-transparent-header .site-header .logo,
body.home-transparent-header .site-header .main-nav a,
body.home-transparent-header .site-header .header-social a{ color:#fff; }
body.home-transparent-header .site-header .header-logo{ filter:brightness(0) invert(1); }

/* Header height + logo size: measured live on source at 1440/1024/768/375
   (2026-08-11). Logo is fluid between the tablet and desktop breakpoints
   (~5.36vw, clamped 41-77px), then jumps to a fixed 60px on mobile portrait
   rather than continuing to shrink -- this matches source's own behaviour,
   confirmed via getBoundingClientRect at all 4 widths. */
/* Batch 2 (visible polish): logo box scaled toward Yam's ~110px target.
   CAVEAT discovered during implementation: the logo asset is 1024x227
   (4.5:1) — at 110px tall it is 496px wide, which cannot coexist with the
   mandated 1.3x nav + 1.8x social + 1.3x phone inside a 1180px row. Fix:
   header row goes full-width (1440 cap), nav padding + right-gap compacted
   (fonts untouched), and the logo takes all remaining space via
   object-fit:contain — ~69px visible at 1440 (1.6x the old 42px), growing
   to the full 110px on wider screens. Flagged to Yam in the batch report. */
.header-inner{display:flex;align-items:center;justify-content:space-between;height:120px}
.site-header .wrap{max-width:1440px}
@media (max-width:1024px){.header-inner{height:76px}}
@media (max-width:768px){.header-inner{height:63px}}
@media (max-width:767px){.header-inner{height:80px}}
.logo{font-size:1.5rem;font-weight:700;color:var(--primary-dark);letter-spacing:1px;display:flex;align-items:center;min-width:190px}
.logo span{color:var(--primary);font-weight:300}
.header-logo{height:clamp(74px,9.65vw,110px);width:auto;display:block;object-fit:contain}
@media (max-width:767px){.header-logo{height:60px}}
.main-nav ul{display:flex;list-style:none;gap:0}
.main-nav a{display:block;padding:0 8px;font-weight:600;letter-spacing:normal;text-transform:uppercase;font-size:1.3rem;color:var(--text);white-space:nowrap}
.main-nav a:hover,.main-nav a.active{color:var(--primary)}
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:33px; height:33px; border-radius:100px;
  background:#fff; border:none; color:var(--primary); cursor:pointer;
}
.mobile-nav{display:none;background:#fff}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none}
.mobile-nav a{display:block;padding:14px 24px;font-weight:600;text-transform:uppercase;font-size:.8125rem;color:var(--text)}
.mobile-nav a.active{background:var(--primary);color:#fff}
.header-right{display:flex;align-items:center;gap:20px}
/* Mid-desktop (1025-1350): not enough row width for full Batch-2 scale +
   the wide logo — step the right side back down so the logo keeps space. */
@media (max-width:1350px){
  .main-nav a{font-size:1.05rem}
  .header-social svg{width:28px;height:28px}
  .header-phone{font-size:1rem;padding:12px 24px}
}
.header-social{display:flex;align-items:center;gap:14px}
.header-social a{color:var(--text-light);display:flex;transition:color .15s}
.header-social svg{width:35px;height:35px}
.header-social a:hover,.header-social a:focus-visible{color:var(--primary)}
.header-phone{
  display:flex; align-items:center; gap:8px;
  border:3px solid var(--border); border-radius:100px;
  padding:16px 31px; font-weight:600; font-size:1.22rem;
  color:var(--text); white-space:nowrap; transition:border-color .15s,color .15s;
}
.header-phone:hover{ border-color:var(--primary); color:var(--primary); }
body.home-transparent-header .site-header .header-phone{ border-color:rgba(255,255,255,.6); color:#fff; }
@media (max-width:1024px){
  .main-nav{display:none}
  .header-social{display:none}
  .header-phone{display:none}
  .nav-toggle{display:flex}
}
.social-links{display:flex;align-items:center;gap:14px}
.social-links a{color:var(--text-light);display:flex;transition:color .15s}
.social-links a:hover,.social-links a:focus-visible{color:var(--primary)}

/* Hero -- measured live on source at 1440/1024/768/375 (2026-08-11).
   Headline+subtitle are both literally <h2> on source (property-card titles
   use <h1> there, not the hero heading -- an existing source quirk, matched
   as-is per "html-structure 1:1", see visual-sweep/fidelity/hero-section).
   Height is fixed 750px at >=768, but taller (auto/content-driven) on mobile
   portrait where the 2-line headline + 2-line subtitle need more room. */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;padding:110px 0 40px;text-align:center;min-height:750px;display:flex;align-items:center}
@media (max-width:767px){.hero{min-height:0;padding:130px 0 40px}}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3);z-index:1}
.hero .wrap{position:relative;z-index:2;width:100%;min-width:0;max-width:1440px}
.hero-headline{font-size:54px;font-weight:600;line-height:1;letter-spacing:normal;margin-bottom:20px}
.hero-subtitle{font-size:30px;font-weight:300;line-height:1;letter-spacing:normal;text-transform:none;margin-bottom:30px}
@media (min-width:768px){
  .hero-headline{font-size:80px}
  .hero-subtitle{font-size:47px}
}

/* Hero quick-search widget -- source uses 0 gap-flex with per-field padding
   for nav, but the search widget itself DOES use a real 20px flex gap
   (measured consistently across 1440/1024/768: fields never wrap, all sit
   on one row down to 768px). Stacks to a full-width column only <768. */
.hero-search{
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:20px;
  max-width:1320px; margin:0 auto;
}
.hero-search select,.hero-search input{
  flex:1; min-width:110px;
  padding:0 22px; height:52px; border-radius:100px; border:2px solid #fff;
  background:transparent; color:#fff; font-family:inherit; font-size:1.3rem;
}
.hero-search select option{ color:var(--text); }
.hero-search input::placeholder{ color:rgba(255,255,255,.85); }
.hero-search input[type="search"]{ height:57px; }
.hero-search button{
  flex:0 0 auto;
  padding:0 40px; height:57px; border-radius:100px; border:none; cursor:pointer;
  background:var(--primary); color:#fff; font-weight:600; font-family:inherit; font-size:1.3rem;
  white-space:nowrap;
}
.hero-search button:hover{ background:var(--primary-dark); }
@media (max-width:767px){
  .hero-search{ flex-direction:column; align-items:stretch; }
  .hero-search select,.hero-search input,.hero-search button{ width:100%; }
}

/* Secondary page hero (Properties archive, Contact) */
.page-hero{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:280px; background-size:cover; background-position:center;
  text-align:center; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,25,45,.5) 0%, rgba(15,25,45,.6) 100%);
  z-index:0;
}
/* Source's page-hero H1 is 67px/600/white/centered (matched from
   Properties archive + Contact + BYO measurements on 2026-08-12). */
.page-hero h1{ position:relative; z-index:1; color:#fff; font-size:67px; font-weight:600; line-height:1; margin:0; }
@media (max-width:600px){ .page-hero{ min-height:200px; } .page-hero h1{ font-size:2.6rem; } }

/* BYO hero — Batch 2: H1 1.5x (80->120px), vertical padding -20% so the
   title fills the band. .byo-hero modifier on .page-hero (see build_site.py). */
.page-hero.byo-hero{ min-height:220px; padding:16px 0; }
body.page-transparent-header .page-hero.byo-hero{ padding-top:108px; }
.page-hero.byo-hero h1{ font-size:120px; }
@media (max-width:600px){ .page-hero.byo-hero{ min-height:180px; } .page-hero.byo-hero h1{ font-size:3rem; } }

/* Page hero variant with a filter row floating on the photo (properties/rent
   archives). Measured live on source (2026-08-12): hero is 500px tall with
   H1 67px/600 white centered near the top, filter row 1 at 233px, filter
   row 2 (keyword + price slider) at 304px. Fields are 2px solid white
   pills on a transparent-black background over the photo, matching the
   home hero-search style. */
.page-hero.has-filters{
  min-height:500px; flex-direction:column; justify-content:flex-start;
  align-items:stretch; padding:120px 40px 40px;
}
.page-hero.has-filters::before{ background:rgba(0,0,0,.5); }
.page-hero.has-filters h1{ font-size:67px; font-weight:600; line-height:1; text-align:center; margin:0 0 30px; }
/* Batch 2 (Omri B3): single row of 8 fixed-width fields at >=1440
   (Ownership 130 / Type 130 / Location 130 / Views 100 / Bedrooms 100 /
   Bathrooms 100 / Price 250 / Keyword 200, 12px gap), wrapped in a
   visually distinct "filter card" (translucent white bg + border).
   Below 1440 the grid drops to 4+4 across two rows. */
.page-hero.has-filters .filters{
  position:relative; z-index:1; margin:0;
  background:transparent; border:none;
  padding:8px 0; border-radius:0;
  max-width:1290px; width:100%; margin-left:auto; margin-right:auto;
  display:grid; grid-template-columns:160px 160px 160px 130px 130px 130px 220px;
  justify-content:center; gap:12px;
  align-items:center;
}
.page-hero.has-filters .filters > select,
.page-hero.has-filters .filters > input[type="text"],
.page-hero.has-filters .filters > .pf-loc,
.page-hero.has-filters .price-filter{
  height:48px; box-sizing:border-box;
}
.page-hero.has-filters .filters select,
.page-hero.has-filters .filters > input[type="text"],
.page-hero.has-filters .price-filter__inputs input{
  background:transparent; color:#fff; border:2px solid #fff; border-radius:100px;
  height:48px; padding:0 14px; font-size:17px;
}
/* Location multi-select widget: matches source's jet-checkboxes-list --
   a pill trigger that opens a dropdown of 24 checkbox items (Koh
   Phangan + 6 sub-areas, then Koh Samui + 16 sub-areas). Dropdown
   is white with dark text, scrollable, positioned below the pill. */
.pf-loc{position:relative;height:48px;min-width:0}
.pf-loc__trigger{
  width:100%; height:48px; padding:0 14px; box-sizing:border-box;
  background:transparent; color:#fff; border:2px solid #fff; border-radius:100px;
  font-family:inherit; font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  text-align:left; white-space:nowrap; overflow:hidden;
}
.pf-loc__label{overflow:hidden;text-overflow:ellipsis}
.pf-loc__caret{flex:0 0 auto;font-size:12px}
.pf-loc__dropdown{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  background:#fff; color:#333; border-radius:12px; padding:8px;
  max-height:260px; overflow-y:auto; box-shadow:0 6px 20px rgba(0,0,0,.25);
  display:flex; flex-direction:column; gap:2px; min-width:180px;
}
.pf-loc__dropdown[hidden]{display:none}
.pf-loc-item{
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  border-radius:6px; cursor:pointer; font-size:14px; color:#333;
}
.pf-loc-item:hover{background:#f2f4f8}
.pf-loc-item input{margin:0;accent-color:var(--primary)}
.pf-loc-parent{font-weight:700}
.page-hero.has-filters .filters select option{ color:#333; background:#fff; }
.page-hero.has-filters .filters input::placeholder{ color:rgba(255,255,255,.85); }
/* Price + keyword sit inline in the single row (cols 7-8). The old 6x2
   grid with price spanning row 2 is gone — Omri confirmed single-row via
   the Batch 2 spec. */
.page-hero.has-filters .price-filter{
  grid-column:1 / -1; display:flex; flex-direction:row; gap:16px;
  align-items:center; min-width:0; padding:0;
}
.page-hero.has-filters .price-filter__inputs{ flex:0 0 auto; min-width:240px; }
.page-hero.has-filters .price-filter__slider{ flex:1 1 auto; }
.page-hero.has-filters .filters > input[type="text"]{
  grid-column:auto; align-self:start;
}
.page-hero.has-filters .price-filter__inputs{
  display:flex; align-items:center; gap:4px;
  border:2px solid #fff; border-radius:100px; padding:0 8px; height:48px;
  color:#fff; background:transparent;
}
.page-hero.has-filters .price-filter__inputs input{
  border:none; padding:0; height:auto; flex:1; min-width:0;
  background:transparent; color:#fff; font-size:16px; text-align:center;
}
.page-hero.has-filters .price-filter__inputs .pf-price-chip{padding:0 6px}
.page-hero.has-filters .price-filter__slider{
  position:relative; height:16px; padding:0;
  /* Force a fresh stacking context so the pseudos below stay under
     the range inputs regardless of ancestor z-index. Without this,
     ::after (tree-later, z:auto=0) can paint above the z:1 inputs
     in the shared ancestor context, cutting through handle centers. */
  isolation:isolate;
}
/* Make both native runnable-tracks transparent -- the visible track
   is painted once on ::before below.
   SPLIT into two rules on purpose: combining vendor-prefixed pseudos
   in a comma-selector list causes Chrome to discard the ENTIRE rule
   when it encounters the unknown ::-moz-range-track sibling. That
   left the base blue track background winning and produced a phantom
   blue bar under our gradient (Guy caught this on 9aaed92c). */
.page-hero.has-filters .price-filter__slider input[type="range"]::-webkit-slider-runnable-track{
  background:transparent;
}
.page-hero.has-filters .price-filter__slider input[type="range"]::-moz-range-track{
  background:transparent;
}
/* Single-pseudo track: linear-gradient with hard color stops driven
   by --pf-min-percent / --pf-max-percent CSS vars set by the archive
   JS. Defaults 0%/100% -> full-blue before JS boots. Semi-transparent
   white outside the range, primary blue between. No calc(), no ::after
   -- browsers handle percentage stops in linear-gradient natively. */
.page-hero.has-filters .price-filter__slider::before{
  content:""; position:absolute; left:0; right:0; top:6px; height:4px;
  border-radius:2px; z-index:0; pointer-events:none;
  background:linear-gradient(to right,
    #fff 0%,
    #fff var(--pf-min-percent, 0%),
    var(--primary) var(--pf-min-percent, 0%),
    var(--primary) var(--pf-max-percent, 100%),
    #fff var(--pf-max-percent, 100%),
    #fff 100%);
}
/* Explicit z-index bump on both range inputs so their thumbs
   always paint above the ::before track. */
.page-hero.has-filters .price-filter__slider input[type="range"]{z-index:2}
.page-hero.has-filters .price-filter__slider input[type="range"]::-webkit-slider-thumb{
  background:#fff;
}
/* In the fixed-width single row the 130/100px cells are tight for 15px
   labels — drop to 13px + slimmer padding there only (>=1440). */
@media (min-width:1440px){
  .page-hero.has-filters .filters select,
  .page-hero.has-filters .pf-loc__trigger{ font-size:15px; padding:0 10px; }
}
@media (max-width:1439px){
  .page-hero.has-filters .filters{ grid-template-columns:repeat(4, minmax(0,1fr)); justify-content:stretch; }
}
@media (max-width:1024px){
  .page-hero.has-filters .filters{ grid-template-columns:repeat(3, 1fr); }
  .page-hero.has-filters .price-filter{ grid-column: 1 / 3; }
  .page-hero.has-filters .filters > input[type="text"]{ grid-column: 3 / 4; }
}
@media (max-width:600px){
  .page-hero.has-filters{ min-height:auto; padding:80px 20px 24px; }
  .page-hero.has-filters h1{ font-size:2.6rem; }
  .page-hero.has-filters .filters{ grid-template-columns:1fr; }
  .page-hero.has-filters .price-filter,
  .page-hero.has-filters .filters > input[type="text"]{ grid-column: 1; }
}

/* Buttons */
.btn{display:inline-block;padding:14px 28px;border-radius:10px;font-weight:600;letter-spacing:.3px;transition:transform .15s,box-shadow .15s}
.btn-primary{background:#fff;color:var(--primary-dark)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.btn-outline{border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-block{background:var(--primary);color:#fff}
.btn-block:hover{background:var(--primary-dark)}

/* Sections */
section{padding:64px 0}
.section-alt{background:var(--surface)}
.section-title{text-align:center;margin-bottom:36px}
.section-title h2{margin-bottom:6px}
.section-title p{color:var(--text-light)}

/* Property cards -- shadow/radius/Details-button spec measured live on
   source (2026-08-11): card is a static 20px-radius white box with a
   permanent ambient shadow (0 0 13px, 50% black) that does NOT change on
   hover -- verified before/after a real mouse hover, identical computed
   style both times. The Details button is full-bleed (no side margin,
   flush with the card edges) with only its bottom two corners rounded to
   match the card. */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;align-items:stretch}
/* Archive grids (Properties, Rent, Locations, Crypto) need breathing
   room before the blue footer. Scoped via #pgrid so home Featured
   (also .p-grid, but not id=pgrid) is untouched. */
#pgrid{padding-bottom:110px}
.p-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 0 13px rgba(0,0,0,.5)}
.p-card__img{height:190px;background-size:cover;background-position:center;position:relative;display:block}
.p-card__body{padding:16px 18px;flex:1 1 auto;display:flex;flex-direction:column}
.p-card__tags{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
/* Batch 2b: card typography scaled on the SHARED .p-card__* rules so
   Properties + BYO (+ home/location/rent/crypto grids) all match:
   title 22->30, on-image price 32->45, loc 14->18, stats 13->18, tag 12->14.
   Batch 2's bcac2d0 scoped these under .byo-column-cards only — those
   overrides are removed below so both pages measure identically. */
.p-card__tags .tag,.tag{display:inline-block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--primary-dark);background:var(--surface);border:1px solid var(--border);padding:3px 9px;border-radius:6px}
.p-card__price{font-size:1.2rem;font-weight:700;color:var(--primary-dark)}

/* Price + tags overlaid on the card photo, matching the source's card style */
.p-card__img .p-card__tags{
  position:absolute; top:12px; right:12px; margin-bottom:0;
  flex-direction:column; align-items:flex-end;
}
.p-card__img .p-card__tags .tag{
  background:var(--primary); border:none; color:#fff;
  border-radius:100px; padding:4px 12px; font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.4px;
}
.p-card__img .p-card__price{
  position:absolute; bottom:12px; left:16px;
  background:transparent; color:#fff; padding:0; border-radius:0;
  font-size:38px; font-weight:400; line-height:1.1;
  font-family:'Josefin Sans',sans-serif;
  /* Legibility on light photos (SOLD! placeholders, sky-heavy shots)
     without introducing an opaque overlay -- soft dark shadow. */
  text-shadow:0 2px 4px rgba(0,0,0,.5), 0 0 8px rgba(0,0,0,.35);
}
.p-card__title{font-size:26px;margin:4px 0;font-weight:600;color:var(--primary);font-family:'Josefin Sans',sans-serif;text-align:left}
.p-card__loc{color:var(--text-light);font-size:16px;margin-bottom:10px}
.p-card__stats{display:flex;gap:12px;font-size:16px;color:var(--text-light);flex-wrap:wrap;margin-bottom:14px}
.p-card__stats span{display:flex;align-items:center;gap:4px;background:var(--surface);padding:5px 9px;border-radius:6px}
/* Batch 2 (Omri B1): stat icons (bed/bath/area/home — lucide-style inline
   SVGs, stroke-width already 2) bumped 1.3x: 16 -> 21px. Sized here in CSS
   so every page's inline width/height attrs are overridden uniformly. */
.p-card__stats svg{width:18px;height:18px}
.p-card__details{display:block;text-align:center;background:var(--primary);color:#fff;height:39px;line-height:15px;padding:12px 24px;border-radius:0 0 20px 20px;font-weight:600;font-size:15px;margin-top:auto}
.p-card__details:hover{background:var(--primary-dark)}

/* Featured Properties (home) -- title + grid measured live on source:
   40px/300/black title (was a smaller bold primary-colored one), grey
   section background (.section-alt), and 3 columns dropping to 2 at
   <=1024 (not 3->auto-fill) -- was still 3-wide at 1024 before. */
.featured-section .section-title h2{font-size:40px;font-weight:300;color:#000}
.featured-section .p-grid{grid-template-columns:repeat(3,1fr);gap:50px}
@media (max-width:1024px){.featured-section .p-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.featured-section .p-grid{grid-template-columns:1fr}}

/* Filters (properties archive) -- 2 rows matching source: 6 pill
   dropdowns on row 1, price-filter (chip+input, chip+input, slider)
   + keyword on row 2. .price-filter is forced full-width so it wraps
   as its own row and its inputs stay inline with the ฿ chips. */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:28px;background:var(--surface);padding:18px;border-radius:var(--radius)}
.filters input:not([type="range"]),.filters select{padding:10px 12px;border:2px solid var(--primary);border-radius:8px;font-family:inherit;font-size:.9rem;background:#fff}
/* Range inputs need to keep their native track/thumb visible without a
   surrounding box -- exclude them from the .filters input border rule
   above and reset the shared paint properties. */
.filters input[type="range"]{border:none;padding:0;background:transparent;border-radius:0}
.filters input[type="text"]{flex:1;min-width:200px}
.price-filter{display:flex;flex-direction:column;gap:6px;flex:1 0 100%;min-width:0}
.price-filter__inputs{display:flex;align-items:center;gap:0}
.price-filter__inputs > span:not(.pf-price-chip){padding:0 6px;color:var(--text-light)}
.price-filter__inputs input{width:100px;padding:8px;font-size:.82rem;border-radius:0;margin-left:-2px}
.price-filter__inputs input#pf-price-min{border-top-left-radius:0;border-bottom-left-radius:0}
.pf-price-chip{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-weight:600;font-size:14px;height:34px;padding:0 10px;border-radius:0;line-height:1;font-family:'Josefin Sans',sans-serif}
.price-filter__slider{position:relative;height:24px;margin-top:6px}
.price-filter__slider input[type="range"]{position:absolute;left:0;top:8px;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;z-index:1}
.price-filter__slider input[type="range"]::-webkit-slider-runnable-track{height:4px;background:var(--primary);border-radius:2px}
.price-filter__slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:pointer;margin-top:-6px}
.price-filter__slider input[type="range"]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border:2px solid var(--primary);border-radius:50%;background:#fff;cursor:pointer}
.price-filter__slider input[type="range"]::-moz-range-track{height:4px;background:var(--primary);border-radius:2px}

/* Property detail -- rebuilt 2026-08-12 to match source 1:1.
   Structure verified live on magnificent-*, private-island-land-*,
   tropical-valley-*, and luxurios-* pages: full-width hero-strip banner
   (1440x277), then content column (708 wide, left=170) with title +
   tags + specs + ONE big image + description + gallery grid, sticky
   white sidebar card on the right (352 wide, left=918, top=327,
   radius 25px, padding 30px, no shadow) with Pricing + Contact
   combined in a single card. */
.p-hero-strip{
  width:100%; height:277px; background-size:cover; background-position:center;
  margin:0;
}
.p-detail-section{padding-top:32px !important; padding-bottom:0}
.p-detail-grid{display:grid;grid-template-columns:1fr 352px;gap:40px;align-items:start}
@media (max-width:900px){.p-detail-grid{grid-template-columns:1fr}}
.p-detail-main{min-width:0}
.p-detail-head{margin-bottom:12px}
.p-detail-head h1{font-size:40px;font-weight:600;line-height:1.15;color:#000;margin:0 0 8px}
.p-detail-loc{color:var(--text-light);margin:0}
.p-detail-head .p-card__tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.p-detail-head .p-card__tags .tag{background:var(--surface);border:1px solid var(--border);color:var(--primary-dark);border-radius:100px;font-size:.72rem;font-weight:600;text-transform:uppercase;padding:4px 12px}
.p-badges{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0 24px}
.p-badges span{display:flex;align-items:center;gap:6px;background:var(--surface);border-radius:8px;padding:10px 16px;font-size:.9rem;color:var(--text)}
.p-content-image{margin:0 0 24px}
.p-content-image img{width:100%;height:auto;border-radius:12px;display:block}
.p-detail-main h3,.p-desc-heading{margin:22px 0 8px;font-size:1.1rem;font-weight:700;color:var(--primary-dark)}
.p-detail-main ul,.p-desc-list{margin:0 0 16px;padding-left:20px;line-height:1.6}
.p-detail-main li,.p-desc-list li{margin:0 0 8px;color:var(--text)}
.p-detail-main p{margin:0 0 14px}

/* 2-col gallery grid below description (matches source's 317x226 x N
   image grid, verified live). */
.p-gallery-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px;
}
.p-gallery-grid a{display:block;overflow:hidden;border-radius:12px}
.p-gallery-grid img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;display:block;transition:transform .3s ease}
.p-gallery-grid a:hover img{transform:scale(1.03)}
@media (max-width:600px){.p-gallery-grid{grid-template-columns:1fr}}

/* Sidebar: single white card, radius 25, padding 30, no shadow --
   contains Pricing + Contact stacked (verified: samecard=true on source). */
.p-sidebar{position:sticky;top:24px;height:fit-content}
.p-sidebar-card{background:#fff;border-radius:25px;padding:30px;box-shadow:none;border:1px solid var(--border)}
.p-sidebar-heading{font-size:32px;font-weight:400;text-align:center;color:#000;margin:0 0 8px}
.p-price{font-size:32px;font-weight:400;text-align:center;color:#000;margin:0 0 4px}
.p-price small{display:block;font-size:.95rem;font-weight:400;color:var(--text-light)}
.p-sidebar-hr{border:0;border-top:1px solid var(--border);margin:20px 0}
.p-sidebar-card form{display:flex;flex-direction:column;gap:10px}
.p-sidebar-card input,.p-sidebar-card textarea{padding:10px 16px;border:none;border-radius:100px;background:var(--surface);font-family:inherit;font-size:15px;color:#000}
.p-sidebar-card textarea{border-radius:16px;resize:vertical;min-height:80px}
.p-sidebar-card input::placeholder,.p-sidebar-card textarea::placeholder{color:var(--text-light);opacity:.9}
.p-sidebar-btn{height:40px;border:none;border-radius:100px;background:var(--primary);color:#fff;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;margin-top:4px}
.p-sidebar-btn:hover{background:var(--primary-dark)}
@media (max-width:900px){
  .p-sidebar{position:static}
}

.p-map-embed{display:block;width:100%;height:500px;border:0;margin-bottom:32px}

/* Contact page -- measured live on source (2026-08-12).
   H1 uses the shared .page-hero (67px/600 white, centered on
   hero photo -- already correct). Below the hero:
     - Intro line: h2 25px/600 primary-blue, left-aligned
     - Layout: form column on left + contact-methods on right,
       2-col at desktop, stacks at mobile
     - Form fields: 40h, radius 25, bg #E6E6E6, black text 15px,
       no border (source has 0px solid rendering as no border)
     - Textarea: 94h, same style
     - Send button: primary-blue pill (r100), white 15/600
     - Contact-method cards: circle icon (100px, primary bg, 50%
       radius) + heading 28px/600 primary-blue centered + email/
       phone link below */
/* Batch 2: Contact page scaled — hero H1 1.4x (67->94px), intro 1.4x
   (30->42px), form fields+button 1.3x (48->62px h, 18->23px font),
   side-info headings/body 1.3x. Scoped via .contact-hero (contact page
   only) so Properties/BYO heroes keep their own sizes. */
.page-hero.contact-hero h1{font-size:80px}
.contact-intro{font-size:36px;font-weight:600;line-height:1.4;color:var(--primary);text-align:left;margin:0 0 24px}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding-bottom:60px}
.contact-form-col{min-width:0}
.contact-form{display:flex;flex-direction:column;gap:12px}
.contact-form input,.contact-form textarea{
  width:100%; height:55px; padding:10px 18px; box-sizing:border-box;
  border:none; border-radius:28px; background:#E6E6E6; color:#000;
  font-family:inherit; font-size:20px;
}
.contact-form textarea{height:129px;padding:8px 18px;resize:vertical;min-height:129px}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#000;opacity:.6}
.contact-send-btn{
  width:100%; height:55px; padding:0 28px;
  border:none; border-radius:100px; background:var(--primary);
  color:#fff; font-family:inherit; font-size:20px; font-weight:600;
  cursor:pointer;
}
.contact-send-btn:hover{background:var(--primary-dark)}
/* Cards are side-by-side horizontally in the right column (Send A
   Message on left of Call Us, verified at 1440: left=836 and 1073
   at same y=723) -- NOT stacked vertical. */
.contact-methods{display:flex;flex-direction:row;justify-content:space-around;align-items:flex-start;gap:24px}
.contact-method-card{text-align:center;padding:0;flex:1}
.contact-method-card .icon-circle{width:100px;height:100px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.contact-method-card .icon-circle svg{width:48px;height:48px;fill:#fff}
.contact-method-card h3{font-size:39px;font-weight:600;color:var(--primary);text-align:center;margin:0 0 8px}
.contact-method-card p{margin:0;font-size:1.38rem}
.contact-method-card a{color:var(--text)}
@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:32px}
  .contact-methods{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:32px}
}
@media (max-width:600px){
  .contact-methods{flex-direction:column}
  .contact-intro{font-size:20px;text-align:center}
}
.gallery-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:24px 0}
.gallery-strip a{display:block;cursor:pointer}
.gallery-strip img{border-radius:8px;height:110px;width:100%;object-fit:cover}
.g-image-full{border-radius:8px;height:110px;width:100%;object-fit:cover}

/* Form */
.form-grid{display:grid;gap:14px}
.form-grid input,.form-grid textarea{padding:12px 14px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:.95rem}
.form-grid textarea{min-height:120px;resize:vertical}
/* Guide section -- measured live on source (2026-08-12):
   Full-width palm/tropical bg photo with a black 50% overlay. Desktop
   layout: title+form on the LEFT, book image on the RIGHT (book is
   an actual <img>, not a bg). Mobile: title -> stacked form ->
   centered book below. Title 31px/300/white. Form is a single row
   of 4 pill fields at >=768 (each ~205px @1440, ~155 @1024, ~112
   @768), stacked full-width at <=767. Send button = primary blue. */
.guide-section{position:relative;background-size:cover;background-position:50% 100%;color:#fff;padding:0 10px;overflow:hidden}
.guide-section::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:0}
.guide-section-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:40px 0;min-height:342px}
.guide-content{flex:1;min-width:0}
.guide-title{font-size:31px;font-weight:300;line-height:1;color:#fff;text-align:center;margin:0 0 20px}
.guide-form{display:flex;gap:12px;flex-wrap:nowrap;justify-content:center;align-items:center;max-width:820px;margin:0 auto}
.guide-form input{flex:1;min-width:0;height:40px;padding:8px 16px;border:none;border-radius:100px;background:#fff;color:#000;font-family:inherit;font-size:15px}
.guide-form input::placeholder{color:#000;opacity:.6}
.guide-send-btn{flex:0 0 auto;height:40px;padding:0 24px;border:none;border-radius:100px;background:var(--primary);color:#fff;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.guide-send-btn:hover{background:var(--primary-dark)}
.guide-book{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.guide-book img{width:415px;height:502px;object-fit:contain;display:block}
@media (max-width:1024px){
  .guide-book img{width:315px;height:380px}
  .guide-section-inner{min-height:220px}
}
@media (max-width:900px){
  .guide-book img{width:229px;height:277px}
}
@media (max-width:767px){
  .guide-section-inner{flex-direction:column;gap:24px;padding:40px 0}
  .guide-form{flex-direction:column;max-width:100%}
  .guide-form input,.guide-send-btn{width:100%}
  .guide-book img{width:224px;height:271px}
}

/* Why use an agent -- measured live on source (2026-08-12):
   Grey section bg #F1F1F1, 100px vertical padding. Two-column
   layout at >=768: video on the LEFT (576x475 @1440, 410x573 @1024,
   307x786 @768, all autoplay muted loop), and a white card on the
   RIGHT that visually overlaps into the video by ~80px (card is
   595 wide, video is 576, but card left=496 puts them together).
   Card: border-radius 35px, padding 50px, box-shadow
   0 0 10px rgba(0,0,0,.5), background white.
   Title: 39px/600 primary-blue (--primary), left-aligned, no
   text-transform, line-height 39px.
   Body: 18px/400 black, line-height 27px.
   CTA: primary-blue pill (100px radius), white 15px/600, no
   border, padding 12px 24px.
   Mobile (<=767): video full-width on top (~296h), card below
   with negative margin-top for the overlap. */
.why-section{background:#F1F1F1;padding:100px 0;overflow:hidden}
.why-inner{max-width:1200px;margin:0 auto;padding:0 30px;display:flex;align-items:center;gap:0;position:relative}
.why-video{flex:0 0 auto;width:576px;height:475px;overflow:hidden;position:relative;z-index:0}
.why-video video{width:100%;height:100%;object-fit:cover;display:block}
.why-card{flex:0 0 auto;width:595px;background:#fff;border-radius:35px;padding:50px;box-shadow:0 0 10px rgba(0,0,0,.5);position:relative;z-index:1;margin-left:-80px}
.why-title{font-size:39px;font-weight:600;line-height:39px;color:var(--primary);text-align:left;margin:0 0 20px}
.why-body{font-size:18px;font-weight:400;line-height:27px;color:#000;text-align:left;margin:0 0 24px}
.why-cta{display:inline-block;background:var(--primary);color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:100px;text-decoration:none}
.why-cta:hover{background:var(--primary-dark)}
@media (max-width:1200px){
  .why-inner{padding:0 20px}
  .why-video{width:50%;height:auto;aspect-ratio:576/475}
  .why-card{width:auto;flex:1;margin-left:-60px}
}
@media (max-width:900px){
  /* Source at 768: video is ~40% wide edge-to-edge from the left with the
     card taking ~60% of the width and its left edge overlapping ~half of
     the video (measured live: card left=227 sits inside video right=307).
     Reduced video width and tightened the overlap accordingly. Video height
     stretches to match the taller card via align-self:stretch. */
  .why-inner{align-items:stretch;padding:0 20px 0 0}
  .why-video{width:40%;aspect-ratio:auto;align-self:stretch}
  .why-video video{height:100%}
  .why-card{padding:40px;margin-left:-80px}
}
@media (max-width:767px){
  .why-section{padding:0 0 40px}
  .why-inner{flex-direction:column;padding:0;gap:0;align-items:stretch}
  .why-video{width:100%;height:296px;aspect-ratio:auto}
  .why-card{width:auto;margin:-60px 20px 0;padding:40px 30px}
  .why-title{font-size:32px;line-height:34px}
}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;text-align:center;max-width:1150px;margin-left:auto;margin-right:auto}
.team-card{display:flex;flex-direction:column;align-items:center;background:transparent;padding:24px 16px}
.team-photo-wrap{position:relative;width:335px;height:250px;max-width:100%;background-image:url('/images/logo-diamond-only.webp');background-repeat:no-repeat;background-position:center;background-size:contain;margin:0 auto 16px}
.team-photo{position:absolute;top:40px;left:50%;transform:translateX(-50%);width:170px;height:170px;border-radius:50%;object-fit:cover;object-position:center top;display:block}
.team-photo-wrap[data-person="yam"] .team-photo{top:30px}
.team-photo-wrap[data-person="omri"] .team-photo{top:35px}
.team-photo-wrap[data-person="max"] .team-photo{top:35px}
.team-photo-wrap[data-person="play"] .team-photo{top:45px}
.team-photo-wrap[data-person="tam"] .team-photo{top:40px}
.team-photo-wrap[data-person="bumbim"] .team-photo{top:42px}
.team-brand-wordmark{font-family:'Josefin Sans',sans-serif;color:var(--primary);text-align:center;margin:0 auto 12px;line-height:1}
.team-brand-wordmark .brand-trei{display:block;font-weight:700;font-size:34px;letter-spacing:6px}
.team-brand-wordmark .brand-group{display:block;font-weight:400;font-size:22px;letter-spacing:10px;margin-top:2px}
.team-card h3{margin:0 0 6px;color:var(--primary);font-size:22px;font-weight:600}
.team-role{color:var(--text);font-size:16px;line-height:1.45;margin:0}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.team-grid{grid-template-columns:1fr}.team-photo-wrap{width:280px;height:288px}}

/* USP list */
/* Things You Should Know About Us -- photo bg + blue overlay + icon circles
   (view-source confirmed 2026-07-24: bg image, rgb(82,113,255)/.65 overlay,
   80px white icon circles, DOM order matches USPS array order exactly) */
/* Things You Should Know -- measured live on source (2026-08-12):
   Single row of 5 at all viewports >=768. Section has bg image + a
   rgba(82,113,255,.65) ::before overlay. Icon circle 80x80, primary
   colour, white bg, 50% radius, ~15px padding around 50x50 svg. Text
   25px/300/white, line-height 30px, no width cap (source lets each
   item's text wrap freely inside its ~204px column).
   Mobile (<=767): 1 full-width top row (item 1) + 2 columns x 2 rows
   under it (items 2,3 then 4,5) -- matches source's own responsive
   pattern (verified via layout capture at 375). */
.things-section{position:relative;background-size:cover;background-position:center;padding:80px 20px;color:#fff;text-align:center;overflow:hidden}
.things-section::before{content:'';position:absolute;inset:0;background:rgba(82,113,255,.65);z-index:0}
.things-section h2{position:relative;z-index:1;color:#fff;font-size:40px;font-weight:300;margin-bottom:56px}
.things-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:32px 20px;max-width:1200px;margin:0 auto}
.things-grid.count-5 > *{grid-column:auto}
.thing-item{display:flex;flex-direction:column;align-items:center;gap:20px}
.thing-item .icon-circle{width:80px;height:80px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:15px;box-sizing:border-box}
.thing-item .icon-circle svg{width:50px;height:50px;color:var(--primary)}
.thing-item p{color:#fff;font-size:25px;font-weight:300;line-height:30px;margin:0;max-width:220px}
@media (max-width:767px){
  .things-grid{grid-template-columns:1fr 1fr;gap:40px 20px}
  .things-grid.count-5 > *:nth-child(1){grid-column:1 / 3}
}

/* About our team -- measured live on source (2026-08-12):
   Same visual pattern as the Why-use-an-agent section but mirrored:
   card on the LEFT (700x458 @1440), photo on the RIGHT (576x478),
   card overlaps the photo by ~80px. Grey #F1F1F1 section bg with
   only bottom padding (100px) since it sits right under Why with
   no visual gap between them. Same card spec: white 35px radius,
   50px padding, box-shadow 0 0 10px rgba(0,0,0,.5). Same title
   spec: 39px/600 primary-blue. Same body: 18px/400 black,
   line-height 27px.
   Mobile (<=767): photo full-width behind (aspect-driven height),
   card overlaps upward with negative margin-top -- matches source's
   own responsive pattern (verified at 375). */
.about-team-section{background:#F1F1F1;padding:0 0 100px;overflow:hidden}
.about-team-inner{max-width:1200px;margin:0 auto;padding:0 30px;display:flex;align-items:center;gap:0;position:relative}
.about-team-card{flex:0 0 auto;width:700px;background:#fff;border-radius:35px;padding:50px;box-shadow:0 0 10px rgba(0,0,0,.5);position:relative;z-index:1;margin-right:-80px}
.about-team-title{font-size:39px;font-weight:600;line-height:39px;color:var(--primary);text-align:left;margin:0 0 20px}
.about-team-body{font-size:18px;font-weight:400;line-height:27px;color:#000;text-align:left;margin:0 0 20px}
.about-team-body:last-child{margin-bottom:0}
.about-team-photo{flex:0 0 auto;width:576px;height:478px;background-size:cover;background-position:center;position:relative;z-index:0}
@media (max-width:1200px){
  .about-team-inner{padding:0 20px}
  .about-team-card{width:auto;flex:1}
  .about-team-photo{width:50%;height:auto;aspect-ratio:576/478}
}
@media (max-width:900px){
  .about-team-card{padding:40px;margin-right:-60px}
  .about-team-photo{width:45%}
}
@media (max-width:767px){
  .about-team-section{padding:0 0 40px}
  .about-team-inner{flex-direction:column-reverse;padding:0;gap:0;align-items:stretch}
  .about-team-card{width:auto;margin:-60px 20px 0;padding:40px 30px}
  .about-team-photo{width:100%;height:296px;aspect-ratio:auto}
  .about-team-title{font-size:32px;line-height:34px}
}

/* Popular Areas -- asymmetric mosaic, measured live on source (2026-08-12):
   4-col grid, 300px rows, 20px gap, ~10px side margin (edge-to-edge, not
   wrapped in the standard .wrap container -- confirmed by measuring first
   tile at left:10 on a 1440 viewport, total mosaic width ~1420px). No
   border-radius, no hover-lift transform (source is static), dark 26%
   overlay (not a gradient). Labels: 30px/600/white/center. Same section
   title style as Featured Properties (40px/300/black). No "Explore by
   neighbourhood" subtitle -- source has no subtitle here. */
.popular-areas-section{padding:64px 0}
.popular-areas-section .section-title h2{font-size:40px;font-weight:300;color:#000}
.popular-areas{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-template-rows:300px 300px;
  gap:20px;
  padding:0 10px;
}
.area-card{
  position:relative; overflow:hidden;
  background-color:var(--primary-dark); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.area-card::before{
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,.26);
}
.area-card h3{
  position:relative; z-index:1; color:#fff; font-size:30px; font-weight:600;
  text-align:center; padding:0 20px; margin:0;
}
.area-card[data-slug="chaweng-noi"]{ grid-column:1; grid-row:1/3; }
.area-card[data-slug="lamai"]{ grid-column:2; grid-row:1; }
.area-card[data-slug="plai-leam-choeng-mon"]{ grid-column:3/5; grid-row:1; }
.area-card[data-slug="bo-phut-fishermens-village"]{ grid-column:2/4; grid-row:2; }
.area-card[data-slug="maenam"]{ grid-column:4; grid-row:2; }
@media (max-width:768px){
  .popular-areas{ grid-template-columns:1fr; grid-template-rows:auto; padding:0 10px; }
  .area-card{ grid-column:auto !important; grid-row:auto !important; height:300px; }
}

/* Build Your Own — Choose Your Land / Choose Your Villa showcase */
/* Uniform BYO card heights. Measured cause (2026-08-01): the photos were
   already uniform at 190px each -- the unevenness was text, not image aspect
   ratio. "Amazing Development Opportunity In Prime Location" wraps to a
   3-line title (60px) + 2-line location (48px), vs 1-2 line titles (20-40px)
   and 1-line locations (24px) elsewhere, so grid row 1 sized to 485px while
   row 2 sized to 441px. Reserving the worst-case title/location height makes
   every card body identical, so all rows match. Only the 5-card land grid
   needs it (the 2 villa cards already have identical 1-line text); the flex
   rules pin Details to the bottom as a safety net if a longer title ever
   appears. Scoped to .byo-cards so archive/home card grids are untouched. */
/* BYO "Our Concept" / "The additional advantage?" section leads:
   measured live on source (2026-08-12), these are <strong> elements
   inside paragraphs -- 18px/700/black, centered -- NOT h2 headings
   in their own right. Was rendered as .section-title h2 which showed
   as ~40px+ colored. Now inline-strong-in-paragraph matching source. */
.byo-content p{margin:0 0 14px;font-size:1.2rem}
.byo-lede-strong{display:inline-block;font-size:22px;font-weight:700;color:#000;margin-top:16px}

/* BYO Choose Your Land / Choose Your Villa: source uses two
   side-by-side sections at every breakpoint down to mobile.
   H2 headings always sit next to each other at the same y.
   Inside each section the cards form their own grid:
     Desktop (>=1024): 1 card per row (5 lands stacked in LEFT,
                       2 villas stacked in RIGHT)
     Tablet (<=1023):  2 cards per row inside each section
                       (verified live at 1024 + 768: land cards
                       at 174px width in 2-col, villa cards same)
   Mobile (<=600): finally collapses to a single flowing column
     with lands stacked, then villas stacked. */
.byo-choose{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1200px;margin:40px auto 0;padding-bottom:110px;align-items:start}
.byo-column-title{text-align:left;margin-bottom:24px}
.byo-column-title h2{font-size:40px;font-weight:400;color:#000;margin:0}
/* Source: every BYO card is height 498, Details sits 10px above the
   card bottom (measured live 2026-08-13). Enforce same-height rows via
   min-height on the card; .p-card__body gets flex:1 so it grows and
   pushes the Details button to the bottom regardless of content. */
.byo-column-cards{display:flex;flex-direction:column;gap:24px;align-items:stretch}
.byo-column-cards .p-card{display:flex;flex-direction:column;min-height:498px}
.byo-column-cards .p-card__body{display:flex;flex-direction:column;flex:1 1 auto}
/* Batch 2b: BYO font overrides removed — typography now comes from the
   shared .p-card__* rules so Properties and BYO measure identically
   (title 30 / price 45 / loc 18 / stats 18 / tag 14). Only the BYO
   padding tweaks from Batch 2 remain. */
.byo-column-cards .p-card__body{padding:9px 10px}
.byo-column-cards .p-card__stats span{padding:6px 11px}
@media (max-width:1023px){
  .byo-choose{gap:20px}
  .byo-column-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
  .byo-column-cards .p-card{min-height:0;height:100%}
  .byo-column-title h2{font-size:28px}
}
@media (max-width:600px){
  .byo-choose{grid-template-columns:1fr;gap:32px}
  .byo-column-cards{display:flex;flex-direction:column;gap:24px}
  .byo-column-cards .p-card{min-height:0}
  .byo-column-title h2{font-size:40px}
}
@media (max-width:768px){
  .byo-cards{grid-template-columns:1fr}
  .byo-cards > *{grid-column:auto !important}
}

/* Blog */
/* Blog archive -- measured live on source (2026-08-12):
   3-column grid at 1440, cards are borderless/shadowless (transparent
   plain), 240px image height, title 21px/600 primary-blue, excerpt
   14px/400 grey #777. */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-bottom:110px}
.blog-card{border:none;border-radius:25px;overflow:hidden;background:#fff;color:inherit;display:block;box-shadow:0 0 10px rgba(0,0,0,.15)}
.blog-card img{display:block;width:100%;height:240px;object-fit:cover;border-radius:0}
.blog-card__body{padding:20px 22px 24px}
.blog-card__body h3{font-size:21px;font-weight:600;color:var(--primary);line-height:1.3;margin:0 0 10px}
.blog-card__body p{font-size:14px;font-weight:400;color:#777;line-height:1.5;margin:0}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr}}

/* Blog post -- measured live on source (2026-08-12):
   Full-width primary-blue hero (506px tall) with title on LEFT
   (45px/300 white, at top ~236, left 160) and image on RIGHT
   (~322x426, radius 25px). Below hero: 2-col grid with article
   body on LEFT + sidebar on RIGHT containing 'Share:' (h2 18/300
   navy-text) + share icons + 'More Articles' list of related posts. */
.post-hero{background:var(--primary);color:#fff;overflow:hidden}
.post-hero-inner{
  min-height:506px; display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:60px; padding:60px 0;
}
.post-hero-title{font-size:45px;font-weight:300;line-height:1.15;color:#fff;text-align:left;margin:0}
.post-hero-img{flex:0 0 auto}
.post-hero-img img{width:322px;height:426px;object-fit:cover;border-radius:25px;display:block}
.post-section{padding-top:48px !important;padding-bottom:64px}
.post-grid{display:grid;grid-template-columns:1fr 280px;gap:48px;align-items:start}
.post-body{min-width:0}
.post-body p{margin:0 0 16px;color:var(--text);line-height:1.7}
.post-body h2{font-size:22px;font-weight:600;color:var(--primary);margin:24px 0 12px}
.post-body h3{font-size:18px;font-weight:600;color:var(--primary);margin:20px 0 10px}
.post-sidebar{position:sticky;top:24px}
.post-side-heading{font-size:18px;font-weight:300;color:#16163F;margin:0 0 12px}
.post-share-block{margin-bottom:32px}
.post-share-block .post-share{display:flex;gap:10px;align-items:center}
.post-share-block .post-share span{display:none}
.post-share-block .post-share a{display:flex;width:32px;height:32px;align-items:center;justify-content:center;color:var(--primary)}
.post-share-block .post-share svg{width:24px;height:24px}
.post-more-block .post-more-list{display:flex;flex-direction:column;gap:16px}
.post-more-item{display:flex;gap:12px;align-items:flex-start;color:inherit}
.post-more-item img{width:100px;height:70px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.post-more-item h3{font-size:14px;font-weight:400;color:var(--text);margin:0;line-height:1.4}
.post-more-item:hover h3{color:var(--primary)}

@media (max-width:900px){
  .post-hero-inner{grid-template-columns:1fr;gap:32px;padding:40px 0;min-height:0}
  .post-hero-img img{width:260px;height:340px;margin:0 auto}
  .post-hero-title{font-size:32px;text-align:center}
  .post-grid{grid-template-columns:1fr;gap:32px}
  .post-sidebar{position:static}
}
.post-share{display:flex;gap:14px;align-items:center;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:32px 0}
.post-share span{color:var(--text-light);font-size:.9rem}
.post-share a{color:var(--text-light);display:flex;transition:color .15s}
.post-share a:hover,.post-share a:focus-visible{color:var(--primary)}

/* Footer */
/* Footer -- measured live on source (2026-08-12).
   Trustindex badge, Google Reviews badge, and copyright bar removed
   per Guy's brief (all deliberate deviations from source: two
   removed as marketing artifacts of the WP site, copyright bar was
   invented by the migration and doesn't exist on source).
   Bg: #5271FF (--primary). 3 flex columns (Contact / Site Map /
   Send Us A Message), 20px gap, 50px vertical padding, no
   copyright/legal bar underneath. Headings: 28px/600/white,
   sentence-case ("Contact", "Site Map", "Send Us A Message" --
   textTransform:none). Site Map links: uppercase 18px/400 white
   list. Form fields: same white pill spec as the guide form
   (r25px, 40px h, white bg, black 15px), Send button r100px BLACK
   (not primary) matching source. Contact column has phone + email
   text + the site diamond+wordmark logo image (logo-01, filter
   brightness+contrast to force white on the blue bg). */
.site-footer{background:var(--primary);color:#fff;padding:0;margin-top:0}
.footer-inner{max-width:1400px;margin:0 auto;padding:50px 20px;display:flex;gap:20px;align-items:flex-start}
.footer-col{flex:1;min-width:0}
.footer-col--map{flex:1.2}
.footer-col--form{flex:1.2}
.footer-col h3{color:#fff;font-size:28px;font-weight:600;line-height:28px;margin:0 0 20px}
.footer-col p{margin:0 0 8px;color:#fff;font-size:16px}
.footer-contact-line{display:flex;align-items:center;gap:10px}
.footer-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;flex:0 0 auto}
.footer-col a{color:#fff}
.footer-col a:hover{color:#fff;opacity:.85}
.footer-logo-img{width:113px;height:113px;margin:20px 0 0;filter:brightness(5) contrast(5) saturate(2)}

/* Batch 2: Contact column heading 1.5x (36->54px), body 1.4x (21->29px),
   icons 1.4x to match. Site Map + Send Us A Message columns deliberately
   untouched — the size gap IS the point (Yam). */
.footer-col--contact h3{font-size:45px;line-height:45px;margin:0 0 26px}
.footer-col--contact p{font-size:25px}
.footer-col--contact .footer-icon{width:37px;height:37px}
.footer-col--contact .footer-icon svg{width:21px;height:21px}

/* Trustindex Google Reviews badge -- static HTML replica of source's
   Trustindex WordPress plugin widget. Colored Google G icon on the
   left, 5 yellow stars + 5.0 rating, "Top Rated Service" title,
   small "verified by Trustindex" line with an ⓘ info glyph. */
.footer-trustindex{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#111;padding:10px 14px;border-radius:12px;margin-top:16px;max-width:260px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.footer-trustindex-icon{display:inline-flex;flex:0 0 auto}
.footer-trustindex-body{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.footer-trustindex-stars{display:flex;align-items:center;gap:2px}
.footer-trustindex-stars svg{display:block}
.footer-trustindex-rating{margin-left:6px;font-size:14px;font-weight:600;color:#111}
.footer-trustindex-title{font-size:14px;font-weight:600;color:#111}
.footer-trustindex-verified{font-size:11px;color:#666;display:flex;align-items:center;gap:4px}
.footer-trustindex-info{font-size:12px;color:#999}

.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:0 0 10px}
.footer-links li a{color:#fff;text-decoration:none;font-size:18px;font-weight:400;line-height:1.4}
.footer-links li a span{color:#fff}
.footer-links li a:hover span{opacity:.85}

.footer-form{display:flex;flex-direction:column;gap:8px}
.footer-form input,.footer-form textarea{
  width:100%; padding:8px 16px; height:40px; border:none; border-radius:25px;
  background:#fff; color:#000; font-family:inherit; font-size:15px;
}
.footer-form textarea{height:94px;padding:8px 16px;resize:vertical}
.footer-form input::placeholder,.footer-form textarea::placeholder{color:#000;opacity:.6}
.footer-send-btn{
  height:40px; padding:0 24px; border:none; border-radius:100px;
  background:#000; color:#fff; font-family:inherit; font-size:15px; font-weight:600;
  cursor:pointer; align-self:stretch;
}
.footer-send-btn:hover{background:#1a1a1a}

/* Source keeps the 3-column footer layout down through 768 (verified
   via a live measurement at 768), stacking to a single centered column
   only on mobile portrait (<=600). */
@media (max-width:600px){
  .footer-inner{flex-direction:column;align-items:center;text-align:center;gap:32px}
  .footer-col{width:100%;max-width:500px}
  .footer-form{align-items:stretch}
  .footer-logo-img{margin-left:auto;margin-right:auto}
}

/* FAB */
.fab-container{position:fixed;bottom:24px;left:24px;z-index:2147483000;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.fab{pointer-events:auto;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s}
.fab:hover{transform:scale(1.1);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.fab:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fab.wa{background:#25D366}
.fab.call{background:var(--primary)}
.fab svg{width:28px;height:28px}
@media (max-width:480px){.fab{width:48px;height:48px}.fab svg{width:24px;height:24px}}
/* lifted above .mobile-contact-bar (50px tall, fixed to the very bottom) so
   the two fixed-position elements don't overlap on the breakpoints where
   both are visible (<=1024) */
@media (max-width:1024px){.fab-container{bottom:74px}}
@media print{.fab-container{display:none}}

/* Mobile/tablet-only fixed bottom contact bar -- measured from source's
   global footer widget: fixed, bottom:0, bg var(--primary), 4 white icons,
   full-width <768, narrower centered pill 768-1024, hidden >=1025 (verified
   via display:none at 1440 on source). */
.mobile-contact-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:2147482999;
  background:var(--primary); height:50px;
  align-items:center; justify-content:center; gap:32px;
}
.mobile-contact-bar a{ color:#fff; display:flex; align-items:center; justify-content:center; width:24px; height:24px; }
.mobile-contact-bar svg{ width:20px; height:20px; fill:#fff; }
.mobile-contact-bar svg path{ fill:#fff; }
@media (max-width:1024px){ .mobile-contact-bar{ display:flex; } }
@media (max-width:767px){ .mobile-contact-bar{ justify-content:space-evenly; padding:0 20px; } }
@media print{ .mobile-contact-bar{ display:none; } }

/* Misc pages */
.content-page{max-width:820px;margin:0 auto}
.content-page h1{margin-bottom:20px}
.thanks-box{text-align:center;padding:80px 0}

/* Lightbox (gallery images) */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:2147483100;display:none;align-items:center;justify-content:center}
.lb-overlay.open{display:flex}
.lb-image{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:4px}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.15);color:#fff;border:none;width:48px;height:48px;border-radius:50%;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.3)}
.lb-close{top:24px;right:24px}
.lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lb-next{right:24px;top:50%;transform:translateY(-50%)}
.lb-counter{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.5);padding:6px 14px;border-radius:20px;font-size:.9rem}
@media(max-width:600px){.lb-close,.lb-prev,.lb-next{width:40px;height:40px;font-size:22px}.lb-close{top:12px;right:12px}.lb-prev{left:12px}.lb-next{right:12px}}

/* Entrance animations -- measured live on source (2026-08-12).
   Elementor uses waypoint-based JS to add a class the moment an
   element scrolls into view. Keyframes/duration/easing here match
   source exactly:
     fadeInDown: opacity 0->1, translate3d(0,-100%,0) -> none
     fadeInUp:   opacity 0->1, translate3d(0, 100%,0) -> none
     fadeIn:     opacity 0->1 (no transform)
   All: 1.25s ease, iteration 1, fill mode none. The 'slow' variant
   used on Why + About-team cards runs at 2s.
   Reduce-motion: matches source's own rule -- disables ALL
   animations when the user has requested it. */
@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}100%{opacity:1;transform:none}}
@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}100%{opacity:1;transform:none}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.anim-init{opacity:0}
.anim-init.anim-in{animation:1.25s ease both}
.anim-init.anim-in.anim-slow{animation-duration:2s}
.anim-fadeInDown.anim-in{animation-name:fadeInDown}
.anim-fadeInUp.anim-in{animation-name:fadeInUp}
.anim-fadeIn.anim-in{animation-name:fadeIn}
@media (prefers-reduced-motion: reduce){
  .anim-init{opacity:1 !important;animation:none !important;transform:none !important}
}