:root{
    --navy-deepest:#050d24;
    --navy-deep:#0a1f44;
    --navy:#13294b;
    --navy-soft:#1e3a6f;
    --navy-mist:#e8edf5;
    --gold:#c9a961;
    --gold-soft:#d4b87a;
    --ivory:#f7f4ec;
    --paper:#fbfaf6;
    --ink:#0c1426;
    --ink-soft:#3a4358;
    --line:rgba(10,31,68,0.12);
    --line-soft:rgba(10,31,68,0.06);
    --shadow-sm:0 2px 8px rgba(10,31,68,0.06);
    --shadow:0 12px 40px rgba(10,31,68,0.10);
    --shadow-lg:0 24px 80px rgba(10,31,68,0.18);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    font-family:'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.75;
    font-weight:400;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  ::selection{background:var(--navy-deep);color:var(--ivory)}
  img{max-width:100%;height:auto;display:block}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit}

  .display{font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:400;letter-spacing:-0.01em}
  .italic{font-family:'Cormorant Garamond', serif;font-style:italic;font-weight:400}
  .eyebrow{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-style:italic;font-weight:400;
    letter-spacing:0.02em;color:var(--gold);
    font-size:clamp(14px, 2.5vw, 18px);
  }

  /* ───── PAGE SWITCHER ───── */
  .page{display:none}
  .page.active{display:block;animation:pageIn .6s cubic-bezier(.2,.8,.2,1)}
  @keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}



  /* ───── NAV MENU ───── */
  .nav-menu{
    display:none;
    align-items:center;
    gap:clamp(20px, 2.5vw, 36px);
    list-style:none;
    margin:0;padding:0;
  }
  .nav-menu li{margin:0}
  .nav-menu a{
    font-family:'Sarabun', sans-serif;
    font-size:13px;
    font-weight:500;
    color:var(--ink-soft);
    letter-spacing:0.04em;
    transition:color .3s ease;
    position:relative;
    padding:6px 0;
    cursor:pointer;
    display:inline-block;
  }
  .nav-menu a::after{
    content:"";
    position:absolute;
    bottom:0;left:50%;
    width:0;height:1px;
    background:var(--gold);
    transition:width .35s cubic-bezier(.2,.8,.2,1), left .35s cubic-bezier(.2,.8,.2,1);
  }
  .nav-menu a:hover{color:var(--navy-deep)}
  .nav-menu a:hover::after{width:100%;left:0}
  .nav-menu a.active{color:var(--navy-deep)}
  .nav-menu a.active::after{width:100%;left:0}
  .nav-menu .num{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    color:var(--gold);
    margin-right:4px;
    font-size:14px;
  }

  /* Show menu only on detail page on tablet+ */
  body.detail .nav-menu{display:none}
  @media (min-width:1024px){
    body.detail .nav-menu{display:flex}
    body.detail .nav-meta{display:none}
  }

  /* Mobile menu toggle */
  .menu-toggle{
    display:none;
    background:none;border:none;cursor:pointer;
    padding:8px;
    color:var(--navy-deep);
    width:40px;height:40px;
    align-items:center;justify-content:center;
  }
  .menu-toggle svg{width:22px;height:22px;stroke-width:1.5}
  body.detail .menu-toggle{display:none}
  @media (max-width:1023px){
    body.detail .menu-toggle{display:flex}
  }

  /* Mobile drawer */
  .mobile-drawer{
    position:fixed;
    top:0;right:0;bottom:0;
    width:min(320px, 85vw);
    background:var(--paper);
    box-shadow:-20px 0 60px rgba(10,31,68,0.15);
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
    z-index:150;
    padding:80px 32px 32px;
    display:flex;flex-direction:column;
    overflow-y:auto;
  }
  .mobile-drawer.open{transform:translateX(0)}
  .mobile-drawer ul{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;
    gap:0;
  }
  .mobile-drawer li{
    border-bottom:1px solid var(--line);
  }
  .mobile-drawer a{
    display:flex;align-items:center;gap:12px;
    padding:18px 0;
    font-size:15px;
    color:var(--navy-deep);
    font-weight:500;
    cursor:pointer;
  }
  .mobile-drawer .num{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    color:var(--gold);
    font-size:18px;
    min-width:24px;
  }
  .drawer-close{
    position:absolute;top:24px;right:28px;
    background:none;border:none;cursor:pointer;
    width:36px;height:36px;
    display:grid;place-items:center;
    color:var(--navy-deep);
    font-size:24px;
  }
  .drawer-overlay{
    position:fixed;inset:0;
    background:rgba(5,13,36,0.5);
    backdrop-filter:blur(4px);
    z-index:140;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  .drawer-overlay.open{opacity:1;pointer-events:auto}

  /* ───── SUKMART BRAND ───── */
  .sukmart-mark{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    letter-spacing:0.32em;
    color:var(--navy-deep);
    font-size:18px;
    line-height:1;
  }
  .sukmart-mark .dot{
    display:inline-block;
    width:5px;height:5px;
    background:var(--gold);
    border-radius:50%;
    margin:0 6px 3px 0;
    vertical-align:middle;
  }
  .sukmart-tag{
    font-family:'Sarabun', sans-serif;
    font-size:9px;
    letter-spacing:0.36em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:4px;
    font-weight:500;
  }
  .sukmart-signature{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    margin-top:64px;
    padding-top:32px;
    border-top:1px solid var(--line);
    min-width:200px;
  }
  .sukmart-signature .label{
    font-size:10px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-weight:500;
  }
  .sukmart-signature .name{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    letter-spacing:0.4em;
    font-size:24px;
    color:var(--navy-deep);
    padding-left:0.4em;
  }
  .sukmart-signature .name em{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    color:var(--gold);
    font-weight:400;
    letter-spacing:0;
    margin-right:8px;
  }
  /* Footer SUKMART variant */
  .footer-sukmart{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    letter-spacing:0.4em;
    font-size:22px;
    color:var(--ivory) !important;
    padding-left:0.4em;
    margin-bottom:6px;
    display:inline-block;
  }
  .footer-sukmart em{
    font-style:italic;
    color:var(--gold) !important;
    font-weight:400;
    letter-spacing:0;
    margin-right:8px;
  }

  /* ───── NAV ───── */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    background:rgba(251,250,246,0.78);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-inner{
    max-width:1400px;margin:0 auto;
    padding:18px clamp(20px, 4vw, 56px);
    display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  .brand{display:flex;align-items:center;gap:12px;cursor:pointer;background:none;border:none;padding:0}
  .brand-mark{
    width:36px;height:36px;
    border:1.5px solid var(--navy-deep);
    border-radius:50%;
    display:grid;place-items:center;
    position:relative;
  }
  .brand-mark::before{content:"";width:14px;height:14px;background:var(--navy-deep);border-radius:50%}
  .brand-name{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;
    font-size:22px;font-weight:500;
    color:var(--navy-deep);letter-spacing:0.04em;
  }
  .brand-name span{font-style:italic;color:var(--gold)}
  .nav-meta{
    font-size:12px;letter-spacing:0.24em;text-transform:uppercase;
    color:var(--ink-soft);display:none;
  }
  @media (min-width:880px){.nav-meta{display:block}}
  .nav-back{
    display:none;align-items:center;gap:10px;
    background:none;border:none;cursor:pointer;
    font-size:13px;letter-spacing:0.06em;color:var(--navy-deep);
    font-weight:500;
  }
  .nav-back .arr{transition:transform .35s ease}
  .nav-back:hover .arr{transform:translateX(-4px)}
  body.detail .nav-back{display:inline-flex}

  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 28px;
    font-family:'Sarabun', sans-serif;
    font-size:14px;font-weight:500;letter-spacing:0.06em;
    cursor:pointer;border:none;border-radius:2px;
    transition:all .35s cubic-bezier(.2,.8,.2,1);
  }
  .btn-primary{background:var(--navy-deep);color:var(--ivory)}
  .btn-primary:hover{background:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow)}
  .btn-ghost{background:transparent;color:var(--navy-deep);border:1px solid var(--navy-deep)}
  .btn-ghost:hover{background:var(--navy-deep);color:var(--ivory)}
  .btn .arr{transition:transform .35s ease}
  .btn:hover .arr{transform:translateX(4px)}

  /* ═══════════════════════════════════════════════════════════
     PAGE 1 — PORTFOLIO LANDING
     ═══════════════════════════════════════════════════════════ */
  .top{
    min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;
    background:
      radial-gradient(ellipse at top right, rgba(201,169,97,0.08), transparent 60%),
      linear-gradient(180deg, var(--paper) 0%, var(--ivory) 100%);
    position:relative;overflow:hidden;
    padding-top:80px;
  }
  .top::before{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size:80px 80px;opacity:0.4;pointer-events:none;
    mask-image:linear-gradient(135deg, transparent 30%, rgba(0,0,0,0.5) 80%);
    -webkit-mask-image:linear-gradient(135deg, transparent 30%, rgba(0,0,0,0.5) 80%);
  }
  .hero-wrap{
    flex:1;display:grid;place-items:center;
    padding:60px clamp(20px,4vw,56px) 80px;
    position:relative;z-index:2;
  }
  .hero-portfolio{max-width:1100px;text-align:center}
  .hero-portfolio .eyebrow{
    display:inline-flex;align-items:center;gap:14px;margin-bottom:32px;
  }
  .hero-portfolio .eyebrow::before,
  .hero-portfolio .eyebrow::after{content:"";width:48px;height:1px;background:var(--gold)}
  h1.portfolio-title{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:400;
    font-size:clamp(44px, 9vw, 120px);
    line-height:0.96;letter-spacing:-0.025em;
    color:var(--navy-deep);margin-bottom:32px;
  }
  h1.portfolio-title em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-weight:300}
  .lead{
    font-size:clamp(16px, 2vw, 19px);
    color:var(--ink-soft);max-width:640px;
    margin:0 auto 56px;line-height:1.85;
  }
  .stats{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:0;
    max-width:780px;margin:0 auto;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .stat{padding:28px 16px;border-right:1px solid var(--line)}
  .stat:last-child{border-right:none}
  .stat .v{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;
    font-size:clamp(28px, 4vw, 44px);font-weight:400;
    color:var(--navy-deep);line-height:1;margin-bottom:8px;
  }
  .stat .v sup{font-size:0.5em;color:var(--gold);font-style:italic;font-family:'Cormorant Garamond',serif}
  .stat .l{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-soft)}
  .scroll-cue{
    margin-top:64px;display:inline-flex;align-items:center;gap:12px;
    font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--navy-deep);
  }
  .scroll-cue .line{
    display:block;width:48px;height:1px;background:var(--navy-deep);
    position:relative;overflow:hidden;
  }
  .scroll-cue .line::after{
    content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;
    background:var(--gold);animation:sl 2.4s ease-in-out infinite;
  }
  @keyframes sl{0%{left:-100%}50%{left:100%}100%{left:100%}}

  .coll{padding:clamp(80px, 12vw, 160px) clamp(20px,4vw,56px)}
  .container{max-width:1400px;margin:0 auto}
  .coll-head{
    display:grid;grid-template-columns:1fr;gap:32px;
    margin-bottom:clamp(48px, 8vw, 96px);
  }
  @media (min-width:880px){
    .coll-head{grid-template-columns:auto 1fr;gap:80px;align-items:end}
  }
  .section-num{
    display:flex;align-items:center;gap:14px;
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;
    font-style:italic;font-size:18px;color:var(--gold);
  }
  .section-num::before{content:"";width:32px;height:1px;background:var(--gold)}
  .coll-title{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:400;
    font-size:clamp(34px, 5.5vw, 64px);line-height:1.05;
    color:var(--navy-deep);letter-spacing:-0.015em;
  }
  .coll-title em{font-family:'Cormorant Garamond',serif;color:var(--gold);font-weight:300}

  .props{display:grid;grid-template-columns:1fr;gap:32px}
  @media (min-width:768px){.props{grid-template-columns:repeat(2, 1fr);gap:32px}}
  @media (min-width:1200px){.props{grid-template-columns:repeat(2, 1fr);gap:40px}}

  .card{
    background:var(--paper);border:1px solid var(--line);border-radius:4px;
    overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
    box-shadow:0 2px 8px rgba(10,31,68,0.04);
    text-align:left;font-family:inherit;color:inherit;
  position:relative;}
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
  .card-img{aspect-ratio:16/10;overflow:hidden;position:relative}
  .card-img img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 1s cubic-bezier(.2,.8,.2,1);
  }
  .card:hover .card-img img{transform:scale(1.06)}
  .card-img::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, transparent 60%, rgba(5,13,36,0.4));
    pointer-events:none;
  }
  .card-tag{
    position:absolute;top:20px;left:20px;
    background:var(--paper);color:var(--navy-deep);
    font-size:10px;letter-spacing:0.22em;text-transform:uppercase;font-weight:600;
    padding:8px 14px;border-radius:2px;z-index:2;
  }
  .card-area{
    position:absolute;bottom:20px;left:20px;
    color:var(--ivory);font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;
    font-weight:400;font-size:32px;z-index:2;line-height:1;
  }
  .card-area em{font-family:'Cormorant Garamond',serif;color:var(--gold-soft);font-style:italic;font-size:0.55em}
  .card-body{
    padding:32px clamp(24px, 3vw, 36px);
    display:flex;flex-direction:column;gap:18px;flex:1;
  }
  .card-loc{
    font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
    color:var(--ink-soft);font-weight:500;
  }
  .card-title{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:400;
    font-size:clamp(24px, 2.6vw, 30px);line-height:1.2;color:var(--navy-deep);
  }
  .card-title em{font-family:'Cormorant Garamond',serif;color:var(--gold);font-style:italic}
  .card-desc{font-size:15px;color:var(--ink-soft);line-height:1.75}
  .card-meta{
    display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;
    margin-top:auto;padding-top:20px;border-top:1px solid var(--line);
  }
  .card-meta-i .ml{
    font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:4px;
  }
  .card-meta-i .mv{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;
    font-size:18px;font-weight:400;color:var(--navy-deep);
  }
  .card-cta{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:20px clamp(24px, 3vw, 36px);
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, transparent, rgba(232,237,245,0.3));
    color:var(--navy-deep);
    font-size:13px;letter-spacing:0.08em;font-weight:500;
    transition:background .35s ease, color .35s ease;
  }
  .card:hover .card-cta{background:var(--navy-deep);color:var(--ivory)}
  .card-cta .arr{transition:transform .35s ease;font-size:16px}
  .card:hover .card-cta .arr{transform:translateX(4px)}

  .card-soon{
    background:transparent;border:1.5px dashed var(--line);
    display:grid;place-items:center;text-align:center;
    padding:80px 32px;color:var(--ink-soft);
    min-height:100%;cursor:default;
  }
  .card-soon:hover{transform:none;box-shadow:none}
  .card-soon-mark{
    width:56px;height:56px;border:1.5px solid var(--line);border-radius:50%;
    display:grid;place-items:center;margin:0 auto 20px;
    color:var(--gold);font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;
    font-size:28px;font-style:italic;
  }
  .card-soon h3{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:400;font-size:24px;
    color:var(--navy-deep);margin-bottom:10px;
  }
  .card-soon h3 em{font-family:'Cormorant Garamond',serif;color:var(--gold);font-style:italic}
  .card-soon p{font-size:14px;color:var(--ink-soft);max-width:280px;margin:0 auto}

  /* ═══════════════════════════════════════════════════════════
     PAGE 2 — PROPERTY DETAIL
     ═══════════════════════════════════════════════════════════ */
  .hero-detail{
    position:relative;min-height:100vh;min-height:100svh;
    display:grid;grid-template-rows:1fr auto;
    padding:120px clamp(20px,4vw,56px) 60px;
    background:
      radial-gradient(ellipse at top right, rgba(201,169,97,0.08), transparent 60%),
      linear-gradient(180deg, var(--paper) 0%, var(--ivory) 100%);
    overflow:hidden;
  }
  .hero-detail::before{
    content:"";position:absolute;top:0;right:0;width:50%;height:100%;
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size:80px 80px;opacity:0.5;pointer-events:none;
    mask-image:linear-gradient(225deg, rgba(0,0,0,0.4), transparent 60%);
    -webkit-mask-image:linear-gradient(225deg, rgba(0,0,0,0.4), transparent 60%);
  }
  .hero-content{
    max-width:1400px;width:100%;margin:0 auto;align-self:center;
    position:relative;z-index:2;
    display:grid;grid-template-columns:1fr;gap:48px;align-items:center;
  }
  @media (min-width:1024px){.hero-content{grid-template-columns:1.1fr 1fr;gap:72px}}
  .hero-text{display:flex;flex-direction:column;gap:28px}
  .hero-eyebrow{display:flex;align-items:center;gap:14px;color:var(--gold)}
  .hero-eyebrow::before{content:"";width:48px;height:1px;background:var(--gold)}
  h1.hero-title{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:400;
    font-size:clamp(40px, 7vw, 92px);line-height:0.98;
    letter-spacing:-0.02em;color:var(--navy-deep);
  }
  h1.hero-title .ital{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;color:var(--gold)}
  .hero-sub{
    font-size:clamp(16px,2vw,19px);color:var(--ink-soft);
    max-width:540px;font-weight:300;line-height:1.75;
  }
  .hero-stats{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:0;
    margin-top:8px;border-top:1px solid var(--line);
  }
  .hero-stat{padding:20px 16px 0 0;border-right:1px solid var(--line)}
  .hero-stat:last-child{border-right:none;padding-left:16px;padding-right:0}
  .hero-stat:nth-child(2){padding-left:16px}
  .hero-stat .v{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;
    font-size:clamp(26px,4vw,38px);font-weight:400;
    color:var(--navy-deep);line-height:1;margin-bottom:6px;
  }
  .hero-stat .v sup{font-size:0.5em;color:var(--gold);font-style:italic;font-family:'Cormorant Garamond',serif}
  .hero-stat .l{
    font-size:11px;text-transform:uppercase;
    letter-spacing:0.2em;color:var(--ink-soft);
  }
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

  .hero-img{
    position:relative;border-radius:4px;overflow:hidden;
    box-shadow:var(--shadow-lg);aspect-ratio:16/10;
  }
  .hero-img img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
  }
  .hero-img:hover img{transform:scale(1.04)}
  .hero-img::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, transparent 60%, rgba(5,13,36,0.35));
    pointer-events:none;
  }
  .hero-img-tag{
    position:absolute;bottom:20px;left:20px;z-index:2;
    color:var(--ivory);font-family:'Cormorant Garamond', serif;font-style:italic;
    font-size:18px;letter-spacing:0.02em;
  }
  .hero-foot{
    max-width:1400px;width:100%;margin:60px auto 0;
    display:flex;justify-content:space-between;align-items:center;
    gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);
    position:relative;z-index:2;
  }
  .hero-foot-l{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-soft)}

  section{position:relative;padding:clamp(80px, 12vw, 160px) clamp(20px,4vw,56px)}
  .section-head{
    display:grid;grid-template-columns:1fr;gap:24px;
    margin-bottom:clamp(48px, 8vw, 96px);
  }
  @media (min-width:880px){
    .section-head{grid-template-columns:auto 1fr;gap:64px;align-items:end}
  }
  .section-title{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:400;
    font-size:clamp(34px, 5.5vw, 64px);line-height:1.05;
    color:var(--navy-deep);letter-spacing:-0.015em;
  }
  .section-title em{font-family:'Cormorant Garamond',serif;color:var(--gold);font-weight:300}
  .section-lead{
    font-size:clamp(15px, 1.6vw, 17px);color:var(--ink-soft);
    max-width:520px;line-height:1.8;margin-top:18px;
  }

  .overview{background:var(--paper)}
  .overview-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px, 4vw, 56px);align-items:start}
  @media (min-width:1024px){.overview-grid{grid-template-columns:1fr 1fr;gap:80px}}
  .overview-img{
    border-radius:4px;overflow:hidden;box-shadow:var(--shadow);
    aspect-ratio:16/9;position:relative;
  }
  .overview-img img{width:100%;height:100%;object-fit:cover}
  .overview-text{display:flex;flex-direction:column;gap:32px}
  .overview-quote{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:300;
    font-size:clamp(22px, 2.6vw, 30px);line-height:1.4;
    color:var(--navy-deep);padding-left:24px;border-left:2px solid var(--gold);
  }
  .overview-quote em{font-family:'Cormorant Garamond',serif;color:var(--gold)}
  .overview-detail{font-size:16px;color:var(--ink-soft);line-height:1.85}

  .specs{
    background:linear-gradient(180deg, var(--ivory) 0%, var(--paper) 100%);
    border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  }
  .specs-grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:0;border-top:1px solid var(--line);
  }
  .spec{
    padding:36px 28px;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    display:flex;flex-direction:column;gap:14px;
    transition:background .4s ease;position:relative;
  }
  .spec:hover{background:rgba(255,255,255,0.7)}
  .spec-icon{width:36px;height:36px;color:var(--gold);margin-bottom:4px}
  .spec-icon svg{width:100%;height:100%;stroke-width:1}
  .spec-label{
    font-size:11px;text-transform:uppercase;letter-spacing:0.24em;
    color:var(--ink-soft);font-weight:500;
  }
  .spec-value{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;
    font-size:clamp(22px, 2.4vw, 28px);font-weight:400;
    color:var(--navy-deep);line-height:1.2;
  }
  .spec-note{font-size:13px;color:var(--ink-soft);line-height:1.6}

  .gallery{background:var(--navy-deepest);color:var(--ivory);position:relative;overflow:hidden}
  .gallery::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(ellipse at 20% 0%, rgba(201,169,97,0.10), transparent 50%),
      radial-gradient(ellipse at 80% 100%, rgba(30,58,111,0.4), transparent 60%);
    pointer-events:none;
  }
  .gallery .section-title{color:var(--ivory)}
  .gallery .section-num{color:var(--gold-soft)}
  .gallery .section-num::before{background:var(--gold-soft)}
  .gallery .section-lead{color:rgba(247,244,236,0.7)}
  .gallery-content{position:relative;z-index:2}
  .gallery-grid{display:grid;grid-template-columns:1fr;gap:24px}
  @media (min-width:640px){
    .gallery-grid{
      grid-template-columns:repeat(6, 1fr);
      grid-auto-rows:minmax(180px, auto);gap:20px;
    }
    .g1{grid-column:span 4;grid-row:span 2}
    .g3{grid-column:span 2;grid-row:span 2}
    .g4{grid-column:span 3;grid-row:span 2}
    .g5{grid-column:span 3;grid-row:span 2}
  }
  @media (min-width:1024px){.gallery-grid{grid-auto-rows:minmax(220px, auto)}}
  .g-item{
    position:relative;border-radius:4px;overflow:hidden;
    background:var(--navy);box-shadow:0 20px 60px rgba(0,0,0,0.4);cursor:pointer;
  }
  .g-item img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 1s cubic-bezier(.2,.8,.2,1);
  }
  .g-item:hover img{transform:scale(1.06)}
  .g-item::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, transparent 50%, rgba(5,13,36,0.6));
    opacity:0.7;transition:opacity .4s ease;pointer-events:none;
  }
  .g-item:hover::after{opacity:0.9}
  .g-cap{
    position:absolute;bottom:18px;left:20px;right:20px;z-index:2;
    color:var(--ivory);font-family:'Cormorant Garamond', serif;font-style:italic;
    font-size:16px;letter-spacing:0.02em;opacity:0.95;
  }
  .g-cap small{
    display:block;font-family:'Sarabun', sans-serif;font-style:normal;
    font-size:10px;letter-spacing:0.28em;text-transform:uppercase;
    color:var(--gold-soft);margin-bottom:4px;opacity:0.85;
  }

  .dim{background:var(--paper)}
  .dim-wrap{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
  @media (min-width:1024px){.dim-wrap{grid-template-columns:1.2fr 1fr;gap:80px}}
  .dim-img{border-radius:4px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
  .dim-img img{width:100%;height:auto;display:block}
  .dim-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
  .dim-row{
    display:grid;grid-template-columns:1fr auto;gap:20px;
    align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);
  }
  .dim-row .lbl{font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-soft)}
  .dim-row .val{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;
    font-size:clamp(22px, 2.6vw, 30px);font-weight:400;color:var(--navy-deep);
  }
  .dim-row .val em{font-family:'Cormorant Garamond',serif;color:var(--gold);font-style:italic}

  .loc{
    background:linear-gradient(180deg, var(--paper) 0%, var(--ivory) 100%);
    border-top:1px solid var(--line-soft);
  }
  .loc-grid{display:grid;grid-template-columns:1fr;gap:40px}
  @media (min-width:1024px){.loc-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
  .loc-card{
    background:var(--paper);border:1px solid var(--line);
    padding:clamp(28px, 4vw, 48px);border-radius:4px;box-shadow:var(--shadow-sm);
  }
  .loc-card h3{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:400;
    font-size:clamp(24px, 3vw, 32px);color:var(--navy-deep);
    margin-bottom:24px;line-height:1.2;
  }
  .loc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
  .loc-list li{
    display:grid;grid-template-columns:auto 1fr auto;gap:18px;
    align-items:baseline;padding:18px 0;
    border-bottom:1px dashed var(--line);font-size:15px;color:var(--ink);
  }
  .loc-list li:last-child{border-bottom:none}
  .loc-list .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:8px}
  .loc-list .name{color:var(--ink);font-weight:400}
  .loc-list .dist{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-style:italic;
    font-size:18px;color:var(--navy-deep);font-weight:400;
  }
  .loc-img{
    border-radius:4px;overflow:hidden;
    box-shadow:var(--shadow);aspect-ratio:16/10;
  }
  .loc-img img{width:100%;height:100%;object-fit:cover}
  .map-btn{
    display:inline-flex;align-items:center;gap:10px;margin-top:24px;
    padding:14px 22px;background:var(--navy-deep);color:var(--ivory);
    font-size:13px;letter-spacing:0.06em;font-weight:500;
    border-radius:2px;transition:all .35s ease;
  }
  .map-btn:hover{background:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow)}

  .docs{background:var(--ivory)}
  .docs-row{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
  @media (min-width:1024px){.docs-row{grid-template-columns:1fr 1.2fr;gap:80px}}
  .docs-img{border-radius:4px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper)}
  .docs-img img{width:100%;height:auto;display:block}
  .docs-list{display:flex;flex-direction:column;gap:24px}
  .docs-item{
    display:grid;grid-template-columns:auto 1fr;gap:24px;
    padding-bottom:24px;border-bottom:1px solid var(--line);
  }
  .docs-item:last-child{border-bottom:none;padding-bottom:0}
  .docs-num{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-style:italic;
    font-size:36px;color:var(--gold);font-weight:400;line-height:1;
  }
  .docs-item h4{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:500;
    font-size:22px;color:var(--navy-deep);margin-bottom:8px;
  }
  .docs-item p{font-size:15px;color:var(--ink-soft);line-height:1.7}

  .contact{
    background:var(--navy-deepest);color:var(--ivory);
    position:relative;overflow:hidden;
  }
  .contact::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(circle at 80% 20%, rgba(201,169,97,0.08), transparent 50%),
      radial-gradient(circle at 20% 80%, rgba(30,58,111,0.4), transparent 60%);
    pointer-events:none;
  }
  .contact-content{position:relative;z-index:2;text-align:center;max-width:880px;margin:0 auto}
  .contact .eyebrow{color:var(--gold-soft)}
  .contact h2{
    font-family:'Noto Serif Thai', 'Cormorant Garamond', serif;font-weight:300;
    font-size:clamp(36px, 6vw, 72px);line-height:1.05;
    color:var(--ivory);margin:24px 0 32px;letter-spacing:-0.015em;
  }
  .contact h2 em{font-family:'Cormorant Garamond',serif;color:var(--gold);font-weight:300}
  .contact p{
    font-size:17px;color:rgba(247,244,236,0.75);
    max-width:560px;margin:0 auto 48px;line-height:1.85;
  }
  .contact-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
  .contact .btn-primary{background:var(--gold);color:var(--navy-deepest)}
  .contact .btn-primary:hover{background:var(--gold-soft)}
  .contact .btn-ghost{color:var(--ivory);border-color:rgba(247,244,236,0.4)}
  .contact .btn-ghost:hover{background:var(--ivory);color:var(--navy-deepest)}

  footer{
    background:var(--navy-deepest);color:rgba(247,244,236,0.55);
    padding:48px clamp(20px,4vw,56px) 36px;
    border-top:1px solid rgba(247,244,236,0.1);
    font-size:13px;text-align:center;
  }
  footer .brand-name{color:var(--ivory);margin-bottom:8px;display:inline-block}
  footer p{margin-top:8px;letter-spacing:0.02em}
  footer .fine{
    font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
    margin-top:16px;color:rgba(247,244,236,0.4);
  }

  .reveal{
    opacity:0;transform:translateY(16px);
    transition:opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .reveal.in{opacity:1;transform:translateY(0)}
  /* Mobile: faster + smaller offset to prevent blank-then-pop on fast scroll */
  @media (max-width: 768px){
    .reveal{transform:translateY(8px);transition:opacity .3s ease-out, transform .3s ease-out;}
  }
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  }
  .reveal-delay-1{transition-delay:.1s}
  .reveal-delay-2{transition-delay:.2s}
  .reveal-delay-3{transition-delay:.3s}

  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .scroll-cue .line::after{animation:none}
    *{transition:none !important}
  }

  @media (min-width:768px) and (max-width:1023px){
    .hero-detail{padding-top:140px}
    .specs-grid{grid-template-columns:repeat(2, 1fr)}
  }

  /* Lightbox */
  .lb{
    position:fixed;inset:0;background:rgba(5,13,36,0.96);
    z-index:200;display:none;align-items:center;justify-content:center;
    padding:20px;cursor:zoom-out;backdrop-filter:blur(8px);
  }
  .lb.open{display:flex}
  .lb img{max-width:95vw;max-height:92vh;object-fit:contain;box-shadow:var(--shadow-lg)}
  .lb-close{
    position:absolute;top:24px;right:28px;color:var(--ivory);
    font-size:32px;background:transparent;cursor:pointer;
    width:48px;height:48px;display:grid;place-items:center;
    border:1px solid rgba(247,244,236,0.3);border-radius:50%;
  }

    /* OPERATION SECTION */
    .operation {
      padding: clamp(80px, 12vw, 140px) 0;
      background: var(--ivory);
      border-top: 1px solid rgba(10, 31, 68, 0.06);
    }
    .op-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 60px;
    }
    .op-grid-2 {
      grid-template-columns: repeat(2, 1fr);
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 60px;
    }
    .op-img-block {
      cursor: zoom-in;
      transition: transform 0.4s ease;
    }
    .op-img-block:hover {
      transform: translateY(-4px);
    }
    .op-img-block img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 2px;
      box-shadow: 0 12px 40px rgba(10, 31, 68, 0.12);
    }
    .op-img-cap {
      margin-top: 14px;
      font-size: 12px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--navy);
      opacity: 0.7;
      text-align: center;
    }
    .op-stats {
      max-width: 1100px;
      margin: 0 auto;
      padding: 40px 32px;
      background: #fff;
      border: 1px solid rgba(10, 31, 68, 0.08);
      border-radius: 2px;
      box-shadow: 0 8px 32px rgba(10, 31, 68, 0.04);
    }
    .op-stats-title {
      font-family: var(--font-serif);
      font-size: clamp(20px, 2.4vw, 26px);
      font-weight: 400;
      color: var(--navy);
      margin: 0 0 28px 0;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(10, 31, 68, 0.1);
      text-align: center;
    }
    .op-stats-title em {
      font-family: var(--font-italic);
      font-style: italic;
      color: var(--gold);
      font-size: 0.85em;
      font-weight: 400;
    }
    .op-stats-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
      margin-bottom: 24px;
    }
    .op-cell {
      position: relative;
      padding: 14px 10px;
      background: var(--ivory);
      border: 1px solid rgba(10, 31, 68, 0.06);
      border-radius: 2px;
      text-align: center;
      transition: all 0.3s ease;
    }
    .op-cell:hover {
      border-color: var(--gold);
      transform: translateY(-2px);
    }
    .op-cell-no {
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--navy);
      opacity: 0.55;
      margin-bottom: 6px;
    }
    .op-cell-v {
      font-family: var(--font-serif);
      font-size: 15px;
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
    }
    .op-cell-v em {
      font-family: var(--font-sans);
      font-style: normal;
      font-size: 11px;
      color: var(--navy);
      opacity: 0.55;
      font-weight: 300;
    }
    .op-cell-tag {
      position: absolute;
      top: -7px;
      right: 6px;
      font-size: 8px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      background: var(--gold);
      color: #fff;
      padding: 2px 6px;
      border-radius: 2px;
      font-weight: 500;
    }
    .op-total {
      padding-top: 24px;
      border-top: 1px solid rgba(10, 31, 68, 0.1);
    }
    .op-total-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 12px 0;
      border-bottom: 1px solid rgba(10, 31, 68, 0.04);
      font-size: 14px;
      gap: 16px;
    }
    .op-total-row:last-child { border-bottom: none; }
    .op-total-row > span:first-child {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--navy);
      opacity: 0.6;
      flex-shrink: 0;
    }
    .op-total-row > span:last-child {
      color: var(--navy);
      text-align: right;
      font-family: var(--font-serif);
      font-weight: 400;
    }
    .op-total-row em {
      font-family: var(--font-sans);
      font-style: normal;
      font-size: 11px;
      opacity: 0.55;
      font-weight: 300;
    }

    @media (max-width: 1024px) {
      .op-grid { grid-template-columns: repeat(2, 1fr); }
      .op-stats-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 768px) {
      .op-grid, .op-grid-2 { grid-template-columns: 1fr; }
      .op-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
      .op-cell { padding: 10px 6px; }
      .op-cell-v { font-size: 13px; }
      .op-stats { padding: 24px 16px; }
      .op-total-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .op-total-row > span:last-child { text-align: left; }
    }
    @media (max-width: 480px) {
      .op-stats-grid { grid-template-columns: repeat(2, 1fr); }
    }

  
    /* LINE BUTTON */
    .btn-line {
      background: #06C755 !important;
      color: #fff !important;
      border: 1.5px solid #06C755 !important;
    }
    .btn-line:hover {
      background: #05a648 !important;
      border-color: #05a648 !important;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(6, 199, 85, 0.3);
    }
    .btn-line-primary {
      background: #06C755 !important;
      color: #fff !important;
      border: 1.5px solid #06C755 !important;
    }
    .btn-line-primary:hover {
      background: #05a648 !important;
      border-color: #05a648 !important;
    }

  
    /* PRINT STYLES — A4 Brochure Layout */
    /* ═══════════════════════════════════════════════════════
       PRINT STYLES — EDITORIAL MAGAZINE LAYOUT
       Inspired by luxury real estate publications
       (Sotheby's, Christie's, Architectural Digest)
       ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
       PRINT STYLES — EDITORIAL MAGAZINE LAYOUT WITH COVER
       Navy / Gold / Ivory · Inspired by og-image
       ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
       PRINT STYLES — EDITORIAL MAGAZINE LAYOUT WITH COVER
       Navy / Gold / Ivory · Inspired by og-image
       Class names verified against actual HTML
       ═══════════════════════════════════════════════════════ */
    @media print {
      @page {
        size: A4 portrait;
        margin: 16mm 14mm 14mm 14mm;
      }
      @page :first {
        margin: 0;
      }
      
      /* === COLOR ADJUSTMENT === */
      .pdf-cover, .pdf-cover *,
      .price-box, .owner-card, .bkk-distance,
      .hero-img img, .g-item img, .gallery-grid img,
      .op-img-block img, .docs-img img, .overview-img img,
      .loc-img img, .dim-img img,
      .section-num::before {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
      
      /* === HIDE NON-PRINT ELEMENTS === */
      .nav, .nav-inner, .nav-menu, .nav-toggle, .nav-back, .nav-meta,
      .scroll-cue, .scroll-down, .float-toolbar, .float-btn, .float-btn-tooltip,
      .lightbox, .lightbox-close,
      .nav-drawer-backdrop, .mobile-drawer, .menu-toggle,
      .lang-switcher, .lang-btn, .filter-pills, 
      .map-embed-wrap, .map-embed-overlay, .map-btn,
      .brochure-action, .contact-actions, .faq, .faq-item,
      .hero-cta, .float-toast, 
      .ig-btn, .btn, .btn-primary, .btn-ghost, .btn-line, .btn-brochure,
      .price-fx-note, .hero-foot, .hero-img-tag {
        display: none !important;
      }
      
      /* === SHOW ONLY ACTIVE PAGE === */
      .page { display: none !important; }
      .page.active { display: block !important; }
      
      /* === RESET ANIMATIONS === */
      .reveal, .reveal-delay-1, .reveal-delay-2, .reveal-delay-3 { 
        opacity: 1 !important; 
        transform: none !important; 
        transition: none !important; 
        animation: none !important;
      }
      
      /* === GLOBAL — IVORY PAPER === */
      html, body {
        background: #ffffff !important;
        color: #0a1f44 !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      body {
        font-family: 'Noto Serif Thai', 'Sarabun', serif !important;
        font-size: 9.5pt !important;
        line-height: 1.55 !important;
        font-weight: 400 !important;
        -webkit-font-smoothing: antialiased;
      }
      
      /* === KILL DARK BACKGROUNDS === */
      .gallery, .contact, footer {
        background: #ffffff !important;
        color: #0a1f44 !important;
      }
      .gallery * {
        color: #0a1f44 !important;
      }
      .gallery .section-num::before {
        /* Already uses border-top from main rule — just adjust color if needed */
        border-top-color: #c9a961 !important;
        background: transparent !important;
      }
      
      /* ═══════════════════════════════════════════════
         COVER PAGE — Navy/Gold like og-image
         ═══════════════════════════════════════════════ */
      .pdf-cover {
        display: block !important;
        position: relative !important;
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        /* No CSS background — SVG element handles this so it prints without "background graphics" option */
        background: transparent !important;
        color: #f7f4ec !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
      }
      /* SVG inside pdf-cover acts as the printable background */
      .pdf-cover-svg-bg {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 210mm !important;
        height: 297mm !important;
        z-index: 0 !important;
        display: block !important;
        pointer-events: none !important;
      }
      .pdf-cover::before {
        /* No longer needed - SVG handles grid */
        display: none !important;
      }
      .pdf-cover-corners {
        position: absolute !important;
        top: 18mm !important; left: 18mm !important;
        width: 14mm !important; height: 14mm !important;
        border-top: 0.4mm solid #c9a961 !important;
        border-left: 0.4mm solid #c9a961 !important;
        z-index: 2 !important;
      }
      .pdf-cover-corners::after {
        content: "" !important;
        position: absolute !important;
        top: 12mm !important; left: -0.4mm !important;
        width: 1mm !important; height: 1mm !important;
        /* Use border instead of background — prints without background graphics option */
        border: 0.5mm solid #c9a961 !important;
        background: transparent !important;
        border-radius: 50% !important;
      }
      .pdf-cover-corners-br {
        position: absolute !important;
        bottom: 32mm !important; right: 18mm !important;
        width: 14mm !important; height: 14mm !important;
        border-bottom: 0.4mm solid #c9a961 !important;
        border-right: 0.4mm solid #c9a961 !important;
        z-index: 2 !important;
      }
      .pdf-cover-corners-br::before {
        content: "" !important;
        position: absolute !important;
        bottom: 12mm !important; right: -0.4mm !important;
        width: 1mm !important; height: 1mm !important;
        /* Use border instead of background */
        border: 0.5mm solid #c9a961 !important;
        background: transparent !important;
        border-radius: 50% !important;
      }
      .pdf-cover-content {
        position: absolute !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        text-align: center !important;
        z-index: 2 !important;
      }
      .pdf-cover-eyebrow {
        font-family: 'Sarabun', sans-serif !important;
        font-size: 9pt !important;
        letter-spacing: 0.4em !important;
        color: #c9a961 !important;
        margin-bottom: 6mm !important;
        text-transform: uppercase !important;
        font-weight: 400 !important;
      }
      .pdf-cover-eyebrow::after {
        content: "" !important;
        display: block !important;
        width: 14mm !important;
        height: 0 !important;
        /* Use border instead of background for printing without bg graphics */
        border-top: 0.3mm solid #c9a961 !important;
        background: transparent !important;
        margin: 4mm auto 0 auto !important;
      }
      .pdf-cover-logo {
        font-family: 'Cormorant Garamond', Georgia, serif !important;
        font-weight: 400 !important;
        font-size: 56pt !important;
        color: #f7f4ec !important;
        letter-spacing: 0.04em !important;
        line-height: 1 !important;
        margin-bottom: 6mm !important;
      }
      .pdf-cover-logo .dot {
        color: #c9a961 !important;
        font-style: italic !important;
        margin-right: 0.05em !important;
      }
      .pdf-cover-tagline {
        font-family: 'Cormorant Garamond', Georgia, serif !important;
        font-style: italic !important;
        font-weight: 400 !important;
        font-size: 22pt !important;
        color: #f7f4ec !important;
        margin-bottom: 12mm !important;
        letter-spacing: 0.02em !important;
      }
      .pdf-cover-desc-th {
        font-family: 'Noto Serif Thai', serif !important;
        font-size: 14pt !important;
        color: #f7f4ec !important;
        margin-bottom: 4mm !important;
      }
      .pdf-cover-locations {
        font-family: 'Sarabun', sans-serif !important;
        font-size: 8.5pt !important;
        letter-spacing: 0.3em !important;
        color: #c9a961 !important;
        text-transform: uppercase !important;
        margin-bottom: 14mm !important;
      }
      .pdf-cover-divider {
        width: 36mm !important;
        height: 0 !important;
        /* Use border instead of background */
        border-top: 0.3mm solid #c9a961 !important;
        background: transparent !important;
        margin: 0 auto 10mm auto !important;
      }
      .pdf-cover-stats {
        font-family: 'Sarabun', sans-serif !important;
        font-size: 8pt !important;
        letter-spacing: 0.3em !important;
        color: #f7f4ec !important;
        text-transform: uppercase !important;
        margin-bottom: 5mm !important;
      }
      .pdf-cover-url {
        font-family: 'Cormorant Garamond', Georgia, serif !important;
        font-style: italic !important;
        font-size: 10pt !important;
        color: #c9a961 !important;
      }
      
      /* ═══════════════════════════════════════════════════════
         🎯 NEW STRATEGY: Images keep natural aspect ratio
         No height limit · No cropping · Add pages as needed
         ═══════════════════════════════════════════════════════ */
      
      /* All image containers — no fixed dimensions */
      .hero-img, .overview-img, .op-img-block, .docs-img, 
      .loc-img, .dim-img, .g-item, .gallery-item, .card-img,
      .gallery-grid > * {
        aspect-ratio: auto !important;
        box-shadow: none !important;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: transparent !important;
        transform: none !important;
        transition: none !important;
        filter: none !important;
        page-break-inside: avoid !important;
      }
      .hero-img::before, .hero-img::after,
      .overview-img::before, .overview-img::after,
      .op-img-block::before, .op-img-block::after,
      .g-item::before, .g-item::after,
      .docs-img::before, .docs-img::after,
      .loc-img::before, .loc-img::after,
      .dim-img::before, .dim-img::after {
        display: none !important;
        content: none !important;
      }
      
      /* All overlay/positioned children — make static so they don't overlap */
      .hero-img-tag, .card-area, .card-tag, .card-soon, .card-soon-mark,
      .lb-close, .drawer-close, .op-cell-tag {
        position: static !important;
        display: block !important;
        background: transparent !important;
        color: #0a1f44 !important;
      }
      .hero-img-tag, .card-area, .card-tag {
        display: none !important;
      }
      
      /* Caption stays after image (not absolute) */
      .g-cap, .gallery-cap {
        position: static !important;
        display: block !important;
        background: transparent !important;
        color: #0a1f44 !important;
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 9pt !important;
        padding: 6pt 0 !important;
        opacity: 0.75 !important;
      }
      .g-cap small {
        color: #c9a961 !important;
        font-style: italic !important;
        margin-right: 6pt !important;
        font-size: 7.5pt !important;
        letter-spacing: 0.2em !important;
        text-transform: uppercase !important;
      }
      
      /* 🎯 KEY: All images keep natural aspect ratio */
      img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid !important;
      }
      
      .hero-img img,
      .overview-img img,
      .op-img-block img,
      .docs-img img,
      .loc-img img,
      .dim-img img,
      .g-item img,
      .gallery-item img,
      .gallery-grid img,
      .card-img img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: unset !important;
        display: block !important;
        page-break-inside: avoid !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      
      /* === HERO IMAGE — full width, natural ratio === */
      .hero-detail { 
        min-height: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        display: block !important;
        overflow: visible !important;
      }
      .hero-detail::before, .hero-detail::after {
        display: none !important;
      }
      .hero-detail .container {
        max-width: 100% !important;
        padding: 0 !important;
      }
      .hero-content, .hero-wrap {
        display: block !important;
        max-width: 100% !important;
        gap: 0 !important;
      }
      .hero-img {
        width: 100% !important;
        margin: 0 0 20pt 0 !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
      }
      
      /* Hero text */
      .hero-text {
        padding: 0 14mm !important;
        text-align: center !important;
      }
      .hero-eyebrow, .eyebrow {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 9pt !important;
        letter-spacing: 0.4em !important;
        color: #c9a961 !important;
        margin: 0 auto 12pt auto !important;
        display: inline-block !important;
        text-transform: uppercase !important;
      }
      .hero-eyebrow::before, .hero-eyebrow::after,
      .eyebrow::before, .eyebrow::after {
        display: none !important;
      }
      .hero-title { 
        font-family: 'Noto Serif Thai', serif !important;
        font-weight: 400 !important;
        font-size: 26pt !important; 
        line-height: 1.2 !important; 
        margin: 0 0 12pt 0 !important;
        color: #0a1f44 !important;
      }
      .hero-title em, .hero-title .ital {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        color: #c9a961 !important;
        font-weight: 400 !important;
      }
      .hero-sub { 
        font-family: 'Sarabun', sans-serif !important;
        font-size: 10pt !important; 
        margin: 0 auto 16pt auto !important;
        line-height: 1.7 !important;
        max-width: 80% !important;
        opacity: 0.78;
      }
      
      /* Hero stats */
      .hero-stats {
        display: flex !important;
        justify-content: center !important;
        gap: 24pt !important;
        margin: 14pt auto 16pt auto !important;
        padding: 12pt 0 !important;
        border-top: 0.5pt solid rgba(10,31,68,0.15) !important;
        border-bottom: 0.5pt solid rgba(10,31,68,0.15) !important;
        max-width: 380pt !important;
      }
      .hero-stat { text-align: center !important; padding: 0 8pt !important; }
      .hero-stat .v {
        font-family: 'Noto Serif Thai', serif !important;
        font-size: 18pt !important;
        line-height: 1 !important;
      }
      .hero-stat .v sup {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 9pt !important;
        color: #c9a961 !important;
      }
      .hero-stat .l {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 8pt !important;
        opacity: 0.65 !important;
        letter-spacing: 0.15em !important;
        margin-top: 4pt !important;
        text-transform: uppercase !important;
      }
      
      /* Price box */
      .price-box {
        /* No background — uses borders only to print without bg graphics */
        background: transparent !important;
        border: none !important;
        border-top: 0.75pt solid #c9a961 !important;
        border-bottom: 0.75pt solid #c9a961 !important;
        page-break-inside: avoid !important;
        max-width: 380pt !important;
        margin: 0 auto 14pt auto !important;
        padding: 14pt 24pt !important;
        text-align: center !important;
      }
      .price-box-label {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 8.5pt !important;
        letter-spacing: 0.3em !important;
        opacity: 0.65 !important;
        text-transform: uppercase !important;
        margin-bottom: 6pt !important;
      }
      .price-box-amount { 
        font-family: 'Noto Serif Thai', serif !important;
        font-size: 24pt !important;
      }
      .price-box-unit { 
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        color: #c9a961 !important;
        font-size: 12pt !important;
      }
      .price-box-onrequest {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 18pt !important;
      }
      .price-box-sub {
        font-family: 'Sarabun', sans-serif !important;
        font-size: 9pt !important;
        opacity: 0.7 !important;
        margin-top: 6pt !important;
      }
      
      /* Distance card */
      .bkk-distance {
        max-width: 380pt !important;
        page-break-inside: avoid !important;
        margin: 12pt auto !important;
        padding: 10pt 18pt !important;
        background: transparent !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 14pt !important;
        justify-content: center !important;
      }
      .bkk-distance-icon {
        width: 30pt !important;
        height: 30pt !important;
        border: 0.75pt solid #c9a961 !important;
        color: #c9a961 !important;
        background: transparent !important;
        flex-shrink: 0;
      }
      .bkk-distance-icon svg {
        width: 14pt !important;
        height: 14pt !important;
      }
      .bkk-distance-content { text-align: left !important; }
      .bkk-distance-label {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 8pt !important;
        letter-spacing: 0.25em !important;
        color: #c9a961 !important;
        text-transform: uppercase !important;
      }
      .bkk-distance-value {
        font-family: 'Noto Serif Thai', serif !important;
        font-size: 11pt !important;
      }
      .bkk-distance-note {
        font-size: 8.5pt !important;
        opacity: 0.65 !important;
        margin-top: 2pt !important;
      }
      
      /* === SECTIONS === */
      section { 
        page-break-inside: auto !important;
        padding: 14pt 0 !important; 
        margin: 0 !important;
        max-width: 100% !important;
        background: #ffffff !important;
      }
      section .container {
        max-width: 100% !important;
        padding: 0 !important;
      }
      
      /* Section head */
      .section-head { 
        margin-bottom: 14pt !important; 
        page-break-after: avoid !important;
      }
      .section-num { 
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 8.5pt !important; 
        letter-spacing: 0.35em !important;
        color: #c9a961 !important;
        text-transform: uppercase !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10pt !important;
        margin-bottom: 8pt !important;
      }
      .section-num::before { 
        content: "" !important;
        width: 28pt !important;
        height: 0 !important;
        /* Use border instead of background */
        border-top: 0.5pt solid #c9a961 !important;
        background: transparent !important;
        display: inline-block !important;
        vertical-align: middle !important;
      }
      .section-title { 
        font-family: 'Noto Serif Thai', serif !important;
        font-weight: 400 !important;
        font-size: 18pt !important; 
        line-height: 1.25 !important;
        margin: 0 0 8pt 0 !important;
      }
      .section-title em {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        color: #c9a961 !important;
      }
      .section-lead { 
        font-family: 'Sarabun', sans-serif !important;
        font-size: 10pt !important;
        line-height: 1.7 !important;
        opacity: 0.78 !important;
      }
      
      /* === OVERVIEW === */
      .overview-grid {
        display: block !important;
        gap: 0 !important;
      }
      .overview-img {
        width: 100% !important;
        margin-bottom: 14pt !important;
      }
      .overview-text {
        page-break-before: avoid !important;
      }
      .overview-quote {
        font-family: 'Noto Serif Thai', serif !important;
        font-size: 14pt !important;
        line-height: 1.5 !important;
        padding-left: 14pt !important;
        border-left: 1.5pt solid #c9a961 !important;
        margin-bottom: 12pt !important;
      }
      .overview-quote em {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        color: #c9a961 !important;
      }
      .overview-detail {
        font-size: 10pt !important;
        line-height: 1.7 !important;
        opacity: 0.85 !important;
        margin-bottom: 8pt !important;
      }
      
      /* === SPECS === */
      .specs-grid { 
        display: grid !important;
        gap: 0 !important;
        grid-template-columns: repeat(3, 1fr) !important;
        border-top: 0.5pt solid rgba(10,31,68,0.2) !important;
        border-left: 0.5pt solid rgba(10,31,68,0.2) !important;
        margin-top: 8pt !important;
      }
      .spec, .spec-item { 
        padding: 12pt 10pt !important;
        border: none !important;
        border-right: 0.5pt solid rgba(10,31,68,0.2) !important;
        border-bottom: 0.5pt solid rgba(10,31,68,0.2) !important;
        background: transparent !important;
        page-break-inside: avoid !important;
      }
      .spec svg, .spec-icon {
        color: #c9a961 !important;
        opacity: 0.8;
        margin-bottom: 4pt !important;
        width: 14pt !important;
        height: 14pt !important;
      }
      .spec-label { 
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 8pt !important;
        letter-spacing: 0.25em !important;
        color: #c9a961 !important;
        text-transform: uppercase !important;
        margin-bottom: 4pt !important;
      }
      .spec-value { 
        font-family: 'Noto Serif Thai', serif !important;
        font-size: 11pt !important;
        line-height: 1.4 !important;
      }
      .spec-value em {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        color: #c9a961 !important;
        font-size: 9.5pt !important;
      }
      .spec-note {
        font-size: 8.5pt !important;
        opacity: 0.7 !important;
        margin-top: 3pt !important;
      }
      
      /* === GALLERY — single column, full natural size === */
      .gallery-grid { 
        display: block !important;
        margin: 12pt 0 !important;
      }
      .g-item, .gallery-item {
        width: 100% !important;
        margin-bottom: 12pt !important;
        page-break-inside: avoid !important;
      }
      
      /* === DIM (รูปแปลง) === */
      .dim-wrap {
        display: block !important;
      }
      .dim-img {
        width: 100% !important;
        margin-bottom: 14pt !important;
      }
      .dim-list {
        display: block !important;
        border-top: 0.5pt solid rgba(10,31,68,0.2) !important;
      }
      .dim-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 12pt !important;
        padding: 8pt 0 !important;
        border-bottom: 0.5pt solid rgba(10,31,68,0.15) !important;
        page-break-inside: avoid !important;
      }
      .dim-row .lbl {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 9pt !important;
        letter-spacing: 0.2em !important;
        opacity: 0.7 !important;
        text-transform: uppercase !important;
      }
      .dim-row .val {
        font-family: 'Noto Serif Thai', serif !important;
        font-size: 12pt !important;
        text-align: right !important;
      }
      .dim-row .val em {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        color: #c9a961 !important;
        font-size: 10pt !important;
      }
      
      /* === OPERATION === */
      .op-grid, .op-grid-2 { 
        display: block !important;
        margin-bottom: 10pt !important;
      }
      .op-img-block {
        width: 100% !important;
        margin-bottom: 12pt !important;
      }
      .op-img-cap {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 8pt !important;
        padding: 4pt 0 !important;
        opacity: 0.7 !important;
      }
      .op-stats { 
        padding: 10pt !important;
        page-break-inside: avoid !important;
        /* No background — borders only */
        background: transparent !important;
        border: none !important;
        border-top: 0.5pt solid #c9a961 !important;
        border-bottom: 0.5pt solid #c9a961 !important;
      }
      .op-stats-title {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 10pt !important;
        margin-bottom: 8pt !important;
        color: #c9a961 !important;
      }
      .op-stats-grid { 
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important; 
        gap: 4pt !important; 
      }
      .op-cell { 
        padding: 4pt 2pt !important;
        font-size: 7pt !important;
        text-align: center !important;
      }
      .op-cell-no { 
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 7pt !important;
        color: #c9a961 !important;
      }
      .op-cell-tag {
        font-size: 6.5pt !important;
        opacity: 0.6 !important;
      }
      .op-cell-v { 
        font-size: 9pt !important;
      }
      .op-total, .op-total-row {
        margin-top: 8pt !important;
        padding-top: 8pt !important;
        border-top: 0.5pt solid rgba(10,31,68,0.2) !important;
        font-size: 10pt !important;
        text-align: right !important;
      }
      
      /* === LOCATION === */
      .loc-grid {
        display: block !important;
      }
      .loc-card {
        padding: 14pt 0 !important;
        page-break-inside: avoid !important;
        background: transparent !important;
        border: none !important;
        border-top: 0.5pt solid rgba(10,31,68,0.15) !important;
        margin-bottom: 12pt !important;
      }
      .loc-card h3 {
        font-family: 'Noto Serif Thai', serif !important;
        font-size: 13pt !important;
        margin-bottom: 8pt !important;
      }
      .loc-list {
        list-style: none !important;
        padding: 0 !important;
      }
      .loc-list li {
        font-size: 10pt !important;
        padding: 4pt 0 !important;
        border-bottom: 0.25pt dotted rgba(10,31,68,0.15) !important;
        display: flex !important;
        justify-content: space-between !important;
      }
      .loc-list li::before { display: none !important; }
      .loc-list .dot { display: none !important; }
      .loc-list .name { flex: 1 !important; }
      .loc-list .dist {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        color: #c9a961 !important;
      }
      .loc-img {
        width: 100% !important;
        margin-top: 12pt !important;
        page-break-inside: avoid !important;
      }
      
      /* === DOCS / DEED === */
      .docs-row {
        display: block !important;
        page-break-inside: auto !important;
      }
      .docs-img {
        width: 100% !important;
        margin-bottom: 16pt !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
        /* No background — uses thin border for the framed deed look */
        background: transparent !important;
        border: 0.3pt solid rgba(201, 169, 97, 0.4) !important;
        padding: 12pt !important;
      }
      .docs-list {
        display: block !important;
        margin-top: 16pt !important;
        page-break-before: avoid !important;
      }
      .docs-item {
        display: grid !important;
        grid-template-columns: 30pt 1fr !important;
        gap: 14pt !important;
        align-items: start !important;
        padding: 10pt 0 !important;
        border-bottom: 0.5pt solid rgba(10,31,68,0.15) !important;
        page-break-inside: avoid !important;
      }
      .docs-num {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 18pt !important;
        color: #c9a961 !important;
        line-height: 1 !important;
      }
      .docs-item h4 {
        font-family: 'Noto Serif Thai', serif !important;
        font-size: 12pt !important;
        font-weight: 400 !important;
        margin: 0 0 4pt 0 !important;
      }
      .docs-item p {
        font-size: 9.5pt !important;
        line-height: 1.6 !important;
        opacity: 0.8 !important;
        margin: 0 !important;
      }
      
      /* === OWNER CARD === */
      .owner-card {
        page-break-inside: avoid !important;
        /* No background — uses borders only */
        background: transparent !important;
        border: none !important;
        border-top: 0.75pt solid #c9a961 !important;
        border-bottom: 0.75pt solid #c9a961 !important;
        max-width: 380pt !important;
        margin: 16pt auto !important;
        padding: 16pt 24pt !important;
        text-align: center !important;
      }
      .owner-name {
        font-family: 'Noto Serif Thai', serif !important;
        font-size: 16pt !important;
        font-weight: 400 !important;
        margin: 0 !important;
      }
      .owner-name-en {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        color: #c9a961 !important;
        font-size: 13pt !important;
        margin: 2pt 0 0 0 !important;
      }
      .owner-title {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 8.5pt !important;
        letter-spacing: 0.3em !important;
        opacity: 0.65 !important;
        text-transform: uppercase !important;
        margin-top: 8pt !important;
        padding-top: 8pt !important;
      }
      
      /* === CONTACT === */
      .contact {
        background: #ffffff !important;
        page-break-inside: avoid !important;
        padding: 20pt 0 !important;
      }
      .contact * { color: #0a1f44 !important; }
      .contact .section-title em { color: #c9a961 !important; }
      
      /* === LINKS === */
      a { color: #0a1f44 !important; text-decoration: none !important; }
      
      /* === FOOTER === */
      footer { 
        page-break-inside: avoid !important;
        padding: 20pt 0 8pt !important;
        font-family: 'Sarabun', sans-serif !important;
        font-size: 8.5pt !important;
        background: #ffffff !important;
        border-top: 0.5pt solid #c9a961 !important;
        margin-top: 24pt !important;
        text-align: center !important;
      }
      footer * { color: #0a1f44 !important; }
      
      /* === GLOBAL TEXT === */
      h1, h2, h3, h4, h5, h6 { 
        color: #0a1f44 !important; 
        font-family: 'Noto Serif Thai', serif !important;
        font-weight: 400 !important;
        page-break-after: avoid !important;
      }
      em, i { 
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        color: #c9a961 !important; 
      }
      p, li { orphans: 3; widows: 3; }
    
      
      /* === PREVENT WIDOW/ORPHAN ELEMENTS === */
      
      /* Section heading must stay with first content */
      .section-head {
        page-break-after: avoid !important;
        break-after: avoid !important;
      }
      
      /* Image after section-head must stay together */
      .overview-grid, .overview-img,
      .dim-wrap, .dim-img,
      .gallery-grid, .g-item:first-child,
      .docs-row, .docs-img,
      .loc-grid, .loc-card:first-child,
      .op-grid, .op-img-block:first-child {
        page-break-before: avoid !important;
        break-before: avoid !important;
      }
      
      /* Distance card must stay with hero or price */
      .bkk-distance {
        page-break-before: avoid !important;
        break-before: avoid !important;
      }
      
      /* Hero image + text together */
      .hero-img {
        page-break-after: avoid !important;
        break-after: avoid !important;
      }
      
      /* Section + first child stay together */
      section {
        orphans: 2 !important;
        widows: 2 !important;
      }
      
      /* Section-head + section-title + first content stay together */
      .section-num, .section-title, .section-lead {
        page-break-after: avoid !important;
        break-after: avoid !important;
      }
      
      /* Operation specific - keep image with stats */
      .op-img-block {
        page-break-after: avoid !important;
        break-after: avoid !important;
      }
      
      /* Loc card heading + list stays together */
      .loc-card h3 {
        page-break-after: avoid !important;
        break-after: avoid !important;
      }

    
      
      /* ═══════════════════════════════════════════════════════
         📐 LAYOUT REFINEMENTS — Better content density
         ═══════════════════════════════════════════════════════ */
      
      /* === HERO PAGE: tighter layout, content fits one page === */
      .hero-detail {
        min-height: auto !important;
        padding: 14pt 0 !important;
      }
      .hero-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
      }
      
      /* Hero image: compact, fit on same page as text */
      .hero-img {
        width: 100% !important;
        max-height: 220pt !important;
        margin: 0 0 12pt 0 !important;
        overflow: hidden !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
      }
      .hero-img img {
        width: 100% !important;
        height: auto !important;
        max-height: 220pt !important;
        object-fit: cover !important;
        display: block !important;
      }
      
      /* Hero text: more compact */
      .hero-text {
        padding: 0 14mm !important;
        text-align: center !important;
      }
      .hero-title {
        font-size: 22pt !important;
        margin: 0 0 8pt 0 !important;
      }
      .hero-sub {
        font-size: 9.5pt !important;
        margin: 0 auto 10pt auto !important;
      }
      .hero-stats {
        margin: 8pt auto 10pt auto !important;
        padding: 8pt 0 !important;
        gap: 18pt !important;
      }
      .hero-stat .v { font-size: 16pt !important; }
      .hero-stat .l { font-size: 7.5pt !important; }
      
      /* Price box: compact */
      .price-box {
        margin: 8pt auto !important;
        padding: 10pt 18pt !important;
      }
      .price-box-amount { font-size: 22pt !important; }
      .price-box-onrequest { font-size: 16pt !important; }
      .price-box-sub { font-size: 8.5pt !important; }
      .price-box-label { font-size: 8pt !important; }
      
      /* Distance: even more compact */
      .bkk-distance {
        margin: 8pt auto 0 auto !important;
        padding: 8pt 14pt !important;
      }
      .bkk-distance-label { font-size: 7.5pt !important; }
      .bkk-distance-value { font-size: 10pt !important; }
      .bkk-distance-note { font-size: 8pt !important; }
      
      /* === SECTION CONTENT FLOWS NATURALLY === */
      section {
        padding: 12pt 0 !important;
      }
      .section-head {
        margin-bottom: 10pt !important;
        page-break-after: auto !important;  /* allow content right after */
      }
      
      /* === OVERVIEW: image + text together === */
      .overview-img {
        max-height: 260pt !important;
        overflow: hidden !important;
        margin-bottom: 12pt !important;
      }
      .overview-img img {
        max-height: 260pt !important;
        object-fit: cover !important;
      }
      .overview-quote {
        font-size: 13pt !important;
        padding-left: 12pt !important;
        margin-bottom: 10pt !important;
      }
      .overview-detail {
        font-size: 9.5pt !important;
        margin-bottom: 6pt !important;
      }
      
      /* === DIM: image + list together === */
      .dim-img {
        max-height: 280pt !important;
        overflow: hidden !important;
        margin-bottom: 10pt !important;
        text-align: center !important;
      }
      .dim-img img {
        max-height: 280pt !important;
        max-width: 100% !important;
        width: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
      }
      .dim-row {
        padding: 6pt 0 !important;
      }
      
      /* === GALLERY: 2x2 grid (each image natural ratio in 2-col) === */
      .gallery-grid { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10pt !important;
        margin: 10pt 0 !important;
      }
      .g-item {
        page-break-inside: avoid !important;
        margin-bottom: 0 !important;
      }
      .g-item img {
        width: 100% !important;
        height: auto !important;
        max-height: 200pt !important;
        object-fit: cover !important;
        display: block !important;
      }
      .g-cap {
        font-size: 8pt !important;
        padding: 4pt 0 !important;
      }
      .g-cap small {
        font-size: 7pt !important;
      }
      
      /* === LOCATION: list + map together === */
      .loc-grid {
        display: block !important;
      }
      .loc-card {
        padding: 10pt 0 !important;
        margin-bottom: 10pt !important;
      }
      .loc-card h3 {
        font-size: 12pt !important;
      }
      .loc-list li {
        font-size: 9.5pt !important;
        padding: 3pt 0 !important;
      }
      .loc-img {
        max-height: 280pt !important;
        overflow: hidden !important;
        margin-top: 10pt !important;
      }
      .loc-img img {
        max-height: 280pt !important;
        object-fit: cover !important;
      }
      
      /* === DOCS: image + list more compact === */
      .docs-img {
        max-height: 320pt !important;
        margin-bottom: 12pt !important;
        padding: 8pt !important;
      }
      .docs-img img {
        max-height: 300pt !important;
        max-width: 100% !important;
        width: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
      }
      .docs-list {
        margin-top: 12pt !important;
      }
      .docs-item {
        padding: 8pt 0 !important;
      }
      
      /* === OPERATION: smaller image, more compact === */
      .op-img-block {
        max-height: 220pt !important;
        overflow: hidden !important;
        margin-bottom: 10pt !important;
      }
      .op-img-block img {
        max-height: 220pt !important;
        object-fit: cover !important;
      }
      .op-img-cap {
        font-size: 7.5pt !important;
        padding: 3pt 0 !important;
      }
      
      /* === PREVENT WIDOW SECTIONS === */
      /* Section-head + first child must stay together */
      section .section-head + * {
        page-break-before: avoid !important;
      }
      
      /* Allow content to flow naturally — don't force section to new page === */
      .specs, .gallery, .docs {
        page-break-before: auto !important;
      }
      
      /* Specs grid: keep together if possible */
      .specs-grid {
        page-break-inside: auto !important;
      }
      .spec {
        page-break-inside: avoid !important;
      }

    
      
      /* ═══════════════════════════════════════════════════════
         🎨 FINAL POLISH — Tighter content, no awkward gaps
         ═══════════════════════════════════════════════════════ */
      
      /* === LET CONTENT FLOW — no forced page breaks === */
      .specs, .gallery, .docs, .loc, .dim, .operation, .overview, .contact {
        page-break-before: auto !important;
        break-before: auto !important;
      }
      section {
        padding: 10pt 0 !important;
      }
      
      /* === IMAGES: balanced — natural ratio with reasonable max === */
      /* A4 page = 297mm = ~835pt high. Usable area ~770pt. */
      /* Setting max-height ~340pt = ~40% of page lets text fit too */
      
      /* Smaller image heights so content can fit better on each page */
      .overview-img,
      .op-img-block,
      .loc-img,
      .hero-img {
        max-height: 260pt !important;
        overflow: hidden !important;
      }
      
      .overview-img img,
      .op-img-block img,
      .loc-img img,
      .hero-img img {
        width: 100% !important;
        height: auto !important;
        max-height: 260pt !important;
        object-fit: cover !important;
      }
      
      /* Dim image: contain to preserve diagrams */
      .dim-img {
        max-height: 280pt !important;
        overflow: hidden !important;
        text-align: center !important;
      }
      .dim-img img {
        max-height: 280pt !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
      }
      
      /* Docs image: contain — preserve deed details */
      .docs-img {
        max-height: 320pt !important;
        overflow: hidden !important;
        text-align: center !important;
      }
      .docs-img img {
        max-height: 300pt !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
      }
      
      /* Gallery: smaller for 2x2 grid */
      .g-item img {
        max-height: 200pt !important;
        height: auto !important;
        object-fit: cover !important;
        width: 100% !important;
      }
      
      /* === COMPACT MARGINS — tighter spacing === */
      .section-head {
        margin-bottom: 8pt !important;
      }
      .overview-img,
      .dim-img,
      .docs-img,
      .loc-img,
      .op-img-block {
        margin-bottom: 10pt !important;
      }
      
      /* === HERO PAGE: keep tight === */
      .hero-detail {
        padding: 0 !important;
      }
      .hero-img {
        max-height: 280pt !important;
        page-break-inside: avoid !important;
      }
      .hero-img img {
        max-height: 280pt !important;
      }
      
      /* === OVERVIEW TEXT: reduce paragraph margins === */
      .overview-detail {
        margin-bottom: 5pt !important;
      }
      .overview-quote {
        margin-bottom: 8pt !important;
      }
      
      /* === SPECS GRID: compact === */
      .spec, .spec-item {
        padding: 10pt 8pt !important;
      }
      .spec-value {
        font-size: 10.5pt !important;
      }
      .spec-note {
        font-size: 8pt !important;
      }
      
      /* === DIM ROW: compact === */
      .dim-row {
        padding: 5pt 0 !important;
      }
      
      /* === DOCS ITEMS: compact === */
      .docs-item {
        padding: 6pt 0 !important;
      }
      .docs-item h4 {
        font-size: 11pt !important;
      }
      .docs-item p {
        font-size: 9pt !important;
      }
      
      /* === LOC LIST: compact === */
      .loc-card {
        padding: 8pt 0 !important;
        margin-bottom: 6pt !important;
      }
      .loc-list li {
        padding: 2.5pt 0 !important;
      }
      
      /* === OPERATION STATS: tighter === */
      .op-stats {
        padding: 8pt !important;
      }
      .op-stats-grid {
        gap: 3pt !important;
      }
      .op-cell {
        padding: 3pt 1pt !important;
      }
      .op-total, .op-total-row {
        margin-top: 6pt !important;
        padding-top: 6pt !important;
        font-size: 9.5pt !important;
      }
      
      /* === ALLOW SECTIONS TO FLOW NATURALLY === */
      /* Don't force page breaks - let content fill pages */
      section + section {
        page-break-before: auto !important;
      }
      
      /* But keep image+heading together */
      .section-head {
        page-break-after: avoid !important;
      }
      
      /* And keep paired content together */
      .overview-img + .overview-text,
      .dim-img + .dim-list,
      .docs-img + .docs-list {
        page-break-before: avoid !important;
      }
      
      /* Distance card stays with hero */
      .bkk-distance {
        margin: 6pt auto 0 auto !important;
      }

    
      
      /* === FIX WIDOW SECTIONS — header sticks with content === */
      
      /* Each section: keep heading + first content together */
      section {
        page-break-inside: auto !important;
      }
      
      /* Keep section-head with content, but allow flow */
      .section-head {
        page-break-after: avoid !important;
      }
      
      /* Hero — image+text stay together (column-reverse means image first) */
      .hero-content {
        page-break-inside: avoid !important;
      }
      .hero-img {
        page-break-after: avoid !important;
      }
      .hero-text {
        page-break-before: avoid !important;
      }
      
      /* Owner card stays with contact section */
      .contact .section-head + p,
      .contact .section-head ~ * {
        page-break-before: avoid !important;
      }
      
      /* === HERO IMAGE: don't crop, let it span full natural size === */
      /* Reverse the column-reverse cropping issue */
      .hero-img {
        max-height: none !important;
        overflow: visible !important;
      }
      .hero-img img {
        max-height: none !important;
        height: auto !important;
        object-fit: unset !important;
      }
      
      /* === Compact contact section === */
      .contact {
        padding: 14pt 0 !important;
      }
      .owner-card {
        margin: 12pt auto !important;
      }

      /* --- CONTACT page: center vertically when alone, no orphan ugliness --- */
      .contact {
        page-break-before: auto !important;
        break-before: auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        text-align: center !important;
        padding: 40pt 0 !important;
      }
      .contact-content {
        max-width: 480pt !important;
        margin: 0 auto !important;
      }
      .contact .eyebrow {
        margin-bottom: 12pt !important;
      }
      .contact h2 {
        font-size: 18pt !important;
        margin-bottom: 14pt !important;
      }
      .contact p {
        font-size: 10pt !important;
        line-height: 1.7 !important;
        margin-bottom: 18pt !important;
      }

      /* ═══════════════════════════════════════════════════════════
         🔧 LAYOUT FIX V2 — canonical overrides (final pass)
         Solves:
         · farm3 dim square image leaving blank space below
         · Section headings appearing alone before content (orphans)
         · Hero/docs images floating mid-page with empty padding
         ═══════════════════════════════════════════════════════════ */

      /* --- HERO IMAGE: fixed cover, no overflow, no orphan after --- */
      .hero-img {
        width: 100% !important;
        max-height: 240pt !important;
        height: 240pt !important;
        margin: 0 0 14pt 0 !important;
        overflow: hidden !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        /* Allow next section to flow right after — no avoid-after */
        page-break-after: auto !important;
        break-after: auto !important;
      }
      .hero-img img {
        width: 100% !important;
        height: 100% !important;
        max-height: 240pt !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
      }
      /* Hero-detail: don't force min-height on print */
      .hero-detail {
        min-height: auto !important;
        height: auto !important;
        page-break-after: auto !important;
        break-after: auto !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      /* Hero content: ALLOW break inside - text can be long, don't force everything to fit */
      .hero-content {
        page-break-inside: auto !important;
        break-inside: auto !important;
        display: block !important;
      }
      .hero-text {
        page-break-before: auto !important;
        break-before: auto !important;
        page-break-after: auto !important;
        break-after: auto !important;
      }

      /* CRITICAL FIX: hero-img + overview-section must flow together */
      /* If hero-img orphans on its own page, force overview to follow on same page */
      .hero-img {
        page-break-after: auto !important;
        break-after: auto !important;
      }
      .hero-img + * {
        page-break-before: auto !important;
        break-before: auto !important;
      }
      /* Allow flow to continue right after header.hero-detail closes */
      header.hero-detail + section {
        page-break-before: auto !important;
        break-before: auto !important;
      }

      /* --- SECTIONS FLOW NATURALLY: don't force them onto new pages --- */
      /* Override any earlier rule that may push sections to new page */
      section.overview,
      section.specs,
      section.dim,
      section.gallery,
      section.docs,
      section.loc,
      section.operation {
        page-break-before: auto !important;
        break-before: auto !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
      }
      header.hero-detail {
        page-break-after: auto !important;
        break-after: auto !important;
      }
      /* Hero foot — small footer text after hero, allow flow */
      .hero-foot {
        page-break-before: auto !important;
        break-before: auto !important;
        page-break-after: auto !important;
        break-after: auto !important;
        margin-top: 4pt !important;
      }

      /* --- DIM IMAGE: cap by both width AND height, center, contain --- */
      /* Square/portrait images (like farm3 600x544) get width-limited so they don't dominate */
      .dim-img {
        max-height: 240pt !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-align: center !important;
        margin: 0 auto 12pt auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }
      .dim-img img {
        max-height: 240pt !important;
        max-width: 380pt !important;  /* cap width — square images stay reasonable */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
      }
      /* Keep dim-img + dim-list as one unit when possible */
      .dim-wrap {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      /* --- DOCS IMAGE: smaller, no orphan space below --- */
      .docs-img {
        max-height: 280pt !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-align: center !important;
        margin: 0 auto 12pt auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
      }
      .docs-img img {
        max-height: 280pt !important;
        max-width: 220pt !important;  /* deeds are portrait, cap width */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
      }
      .docs-row {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      /* --- SECTION HEADING ORPHAN PREVENTION (strongest rule) --- */
      /* Glue section-head to its immediate sibling content */
      .section-head {
        page-break-after: avoid !important;
        break-after: avoid !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-bottom: 10pt !important;
      }
      /* Every section's first child after section-head MUST stay glued */
      .section-head + * {
        page-break-before: avoid !important;
        break-before: avoid !important;
      }
      /* Specific section content blocks - keep with their heading */
      .overview-grid,
      .specs-grid,
      .dim-wrap,
      .gallery-grid,
      .docs-row,
      .loc-grid,
      .op-grid,
      .op-grid-2 {
        page-break-before: avoid !important;
        break-before: avoid !important;
      }

      /* Operation grid: keep together - fits one page with reduced image heights */
      .op-grid, .op-grid-2 {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-before: avoid !important;
        break-before: avoid !important;
      }
      /* But the FIRST image after heading must stay with heading */
      .op-grid > .op-img-block:first-child,
      .gallery-grid > .g-item:first-child {
        page-break-before: avoid !important;
        break-before: avoid !important;
      }

      /* --- OVERVIEW IMAGE: cover, fixed height to prevent gap --- */
      .overview-img {
        max-height: 230pt !important;
        height: 230pt !important;
        overflow: hidden !important;
        margin-bottom: 10pt !important;
      }
      .overview-img img {
        width: 100% !important;
        height: 100% !important;
        max-height: 230pt !important;
        object-fit: cover !important;
        display: block !important;
      }

      /* --- LOC IMAGE: cover, fixed height --- */
      .loc-img {
        max-height: 220pt !important;
        height: 220pt !important;
        overflow: hidden !important;
        margin-bottom: 10pt !important;
      }
      .loc-img img {
        width: 100% !important;
        height: 100% !important;
        max-height: 220pt !important;
        object-fit: cover !important;
        display: block !important;
      }

      /* --- OPERATION IMAGES: smaller, allow heading + 3 images on same page --- */
      /* A4 usable ≈ 795pt; section-head ~70pt + 3×(180+caption+gap) ≈ 670pt = fits */
      .op-img-block {
        max-height: 180pt !important;
        height: 180pt !important;
        overflow: hidden !important;
        margin-bottom: 6pt !important;
      }
      .op-img-block img {
        width: 100% !important;
        height: 100% !important;
        max-height: 180pt !important;
        object-fit: cover !important;
        display: block !important;
      }
      .op-img-cap {
        font-size: 7.5pt !important;
        margin-top: 2pt !important;
        padding: 2pt 0 !important;
      }

    }
    
    /* Hide cover on screen, show only on print */
    .pdf-cover {
      display: none;
    }
    
    /* Hide cover on screen, show only on print */
    .pdf-cover {
      display: none;
    }


    /* FLOATING TOOLBAR */
    .float-toolbar {
      position: fixed;
      right: 24px;
      bottom: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 90;
    }
    .float-btn {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--navy);
      color: var(--ivory);
      border: 1.5px solid var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 8px 24px rgba(10, 31, 68, 0.25);
      padding: 0;
    }
    .float-btn:hover {
      background: var(--gold);
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(201, 169, 97, 0.4);
    }
    .float-btn svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
    }
    .float-btn-tooltip {
      position: absolute;
      right: 64px;
      top: 50%;
      transform: translateY(-50%);
      background: var(--navy);
      color: var(--ivory);
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .float-btn:hover .float-btn-tooltip { opacity: 1; }

    .float-toast {
      position: fixed;
      bottom: 100px;
      right: 24px;
      background: var(--navy);
      color: var(--ivory);
      padding: 12px 20px;
      border-radius: 4px;
      border: 1px solid var(--gold);
      font-size: 13px;
      letter-spacing: 0.05em;
      box-shadow: 0 8px 24px rgba(10, 31, 68, 0.3);
      opacity: 0;
      transform: translateY(8px);
      transition: all 0.3s ease;
      z-index: 100;
      pointer-events: none;
    }
    .float-toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 768px) {
      .float-toolbar { right: 16px; bottom: 16px; }
      .float-btn { width: 46px; height: 46px; }
      .float-btn-tooltip { display: none; }
      .float-toast { right: 16px; bottom: 80px; left: 16px; right: 16px; text-align: center; font-size: 12px; }
    }

  
    /* FAQ SECTION */
    .faq {
      padding: clamp(80px, 12vw, 140px) 0;
      background: var(--ivory);
    }
    .faq-list {
      max-width: 880px;
      margin: 60px auto 0;
    }
    .faq-item {
      border-bottom: 1px solid rgba(10, 31, 68, 0.12);
      transition: border-color 0.3s ease;
    }
    .faq-item:hover {
      border-color: var(--gold);
    }
    .faq-q {
      width: 100%;
      padding: 28px 0;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      text-align: left;
      font-family: var(--font-serif);
      font-size: clamp(17px, 1.8vw, 20px);
      font-weight: 400;
      color: var(--navy);
      transition: color 0.3s ease;
    }
    .faq-q:hover { color: var(--gold); }
    .faq-q-num {
      font-family: var(--font-italic);
      font-style: italic;
      font-size: 0.7em;
      color: var(--gold);
      flex-shrink: 0;
      letter-spacing: 0.05em;
    }
    .faq-q-text { flex: 1; }
    .faq-q-icon {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(10, 31, 68, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--navy);
      transition: all 0.3s ease;
    }
    .faq-q-icon::before {
      content: '+';
      font-size: 18px;
      font-weight: 300;
      transition: transform 0.3s ease;
    }
    .faq-item.open .faq-q-icon {
      background: var(--gold);
      border-color: var(--gold);
      color: #fff;
    }
    .faq-item.open .faq-q-icon::before {
      transform: rotate(45deg);
    }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .faq-item.open .faq-a {
      max-height: 500px;
    }
    .faq-a-inner {
      padding: 0 0 32px 0;
      font-family: var(--font-sans);
      font-size: 15px;
      line-height: 1.85;
      color: var(--navy);
      opacity: 0.78;
      max-width: 720px;
    }
    .faq-a-inner em {
      font-family: var(--font-italic);
      font-style: italic;
      color: var(--gold);
      opacity: 1;
    }
    @media (max-width: 768px) {
      .faq-q { padding: 22px 0; gap: 14px; }
      .faq-a-inner { font-size: 14px; padding-bottom: 24px; }
    }

  
    /* FILTER PILLS */
    .filter-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 48px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(10, 31, 68, 0.08);
    }
    .filter-pill {
      padding: 10px 20px;
      background: transparent;
      border: 1px solid rgba(10, 31, 68, 0.18);
      border-radius: 100px;
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--navy);
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .filter-pill:hover {
      border-color: var(--gold);
      color: var(--gold);
    }
    .filter-pill.active {
      background: var(--navy);
      color: var(--ivory);
      border-color: var(--navy);
    }
    .filter-pill.active .filter-count {
      background: var(--gold);
      color: var(--navy);
    }
    .filter-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      background: rgba(10, 31, 68, 0.08);
      border-radius: 100px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--navy);
      transition: all 0.3s ease;
    }
    /* Hidden card by filter */
    .card.filter-hidden {
      display: none !important;
    }
    /* Empty state when no results */
    .filter-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 80px 20px;
      color: var(--navy);
      opacity: 0.5;
      font-family: var(--font-italic);
      font-style: italic;
      font-size: 18px;
      display: none;
    }
    .filter-empty.show { display: block; }

    @media (max-width: 768px) {
      .filter-pills { gap: 8px; margin-bottom: 32px; }
      .filter-pill { padding: 8px 14px; font-size: 12px; }
    }

      /* LANGUAGE SWITCHER - Refined design */
    .lang-switcher {
      display: inline-flex;
      align-items: center;
      gap: 1px;
      padding: 0;
      border-radius: 100px;
      background: transparent;
      position: relative;
    }
    .lang-switcher::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(10, 31, 68, 0.18);
      border-radius: 100px;
      pointer-events: none;
      transition: border-color 0.3s ease;
    }
    .lang-switcher:hover::before {
      border-color: rgba(201, 169, 97, 0.6);
    }
    .lang-btn {
      position: relative;
      padding: 6px 9px;
      background: transparent;
      border: none;
      border-radius: 100px;
      font-family: var(--font-sans);
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.05em;
      color: var(--navy);
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0.65;
      min-width: 26px;
      z-index: 2;
    }
    .lang-btn:hover {
      opacity: 1;
      color: var(--gold);
    }
    .lang-btn.active {
      background: var(--navy);
      color: var(--ivory);
      opacity: 1;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(10, 31, 68, 0.25);
    }
    /* Mobile drawer styling */
    .mobile-drawer .lang-switcher {
      margin-top: 32px;
      width: 100%;
      justify-content: center;
      padding: 4px;
    }
    .mobile-drawer .lang-switcher::before {
      border-color: rgba(10, 31, 68, 0.15);
      background: rgba(10, 31, 68, 0.04);
    }
    .mobile-drawer .lang-btn {
      color: var(--navy);
      flex: 1;
      padding: 10px 14px;
      font-size: 12px;
      letter-spacing: 0.1em;
    }
    .mobile-drawer .lang-btn.active {
      background: var(--navy);
      color: var(--ivory);
    }
    @media (max-width: 1100px) {
      .nav-meta { display: none; }
    }
    @media (max-width: 1100px) {
      .nav .lang-switcher .lang-btn[data-lang-btn="ja"],
      .nav .lang-switcher .lang-btn[data-lang-btn="ko"],
      .nav .lang-switcher .lang-btn[data-lang-btn="ru"] { display: none; }
    }
    @media (max-width: 880px) {
      .nav .lang-switcher { display: none; }
    }

  
    /* PRICE BOX */
    .price-box {
      margin-top: 32px;
      padding: 28px 32px;
      background: linear-gradient(135deg, rgba(10,31,68,0.04) 0%, rgba(201,169,97,0.06) 100%);
      border: 1px solid rgba(201,169,97,0.3);
      border-left: 3px solid var(--gold);
      border-radius: 2px;
      max-width: 480px;
    }
    .price-box-label {
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--navy);
      opacity: 0.55;
      margin-bottom: 10px;
    }
    .price-box-main {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
    }
    .price-box-amount {
      font-family: var(--font-serif);
      font-size: clamp(28px, 4vw, 38px);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.1;
      letter-spacing: -0.01em;
    }
    .price-box-unit {
      font-family: var(--font-italic);
      font-style: italic;
      font-size: clamp(15px, 1.6vw, 18px);
      color: var(--gold);
      font-weight: 400;
    }
    .price-box-sub {
      margin-top: 10px;
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--navy);
      opacity: 0.7;
      font-style: italic;
    }
    .price-box-onrequest {
      font-family: var(--font-italic);
      font-style: italic;
      font-size: clamp(20px, 2.6vw, 26px);
      color: var(--navy);
      line-height: 1.3;
    }
    .price-includes {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(10,31,68,0.1);
    }
    .price-includes-title {
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--navy);
      opacity: 0.55;
      margin-bottom: 10px;
    }
    .price-includes-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .price-includes-list li {
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--navy);
      opacity: 0.85;
      padding-left: 16px;
      position: relative;
      line-height: 1.5;
    }
    .price-includes-list li::before {
      content: '·';
      position: absolute;
      left: 4px;
      color: var(--gold);
      font-weight: bold;
    }
    .price-includes-note {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px dashed rgba(10,31,68,0.1);
      font-family: var(--font-italic);
      font-style: italic;
      font-size: 12px;
      color: var(--gold);
      line-height: 1.5;
    }

    /* CARD PRICE BADGE (home page) */
    .card-price {
      position: absolute;
      top: 14px;
      right: 14px;
      padding: 9px 16px;
      background: rgba(10,31,68,0.95);
      color: #f7f4ec;
      font-family: var(--font-sans);
      font-size: 13px;
      letter-spacing: 0.04em;
      font-weight: 600;
      border-radius: 3px;
      border-left: 3px solid #c9a961;
      box-shadow: 0 4px 14px rgba(10,31,68,0.35), 0 1px 3px rgba(0,0,0,0.2);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 5;
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      white-space: nowrap;
      pointer-events: none;
    }
    .card-price em {
      font-family: var(--font-italic);
      font-style: italic;
      color: #c9a961;
      font-weight: 400;
      font-size: 12px;
      margin-left: 2px;
    }
    @media (max-width: 768px) {
      .card-price {
        top: 10px;
        right: 10px;
        padding: 7px 12px;
        font-size: 11px;
      }
      .card-price em { font-size: 10px; }
    }

    @media (max-width: 768px) {
      .price-box { padding: 22px 20px; }
      .price-includes-list li { font-size: 12px; }
      .card-price { font-size: 10px; padding: 5px 10px; top: 12px; right: 12px; }
    }

  
    .price-fx-note {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(10,31,68,0.06);
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.05em;
      color: var(--navy);
      opacity: 0.45;
      font-style: italic;
      line-height: 1.5;
    }

  
    /* OWNER CARD */
    .owner-card {
      max-width: 480px;
      margin: 0 auto 32px;
      padding: 28px 32px;
      background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(201,169,97,0.10) 100%);
      border: 1px solid rgba(201,169,97,0.4);
      border-left: 3px solid var(--gold);
      border-radius: 2px;
      text-align: center;
      backdrop-filter: blur(10px);
    }
    .owner-name {
      font-family: var(--font-serif);
      font-size: clamp(22px, 2.6vw, 28px);
      font-weight: 400;
      color: var(--ivory);
      letter-spacing: 0.02em;
      line-height: 1.2;
    }
    .owner-name-en {
      font-family: var(--font-italic);
      font-style: italic;
      font-size: clamp(16px, 1.8vw, 20px);
      color: var(--gold);
      margin-top: 4px;
      font-weight: 400;
      letter-spacing: 0.05em;
    }
    .owner-title {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(201,169,97,0.2);
      font-family: var(--font-sans);
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--ivory);
      opacity: 0.7;
    }
    @media (max-width: 768px) {
      .owner-card { padding: 22px 20px; }
    }

  
    /* DISTANCE BADGE */
    .bkk-distance {
      margin-top: 24px;
      padding: 18px 22px;
      background: rgba(255,255,255,0.6);
      border: 1px dashed rgba(10,31,68,0.18);
      border-radius: 2px;
      max-width: 480px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .bkk-distance-icon {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border: 1.5px solid var(--gold);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold);
    }
    .bkk-distance-icon svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
    }
    .bkk-distance-content { flex: 1; }
    .bkk-distance-label {
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--navy);
      opacity: 0.55;
      margin-bottom: 4px;
    }
    .bkk-distance-value {
      font-family: var(--font-serif);
      font-size: 16px;
      color: var(--navy);
      font-weight: 400;
    }
    .bkk-distance-value em {
      font-family: var(--font-italic);
      font-style: italic;
      color: var(--gold);
      margin-left: 6px;
      font-size: 0.92em;
    }
    .bkk-distance-note {
      margin-top: 4px;
      font-family: var(--font-sans);
      font-size: 11px;
      color: var(--navy);
      opacity: 0.6;
      line-height: 1.4;
    }

  
    /* MAP EMBED */
    .map-embed-wrap {
      margin-top: 32px;
      border-radius: 2px;
      overflow: hidden;
      border: 1px solid rgba(10,31,68,0.12);
      box-shadow: 0 8px 32px rgba(10,31,68,0.08);
      position: relative;
    }
    .map-embed-wrap iframe {
      width: 100%;
      height: 420px;
      border: none;
      display: block;
    }
    .map-embed-overlay {
      position: absolute;
      top: 16px;
      left: 16px;
      padding: 8px 14px;
      background: rgba(10,31,68,0.92);
      color: var(--ivory);
      font-family: var(--font-sans);
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      border-radius: 2px;
      border-left: 2px solid var(--gold);
      backdrop-filter: blur(8px);
      pointer-events: none;
    }
    @media (max-width: 768px) {
      .map-embed-wrap iframe { height: 320px; }
    }

  
    /* BROCHURE DOWNLOAD BUTTON */
    .brochure-action {
      margin-top: 16px;
      max-width: 480px;
    }
    .btn-brochure {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 22px;
      background: transparent;
      color: var(--navy);
      border: 1px solid rgba(10,31,68,0.2);
      border-radius: 2px;
      font-family: var(--font-sans);
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .btn-brochure:hover {
      background: var(--navy);
      color: var(--ivory);
      border-color: var(--navy);
      transform: translateY(-1px);
    }
    .btn-brochure svg {
      flex-shrink: 0;
    }


/* ═══════════════════════════════════════════════════════════
   2026-10 additions: multi-page nav, language dropdown, currency,
   deed grid, photo grid, brokers / FAQ pages, solo links
   ═══════════════════════════════════════════════════════════ */
:root{
  --font-sans:'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:'Noto Serif Thai', 'Cormorant Garamond', serif;
  --font-italic:'Cormorant Garamond', 'Noto Serif Thai', serif;
}
html.i18n-wait body{opacity:0}
body{transition:opacity .2s ease}
.page{display:block}

/* Burmese: swap in a Myanmar face and give the taller script more room */
body[data-lang="my"]{font-family:'Noto Sans Myanmar','Sarabun',sans-serif;line-height:1.95}
body[data-lang="my"] h1,body[data-lang="my"] h2,body[data-lang="my"] h3,body[data-lang="my"] h4,
body[data-lang="my"] .eyebrow,body[data-lang="my"] .section-title em,body[data-lang="my"] .card-title em{
  font-family:'Noto Serif Myanmar','Noto Sans Myanmar',serif !important;font-style:normal !important;line-height:1.5 !important;letter-spacing:0 !important;
}
body[data-lang="my"] .hero-title,body[data-lang="my"] .portfolio-title,body[data-lang="my"] .page-hero-title{font-size:clamp(30px,5vw,58px) !important}
body[data-lang="zh"] em,body[data-lang="ja"] em,body[data-lang="ko"] em{font-style:normal}

/* ───── Nav ───── */
a.brand{text-decoration:none}
a.nav-back{text-decoration:none}
.nav-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-inner{gap:clamp(12px,2vw,24px)}
.nav-menu{margin-left:auto}
.nav-menu + .nav-tools{margin-left:0}
body.site .nav-menu{display:none}
body.site .menu-toggle{display:flex}
@media (min-width:900px){
  body.site .nav-menu{display:flex}
  body.site .menu-toggle{display:none}
}
.nav-menu a.here{color:var(--navy-deep)}
.nav-menu a.here::after{width:100%;left:0}
@media (max-width:1023px){ body.detail .nav-back span:last-child{display:none} }
@media (max-width:520px){ .sukmart-tag{display:none} }
body.solo .nav-back{display:none !important}
body.solo .more-props{display:none}

.lang-dd{position:relative}
.lang-dd-btn{
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 12px 0 11px;
  background:rgba(255,255,255,.55);border:1px solid rgba(10,31,68,.16);border-radius:100px;
  font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--navy-deep);
  cursor:pointer;transition:border-color .25s ease, background .25s ease;white-space:nowrap;
}
.lang-dd-btn:hover,.lang-dd.open .lang-dd-btn{border-color:var(--gold);background:#fff}
.lang-dd-btn svg{width:16px;height:16px;flex:none;opacity:.75}
.lang-dd-btn .chev{width:12px;height:12px;transition:transform .25s ease}
.lang-dd.open .chev{transform:rotate(180deg)}
.lang-dd-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:200;
  min-width:210px;margin:0;padding:6px;list-style:none;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.lang-dd.open .lang-dd-menu{opacity:1;visibility:visible;transform:none}
.lang-dd-menu button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px 12px;background:none;border:none;border-radius:6px;cursor:pointer;
  font-size:14.5px;color:var(--ink);text-align:left;line-height:1.3;
  font-family:'Sarabun','Noto Sans Myanmar',-apple-system,BlinkMacSystemFont,sans-serif;
}
.lang-dd-menu button small{font-size:10.5px;letter-spacing:.08em;color:var(--ink-soft);opacity:.7;font-family:var(--font-sans)}
.lang-dd-menu button:hover{background:var(--navy-mist)}
.lang-dd-menu button.active{background:var(--navy-deep);color:var(--ivory)}
.lang-dd-menu button.active small{color:var(--gold-soft);opacity:1}
.mobile-drawer ul a.here{color:var(--gold)}

/* ───── Price: converted line + currency chips ───── */
.price-fx{
  margin-top:8px;font-family:var(--font-serif);font-size:clamp(17px,2.2vw,21px);
  color:var(--navy-soft);letter-spacing:0;
}
.price-fx[hidden],.price-fx-note[hidden],.cur-chips[hidden]{display:none !important}
.price-box-sub span{font-style:inherit}
.cur-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.cur-chip{
  padding:4px 11px;border:1px solid rgba(10,31,68,.18);border-radius:100px;background:transparent;
  font-family:var(--font-sans);font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--navy);
  cursor:pointer;opacity:.7;transition:all .2s ease;
}
.cur-chip:hover{opacity:1;border-color:var(--gold)}
.cur-chip.active{background:var(--navy-deep);border-color:var(--navy-deep);color:var(--ivory);opacity:1}

/* ───── Title documents ───── */
.deed-grid{display:grid;gap:clamp(14px,2vw,28px);grid-template-columns:repeat(2,1fr);margin:0 auto 20px}
.deed-grid[data-count="1"]{grid-template-columns:minmax(0,340px);justify-content:center}
@media (min-width:760px){
  .deed-grid[data-count="3"]{grid-template-columns:repeat(3,1fr);max-width:1040px}
  .deed-grid[data-count="5"]{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:759px){ .deed-grid[data-count="3"] .deed:last-child,.deed-grid[data-count="5"] .deed:last-child{grid-column:1 / -1;max-width:calc(50% - 7px);justify-self:center} }
.deed{margin:0;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}
.deed:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.deed img{width:100%;height:auto;display:block;aspect-ratio:1100/1554;object-fit:cover}
.deed figcaption{padding:12px 14px 14px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:2px}
.deed figcaption b{font-family:var(--font-serif);font-weight:500;font-size:15px;color:var(--navy-deep);line-height:1.4}
.deed-area{font-size:12.5px;color:var(--ink-soft);letter-spacing:.02em}
.deed-note{max-width:820px;margin:0 auto 10px;text-align:center;font-size:13px;color:var(--ink-soft);line-height:1.7}
.deed-note + .docs-row,.deed-note + .deed-note + .docs-row{margin-top:clamp(36px,5vw,64px)}
.docs-row.docs-row-list{grid-template-columns:1fr;margin-top:clamp(36px,5vw,64px)}
@media (min-width:1024px){
  .docs-row.docs-row-list{grid-template-columns:1fr}
  .docs-row-list .docs-list{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
}

/* ───── Extra farm photos ───── */
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
@media (min-width:900px){.photo-grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}}
.p-item{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:3/2;background:rgba(255,255,255,.06)}
.p-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.p-item:hover img{transform:scale(1.06)}
.p-cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  background:linear-gradient(transparent, rgba(5,13,36,.82));
  color:var(--ivory);font-size:12.5px;letter-spacing:.02em;line-height:1.4;pointer-events:none;
}

/* ───── Lightbox prev / next ───── */
.lb-prev,.lb-next{
  display:none;position:fixed;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(247,244,236,.35);
  background:rgba(5,13,36,.55);color:var(--ivory);font-size:22px;cursor:pointer;line-height:1;
}
.lb.multi .lb-prev,.lb.multi .lb-next{display:block}
.lb-prev{left:14px}.lb-next{right:14px}

/* ───── Inner page hero (brokers, FAQ) ───── */
.page-hero{
  padding:clamp(130px,16vw,190px) clamp(20px,4vw,56px) clamp(56px,7vw,96px);
  text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at top right, rgba(201,169,97,.10), transparent 60%),linear-gradient(180deg,var(--paper) 0%,var(--ivory) 100%);
  border-bottom:1px solid var(--line-soft);
}
.page-hero-inner{max-width:900px;margin:0 auto;position:relative;z-index:2}
.page-hero .eyebrow{margin-bottom:22px;display:block}
.page-hero-title{
  font-family:var(--font-serif);font-weight:300;font-size:clamp(40px,7vw,84px);line-height:1.08;
  color:var(--navy-deep);letter-spacing:-.015em;margin-bottom:24px;
}
.page-hero-title em{font-family:'Cormorant Garamond','Noto Serif Thai',serif;font-style:italic;color:var(--gold);font-weight:300}
.page-hero .lead{font-size:clamp(16px,1.6vw,19px);color:var(--ink-soft);max-width:640px;margin:0 auto;line-height:1.85}
.page-hero .stats{margin-top:48px;justify-content:center}

.terms,.linktool,.plist,.broker-band,.more-props{padding:clamp(72px,9vw,128px) clamp(20px,4vw,56px)}
.linktool{background:var(--ivory)}
.terms-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:700px){.terms-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.terms-grid{grid-template-columns:repeat(3,1fr)}}
.term{background:var(--paper);padding:clamp(26px,3vw,40px)}
.term-num{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--gold);margin-bottom:12px}
.term h3{font-family:var(--font-serif);font-weight:500;font-size:20px;color:var(--navy-deep);margin-bottom:10px;line-height:1.4}
.term p{font-size:15px;color:var(--ink-soft);line-height:1.8}

.lt-box{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);padding:clamp(22px,3.4vw,44px);box-shadow:var(--shadow-sm);max-width:980px;margin:0 auto}
.lt-fields{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){.lt-fields{grid-template-columns:1.4fr 1fr 1.2fr}}
.lt-field{display:flex;flex-direction:column;gap:7px}
.lt-field > span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.lt-field select,.lt-out input{
  width:100%;height:50px;padding:0 14px;border:1px solid rgba(10,31,68,.22);border-radius:3px;background:#fff;
  font-family:'Sarabun','Noto Sans Myanmar',sans-serif;font-size:16px;color:var(--ink);
}
.lt-field select:focus,.lt-out input:focus{outline:2px solid var(--gold);outline-offset:1px}
.lt-field select:disabled{opacity:.45}
.lt-out{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.lt-out input{flex:1 1 280px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:var(--navy-mist)}
.lt-out .btn{height:50px;padding:0 22px}
.lt-qr{display:flex;align-items:center;gap:18px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line-soft)}
.lt-qr-img{width:132px;height:132px;flex:none;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.lt-qr-img img{width:100%;height:100%;image-rendering:pixelated}
.lt-qr p{font-size:13px;color:var(--ink-soft);line-height:1.7}

.plist-table{border-top:1px solid var(--line)}
.plist-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;align-items:center;
  padding:22px 6px;border-bottom:1px solid var(--line);transition:background .25s ease, padding .25s ease;
}
@media (min-width:860px){.plist-row{grid-template-columns:2.2fr 1fr 1fr 1.1fr;padding:26px 14px}}
.plist-row:hover{background:var(--ivory)}
.plist-name{grid-column:1 / -1}
@media (min-width:860px){.plist-name{grid-column:auto}}
.plist-name b{display:block;font-family:var(--font-serif);font-weight:500;font-size:19px;color:var(--navy-deep);line-height:1.4}
.plist-name > span{font-size:13px;color:var(--ink-soft)}
.plist-cell small{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);opacity:.75}
.plist-cell > span{font-size:15.5px;color:var(--ink)}
.plist-price > span{font-family:var(--font-serif);font-size:18px;color:var(--navy-deep)}
.plist-price em{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:15px}

.broker-band{background:var(--ivory);border-top:1px solid var(--line-soft)}
.broker-band-inner{display:grid;gap:32px;align-items:end}
@media (min-width:960px){.broker-band-inner{grid-template-columns:1.5fr 1fr;gap:64px}}
.broker-band .section-title{margin:18px 0 16px}
.broker-band-cta{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:960px){.broker-band-cta{justify-content:flex-end}}

/* ───── Other plots strip on property pages ───── */
.more-props{background:var(--ivory);border-top:1px solid var(--line-soft)}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:900px){.more-grid{grid-template-columns:repeat(4,1fr);gap:24px}}
.more-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}
.more-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.more-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.more-card div{padding:14px 16px 16px}
.more-card b{display:block;font-family:var(--font-serif);font-weight:500;font-size:16px;color:var(--navy-deep);line-height:1.4}
.more-card span{font-size:12.5px;color:var(--ink-soft)}

@media print{
  .more-props,.cur-chips,.lang-dd,.nav-tools,.lb-prev,.lb-next,.broker-band,.linktool{display:none !important}
  .deed-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8pt !important;max-width:none !important;break-inside:avoid;page-break-inside:avoid}
  .deed-grid[data-count="1"]{grid-template-columns:40% !important;justify-content:center}
  .deed-grid[data-count="5"]{grid-template-columns:repeat(5,1fr) !important}
  .deed{box-shadow:none !important;transform:none !important;break-inside:avoid;page-break-inside:avoid}
  .deed img{object-fit:contain !important;height:auto !important;max-height:none !important}
  .deed figcaption{padding:4pt 5pt}
  .deed figcaption b{font-size:8pt !important}
  .deed-area,.deed-note{font-size:7pt !important}
  .photo-grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:6pt !important;margin-top:8pt !important}
  .p-item{aspect-ratio:3/2;break-inside:avoid;page-break-inside:avoid}
  .p-item img{object-fit:cover !important;width:100% !important;height:100% !important;max-height:none !important}
  .p-cap{font-size:6.5pt !important;padding:10pt 4pt 3pt !important}
  .docs-row-list .docs-list{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:10pt !important}
  .price-fx{font-size:11pt !important}
}

/* Burmese shaping breaks under letter-spacing / uppercase tracking */
body[data-lang="my"] *{letter-spacing:0 !important;text-transform:none !important}
body[data-lang="my"] :not(h1):not(h2):not(h3):not(h4):not(h1 *):not(h2 *):not(h3 *):not(h4 *){font-family:'Noto Sans Myanmar','Sarabun',sans-serif !important;font-style:normal !important}
body[data-lang="my"] em,body[data-lang="my"] .ital,body[data-lang="my"] .price-box-unit,body[data-lang="my"] .price-box-sub{font-style:normal !important;font-family:'Noto Sans Myanmar','Sarabun',sans-serif !important}

/* Longer words in translated headings: step the hero size down so names don't break mid-word */
body[data-lang="ja"] .hero-title,body[data-lang="ru"] .hero-title,body[data-lang="en"] .hero-title,body[data-lang="ko"] .hero-title,body[data-lang="zh"] .hero-title{font-size:clamp(32px,4.4vw,62px) !important;line-height:1.18 !important}
body[data-lang="ja"] .hero-title,body[data-lang="ko"] .hero-title,body[data-lang="zh"] .hero-title{word-break:keep-all;line-break:strict}

/* Farm certificates */
.cert-head{font-family:var(--font-serif);font-weight:500;font-size:clamp(20px,2.2vw,26px);color:var(--navy-deep);text-align:center;margin:clamp(40px,5vw,64px) 0 22px}
.deed-grid.cert-grid{max-width:900px;align-items:start;grid-template-columns:1fr}
@media (min-width:700px){.deed-grid.cert-grid[data-count="2"]{grid-template-columns:1.414fr 1fr}}
.deed-grid.cert-grid[data-count="1"]{grid-template-columns:minmax(0,560px);justify-content:center}
.cert-grid .deed img{aspect-ratio:auto;object-fit:contain}
.cert-grid .deed:last-child{grid-column:auto !important;max-width:none !important;justify-self:stretch !important}
@media print{.deed-grid.cert-grid{grid-template-columns:1.414fr 1fr !important}.deed-grid.cert-grid[data-count="1"]{grid-template-columns:60% !important}.cert-head{font-size:11pt !important;margin:10pt 0 6pt !important}}