/* Refined marine identity shared by the homepage and service pages. */
:root{
  --navy:#142c38;--navy-deep:#0b1b25;--charcoal:#243740;
  --foam:#f7f5f0;--foam-dim:#ece9e1;--sand:#c6c4ba;
  --orange:#c6a56a;--orange-dark:#806333;--teal:#558f8b;--teal-light:#b3cfca;
  --gold:#dcc291;--radius-s:6px;--radius-m:12px;
  --font-head:'Prompt','Noto Sans SC',sans-serif;
  --font-body:'Sarabun','Noto Sans SC',sans-serif;
}
html{font-size:106.25%;scroll-padding-top:96px}
body{font-family:var(--font-body);font-size:1rem;line-height:1.85;background:var(--foam);color:var(--charcoal);opacity:1;animation:none}
h1,h2,h3{font-family:var(--font-head);font-weight:500!important;letter-spacing:0!important;text-wrap:balance}
p{font-weight:400}
header,header.shrink{background:#0e222e;border-bottom:1px solid rgba(198,165,106,.25);box-shadow:none;backdrop-filter:none}
.nav-row{padding-block:22px;gap:24px}
header.shrink .nav-row{padding-block:16px}
.brand-name .main{font-size:1.08rem;font-weight:500;line-height:1.4;color:#f9f6ef}
.brand-name .sub{font-size:.67rem;color:#c9b88f;line-height:1.6}
.nav-links{gap:26px}
.nav-links a{font-size:.85rem;font-weight:400;opacity:.86;padding-bottom:6px}
.nav-links a.active,.nav-links a:hover{color:#e1cba2;border-color:#c6a56a}
.lang-switch{border-color:rgba(255,255,255,.2)}
.lang-switch button{font-size:.73rem;padding:5px 10px}
.lang-switch button.active{background:#c6a56a;color:#142c38}
.hero{
  background:radial-gradient(ellipse at 85% 40%,rgba(85,143,139,.12),transparent 55%),linear-gradient(120deg,#102633,#0b1b25);
  border-bottom:1px solid rgba(198,165,106,.22)
}
.hero::before{opacity:.035}
.hero::after{display:none}
.hero .wrap{max-width:1180px;padding-block:86px;gap:72px;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)}
.hero .kicker{background:none;border:0;border-left:2px solid #c6a56a;border-radius:0;color:#ddc79f;font-family:var(--font-head);font-size:.72rem;line-height:1.6;font-weight:400;letter-spacing:0;padding:2px 0 2px 14px}
.hero h1{background:none;-webkit-text-fill-color:#f7f4ed;color:#f7f4ed;font-size:clamp(2.4rem,4.3vw,3.5rem);line-height:1.4;max-width:18ch;margin-top:22px;margin-bottom:24px}
.hero p.sub{color:#becbce;font-size:1.06rem;line-height:1.95;max-width:52ch}
.hero .scroll-cue{color:#c9b88f;font-size:.67rem;letter-spacing:0}
.hero .kicker,.hero h1,.hero p.sub{animation:none}
.btn,.button{font-family:var(--font-head);font-weight:400;font-size:.88rem;border-radius:6px;min-height:48px;padding:13px 23px;text-shadow:none}
.btn-primary,.primary{background:#d2b57f;color:#142c38;border:1px solid #d2b57f;box-shadow:none}
.btn-primary:hover,.primary:hover{background:#e1c897;color:#142c38;border-color:#e1c897}
.btn-ghost{color:#f2eee4;border-color:rgba(222,209,182,.4);background:transparent}
.btn-ghost:hover{background:rgba(222,209,182,.08);border-color:#d2b57f}
.btn::before{display:none}
section{padding-block:80px}
.section-head{margin-bottom:36px;max-width:70ch}
.section-head h2{color:#142c38;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.5;background:none;-webkit-text-fill-color:currentColor}
.section-head h2::after{height:2px;width:40px;background:#b99c66;box-shadow:none;margin-top:18px;animation:none}
.section-head p{font-size:1rem;color:#64747a;line-height:1.9;margin-top:18px}
.showcase{background:#eeeae2;padding-top:66px;padding-bottom:48px}
.showcase .section-head{max-width:760px;margin-inline:auto;text-align:center;padding-inline:24px}
.showcase .section-head h2::after{margin-inline:auto}
.showcase-grid{--showcase-gap:20px}
.showcase-grid .work-card{border:1px solid #dedbd2;border-radius:12px;background:#faf9f5;box-shadow:0 4px 18px rgba(20,44,56,.04);padding:12px}
.showcase-grid .work-card:hover{border-color:#b99c66;box-shadow:0 10px 24px rgba(20,44,56,.08)}
.work-card .poster-card{border-radius:7px;border-color:rgba(20,44,56,.12);box-shadow:none}
.work-caption{padding:18px 4px 8px;gap:12px}
.work-caption-index{width:28px;height:28px;border:0;border-radius:0;background:none;color:#937443;font-size:.72rem}
.work-caption h3{font-size:1rem;line-height:1.6}
.work-caption p{font-size:.88rem;line-height:1.8;color:#69767a}
.showcase-arrow{width:38px;height:38px;background:transparent;border-color:#b7b5ac;color:#142c38;box-shadow:none}
.services,.process,.faq{background:#f7f5f0}
.service-list,.steps{gap:22px}
.service-row,.step{border:1px solid #e1dfd6;border-top:1px solid #d0b786;background:#fffefb;box-shadow:none;border-radius:10px;padding:30px 26px}
.service-row:hover{background:#fffefb;border-color:#c5ad7e;border-top-color:#c5ad7e;box-shadow:0 10px 24px rgba(20,44,56,.05);transform:translateY(-3px);padding-left:26px}
.service-row::after{font-size:1.05rem;font-family:'IBM Plex Mono',monospace;color:#9e875e}
.service-row h3,.step h3,.why-item h3{font-size:1.06rem;line-height:1.65}
.service-row p,.step p{font-size:.96rem;line-height:1.9;color:#64747a}
.service-icon-wrap{background:#f0ede5;border-color:#e6dfce;color:#8c7348;box-shadow:none}
.step-no{border:1px solid #d2c29f;color:#8c7348;background:#f2eee4;border-radius:50%;width:38px;height:38px;font-size:.9rem;box-shadow:none}
.service-detail-links a{border-color:#d9d3c4;background:#f0ede5;color:#3a4c50;border-radius:6px;font-size:.88rem;text-decoration:none}
.service-detail-links a:hover{border-color:#b99c66;background:#e9e3d6}
.highlights,.ticker{background:#102633;border-color:rgba(198,165,106,.2)}
.hl-icon{background:transparent;border-color:rgba(198,165,106,.38);box-shadow:none;color:#d2b57f}
.hl-item h3{font-family:var(--font-head);font-size:.95rem;color:#eee9de}
.hl-item p{color:#afbdc1}
.ticker-track span{color:#cfbb92;font-family:var(--font-head);font-size:.78rem;letter-spacing:0}
.why{background:#102633}
.why .section-head h2{background:none;-webkit-text-fill-color:#f4f0e6;color:#f4f0e6}
.why .section-head p{color:#afbdc1}
.why .section-head h2::after{background:#b99c66}
.why-grid{gap:18px}
.why-item{background:#132d3a;border:1px solid rgba(198,165,106,.19);border-radius:10px;padding:28px;box-shadow:none}
.why-item:hover{background:#173341;transform:translateY(-2px)}
.why-item h3{color:#ead5ad}
.why-item p{color:#b9c5c8;line-height:1.9}
.faq-list details{border-color:#ddd9cf;border-radius:8px;background:#fffefb;padding:20px 24px;box-shadow:none}
.faq-list summary{font-size:1rem;line-height:1.7;font-weight:500}
.faq-list p{color:#64747a;line-height:1.9}
.area{background:#132d3a}
.area .section-head h2,.contact .section-head h2{background:none;-webkit-text-fill-color:#f4f0e6;color:#f4f0e6}
.area .section-head p,.contact .section-head p{color:#b8c5c8}
.area-card,.contact-card{background:#102633;border:1px solid rgba(198,165,106,.28);box-shadow:none;border-radius:10px;padding:32px}
.area-card h3{color:#f4f0e6}
.area-card p,.contact-note{color:#bdc8ca}
.area-pin{border:1px solid #b99c66;background:transparent}
.area-pin svg,.contact-line svg{color:#d2b57f}
.map-frame{border:1px solid rgba(198,165,106,.5);border-radius:10px;box-shadow:none;filter:saturate(.7)}
.contact{background:#0b1b25}
.contact-line .val{font-family:var(--font-head);font-weight:400;font-size:1.3rem;letter-spacing:.01em;color:#dfc89d}
footer{background:#091822;border-top:1px solid rgba(198,165,106,.16);color:#9faeb3;font-size:.78rem;padding-block:28px}
.mobile-bar{background:rgba(11,27,37,.98);border-top:1px solid rgba(198,165,106,.35)}
.float-cta{background:#c6a56a;box-shadow:0 5px 20px rgba(0,0,0,.18)}
.float-cta::before{display:none}
.sea-sonar{border-color:rgba(185,156,102,.55);box-shadow:0 0 0 10px rgba(185,156,102,.025),0 0 0 11px rgba(185,156,102,.12),0 22px 65px rgba(0,0,0,.2)}
/* Lightweight article pages use the same typography and palette. */
body.service-page{font-family:var(--font-body);font-size:1.05rem}
.service-page header .wrap{padding-block:22px}
.service-page .brand{font-family:var(--font-head);font-weight:500;color:#f4f0e6}
.service-page main.wrap{max-width:960px}
.service-page .breadcrumb{font-size:.83rem;color:#6d7a7d;padding-top:26px}
.service-page .intro{padding-block:38px 46px}
.service-page h1{font-size:clamp(2rem,4vw,2.8rem);line-height:1.5;color:#142c38}
.service-page h2{font-size:1.35rem;line-height:1.65;color:#142c38}
.service-page section{padding-block:34px}
.service-page p,.service-page li{color:#52666d}
.service-page a{color:#6f582e}
.service-page .button{font-size:.9rem}
.service-page .primary{color:#142c38}
.service-page .contact{background:#eee9df;border:1px solid #dcd3bf;border-radius:10px}
.service-page .related a{background:#fffefb;border-color:#ded8ca;border-radius:8px;padding:20px;text-decoration:none}
.service-page th{background:#ede8dc;color:#142c38;font-family:var(--font-head);font-weight:400}
.service-page td,.service-page th{border-color:#dcd8cd}
.service-page footer a{color:inherit}
@media(max-width:980px) and (min-width:821px){.hero .wrap{gap:36px;padding-block:64px}.hero h1{font-size:2.6rem}.nav-links{gap:16px}}
@media(max-width:820px){
  html{font-size:100%;scroll-padding-top:86px}
  .nav-row,header.shrink .nav-row{padding:14px 20px;gap:14px}
  .brand-name .main{font-size:1rem}.brand-name .sub{font-size:.64rem}
  .nav-links{background:#102633;gap:2px}.nav-links a{font-size:.95rem}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:38px;padding:44px 22px 52px;text-align:center}
  .hero .kicker{display:inline-flex;border-left:0;padding:0;color:#d7c19b;font-size:.7rem}
  .hero h1{font-size:clamp(2rem,6.2vw,2.8rem);line-height:1.45;margin:20px auto;max-width:20ch}
  .hero p.sub{font-size:1rem;line-height:1.9;max-width:48ch;color:#becbce}
  .hero-art.sonar-art{max-width:272px}
  section{padding-block:54px}
  .section-head h2{font-size:clamp(1.6rem,5vw,2rem);line-height:1.5}
  .section-head p{font-size:.96rem;line-height:1.85}
  .showcase{padding-top:50px;padding-bottom:36px}.showcase-grid{--showcase-gap:16px}
  .showcase-grid .work-card{padding:10px}
  .service-row,.step,.why-item,.area-card,.contact-card{padding:24px 22px}
  .service-row:hover{padding-left:22px;transform:none}
  .service-row h3,.step h3,.why-item h3{font-size:1.03rem}
  .service-row p,.step p,.why-item p{font-size:.96rem}
  .service-list,.steps,.why-grid{gap:16px}
  .contact-line .val{font-size:1.25rem}
  footer{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  .service-page footer{padding-bottom:28px}
}
@media(max-width:480px){
  .hero .wrap{padding:36px 20px 44px;gap:32px}
  .hero h1{font-size:clamp(1.85rem,7.8vw,2.25rem)}
  .hero-art.sonar-art{max-width:240px}
  .section-head{margin-bottom:28px}
  .hl-item h3{font-size:.88rem}.hl-item p{font-size:.78rem}
  .btn{padding:12px 18px}
  .service-page .intro{padding-block:24px 32px}
  .service-page section{padding-block:28px}
}
/* Keep the hero spacing on one container and maintain header contrast. */
.hero{padding:0;}
.hero .wrap{padding-bottom:100px;}
.service-page header .back{color:#e1cba2;}
@media(max-width:820px){.hero .wrap{padding-bottom:78px;}}
@media(max-width:480px){.hero .wrap{padding-bottom:74px;}}
/* Larger type and clearer paths into useful service information. */
html{font-size:112.5%}
body{line-height:1.9}
.hero h1{font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:1.4}
.hero p.sub{font-size:1.16rem;line-height:1.9;max-width:44ch;color:#d2dcdf}
.hero .kicker{font-size:.82rem}
.nav-links a{font-size:.94rem}
.brand-name .main{font-size:1.16rem}
.brand-name .sub{font-size:.75rem}
.section-head h2{font-size:clamp(1.95rem,3vw,2.65rem)}
.section-head p{font-size:1.12rem;line-height:1.9;color:#52666e;max-width:62ch}
.service-row h3,.step h3,.why-item h3{font-size:1.2rem;line-height:1.6}
.service-row p,.step p,.why-item p{font-size:1.08rem;line-height:1.9}
.service-row p,.step p{color:#52666e}
.work-caption h3{font-size:1.1rem}
.work-caption p{font-size:1rem;line-height:1.8;color:#52666e}
.hl-item h3{font-size:1.06rem}
.hl-item p{font-size:.94rem;line-height:1.75}
.faq-list summary{font-size:1.14rem}
.faq-list p,.area-card p,.contact-note{font-size:1.08rem;line-height:1.9}
.area-card h3{font-size:1.25rem}
.btn,.button{font-size:1rem;min-height:52px}
.hero-reading{margin:22px 0 0;font-size:1rem}
.hero-reading a{color:#e5cfa7;text-underline-offset:6px;text-decoration-thickness:1px}
.hero-reading a::after{content:" ↗";display:inline-block;margin-left:6px}
.service-guide-title{font-size:1.25rem;line-height:1.6;margin:0 0 18px;color:#142c38}
.service-detail-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:34px}
.service-detail-links a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:22px 20px;min-height:100px;font-family:var(--font-head);font-size:1.06rem;
  line-height:1.65;background:#eae5d9;border-color:#c9b994;
}
.service-detail-links a::after{content:"→";font-size:1.4rem;flex:none;color:#7a602e}
.service-detail-links a:hover{background:#e0d6c2;border-color:#a0844d}
.service-page main.wrap{max-width:920px}
body.service-page{font-size:1.13rem;line-height:1.95}
.service-page h1{font-size:clamp(2.15rem,4vw,3rem);line-height:1.5}
.service-page h2{font-size:1.55rem;line-height:1.6;margin-bottom:20px}
.service-page p,.service-page li{color:#405960}
.service-page p{max-width:74ch;margin-bottom:22px}
.service-page li{margin-bottom:14px}
.service-page table{font-size:1.02rem;line-height:1.85}
.service-page .related a,.service-page .button{font-size:1.02rem}
.service-page .breadcrumb{font-size:.94rem;line-height:1.8}
.service-page header .back{font-size:1rem}
footer{font-size:.9rem}
@media(max-width:980px) and (min-width:821px){.hero .wrap{grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);gap:28px}.hero h1{font-size:2.7rem}.nav-links{gap:14px}.nav-links a{font-size:.84rem}}
@media(max-width:820px){
  html{font-size:106.25%}
  .brand-name .main{font-size:1.08rem}.brand-name .sub{font-size:.7rem}
  .hero h1{font-size:clamp(2.05rem,6.8vw,2.9rem)}
  .hero p.sub{font-size:1.1rem;line-height:1.9;max-width:42ch}
  .hero .kicker{font-size:.8rem}
  .hero-reading{text-align:center;font-size:1rem;margin-top:20px}
  .section-head h2{font-size:clamp(1.8rem,5.2vw,2.2rem)}
  .section-head p{font-size:1.06rem}
  .service-guide-title{font-size:1.18rem}
  .service-detail-links{grid-template-columns:1fr;gap:12px}
  .service-detail-links a{min-height:74px;font-size:1.06rem;padding:18px}
  .service-row h3,.step h3,.why-item h3{font-size:1.16rem}
  .service-row p,.step p,.why-item p{font-size:1.06rem}
  .work-caption h3{font-size:1.05rem}.work-caption p{font-size:.98rem}
  .faq-list summary{font-size:1.08rem}.faq-list p{font-size:1.05rem}
  .btn{font-size:1rem;padding:13px 16px}
  .hl-item h3{font-size:1rem}.hl-item p{font-size:.9rem}
  body.service-page{font-size:1.08rem;line-height:1.9}
  .service-page h1{font-size:clamp(1.9rem,6.4vw,2.4rem)}
  .service-page h2{font-size:1.35rem}
  .service-page table{font-size:.98rem}
}
@media(max-width:480px){
  .hero h1{font-size:clamp(1.9rem,7.6vw,2.3rem)}
  .hero p.sub{font-size:1.08rem}
  .hero .wrap{gap:30px}
  .service-page .back{font-size:.9rem}
}