:root{
  --void: #050A0D;
  --petrol: #0B1820;
  --ocean: #082B42;
  --electric: #0798E6;
  --electric-dim: #05517f;
  --ink: #F2F5F6;
  --ink-soft: #b9c6cc;
  --ink-faint: #7c8c93;
  --border: rgba(242,245,246,0.14);
  --border-strong: rgba(242,245,246,0.24);
  --font-display: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-display);
  line-height:1.6;
}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
a{color:inherit;}
.page[data-lang="en"] .lang-th{display:none;}
.page[data-lang="th"] .lang-en{display:none;}

/* ---------- rig scene: the raster cross-section image with overlaid content ---------- */
/* .rig-crop: full-height wrapper for the cross-section image; content is overlaid on it all the way down, no cropping. */
.rig-crop{position:relative;width:100%;background:var(--void);}
.rig-scene{position:relative;width:100%;}
.rig-img{width:100%;display:block;}
.rig-overlay{position:absolute;inset:0;}

.topnav{
  position:absolute;top:1.2%;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4%;
}
.brand-mark{height:clamp(52px,6.8vw,80px);width:auto;}
.lang-toggle{
  display:flex;border:0.5px solid var(--border-strong);border-radius:20px;overflow:hidden;
  backdrop-filter:blur(6px);background:rgba(5,10,13,0.4);
}
.lang-btn{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;
  padding:6px 13px;border:none;background:transparent;color:var(--ink-faint);cursor:pointer;
  transition:background-color 160ms ease-out, color 160ms ease-out;
}
.lang-btn[aria-pressed="true"]{background:var(--electric);color:#031522;}

/* fixed site header, stays visible while scrolling */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:10px 4%;
  background:rgba(5,10,13,0.6);
  backdrop-filter:blur(10px);
  border-bottom:0.5px solid var(--border);
}
.header-brand{display:flex;align-items:center;}
.brand-mark-fixed{height:clamp(32px,3.6vw,44px);width:auto;display:block;}
.site-nav{display:flex;gap:20px;align-items:center;}
.site-nav a{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;transition:color 160ms ease-out;
}
.site-nav a:hover{color:var(--electric);}
.page{padding-top:64px;}

.footer-powered{display:block;font-size:11px;color:var(--ink-faint);margin-top:4px;}


.hero-block{position:absolute;top:8%;left:4%;max-width:44%;}
.eyebrow{
  font-family:var(--font-mono);font-size:clamp(10px,1vw,12px);letter-spacing:0.16em;
  text-transform:uppercase;color:var(--electric);
  display:flex;align-items:center;gap:8px;margin:0 0 18px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--electric);display:inline-block;}
h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(30px,5.4vw,64px);
  line-height:0.98;letter-spacing:-0.01em;
  text-transform:uppercase;
  margin:0 0 20px;
  text-wrap:balance;
}
h1 .accent{color:var(--electric);}
.accent{color:var(--electric);}
.hero-sub{
  font-weight:600;font-size:clamp(13px,1.3vw,17px);
  color:var(--ink);margin:0 0 10px;
}
.hero-copy{
  font-size:clamp(12px,1.1vw,15px);color:var(--ink-soft);
  max-width:40ch;margin:0 0 26px;
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;}
.btn{
  font-family:var(--font-display);font-weight:700;font-size:clamp(12px,1.05vw,15px);
  padding:12px 20px;border-radius:4px;border:0.5px solid var(--border-strong);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  transition:transform 160ms var(--ease-out), filter 160ms ease-out, background-color 160ms ease-out;
  white-space:nowrap;
}
.btn:active{transform:scale(0.96);}
.btn-primary{background:var(--electric);color:#031522;border-color:var(--electric);}
.btn-dark{background:rgba(5,10,13,0.55);color:var(--ink);backdrop-filter:blur(6px);}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{filter:brightness(1.12);}
  .btn-dark:hover{border-color:var(--ink-faint);}
}
.btn svg{width:16px;height:16px;flex:none;}

.stat-row{
  position:absolute;top:25%;left:4%;right:4%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.stat-card{
  background:rgba(8,17,22,0.55);
  backdrop-filter:blur(8px);
  border:0.5px solid var(--border);
  border-top:2px solid var(--electric);
  border-radius:6px;
  padding:clamp(12px,1.6vw,22px);
}
.stat-card svg{width:clamp(20px,2.2vw,28px);height:clamp(20px,2.2vw,28px);color:var(--electric);margin-bottom:10px;}
.stat-num{
  font-family:var(--font-display);font-weight:800;font-size:clamp(15px,2vw,24px);
  line-height:1.15;letter-spacing:-0.01em;margin:0 0 12px;text-transform:uppercase;
}
.stat-label{
  font-family:var(--font-mono);font-size:clamp(9px,0.85vw,11px);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--electric);margin:0 0 10px;
}
.stat-sub{font-size:clamp(10px,0.95vw,13px);color:var(--ink-soft);margin:0;line-height:1.5;}

.aquifer-callout{
  position:absolute;top:79%;left:0;right:0;text-align:center;padding:0 8%;
}
.aquifer-callout .eyebrow{justify-content:center;}
.aquifer-callout h3{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(16px,2.2vw,28px);margin:0 0 8px;letter-spacing:0.02em;
}
.aquifer-callout p{
  font-size:clamp(11px,1vw,14px);color:var(--ink-soft);margin:0;
  max-width:44ch;margin-inline:auto;
}

/* ---------- underwater section: solid, continues the image's own bottom tone ---------- */
.underwater{
  background:linear-gradient(180deg, #141311 0%, var(--petrol) 30%, var(--ocean) 100%);
  padding:44px 0 0;
}
section{padding:0 0 84px;}
.section-head{margin-bottom:36px;}
.section-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--electric);margin:0 0 12px;
}
h2{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,38px);margin:0;letter-spacing:-0.01em;text-wrap:balance;
}

.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.why-list{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:14px;}
.why-list li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:15px;color:var(--ink);
}
.why-list svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--electric);}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;
  border:0.5px solid var(--border-strong);border-radius:20px;padding:6px 14px;color:var(--ink-soft);
}

.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:start;}
.process-step{position:relative;padding:0 18px 0 0;}
.process-num{
  font-family:var(--font-mono);color:var(--electric);font-size:13px;letter-spacing:0.06em;margin:0 0 14px;
}
.process-step svg{width:28px;height:28px;color:var(--electric);margin-bottom:14px;}
.process-step h3{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:16px;margin:0 0 8px;letter-spacing:0.01em;
}
.process-step p{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.55;}
.process-arrow{
  position:absolute;top:34px;right:-4px;color:var(--border-strong);font-size:18px;
}

.review-card{
  background:rgba(8,17,22,0.6);backdrop-filter:blur(8px);
  border:0.5px solid var(--border);border-top:2px solid var(--electric);
  border-radius:8px;padding:32px 34px;max-width:680px;
}
.stars{color:var(--electric);letter-spacing:3px;font-size:14px;margin:0 0 16px;}
.review-quote{font-size:18px;line-height:1.65;margin:0 0 18px;color:var(--ink);}
.review-attr{font-size:13px;color:var(--ink-faint);margin:0;}

.quote-panel{
  background:radial-gradient(120% 140% at 20% 0%, rgba(7,152,230,0.16), transparent 60%), var(--petrol);
  border:0.5px solid var(--border);border-radius:10px;
  padding:44px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;
}
.quote-panel h2{margin-bottom:10px;}
.quote-panel > div:first-child > p{color:var(--ink-soft);font-size:14px;margin:0 0 26px;max-width:38ch;}
.field{margin-bottom:14px;}
.field label{
  display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--ink-faint);margin-bottom:6px;
}
.field input,.field textarea{
  width:100%;font-family:var(--font-display);font-size:15px;padding:11px 12px;
  border:0.5px solid var(--border-strong);border-radius:4px;
  background:rgba(5,10,13,0.5);color:var(--ink);
  transition:border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--electric);
  box-shadow:0 0 0 3px rgba(7,152,230,0.22);
}
.field textarea{resize:vertical;min-height:88px;}
.hint{font-size:11px;color:var(--ink-faint);margin:4px 0 0;}
.quote-side{display:flex;flex-direction:column;gap:14px;}
.quote-side-note{font-size:13px;color:var(--ink-soft);margin:0 0 4px;}

.side-left{position:absolute;left:4%;width:52%;}
.side-right{position:absolute;right:4%;width:30%;max-width:360px;}
.side-block{margin-bottom:44px;}
.side-process{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;}
.side-process li{display:flex;gap:14px;align-items:flex-start;}
.side-process svg{width:24px;height:24px;flex:none;color:var(--electric);margin-top:2px;}
.side-process .num{font-family:var(--font-mono);color:var(--electric);font-size:12px;letter-spacing:0.04em;margin:0 0 4px;}
.side-process h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:15px;margin:0 0 4px;letter-spacing:0.01em;}
.side-process p{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.5;}
.quote-glass{
  background:rgba(8,17,22,0.55);backdrop-filter:blur(10px);
  border:0.5px solid var(--border);border-top:2px solid var(--electric);
  border-radius:8px;padding:26px;
}
.quote-glass h2{font-size:clamp(19px,2vw,24px);margin:0 0 8px;}
.quote-glass > .lang-en > p, .quote-glass > .lang-th > p{color:var(--ink-soft);font-size:13px;margin:0 0 20px;}
.quote-glass .btn{width:100%;justify-content:center;margin-top:4px;}
.quote-glass .quote-side{margin-top:16px;}
.emph-channels{margin-top:16px;display:flex;flex-direction:column;gap:10px;}
.channel-emph{padding:16px 18px;}
.channel-emph-label{display:block;font-family:var(--font-display);font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:0.02em;color:var(--ink);}
.channel-emph-sub{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px;}

.process-row{position:absolute;left:4%;right:4%;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.process-row .pc-num{font-family:var(--font-mono);color:var(--electric);font-size:11px;letter-spacing:0.06em;margin:0 0 8px;}
.process-row .pc-title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:14px;margin:0 0 6px;letter-spacing:0.01em;}
.process-row .pc-text{font-size:12px;color:var(--ink-soft);margin:0;line-height:1.5;}


.channel{
  border:0.5px solid var(--border-strong);border-radius:6px;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--ink);
  transition:border-color 160ms ease-out, background-color 160ms ease-out, transform 160ms var(--ease-out);
}
.channel:active{transform:scale(0.98);}
@media (hover:hover) and (pointer:fine){.channel:hover{border-color:var(--electric);background:rgba(7,152,230,0.06);}}
.channel-tag{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);display:block;margin-bottom:2px;}
.channel-detail{font-family:var(--font-mono);font-size:13px;color:var(--electric);}

footer{
  background:var(--void);border-top:0.5px solid var(--border);
  padding:24px 0;
}
.footer-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.footer-brand{display:flex;align-items:center;gap:10px;}
.footer-brand img{height:42px;width:auto;}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;color:var(--electric);text-transform:uppercase;}
.footer-copy{font-size:12px;color:var(--ink-faint);}

@media (max-width:820px){
  /* Hero (headline near the rig, above ground) and the 3 stat cards
     (below ground) stay overlaid on the image — that's the point of the
     design. Why-choose-us, the quote form, and the process cards don't
     fit overlaid on a short, narrow image, so app.js physically moves
     those three nodes (mobile only) to sit right after the image in the
     DOM; here they just become plain static-flow blocks. */
  .side-left,.side-right,.process-row{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 4% 28px;
  }
  .hero-block{max-width:78%;}
  .hero-sub{margin-top:18px;}
  .hero-copy{display:none;} /* the tagline above already carries the idea; frees room so the stat cards still fit inside the image */
  .stat-row{top:44% !important;grid-template-columns:1fr;gap:10px;}
  .stat-row .stat-card{background:none;backdrop-filter:none;border:1.5px solid var(--electric);}
  .process-row{grid-template-columns:1fr 1fr;gap:10px;}
  .wrap{padding:0 20px;}
}