/* FARANG 2.0 — black & metallic-gold theme layer
   Loaded AFTER each page's own <style>. Content, links and prices live in the HTML and are untouched.
   Remove this one <link> to roll the look back instantly. */
:root{
  --k0:#070707; --k1:#0e0d0c; --k2:#161513; --k3:#201e1b;
  --g1:#f6e3a8; --g2:#d6b46a; --g3:#a7823f; --g4:#6e5326;
  --cream:#f3ead7; --txt:#ddd5c4; --mut:#a89f8e;
  --hair:rgba(214,180,106,.30); --hair2:rgba(214,180,106,.14);
  --metal:linear-gradient(100deg,#8a6a2f 0%,#d6b46a 22%,#f6e3a8 42%,#c9a253 58%,#e9cf8a 74%,#8a6a2f 100%);
  --serif:"Playfair Display","DM Serif Display",Georgia,serif;
  --sans:Manrope,"Helvetica Neue",Arial,sans-serif;
  /* legacy tokens remapped so existing rules inherit the new palette */
  --sand:var(--k0); --sand2:var(--k1); --ink:var(--k0); --ink2:var(--k2);
  --muted:var(--mut); --gold:var(--g2); --goldl:var(--g2); --line:var(--hair2);
  color-scheme:dark;
}
html{background:var(--k0)}
body{background:var(--k0)!important;color:var(--txt)!important;font-family:var(--sans)}
h1,h2,.f-serif{font-family:var(--serif)!important;font-weight:600;color:var(--cream);letter-spacing:-.01em}
h3{color:var(--cream)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--g1)!important;outline-offset:3px}
::selection{background:var(--g3);color:#000}

/* metallic text */
.metal{background:var(--metal);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}

/* ---------- header / wordmark (shared) ---------- */
header{background:rgba(7,7,7,.86)!important;border-bottom:1px solid var(--hair)!important;position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wm{display:inline-grid;justify-items:center;line-height:1;text-decoration:none;gap:5px}
.wm b{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:.32em;margin-right:-.32em}
.wm small{font:700 8.5px/1 var(--sans);letter-spacing:.42em;margin-right:-.42em;color:var(--g2);text-transform:uppercase}
.topnav{display:flex;gap:22px;align-items:center}
.topnav a{font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--txt)!important;padding:8px 0;border-bottom:1px solid transparent}
.topnav a:hover{color:var(--g1)!important;border-bottom-color:var(--g2)}
@media(max-width:900px){.topnav .tn{display:none}}

/* ---------- buttons ---------- */
.pill{border-radius:999px!important;letter-spacing:.02em}
.pill.gold,.pill.dark,.btn-gold{position:relative;overflow:hidden;background:var(--metal)!important;background-size:180% 100%!important;color:#120e06!important;border:0!important;box-shadow:0 8px 28px -10px rgba(214,180,106,.55);transition:background-position .6s ease,transform .2s ease}
.pill.gold:hover,.pill.dark:hover,.btn-gold:hover{background-position:100% 0!important;transform:translateY(-1px)}
.pill.gold::after,.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 5.5s ease-in-out 1.2s infinite;pointer-events:none}
@keyframes sweep{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.pill.ghost{border:1px solid var(--g2)!important;color:var(--cream)!important;background:transparent}
.pill.ghost:hover{background:rgba(214,180,106,.1)}

/* ---------- sections ---------- */
section{position:relative}
.eyebrow,.kicker{font:700 11.5px/1.2 var(--sans)!important;letter-spacing:.32em!important;text-transform:uppercase;color:var(--g2)!important}
.rule{display:flex;align-items:center;gap:12px;color:var(--g2);margin:14px 0}
.rule::before,.rule::after{content:"";height:1px;flex:1;max-width:120px;background:linear-gradient(90deg,transparent,var(--g2))}
.rule::after{background:linear-gradient(90deg,var(--g2),transparent)}
.rule i{width:7px;height:7px;background:var(--g2);transform:rotate(45deg)}
.sec-title{font-size:clamp(30px,4.2vw,46px)!important;line-height:1.08}

/* image slot (ChatGPT artwork goes here; gradient is the no-image fallback) */
.slot{position:absolute;inset:0;background-color:var(--k1);background-size:cover;background-position:center;
  background-image:radial-gradient(120% 80% at 75% 20%,rgba(214,180,106,.20),transparent 55%),radial-gradient(90% 70% at 10% 90%,rgba(110,83,38,.35),transparent 60%),linear-gradient(160deg,#141210,#050505)}
.slot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,.15) 0%,rgba(7,7,7,.55) 55%,var(--k0) 100%)}
.preview-labels .slot::before{content:attr(data-slot);position:absolute;z-index:2;right:12px;top:12px;font:600 10.5px/1.3 var(--sans);letter-spacing:.06em;color:#120e06;background:var(--g2);padding:5px 8px;border-radius:4px;max-width:70%;text-align:right}

/* ---------- HOME ---------- */
.p-home .hero{padding:0!important;overflow:hidden;min-height:min(92vh,860px);display:flex;align-items:flex-end;border-bottom:1px solid var(--hair)}
.p-home .hero .wrap{position:relative;z-index:1;padding-top:120px;padding-bottom:56px;gap:20px}
.p-home .hero h1{font-size:clamp(42px,7vw,84px)!important;max-width:900px;line-height:1.02}
.p-home .hero p{color:var(--txt)!important;font-size:18px}
.p-home .hero .availability{color:var(--mut)!important;font-size:13px}
.frame{position:absolute;inset:22px;pointer-events:none;z-index:1}
.frame i{position:absolute;width:56px;height:56px;border:1px solid var(--g2)}
.frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.statement{font:700 12px/1.4 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--g1)}
.service-nav a{background:rgba(22,21,19,.72)!important;border:1px solid var(--hair)!important;color:var(--cream)!important;border-radius:999px!important;font-size:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s,color .2s}
.service-nav a:hover{border-color:var(--g2)!important;color:var(--g1)!important}

/* four pillars */
.pillars{padding:0!important;background:var(--k0)}
.pillars .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--hair)}
.pillar{position:relative;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;text-decoration:none;overflow:hidden;border-right:1px solid var(--hair)}
.pillar:last-child{border-right:0}
.pillar .slot{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pillar:hover .slot{transform:scale(1.06)}
.pillar>*:not(.slot){position:relative;z-index:1}
.pillar .n{font:600 12px/1 var(--sans);letter-spacing:.3em;color:var(--g2)}
.pillar h3{font:600 28px/1.05 var(--serif)!important;letter-spacing:.14em;text-transform:uppercase;margin:10px 0 8px}
.pillar p{color:var(--txt);font-size:14px;max-width:30ch}
.pillar .go{margin-top:14px;font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--g1)}
.pillar::after{content:"";position:absolute;left:26px;right:26px;bottom:0;height:2px;background:var(--metal);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.pillar:hover::after{transform:scaleX(1)}
@media(max-width:900px){.pillars .grid4{grid-template-columns:1fr 1fr}.pillar{min-height:260px;border-bottom:1px solid var(--hair)}.pillar:nth-child(2n){border-right:0}}
@media(max-width:520px){.pillar{min-height:210px;padding:18px}.pillar h3{font-size:21px!important;letter-spacing:.1em}.pillar p{font-size:13px}}

/* visa section */
.inkbg{background:var(--k1)!important;color:var(--txt)!important;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2)}
.inkbg p{color:var(--txt)!important}
.vcard,.area,.box{background:linear-gradient(180deg,var(--k3),var(--k2))!important;border:1px solid var(--hair2)!important;border-radius:4px!important;box-shadow:0 1px 0 rgba(246,227,168,.06) inset;transition:border-color .25s,transform .25s}
.vcard:hover,.area:hover{border-color:var(--hair)!important;transform:translateY(-2px)}
.vcard h3{font:600 20px/1.2 var(--serif)}
.vtop span{color:var(--g1)!important;font-weight:700}
.small{color:var(--mut)!important}
.small a{color:var(--g2)!important}
.lead,ol p,.area p{color:var(--txt)!important}
.sand2{background:var(--k1)!important}
ol b{background:transparent!important;border:1px solid var(--g2);color:var(--g1)!important;font-family:var(--serif);border-radius:50%!important}
.box .lead{color:var(--txt)!important}
#homes a[href="/lagoon/"]{color:var(--g1)}

/* stay & play: keep markup, align card to theme */
#stay-play{background:var(--k0)!important;border-top:1px solid var(--hair2)}
#stay-play h2{font-family:var(--serif)!important;font-weight:600!important}
#stay-play>div>div>div[style*="border:1px solid #3a3833"]{border-color:var(--hair2)!important;border-radius:4px!important;background:var(--k2)}
#stay-play a[href="/lagoon/"]{background:var(--k2)!important;border:1px solid var(--hair);border-radius:4px!important}
#stay-play a[href="/lagoon/"] h3{color:var(--cream)!important;font-family:var(--serif)!important}
#stay-play a[href="/lagoon/"] p{color:var(--txt)!important}
#stay-play a[href="/lagoon/"] b{color:var(--g2)!important}
#stay-play a[href="/lagoon/"] span{color:var(--g1)}
#stay-play a[href="/lagoon/"] img{transition:transform 1s}
#stay-play a[href="/lagoon/"]:hover img{transform:scale(1.04)}
#stay-play div[style*="background:#2A2927"]{background:var(--k2)!important;border:1px solid var(--hair2);border-radius:4px!important}
#sp-stay{background:var(--metal)!important;color:#120e06!important}

.contact{background:var(--k1)!important}
.contact h2{font-size:clamp(32px,4.5vw,48px)!important}
footer{background:#030303!important;border-top:1px solid var(--hair);color:var(--mut)!important}
footer a{color:var(--txt)}
footer .wm{justify-items:start}footer .wm small{margin-right:0}
.wabar{background:rgba(7,7,7,.94)!important;border-top:1px solid var(--g3)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wabar .w{background:var(--metal)!important;color:#120e06!important}
.wabar .c{border-color:var(--g2)!important;color:var(--cream)!important}

/* scroll reveal (progressive: content is visible without JS) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.js .rv.in{opacity:1;transform:none}

/* ---------- PRICES ---------- */
.p-prices .wrap{max-width:860px}
.p-prices header .wrap{max-width:1100px}
.p-prices .phero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair)}
.p-prices .phero .in{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:72px 20px 40px}
.p-prices h1{font-size:clamp(40px,7vw,68px)!important;margin:14px 0 12px!important}
.p-prices .intro{color:var(--txt)!important;font-size:17px}
.jump{position:sticky;top:66px;z-index:40;background:rgba(7,7,7,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair2)}
.jump .in{max-width:860px;margin:0 auto;padding:10px 20px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.jump .in::-webkit-scrollbar{display:none}
.jump a{flex:0 0 auto;font:600 12.5px/1 var(--sans);letter-spacing:.06em;color:var(--txt);text-decoration:none;padding:9px 14px;border:1px solid var(--hair2);border-radius:999px}
.jump a:hover{border-color:var(--g2);color:var(--g1)}
.p-prices main section{margin-top:44px;scroll-margin-top:130px}
.p-prices main h2{font:700 12px/1.2 var(--sans)!important;letter-spacing:.3em!important;color:var(--g2)!important;margin:0 0 14px!important;display:flex;align-items:center;gap:12px}
.p-prices main section>h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--hair),transparent)}
.p-prices ul{background:var(--k2)!important;border:1px solid var(--hair2)!important;border-radius:4px!important}
.p-prices li{border-top:1px solid var(--hair2)!important;padding:16px 18px!important;transition:background .2s}
.p-prices li:hover{background:rgba(214,180,106,.05)}
.p-prices li b{color:var(--cream);font-size:15.5px}
.p-prices li span{color:var(--mut)!important}
.p-prices li em{font-family:var(--serif);font-weight:600;font-size:21px;background:var(--metal);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.p-prices .box{background:linear-gradient(135deg,var(--k3),var(--k2))!important;border:1px solid var(--hair)!important;border-radius:4px!important}
.p-prices .box h2{color:var(--g1)!important}
.p-prices .box p{color:var(--txt)!important}
.p-prices .small{color:var(--mut)!important;border-top:1px solid var(--hair2);padding-top:22px}
.p-prices main nav a{color:var(--g2)}
@media(max-width:480px){.p-prices li em{font-size:19px}.jump{top:0}}

/* ---------- LAGOON (partner page in Farang frame) ---------- */
.p-lagoon{padding-bottom:84px}
.p-lagoon .fbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;max-width:1040px;margin:0 auto}
.p-lagoon .fbar .wm b{font-size:18px}
.p-lagoon .fbar>a.home{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--txt);text-decoration:none}
.p-lagoon .partner{max-width:1040px;margin:0 auto;padding:0 18px}
.p-lagoon .hero{background:none!important;position:relative;overflow:hidden;padding:0!important;border-bottom:1px solid var(--hair)}
.p-lagoon .hero .in{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:84px 18px 48px}
.p-lagoon .hero h1{font-size:clamp(36px,6vw,64px)!important;line-height:1.05;margin:12px 0 14px!important}
.p-lagoon .hero h1 em{color:var(--g1)!important;font-style:italic}
.p-lagoon .hero p{color:var(--txt)!important;max-width:620px;font-size:17px}
.p-lagoon .vlogo{font:600 15px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--cream)}
.p-lagoon .vlogo span{color:var(--g2)}
.p-lagoon .kick{color:var(--g2)!important;letter-spacing:.3em}
.p-lagoon section{max-width:1040px;margin:0 auto}
.p-lagoon h2{font-size:clamp(26px,3.6vw,36px)!important}
.p-lagoon .sub,.p-lagoon .note,.p-lagoon section>p{color:var(--mut)!important}
.p-lagoon .gal{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.p-lagoon .gal img{border-radius:4px!important;border:1px solid var(--hair2)}
.p-lagoon .gal .row{display:grid;grid-template-columns:1fr!important;gap:10px;margin:0!important}
.p-lagoon .gal .row img{height:100%!important;min-height:130px}
@media(max-width:700px){.p-lagoon .gal{grid-template-columns:1fr}.p-lagoon .gal .row{grid-template-columns:1fr 1fr!important}.p-lagoon .gal .row img{height:130px!important}}
.p-lagoon .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.p-lagoon .card{background:linear-gradient(180deg,var(--k3),var(--k2))!important;border:1px solid var(--hair2)!important;border-radius:4px!important}
.p-lagoon .card h3{font:600 19px/1.25 var(--serif);color:var(--cream)}
.p-lagoon .card p{color:var(--mut)!important}
.p-lagoon form{background:var(--k2);border:1px solid var(--hair);border-radius:4px;padding:20px;max-width:640px}
.p-lagoon label{color:var(--txt)}
.p-lagoon input,.p-lagoon select{background:var(--k0)!important;border:1px solid var(--hair)!important;color:var(--cream)!important;border-radius:4px!important}
.p-lagoon .btn{background:var(--metal)!important;background-size:180% 100%!important;color:#120e06!important;border-radius:999px!important}
.p-lagoon .note b{color:var(--g1)}
.p-lagoon footer{border-top:1px solid var(--hair)}
.p-lagoon .sticky{background:rgba(7,7,7,.94)!important;border-top:1px solid var(--g3)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}
.p-lagoon header{display:block!important;padding:0!important}
.p-lagoon .gal>img{height:100%;min-height:260px;object-fit:cover}
.p-lagoon .hero .slot::after{background:linear-gradient(90deg,rgba(7,7,7,.92) 0%,rgba(7,7,7,.7) 55%,rgba(7,7,7,.45) 100%),linear-gradient(180deg,transparent 60%,var(--k0))}
@media(max-width:700px){.p-lagoon .hero .slot::after{background:linear-gradient(180deg,rgba(7,7,7,.7),rgba(7,7,7,.88) 60%,var(--k0))}}
.slot:not([data-slot])::before{display:none!important}
.p-lagoon form .row>*{min-width:0}.p-lagoon input,.p-lagoon select{min-width:0}@media(max-width:380px){.p-lagoon form{padding:14px}.p-lagoon form .row{grid-template-columns:1fr}}
.topnav a.pill{font:700 14px/1 var(--sans)!important;letter-spacing:.01em!important;text-transform:none!important;padding:0 20px!important;border-bottom:0!important;color:#120e06!important;white-space:nowrap}
header .wrap{max-width:1240px!important}
.p-home .hero .wrap{max-width:1240px}
@media(max-width:600px){.topnav{gap:14px}.topnav a{font-size:12px}.topnav a.pill{min-height:40px;padding:0 14px!important;font-size:13px!important}.wm b{font-size:19px}
 .statement{letter-spacing:.2em;font-size:11px}.eyebrow{letter-spacing:.2em!important}.frame{inset:12px}.frame i{width:34px;height:34px}.p-home .hero .wrap{padding-top:90px}}
@media(min-width:761px){.p-lagoon .sticky{left:auto!important;right:24px;bottom:24px;background:none!important;border:0!important;padding:0!important}.p-lagoon .sticky .btn{padding:15px 28px;box-shadow:0 10px 30px -8px rgba(0,0,0,.8)}.p-lagoon{padding-bottom:0}
 .p-lagoon .gal{height:460px}.p-lagoon .gal>img{height:100%!important;min-height:0}.p-lagoon .gal .row{grid-template-rows:1fr 1fr;height:100%;min-height:0}.p-lagoon .gal .row img{height:100%!important;min-height:0}}
@media(min-width:900px){.jump .in{flex-wrap:wrap;justify-content:center}}
@media(max-width:520px){.pillar{min-height:250px}.preview-labels .slot::before{font-size:9px;padding:3px 6px;right:6px;top:6px;max-width:80%}}
/* ---- Farang 2.0 stills (ChatGPT, 2026-10-24) ---- */
.p-home .hero>.slot{background-image:linear-gradient(90deg,rgba(7,7,7,.78) 0%,rgba(7,7,7,.45) 45%,rgba(7,7,7,0) 75%),url(/assets/img/farang-H1-1440.webp);background-position:center 35%}
@media(min-width:1500px){.p-home .hero>.slot{background-image:linear-gradient(90deg,rgba(7,7,7,.78) 0%,rgba(7,7,7,.45) 45%,rgba(7,7,7,0) 75%),url(/assets/img/farang-H1.webp)}}
@media(max-width:700px){.p-home .hero>.slot{background-image:linear-gradient(180deg,rgba(7,7,7,0) 0%,rgba(7,7,7,.55) 38%,rgba(7,7,7,.9) 62%),url(/assets/img/farang-H1-M.webp);background-position:center top;background-size:100% auto;background-repeat:no-repeat}}
.pillar:nth-child(1) .slot{background-image:url(/assets/img/farang-S1-stays.webp)}
.pillar:nth-child(2) .slot{background-image:url(/assets/img/farang-S2-experiences.webp)}
.pillar:nth-child(3) .slot{background-image:url(/assets/img/farang-S3-property.webp)}
.pillar:nth-child(4) .slot{background-image:url(/assets/img/farang-S4-visa.webp)}
.pillar .slot::after{background:linear-gradient(180deg,rgba(7,7,7,.05) 0%,rgba(7,7,7,.35) 40%,rgba(7,7,7,.92) 78%,#070707 100%)}
.p-prices .phero>.slot{background-image:linear-gradient(90deg,rgba(7,7,7,.9) 0%,rgba(7,7,7,.6) 50%,rgba(7,7,7,.1) 100%),url(/assets/img/farang-P1.webp);background-position:right center}
@media(max-width:700px){.p-home .hero .wrap{padding-top:min(62vw,300px)!important}
 .p-home .hero>.slot{background-image:linear-gradient(180deg,rgba(7,7,7,0) 0%,rgba(7,7,7,.15) 22%,rgba(7,7,7,.82) 42%,rgba(7,7,7,.95) 60%),url(/assets/img/farang-H1-M.webp)}
 .p-home .hero .statement,.p-home .hero .eyebrow{text-shadow:0 1px 8px rgba(0,0,0,.9)}}
.pillar h3,.pillar p,.pillar .n,.pillar .go{text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.8)}
.pillar:nth-child(2) .slot{background-position:center 30%}
.pillar:nth-child(2) .slot::after{background:linear-gradient(180deg,rgba(7,7,7,.15) 0%,rgba(7,7,7,.5) 35%,rgba(7,7,7,.94) 70%,#070707 100%)}
.pillar:nth-child(3) .slot::after{background:linear-gradient(180deg,rgba(7,7,7,.1) 0%,rgba(7,7,7,.45) 40%,rgba(7,7,7,.93) 75%,#070707 100%)}
@media(max-width:760px){header .topnav a.pill{display:none!important}header .wrap{flex-wrap:nowrap!important}.topnav{gap:16px}}@media(max-width:350px){.wm b{font-size:16px}.topnav{gap:12px}.topnav a{font-size:11px;letter-spacing:.1em}}