@font-face { font-family: "Noto Sans Thai"; src: url("/fonts/noto-sans-thai-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans Thai"; src: url("/fonts/noto-sans-thai-500.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Noto Sans Thai"; src: url("/fonts/noto-sans-thai-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Noto Sans Thai"; src: url("/fonts/noto-sans-thai-700.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  --ink: #14242f;
  --navy: #08283d;
  --deep: #041c2b;
  --blue: #056da8;
  --cyan: #39b9db;
  --ice: #e8f3f6;
  --paper: #f5f3ee;
  --white: #ffffff;
  --line: rgba(20, 36, 47, 0.18);
  --content-max: 1280px;
  --gutter: max(clamp(22px, 4vw, 56px), calc((100vw - var(--content-max)) / 2));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 116px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.28);
  color: white;
}
.brand { display: flex; align-items: center; gap: 17px; }
.brand-mark { display: grid; place-items: center; flex: 0 0 88px; width: 88px; height: 72px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(0,0,0,.3)); }
.brand span { display: flex; flex-direction: column; line-height: 1; }
.brand .brand-mark { display: block; }
.brand strong { font-family: Arial, sans-serif; font-size: 27px; letter-spacing: .08em; }
.brand small { margin-top: 8px; font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .15em; }
nav { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 44px); font-size: 14px; }
nav a { transition: opacity .2s ease; }
nav a:hover { opacity: .68; }
.nav-cta { padding: 11px 19px; border: 1px solid rgba(255,255,255,.7); }
.menu-button { display: none; border: 0; background: transparent; padding: 10px; }
.menu-button span { display: block; width: 26px; height: 1px; margin: 7px 0; background: white; }

.hero { position: relative; height: clamp(680px, 92svh, 860px); color: white; overflow: hidden; }
.hero-image { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 48%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,24,37,.88) 0%, rgba(2,24,37,.55) 43%, rgba(2,24,37,.12) 75%), linear-gradient(0deg, rgba(1,17,27,.48), transparent 42%); }
.hero-content { position: absolute; z-index: 2; left: var(--gutter); top: 50%; width: min(680px, 68vw); transform: translateY(-42%); }
.eyebrow { margin: 0 0 24px; color: var(--blue); font: 700 12px/1 Arial, sans-serif; letter-spacing: .22em; }
.eyebrow.light { color: #77d7f1; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 26px; font-size: clamp(46px, 5.4vw, 82px); line-height: 1.08; font-weight: 500; letter-spacing: -.025em; }
.hero-copy { width: min(610px, 94%); font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.84); }
.hero-actions { display: flex; align-items: center; gap: 38px; margin-top: 42px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 14px 26px; border: 0; cursor: pointer; font-weight: 700; }
.button.primary { background: linear-gradient(120deg, #087db8, #39b9db); color: white; box-shadow: 0 14px 36px rgba(1,105,159,.24); }
.text-link { display: inline-flex; align-items: center; gap: 18px; padding-bottom: 8px; border: 0; border-bottom: 1px solid currentColor; background: transparent; font-weight: 700; cursor: pointer; }
.light-link { color: white; }
.hero-note { position: absolute; z-index: 2; right: var(--gutter); bottom: 64px; padding-left: 27px; border-left: 1px solid rgba(255,255,255,.55); }
.hero-note span { display: block; font: 10px Arial, sans-serif; letter-spacing: .22em; }
.hero-note strong { display: block; margin: 5px 0 9px; font: 700 28px Arial, sans-serif; letter-spacing: .08em; }
.hero-note p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.55; }
.scroll-mark { position: absolute; z-index: 2; left: 32px; bottom: 30px; writing-mode: vertical-rl; font: 9px Arial, sans-serif; letter-spacing: .26em; }
.scroll-mark span { margin-top: 12px; font-size: 15px; }

.section { padding: clamp(76px, 7vw, 104px) var(--gutter); }
.intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(48px, 7vw, 96px); }
h2 { font-size: clamp(36px, 3.7vw, 56px); line-height: 1.16; font-weight: 500; letter-spacing: -.02em; }
.intro-copy > p, .muted { color: #54636c; font-size: 18px; line-height: 1.85; }
.principles { margin-top: 42px; border-top: 1px solid var(--line); }
.principles div { display: grid; grid-template-columns: 58px 1fr; padding: 19px 0; border-bottom: 1px solid var(--line); }
.principles strong { color: var(--blue); font: 700 12px Arial, sans-serif; }

.solutions { background: white; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; margin-bottom: 68px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { width: min(390px, 36%); color: #68757c; line-height: 1.75; }
.solution-list { border-top: 1px solid var(--line); }
.solution-card { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 80px); padding: 38px 0; border-bottom: 1px solid var(--line); }
.solution-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #dce5e8; }
.solution-photo img { height: 100%; object-fit: cover; transition: transform .55s ease; }
.solution-card:hover .solution-photo img { transform: scale(1.025); }
.solution-photo > span { position: absolute; top: 0; left: 0; padding: 10px 14px; background: var(--navy); color: white; font: 700 12px Arial, sans-serif; }
.solution-body { align-self: center; }
.product-name { color: var(--blue); font: 700 12px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.solution-body h3 { margin-bottom: 16px; font-size: clamp(28px, 2.4vw, 38px); line-height: 1.28; font-weight: 500; letter-spacing: -.02em; }
.solution-body > p:not(.product-name) { max-width: 680px; color: #637078; line-height: 1.75; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags span { padding: 7px 10px; border: 1px solid #b8cbd2; color: #49616d; font: 10px Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.solution-link { display: inline-flex; gap: 14px; margin-top: 24px; padding-bottom: 7px; border-bottom: 1px solid var(--blue); color: var(--blue); font-size: 13px; font-weight: 700; }

.home-gas { background: var(--deep); color: white; }
.home-gas-lead { display: grid; grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); gap: clamp(48px, 7vw, 92px); align-items: center; }
.home-gas-copy > p:not(.eyebrow) { max-width: 610px; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.82; }
.home-gas-copy .button { margin-top: 18px; }
.home-gas-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #dbe1dd; }
.home-gas-photo img { height: 100%; object-fit: cover; }
.home-gas-photo figcaption { position: absolute; right: 0; bottom: 0; display: grid; gap: 5px; min-width: 230px; padding: 18px 20px; background: var(--white); color: var(--ink); }
.home-gas-photo figcaption strong { color: var(--blue); font: 700 11px Arial, sans-serif; letter-spacing: .16em; }
.home-gas-photo figcaption span { font-size: 12px; }
.home-gas-flow { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(58px, 7vw, 88px); border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.home-gas-flow article { min-height: 245px; padding: 26px 24px; border-right: 1px solid rgba(255,255,255,.22); }
.home-gas-flow article:last-child { border-right: 0; }
.home-gas-flow span { color: var(--cyan); font: 700 11px Arial, sans-serif; }
.home-gas-flow h3 { margin: 52px 0 14px; font-size: 21px; font-weight: 500; }
.home-gas-flow p { margin-bottom: 0; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.75; }
.safety-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(42px, 6vw, 80px); margin-top: 66px; padding: clamp(32px, 4vw, 54px); background: var(--paper); color: var(--ink); }
.safety-panel-heading h3 { margin-bottom: 18px; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.35; font-weight: 500; letter-spacing: -.015em; }
.safety-panel-heading > p:not(.eyebrow) { color: #637078; line-height: 1.75; }
.safety-list { border-top: 1px solid var(--line); }
.safety-list div { display: grid; grid-template-columns: minmax(150px, .65fr) 1.35fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.safety-list strong { color: var(--blue); font-size: 14px; }
.safety-list span { color: #586871; font-size: 13px; line-height: 1.7; }
.safety-note { margin: 22px 0 0 auto; max-width: 850px; color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.65; text-align: right; }
.safety-sources { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; color: rgba(255,255,255,.55); font-size: 10px; }
.safety-sources a { padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.26); }
.safety-sources a:hover { color: white; }

.project-showcase { display: grid; grid-template-columns: 1.15fr minmax(420px, .85fr); min-height: 620px; background: var(--deep); color: white; }
.project-image-wrap { position: relative; min-height: 560px; }
.project-image-wrap img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.project-index { position: absolute; right: 0; bottom: 0; padding: 16px 20px; background: white; color: var(--ink); font: 700 11px Arial, sans-serif; letter-spacing: .12em; }
.project-content { padding: 72px clamp(38px, 4vw, 64px); align-self: center; }
.project-content h2 { font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: -.055em; }
.project-content > p:not(.eyebrow) { color: rgba(255,255,255,.68); line-height: 1.8; }
dl { margin: 35px 0 42px; }
dl div { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.2); }
dl div:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
dt { color: rgba(255,255,255,.5); font: 10px Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
dd { margin: 0; font-size: 13px; }

.gallery { display: grid; grid-template-columns: 1.25fr .78fr .78fr; grid-template-rows: 280px 280px; gap: 16px; background: white; }
.gallery figure { margin: 0; overflow: hidden; }
.gallery figure:first-child { grid-row: 1 / 3; }
.gallery figure:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.gallery img { height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery figure:hover img { transform: scale(1.02); }

.audience { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(48px, 7vw, 96px); }
.audience-list { border-top: 1px solid var(--line); }
.audience-list div { display: grid; grid-template-columns: 50px 1fr 30px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.audience-list span { color: var(--blue); font: 700 11px Arial, sans-serif; }
.audience-list strong { font-size: 19px; font-weight: 500; }
.audience-list i { font-style: normal; color: var(--blue); }

.process { background: var(--navy); color: white; }
.process .section-heading > p { color: rgba(255,255,255,.62); }
.process-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.22); }
.process-grid article { min-height: 230px; padding: 25px 24px; border-right: 1px solid rgba(255,255,255,.22); }
.process-grid article:last-child { border-right: 0; }
.process-grid span { color: var(--cyan); font: 700 11px Arial, sans-serif; }
.process-grid h3 { margin: 55px 0 15px; font-size: 22px; font-weight: 500; }
.process-grid p { color: rgba(255,255,255,.57); font-size: 13px; line-height: 1.7; }

.contact { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(48px, 7vw, 96px); background: var(--ice); }
.contact-copy > p:not(.eyebrow) { color: #5d6d76; font-size: 17px; line-height: 1.8; }
.contact-points { display: grid; gap: 12px; margin-top: 34px; color: #335565; font-size: 13px; }
.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 40px; background: white; box-shadow: 0 20px 70px rgba(17,60,80,.09); }
.lead-form label { display: grid; gap: 9px; color: #4b5c65; font-size: 12px; font-weight: 700; }
.lead-form input, .lead-form select, .lead-form textarea { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid #b8c7ce; background: transparent; color: var(--ink); border-radius: 0; outline: none; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-bottom-color: var(--blue); }
.lead-form textarea { resize: vertical; }
.lead-form .full { grid-column: 1 / -1; }
.lead-form small { color: #87939a; text-align: center; font-size: 10px; font-weight: 400; }
.thank-you { align-self: center; padding: 60px; background: white; text-align: center; }
.thank-you > span { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--blue); color: white; font-size: 26px; }
.thank-you h3 { margin: 24px 0 10px; font-size: 32px; font-weight: 500; }
.thank-you p { color: #69767c; line-height: 1.7; }

footer { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 68px var(--gutter) 36px; background: #03151f; color: white; }
.footer-brand .brand-mark { flex-basis: 78px; width: 78px; height: 64px; }
footer > p { align-self: center; justify-self: end; color: rgba(255,255,255,.55); font-family: Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
footer > div { display: flex; gap: 32px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.2); }
footer > small { padding-top: 34px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.4); text-align: right; }

@media (max-width: 1100px) {
  .site-header { height: 90px; }
  .site-header .brand-mark { flex-basis: 68px; width: 68px; height: 56px; }
  .brand strong { font-size: 22px; }
  .menu-button { display: block; z-index: 2; }
  nav { position: absolute; display: none; top: 90px; left: 0; width: 100%; padding: 26px; flex-direction: column; align-items: stretch; gap: 0; background: var(--deep); }
  nav.open { display: flex; }
  nav a { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav-cta { margin-top: 16px; text-align: center; }
  .hero { height: auto; min-height: 680px; }
  .hero-note { display: none; }
  .hero-content { width: auto; right: 24px; }
  .intro, .audience, .contact, .home-gas-lead, .safety-panel { grid-template-columns: 1fr; gap: 50px; }
  .solution-card { grid-template-columns: 1fr; gap: 28px; }
  .project-showcase { grid-template-columns: 1fr; }
  .project-image-wrap { min-height: 520px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-grid article:nth-child(even), .home-gas-flow article:nth-child(even) { border-right: 0; }
  .process-grid article:last-child { grid-column: 1 / -1; border-right: 0; }
  .home-gas-flow { grid-template-columns: 1fr 1fr; }
  .home-gas-flow article { border-bottom: 1px solid rgba(255,255,255,.22); }
  .process-grid article { border-bottom: 1px solid rgba(255,255,255,.22); }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 380px 250px 250px; }
  .gallery figure:first-child { grid-column: 1 / 3; grid-row: auto; }
  .gallery figure:nth-child(2) { grid-column: 2; grid-row: 2 / 4; }
}

@media (max-width: 640px) {
  .section { padding: 82px 22px; }
  .hero-content { left: 22px; right: 22px; transform: translateY(-38%); }
  h1 { font-size: clamp(38px, 11vw, 48px); }
  h2 { font-size: clamp(32px, 9vw, 40px); }
  .hero-copy { width: 100%; font-size: 16px; line-height: 1.7; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 24px; margin-top: 30px; }
  .scroll-mark { display: none; }
  .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 46px; }
  .section-heading > p { width: 100%; }
  .solution-photo { aspect-ratio: 1.25; }
  .home-gas-photo { aspect-ratio: 1 / 1.12; }
  .home-gas-photo figcaption { left: 0; min-width: 0; }
  .home-gas-flow { grid-template-columns: 1fr; }
  .home-gas-flow article { min-height: 0; border-right: 0; }
  .home-gas-flow h3 { margin-top: 32px; }
  .safety-list div { grid-template-columns: 1fr; gap: 8px; }
  .safety-note { text-align: left; }
  .safety-sources { justify-content: flex-start; }
  .project-image-wrap { min-height: 360px; }
  .project-content { padding: 68px 24px; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: repeat(4, 270px); }
  .gallery figure:first-child, .gallery figure:nth-child(2) { grid-column: auto; grid-row: auto; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid article, .process-grid article:last-child { min-height: 0; grid-column: auto; border-right: 0; }
  .process-grid h3 { margin-top: 34px; }
  .lead-form { grid-template-columns: 1fr; padding: 28px 22px; }
  .lead-form .full { grid-column: auto; }
  footer { grid-template-columns: 1fr; }
  footer > div { flex-wrap: wrap; gap: 16px 24px; }
  footer > p, footer > small { justify-self: start; text-align: left; }
}

@media (max-width: 400px) {
  .site-header .brand small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}