@layer reset, base, components, responsive;

@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;text-rendering:optimizeLegibility}
  body,h1,h2,h3,h4,p,figure{margin:0}
  img{display:block;width:100%;height:100%;object-fit:cover}
  a{color:inherit;text-decoration:none}
  button,input,select,textarea{font:inherit}
}

@layer base {
  :root{
    --lagoon:#0b4650;--deep:#063038;--deep-2:#041f25;--clay:#d36f50;
    --shell:#fffdf8;--sand:#f2eadf;--sand-2:#e7d9c8;--palm:#63796f;
    --champagne:#d8b77a;--ink:#173238;--muted:#657378;--white:#fff;
    --line:rgba(23,50,56,.14);--glass:rgba(255,253,248,.82);
    --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
    --sans:Inter,Manrope,"Segoe UI",Arial,sans-serif;
    --shadow-sm:0 12px 35px rgba(6,48,56,.09);
    --shadow:0 30px 90px rgba(6,48,56,.16);
    --radius:28px;--radius-sm:18px;
  }
  body{min-width:320px;overflow-x:hidden;background:var(--sand);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
  body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 8% 12%,rgba(211,111,80,.10),transparent 26rem),radial-gradient(circle at 92% 45%,rgba(11,70,80,.10),transparent 30rem)}
  .container{width:min(1240px,calc(100% - 64px));margin-inline:auto}
  .serif{font-family:var(--serif);font-weight:400;letter-spacing:-.045em}
  .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--clay);font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
  .eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
  .section{position:relative;padding:112px 0}
  .paper{background:var(--shell)}
  .teal{overflow:hidden;background:linear-gradient(145deg,var(--deep),var(--lagoon));color:#fff}
  .teal::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-240px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018)}
}

@layer components {
  .header{position:sticky;top:0;z-index:50;background:rgba(4,31,37,.88);color:#fff;border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(20px) saturate(130%)}
  .nav{position:relative;min-height:82px;display:flex;align-items:center;gap:24px}
  .brand{position:relative;margin-right:auto;padding-left:43px;font:400 1.65rem/1 var(--serif);letter-spacing:-.045em;white-space:nowrap}
  .brand::before{content:"P";position:absolute;left:0;top:50%;display:grid;place-items:center;width:32px;height:32px;transform:translateY(-50%);border:1px solid rgba(216,183,122,.72);border-radius:50% 50% 44% 56%;color:var(--champagne);font:500 1rem var(--serif)}
  .brand small{display:block;margin-top:6px;color:rgba(255,255,255,.55);font:700 .52rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
  .links{display:flex;align-items:center;gap:22px;font-size:.8rem;font-weight:650}
  .links a{position:relative;color:rgba(255,255,255,.82);transition:color .2s}
  .links a::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:var(--champagne);transition:right .25s}
  .links a:hover{color:#fff}.links a:hover::after{right:0}
  .lang{display:grid;place-items:center;min-width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:50%;font-size:.66rem;font-weight:800;letter-spacing:.08em}
  .mobile-menu{display:none;appearance:none;border:0;background:transparent;color:#fff;font-size:1.45rem;cursor:pointer}

  .btn{display:inline-flex;min-height:52px;align-items:center;justify-content:center;padding:0 24px;border:1px solid transparent;border-radius:999px;font-size:.82rem;font-weight:800;letter-spacing:.02em;transition:transform .22s,box-shadow .22s,background .22s}
  .btn:hover{transform:translateY(-2px)}
  .btn-coral{background:var(--clay);color:#fff;box-shadow:0 15px 38px rgba(211,111,80,.26)}
  .btn-coral:hover{box-shadow:0 19px 45px rgba(211,111,80,.34)}
  .btn-outline{border-color:rgba(255,255,255,.48);color:#fff;background:rgba(255,255,255,.04);backdrop-filter:blur(10px)}
  .btn-light{background:var(--shell);color:var(--deep)}
  .actions{display:flex;flex-wrap:wrap;gap:12px}

  .hero,.page-hero{position:relative;overflow:hidden;color:#fff;background:var(--deep)}
  .hero{min-height:780px;display:grid;align-items:end}
  .hero>img{position:absolute;inset:0}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,31,37,.92),rgba(4,31,37,.45) 53%,rgba(4,31,37,.08)),linear-gradient(0deg,rgba(4,31,37,.55),transparent 50%)}
  .hero-content{position:relative;z-index:2;max-width:850px;padding:145px 0 110px}
  .hero .eyebrow,.page-hero .eyebrow,.teal .eyebrow{color:#f0b8a6}
  .hero h1{max-width:820px;margin:18px 0 28px;font-size:clamp(4rem,8vw,8rem);line-height:.83;text-wrap:balance}
  .hero p{max-width:690px;margin-bottom:32px;color:rgba(255,255,255,.82);font-size:1.16rem;line-height:1.75}
  .language-hero::before{content:"";position:absolute;z-index:2;right:7vw;bottom:7vw;width:210px;aspect-ratio:1;border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.035)}

  .page-hero{padding:92px 0 82px;background:linear-gradient(125deg,var(--deep-2),var(--lagoon))}
  .page-hero::before{content:"";position:absolute;right:-170px;top:-250px;width:650px;height:650px;border:1px solid rgba(216,183,122,.23);border-radius:50%;box-shadow:0 0 0 80px rgba(216,183,122,.025),0 0 0 160px rgba(216,183,122,.018)}
  .page-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.72fr);gap:78px;align-items:center}
  .breadcrumbs{margin-bottom:30px;color:rgba(255,255,255,.52);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
  .page-hero h1{max-width:800px;margin:18px 0 24px;font-size:clamp(3.6rem,6.7vw,7rem);line-height:.86;text-wrap:balance}
  .page-hero p{max-width:680px;margin-bottom:31px;color:rgba(255,255,255,.76);font-size:1.05rem;line-height:1.76}
  .page-hero-media{position:relative;aspect-ratio:.82;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:46% 46% 18px 18px;box-shadow:var(--shadow)}
  .page-hero-media::after{content:"KOH PHANGAN";position:absolute;right:-1px;bottom:-1px;padding:13px 18px;background:var(--shell);color:var(--lagoon);font-size:.58rem;font-weight:900;letter-spacing:.18em}
  .page-hero-media img{transition:transform .8s ease}.page-hero-media:hover img{transform:scale(1.025)}

  .signature-strip{position:relative;z-index:4;margin-top:-1px;background:var(--shell);border-bottom:1px solid var(--line)}
  .signature-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .signature-item{padding:23px 26px;border-right:1px solid var(--line)}.signature-item:last-child{border:0}
  .signature-item strong{display:block;color:var(--lagoon);font:400 1.2rem var(--serif)}
  .signature-item span{display:block;margin-top:3px;color:var(--muted);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase}

  .section-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:60px;align-items:end;margin-bottom:46px}
  .section-head h2{max-width:850px;margin-top:12px;font-size:clamp(2.8rem,5vw,5.5rem);line-height:.93;text-wrap:balance}
  .section-head p{color:var(--muted);line-height:1.78}.teal .section-head p{color:rgba(255,255,255,.65)}
  .content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.two-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1040px;margin:auto}
  .content-card{position:relative;overflow:hidden;background:var(--shell);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .28s,box-shadow .28s}
  .content-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .content-card figure{position:relative;aspect-ratio:1.22;overflow:hidden}.content-card figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,48,56,.18),transparent 45%)}
  .content-card img{transition:transform .65s}.content-card:hover img{transform:scale(1.035)}
  .content-card>div{padding:28px 30px 32px}.content-card h2,.content-card h3{margin-bottom:10px;color:var(--lagoon);font:400 2rem/1.05 var(--serif);letter-spacing:-.035em}.content-card p{color:var(--muted);line-height:1.72}

  .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:90px;align-items:start}
  .article-copy{position:relative;padding-left:48px;font-family:var(--serif);font-size:1.18rem;line-height:1.9}
  .article-copy::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--clay),transparent)}
  .article-copy h2{max-width:850px;margin:15px 0 24px;color:var(--lagoon);font-size:clamp(2.6rem,4.4vw,4.7rem);line-height:1;letter-spacing:-.045em}
  .article-copy p+p{margin-top:18px}.article-copy p{color:#43585d}
  .related{position:sticky;top:112px;padding:29px;background:rgba(255,253,248,.74);border:1px solid rgba(23,50,56,.12);border-radius:var(--radius);box-shadow:var(--shadow-sm);backdrop-filter:blur(18px)}
  .related-link{display:block;padding:18px 0;border-bottom:1px solid var(--line)}.related-link:last-child{border:0;padding-bottom:4px}
  .related-link span{display:block;margin-bottom:5px;color:var(--clay);font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
  .related-link strong{display:block;color:var(--lagoon);font:400 1.16rem/1.3 var(--serif)}

  .steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:15px;counter-reset:steps}
  .step{min-height:255px;padding:31px 27px;border:1px solid rgba(255,255,255,.17);border-radius:var(--radius-sm);background:rgba(255,255,255,.045);backdrop-filter:blur(10px)}
  .step::before{counter-increment:steps;content:"0" counter(steps);display:block;margin-bottom:48px;color:#f0b8a6;font-size:.68rem;font-weight:900;letter-spacing:.18em}
  .step h3{margin-bottom:10px;font:400 1.6rem var(--serif)}.step p{color:rgba(255,255,255,.62);line-height:1.65}

  .faq-form{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:start}.form-heading{margin-top:14px;font-size:clamp(3rem,5.4vw,5.5rem);line-height:.91}
  .faq-form>div>p{max-width:480px;margin-top:22px;color:var(--muted);line-height:1.8}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:38px;background:var(--shell);border:1px solid rgba(23,50,56,.1);border-radius:var(--radius);box-shadow:var(--shadow)}
  .form h3,.form p,.form .full{grid-column:1/-1}.form h3{color:var(--lagoon);font:400 2.55rem/1 var(--serif);letter-spacing:-.04em}.form p{margin-bottom:8px;color:var(--muted)}
  .form label{display:grid;gap:7px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .form input,.form textarea,.form select{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:13px;outline:none;background:#faf6ef;color:var(--ink);text-transform:none;transition:border .2s,box-shadow .2s}
  .form input:focus,.form textarea:focus,.form select:focus{border-color:var(--clay);box-shadow:0 0 0 3px rgba(211,111,80,.1)}.form textarea{min-height:120px;resize:vertical}.form-status{grid-column:1/-1;color:var(--lagoon);font-weight:750}
  .faq details{padding:22px 0;border-top:1px solid var(--line)}.faq summary{cursor:pointer;color:var(--lagoon);font:400 1.45rem var(--serif)}.faq details p{max-width:750px;padding-top:10px;color:var(--muted)}

  .footer{position:relative;overflow:hidden;padding:82px 0 30px;background:var(--deep-2);color:#fff}.footer::after{content:"";position:absolute;right:-180px;bottom:-330px;width:650px;height:650px;border:1px solid rgba(216,183,122,.16);border-radius:50%}
  .footer-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:55px}.footer h4{margin-bottom:17px;color:var(--champagne);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}.footer a,.footer p{display:block;margin:9px 0;color:rgba(255,255,255,.58);line-height:1.65;transition:color .2s}.footer a:hover{color:#fff}
  .footer-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;margin-top:62px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.38);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
  .wa{position:fixed;z-index:45;right:24px;bottom:24px;display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:#25d366;color:#fff;box-shadow:0 14px 40px rgba(4,31,37,.28);font-size:1.1rem;font-weight:900}
}

@layer responsive {
  @media(max-width:1080px){
    .container{width:min(100% - 42px,1240px)}.links,.nav>.btn,.lang{display:none}.mobile-menu{display:block}
    .header .links.open{display:flex;position:absolute;top:82px;left:-21px;right:-21px;flex-direction:column;align-items:flex-start;padding:26px 32px;background:rgba(4,31,37,.98);border-bottom:1px solid rgba(255,255,255,.12)}
    .page-hero-grid{grid-template-columns:1fr .7fr;gap:42px}.page-hero h1{font-size:clamp(3.2rem,7.4vw,5.6rem)}
    .section-head{grid-template-columns:1fr}.article-layout{grid-template-columns:1fr;gap:48px}.related{position:static}.steps{grid-template-columns:repeat(2,1fr)}.faq-form{grid-template-columns:1fr;gap:46px}.footer-grid{grid-template-columns:1.25fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}
  }
  @media(max-width:760px){
    .container{width:min(100% - 28px,1240px)}.section{padding:78px 0}.nav{min-height:72px}.header .links.open{top:72px}.brand{font-size:1.45rem}
    .hero{min-height:690px}.hero-content{padding:115px 0 72px}.hero h1{font-size:clamp(3.7rem,17vw,6rem)}.hero p{font-size:1rem}.language-hero::before{display:none}
    .page-hero{padding:70px 0 58px}.page-hero-grid{grid-template-columns:1fr;gap:42px}.page-hero-media{width:min(100%,470px);aspect-ratio:1.15;border-radius:28px 28px 12px 12px}.page-hero h1{font-size:clamp(3rem,14vw,5rem)}
    .signature-grid{grid-template-columns:repeat(2,1fr)}.signature-item:nth-child(2){border-right:0}.signature-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
    .two-cards,.content-grid{grid-template-columns:1fr}.article-copy{padding-left:25px}.article-copy h2{font-size:2.65rem}.steps{grid-template-columns:1fr}.step{min-height:0}.step::before{margin-bottom:25px}
    .form{grid-template-columns:1fr;padding:25px}.form>*{grid-column:1/-1}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}.wa{right:16px;bottom:16px;width:52px;height:52px}
  }
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
}