@charset "UTF-8";

:root{
  --ie-navy:#071f3d;
  --ie-blue:#0b3d91;
  --ie-blue-soft:#e8f1ff;
  --ie-gold:#f7b731;
  --ie-green:#06c755;
  --ie-bg:#f4f7fb;
  --ie-text:#172033;
  --ie-muted:#667085;
  --ie-line:#e5ecf5;
  --ie-shadow:0 18px 46px rgba(15,23,42,.10);
  --ie-shadow-soft:0 10px 28px rgba(15,23,42,.08);
  --ie-radius:18px;
}

html{scroll-behavior:smooth}
body{
  background:
    linear-gradient(rgba(11,61,145,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,61,145,.035) 1px,transparent 1px),
    var(--ie-bg) !important;
  background-size:42px 42px !important;
  color:var(--ie-text) !important;
  letter-spacing:0 !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.topbar{
  background:#061a33 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.global-nav,
.nav{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(16px) !important;
  border-bottom:1px solid rgba(229,236,245,.95) !important;
  box-shadow:0 10px 30px rgba(15,23,42,.08) !important;
  min-height:72px !important;
}

.brand,
.global-nav .brand{
  color:var(--ie-blue) !important;
  letter-spacing:0 !important;
}

.logo-mark{
  border-radius:14px !important;
  background:linear-gradient(135deg,#0b3d91,#061b35) !important;
  box-shadow:0 12px 26px rgba(11,61,145,.24) !important;
}

.nav-links a,
.links a,
.global-nav .nav-links a{
  color:#273449 !important;
}

.nav-links a:hover,
.links a:hover,
.global-nav .nav-links a:hover{
  color:var(--ie-blue) !important;
}

.nav-phone,
.quote,
.links .quote{
  background:var(--ie-gold) !important;
  color:#111827 !important;
  box-shadow:0 10px 24px rgba(247,183,49,.22) !important;
}

.hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
}

.hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 15% 18%,rgba(247,183,49,.18),transparent 28%),
    linear-gradient(120deg,rgba(6,27,53,.78),rgba(11,61,145,.58) 52%,rgba(6,27,53,.82)) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

.hero::after{
  content:"" !important;
  position:absolute !important;
  width:560px !important;
  height:560px !important;
  right:-190px !important;
  bottom:-260px !important;
  border:1px solid rgba(247,183,49,.34) !important;
  border-radius:50% !important;
  pointer-events:none !important;
  z-index:0 !important;
}

.hero > *{
  position:relative !important;
  z-index:1 !important;
}

.detail-hero{
  min-height:520px !important;
  padding:92px 22px 76px !important;
  background:
    linear-gradient(115deg,rgba(6,27,53,.90),rgba(11,61,145,.72)),
    var(--hero) !important;
  background-size:cover !important;
  background-position:center !important;
}

.detail-hero .hero-inner,
.hero-inner{
  width:min(1180px,100%) !important;
}

.detail-hero h1{
  font-size:clamp(38px,6vw,66px) !important;
  line-height:1.08 !important;
  max-width:880px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.detail-hero p{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  font-size:20px !important;
  color:#e9f2ff !important;
}

.hero h1{
  letter-spacing:0 !important;
  text-wrap:balance;
  text-shadow:0 12px 38px rgba(0,0,0,.28);
}

.hero p{
  text-wrap:pretty;
}

.section,
.wrap,
.report-section{
  position:relative;
  padding-top:70px !important;
  padding-bottom:70px !important;
}

.section-head h2,
.head h2,
.report-head h2,
h2{
  letter-spacing:0 !important;
  text-wrap:balance;
}

.service-card,
.report-card,
.stat,
.why-text,
.trust-item,
.process-card,
.faq-card,
.quote-checklist,
.hub-card,
.card,
.item,
.case,
.contact-info-card,
.contactbox,
.estimate-box{
  border:1px solid var(--ie-line) !important;
  border-radius:var(--ie-radius) !important;
  box-shadow:var(--ie-shadow-soft) !important;
  background:rgba(255,255,255,.96) !important;
}

.service-card,
.report-card,
.card,
.item,
.case{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.service-card:hover,
.report-card:hover,
.card:hover,
.item:hover,
.case:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(11,61,145,.22) !important;
  box-shadow:var(--ie-shadow) !important;
}

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

.service-card h3,
.report-card h3,
.case h2,
.card h3,
.item h2{
  color:#0d2442 !important;
}

.service-card p,
.report-card p,
.case p,
.card p,
.item p{
  color:#5d6b82 !important;
}

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

.tag,
.estimate-badge,
.contact-badge{
  background:var(--ie-blue-soft) !important;
  color:var(--ie-blue) !important;
}

.btn,
.estimate-btn,
.report-btn,
.line-qr-btn{
  border-radius:999px !important;
  min-height:44px !important;
  padding-left:20px !important;
  padding-right:20px !important;
  font-weight:900 !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.btn:hover,
.estimate-btn:hover,
.report-btn:hover,
.line-qr-btn:hover{
  transform:translateY(-2px) !important;
  filter:saturate(1.04) !important;
}

.btn.gold,
.btn.quote,
.estimate-btn.call,
.report-btn.secondary{
  background:var(--ie-gold) !important;
  color:#111827 !important;
}

.btn.green,
.btn.line,
.estimate-btn.line{
  background:var(--ie-green) !important;
  color:#fff !important;
}

.btn.white,
.btn.sendinfo,
.estimate-btn.send{
  background:#fff !important;
  color:var(--ie-blue) !important;
  border:1px solid var(--ie-line) !important;
}

.hero-btns,
.page-cta,
.btns{
  gap:12px !important;
}

.float{
  right:22px !important;
  bottom:22px !important;
}

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

.lead-conversion-section{
  max-width:1240px !important;
  margin:0 auto !important;
  padding:36px 24px 12px !important;
}

.lead-conversion,
.quote-helper{
  background:
    radial-gradient(circle at 92% 16%,rgba(247,183,49,.18),transparent 28%),
    linear-gradient(135deg,#061a33,#0b3d91) !important;
  color:#fff !important;
  border-radius:26px !important;
  padding:34px !important;
  box-shadow:0 24px 58px rgba(15,23,42,.18) !important;
  display:grid !important;
  grid-template-columns:1.05fr .95fr !important;
  gap:28px !important;
  align-items:center !important;
}

.lead-badge{
  display:inline-flex !important;
  width:max-content !important;
  background:rgba(247,183,49,.16) !important;
  border:1px solid rgba(247,183,49,.36) !important;
  color:#ffd76a !important;
  border-radius:999px !important;
  padding:7px 12px !important;
  font-size:13px !important;
  font-weight:900 !important;
  margin-bottom:12px !important;
}

.lead-copy h2,
.quote-helper h2{
  color:#fff !important;
  font-size:clamp(28px,4vw,42px) !important;
  line-height:1.18 !important;
  margin:0 0 10px !important;
}

.lead-copy p,
.quote-helper p{
  color:#dbeafe !important;
  margin:0 0 20px !important;
  font-size:17px !important;
}

.lead-actions{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

.lead-list{
  display:grid !important;
  gap:12px !important;
}

.lead-list div,
.quote-helper li{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:18px !important;
}

.lead-list div{
  display:grid !important;
  grid-template-columns:48px 1fr !important;
  gap:14px !important;
  align-items:center !important;
  padding:16px !important;
}

.lead-list strong{
  width:42px !important;
  height:42px !important;
  border-radius:14px !important;
  background:var(--ie-gold) !important;
  color:#111827 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:900 !important;
}

.lead-list span{
  color:#f3f7ff !important;
  font-weight:800 !important;
}

.quote-helper{
  max-width:1156px !important;
  margin:28px auto 0 !important;
  grid-template-columns:.9fr 1.1fr !important;
}

.quote-helper ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  gap:10px !important;
}

.quote-helper li{
  color:#f3f7ff !important;
  padding:13px 15px !important;
  font-weight:800 !important;
}

.quote-helper li::before{
  content:"✓" !important;
  color:#ffd76a !important;
  font-weight:900 !important;
  margin-right:8px !important;
}

.credential-head{
  margin-top:46px !important;
}

.credential-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.document-preview-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:24px !important;
  margin-top:22px !important;
}

.document-preview{
  margin:0 !important;
  background:#fff !important;
  border:1px solid var(--ie-line) !important;
  border-radius:20px !important;
  overflow:hidden !important;
  box-shadow:var(--ie-shadow-soft) !important;
  position:relative !important;
}

.document-preview::after{
  content:"ตัวอย่างเท่านั้น" !important;
  position:absolute !important;
  left:50% !important;
  top:42% !important;
  transform:translate(-50%,-50%) rotate(-22deg) !important;
  color:rgba(11,61,145,.22) !important;
  border:3px solid rgba(11,61,145,.18) !important;
  border-radius:12px !important;
  padding:10px 22px !important;
  font-size:26px !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
  pointer-events:none !important;
  z-index:2 !important;
}

.document-preview iframe{
  display:block !important;
  width:100% !important;
  height:460px !important;
  border:0 !important;
  background:#f8fafc !important;
  pointer-events:none !important;
}

.doc-image-preview{
  height:460px !important;
  padding:22px !important;
  background:
    linear-gradient(rgba(11,61,145,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,61,145,.04) 1px,transparent 1px),
    #eef4fb !important;
  background-size:26px 26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
}

.doc-paper{
  position:relative !important;
  width:min(260px,86%) !important;
  aspect-ratio:1/1.42 !important;
  background:#fff !important;
  border:2px solid #0d2442 !important;
  box-shadow:0 18px 42px rgba(15,23,42,.18) !important;
  padding:34px 24px !important;
  overflow:hidden !important;
}

.doc-paper::before{
  content:"ตัวอย่าง" !important;
  position:absolute !important;
  inset:auto auto 42% 50% !important;
  transform:translateX(-50%) rotate(-24deg) !important;
  color:rgba(220,38,38,.24) !important;
  border:3px solid rgba(220,38,38,.20) !important;
  border-radius:10px !important;
  padding:7px 18px !important;
  font-size:28px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.doc-seal{
  display:block !important;
  width:58px !important;
  height:58px !important;
  margin:0 auto 28px !important;
  border-radius:50% !important;
  border:8px double rgba(11,61,145,.42) !important;
}

.doc-line{
  display:block !important;
  height:10px !important;
  margin:13px auto !important;
  border-radius:999px !important;
  background:#d7e0ec !important;
  width:78% !important;
}

.doc-line.short{width:48% !important}
.doc-line.wide{width:88% !important}

.doc-sign{
  position:absolute !important;
  right:24px !important;
  bottom:34px !important;
  width:86px !important;
  height:22px !important;
  border-bottom:3px solid rgba(11,61,145,.45) !important;
  transform:rotate(-4deg) !important;
}

.document-preview figcaption{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:16px !important;
}

.document-preview strong{
  color:#0d2442 !important;
  font-size:17px !important;
}

.document-preview figcaption span{
  color:#667085 !important;
  font-size:14px !important;
  font-weight:800 !important;
}

.contactbox{
  background:
    radial-gradient(circle at 12% 10%,rgba(247,183,49,.18),transparent 26%),
    linear-gradient(135deg,#061a33,#0b3d91) !important;
  color:#fff !important;
  grid-template-columns:.85fr 1.15fr !important;
}

.contactbox h2{
  color:#fff !important;
}

.contactbox p,
.contactbox b{
  color:#e9f2ff !important;
}

.contactbox .form{
  background:#fff !important;
  color:#172033 !important;
  box-shadow:0 18px 42px rgba(15,23,42,.18) !important;
}

.contactbox .form input,
.contactbox .form textarea{
  color:#172033 !important;
  background:#fff !important;
  border-color:#cfd8e6 !important;
}

.contactbox .form input::placeholder,
.contactbox .form textarea::placeholder{
  color:#667085 !important;
  opacity:1 !important;
}

.reports-wrap{
  background:
    radial-gradient(circle at 12% 15%,rgba(247,183,49,.16),transparent 30%),
    linear-gradient(135deg,#061b35,#0b3d91) !important;
}

.nationwide-section,
.section,
.report-section{
  scroll-margin-top:86px;
}

.region-card,
.pin-item{
  border:1px solid rgba(229,236,245,.85) !important;
}

footer{
  background:#061a33 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

::selection{
  background:rgba(247,183,49,.35);
}

.credentials-band{
  background:#f7fafc;
  padding:76px 20px;
  border-top:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
}
.credentials-band-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:34px;
  align-items:center;
}
.credentials-label{
  display:inline-flex;
  margin:0 0 14px;
  padding:7px 13px;
  border:1px solid #f0bf41;
  border-radius:999px;
  color:#0b3d91;
  background:#fff7df;
  font-size:14px;
  font-weight:900;
}
.credentials-main h2{
  margin:0 0 16px;
  color:#061b35;
  font-size:42px;
  line-height:1.22;
  font-weight:900;
}
.credentials-main p:not(.credentials-label){
  margin:0 0 24px;
  color:#475467;
  font-size:17px;
  line-height:1.85;
}
.credentials-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.credentials-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 20px;
  border-radius:10px;
  font-weight:900;
  text-decoration:none;
}
.credentials-btn-gold{background:#f7b731;color:#111827}
.credentials-btn-line{background:#06c755;color:#fff}
.local-seo-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.local-seo-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 13px;
  border-radius:999px;
  background:#e8f1ff;
  color:#0b3d91;
  font-size:14px;
  font-weight:900;
}
.credentials-cards{
  display:grid;
  gap:14px;
}
.credential-card{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:2px 14px;
  padding:16px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 14px 34px rgba(16,24,40,.10);
}
.credential-card span{
  grid-row:1 / span 2;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#0b3d91;
  color:#fff;
  font-weight:900;
}
.credential-card strong{
  color:#061b35;
  font-size:17px;
}
.credential-card p{
  margin:2px 0 0;
  color:#667085;
  font-size:15px;
  line-height:1.65;
}
@media(max-width:900px){
  .credentials-band-inner{grid-template-columns:1fr}
  .credentials-main h2{font-size:34px}
}
@media(max-width:560px){
  .credentials-band{padding:54px 16px}
  .credentials-main h2{font-size:29px}
  .credentials-actions .credentials-btn{width:100%}
}

@media(max-width:760px){
  .hero{padding-left:18px !important;padding-right:18px !important}
  .hero h1{font-size:34px !important;line-height:1.22 !important}
  .section-head h2,
  .head h2,
  .report-head h2,
  h2{font-size:29px !important;line-height:1.28 !important}
  .service-card,
  .report-card,
  .stat,
  .why-text,
  .trust-item,
  .process-card,
  .faq-card,
  .quote-checklist,
  .card,
  .item,
  .case{border-radius:18px !important}
  .global-nav,
  .nav{min-height:auto !important}
  .detail-hero{min-height:420px !important;padding-top:72px !important}
  .detail-hero p{font-size:17px !important}
  .lead-conversion,
  .quote-helper{grid-template-columns:1fr !important;padding:24px !important}
  .lead-actions .btn{width:100% !important;max-width:none !important}
  .credential-grid{grid-template-columns:1fr !important}
  .document-preview-grid{grid-template-columns:1fr !important}
  .document-preview iframe{height:420px !important}
  .doc-image-preview{height:420px !important}
  .document-preview figcaption{align-items:flex-start !important;flex-direction:column !important}
}