/* Siam Empire v63 — strict visual template alignment */
:root{--template-radius:68px;--template-card-radius:16px;--template-pale:#edf8ff;--template-ink:#071d3d;--template-blue:#1879eb}
.site-header{height:84px;background:rgba(255,255,255,.78)!important;border-bottom:1px solid rgba(204,226,241,.55)!important;backdrop-filter:blur(15px) saturate(1.08)!important}
.site-header .nav{min-height:84px}.site-header .brand-lockup{width:132px}.site-header .nav-links{gap:clamp(24px,2.7vw,48px)}.site-header .nav-links a{font-weight:700;letter-spacing:-.01em}.site-header .nav-cta{min-height:48px;padding-inline:25px}
.kicker{font-size:10px;line-height:1.3;letter-spacing:.16em}.button{min-height:50px;border-radius:999px}
.services-page,.work-page,.price-page,.contact-page{color:var(--template-ink)}

/* One exact hero grammar across every internal page: white copy field, image on the right, organic lower edge. */
.services-page .svc-hero,.contact-page .contact-hero,.price-page .pricing-hero,.work-page .work-hero{min-height:690px;border-radius:0 0 92px 0;background:#fff}
.services-page .svc-hero-inner,.contact-page .contact-hero-intro,.price-page .pricing-hero-copy,.work-page .work-hero-inner{min-height:606px}
.services-page .svc-hero-copy h1,.contact-page .contact-hero-intro h1,.price-page .pricing-hero-copy h1,.work-page .work-hero-copy h1{font-size:clamp(58px,5.15vw,80px);line-height:1.01;letter-spacing:-.055em}
.services-page .svc-hero-copy>p,.contact-page .contact-hero-intro>p:not(.kicker),.price-page .pricing-hero-copy>p:not(.kicker),.work-page .work-hero-copy>p:not(.kicker){max-width:620px;color:#36536c;font-size:15px;line-height:1.68}

/* Portfolio previously behaved like a different dark template. It now uses the same Sawasdee split hero. */
.work-page .work-hero{padding-top:84px;color:var(--template-ink);isolation:isolate}
.work-page .work-hero-photo{z-index:-2;inset:84px 0 0 42%;border-radius:0 0 92px 0;background-position:center 55%;transform:none}
.work-page .work-hero::before{z-index:-1;inset:84px 0 0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.99) 35%,rgba(255,255,255,.82) 49%,rgba(255,255,255,.14) 73%)}
.work-page .work-hero::after{right:-8%;bottom:-1px;left:-8%;height:102px;border-radius:50% 50% 0 0/92% 92% 0 0;background:#fff;transform:translateY(79%) rotate(1deg)}
.work-page .work-hero-inner{align-items:center}.work-page .work-hero-copy{width:58%;max-width:720px;padding:78px 0 90px}.work-page .work-hero-copy .kicker{color:var(--template-blue)}
.work-page .work-hero-copy h1{margin:13px 0 18px}.work-page .work-hero-copy h1 em{color:var(--template-blue)}
.work-page .work-hero-copy>p:not(.kicker){color:#36536c}.work-page .work-stats{max-width:650px;margin-top:29px;border-top:1px solid #c7dfef;padding-top:20px}
.work-page .work-stats span{min-height:65px;border-left-color:#c7dfef}.work-page .work-stats strong{color:var(--template-ink);font-size:clamp(29px,2.6vw,39px)}.work-page .work-stats small{color:#5d758a}
.work-page .work-insight{right:3.5%;bottom:103px;width:184px;min-height:182px;border:1px solid rgba(198,226,242,.9);border-radius:34px 10px 34px 34px;background:rgba(239,250,255,.92);box-shadow:0 18px 50px rgba(14,65,103,.18);color:var(--template-ink)}
.work-page .work-insight i{color:var(--template-blue)}

/* Shared section silhouette, card geometry and text rhythm from the reference. */
.svc-offers,.featured-cases,.contact-benefits,.contact-faq,.pricing-process{border-radius:var(--template-radius) var(--template-radius) 0 0;background-color:var(--template-pale)}
.svc-tile,.project-media,.feature-row,.package-card,.contact-panel,.contact-steps li,.benefit-grid>div,.faq-list details{border-color:#cfe3f0;border-radius:var(--template-card-radius);box-shadow:0 13px 34px rgba(17,65,100,.09)}
.svc-section-head h2,.gallery-head h2,.package-heading h2,.contact-section-head h2{font-size:clamp(40px,3.7vw,57px);line-height:1.05;letter-spacing:-.05em}
.svc-tile h3,.project-card h3,.package-card h3,.contact-steps h3{color:var(--template-ink);font-weight:800}

/* Same Bangkok CTA shape and height on every route. */
.final-cta,.pricing-cta{min-height:500px;height:500px;overflow:hidden;border-radius:var(--template-radius) 0 0 0}
.final-cta .cta-layout,.pricing-cta-copy{min-height:500px}
.final-cta .cta-layout h2,.pricing-cta h2{font-size:clamp(44px,4.4vw,66px);line-height:1.01;letter-spacing:-.05em}
.final-cta .cta-overlay,.pricing-cta::after{background:linear-gradient(90deg,rgba(2,29,59,.97) 0%,rgba(2,34,68,.8) 43%,rgba(2,39,75,.18) 77%)}
footer{background:#021a35}

@media(max-width:960px) and (min-width:681px){
  .services-page .svc-hero-copy h1,.contact-page .contact-hero-intro h1,.price-page .pricing-hero-copy h1,.work-page .work-hero-copy h1{font-size:58px}
  .work-page .work-hero-copy{width:64%}.work-page .work-insight{right:22px;width:160px;min-height:160px}
}
@media(max-width:680px){
  .site-header{height:64px}.site-header .nav{min-height:64px}.site-header .brand-lockup{width:112px}
  .services-page .svc-hero,.contact-page .contact-hero,.price-page .pricing-hero,.work-page .work-hero{min-height:760px;border-radius:0 0 58px 0;padding-top:64px}
  .services-page .svc-hero-copy h1,.contact-page .contact-hero-intro h1,.price-page .pricing-hero-copy h1,.work-page .work-hero-copy h1{font-size:44px;line-height:1.05}
  .work-page .work-hero-photo{inset:390px 0 0;border-radius:0;background-position:62% center}
  .work-page .work-hero::before{inset:64px 0 0;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.99) 47%,rgba(255,255,255,.45) 67%,rgba(255,255,255,.06) 82%)}
  .work-page .work-hero::after{right:-20%;left:-20%;height:76px;transform:translateY(74%) rotate(1.4deg)}
  .work-page .work-hero-inner{min-height:696px;align-items:flex-start}.work-page .work-hero-copy{width:100%;padding:55px 0 0}
  .work-page .work-hero-copy>p:not(.kicker){max-width:100%;font-size:13px}.work-page .work-stats{max-width:100%;grid-template-columns:repeat(4,1fr);gap:0;margin-top:22px;padding-top:15px}
  .work-page .work-stats span{min-height:58px;padding:0 7px}.work-page .work-stats span:nth-child(3){padding-left:7px;border-left:1px solid #c7dfef}.work-page .work-stats strong{font-size:24px}.work-page .work-stats small{font-size:8px}
  .work-page .work-insight{right:15px;bottom:64px;width:145px;min-height:132px;padding:18px;border-radius:26px 8px 26px 26px}
  .svc-offers,.featured-cases,.contact-benefits,.contact-faq,.pricing-process{border-radius:40px 40px 0 0}
  .svc-section-head h2,.gallery-head h2,.package-heading h2,.contact-section-head h2{font-size:38px}
  .final-cta,.pricing-cta{min-height:570px;height:570px;border-radius:40px 0 0 0}.final-cta .cta-layout,.pricing-cta-copy{min-height:570px}
  .final-cta .cta-layout h2,.pricing-cta h2{font-size:42px}
}
@media(max-width:360px){
  .services-page .svc-hero-copy h1,.contact-page .contact-hero-intro h1,.price-page .pricing-hero-copy h1,.work-page .work-hero-copy h1{font-size:39px}
  .work-page .work-stats strong{font-size:21px}.work-page .work-insight{width:128px;min-height:120px}
}

/* v63 — premium hero finish: readable copy, cyan atmosphere and a soft lower mist. */
.hero-photo::after{
  background:
    radial-gradient(ellipse 46% 40% at 81% 16%,rgba(71,192,255,.22) 0%,rgba(93,207,255,.09) 42%,transparent 73%),
    linear-gradient(0deg,rgba(255,255,255,.98) 0%,rgba(239,250,255,.73) 10%,rgba(255,255,255,.2) 26%,transparent 43%),
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.995) 28%,rgba(255,255,255,.91) 40%,rgba(242,251,255,.58) 52%,rgba(255,255,255,.12) 69%,transparent 82%),
    radial-gradient(ellipse 82% 44% at 15% 100%,#fff 0%,rgba(255,255,255,.83) 44%,rgba(225,246,255,.24) 76%,transparent 100%);
}
.services-page .svc-hero::before,
.contact-page .contact-hero::after,
.price-page .pricing-hero::before,
.work-page .work-hero::before{
  background:
    radial-gradient(ellipse 49% 52% at 81% 16%,rgba(73,190,255,.2) 0%,rgba(81,201,255,.08) 43%,transparent 72%),
    linear-gradient(0deg,rgba(235,249,255,.8) 0%,rgba(255,255,255,.2) 27%,transparent 48%),
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.995) 33%,rgba(255,255,255,.87) 48%,rgba(243,251,255,.43) 61%,rgba(255,255,255,.08) 77%,rgba(4,46,82,.04) 100%);
}
.services-page .svc-hero-media::after{
  background:
    radial-gradient(circle at 77% 19%,rgba(80,201,255,.3) 0%,rgba(72,191,255,.09) 35%,transparent 58%),
    linear-gradient(180deg,rgba(12,91,151,.01),rgba(8,67,116,.12));
}
.services-page .svc-hero-card,
.work-page .work-insight{
  background:linear-gradient(145deg,rgba(250,254,255,.95),rgba(229,247,255,.88));
  border-color:rgba(255,255,255,.92);
  box-shadow:0 24px 70px rgba(10,61,100,.2),inset 0 1px 0 rgba(255,255,255,.94);
}

@media(max-width:680px){
  .hero-photo::after{
    background:
      radial-gradient(ellipse 92% 35% at 72% 72%,rgba(65,187,255,.18),transparent 72%),
      linear-gradient(180deg,#fff 0%,rgba(255,255,255,.995) 45%,rgba(245,251,255,.8) 58%,rgba(255,255,255,.34) 73%,rgba(255,255,255,.04) 88%),
      linear-gradient(0deg,rgba(255,255,255,.96),rgba(238,249,255,.45) 17%,transparent 34%);
  }
  .services-page .svc-hero::before,
  .contact-page .contact-hero::after,
  .price-page .pricing-hero::before,
  .work-page .work-hero::before{
    background:
      radial-gradient(ellipse 92% 32% at 73% 73%,rgba(67,189,255,.17),transparent 73%),
      linear-gradient(180deg,#fff 0%,rgba(255,255,255,.995) 45%,rgba(244,251,255,.8) 58%,rgba(255,255,255,.34) 74%,rgba(255,255,255,.04) 89%),
      linear-gradient(0deg,rgba(236,249,255,.68),transparent 31%);
  }
}