/* Vida Group Samui - shared styles for the service pages (/pool, /pest).
   Palette, fonts, header, nav and footer are taken from index.html so the
   pages match the homepage exactly. */

:root{
  --navy: #0a1f28;
  --teal-deep: #0e3b3f;
  --teal: #1e7a72;
  --lagoon: #3fb6ad;
  --foam: #d8ece7;
  --sand: #eae3d3;
  --white: #f7f8f6;
  --gold: #c8a25a;
  --ink: #0a1f28;
}
*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  background: var(--navy);
  color: var(--white);
  font-family:'Work Sans', sans-serif;
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.04em;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative;}

/* NAV */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,31,40,0.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(216,236,231,0.08);
}
nav{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; max-width:1180px; margin:0 auto; gap:16px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:44px; width:auto; display:block;}
.brand-text{font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; letter-spacing:0.01em;}
.brand-text span{display:block; font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.14em; color:var(--lagoon); font-weight:400; margin-top:2px;}
.navlinks{display:flex; gap:24px; font-size:0.87rem;}
.navlinks a{opacity:0.82; transition:opacity 0.2s; white-space:nowrap;}
.navlinks a:hover{opacity:1; color:var(--lagoon);}
.navlinks a[aria-current="page"]{opacity:1; color:var(--lagoon);}
.nav-cta{
  background:var(--lagoon); color:var(--navy); padding:10px 20px; border-radius:2px;
  font-size:0.82rem; font-weight:500; letter-spacing:0.02em; white-space:nowrap;
}
.nav-cta:hover{background:var(--foam);}
.nav-right{display:flex; align-items:center; gap:12px;}
.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:42px; height:38px; padding:0; cursor:pointer;
  background:transparent; border:1px solid rgba(216,236,231,0.25); border-radius:2px;
}
.nav-toggle span{display:block; width:18px; height:1.5px; background:var(--foam); transition:transform 0.25s, opacity 0.2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.mobile-menu{
  display:none; flex-direction:column; padding:6px 32px 22px;
  background:rgba(10,31,40,0.97); border-top:1px solid rgba(216,236,231,0.1);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:14px 0; font-size:0.95rem; opacity:0.85; border-bottom:1px solid rgba(216,236,231,0.07);}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu a.mobile-cta{
  margin-top:16px; background:var(--lagoon); color:var(--navy); text-align:center;
  border-radius:2px; border-bottom:none; font-weight:500; opacity:1;
}
@media(max-width:1080px){
  .navlinks{display:none;}
  .nav-toggle{display:flex;}
}
@media(min-width:1081px){
  .mobile-menu{display:none !important;}
}
@media(max-width:520px){
  nav{padding:14px 20px;}
  .mobile-menu{padding:6px 20px 22px;}
  .nav-cta{display:none;}
  .brand img{height:38px;}
  .brand-text{font-size:0.95rem;}
}

/* SHARED BITS */
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.74rem; letter-spacing:0.18em;
  color:var(--lagoon); text-transform:uppercase; margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:28px; height:1px; background:var(--lagoon); display:inline-block;}
.btn{
  padding:15px 30px; border-radius:2px; font-size:0.9rem; font-weight:500; letter-spacing:0.02em;
  display:inline-block; transition:all 0.25s; font-family:'Work Sans', sans-serif; line-height:1.6;
}
.btn-primary{background:var(--lagoon); color:var(--navy);}
.btn-primary:hover{background:var(--foam); transform:translateY(-1px);}
.btn-ghost{border:1px solid rgba(247,248,246,0.35); color:var(--white); background:transparent;}
.btn-ghost:hover{border-color:var(--lagoon); color:var(--lagoon);}
.section-pad{padding:90px 0;}
.section-head{max-width:680px; margin-bottom:44px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem); color:var(--white);}

/* BREADCRUMB + PAGE HEAD */
.page-head{background:var(--teal-deep); padding:150px 0 74px; border-bottom:1px solid rgba(216,236,231,0.1);}
.crumbs{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--foam); opacity:0.6; margin-bottom:26px;}
.crumbs a:hover{color:var(--lagoon);}
.page-head h1{font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.08; color:var(--white); margin-bottom:26px; max-width:900px;}
.lede{font-size:1.08rem; color:var(--foam); opacity:0.92; max-width:720px;}
.lede p + p{margin-top:14px;}

/* PROSE */
.prose{max-width:760px;}
.prose p{color:var(--foam); opacity:0.85; margin-bottom:18px; font-size:1.02rem;}
.prose p:last-child{margin-bottom:0;}

/* FACT LIST */
.factlist{list-style:none; border-top:1px solid rgba(216,236,231,0.12); max-width:820px;}
.factlist li{
  border-bottom:1px solid rgba(216,236,231,0.12); padding:18px 0 18px 34px; position:relative;
  color:var(--foam); font-size:1rem;
}
.factlist li::before{
  content:''; position:absolute; left:6px; top:29px; width:10px; height:1px; background:var(--lagoon);
}
.note{
  margin-top:26px; color:var(--foam); opacity:0.78; font-size:0.96rem; max-width:820px;
}

/* AREAS */
.areas{background:var(--teal-deep);}
.area-list{display:flex; flex-wrap:wrap; gap:10px; max-width:900px; list-style:none;}
.area-list li{
  font-family:'IBM Plex Mono', monospace; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid rgba(216,236,231,0.25); padding:9px 16px; border-radius:2px; color:var(--foam);
}

/* PHOTOS */
.photo-duo{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--navy);}
.photo-duo img{width:100%; height:400px; object-fit:cover; display:block; filter:saturate(1.05);}
@media(max-width:800px){ .photo-duo{grid-template-columns:1fr;} .photo-duo img{height:280px;} }
.photo-placeholder{
  border:1px dashed rgba(216,236,231,0.35); padding:52px 32px; text-align:center; margin:0 auto; max-width:820px;
}
.photo-placeholder .tagline{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.photo-placeholder p{color:var(--foam); opacity:0.78; font-size:0.96rem; max-width:560px; margin:0 auto;}

/* FAQ */
.faq{background:var(--teal-deep);}
.faq-list{max-width:860px; border-top:1px solid rgba(216,236,231,0.12);}
.faq-item{padding:30px 0; border-bottom:1px solid rgba(216,236,231,0.12);}
.faq-item h3{font-size:1.16rem; color:var(--white); margin-bottom:12px; font-weight:600;}
.faq-item p{color:var(--foam); opacity:0.85; font-size:1rem;}

/* CTA */
.cta-band{background:var(--navy); text-align:center;}
.cta-band h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:18px;}
.cta-band p{color:var(--foam); opacity:0.8; margin-bottom:34px; max-width:560px; margin-left:auto; margin-right:auto;}
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.contact-strip{
  display:flex; gap:36px; justify-content:center; flex-wrap:wrap; margin-top:44px;
  padding-top:34px; border-top:1px solid rgba(216,236,231,0.12);
  font-size:0.94rem; color:var(--foam); opacity:0.8;
}
.contact-strip a:hover{color:var(--lagoon);}
.contact-strip .k{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--lagoon); display:block; margin-bottom:5px;}

/* CROSS LINK */
.crosslink{
  border-top:1px solid rgba(216,236,231,0.1); padding:30px 32px; text-align:center;
  color:var(--foam); opacity:0.8; font-size:0.98rem;
}
.crosslink a{color:var(--lagoon); border-bottom:1px solid rgba(63,182,173,0.4);}
.crosslink a:hover{border-bottom-color:var(--lagoon);}

footer{
  border-top:1px solid rgba(216,236,231,0.1); padding:32px; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--foam); opacity:0.5;
}