@charset "UTF-8";

:root{
  --lux-navy:#06172d;
  --lux-ink:#102033;
  --lux-blue:#0b3d91;
  --lux-blue-2:#1d5fbf;
  --lux-gold:#d9a441;
  --lux-gold-2:#f7c65a;
  --lux-green:#06c755;
  --lux-paper:#ffffff;
  --lux-bg:#f4f7fb;
  --lux-muted:#667085;
  --lux-line:#dce6f2;
  --lux-shadow:0 24px 70px rgba(15,23,42,.12);
  --lux-shadow-soft:0 14px 38px rgba(15,23,42,.09);
  --lux-radius:18px;
}

*{letter-spacing:0!important}
html{scroll-behavior:smooth}
body{
  color:var(--lux-ink)!important;
  background:
    radial-gradient(circle at 9% 18%,rgba(11,61,145,.13),transparent 24%),
    radial-gradient(circle at 88% 8%,rgba(217,164,65,.15),transparent 25%),
    linear-gradient(135deg,#f9fbff 0%,#eef4fb 48%,#f8fbff 100%)!important;
  font-family:Arial,"Noto Sans Thai",Tahoma,sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden!important;
}

a{text-decoration:none!important}
img{max-width:100%;height:auto}

.topbar,.seo-topbar,.top{
  background:linear-gradient(90deg,#06172d,#0b2548)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  font-weight:800!important;
}

.global-nav,.seo-nav,.nav{
  position:sticky!important;
  top:0!important;
  z-index:50!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgba(220,230,242,.95)!important;
  box-shadow:0 12px 36px rgba(15,23,42,.10)!important;
  max-width:100%!important;
  overflow:visible!important;
}

.global-nav{
  padding:16px 24px!important;
  gap:18px!important;
}

.brand,.seo-brand,.logo,.global-nav .brand{
  color:var(--lux-navy)!important;
  font-weight:900!important;
}

.logo-mark{
  background:linear-gradient(145deg,var(--lux-blue),var(--lux-navy))!important;
  color:#fff!important;
  box-shadow:0 16px 34px rgba(11,61,145,.28)!important;
  width:56px!important;
  height:56px!important;
  border-radius:16px!important;
  flex:0 0 auto!important;
}

.brand strong{
  font-size:25px!important;
  line-height:1.08!important;
}
.brand small{
  font-size:12px!important;
  line-height:1.25!important;
}
.nav-links{
  gap:18px!important;
  min-width:0!important;
}

.nav-links a,.seo-links a,.menu a,.links a{
  color:#18283d!important;
  font-weight:900!important;
  font-size:15px!important;
}
.nav-links a:hover,.seo-links a:hover,.menu a:hover,.links a:hover{
  color:var(--lux-blue)!important;
}

.nav-phone,.phone-cta,.seo-links .quote,.quote,.links .quote{
  background:linear-gradient(135deg,var(--lux-gold-2),var(--lux-gold))!important;
  color:#111827!important;
  border:0!important;
  box-shadow:0 14px 30px rgba(217,164,65,.25)!important;
  padding:12px 16px!important;
  white-space:nowrap!important;
}

.hero,.seo-hero,.detail-hero{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  color:#fff!important;
  background:
    linear-gradient(105deg,rgba(6,23,45,.95) 0%,rgba(6,23,45,.86) 48%,rgba(11,61,145,.66) 100%),
    url("assets/premium/hero-engineering.png") center/cover no-repeat!important;
}

.hero::before,.seo-hero::before,.detail-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    radial-gradient(circle at 18% 22%,rgba(247,198,90,.24),transparent 30%)!important;
  background-size:44px 44px,44px 44px,auto!important;
  opacity:.84!important;
}

.hero::after,.seo-hero::after,.detail-hero::after{
  content:""!important;
  position:absolute!important;
  right:-160px!important;
  bottom:-240px!important;
  width:560px!important;
  height:560px!important;
  border:1px solid rgba(247,198,90,.42)!important;
  border-radius:50%!important;
  pointer-events:none!important;
}

.hero-inner,.seo-hero-inner{
  max-width:1240px!important;
}

.eyebrow,.seo-kicker,.credentials-label,.tag,.estimate-badge,.contact-badge{
  background:rgba(247,198,90,.12)!important;
  border:1px solid rgba(247,198,90,.42)!important;
  color:#ffe08a!important;
  border-radius:999px!important;
  font-weight:900!important;
  max-width:100%!important;
  white-space:normal!important;
}

.tag,.estimate-badge,.contact-badge{
  color:var(--lux-blue)!important;
  background:#eaf2ff!important;
  border-color:#d4e3f8!important;
}

.hero h1,.seo-hero h1,.detail-hero h1{
  color:#fff!important;
  text-shadow:0 16px 44px rgba(0,0,0,.32)!important;
  text-wrap:balance;
}
.hero p,.seo-hero p,.detail-hero p{
  color:#eaf2ff!important;
  text-wrap:pretty;
}

.hero-panel,.credentials-band,.contact-strip,.seo-panel,.feature,.estimate-box,.contactbox{
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:24px!important;
  box-shadow:var(--lux-shadow)!important;
}

.hero-panel{
  background:rgba(255,255,255,.13)!important;
  border-color:rgba(255,255,255,.22)!important;
  backdrop-filter:blur(14px)!important;
}

.hero-panel-item{
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.14)!important;
}

.section,.seo-section,section,.wrap,.report-section{
  position:relative!important;
}

.section::before,.seo-section::before,.wrap::before,.report-section::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  background:
    linear-gradient(rgba(11,61,145,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,61,145,.035) 1px,transparent 1px)!important;
  background-size:48px 48px!important;
  pointer-events:none!important;
  opacity:.65!important;
}

.section-head h2,.seo-head h2,.head h2,.report-head h2,.detailbox h2,h2{
  color:var(--lux-blue)!important;
  font-weight:900!important;
  text-wrap:balance;
}

.section-head h2::after,.seo-head h2::after,.head h2::after{
  content:""!important;
  display:block!important;
  width:92px!important;
  height:5px!important;
  margin:14px auto 0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--lux-gold-2),var(--lux-blue))!important;
}

.service-card,.report-card,.seo-card,.card,.item,.case,.stat,.why-text,.trust-item,.process-card,.faq-card,
.credential-card,.hub-card,.contact-info-card,.quote-checklist,.note,.box{
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(220,230,242,.95)!important;
  border-radius:var(--lux-radius)!important;
  box-shadow:var(--lux-shadow-soft)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}

.service-card:hover,.report-card:hover,.seo-card:hover,.card:hover,.item:hover,.case:hover,.trust-item:hover,
.credential-card:hover,.hub-card:hover,.box:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(11,61,145,.24)!important;
  box-shadow:var(--lux-shadow)!important;
}

.service-card,.card,.box,.case{
  overflow:hidden!important;
}

.service-card .image-wrap,.service-image,.card .image-wrap{
  height:225px!important;
  background:#dfe8f4!important;
}

.service-card img,.card img,.gallery img,.main-photo,.box img{
  width:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:contrast(1.04) saturate(1.08) brightness(1.02)!important;
}

.gallery{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  gap:22px!important;
}

.gallery img{
  height:300px!important;
  border-radius:20px!important;
  box-shadow:var(--lux-shadow-soft)!important;
}

.btn,.seo-btn,.estimate-btn,.report-btn,.line-qr-btn,.credentials-btn{
  border-radius:999px!important;
  min-height:46px!important;
  font-weight:900!important;
  box-shadow:0 14px 30px rgba(15,23,42,.12)!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}
.btn:hover,.seo-btn:hover,.estimate-btn:hover,.report-btn:hover,.line-qr-btn:hover,.credentials-btn:hover{
  transform:translateY(-2px)!important;
  filter:saturate(1.06)!important;
}
.btn.gold,.seo-btn.gold,.report-btn.primary,.credentials-btn-gold{
  background:linear-gradient(135deg,var(--lux-gold-2),var(--lux-gold))!important;
  color:#111827!important;
}
.btn.green,.seo-btn.green,.credentials-btn-line{
  background:linear-gradient(135deg,#14d66a,var(--lux-green))!important;
  color:#fff!important;
}
.btn.white{
  background:#fff!important;
  color:var(--lux-blue)!important;
}

.reports-wrap,.seo-footer,footer{
  background:linear-gradient(135deg,#06172d,#082f63)!important;
  color:#fff!important;
}
.reports-wrap h2,.reports-wrap h3,footer strong{
  color:#fff!important;
}
.reports-wrap p,footer p,.seo-footer{
  color:#dceaff!important;
}

.float a{
  box-shadow:0 18px 42px rgba(15,23,42,.28)!important;
}

@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr!important}
  .services-grid,.report-grid,.seo-grid,.why{grid-template-columns:1fr 1fr!important}
  .hero-panel{display:none!important}
  .brand strong{font-size:22px!important}
  .nav-links a{font-size:14px!important}
  .nav-phone,.phone-cta{padding:10px 13px!important}
}

@media(max-width:720px){
  .topbar,.seo-topbar,.top{display:none!important}
  .global-nav,.seo-nav,.nav{align-items:flex-start!important;flex-direction:column!important;padding:14px 16px!important}
  .nav-links,.seo-links,.menu{gap:10px!important;justify-content:flex-start!important}
  .hero,.seo-hero,.detail-hero{padding:68px 18px!important}
  .brand strong{font-size:21px!important}
  .brand small{font-size:11px!important}
  .logo-mark{width:48px!important;height:48px!important}
  .hero-inner,.seo-hero-inner{width:100%!important;max-width:100%!important}
  .hero h1,.seo-hero h1,.detail-hero h1{font-size:31px!important;line-height:1.22!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .hero p,.seo-hero p,.detail-hero p{font-size:16px!important;overflow-wrap:anywhere!important;word-break:break-word!important;max-width:100%!important}
  .eyebrow,.seo-kicker{font-size:13px!important;padding:7px 11px!important}
  .hero-features{grid-template-columns:1fr!important;gap:10px!important}
  .hero-feature{font-size:13px!important;min-width:0!important}
  .quick-proof{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .quick-proof span{max-width:100%!important;white-space:normal!important;text-align:center!important}
  .services-grid,.report-grid,.seo-grid,.why,.feature{grid-template-columns:1fr!important}
  .gallery img{height:240px!important}
  .service-card .image-wrap,.service-image,.card .image-wrap{height:210px!important}
  .btn,.seo-btn{width:100%!important;max-width:300px!important}
}